/* needed for old browsers */
dialog {
    display: block;
}
/* removes scroll when modal is opened */
.no-scroll {
    overflow: hidden;
}
/* overlay covers everything */
.simple-animated-modal-overlay-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 666;
}
/* modal */
.simple-animated-modal {
    position: fixed;
    left: 25%;
    right: auto;
    top: 15%;
    width: 50%;
    background: #fff;
    z-index: 667;
}



/* needed for old browsers */
dialog {
    display: block;
}
/* removes scroll when modal is opened */
.no-scroll {
    overflow: hidden;
}
/* overlay covers everything */
.simple-animated-modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
    opacity: .8;
    z-index: 666; /* satan inside */
    cursor: pointer;
}
/* modal */
.simple-animated-modal {
    position: fixed;
    left: 15%;
    top: 5%;
    width: 70%;
    max-height: 98vh;
    right: auto;
    border: 2px solid #000;
    background: #fff;
    z-index: 667;
    padding: 2em;
    overflow: auto;
    font-size: 21px;
}
.simple-animated-modal h1{
    font-size: 25px;
}
.simple-animated-modal-close {
    float: right;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}
.simple-animated-modal-close:focus,
.simple-animated-modal-close:hover,
.simple-animated-modal-close:active {
    font-weight: bold;
}
.simple-animated-modal-overlay[data-background-click="disabled"] {
    cursor: auto;
}

.simple-animated-modal, .simple-animated-modal--reverse, .hardware-accelerated {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#js-modal-content:empty{
    content:'Il n\' a pas de résultat pour cette recherche.';
}

.simple-animated-modal a{
    padding: 5px;
    display: block;
}

/* it can be easily adapted in media-queries for tablets/mobile */

/* for this example: tablets */
@media (max-width: 55.625em) {

    .simple-animated-modal {
        left: 5%;
        top: 5%;
        bottom: 5%;
        width: 90%;
    }

}

/* for this example: mobile */
@media (max-width: 44.375em) {

    .simple-animated-modal {
        left: 1%;
        top: 1%;
        max-width: 98%;
        bottom: 1%;
        padding: 5px;
    }

    #js-modal-content{
        clear: both;
    }

}