.global-modal * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.global-modal .overlay {
position: fixed;
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.75);
top: 0;
left: 0;
z-index: 10000;
}
.global-modal {
display: none;
}
.global-modal_contents {
background: #FFF;
-webkit-box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75);
-moz-box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75);
-o-box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75);
box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75);
width: 80%;
max-width: 1000px;
min-width: 650px;
position: absolute;
position: fixed;
left: 25%;
margin-left: -16%;
top: 15%;
height: 650px;
z-index: 11000;
}
.global-frame {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.global-modal-transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.global-modal-show .global-modal-transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
@media (max-width: 909px) {
.global-modal_contents {
width: 80%;
max-width: 600px;
min-width: 0;
height: 800px;
}
}
@media (min-width: 1250px) {
.global-modal_contents {
left: calc(50% - 500px);
margin-left: 0;
}
}