@charset "utf-8";

#qModalMask{
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #025;
    opacity: 0.5;
    z-index: 11;
}
#qModalMask.hidden,
#qModalMask.expand {
    display: none;
}
@media screen and (max-width:660px){
    #ModalMask.reg{
        display: none;
    }
}
div.qModal{
    position: absolute;
    border: 2px solid #1077bc;
    background-color: #fff;
    padding: 1.5em 1.5em 2em 2em;
    z-index: 1000;
    top: 2em;
    left: 5%;
    right: 5%;
    margin: 0 auto;
    min-width: 250px;
}
div.qModal.twothirds{
    left: 17%;
    right: 17%;
}
div.qModal.half{
    left: 25%;
    right: 25%;
}
div.qModal.third{
    left: 33%;
    right: 33%;
}
@media screen and (max-width:800px){
    div.qModal.twothirds{
        left: 18%;
        right: 18%;
    }
    div.qModal.half{
        left: 19%;
        right: 19%;
    }
    div.qModal.third{
        left: 28%;
        right: 28%;
    }
}
@media screen and (max-width:700px){
    div.qModal{
        left: 0;
        right: 0;
        border-left-style: none;
        border-right-style: none;
    }
    div.qModal.twothirds,
    div.qModal.half,
    div.qModal.third {
        border-left-style: solid;
        border-right-style: solid;
    }
    div.qModal.twothirds{
        left: 12%;
        right: 12%;
    }
    div.qModal.half{
        left: 15%;
        right: 15%;
    }
    div.qModal.third{
        left: 23%;
        right: 23%;
    }
}
@media screen and (max-width:640px){
    div.qModal.twothirds{
        left: 0;
        right: 0;
        border-left-style: none;
        border-right-style: none;
    }
}
@media screen and (max-width:580px){
    div.qModal.half{
        left: 0;
        right: 0;
        border-left-style: none;
        border-right-style: none;
    }
    div.qModal.third{
        left: 15%;
        right: 15%;
    }
}
@media screen and (max-width:480px){
    div.qModal.third{
        left: 12%;
        right: 12%;
    }
}
@media screen and (max-width:400px){
    div.qModal.third{
        left: 0;
        right: 0;
        border-left-style: none;
        border-right-style: none;
    }
}
div.qModal > a.close {
    position: absolute;
    right: 1.5em;
    display: block;
    width: 0;
    height: 0;
    padding: 27px 27px 0 0;
    background-image: url(close.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
}
div.qModal > a.close:hover {
    background-position: 0 -27px;
}

/* ----- expanded ----- */
div.qModal.expand{
    position: static;
    width: auto;
    border: none;
    padding: 0;
    min-width: 200px;
}
div.qModal.expand > a {
    display: none;
}
div.qModal.expand > * > h2 {
    margin-top: 1em;
}