/* FIXING AROUND */
/* TODO*/
.gallery_related .motogpSocial { height: inherit; margin-bottom: 20px;}
.videoContainer .video-js .vjs-related-carousel-holder, .video-js .vjs-control-bar { z-index: inherit;}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content { height: auto;}
.carousel-item .carousel-item-title { font-size: initial;}

/* ----------------------------------------------- */

.videoContainer .video-js, .vjs-suggested-video-endcap-link {
  font-family: 'Source Sans Pro', Verdana, Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  color: #ffffff;
}

.videoContainer .video-js {
  font-size: 10px;
  color: #FFF;
}

/* PLAYICON */
.videoContainer  .vjs-default-skin .vjs-big-play-button { 
  height: 3em;
  width: 3em;
  border-width: 0px;
  border-radius: 99em;
  transition: all 0.4s;
  opacity: 1;

  background: url('../../img/layout/play-circle-1.svg') no-repeat rgba(0,0,0,0.35);
  background-size: contain;
  transform: translateY(-50%) translateX(-50%);
  margin: 0!important; 

}
.videoContainer .vjs-default-skin .vjs-big-play-button:before { display: none;}
.videoContainer .vjs-default-skin .vjs-big-play-button:hover { opacity: 0.5;}




.video-js .vjs-slider {
background-color: rgba(0,17,27,0.65);
}

.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar { 
  background-color: rgba(0,117,181,0.65);
}
.video-js .vjs-play-progress:before,
.vjs-slider-horizontal .vjs-volume-level:before {
  color: rgba(0,117,181,1);
}

/* CUSTOM CSS */
.video-js .vjs-control-bar {
  box-sizing: border-box;
  bottom: 24px;
  left: 2%;
  right: 2%;
  width: 96%;
  z-index:1;
  /*border-top: solid 2px #0075b5;*/
  box-shadow: inset 0 2px 0 0 #0075b5;
  padding-top: 1px;
  background-color: rgba(43, 51, 63, 0.75);
}

.vjs-resolution-button .vjs-resolution-button-label, .vjs-menu-item {
  text-transform: capitalize!important;
}

.vjs-menu-content .vjs-menu-item.vjs-selected { 
  background-color: rgba(0,117,181,0.65)!important;
  color: #ffffff!important;
}


/* ICONS */
.video-js .vjs-icon-cog:before {
  font-family: "FontAwesome"!important;
  content: "\f130";
  outline: none;
}
.video-js .vjs-icon-feed:before {
  font-family: "FontAwesome"!important;
  content: "\f03d";
  outline: none;
}
.video-js .vjs-icon-provider:before {
  font-family: "FontAwesome"!important;
  content: "\f0e7";
  outline: none;
}
.video-js .vjs-control, .video-js .vjs-button-next, .video-js .vjs-button-prev { width: 3em;}
.video-js .vjs-time-control.vjs-control { width: 5em;}
.vjs-icon-provider, .vjs-icon-feed { font-size: 13px;}
.video-js .vjs-volume-menu-button { width: 4em;}
.video-js .vjs-button-next, .video-js .vjs-button-prev {
  font-family: "FontAwesome"!important;
  outline: none;
  font-size: 12px;
  padding-top: 5px;
  margin: 0;
}
.video-js .vjs-button-next:before { content: "\f051";}
.video-js .vjs-button-prev:before { content: "\f048";}
.video-js .vjs-captions-button { display: none;}




/* PLAYLIST */
.video-js .icon-videojs-carousel-right:before, .video-js .icon-videojs-carousel-left:before  {
  outline: none;
  font-family: "FontAwesome"!important;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.video-js .icon-videojs-carousel-right:before { content: "\f105";}
.video-js .icon-videojs-carousel-left:before { content: "\f104";}

.carousel-items { padding-left: 3em;}
.vjs-carousel-left-button, .vjs-carousel-right-button { width: 3em;}

li.carousel-item { position: relative;}
.carousel-item a img { height: 70%; opacity: 1; transition: all 0.4s;}
.carousel-item a:after {
  content: url('../../img/layout/play-circle-1.svg');
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 10px;
  opacity: 0;
}

.vjs-related-carousel-holder { bottom: 54px; width: 96%; left: 2%; right: 2%;}
.vjs-related-carousel-holder.active { height: 145px;}

.carousel-item a:hover img { opacity: 0.35;}
.carousel-item a:hover:after { opacity: 1;}
.carousel-item a { height: 100%; width: 100%; display: inline-block; }
.carousel-item a .carousel-item-title { padding: 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: left;
  line-height: 110%;
}




/* RELATED */
.vjs-suggested-video-endcap { height: 100%; width: 100%;}
.vjs-suggested-video-endcap { height: 100%; width: 100%;}
a.vjs-suggested-video-endcap-link { width: 30%; height: 28%; margin: 0.5%!important; overflow: hidden;}
.vjs-suggested-video-endcap { padding: 0; box-sizing: border-box;}
.vjs-suggested-video-endcap-header { display: none;}
.vjs-suggested-video-endcap-container a:first-child:after {
  opacity: 1;
  content: url('../../img/layout/ico_replay-circle.svg');
  z-index: 0;
}

.vjs-suggested-video-endcap-link { position: relative;}
.vjs-suggested-video-endcap-link .vjs-suggested-video-endcap-img { transition: all 0.4s; margin-bottom: 10px;}
.vjs-suggested-video-endcap-link:hover .vjs-suggested-video-endcap-img { opacity: 0.35;}


.vjs-suggested-video-endcap-link span { display: inline-block; opacity: 0; float: left; position: absolute; bottom: -20px; padding: 4px; left: 0; right: 0; transition: all 0.4s; background-color: #000000;}
.vjs-suggested-video-endcap-link:hover span { opacity: 1; bottom: 0; color: #ffffff;}

.vjs-suggested-video-endcap a:after {
  content: url('../../img/layout/play-circle-1.svg');
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 10px;
  opacity: 0;
  transition: all 0.4s;
}
.vjs-suggested-video-endcap a:hover:after {
  opacity: 1;
}

.vjs-audio-button {
  display:none;
}

/* PLAYLIST COUNTDOWN */
.vjs-playlist-container {
  background-color: rgba(0,0,0,0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.vjs-playlist-countdown, .vjs-playlist-title { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.vjs-playlist-title { margin-top: -20px;}
.vjs-playlist-title { margin-top: 40px; }



/* FLASH MESSAGE */
.message_wrapper { color: #ffffff; text-align: center;}
.message_wrapper a { margin: 8px 0;}



/* DEBUG */
.vjs-modal-dialog-content { background-color: rgba(0,0,0,0.8);}
.vjs-modal-dialog-content ul { padding: 10px 20px;}
.vjs-modal-dialog-content #debug-content input { color: #ffffff!important; margin: 10px 0; border-radius: 6px; border: 1px solid #ffffff; padding: 6px 10px; background-color: transparent; text-transform: uppercase;}
.vjs-modal-dialog-content #debug-content input:hover { background-color: rgba(255,255,255,0.35);}



/* ERROR MESSAGE */
.vjs-error .vjs-error-display:before {
  font-family: "FontAwesome"!important;
  content: "\f057";
  outline: none;
  z-index: 2;

  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0.5em;
}



/* DEVICES AND SMALL SIZES */
/* NANO TUNNINGS */
/* RELATEDS */
.mgp-playerMobile .vjs-control-bar,
.mgp-playerTablet .video-js .vjs-control-bar { bottom: 0px; right: 0px; left: 0px; width: 100%;}
.mgp-playerMobile .vjs-suggested-video-endcap,
.mgp-playerTablet .vjs-suggested-video-endcap { overflow: auto;}
.mgp-playerMobile .vjs-suggested-video-endcap,
.mgp-playerTablet .vjs-suggested-video-endcap { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch;}

.mgp-playerMobile .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link:after,
.mgp-playerTablet .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link:after {opacity: 1;}
.mgp-playerMobile .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link,
.mgp-playerTablet .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link { padding-left: 36px;}
.mgp-playerMobile .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link:hover,
.mgp-playerTablet .vjs-suggested-video-endcap .vjs-suggested-video-endcap-link:hover { color: #0076b3;}
.mgp-playerMobile .vjs-suggested-video-endcap-link 
.mgp-playerTablet .vjs-suggested-video-endcap-link { display: block; height: auto; width: 100%;}
.mgp-playerMobile .vjs-suggested-video-endcap-link span,
.mgp-playerTablet .vjs-suggested-video-endcap-link span { bottom: 0; opacity: 1; position: inherit; padding: 18px; background-color: transparent;}
.mgp-playerMobile .vjs-suggested-video-endcap-link img,
.mgp-playerTablet .vjs-suggested-video-endcap-link img { display: none;}
/* PLAYLIST */
.mgp-playerMobile .vjs-related-carousel-holder,
.mgp-playerTablet .vjs-related-carousel-holder { opacity: 1; visibility: visible;}
.mgp-playerMobile .vjs-related-carousel-holder,
.mgp-playerTablet .vjs-related-carousel-holder { bottom: 30px; width: 100%; height: calc(100% - 30px;); right: 0; left: 0;}
/* DEBUG */
.mgp-playerMobile .vjs-modal-dialog-content, .mgp-playerTablet .vjs-modal-dialog-content { overflow: auto;}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px)
{
  .video-js .vjs-suggested-video-endcap  { height: calc(100% - 30px);}
  .video-js .vjs-suggested-video-endcap, .vjs-modal-dialog-content  { -webkit-overflow-scrolling: touch;}
  /*.vjs-related-carousel-button { display: none;}*/
  /*.vjs-control-bar { opacity: 1!important; visibility: visible!important;}
  .vjs-fade-out { visibility: visible!important; opacity: 1!important;}*/
}

/*
@media only screen and (min-device-width: 320px) and (max-device-width: 768px)
{
  a.vjs-suggested-video-endcap-link span { padding: 4px; opacity: 1; bottom: 0; position: absolute; background-color: #000000;}

  .vjs-suggested-video-endcap-link span {
    opacity: 1; float: none; padding: 0; background-color: transparent; position: inherit;}
}
*/


