@charset "UTF-8";
*{
   margin:0;
   padding: 0;
   font-family: Quicksand;
   text-decoration: none; 
}
.clearfix{ overflow: auto; }
 
              /*section */                      
.content{
	width: 100%;
	background: #fff;
	margin-top: 80px;
}

.right{
	margin: 0 auto;
	/*max-width: 1200px;*/
	/*height: 600px;*/
	background:#fff;
	
}
.right h1{
    text-align: center;
    font-size: 45px;
    font-weight: 100;
    font-family: Roboto;
    color: #4d4d4d;
    letter-spacing: 5px;
}
.contact{
	width:1026px;
	/*height: 650px;*/
	background: #fff;
	margin: 50px auto;
}

.box{
	width: 300px;
	height: 320px;
	/*background: #f2f2f2;*/
	float: left;
	margin-right: 20px;
	margin-left: 20px;
	border:1px solid #eee;
}
.box-icon{
	background-image: url(../img/p_male.png);
	margin:30px auto;
	width: 180px;
	height: 180px;
	background-size: 100%;
	transition: .7s;
	cursor: pointer;
}
.box-icon:hover{
	opacity: .5;
	background-size: 100%;
}
.box-icon2{
	background-image: url(../img/p_female.png);
	margin:30px auto;
	width: 180px;
	height: 180px;
	background-size: 100%;
	transition: .7s;
	cursor: pointer;
}
.box-icon2:hover{
	opacity: .5;
	background-size: 100%;
}
.box-icon3{
	background-image: url(../img/saliya.png);
	margin:30px auto;
	width: 180px;
	height: 180px;
	background-size: 100%;
	transition: .7s;
	cursor: pointer;
}
.box-icon3:hover{
	opacity: .5;
	background-size: 100%;
}
#box4{margin-top: 10px; margin-bottom: 20px;}
.box-icon4{
	background-image: url(../img/malisha.png);
	margin:30px auto;
	width: 180px;
	height: 180px;
	background-size: 100%;
	transition: .7s;
	cursor: pointer;
}
.box-icon4:hover{
	opacity: .5;
	/*background-image: url(../img/saliya_h.png);*/
	background-size: 100%;
}

.box h1{
	font-size: 22px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #000;
	letter-spacing: 0px;
}
.box p{
	margin-top: 5px;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	color:#666666;
	transition: .2s;
}
.box p:hover{
	color:#737373;
}
   
@keyframes movimiento{
    from{
        background-position: bottom left;
    }to{
        background-position: top right;
    }
}



/*@media (max-width: 1284px){
	
}*/




@media (max-width: 1066px){
	.contact{
	width:966px;
}

.box{
	width: 300px;
	height: 325px;
	margin-right: 10px;
	margin-left: 10px;
}
}
@media (max-width: 1024px){
.contact{
	width:876px;
	height: 300px;
	background: #fff;
	margin: 50px auto;
}

.box{
	width: 250px;
	height: 300px;
	background: #fff;
	float: left;
	margin-right: 20px;
	margin-left: 20px;
}

.box-icon{
	background-image: url(../img/p_male.png);
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box-icon2{
	background-image: url(../img/p_female.png);
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box-icon3{
	background-image: url(../img/saliya.png);
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box h1{
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #000;
}
.box p{
	margin-top: 10px;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	color:#666666;
}

}


@media (max-width: 922px){
	.contact{
	width:816px;
	height: 300px;
	background: #fff;
	margin: 50px auto;
}

.box{
	width: 250px;
	height: 300px;
	background: #fff;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
}
}

@media (max-width: 844px){
.content{
	width: 100%;
	background: #fff;
	margin-top: 50px;
}

.right{
	margin: 0 auto;
	/*height: 1100px;	*/
}
.contact{
	width:500px;
	/*height: 1000px;*/
	/*background: green;*/
	margin: 20px auto;
}

.box{
	width: 500px;
	height: 300px;
	background: #fff;
	margin-top:20px;
	margin-left: 0px;
}
/*.box-icon{
	margin:30px auto;
	width: 100px;
	height: 100px;
	background:none;
}*/
.box-icon{
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box-icon2{
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box-icon3{
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box-icon4{
	margin:30px auto;
	width: 150px;
	height: 150px;
	background-size: 100%;
}
.box h1{
	font-size: 25px;
	margin: 0 auto;
	color: #000;
}
.box p{
	margin-top: 10px;
	font-size: 17px;
	color:#666666;
}


}

@media (max-width: 540px){
.content{
	margin-top: 20px;
}
.right h1{
    font-size: 35px;
    font-weight: 100px;
}

.contact{
	width:360px;
	height: 1000px;
	/*background: green;*/
	margin: 10px auto;
}

.box{
	width: 360px;
	height: 300px;
	background: #fff;
	margin-top:20px;
	margin-left: 0px;
} 
.box h1{
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #000;
} 

}


@media (max-width: 375px){

.right h1{
    font-size: 32px;
    font-weight: 100px;
}

.contact{
	width:320px;
	height: 1000px;
	/*background: green;*/
	margin: 10px auto;
}
.box h1{
	font-size: 23px;
}
.box p{
	font-size: 17px;
}	

.box{
	width: 320px;
	height: 300px;
	background: #fff;
	margin-top:20px;
	margin-left: 0px;
}  
	
}

@media (max-width: 360px){
.right{
	margin: 0 auto;
	/*height: 1050px;*/
	background:#fff;	
}

.right h1{
    font-size: 32px;
    font-weight: 100px;
}

.contact{
	width:320px;
	/*height: 960px;*/
	/*background: green;*/
	margin: 10px auto;
}
.box h1{
	font-size: 23px;
}
.box p{
	font-size: 17px;
}	

.box{
	width: 320px;
	height: 300px;
	background: #fff;
	margin-top:20px;
	margin-left: 0px;
}  	


}

@media (max-width: 320px){

.right h1{
    font-size: 32px;
    font-weight: 100px;
}

.contact{
	width:320px;
	height: 960px;
	/*background: green;*/
	margin: 10px auto;
}
.box h1{
	font-size: 23px;
}
.box p{
	font-size: 17px;
}	

.box{
	width: 314px;
	height: 300px;
	background: #fff;
	margin-top:20px;
	margin-left: 0px;
}  	


}