/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/* NAVIGATION * --------------------------------------- */


.outer-menu {
    position: fixed;
    top: 1rem;
    right: 4rem;
    z-index: 99;
}

#nav {
    list-style: none;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    padding-top: 30%;
    background-color: #000;
    color: #fff;
    opacity: 1;
}

#nav li {
    margin: 0 0 2rem 0;
}

#nav li.active a {
    color: #f28c00;
}

.fp-slidesNav.bottom {
    bottom: 0;
    background-color: #000;
    width: 100%;
    height: 60px;
    padding-top: 15px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
background-color: #fff;
}

.fp-controlArrow {
/*display: none;*/
top:initial;
bottom: 20px;
z-index: 9999;
border: none;
}

.fp-controlArrow.fp-next {
    right: 50px;
    background-image: url(../img/arrow-right.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 15px;
    width: 10px;
}

.fp-controlArrow.fp-prev {
    left: 50px;
    background-image: url(../img/arrow-left.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 15px;
    width: 10px;
}

.next-link {
left: 5%;
width: 90%;
text-align: center;
z-index: 999;
background-image: url(../img/arrow-down.svg);
}

#start .next-link {
position: absolute;
bottom:20px;
z-index: 999;
}

#nav li a, .next-link {
background-repeat: no-repeat;
background-position: center 2.2rem;
padding-bottom: 2.5rem;
}

a:hover {
color: #f28c00;
}

#team2 a:hover {
color: #fff;
}

.next-slide {
position: absolute;
bottom: 20px;
right: 20px;
}


/* Color * --------------------------------------- */

.fp-viewing-start-data .logo-icon { 
display: none;
	}
  
 .fp-viewing-team2-data .logo-icon, .fp-viewing-team2-data .outer-menu, .fp-viewing-work-data-0 .logo-icon, .fp-viewing-work-data-1 .logo-icon, .fp-viewing-work-data-2 .logo-icon, .fp-viewing-work-data-3 .logo-icon, .fp-viewing-work-data-0 .outer-menu, .fp-viewing-work-data-1 .outer-menu, .fp-viewing-work-data-2 .outer-menu, .fp-viewing-work-data-3 .outer-menu, .fp-viewing-work-data-4 .outer-menu, .fp-viewing-work-data-5 .outer-menu, .project-active .outer-menu{ 
 display: none;
 }

.fp-viewing-start-data #nav, .fp-viewing-team-data #nav, .fp-viewing-team-data .logo-icon { 
    color: #fff;
    fill: #ffffff;
	}


.fp-viewing-start-data .outer-menu .hamburger div, .fp-viewing-team-data .outer-menu .hamburger div { 
    color: #fff;
    background-color: #fff;
	}

#start, #team, #team2, #work, #work-detail, #footer { 
    color: #fff;
    background-color: #000;
	}
  
@media (max-width: 1000px) {
  .nav-active .outer-menu .hamburger div {
    color: #fff;
    background-color: #fff;
}
}


/* LAYOUT * --------------------------------------- */
/*

.grid [class*='size'], .grid, grid img { 
    width: 100%; 
}

.grid size1of2 {
    height:50%;
}
*/

.project-active {
    height: 100%;
    width:100%;
    background-color: #000;
    color: #fff;
}

#work-detail {
display: none;
}

#work-detail h1 {
    position: absolute;
    font-size: 1.9rem;
    top: 10px;
    left: 5%;
    width: 90%;
    text-align: left;
    z-index: 999;
    margin: 0;
}

#work-detail .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    z-index: 999;
}

#work-detail .close-button img {
    width: 18px;
}

#work-detail .slide img {
    max-height: 70%;
}

#work-detail video {
    max-height: 70%;
    width: 100%;
}

#impressum {
padding-top: 200px;
max-width: 600px;
margin: 0 auto;
}


/*-----------ANIMATION-----------*/

#team2 .item {
height: 50%;
background-position: top;
}

#team2 .item.moveDown{
	-webkit-transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    margin-top: 0;
	}
#team2 .item.moveUp{

	-webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    height: 50%;
	}


/* Centered texts in each section
	* --------------------------------------- */
	.section {
		text-align:center;
		overflow: hidden;
	}

.content {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 30px;
    margin-top: 30px;
}


/* start video * --------------------------------------- */
#start { 
z-index: 50;
	}

	#myVideo{
  display: none;
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
     background-image: /* our video */;
      background-position: center center;
      background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:50;
	}
  
video[poster], #start {
background-size: 100% 100%;
background-image: /* our video */;
background-position: center center;
background-size: contain;
   	object-fit: cover; /*cover video background */
    background-repeat: none;
}

	/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#start .layer{
		position: absolute;
		z-index: 98;
		width: 100%;
		left: 0;
		top: 18vh;

		/* 
		* Preventing flicker on some browsers 
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#start {
		overflow: hidden;
	}


	/* Hiding video controls 
	* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
	* --------------------------------------- */
	#start video::-webkit-media-controls {
	  display:none !important;
	}

.logo-icon {
display: none;
}

.logo {
    width: 170px;
    margin-bottom: 2rem;
}

.svg {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.grid img {
	display: block;
	width: 100%;
}

#team2 .fp-tableCell, #work .fp-tableCell {
     vertical-align: middle;
     overflow: hidden;
}

.grid, .item {
vertical-align: middle;
overflow: hidden;
height: inherit;
}

.item {
position: relative;
display: block;
visibility: visible;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
opacity:1;
transition: opacity 0.3s linear;
}

#work .item {
height: 50%;
height: calc(26% - 20px);
background-position: center;
}

#work .item:hover {
cursor: pointer; 
cursor: hand;
}

#team2 .first {
-webkit-transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
margin-top: 100vh;
}

#team2 .second {
-webkit-transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
margin-top: -100vh;
}

.item-info {
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
visibility: hidden;
opacity:0;
transition: visibility 0.5s linear, opacity 0.5s linear;
background-color:rgba(0,0,0,0.8);
padding: 3%;
color: #fff;
height: 100%;
width: 100%;
z-index: 99;
display: table;
}

#team2 .item-info {
text-align: left;
}

#work .item-info {
text-align: center;
}

#team2 .item-info-content {
display: none;
}

#team2 .item-info-content.mobile {
display: block;
}

#work .item-info p {
display: none;
}

.item:after {
content: '';
position: absolute;
top: 0;
left: 0;
visibility: hidden;
height: 100%;
width: 100%;
opacity:0;
background-color:rgba(0,0,0,0.8);
transition: visibility 0.5s linear, opacity 0.5s linear;
z-index: 98;
}

.item:hover:after {
opacity:0.2;
visibility: visible;
}

.item .info-button {
position: absolute;
top: 10px;
right: 10px;
width: 18px;
z-index: 999;
transition: transform 0.2s ease-in-out;
}

.item .info-button.active {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}

.info-container-center {
display: table-cell;
vertical-align: middle;
}


  
  
  /* TYPOGRAFIE * --------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:700');

html {
	font-size: 62.5%; /*1.5rem = 15px :) */
    height: 100%;
}

body {
    font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.4;
    letter-spacing: 0.05rem;
	font-weight: 300;
    font-style: normal;
	font-family: 'Open Sans', sans-serif;
	color: #000;
    
}

	h1 {
		font-size: 2.5rem;
    line-height: 1.3;
		margin: 2rem 0 2rem 0;
		padding:0;
    font-family: 'Playfair Display', serif;
    -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
   font-weight: 700;
	}

#team2 h1 {
		font-size: 2.5rem;
		margin: 0 0 2rem 0;
	}
  
  h2 {
		font-size: 1.7rem;
    line-height: 1.3;
		margin: 0 0 1rem 0;
		padding:0;
    font-family: 'Playfair Display', serif;
    -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
   font-weight: 700;
	}
  
  	h3 { 
		font-size: 1.1rem;
    line-height: 1.3rem;
		margin: 0 0 0.5rem 0;
		padding:0;
    -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
   font-weight: 300;
   text-transform: uppercase;
   letter-spacing: 0.2rem;
	}

p {
    font-size: 1.3rem;
    line-height: 1.5;
    padding: 0 0 1rem 0;
}

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

#nav, .next-link {
text-transform: uppercase;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.1rem;
}

.button {
border: 1px solid #f28c00;
text-transform: uppercase;
padding: 10px;
width: 70%;
    margin-left: 15%;
font-size: 1.1rem;
letter-spacing: 0.2rem;
outline: none;
display: block;
}

.content ul, .item-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

#awards .content ul {
text-transform: uppercase;
letter-spacing: 0.1rem;
font-size: 1rem;
}

.content li, .item-info li {
display:inline-block;
}

.content ul li:before, .item-info ul li:before {
    content:'';
    display:inline;
    background-image:url('../img/list_bullet.svg');
    background-position: 50% 50%;
    background-size:contain; 
    background-repeat:no-repeat; 
    width: 4px;
    height: 4px;
    padding-right: 4px;
    margin: 0 5px 0 0;
}

#footer {
padding: 30px;
}
#footer, #footer p {
text-transform: uppercase;
letter-spacing: 0.1rem;
font-size: 1rem;
}

  
/*-----------TABLET DESKTOP LAYOUT-----------*/

  @media only screen and (min-device-width : 200px) and (max-device-width : 750px) and (orientation : landscape), (min-width: 750px) {
  /*
-----------Grid Formatting-----------
*/	
.grid:after { content: ""; display: table; clear: both; }
.grid .size1of1 { float: none; width: 100%; } 
.grid .size1of2 { width: 50%; }
.grid .size1of3 { width: 33.33333%; }
.grid .size2of3 { width: 66.66666%; }
.grid .size1of4 { width: 25%; }
.grid .size3of4 { width: 75%; }
.grid .size1of5 { width: 20%; }
.grid .size2of5 { width: 40%; }
.grid .size3of5 { width: 60%; }
.grid .size4of5 { width: 80%; }
.grid .size1of6 { width: 16.6666666%; }
.grid .size5of6 { width: 83.3333333%; }
.grid .size1of7 { width: 14.2857143%; }
.grid .size2of7 { width: 28.5714286%; }
.grid .size3of7 { width: 42.8571429%; }
.grid .size4of7 { width: 57.1428572%; }
.grid .size5of7 { width: 71.4285715%; }
.grid .size6of7 { width: 85.7142858%; }
.grid .size1of8 { width: 12.5%; }
.grid .size3of8 { width: 37.5%; }
.grid .size5of8 { width: 62.5%; }
.grid .size7of8 { width: 87.5%; }
.grid [class*='size'] { float: left; }

/*
-----------Gutter Formatting-----------
*/
.gutter.grid {
	margin-left: -20px;
}
.gutter.grid [class*='size'] { padding: 0 0 20px 20px; }


/*
-----------Non-Semantic Helper Classes-----------
*/
.borderBox,  .grid,  .grid:after,  .grid:before,  .grid [class*='size'],  .grid [class*='size']:after,  .grid [class*='size']:before,  section {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/*
-----------LAYOUT-----------
*/

#nav {
    padding-top: 20vh;
}
  
#team2 .item {
height: 100%;
background-position: top;
}
      
      
#work .item {
height: 50%;
height: calc(50% - 30px);
}
      
.button {
font-size: 1.3rem;
padding: 10px;
}
      
#work-detail h1 {
    position: absolute;
    top: 40px;
    left: 25%;
    width: 50%;
    text-align: center;
    z-index: 999;
}
      
#work-detail .close-button {
    top: 50px;
    right: 50px;
    width: 23px;
}

#work-detail .close-button img {
    width: 23px;
}
      
/*-----------ANIMATION-----------*/
#team2 .item.moveDown{
	-webkit-transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
    margin-top: 0;
	}
.moveUp{

	-webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    height: 100%;
	}
      

}

/*-----------DESKTOP LAYOUT-----------*/
@media (min-width: 750px) {

.logo {
    width: 200px;
    margin-bottom: 5rem;
}
      
.outer-menu {
    position: fixed;
    top: 3rem;
    right: 6rem;
    z-index: 99;
}
      
.logo-icon {
display: block;
position: fixed;
top:3rem;
left: 3rem;
width: 4rem;
z-index: 40;
}
      
#nav {
    height: 50px;
    background-color: transparent;
    padding-top: 3.5rem;
    color: inherit;
}
      
#nav li {
    display: inline;
    margin: 0 1rem 0 1rem;
}

#nav li.active a {
    color: #f28c00;
    background-image: url(../img/arrow-down.svg);
}
      
#start .layer{
		top: 30vh;
	}

.content {
    width: 50%;
    margin-left: 25%;
}

.next-link {
position: absolute;
bottom:20px;
z-index: 999;
}

#myVideo{
display: block;
	}
  
#start {
background-image: none;
}

.item-info {
padding:50px;
}

#team2 .item-info-content {
display: block;
}

#team2 .item-info-content.mobile {
display: none;
}
      
#work .item-info p {
display: block;
}
      
.item .info-button {
top: 50px;
right: 50px;
width: 23px;
}

#team2 .item-info-content {
position: absolute;
bottom: 40px;
padding-right: 50px;
}

#team2 .item {
background-position: center;
}



/* TYPOGRAFIE * --------------------------------------- */
body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
}

h1 {
    font-size: 4.0rem;
    line-height: 1.3;
    margin: -1rem 0 5rem 0;
}
      
#team2 h1 {
		font-size: 3.8rem;
    line-height: 1.3;
		margin: -2rem 0 2rem 0;
	}

h2 {
    font-size: 3.0rem;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

#team2 h2 {
		font-size: 2.2rem;
    line-height: 1.3;
		margin: 0 0 1.5rem 0;
	}

h3 {
    font-size: 1.3rem;
    line-height: 1.3rem;
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.2rem;
}

p {
    font-size: 1.5rem;
    line-height: 1.5;
}

#nav, .next-link {
text-transform: uppercase;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.1rem;
}

.content {
    max-width: 750px;
    margin: 0 auto;
}

}