@charset "utf-8";
/* CSS Document */

*, html, body, centrar {
	font-size:100%;
	font-family:"blue_highway_rg",Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
html {
	background:#f1f1f1;
}
body {
	/*background:url(../img/fondoCompleto.png) top left repeat-x #f1f1f1;*/
	color:#555555;
	font-size:18px;
}
.centrar {
	width:100%;
	max-width:960px;
	margin:30px auto 0 auto;
}

/* TEXTOS */
h1 {
	background-color: #13776d;
	color:#FFF;
	font-size:40px;
	font-variant:small-caps;
	margin-bottom:25px;
	text-align:center;
	padding: 15px 0;
}
h2 {
	color: #444;
	font-size: 30px;
	text-align: center;
	margin:30px;
}
h3 {}
h4 {}
h5 {}
h6 {}
p{
	margin:10px 0;
}
.destacado {
	color:#13776D;
	font-size:24px;
}
	.destacado a {
		text-decoration:none;
	}
/* Listas */
ul {
	margin:25px 0 20px 0;
	padding-left:40px;	
}
li {
	margin:10px 0;
}

/* ENLACES */
a {
	color:#13776D;
}
a:hover {
	color:#00997F;
}
a:visited {}
a img {border:none;}

/* CABECERA */
header {
	width:100%;
	height:195px;
	background:url(../img/carretera.png) 0px bottom repeat-x, url(../img/fondo.png) 0px top  repeat-x, url(../img/cielo.png) 0px top  repeat-x;
	/*-webkit-transition: all 20s linear;
	-moz-transition: all 20s linear;
	-ms-transition: all 20s linear;
	-o-transition: all 20s linear;
	transition: all 20s linear;*/
	animation: mover 220s infinite linear;
	-webkit-animation: mover 120s infinite linear;
     -moz-animation: mover 120s infinite linear;
     -ms-animation:mover 120s infinite linear;
}
#logo {
	height:190px;
	width:325px;
	margin:0px 0 0px 15%;
	position: relative;
	background:url(../img/camion.png) 0 0 no-repeat;
	animation: camion 1s infinite ease-in-out;
	-webkit-animation: camion 1s infinite ease-in-out;
     -moz-animation: camion 1s infinite ease-in-out;
     -ms-animation:camion 1s infinite ease-in-out;
}
/* MENU */
nav {
	width:100%;
}

/* CONTENIDO */
.contenido {
	overflow:auto;
}
.col50 {
	float:left;
	margin:0 2% 0 2%;
	width:46%;
}
figure {width:auto;}
/*Servicios*/
.servicios {
	text-align: center;
}
	.servicios ul {
		list-style:none;
		margin:30px 0;
		padding:0;
	}
		.servicios ul li {
			font-size: 24px;
		}
		.servicios ul li:nth-child(2n+1) {	background:#13776D; color:#FFF; }
		.servicios ul li:nth-child(2n) {	background:#24afa1;color:#FFF;  }
		.servicios .boxes li {
			display: inline-block;
			width: 200px;
			height: 200px;
			padding:15px;
			margin:15px;
			border-radius:10px;
			text-align: center;
			font-size: 20px;
			line-height: 30px;
		}
		.servicios .boxes li i {
			display: block;
			font-size: 70px;
			margin:30px;
		}
/*Contacto*/
.contacto {
	background:#FFF;
	padding:0 0 30px 0;
}
	.contacto .centrar {
		margin-top:0;
	}
	.contacto .label {
		float: left;
		width:85px;
	}
/* Gallery */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

	.rslides li {
	  -webkit-backface-visibility: hidden;
	  position: absolute;
	  display: none;
	  margin: 0;
	  width: 100%;
	  left: 0;
	  top: 0;
	  }

	.rslides li:first-child {
	  position: relative;
	  display: block;
	  float: left;
	  }

	.rslides img {
	  display: block;
	  height: auto;
	  float: left;
	  width: 100%;
	  border: 0;
	  }

	.rslides h3 {
		color: #f4f4f4;
		text-align: center;
		font-size: 35px;
		margin:25px 0;
	}
	.galeria {
		background:#555;
	}
/* PIE */
footer {
	clear:both;
	color:#777777;
	font-size:16px;
	line-height:20px;
	margin:30px 0;
	text-align:center;
	width:100%;
}
	footer a {
		color:#666666;
	}

/* GENERAL */
.clear {clear:both;}
.clear5 {clear:both; height:5px;}
.clear10 {clear:both; height:10px;}
.floatLeft {float:left;}
.floatRight {float:right;}

/* FUENTES */
@font-face {
    font-family: 'blue_highway_rg';
    src: url('../fonts/blue_highway_rg-webfont.eot');
    src: url('../fonts/blue_highway_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blue_highway_rg-webfont.woff') format('woff'),
         url('../fonts/blue_highway_rg-webfont.ttf') format('truetype'),
         url('../fonts/blue_highway_rg-webfont.svg#regenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ANIMACIONES */
/* Fondo carretera */
@-webkit-keyframes mover {
	0%   { background:url(../img/carretera.png) 0px bottom repeat-x, url(../img/fondo.png) 0px top  repeat-x, url(../img/cielo.png) 0px top  repeat-x;}
	100% { background:url(../img/carretera.png) -7500px bottom repeat-x, url(../img/fondo.png) -3000px top  repeat-x, url(../img/cielo.png) -5000px top  repeat-x;}
}
@-moz-keyframes mover {
	0%   { background:url(../img/carretera.png) 0px bottom repeat-x, url(../img/fondo.png) 0px top  repeat-x, url(../img/cielo.png) 0px top  repeat-x;}
	100% { background:url(../img/carretera.png) -7500px bottom repeat-x, url(../img/fondo.png) -3000px top  repeat-x, url(../img/cielo.png) -5000px top  repeat-x;}
}
@-ms-keyframes mover {
	0%   { background:url(../img/carretera.png) 0px bottom repeat-x, url(../img/fondo.png) 0px top  repeat-x, url(../img/cielo.png) 0px top  repeat-x;}
	100% { background:url(../img/carretera.png) -7500px bottom repeat-x, url(../img/fondo.png) -3000px top  repeat-x, url(../img/cielo.png) -5000px top  repeat-x;}
}
@keyframes mover {
	0%   { background:url(../img/carretera.png) 0px bottom repeat-x, url(../img/fondo.png) 0px top  repeat-x, url(../img/cielo.png) 0px top  repeat-x;}
	100% { background:url(../img/carretera.png) -7500px bottom repeat-x, url(../img/fondo.png) -3000px top  repeat-x, url(../img/cielo.png) -5000px top  repeat-x;}
}

/* Camion */
@-webkit-keyframes camion {
	0%   { background:url(../img/camion.png) 0 0 no-repeat;}
	100% { 	background:url(../img/camion.png) 0 1px no-repeat;}
}
@-moz-keyframes camion {
	0%   { background:url(../img/camion.png) 0 0 no-repeat;}
	100% { 	background:url(../img/camion.png) 0 1px no-repeat;}
}
@-ms-keyframes camion {
	0%   { background:url(../img/camion.png) 0 0 no-repeat;}
	100% { 	background:url(../img/camion.png) 0 1px no-repeat;}
}
@keyframes camion {
	0%   { background:url(../img/camion.png) 0 0 no-repeat;}
	100% { 	background:url(../img/camion.png) 0 1px no-repeat;}
}


/* DISPOSITIVOS MOVILES */
@media screen and (max-width:900px){
   .col50{
	  float:none;
	  margin:0 3%;
       width:94%;
   }
   
	h1 {
		font-size:48px;
	}
	h2 {
		font-size:32px;
	}
	.rslides h3 {
		font-size: 28px;
	}
}
@media screen and (max-width:480px){
  
	#logo {
		margin:0px;
	}
	h1 {
		font-size:36px;
	}
	h2 {
		font-size:28px;
	}
	.rslides h3 {
		font-size: 25px;
	}
	.contacto .destacado {
		font-size:21px;
		font-weight: normal;
	}
	.col50{
	  float:none;
	  margin:0 3%;
       width:94%;
   }
}