.container{
	width:100%;
	height:640px;
}

.header{
	width:100%;
	height:70px;
	background:#363D45;
	position:static;
}
.h-icons{
	position: absolute;
	width: 100%;
}
.h-ico{
	position: inherit;
	margin: 0;
	z-index: 4;
	top: -10px;
	width: 80px;
	height: 80px;
}
.h-ico img{
	width: 80px;
	height: 80px;
}
.ico1{
	left: 50px;
	z-index: 5;
}
.ico2{
	left: 160px;
	z-index: 5;
}
.ico3{
	right: 160px;
	z-index: 5;
}
.ico4{
	right: 50px;
	z-index: 5;
}

#menu{
	width:100%;
	height:50px;
	font-size: 30px;
	background: #363D45;
	color:#fff;
	text-align: center;
	padding-top:20px;
	position:fixed;
	z-index: 4;
}


#menu a:hover{
	color: #47a3da;
	/*background: rgba(255, 153, 51, 0.4);*/
}
#menu a.current:hover{
	color: #47a3da;
	/*background: rgba(255, 153, 51, 0.4);*/
}

#menu a.current {
	color: #fff;
	/*background: rgba(255, 153, 51, 0.4);*/
}

.main{
	width:100%;
	min-height:640px;
	background:#ddd;
	color:#333;
	
}

.main section.page1 {
    background:#363D45;
	width:100%;
	min-height:640px;
}
.main section.page2 {
    background:#f95379;
	width:100%;
	min-height:640px;
}

.main section.page3 {
    background:#363D45;
	width:100%;
	min-height:640px;
}

.main section.page4 {
    background:#363D45;
	width:100%;
	min-height:640px;
}


.w-left {
	max-width:50%;
	height:auto;
	float:left;
	text-align:right;
}
.w-right {
	max-width:50%;
	height:auto;
	float:right;
	text-align:left;
} 
section div h1{
	font-size: 45px;
	position: relative;
	top: 90px;
	color: rgba(255, 255, 255, 0.5);
}
div article p{
	font-size: 30px;
	padding: 0px;
	text-align: center;
	background: url('img/');
}

#diamond1 {
   width: 200px;
	height: 200px;
	background: #FA987D;
	margin: 3px 0 0 30px;
	border: 1px solid #f95379;
	margin-top: 113px;
	margin-left: 240px;
	cursor:pointer;
   /* Rotate */
	  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
   /* Rotate Origin */
   
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
#diamond2 {
   width: 200px;
	height: 200px;
	background: #10A296;
	margin: 3px 0 0 30px;
	border: 1px solid #f95379;
	margin-top: -200px;
	margin-left: 526px;
	cursor:pointer;
   /* Rotate */
	  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
   /* Rotate Origin */
   
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
#diamond3 {
   width: 200px;
	height: 200px;
	background: #72CCA7;
	margin: 3px 0 0 30px;
	border: 1px solid #f95379;
	margin-top: -60px;
	margin-left: 382px;
	cursor:pointer;
   /* Rotate */
	  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
   /* Rotate Origin */
   
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

#diamond1:hover {
	background: #a93750;
	color: #fff;
}
#diamond2:hover {
	background: #a93750;
	color: #fff;
}
#diamond3:hover {
	background: #a93750;
	color: #fff;
}

#aplication {
	position:absolute;
	top: 0;
}
.footer{
	width:100%;
	height:35px;
	background:#363D45;
	position: fixed;
	color: #fff;
	bottom: 0px;
	text-align: center;
}
.footer a:hover{
	color: #47a3da;
	text-decoration: none;
}
.para1{
	width: auto;
	padding: 10px;
	border: 1px solid #fff;
	margin-bottom: 3px;

}
.para2{
	width: auto;
	padding: 10px;
	border: 1px solid #fff;
	margin-bottom: 3px;
}
.para3{
	width: auto;
	padding: 10px;
	border: 1px solid #fff;
	margin-bottom: 3px;
}

.para1:hover{
	background: #fff;
}
.para2:hover{
	background: #fff;
}
.para3:hover{
	background: #fff;
}

/* Example for media query */
/* proyektor */
@media screen and (max-width: 810px) { 

	section div h1 {
	font-size: 35px;
	position: relative;
	top: 145px;
	color: rgba(255, 255, 255, 0.5);
	}

	div article p{
		font-size: 15px;
		padding: 0px;
		text-align: center;
		
	}

	#diamond1 {
	   width: 100px;
		height: 100px;
		background: #FA987D;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin-top: 89px;
		margin-left: 184px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond2 {
	   width: 100px;
		height: 100px;
		background: #10A296;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin-top: -101px;
		margin-left: 328px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond3 {
	   width: 100px;
		height: 100px;
		background: #72CCA7;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin-top: -31px;
		margin-left: 256px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	#diamond1:hover {
		background: #a93750;
		color: #fff;
	}
	#diamond2:hover {
		background: #a93750;
		color: #fff;
	}
	#diamond3:hover {
		background: #a93750;
		color: #fff;
	}

}

/*smartphone type1*/
@media screen and (max-width: 380px) { 
	section div h1 {
		font-size: 40px;
		position: relative;
		top: 130px;
		color: rgba(255, 255, 255, 0.5);
	}

	div article p{
		font-size: 15px;
		margin: 0px;
		text-align: center;
		
	}
	#diamond1 {
	   width: 75px;
		height: 75px;
		background: #FA987D;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: 60px 0px 0px 219px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond2 {
	   width: 75px;
		height: 75px;
		background: #10A296;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: -98px 0px 0px 360px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond3 {
	   width: 75px;
		height: 75px;
		background: #72CCA7;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: -30px 0px 0px 289px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	#diamond1:hover {
		background: #a93750;
		color: #fff;
	}
	#diamond2:hover {
		background: #a93750;
		color: #fff;
	}
	#diamond3:hover {
		background: #a93750;
		color: #fff;
	}
	.para1{
		width: auto;
		padding: 10px;
		border: 1px solid #fff;
		margin-bottom: 3px;
		max-height: 60px;
		overflow: auto;
	}
	.para2{
		width: auto;
		padding: 10px;
		border: 1px solid #fff;
		margin-bottom: 3px;
		max-height: 60px;
		overflow: auto;
	}
	.para3{
		width: auto;
		padding: 10px;
		border: 1px solid #fff;
		margin-bottom: 3px;
		max-height: 60px;
		overflow: auto;
	}

}

/*smartphone type2*/
@media screen and (max-height : 480px) { 
	section div h1 {
		font-size: 22px;
		position: relative;
		top: 120px;
		color: rgba(255, 255, 255, 0.5);
	}
	#diamond1 {
	   width: 75px;
		height: 75px;
		background: #FA987D;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: 95px 0px 0px 184px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond2 {
	   width: 75px;
		height: 75px;
		background: #10A296;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: -99px 0px 0px 324px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	#diamond3 {
	   width: 75px;
		height: 75px;
		background: #72CCA7;
		margin: 3px 0 0 30px;
		border: 1px solid #f95379;
		margin: -30px 0px 0px 254px;
		cursor:pointer;
	   /* Rotate */
		  -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	   /* Rotate Origin */
	   
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
}

/*lapotop fullscreen*/
@media screen and (max-height : 810px) { 
	.main section.page1 {
    background:#363D45;
	width:100%;
	min-height:810px;
	}
	.main section.page2 {
	    background:#f95379;
		width:100%;
		min-height:810px;
	}

	.main section.page3 {
	    background:#363D45;
		width:100%;
		min-height:810px;
	}

	.main section.page4 {
	    background:#363D45;
		width:100%;
		min-height:810px;
	}
	.main{
	width:100%;
	min-height:810px;
	background:#ddd;
	color:#333;	
	}
}

/*HD*/
@media screen and (max-height : 992px) { 
	.main section.page1 {
    background:#363D45;
	width:100%;
	min-height:992px;
	}
	.main section.page2 {
	    background:#f95379;
		width:100%;
		min-height:992px;
	}

	.main section.page3 {
	    background:#363D45;
		width:100%;
		min-height:992px;
	}

	.main section.page4 {
	    background:#363D45;
		width:100%;
		min-height:992px;
	}
	.main{
	width:100%;
	min-height:992px;
	background:#ddd;
	color:#333;	
	}
}

/*tablet*/
@media screen and (max-height : 1024px) { 
	.main section.page1 {
	    background:#363D45;
		width:100%;
		min-height:1024px;
	}
	.main section.page2 {
	    background:#f95379;
		width:100%;
		min-height:1024px;
	}

	.main section.page3 {
	    background:#363D45;
		width:100%;
		min-height:1024px;
	}

	.main section.page4 {
	    background:#363D45;
		width:100%;
		min-height:1024px;
	}
	.main{
	width:100%;
	min-height:1024px;
	background:#ddd;
	color:#333;	
	}
}