*, ::after, ::before {
box-sizing:border-box
}
@-ms-viewport {
width:device-width
}
.blocker, .modal {
box-sizing:border-box
}
.blocker {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
padding: 20px;
background-color: #000;
background-color: rgba(0, 0, 0, .75);
text-align:center
}
.blocker:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right:-.05em
}
.blocker.behind {
background-color:transparent
}
.modal {
display: none;
vertical-align: middle;
position: relative;
z-index: 2;
max-width: 500px;
width: 90%;
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align:left
}
.modal-spinner {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 12px 16px;
border-radius: 5px;
background-color: #111;
height:20px
}
.modal-spinner > div {
border-radius: 100px;
background-color: #fff;
height: 20px;
width: 2px;
margin: 0 1px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation:sk-stretchdelay 1.2s infinite ease-in-out
}
.modal-spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay:-1.1s
}
.modal-spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay:-1s
}
.modal-spinner .rect4 {
-webkit-animation-delay: -.9s;
animation-delay:-.9s
}
@-webkit-keyframes sk-stretchdelay {
0%, 100%, 40% {
-webkit-transform:scaleY(.5)
}
20% {
-webkit-transform:scaleY(1)
}
}
@keyframes sk-stretchdelay {
0%, 100%, 40% {
transform: scaleY(.5);
-webkit-transform:scaleY(.5)
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1)
}
} .pkg {
vertical-align: top;
display: inline-block;
width: 50%;
padding: 0 1.5% 3%;
} .vdo-base {
margin-bottom: .8rem;
position: relative;
}
.vdo-base iframe{
margin-bottom: -100px;
}
.vdo-body {
max-width: 100%;
height: auto;
padding-bottom: 56.25%;
position: relative;
overflow: hidden;
}
.vdo-body iframe {
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
} .blocker {
z-index: 11;
}
.modal {
background-color: #242424;
border-radius: 4px;
max-width: 1200px;
padding: 10px;
}
.modal-window .vdo-txt {
margin-left: 3%;
}
.modal a.close-modal {
background-color: #000;
border: 2px solid #242424;
border-radius: 50%;
display: block;
width: 26px;
height: 26px;
padding: 30px 30px 0 0;
overflow: hidden;
position: absolute;
top: -13px;
right: -13px;
}
.modal a.close-modal:hover {
background-color: #424242;
}
.modal a.close-modal::before, .modal a.close-modal::after {
background-color: #999;
content: '';
display: block;
width: 2px;
height: 24px;
margin-left: -1px;
position: absolute;
top: 3px;
left: 50%;
}
.modal a.close-modal::before {
transform: rotate(-45deg);
}
.modal a.close-modal::after {
transform: rotate(45deg);
} @media screen and (max-width: 768px) {
.pkg {
display: block;
width: 100%;
}
.modal {
width: 100%!important;
}
}