.has-overlay {overflow: hidden;}
.has-overlay > body {height: 100%;overflow-y: scroll;}
.semantic-content {-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);position: fixed; top: 0;left: 0;right: 0;bottom: 0;z-index:9999;opacity: 0;color: #222;line-height: 1.3;display: none\9;}
.semantic-content:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);opacity: 1;}
.is-active.semantic-content {display: block\9;}
.semantic-content:target {display: block\9;}
.semantic-content .modal-inner {position: absolute;top: 20%;left: 15%;right: 15%;z-index: 50;width: 70%; border-radius: 15px;background: #fff;-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); }
.semantic-content .modal-inner > img,
.semantic-content .modal-inner > video,
.semantic-content .modal-inner > iframe {width: 100%;height: auto;min-height: 300px;}
.semantic-content .modal-inner > img {width: auto;max-width: 100%;}
.semantic-content .header_title {border-bottom: 1px solid #dddddd;padding: 0.8em 0 0.8em 1.2em; font-size:1.8em; text-align:left;}
.semantic-content .header_title span { color:#b60000; font-size:0.5em; line-height:30px;text-align:left; display:block; }
.semantic-content .close_btn{ float:right; margin:1.5em 1.5em 0 0; }

.semantic-content .modal-content {padding: 1.0em 2.0em;overflow-x: hidden;overflow-y: auto; height:75%; width:98%; }
.semantic-content .modal-content > * {max-width: 100%;}
.semantic-content .modal-close {display: block; text-indent: -100px;overflow: hidden;}
.semantic-content .modal-close:before {content: ''; position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: ;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");}

.semantic-content .modal-content ul{ width:100%; text-align:left; font-size:12px; text-decoration:underline; line-height:18px; }

@media screen and (max-width: 690px) {
.semantic-content .modal-inner {width: auto;left: 20px;right: 20px;margin-left: 0;}
.semantic-content .modal-close {left: auto;right: 33px;margin-left: 0;}
.semantic-content .modal-close:after {margin-left: 40%;}}
@media screen and (max-width: 30em) {
.semantic-content {   z-index:20; 
-webkit-transform: translate(0, 400px);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;
-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;
-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;
transition: transform .25s ease-in-out, opacity 1ms .25s;
display: block;
height: 100%;
bottom: auto;
}
.semantic-content:target { 
-webkit-transition: -webkit-transform .25s ease-in-out;
-moz-transition: -moz-transform .25s ease-in-out;
-o-transition: -o-transform .25s ease-in-out;
-ms-transition: -ms-transform .25s ease-in-out;
transition: transform .25s ease-in-out;
}
.semantic-content:before {
background-color: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cc3433), to(#ac1b1a));
background-image: -webkit-linear-gradient(top, #cc3433, #ac1b1a);
background-image: -moz-linear-gradient(top, #cc3433, #ac1b1a);
background-image: -o-linear-gradient(top, #cc3433, #ac1b1a);
background-image: linear-gradient(to bottom, #cc3433, #ac1b1a);
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
height: 3em;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.semantic-content .modal-inner {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
padding-top: 3em;
height: 100%;
overflow: scroll;
-webkit-box-shadow: none;
box-shadow: none;
}
.semantic-content .modal-content { overflow:hidden;
max-height: none;
}
.semantic-content .modal-close {
right: auto;
text-decoration: none;
}
.semantic-content .modal-close:before {
display: none;
}
.semantic-content .modal-close:after {
content: attr(data-close);
top: 0.4em;
left: 1em;
z-index: 40;
margin-left: 0;
font-size: 1em;
padding: 0.5em 1em;
}
}
@media screen and (max-height: 46em) and (min-width: 30em) {
.semantic-content .modal-content {
max-height: 320px;
max-height: 48vh;
}

}
@media screen and (max-height: 36em) and (min-width: 30em) {
.semantic-content .modal-content {
max-height: 265px; 
max-height: 36vh;
}
}

@media screen and (min-width: 30em) {
.semantic-content { 
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
}