body {

    /* TODO: Remove margin-top: 50px; */ /* 50px is the height of the navbar - change this if the navbarn height changes */
    color: #526066;
}

h2, h3 {
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
}

p {
    line-height: 1.6em;
}

.indexBody {
    background-color: rgb(4, 0, 27);
}

.upcomingEvents {
    background-color: rgb(255, 235, 59);
    text-align: center;
}

.loaderContainer {
    text-align: center;
}

.loader {
    display: inline-block;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid black; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.scrollCards {
    height: 380px;
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    alignment: center;
    text-align: center;
    background-color: rgb(255, 235, 59);
}

.newsletterHeader {
    margin-top: 3%;
    color: black;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

.newsletterBody {
    background-color: rgb(255, 235, 59);
}

.newsletterContentBody {
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 3%;
}

.newsletterCaptionText {
    color: black;
    text-align: center;
    font-size: 125%;
    font-family: 'Times New Roman';
}

.newsletterBodyImg {
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.eventsHeader {
    display: table-cell;
    vertical-align: middle;
}

.upcomingEvents h1 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

.zoomLink .tooltiptext {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    background-color: black;
    color: #fff;
    width: auto;
    font-size: 16px;
}

.zoomLink:hover .tooltiptext {
    visibility: visible;
}

.eventCard {
    display: inline-block;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 350px;
    width: 250px;
    margin-left: 15px;
    margin-right: 20px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
}

.eventCard:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.eventCard .eventImageContainer {
    margin-top: 0px;
    width: 250px;
    height: 250px;
    background-image: radial-gradient(circle at center center, rgb(172,147,25),rgb(65,65,50));
    display: flex;
    justify-content: center;
    align-items: center;
}

.eventCard img {
    margin-top: 0px;
    max-width: 250px;
    max-height: 250px;
}

.eventCard h1 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 150%;
}

.cardBody {
    position: relative;
    top: -20px;
    display: inline-block;
    cursor: pointer;
}

.cardHeader {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    width: 250px;
    overflow-y: hidden;
}

.cardLabel {
    margin-top: 7px;
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 150%;
}

.cardDate {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 150%;
}

.cardInfo {
    position: relative;
    word-break: break-word;
    display: inline-block;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0px;
    left: 0px;
    height: 350px;
    width: 250px;
}

.cardInfo h1 {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 150%;
}

.cardInfo p {
    width: 230px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    word-break: break-word;
    color: black;
    white-space: normal;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 100%;
}

.bottomBody {
    background-color: rgb(255, 255, 255);
}

.bottomBody img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    width: 250px;
}

.bottomBody iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.bottomBody h1 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

.bottomBody h3 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 200%;
}

.bottomBody p {
    text-align: left;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 130%;
}

/* TODO: This should be renamed to yellow body because it is used in many places that aren't events */
.eventsBody {
    background-color: rgb(255, 235, 59);

}

.blueBody {
    background-color: rgb(215, 237, 255);
}

.blueBody h1 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

.blueBody p {
    margin-left: 10%;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 100%;

}

.gallery-header {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

/*
 * -- Layout Styles --
 */
.l-content {
    margin: 0 auto;
    background-color: rgb(255, 235, 59);
    padding-top: 1%;
    padding-bottom: 2%;
}

.l-content img {
    display: block;
    margin: auto;
    height: 200px;
    width: 250px;
}

.l-content p {
    margin-left: 30%;
    margin-right: 27%;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 150%;
}

.l-content h1 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 250%;
}

.l-content h3 {
    text-align: center;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 200%;
}

.l-box {
    padding: 0.5em 2em; /*2em*/
    font-family: 'Roboto', sans-serif; /*modifies the paragraph text*/
    font-size: 115%;
}

.l-box h3 {
    font-family: 'Roboto Condensed', sans-serif;
}

.information {
    max-width: 980px;
    margin: 0 auto;
}

.information-head {
    color: black;
    font-weight: 500;
    font-size: 200%;
}

/*
 * -- BANNER --
 * The top banner with the headings. By using a combination
 * of `display: table;` and `display: table-cell;`, we can
 * vertically center the text.
 */

.banner {
    /*background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;*/
    /* TODO: It would be ideal to figure out a way to remove the image path from the css file */
    background: transparent url('/static/img/index/adventureAwaits14.jpg') 0 0 no-repeat fixed;
    text-align: center;
    /*max-width: 100%;
    height: auto;*/
    background-size: 100% auto;
    /*second number dictates how much dark blue space above "accept your mission"
       filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/adventureAwaits10.jpg', sizingMethod='scale');

       /*height: 200px;*/
    height: 200px;
    width: 100%;
    /*margin-top: 3em;*/
    /*margin-bottom: 3em;*/
    display: table;
    margin-bottom: -7%;
}

.footer {
    background: #111;
    /*color: #888;*/
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 200%;
    color: rgb(255, 255, 255);
    text-align: center;
}

.footer a {
    color: #ddd;
}

.cia-tables {
    max-width: 1500px; /* 1500px; */ /*980px;*/
    margin: 0 auto;
}

.cia-table {
    border: 1px solid #ddd;
    margin: 0 0.5em 2em;
    /*padding: 0 0 3em;*/
}

.swag .cia-table {
    /*height: 480px;*/
}

.bottomBody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.cia-table-header {
    /* height: 420px; */
    height: 420px;
    /* width: 100%; */
    width: 100%;
    background: #111; /*default color*/
    color: #fff;
    text-align: center;
}

.cia-table-header h2 {
    margin: 0;
    padding-top: 2em;
    font-size: 1em;
    font-weight: normal;

}

.cia-table-description {
    font-size: 2.2em; /*6em*/
    margin: 0.2em 0 0;
    font-weight: 100;
}

.cia-table-description span {
    display: block;
    text-transform: uppercase;
    font-size: 0.4em; /*0.2em;*/
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    *color: #fff;
}

.cia-officer-fun-fact {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 0;
    margin-bottom: 1em;
    font-weight: 100;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

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

.custom-checkbox ul {
    list-style: none;
}

.custom-form {
    display: inline-block;
}

.custom-control {
    text-align: left;
}

/*
 * -- TABLET MEDIA QUERIES --
 * On tablets, we want to slightly adjust the size of the banner
 * text and add some vertical space between the various pricing tables
 */
@media (min-width: 767px) {

    .banner-head {
        font-size: 4em;
    }

    .cia-table {
        margin-bottom: 0;
    }

}

/*
 * -- PHONE MEDIA QUERIES --
 * On phones, we want to reduce the height and font-size of the banner further
 */
@media (min-width: 480px) {
    /* TODO: This isn't doing what you want. This is what is making the banner appear nicely on desktop */
    .banner {
        /*height: 400px or 600px;*/
        height: 600px;
    }

    .banner-head {
        font-size: 2em;
    }
}

@media (max-width: 47.999em) {

    .custom-toggle {
        display: block;
    }

}