/*
	v.20.08.2021 
*/
* {
  outline: none!important;
}

/* Stumm-off-btn */
.videoWrapp {
  position: relative;
}
.btn-over-video {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
	justify-content: center;
	text-align: left;
	align-items: center;
	
	/*padding-top: 40px;
	padding-left: 40px;*/
}
.btn-over-video span {
  display: flex;
  background-color: #F36A2D;
  color: #fff;
  font-size: 30px;
  line-height: 30px;
  width: 90px;
	height: 90px;
	align-items: center;
	justify-content: center;
}
.btn-over-video span:hover {
	 background-color: #D85A22;
	 cursor: pointer;
}
.btn-over-video.hide {
  display: none;
}

.btn-rund span {
  border-radius: 100%;
}

/********************
  Video-js BG
*********************/
.vjs-BG-parent {
  position: relative;
  height: 600px; 
  overflow: hidden;
}
/* divi anpassung */
.vjs-BG-parent .et_pb_code_inner { 
    position: relative;
    width: 100%;
    height: 100%;
}
.vjs-BG-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.vjs-BG-wrap > div {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* nur zur demo */
#vjs-BG-parent-1 {
  height: 800px; 
}
@media screen and (max-width: 767px) {
  #vjs-BG-parent-1 {
    height: 500px; 
  }
}

/********************
  Video-js Overlay 
*********************/

#vjs-overlay-wrap {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  z-index: 100000;
  width: 100%;
  height: 100%;
  display: none;
  top: 104px;
  top: 0px;
  left: 0;
}

.vjs-overlay-container {
	width: 720px;
	height: 405px;
	position: relative;
	background-color: #000;
}
.vjs-overlay-container iframe,
.vjs-overlay-container object,
.vjs-overlay-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.vjs-close_overlay {
  opacity: 0.7;
  position: absolute;
  top: -40px;
  right: 0;
  height: 40px;
  width: 30px;
}
.vjs-close_overlay.back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.vjs-close_overlay .fa-times {
  color: #fff;
}
.vjs-close_overlay.button:hover {
  opacity: 1.0;
  cursor: pointer;
}

.no-big-play-button .vjs-big-play-button{
  display: none!important;
} 

/********************
  ton toggle
*********************/
.kreis-btn { 
	cursor: pointer;
  display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
     
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background-color: #007bff;
  color: #fff;
     
  opacity: 0.7;
  transition: opacity 0.9s ease 0s;
}
.kreis-btn:hover { 
	opacity: 1;
}

.kreis-btn .fa {
	font-size: 35px;
}
.kreis-btn .ton-aus,
.kreis-btn .fa-volume-off {
	display: none;
}
.kreis-btn.ton-is-on .ton-aus,
.kreis-btn.ton-is-on .fa-volume-off {
	display: inline-block;
}
.kreis-btn.ton-is-on .ton-an,
.kreis-btn.ton-is-on .fa-volume-up {
	display: none;
}



/* Farben ändern */

.video-js .vjs-load-progress div {
	background: #011e41;
}
.video-js .vjs-control-bar {
    background-color: #60ccff;
}
.vjs-subs-caps-button {
  display: none;
}

.vjs-button > .vjs-icon-placeholder::before {
  font-size: 18px;
  line-height: 1.67;
}
.video-js .vjs-play-control {
    width: 3em;
}
.vjs-sublime-skin .vjs-progress-control {
    margin-right: 80px;
}
.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-sublime-skin .vjs-volume-panel {
    width: 80px;
}
.vjs-sublime-skin .vjs-time-control {
    right: 75px;
}
.vjs-sublime-skin .vjs-progress-control .vjs-play-progress{
	border-radius: 0;
}

/* Overlay-Btn */

.fullbg {
	width: 100%;
	height: 100%;
	display: block;
}
.fullbg .et_pb_code_inner {
	width: 100%;
	height: 100%;
	display: block;
}
.fullbg .vjs-open_overlay {
	width: 100%;
	height: 100%;
	display: block;
}
 

.img-btn:hover {
  cursor: pointer;
}

.img-btn .fa {
    font-size: 4em;
    color: #fff;
    background-color: #60CCFF;
    
    position: absolute;
    border-radius: 50%;
	
    display: flex;
    width: 110px;
    height: 110px;
        justify-content: center;
    align-items: center;
    padding-left: 17px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 
   
    -webkit-transition: all 500ms ease 0.2s;
    -moz-transition: all 500ms ease 0.2s;
    -o-transition: all 500ms ease 0.2s;
    transition: all 500ms ease 0.2s;
}
/*
@media (max-width: 980px){
	.img-btn .fa {
		-webkit-transform: translate(-50%, -250%);
	    -ms-transform: translate(-50%, -250%);
	    transform: translate(-50%, -250%);
	}
}
*/
@media (max-width: 567px){
	.img-btn .fa {
		transform: scale(.5) translate(-100%, -100%);
		/*-webkit-transform: translate(-50%, -200%);
	    -ms-transform: translate(-50%, -200%);
	    transform: translate(-50%, -200%);*/
	}
}
.img-btn:hover .fa{
	background-color: #011E41;
	
   /* -webkit-transform: translate(-50%, -50%) scale(1.2);
    -ms-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2);*/
}