@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
@import url(https://fonts.googleapis.com/css2?family=Monoton&family=Noto+Sans:wght@100&display=swap);
/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "untitled-font-1";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SocialIco";
  src: url("../fonts/WEB/Socialico-Regular.eot");
  src: url("../fonts/WEB/Socialico-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/WEB/Socialico-Regular.woff2") format("woff2"), url("../fonts/WEB/Socialico-Regular.woff") format("woff"), url("../fonts/WEB/Socialico-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "SocialIcoPlus";
  src: url("../fonts/WEB/SocialicoPlus-Plus.eot");
  src: url("../fonts/WEB/SocialicoPlus-Plus.eot?#iefix") format("embedded-opentype"), url("../fonts/WEB/SocialicoPlus-Plus.woff2") format("woff2"), url("../fonts/WEB/SocialicoPlus-Plus.woff") format("woff"), url("../fonts/WEB/SocialicoPlus-Plus.ttf") format("truetype");
}
.header-top {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 10px;
  justify-content: center;
  justify-items: center;
}
@media (min-width: 600px) {
  .header-top {
    grid-template-columns: 1fr repeat(3, fit-content(50px));
    grid-gap: 20px;
    justify-items: end;
  }
}
.header-top .fullwidth {
  grid-column: 1/2;
}
@media (min-width: 600px) {
  .header-top .fullwidth {
    grid-column: 1/2;
    justify-self: start;
  }
}

.logo {
  font-family: "Monoton", sans-serif !important;
  font-size: 4rem;
  background: url("../img/sleeping_rabbit_logo.png") no-repeat center;
  background-size: 100%;
}
.logo a {
  font-display: none;
  opacity: 0;
}

[class^=icon-]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-up-open-big {
  display: inline-block;
}

.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  transform: rotateX(180deg);
  color: black;
  transition: color 0.3s;
}

.icon-up-open-big:hover:after {
  color: white;
}

.scroll-icon {
  position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
  transform: translateX(-50%);
}

/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.l-left {
  float: left;
}

.l-right {
  float: right;
}

.end {
  margin-top: 30px;
  font-size: 3em;
  font-weight: bold;
  opacity: 0;
  transform: translateY(300px);
  transition: opacity, transform 1s;
  transition-delay: 1s;
}

/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

html {
  font-size: 62.5%;
}

body {
  color: white;
  letter-spacing: 0.18em;
}
body .dark {
  color: gray;
}

a {
  text-decoration: none;
  color: white;
}

ul, li {
  list-style-type: none;
}

.social-ico {
  font-family: "SocialIco", Arial, Helvetica, sans-serif;
  font-size: 8em;
}

.social-ico-plus {
  font-family: "SocialIcoPlus", Arial, Helvetica, sans-serif;
  font-size: 8em;
}

/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-top {
  background: rgba(0, 47, 77, 0.3);
  height: 70px;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  box-sizing: border-box;
}

h1 {
  line-height: 70px;
  height: 70px;
}

h1 a {
  display: block;
  padding: 0 10px;
}

.toggle-menu {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  top: 10px;
}

.toggle-menu i {
  position: absolute;
  display: block;
  height: 2px;
  background: white;
  width: 30px;
  left: 10px;
  transition: all 0.3s;
}

.toggle-menu i:nth-child(1) {
  top: 16px;
}

.toggle-menu i:nth-child(2) {
  top: 24px;
}

.toggle-menu i:nth-child(3) {
  top: 32px;
}

.open-menu i:nth-child(1) {
  top: 25px;
  transform: rotateZ(45deg);
}

.open-menu i:nth-child(2) {
  background: transparent;
}

.open-menu i:nth-child(3) {
  top: 25px;
  transform: rotateZ(-45deg);
}

nav {
  height: 0;
  opacity: 0;
  box-sizing: border-box;
  background: rgba(0, 47, 77, 0.25);
  position: fixed;
  top: 70px;
  width: 100%;
  transition: all 3s;
}

.open-menu ~ nav {
  opacity: 1;
  padding: 80px 0;
  z-index: 15;
  height: calc(90vh - 70px);
}

nav ul {
  padding: 0 10px;
  display: flex;
}

nav li {
  flex: 1;
}

nav li a {
  font-size: 2em;
  display: block;
  padding: 30px;
  text-align: center;
  transition: background 0.3s;
}

nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
  background: #962D3E;
}

nav li:nth-child(even) a {
  background: #aa3346;
}

nav li:nth-child(odd) a:hover {
  background: #9e2f41;
}

nav li:nth-child(even) a:hover {
  background: #c53c52;
}

nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}

/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
  text-align: center;
}

li,
span,
h1,
h2,
h3,
h4,
h5,
p {
  font-family: "Noto+Sans", sans-serif;
}

h2 {
  font-size: 4em;
  margin-bottom: 20px;
}

h3 {
  font-weight: 300;
  font-size: 2.8em;
}

h4 {
  font-weight: 300;
  font-size: 2em;
}

li {
  margin: 10px 0;
  font-size: 1.5em;
}

.grid {
  display: grid;
}

.monoton {
  font-family: "Monoton", Arial, Helvetica, sans-serif;
  font-size: xxx-large;
  text-transform: lowercase;
}

.container {
  display: grid;
}
.container article {
  position: relative;
  top: 50%;
  text-align: center;
  transform: translate(0, -50%);
  padding: 1rem;
  height: 100vh;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

.s1 .left-main {
  background: #ff9e2c;
  grid-column: 1;
}
.s1 .left-main .article-text {
  margin: 40% auto;
}
.s1 .right-main {
  background: #b6701e url("../img/adam_blue.png") no-repeat right bottom;
  background-size: 100%;
  grid-column: 2;
}

.s2 {
  padding: 0 10%;
}

.s3 .article-text {
  margin: 20% auto;
  text-align: right;
}
.s3 .article-text .work-text {
  text-align: right;
}
.s3 .article-text .work-text h3 {
  font-weight: bold;
}
.s3 .long-article-text {
  margin: 18% 10%;
  text-align: left;
}

.s4 article {
  margin: 0 auto;
  height: 50%;
  width: 50%;
}
.s4 article video {
  width: 700px;
}
/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: white;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: transparent;
  box-sizing: border-box;
  border: 1px solid #24221F;
}

.fp-arrow.fp-prev {
  left: 10%;
}

.fp-arrow.fp-next {
  right: 10%;
}

.fp-controlArrow {
  top: 60% !important;
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin-top: 1px;
  }
  nav li a {
    font-size: 1.5em;
  }
  .scroll-icon {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  .logo a {
    font-display: none;
    opacity: 0;
  }
  .left-main .article-text {
    z-index: 5;
  }
  .left,
  .right {
    grid-column: unset;
  }
  .article-text {
    padding: 0 10%;
  }
  .monoton {
    font-size: 6em;
  }
  .s1 .right-main {
    background-image: none;
  }
  .s1 .left-main {
    background: #ff9e2c url("../img/adam_blue.png") no-repeat right bottom;
    background-size: 180%;
  }
  .s3 .article-text {
    text-align: center;
  }
  .s3 .article-text .work-text {
    text-align: center;
  }
  .s3 .long-article-text {
    text-align: center;
  }
  .s4 article .monoton {
    font-size: large;
  }
  .s4 article video {
    position: relative;
    left: -100px;
    margin: 0 auto;
    max-width: 400px;
  }
  .open-menu ~ nav {
    padding: 20px 0;
  }
  nav li a {
    padding: 3px;
  }
}/*# sourceMappingURL=main.css.map */