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

.modalpanel {
    display:block;
    position : fixed;
    left : 0;
    top : 0;
    right : 0;
    bottom : 01;
    width : 100%;
    height : 100%;
    background-color: rgba(0,0,0,0.7); 
    z-index:2000;
}
.modalpanel {
    /* startup hide */
    display : none;
}

.modalpanel[data-visible="show"]{
    animation-fill-mode: both;
    animation-name: modalshow;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
.modalpanel[data-visible="hide"]{
    animation-fill-mode: both;
    animation-name: modalhide;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
.modalpanel[data-visible="none"]{
    display : none;
}

@keyframes modalshow {
    0% { opacity : 0.0; }
    100% { opacity : 1.0; }
}
@keyframes modalhide {
    0%{ opacity : 1.0; }
    100% { opacity : 0.0; }
}

.modalcontent {
    position : absolute;
    display:block;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);    /* align center */
    z-index : 10;
    
    background-color: rgba(64, 64, 64, 0.9);
    -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,1.00); 
    box-shadow: 0px 0px 12px rgba(0,0,0,1.00);
}

.modalloading {
    pointer-events: none;
    left : 50%;
    top : 50%;
    position : absolute;
    display:block;
    transform: translate(-50%,-50%);    /* align center */
    z-index : 20;

    color : rgba(240, 248, 255, 0.8);
    text-shadow : 0px 0px 15px rgba(49,34,6,1.00), 0px 0px 15px rgba(49,34,6,1.00);
}

.modalcaption {
    pointer-events: none;
    left : 50%;
    top : 90%;
    position : absolute;
    display: block;
    transform: translate(-50%,-50%);    /* align center */
    z-index : 20;
    color : rgba(255,183,112,1.00);
    text-shadow: 0px 0px 15px rgba(49,34,6,1.00), 0px 0px 15px rgba(49,34,6,1.00), 0px 0px 15px rgba(49,34,6,1.00);
}


/* button */

button.modalclosebutton,
button.modalprevbutton,
button.modalnextbutton,
button.modalbutton{
    position : absolute;
    z-index : 20;
    /* hidden button surface */
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    outline : none;
    background: space;
    background-color: rgba(248, 191, 191, 0.0);
}

button.modalclosebutton{
    width:10%;
    height:10%;
    top:0px;
    left:0%;   
}

button.modalprevbutton{
    width:10%;
    height:20%;
    top:40%;
    left:0%;   
}

button.modalnextbutton{
    width:10%;
    height:20%;
    top:40%;
    right:0%;   
}

.modalclosebutton img,
.modalnextbutton img,
.modalprevbutton img,
.modalbutton img{
    opacity: 0.6;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

/*.button-modal:focus img,*/
/*.button-modal:active img{*/
.modalclosebutton:hover img,
.modalnextbutton:hover img,
.modalprevbutton:hover img,
.modalbutton:hover img{
    opacity: 1.0;
    transform: scale(1.08,1.08);
}

.modalclosebutton:focus img,
.modalnextbutton:focus img,
.modalprevbutton:focus img,
.modalbutton:focus{
    outline : none;
}