@font-face{
    font-family: 'vainilla';
    src: url(/Resources/fonts/Caramel\ and\ Vanilla.ttf );
}
/*----------------------------Background---------------------------------------------*/
#principal{ 
    min-height: 100vh;
    background-size: cover;
    animation: slideBg 80s linear infinite 0s;
    animation-timing-function: ease-in-out;
}
@keyframes slideBg {
    0% {
        background-image: url('/Resources/img/bg_img/5QANIAJIEVG6JDBNZP6SIMH2J4.jpg')
    }
    25% {
        background-image: url('/Resources/img/bg_img/1569662.jpg')
    }
    50% {
        background-image: url('/Resources/img/bg_img/royalty-free-music-hip-hop.jpg')
    }
    75% {
        background-image: url('/Resources/img/bg_img/Lollapalooza_2015.jpg')
    }
    100% {
        background-image: url('/Resources/img/bg_img/thumb-1920-4574.jpg')
    }
    
}

/*---------------------Header Background---------------------------------------------*/
#navbar_hide{
    background-color: rgb(0, 0, 0);
    padding-left: 75px;
}
/*-------------------------Arregla espacios blancos del header-----------------------*/
#arreglo_padding{
    padding: 0;
}
/*---------------------Font del titulo principal y shadow----------------------------*/
#navbar_font{
    font-family: vainilla;
    color: aliceblue;
    font-size: 80px;
    opacity: 80%;
    text-shadow: -9px 9px 9px rgba(255, 255, 255, 0.4);
    transition: all .5s;
}
/*---------------------Efecto titulo principal--------------------------------------*/
#navbar_font:hover{
    text-shadow: -4px 9px rgba(255, 255, 255, 0.4);
    font-size: 90px;
}
/*---------------------Toggler = las 3 barritas-------------------------------------*/
#toggler_img{
    background-image: url(/Resources/img/toggler/clipart365828.png);
    opacity: 80%;
}
/*---------------------Bottom-------------------------------------------------------*/
#button_nav{
    box-shadow: 0px 0px 0px 0px rgb(0, 0, 0);
    transition: .3s;
}
/*---------------------Header lista horizontal (font RYE)---------------------------*/
#lista_nav {
    color: rgb(255, 255, 255);
    font-family: 'Rye', cursive;
    
}
#padding_header{
    padding-top: 20px;
}
/*---------------------Se aplica estilos a elementos de la lista--------------------*/
#lista_nav li {
    display:inline;
    padding-left:3px;
    padding-right:3px;
    font-size: 18px;
    transition: font-size 0.5s;
}
/*---------------------Se aplica transición de tamaño a elementos de la lista------*/
#lista_nav li:hover {
    font-size: 20px;
}
/*---------------------Se aplica transición a elementos de la lista-----------------*/
#lista_nav a {
    text-decoration: none;
    color: antiquewhite;
    text-shadow: 0px 7px 6px rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: text-shadow 1s;
}
/*---------------------Se aplica transición de shadow a elementos de la lista-------*/
#lista_nav a:hover {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px rgba(255, 255, 255, 0.4);
    text-decoration: underline;
}
/*----------------------------Padeo y size de los iconos----------------------------*/
#icon_style{
    width: 18px;
    height: 20px;
    margin-bottom: 10px;
}
/*---------------------Sombra del menu oculto---------------------------------------*/
#offcanvasNavbar{
    box-shadow: -5px 0px 20px 20px rgb(0, 0, 0);
}
/*---------------------Efecto sombra sobre el bottom-------------------------------*/
#button_nav:hover{
    box-shadow: 1px 1px 1px 1px rgb(255, 255, 255);
}
/*---------------------Ampliar tiempo de la transision por defecto-----------------*/
.offcanvas{
    transition: transform .5s
}
/*---------------------Background del menu oculto----------------------------------*/
#background_hide_nav{
    background-color: black;
}
/*---------------------Titulo del menu oculto--------------------------------------*/
#font_hide_tittle_nav{
    font-family: vainilla;
    color: aliceblue;
    font-size: 60px;
    opacity: 80%;
    text-shadow: -4px 9px rgba(255, 255, 255, 0.4);
}
/*---------------------Font del texto del menu oculto------------------------------*/
#font_link_hide_nav{
    color: aliceblue;
    font-family: 'Rye', cursive;
    transition: 0s;
}
#font_link_hide_nav:hover{
    background-color: rgba(255, 247, 236, 0.689);
    color: black;
    background-image: url("https://www.transparenttextures.com/patterns/subtle-grunge.png");
}
/*---------------------Atributos a los elementos li del lu-------------------------*/
#lista_nav li ul li{
    color: antiquewhite;
    background-color: rgba(133, 9, 9, 0);
    padding: 10px 10px;
    display: block;
}
/*---------------------A los hijos li directos de #lista_nav----------------------*/
#lista_nav > li{
    float: left;
    border: 1px white;
}
/*---------------------Menu flotante, box shadow----------------------------------*/
#lista_nav li ul{   
    display:none;
    position:absolute;
    box-shadow: 0px 0px 11px 0px antiquewhite;
}
/*-----------------------Estilos al boton del contenido prv-----------------------*/
#cont_prv_btn{
    cursor: context-menu;
}
/*---------------------Mostrar el menu pculto-------------------------------------*/
#lista_nav li:hover > ul{   
    display:block;
    position:absolute;
    min-width:140px;
}
/*---------------------Estilo al hr-----------------------------------------------*/
hr{
    background-color: black;
    color: rgb(255, 255, 255);
    margin: 0;
}
#modal_box_style{
    background-color: #e9d3b6;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.597);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in;
}
.open-modal{
    background: none;
    color: antiquewhite;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    text-shadow: 0px 7px 6px rgba(255, 255, 255, 0.4);
    transition: text-shadow 1s;
}
.open-modal:hover{
    text-shadow: 0px 0px rgba(255, 255, 255, 0.4);
    color: white;
    text-decoration: underline;
}
.close-modal{
    background-color: rgba(250, 235, 215, 0);
    color: antiquewhite;
    transition: background-color 3s;

}
.close-modal:hover{
    background-color: black;
    color: antiquewhite;
    
}

.modal.is-visible {
    visibility: visible;
    opacity: 1;
}

.modal-dialog {
    position: relative;
    max-width: 800px;
    max-height: 80vh;
    border-radius: 5px;
    background: var(--white);
    overflow: auto;
    cursor: default;
    color: black;
}

  .modal-dialog > * {
    padding: 1rem;
}

.modal-header,
.modal-footer {
    background: var(--lightgray);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header .close-modal {
    font-size: 1.5rem;
}

.modal p + p {
    margin-top: 1rem;
}
#hr_sign_in{
    color: rgba(0, 0, 0, 0.847);
    height: 4px;
    margin: 1px;
    opacity: 1;
    
}
.modal-content{
    justify-content: baseline;
}