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

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(190,223,207,0.7);
    overflow-y: scroll;
    z-index: 1; /* Appears on top of other page cotent */
}

.close-overlay {
    position: fixed;
    top: 0px;
    margin-top: 0px;
    padding: 5px 20px 10px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    width: 100%;
    background-color: rgba(93,116,122,0.75);
}

.close-x {
    font-size: 36px;
    color: #fff;
    transition: 0.3s;
}

.close-x:hover {
    transform: scale(1.2, 1.2);
    transition: 0.3s;
}

/* Additional box required to keep contents of container centred on page */
.holding-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.container {
    max-width: 1480px;
    background-color: #fff;
    width: 80%;
 
    margin: 10%;
}

.content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: flex-start;
    background-color: #fff; /* Stops transparent gap in overlay content on mobile */
    min-height: 1500px;
}

.overlay-head {
    padding: 75px 15% 0% 15%;
    width: 100%;
}

.overlay-head h3, .overlay-head p {
    text-align: center;
}

.overlay-body {
    display: flex;
    flex-flow: column wrap; /* Aligns content vertically in the overlay with no gaps */
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    margin: 0px;
    padding: 3% 15% 10% 15%;
    background-color: #fff;
}

.overlay-body img {
    width: 100%;
    background-color: #fff;
    padding-bottom: 35px;
    object-fit: contain;
    
}

.divider {
    width: 100%;
    background-color: rgba(93,116,122,1.0);
    margin-top: 20px;
}

.divider h3 {
    color: #fff;
    text-align: center;
    padding: 5px 0px;
}

.end-of-content {color: #fff;}

/* IMAGE TOO SMALL */
@media (max-width: 1500px){


}

/* TABLET - LANDSCAPE ORIENTATION */
@media (max-width: 1024px){
    
    .container {
    width: 90%;
    height: 90%;
    margin: 5%;
}
    .overlay-body {
        padding: 5% 10% 5% 10%;
    }
}

/* MOBILE - PORTRAIT ORIENTATION */
@media (max-width: 645px){
 
    .container {
    width: 96%;
    height: 96%;
    margin: 2%;
    }
 
    .content {
        min-height: 765px;
    }
    
    .overlay-body {
        padding: 5%;
    }
    
}