/*  --------------------------------------------------------
PANTALLAS GRANDES                          */
@media( min-width:601px){
BODY{
    display: flex;  justify-content: center;    align-items: center;
    margin:auto;
    min-width: 1024px; max-width: 1150px;
    height: 100vh;  width: 100vw;
    flex-basis: 100vw;   flex-wrap: wrap;
    background: linear-gradient(rgb(30 30 30) , black );
    background-size: 100vw 100vh;
    padding: 1em 0em 1em 0em;
    overflow: hidden;
    font-family: Verdana, Geneva, Tahoma, sans-serif;   
}

BODY H1{    text-align: center; width: 100%;    }

#mainFrame{
    width: 100%;    height: 95vh;
    background: linear-gradient(15deg, rgb(210 210 210) 0%, rgb(250 250 250) 100%);
    border-radius: 1em;
    }

#loginBar{
    width: 100%;    height: 4em;    
    
    background: linear-gradient(0deg, rgb(63 2 121) 0%, rgb(54 0 56) 100% );
    display: grid;
    grid-template-columns: 20% 30% 30% 10% 20%;
    grid-gap: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    }
    #loginBar::before{
        content:" ";    width: 12em;    height: 4em;
        margin-left: 2em;
        display: flex;
        background-image: url('img/havonah_white.svg');
        background-position: 0.5em 0.5em;
        background-repeat: no-repeat;
        background-size: 10em auto;
    }

    #loginBar div{
        display: flex;  
        align-items: center;    justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease-out;
        
    }#loginBar div:hover{
        background-color: rgb(201 0 184);
        }
    /*  BOTON DE LOGIN */
    #login_loginbtn{
        grid-column: 5; grid-row: 1;
        width: 40%; padding-left: 1.5em;
        flex-basis: 5em;
        background-image: url('img/usrIcon_white.svg');
        background-repeat: no-repeat;
        background-position: 1em 1em;
        }

    /*  BOTON DE REGISTRO */
    #login_registry{
        grid-column: 4; grid-row: 1;
        width: 100%; flex-basis: 8em;
        }
#wellcomeSexs{
    width: 95%;     height: 30vw;
    margin: 3em auto ;
    display: flex;  flex-direction: row;
    flex-basis: 80%;    justify-content: center;
    overflow-y: hidden;  overflow-x: scroll;
    }

    .sexItem{
        width:15em; height: 16em;
        margin: 0em 1em 0em 1em;
        border-radius: 1em;
        color: white;
        background-color: gray;
        align-items: last baseline; 
        cursor: pointer;
        transition: all 0.5s ease-out;
    }.sexItem:hover{
        background-color: rgb(201 0 184);
        }
    /*      TIENDA EN LINEA     */
    .sexItem[action=goto_estore]{
        background-image: url('img/sex_tiendaOnline.svg');
        background-repeat: no-repeat;   
        background-position: center;
        background-size: 40%;
        filter: saturate(0) opacity(0.6);
        transition: all 0.5s ease-out;
    }.sexItem[action=goto_estore]:hover{
        background-size: 80%;
        filter: saturate(1) opacity(1);
        }
    
    /*      PROYECTO NEVADON     */
    .sexItem[action=goto_nevadon]{
        background-image: url('img/sex_projNevadon.svg');
        background-repeat: no-repeat;   
        background-position: center;
        background-size: 40%;
        filter: saturate(0) opacity(0.6);
        transition: all 0.5s ease-out;
    }.sexItem[action=goto_nevadon]:hover{
        background-color: rgb(136, 235, 188);
        background-size: 80%;
        filter: saturate(1) opacity(1);
        }
    
    /*      RUTAS DE URANTIA     */
    .sexItem[action=goto_rutas]{
        background-image: url('img/sex_rutasUrantia.svg');
        background-repeat: no-repeat;   
        background-position: center;
        background-size: 40%;
        filter: saturate(0) opacity(0.6);
        transition: all 0.5s ease-out;
    }.sexItem[action=goto_rutas]:hover{
        background-color: rgb(226, 207, 190);
        background-size: 80%;
        filter: saturate(1) opacity(1);
        }

     /*      HAVONA FEED     */
     .sexItem[action=goto_feed]{
        background-image: url('img/sex_havonaFeed.svg');
        background-repeat: no-repeat;   
        background-position: center;
        background-size: 40%;
        filter: saturate(0) opacity(0.6);
        transition: all 0.5s ease-out;
    }.sexItem[action=goto_feed]:hover{
        background-color: rgb(115, 0, 209);
        background-size: 80%;
        filter: saturate(1) opacity(1);
        }
/*  ///////////////////////////////////////////////////
              FORMULARIO DE REGISTRO          */
.registryForm{
    width: 100vw;   height: 100vh;
    position: fixed;    z-index: 999;
    top:0px;    left:0px;      background-color: black;
    padding: 1em 2em 5em 2em;
    display: flex;  flex-basis: 40vw;   flex-wrap: wrap;   
    justify-content: center;        align-items:flex-start;
    color: white;
    overflow-y: scroll;
    }
    .registryForm H3, p{   width: 90vw;    text-align: center;  margin: 0px;}
    .registryForm INPUT, SELECT{
        text-align: center;
        filter: brightness(0.7);
        cursor: pointer;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1.2em;
        height: 2em;
        transition: all 0.2s;
    }.registryForm INPUT:hover, .registryForm SELECT:hover{
        filter: brightness(1.2);
        }
    
    .registryForm H4{        width: 10vw;    margin-left:2vw;  }
    .registryForm H4[for=fenac]{        width: 10vw;    margin-left: 3em;  }
    /*  CUADROS DE TEXTO INPUT y select*/
    .registryForm INPUT[type=text]{     width: 70%;     height: 2em;     }
    .registryForm INPUT[type=password]{ width: 30%;     height: 2em;   margin: 0vw 5vw 0vw 5vw;  }
    
    .registryForm #txtAlias{    margin: 0vw 10vw 0vw 10vw;    }

    /* Acuerdo de privacidad y uso de datos */
    .registryForm INPUT[type=checkbox]{ width: 10vw; height: 2em;    margin-left: 10vw;      cursor: pointer;}
    .registryForm LABEL[for=usodatos]{  width: 50vw;    margin-left: 0em;   cursor: pointer;  }
    .registryForm INPUT[action=registry_launchAcuerdo]{  width: 55vw; margin: 0vw 10vw 0vw 10vw ;}
/*  BOTON DE enviar registro   */
    .registryForm INPUT[action=registry_send]{
        width: 30%;     height: 3em;
        background-color: rgb(255, 0, 191); color: white;
    }
    /*  BOTON DE CANCELAR   */
    .registryForm INPUT[action=registry_close]{
        width: 30%;     height: 3em;
        background-color: rgb(187, 6, 6); color: white;
        margin: 0em 0em 5em 2em;
    }
/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}