html
{
    font-size: 62.5%; /* Medida para rems */
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
*,*:before,*:after 
{
    box-sizing: border-box;
}

a 
{
    color: white;
    text-decoration: none;
}

a:active,a:active * 
{
    outline: none !important;
}

a:focus,a:focus * 
{
    outline: none !important;
}

/* CSS - INDEX */

@media (min-width: 600px) 
{
    /* header-index */
    .header-index
    {
        width: 100%;
        height: 100vh;
    }
    .header-index nav
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 0;
        background-color: rgba(216,236,255,.8);
        width: 100%;
        height: 5rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .header-index nav img
    {
        width: 80%;
    }
    .header-index nav a
    {
        color: #060e19;
        margin-left: 2rem;
        font-size: small;
        font-weight: 600;
    }
    .header-index nav a:hover
    {
        color: #3c91e6;
    }
    .header-index nav a:last-child
    {
        margin-right: 2rem;
        color: #3c91e6;
    }
    .header-index nav a:last-child:hover
    {
        color: #23bec6;
    }
    .header-index h1
    {
        color: white;
        font-size: 6rem;
        width: 80%;
        position: absolute;
        top: 20rem;
        left: 15rem;
        text-align: center;
    }
    .video-header
    {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .div-fondo-oscuro
    {
        background-color: rgba(0, 0, 0, .3);
        width: 100%;
        height: 100vh;
    }
    /* main-index */
    .main-index
    {
        background-color: #060e19;
    }
    .about_us-index
    {
        color: white;
        font-size: x-large;
        text-align: center;
        padding: 10rem 15rem 0rem;
    }
    .div-1-index
    {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: left;
        padding: 10rem 0rem;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-interno-div-1-index
    {
        text-align: center;
        color: white;
        width: 15%;
        z-index: 1;
        margin: 3rem 15rem;
        font-size: 1.5rem;
    }
    .div-interno-div-1-index h2
    {
        margin: 1rem 0;
    }
    .div-1-index-icon
    {
        width: 10rem;
    }
    #pc_vectorizada
    {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 70%;        
    }
    /* Testimoniales - index */
    .testimonios-index
    {
        padding: 15rem 15rem;
        display: flex;
        justify-content: space-between;
        background-color: #1f3040;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .testimonio
    {
        font-size: large;
        max-width: 45%;
        color: white;
    }
    .testimonio div
    {
        display: flex;
    }
    .testimonio img
    {
        width: 10rem;
        border-radius: 50%;
        margin-right: 3rem;
    }
    .testimonio span b
    {
        color: #3c91e6;
    }
    /* Clientes - index */
    .clientes-index
    {
        padding: 5rem 20rem 10rem;
        background-color: #d8ecff;
        display: flex;
        flex-direction: column;
        align-items: center;        
    }
    .clientes-index h3
    {
        font-size: xx-large;        
    }
    .clientes-index div
    {
        display: flex;
        align-items: center;
        
    }
    .clientes-index img
    {
        width: 15rem;
        margin: 3rem;
    }
    /* div last index */
    .div-last-index
    {
        background-color: white;
        padding: 0 20rem 10rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .div-last-index h3
    {
        font-size: xx-large;
    }
    .div-last-index p
    {
        font-size: large;
        text-align: center;
    }
    .div-last-index a
    {
        background-color: #3c91e6;
        padding:1rem 2rem;
        font-size: 2rem;
        border-radius: 2rem;
    }
    /* footer */
    .footer
    {
        width: 100%;
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        background-color:#d8ecff;
    }
    .footer img
    {
        width: 15rem;
    }
    .footer div
    {
        width: 15rem;
    }
    /*------------ NOSOTROS ------------*/
    .header-medium
    {
        width: 100%;
        height: 70vh;
    }
    .div-fondo-imagen
    {
        width: 100%;
        height: 70vh;
        background-image: url("../media/team.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #43B5C7;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-fondo-oscuro-2
    {
        width: 100%;
        height: 70vh;
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0;
        left: 0;
    }    
    .div-nosotros-1
    {
        display: flex;
        align-items: center;
        color: white;
        padding: 15rem;
    }
    .div-nosotros-1 p
    {
        width: 50%;
        font-size: xx-large;
    }
    .div-nosotros-1 img
    {
        width: 50rem;
        margin-left: 3rem;
    }
    .div-mision
    {
        display: flex;
        padding: 0rem 10rem 10rem;
        position: relative;
        align-items: center;
        justify-content: center;
    }
    .div-mision p
    {
        color: white;
        font-size: xx-large;
        position: relative;
        left: -0rem;
        text-align: right;
        width: 60%;
    }
    .div-mision img
    {
        width: 30%;
        position: relative;
        margin-right: 5rem;
    }
    .div-vision
    {
        display: flex;
        padding: 0rem 10rem 10rem;
        position: relative;
        align-items: center;
        justify-content: center;
    }
    .div-vision p
    {
        color: white;
        font-size: xx-large;
        position: relative;
        left: -0rem;
        text-align: left;
        width: 60%;
    }
    .div-vision img
    {
        width: 30%;
        position: relative;
        margin-left: 5rem;
    }
    .div-valores
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0 10rem;
    }
    .div-valores span
    {
        margin-top: 2rem;
        color: white;
        font-size: 5rem;
    }
    /*------------ PRODUCTOS ------------*/
    .div-producto-1
    {
        display: flex;
        color: white;       
        justify-content: space-evenly;
        align-items: center;
        padding: 10rem 0;
        position: relative;
    }
    .div-producto-1 p
    {
        width: 50%;
        font-size: x-large;
        text-align: center;
        position: relative;        
    }
    .blue {position:relative;width:100%;height:100%;}
    .blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
        position:absolute;
        width:200px; height: 50px;
        border-color:#23bec6;
        border-style:solid;
        content: ' ';
        margin: -20px;
    }
    .blue:before {top:0;left:0;border-width: 3px 0px 0 3px}
    .blue:after {bottom:0;right:0;border-width: 0 3px 3px 0 }
    .blue>:first-child:before {bottom:0;right:0;border-width: 0 3px 3px 0}
    .blue>:first-child:after {bottom:0;left:0;border-width: 0 0 3px 3px}

    #logo_arc
    {
        width: 25%;
    }
    #logo_arc_fondo
    {
        position: absolute;
        top: 5rem;
        width: 100%;
        height: 80%;
    }
    .div-producto-2
    {
        display: flex;
        padding: 0 10rem 10rem;
        justify-content: space-between;
        align-items: center;
    }
    .div-producto-2 img
    {
        width: 40%;
    }
    .div-producto-2 p
    {
        width: 50%;
        color: white;
        font-size: x-large;
        text-align: center;
    }
    .div-producto-3
    {
        display: flex;
        justify-content: space-around;
        padding:5rem 10rem 10rem;
        align-items: flex-end;
    }
    .div-producto-3 div
    {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .div-producto-3 div img
    {
        width: 25rem;
    }
    .div-producto-3 div h3
    {
        color: white;
        font-size: 2rem;
    }
    .div-producto-3 div p
    {
        color: white;
        font-size: 1.5rem;
    }
    /*------------ CONTACTO ------------*/
    .div-fondo-imagen-contacto
    {
        width: 100%;
        height: 70vh;
        background-image: url("../media/contacto.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-fondo-imagen-faq
    {
        width: 100%;
        height: 70vh;
        background-image: url("../media/faq.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-contacto
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rem;
    }
    .div-contacto img
    {
        width: 50%;
    }
    .div-contacto form
    {
        display: flex;
        flex-direction: column;
        width: 45%;
    }
    .div-contacto form select, input, textarea
    {
        margin-bottom: 2rem;
        resize: none;
        font-size: 1.5rem;
        padding: 1rem;
        background-color: #060e19;
        border-color: #d8ecff;
        color: #d8ecff;        
    }
    .div-contacto form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .div-contacto form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #d8ecff;
       opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .div-contacto form input::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #d8ecff;
       opacity:  1;
    }
    .div-contacto form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: #d8ecff;
    }
    .div-contacto form textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .div-contacto form textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #d8ecff;
       opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .div-contacto form textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #d8ecff;
       opacity:  1;
    }
    .div-contacto form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: #d8ecff;
    }
    #submit
    {
        width: 60%;
        margin: 0 auto;
        border-radius:.7rem;
        border: solid 1px;
        color: #060e19;
        font-weight: 600;
        background-color: #3c91e6;
    }
    /*-------------- FAQ ---------------*/
    .div-faq
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10rem 15rem;
    }
    .pregunta
    {
        color: #d8ecff;
        font-size: large;
        border-bottom: solid #d8ecff 1px;
    }
    /*----------- TUTORIALES -----------*/
    .div-fondo-imagen-tutoriales
    {
        width: 100%;
        height: 70vh;
        background-image: url("../media/tutoriales.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-tutoriales-videos
    {
        display: flex;
        flex-wrap: wrap;       
        padding: 10rem 2rem 5rem;
        width: 90%;
        border-bottom: solid white 1px;
        margin: 0 auto;
    }
    .div-video
    {
        background-color: #d8ecff;
        width: 27rem;
        height: 40rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        font-size: medium;
        padding: 0 0 2rem;
        margin-right: 2rem;
        margin-bottom: 2rem;

    }
    .div-video p
    {
        width: 80%;
        text-align: center;
    }
    .div-video img
    {
        width: 100%;
        height: 50%;
    }
    .div-video a
    {
        background-color: #3c91e6;
        padding: 1rem;
    }
    .div-tutoriales-archivos
    {
        padding: 5rem 10rem 10rem;
        display: flex;
        flex-wrap: wrap;
    }
    .div-tutoriales-archivos a
    {
        display: flex;
        flex-direction: column;
        font-size: 1.3rem;
        align-items: center;
    }
    .div-tutoriales-archivos a img
    {
        width: 10rem;
        margin-bottom: 1rem;
    }
    /* reproducir_video */
    .reproducir_video
    {        
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .8);
        z-index: 10;
        align-items: center;
        justify-content: center;
    }
    .reproducir_video video
    {
        width: 70%;
    }
    .cross img
    {
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 2.5rem;
    }
    /*-------------- LOGIN -------------*/
    .header-login nav
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 0;
        background-color: rgba(216,236,255,.8);
        width: 100%;
        height: 5rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .header-login nav img
    {
        width: 80%;
    }
    .header-login nav a
    {
        color: #060e19;
        margin-left: 2rem;
        font-size: small;
    }
    .header-login nav a:hover
    {
        color: #3c91e6;
    }
    .header-login nav a:last-child
    {
        margin-right: 2rem;
    }
    .main-login
    {
        background-color: #060e19;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100vh;
        width: 100%;
    }
    .main-login img
    {
        width: 45rem;
    }
    .main-login form
    {
        display: flex;
        flex-direction: column;
        width: 30%;
    }
    .main-login form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .main-login form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #d8ecff;
       opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .main-login form input::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #d8ecff;
       opacity:  1;
    }
    .main-login input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: #d8ecff;
    }
    .main-login input:last-child
    {
        width: 60%;
        margin: 0 auto;
        border-radius: 1rem;
        border: solid 1px;
        color: #060e19;
        font-weight: 600;
        background-color: #3c91e6;
    }
}
@media (max-width: 600px) 
{
    /* header-index */
    .header-index
    {
       width: 100%;      
    }
    .header-index nav
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 0;
        background-color: rgba(216,236,255,.8);
        width: 100%;
        height: 5rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .header-index nav img
    {
        width: 80%;
    }
    .header-index nav a
    {
        color: #060e19;
        margin-left: 2rem;
        font-size: small;
        font-weight: 600;
    }
    .header-index nav a:hover
    {
        color: #3c91e6;
    }
    .header-index nav a:last-child
    {
        margin-right: 2rem;
        color: #3c91e6;
    }
    .header-index nav a:last-child:hover
    {
        color: #23bec6;
    }
    .header-index h1
    {
        color: white;
        font-size: 2rem;
        width: 80%;
        position: absolute;
        top: 22%;
        left: 11%;
        text-align: center;
    }
    .video-header
    {
        width: 100%;
        position: relative;
        top: 6rem;
        left: 0;
        z-index: 0;
    }
    .div-fondo-oscuro
    {
        background-color: rgba(0, 0, 0, 1);
        width: 100%;    
    }
    /* main-index */
    .main-index
    {
        background-color: #060e19;
    }
    .about_us-index
    {
        color: white;
        font-size: medium;
        text-align: center;
        padding: 10rem 4rem 0rem;
    }
    .div-1-index
    {
        position: relative;
        display: flex;
        align-items: center;                
        flex-direction: column;
        padding: 4rem 0rem;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-interno-div-1-index
    {        
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: white;
        width: 15%;
        z-index: 1;
        margin: 2rem 0rem;
        font-size: 1.5rem;
    }
    .div-interno-div-1-index h2
    {
        margin: 1rem 0;
    }
    .div-interno-div-1-index span
    {
        width: 200%;
    }
    .div-1-index-icon
    {
        width: 10rem;
    }
    #pc_vectorizada
    {
      display: none;      
    }
    /* Testimoniales - index */
    .testimonios-index
    {
        padding: 5rem 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #1f3040;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .testimonio
    {
        font-size: medium;
        max-width: 100%;
        color: white;
        margin-bottom: 3rem;
    }
    .testimonio div
    {
        display: flex;
    }
    .testimonio img
    {
        width: 30%;
        height: 30%;
        border-radius: 50%;
        margin-right: 3rem;
    }
    .testimonio span b
    {
        color: #3c91e6;
    }
    /* Clientes - index */
    .clientes-index
    {
        padding: 5rem 5rem 10rem;
        background-color: #d8ecff;
        display: flex;
        flex-direction: column;
        align-items: center;        
    }
    .clientes-index h3
    {      
        font-size: x-large;
        font-weight: 800;       
    }
    .clientes-index div
    {
       text-align: center;
        
    }
    .clientes-index img
    {
        width: 15rem;
        margin: 2rem;
    }
    /* div last index */
    .div-last-index
    {
        background-color: white;
        padding: 0 5rem 10rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .div-last-index h3
    {
        font-size: x-large;
        text-align: center;
    }
    .div-last-index p
    {
        font-size: large;
        text-align: center;
        margin-bottom: 4rem;
    }
    .div-last-index a
    {
        background-color: #3c91e6;
        padding:1rem 2rem;
        font-size: 2rem;
        border-radius: 2rem;
    }
    /* footer */
    .footer
    {
        width: 100%;
        height: 6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2em;
        background-color:#d8ecff;
    }
    .footer img
    {
        width: 15rem;
    }
    .footer span
    {
        font-size: .8rem;
    }
    .footer div
    {
        display: none;
    }
    /*------------ NOSOTROS ------------*/
    .header-medium
    {
        width: 100%;
        height: 40vh;
    }
    .div-fondo-imagen
    {
        width: 100%;
        height: 40vh;
        background-image: url("../media/team.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: 14%;
        background-color: #43B5C7;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-fondo-oscuro-2
    {
        width: 100%;
        height: 40vh;
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0;
        left: 0;
    }    
    .div-nosotros-1
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        padding: 7rem 3rem 3rem;
        margin-bottom: 5rem;
    }
    .div-nosotros-1 p
    {
        width: 70%;
        font-size: medium;
    }
    .div-nosotros-1 img
    {
        width: 80%;
        
    }
    .div-mision
    {
        display: flex;
        padding: 0rem 4rem 5rem;
        position: relative;
        
    }
    .div-mision p
    {
        color: white;
        font-size: small;
        position: relative;
        text-align: center;
        width: 50%;
    }
    .div-mision img
    {
        width: 45%;
        height: 50%;
        margin-right: 3rem;
    }
    .div-vision
    {
        display: flex;
        padding: 0rem 4rem 5rem;
        position: relative;
    }
    .div-vision p
    {
        color: white;
        font-size: small;
        position: relative;
        text-align: center;
        width: 50%;
    }
    .div-vision img
    {
        width: 45%;
        height: 50%;
        margin-left: 3rem;
        content: url(../media/objetivo.png);
    }
    .div-valores
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0 6rem;
    }
    .div-valores span
    {
        margin-top: 1rem;
        color: white;
        font-size: large;
    }
    /*------------ PRODUCTO ------------*/
    .div-producto-1
    {
        display: flex;
        flex-direction: column;
        color: white;       
        justify-content: space-between;
        align-items: center;        
    }
    .div-producto-1 p
    {
        width: 80%;
        font-size: large;
        text-align: center;
        position: relative;        
    }
    #logo_arc
    {
        width: 100%;
        margin-top: 7rem;
    }
    .blue {position:relative;width:100%;height:100%;}
    .blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
        position:absolute;
        width:40%; height: 30%;
        border-color:#23bec6;
        border-style:solid;
        content: ' ';
        margin: -10px;
    }
    .blue:before {top:0;left:0;border-width: 1.5px 0px 0 1.5px}
    .blue:after {bottom:0;right:0;border-width: 0 1.5px 1.5px 0 }
    .blue>:first-child:before {bottom:0;right:0;border-width: 0 1.5px 1.5px 0}
    .blue>:first-child:after {bottom:0;left:0;border-width: 0 0 1.5px 1.5px}

    .blue-invert {position:relative;width:100%;height:100%;}
    .blue-invert:before, .blue-invert:after, .blue-invert>:first-child:before, .blue-invert>:first-child:after {
        position:absolute;
        width:40%; height: 30%;
        border-color:#23bec6;
        border-style:solid;
        content: ' ';
        margin: -10px;
    }
    .blue-invert:before {top:0;right:0;border-width: 1.5px 1.5px 0 0}
    .blue-invert:after {bottom:0;left:0;border-width: 0 0 1.5px 1.5px }
    .blue-invert>:first-child:before {bottom:0;right:0;border-width: 0 1.5px 1.5px 0}
    .blue-invert>:first-child:after {bottom:0;left:0;border-width: 0 0 1.5px 1.5px}

   
    .div-producto-2
    {
        display: flex;
        flex-direction: column-reverse;
        padding: 0 5rem 2rem;
        align-items: center;
    }
    .div-producto-2 img
    {
        width: 90%;
        margin: 5rem 0 3rem;
    }
    .div-producto-2 p
    {
        width: 95%;
        color: white;
        font-size: large;
        text-align: center;
    }
    .div-producto-3
    {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        padding:5rem 5rem 2rem;
        align-items: center;
    }
    .div-producto-3 div
    {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
    .div-producto-3 div img
    {
        width: 20rem;
    }
    .div-producto-3 div h3
    {
        color: white;
        font-size: 1.7rem;
    }
    .div-producto-3 div p
    {
        color: white;
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    /*------------ CONTACTO ------------*/
    .div-fondo-imagen-contacto
    {
        width: 100%;
        height: 40vh;
        background-image: url("../media/contacto.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-fondo-imagen-faq
    {
        width: 100%;
        height: 40vh;
        background-image: url("../media/faq.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-contacto
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 5rem;
    }
    .div-contacto img
    {
        width: 100%;
        margin-bottom: 3rem;
    }
    .div-contacto form
    {
        display: flex;
        flex-direction: column;
        
    }
    .div-contacto form select, input, textarea
    {
        margin-bottom: 2rem;
        resize: none;
        font-size: 1.5rem;
        padding: 1rem;
        background-color: #060e19;
        border-color: #d8ecff;
        color: #d8ecff;        
    }

    .div-contacto form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .div-contacto form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #d8ecff;
    opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .div-contacto form input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #d8ecff;
    opacity:  1;
    }
    .div-contacto form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #d8ecff;
    }
    .div-contacto form textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .div-contacto form textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #d8ecff;
    opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .div-contacto form textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #d8ecff;
    opacity:  1;
    }
    .div-contacto form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #d8ecff;
    }
    #submit
    {
        width: 75%;
        margin: 0 auto;
        border-radius: 1rem;
        border: solid 1px;
        color: #060e19;
        font-weight: 600;
        background-color: #3c91e6;
    }
    /*-------------- FAQ ---------------*/
    .div-faq
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5rem 5rem;
    }
    .pregunta
    {
        color: #d8ecff;
        font-size: large;
        border-bottom: solid #d8ecff 1px;
    }
    /*----------- TUTORIALES -----------*/
    .div-fondo-imagen-tutoriales
    {
        width: 100%;
        height: 40vh;
        background-image: url("../media/tutoriales.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 29px 48px -5px rgba(0,0,0,0.75);
    }
    .div-tutoriales-videos
    {
        display: flex;
        flex-wrap: wrap;       
        padding: 10rem 2rem 5rem;
        width: 90%;
        border-bottom: solid white 1px;
        margin: 0 auto;
    }
    .div-video
    {
        background-color: #d8ecff;
        width: 27rem;
        height: 40rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        font-size: medium;
        padding: 0 0 2rem;
        margin-right: 2rem;
        margin-bottom: 2rem;

    }
    .div-video p
    {
        width: 80%;
        text-align: center;
    }
    .div-video img
    {
        width: 100%;
        height: 50%;
    }
    .div-video a
    {
        background-color: #3c91e6;
        padding: 1rem;
    }
    .div-tutoriales-archivos
    {
        padding: 5rem 10rem 10rem;
        display: flex;
        flex-wrap: wrap;
    }
    .div-tutoriales-archivos a
    {
        display: flex;
        flex-direction: column;
        font-size: 1.3rem;
        align-items: center;
    }
    .div-tutoriales-archivos a img
    {
        width: 10rem;
        margin-bottom: 1rem;
    }
    /* reproducir_video */
    .reproducir_video
    {        
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .8);
        z-index: 10;
        align-items: center;
        justify-content: center;
    }
    .reproducir_video video
    {
        width: 70%;
    }
    .cross img
    {
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 2.5rem;
    }
    /*-------------- LOGIN -------------*/
    .header-login nav
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 0;
        background-color: rgba(216,236,255,.8);
        width: 100%;
        height: 5rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .header-login nav img
    {
        width: 80%;
    }
    .header-login nav a
    {
        color: #060e19;
        margin-left: 2rem;
        font-size: small;
    }
    .header-login nav a:hover
    {
        color: #3c91e6;
    }
    .header-login nav a:last-child
    {
        margin-right: 2rem;
    }
    .main-login
    {
        background-color: #060e19;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100vh;
        width: 100%;
    }
    .main-login img
    {
        width: 50%;
        margin-top: 5rem;
    }
    .main-login form
    {
        display: flex;
        flex-direction: column;        
    }
    .main-login form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #d8ecff;
    }
    .main-login form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #d8ecff;
    opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    .main-login form input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #d8ecff;
    opacity:  1;
    }
    .main-login input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #d8ecff;
    }
    .main-login input:last-child
    {
        width: 75%;
        margin: 0 auto;
        border-radius: 1rem;
        border: solid 1px;
        color: #060e19;
        font-weight: 600;
        background-color: #3c91e6;
    }

}