/*
    ---------------------------------------------------------------------
                                  HTML STYLES
    ---------------------------------------------------------------------
*/

body {
    padding: 0px;
    color: #FFF;
}

.body-content {
    padding-top: 100px;
    padding-right: 0px;
    padding-left: 0px;
}

h1, h2 {
    font-family: 'Cinzel Decorative';
    
}

h1, h2 {
    text-align: center;
}

h1 {
    font-size: 3vw;
    color: #FFF;
}

h2 {
    font-size: 2vw;
    color: #FFF;
}

h3, h4 {
    font-family: Cardo;
    font-weight: bold;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 22px;
}

@media only screen and (max-width: 1000px) {
    h1 {
        font-size: 8vw;
    }
    h2 {
        font-size: 7vw;
    }
}

section {
    margin: 0px;
}

footer {
    background-color: antiquewhite;
    color: #404040;
}

    footer h1, footer h2 {
        color: #404040;
    }

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/*
    ---------------------------------------------------------------------
                         GENERAL UTILITY CLASSES
    ---------------------------------------------------------------------
*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.full-img {
    width: 100%;
    margin: 0px;
}

.top-pad-50 {
    padding-top: 50px;
}

.top-pad-40 {
    padding-top: 40px;
}

.top-pad-50 {
    padding-top: 50px;
}

.top-pad-30 {
    padding-top: 30px;
}

.top-pad-20 {
    padding-top: 20px;
}

.top-pad-10 {
    padding-top: 10px;
}

.spacer-10 {
    height: 10px;
}

.spacer-20 {
    height: 20px;
}

.hide-small {
    display: block !important;
}

@media only screen and (max-width: 1000px) {
    .hide-small {
        display: none !important;
    }
}

.centre {
    text-align: center;
}

.justify {
    text-align: justify;
}

.center-video {
    padding: 20px;
    width: 60%;
    margin: auto;
}

@media only screen and (max-width: 600px) {
    .center-video {
        width: 100%;
    }
}

.center-video img {
    width: 100%;
    height: auto;
}

.light-section {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: antiquewhite;
    color: #404040;
}

    .light-section h1, .light-section h2 {
        color: #404040;
    }

.no-top-pad {
    padding-top: 0px !important;
}

.no-bottom-pad {
    padding-bottom: 0px !important;
}

.border-break {
    border-top: 3px solid #404040;
}


.list {
    padding-left: 40px;
}

.video {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.highlight-text {
    font-family: Cardo;
    color: #FFF;
    text-align: center;
    padding: 10px;
}

.feature-text {
    width: 80%;
    font-family: Cardo;
    font-size: 4vw;
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 600px) {
    .feature-text {
        font-size: 5vw;
        width: 80%;
    }
}

.full-page-box {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.text-box {
    width: 60%;
    margin: auto;
    padding: 10px;
    font-family: Cardo;
}

.text-box-wide {
    width: 95%;
    margin: auto;
    padding: 10px;
    font-family: Cardo;
}

@media only screen and (max-width: 600px) {
    .text-box {
        width: 100%;
    }
    .text-box-wide {
        width: 100%;
    }
}


.image-container {
    width: 80%;
    margin: auto;
    padding: 0px;
}

    .image-container img {
        width: 100%;
    }

@media only screen and (max-width: 600px) {
    .image-container {
        width: 100%;
        padding: 10px;
        margin: 0px;
    }
}

.right-banner {
    position: absolute;
    width: 40%;
    bottom: 15%;
    right: 5%;
}

/*
    ---------------------------------------------------------------------
                                 HEADER STYLES
    ---------------------------------------------------------------------
*/

.logo-img {
    width: 200px;
    padding: 0px;
}

.burger-wrap {
    padding: 20px;
}

.dropdown-menu {
    width: 200px;
    background-color: var(--body-bkg-col);
    font-size: var(--body-font-size);
}

.nav-dropdown > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/*
    ---------------------------------------------------------------------
                         THE MIDNIGHT CIRCLE PAGE
    ---------------------------------------------------------------------
*/

.profile-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.profile {
    width: 500px;
    margin: 45px;
}

@media only screen and (max-width: 600px) {
    .profile {
        width: 100%;
        margin: 10px;
    }
}

.profile-pic {
    width: 100%;
    padding: 0px;
    margin: 0px;
    aspect-ratio: 4/5;
    overflow: hidden;
}

    .profile-pic img {
        width: 100%;
    }

.profile-text {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

    .profile-text h2 {
        font-size: 24px;
    }

    .profile-text h3 {
        font-size: 20px;
    }

/*
    ---------------------------------------------------------------------
                             OUR COMPANY PAGE
    ---------------------------------------------------------------------
*/
.circular-crop-alt {
    width: 100%;
    aspect-ratio: 2/1;
    border-bottom-right-radius: 50% 40%;
    border-bottom-left-radius: 50% 40%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

    .circular-crop-alt img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

.overlay-txt {
    position: absolute;
    top: 8%;
    width: 100%;
    font-family: Cardo; 
    font-size: 4.5vw;
    text-align: center;
    color: white;
}

.mission-txt {
    font-family: 'Cinzel Decorative';
    font-size: 4vw;
}

.larger-txt {
    font-weight: bold;
    font-size: 5vw;
}

@media only screen and (max-width: 600px) {
    .circular-crop-alt {
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
}

/*
    ---------------------------------------------------------------------
                                SHOW PAGES
    ---------------------------------------------------------------------
*/

/* 
    Circular crop for show images
*/
.circular-crop {
    width: 100%;
    aspect-ratio: 3/1;
    border-bottom-right-radius: 50% 25%;
    border-bottom-left-radius: 50% 25%;
    overflow: hidden;
}

    .circular-crop img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

@media only screen and (max-width: 600px) {
    .circular-crop {
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
}

.show-summary-txt {
    font-family: Cardo;
    color: #FFF;
    padding: 20px;
}

.show-gallery {
    width: 80%;
    margin: auto;
}
    @media only screen and (max-width: 600px) {
        .show-gallery {
            width: 100%;
        }
    }

.gallery-still {
    padding: 10px;
}

    .gallery-still img {
        width: 100%;
    }


/*
    ---------------------------------------------------------------------
                           CONTACT US PAGE
    ---------------------------------------------------------------------
*/

.flex-two-panel {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    margin: 0px;
}

    .flex-two-panel > div {
        width: 700px;
        margin: 0px;
    }

    .flex-two-panel > div.wide {
        width: 800px;
        margin: 0px;
        border: 2px solid black;
    }

@media only screen and (max-width: 600px) {
    .flex-panel > div {
        width: 100%;
        padding: 0px;
    }
}

@media only screen and (max-width: 600px) {
    .flex-panel > div.wide {
        width: 100%;
        padding: 0px;
    }
}

/*
    ---------------------------------------------------------------------
                               FOOTER STYLES
    ---------------------------------------------------------------------
*/

/*
    Awards section for footer
*/

.award-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    .award-container > div {
        width: 200px;
        margin: 10px;
        
    }

        .award-container > div > img {
            width: 100%;
            margin: 0;
            position: relative;
            top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

/*
    Contact block for footer
*/

.contact-block {
    text-align: center;
    padding-top:20px;
    padding-bottom: 20px;
    
}

/*
    Social media icons for footer
*/

.social-media {
}
    .social-media > a {
        zoom: 200%;
        padding-left: 10px;
        padding-right: 10px;
        text-decoration: none;
    }