/*WEB FONT*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@300;500&family=Roboto+Mono&display=swap');


/*global reset*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


/*--------------------------------------------------*/
/*DESIGN FOR SMALLEST SCREEN FIRST*/
/*--------------------------------------------------*/

/*------------------------------------------------------*/
/*COMMON STYLING ACROSS ALL PAGES*/
/*------------------------------------------------------*/
html {
    font-size: 10px;
    background-color: #00478F;
    overflow-x: hidden;
}

/*Hide the nav menu bar first*/
#menuBar {
    visibility: hidden;
}

/* HAMBURGER MENU
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 * https://codepen.io/erikterwan/pen/EVzeRP
 */

#menuToggle {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: #001F3D;
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: #FF5D00;
}

#menuToggle input {
    display: block;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #D8E1E7;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #001F3D;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #FFA570;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
    font-family: "Open Sans", sans-serif;
}

#menuToggle input:checked ~ ul {
    transform: none;
}

/*END OF HAMBURGER MENU STYLING*/

/*COMMON IMAGE AND CAPTION STYLING*/

img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

figcaption {
    font-size: 1.7rem;
    line-height: 1.8;
    padding: 0.5rem 0;
    font-family: "Open Sans", sans-serif;
    color: #D8E1E7;
}

figcaption a {
    color: #FFA570;
}

figcaption a:visited {
    color: #FF5D00;
}

video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/*COMMON TEXT STYLING*/

p {
    font-size: 2rem;
    line-height: 1.8;
    padding: 2rem 2rem;
    font-family: "Open Sans", sans-serif;
}

/*COMMON FOOTER STYLING*/

footer {
    text-align: center;
    border-top-color: #D8E1E7;
    border-top-style: solid;
    border-top-width: medium;
}

footer p {
    color: #D8E1E7;
    font-family: "Raleway", sans-serif;
    padding: 5rem;
}

#wikiref {
    font-size: 1.5rem;
    padding: 0 5rem 5rem 5rem;
}

footer a {
    text-decoration: none;
    color: #FFA570;
}

/*------------------------------------------------------*/
/*LANDING PAGE STYLING*/
/*------------------------------------------------------*/
#vid-container {
    display: grid;
    grid-template-rows: 100vh;
    grid-template-columns: 100vw;
    overflow: hidden;
}

#video-bg {
    grid-area: 1 / 1 / 2 / 2;
    min-width: 100vw;
    min-height: 100vh;
    object-fit: cover;
    padding: 0;
    z-index: 0;
}

#video-overlay {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding: 5rem;
}

#landingh1 {
    font-family: "Raleway", sans-serif;
    font-size: 7rem;
    color: #FFA570;
    opacity: 90%;
    transition-property: color;
    transition-duration: 0.5s;
}

a {
    text-decoration: none;
}

#landingh1:hover {
    color: #FF5D00;
}

#landingcaption {
    color: #fff;
    font-size: 2rem;
    font-family: "Raleway", sans-serif;
    text-align: center;
}


/*------------------------------------------------------*/
/*HOME PAGE STYLING*/
/*------------------------------------------------------*/
#homeheader {
    padding-top: 8.5rem;
    background-image: url(images/background_feature.jpg);
    background-size: cover;
    background-position: center;
    padding: 50vh 20vh 0 0;
    margin-top: 5rem;
}

#homecaption {
    padding: 1rem 0 0 1rem;
}


#homeh1 {
    font-family: "Raleway", sans-serif;
    font-size: 6rem;
    padding: 2rem 2rem;
    text-shadow: -3px -3px 0 #D8E1E7;
    animation-name: slide-left;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

#homebody1 {
    color: #D8E1E7;
    padding: 5rem;
}

#homepara1 {
    opacity: 0;
}

#homepullquote {
    color: #001F3D;
    background-color: #FFA570;
    padding: 3rem;
}

#homequote {
    text-align: center;
    font-family: "Raleway", sans-serif;
    font-size: 5rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 2rem 2rem;
    opacity: 0;
}

#homeattribution {
    text-align: right;
    color: #D8E1E7;
}

#homequoteattribution {
    font-size: 1.3rem;
    padding: 2rem 2rem 5rem 2rem;
    opacity: 0;
}

#homeimage1 {
    padding: 3rem 5rem;
}

#homeiceberg1 {
    opacity: 0;
}

#homeimage2 {
    padding: 3rem 5rem;
}

#homeiceberg2 {
    opacity: 0;
}

#homebody2 {
    color: #D8E1E7;
    padding: 5rem;
}

#homepara2 {
    opacity: 0;
}

#homeimage3 {
    padding: 3rem 5rem;
}

#homeactivism {
    opacity: 0;
}

#homebody3 {
    color: #D8E1E7;
    padding: 5rem;
}

#homepara3 {
    opacity: 0;
}

mark {
    color: #001F3D;
    background-color: #FFA570;
    box-shadow: 4px 4px #FF5D00;
}

#homeimage4 {
    padding: 3rem 5rem;
}

#homeposter {
    opacity: 0;
}


/*------------------------------------------------------*/
/*NUTRITION PAGE STYLING*/
/*------------------------------------------------------*/

#nutritionheader {
    padding-top: 8.5rem;
}

#nutritionh1 {
    font-family: "Raleway", sans-serif;
    font-size: 7rem;
    color: #D8E1E7;
    padding: 5rem;
    text-align: left;
    margin: auto;
    animation-name: fadeIn;
    animation-duration: 4s;
    animation-direction: normal;
}

.outline {
    text-shadow: -1.5px -1.5px 0 #D8E1E7, 1.5px -1.5px 0 #D8E1E7, -1.5px 1.5px 0 #D8E1E7, 1.5px 1.5px 0 #D8E1E7;
    color: #00478F;
}

#nutritionimage1 {
    padding: 0 5rem;
}

#nutritionmain {
    margin-top: 5rem;
}

#nutritionimage2 {
    padding: 5rem;

}

#nutritionplant {
    opacity: 0;
}

#nutritionbody1 {
    color: #D8E1E7;
    padding: 2rem;
}

#nutritionpara1 {
    opacity: 0;
}

#nutritionbody2 {
    color: #D8E1E7;
    padding: 5rem;
}

#nutritionpara2 {
    opacity: 0;
}

#nutritionimage3 {
    padding: 5rem;
}

#nutritioncows {
    opacity: 0;
}

#nutritionimage4 {
    padding: 5rem;
}

#nutritionecuador {
    opacity: 0;
}

#nutritionbody3 {
    color: #D8E1E7;
    padding: 5rem;

}

#nutritionpara3 {
    opacity: 0;
}

#nutritionbody4 {
    color: #D8E1E7;
    padding: 5rem;
}

#nutritionpara4 {
    opacity: 0;
}

#nutritionpara4title {
    opacity: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 4rem;
    font-weight: 400;
    padding: 5rem 5rem 0 5rem;
}

#nutritionpullquotetext {
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    color: #FFA570;
    opacity: 0;
    padding: 5rem;
}

.circle {
    border-radius: 50%;
}

#nutritionimage5 {
    padding: 5rem;
}

#nutritionimage5 figcaption {
    text-align: center;
}

#nutritionwater {
    opacity: 0;
}

#nutritionimage6 {
    padding: 5rem;
}

#nutritionimage6 figcaption {
    text-align: center;
}

#nutritionkayak {
    opacity: 0;
}

/*------------------------------------------------------*/
/*MENTAL HEALTH PAGE STYLING*/
/*------------------------------------------------------*/
#mentalheader {
    padding-top: 8.5rem;
}

#mentalh1 {
    font-family: "Raleway", sans-serif;
    font-size: 7rem;
    padding: 5rem;
    margin: auto;
    text-align: left;
    color: #D8E1E7;
    animation-name: shadowGrow;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#mentalimage1 {
    padding: 0 5rem;
}

#mentalimage2 {
    padding: 5rem;
}

#mentalbrain {
    opacity: 0;
}

#mentalbody1 {
    padding: 5rem;
    color: #D8E1E7;
}

#mentalpara1 {
    opacity: 0;
}

#mentalimage3 {
    padding: 0 5rem;
}

#mentalposter {
    opacity: 0;
}

#mentalpullquote {
    padding: 5rem;
}

#mentalquote {
    font-family: "Raleway", sans-serif;
    font-size: 4rem;
    color: #FFA570;
    font-weight: 600;
    opacity: 0;
}

#mentalbody2 {
    padding: 5rem;
    color: #001F3D;
    background-color: #D8E1E7;
}

#mentalpara2 {
    opacity: 0;
}

#mentalbody3 {
    padding: 0 5rem 5rem 5rem;
    color: #001F3D;
    background-color: #D8E1E7;
}

#mentalpara3 {
    opacity: 0;
}

#mentalvideo {
    padding: 5rem;
}

/*-----------------------------------------------------*/
/*    DISEASE PAGE STYLING */
/*-----------------------------------------------------*/

#diseaseheader {
    padding-top: 8.5rem;
}

#diseaseh1 {
    font-family: "Raleway", sans-serif;
    font-size: 7rem;
    padding: 5rem;
    margin: auto;
    text-align: left;
    color: #D8E1E7;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#diseaseimage1 {
    padding: 0 5rem;
}

.diseaseh2 {
    font-family: "Open Sans", sans-serif;
    padding: 2rem 2rem 0 2rem;
    font-size: 3.5rem;
}

#diseaseimage2 {
    display: none;
}

#diseasebody1 {
    color: #D8E1E7;
    padding: 5rem;
}

#diseasepara1,
#diseasepara2,
#diseasepara3 {
    opacity: 0;
}

#diseasedrawings {
    opacity: 0;
}

iframe {
    width: 100%;
    height: 600px;
    border: 0px none;
    padding: 5rem;

}

#diseasemalaria figcaption {
    padding: 0 0 0 5rem;
}

#diseasepullquote {
    color: #FFA570;
    padding: 2rem;
}

#diseasequote {
    font-family: "Raleway", sans-serif;
    font-size: 5rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 5rem;
    top: 100px;
    opacity: 0;
}

#diseaseattribution {
    text-align: right;
    grid-column: 3/4;
    color: #D8E1E7;
    padding: 0 5rem;
    position: relative;
    bottom: 50px;
}

#diseaseattributionpara {
    font-size: 1.3rem;
    opacity: 0;
}

#diseasebody2 {
    color: #D8E1E7;
    padding: 5rem;
}

#diseasepara4 {
    opacity: 0;
}

#diseaseimage3 {
    padding: 5rem;
}

#diseaseimage3 figcaption {
    text-align: center;
}

#diseasealgae {
    opacity: 0;
}

#diseaseimage4 {
    padding: 5rem;
}

#diseaseimage4 figcaption {
    text-align: center;
}

#diseaseducks {
    opacity: 0;
}

/*------------------------------------------------------*/
/*MIGRATION PAGE STYLING*/
/*------------------------------------------------------*/

#migrationheader {
    padding-top: 8.5rem;
}

#migrationh1 {
    font-family: "Raleway", sans-serif;
    font-size: 7rem;
    padding: 5rem;
    margin: auto;
    text-align: left;
    color: #D8E1E7;
}

#migrationimage1 {
    padding: 5rem;
}

#migrationimage2 {
    padding: 0 5rem 5rem 5rem;
}

#migrationbody1 {
    color: #001F3D;
    background-color: #D8E1E7;
    padding: 5rem;
}

#migrationpara1 {
    opacity: 0;
}

#migrationbody2 {
    color: #001F3D;
    background-color: #D8E1E7;
    padding: 5rem;
}

#migrationpara2 {
    opacity: 0;
}

#migrationvideo {
    padding: 5rem;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*MEDIA QUERY*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/


/*For windows between 1170-1400px*/
@media only screen and (min-width:1170px) {


    /*COMMON MEDIA QUERY STYLING*/

    /*First hide the hamburger menu*/
    #menuToggle {
        visibility: hidden;
        height: 0;
    }

    /*MENU BAR STYLING*/
    #menuBar {
        visibility: visible;
        background-color: #FFA570;
        list-style: none;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    #menuBar ul {
        text-align: center;
    }

    #menuBar li {
        display: inline-block;
        padding: 3rem 4rem;
    }

    #menuBar a:link {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-size: 2rem;
        line-height: 1.3;
        text-decoration: none;
        color: #001F3D;
        transition-property: color;
        transition-duration: 0.5s;
    }

    #menuBar a:visited {
        color: #00478F;
        transition-property: color;
        transition-duration: 0.5s;
    }

    #menuBar a:hover {
        color: #FF5D00;
    }

    /*    GRID SETUP COMMON TO ALL PAGES*/
    main {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        padding-top: 8rem;
    }

    /*-----------------------------------------------------*/
    /*HOME PAGE STYLING*/
    /*-----------------------------------------------------*/
    #homeheader {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        grid-column: 1/5;
    }

    /*Image attribution https://unsplash.com/photos/r1BS0pzlr1MMarkus Spiske*/


    #homeh1 {
        font-size: 9rem;
        grid-column: 1/4;
    }

    #homebody1 {
        grid-column: 2/4;
        padding: 5rem 0;
    }

    #homepullquote {
        grid-column: 1/5;
    }

    #homequote {
        font-size: 7rem;
        padding: 8rem 3rem 8rem 3rem;
    }

    #homeattribution {
        text-align: right;
        grid-column: 4/5;
        color: #001F3D;
        background-color: #D8E1E7;
        padding: 2rem;
        position: relative;
        bottom: 10rem;
    }

    #homequoteattribution {
        padding: 5rem;
    }

    #homeimage1 {
        grid-column: 1/4;
        z-index: 1;
        position: relative;
        bottom: 25rem;
    }

    #homeimage2 {
        grid-column: 3/5;
        z-index: 2;
        position: relative;
        bottom: 50rem;
    }

    #homebody2 {
        grid-column: 2/4;
        position: relative;
        bottom: 50rem;
        padding: 7rem 0;
    }

    #homeimage3 {
        grid-column: 1/5;
        position: relative;
        bottom: 50rem;
    }

    #homebody3 {
        grid-column: 2/4;
        position: relative;
        bottom: 50rem;
        padding: 7rem 0;
    }

    mark {
        transition-property: background-color;
        transition-duration: 0.5s;
    }

    mark:hover {
        background-color: #D8E1E7;
    }

    #homeimage4 {
        grid-column: 2/4;
        position: relative;
        bottom: 50rem;
        padding: 0;
    }


    /*-----------------------------------------------------*/
    /*NUTRITION PAGE STYLING*/
    /*-----------------------------------------------------*/
    #nutritionheader {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        padding-top: 8.5rem;
    }

    #nutritionh1 {
        font-size: 9rem;
        grid-column: 1/3;
        text-align: right;
    }

    #nutritionimage1 {
        grid-column: 3/5;
        animation: slide-left;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        padding: 0;
    }

    #nutritionimage2 {
        grid-column: 3/5;
        padding: none;
        width: 100%;
        margin: auto;
    }

    #nutritionbody1 {
        grid-column: 1/3;
        background-color: #D8E1E7;
        color: #001F3D;
    }

    #nutritionbody2 {
        grid-column: 3/5;
        background-color: #D8E1E7;
        color: #001F3D;
    }

    #nutritionimage3 {
        grid-column: 1/3;
        padding: none;
        width: 100%;
        margin: auto;
    }

    #nutritionimage4 {
        grid-column: 1/3;
        padding: none;
        width: 100%;
        margin: auto;
    }

    #nutritionbody3 {
        grid-column: 3/5;
        background-color: #D8E1E7;
        color: #001F3D;
    }

    #nutritionbody4 {
        grid-column: 2/4;
        color: #001F3D;
        background-color: #FFA570;
        margin-top: 5rem;
    }

    h2 {
        font-family: "Open Sans", sans-serif;
        font-size: 4rem;
        font-weight: 400;
        padding: 6rem 6rem 0 6rem;
    }

    #nutritionpullquote {
        grid-column: 2/4;
    }

    #nutritionpullquotetext {
        font-size: 4rem;
        text-align: center;
        color: #FFA570;
        padding: 5rem;
    }

    #nutritionimage5 {
        grid-column: 1/3;
    }

    #nutritionimage6 {
        grid-column: 3/5;
    }


    /*-----------------------------------------------------*/
    /*    MENTAL HEALTH PAGE STYLING */
    /*-----------------------------------------------------*/

    #mentalheader {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        padding-top: 8.5rem;
    }

    #mentalh1 {
        padding: 2rem 2rem;
        font-size: 9rem;
        grid-column: 1/3;
        text-align: right;
    }


    #mentalimage1 {
        grid-column: 3/5;
        animation-name: slide-left;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        padding: 0;
    }

    #mentalimage2 {
        grid-column: 1/3;
        padding: none;
        width: 100%;
        margin: auto;
    }

    #mentalbody1 {
        grid-column: 3/5;
        color: #001F3D;
        background-color: #D8E1E7;
        margin: auto;
    }

    #mentalimage3 {
        grid-column: 1/5;
        padding: 5rem 8rem;
    }


    #mentalpullquote {
        grid-column: 2/4;
        padding: 5rem;
    }

    #mentalbody2 {
        grid-column: 1/3;
    }

    #mentalbody3 {
        grid-column: 3/5;
        padding: 5rem;
    }

    #mentalvideo {
        grid-column: 1/5;
    }

    /*-----------------------------------------------------*/
    /*    DISEASE PAGE STYLING */
    /*-----------------------------------------------------*/

    #diseaseheader {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }

    #diseaseh1 {
        font-size: 9rem;
        grid-column: 1/3;
        text-align: right;
        margin: auto;
    }

    #diseaseimage1 {
        grid-column: 3/5;
        animation-name: slide-left;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        padding: 0;
    }

    #diseaseimage2 {
        display: block;
        grid-column: 1/3;
        padding-left: 2rem;
    }

    #diseasefjords {
        opacity: 0;
    }

    #diseasebody1 {
        grid-column: 3/5;
        margin: auto;
    }

    #diseaseimagedraw {
        display: none;
    }

    iframe {
        padding: 0;
        margin-top: 5rem;
    }

    #diseasemalaria {
        grid-column: 2/4;
        padding: 5rem;
    }

    #diseasebody2 {
        grid-column: 2/4;
    }

    #diseasepullquote {
        grid-column: 2/4;
    }

    #diseaseimage3 {
        grid-column: 1/3;
    }

    #diseaseimage4 {
        grid-column: 3/5;
    }


    /*-----------------------------------------------------*/
    /*MIGRATION PAGE STYLING*/
    /*-----------------------------------------------------*/

    #migrationheader {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }

    #migrationh1 {
        font-size: 9rem;
        grid-column: 1/3;
        text-align: right;
        margin: auto;
        animation: slide-right;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }



    #migrationimage1 {
        grid-column: 3/5;
        animation: slide-left;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        padding: 0;
    }


    #migrationbody1 {
        grid-column: 3/5;
        margin: auto;
        background-image: url(images/migration_lines.svg);
    }

    #migrationbody2 {
        grid-column: 2/4;
    }

    #migrationimage2 {
        grid-column: 1/3;
        padding: 5rem;
        margin: auto;
    }

    #migrationvideo {
        grid-column: 1/5;
    }

}

/*close media query for between 900-1400px*/



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*NEW MEDIA QUERY*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

/*For windows wider than 1400px (WIDEST SCREEN)*/
@media only screen and (min-width:1400px) {

    /*    HOME PAGE STYLING*/

    #homeimage1 {
        bottom: 15rem;
    }


    /*    NUTRITION PAGE STYLING*/

    #nutritionimage2 {
        padding: 8rem;
        margin: 0;
    }

    #nutritionbody1 {
        padding: 6rem;
        margin: auto;
    }

    #nutritionbody2 {
        padding: 6rem 6rem 6rem 9rem;
        margin: auto;
    }

    #nutritionbody3 {
        margin-top: 5rem;
        padding: 6rem;
    }

    #nutritionbody4 {
        padding: 6rem;
    }


    /*    DISEASE PAGE STYLING */
    #diseaseimage2 {
        grid-column: 1/2;
    }

    #diseasebody1 {
        grid-column: 2/4;
    }

    #diseaseimagedraw {
        display: block;
        grid-column: 4/5;
    }

    #diseaseimage3 {
        padding: 10rem;
    }

    #diseaseimage4 {
        padding: 10rem;
    }

}

/*CLOSE MEDIA QUERY*/






/*------------------------------------------------------*/
/*Keyframe Animation Definitions*/
/*------------------------------------------------------*/

@keyframes fadeIn {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

/*Class calling on keyframe animation, ready for JS to apply to images when scrolled to*/
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-direction: normal;
}


@keyframes shadowGrow {

    0% {
        text-shadow: 0;
    }

    50% {
        text-shadow: 1.5px 1.5px #ff5d00, 3px 3px #ff5d00;
    }

    100% {
        text-shadow: 3px 3px #f03b38, 6px 6px #ffa570;
    }
}


/* ----------------------------------------------
 * Generated by Animista on 2021-4-9 9:51:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- 

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2021-4-28 11:53:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}