@charset "utf-8";
/* CSS Document */

#overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .65);
 z-index: 100;
}
#modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 2000;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    max-height: 70vh;    
    box-sizing: border-box;
    /*padding: 32px;*/
    border-radius: 8px;
    background-color: #fff;
    width:90%;
}
#modal .modalheader {
    background-color: #E8380D;
    padding: 5px 20px 0px 20px;
    border-radius: 8px 8px 0px 0px;
    text-align:center;
    height: 60px;
}
#modal .modalheader .modaltitle {
    color: #fff;
    font-size: 1.0em;
}
#modal .modalheader .modalclose {
    float: right;
    width: 13px;
    height: 13px;
}
#modal .modalimage {
    text-align: center;
    padding-top: 20px;
}
#modal .modalimage img {
    max-width: 13em;
}
#modal .modalcontent {
    padding: 15px;
    font-size: 0.9em;
}
#modal .modalcontent2 {
    padding: 15px;
    font-size: 0.9em;
}
#modal .modalcontent .important1 {
    color: #ff0000; 
    font-weight: bold;
    font-size: 1.1em;
/*    color: #3399FF; */
/*    color: #e8380d; */
}
#modal .modalcontent .important2 {
    border-bottom: double 4px;
}
#modal .modalcontent .important3 {
    text-decoration: none;
    border-bottom: solid 1px;
}
.important3 {
    color:#2e7bff !important;
    font-size: 1.2em;
    font-weight: bold;
}
#close {
    width: 15px;
    height: 15px;
    cursor: pointer;
}
#overlay.active,
#modal.active{
    display: block !important;
}


@media (min-width: 768px) {
#overlay {
 cursor: pointer;
}
#modal {
 width:90%;
 max-width: 690px;
 text-align: center;
}
#modal .modalimage img {
    max-width: inherit;
    width: auto;
}
}