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

/* thumbnail */
        div#pagingBox {
            display: contents;
        }
        .profile {
            height: 220px;
            width: 31.33%;
            overflow: hidden;
            margin: 10px;
            border-radius: 15px;
        }
        .profile img {
            transition: all 0.7s ease;
        }
        .profile img:hover {
            transform: scale(110%);
        }

/* Pagination */
        #page_navigation {
            clear:both;
            margin: 20px 0;
            display: flex;
            justify-content: center;    
        }
        #page_navigation a{
            padding:3px 6px;
            border:thin none orange;
            margin:2px;
            padding: 4px 11px;
            color:black;
            text-decoration:none;
            -webkit-border-radius: 30px;
            border-radius: 30px;
        }
        #page_navigation a.previous_link, #page_navigation a.next_link{
            border:thin solid orange;
        }
        .active_page{
            background:orange;
            color:white !important;
        }       

/* bootstrap's modal override */
    .modal-content {
        background: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        -webkit-border-radius: 20px;
        border-radius: 20px;
        backdrop-filter: blur(10px);        
        }
    .modal-header {
        padding: 10px 10px 0 10px;
        border-bottom: 1px none #e5e5e5;
        }
    .modal-dialog {
        margin: 130px auto;
    }
    .modal-body {
        padding: 5px;
    }
    .img-rounded {
        border-radius: 14px;
    }
    .close {
        color: orange;
        text-shadow: 0 1px 0 #000;
        opacity: 1;
        }

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        width: 1024px;
        max-width: 1024px;
    }
}   

@media (max-width: 425px){
    .profile {
        height: 105px;
        width: 44.33%;
        overflow: hidden;
        margin: 10px;
        border-radius: 15px;
    }    
}

@media (max-width: 320px) {
    .profile {
        height: 180px;
        width: 100%;
        overflow: hidden;
        margin: 5px;
        border-radius: 15px;
    }
}