@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*Fondo de video en css*/
#video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

#video_pattern {
    background: #fff;
    position: fixed;
    opacity: 0.8;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/*header index*/
header, .index {
    width: 100%;
    height: 4%;
    z-index: 100;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    top: 2%;
}

.hea1 {
    width: 13%;
    height: 100%;
    z-index: 100;
    float: left;
}

.hea2 {
    width: 50%;
    height: 100%;
    z-index: 100;
    float: left;
    margin-left: -21%;
    padding-top: 1%;
}

    .hea2 ul li {
        float: left;
        width: 22%;
        text-align: center;
        font-size: 1.5em;
        font-family: "Lato", sans-serif;
        font-weight: 300;
        color: #fff;
    }

    .hea2 ul {
        list-style-type: none;
    }

        .hea2 ul li ul {
            display: none;
        }

.hea3 {
    height: 100%;
    z-index: 100;
    float: left;
}

.can1 {
    height: 100%;
    z-index: 100;
    float: left;
    padding-right: 15px;
    cursor: pointer;
}

    .can1 > img {
        background-color: rgba(0,0,0,0.2);
        border-radius: 20px;
    }

.can2 {
    width: 60%;
    height: 100%;
    z-index: 100;
    float: left;
    margin-right: 6%;
}
/*Contenido  index*/
.con1 {
    width: 100%;
    height: 20%;
    margin-top: 11%;
}

.con2 {
    width: 45%;
    height: 12%;
    text-align: center;
    font-size: 2.5em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #fff;
    margin-left: 28%;
}

.con3 {
    width: 140px;
    height: 60px;
    text-align: center;
    font-size: 2.0em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    border-radius: 14px;
    padding-top: 12px;
}

    .con3 a {
        text-decoration: none;
        color: #000;
    }

@media all and (max-width: 1194px) {
    .hea2 ul li {
        font-size: 1.2em;
    }
}

@media all and (max-width: 930px) {
    .hea2 ul li {
        /*font-size: 1.0em;*/
        margin-right: 59px;
    }

    .con2 {
        font-size: 2.0em;
    }
}

@media all and (max-width: 704px) {
    .hea2 ul li {
        /*float: none;*/
        margin-right: 59px;
    }

        .hea2 ul li a:link, .hea2 ul li a:link, .hea2 ul li a:visited, .hea2 ul li a:hover, .hea2 ul li a:active {
            color: black !important;
            font-weight: 900;
            opacity: .7;
        }

        .hea2 ul li a:hover {
            opacity: 1;
        }


    .con2 {
        font-size: 1.5em;
    }
}
/*----------------------------------------------------*/
/*header contenido11*/
.conteni1 {
    background-image: url(../image/fondos/sombreado.png);
    width: 100%;
    height: 12%;
    z-index: 100;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}

.head1 {
    width: 11%;
    height: 100%;
    z-index: 100;
    float: left;
    margin: -0.5% 1% 0 2%;
}

.head2 {
    width: 50%;
    height: 100%;
    z-index: 100;
    float: left;
    margin-left: -24%;
    padding-top: 2%;
}

    .head2 ul li {
        float: left;
        width: 22%;
        text-align: center;
        font-size: 1.5em;
        font-family: "Lato", sans-serif;
        font-weight: 300;
        color: #666;
    }

    .head2 ul {
        list-style-type: none;
    }

        .head2 ul li ul {
            display: none;
        }

.head3 {
    height: 100%;
    z-index: 100;
    float: left;
    color: #000;
}

.cant1 {
    height: 100%;
    z-index: 100;
    float: left;
    margin-right: 6%;
    margin-top: -2%;
}

.cant2 {
    width: 60%;
    height: 100%;
    z-index: 100;
    float: left;
    margin-right: 6%;
    font-size: 1.0em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    margin-top: 15%;
    color: #666;
}
/*Contenido contenido1*/
.contenido1 {
    width: 100%;
    height: 50%;
}

.cont1 {
    width: 100%;
    height: 80%;
    margin-top: 8%;
    padding-top: 8%;
}

    .cont1 p {
        font-size: 3.0em;
        font-family: "Lato", sans-serif;
        font-weight: 700;
        color: #333;
    }

    .cont1 h2 {
        font-size: 1.5em;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        color: #666;
    }

    .cont1 img {
        width: 15%;
        height: 30%;
    }

.cont2 {
    width: 80%;
    height: 17%;
    z-index: 100;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    margin: 2% 0 0 9%;
}

.enlace1 {
    /*width: 33%;*/
    height: 100%;
    z-index: 100;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    top: 2%;
    float: left;
}

.imag {
    width: 24%;
    height: 40%;
}

.test1 {
    width: 100%;
    font-size: 1.6em;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    color: #fff;
}

.test2 {
    width: 100%;
    font-size: 1.2em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #fff;
}
/*----------------------------------------------------*/
/*Contenido contenido2*/

.conte2 {
    width: 80%;
    height: 50%;
    z-index: 100;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    left: 8%;
}

.clik {
    width: 100%;
    height: 80%;
    float: left;
}

.matriz {
    width: 100%;
    height: 40%;
}

.test3 {
    width: 40%;
    font-size: 1.2em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #000;
    margin-left: 37%;
}

/*----------------------------------------------------*/

.clik .tex1, .tex2, .tex3 {
    font-family: "Lato", sans-serif;
    margin-top: 8%;
    visibility: hidden;
    width: 30%;
    background-color: #1DE57F;
    color: #fff;
    text-align: justify;
    font-size: 1.1vw;
    border-radius: 6px;
    padding: 5% 2%;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.clik:hover .tex1 {
    visibility: visible;
}

.clik:hover .tex2 {
    visibility: visible;
}

.clik:hover .tex3 {
    visibility: visible;
}


.text-imag {
    width: 75%;
}


.menu-items {
    /*margin-top: 11rem;*/
    font-size: 20px;
}

    .menu-items .demo {
        padding: 10px;
        margin-bottom: 20px;
    }

        .menu-items .demo textarea {
            /*font-size: 0.9em;*/
            height: 38px;
            overflow: hidden;
            padding: 6px 0px;
            resize: none;
            text-align: center;
            width: 100%;
            /*border: 1px solid rgba(0, 0, 0, 0.2);*/
            border: none;
            outline: none;
        }

    .menu-items img {
        width: 10rem;
        height: 10rem;
        /*opacity: 0.8;*/
    }

[class*=" imghvr-"], [class^=imghvr-] {
    background-color: transparent !important;
    /*border:1px solid red;*/
}

    [class*=" imghvr-"] figcaption, [class^=imghvr-] figcaption {
        background-color: transparent !important;
        color: black !important;
        /*border: 1px solid green;*/
    }

        [class*=" imghvr-"] figcaption h1, [class*=" imghvr-"] figcaption h2, [class*=" imghvr-"] figcaption h3, [class*=" imghvr-"] figcaption h4, [class*=" imghvr-"] figcaption h5, [class*=" imghvr-"] figcaption h6, [class^=imghvr-] figcaption h1, [class^=imghvr-] figcaption h2, [class^=imghvr-] figcaption h3, [class^=imghvr-] figcaption h4, [class^=imghvr-] figcaption h5, [class^=imghvr-] figcaption h6 {
            color: black !important;
        }