:root {
    --color-greyBlue: #364852;
    --color-siena-transparent: #5f01115b;
    --color-azul-verde: #0d3135;
    --color-verde-aguila: #1f929a;
    --color-font-footer-mg: #8FEAFF;
    --color-lightBlue: #5ebbf0;
    --color-blue-dropdown: #537aa3;
    --color-azul-claro: #21608d;
    --color-blue: #2b75a0;
    --color-navbar-scroll: rgb(15, 59, 95);
    --color-azul-cuevana: rgb(20, 31, 74);
    --color-blue-main: #141d32;
    --color-footer-mg: #0A1A2A;
    --color-celeste-oscuro-mas: rgb(67, 125, 159);
    --color-celeste-oscuro-menos: rgb(89, 132, 157);
    --color-siena-nose: #7d5f64;
    --color-verde-nose: #88b4be;
}

body{
    box-sizing: border-box !important;
}
/* Pelicula Principal */

.slider-main, .carousel-item img, .img-movie-main{
    font-size: 16px;
    height: 38.44em;
    color: white;
    /* background: linear-gradient(rgba(0, 0, 0, .5) 0%, rgba(20, 29, 50) 100% ), url(../assets/img/main/avatar-background.jpg) !important; */
    background-position: 70% 35% !important;
    background-size: cover !important;

    /* margin-bottom: 3.12em; */
}
.img-mobile-center{
    background-position: 43% 35% !important;
}
.img-mobile-right{
    background-position: 80% 35% !important;
}
.img-mobile-left{
    background-position: 30% 35% !important;
}

.slider-main .container, .img-movie-main{
    margin-bottom: 2em !important;
    font-size: 14px;
    z-index: 10 !important;
}
#nabvar-contain{
    width: 90vw !important;
    margin-left: 4% !important;
    margin-right: 4% !important;
}
.slider-main .title{
    font-weight: 600;
    font-size: 3.12em;
    margin-bottom: 0.4em;
    transform: translateX(-.2%);
    line-height: 1.1em;
    margin-bottom: 20px !important;
}
.slider-main .description{
    font-weight: normal;
    font-size: 1em;
    line-height: 1.75em;
    margin-bottom: 1.25em;
    padding-right: 20px;
}
.description{
    max-height: 15vh !important;
    overflow: auto;
}
.modal-body-addMovie::-webkit-scrollbar{
    width: 12px;
}
.modal-body-addMovie::-webkit-scrollbar-thumb{
    background-color: var(--color-celeste-oscuro-mas);
    border-radius: 70rem;
}

.description::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar, #resultados-busqueda::-webkit-scrollbar{
    width: 7px !important;
}
.description::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb, #resultados-busqueda::-webkit-scrollbar-thumb{
    background-color: var(--color-azul-claro);
    border-radius: 70rem;
}
.description::-webkit-scrollbar-track, .modal-body-addMovie::-webkit-scrollbar-track, .descripcion-detail::-webkit-scrollbar-track{
    background-color: #031223;
    border-radius: 70rem;
}

.slider-main button{
    background: rgba(0, 0, 0, .5);
    border: none;
    border-radius: 0.31em;
    padding: .93em 1.87em;
    color: white;
    margin-right: 1.25em;
    cursor: pointer;
    transition: .3s ease all;
    font-size: 1.16em;
}
.slider-main button{
    margin-top: .5em;
}
.slider-main button:hover{
    background: #ffff;
    color: #000;
}
.details h4, .details h5{
    font-size: 15px !important;
}
.offcanvas-email-perfil{
    color: var(--color-celeste-oscuro-mas) !important;
}
.navbar-main{
    background: linear-gradient(rgba(38, 46, 78, 1) 0%, rgba(0, 0, 0, 0) 100% ) !important;
}
.carousel-control-prev, .carousel-control-next{
    background-color: transparent !important;
}

#input-search{
    width: 11rem;
    height: 30px;
    outline: none;
    border-radius: 50px 0px 0px 50px;
    padding: 20px;
    font-size: 18px;
    transition: all .25s ease;
    overflow: visible;
    border-style: solid;
    border-color:  rgba(61, 79, 145, .5);
    border-right: none;
    background-color: rgba(8, 15, 40, .5);
    color: inherit;
    font: inherit;
}

#input-search:hover{
    width: 13rem;
}
#input-search:focus{
    width: 13rem;
}
.cont1{
    width: 50px;
    height: 30px;
    border-style: solid;
    border-color: rgba(61, 79, 145, .5);
    background-color: rgba(8, 15, 40, .5);
    border-left: none;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px 50px 50px 0px;
    border-width: 2px;
}
.cont2 button{
    background-color: rgba(8, 15, 40, 0);
    border: none;
    color: var(--color-azul-claro)
}
.navbar-element{
    margin: 0px 0px 0px 10px;
}
.navbar-brand{
    margin-left: 2% !important;
}

@media screen and (min-width: 576px) {
    .slider-main .container{
        margin-left: 5% !important;
        margin-right: 5% !important;
        margin-bottom: 4.25em !important;
        font-size: 16px;
    }
    .modal-fullscreen-sm-down{
        margin-top: 40px;
    }
    #modalAddMovie .modal-fullscreen-sm-down{
        margin-top: 20px !important;
        height: 92vh !important;
    }
    .slider-main .button-info{
        font-size: 1.16em !important;
    }
    .details h4, .details h5{
        font-size: 22px !important;
    }
}
@media screen and (min-width: 768px) {
    .title-error{
        font-size: 5em !important;
    }
    .slider-main .description{
        max-width: 80%;
    }
    .nav-btn-user{
        display: flex !important;
        align-items: center !important;
    }
}
@media screen and (max-width: 768px) {
    .movie{
        width: 130px !important;
        height: 180px !important;
    }
    .movie:hover::after{
        width: 130px !important;
        height: 180px !important;
        content: url(./../assets/img/boton-de-play\ \(1\).png) !important;

    }
    .container-films-cats button:first-child {
        padding: 0;
    }
    #table-movies{
        font-size: 13px !important;
    }
    .title-admin{
        font-size: 10px;
        padding-right: 30px;
    }    
    .btnNuevo{
        font-size: 15px !;
    }    
    .slider-main .title{
        font-size: 40px !important;
    }
}
@media screen and (max-width: 992px) {    
    .nav-btn-user{
        display: none !important;
    }
    .offcanvas-body{
        padding-top: 0 !important;
    }
    .responsive-favs{
        font-size: 14px;
    }
    .element-fav{
        padding: 0px 10px;
    }
    #offcanvasDarkNavbar{
        margin: 0;
        padding: 0;
        background-image: url(./../assets/img/login-modal.png);
        height: 100vh;
        background-size: cover;
        background-position:top;
        background-repeat: no-repeat;
    }
        #resultados-busqueda{
        max-width: 250px !important;
        top: 43px !important;
    }
    .dropdown-menu{
        width: 330px !important;
    }
    #table-movies{
        font-size: 14px;
    }
    .title-admin{
        font-size: 1.8rem !important;
    }    
    .btnNuevo{
        font-size: 15px !important;
    }  
}
@media screen and (max-width: 484px) {
    .carrousel-cats{
        padding-left: 0 !important;
    }
    .container-films-cats{
        scroll-margin-top: 100px;
        padding: 0px !important;
    }
    .angle-right, .angle-left{
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    .slider-main .container{
        padding-bottom: 80px;
    }
    .container-categories{
        padding-top: 0 !important;
    }
    .title-categories{
        font-size: 18px;
        padding:  0px !important;
    }
    .movie{
        height: 150px !important;
        width: 100px !important;
    }
    .movie:hover::after{
        height: 150px !important;
        width: 100px !important;
    }
    .movie-card{
        margin-right: 8px !important;
    }
    .navbar-brand, .navbar-toggler{
        font-size: 15px !important;
    }
    .slider-main .title {
        font-size: 30px !important;
        padding-right: 30px;
    }
    .login-nav-button{
        margin-left: 0;
    }
    .container-categories{
        padding: 20px 0px 35px 0px !important;
    }
    .container-icons-redes{
        height: 10px;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    .icons-links-redes{
        font-size: 45px !important;
    }
    .icons-footer{
        padding: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 60px !important;
    }
    .container-footer-links{
        height: 150px;
        padding: 0 !important;
        transform: translate(-5%, -5%);
    }
    .title-error{
        font-size: 3.5em !important;
    }
    .contenedor-body-about .container{
        font-size: 15px !important;
    }
    #table-movies{
        font-size: 12px !important;
    }
    .row-add-movie label{
        font-size: 10px !important;
        padding: 15px 5px;
    }
    .row-add-movie input{
        font-size: 12px !important;
        padding-left: 8px !important;
    }
    .title-admin{
        font-size: 1.25rem !important;
        padding-right: 0 !important;
    }    
    .btnNuevo{
        font-size: 12px !important;
    } 
}
@media screen and (max-width: 400px) {
    .navbar-element{
      font-size: 14px;
    }
    .login-nav-button{
      margin-left: 0 !important;
    }
  }
@media screen and (max-width: 368px) {
    .navbar-brand{
      font-size: 18px !important;
      margin-left: 15px;
    }
    .description{
        max-height: 18vh !important;
        overflow: auto;
    }
    .slider-main .title {
        font-size: 27px !important;
        margin-bottom: 12px !important;
        padding-right: 20px;

    }
    .dropdown-menu{
        min-width: 250px !important;
        max-height: 220px !important;
    }
    .title-error{
        font-size: 3em !important;
    }
    .img-avatar{
        margin-left: 0px !important;
        width: 150px !important;
        height: 150px !important;
    }
    .title-admin{
        font-size: 1.15rem !important;
        text-align: start !important;
        padding-left: 0px;
    } 
}

@media screen and (max-width: 850px) and (orientation: landscape){
    .main-about .row{
        padding-top: 40px !important;
        margin-left: 0 !important;
    }
    .main-about .row .description-proyect{
        padding-bottom: 30px;
        text-indent: 3px;
    }
    .main-about .row .mt-5{
        padding: 0 !important;
    }
    /** MODAL CONTACT */
    #contactModal .modal-header{
        padding: 5px 16px;
    }
    #contactModal .modal-body{
        padding: 0px 16px 10px 16px;
    }
    #contactModal .modal-body{
        font-size: 12px;
    }
    #contactModal .modal-header h2{
        font-size: 25px;
    }
    #textarea-email-contact, #desc-add-movie{
        height: 75px !important;
    }
    #contactModal, #staticBackdrop{
        --bs-modal-margin: 1.5rem !important;
    }
    .img-error{
        background-size: contain !important;
    }
    .img-error .title-error{
        margin-top: 50px;
        font-size: 30px !important;
    }
    .img-error .fs-2{
        font-size: 20px !important;
        margin-bottom: 0;
    }
    .img-error .fw-bolder{
        font-size: 25px !important;
    }
    .slider-main .container{
        margin: 0 !important;
    }
    .slider-main .container .flex-wrap{
        margin-top: 8px;
        /* margin-bottom: 25px; */
    }
    .slider-main .container{
        padding-bottom: 25px;
        padding-left: 35px;
    }
    .slider-main .title{
        font-size: 26px !important;
        margin-bottom: 7px !important;
    }
    .slider-main .details h4, .slider-main .details h5{
        font-size: 18px !important;
    }
    .slider-main .description{
        font-size: 14.5px;
    }
    .slider-main .container .button-play-title, .slider-main .container .button-info{
        font-size: 12px !important;
    }
    /** SLIDERS CATEGORIAS */
    .container-categories{
        padding-top: 0 !important;
    }
    .title-categories{
        font-size: 18px;
        padding:  0px !important;
    }
    .movie{
        height: 150px !important;
        width: 100px !important;
    }
    .movie:hover::after{
        height: 150px !important;
        width: 100px !important;
    }
    .movie-card{
        margin-right: 8px !important;
    }
    .navbar-brand, .navbar-toggler{
        font-size: 15px !important;
    }
    /** OFFCANVAS */
    .navbar-nav{
        padding-left: 10px;
    }
    .offcanvas-header{
        margin-top: 10px;
        padding: 10px 16px 5px 16px;
    }
    .offcanvas-header h5{
        font-size: 16px;
    }
    #input-search{
        font-size: 14px;
    }
    .offcanvas-header-perfil{
        margin: 0 !important;
        font-size: 10px !important;
    }
    .centrar{
        padding-bottom: 10px;
    }
    .offcanvas-body .nav-link{
        padding: 7px 0 !important;
    }
    .offcanvas-title-perfil, .offcanvas-email-perfil{
        font-size: 14px !important;
    }
    .offcanvas-email-perfil, .admin-link-edit{
        margin: 0 !important;
    }
    .offcanvas-perfil-list li{
        margin-top: 3.5px !important;
    }
    .offcanvas-perfil-list li a{
        font-size: 15px !important;
    }
    /** .lista-generos */
    .lista-generos li a{
        font-size: 14px;
    }
    .lista-generos{
        width: 100px !important;
    }
    /** ADMIN */
    .section-admin{
        padding-top: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .title-table-movie{
        padding: 50px 0 0 0 !important;
        font-size: 10px !important;
        width: 85vw;
    }
    .title-table-movie h2{
        font-size: 20px !important;
        text-align: start !important;
    }
    .btnNuevo{
        margin: 0 !important;
        font-size: 11px !important;
    }
    .container-table-movies{
        width: 90vw;
    }
    /** MODAL ADD-MOVIE */
    #modalAddMovie .modal-header{
        padding: 10px 0 0 0 !important;
        justify-content: space-around;
    }
    #modalAddMovie .modal-header h3{
        font-size: 20px;
    }
    #form-add-movie label, #form-add-movie input, #genero-add-movie{
        font-size: 12px !important;
    }
    .form-check{
        display: flex;
        align-items: center;
    }
    .form-check-input{
        margin-right: 7px;
    }
}
@media screen and (max-width: 680px) and (orientation: landscape){
    .navbar-element{
      font-size: 14px;
    }
    .main-about .container{
        padding-left: 0 !important;
        width: 100vw !important;
    }
    .main-about .row{
        padding-top: 20px !important;
        margin-left: 0 !important;
    }
    .main-about .row{
        font-size: 14px;
    }
    .main-about .row .mt-5{
        padding: 0 !important;
    }
    /** MODAL CONTACT */
      #textarea-email-contact{
        height: 70px !important;
      }
       #contactModal, #staticBackdrop{
        --bs-modal-margin: .5rem !important;
       }
       .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
        height: calc(3rem + calc(var(--bs-border-width) * 2));
      }
      #btnForm{
        margin-top: 8px !important;
        margin-right: 8px;
      }
      .container-asunto-contact{
        margin-bottom: 8px !important;
      }
      .movie{
        height: 130px !important;
        width: 90px !important;
    }
    .movie:hover::after{
        height: 130px !important;
        width: 90px !important;
    }
}
.bg-scroll-nav{
    background-color: #204a6d !important;
}
/* #204a6d piola*/
/* #022747 2 puede ser */

.dropdown-menu{
    min-width: 280px ;
    max-height: 250px ;
    overflow: auto !important;
    border-radius: .7rem !important;
    padding: 5px 0px;
    /* background-color: #031223; */
    background-color: var(--color-blue-dropdown);
}
.dropdown-menu::-webkit-scrollbar-track{
    background-color: #031223;
    background-color: var(--color-blue-dropdown);
    border-radius: 0rem 1rem 1rem 0;
}
.offcanvas-perfil{
    margin: 0;
    padding: 0;
    background-image: url(./../assets/img/login-modal.png);
    height: 100vh;
    background-size: cover;
    background-position:top;
    background-repeat: no-repeat;
}

.perfil-element{
    text-decoration: none;
    font-size: 18px;
    margin-left: 0;
    color: whitesmoke ;
    font-weight: 600;
}
.perfil-element:hover{
    color: var(--color-greyBlue) !important;
}
.perfil-element{
    color: white ;
}
.offcanvas-perfil-item{
    margin-top: 15px !important;
}
.offcanvas-perfil-list{
    list-style: none;
    padding-left: 25px;

}
.separador-perfil{
    width: 80%;
    border: solid 1px var(--color-greyBlue) !important;
    margin: 4px;
}

/* CONTAINER CATEGORIES */

.container-categories{
    /* background: linear-gradient(rgba(38, 46, 78, .5) 0%, rgba(38, 46, 78, .7) 100% ) , url(./../assets/img/login-modal.png); */
    padding: 20px 0px 40px 0px;
    background: linear-gradient(rgba(38, 46, 78, .5) 0%, rgba(11, 152, 189, .2) 100% ) , url(./../assets/img/login-modal.png);
    background-size: cover;
}

.carrousel-cats{
    overflow: hidden;
}
.container-films-cats button{
    color: var(--color-azul-claro);
}
.movie{
    /* width: 170px o 175px; */
    /* height: 230px; */
    width: 181px;
    height: 240px;
    background-position: 50% 10%;
    background-size: cover;
    display: flex;
    justify-content: end;
    /* box-shadow: -10px 10px rgba(12, 17, 19, 0.1), 0 5px 30px rgba(12, 17, 19, .95); */
}
.movie:hover{
    position: relative;
    transform: scale(1.07);
    transition: all .15s;
}
.movie-card{
    margin-right: 12px ;

}
.fav-btn i{
    color: gainsboro;
    font-size: 30px !important;
    margin-bottom: 3px;
    color: var(--color-navbar-scroll);
}
.fav-btn{
    position: relative;
    z-index: 1;
}

.fav-btn i:hover{
    color: rgb(157, 16, 16);
}
.fav-btn::after{
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: 2.5px;
    height: 20px;
    width: 20px;
    background-color: gainsboro;
}

#lista-vacia{
    pointer-events: none !important;
}

.movie:hover::after{
    position: absolute;
    width: 181px;
    height: 240px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    content: url(./../assets/img/boton-de-play\ \(4\).png);
    /* content: url(./../assets/img/jugar.png); */
}

/* .container-films-cats{
    transform: translateY(-2%);
}
#title-categories{
    transform: translateY(-20%);
} */

/** footer */
.icons-redes{
    height: 80px;
    width: 80px;
    font-size: 60px !important;
  }
  .icons-links-redes{
    color: var(--color-blue) !important;
    color: var(--color-verde-aguila) !important;
  }
  .footer-links a{
    color: rgb(67, 125, 159) !important;

    font-weight: 750;
  }
  .container-footer-links{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .container-logo{
    font-size: 35px !important;
    transform: translateX(-5%);
    text-decoration: none;
    color: var(--color-verde-aguila) !important;
  }
  .container-footer-bottom{
    color: rgb(125, 138, 145) !important;
    font-weight: 700;
  }
  .footer-landing{
    background: linear-gradient(rgba(20, 29, 50) 0%, rgba(20, 29, 50, .8) 100% ) !important;
  }

  .footer-landing a:hover{
    color: var(--color-font-footer-mg) !important;

  }
  .footer-links{
    margin-left: -20% !important;
  }

.title-categories{
    padding: 5px 0px;
}
.container-films-cats{
    scroll-margin-top: 100px;
    padding: 0px 10px;
}

#resultados-busqueda{
    top: 43px;
    left: 5px;
    background-color: var(--color-blue-dropdown);
    border-radius: .5rem;
    max-width: 300px;
    padding: 5px 0px;
    min-width: 250px;
    max-height: 250px;
    overflow: auto;
}
.list-item-busqueda{
    font-size: 14px;
    padding: 5px;
}
.list-item-busqueda:hover, .element-fav:hover, .lista-generos li:hover{
    background-color: #0b2f57;
    /* border-radius: .5rem; */
}
.generos-col-left{
    border-right: solid 1.5px #474a4e48;
}
.lista-generos .dropdown-item:hover{
    background-color: #0b2f57;
}


#resultados-busqueda::before{
    content: '';
    position: absolute;
    left: 1.5rem;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 7.5px solid #537aa3;
}

.error-main, .contenedor-body-about, .contenedor-body-admin{
    background: linear-gradient(rgba(38, 46, 78, .5) 0%, rgba(11, 152, 189, .2) 100% ) , url(./../assets/img/login-modal.png);    
}
.contenedor-body-about{
    font-size: 17px !important;
}
.img-avatar{
    background: url(./../assets/img/avataaars-removebg-preview-removebg-preview\ \(1\).png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* background-clip: cover; */
    height: 200px;
    width: 200px;
    
}
/** ERROR 404*/
.img-error{
    background: linear-gradient(rgba(0, 0, 0, .5) 0%, rgba(20, 29, 50) 100% ), url(/assets/img/404.JPG);
    height: 90vh !important;
}
.title-error{
    font-size: 4.5em;
    margin-top: 120px;
}
.img-error a:hover{
    color: var(--color-blue) !important;
}
/** ABOUT US*/
.main-about{
    min-height: 100vh;
    /* padding-bottom: min(30px, 10%) !important; */
}
#body-about{
    min-height: 100vh !important;
}
.modal-header{
    border-bottom: 0px;
  }
.modal-contact-content, .modal-content-addMovie{
    background: linear-gradient(rgba(11, 152, 189, .5) 0%, rgba(38, 46, 78, .5) 100% ) , url(./../assets/img/login-modal.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.modal-content-addMovie{
    background: linear-gradient(rgba(11, 152, 189, .7) 0%, rgba(38, 46, 78, .5) 100% ) , url(./../assets/img/login-modal.png);

}

.modal-contact-content .modal-header, .modal-content-addMovie{
    color: antiquewhite;    
}
.modal-content-addMovie label:not(.form-check-label){
    color: black;
}
.modal-fullscreen-sm-down{
    padding: 10px;
}

/** Efecto Bounce in top
 */
.bounce-in-top {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both;
  }
  
  @-webkit-keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
      transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
      transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
      transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }
  @keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
      transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
      transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
      transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }
  
  /** Fin efecto modal de registro */


#table-movies table th, #table-movies table td{
    /* min-height: 75px; */
    /* min-height: 75px; */
    border: none;
    align-self: center;
}
/* rgb(81, 91, 131) */
/* rgb(72, 78, 101); */
/* rgb(44, 48, 67) */
/* #222c32 */
.header-table{
    background-color: #022638;
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
    padding: 10px 0px;
}
tr:nth-child(even){
    background-color: var(--color-azul-claro);
    /* height: 75px; */
}
tr:not(.header-table):hover {
    background-color:rgb(24, 28, 55);
}
/* rgb(39, 46, 84) */
#table-movies table{
    background: linear-gradient(rgba(38, 46, 78, .5) 0%, rgba(11, 152, 189, .2) 100% ) , url(./../assets/img/sala.jpg);
    background-size: cover;
    background-position: center; 
    border-radius: .7rem;
}

#modalAddMovie .form-floating{
    font-size: 14px;
}

#modalAddMovie{
    max-height: 100% !important;
    /* overflow: scroll; */
}


.table-year{
    /* color: rgb(126, 126, 131); */
}

.title-admin{
    padding-left: 10px;
    /* padding-bottom: 30px; */
    font-size: 35px;
    font-family: 'Candal', sans-serif;
    color: var(--color-lightBlue);
}

/* .row-add-movie label{
    font-size: 10px !important;
} */

.btnNuevo{
    color: rgb(215, 241, 236);
    /* color: gainsboro; */
    /* background-color: var(--color-azul-claro); */
    background-color: var(--color-celeste-oscuro-mas);
    border-style: solid;
    border-radius: .5rem;
    border-color: var(--color-blue);
    font-size: 1.3rem;
    font-family: 'Candal', sans-serif;
    padding: 8px 12px;
}
.btnNuevo:hover{
    background: var(--color-footer-mg);
    /* background: rgba(0, 65, 103, 0); */
    color: rgb(136, 238, 221);
    border-color: var(--color-blue);
    opacity: 100%;
    position: relative;
    transition: 200ms;
    transform:  scale(1.15);
}