.front-page__video {
padding: 8rem 0;
}
@media (max-width: 568px) {
.front-page__video {
padding: 5rem 0 2rem;
}
}
.front-page__video .front-page__video-layout {
border-radius: 10px;
overflow: hidden;
position: relative;
}
.front-page__video .front-page__video-el {
cursor: pointer;
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
}
.front-page__video .video__wrapper {
position: relative;
}
.front-page__video .video__wrapper button {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
cursor: pointer;
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media (max-width: 650px) {
.front-page__video .video__wrapper button {
display: block;
}
}
.front-page__video .video__wrapper button img {
max-width: 59px;
}
@media screen and (min-width: 650px) {
.front-page__video.is-playing .front-page__video-desc, .front-page__video.video__play .front-page__video-desc {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
.front-page__video.video__play .video__wrapper button, .front-page__video.video__play .front-page__video-play {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.front-page__video .front-page__video-el.video__play {
cursor: default;
}
.front-page__video .front-page__video-desc {
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
-o-transition: opacity 0.3s ease, visibility 0.3s ease;
transition: opacity 0.3s ease, visibility 0.3s ease;
position: absolute;
width: 50%;
left: 50%;
z-index: 50;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #FFF;
padding-left: 19rem;
}
@media (max-width: 992px) {
.front-page__video .front-page__video-desc {
padding-left: 0rem;
}
}
@media (max-width: 650px) {
.front-page__video .front-page__video-desc {
position: relative;
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: initial;
color: #000;
width: 100%;
top: initial;
}
}
.front-page__video .front-page__video-desc .front-page__video-play {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
cursor: pointer;
}
@media (max-width: 650px) {
.front-page__video .front-page__video-desc .front-page__video-play {
display: none;
}
}
.front-page__video .front-page__video-desc .front-page__video-play img {
max-width: 59px;
}
.front-page__video .front-page__video-desc h2 {
text-transform: uppercase;
}
.front-page__video .front-page__video-desc p {
line-height: 1.2;
}
.front-page__video .front-page__video-desc .wrapper {
max-width: 312px;
}
@media (max-width: 650px) {
.front-page__video .front-page__video-desc .wrapper {
max-width: 100%;
}
}