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

html, body {
    margin: 0;
    padding: 0;
    
    height: 100%;
    
    scroll-behavior: smooth;
}

body {
	font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 300;
    color: #666;
    text-align: left;
    
    -webkit-hyphens: manual;
    hyphens: manual;
    
    background: url(../img/portada/nosotros/fondo.jpg) no-repeat 50% 50% fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

/* comportamientos y herramientas */

img { border: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
a:active, a:focus { outline: 0; }

a, a:hover, .animar { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; }

.clear { clear:both;  }

hr { clear: both; border: none; }

b, strong { font-weight:700; letter-spacing: -.3px; color: #333; }


/* títulos */


h1 {
    margin: 0 0 30px 0;
    padding: 0;
    
    line-height: 80%;
    font-weight: 300;
    letter-spacing: -.5px;
    color: #333;
}

h2 {
    margin: 0 0 12px 0;
    padding: 0;
    
    font-size: 34px;
    line-height: 34px;
    font-weight: 300;
    letter-spacing: -.5px;
    text-align: left; 
    color: inherit;
}

h3 {
    margin: 10px 0;
    padding: 0;
    
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: left;
    color: inherit;
}

.sombra {
    width: 100%;
    height: 75px;
}

.superior {
    background: url(../img/layout/sombra.png) 0 -75px no-repeat #fff;
	-o-background-size: 100% 150px;
	-moz-background-size: 100% 150px;
	-webkit-background-size: 100% 150px;
	background-size: 100% 150px;
}

.inferior {
    background: url(../img/layout/sombra.png) 0 0 no-repeat #fff;
	-o-background-size: 100% 150px;
	-moz-background-size: 100% 150px;
	-webkit-background-size: 100% 150px;
	background-size: 100% 150px;
}


/* layout */


.layout {
    margin: auto;
    padding: 75px 0 0 0;
    
    border-top: 1px solid #fff;
}

.cont {
    margin: 0 auto;
    
    width: 90%; max-width: 1500px;
    
    text-align: justify;
}

.layout img { display: block; width: 100%; height: auto; }


/* columnas */


.col > ul {
	margin: 0;
	padding: 0;
	
	width: 100%;
	
	float: left;
}

.col > ul > li {
	padding: 0;
	
	float: left;
	list-style: none;
}

.c-separador {
	margin: 0 0 25px 0;

	width: 100%;
	height: 1px;
	
	border-bottom: 1px dotted #CCC;
}

/* C1 */
.c1 > ul > li { margin: 0 0 25px 0;	width: 100%; }

    @media only screen and (max-width:549px) {
        /* C2 */
        .c2 > ul > li { margin: 0 0 25px 0;	width: 100%; }
        .c2 > ul > li:last-child { margin: 0 0 0 0; }

        /* C3 */
        .c3 > ul > li { margin: 0 0 50px 0;	width: 100%; }
        .c3 > ul > li:last-child { margin: 0 0 0 0; }

        /* C4 */
        .c4 > ul > li { margin: 0 0 25px 0;	width: 100%; }
        .c4 > ul > li:last-child { margin: 0 0 0 0; }
        
        /* C Especial */
        .cespecial > ul > li { margin: 0 4% 25px 0; width: 48%; }
        .cespecial > ul > li:nth-child(2n+0) { margin:0 0 25px 0; }
        .cespecial > ul > li:nth-child(2n+1) { clear: both; }
    }

    @media only screen and (min-width:550px) and (max-width:767px) {
        /* C2 */
        .c2 > ul > li { margin: 0 0 25px 0;	width: 100%; }

        /* C3 */
        .c3 > ul > li { margin: 0 2% 50px 0; width: 48%; }
        .c3 > ul > li:nth-child(2n+0) { margin: 0 0 50px 0;	}
        .c3 > ul > li:nth-child(2n+1) { clear: both; }

        /* C4 */
        .c4 > ul > li { margin: 0 0 25px 0;	width: 100%; }
        
        /* C Especial */
        .cespecial > ul > li { margin: 0 2% 50px 0; width: 48%; }
        .cespecial > ul > li:nth-child(2n+0) { margin: 0 0 50px 0;	}
        .cespecial > ul > li:nth-child(2n+1) { clear: both; }
    }

    @media only screen and (min-width:768px) and (max-width:1023px) {
        /* C2 */
        .c2 > ul > li { margin: 0 4% 25px 0; width: 48%; }
        .c2 > ul > li:nth-child(2n+0) { margin:0 0 25px 0;	}
        .c2 > ul > li:nth-child(2n+1) { clear: both; }

        /* C3 */
        .c3 > ul > li { margin: 0 4% 50px 0; width: 48%; }
        .c3 > ul > li:nth-child(2n+0) { margin: 0 0 50px 0;	}
        .c3 > ul > li:nth-child(2n+1) { clear: both; }

        /* C4 */
        .c4 > ul > li { margin: 0 4% 25px 0; width: 49%; }
        .c4 > ul > li:nth-child(2n+0) { margin: 0 0 25px 0;	}
        .c4 > ul > li:nth-child(2n+1) { clear: both; }
        
        /* C Especial */
        .cespecial > ul > li { margin: 0 4% 50px 0; width: 48%; }
        .cespecial > ul > li:nth-child(2n+0) { margin: 0 0 50px 0;	}
        .cespecial > ul > li:nth-child(2n+1) { clear: both; }
    }

    @media only screen and (min-width:1024px) {
        /* C2 */
        .c2 > ul > li { margin: 0 4% 25px 0; width: 48%; }
        .c2 > ul > li:nth-child(2n+0) { margin: 0 0 25px 0;	}
        .c2 > ul > li:nth-child(2n+1) { clear: both; }

        /* C3 */
        .c3 > ul > li { margin: 0 4% 25px 0; width: 30.666666666666667%; }
        .c3 > ul > li:nth-child(3n+0) { margin: 0 0 25px 0;	}
        .c3 > ul > li:nth-child(3n+1) { clear: both; }

        /* C4 */
        .c4 > ul > li { margin: 0 3% 0 0; width: 22.75%; }
        .c4 > ul > li:nth-child(4n+0) { margin: 0 0 0 0;	}
        .c4 > ul > li:nth-child(4n+1) { clear: both; }
        
        /* C Especial */
        .cespecial > ul > li { margin: 0 4% 25px 0; width: 30.666666666666667%; }
        .cespecial > ul > li:nth-child(3n+0) { margin: 0 0 25px 0;	}
        .cespecial > ul > li:nth-child(3n+1) { clear: both; }
    }


/* contacto */


.map {
	margin: 20px 0 0 0;
	
	width: 100%;
	height: 600px;
}

.map p {
	margin: 0 0 10px 0;
	padding: 0;
	
	font-size: 14px;
	line-height: 16px;
	color: #666;
}

.map a {
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
	
	font-size: 14px;
	line-height: 16px;
	color: #000;
	font-weight: 400;
	text-align: left;
	text-decoration: none;
}

.map a:hover { color: #F60; }

    @media only screen and (max-width:767px) {
        .map { height: 350px; }
    }


/* clientes */

.clientes {
    margin: 30px 0;
}

.clientes ul {
    margin: 0;
    padding: 0;
    
    width: 100%;
    
    float: left;
}

.clientes li {
    margin: 0;
    padding: 0;
    
    float: left;
    list-style: none;
}

    @media only screen and (max-width: 549px) {
        .clientes li { width: 50%; }
    }

    @media only screen and (min-width: 550px) and (max-width: 767px) {
        .clientes li { width: 33.333333333333333%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1023px) {
        .clientes li { width: 50%; }
    }

    @media only screen and (min-width: 1024px) {
        .clientes li { width: 33.333333333333333%; }
    }

.clientes img {
    display: block;
    
    width: 100%;
    height: auto;
}