@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

html, body {
  position: relative;
  height: 100%;

}



body {
  background: #151515;
  font-family: 'roboto' , sans-serif;
  font-size: 1rem;
  color:#fff;
  margin: 0;
  padding: 0;

  opacity: 0;
  -webkit-transition: opacity 1.1s;
  transition: opacity 1.1s;

  -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


* {
  box-sizing: border-box;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

ul {
  padding: 0;
  list-style-type: none;
}


/* width */
::-webkit-scrollbar {
  display: none;
}


/* ---- Type Settings ---- */

h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
}


/*


font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

font-size: calc(80px + (170 - 80) * ((100vw - 900px) / (1920px - 900)));


font-size: calc(14px + 8 * ((100vw - 320px) / 960));  example

font-size: calc(30px + 140 * ((100vw - 576px) / 1344));


*/

.heading--xl {
  font-size: 30px;

  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 !important;
  margin: 0 !important;

  color: white !important;
  -webkit-text-stroke: .8px white !important;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

@media screen and (min-width: 576px) {
  .heading--xl {
    font-size: calc(30px + 140 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .heading--xl {
    font-size: 170px;
  }
}






.heading--s {
  font-size: 14px;
  font-weight: 400;
}



/*////////*/

.heading--l {
  font-size: 5.208vw;
  font-weight: 400;
  line-height: 1.15em;
}


.heading--m {
  font-size: 18px;
  font-weight: 400;
  color: white;
  line-height: 1.5em;
}

@media screen and (min-width: 576px) {
  .heading--m  {
    font-size: calc(18px + 10 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .heading--m  {
    font-size: 28px;
  }
}


.heading--s {
  font-size: 14px;
  font-weight: 400;
  color: white;
}

@media screen and (min-width: 576px) {
  .heading--s  {
    font-size: calc(14px + 6 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .heading--s  {
    font-size: 20px;
  }
}


.heading--xs {
  font-size: 0.6rem;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 20px;
}

.weight-500 {
  font-weight: 500 !important;
}

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

.centered-text {
  text-align: center;
}

.margin-remove {
  margin: 0px !important;
}

.padding-bottom-15px {
  padding-bottom: 15px;
}


/* ---- Colours ---- */

.black-text {
  color: black !important;
}


.grey-50 {
  color: #808080 !important;
}

/* ---- Main Nav ---- */

.link:after{
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  display: block;
  margin-top: 0;
  left: 0;
  background: #fff;
  transition: width 0.5s linear;
  -webkit-transition: width 0.5s linear;
}


.link:hover:after{
  width: 100%;
  background: #fff;
}


.name, .menu {
  -webkit-transform: translateZ(0);
}

.overlay-menu .heading--l {
line-height: 0.8;
}


.top-border {
  position: fixed;
  width: 100%;
  top: 0;
  height: auto;
  z-index: 99999999999999999999999 !important;

  display: -webkit-box;

  display: flex;
  -webkit-box-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
          justify-content: space-between;

  -webkit-transform: translateZ(0);
  mix-blend-mode: difference;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}


.right-border {
  position: fixed;
  width: auto;
  height: 100%;
  right: 0;
}


.bottom-border {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: auto;
  line-height: 0;

  display: -webkit-box;

  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
          justify-content: flex-end;
}


.left-border {
  position: fixed;
  width: auto;
  height: 100%;
  left: 0;
  z-index: 99999999999999999999999;
}


.button_container {
   cursor: pointer;
}


.overlay {
 position: fixed;
 background: #151515;

 width: 100%;
 height: 100%;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.35s, visibility 0.35s, height 0.35s;
 transition: opacity 0.35s, visibility 0.35s, height 0.35s;
 overflow: hidden;
 z-index: 9999999999999999999999999999999999999999999999;
}


.overlay.open {
 opacity: 1;
 visibility: visible;
 height: 100%;
 -webkit-animation: fadeIn .3s ease-in-out;
         animation: fadeIn .3s ease-in-out;
}


.overlay.open .menu-home {
 -webkit-animation: fadeInUp 0.5s ease forwards;
         animation: fadeInUp 0.5s ease forwards;
 -webkit-animation-delay: .35s;
         animation-delay: .35s;
}


.overlay.open .menu-projects {
  -webkit-animation: fadeInUp 0.5s ease forwards;
          animation: fadeInUp 0.5s ease forwards;
  -webkit-animation-delay: .40s;
          animation-delay: .40s;
}


.overlay.open .menu-about {
  -webkit-animation: fadeInUp 0.5s ease forwards;
          animation: fadeInUp 0.5s ease forwards;
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}


.overlay.open .menu-contact {
  -webkit-animation: fadeInUp 0.5s ease forwards;
          animation: fadeInUp 0.5s ease forwards;
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}


.menu-page-number {
  margin-right: 10px;
}


.menu-home, .menu-projects, .menu-about, .menu-contact {
  display: -webkit-box;
  display: flex;
  -webkit-box-align:baseline;
          align-items:baseline;
}


 .menu-home, .menu-projects, .menu-about, .menu-contact  {
	 opacity: 1;
}


.menu-home-container {
  grid-column: 9 / span 5;
  grid-row: 1;
  justify-self: start;
}

.menu-about-container {
  grid-column: 9 / span 5;
  grid-row: 3;
}


.menu-projects-container {
  grid-column: 9 / span 5;
  grid-row: 5;
}


.menu-contact-container {
  grid-column: 9 / span 5;
  grid-row: 7;
}


.job-title {
  grid-column: 1 / span 2;
  grid-row: 8;
  line-height: 2em;
  align-self: end;
}


.job-spacer {
  opacity: 0;
}


.menu-email {
  grid-column: 3 / span 2;
  grid-row: 8;
  line-height: 2em;
  align-self: end;
  z-index: 99999999999999999;
}


.about-email {
  grid-column: 3 / span 2;
  grid-row: 8;
  line-height: 2em;
  align-self: end;
}


.menu-close {
  grid-column: 16;
  grid-row: 1;
}


.close-link {
  display: none;
}


.button_container.active .menu-link {
  display: none;
}


.button_container.active .close-link {
  display: inline-block;
}


 @-webkit-keyframes fadeInRight {
	 0 {
		 opacity: 0;
		 left: 20%;
	}
	 100% {
		 opacity: 1;
		 left: 0;
	}
}


 @keyframes fadeInRight {
	 0 {
		 opacity: 0;
		 left: 20%;
	}
	 100% {
		 opacity: 1;
		 left: 0;
	}
}


/* ///////////   Site Wide Border Settings   ////////////////*/

/* ---- Site Border Full ---- */

.site-border-full-mobile  {
  display: none;
}


.site-border-full  {
  padding: 20px;
}

@media screen and (min-width: 576px) {
  .site-border-full   {
    padding: calc(14px + 55 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .site-border-full  {
    padding: 75px;
  }
}

/* ---- Site Border Left Right Top ---- */


.site-border-left_right_top {
  padding: 20px 20px 0 20px;
}

@media screen and (min-width: 576px) {
  .site-border-left_right_top   {
    padding-left: calc(14px + 55 * ((100vw - 576px) / 1344));
    padding-right: calc(14px + 55 * ((100vw - 576px) / 1344));
    padding-top: calc(14px + 55 * ((100vw - 576px) / 1344));

  }
}

@media screen and (min-width: 1920px) {
  .site-border-left_right_top  {
    padding: 75px 75px 0 75px;
  }
}


/* ---- Site Border Left Right Bottom ---- */

.site-border-left_right_bottom {
  padding: 0 20px 20px 20px;
}

@media screen and (min-width: 576px) {
  .site-border-left_right_bottom   {
    padding-left: calc(14px + 55 * ((100vw - 576px) / 1344));
    padding-right: calc(14px + 55 * ((100vw - 576px) / 1344));
    padding-top: calc(14px + 55 * ((100vw - 576px) / 1344));

  }
}

@media screen and (min-width: 1920px) {
  .site-border-left_right_bottom  {
    padding: 0 75px 75px 75px;
  }
}

/* ---- Site Border Left Right ---- */

.site-border-left_right {
  padding: 0 20px;
}

@media screen and (min-width: 576px) {
  .site-border-left_right   {
    padding-left: calc(14px + 55 * ((100vw - 576px) / 1344));
    padding-right: calc(14px + 55 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .site-border-left_right  {
    padding: 0 75px;
  }
}


/* ---- Site Border Top ---- */

.site-border-top {
  padding-top: 20px;
}

@media screen and (min-width: 576px) {
  .site-border-top   {
    padding-top: calc(14px + 55 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .site-border-top  {
    padding-top: 75px;
  }
}


/* ---- Site Border bottom ---- */

.site-border-bottom {
  padding-bottom: 20px;
}

@media screen and (min-width: 576px) {
  .site-border-bottom   {
    padding-bottom: calc(14px + 55 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .site-border-bottom  {
    padding-bottom: 75px;
  }
}


/* ///////////   Grid Settings   ////////////////*/

/* ---- Fixed Grid ---- */

.grid-fullscreen-container {
  position: absolute;
  width: 100vw;
  height: 100vh;

  display: -webkit-box;

  display: flex;
  -webkit-box-align: center;
          align-items: center;
}


.grid-fixed {
  position: absolute;
  width: 100vw;
  height: 100%;

  min-height: 0;
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
}


.box-slider {
  min-width: 0;
  overflow: auto; /* NEW */
}


.box-project {
  color: white;
}

/* ---- Grid Auto ---- */

.grid-auto {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.layer {
    background-color: rgba(21, 21, 21, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    z-index: 2;
}


.grid-auto {
  position: relative;
  width: 100vw;
  max-width:100%;  /* added */
  height: auto;

  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 10.648vh;
  grid-auto-flow: dense;
  overflow-x: hidden;
}

.grid-auto img {
  justify-items: center;
}



.grid-image-project img {
  width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
}

.coke {
color: white !important;
}


.fanta {
  color: white !important;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}


.fanta.active {
  color: rgba(0, 0, 0, 0) !important;
}


/* ///////// Animation ///////// */

/* ----- Image & Text Link ----- */

a.ex1 {
 color: white !important;
 -webkit-text-stroke: .8px white !important;
 -webkit-transition: all .2s ease-in;
 transition: all .2s ease-in;
}


 a.ex1:hover {
  color: rgba(0, 0, 0, 0) !important;
}


/* ----- Basic Animations ----- */

.stroke-text {
  color: white !important;
  -webkit-text-stroke: .8px white !important;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}


.stroke-text-fade {
  color: white !important;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}


.stroke-text-fade:hover {
  color: rgba(0, 0, 0, 0) !important;
}


a.ex1 {
 color: white !important;
 -webkit-text-stroke: .8px white !important;
 -webkit-transition: all .2s ease-in;
 transition: all .2s ease-in;
}


 a.ex1:hover {
  color: rgba(0, 0, 0, 0) !important;
}

.js-underline {
  width: 0;
  height: 1px;
  background-color: white;
  -webkit-transition: width 0.5s linear;
  transition: width 0.5s linear;
}


.js-underline.active {
  width: 100%;
}

.layer.active {
  background-color: rgba(21, 21, 21, .4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.8s  ease-in-out;
  transition: 0.8s  ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  z-index: 0;
}



/* ///////// About Page ///////// */

.my_description {
  grid-column: 1 / span 12;
  grid-row: 3;
}


.my_description-mobile {
  display: none;
}


/* ///////// Footer ///////// */

.footer-bk-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}


.footer-bk-img img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;

}


#footer {
  position: relative;
  width: 100vw;
  height: auto;
}


#footer.active {
  width: 100%;
  -webkit-transition:  0.8s;
  transition:  0.8s;
}


.next-number-container {
  grid-column: 16 / span 2;
  grid-row: 1 / span 2;
  z-index: 999;
  justify-self: end;
  align-self: start;
}

.next-number-container .heading--xl {

letter-spacing: 0 !important;
line-height: 0.8 !important;

}

.next-project-button {
  grid-column: 14 / span 4;
  grid-row: 4;

  display: -webkit-box;

  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: end;
          align-items: flex-end;

  z-index: 999;

}


.next-project-button-2 {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  z-index: 999;


}

.footer-next-title {
  grid-column: 1 / span 3;
  grid-row: 1;
  z-index: 2;
  color: white;
}


.footer-job-title {
  grid-column: 1 / span 2;
  grid-row: 4;
  line-height: 2em;
  align-self: end;
  z-index: 999;
}

.job-spacer {
  opacity: 0;
}


.footer-email {
  grid-column: 3 / span 2;
  grid-row: 4;
  line-height: 2em;
  align-self: end;
  z-index: 999;
}


.next-project-button .heading--m {
  line-height: 1 !important;
}


.next-svg svg{
  height: 15px;
}

@media screen and (min-width: 576px) {
  .next-svg svg  {
    height: calc(15px + 10 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .next-svg svg  {
    height: 25px;
  }
}


.next-svg svg {
  fill: white;
  width: auto;
  padding-left: 1vw;
}


@media screen and (min-width: 576px) {
  .next-svg svg  {
    font-size: calc(18px + 8 * ((100vw - 576px) / 1344));
  }
}

@media screen and (min-width: 1920px) {
  .next-svg svg {
    font-size: 24px;
  }
}

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


  /*//// MQ: Typograpghy ////*/

  .heading--l {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.15em;
  }



  /*//// MQ: Nav ////*/

  .top-border {
    position: fixed;
    width: 100%;
    margin: 0;

    height: auto;
    z-index: 99999999999999999999999 !important;

    display: -webkit-box;

    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: justify;
            justify-content: space-between;

    -webkit-transform: translateZ(0);
    mix-blend-mode: normal !important;
  }

  .bottom-border {
    position: fixed;
    width: 100%;
    bottom: 0;
    margin: 0;

    height: auto;
    z-index: 50 !important;

    display: -webkit-box;

    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: end;
            justify-content: flex-end;

    -webkit-transform: translateZ(0);
    mix-blend-mode: normal !important;
  }

  .left-border, .right-border {
    display: none;
  }


  .job-title {
    grid-column: 1 / span 2;
    z-index: 99999999999999999;
  }

  .menu-home-container {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .menu-projects-container {
    grid-column: 1 / span 2;
    grid-row: 3;

  }

  .menu-about-container {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

  .menu-contact-container {
    grid-column: 1 / span 2;
    grid-row: 5;
  }


  /*//// MQ: Grid ////*/


  /* -- MQ: Fixed Grid -- */

  .grid-fixed {
    position: fixed;
    width: 100vw;
    min-height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);

  }


  /*//// MQ: About Page ////*/

  .my_description-mobile {
    display: inline-block;
    grid-column: 1 / span 4;
    grid-row: 2 / span 5;
  }

  .my_description {
    display: none;
  }

  /*//// MQ: Footer ////*/

  #footer {
    position: relative;
    width: 100%;
    height: 80vh;
  }

  #footer .grid-auto {
    position: relative;
    width: 100%;
    height: 100vh;
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    overflow:  hidden;

  }

  .next-number-container {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
    justify-self: start;

  }

  .next-number-container .heading--xl {
    font-size: 120px;
    padding: 0;
    margin: 0;
  }

  .next-project-button {
    grid-column: 1 / span 2;
    grid-row: 5;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
            align-items: flex-start;

  }

  .footer-job-title {
    grid-row: 8;
    z-index: 999;
  }

  .footer-email {
    grid-column: 3 / span 3;
    grid-row: 8;

    }
}