:root {
--easymodal-color: #DEAC27;
}
#easymodal-backdrop{
position: fixed;
z-index: 99990; top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.6);
padding: 0 5vw;
display: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
#easymodal-backdrop.opened{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
#easymodal-backdrop .easymodal-modal{
display: none;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-moz-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
border: .375rem solid var(--easymodal-color);
background-color: #fff;
padding: 2.875rem 4vw 4vw;
max-width: 93.75rem;
margin: 5vw 0;
position: relative;
top: 0;
}
#easymodal-backdrop .easymodal-modal.opened{
display: block;
}
#easymodal-backdrop .easymodal-modal .easymodal-close{
border: none;
position: absolute;
background: transparent none;
top: 0;
right: 0;
text-align: left;
text-indent: -3125rem;
overflow: hidden;
padding: 0;
cursor:pointer;
width: 3.125rem;
height: 3.125rem;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#easymodal-backdrop .easymodal-modal .easymodal-close::after {
content: "×";
text-indent: 0;
font-size: 1.875rem;
color: var(--easymodal-color);
}
#easymodal-backdrop.animating-open {
display: flex;
animation: fadeInModalBG 300ms ease 0s 1 normal forwards running;
}
#easymodal-backdrop.animating-close {
display: flex;
animation: fadeOutModalBG 300ms ease 0s 1 normal forwards running;
}
#easymodal-backdrop.opened {
display: flex;
}
#easymodal-backdrop .easymodal-modal.animating-open {
display: block;
animation: fadeInModalBox 300ms ease 0s 1 normal forwards running;
}
#easymodal-backdrop .easymodal-modal.animating-close {
display: block;
animation: fadeOutModalBox 300ms ease 0s 1 normal forwards running;
}
#easymodal-backdrop .easymodal-modal.opened {
display: block;
}
@media screen and (min-width: 1025px){
#easymodal-backdrop .easymodal-modal{
padding: 2vw;
}
}
@keyframes fadeInModalBG {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInModalBox {
0% {
opacity: 0;
top: 15vh;
}
100% {
opacity: 1;
top: 0;
}
}
@keyframes fadeOutModalBox {
0%{
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: -15vh;
}
}
@keyframes fadeOutModalBG {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}