:root {
    --blue: #3969b8;
    --quarter-blue: rgb(57 105 184 / .25);
    --green: #22a178;
    /* overflow-x: hidden; */
    font-size: 16px;
}


/*--------------------------------------------------------
FONT ASSIGNMENTS
--------------------------------------------------------*/

body {
    font-family: 'Poppins', sans-serif;
    color: #363e47;
    /* overflow-x: inherit; */
    overflow-x: hidden;
}

p {
    /* font-family: 'Poppins', sans-serif;
    font-size: 16px; */
    /* color: #363e47; Already set on body, a second declaration is not needed and will need to be overwritten if included */
    margin-bottom: .25em;
}

.container-fluid {
    max-width: 1750px;
}


/*--------------------------------------------------------
	H1 - H6
--------------------------------------------------------*/

.heading-wrap {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 10px;
    position: relative;
    width: 1140px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 44px;
}

.heading-wrap::before {
    content: '';
    background: #888;
    position: absolute;
    top: .75em;
    left: 0;
    right: 0;
    height: 2px;
    outline: 3px solid white;
    transition: left Xs ease-in-out, right Xs ease-in-out;
    transition-duration: .375s;
    z-index: -1;
}


/* .heading-wrap.appear::before,
.heading-wrap.appear::after {
    If it's decided to bring back the boder animations on the headings, just uncomment this style out and switch .heading-wrap::before's left and right to 50%
    left: 0;
    right: 0;
} */

#mycanvas .heading-wrap::before {
    content: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 300;
    color: #777;
    margin: 0px;
    padding: 0px;
    margin-bottom: .5em;
}

h1 {
    font-size: 44px;
    font-size: 2.750rem;
    z-index: 2;
}

h2 {
    font-size: 30px;
    font-size: 1.875rem;
    z-index: 2;
}

h3 {
    font-size: 26px;
    font-size: 1.625rem;
}

h4 {
    font-size: 23px;
    font-size: 1.438rem;
}

h5 {
    font-size: 20px;
    font-size: 1.250rem;
}

h6 {
    font-size: 18px;
    font-size: 1.125rem;
}

h1.title {
    margin-top: 15px;
    text-align: center;
}

h1.title:empty {
    display: none;
}

#homepage-main h1,
#homepage-main h2,
h1.title {
    margin-top: 0;
    display: inline-block;
    padding-bottom: 0;
    background: white;
    padding: 0 .6ch;
    color: #777;
}

#homepage-main h2 {
    font-size: 44px;
}


/*--------------------------------------------------------
	LINKS
--------------------------------------------------------*/

a {
    color: var(--green);
    position: relative;
}

a:hover,
a:focus {
    outline: none;
    /* Hover/focus distinction is handled by a separate style */
}

a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    border-bottom: 2px solid currentColor;
    transition: right .125s ease-in-out;
}

a:hover::before,
a:focus::before {
    right: 0;
}

.button-link,
.caption-wrapper a,
#animation-button {
    display: inline-block;
    background: var(--blue);
    border: 1px solid currentColor;
    color: white;
    padding: .5em 2ch calc(.5em + 1px);
    border-radius: 3px;
    text-decoration: none;
}

.button-link:hover,
.caption-wrapper a:hover,
#animation-button:hover,
.button-link:focus,
.caption-wrapper a:focus,
#animation-button:focus {
    color: white;
    text-decoration: none;
}

.button-link::before,
.caption-wrapper a::before {
    bottom: .25em;
    left: 1ch;
}

.button-link:hover::before,
.button-link:focus::before,
.caption-wrapper a:hover::before,
.caption-wrapper a:focus::before {
    right: 1ch;
}


/*--------------------------------------------------------
	IMAGES, Objects
--------------------------------------------------------*/

img {
    border: 0px;
}

#embed-row {
    display: none;
}


/*--------------------------------------------------------
						HEADER
--------------------------------------------------------*/

header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    color: inherit;
    padding: 15px 0px;
    max-width: 1750px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background: white;
    box-shadow: 0 3px 14px -2px rgba(0, 0, 0, .2);
}

header.unscrolled::before {
    box-shadow: none;
}

@media (max-width: 1750px) {
    header {
        width: 100vw;
        padding-left: 25px;
        padding-right: 45px;
        overflow-x: hidden;
    }
}

@media (max-width: 990px) {
    header {
        padding-right: 25px;
    }
}

header>* {
    position: relative;
}

.logo-link::before {
    content: none;
}

[id^="afc-logo"]:hover,
[id^="afc-logo"]:focus {
    --green: #3969b8;
    --blue: #22a178;
}


/* --------------Logo 1 original animations----------- */


/* @keyframes speedStretch {
    0% {
        width: 1px;
        x: 0;
    }
    50% {
        width: 200%;
        x: 100%;
    }
    100% {
        width: 1px;
        x: 100%;
    }
}

@keyframes showEveryFourthRepetition {
    /* Other animation is visible for 25% of the time */


/* 0% {
    opacity: 1;
}

25% {
    opacity: 1;
} */


/* Other animation is hidden for 75% of the time */


/* 25.1% {
    opacity: 0;
}

100% {
    opacity: 0;
} */


/* } */


/* #speed-shape {
    --animation-speed: 1s;
    fill: var(--green);
    width: 1px;
    height: 100%;
    animation: speedStretch var(--animation-speed), showEveryFourthRepetition calc(var(--animation-speed)*4);
    animation-timing-function: ease-in-out;
    animation-timing-function: cubic-bezier(1, 0, .5, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    clip-path: url(#speed-path);
}
*/


/* --------------Logo 1 styles----------- */

#afc-logo {
    transition: height .25s ease-in-out .125s, transform .125s ease-in-out .125s;
    --time: 1s;
    --bezier: cubic-bezier(0.68, 0, 0.265, 1.25);
}

header:not(.unscrolled) #afc-logo {
    transform: scale(0);
    height: 0;
}

#crest-group {
    fill: var(--green);
    opacity: 0.3;
    fill: #A0A0A0;
}

.unscrolled .crest {
    transform: scale(0);
    transform-origin: center;
    animation-name: scaleIn;
    animation-duration: calc(var(--time) / 2);
    animation-timing-function: var(--bezier);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: calc(var(--time) * .75);
}

.unscrolled [class*="-wings"] path {
    animation-duration: calc(var(--time) * .75);
    animation-timing-function: var(--bezier);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    --offset: .75s;
}

.unscrolled .left-wings path {
    animation-name: slideInRight;
}

.unscrolled .right-wings path {
    animation-name: slideInLeft;
}

.unscrolled [class*="-wings"] path:nth-child(1) {
    animation-delay: calc(var(--offset) + (var(--time) * .5));
}

.unscrolled [class*="-wings"] path:nth-child(2) {
    animation-delay: calc(var(--offset) + (var(--time) * .75));
}

.unscrolled [class*="-wings"] path:nth-child(3) {
    animation-delay: calc(var(--offset) + (var(--time) * 1));
}

.unscrolled [class*="-wings"] path:nth-child(4) {
    animation-delay: calc(var(--offset) + (var(--time) * 1.25));
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-108.5px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(108.5px);
    }
    100% {
        transform: translateX(0);
    }
}


/* --------------Logo 2 styles----------- */

#afc-logo2 {
    position: absolute;
    left: 0;
    top: calc(50% - (50.3px / 2));
    transition: transform .125s ease-in-out .125s;
    transform: translateX(0);
    width: 125px;
}

.unscrolled #afc-logo2 {
    transform: translateX(-300px);
    transition-delay: 0s;
}

.afc {
    transition: fill .125s ease-in-out;
}

#plane {
    transition: transform .5s ease-in-out .5s, fill .125s ease-in-out;
    transform: translateX(0);
}

.unscrolled #plane {
    transform: translateX(-100%);
}


/* --------------end Logo 2 styles----------- */

#right-side-wrap {
    text-align: right;
    margin-top: 0px;
}

.auxilary-navigation {
    max-height: 0;
    overflow: hidden;
    transition: max-height .125s ease-in-out;
}

.unscrolled .auxilary-navigation {
    max-height: 40px;
}

@media (max-width: 990px) and (min-width: 768px) {
    .unscrolled .auxilary-navigation {
        max-height: calc(40px + 1em);
        padding-bottom: 1em;
    }
}


/* Mobile SVG burger menu */

@media(min-width: 991px) {
    #mobile-toggle {
        display: none;
    }
}

svg#burger-menu {
    width: 35px;
    height: 20px;
}

svg#burger-menu .cls-1 {
    fill: var(--blue) !important;
}


/* Join and Donate */

.auxilary-navigation a {
    margin-right: 1ch;
    font-size: 15px;
}

.button-link[href*="registration.php"] {
    /* Join button */
    background: var(--green);
}


/* Member Login */

.signin-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-left: 7px;
}

.signin-wrap a {
    background: var(--green) !important;
    border: 1px solid var(--green);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 31px 6px 25px;
    border-radius: 2px;
    text-decoration: none;
}

.signin-wrap a:hover,
.signin-wrap a:focus {
    background: var(--green) !important;
    border: 1px solid var(--green);
    color: #fff;
    text-decoration: none;
}

.signin::after {
    content: url(../images/member-icon.png);
    display: inline-block;
    padding-left: 10px;
    position: relative;
    bottom: -3px;
}


/* Search Bar */

.searchbox {
    width: 260px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    border: 1px solid #999999;
    border-radius: 3px;
    padding: 0;
    font-size: 15px;
    height: 38px;
    transition: border .125s ease-in-out;
    background: white;
    /*max-width: calc(100vw - 212px - 50px - 30px);
     (viewport) - (width of logo) - (header padding) - (30px gap between logo and search) */
}

.searchbox:focus,
.searchbox:focus-within {
    outline: none;
}

.search-input {
    border: none;
    position: absolute;
    left: 1ch;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.search-input:focus {
    outline: none;
}

.search-button {
    background: var(--blue);
    box-shadow: none;
    border: none;
    height: unset;
    border-radius: 0px;
    outline: none;
    background-image: url(../images/search-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 38px;
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    transition: background-color .125s ease-in-out;
}

.searchbox:hover .search-button,
.searchbox:focus .search-button,
.searchbox:focus-within .search-button {
    background-color: var(--green);
}

@media (max-width: 767px) {
    header .searchbox {
        display: none;
    }
}


/* #mobile-menu-col {
    top: 8px;
    padding: 5px 0px;
    position: relative;
    margin-left: 15px;
} */

#mobile-toggle {
    cursor: pointer;
}


/*--------------------------------------------------------
					Desktop Navigation
--------------------------------------------------------*/

#nav_menu {
    padding: 0px;
    display: flex !important;
    /* Overwrite BS's' !important */
    justify-content: flex-end;
}

.unscrolled #nav_menu>ul {
    margin-top: 15px;
}

#nav_menu>ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 50vw;
    max-width: 100%;
    justify-content: space-between;
    margin-top: 0;
    transition: margin-top .125s ease-in-out;
}

@media (max-width: 990px) {
    #nav_menu>ul {
        display: none;
    }
}

#nav_menu::before,
#nav_menu::after,
#nav_menu>ul::before,
#nav_menu>ul::after {
    content: none;
}

.navbar-nav>li a {
    color: #333;
    padding: 6px 0;
}

#mms-main .navbar-nav>li a {
    /* MMS menus only */
    padding: 1em;
}

#nav_menu .navbar-nav>li>a:hover,
#nav_menu .navbar-nav>li>a:focus,
#nav_menu .navbar-nav .open>a,
#nav_menu .navbar-nav .open>a:focus,
#nav_menu .navbar-nav .open>a:hover,
#nav_menu .dropdown-menu>li>a:focus,
#nav_menu .dropdown-menu>li>a:hover {
    /* That's a whole lot of BS bs to overwrite */
    background: transparent;
    /* Hover/focus distinction for these elements is handled by underlining them */
    outline: none;
}

#nav_menu a {
    position: relative;
}

#nav_menu a::before {
    border-bottom-color: var(--blue);
}

#nav_menu .dropdown-menu {
    background-color: white;
    border: 0;
    padding: .75em 2ch 1em;
    left: -2ch;
    box-shadow: 0 17px 36px rgba(0, 0, 0, 0.3);
}

.navbar-nav>li>.dropdown-menu {
    /* Overwrite overly specific BS style */
    border-radius: 2px;
}

#nav-menu>ul>li:last-child,
#nav-menu>ul>li:nth-last-child(2) {
    /* Make sure the last two top level menu items don't crash into the side of the window */
    left: auto;
    right: 0px;
}

#nav_menu .dropdown-menu li {
    padding: .25em 0;
}

#nav_menu .dropdown-menu li a {
    padding: .25em 0;
    display: inline-block;
}

.dropdown-menu li:last-child a:hover,
.dropdown-menu li:last-child a:focus {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.dropdown-menu.men-level-1,
.dropdown-menu.men-level-2 {
    left: -100%;
    right: 100%;
    top: -2px;
}

.dropdown-menu.men-level-1 li a,
.dropdown-menu.men-level-2 li a {
    white-space: normal;
}

header .nav>li>a.home-link {
    display: none;
}

@media (max-width:1530px) {
    #nav_menu>ul {
        width: 65vw;
    }
}

@media (max-width: 1100px) {
    #nav_menu>ul {
        width: calc(100vw - 50px - 170px - 50px);
        /* The width of the screen minus the header's left and right padding, minus the max-width of the logo, minus the margin between the logo and the menu */
    }
}


/*--------------------------------------------------------
                    Mobile Navigation
--------------------------------------------------------*/

#mobileMenuWrapper {
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    left: 0;
    transform: translateX(-120%);
    width: 300px;
    background: white;
    transition: transform .125s ease-in-out;
    padding: .5em 2ch 1em;
    box-shadow: 0 3px 14px -2px rgba(0, 0, 0, .6);
}

#mobileMenuWrapper.open {
    transform: translateX(0);
}

#mobileMenuWrapper ul {
    padding: 0px;
    list-style-type: none;
}

#mobile-menu a:not(.button-link) {
    padding-top: 8px;
    padding-bottom: 8px;
    text-decoration: none;
    display: inline-block;
    color: inherit;
}


/* Mobile Elements */

#mobile-menu>li#triggerClose {
    font-size: 28px;
    cursor: pointer;
    border-bottom: none;
    text-align: right;
}

.mobile-search {
    position: relative;
    margin: .25em 0 1em;
}

.mobile-search .searchbox {
    width: 100%;
}

.button-link-list {
    display: flex;
    flex-wrap: wrap;
}

.button-link-list li {
    margin-inline-end: 0.6em;
    margin-block-end: 1em;
}


/*--------------------------------------------------------
	INDEX / MAIN BODY
--------------------------------------------------------*/

main {
    min-height: calc(100vh - 122px - 93px);
}


/*----------------Slideshow----------*/

.slideshow-wrap .container {
    width: 100%;
}

.slideshow-wrap img {
    width: 100%;
}

.slideshow-wrap [class*="col-"] {
    padding: 0;
}

.slideshow-wrap a {
    text-decoration: none;
}

.carousel-control {
    margin: auto 0px;
}

.carousel-indicators {
    bottom: 1em;
    right: 1em;
    left: unset;
    margin: unset;
    width: unset;
}

@keyframes echoBorder {
    0% {
        transform: scale(0.7);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    margin: 0 auto;
    margin-left: 8px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    background: var(--green);
    border: 1px solid white;
    border-radius: 20px;
    position: relative;
}

.carousel-indicators .active::before {
    content: '';
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    border-radius: 50%;
    border: 0.5px solid white;
    z-index: -1;
    animation-name: echoBorder;
    animation-duration: 1s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.carousel-control.left,
.carousel-control.right {
    display: none;
}

.carousel-caption {
    position: absolute;
    z-index: 100;
    background: rgba(54, 62, 71, .7);
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
    text-shadow: none;
    padding-top: 25px;
    padding-bottom: 25px;
    min-height: 100px;
}

.caption-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
    --timing-increment: .125s;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.caption-text,
.alt-text {
    transform: translateX(-110%);
}

.caption-text {
    font-size: 30px;
    font-weight: 300;
    font-family: 'Comfortaa', sans-serif;
    text-align: left;
    margin-bottom: 0;
    word-wrap: break-word;
    line-height: normal;
    transition: transform calc(var(--timing-increment)*3) ease-in-out;
    transition-delay: calc(var(--timing-increment)*.5);
}

.alt-text {
    font-size: 18px;
    font-weight: 400;
    word-wrap: break-word;
    line-height: normal;
    margin-top: .5em;
    margin-bottom: 0px;
    transition: transform calc(var(--timing-increment)*3) ease-in-out;
    transition-delay: calc(var(--timing-increment)*1.5);
}

.caption-wrapper a {
    margin-top: 15px;
    transform: translateX(150px);
    transition: transform calc(var(--timing-increment)*3) ease-in-out;
    transition-delay: calc(var(--timing-increment)*5);
    position: absolute;
    right: 0;
    align-self: flex-start;
}

.carousel-caption a:hover {
    color: #fff;
    text-decoration: none;
}

.active .caption-text,
.active .alt-text,
.active .caption-wrapper a {
    transform: translateX(0);
}

@media (max-width: 1200px) {
    .caption-wrapper a {
        margin-right: 15px;
    }
}

@media (max-width: 990px) {
    .carousel-caption {
        position: relative;
        background: rgba(54, 62, 71, 1);
    }
    .caption-text {
        font-size: 25px;
    }
    .alt-text {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .caption-text,
    .alt-text {
        transform: translateX(-110%);
        max-width: calc(100% - 150px);
    }
    .caption-wrapper a {
        max-width: 150px;
    }
}

@media (max-width: 767px) {
    .carousel-indicators {
        top: 0.5em;
    }
    .caption-wrapper a {
        position: relative;
        top: unset;
        transform: translateX(-115%);
    }
}

@media (max-width: 640px) {
    .carousel-caption {
        min-height: 250px;
    }
}

@media (max-width: 510px) {
    .carousel-caption {
        min-height: 240px;
    }
}

@media (max-width: 480px) {
    .carousel-caption {
        min-height: 350px;
    }
}


/*----------------End Slideshow------*/


/*---------- news_feed_pages function ----*/

div#news-button-container {
    margin: 10px 0px 0px 0px;
    text-align: right;
}

div#news-button-verbiage {
    margin-right: 10px;
    display: inline-block;
    color: #5DB2D7;
}

div#news-button-container:active {
    margin: 9px 0px 0px -1px;
    /* keeps buttons from jumping around when pressed*/
}

div.news-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #5DB2D7;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    margin: 0px;
}

div.nb-number:hover {
    opacity: 0.7;
    /*buttons move toward backgound color when hovered over*/
    cursor: pointer;
}

div.nb-number:active {
    /* make buttons look like they are being pressed when clicked*/
    opacity: 0.6;
    border-width: 2px 0px 0px 2px;
}

div.nb-selected {
    /* style the selected button */
    opacity: 0.5;
}

div#nb-ellipsis-left,
div#nb-ellipsis-right {
    background-color: transparent;
    color: #5DB2D7;
    border: 0px;
    margin: 0px;
    padding: 5px;
    font-weight: bold;
}


/*---------- END: news_feed_pages ----*/


/*----------------------------------Primary-Content*/


/*--------------------------------------------------------
	CSS STYLE FOR HOME PAGE CONTENT
--------------------------------------------------------*/

#homepage-main>h1:first-child {
    position: absolute;
    left: -666vw;
}

.btn-wrap {
    text-align: center;
    margin-top: 25px;
    grid-column: 1 / -1;
}

.btn-wrap a {
    color: var(--green);
    border-radius: 1px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: underline;
    text-align: center;
}


/* Upcoming Events */

#events-section-wrap {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.event-item {
    position: relative;
    max-width: 100%;
    width: calc((100% / 3) - 30px);
    padding: 24px 33px;
    min-height: 260px;
    color: white;
    background: rgba(33, 44, 56, .75);
    overflow: hidden;
}

.event-item::before,
.event-item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.event-item::after {
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -2;
}

.event-item:nth-of-type(1)::after {
    background-image: url(../images/events-0001.jpg);
}

.event-item:nth-of-type(2)::after {
    background-image: url(../images/events-0002.jpg);
}

.event-item:nth-of-type(3)::after {
    background-image: url(../images/events-0003.jpg);
}

.event-item::before {
    background-color: var(--blue);
    z-index: 0;
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
}

.event-item:hover::before,
.event-item:focus::before {
    transform: translate(0);
    transition: transform .125s ease-in-out;
}

.event-item+.btn-wrap {
    margin-top: 45px;
    flex-basis: 100%;
}

.event-item>* {
    position: relative;
}

.event-img-wrap img {
    max-width: 100%;
    margin: 0 auto;
}

.event-item time {
    font-size: 18px;
    display: block;
    margin-bottom: .125em;
}

.event-item time::before {
    content: '';
    background-image: url(../images/event-icon.png);
    display: inline-block;
    margin-right: .5ch;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
}

.event-item time::after {
    content: '';
    left: 50%;
    right: 0;
    position: absolute;
    top: calc(.5em + 1px);
    height: 2px;
    background: white;
    transition: max-width .125s ease-in-out;
    max-width: 0;
}

.appear~.row_wrapper .event-item time::after {
    max-width: 50%;
}

.event-item h3,
.news-item h3 {
    color: inherit;
    font-size: 24px;
    font-family: 'Poppins', sans-serif;
    /* color: #212c38; This will be inherited*/
    /* text-decoration: none; This is not something applied to h's*/
}

.event-item h3 a,
.news-item h3 a {
    /*
    font-size: 24px;
    font-family: 'Raleway', serif;
    font-weight: bold; 
    
    All of this is either inherited or is not applied to the element to begin with so it does not need to be overwritten
    */
    text-decoration: none;
}

.event-item h3 a {
    color: inherit;
}

.event-item h3 a::before {
    content: none;
}

.event-item h3 a::after {
    /* By expanding the dimensions of the link, we make the whole card clickable */
    content: '';
    position: absolute;
    top: -3em;
    left: -100%;
    right: -100%;
    bottom: -10em;
}

.event-item .blurb,
.news-item .blurb {
    line-height: 1.3;
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .event-item time::after {
        left: 65%;
    }
}

@media (max-width: 990px) {
    .event-item {
        width: calc((100% / 3) - 15px);
    }
    .event-item time::after {
        left: 0;
        top: 100%;
    }
    .appear~.row_wrapper .event-item time::after {
        max-width: 100%;
    }
    .event-item time {
        margin-bottom: .5em;
    }
}

@media (max-width: 767px) {
    .event-item {
        width: calc((100% / 2) - 15px);
        margin-bottom: 20px;
    }
    .event-item+.event-item {
        margin-bottom: 30px;
    }
    .event-item:nth-of-type(3) {
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {
    .event-item {
        flex-basis: 100%;
    }
}


/* Recent News */

#news-section-wrap {
    padding-bottom: 35px;
    padding-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px 30px;
}


/* #news-section-wrap h1 doesn't exist */

.news-item {
    display: flex;
    justify-content: space-between;
    margin-block-end: 30px;
}

.news-item>img:first-child {
    --gap: 15px;
    margin-block-end: var(--gap);
    margin-inline-end: var(--gap);
    border: 1px solid #c7cfd3;
    border-radius: 3px;
    align-self: flex-start;
    width: calc(50% - var(--gap));
}

#news-section-wrap .btn-wrap {
    margin-top: 0px;
}

@media (max-width: 990px) {
    .news-item {
        flex-direction: column;
    }
    .news-item>img:first-child {
        width: 100%;
    }
}

@media (max-width: 900px) {
    #news-section-wrap {
        display: block;
    }
}

@media (max-width: 990px) {
    .news-item {
        flex-direction: row;
    }
    .news-item>img:first-child {
        width: 250px;
    }
}

@media (max-width: 990px) {
    .news-item {
        flex-direction: column;
    }
    .news-item>img:first-child {
        width: 100%;
    }
}


/* Home banner */

#home-banner {
    min-height: 50vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#home-banner::before {
    background-image: url(../images/iStock-493585574.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    filter: grayscale(1) brightness(1.5);
    content: '';
    position: absolute;
    top: -160px;
    bottom: -160px;
    left: 0;
    right: 0;
    z-index: -1;
    transform: translateZ(-999px) scaleY(0.6);
    /* ^^this makes it scroll at a different speed from the rest of the page */
}

@media (max-width: 1440px) {
    #home-banner::before {
        bottom: -260px;
        top: -200px;
    }
}

@media (max-width: 1370px) {
    #home-banner::before {
        top: -150px;
        bottom: -400px;
        transform: translateZ(-999px) scaleY(.7);
    }
}

@media (max-width: 990px) {
    #home-banner::before {
        top: -100px;
        bottom: -500px;
        transform: translateZ(-999px) scaleY(.8);
    }
}

#home-banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: top left;
    background: var(--green);
    z-index: -1;
    opacity: 1;
    mix-blend-mode: multiply;
}

#home-banner .col-md-12 {
    text-align: center;
    color: white;
}

#home-banner .col-md-12>* {
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}

@media (min-width: 767px) {
    #home-banner .col-md-12 {
        font-size: 1em;
        font-size: clamp(1em, 3vh, 1.5em);
    }
    #home-banner .col-md-12>* {
        margin-bottom: 0;
    }
    #home-banner .col-md-12>*+* {
        margin-top: 10px;
        margin-top: clamp(10px, 2vh, 20px);
    }
}

#home-banner h2 {
    background: transparent;
    color: white;
    font-size: 3em;
    line-height: 1;
}

#mycanvas #home-banner * {
    color: initial;
    text-shadow: none;
}


/*--------------------------------------------------------
	Subpages
--------------------------------------------------------*/

#subpage {
    /* min-height: calc(100vh - 335px);*/
    padding-top: 30px;
    padding-bottom: 30px;
}

#subpage-main {
    /* min-height: calc(100vh - 122px - 99px); */
    font-size: 16px;
    padding-top: 20px;
}


/*--------------------------------------------------------
Join Page
--------------------------------------------------------*/


/* Removing styles from header on scroll for page */

#join-page #afc-logo,
#join-page .unscrolled .auxilary-navigation,
#join-page .auxilary-navigation {
    display: none;
}

#join-page header.unscrolled::before {
    box-shadow: 0 3px 14px -2px rgba(0, 0, 0, .2);
}

#join-page .unscrolled #afc-logo2,
#join-page .unscrolled #plane {
    transform: none;
}

#join-page .unscrolled #nav_menu>ul {
    margin-top: 0;
}

#join-page footer {
    display: none;
}


/* Sections */

#animation-button {
    position: fixed;
    top: calc(100vh - 3.5em);
    left: 1em;
    background: transparent;
    z-index: 2;
    display: none;
}

#scroll-hint {
    position: fixed;
    bottom: 1em;
    color: white;
    font-size: 1.3em;
    text-shadow: 2px 2px 2px #414042;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

@media (max-width: 500px) {
    #scroll-hint {
        font-size: 1.1em;
    }
}

.sky,
.ground {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}

.sky {
    z-index: 1;
    height: 60%;
    background: skyblue;
    background: radial-gradient(circle, rgba(62, 209, 207, 1) 0%, rgba(74, 137, 239, 1) 100%);
    overflow: hidden;
    background-size: 100% 200%;
    background-position-y: 200%;
}

.sky::after {
    /* a screen and a half tall white background that tapers to transparent at the top  */
    content: '';
    position: absolute;
    top: -250vh;
    bottom: 99%;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, white 50%, rgba(255, 255, 255, 0) 100%);
}


/* Rolling hills */

#hills {
    position: absolute;
    bottom: 0;
    bottom: -5px;
    /* Shift #hills down to compensate for the slight gap between the graphic and the bottom of .sky in Edge and FF  */
    color: var(--green);
    opacity: 0;
    --hill-time: 15s;
    z-index: 1;
}

@keyframes rollingHills {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

#hills path {
    opacity: .8;
    animation-name: rollingHills;
    animation-iteration-count: infinite;
    animation-duration: var(--hill-time);
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

#hills path:nth-of-type(2) {
    animation-delay: calc((var(--hill-time) / 2) * -1);
}

#hills path:nth-of-type(3) {
    animation-delay: calc((var(--hill-time) / 2) * -2);
}

#hills path:nth-of-type(4) {
    animation-delay: calc((var(--hill-time) / 2) * -3);
}

#hills path:nth-of-type(5) {
    animation-delay: calc((var(--hill-time) / 2) * -4);
}

#hills path:nth-of-type(6) {
    animation-delay: calc((var(--hill-time) / 2) * -5);
}

#hills path:nth-of-type(7) {
    animation-delay: calc((var(--hill-time) / 2) * -6);
}

#hills path:nth-of-type(8) {
    animation-delay: calc((var(--hill-time) / 2) * -7);
}

.runway-wrapper {
    perspective: 104px;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.ground {
    bottom: 0;
    z-index: -2;
    background: var(--green);
}


/* Runway */

#runway {
    transform: rotateX(55deg);
    /* transform-style: preserve-3d; */
    transform-origin: center;
    height: 66vh;
}

@media (max-width: 600px) {
    /* Width of my Kindle Fire  */
    #runway {
        height: 58vh;
    }
}

@media (max-width: 360px) {
    /* Width of my Moto G2 Play  */
    #runway {
        height: 50vh;
    }
}

@keyframes runwayScroll {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}


/* Join page content */

body#join-page {
    height: 100vh;
    overflow: hidden;
}

#join-page main {
    position: relative;
    z-index: 1;
    font-size: 1.4em;
    margin: auto;
    height: calc(100vh - 62px);
    color: white;
    overflow: hidden auto;
    scroll-snap-type: y mandatory;
    padding: 0;
    text-shadow: 0 0 2px var(--blue);
}

.join-main .row {
    height: inherit;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75ch;
    max-width: 100%;
    margin: auto;
}

.join-main .col-md-12 {
    position: relative;
    top: -15vh;
}

#join-page h1 {
    position: absolute;
    left: -666vw;
}

#join-page h2 {
    color: inherit;
    font-size: 40px;
    margin-bottom: .25em;
}

#join-page .section-1 h2 {
    font-size: 50px;
}

#join-page p {
    line-height: 1.3;
}

@media (min-width: 500px) {
    #join-page p {
        margin-bottom: .5em;
    }
}

@media (max-width: 1350px) {
    .join-main .col-md-12 {
        top: -1em;
    }
}

@media (max-width: 900px) {
    /* #join-page main {
        font-size: 1.2em;
    } */
    #join-page h2 {
        font-size: 35px;
    }
    #join-page .section-1 h2 {
        font-size: 40px;
    }
}

@media (max-width: 600px) {
    #join-page h2,
    #join-page .section-1 h2 {
        font-size: 30px;
    }
}

@media (max-width: 500px) {
    #join-page main {
        font-size: 1.1em;
    }
    #join-page h2,
    #join-page .section-1 h2 {
        font-size: 25px;
    }
    #join-page h2 {
        margin-bottom: 0;
    }
}


/* Scene 1 animations*/

.scene-1 #scroll-hint {
    opacity: 1;
    transition-delay: .75s;
}

[href="#runway-use"] {
    /* Set speed of runway track  */
    animation: .9s linear infinite running runwayScroll;
    animation-fill-mode: both;
}

@supports (-moz-appearance:meterbar) {
    /* Turn off runway animation in Firefox because I can't figure out why it seems to skip a frame when animating */
    [href="#runway-use"] {
        animation: none;
    }
    /* Shift runway up by decreasing the perspective amount to compensate for gap between track and top of ground area */
    .runway-wrapper {
        perspective: 155px;
    }
}


/* Scene 2 animations*/

.scene-2 {
    --time: 2s;
    --delay: calc(var(--time) / 3);
}

.scene-2 #scroll-hint {
    opacity: 0;
}

#hills {
    transition: opacity calc(var(--time) * 2.5) ease-in-out calc(var(--time) * .5);
}

.scene-2 #hills {
    /* Fade hills into view  */
    opacity: 1;
}

.scene-2 .sky {
    height: 75%;
    transition: height calc(var(--time) * 1);
    transition-timing-function: ease-in-out;
    transition-timing-function: cubic-bezier(.5, 0, .6, 1);
}

.scene-2 .runway-wrapper {
    transition-property: transform, perspective;
    transition-timing-function: cubic-bezier(.5, 0, .6, 1);
    /* transition-timing-function: ease-in, ease-in; */
    transition-duration: calc(var(--time) * .75), calc(var(--time) * .75);
    transition-delay: none, calc(var(--time) * .5);
    transform: translateY(100%);
    perspective: 500px;
}


/* 2nd to last scene animations (switch from scene-3 to [class^="scene-"]:nth-last-of-type(2) */

.sky::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, white 100%);
    background-position-y: -50vh;
    background-repeat: no-repeat;
    z-index: 1;
}

.scene-3 .sky::before {
    background-position-y: 0;
    transition: background-position-y calc(var(--time) * 1.5);
    transition-timing-function: ease-in-out;
}

.scene-3 .sky,
.scene-3 .ground {
    filter: contrast(.7);
    transition: filter calc(var(--time) * 1.5) ease-in-out;
    /* transition-delay: calc(var(--time) * 1.5); */
}


/* Final scene (change to [class^="scene-"]:last-of-type*/

.scene-4 .sky,
.scene-4 .ground {
    filter: contrast(1);
    transition: filter calc(var(--time) * 1) ease-in-out calc(var(--time) * .5);
}

.scene-4 .sky {
    /* Grow .sky the full height of the screen and then pan up to show it's ::after  */
    height: 100%;
    transform: translateY(290vh);
    /* Filter transition property is carried over from .sky/.ground style above */
    transition-property: filter, height, transform;
    transition-timing-function: ease-in-out, ease-in, ease-out;
    transition-delay: calc(var(--time) * 1), 0s, calc(var(--time) * 1);
    overflow: visible;
}

.scene-4 #hills {
    /* Hide hills  */
    opacity: 0;
    transition: opacity calc(var(--time) * 1) ease-out;
}

.ground::after {
    /* Cover ground with radial-gradient from sky  */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(circle, rgba(62, 209, 207, 1) 0%, rgba(74, 137, 239, 1) 100%);
    opacity: 0;
    background-size: 100% 200%;
}

.scene-4 .ground::after {
    opacity: 1;
    transition: opacity calc(var(--time) * .5) ease-in-out calc(var(--time) * 1);
}


/* Go above the clouds, show the sun  */

@media (prefers-reduced-motion: reduce) {
    #join-page main {
        /* Don't scrolljack the page  */
        scroll-snap-type: none;
    }
    /* [href="#runway-use"] {*/
    /* Don't animate the runway  */
    /* animation: none;
    }  */
    .runway-wrapper {
        /* This element causes a lot of flashing on the screen. Remove it entirely  */
        display: none;
    }
    .sky,
    .scene-4 .sky {
        /* Set sky's height to be the dimensions that it animates to from the get-go so it doesn't change  */
        height: 75%;
    }
    .scene-3 .sky::before {
        /* Don't change the position of the background gradiant and don't create clouds with this element */
        content: none;
        transition: none;
    }
    .scene-3 .sky,
    .scene-3 .ground,
    .scene-4 .sky,
    .scene-4 .ground {
        /* Don't make the sky and ground look like it's getting cloudy */
        filter: none;
        transition: none;
    }
    .scene-4 .sky {
        /* Don't tranform the Y position of .sky */
        transform: none;
    }
    #hills,
    .scene-4 #hills {
        /* Don't hide the hills  */
        opacity: 1;
        transition: none;
    }
    .ground::after {
        /* Don't use the ::after element is used in the last scene to cover the screen  */
        content: none;
    }
}


/*--------------------------------------------------------
    MMS pages
--------------------------------------------------------*/

#mms-main {
    min-height: calc(100vh - 62px - 93px);
    padding: 50px 0;
}

#mms-main a::before {
    content: none;
}


/* #mheader_5_wrapper h1 {
    font-size: 44px;
} */

#mheader_5_wrapper body,
#mheader_5_wrapper table,
#mheader_5_wrapper td,
#mheader_5_wrapper th,
#mheader_5_wrapper input,
#mheader_5_wrapper div,
#mheader_5_wrapper font,
#mheader_5_wrapper ul li,
#mheader_5_wrapper ul li a,
#mheader_5_wrapper small {
    font-size: 16px !important;
    font-family: 'Poppins', sans-serif;
}

#mheader_5_wrapper h1,
#mheader_5_wrapper h2,
#mheader_5_wrapper h3,
#mheader_5_wrapper h4 {
    text-align: left;
}

#mheader_5_wrapper #results-container .pt-name h3 {
    font-size: 22px;
}

#mheader_5_wrapper #results-container .info-label a {
    font-weight: normal;
}

#mheader_5_wrapper h3.event-title {
    font-size: 20px;
}

#mheader_5_wrapper .event-date-wrap {
    background: #fff;
    border: 2px solid var(--blue);
    text-align: center;
}

#mheader_5_wrapper ul.jqueryFileTree {
    margin-top: 10px;
}

#mheader_5_wrapper UL.jqueryFileTree a {
    font-size: 16px;
    padding: 3px 2px;
}

#mheader_5_wrapper #booth_editor h3 {
    font-size: 24px;
}

#mheader_5_wrapper table td font {
    font-size: 18px;
}

#mheader_5_wrapper table ul li a {
    font-size: 16px;
}

#mheader_5_wrapper #mediaplayer ul li span.title {
    font-size: 17px !important;
    height: auto !important;
}

#mheader_5_wrapper #mediaplayer ul li span.description {
    font-size: 13px;
}

#mheader_5_wrapper table blockquote small {
    font-size: 16px;
}

#mheader_5_wrapper #form-wrapper .panel .panel-body p a {
    font-size: 18px;
}


/*--------------------------------------------------------
    Grid Pages
--------------------------------------------------------*/

#mycanvas span.fa {
    font-family: FontAwesome;
    color: inherit;
    font-size: 14px;
}

#gm-canvas .gm-editing {
    /* Overwrite any styles meant to change a column on the front-end to display: anything-else; */
    display: block;
}


/*--------------------------------------------------------
	FOOTER
--------------------------------------------------------*/

#main-footer {
    background: var(--blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 28px;
    padding: 1.6em 0px;
}

#main-footer p {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

#main-footer a {
    text-decoration: underline;
    color: var(--blue);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

#main-footer .footer-credit-wrap,
#main-footer .footer-credit-wrap p {
    color: #bacace;
}

#main-footer .footer-credit-wrap p {
    padding-top: 10px;
}

#main-footer .footer-credit-wrap span.span-credit2 {
    border-right: 0px !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
}

#main-footer .text-left span,
.text-left a {
    color: #fff;
}

#main-footer .text-left h3 {
    color: #fff;
    font-family: 'Raleway', serif;
    font-weight: bold;
    padding-bottom: 20px;
}

.footer-text-wrap p,
.footer-text-wrap span {
    font-size: 16px !important;
    font-family: 'Poppins', sans-serif;
    line-height: 24px;
}

.footer-border-wrap {
    margin-top: 10px;
}

.footer-border-wrap hr {
    border-top: 1px solid #59677a;
}


/* Footer Social - Mobile Menu Wrap */

.social-menu-inside-wrap {
    top: 8px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.social-menu-inside-wrap ul {
    float: left;
    margin: 0;
    text-align: right;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.social-menu-inside-wrap ul>li {
    float: left;
    position: relative;
    display: block;
}

.social-menu-inside-wrap svg {
    width: 33px;
    height: 33px;
    margin-left: 8px;
}

@media (min-width: 768px) and (max-width: 990px) {
    .social-menu-inside-wrap svg {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 767px) {
    #main-footer .footer-credit-wrap span {
        border-right: 0px;
        padding-right: 0px;
        margin-right: 0px;
    }
    #main-footer .footer-credit-wrap span.span-credit1,
    #main-footer .footer-credit-wrap span.span-credit2 {
        display: block;
    }
    .footer-content-wrapper p {
        text-align: left;
    }
    .footer-credit-wrap,
    .footer-social-wrap {
        text-align: center;
    }
}


/*--------------------------------------------------------
	UTILITIES
--------------------------------------------------------*/


/*Target just IE*/

@media screen and (min-width:0\0) {
    header {
        position: fixed;
        width: 100%;
    }
    main {
        margin-top: 183px;
    }
    .slideshow-wrap {
        margin-top: 170px;
    }
}