/* COLOURS */
:root {
    --darkblue:#141325;
    --turquoise:#05ffd2;
    --grey:#565656; 
    --sand:#fff5e1; 
    --sand-mid:#f9ebd0;    
    --turquoise-dark:#00a083;
}       
    

    button:focus{ 
      outline-color:transparent; 
    }

  
  /* OVERLAY NAVIGATION */
  
  .nav-container {
      position: absolute;
      width: 100%;
      /* height: 100%; */
      text-align: center;
      margin: 0 auto;
      grid-area: burger;
    }
    
    
    .button_container {
     float:right;
      position:relative;
      height: 27px;
      width: 30px;
     cursor: pointer;
      z-index: 100;
      -webkit-transition: opacity .25s ease;
      transition: opacity .25s ease;
        margin-right: 20px;
        margin-top: 0px;
    }
    
    .button_container:hover {
      opacity: 1;
    }

    .button-active_color {
     background:var(--sand);
    }
    
    .button_container.active .top {
      -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
      -ms-transform: translateY(11px) translateX(0) rotate(45deg);
      transform: translateY(11px) translateX(0) rotate(45deg);
      background: var(--sand);
    }
    
    .button_container.active .middle {
      opacity: 0;
      background:var(--sand);
    }
    
    .button_container.active .bottom {
      -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
      -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
      transform: translateY(-11px) translateX(0) rotate(-45deg);
      background: var(--sand);
    }
    
    .button_container span {
      background-color:var(--darkblue) ;
      border: none;
      height: 4px;
      border-radius: 25px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: all .35s ease;
      transition: all .35s ease;
     cursor: pointer;
    }
    
    .button_container span:nth-of-type(2) {
      top: 11px;
      width: 80%;
    }
    
    .button_container span:nth-of-type(3) {
      top: 22px;
    }
    
    .overlay {
      position: fixed;
      background:var(--darkblue);
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity .35s, visibility .35s, height .35s;
      transition: opacity .35s, visibility .35s, height .35s;
      overflow: hidden;
      pointer-events:initial;
  
    }
    
    .overlay.open {
      opacity: 1;
      visibility: visible;
      height: 100%;
      z-index: 99;
    }
    
    .overlay.open li {
      -webkit-animation: fadeInLeft .5s ease forwards;
      animation: fadeInLeft .5s ease forwards;
      -webkit-animation-delay: .35s;
      animation-delay: .35s;
    }
    
    .overlay.open li:nth-of-type(2) {
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }
    
    .overlay.open li:nth-of-type(3) {
      -webkit-animation-delay: .45s;
      animation-delay: .45s;
    }
    
    .overlay.open li:nth-of-type(4) {
      -webkit-animation-delay: .50s;
      animation-delay: .50s;
    }
    
    .overlay.open li:nth-of-type(5) {
      -webkit-animation-delay: .55s;
      animation-delay: .55s;
    }
    
    .overlay nav {
      position: relative;
      height: 70%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 4rem;
      font-family: 'Kollektif', sans-serif;
      font-weight: 700;
      text-align: center;
      color:var(--sand);
    }
    
    .overlay ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      position: relative;
      height: 100%;
    }
    
    .overlay ul li {
      display: block;
      height: 20%;
      height: calc(100% / 5);
      min-height: 70px;
      max-height: 100px;
      position: relative;
      opacity: 0;
    }
    
    .overlay ul li a {
      display: block;
      position: relative;
      color:var(--sand);
      text-decoration: none;
      overflow: hidden;
    }
    
    .overlay ul li a:hover{
      color:var(--turquoise-dark);
    }
  
  
    #overlay a.active {
      color: aquamarine;
    }
  
    
    
    @-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;
      }
    }


    @-webkit-keyframes fadeInLeft {
      0% {
        opacity: 0;
        right: 20%;
      }
      100% {
        opacity: 1;
        right: 0;
      }
    }
    
    @keyframes fadeInLeft {
      0% {
        opacity: 0;
        right: 20%;
      }
      100% {
        opacity: 1;
        right: 0;
      }
    }


    @media only screen and  (max-width:768px) {
      .overlay nav {
       font-size: 3.25rem; 
      }

  
    }

    /* PORTFOLIO AND FILTERABLE GRID */


/* Portfolio styles */
.portfolio {
  grid-column: 1 / -1;
}



  
@supports (display: grid) {
  .portfolio-items {
    display: grid;
    /* grid-template-columns: repeat(3, minmax(300px, 1fr)); */
    grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* grid-auto-rows: 300px; */
  grid-auto-flow: row dense; 
  grid-column: 1 / -1;
  padding-top: 2.5rem;
  
}

.portfolio-item {

  transition: all 0.1s ease;
  /* text-transform: uppercase; */
  text-align: center;
  border: 4px solid var(--darkblue);
  border-radius:10px;
  grid-template-areas:
      "image"
      "title"
      "type";
  align-content: center;
  display: grid;
  padding: 10px;
  color: var(--darkblue);
  font-family: 'Kollektif',sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.1; 
  height:300px;
}

.portfolio-item a:hover {
  text-decoration: none;
}

.portfolio-item_link {
  /* text-align: center;

  color: var(--darkblue);
  font-family: 'Kollektif',sans-serif;
  font-size: 1.25rem; */
  padding: 130px 0px;
  text-decoration: none;
  color: var(--darkblue);
  font-weight: 400;
}

.portfolio-item:hover {
  /* border: 4px dashed var(--darkblue); */
  /* border-radius: 20px; */
  background-color: var(--sand-mid);
  /* color: var(--sand); */
  cursor: pointer;

}

.portfolio-item:nth-of-type(odd):hover {
/* background-color: var(--darkblue);
color: var(--sand); */

-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}

.portfolio-item:nth-of-type(even):hover {
  /* background-color: var(--darkblue);
  color: var(--sand); */

  -webkit-transform:rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  }


  .portfolio-item:nth-of-type(8) {
    cursor:default;
  }

  .portfolio-item:nth-of-type(8):hover {
    /* background-color: var(--darkblue);
    color: var(--sand); */
    transform: rotate(0deg);

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);


    background-color: var(--sand);
    }
  
  

  .portfolio-item img {
    width:100px;   
   }

  .portfolio-items {
    grid-column: 1 / -1;
    
    }
    


  
  .client-image {
   max-width: 100%; 
  }


.filter {
  -webkit-appearance: none;
  border: 0;
  padding: 0.5rem 0.5rem;
  background: none;
  font-size: 26px;
  color: var(--darkblue);
  font-family: 'Kollektif';
  margin: 0;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 700;
}
.filter:nth-child(1) {
color:#e4dbc8;
font-weight: 400;
}

.filter:hover {
color:var(--turquoise-dark);  
}

.filter--is-active {
color: var(--turquoise-dark);
}


.filter:nth-child(1):hover {
  color:grey;
  }

.portfolio-filter-bar {
  padding-bottom: 0.7rem;
  padding-top: 2.5rem;
  grid-column: 1 / -1;
}




}


/* Flickity styles */

.main-carousel {
grid-column: 2 / 12;
height:550px;
/* border-top: var(--darkblue) 1px solid;
border-bottom: var(--darkblue) 1px solid; */

}



* { box-sizing: border-box; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:auto;
  column-gap: 24px;
  /* counter-increment: gallery-cell; */
  align-items:center;
}
/* 
.carousel-cell img {
  max-width: 90%;
  border-radius: 15px;
} */

.carousel-cell > p {
font-size: 1.3rem; 
grid-column: 8 / -1;
grid-row: 1 / 2;
}


/* cell number */
/* .carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
} */

/* position dots in gallery */
.flickity-page-dots {
  bottom: 0px;
}
/* white circles */
.flickity-page-dots .dot {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: var(--turquoise);
}



/* Gallery */


.hes-gallery{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(395px, 1fr));
  grid-gap: 15px;
}

.hes-gallery img {
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
  cursor: pointer;
  border-radius: 10px;
}

.hes-gallery img:hover
{
  transform: scale(1.01);
}


/* .hes-gallery img:nth-of-type(odd):hover{
  transform: rotate(2deg);
}

.hes-gallery img:nth-of-type(even):hover{
  transform: rotate(-2deg);
} */


/* @media (max-width: 800px) {

  .hes-gallery{
      grid-template-columns: 1fr 1fr 1fr;
  }
} */

@media (max-width:1024px) and (min-width:768px){
 
  .hes-gallery{
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }

  }

  @media only screen and (max-width:768px) {
    .hes-gallery {
      grid-template-columns: 1fr;
      grid-column: 1 / -1;
  }

  }
 


  /* UXPIN */

  .canvas-main-container {

    background-color: transparent !important;
  }