.jc--modal {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
align-items: center;
justify-content: center;
padding:20px;
z-index:12;
visibility:hidden;
}
.jc--modal > .jc--close-modal {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
background-color:rgba(51,51,51,.4);
transition:opacity .2s ease-in-out;
opacity:0;
}
.jc--modal-content {
background-color: #FFF;
border-radius: 7px;
padding: 1.5rem;
max-width:390px;
transition:transform .2s ease-in-out;
transform:scale(.4);
}
.jc--modal.is--active {
visibility:visible;
}
.jc--modal.is--active > .jc--close-modal {
opacity:1;
}
.jc--modal.is--active .jc--modal-content {
transform:scale(1);
}
.jc--modal-content * {
font-size:.8rem;
}
.jc--modal-content-title {
display:block;
font-size:1rem;
font-weight: 700;
line-height: 1.5;
margin: 0 0 0.85em;
}
.jc--modal-content .jc--close-modal {
height: 1.5rem;
width: 1.5rem;
margin:-1.5rem -1.5rem auto auto;
transform: translate(50%, -50%);
display: flex;
justify-content: center;
align-items: center;
background-color:#FFF;
border-radius:100%;
-webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,.20);
box-shadow: 0 6px 12px 0 rgba(0,0,0,.20);
background-color:#555;
color:#FFF;
cursor:pointer;
}
.jc--modal-content .jc--close-modal,
.jc--modal-content .btn--secondary {
transition:color .25s ease-in-out,background-color .25s ease-in-out;
}
.jc--modal-content .jc--close-modal:hover {
background-color:#FFF;
border-color:transparent;
color:#555;
}
.jc--close-modal-icon {
position:relative;
}
.jc--close-modal-icon::after {
content: '\e808';
font-family: "jcions";
font-size:.75rem;
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:currentColor;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(45deg);
transform-origin:center center;
}
.jc--modal-image {
display:block;
margin:-1.5rem -1.5rem 1rem;
position:relative;
padding-bottom:40%;
overflow:hidden;
border-radius:7px 7px 0 0;
z-index:-1;
}
.jc--modal-image img {
max-width:none;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
object-fit:cover;
width: 100%;
height: 100%;
}