@font-face{
    font-family: 'Poppins', sans-serif;
    src: url("../fonts/Poppins-ExtraLight.ttf");
    src: url("../fonts/Poppins-Light.ttf");
    src: url("../fonts/Poppins-SemiBold.ttf");
}

:root{
   
    --links:#800000;
   --linksHover:#a31508;
   --titulos:#505050;
   --fondo:#1d1d1d;

}

*{
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

.bd{
    /* outline: 1px solid #000; */
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
}



#img1_cel,#img2_cel{
    display: none;
}

/******************************************************************/
/*nav*/
nav{
    position: absolute;
    top:0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}
nav .contenedor_nav{
    width: 90%;
    text-align: right;
}
nav .contenedor_nav a{
    color: var(--links)

}
nav .contenedor_nav a i{
    position: relative;
    right: 2px;
}


/****************************************************************/
/*SECTION PRINCIPAL*/
section{
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
section .section_izquierda, section .section_derecho{
    height: 490px;
    width: 380px;
}

/*DERECHA*/
section .section_derecho{
    background-image: radial-gradient(circle, #800000, #840203, #880506, #8d0708, #910a0b, #910a0b, #910a0b, #910a0b, #8d0708, #880506, #840203, #800000);
    display: flex;
    justify-content: center;
    align-items: center;
}
section .section_derecho img{
    width: 300px;
}


/*IZQUIERDA*/
section .section_izquierda{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
section .section_izquierda div{
    width: 80%;
    
}
section .section_izquierda .izq_logo img{
    width: 180px;
}
/*MENSAJE*/
section .izq_mensaje h3{
    font-size: 1em;
    color: var(--titulos);
}
section .izq_mensaje p{
    font-size: 0.8em;
    font-weight: 600;
    color: var(--titulos);
}

/*FORMULARIO*/
section .section_izquierda .izq_formulario{
    width: 80%;
}
section .section_izquierda table{
    width: 100%;
}
section .section_izquierda table td{
    padding: 10px 0;
}
section .section_izquierda table label{
    color:var(--titulos);
    font-size: 0.8em;
    margin-left: 5px;
    font-weight: 600;
}
section .section_izquierda table label i{
    font-size: 0.9em;
    position: relative;
    right: 2px;
}

section .section_izquierda table input{
    outline: none;
}
section .section_izquierda table input{
    height: 40px;
    width:100%;
    font-size: 16px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-family: inherit; 
}
section .section_izquierda table td.button input{
    background-color: var(--links);
    color:white;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    
}

section .section_izquierda form .field{
    position: relative;
    width: 100%;
 
}
 form .field .fa-eye{
    position: absolute;
    right: 15px;
    color:#ccc;
    top:70%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    cursor: pointer;
}
 form .field .fa-eye.active::before{
    color:#333;
    content: "\f070";
}


/*ERROR*/
.error-txt{
    text-align: center;
    color:crimson;
    font-size: 0.9em;
}
.error-txt i{
    position: relative;
    right: 2px;
}

/*COPY*/
section .copy{
    font-size: 0.8em;
    margin-top: 20px;
    color: var(--titulos);
    
}
section .copy a{
    color:var(--links);
    font-weight: 600;
}



/*=============== BREAKPOINTS ===============*/

  
@media only screen and (max-width: 767px){
    

    body{
        /* background-color: var(--fondo); */
        background-image: radial-gradient(circle, #800000, #840203, #880506, #8d0708, #910a0b, #910a0b, #910a0b, #910a0b, #8d0708, #880506, #840203, #800000);
    }

    
    #img1_cel, #img2_cel{
        display: block;
    }

    section{
        width: 100%;
        height: 100%;
    }
    section .section_derecho{
        display: none;
    }
    section .section_izquierda{
        width: 90%;
        height: auto;
    }

    
    /*IZQUIERDA*/

    section .section_izquierda .izq_logo img{
        width: 200px;
        margin: 0 auto;
    }
   
    section .section_izquierda div{
        width: 90%;
        
    }
    
    /*MENSAJE*/
    section div.izq_mensaje{
        width: 70%;
    }
    section .izq_mensaje{
        text-align: center;
    }
    section .izq_mensaje h3{
        font-size: 1em;
        color: white;
    }
    section .izq_mensaje p{
        font-size: 0.8em;
        font-weight: 600;
        color: white;
    }

    section .section_izquierda table td{
        padding: 18px;
    }

    section .section_izquierda table label{
        color:white;
        font-size: 0.9em;
    }
    section .section_izquierda table label i{
        color: white;
    }
    
    section .section_izquierda table td.button input{
        background-color: #800000;
    }


    .error-txt{

        color:white;
      
    }

    section .copy{
        font-size: 0.8em;
        
        color: white;
        
    }
    section .copy a{
        color:white;
       
    }
    
}