/* modal */

.modal {

    display: none;

    position: fixed;

    z-index: 11;

    padding: 7% 0%;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.4);

}



/* modal dialog */

.modal-dialog {

    background-color: #fefefe;

    margin: auto;

    padding: 20px;

    border-radius: 5px;

}



.modal.small .modal-dialog {

    width: 380px;

}



.modal.medium .modal-dialog {

    width: 60%;

}



.modal.large .modal-dialog {

    width: 70%;

}



.modal.xlarge .modal-dialog {

    width: 90%;

}



/* modal header */

.modal-header {

    text-align: center;

    font-size: 20pt;

    font-weight: bolder;

    font-weight: 700;

}



.modal.small .modal-header {

    border-bottom: none;

    padding-bottom: 0px;

}



.modal.medium .modal-header,

.modal.large .modal-header,

.modal.xlarge .modal-header {

    border-bottom: 2px solid #dee2e6;

    padding-bottom: 0.5rem;

}



/* modal content */

.modal-content {

    border: none;

}



.modal .modal-content .icon {

    font-size: 60pt;

    margin-bottom: 10px;

}



.modal .modal-content .text-title {

    font-size: 14pt;

    font-weight: bolder;

    margin-bottom: 10px;

}



.modal .modal-content .text-desc {

    font-size: 10pt;

    line-height: 1.4;

}



.modal .modal-content .text-desc span {

    color: #2EA893;

    font-weight: bolder;

}



.modal.small .modal-content {

    padding: 20px;

    text-align: center;

    margin-top: -30px;

}



.modal.medium .modal-content,

.modal.large .modal-content,

.modal.xlarge .modal-content {

    padding: 0.5rem 0rem;

    text-align: left;

}



/* close modal */

.close {

    color: #000;

    opacity: 0.5;

    float: right;

    font-size: 24px;

    top: -5px;

    position: relative;

    right: 0px;

}



.close:hover, .close:focus {

    opacity: 0.75;

    text-decoration: none;

    cursor: pointer;

}



@media (max-width: 767px) {

    .modal {

        padding: 20% 0%;

    }



    .modal-header {

        font-size: 150%;

    }



    .modal .modal-dialog {

        width: 90% !important;

    }

}



/* POPUP IMAGE */

#popup-image {

    display: none;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 12;

    overflow: auto;

    background-color: rgba(0,0,0,0.9);

}



#popup-image .close-img {

    position: absolute;

    top: 35px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}



#popup-image .close-img:hover {

    color: #bbb;

    cursor: pointer;

}



#popup-image img {

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

    display: block;

    margin: auto;

    max-height: 70vh;

}



#popup-image .caption {

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

    text-align: center;

    color: #ccc;

    margin: 10px 0px;

}



@-webkit-keyframes zoom {

    from {-webkit-transform:scale(0)} 

    to {-webkit-transform:scale(1)}

}



@keyframes zoom {

    from {transform:scale(0)} 

    to {transform:scale(1)}

}



@media (max-width: 767px) {

    #popup-image .close-img {

        top: 65px;

        right: 10px;

        font-size: 30px;

    }



    #popup-image object {

        width: 95%;

    }

}