/* .video-content */
.video-content { position: relative; z-index: 15; padding: 6.5rem 0 0; margin: 0;}
.video-content button { cursor: pointer; display: block; position: relative; width: 100%;}
.video-content button .ico-play { position: absolute; top: calc(50% - (150px / 2)); left:  calc(50% - (150px / 2)); z-index: 10; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 150px; height: 150px; color: #fff; background: rgba(82, 82, 82, .5); border: 2px solid #fff; border-radius: 100%; transition: width .5s ease , height .5s ease , top .5s ease , left .5s ease;}
.video-content button .ico-play svg { width: 15px; height: 15px;}
.video-content button .image { position: relative; z-index: 5; height: 600px;}
.video-content button .image img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .5s ease;}


.video-content .video { position: relative; width: 100%;}
.video-content .video video { width: 100%;}
.video-content .video .video-controls { justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; pointer-events: none;}
.video-content .video .video-controls.active { opacity: 1; pointer-events: all;}
.video-content .video .video-controls input { cursor: pointer; width: 115px; height: 115px; color: #fff; background: rgba(0, 0, 0, .25); border: 3px solid #fff; border-radius: 100%; transition: width .3s ease , height .3s ease, background-color .5s ease;}

@media(hover:hover){
    .video-content button:hover .ico-play { top: calc(50% - (175px / 2)); left:  calc(50% - (175px / 2)); width: 175px; height: 175px;}
    .video-content button:hover .image img { opacity: .5;}
    .video-content .video .video-controls input:hover { width: 125px; height: 125px; background: rgba(0, 0, 0, .5);}
}
@media(max-width: 1023px){
    .video-content button .image { height: 400px;}
    .video-content button .ico-play { top: calc(50% - (100px / 2)); left:  calc(50% - (100px / 2)); width: 100px; height: 100px;}
    .video-content button .ico-play svg { width: 10px; height: 10px;}
}
@media(max-width: 767px){
    .video-content { padding: 3rem 0 0;}
    .video-content button .image { height: 250px;}
}


/* HACK FOR FF */
@-moz-document url-prefix() { 
    .video-content .video .video-controls { display: none;}
}

/* HACK SAFARI */

@supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .video-content .video .video-controls { display: none;}
}