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

html {
    font: normal 16px sans-serif;
    color: #555;
    font-family: 'Lato', sans-serif
}

ul,
nav {
    list-style: none
}

a {
    text-decoration: none;
    opacity: 0.75;
    color: #fff
}

    a:hover {
        opacity: 1;
        cursor: default;
        text-decoration: none;
        color: orange
    }

    a.btn {
        border-radius: 4;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        background-color: orangered;
        opacity: 1
    }

        a.btn:hover {
            color: pink
        }


/*  Page Styles  */



body.homepage {
    background: linear-gradient(270deg, #a5d88c, #ed996e, #77a2c2, #e38ea9, #94eddc, #efde8c, #c4a9f4, #92c7de, #ed91c2);
    background-size: 1800% 1800%;
    -webkit-animation: gradientAnimation 55s ease infinite;
    -moz-animation: gradientAnimation 55s ease infinite;
    animation: gradientAnimation 55s ease infinite;
    background-size: auto 100%
}

@media and screen (min-width: 768px) {
    body.homepage {
        background: linear-gradient(270deg, #a5d88c, #ed996e, #77a2c2, #e38ea9, #94eddc, #efde8c, #c4a9f4, #92c7de, #ed91c2);
        background-size: 1800% 1800%;
        -webkit-animation: gradientAnimation 55s ease infinite;
        -moz-animation: gradientAnimation 55s ease infinite;
        animation: gradientAnimation 55s ease infinite;
        background-size: cover
    }
}


/*   Background Color Gradient Animation  */



@-webkit-keyframes gradientAnimation {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

@-moz-keyframes gradientAnimation {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

/*   End Background Color Gradient Animation  */



section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 80px
}

    section:not(.hero):nth-child(even) {
        background-color: #f5f5f5
    }

.grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

hr {
    width: 250px;
    height: 1px;
    background-color: #444;
    border: 0;
    margin-bottom: 50px
}

section h3.title {
    text-transform: capitalize;
    font: 300 36px 'Lato', sans-serif;
    margin-bottom: 20px;
    text-align: center
}

section p {
    max-width: 775px;
    line-height: 2;
    padding: 0 20px;
    margin-bottom: 30px;
    text-align: center
}

@media (max-width: 800px) {
    section {
        padding: 50px 20px
    }
}

/*   Header Styles   */

header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 100px;
    animation: 1s fadein 0.5s forwards;
    opacity: 0;
    color: #444;
    z-index: 100;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
}

    header.scrolled {
        background: rgb(230, 230, 230); /* IE */
        background: rgba(255, 255, 255, 0.70) /* NON-IE */
    }


@keyframes fadein {
    100% {
        opacity: 1
    }
}

header h2 {
    font-family: 'Quicksand', sans-serif
}

header nav {
    display: flex;
    margin-right: -15px;
    font-family: 'Quicksand', sans-serif
}

    header nav li {
        margin: 0 15px
    }

        header nav li a, header h2 a {
            color: #444
        }

            header nav li a:hover, header h2 a:hover {
                color: #222;
                opacity: 1;
                text-decoration: none
            }


@media (max-width: 800px) {
    header {
        padding: 20px 50px
    }
}

@media (max-width: 540px) {
    header {
        padding: 20px 50px;
        flex-direction: column;
        background: rgb(230, 230, 230); /* IE */
        background: rgba(255, 255, 255, 0.50) /* NON-IE */
    }

        header h2 {
            margin-bottom: 15px
        }
}


.background-image {
    background-size: 1800% 1800%;
    z-index: -1;
    background-color: #7feaeb
}


/*   Index Page Styles   */

.index-page {
    position: relative;
    text-align: center;
    color: #fff
}

    .index-page .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background-color: #7feaeb
    }

    .index-page h1 {
        font: 100 70px 'Lato', sans-serif;
        text-transform: uppercase;
        margin-top: 20px;
        margin-bottom: 15px;
        font-weight: 100
    }

    .index-page h3 {
        font: 300 21px 'Lato', sans-serif;
        margin-bottom: 40px
    }

    .index-page a.btn {
        padding: 20px 46px
    }

.index-page-content-area {
    opacity: 0;
    margin-top: 40px;
    animation: 1s slidefade 1s forwards
}

@keyframes slidefade {
    100% {
        opacity: 1;
        margin-top: 0
    }
}

@media (max-width: 800px) {
    .index-page {
    }

        .index-page h1 {
            font-size: 36px;
            margin-top: 50px
        }

        .index-page h3 {
            font-size: 24px
        }

        .index-page a.btn {
            padding: 15px 40px
        }
}

/*   Index Page Grid Styles */

.index-page .grid {
    opacity: 0;
    margin-top: 40px;
    animation: 1s slidefade 1s forwards
}

    .index-page .grid li {
        height: 250px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        margin: 1px
    }

        .index-page .grid li.item {
            flex-basis: 30%
        }

@media (max-width: 800px) {
    .index-page .grid li.item {
        flex-basis: 100%;
        padding: 20px
    }
}


/*   Color Animation 1   */

@keyframes item1 {
    0% {
        background-color: #ed996e
    }

    20% {
        background-color: #77a2c2
    }

    40% {
        background-color: #e38ea9
    }

    90% {
        background-color: #94eddc
    }

    100% {
        background-color: #ed996e
    }
}

@keyframes item2 {
    0% {
        background-color: #ed91c2
    }

    20% {
        background-color: #92c7de
    }

    40% {
        background-color: #c4a9f4
    }

    90% {
        background-color: #efde8c
    }

    100% {
        background-color: #ed91c2
    }
}

@keyframes item3 {
    0% {
        background-color: #a5d88c
    }

    20% {
        background-color: #92c7de
    }

    40% {
        background-color: #c4a9f4
    }

    90% {
        background-color: #efde8c
    }

    100% {
        background-color: #a5d88c
    }
}


/*  About Page Styles */

.about-page {
    position: relative;
    text-align: center;
    color: #fff
}


    .about-page h1 {
        font: 100 70px 'Lato', sans-serif;
        text-transform: uppercase;
        margin-top: 20px;
        margin-bottom: 15px;
        font-weight: 100
    }

    .about-page h3 {
        font: 300 21px 'Lato', sans-serif;
        margin-bottom: 40px
    }

    .about-page p {
        font: 300 16px 'Lato', sans-serif;
        margin: 0px 60px 40px 60px;
        text-align: left;
    }

        .about-page a.btn {
            padding: 20px 46px
        }

.about-page-content-area {
    opacity: 0;
    margin-top: 40px;
    animation: 1s slidefade 1s forwards;
}

@keyframes slidefade {
    100% {
        opacity: 1;
        margin-top: 0
    }
}

@media (max-width: 800px) {
    .about-page {
    }

        .about-page h1 {
            font-size: 36px;
            margin-top: 50px;
            margin-bottom: 30px;
        }

        .about-page h3 {
            font-size: 24px
        }

        .about-page a.btn {
            padding: 15px 40px
        }
}

/*   About Grid Styles */

.about-page .grid {
    opacity: 0;
    margin-top: 40px;
    animation: 1s slidefade 1s forwards;
}

    .about-page .grid li {
        margin-top: 40px;
        height: 540px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        font: 300 1.1em 'Lato', sans-serif;
    }

        .about-page .grid li.small {
            flex-basis: 30%;
            align-items: center;
        }

        .about-page .grid li.large {
            flex-basis: 70%;
            text-align: left;
            padding: 0 15px 15px 25px;
            line-height: 1.4em;
        }

@media (max-width: 800px) {


    .about-page .grid li {
        margin-top: 10px;
        align-items: center;
        height: 580px;
    }

        .about-page .grid li.small {
            order: 2;
            flex-basis: 100%;
        }

        .about-page .grid li.large {
            flex-basis: 100%;
            line-height: 1.3em;
            font: 300 1.05em 'Lato', sans-serif;
        }


}


/*   Footer Styles   */

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #666;
    color: #fff;
    padding: 20px 0
}

    footer ul {
        display: flex
    }

        footer ul li {
            margin-left: 16px
        }

    footer p {
        text-transform: uppercase;
        font-size: 14px;
        opacity: 0.6;
        align-self: center
    }

@media (max-width: 1100px) {
    footer {
        flex-direction: column
    }

        footer p {
            text-align: center;
            margin-bottom: 20px
        }

        footer ul li {
            margin: 0 8px
        }
}