@charset "utf-8";
/* CSS Document */

.banner-wrapper{background-color: #000000 !important;}

video{height:100%; width:100%; object-fit: cover;}   
    
/* -------------------------------------------- */
.player {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .player__video {
    position: relative;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 75%;
    border-radius:25px;
    background-color: #000000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.95);
    transform: translate(-50%, -50%);
  }
  .js--show-video {
    opacity: 1;
  }
  .video-filler {
    display: block;
    width: 100%;
  }
  .video-close {
    position: absolute;
    z-index: 0;
    top: -16px;
    right: -30px;
    outline: none;
    border-radius:50%;
    cursor: pointer;
    font-size:35px;
    color: #ffffff;
  }
  .video-iframe {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius:25px;
  }

  .video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
  }

  .spinner {
    width: 32px;
    height: 32px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* -------------------------------------------------------------- */
.video-title{font-size:20px; line-height:35px; margin:30px auto 0;}

.video-thumbs{ margin-bottom:35px;}
.video-item{ position:relative; /*height: 250px;*/}
.video-item .v-img{ width:100%; /*height: 250px;*/ border-radius: 15px;}
.video-item:before {border-radius: 0 0 15px 15px;
    z-index: 1;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    bottom: 0px;
    left:0;
    border-bottom: 6px solid #da8105;
    background: linear-gradient(to bottom,rgba(0,0,0,0)45%,rgba(0,0,0,3) 100%);
}
.video-info { font-size:14px;}
.view img{vertical-align:middle; margin-right:5px; width:18px !important;  height:18px !important; }
.video-content{ position:absolute; bottom:5px;  z-index: 2; color:#fff; padding:3%; display: flex; align-items: center;justify-content:space-between;
left:0; right:0; }
.video-name a{ text-align:left; font-size:18px; line-height:30px; margin-top:8px; font-weight: 500; color: var(--secondry-color);}

.title-wrapper{display: flex; justify-content: space-between; padding:2px 5px; align-items: center;} 
.title-wrapper .video-name {width: 85%; text-align: left !important;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px;}
.title-wrapper .share img{width:15px; height: 15px; border: none !important; }

.play-v img{height:39px; width: 40px;}





/*-----------v-share----------------*/
.v-share img{width:16px !important; height:16px !important;}
.v-share a{ color:#fff;}
.video-content {align-items: end;}
.video-info{display: flex;}
.video-info div{ margin:0 0px 0 15px;}
.view img {margin-right:5px;}
.video-preview{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;display: none;}

@media only screen and (min-width:992px) {.categories .swiper-wrapper {justify-content: center;}}

@media (max-width:960px) {/*.show-video{ width:85%;}*/ .video-title{ margin:50px auto -30px;}}
@media (max-width:810px){.video-title{ margin:30px auto -20px; font-size:18px; text-align:center; line-height:25px;}}
@media screen and (min-width:576px) and (max-width:767px) {
.video-item{height: 160px;}
.video-item .v-img{ width:100%; height: 160px;}
}


@media (max-width:767px){.video-close {top: -36px; right: -9px;}
.player__video {max-width: 90%;}

}

@media (max-width:600px){.video-title{ margin-top:55px;}}


/*---------------------------landscap---------------------------------------*/

@media (orientation: landscape) {
  .player__video {
     /* Styles to apply when the video is in landscape mode */
     max-width: 60% !important; 
     height: auto; 
   }
  
  .video-close {top:-10px!important; right: -30px!important;}  
 }
 
 
 @media (orientation: landscape) and (max-width: 799px) and (min-height: 320px) {
   /* Styles for mobile landscape mode with a minimum height */
  
  .player__video {
     /* Styles to apply when the video is in landscape mode */
     max-width: 60% !important; 
     height: auto; 
   }
  
  .video-close {top:-10px!important; right: -30px!important;}  
  
 }