#bootstrap-overrides h1 {
    font-size: calc(1rem + 0.8vw);
}
#bootstrap-overrides h2 {
    font-size: calc(1rem + 0.7vw);
}
#bootstrap-overrides h3 {
    font-size: calc(1rem + 0.6vw);
}
#bootstrap-overrides h4 {
    font-size: calc(1rem + 0.5vw);
}
/*  break points

    @media (min-width: 576px)  {}      xs
    @media (min-width: 768px)  {}      sm
    @media (min-width: 992px)  {}      md
    @media (min-width: 1200px) {}      lg
    @media (min-width: 1400px) {}      xl
    no max-width                      xxl
*/
.button-small, .button-medium, .button-large {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}
.button-little {
    width: 5rem
}
.button-small {
    width: 10rem
}
.button-medium {
    width: 30rem
}
.button-large {
    width: 40rem
}
@media (max-width: 576px) { /* sm */
    .button-little, .button-small, .button-medium, .button-large {
        width: 100%;
    }
}

.button-small a, .button-medium a, .button-large a {
    text-decoration: none;
    color: white;
}

.button-grid-showing {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


/* Hide the nested list */

.fade-action {
    transition: opacity 2s;
}

.fade-out {
    visibility: hidden;
    /*display: none;*/
    opacity: 0
}

/*.nested {
    display: none;
}*/

/* Remove default bullets */
ul, .fade-parent {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
/*.caret {
    cursor: pointer;
    user-select: none;*/ /* Prevent text selection */
/*}*/

/*  style to allow transform animation on the caret/arrow */
/*.inline-animate {
    display: inline-block;
}*/

/* Create the caret/arrow with a unicode, and style it */
/*.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}*/

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
/*.caret-down::before {
    animation: ul-icon-rotate 1s;
    animation-iteration-count: 1;
}

@keyframes ul-icon-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(90deg);
    }*/
    /*from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(90deg);
    }*/
/*}*/

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
/*.active {
    display: block;
}*/

/* Hide container until load complete */
.div-outer {
    display: none;
}

/* Hide container until load complete */
.div-outer-show {
    display: block;
}

/* article links*/
.lib-page {
    cursor: pointer;
    margin-left: 2rem;
}

/*  Library */

.lib-up-down {
    width: 30px;
    height: 30px;
    display: inline-block;
    padding-right: 0.5rem;
}

/* modal popup */

/* translucent background for modal popup */
#divModal, #divModalWait {
    background-color: rgb(200,200,150); /* Fallback color */
    background-color: rgba(200,200,150,0.5);
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1040; /* Sit on top - nav is 1030 */
    left: 0;
    top: 0;
    width: 100%;  /*Full width*/ 
    height: 100%;  /*Full height*/ 
    overflow: auto; /* Enable scroll if needed */
}

#divModalContent {
    position: relative;
    background-color: #fefefe;
    margin: 7% auto; /* 10% from the top and centered */
    margin-top: 18%;
    padding: 0.5rem;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-height: 80%;
    overflow: scroll;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    /*-webkit-animation-name: animate-modal-popup;
    -webkit-animation-duration: 0.4s;
    animation-name: animate-modal-popup;
    animation-duration: 0.4s*/
}
@media (min-width: 576px) { /* sm */
    #divModalContent {
        margin-top: 16%;
        width: 90%;
    }
}
@media (min-width: 768px) { /* md */
    #divModalContent {
        margin-top: 12%;
        width: 90%;
    }
}   
@media (min-width: 992px)  { /* lg */
    #divModalContent {
        margin-top: 10%;
        width: 90%;
    }
}
@media (min-width: 1200px) { /* xl */
    #divModalContent {
        margin-top: 9%;
        width: 90%;
    }
}
@media (min-width: 1400px) { /* xxl */
    #divModalContent {
        margin-top: 7%;
        width: 90%;
    }
}

@-webkit-keyframes animate-modal-popup {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animate-modal-popup {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
.btn-close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.btn-close-modal:hover,
.btn-close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/*#divModalBody, divModalFooter {
    padding: 0.5rem;
}*/

.modal-header-grid {
    display: grid;
    grid-template-columns: auto 5rem 4rem;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}

@media (max-width: 576px) { /* sm */
    .modal-header-grid {
        grid-template-columns: auto 0 2.5rem;
        gap: 1px;
        padding: 5px;
    }
}

xs
/*.modal-dialog-width {
    width: 90%;
    max-width: 1000px;
    max-height: 85%;
    overflow: scroll;
    background-color: white;
    margin-top: 7%;
    pointer-events: auto;
}*/
.btn-copy {
    margin-left: 60%;
    display: none;
}

.btn-close-x {
    float: right;
    padding: 0.6rem;
}

/*  Gallery */
img {
    width: 100%;
    height: auto;
}
source {
    width: 100%;
    height: auto;
}
.gallery {
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #4CAF50; /* Green */
    padding: 10px;
}

@media (max-width: 1200px) { /* lg */
    .gallery {
        grid-template-columns: auto auto auto;
    }
}

@media (max-width: 768px) { /* sm */
    .gallery {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 576px) { /* xs */
    .gallery {
        grid-template-columns: auto;
    }
}

.gallery-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 1rem;
    text-align: center;
}
/*.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery:hover {
    border: 1px solid #777;
}

.gallery img {
    width: 100%;
    height: auto;
}

.desc {
    padding: 15px;
    text-align: center;
}*/

.collection_holder {
    cursor: pointer;
}

pre {
    border: 1px solid #777;
    border-radius: 0.5rem;
    margin: 0.5rem;
    padding: 0.5rem;
}


.job-link {
    color: orangered;
    font-size: 0.8rem;
}

.image-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* or
    object-fit: cover;
    */
}