/* ==========================================================================
 MAIN
 ========================================================================== */
 
html {background: #111; color: #fff;font-family:-apple-system, BlinkMacSystemFont, 'Coinbase Display', 'Coinbase Sans', sans-serif; font-weight: 400;}
a   {text-decoration: none; color: #fff;}

@keyframes LoadOpacity {
  0% {
    opacity: 100%;
    display: block;
  }
  100% {
    opacity: 0%;
    display: none;
  }
}

@keyframes AnimatedLine {
  0% { background-position: 0px 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0px 50%; }
}
#safari { background-color:#111 }

.preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;background-image: url(..assets/logo.svg);background-repeat: no-repeat;background-color: #171717;background-position: center;background-size: 240px;  animation: 1s ease-out 0s 1  forwards LoadOpacity; pointer-events: none;}


/* ==========================================================================
 TOP
 ========================================================================== */

.top {

}
.header {
         justify-content: space-between;
         display: flex;
         align-items: center;
         position: relative;
         padding: 0 35px;
         display: flex;
         margin-bottom: 0;
         position: fixed;
         width: 100%;
         z-index: 999;
         box-sizing: border-box;
         top: 0;
         background: #111;
         box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.4);
         z-index: 9999;
         }
        
.header .logo img {width: 180px;}      
  
.header ul      {display: flex; gap:25px;}
 
.header ul li   {display: inline-block;}
.header ul li a {display: inline-block; display: flex; align-items: center; gap: 10px;}
.menu ul li         {opacity: 25%; transition: all .15s ease;}

.header ul li.btn-x {display: none;}

.menu ul li:hover,
.menu ul li.active  {opacity: 100%;}

.top.mobile {display: none;}



.header.search {
    display: block;
    display: flex;
    padding: 7px 35px;
}

.header-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
}
.search input {background: none;border: none;font-size: 54px;width: 60vw;font-weight: 300;color: rgba(255,255,255,0.9);}

.search input:focus {border: 0;box-shadow: none;background: none;outline: none;text-indent: 0;color: #fff;}

.header:after {
    content: "";
    background: linear-gradient(90deg, #FFF400 0.33%, #FF0000 38.23%, #0000ED 71.45%, #02EDED 100%);
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: block;
    z-index: 999;
    left: 0;
    background-size: 300%;
    /* left: -35px; */
    animation: AnimatedLine 15s ease-in-out infinite;
}

.sub-menu ul        {gap:50px;}
.sub-menu ul li a i {font-size: 22px;}

h3  {font-weight:400;font-size: 32px;}

.categories           {margin: 25px auto;padding: 0 35px;top: 0;margin-top: 160px;}
.categories ul        {display: flex;gap:15px;margin: 0;padding: 0;}
.categories ul li     {display: inline-block;}
.categories ul li a   {padding: 12px 25px;background: rgba(255, 255, 255, 0.15);border-radius: 100px;font-weight: 500;font-size: 15px;box-sizing: content-box;display: inline-block; transition: all .25s ease;}
.categories ul li a:hover {background: rgba(255, 255, 255, 0.35)}

/* ==========================================================================
 CONTENT
 ========================================================================== */
 
 .content {padding: 0 35px;display: flex;flex-direction: column;gap: 75px;margin-bottom: 75px;z-index: 999;position: relative;}
 
 .day {display: flex;flex-direction: column;gap: 20px;}
 
 .day-title {}
 .day-title h5 {font-size: 1.5vw;font-weight: 300;margin: 0;padding: 0;}
 .day-title h2 {font-size: 3.5vw;font-weight: 300;margin: 0;line-height: 3vw;}
 .day-title h2 b {font-weight: 500;}
 
 .day-item-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 25px;
 }
 
 .day-item  {position: relative; display: block;}
 .day-item a {
     width: 22vw;
     height: 33vw;
     display: block;
     background-size: cover!important;
     background-position: center!important;
     border-radius: 15px;
     box-shadow: 0px 4px 10px 5px #000000;
 }
 
 
 .overlay {opacity: 0; transition: all .15s ease;}
 .overlay a {    box-sizing: border-box;width: auto;
   height: auto;padding: 20px;
   box-shadow: none;box-sizing: border-box;
   display: flex; height: 100%;
   flex-direction: column;
   justify-content: space-between;}
 .overlay:hover {opacity: 1;}
 .overlay-movie {
    position: absolute;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) -60%, rgba(0, 0, 0, 0.8) 100%), url(ems.jpg);
    top: 0;
    height: 100%;
    width: 100%;
}
 .overlay-top {
    display: flex;
    justify-content: space-between;
}
 
 .overlay-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
 .overlay-item i {
    font-size: 16px;
}
 .overlay-item h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}
 .overlay-item span {
    width: auto;
    height: auto;
    padding: auto;
    box-shadow: none;
    border-radius: 100px;
    border: 0;
    display: flex;
    font-weight: 500;
    gap: 10px;
    align-items: center;
    font-size: 18px;
}
 
 .overlay-bottom {
    /* position: absolute; */
    bottom: 0;
    display: flex;
}
 .overlay-bottom h1 {
    font-weight: 300;
    line-height: 3.5vw;
    font-size: 4vw;
    width: 100%;
    margin: 0;
}
 .streaming {
    display: flex;
    bottom: 0;
    display: none;
    align-items: center;
}
 .streaming a {
    width: auto;
    height: auto;
    background: #fff;
    height: 50px;
    width: 50px;
    border-radius: 999px;
} 
 
 
 /* ==========================================================================
  MOVIE
  ========================================================================== */
 .page-movie .header {background: rgba(17,17,17,0.85);box-shadow: none;}
 .page-movie .header.search {opacity: 0;}
 
 .gradient              {position: absolute;left: 0;top: 0;z-index: 999;width: 100vw;height: 100%;background: linear-gradient(180deg, rgba(17, 17, 17, 0.5) 0%, rgba(17,17,17,1) 100%), url(B25_37397_RC2-scaled.jpg);}
 .background-image      {position: absolute;left: 0;top: 0;display: none;z-index: 1;width: 99vw;height: 70vw;}
 .background-image .bg  {background-size: cover!important;background-position: center!important;height: 100%;width:100%;}
 
 
 .background-video {position: absolute;left: 0;top: 0;z-index: 1;width: 99vw;height: 730px;}
 
 
 @media (min-aspect-ratio: 16/9) {
   .background-video iframe {
     /* height = 100 * (9 / 16) = 56.25 */
     height: 56.25vw;
   }
 }
     
 @media (max-aspect-ratio: 16/9) {
   .background-video iframe {
     /* width = 100 / (9 / 16) = 177.777777 */
     width: 180vw!important;
     height: 200vh!important;
   }
 }
 
 .background-video{
   width: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
 }
     
 .background-video iframe {
   position: absolute;
   top: 0;
   left: 50%;
   width: 100vw;
   height: 100vh;
   transform: translate(-50%, -30%);
   z-index: 1;
 }
 
.page-movie .content              {margin-top: 170px;gap:40px;} 
.page-movie .content .headline h1 {font-size: 10vw;font-weight: 400;line-height: 9vw;text-transform: uppercase;margin: 0;} 

.page-movie .content-wrapper {display: flex;gap: 25px;justify-content: space-between;}
.page-movie .content-wrapper .content-block {width: 50%;} 
.page-movie .content-wrapper .content-block.headline {}
.page-movie .content-wrapper .content-block.buttons {
    width: 30%;
    text-align: right;
}
.page-movie .content-wrapper .content-block ul   {display: flex;flex-direction: column;gap: 15px;text-align: right;}
.page-movie .content-wrapper .content-block ul li {display: block;height: 100%;width: 100%;}
.page-movie .content-wrapper .content-block .btn {padding: 20px 20px;border-radius: 100px;box-sizing: border-box;border:1px solid #fff;/* height: 50px; */display: block;text-align: center;width: auto;transition:all .5s ease;}

.page-movie .content-wrapper .content-block .btn:hover {background: #fff; color: #111;}
 
  
    /* ==========================================================================
     RATING
     ========================================================================== */
   .page-movie .content-block.rating {}
   .page-movie .rating .content-wrapper {gap: 35px;justify-content: left;}
   .page-movie .rating .content-wrapper .content-item {display: flex;gap: 10px;}
   .page-movie .rating .content-wrapper img {width: 5vw;height: fit-content;}
   .page-movie .rating .content-wrapper .item-wrapper {}
   .page-movie .rating .content-wrapper .item-wrapper p {margin: 0;font-size: 1.25vw;line-height: 1.25vw;}
   .page-movie .rating .content-wrapper .item-wrapper h3 {font-size: 4vw;margin: 0;line-height: 4vw;}
 
   /* ==========================================================================
    RELEASE
    ========================================================================== */
   
   .page-movie .release .content-wrapper                {display: flex;justify-content: left;gap: 55px;}
   .page-movie .release .content-wrapper .content-item  {}
   .page-movie .release .content-wrapper .content-item .item-wrapper p          {margin: 0;font-size: 16px;}
   .page-movie .release .content-wrapper .content-item .item-wrapper h3         {margin: 0;}
   .page-movie .release .content-wrapper .content-item .item-wrapper h3 b:after {content: '\A'; white-space: pre;}
   .page-movie .release .content-wrapper .content-item .item-wrapper.released {opacity: 0.35;}
    
    /* ==========================================================================
     Stream
     ========================================================================== */
   
   .page-movie .stream .content-wrapper {justify-content: left;}
   .page-movie .stream .content-item {}
   
   .page-movie .stream .content-item a {height: 100px;width: 100px;/* align-content: center; */padding: 5px;/* box-sizing: border-box; */background: rgba(255,255,255,0.01);border-radius: 130px;justify-content: center;display: flex;
     transition: all .5s ease;
   }
   .page-movie .stream .content-item img {/* width: 110px; */height: auto;text-align: center;padding: 35px;}
 
 
 .page-movie .stream .content-item a:hover {background: rgba(255,255,255,0.1)}
 
 /* ==========================================================================
  FOOTER
  ========================================================================== */
  .footer {display: flex;flex-direction: column;padding: 0 35px;z-index: 999;position: relative;}
  .footer * {margin-bottom: 10px; text-transform: uppercase; line-height: 4vw;}
  .footer ul  {margin: 0; padding: 0; display: flex; justify-content: space-between; }
  .footer ul li {display: inline-block; }
  .footer ul li {font-size: 5vw;}
  .footer img   {width: 60px;}
  
  .footer a.alt {font-size: 5vw; color: #1D10BF}