@import 'https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900';

body, html{
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  margin: 0;
  padding: 0;
}

a{
  display: block;
  text-decoration: none;
  color: #231f20;
}

a.button{
  display: inline-block;
  font-weight: 200;
  font-style: normal;
  font-size: 0.9375rem;
  border: solid 1px #231f20;
  padding: 0.9375rem 1.875rem;
  margin-top: 2.5rem;
}

a.button:hover{
  background: #231f20;
  color: #fff;
}

img {
  display: block;
  max-width: 100%;
  margin: 0;
}

h2,h3,h4,h5,h6 {
  font-weight: 200;
  font-style: normal;
  color: #231f20;
  line-height: 1;
}

.style1:link {
  font-weight: 200;
  font-style: normal;
  font-size: 2rem;
  margin: 0;
  letter-spacing: normal;
  line-height: 1.1;
  color: darkslategray;
}
.style1:hover {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: darkslategray;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 4px;
}
.style2:link {
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  line-height: 0.8;
  color: #000000;
}
.style2:hover {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: darkslategray;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 4px;
}










button, button:focus, button:hover{
  -webkit-appearance: none;
  outline: 0;
  box-shadow: none;
}

::selection{
  background: #000000;
  color: #fff;
}

.row{
  position: relative;
  /* max-width: 2000px; */
  display: block;
  margin: 0 auto;
  padding: 2.813rem 1.563rem;
  box-sizing: border-box;
  overflow: auto;
}


.row.full{
  max-width: none;
}

.row.collapse .columns:first-child{
  padding-right: 0;
}

.row.collapse .columns:last-child{
  padding-left: 0;
}

.flex{
  display: -webkit-flex;
  display: flex;
}

.grid-item {
  width: 50%;
}

.large-15{
  width: 15%;
  float: left;
}

.large-33{
  width: 33.33%;
  float: left;
}

.large-50{
  width: 50%;
  float: left;
}

.large-70{
  width: 70%;
  float: left;
}

.large-75{
  width: 75%;
  float: left;
}

.large-50.float-right{
  float: right;
}

.large-25{
  width: 25%;
  float: left;
}

.large-100{
  width: 100%;
}

.columns{
  padding-left: 3.125rem;
  padding-right: 3.125rem;
  box-sizing: border-box;
}

.large-centered{
  display: block;
  float: none;
  margin: 0 auto;
}

.nav-bar{
  background: white;
  align-items: flex-end;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  padding: 1rem 3.125rem;	/* Distancer !!!*/
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 998;
}

.row.nav-bar{
  margin: 0 auto;
}

.row.nav-bar.menu {
  background: #ffffff; /* Bar!*/
}

.shark a{
  width: 5rem;
  cursor: pointer;
}

.shark a:hover svg text{
  fill: red;
}


		/* Klappe*/
		.klappe {
		  align-self: center;
		  position: relative;
		  padding: 0;
		  cursor: pointer;
		  transition-property: opacity, filter;
		  transition-duration: 0.15s;
		  transition-timing-function: linear;
		  font: inherit;
		  color: inherit;
		  text-transform: none;
		  background-color: transparent;
		  border: 0;
		  margin: 0;
		  overflow: visible;
		  z-index: 10;}
		.klappe-box {
		  width: 2.5rem;
		  height: auto;
		  display: inline-block;
		  position: relative; }
		.klappe-inner {
		  display: block;
		  top: 50%;
		  margin-top: -2px; }
		.klappe-inner, .klappe-inner::before, .klappe-inner::after {
			width: 2.5rem;
			height: 2px;
			background-color: #231f20;
			position: absolute;
			transition-property: transform;
			transition-duration: 0.15s;
			transition-timing-function: ease; }
		.nav-bar.menu .klappe-inner, .nav-bar.menu .klappe-inner::before, .nav-bar.menu .klappe-inner::after{
			background: #231f20;}
		.klappe-inner::before, .klappe-inner::after {
			content: "";
			display: block; }
		.klappe-inner::before {
			top: -0.625rem; }
		.klappe-inner::after {
			bottom: -10px; } /* 2to3 2to3 2to3 2to3 2to3 2to3 !!! */
		.klappe-hugger .klappe-inner {
			transition-duration: 0.075s;
			transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
		.klappe-hugger .klappe-inner::before {
			transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
			.klappe-hugger .klappe-inner::after {
			transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
		.klappe-hugger.is-active{
			margin-top: -10px;}
		.klappe-hugger.is-active .klappe-inner {
			transform: rotate(45deg);
			transition-delay: 0.12s;
			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
		.klappe-hugger.is-active .klappe-inner::before {
			top: 0;
			opacity: 0;
			transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
		.klappe-hugger.is-active .klappe-inner::after {
			bottom: 0;
			transform: rotate(-90deg);
			transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
		/* //Ende Klappe*/


h1, h1 a, h4, .nav a, .nav span, h2 {
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  display: block;
  margin: 0;
  letter-spacing: -0.25px;
}


h1 .viennoid, h1 a .viennoid {
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  display: block;
  margin: 0;
  letter-spacing: -0.25px;
}
.big-title {
  font-weight: 300;
  font-style: normal;
  font-size: 4rem;
  display: block;
  margin: 0;
  letter-spacing: -0.25px;
  text-align: center;
}
.getintouch {
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  display: block;
  margin: 0;
  letter-spacing: -0.25px;
  text-align: center;
}
.story h2, .feature h2 {
  text-transform: none;
}
.belted {
	width: 96%;
	max-width: auto;}
	
.courtesy {font-size: 0.9em; font-weight: 400;text-align: right; color: rgba(0,0,0,0.50)}

h2 span, p span{
  font-weight: 200;
  font-style: normal;
  text-transform: none;
}

nav.nav{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 5rem); /* BAR!*/
  z-index: 999;
  background: #ffffff;
  color: #231f20;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 3.125rem 0;
  box-sizing: border-box;
  text-align: center;
}

nav.nav.open{
  display: -webkit-flex;
  display: flex;
}

.nav a, .nav span{
  margin: 0 auto;
  color: #231f20;
}

.margin-top{
  margin-top: 5rem;
}

.links{
  width: 100%;
}

.story h2{
  font-size: 3.75rem;
  text-align: center;
}

.story p{
  text-align: center;
  margin-top: 0.5rem;
}

.story h2 span{
  margin-right: 0.5rem;
}

.story .feature h2 {
  font-weight: 200;
  font-style: normal;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1.1;
}

.texto a {
	font-size: 2em;
	font-weight: 300;
	font-style: italic;
	display: inline;
}

.texto a:hover {
  text-decoration: none;
  border-bottom: 1px solid #000000;
}







nav.nav .bottom .author {
  margin-top: 15px;
}


/* Tablet */
@media screen and (max-width: 63.9375em){

  .columns {
    padding-left: 1.562rem;
    padding-right: 1.562rem;
  }

  .row .row {
    padding: 1.562rem 0;
  }

  .nav-bar {
    background: #ffffff;
  }

  .small-100 {
    width: 100%;
  }
  
  .small-50{
    width: 50%;
    float: left;
  }

  .small-100{
    width: 100%;
    float: none;
  }

  .row{
    padding: 1rem 0;
  }

  .nav-bar{
    padding: 0 20px;
  }
	
  h1, h1 a, h4, 
  .nav a, 
  .nav span, 
  h2, 
  h3 span{
    font-size: 2rem;
  }
  h1 .viennoid, h1 a .viennoid {
    font-size: 2rem;
  }
.big-title {
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  display: block;
  margin: 0;
  letter-spacing: -0.25px;
  text-align: center;
}
  .klappe-inner, .klappe-inner::before, .klappe-inner::after{
    width: 2rem;
  }

  nav.nav{
    height: calc(100% - 3.5rem);
    padding: 0 0 3.125rem 0;
    overflow: scroll;
  }

  .links{
    margin-bottom: 2rem;
  }

  .row .row {
    padding: 0.781rem 0;
  }

  .row .large-50:last-child img{
    margin-top: 1.562rem;
  }

  .story h2 {
    font-size: 1.75rem;
  }

  .columns {
    padding-left: 1.562rem;
    padding-right: 1.562rem;
  }
}