html{
    font-family:sans-serif;
    line-height:1.15;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0
}
main{
    display:block
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}
*,*:before,*:after{
    outline:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
html,body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    height:100%
}
body{
    font-family:'Montserrat', sans-serif
}
.container:before,.container:after{
    content:" ";
    display:table
}
.container:after{
    clear:both
}
::-moz-selection{
    background:#303961;
    color:#fff
}
::selection{
    background:#303961;
    color:#fff
}
::-moz-selection{
    background:#303961;
    color:#fff
}
@media screen and (min-width: 768px){
    main{
        -webkit-transform:translateed(0, 0, 0);
        transform:translateed(0, 0, 0);
        height:100%;
        width:100%;
        overflow:hidden;
        position:relative;
        z-index:2
    }
}
.polygon-animation{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.polygon-animation.background{
    z-index:2
}
.polygon-animation span{
    position:absolute;
    -webkit-transform:translate3d(0px, 0px, 0px);
    transform:translate3d(0px, 0px, 0px);
    background-size:cover
}
.polygon-animation>span>span{
    width:100%;
    height:100%;
    -webkit-transform-origin:center;
    transform-origin:center
}
@-webkit-keyframes rotate1{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@keyframes rotate1{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
.polygon-animation.background>span:nth-child(1){
    left:5%
}
.polygon-animation.background>span:nth-child(1)>span{
    background-image:url(/i/bg-shape-1.svg);
	 -webkit-animation-direction:reverse;
    animation-direction:reverse
}
.polygon-animation.background>span:nth-child(2){
    left:40%
}
.polygon-animation.background>span:nth-child(2)>span{
    background-image:url(/i/bg-shape-2.svg);
    -webkit-animation-direction:alternate;
    animation-direction:aletrnate
}
.polygon-animation.background>span:nth-child(3){
    right:10%
}
.polygon-animation.background>span:nth-child(3)>span{
    background-image:url(/i/bg-shape-3.svg);
    -webkit-animation-direction:alternate-reverse;
    animation-direction:alternate-reverse
}
.polygon-animation.background>span:nth-child(4){
    left:60%
}
.polygon-animation.background>span:nth-child(4)>span{
    background-image:url(/i/bg-shape-4.svg)
	
}
.polygon-animation.background>span:nth-child(5){
    left:20%
}
.polygon-animation.background>span:nth-child(5)>span{
    background-image:url(/i/bg-shape-5.svg);
    -webkit-animation-direction:reverse;
    animation-direction:reverse
}
.polygon-animation.background>span>span{
    -webkit-animation:rotate1 infinite 30s linear;
    animation:rotate1 infinite 60s linear
}
@media screen and (min-width: 1024px){
    .polygon-animation.background>span:nth-child(1){
        width:185px;
        height:489px
    }
    .polygon-animation.background>span:nth-child(2){
        width:200px;
        height:200px
    }
    .polygon-animation.background>span:nth-child(3){
        width:244px;
        height:484px
    }
    .polygon-animation.background>span:nth-child(4){
        width:162px;
        height:215px
    }
    .polygon-animation.background>span:nth-child(5){
        width:135px;
        height:99px
    }
}
@media screen and (max-width: 1024px){
    .polygon-animation.background>span:nth-child(1){
        width:95px;
        height:250px
    }
    .polygon-animation.background>span:nth-child(2){
        width:512px;
        height:512px
    }
    .polygon-animation.background>span:nth-child(3){
        width:125px;
        height:248px
    }
    .polygon-animation.background>span:nth-child(4){
        width:83px;
        height:110px
    }
    .polygon-animation.background>span:nth-child(5){
        width:70px;
        height:51px
    }
}

@import url('https://fonts.googleapis.com/css?family=Corben:700');

h1 {
	font-family: 'Corben', cursive;
	font-size: 6rem;
	color: white;
	letter-spacing: 0.1rem;
	text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.66);
}

.hero {
	background-image: radial-gradient(50% 176%, #253854 80%, #061922 100%);
	min-height: 100vh;
	// min-height: 30rem;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-content: center;
	
	&__content {
		position: relative;
		align-self: center;
		padding: 3rem 0;
	}
}

.snow {
	position: absolute;
	min-width: 100vw;
	min-height: 100vh;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.snow .svg {
	position: absolute;
	width: 100%;
	height: 100%;
}

#snow-top-layer {
	will-change: transform;
	transform: translateY(-768px);
	animation: fall 22.5s infinite linear;
}

#snow-bottom-layer {
	will-change: transform;
	transform: translateY(-768px);
	animation: fall 45s infinite linear;
}

@keyframes fall {
	
	100% {
		transform: translateY(0);
	}
	
}