/* Space Grotesk
-------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
}

.weight-600 {
  font-weight: 600;
}

.weight-700 {
  font-weight: 700;
}

.weight-900 {
  font-weight: 900;
}

.weight-400 {
  font-weight: 400;
}

/* 
-------------------------------------------------- */
html {
  overflow-y: scroll;
}

/* New
-------------------------------------------------- */
#intro-container {
  width: 620px;
  margin: 0 auto;
  font-size: 1.7em;
  line-height: 1.5em;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 800px) {
  #intro-container {
    width: 100%;
    font-size: 1.2em;
    line-height: 1.4em;
    padding:10px;
    margin-top: 5%;
  }

  .main p, .main span{
    width: 100%;
    padding:0 3vw;
  }
}

#intro-container p {
  margin-bottom: 0.5em;

}

#intro-container .monstrum-link {
  font-weight: 900;
  text-decoration: none;
  border-bottom: 3px solid #333333;
}


#intro-container .monstrum-link:hover {
  font-weight: 900;
  text-decoration: none;

}


/* Apps
-------------------------------------------------- */
#apps-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  width: 420px;
  margin: 100px auto 0 auto;
  position: relative;
  padding-right:20px;
}

.app-container {
  width: 25%;
  padding: 1.5%;
}

.app-container img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}

#root {
  --rotation-degree1: 6deg;
  --rotation-degree2: 3deg;
  --rotation-degree3: -5deg;
  --rotation-degree4: 0deg;
  --rotation-degree5: -2deg;
}

.app-container img:hover {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}

.rotation1:hover{
  transform: rotate(var(--rotation-degree1)) translate3d(0px, -5px, 0);
}

.rotation2:hover{
  transform: rotate(var(--rotation-degree2)) translate3d(0px, -5px, 0);
}

.rotation3:hover{
  transform: rotate(var(--rotation-degree3)) translate3d(0px, -5px, 0);
}

.rotation4:hover{
  transform: rotate(var(--rotation-degree4)) translate3d(0px, -5px, 0);
}

.rotation5:hover{
  transform: rotate(var(--rotation-degree5)) translate3d(0px, -5px, 0);
}


@media screen and (max-width: 800px) {
  #apps-container {
    width: 95%;
    margin: 40px auto 0 auto;
    padding-right:2px;
  }
  
  
}





/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
  max-height: 1000px;
}

/* Links
-------------------------------------------------- */
a:link,
a:visited {
  text-decoration: underline;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  outline: none;
  color: #333333;

}

a:hover {
  text-decoration: none;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  outline: none;
  color: #333333;
  font-variation-settings: "wght" 900;

}

a:clicked {
  outline: none;
}

/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}

/* Site
-------------------------------------------------- */
html {
  height: 100%;
  font-family: 'Space Grotesk', sans-serif;
  font-variation-settings: "wght" 400;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-y: scroll;
}

body {
  margin: 0 auto;
  font-size: 100%;
  line-height: 1.5em;
  background: #fcfcfc;
  color: #333333;
  /*display: none;*/
}

#wrapper {
  margin: 0 auto;
  padding: 8%;
  max-width: 1600px;
}

#page{
  position:relative;
  min-height: 100vh;
}


::-moz-selection {
  color: #999999;
  background: #EEEEEE;
}

::selection {
  color: #999999;
  background: #EEEEEE;
}

@media screen and (max-width: 800px) {
  #wrapper {
    padding: 10px;
  }
}

/* Main
-------------------------------------------------- */
.main hr {
  margin: 3em 0;
  height: 2px;
  background: #ddd;
}

.main p,
.main figure,
.main ul,
.main ol {
  margin-bottom: 1.5em;
}

/* Text blocks */
.text ul,
.text ol {
  margin-left: 1em;
}

/* Header
-------------------------------------------------- */
.header {
  position: fixed;
  left: 4%;
  top: 5%;
}


.links a {
  font-size: 80%;
  color: #999999;
}

.links a:hover {
  color: #333333;
}

.links {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}

.links li {
  list-style: none;
  margin-right: 2em;
  text-transform: uppercase;
}

.links li p {
  margin-bottom: 5px;
}

@media screen and (max-width: 680px) {
  .links li {
    margin-right: 1em;
  }
}

/* Headings
-------------------------------------------------- */
h1 {
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 400;
  margin-bottom: .5em;
}

h2 {
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 300;
  margin-bottom: .5em;
  color: red;
}

h3 {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: .5em;
}

h4 {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.5em;
  margin-bottom: .5em;
  color: red;
}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}

/* Grid
-------------------------------------------------- */
#grid1[data-columns]::before {
  content: '1 .column.size-1of1';
}

#grid2[data-columns]::before {
  content: '2 .column.size-1of2';
}

#grid3[data-columns]::before {
  content: '3 .column.size-1of3';
}

#grid4[data-columns]::before {
  content: '4 .column.size-1of4';
}

.column {
  float: left;
}

.size-1of1 {
  width: 100%;
}

.size-1of2 {
  width: 50%;
}

.size-1of3 {
  width: 33.333%;
}

.size-1of4 {
  width: 25%;
}

.container {
  padding: 0px 40px 40px 0px;
}

.no-padding-down {
  padding-bottom: 0;
}

.popupImage {
  -webkit-box-shadow: 5px 5px 20px 0px white;
  -moz-box-shadow: 5px 5px 20px 0px white;
  box-shadow: 5px 5px 20px 0px white;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}

.popupImage:hover {
  -webkit-box-shadow: 5px 5px 4px 0px rgba(204, 204, 204, 0.7);
  -moz-box-shadow: 5px 5px 4px 0px rgba(204, 204, 204, 0.7);
  box-shadow: 5px 5px 4px 0px rgba(204, 204, 204, 0.7);
  transform: translate3d(-5px, -5px, 0);
  -webkit-transition: all 0.3s;
  /* Safari */
  transition: all 0.3s;
}

.container img {
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}

.container:hover img {
  transform: translate3d(0px, -5px, 0);
  -webkit-transition: all 0.3s;
  /* Safari */
  transition: all 0.3s;
}

.container .project-title {
  width: 100%;
  text-align: left;
  padding-top: 10px;
  color: white;
}

.container .project-title a {
  color: white;
}

.container:hover .project-title a {
  color: #333333;
}

.container .video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-top: 0.8em;
}

.container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 800px) {
  .container {
    padding: 0px 0px 20px 0px;
  }
  .container .project-title a {
    color: #999999;
    display: none;
  }
  .container:hover img {
    transform: translate3d(0px, 0px, 0);
  }
  #grid2[data-columns]::before {
    content: '1 .column.size-1of1';
  }
  #grid3[data-columns]::before {
    content: '1 .column.size-1of1';
  }
  #grid4[data-columns]::before {
    content: '2 .column.size-1of2';
  }
  #grid2[data-columns] {
    content: '1 .column.size-1of1';
  }
  #grid3[data-columns] {
    content: '1 .column.size-1of1';
  }
  #grid4[data-columns] {
    content: '2 .column.size-1of2';
  }
  #grid4 .container {
    padding: 0px 20px 30px 0px;
  }
}

@media screen and (min-width: 681px) and (max-width: 1000px) {
  #grid3[data-columns]::before {
    content: '2 .column.size-1of2';
  }
  #grid4[data-columns]::before {
    content: '3 .column.size-1of3';
  }
  #grid3[data-columns] {
    content: '2 .column.size-1of2';
  }
  #grid4[data-columns] {
    content: '3 .column.size-1of3';
  }
  #wrapper {
    padding: 50px 6% 50px 50px;
  }
  .container {
    padding: 0px 30px 60px 0px;
  }
}

@media screen and (min-width: 1001px) {
  #grid3[data-columns]::before {
    content: '3 .column.size-1of3';
  }
  #grid3[data-columns] {
    content: '3 .column.size-1of3';
  }
}


/* Project meta
-------------------------------------------------- */
.meta {
  margin-bottom: 1.5em;
  font-size: 80%;
  margin-top: 0.5em;
}

.label {
  color: #333333;
  text-transform: uppercase;

  font-variation-settings: 'wght' 900;
}

.meta li {
  float: left;
  list-style: none;
  margin-right: 2em;
  margin-top: 0.5em;
}

.meta li p {
  margin: 0;
}

@media screen and (max-width: 800px) {
  .meta {
    font-size: 90%;
    line-height: 1.25em;
  }
  .factsheet {
    font-size: 90%;
    line-height: 1.25em;
  }
  .meta li {
    margin-right: 1em;
  }
}

/* Presskit meta
-------------------------------------------------- */
.factsheet {
  float: left;
  margin-bottom: 0px;
  font-size: 80%;
  margin-right: 3%;
  position: relative;
  word-break: keep-all;
  word-wrap: normal;
  width:45%;
}




.factsheet li {
  float: none;
  list-style: none;


  margin-bottom: 1.5em;
  margin-top: 0em;
}


.presskit-container {
  padding-bottom: 0px !important;
}


@media screen and (max-width: 800px) {
  .factsheet li {
    margin-right: 0vw;
  }

  .label {
    font-size: 100%;
  }
}



.reviews p {
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}

/* Project teaser
-------------------------------------------------- */
.teaser {
  list-style: none;
}

.teaser li {
  margin-bottom: 1.5em;
  list-style: none;
}

@media screen and (min-width: 50em) {
  .teaser li {
    float: left;
    width: 30%;
    margin-left: 5%;
  }
  .teaser li:first-child {
    margin-left: 0;
  }
}




/* Next/Prev nav
-------------------------------------------------- */
.arrow-back{
  position: fixed;
  top: 4vh;
  left: 4vw;
  z-index: 10;
  font-size: 200%;
  width: 50px;
  height: 50px;
  background: #efefef;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-back span{
  margin-bottom:5px;
}

@media screen and (max-width: 800px) {
  .arrow-back{
    display: none;

  }
}

/* Footer
-------------------------------------------------- */
.footer {
  position: absolute;
  bottom: 0;
  width:100%;
  clear:both;
  padding: 3em 0 2.5em 3em;
}

.copyright {
  float: left;
  line-height: 1.5em;
  font-size: 70%;
  color: #CCCCCC;
}

.copyright a{
  color: #CCCCCC;
}


.logo {
  float: left;
  display: block;
  margin-right: 20px;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}

.logo img {
  width: 36px;
  height: 36px;
  margin-top:0px;
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
  z-index: -1;
}

.logo:hover img {
  transform: translate3d(0px, -5px, 0);
  -webkit-transition: all 0.5s;
  /* Safari */
  transition: all 0.5s;
}


@media screen and (max-width: 800px) {
  .footer {
    padding: 3em 0 2em 2em;
  }

  .copyright {
    font-size: 70%;
    line-height: 1.5em;
  }
  
  .logo{
    margin-right: 12px;
  }


  .logo img {
    margin-top:1px;
    width: 30px;
    height: 30px;
    -webkit-transition: all 0.5s;
    /* Safari */
    transition: all 0.5s;
    z-index: -1;
  }
}