@import url('https://fonts.googleapis.com/css?family=Muli:400,700,900');

html,*{
	margin:0;
	border:0;
	padding:0;
	text-decoration: none;
	outline: none;
}

/*  TIPOS  ============================================================================ */

body,input,textarea,select{font-size: 100%;font-family: 'Muli', sans-serif;}
p{font-size: 1em;line-height: 1.6em;font-weight:normal;}
h1{ font-size: 1.6em;}
h2{ font-size: 1.4em;}
h3{ font-size: 1.2em;}
h4{ font-size: 1em;}
h1, h2, h3, h4{ line-height: 1.4em;font-weight:900;}
#servicios_carrusel .titulo{font-size:1.6em;}
#servicios_carrusel h1 span{font-size:0.8em;display:block;font-weight:normal;}
#mm{font-size:12px;font-weight:700;letter-spacing:0.056em;}
#slogan{font-size:3em;font-weight:400;border-left:5px solid red;position:relative;padding-left:2em;}
.slogan{font-size:2.2em;font-weight:normal;}
.slogan span{font-weight:700;}
#telefono a{font-weight:900;}
#telefono a span,#telefono{font-weight:700;}
#funcion li h1{font-size:4em;font-weight:normal;color:black;}

/*  ADRONOS  ============================================================================ */

.separata{width:100%;clear:both;display:block;padding:2em 0;}
.separata:before{content:"";height:1px;display:block;width: 25%;margin:0 auto;}
.salto{content:"";height:1em;display:block;width: 100%;margin:1em 0;clear:both;}
.titulo:after{content:"";height:4px;width:12px;margin:1em 0 0 0;display:block;}

/*  MEDIA  ============================================================================ */

figure {margin: 0}
img, object, embed, video {vertical-align:middle;max-width: 100%;_width: 100%}
img {border: 0;	-ms-interpolation-mode: bicubic}
svg:not(:root) {overflow: hidden;}
#fondo{position:absolute;width: 100%;height:100%;top:0;z-index:1;}
#logo{width:90%;max-width:600px;}
#logo h1{font-size:1px;text-indent:-9999px;}
#adorno{position:absolute;left:0;top:-20%;width:25em;z-index:1000;}

/*  LISTAS  ============================================================================ */

#margen{padding:0 8%;}
#carrusel{position:relative;}
#servicios_carrusel li{text-align:center;color:white;padding:4em 0 3em 0;position:relative;z-index:1;}
#servicios_carrusel li img.detalle{content:"";width:100%;position:absolute;z-index:90;display:block;top:0;left:0;background:white}
#servicios_carrusel .titulo:after{background:white;margin:0.5em auto 0 auto;}
#servicios_carrusel_nav{position:absolute;width:100%;z-index:2;top:50%;margin-top:-1.5em;}
#servicios_carrusel_nav li{width:3em;height:3em;display:inline;float:left;margin-left:-1.5em;}
#servicios_carrusel_nav li:last-child{float:right;margin-right:-1.5em;}
#servicios_carrusel_nav li a{display:block;border:0;}
#servicios_carrusel img{width:25%;margin-bottom:2em;}

#logo_todo{margin:4% 0;overflow:hidden;}
#logo_todo li{display:inline;float:left;width:65%;position:relative;}
#logo_todo li:first-child{width:35%;}


#marcas li{display:inline;float:left;width:16.66%;position:relative;}
#marcas li:last-child{width:16.7%;}
#marcas li img{width:100%;margin:0 auto;z-index:1;display:block;}
#marcas li span{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:2;display:none;}
#marcas li:hover span{display:block;}

.servicios li{display:inline;float:left;width:40%;position:relative;}
.servicios li:last-child{width:55%;padding-left:5%;padding-top:1em;}
.servicios li:first-child{width:100%;}
.servicios li img{margin:1em 0;border-top:0.6em solid red;}

#direccion li{display:block;position:relative;margin-top:1em;padding-left:3em;z-index:1;}
#direccion li img{position:absolute;top:50%;margin-top:-1em;width: 2em;left:0;z-index:3;}

#map {position: relative;padding-bottom: 35%;height: 0;overflow: hidden;}
#map iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}

#telefono{float:right;text-align:left;position:relative;}
#telefono a{display:block;font-size:1.3em;}
#telefono img{position:absolute;top:50%;margin-top:-1.5em;width: 3em;left:-4em;z-index:3;}

#servicios{position:relative;}
#arreglo{padding:3em;}
#funcion li{margin:3em;}
#funcion_nav{position:absolute;z-index:2;bottom:-1.5em;right:3em;}
#funcion_nav li{width:3em;height:3em;display:inline;float:left;margin:0 0.5em;}
#funcion_nav li a{display:block;border:0;}

/*   GRID ============================================================================ */


body{height:101%;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.centrado{max-width: 1200px;margin:0 auto;position:relative;padding:3%;}
#header .centrado{padding:0;}
.orden{position:relative;z-index:200;}
#creditos{position:relative;}
#contacto{text-align:right;padding:0 1%;}

.section{clear: both;padding: 0px;margin: 0px;}
.group:before,.group:after {content:"";display:table;}
.group:after {clear:both;}
.col {display: block;float:left;margin: 1% 0 1% 2%;}
.col:first-child {margin-left: 0;}
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: 83%;}
.span_4_of_6 {width: 66%;}
.span_3_of_6 {width: 49%;}
.span_2_of_6 {width: 32%;}
.span_1_of_6 {width: 15%;}


/*   MEDIA QUERIES ====================================================================== */

@media only screen and (max-width: 1024px) {
.servicios li img{float:none;}
#logo_todo li,
#logo_todo li:first-child{width:100%;text-align:right;}
#slogan{font-size:2em;font-weight:400;border:0;position:relative;margin:1em;padding:0;}
#logo{padding:3% 3% 3% 0;}
#margen{padding:0 0;}
#servicios_carrusel_nav li,
#servicios_carrusel_nav li:last-child{margin:0 1em;}
#creditos{padding-top:2em;margin-top:2em;}
#creditos img{top:-20%;width:20em;}
}

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

#marcas li,
#marcas li:last-child{width:33.33%;}
.servicios li,
.servicios li:first-child{display:block;float:none;width:100%;padding:0;}
#map {padding-bottom: 70%;}
#contacto{padding:2%;}
#telefono p{display:none;}
#telefono a{font-size:1em;}
#telefono img{margin-top:-1em;width: 2em;left:-3em;}
#servicios{margin:1em 0 3em 0;}
.slogan{font-size:1.5em}
}

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

.col {margin: 1% 0 1% 0%;}
.span_1_of_6, 
.span_2_of_6, 
.span_3_of_6, 
.span_4_of_6, 
.span_5_of_6, 
.span_6_of_6{width: 100%;}

#servicios_carrusel .titulo{font-size:1.2em;}
#servicios_carrusel_nav{margin-top:-1em;}

#fondo,#creditos img{display:none;}
#creditos{padding-top:0;margin-top:0;}
#galeria li{width:50%;}
#direccion{margin:1em 0;}
#slogan{font-size:1.5em;}

}