﻿body {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
/*PORTADA------------------------------------------*/
.portada {
    width: 100%;
    position: relative;
    display: inline-block;
    text-align: center;
}

    .portada .textoportada {
        color: #FFFFFF;
        position: absolute;
        width: 90%;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 50%);
    }

        .portada .textoportada .tituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

    .portada img {
        width: 100%;
        margin-top: 58px;
    }
/*PORTADA------------------------------------------*/
.container {
    background-color: #FFFFFF;
    width: 95%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 0px 0px 0px 0px;
}

.tabla2 {
    display: inline-flex;
    align-items: flex-start;
    margin: 0 auto;
    width: 100%;
}

    .tabla2 .columna2 {
        width: 50%;
        padding: 20px;
    }

        .tabla2 .columna2 h2 {
            width: 100%;
            color: lightseagreen;
            text-align: center;
            padding-bottom: 10px;
        }

        .tabla2 .columna2 p {
            text-align: justify;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
        }

.info-barra {
    padding: 20px;
    text-align: justify;
}

.tabla {
    display: inline-flex;
    align-items: center;
    margin: 0 auto;
}

    .tabla .columna {
        width: 50%;
        padding: 20px;
    }

        .tabla .columna h2 {
            color: lightseagreen;
            text-align: center;
            padding-bottom: 10px;
        }

        .tabla .columna p {
            text-align: justify;
        }

.video-productos {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
/*Seccion del primer carrusel*/
.slide {
    position: relative;
    width: 100%;
    padding: 20px 90px 20px 90px;
}


.slide-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slide-open:checked + .slide-item {
    position: static;
    opacity: 100;
}

.slide-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

    .slide-item img {
        display: block;
        width: 100%;
    }

.slide-control {
    color: #e24a2c;
    cursor: pointer;
    display: none;
    font-size: 60px;
    height: 60px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
    margin-top: 40px;
}

    .slide-control.prev {
        right: 0%;
    }

    .slide-control.next {
        left: 95%;
    }

    .slide-control:hover {
        color: #e24a2c;
    }

#slide-1:checked ~ .control-1,
#slide-2:checked ~ .control-2,
#slide-3:checked ~ .control-3 {
    display: block;
}

.slide-indicador {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

    .slide-indicador li {
        display: inline-block;
        margin: 0 5px;
    }

.slide-circulo {
    color: #030828;
    cursor: pointer;
    display: block;
    font-size: 60px;
}

    .slide-circulo:hover {
        color: #e24a2c;
    }

#slide-1:checked ~ .control-1 ~ .slide-indicador
li:nth-child(1) .slide-circulo,
#slide-2:checked ~ .control-2 ~ .slide-indicador
li:nth-child(2) .slide-circulo,
#slide-3:checked ~ .control-3 ~ .slide-indicador
li:nth-child(3) .slide-circulo {
    color: #e24a2c;
}

/*Seccion del primer carrusel*/
/*Seccion del acordion*/
.acordion {
    width: 100%;
    padding: 20px 90px 20px 90px;
    display: inline-block;
    position: relative;
}

    .acordion h4 {
        font-size: 20px;
        line-height: 70px;
        font-weight: 500;
        display: block;
        margin: 0;
        cursor: pointer;
    }

    .acordion p {
        font-size: 15px;
        position: relative;
        overflow: hidden;
        opacity: 1;
        transform: translate(0, 0);
        z-index: 2;
    }

    .acordion ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .acordion ul li {
            position: relative;
            padding: 0;
            margin: 0;
            padding-bottom: 4px;
            padding-top: 10px;
            border-top: 2px dotted #e24a2c;
        }

            .acordion ul li:nth-of-type(1) {
                animation-delay: 0.5s;
            }

            .acordion ul li:nth-of-type(2) {
                animation-delay: 0.75s;
            }

            .acordion ul li:nth-of-type(3) {
                animation-delay: 1s;
            }

            .acordion ul li:nth-of-type(4) {
                animation-delay: 1.5s;
            }

            .acordion ul li:nth-of-type(5) {
                animation-delay: 1.75s;
            }

            .acordion ul li:nth-of-type() {
                padding-bottom: 0;
            }

            .acordion ul li i {
                position: absolute;
                transform: translate(-6px,0);
                margin-top: 16px;
                right: 0;
            }

                .acordion ul li i:before,
                .acordion ul li i:after {
                    content: "";
                    position: absolute;
                    background: #e24a2c;
                    width: 3px;
                    height: 9px;
                    margin-top: 15px;
                }

                .acordion ul li i:before {
                    transform: translate(-2px, 0) rotate(45deg);
                }

                .acordion ul li i:after {
                    transform: translate(2px, 0) rotate(-45deg);
                }

    .acordion p ul li i:before,
    ul li i:after {
        transition: all 0.25s ease-in-out;
    }

    .acordion ul li input[type=checkbox] {
        position: absolute;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
    }

        .acordion ul li input[type=checkbox]:checked ~ p {
            margin-top: 0;
            max-height: 0;
            opacity: 0;
            transform: translate(0, 50%);
        }

        .acordion ul li input[type=checkbox]:checked ~ i:before {
            transform: translate(2px, 0) rotate(45deg);
        }

        .acordion ul li input[type=checkbox]:checked ~ i:after {
            transform: translate(-2px, 0) rotate(-45deg);
        }
/*Seccion del acordion*/
/*PORTADA------------------------------------------*/
@media screen and (max-width:1200px) {
    .portada .textoportada {
        top: 15%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }
}
/*PORTADA------------------------------------------*/
/*PORTADA------------------------------------------*/
@media screen and (max-width:1000px) {
    .portada .textoportada {
        top: 10%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }
}
/*PORTADA------------------------------------------*/
@media screen and (max-width: 950px) {
    .tabla {
        display: inline-grid;
        align-items: center;
        margin: 0 auto;
    }

        .tabla .columna {
            width: 100%;
            padding: 20px;
        }

    .tabla2 {
        display: inline-grid;
        align-items: center;
        margin: 0 auto;
        width: 100%;
    }

        .tabla2 .columna2 {
            width: 100%;
            padding: 20px;
        }
    /*Seccion del acordion*/
    .acordion {
        padding: 10px 70px 10px 70px;
    }
    /*PORTADA------------------------------------------*/
    .portada .textoportada {
        top: 10%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }
    /*PORTADA------------------------------------------*/
}


/*PORTADA------------------------------------------*/
@media screen and (max-width:930px) {
    .portada .textoportada {
        top: 5%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
        }
}
/*PORTADA------------------------------------------*/

@media screen and (max-width: 850px) {
    /*Seccion del primer carrusel*/
    .slide {
        padding: 20px 100px 20px 100px;
    }

    .slide-item img {
        width: 100%;
    }

    .slide-control {
        font-size: 50px;
        height: 50px;
        margin-top: 30px;
    }

        .slide-control.prev {
            left: 2%;
        }

        .slide-control.next {
            right: 2%;
        }

    .slide-circulo {
        font-size: 50px;
    }
    /*Seccion del primer carrusel*/
    /*Seccion del acordion*/
    .acordion {
        padding: 10px 70px 10px 70px;
    }
    /*PORTADA------------------------------------------*/
    .portada .textoportada {
        top: 15%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
            font-size: 20px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
            font-size: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
            font-size: 12px;
        }
    /*PORTADA------------------------------------------*/
}
/*PORTADA------------------------------------------*/
@media screen and (max-width: 711px) {
    .portada .textoportada {
        top: 10%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 15px;
            font-size: 20px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 15px;
            font-size: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            margin-bottom: 15px;
            font-size: 12px;
        }
}
/*PORTADA------------------------------------------*/

@media screen and (max-width: 700px) {
    /*Seccion del primer carrusel*/
    .slide {
        padding: 20px 100px 20px 100px;
    }

    .slide-item img {
        width: 100%;
    }

    .slide-control {
        font-size: 50px;
        height: 50px;
        margin-top: 30px;
    }

        .slide-control.prev {
            left: 2%;
        }

        .slide-control.next {
            right: 2%;
        }

    /*Seccion del primer carrusel*/
    /*Seccion del acordion*/
    .acordion {
        padding: 10px 30px 10px 30px;
    }

        .acordion h4 {
            font-size: 17px;
        }

        .acordion p {
            font-size: 12px;
        }
    /*Seccion del acordion*/
}
/*PORTADA------------------------------------------*/
@media screen and (max-width: 665px) {
    .portada .textoportada {
        top: 15%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 12px;
            font-size: 20px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 10px;
        }
}
/*PORTADA------------------------------------------*/
/*PORTADA------------------------------------------*/
@media screen and (max-width: 583px) {
    .portada .textoportada {
        top: 10%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 12px;
            font-size: 20px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 10px;
        }
}
/*PORTADA------------------------------------------*/
/*PORTADA------------------------------------------*/
@media screen and (max-width: 540px) {
    .portada .textoportada {
        top: 5%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 12px;
            font-size: 20px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 10px;
        }
}
/*PORTADA------------------------------------------*/
@media screen and (max-width: 500px) {
    .slide {
        padding: 10px 50px 10px 50px;
    }

    .slide-item img {
        width: 100%;
    }
    /*PORTADA------------------------------------------*/
    .portada .textoportada {
        top: 5%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 12px;
            font-size: 19px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 9px;
        }
    /*PORTADA------------------------------------------*/
}

@media screen and (max-width: 450px) {
    .slide-item img {
        width: 100%;
    }
    /*PORTADA------------------------------------------*/
    .portada .textoportada {
        top: 20%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 3px;
            font-size: 17px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: -2px;
            font-size: 11px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 8px;
        }
    /*PORTADA------------------------------------------*/
}

@media screen and (max-width: 400px) {
    /*Seccion del primer carrusel*/
    .slide {
        padding: 10px 50px 10px 50px;
    }

    .slide-item img {
        width: 100%;
    }


    .slide-control {
        font-size: 40px;
        height: 40px;
        margin-top: 20px;
    }

        .slide-control.prev {
            left: 2%;
        }

        .slide-control.next {
            right: 2%;
        }

    .slide-circulo {
        font-size: 20px;
    }
    /*Seccion del primer carrusel*/
    /*Seccion del acordion*/
    .acordion {
        padding: 10px 20px 10px 20px;
    }

        .acordion ul li i:before,
        .acordion ul li i:after {
            margin-top: 10px;
        }

        .acordion h4 {
            font-size: 15px;
            line-height: 50px;
        }

        .acordion p {
            font-size: 10px;
        }
    /*Seccion del acordion*/
    /*PORTADA------------------------------------------*/
    .portada .textoportada {
        top: 18%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 4px;
            font-size: 16px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: -5px;
            font-size: 10px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 7px;
        }
    /*PORTADA------------------------------------------*/
}
/*PORTADA------------------------------------------*/
@media screen and (max-width: 327px) {

    .portada .textoportada {
        top: 15%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 3px;
            font-size: 14px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: -7px;
            font-size: 9px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 8px;
        }
}
/*PORTADA------------------------------------------*/
/*PORTADA------------------------------------------*/
@media screen and (max-width: 295px) {

    .portada .textoportada {
        top: 25%;
    }

        .portada .textoportada .tituloportada {
            margin-bottom: 0px;
            font-size: 11px;
        }

        .portada .textoportada .subtituloportada {
            color: #FFFFFF;
            margin-bottom: -7px;
            font-size: 8px;
        }

        .portada .textoportada .parrafoportada {
            color: #FFFFFF;
            font-size: 6px;
        }
}
/*PORTADA------------------------------------------*/