/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
  
  @font-face {
    font-family: "LT Amber";
    src: url('assets/fonts/Regular.otf');
    font-display: auto;
  
  }
  @font-face {
    font-family: "LT Amber Light";
    src: url('assets/fonts/Light.otf');
  
  }
  @font-face {
    font-family: "LT Amber Demibold";
    src: url('assets/fonts/Demibold.otf');
  
  }
  @font-face {
    font-family: "LT Amber Bold";
    src: url('assets/fonts/Bold.otf');
  
  }
  @font-face {
    font-family: "LT Amber Medium";
    src: url('assets/fonts/Medium.otf');
  
  
  }
  @font-face {
    font-family: "Hey August";
    src: url('assets/fonts/Hey\ August.otf');
  
  
  }
  
  
  :root{
    /*--piros:hsla(0, 87%, 50%, 0.582);*/
    --piros:#b73a46;
    --piros_atlatszo:rgba(183,58,70,0.6);
    --szurke: #697370;
   
  
    --height_header:calc(1/(100vh - 300px));
    --height:calc(100vh - 300px);
  
    --kep1:"assets/carousel/1.jpg";
    --kep2:"assets/carousel/2.jpg";
    --kep3:"assets/carousel/3.jpg";
    --kep4:"assets/carousel/4.jpg";
  
    --regular:"LT Amber", sans-serif;
    --light:"LT Amber Light", sans-serif;
    --demibold:"LT Amber Demibold", sans-serif;
    --bold :"LT Amber Bold", sans-serif;
    --medium:"LT Amber Medium", sans-serif;
  
  
    --shadow: 5px 5px 10px rgba(0, 0, 0, 1);  
  
  }
  
  * {
      box-sizing: border-box;
    }
    
    
    body,
    html {
      position: relative;
      font-family: 'LT Amber', sans-serif;
      padding: 0;
      margin: 0;
      height: 100vh;
      width:100%;
      overflow-x: hidden;
      scroll-behavior: smooth;
  
      
    
    }
  
  
    .button{
      width:100%;
      background:white;
      font-size: 1.8rem;
      text-decoration: none;
      color:black;
      padding: 3%;
      font-weight: 600;
      
  
    }
  
  
    .button:hover{
      background:black;
      color:white;
    }
  
    .allvany_link{
      text-decoration: none;
      color: var(--piros);
      font-weight: 600;
      text-transform: uppercase;
    }
  
  
    .logo{
      width:300px;
      padding-top:2rem;
      padding-left:2rem;
    }
  
  
  
    .container{
      width:100%; height:100%;
      padding:0;
      display:flex;
      flex-direction: column;
    }
  
    .ajanlat{
      max-width:300px;
      transition: all 0.2s ease-in-out;
  
    }
  
  
    .ajanlat:hover{
      transform: scale(1.1);
  
    }
  
    .ajanlat:active{
      transform : scale(1.06)
    }
  
    .piros{
      color:var(--piros);
    }
  
  
    .al_section_1{
      height:70vh;
      min-height:300px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      margin-bottom:5%;
  
    }
  
    .al_section_1_title{
          height:100%;
          width:100%;display:flex;
          margin-top:-175px;
    
        }
  
    .al_section_1_title h1{
      
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      
      text-transform:uppercase;
      font-size:7rem;
      font-family:var(--bold);
      color:white;
      text-shadow: var(--shadow);
      text-align: center;
      }
  
  
      @media screen and (max-width: 1024px) {
        .logo{
          margin:0;
          padding:0
        }
  
        .al_section_1_title{
          height:100%;
          margin:0;
          margin-top:-60px;
        }
  
  
        .al_section_1_title h1{
          font-size: 4rem;
        }
      }
  
      .lb-loader,
  .lightbox {
      text-align: center;
      line-height: 0;
      position: fixed;
      left: 0;
  }
  
  body.lb-disable-scrolling {
      overflow: hidden
  }
  
  .lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      width:100vw;
      height:100vh;
      z-index: 9999;
      background-color: #000;
      filter: alpha(Opacity=80);
      opacity: .8;
      display: flex;
  }
  
  .lightbox {
      width: 100%;
      z-index: 10000;
      font-family: 'Open Sans', serif;
      font-weight: 300;
      outline: 0
  }
  
  .lightbox .lb-image {
      display: block;
      height: auto;
      max-width: inherit;
      max-height: none;
      border-radius: 3px;
      border: 4px solid #fff
  }
  
  .lightbox a img {
      border: none
  }
  
  .lb-outerContainer {
      position: relative;
      width: 250px;
      height: 250px;
      margin: 0 auto;
      border-radius: 4px;
      background-color: #fff
  }
  
  .lb-outerContainer:after {
      content: "";
      display: table;
      clear: both
  }
  
  .lb-loader {
      top: 43%;
      height: 25%;
      width: 100%
  }
  
  .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(assets/images/loading.gif) no-repeat
  }
  
  .lb-nav {
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
  }
  
  .lb-container>.nav {
      left: 0;
  }
  
  .lb-nav a {
      outline: 0;
      background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
  }
  
  .lb-next,
  .lb-prev {
      width:100%;
      height: 100%;
      cursor: pointer;
      display: block
  }
  .lb-next{
      position: absolute;
      
      margin-right:-15%;
  }
  .lb-prev{
      position:absolute;
      right:0;
      margin-left:-15%
  
  }
  
  .lb-nav a.lb-prev {
      width: 34%;
      left: 0;
      float: left;
      background: url(assets/images/prev.png) left 48% no-repeat;
      filter: alpha(Opacity=0);
      opacity: 1;
      -webkit-transition: opacity .6s;
      -moz-transition: opacity .6s;
      -o-transition: opacity .6s;
      transition: opacity .6s
  }
  
  .lb-nav a.lb-prev:hover {
      filter: alpha(Opacity=100);
      opacity: 1
  }
  
  .lb-nav a.lb-next {
      width: 64%;
      right: 0;
      float: right;
      background: url(assets/images/next.png) right 48% no-repeat;
      filter: alpha(Opacity=0);
      opacity: 1;
      -webkit-transition: opacity .6s;
      -moz-transition: opacity .6s;
      -o-transition: opacity .6s;
      transition: opacity .6s
  }
  
  .lb-nav a.lb-next:hover {
      filter: alpha(Opacity=100);
      opacity: 1
  }
  
  .lb-dataContainer {
      margin: 0 auto;
      padding-top: 5px;
      width: 100%;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px
  }
  
  .lb-dataContainer:after {
      content: "";
      display: table;
      clear: both
  }
  
  .lb-data {
      padding: 0 4px;
      color: #ccc
  }
  
  .lb-data .lb-details {
      width: 85%;
      float: left;
      text-align: left;
      line-height: 1.1em
  }
  
  .lb-data .lb-caption {
      font-family: 'Open Sans', serif;
      font-size: 1.3rem;
      font-weight: 300;
      line-height: 1em
  }
  
  .lb-data .lb-caption a {
      color: #4ae
  }
  
  .lb-data .lb-number {
      visibility: hidden;
      clear: left;
      padding-bottom: 1em;
      font-size: 12px;
      color: #999
  }
  
  .lb-data .lb-close {
      display: block;
      float: right;
      width: 30px;
      height: 30px;
      background: url(assets/images/close.png) top right no-repeat;
      text-align: right;
      outline: 0;
      filter: alpha(Opacity=70);
      opacity: .7;
      -webkit-transition: opacity .2s;
      -moz-transition: opacity .2s;
      -o-transition: opacity .2s;
      transition: opacity .2s
  }
  
  .lb-data .lb-close:hover {
      cursor: pointer;
      filter: alpha(Opacity=100);
      opacity: 1
  }
  @media screen and (max-width: 768px) {
  
  
  .lb-next, .lb-prev{
      
      margin:0;
  }
  
  }
  
  /* default css start */
  
  /*
    
  
    .header-area{
    }
    
    /* navbar regular css start */
    /*
    .navbar-area {
    }
    */
    #header{
      height:var(--header_height);
      z-index:9999;
      position: relative;
    }
    
  
  
    .site-navbar {
  
  
      width:100%;
    
    }
  
  
  
    a.site-logo {
      font-size: 26px;
      font-weight: 800;
      text-transform: uppercase;
      /*color: #fff;*/
      text-decoration: none;
      
    }
  
  
  
    .site-navbar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
  
      justify-content:space-between;
      flex-direction: row;
      
    }
  
  
  
    .site-navbar ul li a {
      padding: 20px;
      display: block;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.5rem;
      font-family: var(--bold);
      
      
      
    }
  
  
  
    .menu_text_box{
      display: grid;
      grid-template-columns: repeat(4, 1fr);    
      justify-content:space-between;
      
    }
  
  
    
    .menu_text{
      color: #fff;
      text-shadow:var(--shadow);
      text-align: center;
  
    }
  
  
    .site-navbar ul li a:hover {
      color:var(--piros)
    }
  
  
    
    .header_kapcsolat_logo{
      width: 5rem;
  }
  
  
  
  .menu_call a img{ 
    height:1rem;
    width:1rem;
    margin-right:0.5rem;
    
  
  }
  
  
  .menu_call a{
    text-decoration: none;
    color:var(--piros);
    font-weight: 600;
    font-family: var(--bold);
  }
  
  .menu_call{
    width:30ch;
  
    height:100%;
    
  }
  
  
    .nav-toggler {
      border: 3px solid #fff;
      padding: 5px;
      background-color: transparent;
      cursor: pointer;
      height: 39px;
      display: none;
      margin-left:1rem;margin-top:1rem;
    
    }
  
  
  
    .nav-toggler span, 
    .nav-toggler span:before, 
    .nav-toggler span:after {
      width: 28px;
      height: 3px;
      background-color: #fff;
      display: block;
      transition: .3s;
    
    }
  
  
  
    .nav-toggler span:before {
      content: '';
      transform: translateY(-9px);
    }
    .nav-toggler span:after {
      content: '';
      transform: translateY(6px);
    }
    .nav-toggler.toggler-open span {
      background-color: transparent;
    }
    .nav-toggler.toggler-open span:before {
      transform: translateY(0px) rotate(45deg);
    }
    .nav-toggler.toggler-open span:after {
      transform: translateY(-3px) rotate(-45deg);
    }
  
  
    #menu_bal{
      grid-area: bal;
    }
  
    #menu_jobb{
      grid-area: jobb;
    }
  
    #menu_lista{
      grid-area: lista;
    }
  
  
  
    
    
    
    
    /* mobile breakpoint start */
    @media screen and (max-width: 1024px) {
  
      /* navbar css for mobile start */
      .nav-toggler{
        display:block;
        z-index:999;
        position: relative;
  
      }
    
      .site-navbar {
        min-height: 60px;
  
    
      }
      .site-navbar ul {
        position: absolute;
        width: 100%;
        left: 0;
        top: 60px;
        flex-direction: column;
        align-items: center;
        max-height: 0;
        overflow: hidden;
        margin-top:-60px;
        background:rgba(125,125,125,0.9);
        height:550px;
  
  
  
  
  
  
    
      }
      .site-navbar ul li {
        width: 100%;
        text-align: center;
      }
      .site-navbar ul li a {
        padding: 25px;
      }
  
      .site-navbar ul.open {
        max-height: 550px;
        overflow: visible;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
  
        grid-template-areas:
        "bal jobb"
        "lista lista";
  
        
  
  
  
       
      }
      .menu_text_box{
        display: flex;
        flex-direction: column;
   
  
      }
  
  
    }
  
    
    @media screen and (max-width: 768px) {
      .site-navbar ul.open {
        
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-content:center;
        align-content: center;
  
        grid-template-areas:
        "bal"
        "jobb"
        "lista";
  
  
       
      }
  
      #menu_bal{
        text-align: center;
      }
      .menu_call{
        padding:0;
        margin:0;
    
   width:100%;
   text-align: center;
      }
    }
  
  
    .section_1_box,
  .section_1_container {
      display: flex;
      flex-direction: column;
      width: 100%
      
  }
  
  .section_1_container {
      height: 100vh;
      min-height:550px;
      background: url("/assets/images/fooldal/Miet_fooldal_fokep-min.webp") center/cover no-repeat fixed
  }
  
  .section_1_box {
      height: 100%;
  
      justify-content: center;
      align-items: flex-end
  }
  
  .rolunk,
  .section_1_div {
      flex-direction: column;
      display: flex;
      height: 100%
  }
  
  .section_1_div {
      width: 50%;
      justify-content: flex-end;
      padding-bottom: 3rem
  }
  
  .section_1_title h1 {
      width: 100%;
      font-size: 3rem;
      color: #fff;
      line-height: 1.6;
      font-family: var(--bold);
      
  }
  
  .section_1_text {
      color: #fff;
      font-size: 1.8rem;
      font-weight: 500;
      z-index: 5;
      width: 35ch;
      line-height: 2;
      margin-bottom: 3rem;
      letter-spacing: 1.2px
  }
  
  .section_1_text p a {
      text-decoration: underline;
      color: #fff
  }
  
  .section_2_box {
      min-height: 120vh;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center
  }
  
  .rolunk {
      width: 85%;
      margin: auto;
      justify-content: center
  }
  
  .rolunk_section_1 {
      display: flex
  }
  
  .rolunk_left {
      display: flex;
      flex-direction: column;
      width: 50%;
      min-width: 500px
  }
  
  .rolunk_left_title {
      color: var(--piros);
      font-weight: 800;
      font-size: 3rem;
      margin-bottom: 2rem
  }
  
  .rolunk_left_text {
      line-height: 1.5;
      font-size: 1.5rem;
      text-align: justify
  }
  
  .rolunk_right {
      width: 50%;
      height: 100%
  }
  
  .rolunk_right img {
      width: 100%;
      padding-left: 3rem;
      min-width: 600px
  }
  
  .rolunk_section_2 {
      font-size: 1.5rem;
      width: 100%
  }
  
  .section_3_box {
      width: 100%;
      min-height: 120vh;
      height: 100%;
      background: url("/assets/images/fooldal/section_3-min.webp") top/cover no-repeat fixed;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around
  }
  
  .section_3_title {
      font-size: 7rem;
      padding-top: 6%;
      font-family: 'Hey August', serif;
      color: #fff
  }
  
  .card_container {
      width: 90%;
      height: 100%;
      margin: auto;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
      justify-items: center;
      align-content: center;
      gap: 5%;
      padding-bottom: 5rem
  }
  
  .card_box {
      max-width: 300px;
      background-color: #fff;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center
  }
  
  .card_box_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem
  }
  
  .card_box_icon_image {
      width: 80%
  }
  
  .card_box_title {
      font-size: 1.5rem;
      margin-bottom: 2rem;
      color: var(--szurke);
      font-weight: bolder
  }
  
  .card_box_text {
      font-size: 1.2rem;
      line-height: 1.5
  }
  
  @media screen and (max-width:1024px) {
      .card_container {
          width: 100vw;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: 1fr 1fr;
          justify-content: space-around;
          align-content: space-around;
          margin-bottom: 3rem;
          margin-top: 3rem
      }
  
      .section_3_title {
          margin-bottom: 5rem;
          text-align: center
      }
  }
  
  .section_4_container {
      height: 100%;
      min-height: 110vh;
      width: 100%
  }
  
  .szolgaltatasok {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between
  }
  
  .szolg_left {
      height: 100%;
      min-width: 900px;
      background-image: url('/assets/images/fooldal/szolgaltatasok-min.webp');
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 100% 110%
  }
  
  .section_4_title {
      width: 100%;
      padding-bottom: 8%;
      padding-top: 18%;
      text-align: right;
      color: var(--piros);
      font-size: 2.5rem;
      font-family: var(--bold)
  }
  
  .szolg_right {
      width: 40%;
      min-width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      padding-right: 5%
  }
  
  .border_bottom,
  .border_none {
      font-size: 1.5rem;
      padding-bottom: 5%;
      padding-top: 5%;
      text-align: right;
      width: 55%
  }
  
  .border_bottom {
      border-bottom: 1px solid
  }
  
  .section_4_text {
      width: 100%;
      font-size: 1.2rem;
      padding-bottom: 5%;
      padding-top: 5%;
      text-align: left
  }
  
  .fooldal_galeria_container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: -300px
  }
  
  .fooldal_galeria_left {
      width: 40%;
      height: 100%;
      background: url('/assets/galeria/fooldal_galeria/hatter_galeria-min.webp') left top/600px 1000px no-repeat;
      z-index: 1;
      position: relative
  }
  
  .fooldal_galeria_right {
      width: 60%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-items: space-around;
      align-items: center;
      padding-bottom: 15rem;
      z-index: 3
  }
  
  .fooldal_galeria_right_title {
      font-size: 2.5rem;
      font-family: var(--light);
      color: var(--szurke);
      width: 100%;
      text-align: center;
      margin: 1rem 0 3rem
  }
  
  .fooldal_galeria_kepek {
      width: 90%;
      height: auto;
      display: grid;
      grid-template-columns: repeat(3, 20%);
      gap: 10%;
      justify-content: center
  }
  
  .fooldal_galeria_kep {
      width: 100%
  }
  
  .galeria_gomb {
      width: 80%;
      text-align: right;
      margin-top: 4rem;
      margin-right: 2rem
  }
  
  @media screen and (max-width:768px) {
      .section_1_box {
          width: 80%;
          margin: auto;
          align-items: flex-start
      }
  
      .section_1_title h1 {
          line-height: 1.5;
          font-size: 2.5rem
      }
  
      .fooldal_galeria_left,
      .fooldal_galeria_right,
      .section_1_div {
          width: 100%
      }
  
      .section_1_text {
          width: 100%;
          line-height: 1.3;
          margin-bottom: 2rem
      }
  
      .section_1_container {
          background-position: 70%;
          background-attachment: scroll
      }
  
      .rolunk_left,
      .rolunk_right,
      .rolunk_right img {
          width: 100%;
          min-width: 100%
      }
  
      .section_2_box {
          margin-top: 3%;
          margin-bottom: 3rem
      }
  
      .rolunk_section_1 {
          flex-direction: column
      }
  
      .rolunk_right img {
          padding: 0
      }
  
      .card_container {
          grid-template-columns: repeat(1, 1fr);
          grid-template-rows: repeat(4, 1fr);
          gap: 3%;
          margin-top: 5rem
      }
  
      .section_3_box {
          background-attachment: scroll;
          background-size: cover
      }
  
      .section_3_title {
          font-size: 5rem;
          margin-bottom: 5rem
      }
  
      .section_4_container {
          min-height: 100%;
          margin-bottom: 5rem
      }
  
      .szolg_left {
          display: none
      }
  
      .szolg_right {
          width: 90%;
          min-width: 90%
      }
  
      .fooldal_galeria_container {
          flex-direction: column-reverse;
          margin-bottom: -150px
      }
  
      .fooldal_galeria_right {
          padding-bottom: 0
      }
  
      .fooldal_galeria_left {
          background-size: 100% 150%
      }
  }
  
  
  
  
  .kapcsolat_container{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-content: center;
  
    
  }
  .form_section_height{
    height:120vh;
  }
  
  .kapcsolat_hatter{
    background-image: url('/assets/images/hatter/kapcsolat_hatter-min.webp')
  }
  
  .kapcsolat_container_box{
    display: flex;
    flex-direction: row;
    width:80%;
    height:100%;
    justify-content:space-between;
    align-items:center;
  
  }
  
  .kapcsolat_container_box_first{
    display: flex;
    flex-direction: row;
  }
  
  
  .kapcsolat_left{
    width:50%;
    height:100%;
  
  
  }
  
  .kapcsolat_left_title{
  font-size: 2.5rem;
  color:var(--piros);
  font-weight: bold;
  margin-bottom:1.5rem;
  }
  
  .kapcsolat_left_text{
  font-size: 1.3rem;
  line-height:2;
  
  }
  
  .kapcsolat_left_text p{
    margin-bottom:1.5rem;
    font-family:"LT Amber Light", sans-serif;
    width:80%;
  }
  
  
  .kapcsolat_left_text p img{
    height:1.2rem; 
    margin-right: 0.5rem;
  
  }
  .kapcsolat_right{
    width:50%;
    height:100%;
    display:flex;
    justify-content:flex-start;
    margin-left:min(2rem)
  
  }
  
  .kapcsolat_right form{
  width:100%;
  height:100%;
  font-size: 1.3rem;
  font-weight:300;
  font-family:"LT Amber Light", sans-serif;
  
  }
  
  form div{
    margin-bottom:2rem;
  }
  
  form div p{
    margin-bottom:1rem;
    
  }
  
  
  
  #email{
    width:50%;
    min-width:20ch;
    font-size: 1.3rem;
    border:2px solid lightgrey;
    height:2.5rem;
  }
  
  #text{
    min-height:150px;
    width:100%;
    border:2px solid lightgrey;
  
  }
  
  
  .kapcsolat_gomb{
    width:100%;;
    background:white;
    border:none;
    display:flex;
    justify-content:flex-start;
    margin:0;
    padding:0;
    
  
    margin-left:-1rem;
  
  }
  
  
  .map{
    margin-bottom:-290px;
    
  }
  
  
  @media (min-width: 1024px) {
  
  
  }
  
  
  
  
  
  @media screen and (max-width: 768px) {
  
    .kapcsolat_container_box_first{
        flex-direction: column;
    }
  
  
    .kapcsolat_left, .kapcsolat_right{
        height:100%;
    width:100%;
    }
  
    .kapcsolat_left_text p{
        width:100%;
    }
    .kapcsolat_right{
  
        margin-left:0;
    }
  
  #email{
    width:100%;
  }
  }
  
  
  
  .galeria_hatter{
    background-image: url('/assets/images/hatter/galeria_hatter-min.webp')
  }
  
  
  .section_galery{
    margin-top:100px;
  display:flex;
  justify-content:center;
    z-index:6;
    width:100%;
    height:100%;
    margin-bottom:17%;
    position: relative;
  }
  /*
  .galeria_section_1{
  
  }
  */
  .gallery {
    width:65%;
    height:100%;
    display: grid;
  
    grid-template-columns:repeat(4, 1fr);
  column-gap:4%;
  row-gap:2%;
  
  }
  
  
  
  @media (max-width: 1024px) {
    .section_galery{margin-top:0;
    
    }
    
    
    .gallery {
        width: 100%;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }    
  }    
  
  
  
  @media (max-width: 767px) {
    .row {
        flex-direction: column;
        height: auto;
    }
  
    .hide {
        display: none;
    }
  }
  
  
  @media (min-width: 768px) {
    .row {
        width: 95%;
        height: 20vh;
    }
  
    .hide {
        display: flex;
    }
  }
  
  
  @media (min-width: 1024px) {
    .row {
        width: 100%;
        height: 25vh;
    }
  }
  
  
  /* Gallery styles */
  
  .row a {
    display: inline-block;
    width: 25%;
    height: 100%;
  }
  
  .gallery-img {
    object-fit: cover;



    /*
    filter: saturate(20%)
    */
  }
  
  
  .gallery-img:hover {
    /*
    filter: saturate(100%);*/
    transform: scale(1.05);
    transition: .7s ease;
  }
  
  
  @media (max-width: 767px) {
    .gallery{
        width:90%;
    }
  
    .row a {
        width: 90%;
        height: 25vh;
    }
  
    .gallery-img {
        /*filter: saturate(50%);*/
        width:82px;
        height:82px;
  
    }
  
    .gallery-img:hover {
        transform: none;
        transition: none;
    }
  }
  
  
  @media (max-width: 1024px) {
   /* .gallery-img {
        filter: saturate(50%);
    }
  *//*
    .gallery-img:hover {
        transform: none;
        transition: none;
    }
  }*/
  }
  
  
  
  
  
  /*------------*\
  *
  *  COMPONENTS
  *
  \*------------*/
  
  .buttons a {
    display: inline-block;
    width: 12rem;
    height: auto;
    padding: 1rem;
    background-color: rgba(255,255,255,.4);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .125rem;
    border-radius: 2rem;
  }
  
  
  .buttons a:hover {
    background-color: #ffffff;
    color: #ADC7BD;
    transition: .3s ease-in;
  }
  
  
  
  .more {
    display: none;
  }
  
  
  @media (max-width: 767px) {
    .buttons a {
        display: block;
        margin-bottom: 1rem;
    }
  
    .more {
    display: inline-block;
    align-self: flex-end;
    width: 13rem;
    height: auto;
    padding: 1rem;
    background-color: #ADC7BD;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2.5vh;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .125rem;
    line-height: 1.2;
    border-radius: 2rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
    white-space: nowrap;
    }
  }
  
  
  @media (min-width: 1024px) {
    .buttons a {
        width: auto;
        padding: 1.5rem;
        border-radius: 3rem;
    }
  }
  
  
  @media (min-width: 1200px) {
    .buttons a {
        width: auto;
        padding: 1rem;
        border-radius: 2rem;
    }
  }
  
  
  .rendeles_hatter{
    background-image: url('/assets/images/hatter/rendeles_hatter-min.webp')
  }
  
  
  
  
  /*
  .card_box{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  */
  .r_arak_container{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.01)
  }
  
  
  .r_arak_box{
    width:80%;
    height:100%;
    min-height:450px;
    margin:auto;
    padding-top:5%;
    padding-bottom:5%;
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    color:var(--szurke)
    
  
  
  }
  
  .r_arak_title{
    font-family:var(--bold);
    font-size:2rem;
    color:var(--piros);
  
  }
  
  .r_arak_text{
    width:100%;
    height:100%;
    font-size:1.3rem;
    display:flex;
    flex-direction: row;justify-content: space-between;
  }
  
  sup{
    font-size:70%;
    vertical-align:super;
  
  
  
  }
  
  .r_ar{
    width:15ch;
    padding-left:3rem;
  }
  
  
  
  .r_arak_text_2{
    font-size:1.1rem;
    font-family:var(--bold);
  }
  
  
  .r_form_container{
    width:100%;
    height:100%;
    margin-top:5%;
  }
  
  .r_form_box{
    width:80%;
    height:100%;
    display:flex;
    flex-direction:row;
    margin:auto;
  
  
  }
  
  .r_form_left{
    width:50%;
    height:100%;
  
  }
  
  .r_form_right{
    width:50%;
  }
  
  @media (max-width: 1024px) {
    .r_section_2{
        margin-top:15px;
    }
  
  
  
    .r_form_box{
        display:block;
        margin:auto;
  
    }
  
  
    .r_form_left{
        display:hidden;
    }
  
  
    .r_form_right{
        width:100%;
        margin:auto;
  
    }
  
  }
  
  .footer{
    width:100%;
  
    max-height:40%;
    
    position: relative;
    z-index: 1;
    
    color:white;
  
  
  }
  /*
  .footer_text{
    height:15rem;
    width:100%;
    
  }
  
  */
  
  .kapcsolat_box{
    height:100%;
    width:100%;
    background:url('../assets/images/footer/footer_alakzat.png');
    background-repeat: no-repeat;
    background-size: 100% 450px;
    
    
    background-attachment: scroll;
  
    
  }
  .footer_piros{
    width:100%;
    height:100%;
  
  }
  .footer_space{
    width: 100%;
    height:150px;
  }
  
  
  
  .footer_kapcsolat{
    z-index:4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-evenly;
    position: relative;
  
    
    
  }
  
  .footer_trinagle{
  
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
  }
  .footer_kapcsolat_left{
    width:40%;
  
  
  }
  
  .footer_site-logo{
    width:100%;
    display:flex;
  
    align-items:flex-end;
    justify-content:flex-start;
  
    
  }
  
  
  .logo_footer{
    z-index: 5;
    position: relative;
    width:250px;
  
    
  
  }
  
  .footer_kapcsolat_right{
    position: relative;
    width:30ch;
    z-index: 5;
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8;
    
  }
  .kapcsolat_logo{
    z-index: 999;
    height:1.2rem;
    margin-right:0.5rem;
    position: relative;
    
    z-index:6;
    
  }
  
  
  .footer_kapcsolat_right a{
    text-decoration: none;
    z-index: 5;
    color:white;
  }
  
  .footer_kapcsolat_right p{
    padding:0;
    margin:0;
  }
  
  
  
  .footer_rights{
    width:100%;
    margin:15px auto 0 auto;
    height:30px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: lighter;
    font-family:"LT Amber Light", serif;
  }
  
  
  @media screen and (max-width: 768px) {
    .footer_kapcsolat{
        flex-direction: column;
    }
  
    .footer_site-logo{
    justify-content:center;
    align-items:center;
    margin-bottom:2rem;
    
    }
  
    .kapcsolat_box{
        background-size: cover;
        background-position:   20%;
    }
    .footer_kapcsolat, .footer_rights{
  
        background-color:var(--piros);
        padding-bottom:1rem;
        margin:0;
        margin:auto;
    }
  
  
  
  }