/* Text and BG Colors */
    /* Darker Blue - #003366 */
    /* Lighter Blue - #3399FF */
    /* Tan - #FFCC99 */
    /* Orange-ish - #FF9966 */

/* Font for Home Title text */
    /* font-family: 'Bad Script', cursive; */
    /* font-family: 'Alex Brush', cursive; */

/* Misc */

.container-fluid {
    padding: 0;
}

.row { /* This fixed the page shifting */
    margin-left: 0;
    margin-right: 0;
}

/* Loading */

#load {
    position:absolute;
    width:600px;
    height:36px;
    left:50%;
    top:40%;
    margin-left:-300px;
    overflow:visible;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
}

#load-parent {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 5000;
    background-color: #FF9966;
}

#load div {
    position:absolute;
    width:20px;
    height:36px;
    opacity:0;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 2s linear infinite;
    -o-animation:move 2s linear infinite;
    -moz-animation:move 2s linear infinite;
    -webkit-animation:move 2s linear infinite;
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    color: white;
}

#load div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
}

@keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left: 41%;
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -moz-transform:rotate(-180deg);
        -webkit-transform:rotate(-180deg);
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
  }

@-moz-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -moz-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -moz-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -moz-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -webkit-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-o-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

/* Navbar Items */

    /* Navbar Top */

    .navbar .navbar-nav .nav-link { /*Text color*/
        color: #ff9966;
    }

    /* Main Navbar */

    .main-nav {
        background-color: #3399FF;
        width: 100%;
    }

    .main-nav .navbar-nav .nav-link {
        color: whitesmoke;
    }

    .main-nav .navbar-toggler {
        margin: 5px 0 0 10px;
    }

    /* Navbar Overlay */

    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 101;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.75);
        overflow-y: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 24px;
        color: whitesmoke;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

/* Backgrounds */

    #home {
        /* background-image: url('../img/AZCanyonCompress.jpg'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -76px;
        height: 100vh;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

    #about {
        background-color: #ff9966;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

    #service {
        background-color: whitesmoke;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

    #test {
        background-color: #ff9966;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

    #contact {
        background-color: whitesmoke;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

    #map {
        background-color: whitesmoke;
    }

    #footer {
        background-color: whitesmoke;
        width: 100vw; /*This and margin left below are needed for child div to be full width*/
        margin-left: calc(-50vw + 50%);
    }

/* Sections */

    /* Home */

    .jumbotron {
        background-color: transparent;
        color: white;
        margin: 0;
    }

    .title-heading {
        font-size: 10em;
        line-height: 80%;
        font-family: 'Alex Brush', cursive;
    }

    .title-subheading {
        font-size: 5em;
        line-height: 80%;
        font-family: 'Alex Brush', cursive;
    }

    .title-heading span {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        font-size: .4em;
    }

    .learn-more-btn {
        background-color: transparent;
        color: white;
        border-color: white;
    }

    .learn-more-btn:hover {
        background-color: white;
        color: #ff9966;
    }

    .learn-more-btn:active {
        background-color: white;
        color: #ff9966;
    }

    .vertical-center {
        min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
        min-height: 100vh; /* These two lines are counted as one :-)       */
        display: flex;
        align-items: center;
    }

    .notification {
        background-color: rgba(205,92,92, 0.75);
        margin-bottom: 100px;
        padding-bottom: 3px;
        font-size: 2em;
        border-radius: 5px;
        /* Notification hidden when tax season is over */
        display: block;
    }

    /* About */

    #about {
        color: #003366;
        padding: 100px 0;
    }

    .header-row {
        margin: 0;
    }

    .about-header {
        padding-bottom: 20px;
        text-align: center;
    }

    .about-row {
        /* Moved padding: 100px 0; from here to the ID of the section. If issues arise, will move back */
    }

    .about-text-row {
        margin: 0;
    }

    .mission-statement-header {
        font-size: 2.2em;
        padding-top: 50px;
    }

    .mission-statement {
        font-size: 1.5em;
    }

    /* Service */

    #service {
        color: #003366;
        padding: 100px 0;
    }

    .service-row {
        /* Moved padding: 100px 0; from here to the ID of the section. If issues arise, will move back */
    }

    .service-row img {
        height: 300px;
    }

    .service-image-div {
        text-align: center;
    }

    .service-btn {
        background-color: transparent;
        color: #003366;
        border-color: #003366;
    }

    .service-btn:hover {
        background-color: #003366;
        color: white;
    }

    .service-btn:active {
        background-color: #003366;
        color: white;
    }

    /* Testamonies */

    #test {
        color: #003366;
    }

    .test-row {
        padding: 100px 0 30px 0;
    }

    .test-testa-row {
        padding-bottom: 180px;
    }

    .carousel-inner {
        height: 120px;
    }

    .carousel-inner blockquote p {
        color: #ffcc99;
        text-shadow: 0 0 15px #003366;
        font-size: 2em;
    }

    .carousel-indicators li {
        background-color: #003366;
        top: 80px;
    }

    .carousel-indicators .active {
        background-color: #ffcc99;
    }

    /* Contact */

    #contact {
        padding: 100px 0;
        color: #003366;
    }

    .contact-btn {
        background-color: transparent;
        color: #003366;
        border-color: #003366;
        font-size: 2.5em;
        padding: 2px 18px;
        font-weight: 100;
    }

    .contact-btn:hover {
        background-color: #003366;
        color: white;
    }

    .contact-btn:active {
        background-color: #003366;
        color: white;
    }

    .contact-sub {
        border-bottom: 1px solid #003366;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .email-div a, .phone-div a {
        text-decoration: none;
        color: #003366;
    }

    .hours, .address {
        padding-top: 30px;
    }

    /* Footer */

    #footer {
        color: #003366;
        padding: 20px 0;
    }

    #footer a {
        text-decoration: none;
        color: #003366;
    }

/* Media Queries (assigned per section) */

    /* Navbar */

    @media (max-width: 767px) {
        .main-nav {
            background-color: transparent;
        }
        .navbar-toggler {
            background-color: rgba(255,255,255, 0.4);
        }
    }

    /* Home */

    @media (max-width: 1500px) {
        .notification {
            font-size: 1.5em;
        }
        .title-heading {
            font-size: 7.5em;
        }
        .title-subheading {
            font-size: 3.75em;
        }
    }

    @media (max-width: 769px) {
        .notification {
            font-size: .9em;
            margin-bottom: 50px;
        }
        .title-heading {
            font-size: 5em;
        }
        .title-subheading {
            font-size: 2.5em;
        }
    }

    @media (max-width: 411px) {
        .title-heading {
            font-size: 3em;
        }
        .title-subheading {
            font-size: 1.25em;
        }
    }

    /* About */

    @media (max-width: 991px) {
        .about-header {
            padding-bottom: 30px;
            font-size: 2.8em;
        }
        .about-paragraph {
            font-size: 1em;
        }
        .mission-statement {
            font-size: 1.3em;
        }
    }

    /* Service */

    @media (max-width: 991px) {
        .service-header {
            padding-bottom: 30px;
            font-size: 2.8em;
        }
        .service-paragraph {
            font-size: 1em;
        }
        .service-image-div {
            display: none;
        }
        .service-btn-div {
            padding-top: 30px;
        }
    }

    /* Test */

    @media (max-width: 991px) {
        .test-header {
            font-size: 2.8em;
        }
        .carousel-inner blockquote p {
            font-size: 1em;
        }
    }

    /* Contact */

    @media (max-width: 991px) {
        .contact-header {
            font-size: 2.8em;
        }
        .contact-btn {
            font-size: 1.6em;
        }
    }

    /* Map */

    @media (max-width: 991px) {
        #map p {
            font-size: .8em;
        }
    }

    /* Footer */

    @media (max-width: 767px) {
        #footer p, #footer a {
            font-size: .8em;
        }
    }