.iframe_wrapper {
position: relative;
display: block;
padding: 0 0 56.25%;
margin: 0 auto 1rem;
background-color: #f1f1f1;
white-space: normal;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
opacity: 0;
}
.iframe_wrapper.initialized {
opacity: 1;
}
.iframe_wrapper[data-src] {
padding: 0 0 56.25%;
}
@media screen and (min-width: 40em) {
.iframe_wrapper[data-src] {
padding: 0 0 56.25%;
}
}
.iframe_wrapper.swipebox-video[data-src] {
padding: 0 0 56.25% !important;
height: auto !important;
}
@media screen and (min-width: 40em) {
.iframe_wrapper.swipebox-video[data-src] {
height: 0 !important;
}
}
.iframe_wrapper:last-child {
margin-bottom: 0;
}
.iframe_wrapper iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
background: transparent;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.iframe_wrapper iframe.active {
opacity: 1;
visibility: visible;
-webkit-transition-delay: .25s;
-moz-transition-delay: .25s;
-ms-transition-delay: .25s;
-o-transition-delay: .25s;
transition-delay: .25s;
}
.iframe_wrapper .iframe_wrapper_overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #cccccc;
text-align: center;
color: #0a0a0a;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 1s ease 0.5s;
-moz-transition: all 1s ease 0.5s;
-ms-transition: all 1s ease 0.5s;
-o-transition: all 1s ease 0.5s;
transition: all 1s ease 0.5s;
padding: 0.9375rem;
}
.iframe_wrapper.loaded .iframe_wrapper_overlay {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.iframe_wrapper.accepted .iframe_wrapper_overlay * {
pointer-events: none;
}
.iframe_wrapper iframe + .iframe_wrapper_overlay,
.iframe_wrapper.loaded iframe + .iframe_wrapper_overlay {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.iframe_wrapper .iframe_wrapper_content {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
max-width: 35rem;
font-size: 1rem;
padding: 0.9375rem;
}
@media screen and (min-width: 40em) {
.iframe_wrapper .typo_iframe_overlay_content {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}