.video-widget {
   position: fixed;
   left: 0px;
   z-index: 99;
   bottom: 0px;
}

.video-widget__container {
   font-family: Helvetica;
   z-index: 999;
   overflow: hidden;
   border-style: solid;
   background: rgb(238, 238, 238);
   -webkit-transition: width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform 0.2s ease-in-out 0s;
   transition: width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform 0.2s ease-in-out 0s;
   -o-transition: width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s, -o-transform 0.2s ease-in-out 0s;
   -moz-transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s, -moz-transform 0.2s ease-in-out 0s;
   transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s;
   transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform 0.2s ease-in-out 0s, -moz-transform 0.2s ease-in-out 0s, -o-transform 0.2s ease-in-out 0s;
   outline: none;
   cursor: pointer;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   box-shadow: var(--shadow);
   position: absolute;
   left: calc(2 * var(--sizew));
   bottom: calc(2 * var(--sizew));
   border-radius: var(--otstup);
   border-width: 6px;
   width: calc(10* var(--sizew) + 2px);
   height: calc(14* var(--sizew));
   border-color: var(--black);
}

.video-widget-detector {
   display: block;
   position: fixed;
   height: calc(var(--otstup) / 1);
   width: 1px;
   z-index: 1;
   left: calc(2 * var(--sizew));
   bottom: calc(2 * var(--sizew));
}

.video-widget__container:hover {
   -webkit-transform: scale(1.05) translate(5px, -5px);
   -moz-transform: scale(1.05) translate(5px, -5px);
   -ms-transform: scale(1.05) translate(5px, -5px);
   -o-transform: scale(1.05) translate(5px, -5px);
   transform: scale(1.05) translate(5px, -5px);
   border-color: var(--orange);
}

.video-widget__video {
   -o-object-fit: cover;
   object-fit: cover;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
   min-width: calc(100% + 2px);
   margin-left: 0px;
   min-height: calc(100% + 2px);
   margin-top: 0px;
   z-index: 200;
   -webkit-transition: opacity 0.4s ease-in-out 0s;
   -o-transition: opacity 0.4s ease-in-out 0s;
   -moz-transition: opacity 0.4s ease-in-out 0s;
   transition: opacity 0.4s ease-in-out 0s;
   opacity: 0.8;
}

.video-widget.video-widget[data-state="opened"] .video-widget__video {
   opacity: 1;
}

.video-widget__close {
   position: absolute;
   top: calc(0.8 * var(--sizew));
   right: calc(0.8 * var(--sizew));
   width: 20px;
   height: 20px;
   z-index: 250;
   opacity: 1;
   -webkit-transition: opacity 0.2s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s;
   transition: opacity 0.2s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s;
   -o-transition: opacity 0.2s ease-in-out 0s, -o-transform 0.3s ease-in-out 0s;
   -moz-transition: transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s, -moz-transform 0.3s ease-in-out 0s;
   transition: transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
   transition: transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s, -moz-transform 0.3s ease-in-out 0s, -o-transform 0.3s ease-in-out 0s;
}

.video-widget__close:before,
.video-widget__close:after {
   position: absolute;
   left: 9px;
   top: 1px;
   content: " ";
   height: 18px;
   width: 2px;
   background: var(--black);
   transition: all 0.5s;
}

.video-widget__close:hover:before,
.video-widget__close:hover:after {
   background: var(--orange);
}

.video-widget__close:before {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.video-widget__close:after {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.video-widget__container:hover .video-widget__close:before,
.video-widget__container:hover .video-widget__close:after {}

.video-widget.video-widget[data-state="opened"] .video-widget__container {
   width: calc(18* var(--sizew) + 2px);
   height: calc(32* var(--sizew));
   max-height: calc(100vh - 110px);
   max-width: calc(100vw - 110px);
   border-radius: var(--otstup);
   border-color: var(--black);
   ;
}

.video-widget.video-widget[data-state="opened"] .video-widget__close {
   opacity: 1;
   top: calc(1 * var(--sizew));
   right: calc(1 * var(--sizew));
}

.video-widget.video-widget[data-state="opened"] .video-widget__close:before {
   display: none;
}

.video-widget.video-widget[data-state="opened"] .video-widget__close:after {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
}

.video-widget__button {
   position: absolute;
   bottom: 20px;
   right: 20px;
   left: 20px;
   border-radius: var(--otstup);
   z-index: 300;
   -webkit-box-shadow: rgba(0, 0, 0, .25) 0px 4px 15px;
   box-shadow: rgba(0, 0, 0, .25) 0px 4px 15px;
   text-align: center;
   opacity: 1;
   visibility: visible;
   background-color: var(--orange);
   color: var(--white);
   letter-spacing: 1px;
   text-align: center;
   vertical-align: middle;
   text-transform: uppercase;
   opacity: 0;
   bottom: -1000px;
   transition: all 0.5s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-decoration: none;
   padding: 0px;
   height: calc(3.8 * var(--sizew));
   border-radius: calc(1* var(--sizew));
   font-size: calc(1.2* var(--sizew));
   font-weight: 900;
}

.video-widget__button i {
   margin-right: 5px;
   font-size: 20px;
   margin-top: -2px;
}

.video-widget__button:hover {
   background-color: var(--orange);
   color: var(--white);
   text-decoration: none;
}

.video-widget.video-widget[data-state="opened"] .video-widget__button {
   opacity: 1;
   bottom: 20px;
}

@media only screen and (max-width: 1023px) {

   .video-widget-detector,
   .video-widget__container {
      left: calc(1 * var(--sizew));
      bottom: calc(1 * var(--sizew));
   }

   .video-widget.video-widget[data-state="opened"] .video-widget__container {
      max-height: calc(100vh - 137px);
      max-width: calc(100vw - 102px);
   }

   .video-widget__container:hover {
      transform: none;
      border-color: var(--black);
   }

}

@media only screen and (max-width: 699px) {
   .video-widget__button span {
      display: none;
   }

   .video-widget-detector,
   .video-widget__container {
      width: calc(10* var(--sizew) + 2px);
      height: calc(14* var(--sizew));
   }

}