/* NAVBAR */

.navigation{
    padding-top: 15px;
    height: 70px;
}

.nav-a{
    float: left;
    width: 50%;
}

#title{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    padding-right: 20px;
    color: black;
}

a:hover{
    text-decoration: none;
}

.nav-b{
    float: right;
}

.link{
    color: #8A8A8A;
    padding: 0 5px;
    line-height: 55px;
}

.link:hover{
    color: #2e313a;
}

#active{
    color: black;
}

#role{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding-top:10px;
}

#links{
    float: right;
}

.mobile-nav-b{
    display: none;
}

/* ADMIN OPTIONS */

.options{
    padding-bottom: 30px;
}

.options-a{
    width: 50%;
    float: left;
}

.options-b{
    float: right;
}

/* BODY */

#body{
    font-family: 'Didact Gothic', sans-serif;
    background: white;
    padding-top: 20px;
    padding-bottom: 20px;
    color: black;
}

/* FOOTER */

#ftr{
    float: right;
    font-size: 13px;
    color: #808080;
    padding-right: 10px;
}

.social-icons{
    float: left;
}

.social, #ftr{
    padding-bottom: 10px;
}

.social{
    padding-left: 7px;
}

.social:hover{
    filter: invert(1);
}

/* CONTACT */

.contact-a{
    float: left;
    width: 34%;
    height: 698px;
}

.contact-b{
    float: left;
    width: 66%;
}

#cntc{
    background-color: #a8a796;
    padding: 35px 60px;
    color: black !important;
}

#cntcPhoto{
    width: 100%;
}

label{
    margin-bottom: 0;
}

.form-group{
    margin-bottom: 10px;
}

#cntcBody{
    background-color: transparent;
    border-color: transparent;
    padding: 0 0 0 0;
    color: black;
}

#msg{
    resize: none;
}

#cntcBody{
    resize: none;
}

#passwordHelpBlock{
    color: white !important;
}

#result{
    padding-top: 20%;
}

#fail{
    color: #BB1D1D;
}

/* ABOUT */

.about-a, .about-b{
    float: left;
}

.about-a{
    width: 59.5%;
    height: 700px;
}

#abt{
    background-color: #2e313a;
    color: white;
    padding: 40px 60px;
}

#abt-edit{
    background-color: #2e313a;
    color: white;
    padding-top: 20px;
}

#abtBody{
    background-color: transparent;
    border-color: transparent;
    resize: none;
    padding: 0;
}

textarea{
    overflow: hidden;
}

.abt-zero{
    height: 30px;
    line-height: 30px;
}

.abt-one{
    height: 30px;
    line-height: 30px;
}

.white{
    color: white;
}

.dark-green{
    color: #88bd6f;
}

.light-green{
    color: #b9d770;
}

.dark-grey{
    color: #808081;
}

/* HOME */

#carousel{
    margin-left: 5px;
}

.carousel-control-prev-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238A8A8A' 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='%238A8A8A' 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");
}

.carousel-indicators li{
    background-color: #8A8A8A;
}

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

/* WORK */

#work{
    text-align: center;
}

#wrk{
    background-color: white;
}

#wrkImg{
    padding: 0 1px 5.5px 1px;
}

.work-modal{
    width: fit-content !important;
    width: -moz-fit-content; 
    max-width: 1070px !important
}

#wrkImg:hover{
    opacity: .7;
}

.modal-backdrop{
    opacity: .85 !important;
    background-color: white !important;
}

/* ADMIN */

#login{
    padding: 30px 0 30px 0;
}

/* PAGE NOT FOUND */

#not-found{
    padding: 100px 0 100px 0;
}

#pnf{
    background-color: yellow;
}

/* GLOBAL */

.col-md-12{
    position: static;
}

body{
    min-width: 320px;
}

.col-md-8, .col-md-4, .col-md-5{
    padding: 0 0 0 0;
}

.dropdown-menu, #form-header, #center, #passwordChangeError, #passwordChangeSuccess{
    text-align: center;
}

#profileModal, #options{
    font-family: 'Didact Gothic', sans-serif;
}

#center{
    background-color: black;
    padding: 10px 0 10px 0;
    color: yellow;
}

.container{
    width: 100%;
}

.spacer{
    height: 20px;
    width: 100%;
    float: left;
}

/*---------------------------------------------------------------------------------------*/

/* MOBILE + TABLET */

@media only screen and (max-width: 1200px) {

    /* CONTACT */

    .contact-a{
        width: 100%;
    }

    #cntcImg{
        display: none;
    }

    #cntc{
        padding: 20px 40px;
    }

    /* ABOUT */

    .about-a{
        width: 100%;
        height: 580px;
    }

    .about-b{
        display: none;
    }

}

@media only screen and (max-width: 1000px) {

    /* NAV */

    .nav-a{
        width: 70%;
    }

    #title{
        padding-right: 10px;
    }

}

@media only screen and (max-width: 800px) {

    /* NAV */

    .nav-b{
        display: none;
    }

    .mobile-nav-b{
        display: block;
        float: right;
    }

    #mobile-menu{
        height: 30px;
        margin-top: 10px;
    }

    #mobile-dropdown{
        padding: 0;
    }

    #title{
        padding-right: 10px;
    }

    .options{
        padding-bottom: 70px;
    }

    .btn-block{
        border-radius: 0;
    }

}

@media only screen and (max-width: 780px) {

    .about-a{
        height: 600px;
    }

    .abt-two{
        height: 8em;
    }

    .abt-three{
        height: 3.5em;
    }

    .abt-five{
        height: 15em;
    }

}

@media only screen and (max-width: 767px) {

    .about-a{
        height: 800px;
    }

    .abt-two{
        height: 14em;
    }

    .abt-three{
        height: 5em;
    }

}

@media only screen and (max-width: 765px) {

    #carousel{
        margin-left: 0;
    }

    #role{
        float: left;
        margin-top: -15px;
    }

}

@media only screen and (max-width: 575px) {

    .about-a{
        height: 750px;
    }

    .abt-two{
        height: 11em;
    }

}

@media only screen and (max-width: 568px) {

    .abt-two{
        height: 11em;
    }

}

@media only screen and (max-width: 560px) {

    .about-a{
        height: 800px;
    }

    .abt-two{
        height: 14em;
    }

}

@media only screen and (max-width: 530px) {

    .abt-two{
        height: 14em;
    }

}

@media only screen and (max-width: 525px) {

    .abt-one{
        height: 3.5em;
    }

    .about-a{
        height: 840px;
    }

}

@media only screen and (max-width: 520px) {

    .abt-five{
        height: 17em;
    }

}

@media only screen and (max-width: 480px) {

    /* NAV */

    #title{
        font-size: 24px;
    }

    #nav-a{
        width: 70%;
    }

    #cntc{
        padding: 10px 20px;
    }

}

@media only screen and (max-width: 440px) {

    /* ABOUT */

    .about-a{
        height: 850px;
    }

    .abt-two{
        height: 14em;
    }

    .abt-three{
        height: 5em;
    }

}

@media only screen and (max-width: 438px) {

    .about-a{
        height: 870px;
    }

    .abt-three{
        height: 7em;
    }

}

@media only screen and (max-width: 432px) {

    .about-a{
        height: 900px;
    }

    .abt-two{
        height: 14em;
    }

    .abt-three{
        height: 6.5em;
    }

}

@media only screen and (max-width: 429px) {

    #abt{
        padding: 10px 15px;
    }

    .about-a{
        height: 800px;
    }

    .abt-two{
        height: 14em;
    }

    .abt-three{
        height: 5em;
    }

}

@media only screen and (max-width: 415px) {

    /* NAV */

    #title{
        font-size: 18px;
    }

    #nav-a{
        width: 85%;
    }

    #mobile-menu{
        margin-top: 5px;
    }

    /* ABOUT */

    .abt-two{
        height: 14em;
    }

    .abt-three{
        height: 5em;
    }

}

@media only screen and (max-width: 400px) {

    #wrk{
        margin-left: -15px;
    }

    #wrkImg{
        padding: 2px 0;
    }

}

@media only screen and (max-width: 376px) {

    #wrk{
        margin-left: -19px;
    }

}

@media only screen and (max-width: 361px) {

    #mobile-menu{
        margin-right: -5px;
    }

    #wrk{
        margin-left: -27px;
    }

    #wrkImg{
        margin: auto;
        display: block;
    }

}

@media only screen and (max-width: 350px) {

    #wrk{
        margin-left: -30px;
    }

    .about-a{
        height: 880px;
    }

    .abt-two{
        height: 17em;
    }

    .abt-three{
        height: 6em;
    }

}