*:not(.btn) {
    transition: background 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out;
}

*:focus {
    outline: 0px !important;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.black-text {
    color: black;
}

.default-font {
    font-family: Raleway, "Helvetica Neue", Helvetica, sans-serif;
}

.title-font {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
}

.center {
    text-align: center;
}

.float-right {
    float: right;
}

.zero-vertical-margin {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.valign-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}

.full-width {
    width: 100%;
}

header,
section {
    mix-blend-mode: normal;
    height: 100vh;
    width: 100vw;
    position: relative;
    padding-top: 80px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.5) 0%,
        rgba(0, 14, 255, 0.5) 100%
    );
    opacity: 1;
    color: white;
}

@media (max-height: 500px) {
    header,
    section {
        padding-top: 60px;
    }
}

ul.no-bullets {
    list-style-type: none;
}

.title {
    font-family: "Chivo", sans-serif;
    color: white;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25em;
}

h1.title {
    font-size: 5em;
}

h2.title {
    margin-top: 5%;
    font-size: 3em;
    margin-bottom: -5%;
}

.info-text {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    margin: 5%;
    color: white;
    text-align: center;
}

@media (max-width: 750px) {
    h1.title {
        font-size: 2.5em;
    }

    h2.title {
        font-size: 2em;
        margin-top: 10%;
    }
    .info-text {
        font-size: 25px;
    }
}

@media (max-width: 450px) {
    h2.title {
        margin-bottom: -15%;
    }
    .info-text {
        font-size: 20px;
    }
}

@media (max-height: 400px) {
    h1.title,
    h2.title {
        margin-top: 0;
    }

    .info-text {
        margin-top: 0;
        margin-bottom: 3vh;
    }
}

@font-face {
    font-family: neuropol;
    src: url("../fonts/neuropol.ttf");
}

.learn-more-button {
    font-size: 45px;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    height: 15vh;
    width: 35vw;
    margin: auto;
    margin-top: 30px;
    display: table;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid #ffffff;
    color: #ffffff;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.multiple-learn-more-button {
    margin: auto;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.multiple-learn-more-button .learn-more-button {
    margin: 0 1vw;
    position: relative;
}

@media (max-width: 1000px) {
    .learn-more-button {
        font-size: 30px;
        width: fit-content;
        height: 10vh;
        padding: 0 10px;
    }
}

@media (max-width: 450px) {
    .learn-more-button {
        width: 70vw;
        font-size: 18px;
        height: auto;
        padding: 20px;
    }

    .multiple-learn-more-button {
        display: block;
    }
}

@media (max-height: 350px) {
    .learn-more-button {
        bottom: 10px;
    }
}

.learn-more-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.learn-more-button:active,
a:focus > .learn-more-button {
    background-color: rgba(0, 0, 0, 0.65);
}

.learn-more-button > p {
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}

a.regular {
    /*color: aqua;*/
    font-weight: bold;
    color: #a0c1d8;
}

a.regular:hover {
    /*color: aqua;*/
    color: #a0c1d8;
}

a.regular:focus {
    /*color: aqua;*/
    color: #a0c1d8;
}

a.covert {
    color: white;
}

a.covert:hover {
    text-decoration: none;
    color: white;
}

a.small-info-btn {
    font-size: 25px;
    line-height: 25px;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    height: 55px;
    margin: 10px;
    margin-top: 30px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px;
    transition: border 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    -webkit-transition: border 0.5s ease, background-color 0.5s ease,
        color 0.5s ease;
}

@media (max-width: 525px) {
    a.small-info-btn {
        margin: 0;
        font-size: 12px;
        line-height: 25px;
        padding: 0;
        height: 30px;
    }
}

a.small-info-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 0, 0, 0);
    cursor: pointer;
}

#player {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* footer */
footer {
    position: fixed;
    height: 30px;
    bottom: 0;
    width: 100%;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* landing */

#landing-tile {
    /*background: url('/img/media/direc/landing-background.jpg') no-repeat center center;*/
    background: url("/img/media/direc/landing-background.jpg") no-repeat center
        center; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
        url("/img/media/direc/landing-background.jpg") no-repeat center center; /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
        url("/img/media/direc/landing-background.jpg") no-repeat center center; /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
        url("/img/media/direc/landing-background.jpg") no-repeat center center; /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
        url("/img/media/direc/landing-background.jpg") no-repeat center center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 1;
}

h1.landingtext,
h2.landingtext {
    font-family: neuropol, Montserrat, "Helvetica Neue", sans-serif;
    text-align: center;
    display: none;
}

h1.landingtext {
    font-size: 75px;
}

h2.landingtext {
    font-size: 50px;
}

div.landingtext {
    padding-top: 10%;
}

@media (max-width: 750px), (max-height: 500px) {
    h1.landingtext {
        font-size: 40px;
    }

    h2.landingtext {
        font-size: 25px;
    }

    div.landingtext {
        padding-top: 5%;
    }
}

/* contact */

#contact-tile {
    background: url("/img/media/direc/contact-background.jpg") no-repeat center
        center; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(255, 255, 255, 0.25)
        ),
        url("/img/media/direc/contact-background.jpg") no-repeat center center; /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(255, 255, 255, 0.25)
        ),
        url("/img/media/direc/contact-background.jpg") no-repeat center center; /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(255, 255, 255, 0.25)
        ),
        url("/img/media/direc/contact-background.jpg") no-repeat center center; /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.25)),
        url("/img/media/direc/contact-background.jpg") no-repeat center center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 1;
}

#contact-tile .container-fluid {
    width: 100%;
}

#contact-tile-container {
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 25px;
    width: 90%;
    padding: 30px 30px 30px 0px;
    margin-top: 1vh;
}

#contact-tile li a {
    color: white;
    font-size: 2em;
    font-family: Raleway, "Helvetica Neue", Helvetica, sans-serif;
}

@media (max-height: 530px), (max-width: 500px) {
    #contact-tile li a {
        font-size: 1.5em;
    }
}

@media (max-height: 320px), (max-width: 320px) {
    #contact-tile li a {
        font-size: 1em;
    }
}

/* about */

#about-tile {
    background: url("/img/media/direc/About_Backgroun.png") no-repeat center
        center;
    background: -webkit-linear-gradient(
            rgba(0, 0, 0, 0.4) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/About_Backgroun.png") no-repeat center center; /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
            rgba(0, 0, 0, 0.4) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/About_Backgroun.png") no-repeat center center; /* For Opera 11.6 to 12.0 */
    background: -moz-linear-gradient(
            rgba(0, 0, 0, 0.4) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/About_Backgroun.png") no-repeat center center; /* For Firefox 3.6 to 15 */
    background: linear-gradient(
            rgba(0, 0, 0, 0.4) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/About_Backgroun.png") no-repeat center center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#about-tile-container {
    background-color: rgba(65, 105, 225, 0.6);
    margin: 0 auto;
    border-radius: 25px;
    width: 90%;
    padding: 2%;
    margin-top: 50px;
    text-align: center;
    vertical-align: middle;
}

#about-tile-container > h2 {
    font-size: 40px;
    font-family: Raleway, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

#about-tile-container > p {
    font-size: 20px;
    font-family: Raleway, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 100;
    text-transform: capitalize;
}

@media (max-height: 800px) {
    #about-tile-container {
        display: none;
    }
}

@media (max-width: 600px) {
    #about-tile-container {
        display: none;
    }
}

/*
#about-tile-button {
  background: rgba(255, 122, 122, 0.8);
}

#about-tile-button:hover {
  background: rgba(255, 80, 80, 0.9);
}
*/

/* outreach/sponsorship */

#outreach-tile {
    background: url("/img/media/direc/outreach-background.jpg") no-repeat center
        center; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(
            rgba(0, 0, 0, 0.6) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/outreach-background.jpg") no-repeat center center; /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
            rgba(0, 0, 0, 0.6) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/outreach-background.jpg") no-repeat center center; /* For Opera 11.6 to 12.0 */
    background: -moz-linear-gradient(
            rgba(0, 0, 0, 0.6) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/outreach-background.jpg") no-repeat center center; /* For Firefox 3.6 to 15 */
    background: linear-gradient(
            rgba(0, 0, 0, 0.6) 20%,
            rgba(255, 255, 255, 0.3)
        ),
        url("/img/media/direc/outreach-background.jpg") no-repeat center center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#outreach-tile > div.container-fluid > div.sp-logos {
    display: block;
    margin: 0 auto;
    text-align: center;
}

#outreach-tile > div.container-fluid > div.sp-logos > div.sp-logo {
    max-width: 45%;
    background: rgba(255, 255, 255, 0.7);
    /*border-radius: 100px;*/
    display: inline-block;
    margin: 10px;
}

#outreach-tile
    > div.container-fluid
    > div.sp-logos
    > div.sp-logo
    > a.sp-logo
    > img.sp-logo {
    max-width: 100%;
    max-height: 10vh;
}

@media (max-height: 500px) {
    #outreach-tile > div.container-fluid > div.sp-logos > div.sp-logo {
        margin: 5px;
        max-width: 30%;
    }

    #outreach-tile
        > div.container-fluid
        > div.sp-logos
        > div.sp-logo
        > a.sp-logo
        > img.sp-logo {
        max-width: 100%;
        max-height: 15vh;
    }
}

/* wiki */

#wiki-tile {
    background: url("/img/media/direc/wiki-background.jpg") no-repeat center
        center; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.11)),
        url("/img/media/direc/wiki-background.jpg") no-repeat center center; /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.11)),
        url("/img/media/direc/wiki-background.jpg") no-repeat center center; /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.11)),
        url("/img/media/direc/wiki-background.jpg") no-repeat center center; /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.11)),
        url("/img/media/direc/wiki-background.jpg") no-repeat center center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* photos */

#photos-tile {
    background: url("/img/media/direc/Photos_Background_New2.jpg") no-repeat
        center center; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),
        url("/img/media/direc/Photos_Background_New2.jpg") no-repeat center
            center; /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),
        url("/img/media/direc/Photos_Background_New2.jpg") no-repeat center
            center; /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),
        url("/img/media/direc/Photos_Background_New2.jpg") no-repeat center
            center; /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),
        url("/img/media/direc/Photos_Background_New2.jpg") no-repeat center
            center; /* Standard syntax (must be last) */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}