@font-face {
  font-family: Sentinel-Bold;
  src: url("../fonts/Sentinel-Bold.eot"); }
@font-face {
  font-family: GothamNarrow-ExtraLight;
  src: url("../fonts/GothamNarrow-XLight.eot"); }
@font-face {
  font-family: GothamNarrow-Light;
  src: url("../fonts/GothamNarrow-Light.eot"); }
@font-face {
  font-family: GothamNarrow-Book;
  src: url("../fonts/GothamNarrow-Book.eot"); }
@font-face {
  font-family: GothamNarrow-Medium;
  src: url("../fonts/GothamNarrow-Medium.eot"); }
/* FOR REAL BROWSERS */
@font-face {
  font-family: Sentinel-Bold;
  src: url("../fonts/Sentinel-Bold.woff") format("woff"); }
@font-face {
  font-family: GothamNarrow-ExtraLight;
  src: url("../fonts/GothamNarrow-XLight.woff") format("woff"); }
@font-face {
  font-family: GothamNarrow-Light;
  src: url("../fonts/GothamNarrow-Light.woff") format("woff"); }
@font-face {
  font-family: GothamNarrow-Book;
  src: url("../fonts/GothamNarrow-Book.woff") format("woff"); }
@font-face {
  font-family: GothamNarrow-Medium;
  src: url("../fonts/GothamNarrow-Medium.woff") format("woff"); }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "GothamNarrow-Book";
  -webkit-font-smoothing: antialiased; }

body > div {
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; }

body {
  margin: 0;
  background: black; }

.eins, .zwei, .drei, .nul {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.eins {
  background: gray; }

.zwei {
  background: red; }

.drei {
  background: #4484be; }

.nul {
  background: purple; }

.zwei, .eins, .nul {
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9); }

.wrapper div {
  color: white; }
  .wrapper div img {
    position: absolute;
    right: 0;
    top: 10%; }
  .wrapper div h1 {
    font-size: 56px;
    margin: 0;
    line-height: 1.2;
    font-family: Sentinel-Bold;
    font-weight: normal;
    text-transform: uppercase; }
  .wrapper div a {
    color: white; }
  .wrapper div .text-wrapper {
    width: 460px;
    font-size: 14px;
    line-height: 1.6;
    position: absolute;
    top: 45%;
    left: 10%; }
    .wrapper div .text-wrapper p {
      color: #023d6f; }
  .wrapper div .triangle {
    position: absolute;
    width: 100%;
    bottom: 0;
    opacity: .1;
    height: 20px;
    border-width: 0 0 220px 1909px;
    border-color: transparent transparent #fff transparent;
    border-style: solid; }

.circle-container {
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px;
  z-index: 9999999; }

.circle-container a {
  display: block;
  position: relative;
  height: 25px;
  width: 15px;
  text-align: center; }

.circle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 6px;
  height: 6px;
  border: 2px solid #313035;
  border-radius: 100%;
  background: #313035;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

.circle-container a:hover .circle {
  width: 8px;
  height: 8px;
  -webkit-transform: translate3d(-1px, -1px, 0);
          transform: translate3d(-1px, -1px, 0);
  border-color: #fff;
  background: 0 0; }

.circle.active {
  width: 8px;
  height: 8px;
  -webkit-transform: translate3d(-1px, -1px, 0);
          transform: translate3d(-1px, -1px, 0);
  border-color: #fff;
  background: 0 0; }

.top-content {
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  z-index: 99999;
  font-family: "GothamNarrow-Medium";
  -webkit-font-smoothing: subpixel-antialiased;
  text-transform: uppercase;
  font-size: 14px;
  top: 20px; }
  .top-content img {
    position: absolute;
    left: 20px; }

.nav__main {
  margin-top: 10px; }
  .nav__main ul {
    list-style: none; }
    .nav__main ul li {
      display: inline-block;
      padding: 0 10px; }