/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
* {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
html, body {
  color: #11100F;
  background: #fbfbfb;
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Futura PT W01 Book', 'Futura PT', 'Futura', sans-serif;
  margin: auto;
  font-weight: 400
}

::-moz-selection { /* Code for Firefox */
  color: #111;
  background: #D44B4C;
}

::selection {
  color: #111;
  background: #D44B4C;
}

.body {max-width: 1200px;margin: auto;}

@keyframes animated_text {
  0% { background-position: 0px 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0px 50%; }
}


.hide {display: none!important;}
.preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;background: #fffbf8;}


/* ==========================================================================
 Swiper
 ========================================================================== */
.swiper {
  width: 100%;
  height: 100%;
  overflow: inherit!important;
}
.swiper-pagination {
    bottom: -50px!important;
}
.swiper-about {padding: 0 10px!important;}
.swiper-projects {padding: 0 10px!important;}

.swiper-pointer-events {cursor: grab;}
.swiper-pagination-bullet-active {background: #000;}

.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


.swiper-slide-alt {
  text-align: left;
  /* Center slide text vertically */ 
  display: block;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
 Base Fonts
 ========================================================================== */

  a {color: #11100F; text-decoration: none;}
  h5  {text-transform: uppercase; font-size: 12px; color: #A5A5A5;}
  a, h1, h2, h3, h4, h5, h6, p {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-font-feature-settings: "kern" 1;
      -o-font-feature-settings: "kern" 1;
      font-feature-settings: "kern" 1;
      font-kerning: normal;
      font-feature-settings: "liga" on;
      font-feature-settings: "dlig" off;
      font-feature-settings: "tnum" off;
      font-feature-settings: "onum" off;
      font-feature-settings: "ss01" off,"kern";
      margin: 0;
      padding: 0;
  }
  a,p {letter-spacing: -0.005rem;}
  h1, h2, h3, h4, h5, h6 {letter-spacing: -0.05rem;}
  ul {padding: 0; margin: 0;}
    
  /* ==========================================================================
   Slick
   ========================================================================== */
  .slick-dots {display: none!important;}
  .slick-arrow {cursor: pointer!important;opacity: 0.25;} 
  .slick-arrow:hover {opacity: 1;} 
  
  /* ==========================================================================
   Header
   ========================================================================== */
   
   .header              {}
   .header .wrapper     {
         position: fixed;
         top: 0;
         width: 100%;
         /* max-width: 1200px; */
         backdrop-filter: blur(30px);
         -webkit-backdrop-filter: blur(30px);
         z-index: 999;
         height: auto;
         padding: 20px 50px;
         display: flex;
         align-items: center;
         background: rgba(255,255,255,0.4);
         justify-content: space-between;
         margin: auto;
         box-sizing: border-box;
     }
  
   .header .logo        {width: 100px;}
   .header .logo a img  {width: 100%;}
   
   .header .menu-menu-container          {}
   .header .menu-menu-container ul       {display: flex;gap: 35px;}
   .header .menu-menu-container ul li    {
    display: inline-block;
}
   .header .menu-menu-container ul li a  {font-size: 20px;font-weight: 400; opacity: 0.5}
   .header .menu-menu-container ul li a.active,.header .menu-menu-container ul li a:hover, .header .menu-menu-container ul li.current_page_item a  {opacity: 1;}
   .header .menu-menu-container ul li a i {font-size: 22px}
   .hero                              {
    width: 50%;
    background: #fdf5ef;
    position: absolute;
    right: 0;
    top: 0;
    height: 680px;
    padding: 70px;
    z-index: 1;
    box-sizing: border-box;
}
   .hero .hero-wrapper                {}
   .hero .hero-wrapper .headline      {}
   
   .body-job .headline h1{
    margin-bottom: 20px!important;
}
   .hero .hero-wrapper .headline .tags      {
    display: flex;
    margin: 20px auto;
}
   .hero .hero-wrapper .headline .tags .tag      {
    background: #fff;
    border-radius: 10px;
    padding: 10px 15px;
    margin-right: 15px;
}
   .hero .hero-wrapper .headline .tags .tag p     {
    font-weight: 400;
}
   
   
   .hero .hero-wrapper .headline h1   {
    font-size: 64px;
    line-height: 1em;
    font-weight: 100;
    color: #11100F;
    text-decoration: none;
    letter-spacing: -2px;
    margin-bottom: 110px;
    margin-top: 175px;
}
   .hero .hero-wrapper .headline a    {display: flex;gap: 15px;justify-content: left;align-items: center;font-weight: 400;}
   .hero .hero-wrapper .subline       {
    position: absolute;
    right: 40px;
    bottom: 15px;
}
   .hero .hero-wrapper .subline p     {
    color: #11100F;
    opacity: 0.25;
    font-size: 13px;
    text-transform: uppercase;
}
   
.hero-image {
    z-index: 3;
    position: relative;
    margin-top: 580px;
    width: 65%;
    object-fit: none;
    text-align: left;
    margin-left: unset!important;
    margin-right: unset!important;
}
   .hero-image img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
   
   
   .swiper-slide-hero {height: 500px!important; width:auto;}
   
   /* ==========================================================================
    Blocks
    ========================================================================== */
   
   .block        {margin: 135px auto; max-width: 1200px; overflow: hidden;}
   .block.hidden  {display: none;}
   .block-header {display: flex;justify-content: space-between;margin-bottom: 30px;}
   
   .block_contact {margin:0; margin-top: 35px;}
   
   .block-item   {width: 50%;padding: 50px 50px;box-sizing: border-box;align-content: center;display: flex;}
   
   .block-item-headline {background: #fdf5ef;display: flex;flex-direction: column;gap: 15px;}
   .block-item-headline h1  {
    margin-top: 0;
    font-weight: 400;
}
   .block-item-headline p   {opacity: 0.5;margin: unset!important;}
   
   .block-item h1 {
    font-size: 42px;
    font-weight: 300;
}
   .block-item p {font-size: 0.9rem;margin: auto;opacity: 1;font-weight: 500;line-height: 1.25rem;color: #010101;}
   .block-item p.subtitle {font-size: 12px;margin: auto;opacity: 0.5; text-transform: uppercase;}
   .block-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    gap:40px;
}
     
     /* ==========================================================================
     About Item
     ========================================================================== */
     .about-item      {
    display: block;
    margin: auto;
    width: 250px;
    text-align: center;
    display: inline-block;
    text-align: center;
    margin: auto;
    margin: 0px auto;
    background:none!important;
}
     .item-image      {
    overflow: hidden;
    width: 140px;
    height: 140px;
    border-radius: 9999px;
    /* display: flex; */
    align-items: normal;
    /* margin: 0; */
    padding: 0;
    display: inline-block;
}
     .item-image img  {
    width: 100%;
}
     .about-item h2   {
    margin: 0;
    font-weight: 400;
}
     .about-item p    {
    margin: 0;
    width: 190px;
    font-size: 12px;
    margin: 0 auto;
}

    /* ==========================================================================
    Projects
    ========================================================================== */
   .projects {}
   .project-item-image {
    width: 100%;
    border-radius: 10px;
    height: 420px;
}

.swiper-projects-alt .project-item-image {height: 560px;}

   .project-item-image img {
    object-fit: cover;
    width: 100%;
    border-radius: 0px;
}
   
   .project-item-body {}
   .project-item-body h1 {
    font-size: 24px;
    font-weight: 400;
    margin: 5px 0;
}
   .project-item-body p {
    font-size: 14px;
    margin-bottom: 15px;
}
   .project-item-body a {
    font-size: 14px;
}
   
   /* ==========================================================================
    Quote
    ========================================================================== */
   .quote-background {position: absolute;z-index: 0;width: 100%;height: 280px;background: #fffbf8;top: -70px;}
   .block.quote {
    position: relative;
    display: flex;
    margin: 0;
    margin: 45px auto;
    box-sizing: border-box;
    margin-top: 160px;
}
   .quote .image {
    z-index: 1;
}
   .quote .quote-item {
    position: relative;
    width: 40%;
    padding: 35px;
    margin-top: 250px;
}
   .quote-item h5 {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
   .quote-item h1 {
    font-weight: 400;
    line-height: 1em;
    margin: 15px auto;
}
   .quote-item p {
    font-size: 12px;
    opacity: 0.5;
    text-transform: uppercase;
}


/* ==========================================================================
Form
========================================================================== */

.block-body .contact {}
.contact-form {
    width: 100%;
    margin: 20px 0;
}
.form-segment {
    display: flex;
    margin-bottom: 5px;
    gap:5px;
}
.wpcf7-form-control-wrap {width:100%!important;}
.form-item {
    width: 100%;
    background: #fdf5ef;
    border: 0;
    padding: 20px;
    margin-right: 5px;
    font-size: 24px;
    box-sizing: border-box;
    font-weight: 100;
}
.form-item input, .form-item textarea {}

.form-segment-upload label {
    font-weight: 700;
    margin-right: 0px;
    width: 205px;
}
.form-segment-upload {
    font-weight: 400;
    background: #fdf5ef;
    display: flex;
    padding: 10px 20px 15px 20px;
    height: 30px;
    align-items: center;
}

button.button, .wpcf7-submit {
  width: auto;
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  background: #fdf5ef;
  border: 0;
  padding: 20px;
  margin-right: 5px;
  font-size: 24px;
  box-sizing: border-box;
  font-weight: 100;
  text-align: left;
  color: #111;
  }
  button.button i, .wpcf7-submit i {font-size: 11px;}
.wpcf7 form.sent .wpcf7-response-output {    background: green;
      color: #fff;
      border: 0;
      padding: 20px;
      border-radius: 10px;
  
}


/* ==========================================================================
  Jobs
  ========================================================================== */
.block.jobs {display: block;}
.jobs .job-item                   {
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: baseline;
  gap: 50px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 30px;
  margin: 30px;
}
.block-body.jobs {display: block;}
.jobs .job-item .job-item-number  {
    font-size: 25px;
    opacity: 0.5;
    FONT-WEIGHT: 500;
}
.jobs .job-item .job-item-body    {}
.jobs .job-item .job-item-body h1   {
    font-weight: 400;
}
.jobs .job-item .job-item-body p   {}
.jobs .job-item .job-item-body span   {
    font-size: 11px;
    opacity: 0.5;
    text-transform: uppercase;
}
.jobs .job-item .job-item-button  {
    background: #fdf5ef;
    border-radius: 9999px;
    }

.jobs .job-item .job-item-button a {padding: 20px 25px;display: block;}

/* ==========================================================================
Footer
========================================================================== */
footer {background:transparent;}
footer > div {margin-bottom: 30px;}

.footer-claim     {}
.footer-claim h1  {
    font-size: 64px;
    width: 40%;
    font-weight: 100;
    line-height: 1em;
}
footer > div p {text-transform: uppercase;font-size: 15px;font-weight: 400;opacity: 0.5;}

.footer-info     {
    display: flex;
    justify-content: space-between;
}
.footer-info div {
    display: flex;
}
.footer-info div ul {
    display: flex;
    margin: 0;
    gap: 30px;
}
.footer-info div ul li {
    display: inline-block;
}
.footer-info div ul li a {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.5;
}

.footer-social {}
.footer-social ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}
.footer-social ul li {
    display: inline-block;
}
.footer-social ul li a {
    font-size: 24px;
}


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


.body-about, 
.page-template-page-career .body,
.page-template-page-about .body, 
.page-template-default .body,
.error404 .body {margin-top: 600px;}

.body-about .hero,
.page-template-page-career .body .hero,
.page-template-page-about .body .hero,
.page-template-default .body .hero,
.error404 .body .hero {height: 500px;} 

.body-about .hero .hero-wrapper .headline h1, 
.page-template-page-about .body .hero .hero-wrapper .headline h1,
.page-template-page-career .body .hero .hero-wrapper .headline h1,
.page-template-default .body .hero .hero-wrapper .headline h1,
.error404 .body .hero .hero-wrapper .headline h1 {margin-top: 125px;}

  /* ==========================================================================
 USP
 ========================================================================== */
.block-body.usp {
    display: block;
    width: 80%;
    margin-left: 30px;
    padding: 20px 0;
}
.block-body .usp-item {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    gap: 20px;
}
.block-body .usp-item .usp-item-icon {
    background: #f1f1f1;
    border-radius: 999px;
    padding: 25px 30px;
    /* height: 50px; */
    /* width: 50px; */
    display: flex;
    align-items: center;
}
.block-body .usp-item .usp-item-icon i {
    font-size: 25px;
}
.block-body .usp-item .usp-item-text {}
.block-body .usp-item .usp-item-text h1 {
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
}


  /* ==========================================================================
   About Subline
  ========================================================================== */
  .body-about .subline {
    position: relative;
    font-size: 16px;
    margin-top: -140px;
    margin-left: 60px;
}
  .body-about .subline p {
    font-size: 21px;
    text-transform: none;
}


  /* ==========================================================================
 Job Page
 ========================================================================== */
.body-job, .single-jobs {margin-top: 480px;}
.body-job .hero, .single-jobs .hero {height: auto;} 
.body-job .hero .hero-wrapper .headline h1, .single-jobs .hero .hero-wrapper .headline h1 {margin-top: 125px;}


.subline.page-job {}

.subline.page-job ul      {
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
}
.subline.page-job ul li   {
    display: block;
    font-weight: 500;
}
.subline.page-job ul li span  {
    opacity: 0.5;
    font-weight: 400;
}

.block-header-buttons {}
.block-header-buttons a.button {
    background: #F8F5F3;
    padding: 15px 50px;
    box-sizing: border-box;
    margin: 15px 0;
    display: inline-block;
    font-size: 22px;
    font-weight: 400;
}
.block-header-buttons a.button i {
    margin-left: 10px;
}

.block-body.jobs .text h1 {font-weight: 400}
.block-body.jobs .text p {font-size: 16px;line-height: 2em;margin-bottom: 30px;}

.block-body.jobs .text ul li {display: block;}
.block-body.jobs .text ul li p {margin-bottom: 0;}