@font-face {
  font-family: 'Apple Garamond';
  src: url('/fonts/AppleGaramond.woff');
}

@font-face {
  font-family: 'Apple Garamond Italic';
  src: url('/fonts/AppleGaramond-Italic.woff');
}


/*
@font-face  {
  font-family: 'Space Mono';
  src:   url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i');
}*/

:root {
  --text: #fafafa;
  --bg: #0a0a0a;
  
}


html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Apple Garamond', serif;
  margin: 0;
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

p {
  font-family: 'Apple Garamond', serif;
  font-size: 3.2vw;
  color: var(--text);
  font-weight: 300;
  cursor: text;
}

a {
  font-family: 'Apple Garamond', serif;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  border-bottom: 2px solid #1d62f0;
  cursor: pointer;
  transition: border-bottom-color 1s;
  font-family: inherit;
}


a:hover {
  font-family: 'Apple Garamond Italic', 'Apple Garamond', serif;
}

.texten {
  position: relative;
}

/* till mediaqueries
#first a { 
border: 0.2vw solid #1d62f0;
border-radius: 5vw;
padding-left: 0.7vw;
padding-right: 0.7vw; }
*/

h1 {
  font-size: 0;
}

h2 {
  text-transform: uppercase;
  font-family: 'Space Mono', sans-serif;
  /*font-size: 1.5vw; */
  font-size: 12pt;
  font-weight: 400;
  line-height: 0em;
  letter-spacing: 0.1vw;
  color: white;
}

.italic {
  font-family: 'Apple Garamond Italic', 'Apple Garamond', serif;
}


header a,
#contact {
  color: var(--text);
  text-transform: uppercase;
  font-family: 'Space Mono', sans-serif;
  font-size: 12pt;
  /*font-size: 1.5vw; */
  font-weight: 400;
  text-decoration: none;
}

header a:hover {
  font-size: 18pt;
  font-style: normal;
  font-family: 'Space Mono', sans-serif;
}

header {
  top: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: fixed;
  z-index: 20;
}

header div {
  padding: 1vh 5vw 0;
  width: 40%;
}

#cv {
  text-align: center;
  width: 20%;
}

#contact {
  text-align: right;
}

/*.video {padding: 2vw;
	max-height: 98vh;}*/

.image,
.video {
  display: block;
  margin: 20vh auto;
  width: 96vw;
  position: relative;
  z-index: 10;
}

.medium {
  width: initial;
  height: initial;
  max-height: 96vh;
  max-width: 96vw;
}

.small-img-right {
  margin-right: 2vw;
  width: initial;
  height: initial;
  max-width: 55vw;
  max-height: 55vh;
}

.small-img-left {
  margin-left: 2vw;
  width: initial;
  height: initial;
  max-width: 55vw;
  max-height: 55vh;
}

.full {
  width: 100%;
  /* max-height: 100vh; */
}

.hero {
  margin-top: 6vh;
}

.outro {
  margin-bottom: 4vh;
}

.program {
  border-radius: 0.8vw;
}

.withcaption {
  margin-bottom: 2vh;
}

.hoverimage {
  position: absolute;
  display: none;
  top: 1%;
  transform: translate(-50%, -100%);
  left: 50%;
  height: 30vh;
  box-sizing: border-box;
  z-index: 1000;
  pointer-events: none;
}

a:hover .hoverimage {
  display: block;
}

#landing {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh;
  background-color: var(--bg);
  align-items: flex-end;
  margin-bottom: 10vh;
}

#first {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-right: 5vw;
  padding-left: 5vw;
  bottom: 0;
}

#infopage {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  /* padding-bottom: 20vh; */
  padding-top: 7vh;
  background: #ff3300;
  /*border-radius: 10vw 10vw 0 0;*/
  box-shadow: 0 0 20px #ff3300, 0 0 250px #ff3300;
}


#infopage p {
  font-family: 'Space Mono';
  font-size: 1.5vw;
  margin-top: -0.001vh;
  margin-bottom: 0.1vh;
}


#infopage div {
  padding: 0 5vw;
  width: 50%;
  height: 100%;
}


.project {
  margin-bottom: 10vh;
  padding-bottom: 5vh;
  padding-top: 5vh;
  /*
border-bottom: 0.15vw solid var(--text);
border-top: 0.15vw solid var(--text);
border-radius: 50vw; 
box-shadow: 0 0 3000px white, 0 0 40px white;*/
}

.article, .indent {
  padding: 0 5vw;
  /*padding-left: 5vw;
  padding-right: 55vw;*/
  margin-top: -0.001vh;
  margin-bottom: 0.1vh;
}

.indent {
  text-indent: 1em;
}

.project h2 {
  padding-left: 5vw;
}

.project a {
  font-size: inherit;
}

.credits {
  padding-left: 54vw;
  padding-right: 10vw;
  margin-top: -0.001vh;
  margin-bottom: 0.1vh;
  font-size: 11pt;
  line-height: 1.5em;
  font-family: 'Space Mono', sans-serif;
}

.credits a:hover {
  font-family: inherit;
  font-style: italic;
}

.caption {
  margin-bottom: 10vh;
}

.caption .credits {
  padding: 0 5vw;
}

.quote {
  margin: 5vh auto;
}

.quote *, .caption .credits {
  text-align: center;
}

.quote .credits {
  padding: 1em 5vw 0.5em;
}

.quote .article {
  padding: 0.5em 10vw 0;
}

.tag {
  font-size: .8em;
  vertical-align: 5%;
  color: black;
  background: white;
  border-radius: 1em;
  padding: 0 .4em .08em;
  margin-right: .3em;
}

.vr {
  height: 100%;
  width: 50%;
  position: relative;
  top: 7vh;
  /* border-right: 1px solid var(--text); */
  /* opacity: 0.3; */
  border-right: 1px solid #626262;
  position: fixed;
  z-index: -1;
}

footer {
  font-size: 10.5vw;
  /* width: 110vw; */
  padding: 20vh 0 10vw;
  font-family: 'Apple Garamond', serif;
  /* position: absolute; */
  text-align: center;
  display: block;
  /* overflow: hidden; */
  width: 100%;
  background: #ff3300;
  color: white;
  line-height: .8em;
}




#skandia h2 {
  color: #32CAA9;
}

#skandia a {
  border-color: #32CAA9;
}

#skandia .tag {
  background-color: #32CAA9;
}

#pts h2 {
  /* color: #B07CBF; */
  color: #D286E8;
}

#pts a {
  /* border-color: #B07CBF; */
  border-color: #D286E8;
}

#pts .tag {
  background-color: #D286E8;
}

#rosetta h2 {
  color: #4b9b37;
}

#rosetta a {
  border-color: #4b9b37;
}

#oresundsregionen h2 {
  color: #ffd905;
}

#oresundsregionen a {
  border-color: #ffd905;
}

#tangents h2 {
  color: #4b9b37;
}

#tangents a {
  border-color: #4b9b37;
}

#kinship-method h2 {
  color: #E76197;
}

#kinship-method a {
  border-color: #E76197;
}

#kinship-method .tag {
  background: #ff76ad;
}

#sunday-sites h2 {
  color: #ffdd00;
}

#sunday-sites a {
  border-color: #ffdd00;
}

#afu h2 {
  color: #6600ff;
}

#afu a {
  border-color: #6600ff;
}

#lookbook h2 {
  color: #ff4500;
}

#lookbook a {
  border-color: #ff4500;
}

#wip-type h2 {
  color: #8c7850;
}

#wip-type a {
  border-color: #8c7850;
}

#wip-type .tag {
  background: #8c7850;
}

#wasteland h2 {
  color: #f4bd31;
}

#wasteland a {
  border-color: #f4bd31;
}




@media screen and (max-width: 860px) {
  .hoverimage {
	height: 15vh;
  }
}

@media screen and (max-width: 630px) {

  p,
  a {
	font-size: 7vw;
  }

  header a,
  #contact {
	font-size: 8pt;
  }

  h2 {
	font-size: 8pt;
  }

  #infopage {
	padding-top: 5vh;
	/*height: 100vh;*/
  }

  #infopage div p {
	font-size: 10pt;
  }

  .article, .indent {
	font-size: 5vw;
	padding-right: 5vw;
  }

  .credits {
	font-size: 9pt;
	padding-right: 5vw;
	padding-left: 5vw;
  margin-bottom: 15vh;
  }
  
  .image,
  .video {
    margin-top: 5vh;
    margin-bottom: 4vh; 
  }
  

}

@media (hover: none) {
  header a:hover {
	font-size: 8pt;
  }

  a:hover .hoverimage {
	display: none;
  }

  a:hover {
	font-style: normal;
  }
}