.jh-overlay { background: rgba(0,0,0,.6); position: fixed; z-index: 9998; top: 0; left: 0; opacity: 0; width: 100%; height: 100%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
}
.jh-modal { background: #fff; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; width: 94%; height: 82%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease; }
.jh-modal.jh-open.jh-anchored { top: 20px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.jh-modal.jh-open { opacity: 1; }
.jh-overlay.jh-open { opacity: 1; }
.jh-content { 
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
} .jh-close { font-size: 26px; line-height: 40px; height: 40px; position: absolute; top: -40px; right: 0px; width: 40px; cursor: pointer; color: #fff; border: 0; outline: none; background: #df7b77; } .jh-overlay.fade-and-drop {
display: block;
opacity: 0;
}
.jh-modal.fade-and-drop {
top: -300%;
opacity: 1;
display: block;
}
.jh-modal.fade-and-drop.jh-open { top: 0;
-webkit-transition: 500ms top 500ms ease;
-moz-transition: 500ms top 500ms ease;
-ms-transition: 500ms top 500ms ease;
-o-transition: 500ms top 500ms ease;
transition: 500ms top 500ms ease;
}
.jh-modal.fade-and-drop.jh-open.jh-anchored {
-webkit-transition: 500ms top 500ms ease;
-moz-transition: 500ms top 500ms ease;
-ms-transition: 500ms top 500ms ease;
-o-transition: 500ms top 500ms ease;
transition: 500ms top 500ms ease;
}
.jh-overlay.fade-and-drop.jh-open {
top: 0;
-webkit-transition: 500ms opacity ease;
-moz-transition: 500ms opacity ease;
-ms-transition: 500ms opacity ease;
-o-transition: 500ms opacity ease;
transition: 500ms opacity ease;
opacity: 1;
}
.jh-modal.fade-and-drop {
-webkit-transition: 500ms top ease;
-moz-transition: 500ms top ease;
-ms-transition: 500ms top ease;
-o-transition: 500ms top ease;
transition: 500ms top ease;
}
.jh-overlay.fade-and-drop {
-webkit-transition: 500ms opacity 500ms ease;
-moz-transition: 500ms opacity 500ms ease;
-ms-transition: 500ms opacity 500ms ease;
-o-transition: 500ms opacity 500ms ease;
transition: 500ms opacity 500ms ease;
} .jh-overlay.zoom-and-spin
{
display: block;
height: 0px;
opacity: 0;
}
.jh-modal.zoom-and-spin
{
-webkit-transition: 500ms -webkit-transform ease;
-moz-transition: 500ms    -moz-transform ease;
-ms-transition: 500ms     -ms-transform ease;
-o-transition: 500ms      -o-transform ease;
transition: 500ms         transform ease;
-webkit-transform: translate(-50%, -50%) scale(0) rotateX(0deg);
-moz-transform: translate(-50%, -50%) scale(0) rotateX(0deg);
-ms-transform: translate(-50%, -50%) scale(0) rotateX(0deg);
-o-transform: translate(-50%, -50%) scale(0) rotateX(0deg);
transform: translate(-50%, -50%) scale(0) rotateX(0deg);
opacity: 1;
display: block;
}
.jh-modal.zoom-and-spin.jh-open
{
-webkit-transition: 500ms -webkit-transform 500ms ease;
-moz-transition: 500ms    -moz-transform 500ms ease;
-ms-transition: 500ms     -ms-transform 500ms ease;
-o-transition: 500ms      -o-transform 500ms ease;
transition: 500ms         transform 500ms ease;
-webkit-transform: translate(-50%, -50%) scale(1) rotateX(360deg);
-moz-transform: translate(-50%, -50%) scale(1) rotateX(360deg);
-ms-transform: translate(-50%, -50%) scale(1) rotateX(360deg);
-o-transform: translate(-50%, -50%) scale(1) rotateX(360deg);
transform: translate(-50%, -50%) scale(1) rotateX(360deg);
}
.jh-modal.zoom-and-spin.jh-open.jh-anchored
{
-webkit-transition: 500ms -webkit-transform 500ms ease;
-moz-transition: 500ms    -moz-transform 500ms ease;
-ms-transition: 500ms     -ms-transform 500ms ease;
-o-transition: 500ms      -o-transform 500ms ease;
transition: 500ms         transform 500ms ease;
}
.jh-overlay.zoom-and-spin.jh-open
{
top: 0;
height: 100%;
-webkit-transition: 500ms all ease;
-moz-transition: 500ms all ease;
-ms-transition: 500ms all ease;
-o-transition: 500ms all ease;
transition: 500ms all ease;
opacity: 1;
}
.jh-overlay.zoom-and-spin
{
-webkit-transition: 500ms all 500ms ease;
-moz-transition: 500ms all 500ms ease;
-ms-transition: 500ms all 500ms ease;
-o-transition: 500ms all 500ms ease;
transition: 500ms all 500ms ease;
} .jh-overlay.zoom
{
display: block;
opacity: 0;
}
.jh-modal.zoom
{
-webkit-transition: 500ms -webkit-transform ease;
-moz-transition: 500ms    -moz-transform ease;
-ms-transition: 500ms     -ms-transform ease;
-o-transition: 500ms      -o-transform ease;
transition: 500ms         transform ease;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
-o-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
opacity: 1;
display: block;
}
.jh-modal.zoom.jh-open
{
-webkit-transition: 500ms -webkit-transform 500ms ease;
-moz-transition: 500ms    -moz-transform 500ms ease;
-ms-transition: 500ms     -ms-transform 500ms ease;
-o-transition: 500ms      -o-transform 500ms ease;
transition: 500ms         transform 500ms ease;
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
-o-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.jh-modal.zoom.jh-open.jh-anchored
{
-webkit-transition: 500ms -webkit-transform 500ms ease;
-moz-transition: 500ms    -moz-transform 500ms ease;
-ms-transition: 500ms     -ms-transform 500ms ease;
-o-transition: 500ms      -o-transform 500ms ease;
transition: 500ms         transform 500ms ease;
}
.jh-overlay.zoom.jh-open
{
top: 0;
-webkit-transition: 500ms opacity ease;
-moz-transition: 500ms opacity ease;
-ms-transition: 500ms opacity ease;
-o-transition: 500ms opacity ease;
transition: 500ms opacity ease;
opacity: 1;
}
.jh-overlay.zoom
{
-webkit-transition: 500ms opacity 500ms ease;
-moz-transition: 500ms opacity 500ms ease;
-ms-transition: 500ms opacity 500ms ease;
-o-transition: 500ms opacity 500ms ease;
transition: 500ms opacity 500ms ease;
}