*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand',sans-serif;
    text-decoration: none;
}

body{
    background: linear-gradient(90deg, #78f589, #a7dd60);
    padding: 20px;
}

/*DIV GENERAL */
.container-all{
    width: 100%;
    max-width: 1000px;
    margin: auto;
    margin-top: 100px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
}

/*DIV IZQUIERDO */
.ctn-form{
    width: 80%;
    padding: 40px;
    background: #f7f7f7;
}

/* LOGO DE LA EMPRESA DISEAGRO*/
.logo{
    
    display: block;
    margin: auto;
}

/* TITULO---INICIAR SESION */
.title{
    text-align: center;
    margin-top: 20px;
    font-weight: 300;
    color: #7a7a7a;
}

/*--LABEL EMAIL Y CONTRASEÑA--*/
label {
    display: block;
    margin-top: 30px;
    font-size: 20px;
    font-weight: 300;
    color: #7a7a7a;
}

/*--CUADROS -- IMPUT EMAIL Y CONTRASEÑA--*/
input[type="text"],
input[type="password"]{
    width: 100%;
    height: 30px;
    background: rgba(0,0,0,0);
    border: 0px;
    outline: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    color: black;
    font-size: 16px;
}

/*---BOTON DE INICIAR SESION */
input[type="submit"]{
    width: 100%;
    height: 50px;
    margin-top: 60px;
    color: white;
    border: 0px;
    background: linear-gradient(90deg, #78f589, #a7dd60);
    font-weight: 300;
    cursor: pointer;
    font-size: 20px;

}

/*---EFECTO HOVER CUANDO PASA EL MOUSE POR EL BOTON--*/
input[type="submit"]:hover{
    background: linear-gradient(90deg, #a7dd60, #78f589);
}

/*--SPAN EL TEXTO DE AUN NO TE HAS REGISTRADO*/
.text-footer{
    display: block;
    margin-top: 100px;
    text-align: center;
    color: #7a7a7a;
    font-weight: 400;
}

/*--ESTILOS EN EL LINK REGISTRATE--*/
.text-footer a{
    color: green;
    font-weight: 500;
}

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

/*DIV DERECHO-- AGREGAR IMAGEN */
.ctn-text{
    width: 100%;
    background-image: url(../IMAGENES/slider8.png);
    background-position: center;
    background-size: cover;
    padding: 40px;  /*para la descripcion*/
    position: relative;
}

/* COLOR DE FONDO DE LA IMAGEN */
.capa{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #a7dd60, #78f589);
    opacity: 0.8;
}

/* TITULO DE LA DESCRIPCION DE LA IMAGEN */
.title-description{
    position: relative;
    top: 80px;
    color: white;
    font-weight: 300;
    font-size: 40px;
}

/*texto DE LA DESCRIPCION DE LA IMAGEN */
.text-description{
    position: relative;
    top: 110px;
    color: white;
    font-size: 18px;
    font-weight: 200;
}

/*---MENSAJE DE ERROR AL NO INGRESAR DATOS AL FORMULARIO */
.msg-error{
    color:red;
    display: block;
    margin-top: 10px;
}

/*--------------------------------------------------------------------------------*/
/*---ESTILO  -- DE LA SECCION BIENVENIDO */
.ctn-welcome{
    width: 100%;
    max-width: 800px;
    text-align: center;
    padding: 40px;
    margin: auto;
    margin-top: 100px;
    background: white;
    border-radius: 20px;
}

/*LOGO DE BIEVENIDO */
.logo-welcome{
    display: block;
    margin: auto;
    
}

/*TITULO DE BINVENIDO */
.title-welcome{
    margin-top: 25px;
    font-weight: 400;
    font-size: 40px;
}

.title-welcome b{
    color: green;
}

/*BOTON DE CERRRA SESION */
.close-sesion{
    background: linear-gradient(90deg, #78f589, #a7dd60);
    width: 100%;
    max-width: 600px;
    margin: auto;
    display: block;
    padding: 20px;
    margin-top: 40px;
    color: white;
    font-size: 20px;
    font-weight: 300;
}

/*EFECTO HOVER EN BOTON CERRA SESION */
.close-sesion:hover{
    background: linear-gradient(90deg, #a7dd60, #78f589);
}
/*------------------------------------------------------------------------------------*/
/*---RESPONSIVE --- */
@media screen and (max-width:800px){
    .ctn-text{
        display: none;
    }

    .ctn-form{
        margin: auto;
        width: 100%;
        background: white;
    }
}