@charset "utf-8";



/* CSS Document */







@import url(normalize.css);



@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700);



@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500&subset=latin,latin-ext);



@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic,300);



@import url(https://fonts.googleapis.com/css?family=Courgette);











/*resets*/



*{



	box-sizing:border-box;



	border:none;



	text-decoration: none;



}



ul, ol{



	margin: 0;



	padding: 0;



	list-style: none;



}







figure{



	margin: 0;



	display:block;



}







.img-responsive {



	width:100%;



	height:auto;



	



	}











/*boton arriba*/



#IrArriba {



position: fixed;



bottom: 30px; /* Distancia desde abajo */



right: 30px; /* Distancia desde la derecha */



}







#IrArriba span {



width: 60px; /* Ancho del botón */



height: 60px; /* Alto del botón */



display: block;



background: url(imgs/arriba.png) no-repeat center center;



}







/*basicos*/



html{



	font-size: 10px;



}







body { font-family: 'Roboto', sans-serif;



background:url(imgs/fondo.jpg)  repeat-x #2481AA fixed;







	



	}



h1 { font-size:2.9em;



font-weight:400;



	



	}







h2 { font-size:1.5em;



font-weight:200;



color:#06F;



	



	}







h3 { 



font-size:1.3em;



font-weight:200;



color:#004080;



background-color:#CCDF82;



widht:100%;



	border-radius:5px;



	padding-left:1em;



	



	}











hr{ 



	border:0;



	height:2px;



	border-top:1px dashed black;



	border-bottom:1px dashed #666666;



}







#container{



	margin:auto;



	/*max-width: 1000px;*/



	border:dotted 1px #000000;



	background-color:#ECE7BF;



}



/*.topi{



	



	max-width:298px;



	margin-left:auto;



	margin-right:auto;



	text-align:center;



	



	



	



	}*/

#slider {display:none;

	

	}

.central {



	/*max-width:1000px;*/



	margin-left:auto;



	margin-right:auto;



	



	}















.top{



	/*max-width:1000px;*/



	margin-left:auto;



	margin-right:auto;



	padding-left:0.3em;	



	float:left;



	width:50%;	



		color:#FFF;



	



	font-size:4em;



	line-height:0.6em;



	padding-top:0.5em;



	padding-bottom:0.5em;



	text-align:left;



}







.ancho { width:100%;



background:url(imgs/rayas.jpg) repeat;



margin-top:-1.8em;







	



	}







.logo {



	font-family: 'Roboto Condensed', sans-serif;



	font-size: 3.4em;



	color: #333;



	width: 35%;/*60*/



	float: left;



	margin-right: 0%;



	margin-left: 4%;



	margin-top:0.5%;/*2*/



	margin-bottom:1%;



	font-weight: bold;



}







.color { 



	color:#47ABD7;



	font-family: 'Courgette';



	font-size:0.8em;



	



	}











.encabezado {



	width:100%;



	background-image:url(imgs/enc.jpg);



	background:#FFF;



	height:150px;/*120*/



	margin-top:1em;



	/*margin-bottom:1em;*/



	}



.telhome {



	width:50%;

	font-size:2.2em;

	text-align:center;

	height:auto;

	color:#333;

	font-family: 'Roboto Condensed', sans-serif;

	font-weight:bold;

	margin-top:0em;/*0.2*/

	float:left;





	}



.fotoprincipal {



	max-width:1000px;



	margin-left:auto;



	margin-right:auto;



	}







#porta {



	max-width:1000px;



	margin-left:auto;



	margin-right:auto;



	}







.centro {



width:100%;



height:100px;



	}







.centrodos {



	/*max-width:1000px;*/



	margin-left:auto;



	margin-right:auto;



	height:auto;



	}











.cleaner{



	clear: both;



}



img-responsive{



	width: 100%;



	height:auto;



}







.toogle-button { display:none;



	}







.botonera ul{



	font-family: 'Roboto', sans-serif;



	margin-top:1em;



	text-transform:none;



	text-decoration:none;



	width:60%;/*60*/



	margin-left:40%;/*40*/



	}



	



.botonera li{



	float:left;



	text-transform:none;



	text-decoration:none;



	text-align:center;



	/*display:block;*/



	width:18%;/*18*/



	margin-right:2%;



	margin-top:3.2em;



	margin-bottom:0.5em;



	border: solid 1px #FFFFFF;



	border-radius:5px;



	background-color:#AAC832;



	}



	



/*.botonera li:first-child {



	border-left: solid 2px #FFFFFF;



	}







.botonera li:last-child  {



	border-right: solid -2px #FFFFFF;



	}*/







.botonera a{



	



	padding:0.5em 0.5em 0.5em 0.5em;



  display:block;



	font-size:1.3em;



	color:#000;



	font-weight:bold;



	text-transform:none;



	}







.botonera a:hover {



	color:#fff;



	font-weight:bold;



	background-color:#47ABD7;



	display:block;



	border-radius:5px;



	}



	



.principal{



	background-color:#FFF;

	width:100%;

	margin-top:1em;



	border:thin solid #666;



	}



	



/*gri lo saco porque no se hace responsive no se porque .barra{



	widht:100%;



	height:1em;



	background-color:#47ABD7;







}*/



.pictureprincipal {

	display:none;

	max-width:1008px;

	height:auto;

	margin:0 auto 0 auto;

	

	

	}







.titulos {



	width:100%;



	background:url(imgs/fondotitulo.jpg) repeat-x;



	border-radius:5px;



	height:49px;



	padding-top:1em;



	color:#fff;



	padding-left:0.5em;



	



	}



.home {



	width:90%;



	margin-left:5%;



	margin-right:5%;



	font-size:1.7em;



	color:#333;



	text-align:left;



	font-family: 'Roboto', sans-serif;



		margin-bottom:0em;



		padding:0.5em ;



		margin-top:1em;

	}



.servicios {

	width:90%;

	margin-left:5%;

	margin-right:5%;

	font-size:1.9em;

	color:#004080;

	text-align:center;

	font-family: 'Roboto', sans-serif;

	margin-bottom:0em;

	padding:0.5em ;

	margin-top:1em;

	}





.foto {



	width:50%;



	float:right;







font-size:1.4em;



	color:#333;



	margin-left:1em;



	float:left;



	font-family: arial;



	line-height:1.5em;



	padding:1em 1em 0em 1em;



	text-align:left;



	}











.text {



	width:45%;



	font-size:1.4em;



	color:#333;



	margin-left:1em;



	float:left;



	font-family: arial;



	line-height:1.5em;



	padding:1em;



	text-align:justify;

	}



.text img {



	width:62%;

	}







footer {

	width: 100%;

	background: #AAC832;

	font-size: 1.4em;

	color: #000;

	padding: 0.5em 0 0.5em  0;

	text-align: center;

	margin-top: 0em;



	}







	



	



.red {



	float:left;



	width:20%;



	margin-left:4%;



	}



	



	



.red img {



	display:block;



	width:106px;



	



	}







.dire {



	width:70%;



	margin-right:4%;



	float:right;



	text-align:right;



	margin-top:0em;



}



.tel {



	display:none;



	} 







.pie {



	text-align:center;



	



	font-size:1.2em;



	width:100%;



	margin:0.5em auto 0 auto;



	



	}



.pie a{



	text-decoration:none;



	text-transform:none;



	color:#FFFFFF;

	}





.contacto {

	width:46%;

	float:left;

	}

	

.contacto2 {

	width:48%;

	margin-left:6%;

	float:left;

	}



input,textarea {

	margin-top:2%;

	border: 1px dotted #999;

	color:#000000;

	font-family : inherit;

  font-size:80%;

  width:95%;

	

	}

	

.verif{ display: none; }



/*CLIENTES*/



.clientes {

	width:15%;

	height:120px;	

	float:left;

	margin-left:1em;

	margin-right:1em;

	margin-top:1em;

	margin-bottom:1em;

	color:#4F4F4F; 

	}





	

.clientes img {

	margin-bottom:0.5em;

	border:thin solid #979595;

	}

	

	

.clientes figure {

	display:block;

	width:100%;

	}



.clientes article:nth-of-type(4n){

		margin-right: 0;

	}



/*CLIENTES2*/



.clientes2 {

	width:250px;

	height:100%;	

	float:left;

	margin-left:2.5em;

	margin-right:1em;

	margin-top:1em;

	margin-bottom:1em;

	}





	

.clientes2 img {

	margin-bottom:0.5em;

	border:thin solid #979595;

	width:100%;

	height:100%;

	}

	

	

/*.clientes2 figure {

	display:block;

	width:100%;

	}*/



/*.clientes2 article:nth-of-type(3n){

		margin-right: 0;

	}*/

	

.resaltadoh{

	width:60%;

	margin:auto;

	background-color:#2481AA;

	border-radius:8px;

	color:#FFF;

	padding:1em;

	text-align:center;

	font-size:1.4em;

	text-shadow:0.1em 0.1em #000;

	}

	

.res2{

		text-shadow:none;



}



.portavideo {



	max-width:700px;



	height:auto;



	margin-left:auto;



	margin-right:auto;}







.video {



padding-bottom:56.25%;



height:0; overflow: hidden;



position: relative;



margin-left:auto;



margin-right:auto;}







.video iframe {



	



	position: absolute;



height:100%;



width:100%;



top:0;



left:0;}





/*media queri////////////*/

@media screen and (max-width: 1100px){

	



.clientes2 {

	width:180px;

	height:100%;	

	float:left;

	margin-left:1em;

	margin-right:1em;

	margin-top:1em;

	margin-bottom:1em;

	}	

	

	}





@media screen and (max-width: 1007px){

	



.pictureprincipal {

	display:block;}

	





.clientes { 

	width:18%;

	float:left;

	margin-bottom:2em;

	margin-left:3em;

		}	

	

.clientes2 {

	width:180px;

	height:100%;	

	float:left;

	margin-left:1em;

	margin-right:1em;

	margin-top:1em;

	margin-bottom:1em;

	}	

	

	}





@media screen and (max-width: 727px){



	

	.clientes { 

	width:30%;

 float:left;

 margin-bottom:2em;

 margin-left:2em;

		

		

		}



.caja article:nth-of-type(4n){

	

		margin-right: 0;

	

	

	}



.clientes article:nth-of-type(2n){

	

		margin-right: 0;

	

	

	}

	



.clientes2 {

	width:200px;

	}





	.top{







	width:90%;	



	float:none;



	margin-left:auto;



	margin-right:auto;



	text-align:center;



		



	



}







.logo {



	width:90%;	



	float:none;



	margin-left:5%;



	margin-right:5%



	



	}















	



	nav {



		display:none;



		



		}







.encabezado {



	height:180px;



	padding-top:1em;



	}



			



.toogle-button { display:block;



	



	}







.toogle-button{



	display: block;



	width: 50px;



	margin:1em auto 1em auto;



	background-color: #333;



	border-radius: 10px;



	padding: 10px;



}



.toogle-button span{



	display: block;



	border-top: solid 2px #fff;



	border-bottom: solid 2px #fff;



	height: 16px;



	position: relative;



	text-indent: -9999px;



}



.toogle-button span:after{



	content: '';



	width: 100%;



	height: 2px;



	background-color: #fff;



	position: absolute;



	left: 0;



	top: 50%;



	margin-top: -1px;



}







.botonera ul{



	font-family: 'Roboto', sans-serif;



	margin-top:0;



		text-transform:none;



	text-decoration:none;



	width:100%;



	margin-left:0;



	



	



	}



.botonera li{



	



	



	margin-top:0em;



	width:100%;



	margin-right:auto;



	margin-left:auto;



	border-bottom:#FFFFFF 1px solid;



	



	



	



	}















.botonera a{



	padding-top:1.5em;



  padding-bottom:0;



	display:block;



	font-size:1.2em;



	color:#000;



	text-transform:none;



	text-decoration:none;



	height:48px;







	}







.botonera a:hover {

	background:none;

	background-color:#47ABD7;

	color:#FFF;

	font-weight:700;

	}



.telhome {

	font-size:2.2em;

	text-align:center;

	}



.text {



	width:90%;



	margin-left:5%;



	margin-right:5%;



	



	}







.text img {



	width:90%;



	margin-left:5%;



	margin-right:5%;



	



	



	}







.foto {



	width:90%;



	margin-left:5%;



	margin-right:5%;



	



	}



















.dire {



	display:none;



	



	



	}







.tel {



	display:block;



float:right;



width:50%;



margin-top:0.8em;







	



	}





.telhome{

	width:100%;

	text-align:center;

}









.centro{



	min-height:50px;



	



	}







}



	



@media screen and (max-width: 655px){	







.encabezado {



	height:200px;



	padding-top:1em;



	}







.contacto {



	width:100%;



	margin-bottom:1em;







	}







.contacto2 {



	width:100%;



	}	

	

	.telhome{

	width:100%;

	text-align:center;

}



	.clientes { 

	width:40%;

 float:left;

 margin-bottom:0em;

 margin-left:1em;

		

		

		}





.resaltadoh{

	width:90%;

	}



}











@media screen and (max-width: 384px){



	



.encabezado {



	height:250px;/*180*/



}







.tel {



	display:block;



float:right;



width:50%;



margin-top:0.8em;



	}









.home {font-size:1.5em;width:98%;



	margin-left:1%;



	margin-right:1%;



}



.logo {



	font-size: 2.8em;



	width: 100%;



	text-align:center;



	margin-left: 0%;











}















.color { 



	font-size:0.7em;



	}



	



	



.contacto {



	width:100%;



	margin-bottom:1em;







	}







.contacto2 {



	width:100%;



	}



	.clientes { 

	width:90%;

 float:left;

 margin-bottom:0em;

 margin-left:1em;

		

		

		}





.clientes2 {

	width:200px;

	height:100%;	

	float:none;

	}

}