.app-gradient {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfceca+35,b3b2af+100 */
  background: #cfceca;
  /* Old browsers */
  background: -moz-linear-gradient(top, #cfceca 35%, #b3b2af 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #cfceca 35%, #b3b2af 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #cfceca 35%, #b3b2af 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfceca', endColorstr='#b3b2af', GradientType=0);
  /* IE6-9 */
}
.forground-gradient {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2b2af+35,c7c7c4+100 */
  background: #b2b2af;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b2b2af 35%, #c7c7c4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b2b2af 35%, #c7c7c4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b2b2af 35%, #c7c7c4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b2b2af', endColorstr='#c7c7c4', GradientType=0);
  /* IE6-9 */
}
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.spinner {
  margin: 20px auto 0;
  width: 70px;
  text-align: center;
  opacity: 0;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #e73d0f;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake-rotate
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-rotate {
  display: inline-block;
  transform-origin: center center;
}
.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused;
}
.shake-freeze:hover,
.shake-trigger:hover .shake-freeze,
.shake-rotate:hover,
.shake-trigger:hover .shake-rotate {
  animation-play-state: running;
}
@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  4% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  6% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  8% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  10% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  12% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  14% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  16% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  18% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  20% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  22% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  24% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  26% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  28% {
    transform: translate(0, 0) rotate(5.5deg);
  }
  30% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  32% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  34% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  36% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  38% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  40% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  42% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  44% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  46% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  48% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  50% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  52% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  54% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  56% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  58% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  60% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  62% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  64% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  66% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  68% {
    transform: translate(0, 0) rotate(-3.5deg);
  }
  70% {
    transform: translate(0, 0) rotate(-3.5deg);
  }
  72% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  74% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  76% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  78% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  80% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  82% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  84% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  86% {
    transform: translate(0, 0) rotate(-2.5deg);
  }
  88% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  90% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  92% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  94% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  96% {
    transform: translate(0, 0) rotate(5.5deg);
  }
  98% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-rotate:hover,
.shake-trigger:hover .shake-rotate,
.shake-rotate.shake-freeze,
.shake-rotate.shake-constant {
  animation-name: shake-rotate;
  animation-duration: 2000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
body {
  background: #FCF9F9;
  font-family: 'Roboto Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1vw;
}
body a {
  color: #e73d0f;
  text-decoration: none;
}
.content-preloader {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 6666;
  width: 100%;
  background: #e5e2da;
  top: 7vH;
  height: 93vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .content-preloader {
    top: 10vH;
    height: 90vH;
  }
}
@media (min-width: 992px) {
  .content-preloader {
    top: 9vH;
    height: 91vH;
  }
}
.content-preloader .spinner {
  margin: 20px auto 0;
  margin-top: 45vH;
  width: 70px;
  text-align: center;
  opacity: 1;
}
.restart-elemenets {
  display: none;
  position: fixed;
  z-index: 111;
  width: 100vW;
  height: 100vH;
  background: rgba(255, 255, 255, 0.8);
}
.restart-elemenets .smartphone {
  width: 200px;
}
.restart-elemenets .restart-btn {
  margin-top: 25px;
  width: 200px;
  background: #e73d0f;
  color: #fff;
  text-align: center;
  padding: 10px 15px 10px 15px;
  font-size: 24px;
  -webkit-border-radius: 10px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 10px;
  -moz-background-clip: padding;
  border-radius: 10px;
  background-clip: padding-box;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.restart-elemenets .restart-btn:hover {
  background: #cf370d;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.superOUT {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 0
	padding: 20px;
  background: #e73d0f;
  color: white;
  cursor: pointer;
  font-size: 12px;
}
.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  /* ================================================================ INTRO */
  /* ================================================================ APP */
  /* ================================================================ CONTENT */
}
.wrap .intro {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.wrap .intro .bg {
  width: 100%;
  height: 100%;
  background: #e5e2da;
}
.wrap .intro .bg img {
  width: 100%;
}
.wrap .intro .bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.wrap .intro .intro-animation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vW;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .intro .intro-animation {
    left: 50%;
    margin-left: -40vH;
    top: 0;
    width: 80vH;
  }
}
@media (min-width: 768px) {
  .wrap .intro .intro-animation {
    top: 0;
    left: 5vW;
    width: 90vW;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .intro .intro-animation {
    left: 50%;
    margin-left: -35vH;
    top: 0;
    width: 70vH;
  }
}
@media (min-width: 1200px) {
  .wrap .intro .intro-animation {
    left: 50%;
    margin-left: -40vH;
    top: 0;
    width: 80vH;
  }
}
.wrap .intro .bg-img {
  position: absolute;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  opacity: 0.6;
  width: 100%;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.wrap .intro .bg-img.blurMore {
  -webkit-filter: blur(9px);
  -moz-filter: blur(9px);
  -ms-filter: blur(9px);
  filter: blur(9px);
}
.wrap .intro .intro-animation-elements {
  position: absolute;
  top: 40vH;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrap .intro .circle {
  z-index: 1;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 15px;
  opacity: 0;
}
.wrap .intro .subheadline {
  z-index: 1;
  width: 70%;
  margin-left: 15%;
  margin-bottom: 5px;
  opacity: 0;
}
.wrap .intro .headline {
  z-index: 1;
  width: 90%;
  margin-left: 5%;
  top: 75%;
  opacity: 0;
}
.wrap .intro .logo {
  position: absolute;
  z-index: 6;
}
.wrap .intro .logo-swr {
  width: 15vW;
  left: 2vW;
  bottom: 1.5vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .intro .logo-swr {
    width: 10vW;
    left: 0.5vW;
    bottom: 1.1vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .intro .logo-swr {
    width: 7vW;
    left: 1.5vW;
    bottom: 2vH;
  }
}
.wrap .intro .logo-planet-schule {
  width: 22vW;
  right: 1.5vW;
  bottom: 0.3vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .intro .logo-planet-schule {
    width: 12vW;
    right: 0.5vW;
    bottom: 0.65vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .intro .logo-planet-schule {
    width: 12vW;
    right: 1.5vW;
    bottom: 1.2vH;
  }
}
.wrap .app {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrap .app .inner {
  height: 100%;
  /*position: relative;
			width: 100%;
			border: 1px solid fade( #000, 20 );
			overflow: hidden;*/
}
@media (min-width: 1200px) {
  .wrap .app .inner {
    height: inherit;
  }
}
.wrap .app .inner .header-wrap {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: #e73d0f;
  z-index: 7;
  height: 7vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap {
    height: 10vH;
  }
}
@media (min-width: 992px) {
  .wrap .app .inner .header-wrap {
    height: 9vH;
  }
}
.wrap .app .inner .header-wrap .header {
  width: 100%;
  height: 98%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.33));
  -moz-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.33));
  -ms-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.33));
  background: #e5e2da;
}
.wrap .app .inner .header-wrap .header .logo-type {
  position: absolute;
  left: 3vW;
  top: 1vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .logo-type {
    left: 1vW;
    top: 0vH;
  }
}
@media (min-width: 992px) {
  .wrap .app .inner .header-wrap .header .logo-type {
    top: 0vH;
  }
}
.wrap .app .inner .header-wrap .header .logo-type h1 {
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  color: #e73d0f;
  margin: 0;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 3.4vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .logo-type h1 {
    font-size: 6.2vH;
  }
}
@media (min-width: 992px) {
  .wrap .app .inner .header-wrap .header .logo-type h1 {
    font-size: 5.5vH;
  }
}
.wrap .app .inner .header-wrap .header .nav {
  position: absolute;
  display: none;
  width: 100%;
  padding-top: 4.1vH;
  padding-right: 1vW;
  font-size: 2vH;
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .nav {
    display: block;
  }
}
.wrap .app .inner .header-wrap .header .nav li {
  float: right;
  list-style: none;
  display: inline-block;
  display: none;
  margin-left: 1%;
  color: #e73d0f;
}
.wrap .app .inner .header-wrap .header .nav li.nav-Wirbel {
  display: block;
}
.wrap .app .inner .header-wrap .header .nav-mobile {
  position: absolute;
  width: 40%;
  left: 60%;
  font-size: 3vH;
  padding-left: 0;
  top: 7vH;
  background: rgba(229, 226, 218, 0.7);
  display: none;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .nav-mobile {
    top: 10vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .nav-mobile {
    display: none;
  }
}
.wrap .app .inner .header-wrap .header .nav-mobile li {
  list-style: none;
  border-bottom: 1px solid rgba(231, 61, 15, 0.5);
  padding-top: 1vH;
  padding-bottom: 0.6vH;
  padding-left: 3vW;
  display: none;
}
.wrap .app .inner .header-wrap .header .nav-mobile li.nav-Wirbel {
  display: block;
}
.wrap .app .inner .header-wrap .header .hamburger {
  position: absolute;
  width: 2.8vH;
  right: 4vW;
  top: 2.2vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .hamburger {
    width: 5vH;
    right: 1vW;
    top: 2.5vH;
  }
}
@media (min-width: 768px) {
  .wrap .app .inner .header-wrap .header .hamburger {
    width: 2.8vH;
    right: 3vW;
    top: 2.4vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .app .inner .header-wrap .header .hamburger {
    display: none;
  }
}
.wrap .app .inner .bg {
  width: 100%;
}
.wrap .app .inner .app-bg {
  position: absolute;
  width: 100%;
}
.wrap .app .inner #app-bg-1 {
  top: 0;
  left: 0;
  height: 72.5%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfceca+35,b3b2af+100 */
  background: #cfceca;
  /* Old browsers */
  background: -moz-linear-gradient(top, #cfceca 35%, #b3b2af 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #cfceca 35%, #b3b2af 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #cfceca 35%, #b3b2af 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfceca', endColorstr='#b3b2af', GradientType=0);
  /* IE6-9 */
}
.wrap .app .inner #app-bg-img {
  position: absolute;
  background: rgba(47, 47, 47, 0.1);
  top: 0;
  width: 90%;
  height: 72.5%;
  left: 5%;
  padding-top: 25vH;
  padding-bottom: 2.5%;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner #app-bg-img {
    padding-top: 12vH;
    padding-bottom: 1%;
  }
}
@media (min-width: 768px) {
  .wrap .app .inner #app-bg-img {
    padding-top: 12vH;
    padding-bottom: 1%;
  }
}
.wrap .app .inner #app-bg-img img {
  height: 100%;
  width: 100%;
}
.wrap .app .inner #app-bg-2 {
  background: #e3e3e3;
  top: 72.5%;
  left: 0;
  height: 5%;
}
.wrap .app .inner #app-bg-3-wrap {
  top: 77.5%;
  left: 0;
  height: 22.5%;
  background: #e73d0f;
}
.wrap .app .inner #app-bg-3-wrap #app-bg-3 {
  height: 99%;
  bottom: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2b2af+35,c7c7c4+100 */
  background: #b2b2af;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b2b2af 35%, #c7c7c4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b2b2af 35%, #c7c7c4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b2b2af 35%, #c7c7c4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b2b2af', endColorstr='#c7c7c4', GradientType=0);
  /* IE6-9 */
}
.wrap .app .inner #app-bg-3-wrap #bones-bg {
  display: none;
  position: absolute;
  height: 99%;
  width: 50%;
  left: 25%;
  bottom: 0;
  background: rgba(47, 47, 47, 0.1);
}
.wrap .app .inner #canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  /*top: 8vH;

				@media @for-phone-landscape{
					top: 11vH;
				}

				@media @for-tablet-landscape-up{
					top: 10vH;
				}*/
}
.wrap .app .inner #canvas-container canvas {
  z-index: 1;
}
.wrap .app .inner .info-box {
  display: none;
  position: absolute;
  z-index: 3333;
  width: 14%;
  height: 7.5%;
  background: #e5e2da;
  top: 55%;
  text-align: center;
  -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.33));
  -moz-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.33));
  -ms-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.33));
}
@media (min-width: 768px) {
  .wrap .app .inner .info-box {
    display: block;
    display: none;
  }
}
.wrap .app .inner .info-box .info-box-top {
  height: 49%;
  background: rgba(47, 47, 47, 0.6);
  color: #e5e2da;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2%;
  padding-top: 2%;
}
.wrap .app .inner .info-box .info-box-bottom {
  height: 51%;
  letter-spacing: 2%;
  padding-top: 2%;
  color: #2f2f2f;
}
.wrap .app .inner .info-box#info-box-hum {
  left: 8%;
}
.wrap .app .inner .info-box#info-box-ape {
  right: 8%;
}
.wrap .app .inner .logo {
  position: absolute;
  z-index: 6;
}
.wrap .app .inner .logo-swr {
  width: 15vW;
  left: 2vW;
  bottom: 1.5vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .logo-swr {
    width: 10vW;
    left: 0.5vW;
    bottom: 1.1vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .app .inner .logo-swr {
    width: 7vW;
    left: 1.5vW;
    bottom: 2vH;
  }
}
.wrap .app .inner .logo-planet-schule {
  width: 22vW;
  right: 1.5vW;
  bottom: 0.3vH;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .app .inner .logo-planet-schule {
    width: 12vW;
    right: 0.5vW;
    bottom: 0.65vH;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wrap .app .inner .logo-planet-schule {
    width: 12vW;
    right: 1.5vW;
    bottom: 1.2vH;
  }
}
.wrap .content {
  position: absolute;
  z-index: 3;
  top: 72.5%;
  left: 0;
  height: 27.5%;
  width: 100%;
  text-align: center;
  background: #2f2f2f;
  display: none;
}
.wrap .content .arrow-up {
  z-index: 1111;
  position: absolute;
  width: 120px;
  left: 50%;
  margin-left: -60px;
  margin-top: -33px;
  cursor: pointer;
}
.wrap .content .arrow-up .arrow-up-line {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #e5e2da;
  stroke: #e73d0f;
  stroke-miterlimit: 10;
  stroke-width: 1;
}
@media (min-width: 768px) {
  .wrap .content .arrow-up .arrow-up-line {
    stroke-width: 2;
  }
}
.wrap .content .arrow-up .arrow-up-fill {
  fill: #e73d0f;
}
.wrap .content #arrow-up-down {
  display: none;
}
.wrap .content .headline-wrap {
  position: absolute;
  height: 20%;
  background: #e73d0f;
  width: 100%;
}
.wrap .content .headline-wrap .headline {
  width: 100%;
  position: absolute;
  height: 96%;
  top: 4%;
  background: #e5e2da;
  font-family: 'Roboto Slab', sans-serif;
}
.wrap .content .headline-wrap .headline h2 {
  padding-top: 0.6vH;
  font-size: 3vH;
  text-transform: uppercase;
  color: #e73d0f;
  letter-spacing: 1px;
}
.wrap .content .headline-wrap .headline .closeBTN {
  position: absolute;
  top: 1.25vH;
  right: 1vW;
  text-transform: uppercase;
  color: #e73d0f;
  font-size: 2vH;
  cursor: pointer;
}
.wrap .content .text {
  overflow-y: scroll;
  position: absolute;
  top: 20%;
  height: 80%;
  width: 100%;
  background: #f8f8f8;
  color: #262626;
}
.wrap .content .text .inner {
  position: relative;
  padding-top: 1vH;
}
.wrap .content .text .inner h3 {
  padding-top: 1vH;
  display: inline-block;
  margin: 0;
}
.wrap .content .text .inner p {
  width: 90%;
  margin-left: 5%;
  font-size: 3.75vW;
}
@media (min-width: 544px) and (orientation: landscape) {
  .wrap .content .text .inner p {
    font-size: 2.2vW;
  }
}
@media (min-width: 768px) {
  .wrap .content .text .inner p {
    font-size: 2.3vH;
  }
}
@media (min-width: 992px) {
  .wrap .content .text .inner p {
    width: 80%;
    margin-left: 10%;
  }
}
.wrap .content .text .illu-1 {
  width: 420px;
}
.wrap .content .text .illu-2 {
  width: 290px;
}
.wrap .content.expand {
  top: 35%;
  height: 65%;
}
.wrap .content.expand .headline-wrap {
  height: 8%;
}
.wrap .content.expand .text {
  top: 8%;
  height: 92%;
}

/*# sourceMappingURL=../maps/dist.css.map */