.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;
 -webkit-box-shadow: rgba(0, 0, 0, .2) 0px 10px 20px;
 box-shadow: rgba(0, 0, 0, .2) 0px 10px 20px;
 position: absolute;
left: calc(50vw - 770px);
    bottom: 30px;
 border-radius: 20px;
 border-width: 5px;
 width: 130px;
 height: 180px;
 border-color: var(--titcolor);
 }

.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(--green);
 }

.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: 100%;
 min-height: 100%;
 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: 6px;
 right: 6px;
 width: 20px;
 height: 20px;
 z-index: 250;
 opacity: 0;
 -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: white;
 -webkit-box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px;
 box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px;
 }

.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 {
 opacity: .5;
 }

.video-widget__container:hover .video-widget__close:hover {
 opacity: 1;
}

.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: 280px;
 height: 500px;
 max-height: calc(100vh - 110px);
 max-width: calc(100vw - 110px);
 border-radius: 20px;
 border-color: var(--titcolor);;
 }

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

.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.video-widget[data-state="opened"] .video-widget__close:hover {
 opacity: 1;
 }

.video-widget__button {
 position: absolute;
 bottom: 20px;
 right: 20px;
 left: 20px;
 border-radius: 10px;
 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(--titcolor);
 font-size: 16px;
 color: #fff;
font-weight: 600;
letter-spacing: 1px;
 text-align: center;
 vertical-align: middle;
 padding:0px 15px;
 line-height: 60px !important;
 text-transform: uppercase;
 opacity: 0;
bottom:-1000px;
 transition: all 0.5s;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
text-decoration: none;
 }

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

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


.widlogo {
    display: block;
    position: absolute;
    z-index: 300;
    width: 100%;
    height: 40px;
    background-image: url(/img/log.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    top: -40px;
    left: 4px;
    opacity: 0;
transition: all 0.5s;
}
 
.video-widget.video-widget[data-state="opened"] .widlogo {
opacity: 0.5;
top: 20px;
 }

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

.video-widget__container {
 left: 20px;
 bottom: 20px;
 }

 }

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

.video-widget__container {
 left: 15px;
 bottom: 15px;
width: 90px;
height: 125px;
 }

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

 }