@media only screen and (min-device-width :200px) and (max-device-width :720px) {
  /* ==========================================================================
     Base styles: opinionated defaults
     ========================================================================== */
  * {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
  
  .slick-arrow {display: none!important;}
  
  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;}
  
  /* ==========================================================================
   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%;
           display: block;
           /* max-width: 1200px; */
           backdrop-filter: blur(30px);
           z-index: 999;
           height: auto;
           padding: 20px 0px;
           display: block;
           align-items: center;
           background: rgba(255,255,255,0.4);
           justify-content: space-between;
           margin: auto;
           box-sizing: border-box;
           text-align: center;
           margin: auto;
       }
    
     .header .logo        {width: 100px;margin: auto;margin-bottom: 20px;margin-top: 15px;}
     .header .logo a img  {width: 80%;}
     
     .header .menu          {
      display: flex;
      justify-content: center;
      width: 100vw;
      margin: 0;
      padding: 0px 40px;
      justify-content: space-between;
      box-sizing: border-box;
  }
     .header .menu ul       {display: flex;gap: 35px;justify-content: space-between;width: 100%;}
     .header .menu ul li    {
      display: inline-block;
  }
     .header .menu ul li a  {font-size: 18px;font-weight: 400;opacity: 0.5}
     .header .menu ul li a.active,.header .menu ul li a:hover  {opacity: 1;}
     
     .hero                              {
      width: 100%;
      background: #fdf5ef;
      position: absolute;
      right: 0;
      top: 0;
      height: 430px;
      padding: 40px;
      z-index: 1;
      box-sizing: border-box;
  }
     .hero .hero-wrapper                {
    width: 100%;
}
     .hero .hero-wrapper .headline      {width: 100%;}
     
     .body-job .headline h1{
      margin-bottom: 20px!important;
  }
     .hero .hero-wrapper .headline .tags      {
      display: flex;
      margin: 20px auto;
      justify-content: space-between;
  }
     .hero .hero-wrapper .headline .tags .tag      {
      background: #fff;
      border-radius: 10px;
      padding: 10px 15px;
  }
     .hero .hero-wrapper .headline .tags .tag p     {
      font-weight: 400;
  }
     
     
     .hero .hero-wrapper .headline h1   {
      font-size: 57px;
      line-height: 1em;
      font-weight: 100;
      text-align: center;
      color: #11100F;
      text-decoration: none;
      letter-spacing: -2px;
      margin-bottom: 40px;
      margin-top: 135px;
  }
     .hero .hero-wrapper .headline a    {display: flex;gap: 15px;justify-content: center;align-items: center;font-weight: 400;}
     .hero .hero-wrapper .subline       {
      position: absolute;
      right: 40px;
      bottom: 15px;
      display: none;
  }
     .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: 430px;
      width: 100%;
      object-fit: none;
      height: 310px;
  }
     .hero-image img  {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
     
     
     
     /* ==========================================================================
      Blocks
      ========================================================================== */
     
     .block        {margin: 45px auto;}
     .block-header {display: block;justify-content: space-between;margin-bottom: 30px;}
     
     .block-item   {width: 100%;padding: 30px 40px;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: 38px;
      font-weight: 400;
  }
     .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: 0px;
         gap: 0;
         box-sizing: border-box;
         padding: 0 20px;
     }
     
     .swiper-projects {padding: 0 30px!important;}
       
       /* ==========================================================================
       About Item
       ========================================================================== */
       .about-item      {
      display: block;
      margin: auto;
      width: auto;
      text-align: center;
      display: inline-block;
      text-align: center;
      margin: auto;
      margin: 0px auto;
  }
       .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: 170px;
      font-size: 12px;
      margin: 0 auto;
  }
  
      /* ==========================================================================
      Projects
      ========================================================================== */
     .projects {}
     .project-item-image {
      width: 100%;
      border-radius: 10px;
  }
     .project-item-image img {
      object-fit: cover;
      width: 100%;
      border-radius: 10px;
  }
     
     .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: block;
      margin: 0;
      margin: 45px auto;
      box-sizing: border-box;
  }
     .quote .image {
      z-index: 1;
      height: 460px;
  }
  .quote .image img {width: 100%; height: 100%; object-fit: cover;}
     .quote .quote-item {
      position: relative;
      width: 100%;
      padding: 35px;
      margin-top: 80px;
      box-sizing: border-box;
  }
     .quote-item h5 {}
     .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;
  }
  .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 {}
  
  button.button {
    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 {font-size: 11px;}
  
  
  
  /* ==========================================================================
    Jobs
    ========================================================================== */
  .block.jobs {display: block;}
  .jobs .job-item                   {
    display: block;
    justify-content: space-around;
    align-content: center;
    align-items: baseline;
    gap: 50px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 30px;
    margin: 30px;
    padding: 30px;
    margin: 0;
    /* border: 0; */
    padding-bottom: 50px;
    margin-bottom: 40px;
  }
  .block-body.jobs {display: block;padding: 0 10px;}
  .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;
      font-size: 28px;
      line-height: 1em;
      margin-bottom: 20px;
  }
  .jobs .job-item .job-item-body p   {}
  .jobs .job-item .job-item-body span   {
      font-size: 10px;
      opacity: 0.5;
  }
  .jobs .job-item .job-item-button  {
      background: #fdf5ef;
      border-radius: 9999px;
      border: 0;
      width: 70px;
      display: block;
      margin-top: 20px;
      }
  
  .jobs .job-item .job-item-button a {padding: 20px 25px;display: block;width: auto;}
  
  /* ==========================================================================
  Footer
  ========================================================================== */
  footer {background:transparent;padding: 0 40px;box-sizing: border-box;}
  footer > div {margin-bottom: 30px;}
  
  .footer-claim     {}
  .footer-claim h1  {
      font-size: 54px;
      width: 100%;
      font-weight: 100;
      line-height: 0.8em;
  }
  footer > div p {text-transform: uppercase;font-size: 13px;font-weight: 400;opacity: 0.5;}
  
  .footer-info     {
      display: block;
      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: 13px;
      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 {margin-top: 600px;}
  .body-about .hero {height: 500px;} 
  .body-about .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 {margin-top: 350px;}
  .body-job .hero {height: auto;padding: 50px 40px;} 
  .body-job .hero .hero-wrapper .headline h1 {margin-top: 125px;font-size: 52px;}
  
  
  .subline.page-job {
    padding: 20px 0px 0px 40px;
    box-sizing: border-box;
    text-align: left;
}
  
  .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;}

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

.page-template-page-about .body   {margin-top: 580px;}
.page-template-default .body      {
    margin-top: 350px;
}

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

.page-template-page-about .body .hero {height: 520px;}
.page-template-default .body .hero    {
    height: 290px;
}

.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;}