@font-face {

  font-family: RobotoSlab;
  src: url(../RobotoSlab.ttf);
}
@font-face {

  font-family: PlayfairDisplay;
  src: url(../PlayfairDisplay.ttf);
}

body {

  background-color: #fff;
  margin: 0 0 0 0;
  overflow-x: hidden; /* shouldn't happen, but just as a precaution */
}
header {

  background-color: #b43;
  background-image: linear-gradient( 0deg, rgba( 127, 32, 32, 1 ) 0%, rgba( 127, 32, 32, 0 ) 10% );
  height: 450px;

	width: 100vw;
  color: white;
}
header > nav {

  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  
  display: flex;
  display: -webkit-flex;
  text-align: center;
  font: 13px RobotoSlab;
}
header > nav div {

  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
}
header > nav div a {
  
  color: white;
  flex: 1;
  -webkit-flex: 1;
  text-decoration: none;
  
  line-height: 60px;
  
  cursor: pointer;
  margin-bottom: -1px; /* small hack to get the orange line on top of the white one */
  transition: .2s color, .2s border-bottom-color;
  -webkit-transition: .2s color, .2s border-bottom-color;
  
}
header > nav div a:hover {

  color: #fd8;
  border-bottom: 1px solid #fd8;
}
header > nav div a.active {

  color: orange;
  border-bottom: 1px solid orange;
}
header > nav div#logo {

  font: 23px PlayfairDisplay;
}
header > nav div#internal-links {

  width: 660px;
}
header > nav div#email {

  flex: none;
  -webkit-flex: none;
  width: 40px;
  text-align: right;
  margin-right: 20px;
  margin-left: 8vw;
}
header > nav div#email a#email-wrapper {

  margin-top: 10px;
  height: 40px;
  background-image: url(../mail-icon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 14px;
  border: 1px solid white;
  border-radius: 20px;
  font-size: 40px;
}
header > div#slider {
	
  width: 100vw;
  height: 360px;
	
  position: absolute;
  top: 90px;
	
	overflow-x: hidden;
}
header div#switcher {

  width: 100%;
  height: 100%;
	
  display: flex;
  display: -webkit-flex;
		
  position: absolute;
  left: 0;
	
	font-family: RobotoSlab;
	
	transition: left 1s;
	-webkit-transition: left 1s;
}
header div#switcher.books { left: 0 }
header div#switcher.music { left: -100vw }
header div#switcher.movies { left: -200vw }

header div#switcher > div {
	
  width: 0px; /* effing safari */
  padding: 0 calc( 50% + 360px ) 0 calc( 50% - 360px );
}
header div#switcher > div > h1 {

  width: 400px;
  margin-top: -5px;
  margin-bottom: -10px;
  font-size: 43px;
  text-shadow: 0 0 10px #8B4323; /* rgba(0,0,0,.6) */
  color: orange;
}
header div#switcher > div > h2 {

  margin: 5px;
  width: 400px;
  color: orange;
  font-size: 21px;
  font-weight: 500;
}
header div#switcher > div > hr {
	
  width: 400px;
  border-color: rgba(0,0,0,.2);
}
header div#switcher > div > p {

  margin-top: 13px;
  font-size: 15px;
  width: 400px;
}
header div#switcher > div > p > a {

  font-size: 16px;
  color: #faa;
}
a.appstore { /* no full indicators because this is used somewhere else aswell */

  color: white;
  text-decoration: none;
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  border: 1px solid white;
  padding: 4px 4px 4px 4px;
  border-radius: 5px;
  font: 10px Verdana;
  width: 120px;
		
  margin-top: 25px;
  margin-left: 10px;
  height: 33px;
}
a.appstore > div {

  padding-left: 5px;
}
a.appstore > div > span:nth-of-type(2){

  font-size: 17px;
}
main > div#get {
		
	padding-left: calc( 50vw - 300px );
  width: calc( 50vw + 300px );
  background-image: radial-gradient( ellipse 120px 10px at 71.7vw 50px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% );
	background-color: #622;
	height: 100px;
	line-height: 100px;
	color: white;
	font-size: 20px;
	font-family: RobotoSlab;
		
	display: flex;
	display: -webkit-flex;
}
main > img#phone {

  position: absolute;
  height: 38.4vw;
  left: 62.5vw;
  top: calc( 500px - 38.5vw  );
}
main > div#background {
  background-color: black;

  position: absolute;
  height: 27.58vw;
  width: 15.8vw;
  left: 63.85vw;
  top: calc( 500px - 32.98vw );
	
	transition: background 1s;
	-webkit-transition: background 1s;
}
main > div#background.books { background-image: url( books.png ); }
main > div#background.music { background-image: url( music.png ); }
main > div#background.movies { background-image: url( movies.png ); }

main > div#get > a.social {
	
  font: 16px Verdana;
  line-height: 25px;
  width: 25px;
  height: 25px;
  margin-top: 32px;
  margin-left: 30px;
  margin-right: -20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 5px;
}

main > div#content {
  background-color: #eee;
  height: 300px;
  width: 100%;
  font: 15px RobotoSlab;
}
main > div#content > article {
  position: absolute;
  opacity: 0;
  width: 500px;
  padding-left: calc( 50% - 250px );


  left: -500px;
  transition: opacity 1s, left 1s;
  -webkit-transition: opacity 1s, left 1s;

}
main > div#content > article.active {
  opacity: 1;
  left: 0;
  transition: opacity 2s, left 2s;
  -webkit-transition: opacity 2s, left 2s;
}
main > div#content > article > h1 {

  color: #732;
  font-family RobotoSlab;
}

main > div#features {
	
  width: 720px;
  padding: 20px calc( 50vw - 360px ) 50px calc( 50vw - 360px );
  background-color: #ddd;
  color: #744;
	
  display: flex;
  display: -webkit-flex;
}
main > div#features > div {
	
	flex: 1;
	-webkit-flex: 1;
	text-align: center;
	font: 18px RobotoSlab;
	padding: 5px 30px 5px 30px;
}
main > div#features > div#middle {
	
	border-left: 1px solid rgba(0,0,0,.1);
	border-right: 1px solid rgba(0,0,0,.1);
}
main > div#features > div > img {
	height: 100px;
}

footer {

  position: fixed;
  bottom: 0;
  width: 100%;
  height: 25px;
  padding-top: 5px;
  font: 13px RobotoSlab;
  text-align: center;
  background-color: white;
  color: #888;
}

/* fixed values */

@media all and (max-width: 800px) {
  
  body {
  
    overflow-x: scroll;
  }
  header {
  
    width: 800px;
  }
  header > nav {

    width: 800px; /* line 27: 100vw */
  }
  header > nav div#email {
    
    margin-left: 64px; /* line 76: 8vw */
  }
	header > div#slider {
		
		width: 800px; /* 100vw */
	}
	header div#switcher.blog { left: 0 }
	header div#switcher.books { left: -800px }
	header div#switcher.music { left: -1600px }
	header div#switcher.movies { left: -2400px }
	
  main {
  
    width: 800px;
  }
	main > div#get {
		
		padding-left: 100px; /* calc( 50vw - 300px ) */
		width: 700px; /* calc( 50vw + 300px ) */
		background-image: radial-gradient( ellipse 120px 10px at 573px 50px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* radial-gradient( ellipse 120px 10px at 71.7vw 50px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
	}
	main > img#phone {

		height: 307px; /* 38.4vw */
		left: 500px; /* 62.5vw */
		top: 192px; /* calc( 500px - 38.5vw  ) */
	}
	main > div#background {
		
		height: 221px; /* 27.58vw */
    width: 126px; /* 15.8vw */
    left: 511px; /* 63.85vw */
    top: 235px; /* calc( 500px - 32.95vw ) */
	}
  main > div#features {

    padding: 50px 40px 50px 40px; /* 50px calc( 50vw - 360px ) 50px calc( 50vw - 360px ) */
  }
}
@media all and (min-width: 1000px) {
  
	main > img#phone {

      height: 384px; /* 38.4vw */
      top: 115px; /* calc( 500px - 38.5vw  ) */
	}
	main > div#background {
		
      height: 276px; /* 27.58vw */
      width: 158px; /* 15.8vw */
      top: 170px; /* calc( 500px - 32.95vw ) */
      left: calc( 62.5vw + 13px );
	}
	main > div#get {
		
		background-image: radial-gradient( ellipse 120px 10px at calc( 62.5vw + 90px ) 50px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* radial-gradient( ellipse 120px 10px at 71.7vw 50px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
	}
}

/* utility */
a {

  text-decoration: none;
  color: inherit;
}