/*------------------- Navbar Styling */

.navbar {
    padding: .75rem .75rem;
    background-color: #657486;
    font-family: 'Cairo', sans-serif;
}

.navbar-toggler {
    padding: .25rem .25rem;
    height: 2.5rem;
    width: 2.5rem;
}

.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,1);
    border-color: rgba(255,255,255,1);
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

#brandimage {
    height: 50px;
}

nav ul {
    padding-left: 10vw;
    list-style-type:none;
    font-weight: 400;
    font-size: calc(12px + (32 - 12) * ((100vw - 300px) / 3000));
    margin-bottom: 0;
    min-width: 38rem;
}

nav ul a {
    color: white;
}

nav ul a:hover {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

nav .col {
    padding: 0;
}

nav li .active {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

nav .row {
    margin-right: 0;
    margin-left: 0;
}

#menubar {
    width: 75vw;
    text-align: right;
}

nav div a:hover {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

/* ------------------- Text Section Styling */

#textsection, #contactsection {
    background-image: url(https://github.com/StuChapman/UCD-MS-Project-Continuous-Engagement/blob/master/assets/images/grayscale-photo-of-building-3312304.jpg?raw=true);
        /* credit to https://www.pexels.com/photo/grayscale-photo-of-building-3312304//*/
    background-color: #999999;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100vw;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    min-height: 50vh;
}

#textsection {
    font-family: 'Cairo', sans-serif;
    min-height: 50vh;
}

#textsection p {
    margin: 0;
}

#textsection .row {
    margin-right: 0;
    margin-left: 0;
}

#textsectionmask {
    background-color: rgba(255, 255, 255, .85);
    min-height: 50vh;
}

/* credit to https://css-tricks.com/books/fundamental-css-tactics/scale-typography-screen-size/ 
    and https://www.madebymike.com.au/writing/fluid-type-calc-examples/ 
        for font-size: calc(10px + (48 - 10) * ((100vw - 300px) / (1800 - 300)));*/

.textsmall {
    padding: 6vw 8vw;
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / 900));
    color: #000000;
    text-align: center;
}

.textxsmall {
    padding: 10vw 8vw 2vw;
    font-size: calc(10px + (28 - 10) * ((100vw - 300px) / 900));
    color: #000000;
}

.textmedium {   
    padding: 2vw 10vw 6vw;
    font-size: calc(15px + (30 - 15) * ((100vw - 300px) / 900));
    color: #101828;
}

.textxmedium {   
    padding: 2vw 10vw;
    font-size: calc(15px + (30 - 15) * ((100vw - 300px) / 900));
    color: #101828;
}

.textlarge, .textlarge h1 {
    padding: 7vw 8vw 5vw;
    text-align: center;
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / 900));
    font-weight: bold;
    color: #CC613A;
}

/* ------------------- Banner Section Styling */

#bannersection {
    text-align: center;
    font-family: 'Cairo', sans-serif;
}

#bannerouter {
    justify-content: center;
}

.banner {
    padding: 0;
    font-size: calc(17px + (48 - 17) * ((100vw - 300px) / 1066));
    color: #ffffff;
    min-height: calc(80px + (200 - 80) * ((100vw - 300px) / 1066));
    background-color: #CC613A;
}

.align-vertically { /* credit to https://webdevblog.com/css-vertical-align/ */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bannerimage {
    max-height: calc(80px + (200 - 80) * ((100vw - 300px) / 1066));
    max-width: 60vw;
    border: 1px solid transparent;
}

/* ------------------- Accordian Styling */

.accordion {
    font-family: 'Cairo', sans-serif;
}

.card {
    border: none;
    padding: 0;
    text-align: center;
}

.btn {
    font-size: calc(17px + (48 - 17) * ((100vw - 300px) / 1066));
}

.btn-link, .btn-link:hover, btn-link:active, .btn-link:focus {
    color: #ffffff;
    text-decoration: none;
}

.card-header:first-child {
    border-radius: 0;
}

.row {
    margin: 0;
}

.card-body {
    font-size: calc(10px + (48 - 10) * ((100vw - 300px) / 1066));
    padding: 1.25rem 2rem;
}

/* ------------------- Carousel Styling */

.carousel {
    font-family: 'Cairo', sans-serif;
}

.carouselbannerheader {
    text-align: center;
    font-size: calc(16px + (32 - 16) * ((100vw - 300px) / 1066));
    color: #ffffff;
    min-height: 10vh;
    background-color: #CC613A;
}

.carouselbanner {
    padding: 0 12.5vw 0;
    text-align: center;
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / 1066));
    color: #101828;
    min-height: 20vh;
    background-color: transparent;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23CC613A' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23CC613A' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* ------------------- Modal Styling */

.btn-primary {
    border: none;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:hover, .btn-primary:focus {
    color: rgba(255, 255, 255, .85);
    background-color: #CC613A;
    border: none;
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn:focus {
    outline: 0;
    border: none;
    box-shadow: none;
}

.mheadingCenter {
    max-width: 98%;
    margin-left: 1%;
}

.modal-content {
    width: 75vw;
    left: -20vw;
}

.methodsmodal {
    text-align: center;
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
    background-color: #CC613A;
}

/* ------------------- Content Section Styling */

#contentsection {
    font-family: 'Cairo', sans-serif;
    background-color: rgba(255, 255, 255, .75);
}

.content {
    padding: 2vw;
}

.contenttextsmall {
    padding: 6vw 8vw;
    font-size: calc(14px + (28 - 14) * ((100vw - 300px) / 1066));
    color: #101828;
    text-align: center;
}

.contenttextxsmall {
    padding: 4vw 8vw 2vw;
    font-size: calc(14px + (28 - 14) * ((100vw - 300px) / 1066));
    color: #000000;
}

.contenttextlarge {
    padding: 4vw 6vw;
    text-align: center;
    font-size: calc(18px + (36 - 18) * ((100vw - 300px) / 1066));
    font-weight: bold;
    color: #CC613A;
}

.contentimage {
    max-height: 30vw;
    max-width: 50vw;
}

.align-left {
    text-align: left;
    padding: 3vw 4vw 0vw;
}

.contentbold {
    font-weight: bold;
}

.contenthighlight {
    font-weight: bold;
    color: #CC613A;
}

.carouselimage {
    height: 15vw;
    padding-top: .5vw;
}

/* ------------------- Contact Section Styling */

#contactsection {
    min-height: 55vh;
}

#contactsectionmask {
    background-color: rgba(255, 255, 255, .85);
    min-height: 55vh;
}

#contactsectionsmall {
    justify-content: center;
    text-align: center;
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
}

#contactouter {
    justify-content: center;
    text-align: center;
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
}

#contactimage {
    width: 60vw;
    margin: 10vh 20vw 5vh 20vw;
}

.contacttext {
    margin: 0 10vw 5vh 10vw;
    padding-top: 1vw;
    text-align: center;
    font-size: calc(14px + (24 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
    color: #101828;
}

.contactbanner {
    padding: 0 2vw 0 2vw;
    min-height: calc(80px + (200 - 80) * ((100vw - 300px) / 1066));
    background-color: #CC613A;
}

.contactbanner a, .contactbanner p {
    font-size: calc(16px + (36 - 16) * ((100vw - 300px) / 1066));
    color: white;
    text-decoration: none; 
}

.contactbanner i {
    font-size: 28px;
}

.col-xl-6 {
    padding: 0;
}

#contentsection .col-xl-6 {
    padding: 2vw 4vw 6vw 4vw;
}

.contactmodal {
    margin-bottom: 5vw;
    text-align: center;
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
    background-color: #657486;
}

.modal-footer input {
    max-width: 80px;
}

.contactmodaltext {
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / 1066));
    font-family: 'Cairo', sans-serif;
    color: #101828;
}

#contactsection .btn-primary:not(:disabled):not(.disabled):active,
#contactsection .btn-primary:hover,
#contactsection .btn-primary:focus {
    color: rgba(255, 255, 255, .85);
    background-color: #657486;
    border: none;
    box-shadow: none;
}

#contactsection input, select, textarea {
    width: 65vw;
}

#contactsection label {
    margin-bottom: 0;
    margin-left: 2vw;
}

#contactsection .modal-header h5 {
    font-size: calc(16px + (24 - 16) * ((100vw - 300px) / 1066));
    color: #CC613A;
    font-weight: bold;
}

#contactsection .modal-content {
    width: 75vw;
    top: 5vh;
    left: 12.5vw;
    background-color: #D9D9D9;
}

#contactsection .modal-dialog {
    margin: 0;
}

#contactsection .modal-footer button {
    margin: 0;
}

/* ------------------- Photolink Section Styling */

#photolinksection {
    font-family: 'Cairo', sans-serif;
    background-color: #D9D9D9;
    padding: 2.5vw;
}

#photolinkouter{
    background-color: #F0F0F0;
    padding: 0 2.5vw;
}

.photolinkimage {
    padding-bottom: 2.5vw;
    width: 42.5vw;
}

.photolinktextsmall, photolinktextsmall h1 {
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / 900));
    color: #CC613A  ;
    text-align: center;
    font-weight: bold;
    margin: 0;
}

#photolinksection .col-6, #photolinksection .col-xl-3 {
    padding: 0;
}

/* ------------------- Footer Styling */

#footer {
    min-height: calc(50px + (80 - 50) * ((100vw - 300px) / 1066));
    background-color: #101828;
    font-size: calc(10px + (24 - 14) * ((100vw - 300px) / 1066));
    color: white;
}

/* ------------------- Media Screen responsiveness */

@media screen and (max-width: 567px) {
    #contactsection .modal-dialog {
    max-width: 75vw;
    margin: 0;
    }
}

@media screen and (min-width: 1200px) { /*large*/

    /* ------------------- General Styling - large*/

    .col-xl-4 {
        max-width: 33.3%;
    }
    
    .col-xl-3 {
        max-width: 25%;
    }

    /* ------------------- Text Section Styling - large */

    #textsection, #textsectionmask {
        min-height: 66vh;
    }

    #textsection .row {
        flex-wrap: wrap;
    }

    .textsmall {
        padding: 5vh 18vw;
        font-size: calc(12px + (20 - 12) * ((100vw - 300px) / 900));
    }

    .textxsmall {
        padding: 2vw 8vw;
        font-size: calc(10px + (18 - 10) * ((100vw - 300px) / 900));
        color: #000000;
    }

    .textmedium {   
        padding: 0 10vw;
        font-size: calc(14px + (28 - 14) * ((100vw - 300px) / 900));
    }

    .textxmedium {   
        padding: 2vw 10vw 2vw;
        font-size: calc(14px + (28 - 14) * ((100vw - 300px) / 900));
    }

    .textlarge, .textlarge h1 {
        padding: 5vh 8vw 3vh;
        font-size: calc(21px + (42 - 21) * ((100vw - 300px) / 900));
    }

    /* ------------------- Banner Section Styling - large */

    .banner {
        font-size: 30px;
    }

    .bannerimage {
        max-height: calc(80px + (200 - 80) * ((100vw - 300px) / 1066));
        max-width: 30vw;
    }

    .headingCenterLeft {
        border-left: 4px solid white;
        border-right: 2px solid white;
    }

    .headingCenter {
        border-left: 6px solid white;
        border-right: 6px solid white;
    }

    .headingCenterRight {
        border-left: 2px solid white;
        border-right: 4px solid white;
    }

    .card-body {
        font-size: 24px;
        text-align: center;
    }

    .btn {
        font-size: 30px;
    }

    .btn-link:focus {
        color: rgba(255,255,255,.5)
    }

/* ------------------- Content Section Styling - large */

    #contentsection .col-xl-6 {
        padding: 2vw 4vw 2vw 4vw;
    }

    .contenttextsmall {
        padding: 1vw 8vw 4vw;
        font-size: calc(16px + (22 - 16) * ((100vw - 1200px) / 600));
        color: #101828;
        text-align: center;
    }

    .contenttextsmall h1 {
        padding: 0;
        font-size: calc(14px + (20 - 14) * ((100vw - 1200px) / 600));
        color: #101828;
        text-align: center;
    }

    .contenttextxsmall {
        padding: 4vw 8vw 2vw;
        font-size: calc(20px + (26 - 20) * ((100vw - 1200px) / 600));
        color: #000000;
    }

    .contenttextlarge {
        padding: 4vw 6vw 2vw;
        text-align: center;
        font-size: calc(24px + (32 - 24) * ((100vw - 1200px) / 600));
        font-weight: bold;
        color: #CC613A;
    }

    .contentimage {
        max-height: 30vw;
        max-width: 30vw;
    }

    .align-left {
        text-align: left;
        padding: 0;
    }
    
    /* ------------------- Carousel Styling - large */

    .carouselimage {
        height: 15vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    /* ------------------- Contact Section Styling - large */

    #contactsection {
        min-height: 66vh;
    }

    #contactsectionmask {
        min-height: 66vh;
    }

    #contactouter {
        padding: 15vh 20vw 5vh 20vw;
    }

    #contactimage {
        width: 30vw;
        margin: 0;
        padding-right: 2vw;
    }

    .contactbanner {
        min-height: 32.3%;
    }

    .contactbanner a, .contactbanner p, .contactbanner i {
        font-size: calc(14px + (28 - 14) * ((100vw - 1200px) / 600));
        color: white;
    }

    #contactsection .contenttextsmall {
        padding: 1vw 8vw 1vw;
    }
    
    .contactmodal {
        margin-bottom: 0;
        font-size: calc(14px + (28 - 14) * ((100vw - 1200px) / 600));
        font-family: 'Cairo', sans-serif;
    }
    
    .modal-footer input {
        max-width: 120px;
    }

    #contactsection .modal-content {
        width: 40vw;
        left: 30vw;
    }

    #contactsection input, select, textarea {
        width: 34vw;
    }

    /* ------------------- Photolink Section Styling - large */

    .photolinkimage {
        padding-bottom: 2.5vw;
        width: 21vw;
    }

    #photolinkouter .pl-xl-2 {
        padding-left: .5vw!important;
    }

    #photolinkouter .pl-xl-3 {
        padding-left: .8vw!important;
    }

}