/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, body {
    height: 100%;
}

html {
    /* background-color: #00ACED; */
    font-size: 1em;
    line-height: 1.4;
    background: #1c92d2;  /* fallback for old browsers */
    background: url('../graph.svg.php'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
    background: url('../graph.svg.php'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    
}



.information {
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.75s ease-out both;
}
.details {
    font-family: 'Work Sans', sans-serif;
    opacity: 0;
    text-shadow: 0px 4vw 16vw rgba(195, 255, 255, 1);
    color: #004686;
}
h2 {
}
@media screen and (max-width: 414px) {

    html {
        background: url('../graph.svg.php?height=1200'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: url('../graph.svg.php?height=1200'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-repeat:no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
    .information {
        position: absolute;
        top: 50%;
        width: 100%;
        height:50%;
        overflow: hidden;
        bottom: 0;
    }
    .details {
        padding-top: 2vw;
        animation: fadeUp 0.75s ease-out both;
    }
    h1 {
        font-size: 38vw;
    }
    .arrows {
        height: 13.5vw;
    }
    .svg-inline--fa {
        width: 5vw !important;
    }
}
@media screen and (min-width: 415px) {
    html {
        background: url('../graph.svg.php?height=600'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: url('../graph.svg.php?height=600'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-repeat:no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
    body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .information {
        text-align: center;
        width:50%;
    }
    .details {
        width:50%;
        color: #fff;
        animation: fadeIn 0.75s ease-out both;
        text-shadow: 0px 4vw 16vw rgba(195, 255, 255, 1);
        color: #ffffff;
    }
    h1 {
        font-size: 20vw;
    }
    .arrows {
        height: 5vw;
    }
    .svg-inline--fa {
        width: 3vw !important;
    }
}
@media screen and (min-width: 768px) {
    html {
        background: url('../graph.svg.php?height=1000'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: url('../graph.svg.php?height=1000'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-repeat:no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
}
@media screen and (min-width: 812px) {
    html {
        background: url('../graph.svg.php?height=500'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: url('../graph.svg.php?height=500'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-repeat:no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
}
@media screen and (min-width: 1024px) {
    html {
        background: url('../graph.svg.php?height=700'), -webkit-linear-gradient(to bottom, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
        background: url('../graph.svg.php?height=700'), linear-gradient(to bottom, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-repeat:no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
}
h1 {
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: 0;
    font-family: 'Work Sans', sans-serif;
    color: #fff;
    font-weight: 200;
    text-shadow: 0px 4vw 16vw rgba(195, 255, 255, 1);
}
.arrows {
    position:relative;

}
.svg-inline--fa {
    color: #fff;
    height: auto;
    display:inline-block;
    /* position: absolute; */


}
.fa-angle-down {
    top: 3.5vw;
}
.fa-angle-double-down {
    top: 5vw;
}
.fa-angle-up {
    bottom: 3.5vw;
}
.fa-angle-double-up {
    bottom: 5vw;
}
.hidden {
    display:none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -40%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 40%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.link {
    display:block;
    position: fixed;
    bottom:0;
    width:100%;
    text-align: center;
}
.link a {
    font-family: 'Work Sans', sans-serif;
    text-decoration: none;
    font-size: 10px;
    color:#fff;
}