/* ========== google fonts  ==========*/
@import url("https://fonts.googleapis.com/css?family=Libre+Caslon+Display&display=swap");
/*  font-family: 'Libre Caslon Display', serif;  */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap");
/* === font-family: 'Inter', sans-serif; === */
@import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap");
/* === font-family: 'Oswald', sans-serif; === */
/* ========== google fonts  ==========*/
/* ========== reset ===========*/
* {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

ol,
ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: "";
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

a {
   text-decoration: none;
}

.clearfix:before,
.clearfix:after {
   content: "";
   display: table;
}

.clearfix:after {
   clear: both;
}

/*========== end reset ==========*/
/*========== sass variables  ==========*/
/*---------- color variables ----- */
/*---------- fonts variables ----- */
/*---------- mixins ----- */
/*========== end sass variables  ==========*/
/*========== universal ==========*/
html,
body {
   width: 100vw;
   height: 100%;
   font-size: 16px;
   font-weight: 300;
   background-color: #e6e3df;
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   position: relative;
   color: #1a1919;
}

a {
   color: #1a1919;
}

p {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 1.1rem;
   line-height: 1.3rem;
}

h1 {
   font-family: "Libre Caslon Display", serif;
   text-transform: uppercase;
   font-size: 6vw;
   line-height: 4.9vw;
   letter-spacing: -0.4rem;
   font-weight: 200;
   opacity: 0.7;
   color: #ffffff;
   text-align: center;
}

h1 span {
   display: block;
}

h1 span.accent-txt {
   font-size: 1rem;
   line-height: 1rem;
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   text-transform: capitalize;
   letter-spacing: 0rem;
   font-weight: 300;
   color: #ffffff;
   margin-bottom: 1rem;
}

h2 {
   font-family: "Oswald", sans-serif;
   font-size: 1.8rem;
   line-height: 1.9rem;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
   font-weight: 300;
   margin-bottom: 3rem;
}

h2 span {
   display: block;
}

h3 {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 1.1rem;
   line-height: 1.3rem;
}

/*---------- round buttons  ---------- */
.round__button {
   border-radius: 50%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.round__button p,
.round__button a {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 0.9rem;
   line-height: 1.15rem;
   color: #6b6b68;
}

.round__button a {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
}

.round__button-more-work {
   width: 90px;
   height: 90px;
   background-color: transparent;
   margin: 8rem auto;
}

.round__button-more-work a {
   background-color: #1a1717;
}

.round__button-more-work a p {
   color: #c5c4be;
}

.round__button-more-work a:hover p {
   color: #1a1919;
}

.round__button-footer {
   width: 90px;
   height: 90px;
   float: left;
   margin-right: 1rem;
   border: 1px solid #c1bdb7;
}

.round__button-footer:nth-of-type(2) {
   margin-right: 0;
}

.round__button a:hover {
   background-color: #ecebe5;
}

/*---------- end round buttons  ---------- */
/*========== end universal ==========*/
/* ========== animations ==========*/
.headline-faded {
   -webkit-transform: translateY(10%);
   transform: translateY(10%);
   opacity: 0;
}

.headline-faded__triggered {
   -webkit-animation: headlineFaded 0.7s ease forwards;
   animation: headlineFaded 0.7s ease forwards;
}

@-webkit-keyframes headlineFaded {
   0% {
      -webkit-transform: translateY(50%);
      transform: translateY(50%);
      opacity: 0;
   }
   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
   }
}

@keyframes headlineFaded {
   0% {
      -webkit-transform: translateY(50%);
      transform: translateY(50%);
      opacity: 0;
   }
   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
   }
}

.grain {
   content: "";
   position: absolute;
   width: 200%;
   height: 200%;
   top: -50%;
   left: -50%;
   background: url(../coming-soon-images/grain.png) repeat;
   -webkit-animation: grain 1.5s steps(3) infinite;
   animation: grain 1.5s steps(3) infinite;
   overflow: hidden;
}

.grain-white {
   content: "";
   position: absolute;
   width: 200%;
   height: 200%;
   top: -50%;
   left: -50%;
   background: url(../coming-soon-images/grain-white.png) repeat;
   -webkit-animation: grain 1.5s steps(3) infinite;
   animation: grain 1.5s steps(3) infinite;
   overflow: hidden;
   opacity: 0.03;
}

@-webkit-keyframes grain {
   0%,
   100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
   }
   10% {
      -webkit-transform: translate(-5%, -10%);
      transform: translate(-5%, -10%);
   }
   30% {
      -webkit-transform: translate(3%, -15%);
      transform: translate(3%, -15%);
   }
   50% {
      -webkit-transform: translate(12%, 9%);
      transform: translate(12%, 9%);
   }
   70% {
      -webkit-transform: translate(9%, 4%);
      transform: translate(9%, 4%);
   }
   90% {
      -webkit-transform: translate(-1%, 7%);
      transform: translate(-1%, 7%);
   }
}

@keyframes grain {
   0%,
   100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
   }
   10% {
      -webkit-transform: translate(-5%, -10%);
      transform: translate(-5%, -10%);
   }
   30% {
      -webkit-transform: translate(3%, -15%);
      transform: translate(3%, -15%);
   }
   50% {
      -webkit-transform: translate(12%, 9%);
      transform: translate(12%, 9%);
   }
   70% {
      -webkit-transform: translate(9%, 4%);
      transform: translate(9%, 4%);
   }
   90% {
      -webkit-transform: translate(-1%, 7%);
      transform: translate(-1%, 7%);
   }
}

@-webkit-keyframes heading-txt-reveal {
   0% {
      opacity: 0;
      -webkit-transform: translateY(50%);
      transform: translateY(50%);
   }
   20% {
      opacity: 0;
   }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@keyframes heading-txt-reveal {
   0% {
      opacity: 0;
      -webkit-transform: translateY(50%);
      transform: translateY(50%);
   }
   20% {
      opacity: 0;
   }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

/*========== header ==========*/
/*---------- main logo ---------- */
.logo-main {
   position: fixed;
   top: 2.5rem;
   left: 5rem;
   z-index: 300;
}

.logo-main img {
   width: 100px;
   height: auto;
}

/*---------- end main logo ---------- */

/*---------- nav links ---------- */
.overlay {
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 100vh;
   opacity: 1;
   visibility: hidden;
   -webkit-transition:
      opacity 0.55s,
      visibility 0.35s,
      width 0.35s;
   transition:
      opacity 0.55s,
      visibility 0.35s,
      width 0.35s;
   z-index: 290;
}

.overlay:after {
   content: "";
   background-color: #1a1717;
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   -webkit-transform: scale(0);
   transform: scale(0);
   -webkit-transform-origin: right center;
   transform-origin: right center;
   -webkit-transition: all 0.8s ease;
   transition: all 0.8s ease;
}

.overlay.open {
   visibility: visible;
}

.overlay.open:after {
   -webkit-transform: translateX(0);
   transform: translateX(0);
}

.overlay.open a {
   -webkit-animation: navfadeInRight 0.7s ease forwards;
   animation: navfadeInRight 0.7s ease forwards;
   -webkit-animation-delay: 0.45s;
   animation-delay: 0.45s;
}

.overlay.open a:nth-of-type(2) {
   -webkit-animation-delay: 0.55s;
   animation-delay: 0.55s;
}

.overlay.open a:nth-of-type(3) {
   -webkit-animation-delay: 0.65s;
   animation-delay: 0.65s;
}

.overlay .main-nav {
   height: auto;
   position: absolute;
   top: 10rem;
   right: 10vw;
   z-index: 150;
}

.overlay .main-nav a {
   font-family: "Oswald", sans-serif;
   font-size: 1.6rem;
   line-height: 1.9rem;
   letter-spacing: 0.35rem;
   text-transform: uppercase;
   font-weight: 200;
   line-height: 3rem;
   display: block;
   color: #c5c4be;
   opacity: 0;
   -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
}

.overlay .main-nav a:hover {
   color: #c41313;
}

.overlay .main-nav .main-nav_small {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 14px;
   text-transform: none;
   line-height: 1.2rem;
   margin-top: 2rem;
   letter-spacing: 0;
   font-weight: 300;
}

.overlay .main-nav .main-nav_small span {
   display: block;
   font-size: 0.8rem;
}

.overlay .nav-text-block {
   width: 300px;
   height: auto;
   opacity: 0;
   z-index: 8;
   position: absolute;
   bottom: 15%;
   left: 5rem;
}

.overlay .nav-text-block p {
   color: #c5c4be;
}

.overlay .nav-text-block p:before {
   content: "";
   display: block;
   width: 24px;
   height: 1px;
   background-color: #c41313;
   margin-bottom: 10px;
}

.overlay nav .secondary-links .main-nav-start-link {
   margin-top: 1rem;
}

.overlay.open .nav-text-block {
   -webkit-animation: navfadeInRight 0.7s ease forwards;
   animation: navfadeInRight 0.7s ease forwards;
   -webkit-animation-delay: 0.45s;
   animation-delay: 0.45s;
}

@-webkit-keyframes navfadeInRight {
   0% {
      opacity: 0;
      -webkit-transform: translateX(40px);
      transform: translateX(40px);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@keyframes navfadeInRight {
   0% {
      opacity: 0;
      -webkit-transform: translateX(40px);
      transform: translateX(40px);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

/*---------- end nav links ---------- */

/*========== end header ==========*/
/*========== home page ==========*/
/*---------- hero home page ---------- */
.hero {
   width: 100vw;
   height: 120vh;
   min-height: 600px;
   position: relative;
   z-index: 15;
}

.hero__slider {
   width: 100%;
   height: 100%;
   background-color: #1a1717;
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   overflow: hidden;
}

.hero__slider--slide {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   -webkit-transition: all 1s cubic-bezier(0.87, 0, 0.78, 0.94);
   transition: all 1s cubic-bezier(0.87, 0, 0.78, 0.94);
   -webkit-transform: scale(1.04);
   transform: scale(1.04);
   -webkit-transform-origin: center center;
   transform-origin: center center;
   -webkit-filter: blur(20px);
   filter: blur(20px);
   background-color: #000000;
}

.hero-slide-show {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-filter: blur(0);
   filter: blur(0);
}

.slide {
   opacity: 0.4;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #000000;
}

.hero__text {
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
}

.thin-lines {
   padding: 0 5rem;
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   position: absolute;
   top: 0;
   left: 0;
}

.thin-line {
   width: 0.033rem;
   height: 100%;
   background-color: rgba(236, 235, 229, 0.2);
}

.hero__slider--home .hero__slider--slide:nth-of-type(1) .slide {
   background: url(../coming-soon-images/banner-project-1.jpg) no-repeat center
      center;
   background-size: cover;
}

.hero__slider--home .hero__slider--slide:nth-of-type(2) .slide {
   background: url(../coming-soon-images/banner-project-2.jpg) no-repeat center
      center;
   background-size: cover;
}

.hero__slider--home .hero__slider--slide:nth-of-type(3) .slide {
   background: url(../coming-soon-images/banner-project-3.jpg) no-repeat center
      top;
   background-size: cover;
}

.hero__slider--home .hero__slider--slide:nth-of-type(4) .slide {
   background: url(../coming-soon-images/banner-project-4.jpg) no-repeat center
      top;
   background-size: cover;
}

.hero__slider--home .hero__slider--slide:nth-of-type(5) .slide {
   background: url(../coming-soon-images/banner-project-5.jpg) no-repeat center
      bottom;
   background-size: cover;
}

.work-hero-image {
   width: 100%;
   height: 100%;
   background: url(../coming-soon-images/work-banner.jpg) no-repeat;
   background-size: cover;
   background-position: center center;
}

/*---------- end hero home page ---------- */
/*---------- text devider ---------- */
.text-devider {
   width: 100vw;
   padding: 6rem 0;
   margin: 0 auto;
   background-color: #1a1717;
}

.text-devider__block {
   max-width: 450px;
   margin: 0 auto;
}

.text-devider-side {
   margin-top: 2rem;
   width: 100%;
}

.text-devider__block h2 {
   text-align: center;
   color: #ffffff;
   margin-bottom: 2rem;
}

.text-devider__block p {
   text-align: center;
   color: #c5c4be;
}

.text-devider-side p {
   text-align: center;
   font-weight: 200;
   color: #c5c4be;
}

.text-devider-side p span {
   display: block;
   font-size: 0.65rem;
   margin-top: 1.5rem;
   margin-bottom: 0.2rem;
   font-weight: 500;
   text-transform: uppercase;
   color: #ffffff;
}

/*---------- end text devider ---------- */
/* ========== featured section ==========*/
.cases-gallery {
   width: 100vw;
   padding: 0 5rem;
   margin: 0 auto;
}

.cases-gallery h2 {
   max-width: 1200px;
   margin: 12rem auto 2rem;
}

.cases {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}

.cases li {
   width: 100%;
   height: 85vh;
   max-height: 850px;
   min-height: 700px;
   overflow: hidden;
   margin-bottom: 5rem;
   position: relative;
}

.cases li.last {
   margin-bottom: 0;
}

.project-thump__overlay {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   background-color: #e6e3df;
   z-index: 100;
}

.overlay-start {
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
   -webkit-transform-origin: right;
   transform-origin: right;
   z-index: 5000;
}

.image-overlay-slide-left {
   -webkit-animation: image-overlay-slide-left 0.45s
      cubic-bezier(0.87, 0, 0.78, 0.94) forwards;
   animation: image-overlay-slide-left 0.45s cubic-bezier(0.87, 0, 0.78, 0.94)
      forwards;
}

@-webkit-keyframes image-overlay-slide-left {
   0% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: right;
      transform-origin: right;
   }
   100% {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: right;
      transform-origin: right;
   }
}

@keyframes image-overlay-slide-left {
   0% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: right;
      transform-origin: right;
   }
   100% {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: right;
      transform-origin: right;
   }
}

.cases li .case-thumb {
   width: 40%;
   height: 100%;
   float: left;
}

.cases li .case-thumb:after {
   width: 16%;
   height: 100%;
   background-color: #dfdbd5;
}

.cases li .case-patch {
   width: 16%;
   height: 100%;
   float: left;
   background-color: #ecebe5;
}

.cases li .case-text-block {
   width: 44%;
   height: 100%;
   float: right;
   position: relative;
   background-color: #dfdbd5;
   padding-left: 4rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.cases li .case-text-block a {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
   padding: 8rem 4rem;
   -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
}

.cases li .case-text-block a:hover {
   background-color: #dedcd8;
}

.case-client-name {
   font-family: "Oswald", sans-serif;
   font-size: 1.8rem;
   line-height: 1.9rem;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
   font-weight: 300;
   font-size: 1.6rem;
   line-height: 1.9rem;
}

.case-client-name::after {
   content: "";
   display: block;
   width: 24px;
   height: 1px;
   background-color: #b0561e;
   margin: 1rem 0 1rem 0;
   font-size: 1.6rem;
   line-height: 1.9rem;
}

.case-client-name span {
   display: block;
}

.case-caption {
   color: #6b6b68;
   max-width: 250px;
}

.round__button-browse {
   width: 70px;
   height: 70px;
   border: 1px solid #c1bdb7;
   margin-top: 3rem;
}

.cases li:nth-of-type(1) .case-thumb {
   background: url(../coming-soon-images/civil-animated.gif) no-repeat;
   background-size: cover;
   background-position: center center;
}

.cases li:nth-of-type(2) .case-thumb {
   background: url(../coming-soon-images/educational-animated.gif) no-repeat;
   background-size: cover;
   background-position: center center;
}

.cases li:nth-of-type(3) .case-thumb {
   background: url(../coming-soon-images/historical-animated.gif) no-repeat;
   background-size: cover;
   background-position: center center;
}

/* ========== end featured section ==========*/
/*========== end home page ==========*/
/*========== project page ==========*/
.project__hero {
   width: 100vw;
   height: auto;
   background-color: #dfdbd5;
}

.project__hero-text-block {
   margin: 20rem 3rem 2rem 5rem;
}

.project__hero-text-block .client_name_accent {
   font-size: 1rem;
   line-height: 1rem;
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   text-transform: capitalize;
   letter-spacing: 0rem;
   font-weight: 300;
   color: #ffffff;
   margin-bottom: 1rem;
   text-align: left;
   color: #1a1919;
}

.project__hero-text-block .client_name {
   font-family: "Libre Caslon Display", serif;
   text-transform: uppercase;
   font-size: 6vw;
   line-height: 4.9vw;
   letter-spacing: -0.4rem;
   font-weight: 200;
   font-size: 3rem;
   letter-spacing: -0.15rem;
}

.project__banner {
   width: calc(100% - 5rem);
   height: 100vh;
   margin-left: 5rem;
   position: relative;
}

.project__banner .project-thump__overlay {
   background-color: #dfdbd5;
}

.project__banner--project-01 {
   background: url(../images/project-01/project-01-banner.jpg) no-repeat;
   background-size: cover;
   background-position: center center;
}

.two-col {
   width: 100vw;
   height: auto;
   padding: 6rem 0;
}

.two-col-container {
   width: 100%;
   padding: 0 5rem;
   max-width: 1200px;
   margin: 0 auto;
}

.two-col-container li {
   width: calc(50% - 1rem);
   float: left;
   margin-bottom: 2rem;
}

@-webkit-keyframes fade-in {
   from {
      opacity: 0;
      -webkit-transform: perspective(700px) rotateX(20deg);
      transform: perspective(700px) rotateX(20deg);
      -webkit-transition: 0.1s
         cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
      transition: 0.1s cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
      transition: 0.1s cubic-bezier(0.87, 0, 0.78, 0.94) transform;
      transition:
         0.1s cubic-bezier(0.87, 0, 0.78, 0.94) transform,
         0.1s cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
   }
   to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@keyframes fade-in {
   from {
      opacity: 0;
      -webkit-transform: perspective(700px) rotateX(20deg);
      transform: perspective(700px) rotateX(20deg);
      -webkit-transition: 0.1s
         cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
      transition: 0.1s cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
      transition: 0.1s cubic-bezier(0.87, 0, 0.78, 0.94) transform;
      transition:
         0.1s cubic-bezier(0.87, 0, 0.78, 0.94) transform,
         0.1s cubic-bezier(0.87, 0, 0.78, 0.94) -webkit-transform;
   }
   to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

.fade-in-element {
   -webkit-animation: fade-in 2.3s;
   animation: fade-in 2.3s;
}

.object-hidden {
   opacity: 0;
}

.two-col-container li:nth-of-type(even) {
   margin-left: 2rem;
}

.two-col-container li img {
   width: 100%;
   height: auto;
}

.one-col {
   width: 100vw;
   height: auto;
   background-color: #dfdbd5;
   padding: 8rem 0;
}

.one-col-image {
   width: 100%;
   padding: 0 5rem;
   max-width: 1240px;
   margin: 0 auto;
}

.one-col-image img {
   width: 100%;
   height: auto;
}

.image__devider {
   width: 100vw;
   height: 100vh;
   position: relative;
}

.image__devider-project-01-01 {
   background: url(../images/project-01/project-01-devider01.jpg) no-repeat;
   background-size: cover;
   background-position: center center;
}

.image-half-devider {
   width: 100vw;
   height: auto;
}

.image-half-devider-container {
   width: 70%;
   height: auto;
   float: right;
}

.image-half-devider-container img {
   width: 100%;
   height: auto;
}

.projects-nav {
   margin: 0 auto;
   width: 20%;
   min-width: 360px;
   height: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.projects-nav-button {
   width: 40px;
   height: 40px;
}

.projects-nav-button a {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 0.9rem;
   line-height: 1.15rem;
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
}

/*========== end project page ==========*/
/*========== Contact Us ==========*/
.hero__slider--contact .hero__slider--slide:nth-of-type(1) {
   background:
      -webkit-gradient(
         linear,
         left bottom,
         left top,
         from(rgba(0, 0, 0, 0.2)),
         to(rgba(0, 0, 0, 0.2))
      ),
      url(../images/aboutus-slide-01.jpg) no-repeat center center;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../images/aboutus-slide-01.jpg) no-repeat center center;
   background-size: cover;
}

.hero__slider--contact .hero__slider--slide:nth-of-type(2) {
   background:
      -webkit-gradient(
         linear,
         left bottom,
         left top,
         from(rgba(0, 0, 0, 0.2)),
         to(rgba(0, 0, 0, 0.2))
      ),
      url(../images/aboutus-slide-02.jpg) no-repeat center center;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../images/aboutus-slide-02.jpg) no-repeat center center;
   background-size: cover;
}

.hero__slider--contact .hero__slider--slide:nth-of-type(3) {
   background:
      -webkit-gradient(
         linear,
         left bottom,
         left top,
         from(rgba(0, 0, 0, 0.2)),
         to(rgba(0, 0, 0, 0.2))
      ),
      url(../images/aboutus-slide-03.jpg) no-repeat center center;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../images/aboutus-slide-03.jpg) no-repeat center center;
   background-size: cover;
}

.hero__slider--contact .hero__slider--slide:nth-of-type(4) {
   background:
      -webkit-gradient(
         linear,
         left bottom,
         left top,
         from(rgba(0, 0, 0, 0.2)),
         to(rgba(0, 0, 0, 0.2))
      ),
      url(../images/aboutus-slide-04.jpg) no-repeat center center;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../images/aboutus-slide-04.jpg) no-repeat center center;
   background-size: cover;
}

.hero__slider--contact .hero__slider--slide:nth-of-type(5) {
   background:
      -webkit-gradient(
         linear,
         left bottom,
         left top,
         from(rgba(0, 0, 0, 0.2)),
         to(rgba(0, 0, 0, 0.2))
      ),
      url(../images/aboutus-slide-05.jpg) no-repeat center center;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../images/aboutus-slide-05.jpg) no-repeat center center;
   background-size: cover;
}

.process {
   width: 100vw;
   height: auto;
}

.services {
   width: 80%;
   max-width: 1000px;
   height: auto;
   padding: 0 5rem 8rem 5rem;
}

.accordion-item {
   border-top: 1px solid #bdbdbd;
}

.accordion .accordion-item:nth-of-type(3) {
   border-bottom: 1px solid #bdbdbd;
}

.accordion-item-header {
   height: 6rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: left;
   -ms-flex-pack: left;
   justify-content: left;
   position: relative;
   cursor: pointer;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.accordion-item-body {
   max-height: 0;
   overflow: hidden;
   -webkit-transition: max-height 0.2s ease;
   transition: max-height 0.2s ease;
}

.accordion-item-body-content {
   padding: 2rem 0;
   line-height: 1.5rem;
   -webkit-transition: all 2s ease;
   transition: all 2s ease;
}

.accordion-item-body-content p {
   max-width: 600px;
}

/*========== end Contact Us ==========*/
/*========== Footer ==========*/
footer {
   width: 100vw;
   height: auto;
   background-color: #dfdbd5;
}

.footer-wrapper {
   width: 100%;
   height: auto;
   padding: 5rem 5rem;
}

.headline-block {
   width: 50%;
   height: auto;
   float: left;
}

.headline-text p {
   max-width: 400px;
}

.footer-email {
   margin-top: 4rem;
}

.footer-email a {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 0.9rem;
   line-height: 1.15rem;
   -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
}

.footer-email a:hover {
   color: #c41313;
}

.footer-circle-links {
   float: right;
   margin-right: 5rem;
}

.footer-circle-button a {
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   color: #c5c4be;
   text-transform: uppercase;
}

.disclaimer-box {
   width: 100%;
   padding: 1rem 5rem 2rem;
}

.disclaimer-box p {
   font-family:
      "Helvetica Neue", Helvetica, "Inter", Arial, "Lucida Grande", sans-serif;
   font-size: 0.9rem;
   line-height: 1.15rem;
}

/*========== end Footer ==========*/
/* ========== tablet media queries styles ==========*/
@media only screen and (min-device-width: 622px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
   h1 {
      font-size: 6vw;
      line-height: 5.5vw;
   }
   .logo-main img {
      width: 80px;
      height: auto;
   }
   .overlay .main-nav {
      top: 6rem;
      left: 5rem;
   }
   .overlay .nav-text-block {
      width: 60%;
      height: auto;
      opacity: 0;
      z-index: 8;
      position: absolute;
      bottom: 6rem;
      left: 5rem;
   }
   .hero {
      height: 80vh;
      min-height: 400px;
      height: calc(var(--vh, 1vh) * 90);
   }
   .text-devider {
      padding: 8rem 4rem;
   }
   .cases-gallery {
      width: calc(100vw - 5rem);
      padding: 0;
      margin: 0;
   }
   .cases-gallery h2 {
      padding-left: 5rem;
   }
   .cases li {
      width: 100%;
      height: auto;
      max-height: none;
      min-height: 800px;
   }
   .cases li .case-thumb {
      width: 100%;
      height: 90vh;
      min-height: 400px;
      max-height: 900px;
   }
   .cases li .case-patch {
      display: none;
   }
   .cases li .case-text-block {
      width: 100%;
      height: 40vh;
      padding: 4rem 5rem;
      min-height: 250px;
      max-height: 382px;
   }
   .round__button-browse {
      position: absolute;
      bottom: 3rem;
   }
   .cases li .case-text-block a {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      padding: 3rem;
      -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
      transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   }
   .project__hero-text-block {
      margin: 20rem 3rem 2rem 5rem;
   }
   .project__banner {
      width: calc(100% - 5rem);
      height: 80vh;
      margin-left: 5rem;
   }
   .project__hero-text-block .client_name {
      font-size: 2.2rem;
      line-height: 1.77rem;
   }
   .two-col-container {
      width: 100%;
      padding: 0;
      max-width: 1440px;
      margin: 0;
   }
   .two-col-container li {
      width: calc(100% - 3rem);
      float: left;
      margin-bottom: 2rem;
   }
   .two-col-container li:nth-of-type(even) {
      margin-left: 0;
   }
   .one-col {
      padding: 5rem 0;
   }
   .one-col-image {
      width: 100%;
      padding: 0 3rem;
      max-width: 1240px;
      margin: 0 auto;
   }
   .round__button-more-work a {
      font-size: 1rem;
   }
   .projects-nav {
      min-width: 245px;
   }
   .services {
      width: 100vw;
      padding: 0 6rem 8rem 3rem;
   }
   .footer-wrapper {
      padding: 7rem 5rem 7rem 5rem;
      height: 58vh;
   }
   .headline-block {
      width: 100%;
   }
   .footer-email {
      margin-top: 2rem;
   }
   .footer-circle-links {
      float: left;
      margin-top: 4rem;
      margin-right: 0;
   }
   .disclaimer-box {
      width: 100%;
      padding: 5rem;
   }
}

/* ========== tablet media queries styles ==========*/
/* ========== mobile media queries styles ==========*/
@media only screen and (max-width: 621px) {
   /*========== mobile header ==========*/
   h1 {
      font-size: 10.5vw;
      line-height: 9vw;
      letter-spacing: -0.25rem;
   }
   .project__hero-text-block .client_name_accent {
      font-size: 0.7rem;
   }
   .logo-main {
      position: fixed;
      top: 3rem;
      left: 3rem;
   }
   .logo-main img {
      width: 80px;
      height: auto;
   }
   .logo-secondary {
      top: 5rem;
      right: 1rem;
      opacity: 0;
      position: fixed;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      z-index: 200;
   }

   .overlay {
      height: calc(var(--vh, 1vh) * 100);
   }
   .overlay .main-nav {
      top: 4rem;
      left: 3rem;
   }
   .overlay .nav-text-block {
      width: 60%;
      height: auto;
      opacity: 0;
      z-index: 8;
      position: absolute;
      bottom: 4rem;
      left: 3rem;
   }
   .right-side-links {
      right: 1rem;
      top: 85%;
   }
   .hero {
      height: 80vh;
      min-height: 400px;
      height: calc(var(--vh, 1vh) * 90);
   }
   .thin-lines {
      padding: 0 3rem;
   }
   .thin-line:nth-of-type(even) {
      display: none;
   }
   .text-devider {
      padding: 8rem 4rem;
   }
   .cases-gallery {
      width: calc(100vw - 3rem);
      padding: 0;
      margin: 0;
   }
   .cases-gallery h2 {
      padding-left: 3rem;
   }
   .cases li {
      width: 100%;
      height: auto;
      max-height: none;
      min-height: 800px;
   }
   .cases li .case-thumb {
      width: 100%;
      height: 90vh;
      min-height: 400px;
      max-height: 700px;
   }
   .cases li .case-patch {
      display: none;
   }
   .cases li .case-text-block {
      width: 100%;
      height: 65vh;
      padding: 3rem 2.5rem;
      min-height: 360px;
      max-height: 700px;
   }
   .cases li .case-text-block a {
      padding: 3rem;
      -webkit-transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
      transition: all 0.3s cubic-bezier(0.87, 0, 0.78, 0.94);
   }

   .project__hero-text-block {
      margin: 20rem 3rem 2rem 3rem;
   }
   .project__banner {
      width: calc(100% - 3rem);
      height: 80vh;
      margin-left: 3rem;
   }
   .project__hero-text-block .client_name {
      font-size: 10.5vw;
      line-height: 9vw;
      letter-spacing: -0.25rem;
   }
   .two-col-container {
      width: 100%;
      padding: 0;
      max-width: 1440px;
      margin: 0;
   }
   .two-col-container li {
      width: calc(100% - 3rem);
      float: left;
      margin-bottom: 2rem;
   }
   .two-col-container li:nth-of-type(even) {
      margin-left: 0;
   }
   .one-col {
      padding: 5rem 0;
   }
   .one-col-image {
      width: 100%;
      padding: 0 3rem;
      max-width: 1240px;
      margin: 0 auto;
   }
   .round__button-more-work {
      width: 125px;
      height: 125px;
   }
   .round__button-more-work a {
      font-size: 1rem;
   }
   .projects-nav {
      min-width: 245px;
   }
   .services {
      width: 100vw;
      padding: 0 6rem 8rem 3rem;
   }
   footer {
      height: 100vh;
   }
   .footer-wrapper {
      padding: 7rem 5rem 3rem 3rem;
   }
   .headline-block {
      width: 100%;
   }
   .footer-email {
      margin-top: 2rem;
   }
   .footer-circle-links {
      float: left;
      margin-top: 4rem;
      margin-right: 0;
   }
   .disclaimer-box {
      width: 100%;
      padding: 3rem;
   }
}
/*# sourceMappingURL=main.css.map */