@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: 500px;
	background:#fff;
	
}
.right h1{
    text-align: center;
    font-size: 40px;
    font-weight: 100;
    font-family: Roboto;
    color: #4d4d4d;
}
.contact{
	width:1020px;
	height: 300px;
	background: #fff;
	margin: 50px auto;
}

.box{
	width: 300px;
	height: 300px;
	background: #f2f2f2;
	float: left;
	margin-right: 20px;
	margin-left: 20px;
}
.box-icon{
	margin:30px auto;
	width: 100px;
	height: 100px;
	background:none;
}
.box a i{
	color:#6dbd63;
	font-size: 50px;
	border:2px solid #6dbd63;
	border-radius: 100%;
	padding: 20px 15px;
	margin: 0 auto;
	background: #fff;
	transition: .6s;
}
.box a i:hover{
	color:#fff;
	background: #6dbd63; 
}
.box h1{
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #4d4d4d;
}
.box p{
	margin-top: 10px;
	font-size: 17px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	color:#00cc00;
	transition: .2s;
}
.box p:hover{
	color:#00b300;
}
   
@keyframes movimiento{
    from{
        background-position: bottom left;
    }to{
        background-position: top right;
    }
}



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




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

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

.box{
	width: 250px;
	height: 300px;
	background: #f2f2f2;
	float: left;
	margin-right: 20px;
	margin-left: 20px;
}
.box-icon{
	margin:30px auto;
	width: 100px;
	height: 100px;
	background:none;
}
.box a i{
	color:#6dbd63;
	font-size: 50px;
	border:2px solid #6dbd63;
	border-radius: 100%;
	padding: 20px 15px;
	margin: 0 auto;
	background: #fff;
	transition: .6s;
}
.box h1{
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #4d4d4d;
}
.box p{
	margin-top: 10px;
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	color:#00cc00;
	transition: .2s;
}

}


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

.box{
	width: 250px;
	height: 300px;
	background: #f2f2f2;
	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: #f2f2f2;
	margin-top:20px;
	margin-left: 0px;
}
.box-icon{
	margin:30px auto;
	width: 100px;
	height: 100px;
	background:none;
}
.box a i{
	color:#6dbd63;
	font-size: 50px;
	border:2px solid #6dbd63;
	border-radius: 100%;
	padding: 20px 15px;
	margin: 0 auto;
	background: #fff;
	transition: .6s;
}
.box h1{
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #4d4d4d;
}
.box p{
	margin-top: 10px;
	font-size: 17px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-decoration: none;
	color:#00cc00;
	transition: .2s;
}


}

@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: #f2f2f2;
	margin-top:20px;
	margin-left: 0px;
}  

}


@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: #f2f2f2;
	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: #f2f2f2;
	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: 320px;
	height: 300px;
	background: #f2f2f2;
	margin-top:20px;
	margin-left: 0px;
}  	


}