*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
input, button, select, textarea {font-family: inherit;font-size: inherit;line-height: inherit;}
img {vertical-align: middle;max-width: 100%;height: auto;}
body {background: #fff;color: #666666;font-family: 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;}

section { overflow: hidden; }
::selection { background: #161a1b; color: #fff; }
::-moz-selection { background: #161a1b; color: #fff; }

a {text-decoration: none;}

h1, h2 { margin: 0; }
h1 {font-size: 80px;font-weight: 800;line-height: 80px;letter-spacing: -0.08em;color: #161a1b; }
h2 {font-size: 15px;font-weight: 800;line-height: 1em;	letter-spacing: 0.2em;text-transform: uppercase;color: #161a1b;}

#heading div span {display:block;font-size: 50px;line-height: 50px;letter-spacing: initial;font-weight: 100;text-transform: uppercase;}
#heading div {display:inline-block;margin: 0 34px;}

.sub-title {font-size: 16px;margin-top: 5px;margin-bottom: 0px;}
.sub-title span {font-weight: 700;}

.wrapper {text-align: center;		position: absolute;overflow: hidden;display: table-cell;height: 100%;width: 100%;left: 0;top: 0;}

.scene, .layer {display: block;height: 100%;width: 100%;padding: 0;margin: 0;}
.scene {position: relative;overflow: hidden;}

.layer { position: absolute; }
.layer div {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}

.layer div>i {font-size: 25px;color: #fff; background: #017eff; width: 50px;height: 50px;line-height: 50px;text-align: center;border-radius: 100%;opacity: .75; display: block;}
.layer div>i:before {font-size: 25px; margin: 0;}
.layer div .flaticon-shield:before {margin:0 0 0 7px;}

.background {background: url(../images/background.png) no-repeat 50% 100%;bottom: -20px;background-size: cover;position: absolute;width: 110%;left: -5%;top: -5%;}
.sphere img{-webkit-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7,0.7);transform: scale(0.7);}
.title {display: block;text-align: center;width: 100%;position: absolute;z-index: 2;top: 10%;}
.line {display: block;margin: 0 auto;width: 60px;height: 1px;background: #017eff;margin-top: 10px;}

.contact {display: block;width: 100%;position: absolute;z-index: 2;text-align: center;bottom: 5%;}
.contact .icons {margin: 0;padding: 0;margin-bottom: 18px;text-align: center;list-style: none;list-style-type: none;}
.contact .icons li {display: inline-block;margin-right: 10px;}
.contact .icons li:last-of-type { margin-right: 0px; }
.contact .icons li a {display: block;width: 25px;height: 25px;opacity: .5;-webkit-transition: opacity 0.3s;-moz-transition: opacity 0.3s;transition: opacity 0.3s;color: black;font-size: 24px;}
.contact .icons li a:hover {opacity: 1;-webkit-transition: opacity 0.3s;-moz-transition: opacity 0.3s;transition: opacity 0.3s;}

.contact>a {text-decoration: none;color: #161a1b;font-size: 15px;}
.contact>a:after {position: absolute;top: 100%;left: 50%;width: 125px;margin-left: -60px;margin-top: 10px;height: 1px;background: #666666;content: '';opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;-moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;-webkit-transform: translateY(10px);-moz-transform: translateY(10px);transform: translateY(10px);}
.contact>a+a:before {content:'/';margin: 0 5px;}
.contact>a:hover:after, .contact>a:focus:after {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}
.contact>p{margin: 10px 0;font-size: 15px;}

.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {-webkit-transform: scale(0.6);-moz-transform: scale(0.6);-ms-transform: scale(0.6,0.6);transform: scale(0.6);}

.depth-5 {position: absolute;right: -100%;top: -24%;}
.depth-4 {position: absolute;left: -10%;top: 37%;}
.depth-3.flake1 {display: none;}
.depth-3.flake2 {position: absolute;right: 16%;bottom: 20%;}
.depth-3.flake3 {position: absolute;left: 10%;bottom: 25%;}
.depth-3.flake4 {display: none;}
.depth-2.flake1 { display: none;}
.depth-2.flake2 {display: none;}
.depth-1.flake1 {display: none;}
.depth-1.flake2 { position: absolute;right: 40%;top: 30%;}
.depth-1.flake3 { display: none;}
.depth-1.flake4 { position: absolute;right: 0;top: 0;}

@media (max-width: 320px) {
	h1 { font-size: 40px; line-height: 40px; }
	#heading div span {font-size: 24px; line-height: 34px;}
	.sub-title {margin-top: 10px; }
	.title { top: 15%;}
	.contact .icons { margin-bottom: 0px; }
	.sphere img{-webkit-transform: scale(0.6);-moz-transform: scale(0.6);-ms-transform: scale(0.6,0.6);transform: scale(0.6);}
	.depth-5 {position: absolute;right: -50%;top: -50%;}
	.depth-4 {left: -4%;top: 20%;}
}

@media all and (min-width: 700px) {
	h1 { font-size: 90px; line-height: 90px; }
	h2 {font-size: 18px;}
	.sub-title { font-size: 20px; line-height: 20px; margin-top: 10px; }
	.title { top: 18%;}
	.line { margin-top: 20px; }
	.contact { bottom: 10%; }
	.contact .icons { margin-bottom: 12px; }
	.sphere img{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1,1);transform: scale(1);}
	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8,0.8);transform: scale(0.8);}
	.depth-5 {right: -25%;top: 10%;}
	.depth-4 {left: -3%;top: 15%; }
	.depth-3.flake1 {display: none;}
	.depth-3.flake2 {right: 25%;bottom: 25%;}
	.depth-3.flake3 {left: 10%;bottom: 20%;}
	.depth-3.flake4 {display: block;position: absolute;right: 10%;bottom: 40%;}
	.depth-1.flake2 {display: block;left: 15%;top: 15%;}
	.depth-1.flake4 { display: none;}
}

@media all and (min-width: 900px) {
	h1 { font-size: 120px; line-height: 120px; }
	#heading div span {font-size: 34px; line-height: 34px;}
	.sub-title { font-size: 20px; line-height: 20px; margin-top: 20px; }
	.title { top: 15%;}
	.contact { bottom: 8%; }
}

@media all and (min-width: 1200px) {
	h1 { font-size: 150px; line-height: 150px; }
	#heading div span {font-size: 44px; line-height: 44px;}
	.sub-title { font-size: 22px; line-height: 25px; margin-top: 20px; }
	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1,1);transform: scale(1);}
	.depth-5 {right: -10%;top: 20%;-webkit-animation: wave 9s 0.1s infinite linear;-moz-animation: wave 9s 0.1s infinite linear;animation: wave 9s 0.1s infinite linear;}
	.depth-4 {left: -3%;top: 15%;-webkit-animation: wave 7s 0.1s infinite linear;-moz-animation: wave 7s 0.1s infinite linear;animation: wave 7s 0.1s infinite linear; }
	.depth-3 {-webkit-animation: wave 6s 0.1s infinite linear;-moz-animation: wave 6s 0.1s infinite linear;animation: wave 6s 0.1s infinite linear;}
	.depth-3.flake1 {display: block;position: absolute;left: 20%;top: 40%;}
	.depth-2 {-webkit-animation: wave 5s 0.1s infinite linear;-moz-animation: wave 5s 0.1s infinite linear;animation: wave 5s 0.1s infinite linear;}
	.depth-2.flake1 {display: block;position: absolute;right: 20%;top: 40%;}
	.depth-1 {-webkit-animation: wave 4s 0.1s infinite linear;-moz-animation: wave 4s 0.1s infinite linear;animation: wave 4s 0.1s infinite linear;}
	.depth-1.flake1 {display: block;position: absolute;left: 30%;bottom: 20%;}
}

@media all and (min-width: 1400px) {
	h1 { font-size: 160px; line-height: 160px; }
	.sub-title { font-size: 25px; line-height: 25px; margin-top: 20px; }
	.depth-5 {right: -10%;top: 20%;}
	.depth-4 {left: -3%;top: 15%; }
	.depth-1.flake1 {display: block;position: absolute;left: 20%;bottom: 30%;}
	.depth-1.flake3 { display: block;position: absolute;bottom: 20%;right: 40%;}
	.depth-1.flake4 {display: block;right: 10%;top: 25%;}
}

@media all and (min-width: 1600px) {
	h1 { font-size: 180px; line-height: 180px; }
	#heading div span {font-size: 54px; line-height: 54px;}
	.sub-title { font-size: 25px; line-height: 25px; margin-top: 25px; }
}

@media all and (min-width: 1920px) {
	h1 { font-size: 200px; line-height: 200px; }
	.sub-title { font-size: 30px; line-height: 30px; margin-top: 30px; }
}

@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
  }
}

.snap {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../images/404-background.jpg') no-repeat center;background-size: cover;text-align: center;}
.snap .line { margin-bottom: 70px; }
.button {display: inline-block;margin-top: 80px;text-decoration: none;font-size: 9px;font-weight: 700;line-height: 1em;letter-spacing: 0.2em;text-transform: uppercase;color: #161a1b;background: transparent;border: 1px solid rgb(23,26,28);border: 1px solid rgba(23,26,28,.3);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 4px;padding: 15px 25px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.button:hover {background: rgb(23,26,28);color: #fff;border: 1px solid rgb(23,26,28);-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}

@media all and (min-width: 700px) {
	.button {font-size: 12px;border-radius: 10px;padding: 25px 45px;}
}