body {
    font-family: 'Muli', sans-serif;
    color: #0c1e29;
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}

/* ID */

#navbar-toggle {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 4;
    color: inherit;
}

#hamburger {
    -webkit-transform: translateZ(0);
}

@media screen and (min-width: 768px) {
    #hamburger {
        font-size: 2rem;
    }
}

@media screen and (max-width: 767px) {
    #hamburger {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 768px) {
    #times {
        font-size: 2rem;
    }
}

@media screen and (max-width: 767px) {
    #times {
        font-size: 1.3rem;
    }
}

#heroText2, #heroText3, #heroText4, #heroForm1, #heroForm2 {
    opacity: 0;
}

.aboutTextWhite, .who-text-blue, .what-text-blue, .where-text-blue, .when-text-blue {
    opacity: 0;
}

#fadeRow {
    height: 50px;
    width: 100%;
    background: linear-gradient(rgba(243, 247, 249,0), rgba(243, 247, 249,0.98));
    margin: 0;
}

/* NAV */

/* .nav-item .active {
color: #9ddbff !important;
border-bottom: solid 2px #9ddbff !important;
border-left:  solid 2px #9ddbff !important;
}

.nav-tabs .nav-link.active {
background-color: transparent;
color: #405dcf;
font-weight: 600;
border-color: transparent transparent #405dcf transparent;
border-width: 1px 0px 2px 0px;
}

.nav-tabs .nav-link:not(.active) {
color: #6c757d;
}

.nav-tabs .nav-link:hover {
border-color: transparent;
color: #405dcf;
}

.nav-tabs .nav-item {
margin-bottom: -2px;
}  */

.nav-link.profile.active > h6 {
    border-bottom: 2px solid #5978f3!important;
    color: #0c1e29 !important;
    font-weight: 700 !important;
}

nav-link.profile: > h6 {
}

/* BUTTONS */

.btn-indigo {
    background-color: #5978f3;
    color: rgba(255, 255, 255, 0.9);
}

.btn-indigo:hover {
    background-color: #6f8bfb;
    color: rgba(255, 255, 255, 0.9);
}

.btn-indigo:active {
    background-color: #6f8bfb;
    color: rgba(255, 255, 255, 0.9);
}

.delete-btn {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
}

#sendContactBtn {
}

#sendContactBtn.text-green:hover {
    font-weight: 700;
}

/* POSITIONING */

#heroContact {
    position: relative;
}

#heroContactBtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 0 .25rem .25rem 0;
}

.profile-info-card {
    position: absolute;
    top: 10%;
    right: 15px;
    margin-left: -10%;
    height: 80%;
}

@media screen and (max-width: 321px) {
    .profile-info-card-sm {
        height: 29rem;
    }
}

@media screen and (min-width:322px, max-width: 400px) {
    .profile-info-card-sm {
        height: 26rem;
    }
}

@media screen and (min-width:401px) {
    .profile-info-card-sm {
        height: 23rem;
    }
}

/* FORMS */

.focus-extrude:focus {
    -moz-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    -webkit-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
}

.custom-file-input:focus~.custom-file-label {
    -moz-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    -webkit-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
}

.custom-file-label {
    border-radius: 0.25rem!important;
}

.file-import-lg {
    height: 3.125rem;
    padding: .75rem;
}

/* BACKGROUND */

.hero {
    background-position: 50%!important;
    background-image: url(/images/hero.jpg);
    background-size: contain;
    color: rgba(255, 255, 255);
}

.bg-hero {
    background-image: url(/images/hero.jpg);
    background-size: contain;
    height: 100%;
}

.andrew-banner {
    background-position: 50% !important;
    background-image: url(Images/Profile/Andrew%20profile%20banner.jpeg);
    background-size: cover;
}

.bg-grey-light {
    background-color: #f3f7f9 !important;
}

.bg-indigo {
    background-color: #5978f3;
    color: rgba(255, 255, 255, 0.9);
}

.bg-indigo-light {
    background-color:#6f8bfb !important;
}

.bg-blue-light {
    background-color: #9ddbff !important;
}

/* TEXT */

@media screen and (min-width: 768px) {
    .h-main {
        font-size: 4.5rem;
        font-weight: 300;
    }
}

@media screen and (max-width: 767px) {
    .h-main {
        font-size: 2.5rem;
        font-weight: 300;
    }
}

@media screen and (min-width: 768px) {
    .h-sub {
        font-size: 3rem;
        font-weight: 300;
    }
}

@media screen and (max-width: 767px) {
    .h-sub {
        font-size: 1.75rem;
        font-weight: 300;
    }
}

@media screen and (min-width: 768px) {
    .p-main {
        font-size: 1.9rem;
        font-weight: 300;
    }
}

@media screen and (max-width: 767px) {
    .p-main {
        font-size: 1.2rem;
        font-weight: 300;
    }
}

.font-semibold {
    font-weight: 600;
}

.font-thin {
    font-weight: 300;
}

.letter-spacing-5{
    letter-spacing: 1.5px;
}

.letter-spacing-8{
    letter-spacing: 8px;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.9);
}

.text-white-50 {
    color: rgba(255, 255, 255, .5);
}

.text-black {
    color: #0c1e29;
}

.text-blue-light {
    color: #9ddbff !important;
}

.text-indigo-dark {
    color: #405dcf!important;
}

.text-red {
    color: #BB0A21;
}

.text-green {
    color: #0E7C7B !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.text-bold {
    font-weight: 700 !important;
}

.text-semibold {
    font-weight: 600 !important;
}

.no-underline {
    text-decoration: none !important;
}

.underline {
    text-decoration: underline;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* BORDERS */

.border-indigo {
    border-color: #5978f3!important;
}

.border-grey {
    border-color: #dfe4e7!important;
}

.border-grey-light {
    border-color: #f3f7f9 !important;
}

.border-bottom-2 {
    border-bottom-width: 2px !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-4 {
    border-width: 4px !important;
}

/* OPACITY */

.o-65 {
    opacity: 0.65;
}

.o-0 {
    opacity: 0;
}

/* MARGINS & PADDING */

.mb-n2px {
    margin-bottom: -2px!important;
}

.py-75 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mt-n50pc {
    margin-top: -50%;
}

.p-col {
    padding-left: 15px;
    padding-right: 15px;
}

/* Z-INDEX */

.z-n1 {
    z-index: -1;
}

.z-2 {
    z-index: 2;
}

/* IMAGES */

.profile-photo {
    max-width: 200px;
    max-height: 200px;
}

/* SHADOWS */

.shadow-extrude {
    -moz-box-shadow: 7px 7px 8px #d6d9db,
        -7px -7px 8px #ffffff;
    -webkit-box-shadow: 7px 7px 8px #d6d9db,
        -7px -7px 8px #ffffff;
    box-shadow: 7px 7px 8px #d6d9db,
        -7px -7px 8px #ffffff;
}

.shadow-sm-inset {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) inset !important;
}

.shadow-form-inset {
    -moz-box-shadow: inset 7px 7px 8px #d6d9db,
        inset -7px -7px 8px #ffffff;
    -webkit-box-shadow: inset 7px 7px 8px #d6d9db,
        inset -7px -7px 8px #ffffff;
    box-shadow: inset 7px 7px 8px #d6d9db,
        inset -7px -7px 8px #ffffff;
}

.shadow-btn {
    background: linear-gradient(145deg, #ffffff, #dbdee0);
    box-shadow:  3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    -moz-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
    -webkit-box-shadow: 3px 3px 4px #c0c3c5,
        -3px -3px 4px #ffffff;
}

.shadow-n {
    box-shadow:  9px 9px 19px #e0e3e5,
        -9px -9px 19px #ffffff,
}

.shadow-d {
    -moz-box-shadow:  9px 9px 19px #e0e3e5;
    -webkit-box-shadow:  9px 9px 19px #e0e3e5;
    box-shadow:  9px 9px 19px #e0e3e5;

}

.shadow-d-inset {
    box-shadow: inset 9px 9px 19px #e0e3e5;
}

.card-shadow {
    box-shadow:  9px 9px 19px #e0e3e5,
        -9px -9px 19px #ffffff,
        inset 9px 9px 19px #e0e3e5,
        inset -9px -9px 19px #ffffff;
    -moz-box-shadow: 9px 9px 19px #e0e3e5,
        -9px -9px 19px #ffffff,
        inset 9px 9px 19px #e0e3e5,
        inset -9px -9px 19px #ffffff;
    -webkit-box-shadow: 9px 9px 19px #e0e3e5,
        -9px -9px 19px #ffffff,
        inset 9px 9px 19px #e0e3e5,
        inset -9px -9px 19px #ffffff;
}

/* SIZES */

.w-0 {
    width: 0;
}

.h-0 {
    height: 0;
}

.w-85 {
    width: 85%;
}

.w-8 {
    width: 8rem;
}

/* .min-w-3 {
min-width: 55vw;
}*/

.w-2 {
    width: 200px !important;
}

.h-3 {
    height: 300px !important;
}

@media screen and (max-width: 575px) {
    .min-w-3 {
        min-width: 55vw;
    }
}

@media screen and (min-width: 576px) {
    .min-w-3 {
        min-width: 50vw;
    }
}

@media screen and (min-width: 768px) {
    .w-100-md-50 {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    .w-100-md-50 {
        width: 100%;
    }
}


/* EFFECTS */

.hover-raise:hover {
    transform: translateY(-2px);
    transition: .15s ease-in-out;
}

/* CURSORS */

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed !important;
}

.default {
    cursor: default;
}

/* OVERFLOW */

.example-grid {
    width: 100vw;
    display: flex;
    overflow-x: scroll;
}

.overflow-scroll {
    overflow: scroll;
}

/* CURTAIN NAV */

/* The Overlay (background) */
.overlay {
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    left: 0;
    top: 0;
    background-position: 50%!important;
    background-image: url(/images/hero.jpg);
    background-size: contain;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide down the overlay */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.5);
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus, .overlay a.active {
    color: #9ddbff !important;
}

/* exclude close button from hover effect */

#closeBtn:hover {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: .25rem .75rem !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    background-color: transparent !important;
    border-radius: .25rem !important;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 30px;
        top: 5px;
        right: 5px;
    }
}

/* FLOATING LABELS */

.contact-form {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    margin: auto;
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
    height: 3.125rem;
    padding: .75rem;
}

.form-label-group > label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0; /* Override default `<label>` margin */
    line-height: 1.5;
    color: #495057;
    pointer-events: none;
    cursor: text; /* Match the input under the label */
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder,
.form-label-group textarea::-webkit-input-placeholder {
    color: transparent;
}

.form-label-group input:-ms-input-placeholder,
.form-label-group textarea:-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-ms-input-placeholder,
.form-label-group textarea::-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-moz-placeholder,
.form-label-group textarea::-moz-placeholder {
    color: transparent;
}

.form-label-group input::placeholder,
.form-label-group textarea::placeholder {
    color: transparent;
}

.form-label-group input:not(:placeholder-shown),
.form-label-group textarea:not(:placeholder-shown) {
    padding-top: 1.25rem;
    padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:placeholder-shown) ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .form-label-group > label {
        display: none;
    }
    .form-label-group input::-ms-input-placeholder,
    .form-label-group textarea::-ms-input-placeholder {
        color: #777;
    }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .form-label-group > label {
        display: none;
    }
    .form-label-group input:-ms-input-placeholder,
    .form-label-group textarea:-ms-input-placeholder {
        color: #777;
    }
}

.custom-file-label::after {
    display: none;
}

/* END OF FLOATING LABELS */

/* SCROLL TO TOP BUTTON */


@media screen and (min-width: 992px) {
    #scrollToTopBtn {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 5px; /* Place the button at the bottom of the page */
        right: 5px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        cursor: pointer; /* Add a mouse pointer on hover */
        color: inherit;
        padding: .25rem .25rem;
        line-height: 1;
        font-size: 2rem;
    }
}

@media screen and (max-width: 991px) {
    #scrollToTopBtn {
        display: none !important; /* Hidden by default */
    }
}

/* POPOVERS */

.popover {
    border: none;
    -moz-box-shadow:  9px 9px 19px #e0e3e5;
    -webkit-box-shadow:  9px 9px 19px #e0e3e5;
    box-shadow:  9px 9px 19px #e0e3e5;
    background-color: #f3f7f9;
    max-width: 100%;
}

/* Recaptcha */
.grecaptcha-badge {
    display: none;
}

.recaptcha-text {
    font-size: 0.5rem;
}