html {
    background: #6d819d;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#161e31, #6d819d);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#161e31, #6d819d);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#161e31, #6d819d);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#161e31, #6d819d, #c1bcb4);
    /* Standard syntax */
    background-repeat: no-repeat;
    color: white;
    overflow-x: hidden;
}

body {
    height: 100%;
}

.clearfix {
    content: "";
    display: table;
    float: none;
}

.gutter {
    margin-bottom: 4%;
}

h1,
h2,
p,
h3, h4, h5 .arrow, #begin {
    transition: all .25s ease-in-out;
}

h1 {
    color: #5c7290;
    font-family: 'alluraregular', cursive;
    font-size: 16vw;
    font-weight: 800;
    margin: 8.7% 8.1% 0 8.1%;
}

h2 {
    bottom: 20px;
    font-family: 'open_sansbold', sans-serif;
    font-size: 4vw;
    margin: 0 8.1% 20% 22.2%;
    position: relative;
    transition: margin .75s ease-in-out;
}

h3 {
    font-family: 'open_sansbold', sans-serif;
    font-size: 13pt;
}

h4 {
    animation: 1.5s ease-in 1.25s fadein, 1.5s ease-in 6s fadeout;
    animation-fill-mode: forwards;
    color: #5c7290;
    font-family: 'alluraregular', cursive;
    font-size: 14vw;
    font-weight: 800;
    margin: 0;
    opacity: 0;
    position: fixed;
    top: 20vh;
    width: 100%;
    z-index: 0;
}

h5 {
    animation: 1.5s ease-in 1.25s fadein, 1.5s ease-out 6s fadeout;
    animation-fill-mode: forwards;
    font-family: 'open_sansbold', sans-serif;
    font-size: 3.5vw;
    margin: 0;
    opacity: 0;
    position: fixed;
    right: -6%;
    top: 25%;
    width: 100%;
    z-index: 0;
}

.title {
    position: fixed;
    text-align: center;
}

main section {
    margin: 0 8.1% 20% 8.1%;
}

p {
    font-family: 'arvoregular', serif;
    font-size: 10pt;
    line-height: 1.3;
    margin: 0 0 4% 0;
}

span {
    font-family: 'arvoitalic';
}

#begin {
    display: none;
}

.arrow {
    display: none;
}

.mobile {
    border: rgba(0, 0, 0, .4) solid 5px;
    margin-top: 4%;
    width: 100%;
}

.gal {
    display: none;
}

.desk {
    display: none;
}

.tower {
    display: none;
}

.stars {
    opacity: 0.1;
    position: absolute;
    top: 5px;
    width: 100%;
    z-index: -3;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade {
    animation: 2s ease-in 8.5s fadein;
    animation-fill-mode: forwards;
    opacity: 0;
}

/*
a:link {
    color: white;
    display: block;
    font-family: 'arvoregular', sans-serif;
    font-size: .8em;
    margin-top: 4%;
    text-decoration: none;
}

a:visited {
    color: white;
}

a:hover {
    color: #5c7290;
}

a:active {
    color: #5c7290;
}*/

footer {
    background-color: #1d1c21;
    height: 12vw;
}

@media (min-width:480px) {
    h3 {
        font-size: 4vw;
    }
    h5{
        top: 26.75%;
    }
    p {
        font-size: 3vw;
    }
}

@media (min-width:600px) {
    h1 {
        font-size: 6.7em;
    }
    h2 {
        font-size: 1.48em;
    }
    h3 {
        font-size: 1.65em;
    }
    h5{
        top: 27.5%;
    }
    p {
        font-size: 1.2em;
    } 
}

@media (min-width:700px) {
    h5{
        top: 28.75%;
    }
}

@media (min-width:815px) {
    h5{
        top: 30%;
    }
}

@media (min-width:960px) {
    h1 {
        font-size: 9em;
    }

    h2 {
        font-size: 2em;
        margin-bottom: 0;
        top: -30px;
    }
    
    h3 {
        font-size: 2em;
        padding: 0;
    }
    
    h4 {
        font-size: 7em;
        top: 31%;
    }
    h5 {
        font-size: 2em; 
        right: -8%;
        top: 40%;
    }
    
     #begin {
        animation: 1.5s ease-in 2s fadein, 1.5s ease-out 7s fadeout;
        animation-fill-mode: forwards;
        background-color: #1d1c21;
        display: block;
        font-size: 13pt;
        margin: 0 0 0 40%;
        opacity: 0;
        padding: 1%;
        position: fixed;
        text-align: center;
        top: 55%;
        width: 20%;
        z-index: -1;
    }

    .arrow {
        animation: 1.5s ease-in 3s fadein, 1.5s ease-out 8s fadeout, 1.5s ease-out infinite up;
        animation-fill-mode: forwards;
        border: none;
        display: block;
        margin-left: 49.25%;
        opacity: 0;
        padding: 0;
        position: fixed;
        top: 46%;
        width: 1.5%;
    }
    
    /*
    nav {
        background-color: rgba(0, 0, 0, .8);
        bottom: 24.7%;
        font-family: 'open_sansbold', sans-serif;
        font-size: 2em;
        left: 2.8%;
        list-style: none;
        padding: .5%;
        position: fixed;
        text-align: center;
        z-index: 2;
    }

    nav a {
        display: block;
        line-height: 1.5;
    }*/
    
    main {
        display: flex;
        flex-direction: column-reverse;
    }
    
    main section {
        margin-bottom: 0;
        margin-left: 8.1%;
        padding-top: 4%;
    }
    
    p {
        font-size: 1.3em;
    }
    
    section img:hover {
        transform: scale(1.02);
        transition: all .5s ease-in-out;
    }
    
    section img {
        border: rgba(0, 0, 0, .6) solid 8px;
        margin: 4% 0;
        z-index: 2;
    }

    .gutter {
        margin-bottom: 4%;
    }
    
    .sec5 {
        float: left;
        margin-right: 1.9%;
        width: 69.57%;
    }
    
    .sec5 img {
        float: left;
        margin: 0 1.9% 4% 0;
        width: 38.33%;
    }

    .sec4 {
        width: 69.57%;
    }

    .sec4 img {
        width: 100%;
    }

    .sec3 {
        width: 69.57%;
    }

    .sec3 img {
        float: left;
        margin: 0 1.9% 0 0;
        width: 19.46%;
    }

    .sec2 h3,
    .sec2 p {
        width: 62.37%;
    }

    .sec2 .desk {
        float: left;
        height: 14.5vw;
        margin: 0;
        width: 33.87%;
    }

    .sec2 .second {
        margin-left: 1.9%;
        width: 19.56%;
    }

    .sec1 p,
    .sec1 h3 {
        float: left;
        margin-right: 36.67%;
        width: 33.87%;
    }

    .sec1 img {
        float: left;
        margin: 0 1.8% 20% 0;
        width: 19.56%;
    }
    
    .desk {
        display: block;

    }

    .mobile {
        display: none;
    }

    .artcon {
        position: relative;
    }
    
    .trees {
        border: none;
        bottom: -3vw;
        position: absolute;
        width: 100%;
        z-index: -3;
    }

    .city {
        border: none;
        bottom: 0;
        opacity: .1;
        position: absolute;
        width: 100%;
        z-index: -3;
    }

    .bush {
        border: none;
        bottom: -3vw;
        display: block;
        position: absolute;
        width: 20%;
        z-index: -2;
    }

    .cloud {
        animation: float 180s linear infinite;
        left: -10vw;
        opacity: .8;
        position: absolute;
        top: 70vw;
        width: 10%;
        z-index: -2;
    }

    .cloud2 {
        animation: float 90s linear infinite;
        left: -30vw;
        opacity: .6;
        position: absolute;
        top: 155vw;
        width: 15%;
        z-index: -2;
    }

    .plane {
        animation: pilot 18s linear 30s infinite;
        left: -250px;
        position: relative;
        top: -200px;
        width: 9%;
        z-index: -2;
    }
    
    .tower {
        animation: 2s ease-in 9.5s fadein;
        animation-fill-mode: forwards;
        border: none;
        bottom: 0;
        display: block;
        opacity: 0;
        position: absolute;
        right: -55vw;
        transition: right .75s ease-in-out;
        width: 100vw;
        z-index: -1;
    }

    @keyframes float {
        0% {
            transform: translateX(300vw);
        }
    }

    @keyframes pilot {
        0% {
            transform: translateX(0) translateY(0);
        }
        100% {
            transform: translateX(300vw) translateY(20vw)
        }
    }

    @keyframes up {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(5px);
        }
        100% {
            transform: translateY(0);
        }
    }

    @media (min-width:1220px) {
        h2 {
            margin-left: 16.5%;
        }
        h5 {
            right: -6%;
        }
        .arrow {
            top: 44%;
        }
        .tower {
            right: -52vw;
        }
    }

    @media (min-width:1500px) {
        h5{
            right: -5%;
        }
        .arrow {
            top: 42%;
        }
        .tower {
            right: -46vw;
        }
    }

    @media (min-width:1700px) {
        h2 {
            margin-left: 15.5%;
        }
        .arrow {
            top: 40%;
        }
        .tower {
            right: -40vw;
            width: 98vw;
        }
    }