.hf_popup{
position:fixed;
z-index:999;
top:0;
bottom:0;
left:0;
right:0;
opacity: 0;
visibility: hidden;
}
.hf_popup.active{
opacity: 1;
visibility: visible;
}
.hf_popup_animate{
height: 100%;
}
.hf_popup_animate.animate-fade_bottom{
transform: translate3d(0px, 60px, 0px);
transform-origin: center bottom;
opacity: 0;
-webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
transform-style: preserve-3d;
}
.hf_popup.active .hf_popup_animate.animate-fade_bottom{
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1;
}
.hf_popup_animate.animate-fade_left{
transform: translate3d(-100%, 0px, 0px);
transform-origin: center bottom;
opacity: 0;
-webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
transform-style: preserve-3d;
}
.hf_popup.active .hf_popup_animate.animate-fade_left{
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1;
}
.hf_popup_animate.animate-fade_right{
transform: translate3d(100%, 0px, 0px);
transform-origin: center bottom;
opacity: 0;
-webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
transform-style: preserve-3d;
}
.hf_popup.active .hf_popup_animate.animate-fade_right{
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1;
}
.hf_popup_animate.animate-fade_top{
transform: translate3d(0px, -60px, 0px);
transform-origin: center bottom;
opacity: 0;
-webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
transform-style: preserve-3d;
}
.hf_popup.active .hf_popup_animate.animate-fade_top{
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1;
}
.hf_popup_animate.animate-zoom_in{
transform: scale(0.3);
transform-origin: center;
opacity: 0;
-webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
transform-style: preserve-3d;
}
.hf_popup.active .hf_popup_animate.animate-zoom_in{
transform: scale(1);
opacity: 1;
}
.hf_popup.popup_nobgck{
pointer-events: none;
}
.hf_popup_bkgd{
height:100%;
}
.hf_popup_container{
position: absolute;
max-height:90vh;
max-width: 90vh;
background: white;
padding:30px;
pointer-events: auto;
box-shadow: 1px 1px 3px 0px rgba(2,2,2,0.23);
overflow: auto;
}
.hf_popup_content{
}
.hf_popup_close{
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
cursor: pointer;
}
.hf_popup_close:before,.hf_popup_close:after{
position: absolute;
content: '';
height: 15px;
width: 2px;
top: 3px;
left: 9px;
background-color: black;
}
.hf_popup_close:before{
transform: rotate(45deg);
}
.hf_popup_close:after{
transform: rotate(-45deg);
}