* {
  text-decoration:none;
  padding:0;
  margin:0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background-color:black;
  font-family:"Open Sans",helvetica,arial,sans-serif;
  font-weight:Regular;
}

p {
  color:grey;
  font-size:0.8rem;
  line-height:1.8;
  text-align:left;
  width:calc(100vw/3);
  padding-left:calc(100vw/3);
}

h2 {
  font-weight:normal;
  color:grey;
  font-size:0.8rem;
  line-height:1.8;
  text-align:left;
  width:calc(100vw/3);
  padding-left:calc(100vw/3);
}

a {
  color:grey;
  font-size:0.8rem;
  line-height:1.8;
}

nav {
  position:sticky;
  text-align:right;
  top:50%;
  transform:translateY(-50%);
  width:calc(100vw/3);
  z-index:999;
}

ul {
  list-style-type:none;
  font-size:0.8rem;
  line-height:1.8;
}

footer {
  background-color:black;
  text-align:left;
  padding-top:5%;
  padding-bottom:5%;
  color:grey;
  padding-left:calc(100%/3);
}

/* ID */

#main {
  background-color:white;
}

#empty {
  width:100vw;
  height:100vh;
}

#about {
  height:100vh;
}

#modules {
}

#mod-01{
  position:sticky;
}

#mod-02{
  position:sticky;
}

#mod-03{
  position:sticky;
}

#mod-04{
  position:sticky;
}

#mod-05{
  position:sticky;
}

#text-section {
  padding-top: 4%;
  background-color:black;
}

#references {
}

#typefaces {
  background-color:black;
}

#legalnotice {
  background-color:black;
  word-wrap: break-word;
}

/* CLASS */

.modules {
  position:relative;
  padding:0;
  margin:0;
}

.img-full {
  position:sticky;
  top:0;
  height:100vh;
  width:100vw;
  padding-left:0;
}

.img-third-left {
  position:sticky;
  top:0;
  height:100vh;
  width:calc(100vw/3);
  padding-left:0;
}

.img-long-top {
  position:sticky;
  top:0;
  height:calc(100vh/2);
  width:calc(100vw/3*2);
  margin-left:calc(100vw/3);
}

.img-long-bottom {
  position:sticky;
  top:calc(100vh/2);
  height:calc(100vh/2);
  width:calc(100vw/3*2);
  margin-left:calc(100vw/3);
}

.img-square-right {
  position:sticky;
  top:0;
  height:100vh;
  width:calc(100vw/3*2);
  margin-left:calc(100vw/3);
}

.img-half-top {
  position:sticky;
  top:0;
  height:50vh;
  width:100vw;
  padding-left:0;
}

.img-half-bottom {
  position:sticky;
  top:50vh;
  height:50vh;
  width:100vw;
  padding-left:0;
}

img {
  object-fit:cover;
  object-position:center;
  width:100%; 
  height:100%;
  }

.grey {
  width:100%;
  height:100%;
  background-color:#c2c4bc;
}

.orange {
  width:100%;
  height:100%;
  background-color:#ed6e4f;
}

.black {
  width:100%;
  height:100%;
  background-color:black;
}

.white {
  width:100%;
  height:100%;
  background-color:white;
}

.jade {
  width:100%;
  height:100%;
  background-color:#abab6d;
}

.lightblue {
  width:100%;
  height:100%;
  background-color:#deecf4;
}

.lilac {
  width:100%;
  height:100%;
  background-color:#cac5cb;
}

/* PERFORMANCE */

img {
  width: 100%;
  aspect-ratio: 1/1;
  display:block;
  object-position: center;
  object-fit: cover;
}

.blur-load {
  background-size: cover;
  background-position: center;
}

.blur-load.loaded > img {
  opacity:1;
}

.blur-load > img {
  opacity:0;
  transition: opacity 250ms ease-in-out;
}

/* SELECTION */

::selection {
  background-color:lightgrey;
  color:coral;
}

a {
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}

a:hover {
  color:coral;
}

@media screen and (min-width: 800px) {
  .hide-desktop {
    display:none;
  }
}

/* MOBILE */

@media screen and (max-width: 800px){
  .hide-mobile {
    display:none;
  }

  #main {
    background-color:black;
  }

  html {
    font-size:1.5rem;
  }

  p {
    text-align:left;
    width:auto;
    padding-left:4%;
    padding-right:4%;
  }

  h2 {
    text-align:left;
    width:auto;
    padding-left:4%;
    padding-right:4%;
  }

  nav {
    position:sticky;
    text-align:left;
    z-index:999;
    padding-left:4%;
    top:4%;
    transform:translateY(0%);
    width:auto;
    padding-right:4%;
    padding-bottom:4%;
  }

  footer {
    padding-top:15%;
    padding-bottom:15%;
    padding-left:4%;
  }

  a:hover {
  color:grey;
}
}