/* ========================================================================== #GP/INTL HTML5 Video Player ========================================================================== */
/* --player-color var can be used to skin a few things depending on the brand. 
Elements with class hide are display none.
Elements with class ui and hide are opacity 0 and pointer-events none. We then animate them back to opacity 1.
Mobile first.
*/ 
:root {
   --player-color: #bf1313;
}
.icmsvideocontainer {
   box-sizing: border-box;
   font-family: 'ars-maquette-web', sans-serif;
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   overflow: hidden;
}

video::cue {
   font-size: 30px;
   background-color: rgba(0,0,0,0.5);
   color: #fff;
 }

.recirculation-auto-timer {
   position: absolute;
   color: #fff;
   font-weight: 600;
   /* text-shadow: #fff 1px 0 1px;
   background: rgba(0, 0, 0, .2); */
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2px;
   height: 50%;
   font-size: 11px;
   width: 100%;
}

#id_text .icmsvideocontainer, .herogrid .icmsvideocontainer {
   width: 100%;
}

.icmsvideocontainer img.videoposter {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
}

figure.icmsvideocontainer::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url(/s/vplayer-firstplay-button.svg);
   background-size: 18%;
   background-repeat: no-repeat;
   background-position: center;
   z-index: 1;
   transition: all 0.4s ease-out;
   opacity: 1;
}

figure.icmsvideocontainer.starting::after, figure.icmsvideocontainer.obs_broll::after{ 
   opacity: 0;
}

figure.icmsvideocontainer.started::after, .icmsvideocontainer.started img.videoposter, .icmsvideocontainer.started figcaption {
   display: none;
   opacity: 0;
}

figure.icmsvideocontainer.obs_broll::after, .icmsvideocontainer.obs_broll img.videoposter, .icmsvideocontainer.obs_broll figcaption {
   display: none;
   opacity: 0;
}

.icmsvideocontainer figcaption {
   transition: opacity 250ms, visibility 250ms;
   box-sizing: border-box;
   position: absolute;
   top: 0px;
   left: 0px;
   line-height: 22px;
   padding: 25px 21px;
   font-size: 17px;
   width: 100%;
   display: flex;
   -moz-box-align: center;
   align-items: center;
   z-index: 2;
   background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0));
   color: f7f7f7;
   display: none;
}

a.contenturl, a.contenturl:hover {
   font-size: 16px;
   color: white;
}
.icmsvideocontainer .video-overlay {
   height: auto;
   width: 100%;
   position: absolute;
   z-index: 2;
   top: 0px;
   user-select: none;
   pointer-events: none;
   opacity: 0;
}
/*
.icmsvideocontainer:not(.started) .video-overlay {
   display: none;
} */
.icmsvideocontainer .hide.ui {
   opacity: 0;
   pointer-events: none;
}

.icmsvideocontainer .ui {
   opacity: 1;
   transition: all 0.3s;
}
.icmsvideocontainer.started .video-overlay {
   opacity: 1;
}
.icmsvideocontainer.started .video-overlay.hide {
   opacity: 0;
}

div#video-container.video-ended .video-controls {
   background-color: black;
}
.icmsvideocontainer .age-content-container, .icmsvideocontainer .recirculation-container {
   position: relative;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   overflow: hidden;
}
.icmsvideocontainer .age-content-container .age-content-box {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
   margin: 7px;
   font-size: 20px;
   font-weight: 400;
   background: #41495acc;
   padding: 20px;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   width: 50%;
   border-radius: 12px;
   color: white;
}
.icmsvideocontainer .age-content-box div.age-button {
   padding: 10px;
   display: flex;
}
.icmsvideocontainer .age-content-box button {
   display: block;
   margin: 0 auto;
   height: auto;
   min-height: 50px;
   width: 45%;
   text-align: center;
   background: #bf1313;
   color: #ffffff;
   text-align: center;
   font-weight: bold;
   font-size: 14px;
   border-radius: 10px;
   text-decoration: none;
   display: inline;
}
.icmsvideocontainer .recirculation-container {
   background: linear-gradient(to bottom, #000, #000 90%, transparent);
   position: absolute;
   width: 100%;
   height: calc(100% - 75px);
   z-index: 3;
}
.icmsvideocontainer .age-content-container {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 3;
}
.icmsvideocontainer .recirculation-box {
   position: relative;
   grid-template-columns: 50% 50%;
   display: grid;
}
div.recirculation-box div:nth-child(n+3) {
   display: none;
}
.icmsvideocontainer .recirculation-box img {
   object-fit: cover;
   width: 100%;
   height: 200px;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}

.icmsvideocontainer .recirculation-thumb {
   position: relative;
   overflow: hidden;
   margin: 8px;
}
.icmsvideocontainer .recirculation-thumb a {
   display: block;
   text-decoration: none;
   opacity: 1;
   position: relative;
   border-radius: 8px;
}

.icmsvideocontainer .recirculation-title {
   background: linear-gradient(to bottom,rgba(12,12,12,.8) 0,transparent 100px);
   position: absolute;
   bottom: 0;
   width: 100%;
   overflow: hidden;
   color: #fff;
   text-align: left;
   font-size: 12px;
   font-weight: 700;
   height: 100%;
}
.icmsvideocontainer .recirculation-title span {
   display: block;
   padding-top: 5px;
   padding-left: 10px;
   padding-right: 10px;
}

.icmsvideocontainer .recirculation-box .autoplaybar {
   width: 0%;
   background: red;
   height: 5px;
   margin-top: 3px;
}

.icmsvideocontainer .video-overlay.started {
   z-index: 0;
}

.icmsvideocontainer .video-header {
   transition: opacity 250ms ease 0s, visibility 250ms ease 0s;
   box-sizing: border-box;
   position: absolute;
   top: 0px;
   left: 0px;
   line-height: 22px;
   padding: 26px 22px;
   font-size: 17px;
   width: 100%;
   z-index: 1;
   background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0));
}
.icmsvideocontainer .video-header span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 85%;
   display: inline-block;
}
.icmsvideocontainer .video-header .videotitle {
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-decoration: none;
   background-image: none;
   color: #fff;
   user-select: none;
   pointer-events: auto;
   font-size: 12px;
   margin: -1px;
}
.icmsvideocontainer, .icmsvideocontainer::before, .icmsvideocontainer::after {
   box-sizing: inherit;
   margin: 0;
   padding: 0;
}

.icmsvideocontainer .container {
   width: 100%;
   height: 100%;
   position: absolute;
}
.icmsvideocontainer .video-container {
   border-radius: 4px;
   margin: 0 auto;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
}
.icmsvideocontainer video {
   width: 100%;
   border-radius: 4px;
   background-color: #000;
   aspect-ratio: 16/9;
}
.icmsvideocontainer .video-controls {
   right: 0;
   left: 0;
   padding: 10px;
   position: absolute;
   bottom: 0;
   transition: all 0.2s ease;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0));
}
.icmsvideocontainer .video-controls.hide {
   opacity: 0;
   pointer-events: none;
}
.icmsvideocontainer .video-progress {
   position: relative;
   height: 8px;
   margin-bottom: 10px;
   z-index: 0;
}
.icmsvideocontainer .track {
   position: absolute;
   width: 100%;
   height: 8px;
   background: white;
   /* z-index: 998; */
}
.icmsvideocontainer .progress-track {
   background: var(--player-color);
   position: absolute;
   width: 0%;
   max-width: 100%;
   height: 100%;
   z-index: 999;
}
.icmsvideocontainer .seeker {
   float: right;
   width: 15px;
   height: 15px;
   background: radial-gradient(circle, var(--player-color) 40%, rgba(255, 255, 255, 1) 48%);
   border-radius: 50%;
   transform: translate(7px, -4px);
   pointer-events: none;
}
.icmsvideocontainer progress::-moz-progress-bar {
   border: 1px solid var(--player-color);
   background: var(--player-color);
}

.icmsvideocontainer .seek-tooltip {
   display: none;
   position: absolute;
   top: -40px;
   margin-left: -20px;
   font-size: 12px;
   padding: 3px;
   content: attr(data-title);
   font-weight: bold;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.6);
   user-select: none;
   z-index: 998;
}
.icmsvideocontainer .seek-tooltip.seeking {
   display: block;

}
.icmsvideocontainer .bottom-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   user-select: none;
}
.icmsvideocontainer .left-controls, .icmsvideocontainer .right-controls {
   display: flex;
   align-items: center;
   color: #fff;
}
.icmsvideocontainer .volume-controls {
   display: flex;
   align-items: center;
   margin-right: 10px;
}
.icmsvideocontainer .volume-controls input {
   width: 100px;
   opacity: 1;
   transition: all 0.4s ease;
}

input.volume {
   display: none;
}

.icmsvideocontainer .volume-controls:hover input, .icmsvideocontainer .volume-controls input:focus {
   width: 100px;
   opacity: 1;
}


.icmsvideocontainer .quality-choices {
   position: absolute;
   bottom: 75px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   justify-content: space-evenly;
   background: rgba(37, 38, 39, 0.85);
   color: white;
   gap: 1px;
   padding: 5px;
   border-radius: 8px;
   width: 80%;
}
.icmsvideocontainer .quality-choices div.active {
   border: 2px solid var(--player-color);
}

.icmsvideocontainer .quality-choices div {
   padding: 4px;
   border: 2px solid #2f2f2f;
   border-radius: 10px;
   cursor: pointer;
}


.icmsvideocontainer button {
   cursor: pointer;
   position: relative;
   margin-right: 7px;
   font-size: 12px;
   padding: 3px;
   border: none;
   outline: none;
   background-color: transparent;
}
.icmsvideocontainer button * {
   pointer-events: none;
}
.icmsvideocontainer button::before {
   content: attr(data-title);
   position: absolute;
   display: none;
   right: 0;
   top: -50px;
   background-color: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-weight: bold;
   padding: 4px 6px;
   word-break: keep-all;
   white-space: pre;
}
.icmsvideocontainer .fullscreen-button {
   margin-right: 0;
}
.pip-button {
   display: none;
}
.icmsvideocontainer .pip-button svg {
   width: 26px;
   height: 26px;
}
.icmsvideocontainer .playback-animation {
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -40px;
   margin-top: -40px;
   width: 80px;
   height: 80px;
   border-radius: 80px;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
}
.icmsvideocontainer input[type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   height: 4.4px;
   background: transparent;
   cursor: pointer;
}
.icmsvideocontainer input[type=range]:focus {
   outline: none;
}
.icmsvideocontainer input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   cursor: pointer;
   border-radius: 1.3px;
   -webkit-appearance: none;
   transition: all 0.4s ease;
}
.icmsvideocontainer input[type=range]::-webkit-slider-thumb {
   height: 16px;
   width: 16px;
   border-radius: 16px;
   background: var(--player-color);
   cursor: pointer;
   -webkit-appearance: none;
   margin-left: -1px;
}
.icmsvideocontainer input[type=range]:focus::-webkit-slider-runnable-track {
   background: transparent;
}
.icmsvideocontainer input[type=range].volume {
   height: 5px;
   background: linear-gradient(to right, white 100%, black)
}
.icmsvideocontainer input[type=range].volume::-webkit-slider-runnable-track {
   background-color: transparent;
}
.icmsvideocontainer input[type=range].volume::-webkit-slider-thumb {
   margin-left: 0;
   height: 14px;
   width: 14px;
   background: #fff;
}
.icmsvideocontainer input[type=range]::-moz-range-track {
   width: 100%;
   height: 4.4px;
   cursor: pointer;
   border: 1px solid transparent;
   background: transparent;
   border-radius: 1.3px;
}
.icmsvideocontainer input[type=range]::-moz-range-thumb {
   height: 14px;
   width: 14px;
   border-radius: 50px;
   border: 1px solid var(--player-color);
   background: var(--player-color);
   cursor: pointer;
   margin-top: 5px;
}
.icmsvideocontainer input[type=range]:focus::-moz-range-track {
   outline: none;
}
.icmsvideocontainer input[type=range].volume::-moz-range-thumb {
   border: 1px solid #fff;
   background: #fff;
}
.icmsvideocontainer .hide:not(.ui) {
   display: none;
}
.icmsvideocontainer svg {
   width: 28px;
   height: 28px;
   fill: #fff;
   stroke: #fff;
   cursor: pointer;
}
.icmsvideocontainer .adContainer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1;  
}
.video-content .adContainer iframe {
   height: 100%;
}

body.rtl .video-controls.ui { direction: ltr;}

@media all and (min-width: 768px) {
   .icmsvideocontainer .recirculation-box {
       flex-wrap: wrap;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   div.recirculation-box div:nth-child(n+3) {
       display: block
   }
 
   input.volume {
       display: block;
   }

   .icmsvideocontainer .recirculation-box img {
       height: 160px;
   }
}


@media all and (min-width: 812px) {
   .icmsvideocontainer .recirculation-box {
       flex-wrap: wrap;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   div.recirculation-box div:nth-child(n+3) {
       display: block
   }
 
   input.volume {
       display: block;
   }

   .icmsvideocontainer .recirculation-box img {
       height: 160px;
   }
   .icmsvideocontainer figcaption {
      display: none;
      font-size: 16px;
   }
   .icmsvideocontainer .video-header .videotitle { 
      font-size: 16px;
   }

}

@media all and (min-width: 912px) {
   .icmsvideocontainer .recirculation-box {
       flex-wrap: wrap;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   div.recirculation-box div:nth-child(n+3) {
       display: block
   }
 
   input.volume {
       display: block;
   }

   .icmsvideocontainer .recirculation-box img {
       height: 90px;
   }
}

@media all and (min-width: 1024px) {
   .icmsvideocontainer .recirculation-box {
       flex-wrap: wrap;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   div.recirculation-box div:nth-child(n+3) {
       display: block
   }
 
   input.volume {
       display: block;
   }

   .icmsvideocontainer .recirculation-box img {
       height: 110px;
   }
}


@media all and (min-width: 1280px) {
   .icmsvideocontainer .quality-choices {
       left: unset;
       transform: unset;
       display: flex;
       flex-flow: column;
       background: rgba(37, 38, 39, 0.85);
       color: white;
       width: 90px;
       padding: 10px;
       border-radius: 8px;
       right: 2vw;
   }
   .recirculation-auto-timer {
      height: unset;
      font-size: 14px;
   }
   
   .icmsvideocontainer .quality-choices div{
      padding-left: 8px;
   }

   .icmsvideocontainer .recirculation-box {
      flex-wrap: wrap;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
  }
  div.recirculation-box div:nth-child(n+3) {
      display: block
  }

  input.volume {
      display: block;
  }

  .icmsvideocontainer .recirculation-box img {
      height: 175px;
  }
}

@media (hover: hover) {
   .icmsvideocontainer .recirculation-thumb:hover img {
       -webkit-transform: scale(1.3);
       transform: scale(1.3);
   }
   .icmsvideocontainer .recirculation-box a {
       overflow: hidden;
   }
   .icmsvideocontainer .track:hover+.seek-tooltip {
       display: block;
   }
   .icmsvideocontainer .video-controls button:hover::before {
       display: inline-block;
   }

   .icmsvideocontainer .quality-choices div:hover {
       border: 2px solid white;
   }
}