@font-face {
    font-family: 'futura bold';
    src: url('../fonts/FuturaLTProBold.otf') format('truetype');
}

@font-face {
    font-family: 'futura book';
    src: url('../fonts/FuturaLTProBook.otf') format('truetype');
}

body {
    background-color: #464544;
}

/* Lazy Loading */
img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

    img.lazy-load.is-loaded {
        opacity: 1;
    }

/* Edit Mode */
.dnnEditState #NavigationContainer {
    top: 33px;
}
/* Screen Reader Styles */
#skipNavigation, #skipToTop {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#skipNavigation a, #skipToTop a {
    z-index: 1999;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 14px;
    -webkit-box-shadow: 0px 6px 27px -6px rgb(0 0 0);
    -moz-box-shadow: 0px 6px 27px -6px rgb(0, 0, 0);
    box-shadow: 0px 6px 27px -6px rgb(0 0 0);
}

#skipNavigation a {
    background-color: #5d1718;
    color: white;
}

#skipToTop a {
    background-color: white;
    color: #5d1718
}

/* Header Styles */

#NavigationContainer {
    display: flex;
    flex-direction: column;
}

#dnn_HeroImage {
    max-width: 2100px;
    margin: auto;
    padding-bottom: 15px;
    background-color: white;
}

.navbar-brand {
    width: 60vw;
    max-width: 750px;
    margin: 15px;
}

.navbar-brand:focus, .secondary-nav-item:focus, .menu-link-only a:focus {
    outline: 1px solid white;
}

.navbar-brand img {
    width: 100%;
}

.nav-link:focus {
    outline: 1px solid white;
    color: white !important;
}

#SecondaryNav .navbar-nav {
    border-top: 1px solid white;
}

/* Main Body Styles */

#dnn_ContentPane {
    max-width: 2100px;
    margin: auto;
    background-color: white;
}

/* Styles for super small devices. */

@media (max-width: 349px) {
    .navbar-brand {
        width: 100vw;
    }
    .navbar-toggler {
        width: 80%;
        margin: auto;
    }
}

/* Mobile Styles */

@media (max-width: 1199px) {
    /* General Nav */
    #NavigationContainer {
        background-color: black;
    }

    .navbar-toggler {
        margin-right: 25px;
    }

    /* Primary Nav */
    #PrimaryNav {
        margin-top: 15px;
        padding: 0 6vw;
    }

    #PrimaryNav a {
        font-family: 'futura book';
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    /* 
        Note: some primary nav may be contained within secondary nav section
        (ex. if the styles are the same between certain classes)
    */

    /* Secondary Nav */
    #SecondaryNav {
        padding: 0 6vw;
        margin-top: 10px;
    }

    #SecondaryNav .navbar-nav {
        border: none;
    }

    .secondary-nav-item {
        padding: 10px;
    }

    /*
        Note: menu-link-only pages (those that do not have submenus) should be used sparingly.
        If used, they MUST go after all other pages in order to not mess up tabindex.
    */
    .secondary-nav-item, .menu-link-only {
        cursor: pointer;
        color: white;
        font-family: 'futura bold';
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 3px;
        text-decoration: none;
    }

    .menu-link-only {
        border-bottom: 1px solid white;
    }

    .menu-link-only a {
        padding: 10px 10px 10px 25px !important;
        color: white;
        text-decoration: none;
        display: inline-block;
    }

    #SecondaryNav .nav-item a {
        display: inline-block;
        width: 100%;
        padding: 0;
    }

    .nav-container {
        display: initial;
        height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        border-bottom: 1px solid white;
    }

    .sub-nav .col-12 {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .sub-nav {
        padding-left: 25px;
    }

    a.nav-button-link {
        text-decoration: none;
        color: white;
        font-family: 'futura book';
        letter-spacing: 2px;
    }

    .child-item, .title-item {
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    .child-item {
        list-style: none;
    }

    .title-item {
        padding-left: 68px;
    }

    li.child-item.col-xl-6 {
        padding: 0;
    }

    .grandchild-item, .headerDots, .title-item {
        display: none;
    }

    .navbar:first-child {
        padding: 8px 0 0 0;
    }

    .navbar:nth-child(2) {
        padding: 0;
    }

    .nav-item:not(.menu-link-only) {
        padding-left: 25px;
    }

    .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:hover {
        color: white;
    }

    .nav-link:focus {
        outline: none;
        border: 1px solid white;
        border-radius: 5px;
    }

    /* Menu animations */
    .sub-nav .col-xl-6, .sub-nav .col-12, .secondary-nav-item, #PrimaryNav .nav-item, .nav-button-link, .menu-link-only a {
        transition: all 0.2s ease-out;
    }

    .sub-nav .col-12:hover, .secondary-nav-item:hover, .nav-button-link:hover, #PrimaryNav .nav-item:hover, .menu-link-only a:hover, .nav-button-link:focus  {
        background-color: #5d1718;
    }
}

/*
    NOTE: Because of how CSS works, all of the following styles also apply to desktop mode unless overwritten in the Desktop Styles.
*/

/* Tablet Styles */
@media (min-width: 1200px) {
    #NavigationContainer {
        position: absolute;
        width: 100%;
        z-index: 1000;
        max-width: 2100px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Primary Nav and Overall navbar Styles */

    .navbar-brand {
        width: 37vw;
        position: absolute;
        top: 5px;
        z-index: 1000;
    }

    .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:hover {
        padding: 0;
        color: white;
        position: relative;
    }

    .navbar-dark .nav-item {
        padding: 0 30px;
        border-left: 1px solid white;
    }

    .navbar-dark .navbar-nav .nav-item:first-of-type {
        border: none;
    }

    .navbar-dark .navbar-nav {
        padding: .5rem;
        margin-right: 75px;
    }

    .navbar-nav {
        margin-right: 35px;
    }

    .nav-link {
        font-family: 'futura book';
        font-size: 0.96vw;
        letter-spacing: 1px;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.05em;
        background-color: white;
        transition: transform 300ms;
        transform: scale(0, 1);
        transform-origin: center right;
    }

    .nav-link:hover::after, .nav-link:focus::after {
        transform: scale(1,1);
        transform-origin: center left;
    }

    /* Secondary Nav and Submenu Styles */

    #SecondaryNav {
        padding: 0 16px;
    }

    .secondary-nav-item {
        padding: 8px 2vw;
    }

    /*
        Note: See note on menu-link-only items in Mobile Styles.
        These should be used RARELY and conditions apply.
    */
    .secondary-nav-item, .menu-link-only {
        color: white;
        cursor: pointer;
        text-transform: uppercase;
        font-family: 'futura bold';
        font-size: 0.95vw;
        letter-spacing: 1px;
    }

    .menu-link-only a {
        padding: 8px 2vw;
        color: white;
        text-decoration: none;
        display: inline-block;
    }

    .nav-container {
        position: absolute;
        width: 80%;
        max-width: 1455px;
        top: 2.3vw;
        right: 75px;
        z-index: 100;
    }

    .sub-nav {
        margin: 19px auto 0;
        width: 100%;
        background-color: white;
        padding: 25px;
        list-style: none;
    }

    .title-item {
        color: #3D2A18;
        font-size: 25px;
        font-family: 'futura book';
        text-transform: uppercase;
        position: absolute;
    }

    .headerDots {
        position: absolute;
        top: 80px;
        left: 0;
        width: 80%;
    }

    .headerDots img {
        width: 100%;
    }

    /*
        Note: The class child-item applies to both:
            1) The larger columns of each submenu (ex. The column that contains both Activities and Our Story (these are also have class col-xl-6))
            2) The names of the pages in the submenu (ex. Activities)
    */

    li.child-item.col-xl-6 {
        position: relative;
        top: 50px;
        /* 
            Since these items are positioned relatively, they start to bleed off the menu.
            Use margin to make the menu background bigger without actually extending the size of the hoverable interface.
        */
        margin-bottom: 50px;
    }

    .child-item {
        list-style: none;
        font-family: 'futura bold';
        font-size: 15px;
        padding-bottom: 7px;
        color: #60220E;
    }

    .child-item a {
        text-decoration: none;
        display: block;
    }

    .nav-button-link::before {
        content: url(https://static.cofo.edu/images/Keeter/arrow.svg);
        position: absolute;
        left: -15px;
        top: 50%;
    }

    .nav-button-link {
        position: relative;
        margin-top: 30px;
    }

    .subsub-nav {
        border-left: 2px solid #60220E;
        padding-left: 10px;
        position: relative;
        transition: all 0.25s ease-in-out;
    }

    .subsub-nav::after, .subsub-nav::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
    }

    .subsub-nav::before {
        top: 0;
        left: 0;
        border-top: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    .subsub-nav::after {
        bottom: 0;
        right: 0;
        border-bottom: 1px solid transparent;
    }

    .subsub-nav:hover, .nav-button-link:focus .subsub-nav {
        background-color: rgba(238, 231, 212, 0.7);
    }

    .subsub-nav:hover::after, .nav-button-link:focus .subsub-nav::after {
        border-bottom: 1px solid #60220E;
        transition: width 0.2s ease-out 0.4s;
    }

    .subsub-nav:hover::before, .nav-button-link:focus .subsub-nav::before {
        border-top: 1px solid #60220E;
        border-right: 1px solid #60220E;
        transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    }

    .subsub-nav:hover::before, .subsub-nav:hover::after, .nav-button-link:focus .subsub-nav::before, .nav-button-link:focus .subsub-nav::after {
        width: 100%;
        height: 100%;
    }

    .grandchild-item {
        list-style: none;
        font-family: 'futura book';
        font-size: 13px;
        padding-bottom: 7px;
        color: #3d2a18
    }


    #arrowToTheKnee {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid white;
        position: absolute;
        top: 2.5vw;
        display: none;
        z-index: 10000;
    }
}

/*
    NOTE: Because of how CSS works, all of the styles in the Tablet Styles section above also apply to desktop mode unless overwritten here.
*/

/* Desktop Styles */

@media (min-width: 1500px) {
    /* Primary Nav */
    .nav-link {
        font-size: 17px;
    }

    /* Secondary Nav */
    /*
        Note: See note on menu-link-only items in Mobile Styles.
        These should be used RARELY and conditions apply.
    */
    .secondary-nav-item, .menu-link-only {
        font-size: 17px;
    }

    .nav-container {
        top: 40px;
    }

    .sub-nav {
        padding: 25px 605px 25px 25px;
        min-height: 644px;
        margin-top: 34px;
    }

    .title-item {
        font-size: 40px;
    }

    .headerDots {
        top: 110px;
        width: 58%;
    }

    /* See note on child-item in Tablet Styles */
    .child-item {
        font-size: 20px;
    }

    li.child-item.col-xl-6 {
        top: 65px;
        margin-bottom: 65px;
    }

    .grandchild-item {
        font-size: 17px;
    }

    #arrowToTheKnee {
        top: 40px;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 35px solid white;
    }
}

/* Footer Styles */

#FooterContainer {
    padding: 0;
    max-width: 2100px;
    margin: auto;
    position: relative;
}

/* Footer Styles - Newsleter */

#newsletterDiv {
    background-image: url(https://static.cofo.edu/images/Keeter/footer-transparency.svg), url(https://static.cofo.edu/images/Keeter/lanterns.png);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    text-align: center;
}

#newsletterTitle {
    color: white;
    text-transform: uppercase;
    font-family: 'futura bold';
    font-size: 30px;
    margin-bottom: 30px;
    text-shadow: 2px 2px 15px black;
}

#footerOrnament {
    width: 136px;
}

#dnn_NewsletterForm {
    max-width: 800px;
    width: 87vw;
    margin: auto;
    padding-bottom: 25px;
}

.joinNewsletter {
    display: inline-block;
    margin-bottom: 50px;
    margin-top: 40px;
}

    .joinNewsletter button {
        display: block;
        font-family: 'futura book';
        text-transform: uppercase;
        padding: 8px 20px;
        font-size: 20px;
        font-weight: 300;
        background-color: #EEE7D4;
        color: #3D2A18;
        border: none;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

        .joinNewsletter button:hover {
            background-color: #e2d6b6;
        }

.ribbonDiv {
    height: 2px;
    background-color: white;
}

/* Footer Styles - Contact and Social */

#contactAndSocials {
    background-color: black;
    max-width: 100%;
    margin: 0;
}

#contactAndSocials .col-xl-3 {
    padding: 25px;
    display: flex;
}

#contactAndSocials .col-xl-3 a {
    text-decoration: none;
}

/*
    Note: The following styles until the next note apply to the social columns on both sides of the contact column.
*/
#socialsCol {
    justify-content: flex-end;
}

.socialLinkImage {
    width: 30px;
    margin: 10px;
}

.socialLink:focus {
    outline: 1px solid white;
}

/*
    The contact column styles.
*/
#contactColumn {
    text-align: center;
}

#contactColumn h3 {
    color: white;
    font-weight: bold;
    font-size: 18px;
    font-family: 'futura bold'
}

#contactColumn p {
    color: white;
    font-size: 18px;
    font-family: 'futura book'
}

#contactColumn a {
    color: white;
}

#footerLinksDiv {
    margin: 0 auto;
}

.footerLinks-nav {
    margin: 0;
}

.footerLinks-item {
    display: inline-block;
    list-style: none;
    font-family: 'futura book';
    font-size: 18px;
    padding: 0px 10px;
    margin: 40px 0px;
    border-right: 1px solid white;
}

#contactColumn li:last-of-type {
    border-right: none;
}

.footerLink {
    position: relative;
    text-decoration: none;
}

.footerLink:hover {
    text-decoration: none;
}

.footerLink:focus {
    outline: 1px solid white;
}

.footerLink::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 0.05em;
    background-color: white;
    transition: transform 300ms;
    transform: scale(0, 1);
    transform-origin: center right;
}

.footerLink:hover::after, .footerLink:focus::after {
    transform: scale(1,1);
    transform-origin: center left;
}

/* Footer Styles - Mobile */
@media (max-width: 512px) {
    .footerLinks-item {
        display: block;
        border-right: none;
        margin: 13px;
    }
    .footerLinks-nav {
        margin-top: 25px;
    }
}

/* Footer Styles - Tablet */
@media (min-width: 1200px) {
    #contactAndSocials {
        display: flex;
        align-items: flex-end;
    }
    #contactColumn {
        margin-top: 55px;
    }
}

/* Footer Styles - Center contact when bootstrap columns break */
@media (max-width: 1199px) {
    .col-xl-3, #socialsCol {
        justify-content: center;
    }
}

/* Login Fixes (Makes the Login tabs (Ex. Windows Login) clickable) */
.LoginTabGroup {
    position: relative;
    z-index: 5000;
}

/* Theme-Provided Classes Explanation */
.themeProvidedClasses {
    background-color: white;
    padding: 50px 50px 150px 50px;
}

.themeProvidedClasses p:first-of-type {
    color: red;
}

.themeProvidedClasses ul {
    margin: 0;
    padding: 25px
}

/* Theme-Provided Classes */
.wrapperDiv {
    width: 78vw;
    max-width: 1700px;
    margin: 0 auto;
}

.link-brown, .link-white, .link-navy {
    position: relative;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.link-brown, .link-brown:visited {
    color: #3D2A18;
}

.link-navy, .link-navy:visited {
    color: #063e93;
}

.link-white, .link-white:visited {
    color: white;
}

.link-brown::after, .link-white::after, .link-navy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.05em;
    transition: transform 300ms;
    transform: scale(0, 1);
    transform-origin: center right;
}

.link-brown::after {
    background-color: #3D2A18;
}

.link-navy::after {
    background-color: #063e93;
}

.link-white::after {
    background-color: white;
}

.link-brown:hover, .link-white:hover, .link-navy:hover {
    text-decoration: none;
}

.link-brown:hover, .link-brown:focus {
    color: #3D2A18;
}

.link-navy:hover, .link-navy:focus {
    color: #063e93;
}

.link-white:hover, .link-white:focus {
    color: white;
}

.link-brown:focus {
    outline: 1px solid #3D2A18;
}

.link-navy:focus {
    outline: 1px solid #063e93;
}

.link-white:focus {
    outline: 1px solid white;
}

.link-brown:hover::after, .link-white:hover::after, .link-navy:hover::after, .link-brown:focus::after, .link-white:focus::after, .link-navy:focus::after {
    transform: scale(1, 1);
    transform-origin: center left;
}

.btnanimations-brown, .btnanimations-tan {
    font-family: 'futura book';
    font-size: 22px;
    text-decoration: none;
    padding: 10px;
    margin: 0 5px;
    transition: all 0.3s ease-in-out;
}

.btnanimations-brown {
    color: white !important;
    background-color: #3D2A18;
}

.btnanimations-tan {
    color: #3D2A18 !important;
    background-color: #EEE7D4;
}

.btnanimations-brown:hover, .btnanimations-brown:focus {
    color: white;
    background-color: #49321d !important;
    text-decoration: none;
}

.btnanimations-tan:hover, .btnanimations-tan:focus {
    color: #3D2A18;
    background-color: #e2d6b6 !important;
    text-decoration: none;
}

.btnanimations-brown:focus {
    outline: 1px solid #49321d;
}

.btnanimations-tan:focus {
    outline: 1px solid #e2d6b6;
}

#mainTitle {
    font-family: 'futura bold';
    font-size: 50px;
    color: #3D2A18;
    text-align: center;
    padding-top: 30px;
}

.headingDivider {
    display: block;
    margin: -10px auto 15px auto;
    max-width: 100%;
}

.subHeader {
    font-family: 'futura book';
    font-size: 22px;
    text-align: center;
    color: #3D2A18;
    width: 825px;
    margin: 0 auto 20px;
    max-width: 100%;
}

.secondLevelHeading {
    font-family: 'futura book';
    font-size: 50px;
    color: #3D2A18;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 13px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #3D2A17 20%, rgba(0,0,0,0) 20%) 100% 1;
}

@media (max-width: 767px) {
    #mainTitle {
        font-size: 40px;
    }

    #newsletterTitle {
        font-size: 40px;
    }

    .secondLevelHeading {
        font-size: 35px;
    }

    .btnanimations-brown, .btnanimations-tan {
        font-size: 20px;
    }

    .subHeader {
        font-size: 18px;
    }
}