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

html, body {
    margin: 0;
    padding: 0;

    height: 100%;

    scroll-behavior: smooth;
}

body {
	font-family: 'Muli', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 300;
    color: #333;
    text-align: justify;

    -webkit-hyphens: manual;
    hyphens: manual;

    background: #f5f8f9;
}

/* comportamientos y herramientas */

img { border:0; }

img.imagenes {
    width: 100%;
    height: auto;

    box-shadow: 0 0 20px 4px #666;
}

img.imagencitas {
    width: 100%;
    height: auto;

    box-shadow: 0 0 15px 0 #999;
}

a { color:inherit; text-decoration:none; }
a:hover { color: #ff9900; 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;  }

b, strong { font-weight:700; letter-spacing: -.5px; }

p {
    margin: 25px 0 0 0;
    padding: 0;
}

.volvertop {
    position: relative;

    margin: 50px 0 100px 0;
}
.volvertop a {
    position: absolute; right: 0;
    display: block;

    padding: 30px;

    background: #6883a6;

    letter-spacing: 4px;
    color: #fff;
}


/* títulos */


h1 {
    margin: 0;
    padding: 0;

    font-size: 50px;
    line-height: 50px;
    font-weight: 300;
    color: #6883a6;
}

h2 {
    margin: 0;
    padding: 0;

    font-size: 40px;
    line-height: 40px;
    font-weight: 300;
    color: #6883a6;
}

h3 {
    margin: 0;
    padding: 0;

    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
    color: #6883a6;
}

h6 {
    margin: 0;
    padding: 0;

    font-size: 40px;
    line-height: 40px;
    font-weight: 800;
    color: #6883a6;

    text-align: right;
}


/* top */


.top {
    margin: auto;

    width: 90%; max-width: 1500px;
    height: 130px;
}

.top > ul {
    margin: 0;
    padding: 0;

    height: 100%;
}

.top > ul > li {
    margin: 0;
    padding: 0;

    list-style: none;

    height: 100%;
}

.top > ul > li:first-child { float: left; }
.top > ul > li:last-child { float: right; }

.general {
    padding: 30px 0;

	background: url(../img/layout/top.jpg) no-repeat;
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
}

.logo img {
    display: block;

    width: auto;
    height: 100%;
}


/* base */

.base {
    margin: 0;
    padding: 100px 0;

    background: #6883a6;

    text-align: center;
    color: #fff;
}

.base img {
    display: block;

    margin: auto;
    padding: 0 0 30px 0;

    width: auto;
    height: 200px;

    filter: brightness(300%);
}

.sombra {
    width: 100%;
    height: 50px;

	background: url(../img/layout/sombra.png) no-repeat;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.contenidos {
    margin: auto;

    width: 95%; max-width: 1500px;
}

.contenidos img { display: blockbl; width: 100%; height: auto; }

/* encabezados */

.encabezados {
    margin: 0 0 50px 0;
}

.encabezados img {
    margin: 0 0 20px 0;

    -o-object-fit: cover;
    object-fit: cover;

    box-shadow: 0 0 15px 0 #999;
}

.especial img {
    -o-object-fit: contain;
    object-fit: contain;
}

    @media only screen and (max-width:767px) {
        .encabezados { padding: 0; }
        .encabezados img { height: 300px; }
        .especial img { height: auto; width: 100%; }
    }

    @media only screen and (min-width:768px) {
        .encabezados {
            padding: 20px 0 20px 30px;

            background-repeat: no-repeat;
            -o-background-size: 4px 100%;
            -moz-background-size: 4px 100%;
            -webkit-background-size: 4px 100%;
            background-size: 4px 100%;

            background-image: -webkit-linear-gradient(#999, #ccc);
            background-image: -o-linear-gradient(#999, #ccc);
            background-image: linear-gradient(#999, #ccc);
        }

        .encabezados img { height: 450px; }
        .especial img { height: auto; width: 100%; }
    }

/* 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 4% 25px 0; width: 48%; }
        .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 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: 30.666666666666667%; }
        .c4 > ul > li:nth-child(3n+0) { margin: 0 0 25px 0;	}
        .c4 > ul > li:nth-child(3n+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% 25px 0; width: 22.75%; }
        .c4 > ul > li:nth-child(4n+0) { margin: 0 0 25px 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; }
    }


/* nosotros */
.logos-clientes {
    width: 100%;

    float: left;

    border: 1px solid #ccc;
}

.logos-clientes img {
    display: block;

    width: 20%;
    height: auto;

    float: left;
}

    @media only screen and (max-width:768px) {
        .logos-clientes img {
            width: 33.333333333333333%;

            border-bottom: 1px solid #ccc;
        }

        .logos-clientes > img:last-child {
            border-bottom: none;
        }
    }


/* galería */


.galeria {
    margin: 30px 0 0 0;

    width: 100%;

    float: left;
}

.galeria > a {
    position: relative;
    display: block;

    height: 100px;

    float: left;

    overflow: hidden;

    box-shadow: 0 0 20px 4px #999;
}

.galeria > a div {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;

    margin: auto;

    width: 100%;
    height: 100%;

	background: url(../img/galeria/layout.png) no-repeat;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.galeria > a > img {
    width: 100%;
    height: 100%;

    -o-object-fit: cover;
    object-fit: cover;

    -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;
}

.galeria > a:hover > img {
    width: 150%;
    height: 150%;

    -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;
}

    @media only screen and (max-width:549px) {
        .galeria > a { margin: 0 3% 30px 0; width: 48.5%;}
        .galeria > a:nth-child(2n+0) { margin: 0 0 30px 0; }
        .galeria > a:nth-child(2n+1) { clear: both; }
    }

    @media only screen and (min-width:550px) and (max-width:767px) {
        .galeria > a { margin: 0 3% 40px 0; width: 31.333333333333333%;}
        .galeria > a:nth-child(3n+0) { margin: 0 0 40px 0; }
        .galeria > a:nth-child(3n+1) { clear: both; }
    }

    @media only screen and (min-width:768px) and (max-width:1023px) {
        .galeria > a { margin: 0 3% 60px 0; width: 22.75%;}
        .galeria > a:nth-child(4n+0) { margin: 0 0 60px 0; }
        .galeria > a:nth-child(4n+1) { clear: both; }
    }

    @media only screen and (min-width:1024px) {
        .galeria > a { margin: 0 3% 60px 0; width: 17.6%;}
        .galeria > a:nth-child(5n+0) { margin: 0 0 60px 0; }
        .galeria > a:nth-child(5n+1) { clear: both; }
    }

/* certificados */


.certificados {
    margin: 30px 0 0 0;

    width: 100%;

    float: left;

    text-align: left;
}

.certificados > ul {
  margin: 0;
  padding: 0;

  width: 100%;

  float: left;
}

.certificados > ul > li {
  margin: 0;
  padding: 0;

  float: left;

  list-style: none;
}

  @media only screen and (max-width:549px) {
      .certificados > ul > li { margin: 0 3% 30px 0; width: 48.5%;}
      .certificados > ul > li:nth-child(2n+0) { margin: 0 0 30px 0; }
      .certificados > ul > li:nth-child(2n+1) { clear: both; }
  }

  @media only screen and (min-width:550px) and (max-width:767px) {
      .certificados > ul > li { margin: 0 3% 40px 0; width: 31.333333333333333%;}
      .certificados > ul > li:nth-child(3n+0) { margin: 0 0 40px 0; }
      .certificados > ul > li:nth-child(3n+1) { clear: both; }
  }

  @media only screen and (min-width:768px) and (max-width:1023px) {
      .certificados > ul > li { margin: 0 3% 60px 0; width: 22.75%;}
      .certificados > ul > li:nth-child(4n+0) { margin: 0 0 60px 0; }
      .certificados > ul > li:nth-child(4n+1) { clear: both; }
  }

  @media only screen and (min-width:1024px) {
      .certificados > ul > li { margin: 0 3% 60px 0; width: 17.6%;}
      .certificados > ul > li:nth-child(5n+0) { margin: 0 0 60px 0; }
      .certificados > ul > li:nth-child(5n+1) { clear: both; }
  }

.certificados div {
  margin: 0 0 20px 0;
}

.certificados div > a {
  position: relative;
  display: block;

  margin: 0 0 10px 0;

  width: 100%;
  height: 100px;

  overflow: hidden;

  box-shadow: 0 0 20px 4px #999;
}

.certificados span {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;

    display: block;

    margin: auto;

    width: 100%;
    height: 100%;

    background: url(../img/galeria/layout.png) no-repeat;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.certificados img {
    display: block;;

    width: 100%;
    height: 100%;

    -o-object-fit: cover;
    object-fit: cover;

    -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;
}

.certificados div > a:hover img {
    margin: -25% 0 0 -25%;

    width: 150%;
    height: 150%;

    -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;
}

.certificados font {
  display: block;

  margin: 5px 0 0 0;
}


/* mapa */


.map {
	width: 100%;
	height: 650px;
}