@import "https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto:300,400,500,700";

* {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding: 0;
  z-index: 0
}

a, a:visited, a:active {
  list-style-type: none;
  text-decoration: none
}

p, span { font-size: 18px }

a, a:visited, a:active, a:hover, button, input, input:active, input:hover, input:visited, textarea { outline: none }

h1, h2, h3, h4, h5, h6 { font-weight: 400 }

h1 { font-size: 32px }

h2 { font-size: 24px }

h3 { font-size: 18.5px }

h4 { font-size: 16px }

h5 { font-size: 13.5px }

h6 { font-size: 11px }

ul { list-style-type: none }

input, textarea, button {
  display: block;
  resize: none
}

input[type="button"], input[type="submit"], button { cursor: pointer }

.intro {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: nowrap row;
  overflow: hidden
}

.intro article {
  flex: 0 0 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform .7s ease-in .2s;
  background-color: #FBB600
}

.intro article:nth-child(2) { background-color: #f1af00 }

.intro article:nth-child(3) { background-color: #e7a700 }

.intro article:nth-child(4) { background-color: #dca000 }

.intro article:nth-child(4) { background-color: #cd9500 }

.intro .banner {
  z-index: 10;
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center
}

.intro .banner h1 {
  flex: 0 0 auto;
  font-weight: 300;
  color: #fff;
  padding: 0 30px;
  font-size: 50px
}

.intro .banner a, .intro .banner h1 { flex: 0 0 100% }

.intro .banner a { color: #fff }

#next, #prev {
  position: absolute;
  top: 0;
  width: auto;
  line-height: 100vh;
  z-index: 999;
  font-size: 90px;
  color: #fff;
  padding: 0 20px
}

#next { right: 0 }
/*# sourceMappingURL=main.css.map */