@import url("https://use.typekit.net/sxh8tpt.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: heebo, sans-serif;
  background-color: #0b0b0b;
  color: white;
  font-weight: 400;
  letter-spacing: 0.01em;
}



h3{padding: 16px 0px 8px 0px; font-size: 1.6em;}



a {
    cursor: pointer;
    font-size: 18px;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-text);
}
a::before,
a::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

a::before {
    content: '';
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

a:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.card:hover .textcard a::before,.section:hover .link a::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

a.noanim::before,
a.noanim::after {height: 0px;top: 0%;}


.homeimage {
  
  height: 100%;
  object-fit: cover;max-width: 100%;
}
.projectimage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 200px;
}




.nav-container{display: flex;display:-webkit-flex; justify-content: space-between; align-items: center;  height: 50px;position: relative;margin: 32px 8px 32px 16px;z-index: 20;}
.home .nav-container{position: fixed;width:calc(100% - 16px);}
.nav-container .bm-container {justify-content: right;}
.nav-container .logo {justify-content:left;}

#mu {width: 100%;height: 100%;align-items: center;jujstify-content: center;background-color: #0b0b0b;opacity:0;position: fixed;top: 0;display: none;z-index: 10;}
.mu-inner {margin: auto; text-align: center;}
.mu-inner li{display: block;padding: 16px;}
.mu-inner a {text-decoration: none; color: white; font-size: 1.5em; padding: 8px;text-transform: uppercase;}

#mu.mu-active{opacity: 1; display: flex;}

.home-sticky{position: sticky;margin: 32px 8px -80px 16px}

.bm {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bmRotate.active {
  transform: rotate(45deg);
}
.bmRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
}
.bm1 .top {
  stroke-dasharray: 40 139;
}
.bm1 .bottom {
  stroke-dasharray: 40 180;
}
.bm1.active .top {
  stroke-dashoffset: -98px;
}
.bm1.active .bottom {
  stroke-dashoffset: -138px;
}




.col-6 {display: flex;display:-webkit-flex;flex-wrap: wrap;column-gap: 16px;}
.col-6 .row{flex: 48%;}



.link{margin-bottom: 5%;padding: 36px;background-color: #0000008c;position: absolute;}

.link a {font-size: 2.5vh;font-weight: 900;}


.project{
    display: flex;display:-webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.card {
    width: 33%;
    margin-bottom: -50px;
}
.textcard {
    padding: 24px;
    position: relative;
    top: -80px;
}

main {
display: flex;display:-webkit-flex;
flex-direction: column;
}

.section {
width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;display:-webkit-flex;
    justify-content: center;
    align-items: end;
}
.section:last-of-type {
  height: calc(100vh - 100px);
  align-items: center;
}
/*
section:last-of-type {
  height: calc(100vh - 100px);
  align-items: center;
}*/

main:hover >.btn {opacity: 1;}

main .btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  border-radius: 2px;
  background-color: rgba(0,0,0,0.5);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
   transition: opacity 0.4s;
}

main .btn.next {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
  right: 16px;
  margin-top: 20px;
  transform: rotate(90deg);
}

main .btn.prev {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
  right: 16px;
  margin-top: -20px;
  transform: rotate(90deg);
}
main .btn:hover {background-color: rgba(0,0,0,1);}

.boxed {max-width: 1050px;margin: auto;height: 70vh;align-items: center;}

.footer-container, .container {display: flex;display:-webkit-flex;flex-direction: row}

.footer-container {justify-content:space-between;align-items: center;}

.half-col{flex: 50%;}
.container img {width: 100%;height: 100vh;object-fit: cover;}
.container-padded {padding-left: 54px;}
.container .gallery img {width: 100%;height: auto;margin-bottom:32px;}
.h_iframe iframe {width: 100%;height: 40vh;margin-bottom:32px;}
.content{padding: 16px 54px 16px 54px;}

.content-section{
    max-width: 
    680px;margin: auto;
}
.content-section-full{
    max-width: 1050px;margin: auto;padding-bottom: 40px;
}

.fixed{ overflow: auto;  top: 48px;z-index: -1;
  position: -webkit-sticky;
  position: sticky;}

.contactcenter{   
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    min-height: 70vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    max-width: fit-content;}

h1,.h1{font-size: 3em;font-family: heebo, sans-serif;font-weight: 500;line-height: 1.05;padding: 24px 0px;}
p{padding-bottom: 24px;line-height: 1.54;font-size: 15px;}
blockquote{font-size: 3em;font-family: heebo, sans-serif;font-weight: 500;padding: 24px 0px;line-height: 1.05;}


footer {margin: 16px 32px 24px 48px}

.intro-section {
  height: 50vh;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 160px 54px 100px;
}
.intro-section h1 {
  font-size: 80px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
  padding: 0 0 20px 0;
  max-width: 800px;
  text-wrap: balance;
}
.intro-section p {
  font-size: 18px;
  font-weight: 400;
  padding: 0;
  line-height: 1.4;
  margin-top: -24px;
}

.home .section:not(.intro-section) {
  padding: 0 54px;
}

@media (max-width: 600px) {
  .intro-section { padding: 100px 32px 60px; }
  .intro-section h1,.h1{ font-size: 36px; line-height: 1.15; }
  .intro-section p { font-size: 15px; margin-top: -12px; }
  .home .section:not(.intro-section) { padding: 0 24px; }
}




  .icon-social{padding: 8px;}
  .icon-social:hover{opacity: 0.8;}


.linetext {  border-bottom: solid 3px #ffffff;  }

.accordion { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 24px; }
.accordion-item { border-bottom: 1px solid rgba(255,255,255,0.15); }
.accordion-toggle {
  width: 100%;
  background: none;
  border: none;
  color: white;
  font-family: heebo, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 18px 0;
  cursor: pointer;
}
.accordion-toggle:hover { opacity: 0.6; }
.accordion-body { display: none; padding-bottom: 16px; }
.accordion-body.open { display: block; }
.accordion-body ul { list-style: none; padding: 0; margin: 0; }
.accordion-body li { font-size: 15px; padding: 4px 0; line-height: 1.5; }

@media (max-width: 600px){
.container {flex-direction: column-reverse;;}
.container.boxed {flex-direction: row;}
.container-padded { padding-left: 24px; padding-right: 24px; }
.content { padding-left: 24px; padding-right: 24px; }
.container-padded .content { padding-left: 0; padding-right: 0; }
.fixed{position: initial;}
.half-col{flex: 100%;}
.card{ width: 100%;}
.link{margin-bottom: 20%;}

}

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

  .footer-container{flex-direction: column;}
  .footer-container div:nth-child(2n) {padding:8px 0 40px 0;}
  .boxed {height: 40vh;}
  .col-6 .row{flex: 100%;}
  .section{eight: -webkit-fill-available;}
  .section:last-of-type {height: calc(100vh - 295px);}
.content-section-full {
    max-width: 100%;
    padding: 16px 24px;
}
.content {
    padding: 16px 24px;
}
}


@media only screen and (min-width: 1701px) and (max-width: 2400px) {

.boxed {height: 75vh;}}
@media only screen and (min-width: 2401px) {

.boxed {height: 85vh;}}