:root {
    --banner-width: 3;
}

@keyframes fade-in {
    from {
        filter: opacity(0%) brightness(20%);
    }
    to {
        filter: opacity(100%) brightness(100%);
    }
}

@keyframes fade-out {
    from {
        filter: opacity(100%);
    }
    to {
        filter: opacity(0%);
    }
}

#body {
    background-color: var(--color-background);
    /* margin-top: 28vh; */

    z-index: -1;
}

#member-image,
#member-link {
    position: fixed;
    top: 0.5vw;
    right: 0.5vw;
    z-index: -2;

    width: 3vw;
    height: 3vw;
}

#member-link {
    z-index: 1;
}

/*--------------
|               |
|    Landing    |
|               |
|---------------*/
#landing-banner {
    width: 100vw;
    text-align: center;

    overflow: hidden;
    position: relative;
}

#landing-banner-image-wrapper {
    width: 100vw;
    position: relative;
    top: 0;
    left: 0;
}

#landing-banner-image {
    width: 100vw;
    position: relative;
    filter: opacity(100%);
}

#landing-banner-image-top {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    filter: opacity(0%);
}

#landing-banner-gradient {
    position: absolute;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(66, 87, 125, 0.3)),
        color-stop(95%, #1e3155)
    );
    background-image: -webkit-linear-gradient(
        top,
        rgba(66, 87, 125, 0.3),
        #1e3155 95%
    );
    background-image: -moz-linear-gradient(
        top,
        rgba(66, 87, 125, 0.3),
        #1e3155 95%
    );
    background-image: -o-linear-gradient(
        top,
        rgba(66, 87, 125, 0.3),
        #1e3155 95%
    );
    background-image: linear-gradient(
        to bottom,
        rgba(66, 87, 125, 0.3),
        #1e3155 95%
    );
    padding: 0;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
}

#landing-banner-title-text {
    color: var(--color-light);
    font-size: 8vw;
    margin-bottom: 0;
    font-weight: 500;

    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    position: absolute;
}

#landing-banner-title-text,
#landing-banner-secondary-text {
    color: var(--color-light);
    font-size: 7vw;
}

#landing-banner-secondary-text {
    font-size: 4vw;
    font-weight: 300;
    user-select: none;

    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    position: absolute;
}

#landing-transition {
    width: 100vw;
    height: 5vw;
    -webkit-transform: translateY(-1%);
    -moz-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    -o-transform: translateY(-1%);
    transform: translateY(-1%);
    -webkit-filter: drop-shadow(0, 10vh, 1px);
    filter: drop-shadow(0, 10vh, 1px);
    background-color: var(--color-primary);
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 5%, 25% 100%, 0 5%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 5%, 25% 100%, 0 5%, 0 0);

    transform: translateY(-5%);
}

.fade-in {
    animation-name: fade-in;
    animation-duration: 1.5s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: 1.5s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.landing-text-shift {
    margin-left: 0.5vw;
}

@media screen and (max-width: 800px) {
    #landing-banner-image {
        width: 150vw;
        margin-left: -25vw;
    }

    #landing-banner-image-top {
        width: 150vw;
        left: -25vw;
    }

    #landing-banner-title-text {
        font-size: 12vw;
    }
    #landing-banner-secondary-text {
        font-size: 8vw;
    }
    .landing-text-shift {
        margin-left: 1vw;
    }
    #landing-transition {
        height: 10vw;
    }
}

/*--------------
|               |
|   Team Info   |
|               |
|---------------*/

#team-info {
    text-align: center;
}

#team-background-text {
    margin: 10vw auto;
    font-size: 3.8vw;
    color: var(--color-header);
}

#team-statistics-wrapper {
    width: 85vw;
    margin: 0 auto;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: horizontal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#team-statistics-wrapper:last-child {
    margin-right: 2vw;
}

.team-statistic {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.team-stat-value {
    margin: 0;

    font-size: 6vw;
    color: var(--color-primary);
}

.team-stat-label {
    margin: 0;

    font-size: 2.2vw;
    color: var(--color-content);
}

#about-buttons-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: horizontal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -moz-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    margin: 10vw auto;
    width: 100vw;
}

@media screen and (max-width: 800px) {
    #team-background-text {
        font-size: 6vw;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 15vw;
    }

    #team-statistics-wrapper {
        width: 10vw;
        flex-wrap: wrap;
    }

    #team-statistics-wrapper:last-child {
        margin-right: 0vw;
    }

    .team-statistic {
        margin-bottom: 8vw;
    }

    .team-stat-value {
        font-size: 10vw;
    }

    .team-stat-label {
        font-size: 5vw;
    }

    #about-buttons-wrapper {
        margin-top: 0vw;
        margin-bottom: 15vw;
    }
}

/*--------------
|               |
|    Outreach   |
|               |
|---------------*/

#outreach-transition {
    width: 100vw;
    height: 4vw;
    -webkit-transform: translateY(1%);
    -moz-transform: translateY(1%);
    -ms-transform: translateY(1%);
    -o-transform: translateY(1%);
    transform: translateY(1%);
    background-color: var(--color-primary);
    -webkit-clip-path: polygon(76% 0, 0 100%, 100% 100%);
    clip-path: polygon(76% 0, 0 100%, 100% 100%);
}

#outreach {
    width: 100vw;
    height: 74.8vw;

    background-image: url("/new/img/media/index/outreach-banner.png");
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

#outreach-gradient {
    width: 100%;
    height: -webkit-calc(100% - 17.35vw);
    height: -moz-calc(100% - 17.35vw);
    height: calc(100% - 17.35vw);

    background: linear-gradient(
        180deg,
        #1e3155 2.6%,
        rgba(30, 49, 85, 0.2) 76.56%,
        rgba(30, 49, 85, 0.8) 92.71%,
        rgba(30, 49, 85, 1) 100%
    );
    padding-top: 17.4vw;
}

#outreach-info {
    width: 35vw;
    margin-left: auto;
    margin-right: 6vw;
}

#outreach-info,
#media-info {
    font-family: "Roboto", sans-serif;
    background-color: rgba(20, 20, 20, 0.5);
    text-align: center;
    padding: 3vw;
    margin-bottom: 17.4vw;
}

#outreach-title,
#media-title {
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    font-size: 4.4vw;
}

#outreach-description,
#media-description {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 2.2vw;
    line-height: 3vw;
    color: var(--color-light);
    margin: 5vh 0;
}

#outreach-media-spacer {
    width: 100vw;
    height: 0.1vw;
    background-color: var(--color-primary);
}

/*--------------
|               |
|     Media     |
|               |
|---------------*/

#media {
    width: 100vw;
    height: 74.8vw;

    background-image: url("/new/img/media/index/media-banner.png");

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#media-gradient {
    width: 100%;
    height: -webkit-calc(100% - 17.4vw);
    height: -moz-calc(100% - 17.4vw);
    height: calc(100% - 17.4vw);

    background: linear-gradient(
        180deg,
        rgba(30, 49, 85, 1) 1.56%,
        rgba(30, 49, 85, 0.37) 8.85%,
        rgba(30, 49, 85, 0.2) 23.44%,
        rgba(66, 87, 125, 0.5) 54.17%,
        #1e3155 92.71%
    );
    padding-top: 17.4vw;
}

#media-info {
    width: 40vw;
    margin-right: auto;
    margin-left: 6vw;
}

#media-transition {
    width: 100vw;
    height: 4vw;
    -webkit-transform: translateY(-1%);
    -moz-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    -o-transform: translateY(-1%);
    transform: translateY(-1%);
    -webkit-filter: drop-shadow(0, 10vh, 1px);
    filter: drop-shadow(0, 10vh, 1px);
    background-color: var(--color-primary);
    -webkit-clip-path: polygon(18% 100%, 0 0, 100% 0);
    clip-path: polygon(18% 100%, 0 0, 100% 0);
}

@media screen and (max-width: 800px) {
    #outreach-transition,
    #media-transition {
        height: 8vw;
    }

    #outreach,
    #media {
        height: 112.2vw;
        background-attachment: scroll;
    }

    #outreach-gradient,
    #media-gradient {
        height: calc(100% - 26vw);
        padding-top: 26vw;
    }

    #outreach-info {
        height: 50vw;
        width: 60vw;
    }

    #outreach-description,
    #media-description {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 2.2vw;
        line-height: 3vw;
        color: var(--color-light);
        margin: 5vh 0;
    }

    #media-info {
        height: 50vw;
        width: 62vw;
    }

    #media-description {
        width: 97%;
    }
}

/*--------------
|              |
|   Sponsors   |
|              |
|---------------*/

#sponsors {
    width: 100vw;
    text-align: center;

    margin-bottom: 10vw;
}

#sponsors-title {
    margin-top: 8vw;
    margin-bottom: 2vw;

    font-size: 6vw;
}

#sponsors-description {
    margin: auto auto;
    width: 75%;
    color: black;

    font-size: 3vw;
    margin-bottom: 6vw;
    font-weight: 100;
}

#sponsor-images {
    margin: auto auto;
    margin-bottom: 5vw;
    width: 80vw;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -moz-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sponsor-image {
    height: 5vw;

    margin: 2vw;
}

@media screen and (max-width: 800px) {
    #sponsors {
        margin-bottom: 15vw;
    }

    #sponsors-title {
        font-size: 10vw;
    }

    #sponsors-description {
        font-size: 6vw;
        width: 90%;
    }

    #sponsor-images {
        margin-bottom: 8vw;
    }

    .sponsor-image {
        height: 10vw;
        margin: 3vw;
    }
}