/* nunito-sans-300 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-regular - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-500 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-600 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-700 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* nunito-sans-800 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/nunito-sans-v15-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

   /* NORMALIZE */

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed, 
   figure, figcaption, footer, header, hgroup, 
   menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
   }
   
   body {
       line-height: 1;
   }
   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;
   }
   
     body {  
       font-family: 'Nunito Sans', 'Open Sans', Arial, sans-serif;
       max-width: 1920px;
       min-width: 320px;
        margin: auto;
     overflow-x: hidden;
       color:#000000;
      overflow-wrap: break-word;	
   }

   .lazy-background {
    padding-top: 160px;
    margin-top: -160px;
    display: block;

   }
   
   /* COLORS */
   
   :root {
    --v-shadow-key-umbra-opacit: .3;
        --demmlergreen: #6cc3a4;
        --demmlerorange: #fe982a;
        --demmlerlighgreen: #3C6E71;
        --demmlerblueish: #284B63;
        --demmlerblue: #11192f;
        --demmlergrayblue: #A0C1D1;
        --demmlergraybluetwo: #476A6F;
        --titlecolor: #11192f;
        --titlecolor:rgb(15 23 42);
        --spacer: 80px;
       /* --spacer:calc(60px + 2.6vw);*/
        --line-height:1.36;
         --contentwidth: 84%;
         --logoheight: 38px;
         --menuheight: 28px;
          --heroheight: 100vh;
          --afontsize:15px;
          --maincolor: #EEBB6D;
      
          --afontcolor:   rgb(100 116 139);
          --afontcolor: rgba(0, 31, 31, .93);

       
          --gray: #5a6169;
          --lightgray: #f5f6f8;
          --variable-height:70px; 
          --darkblue: #27293d;
          --ads-blue: #3d5170;
          --ads-blue-opa: rgba(61, 81, 112, .9);
          --bordertopblue: #6f8ab7;
          --verylightgray: #e1e5eb;
          --adsdanger: rgba(196, 24, 60, 0.86);
          --happy-blue: rgba(3, 169, 244, 1);
          --pc-menu-width: 88%;
          --content-width:88%;
          --blue: #007bff;
          --indigo: #674eec;
          --purple: #8445f7;
          --pink: #ff4169;
          --red: #c4183c;
          --orange: #fb7906;
          --yellow: #ffb400;
          --green: #17c671;
          --teal: #1adba2;
          --cyan: #00b8d8;
          --white: #fff;
          --gray: #868e96;
          --gray-dark: #343a40;
          --primary: #007bff;
          --secondary: #5a6169;
          --success: #17c671;
          --info: #00b8d8;
          --warning: #ffb400;
          --danger: #c4183c;
          --light: #fbfbfb;
          --dark: #212529
        }
        
      html {background: white;
        scroll-behavior: smooth;}
  
      .menu-shadow {
          background-color: white;
      }
  
      .pc-menu-container {
          display: grid;
          grid-template-columns: auto 1fr;
          justify-content: space-between;
          width: var(--pc-menu-width);
          max-width:1410px;
          margin: auto;
          height: calc(var(--menuheight) + var(--logoheight));
      }
  
  
  
      .main-logo-link {
          align-self: center;
      }
      
      .main-logo-link a {
          transition: box-shadow .3s ease;
      }
  
      nav {
          align-self: center;
          justify-self: right;
      }
  
      nav a {
          padding-left: 0.93333em;
          padding-right: 0.93333em;
          padding-top: 4px;
          padding-bottom: 4px;
          text-align: center;
          width: 100%;
          line-height: 1;
          font-weight: var(--afontweight);
          font-size: var(--afontsize);
          color: var(--afontcolor);
          /* line-height: normal; */
          text-decoration: none;
          box-sizing: border-box;
          position: relative;
          transition: text-shadow .3s;
      }
  
      nav a:hover {
          text-shadow: 0.6px 0 0 var(--afontcolor);
      }
  
      nav a:after {
          content: "";
          height: 2px;
          font-size: var(--afontsize);
          background-color: var(--afontcolor);
          bottom: -0.02em;
          left: 0.93333em;
          position: absolute;
          width: calc(100% - 1.7em);
          visibility: hidden;
          -webkit-transform: scaleX(0);
          transform: scaleX(0);
          transition: all 0.35s cubic-bezier(0.52, 0.01, 0.16, 1);
      }
  
    
  
      nav a:hover::after {
          visibility: visible;
          -webkit-transform: scaleX(1);
          transform: scaleX(1);
      }
  
      nav  {margin-right: -0.93333em;}
  
      .main-pc-logo {
          height: var(--logoheight);
          font-size: var(--afontsize);
          display: grid;
          padding-top: 2px;
          padding-bottom: 2px;
          width: auto;
          margin-right: 0.93333em;
      }
      
      .hero-element {
          width: 100%;
          height: var(--heroheight);
          max-height: 780px;
          min-height: 520px;  
          min-height:38.235vw;  
          background: var(--demmlerblue);   
          background-image: url('../img/hero-opt.jpg');
          background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 82.53%), url(../img/hero-opt.jpg);
          background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 79.53%), url(../img/hero-opt.jpg);
          background-color: lightgray;
          background-size: cover;

        background-position: 50% 39%;
          background-repeat: no-repeat;
          overflow: hidden;
  
          -webkit-animation: kenburns-left 2s cubic-bezier(.12,.75,.4,1) both;
              animation: kenburns-left 2s cubic-bezier(.12,.75,.4,1) both;
  
  
      }
  
      
  
      .hero-container {overflow: hidden; position:relative; -webkit-transform-style: preserve-3d; background:var(--demmlerblue);}
      .hero-container * {-webkit-transform: translate3d(0, 0, 0);}
      .hero-text {position: absolute;
        left: 50%;
        transform: translateX(-50%);
      bottom:0;
    width:100%}

    .hero-container p {color:#fff;}
  
    .hero-text h1 {  
      animation: cubic-bezier(.31,.11,.12,.99) both text-from-top;
      animation-duration: 1.2s;
      animation-delay: .1s;}
  
   
  
      .hero-text p {   
        opacity: 0;
        -webkit-backface-visibility: hidden;
      border: 1px solid transparent;
        animation:  1.2s cubic-bezier(.31,.11,.12,.99) both text-from-top;
        animation-delay: .3s;   }
  
  
        .hero-text a {
          animation:  1.2s cubic-bezier(.31,.11,.12,.99) both text-from-top;
          animation-delay: .6s;
        }
  
  
      .hero-inner {
          max-width: var(--contentwidth);
          height: var(--heroheight);
          max-height: 780px;
          min-height: 38.235vw;      
          margin: auto;
          justify-items: center;
          align-items:end;
          display: grid;
      }
  
      .hero-text h1 {
        /*  font-size: 36px;*/
        font-size: 36px;
      font-weight: 500;
      padding-bottom:12px;
      text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.68);
      }
  
      .hero-text h1:lang(hu) {
        font-size: 34px;
      }
  
    
  
     /* .hero-text {color:white;padding-top: 236px; text-align: center;}*/
  
     .hero-text {color:white;margin-bottom:70px;     margin-bottom: 116px; margin-bottom: 106px; text-align: center;
    }
  
    .additional-services { grid-column:span 2; margin-top:40px;}
  
      .hero-text p {font-size: 19px;
        margin-top: 12px;
    margin-bottom: 14px;
    }
  
      .hero-text a, .background-inner a {
          display: inline-block;
          padding: 12px 18px;
          margin-top: 12px;
          border-radius: 6px;
          color: white;
          background: var(--demmlergreen);
          text-decoration: none;
      
      }
  
      .hero-text a {
        color: var(--afontcolor);
      }
      .background-inner a {
        background:#001F1F;}
  
      .hero-text a {position: relative;}
      .hero-text a:before,
      .hero-text a:after {
      width: 4.4em;
      height: 2.95em;
      position: absolute;
      content: "";
      display: inline-block;
      background: var(--demmlergreen);
      border-radius: 50%;
      transition: transform 1s ease;
      transform: scale(0);
      z-index: -1;
  }
  
  .hero-text a:before {
      top: -25%;
      left: 25%;
  }
  
  .hero-text:lang(hu) a:before {
  
    left: 14%;
  }
  .hero-text a:after {
      bottom: -25%;
      right: 25%;
  }
  .hero-text:lang(hu) a:after {
    
    right: 14%;
  }
  
  .hero-text a:hover:before,
  .hero-text a:hover:after {
      transform: none;
  }
  
  
    
  
      .section {
     
        width:var(--contentwidth);
        max-width:1390px;
        margin:auto;
        padding-top:var(--spacer);
        padding-bottom:var(--spacer);
      }

      .section p {font-size:16px; line-height: 1.5; color:var(--afontcolor);}
  
      .services {text-align:center;}


 
      .services-inner {
        display: grid;
        text-align: left;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap:50px;
        margin-top:63px;
     
      }
  
      .services-inner p{
        color:#001F1F;
      }
     
      .service-box {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-gap:26px;
        line-height: var(--line-height);
      }
  
      .service-box img {
        width:36px;
        align-self:top;
        position:relative;
      }
  
  
      .service-box span {position: relative;}
      .service-box span:after {
        content: "";
        width: 52px;
        height: 52px;
        border: 1px solid #868e9682;
        border-radius: 50%;
        /* background-color: red; */
        background-repeat: repeat;
        top: -8px;
        right: -8px;
        z-index: -1;
        position: absolute;
        display: inline-block;
        transition: all 0.3s ease-in;
        pointer-events: none;
    }
  
      h3 {font-size:21px; font-weight:400; margin-bottom:20px;}
  
      .gray {background:#ecedf1; background:#edf0f5;  
  background:rgba(224, 226, 219, .29); 
  background:rgba(232, 238, 242, .78)!important; }
  
      .gray2 {   background:rgba(224, 226, 219, .36);   } 
   
  
      .prices-inner {display: grid; grid-template-columns: 1fr 1fr; grid-gap:40px;
      margin-top:0!important; }
  
  .card {    
    height:  auto;
    padding: 24px;
    padding-top:32px;
    padding-bottom:32px;
    text-align: left;
    background: white;
    border-radius: 12px;
    position: relative;
    padding-bottom:/* 85px*/88px;
   box-shadow: 0 29px 60px 0 rgb(54 57 73 / 1%);
  /*   border: 1px solid rgba(225, 229, 235, .63);*/}
  
  
  
  .additional-inner {display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:37px; padding-top:5px;}
  .additional-inner:lang(en) {grid-gap:37px; grid-template-columns: 30% 30% 30%; margin:auto; justify-content: space-between;}
  .additional-inner h3 {font-weight:500; font-size: 22px;}
  .additional-inner div {text-align:left; position:relative; padding-left:40px;}
  .additional-inner span {position:absolute; top:0; left:0; color:var(--maincolor);
  font-size:32px; font-weight: 600;}
  
    .card img {width:48px;}
  
    .starter {
      background: #001F1F;
    
      color: white;
    color:white;}
  
    .starter ul li {color:white;}
  
    .card a {
      display: inline-block;
      padding: 12px 18px;
  position: absolute;
  bottom:32px;
      border-radius: 12px;
      color: white;
      background:#001F1F;
      text-decoration: none;
    }
  
  
    .card.starter a {
     
      color: black;
      background:var(--maincolor);
    
    }
  
    .money {
      font-size: 28px;
      font-weight: 500;
    }
  
    .card ul {
      list-style-position: inside;
      line-height: 1.5;
      margin-bottom: 10px;
      margin-top: 27px;
      color: #001F1F;
      list-style-type: none!important;
    }
  
    .card ul li {margin-bottom:14px; font-weight: 300;}
  
    .card ul li::marker {
      color:#868e96!important;
  
    }
  
    .card.starter ul li::marker {
      color:var(--lightgray)!important;
    }
  
    .card h3 {font-weight:500; margin-top:7px; font-size:26px; font-weight:400; margin-top:0; margin-bottom:-4px;}
  
    .dollar {
      font-size: 14px;
      padding-right: 8px;
      vertical-align: text-top;
    }
  
    .month {font-size: 14px;}
  
    .prices p {line-height: 1.36;}
      
      .white {background:white;}
  
      .systems h2 {margin-bottom:0px;}
  
      .systems {text-align: center; color:#111;}
      .systems p {line-height: var(--line-height);}
  
      .logos img { margin-left: 9px;
        margin-right: 9px;}
        .logos .flickity-viewport {min-height:138px;}
     /* .logos img {width:120px; height:120px;}*/
      /*.logos img:last-child {height:34px;}*/

      .flickity-page-dots {bottom:-16px;}
  
      .logos {margin-top:40px; width:1054px; margin:auto;}

      .flickity-prev-next-button.next {
        right: -60px;
    }

    .flickity-prev-next-button.previous {
      left: -60px;
  }
      /*
      .background {
        width: 100%;
       height: 540px;    
        background-attachment: fixed; 
  
        background-image: url('../img/parralax.jpg');
   
      background-color: lightgray;
        background-size: cover;
      background-position: 50% 50%;
        background-repeat: no-repeat;
        overflow: hidden;
        display: grid;
        align-items: center;
        justify-content: center;
      }
  
    
      .background {
        width: 100%;
       height: 540px;    
  
  
        background-image: url('../img/static-5.jpg');
        background-attachment: fixed; 
  
        background-image: url('../img/parralax.jpg');
   
      background-color: lightgray;
        background-size: cover;
      background-position: 50% 50%;
        background-repeat: no-repeat;
        overflow: hidden;
        display: grid;
        align-items: center;
        justify-content: center;
      }
  
        */
  
    
        
      .bg {
        width: 100%;
       height: 540px;    
  
  
       
   
   
      background-color: lightgray;
        background-size: cover;
      background-position: 50% 50%;
        background-repeat: no-repeat;
        overflow: hidden;
        display: grid;
        align-items: center;
        justify-content: center;
      }
  
      .visible .bg {
        background-image: url('../img/static-6-o.jpg');
      }
  
  .background {
    position: relative;
    overflow: hidden;
    height: 520px;    
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
  
  }
  
  .background::before {
    background-image: url(../img/p-2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    content: '';
    height: 100%;
    left: 50;
    position: fixed;
    top: 0;
    max-width: 1920px;
    width: 100vw;
  
    will-change: transform;
    z-index: -1;
  }
  
  
  
  
    .background-inner {text-align: center; 
  }
    .background-inner h3 {
      opacity:0;
      transition-delay:.1s;
      transition:opacity .55s ease-in-out;
      line-height: 1.2; text-shadow: 1px 1px 7px rgba(255, 254, 254, 0.68);}
  
      .background-inner a {opacity:0; transition: opacity .55s ease-in-out; transition-delay:.2s;}
  
      .active .background-inner h3, .active  .background-inner a  {opacity:1;}
  
  .genp {line-height: var(--line-height); color: #001F1F;}
  
  .text h2 {margin-bottom:24px;}
  
  .meet {margin-top:50px; font-size: 23px;}
  
  .manages {font-size: 17px;
    color: #001F1F;
    display: block;
    padding-top: 9px;
    font-weight: 400;
   
  }
  
  
  .images img.portrait {width:265px; border-radius: 50%; width: 14vw; min-width: 180px; max-width:226px;
  background:/*rgba(225, 229, 235, .2) #f1f0f5 #f1f0f5 #e4e1e7*/ #f1eff5; 
  background: linear-gradient(97deg, rgba(232,227,233,1) 0%, rgba(241,239,245,1) 100%);}
  
  .ourteam {    display: grid;
    grid-gap:50px;
    align-items: center;
    grid-template-columns: 1.19fr 1fr;
  }
  
    figure {text-align: center;}
        
    .images {display: grid;
   min-width:472px;
      justify-content: space-between;
      grid-template-columns: 1fr 1fr;}
  
      figcaption span {text-align: center; display: block; }
  
      .name {font-weight: 500; margin-top:14px;} .title { font-size: 15px;color: #001F1F; margin-top:10px;}
      .phone, .email {text-decoration: none; font-size: 15px;  position:relative;  color:#001F1F; display: block;} 
      .icon {width:20px; margin-right:6px; vertical-align: middle;  transition: transform .3s ease-out;}
      .email {margin-top: 10px;}
      .phone {margin-top: 18px;}
  
      .images a:hover .icon {transform: translateX(-8px) scale(1.2); }
      .images a:hover {text-decoration: underline!important; text-underline-offset: 2px;}
  
      .form-text h2 {margin-bottom:35px;}
  
      .contact {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 65px;}
      form { border-radius: 12px; background-color: white;}
      form input[type=tel], form input[type=email], form input[type=text], form select, form textarea {
        width: 100%;
        font-family: 'Montserrat';
        border: 1px solid white;
        border-radius: 4px;
        font-size: 16px;
  
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
        padding-top: 11px;
        padding-bottom: 11px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        line-height: 1em;
       }

       .b24-form .b24-form-control-alert {
        margin-bottom: 16px !important;
    }
  
  
       @-moz-document url-prefix() {
        input:focus-visible, textarea:focus-visible  {
      /*   outline: 1px solid var(--maincolor);*/
      outline: 1px solid #001f1f29;
        }
      }
  
      input:focus-visible, textarea:focus-visible  {
        outline: 1px solid var(--maincolor);
        outline: 1px solid #001f1f29;
  
       }
  
       form input[type=submit]   {
        font-family: 'Montserrat';
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      border:0;
      font-size: 16px;
        display: inline-block;
      padding: 12px 18px;
      cursor: pointer;
      margin-top: 12px;
      border-radius: 6px;
      color: white;
      background: #001F1F;
      text-decoration: none;
     
    }
  
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #001F1F;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      color: #001F1F;
    }
    :-ms-input-placeholder { /* IE 10+ */
      color: #001F1F;
    }
    :-moz-placeholder { /* Firefox 18- */
      color: #001F1F;
    }
  
    .hero-text a { transition: opacity .45s cubic-bezier(0.25,1,0.33,1),transform .45s cubic-bezier(0.25,1,0.33,1),border-color .45s cubic-bezier(0.25,1,0.33,1),color .45s cubic-bezier(0.25,1,0.33,1),background-color .45s cubic-bezier(0.25,1,0.33,1)}
  
    .bthover { -webkit-transition: opacity .45s cubic-bezier(0.25,1,0.33,1),transform .45s cubic-bezier(0.25,1,0.33,1),border-color .45s cubic-bezier(0.25,1,0.33,1),color .45s cubic-bezier(0.25,1,0.33,1),background-color .45s cubic-bezier(0.25,1,0.33,1),box-shadow .45s cubic-bezier(0.25,1,0.33,1);
      transition: opacity .45s cubic-bezier(0.25,1,0.33,1),transform .45s cubic-bezier(0.25,1,0.33,1),border-color .45s cubic-bezier(0.25,1,0.33,1),color .45s cubic-bezier(0.25,1,0.33,1),background-color .45s cubic-bezier(0.25,1,0.33,1),box-shadow .45s cubic-bezier(0.25,1,0.33,1);}
      .bthover:hover {
      box-shadow: 0 20px 38px rgba(0,0,0,0.16);
      -ms-transform: translateY(-3px);
      transform: translateY(-3px);
      -webkit-transform: translateY(-3px);
      opacity: .85;
      }
        form textarea {height: 180px;} 
  
        form textarea div {display: inline;}  
  
        form label {display: none;}
  
        .prices h2 {
          margin-bottom: 35px;
      }
  .heavyl {font-weight:500;}
      .prices {text-align: center;}
      .card-gray {background: rgba(232, 238, 242, .78);}
  
      .prices p {max-width:960px; margin:auto; }
   
      .end {height:520px; background-image: url('../img/lastpic-4.jpg'); background-attachment: fixed; background-position: bottom;}
      .bottomimg {width:100%; height:520px; object-fit: cover; object-position: center; object-position: 50% 80%;}
   footer {background: #001F1F; 
  background:#fff;}
   .footer-inner {
    color:#fff;
    width: var(--contentwidth);
      max-width: 1390px;
      margin: auto;
      
      align-items: center;
      display: flex;
      justify-content: space-between;
   }
   footer a {color:var(--demmlerblue);}
  
   .pc-lang {display:inline;}
   .pc-lang a:nth-child(1) {margin-left:30px;}
   .activelang {text-shadow: 0.6px 0 0 var(--afontcolor); pointer-events: none;}
   .pc-lang a:nth-child(1) {padding-right:.6em;}
   .pc-lang a.second {padding-left:.6em;}
   .notactivelang {opacity:.9;}
   .pc-lang a:after {display:none;}
   .notactivelang:hover {opacity:1;}
  
  
   .footerlinks a {text-decoration: none; margin-right: 24px; color:white; color:var(--demmlerblue); opacity:.9; transition: opacity .3s ease-out;}
   .footerlinks a:hover {opacity:1;} 
  
   footer {height: 110px; display: flex; justify-content: center; align-items: center; margin-top:-5px;}
  
   .bottomlogo {height:46px;}
  
  
  
    @keyframes scale-in {
      from {
       transform:scale(1.1)
      }
      to {
     
          transform:scale(1)
      }
    }
  
  
  
    @keyframes kenburns-left {
      0% {
        -webkit-transform: scale(1.25);
                transform: scale(1.25);
          
      }
      100% {
        -webkit-transform: scale(1) translate(0, 0);
                transform: scale(1) translate(0, 0);
     
      }
    }
  
    @keyframes text-from-top {
    0% {
      opacity: 0;
      transform: translateY(-35px);
  }
  
  100% {
      opacity: 1;
  }}
  
  @keyframes text-from-bottom {
    0% {
      opacity: 0;
      transform: translateY(-35px);
  }
  
  100% {
      opacity: 1;
  }}
  
  
  @keyframes op-in-two {
    0% {
      opacity: 0;
  
  }
  
  100% {
      opacity: 1;
  }}
  
  /*
    @media screen and (max-width: 1860px) {
      .ourteam {
        grid-template-columns: 52% 1fr;
      }}
  */
  
  .nodesk {display:none;}
  .hub {display:none;}

  .logos {width:1102px;}
  .logos img {width:126px; height:126px;} 

  @media screen and (min-width: 1890px) {
    :root {
      --spacer: 110px;
    }
  }
  
  @media screen and (max-width: 1890px) {

    .logos {width:1054px;}
    .logos .flickity-viewport {min-height: 132px;}
    .logos img {width:120px; height:120px;} 
    .pc-lang a:nth-child(1) {margin-left:24px;}
  
    .additional-inner { grid-gap:42px;}
  
    .card ul {
   list-style-type: none;
  }
  .desk {display:none;}
  .nodesk {display: inline;}
  .card ul li {position: relative; padding-left: 0; }
  .card ul li:before
  {content: "";
  width: 3px;
  height: 3px;
  border-radius:50%;
  opacity:.8;
  position: absolute;
  border: 1px solid #868e96;
  background: #868e96;
  left: 0;
  top: 9px;
  display:none;}
  .card.starter ul li:before
  {border: 1px solid var(--lightgray);
    background: var(--lightgray);
  opacity:.8;
  display:none;}
  
  }
  @media screen and (max-width: 1560px) {
    .hero-element, .hero-inner {max-height: 630px; min-height: 520px; }
    .hero-element {background-position: 50% 34%;    min-height: 520px; }
  .hero-text {margin-bottom:90px; margin-bottom:80px;}}
  
  
    @media screen and (max-width: 1390px) {
   
      :root {
        --contentwidth:87%;
    }
    .title:lang(hu) {line-height: 1.2;}
  
  
    .additional-inner {grid-gap:43px;}
    }
  
    @media screen and (max-width: 1350px) {
  
    .title:lang(hu) {font-size:14px;}
    .additional-inner {grid-gap:21px;}
    }
  
  
    @media screen and (max-width: 1180px) {
  
      .additional-inner  {grid-template-columns: 1fr; grid-gap:37px;}
      .additional-inner:lang(en) {grid-template-columns: 1fr;}
      .additional-inner span {font-size: 30px;}
      .hero-inner, .hero-container {
        max-height:630px;
      }
      .hero-text {margin-bottom:80px;}
      .ourteam {grid-gap:40px;}
      .ourteam {grid-template-columns: 1fr; grid-gap:50px; text-align:center;}
      .ourteam .genp {max-width:810px; text-align: left; margin: auto;}
      .images {max-width: 620px;
        margin: auto;}
    }
  
    @media screen and (max-width: 1581px) {footer {height:auto; text-align: center;}
  .footer-inner {padding-top: 60px;
    padding-bottom: 60px;
    flex-wrap: wrap;}
    .bottomlogo {height:44px; margin-bottom:10px;}
  .logo-link {
    display: block;
    margin: auto;
    margin-bottom: 3px;
  }
  .footerlinks {width:100%;}
  .footerlinks a { 
    display: inline-block;   margin-right: 12px;
    margin-left: 12px;
    margin-top: 22px;}}
    @media screen and (max-width:1199px) {
        .logos .flickity-viewport {min-height: 13.787vw;}
      }

    @media screen and (max-width:1190px) {
      nav a {font-size:14px;}
    }
    @media screen and (max-width:1092px) {
      nav a {padding-left:.7em;
      padding-right:.7em;}
    }

    @media screen and (max-width: 1023px) {
        .logos .flickity-viewport {min-height: 13.856vw;}
      .hero-text h1 {line-height:1.2; padding-bottom: 10px;}
      .title:lang(hu) {font-size:15px;}
      .prices p {max-width:738px; text-align: left;}
      .ourteam .genp {max-width:738px; margin:auto;}
      .contact {max-width:810px;}
  
      .additional-services {grid-column: unset; }
  
      /*.systems.section {padding-bottom: calc(var(--spacer) - 38px);*/

      
  .spechref {display: block;}
      nav {display: none;}
      .images {grid-gap:30px;}
      .images:lang(hu) {grid-gap:40px;}
  
  /*.hub {display:block;}*/
      .contact h2 {text-align: center;} 
      .card h3 {text-align: left;}
      .prices-inner {grid-template-columns: 1fr; margin:auto; margin-top:45px; max-width: 738px;}
      .contact {grid-template-columns: 1fr; grid-gap: 40px;}
      input:focus-visible, textarea:focus-visible {outline: 1px solid var(--blue);}
      .background::before {display:none;}
      .background {
  
       height: 540px;   
        background-image: url('../img/static-5.jpg');
        background-size: cover;
      background-position: center; }
      .services-inner {
        grid-template-columns: 1fr 1fr;
      }
      .pc-menu-container {
        max-width:var(--contentwidth);
      }
     
  
      .images {max-width:620px; margin:auto;}
  
    }
    @media screen and (max-width:830px) {

      .hero-element {
        background-position: 77% 50%;
      }
      .images img.portrait {min-width: 170px;}
  
    }
  
    @media screen and (max-width: 767px) {
      .services-inner {
        grid-template-columns: 1fr;
      }
      :root {
        --contentwidth:88%;
    }
  
    .hero-text p {line-height: 1.2;}
    .hero-text h1, .hero-text h1:lang(hu) {font-size: 30px;}
    .hero-element, .hero-container, .hero-inner {max-height: 630px;}
    .hero-text {
      margin-bottom: 66px;}
  
    .hero-text:lang(hu) {
      margin-bottom: 63px;
    }
      .hero-text p {margin-bottom: 12px;}
    }
  


    @media screen and (max-width:630px) {
      .prices p {text-align: left;}
      .footerlinks a {display:block;}
      .logo-link {order:2;margin-top: 49px; margin-bottom:9px;}
    }
  
    @media screen and (max-width: 560px) {
      .additional-inner h3 {text-align: left; font-size:18px; line-height: 1.3;}
      .card-gray {margin-top:6px;}
      .additional-inner div {padding-left:36px;}
      .additional-inner span {font-size:27px;}
   
      .bottomlogo {height:46px;}
  
      .card h3 {font-size:24px; margin-top:2px; text-align:center; font-weight: 500;}
  
      .systems.section {padding-bottom: var(--spacer);}
 
      .manages {padding-top: 20px;}
      .card {padding-top:28px; padding-bottom:88px;}
      .card a {left: 50%;
        transform: translateX(-50%);}
      .background-inner h3 { margin-left: 6%; margin-right: 6%;}
      .background-inner h3:lang(hu) { margin-left: 0; margin-right: 0;}
  
      h2 {font-size:24px;}
   
      .text p {text-align: left;}
      .service-box{
        grid-template-columns: 1fr;
      }
  
      .images {min-width: unset; grid-template-columns: 1fr; grid-gap:50px;}

 
      h3{
        text-align:center;
    }
    .service-box img 
    {justify-self: center;}
    .service-box img {width:42px;}
    :root {
      --heroheight: calc(90vh - 52px);
    }
  
    }
  
    @media screen and (max-width: 420px) {
      .hero-text h1, .hero-text h1:lang(hu) {
        font-size: 28px;
    }
  
    }
  
    @media screen and (max-width: 390px) {
      .hero-text p {
        font-size: 17px;
    }
    .hero-text h1, .hero-text h1:lang(hu) {
      line-height: 1.1;
          padding-bottom: 10px;
        }    
  
   
    }
    
  
    @media screen and (max-width: 400px) {
      .hero-text h1, .hero-text h1:lang(hu) {
        font-size: 26px;
    }
  
    }
    @media screen and (max-width: 374px) {
    
    .hero-text h1, .hero-text h1:lang(hu) {
      font-size: 28px;
      margin-left:-2%;
      margin-right:-2%;
        }   
      
    .hero-element {
        background-position: 74% 50%;
    }
    :root {
      --heroheight: 590px;
  }

  
   
    }
  
  
  
  
  
    
    #nav-icon1 span {
      display: block;
      position: absolute;
      height:3px;
      border-radius:4px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out
    }
    
    #nav-icon1 span:nth-child(1) {
      top: 0;
      width: 100%;
      background: #001F1F;
    }
    
    #nav-icon1 span:nth-child(2) {
      top: 10px;
      width: 100%;
      background:  #001F1F;
    }
    
    #nav-icon1 span:nth-child(3) {
      top: 20px;
      width:100%;
      background:  #001F1F;
    }
    
    #nav-icon1.open span:nth-child(1) {
      top: 10px;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
      background: #001F1F;
    }
    
    #nav-icon1.open span:nth-child(2) {
      opacity: 0;
      left: 60px;
      width: 100%;
      background: #001F1F;
    }
    
    #nav-icon1.open span:nth-child(3) {
      top: 10px;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
      background: #001F1F;
      width: 100%
    }
    
    .menu-icon {
      width: 20px;
      height: 24px;
      align-self: center;
      position: absolute;
      top:21px;
   
      right: 6%;
      padding: 10px;
    }
    
  
    .heavy {font-weight: 600;}
    
    .sidenav {
      height: 600px;
      width:100%;
      position: absolute;
      z-index: 0;
      top: 63px;
      left: 0;
      z-index:200;
      background-color: var(--demmlerblue);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow-x: hidden;
      transition: none;
      padding-top: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform:translateY(-100%);
      
    }
  
    .open-sidemenu {
      transform:translateY(0);
      padding-top:52px;
    }
    
    .sidenav a {
      padding: 14px 8px 14px 8px;
      text-decoration: none;
      font-size: 20px;
      color: #ffffff;
      display: block; 
      font-weight:600;
    }
  
    
  
  
    
  
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
  
    .sidenav-translate {top:-100%;}
    
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
      to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }
    
  
     
    @-webkit-keyframes fadeInDown {
      from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      }
      to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      }
      }
      
      @keyframes fadeInDown {
      from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      
      }
      to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      
      }
      }
      
      .animated {
      animation-delay: 0.3s;
      -webkit-animation-duration: 0.8s;
      animation-duration: 0.8s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      opacity: 0;
      }
      
      .animated-2 {
      animation-delay: 0.3s;
      -webkit-animation-duration: 0.95s;
      animation-duration: 0.95s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      opacity: 0;
      }
      
      .animated-3 {
      animation-delay: 0.3s;
      -webkit-animation-duration: 1.1s;
      animation-duration: 1.1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      opacity: 0;
      }
      
      .animated-4 {
      animation-delay: 0.3s;
      -webkit-animation-duration: 1.25s;
      animation-duration: 1.25s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      opacity: 0;
      }
      
      .animated-5 {
      animation-delay: 0.3s;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      opacity: 0;
      }
      
      .animated-6 {
        animation-delay: 0.3s;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 0;
        }

        .animated-7 {
            animation-delay: 0.3s;
            -webkit-animation-duration: 1.6s;
            animation-duration: 1.6s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            opacity: 0;
            }

            .animated-8 {
                animation-delay: 0.3s;
                -webkit-animation-duration: 1.75s;
                animation-duration: 1.75s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                opacity: 0;
                }
      
      .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
      }
      
      
      .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
      }
    
    
      .menu-icon {display:none;}
      .sidenav {display: none;}
      .engnavlink {color: rgba(255,255, 255,.8)!important;}
    
      @media screen and (max-width: 1023px) {
        .menu-shadow {position:relative; z-index:201; background: white;
        overflow: hidden;}
        .menu-icon {display:block;}
        .sidenav {display:flex; text-align: right; align-items: end;}
        .sidenav a {margin-right: 6%;}
        :root {
          --logoheight:35px;
        }
      }
  
      @media screen and (max-width: 767px) {
        .sidenav {display:flex; text-align: center; align-items: center;}
        .sidenav a {margin-right: 0;}}
      @media (pointer: coarse) {
        .hero-text a:hover:before,
  .hero-text a:hover:after {
      transform: scale(0);
  }
  .footerlinks a:hover {opacity: 0.9;} 
  .footerlinks a { -webkit-tap-highlight-color: transparent!important;}
  
  .bthover:hover {
    box-shadow: none;
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    }
  
    .images a:hover .icon {transform: translateX(0) scale(1); }
      }
  
      .images a:hover {text-decoration: none;}
  
  
      @media screen and (max-width: 350px) {.g-recaptcha {
      width: 230px;
      }}
      
      @media (prefers-reduced-motion: reduce) {
        *, ::before, ::after {
          animation-delay: -1ms !important;
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          background-attachment: initial !important;
          scroll-behavior: auto !important;
          transition-delay: 0s !important;
          transition-duration: 0s !important;
        }
      }
  
      .flogo-m {margin: 0;}

      .footerlinks a:hover {
        opacity: 1;
        text-shadow: .6px 0 0 #11192f;
      }
      
      .footerlinks a {transition:all .3s ease-out;}
      
      nav a:after {transition: transform 0.35s cubic-bezier(0.52, 0.01, 0.16, 1)!important;
      text-shadow:none!important; height:2px!important;}
      
      .fblogo {width: 9px; transition: transform .4s; margin-left:16px;}
      
      .fblogo:hover {
        filter: brightness(0) saturate(100%) invert(37%) sepia(23%) saturate(6527%) hue-rotate(202deg) brightness(96%) contrast(99%);
        transform: scale(1.2);
      }
      .lilogo {width: 16px;     transition: transform .4s;}
      
      .lilogo:hover {
        filter: brightness(0) saturate(100%) invert(35%) sepia(68%) saturate(1045%) hue-rotate(166deg) brightness(92%) contrast(107%);
        transform: scale(1.1);
      }
      
      .uplogo {transition: transform .4s; width: 24px; transform: scale(1.2);
        margin-left:-1px; margin-bottom:-6px;}
      
      .uplogo:hover {transform: scale(1.4) translateY(-3px);
        filter: brightness(0) saturate(100%) invert(67%) sepia(33%) saturate(454%) hue-rotate(107deg) brightness(100%) contrast(83%);
      }
      
      .star {
        position: relative;
        
        display: inline-block;
        width: 0;
        height: 0;
        
        margin-left: .9em;
        margin-right: .9em;
        margin-bottom: 1.2em;
        
        border-right:  .3em solid transparent;
        border-bottom: .7em  solid #fbbc04;
        border-left:   .3em solid transparent;
      
        /* Controlls the size of the stars. */
        font-size: 11px;}
      
        .gray-two-section {background: rgba(248, 250, 252, 1);}
      
        .ourreviews h2 {text-align: center;}
        .reviews {
          width: 1120px;
          margin:auto;
        }
      
        .ourreviews h2 {margin-bottom:0;}
        .review
        {
          border-top: 12px solid var(--demmlergreen);
          padding: 24px;
          width: 304px;
       margin-left:9px; margin-right:9px;
      height: 360px;
          background: #f5f6f808;
          background: white;
          border-radius: 12px;
          box-shadow: 0 16px 48px rgba(73, 92, 136, .15);
          /* border: 1px solid gray; */
          box-shadow: 0 8px 60px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11);
          box-shadow: 0 29px 60px 0 rgb(54 57 73 / 7%);
          box-shadow: 0 2px 4px -1px rgb(54 57 73 / 2%), 0 4px 5px 0 rgb(54 57 73 / 2%), 0 1px 10px 0 rgb(54 57 73 / 2%) !important;
          /* box-shadow: 0 2px 4px -1px rgb(54 57 73 / 2%), 0 4px 5px 0 rgb(54 57 73 / 2%), 0 1px 10px 0 rgb(54 57 73 / 2%) !important; */
      }
      /*
      .rev-2 {border-top: 12px solid var(--demmlerorange);}
      .rev-3 {border-top: 12px solid var(--demmlerblueish);}
      .rev-4 {border-top: 12px solid var(--demmlerblue);}
      .rev-5 {border-top: 12px solid var(--demmlergrayblue);}
      .rev-6 {border-top: 12px solid var(--demmlergraybluetwo);}*/
      
      
        .review-top img {
          height: 60px;
          margin-right: 12px;
        }
      
        .review-top p {
          font-size: 18px;
          font-weight: 600;
        }
      
        .review-top {display: flex; align-items: center;}
      .review-bottom p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
      
      
      }
      
      
      
        .stars {
          margin-bottom: 12px;
          margin-top: 13px;
      
        }
        
        .star:before, .star:after {
          content: '';
          
          display: block;
          width: 0;
          height: 0;
          
          position: absolute;
          top: .6em;
          left: -1em;
        
          border-right:  1em solid transparent;
          border-bottom: .7em  solid #fbbc04;
          border-left:   1em solid transparent;
        
          transform: rotate(-35deg);
        }
        
        .star:after {  
          transform: rotate(35deg);
        }
      
      
      .threenumbers {display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center;
      max-width:860px; margin: auto;}
      .counter {text-align: center;}
      .counter img {width:38px; margin-bottom:6px;}
      .counter p {/*color:rgb(100 116 139);*/ font-size: 18px;}
      .nbr {       font-size: 42px;
          font-size: 40px;
          font-weight: 600;
          font-weight: 600;
          line-height: 1.4;
          color: var(--afontcolor);
          color:var(--demmlerblue);
      opacity:.8;}
      
      .withplus::after {
          content: " +";
          font-size: 32px;
          margin-left: 2px;
          display: inline-block;
          opacity:0;
          transform: scale(.8) translateX(30px);
          vertical-align: top;
        
          transition: all .5s ease-in;
        }
        .active.withplus::after {
          opacity:.8;
          transition-delay:.7s;
          transform: scale(1) translateX(0);
        }
      .graysec {
          background:
          rgba(248, 250, 252, .2);
          background:  
      rgb(181 190 199 / 20%);
      background:
      rgba(248, 250, 252, 1);
      
      background: white;
      }
      
      h2 {    font-size: 26px;
          font-weight: 500;
          line-height: 1.2;
          margin-bottom: 50px;
        color:var(--titlecolor);}
      
        .clientsuccess {
      
       
          
          background: rgba(248, 250, 252, 0);
          background: linear-gradient(360deg, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0));
          background: rgba(248, 250, 252, 1);
        }
      
        .logos img {border: 6px solid white;
          box-shadow: 0 29px 60px 0 rgb(54 57 73 / 7%);
          box-shadow: 0 8px 20px 0 rgb(54 57 73 / 7%);
      
          box-shadow: 0 2px 4px -1px rgb(54 57 73 / 2%), 0 4px 5px 0 rgb(54 57 73 / 2%), 0 1px 10px 0 rgb(54 57 73 / 2%) !important;
          box-shadow: 0 4px 5px -2px  rgba(54, 57, 73 .7), 0 7px 10px 1px  rgba(54, 57, 73 .28), 0 2px 16px 1px rgba(54, 57, 73 .24) !important;
      
      
          border-radius: 7px;}
      
          .flickity-viewport {padding-top:60px; padding-bottom: 60px;}
      
          .flickity-button-icon {
              fill: #f8fafc;
                transition:all .3s ease-in; 
      
            
            }
      
            .reviews .flickity-button-icon {
              fill: rgba(248, 250, 252, 1);}
            
            .logos:hover .flickity-button-icon {fill: rgba(17, 25, 47, .5); }
            .clientsuccess:hover .flickity-button-icon {fill: rgba(17, 25, 47, .5); }
      
            .reviews:hover .flickity-button-icon {fill: rgba(17, 25, 47, .5); }
      
          
      
            .flickity-page-dots .dot {
      
              background: rgba(15, 23, 42, .8);}
      
              .graysec {
                background-image: url(../img/nine.jpg);
                background-image: linear-gradient(360deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .5) 100%), url(../img/nine.jpg);
         
               background-size: 1920px 600px;
                background-position: 50% 0%;
            
              }
      
            .flickity-button:focus {box-shadow:none;background: transparent;}
      
            .flickity-button, .flickity-button:hover {background: transparent;}
      
            .demmler-hero h2 {color: white;
              font-weight: 600;
              padding-top: 130px;}
      
              .demmler-hero p {color: var(--lightgray);; font-size: 17px;
                line-height: 1.5;}
                .demmler-hero-inner br {display:none;}
             .no-over {overflow:hidden;}
            .demmler-hero {height: 390px;
              width: 100%;
              text-align: center;
              background-position: center;
              background-position: 50% 33%;
              background-size: 130%;
              /*transition:all 2s ease-out;*/
              transition: background-size 2s ease-out, background-position 2s ease-out;
        
          }
          .visible .demmler-hero {
          background-image: linear-gradient(360deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .2) 100%), url(../img/stones-3.jpg);
          }
            .demmler-hero-inner {width:1160px; opacity:0; transform:scale(.8); transition: all .8s cubic-bezier(.31,.11,.12,.99); margin:auto; display: grid; grid-template-columns: 1fr 1fr 1fr;} 
            .added .demmler-hero-inner {opacity: 1; transform:scale(1);}
            .demmler-hero span { transition: .5s linear;}
            .demmler-hero:hover span { 
              display: inline-block;
              transform: scale(1.2);
              margin-right: 13px;
            
              margin-left: 13px;
              color:#fff;
              text-shadow: 0 0 10px #fff,
              0 0 20px #fff, 
              0 0 40px #fff;}
              .demmler-hero.added {background-position: 50% 50%; background-size: 100%;}
          
              .zigzag-section {grid-template-columns: 1fr auto; display: grid; grid-gap:73px;
              max-width:1100px; margin:auto;    margin-bottom: 65px; padding-top:10px;}
              .zigzag-section.zigtwo {grid-template-columns: auto 1fr;  }
              .zigzag-img-one {width:460px;height:auto; border-radius:16px;}
        
              .zigzag-section h3 {font-weight:500; line-height: 1.1; color:var(--afontcolor);
              margin-bottom:26px; font-size: 23px;}
      
              .clk-button {
                display: inline-block;
                padding: 12px 18px;
                text-transform: capitalize;
                /* font-weight: 500; */
                border-radius: 5px;
                margin-top: 34px;
                color: var(--demmlerblue);
                background: #6cc3a4bf;
                text-decoration: none;
                transition: all .5s ease-out;
                outline: 1px solid transparent;
            }
      
            .clk-button:hover {
              color:#fff;
              box-shadow: inset 520px 0 0 0 rgba(18, 37, 56, 1) !important;
              outline: 1px solid rgba(18, 37, 56, 1);
            }
      
            .lines {
              background-image:  linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(148,187,233,.28) 50%);;
              background-position: 0;
              background-size: 200%;
              transition: background-position 0.4s ease;
            }
            .lineonthis {
              background-position: -100%!important;
            }
      
              @media screen and (min-width: 1890px) {.demmler-hero {height:430px;}
              .zig-one {padding-top:30px;}
              .zigzag-section {margin-bottom:70px;  max-width:1180px; padding-top:20px; grid-gap:80px;}
              .zigzag-section p {font-size:17px;}
      
            
              /*.zigzag-section p span:hover {    background-position: -100%;}*/
              .demmler-hero h2 {padding-top:160px;}
          .demmler-hero p {font-size:18px;}
        .demmler-hero-inner {width:1240px;}}
            @media screen and (max-width: 1890px) {.reviews {
              width:1060px; 
            }
            .review {width: 288px;}
        
          }
          @media screen and (max-width: 1581px) {.l-link {
           margin-right: 12px!important; 
          }
      
        }
          @media screen and (max-width: 1219px) {
          .demmler-hero-inner {width:1140px; }}
            @media screen and (max-width: 1199px) {.logos {
              width:90%; 
            }
            .demmler-hero h2 {padding-top:120px;}
            .demmler-hero-inner {width:890px; }
            .demmler-hero-inner br {display:block;}
            .reviews {
              width:96%; 
            }
            .review {width:26%;margin-left:1.1%; margin-right:1.1%; height:420px; 
            
            }
      
            .review-bottom p {
            
              -webkit-line-clamp: 12;
        
            
            
            }
      
            .logos img {width:16.2%; height: auto; margin-left:1.1%; margin-right:1.1%;}
          }
          @media screen and (max-width: 1100px) {
            .zigzag-img-one {width:100%; max-width: 460px;}
            .zigzag-section {
      grid-template-columns: 1fr .84fr;
          }}
        @media screen and (max-width: 1023px) {
          .zigzag-section {
            grid-template-columns: 1fr 1fr;
                }
          .nbr {       font-size: 38px;
              }.counter img {width:34px; margin-bottom:5px;}
              .counter p {font-size:16px;}
            
              .review {width:84%;margin-left:6%; margin-right:6%; height:auto; 
                min-height:260px;
            
              }
      
              .review-bottom p {
            
                -webkit-line-clamp: 6;
          
              
              
              }
           .demmler-hero-inner {grid-template-columns: 1fr;}
           .demmler-hero-inner br {
            display: none;
        }
      
        .demmler-hero {background-size:cover!important;transform: scale(1.2);
          transition: all 1s ease-out; position: relative; overflow:hidden;}
          .demmler-hero h2 {opacity:0; transition: all .6s ease-out; transition-delay:1s; margin-bottom:30px;
          padding-top:110px;}
        .demmler-hero.added {transform: scale(1);}
        .demmler-hero-inner {width: var(--contentwidth); margin:auto;     transition: all 1s cubic-bezier(.31,.11,.12,.99);transition-delay:1s;
       }
        .added.demmler-hero h2 {opacity:1;}
      
        .added.demmler-hero span { 
          display: inline-block;
          transform: scale(1.1);
          margin-right: 10px;
          transition: all .6s linear;
          transition: all .3s linear;
        transition-delay: 1.94s;
          margin-left:10px;
          color:#fff;
      
          text-shadow: 0 0 10px #fff,
          0 0 20px #fff, 
          0 0 40px #fff;}
      
            }
      
            @media screen and (max-width: 910px) {.footerlinks span {width:100%;
            display: block; margin-top:14px;}
           }
      
           @media screen and (max-width: 630px) {
            .footerlinks span a {
                display: inline-block;
            }
            .fblogo {margin-left: 0;}
            .uplogo {margin-bottom:-4px;}
        }
      
            @media screen and (max-width: 890px) {
              .zigzag-section {
                grid-template-columns: 1fr;
                margin: auto;
                max-width: 800px;
                grid-gap:36px;
                padding-top:0;
              }
              .zigzag-section {margin-bottom:50px;}
      
              .zigzag-section.zigtwo {  grid-template-columns: 1fr;}
              .zigzag-img-one {order:-1; margin:auto; display:block; }
            }      
        @media screen and (max-width: 762px) {
          .threenumbers {  gap:40px;     grid-template-columns: 1fr;
           }
           .logos .flickity-viewport {min-height: 24.324vw;}
           .graysec {background-position: 29% 50%;}
           .counter img {width:30px;}
           h2 {font-size:22px;}
          :root {
              --spacer: 60px;
            }
           .nbr {font-size: 32px;}
           .logos {
              width:100%; 
            }
            .logos img {width:26%; height: auto; margin-left:2%; margin-right:2%;}
            .flickity-prev-next-button.next {display:none;}
            .flickity-prev-next-button.previous {display:none;}
            .review-bottom p {
        
              -webkit-line-clamp: 8;
            
            }
          }
      
      
      
          @media screen and (max-width: 562px) {
            .logos .flickity-viewport {min-height: 24.92vw;}
            .z-section h2 {margin-bottom: 40px;}
          .review {width:84%;margin-left:6%; margin-right:6%; height:auto; 
            min-height:360px;
        
          }
         .flickity-viewport {padding-top:40px; padding-bottom:45px;}
          .review-bottom p {
        
            -webkit-line-clamp: 13;
          
          }}
          @media screen and (max-width:480px) {
          .logos .flickity-viewport {min-height: 25.368vw;}}
      
          @media screen and (max-width:420px) {
            .demmler-hero-inner {
          max-width: 325px;}
          .logos .flickity-viewport {min-height:25.768vw;}
        
          .zigzag-section h3 {text-align: left;}}
          @media screen and (max-width:376px) {
            .logos .flickity-viewport {min-height: 26.1vw;}
          }
          
          @media screen and (max-width:340px) {
            .demmler-hero h2 {padding-top:96px;}
            .demmler-hero-inner {
          max-width: 280px;}}

          @media screen and (min-width:1921px) {
            .hero-element, .hero-inner {min-height: 630px;}
           }


          @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
            .demmler-hero {
                transition-duration: 0s!important;   
                background-position: 50% 52%!important; 
                background-size: 100%!important;     
            }
          }
          _::-webkit-full-page-media, _:future, :root  .demmler-hero {

            transition-duration: 0s!important;   
            background-position: 50% 52%!important; 
            background-size: 100%!important;     
          
          }
          @media not all and (min-resolution:.001dpcm) { @media {

            .demmler-hero { 
                transition-duration: 0s!important;   
                background-position: 50% 52%!important; 
                background-size: 100%!important;        
            }
        }}