/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/normalize.css ***!
  \*****************************************************************************************************************/
/*! 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;
  }
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/base.css ***!
  \************************************************************************************************************/
/*-----------------------------------*\
* BASIC SETTINGS OF THE PAGE
\*-----------------------------------*/

:root {
    --primary-color:        #BC956C; /* brand - Light brown */
    --primary-color-rgb:    188, 149, 108;
    --secondary-color:      #FFFFFF; /* white */
    --secondary-color-rgb:  255, 255, 255;
    --brand-color:          #042236; /* brand - Dark blue */ 
    --brand-color-rgb:      4, 34, 54;
    --background-color:     #F4F3F5; /* light grey*/
    --tertiary-color:       #FEEECA; /* light yellow */
    --tertiary-color-rgb:   254, 238, 202;
    --font-size-regular:    clamp(1rem, 2vh, 1.25rem);
    --line-height-regular:  clamp(1.5rem, 3vh, 1.875rem);
    --font-size-big:        calc(var(--font-size-regular) * 1.8);
    --line-height-big:      calc(var(--line-height-regular) * 1.66);
    --font-size-medium:     calc(var(--font-size-regular) * 1.2);
    --line-height-medium:   calc(var(--line-height-regular) * 1.2);
    --font-size-small:      0.75rem;
    --line-height-small:    1rem;
    --logo-size:            4.5rem;
    --logo-margins:         0.25rem;
    --header-height:        calc(var(--logo-size) + var(--logo-margins) * 2);
    --hero-height:          calc(100vh - var(--header-height));  
    --footer-height:        7.5rem; 
} 

/* normalize CSS */

* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

  
  html, body {
    width:      100%;
    overflow-x: hidden;
  }


   body {
    background-color: var(--secondary-color);
   }

  
   

  


/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/typography.css ***!
  \******************************************************************************************************************/
html {
  font-size:        16px;
  color:            var(--primary-color);
}

  
  body {
    width:       100vw;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    text-align:  left;
    font-size:   var(--font-size-regular);
    line-height: var(--line-height-regular);
  }


    a {
      text-decoration: none;
    }

    .title {
      font-family:   'Josefin Sans', sans-serif;
      font-weight:    bold;
      font-size:      var(--font-size-big);
      line-height:    var(--line-height-big);
      margin:         0;
      margin-bottom:  .5rem;
      color:          var(--brand-color);
    }

      
      
      .title__hero {
        font-size:      calc(2 * var(--font-size-big)); 
        line-height:    calc(2 * var(--line-height-big));
        text-transform: uppercase;
        color:          var(--secondary-color);
        text-align:     center;
        
      }

    .subtitle {
      font-size:     calc(var(--font-size-regular) * 1.5);
      line-height:   calc(var(--line-height-regular) * 1.5);
      color:         var(--brand-color);
      margin-top:    0.625rem;
      margin-bottom: 0.625rem; 
    }

    .title__center {
      text-align: center;
      margin-top:    1rem;
      margin-bottom: 1rem;
    }

    .title__light {
      color: var(--primary-color);
    }



    .text__hero {
      font-size:   calc(1.5 * var(--font-size-regular)); 
      line-height: calc(1.5 * var(--line-height-regular));
      text-align:  center;
        
    }

    .text__medium {
      font-size:   var(--font-size-medium);
      line-height: var(--line-height-medium);
    }

    .text__small {
      font-size:   var(--font-size-small);
      line-height: var(--line-height-small);
    }

    .text__nav {
      font-family:    'Josefin Sans', sans-serif;
      font-size:      var(--font-size-small);
      line-height:    var(--line-height-small);
      font-weight:    bold;
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      color:          var(--tertiary-color);
    }

      .text__dark {
        color: var(--brand-color);
      }
     

      .text__bold {
        font-weight: bold;
      }

      .text__50 {
        width:   50%;
        margin:  0 auto;
        /*padding: 1rem;*/
      }

      @media (max-width: 600px) {
        .text__50 {
          width: min(420px, 90%);
        }
      }   

/*


@media (max-width: 600px) {
  .title {
    font-size:   calc(var(--font-size-big) * .8);
    line-height: calc(var(--line-height-big) * .8);
  }
    .title__extra {
      font-size:   calc(1.5 * var(--font-size-big)); 
      line-height: calc(1.5 * var(--line-height-big));
    }
  
  .text--regular__responsive {
    font-size:   calc(var(--font-size-regular__responsive) * .8);
    line-height: calc(var(--line-height-regular__responsive) * .8);
  }

  .text__extra {
    font-size:   var(--font-size-regular); 
    line-height: var(--line-height-regular);
    
  }
}

@media (max-width: 470px) {
  .title {
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
  }
  .text--regular__responsive {
    font-size:   var(--font-size-medium);
    line-height: var(--line-height-medium);
  }  
}

*/
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/layout.css ***!
  \**************************************************************************************************************/
/*--------------------------------*\
* LAYOUT 

*Container............overall layout of the page
*
*Main.................over layout of the content
*
\*--------------------------------*/


/*--------------------------------*\
* OVERALL LAYOUT OF THE PAGE
\*--------------------------------*/

.container {
    display:        flex;
    flex-flow:      column nowrap;
    min-height:     100vh;
    width:          100%;
    position:       relative;
    
  }
  
  
  
  
  
  /*--------------------------------*\
  * CONTENT LAYOUT
  \*--------------------------------*/

  main {
    display:         flex;
    flex-flow:       row wrap;      
    justify-content: center;
    align-items:     center;
    flex-grow:       1;
    gap:             1.875rem;
    width:           100%;
    margin-top:      var(--header-height);
    
  }

  .main__vertical {
    flex-flow:      column nowrap;
    gap:            1rem;
    padding:        1rem .5rem 1rem .5rem;
  }

  @media (max-width: 923px) {
    main {
      gap: 0;
    }
  }


/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/buttons.css ***!
  \***************************************************************************************************************/
.btn {
      
    display:        inline-block;
    width:          10rem;
    height:         3.125rem;
    border:         0.125rem solid;;
    border-radius:  1.5rem;
    opacity:        1;
    padding:        1.09375rem;
    font-size:      var(--font-size-small);
    font-weight:    bold;
    line-height:    var(--line-height-small);
    text-align:     center;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
  }
  
  .btn:hover {
    transition:       0.3s;
  }
  
    .btn__primary {
      background:   var(--brand-color) 0% 0% no-repeat padding-box;
      border-color: var(--brand-color);
      color:        var(--secondary-color);
    }

    .btn__primary:hover {
      background:   var(--secondary-color);
      border-color: var(--brand-color);
      color:        var(--brand-color);
    }

    .btn__hollow {
      background:   transparent;
      border-color: var(--secondary-color);
      color:        var(--secondary-color);
    }

    .btn__hollow:hover {
      background:   var(--secondary-color);
      border-color: var(--secondary-color);
      color:        var(--brand-color);
    }

    /* On tablet and mobile there is no hover effect */

    @media (max-width: 923px) {
      .btn__primary:hover {
        background:   var(--brand-color) 0% 0% no-repeat padding-box;
        border-color: var(--brand-color);
        color:        var(--secondary-color);
      } 
      .btn__hollow:hover {
        background:   transparent;
        border-color: var(--secondary-color);
        color:        var(--secondary-color); 
      }

    }
    
    
  
    

/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/highlighted-text.css ***!
  \************************************************************************************************************************/
.highlighted-text {
  /*letter-spacing:  0.15rem;*/
  text-transform:  uppercase;
  color:           var(--brand-color);
  font-weight:     bold;
  opacity:         1;
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/header.css ***!
  \**************************************************************************************************************/
/*
*Header...............main layout, color, logo size, navbar
*
*Header - Navbar..... main layout typography and color, typography,
*                              and hover effect
*Mobile version......sandvich menu, padding adjustement 
*                    of the header
*/

/*Sticky header*/

header {
  width:            100%;
  display:          flex;
  flex-flow:        row nowrap;
  justify-content:  space-between;  
  align-items:      center;
  background:       var(--brand-color) 0% 0% no-repeat padding-box;
  opacity:          1;
  padding-left:     10%;
  padding-right:    10%;
  position:         fixed;
  z-index:          100; 
  
  
}
  

  /* Logo sets the height of the header */

  .logo--wrapper {
    display:         flex;
    justify-content: center;
    align-items:     center;
    height:          var(--logo-size);
    width:           var(--logo-size);
    margin-top:      var(--logo-margins);
    margin-bottom:   var(--logo-margins);
  }
  
  .logo {
    height:           100%;
    aspect-ratio:     1/1;
    border-radius:    50%;
  } 
    
    .logo:hover {
      border:          1px solid rgba(var(--tertiary-color-rgb), 1);
      box-shadow:      1px 1px 1px rgba(var(--tertiary-color-rgb), 1);
      transition:      0.3s;
      border-radius:   50%;
    }
    
  
  /* Navbar */

  .js-nav--wrapper {
    display: flex;
  }

  .nav {
    width:           27.0625%;
    display:         flex;
    flex-flow:       row nowrap;
    justify-content: space-evenly;
    align-items:     center;
    gap:             1rem;
    margin-left:     3rem;
    
  }
  
    .js-nav--item {
      opacity:         .65;
      position:        relative; /* to position the underline */
      display:         inline-block; 
    }
  
    /*in case of hover, underline is shown at the bottom of the navbar*/
  
      .js-nav--item:hover::after {
        content:          "";
        display:          block;
        width:            100%;
        height:           0.25rem;
        background-color: var(--tertiary-color);
        position:         absolute;
        bottom:           -2.03rem;
        left:             0;
        
      }
    
  
      .js-nav--item:hover, .js-nav--menu:hover {
        opacity:          1;
        transition:       0.3s;
      }

    /*Active link is highlighted*/
  
      .js-nav--item__active {
        opacity:          1;
      }
  

  /*Sandvich menu is not shown on desktop */
  
  
  .js-nav--menu {
    display:         none;
    color:           var(--tertiary-color);
       
  }

/*--------------------------------*\
  * MOBILE LAYOUT
\*--------------------------------*/

/*Sandvich menu*/
/* 
* 1) light yellow line separating the menu items 
* 2) hover effect on mobile version not needed
*/

    @media (max-width: 991px) {
    .js-nav--wrapper {
      display: flex;
      width:   100%;
      position: fixed;
      top:     var(--header-height);
      left:    0;
    }

    .js-nav--wrapper > * {
      width: 100%;
    }
      .nav {
        max-height:       0;
        display:          flex;
        width:            100%;
        gap:              0;
        margin-left:      0; /*desktop version has 3rem margin-left*/
        flex-flow:        column nowrap;
        justify-content:  flex-start;
        align-items:      center;
        background-color: var(--brand-color);
        overflow:         hidden;
        transition:       max-height 0.5s ease-out;
      }
    
      .js-nav--wrapper.js-is-open .nav {
        max-height: 100%;
      }
    
        .nav > * { 
          border-bottom:   1px solid rgba(var(--tertiary-color-rgb), 0.65); /*[1]*/
          padding-top:     1px;
          width:           100%;
          height:          2rem;
          z-index:         100;
          display:         flex;
          justify-content: center;
          align-items:     center;
         
        }

        .js-nav--wrapper.js-is-open .nav .nav--item__last { /*[1]*/
          border-bottom: none;
        }
    
            
        .js-nav--wrapper.js-is-open .nav > .js-nav--item:hover::after { /* [2] */
          display: none;
        }
         
      
    .js-nav--menu {
      display:          block;
      opacity:          .65;
    }
    
    .js-nav--menu:hover { /*[2]*/
      opacity:          .65;
    }
    
      .js-nav--menu.js-highlight {
        opacity:          1;
      }
    }
    

/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/contacts.css ***!
  \****************************************************************************************************************/
.content-card {
    width:           100%;
    min-height:      calc(100vh - var(--header-height) - var(--footer-height));
    background:      var(--secondary-color) 0% 0% no-repeat padding-box;
    display:         grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:    repeat(2, 1fr);
    grid-template-areas: 
      "map contact-wrapper"
       "map open-wrapper";
    padding:        5rem;
    gap:            2rem;
    
  }

  .map {grid-area: map;}
  .contact--wrapper {grid-area: contact-wrapper;}
  .open--wrapper {grid-area: open-wrapper;}

  .map {
    width:           min(100%, 563px);
    height:          80%;
    border-radius:   2px;
    object-fit:      cover;
    border:          1px solid var(--background-color);
    justify-self:    flex-end;
    
  }

 

    .contact--wrapper, .open--wrapper {
      display:         flex;
      flex-flow:       column nowrap;
      justify-content: flex-start;
      gap:             .5rem;
      
    }

    


      /* Phone and email */

        .phone, .email {
          display:        block;
          text-transform: none;
          margin-bottom:  .25rem;

        }

        
  
        .phone:hover, .email:hover {
          text-decoration: underline;
        }

  


      
 @media (max-width: 923px) {
  .content-card {
    grid-template-areas: 
      "contact-wrapper"  
      "map"
      "open-wrapper";
    grid-template-columns: 1fr;
    grid-template-rows:    auto;
    justify-items:         center;
    padding:               2rem 5% 2rem 5%;
    
  }

  .contact--wrapper {
    padding-top:  2rem;
  }
  
  .map {
    width:        clamp(286px, 80%, 358px);
    aspect-ratio: 1/1;
    place-self:   center;
  }
}

@media (max-width: 323px) {
  .content-card {
    padding: 2rem 5px 2rem 5px;
    overflow-x: scroll;
  }
  
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/drinks.css ***!
  \**************************************************************************************************************/
.drinks--background {
  background: url('../images/photos/onebeer.jpg') no-repeat center / cover;
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow:   auto;
  width:      100%;
  
}


  .drinks--wrapper {
    width:           90%;
    display:         flex;
    flex-flow:       column nowrap;
    justify-content: flex-start;
    align-items:     center;
    gap:             2rem;
    padding:         5% 10% 5% 10%;
  }

    .drinks--wrapper p {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

/*
* 1) Brown separator under the table header
* 2) Making sure all names start with capital letter followed by lowercase
* 3) Creating gap between the table header and the table items, 
*    and occasionally between the drinks name and price
*/

.table--container {
  background-color:  rgba(var(--secondary-color-rgb), .9);
  border-radius:     2px;
  padding:           2rem;
  width:             max(40%, 468px);
}

 


  .table {
    color:           rgba(var(--brand-color-rgb), 1);
    table-layout:    auto;
    width:           100%;
    height:          auto;
    opacity:         1;
    border-collapse: collapse; /* 1 */
    border-spacing:  0;
   
  }

  .table__margin-bottom {
    margin-bottom: 1.5rem;
  }

    .table--title {
      width:          100%;
      text-transform: uppercase;
      font-weight:    bold;
      
    }
     
    .table--header {
      color:         rgba(var(--brand-color-rgb), 1);
      border-bottom: 1px solid rgba(var(--primary-color-rgb), 1); /* 1 */
      width:         auto;
      opacity:       1;
      
      
    }

      .table--header td:first-child {
        text-transform: uppercase;
      }

    
    .table--header::before { /*3*/
      content: '';
      display: block;
      width:   100%;
      height:  1.5rem;
    }

    .table--gap {  /*3*/
      height: .3rem;
      
    }


    
    .drinks--price {
      width: 21%;
      text-align: right;
      
    }
    
    

      

/*MOBILE VERSION*/

@media (max-width: 480px) {
  .drinks--wrapper {
    width:   100%;
    padding: 1rem .5rem 1rem .5rem;
    
  }
  .table--container {
    width:  100%;
    
  } 
  
  .drinks--price {
    white-space:  nowrap;
    height:       25px;
    padding-left: 2px;
    
  }

  .drinks--price.right-col {
    padding-left: 9px;
    
  }
  
}

@media (max-width: 229px) {
  .drinks--wrapper {
    padding:     1rem 0 1rem 0;
    align-items: flex-start;
  }
  .table--container {
    padding-left:  5px;
    padding-right: 5px;
    width:         auto;
    
    
  }  
}
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/hero.css ***!
  \************************************************************************************************************/

/* Hero picture */
.hero {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}

/* Hero background */

.hero--main {
  background:  url('/images/photos/kisasztal.JPG') no-repeat center / cover;
  background-blend-mode: multiply;
  background-color:   rgba(var(--brand-color-rgb), .3);
  min-height:         var(--hero-height);
  width:              100%;
  display:            flex;
  flex-flow:          column nowrap;
  justify-content:    center;
  align-items:        center;
  color:              var(--secondary-color);
  padding:            1rem .5rem 1rem .5rem;
  
  
}

/* Hero text */

  .text__hero {
    width: 75%;
    
  }

  @media (max-width: 891px) {
    .text__hero {
      width: 90%;
    }
  }

  @media (max-width: 635px) {
    .text__hero {
      padding-left: 10%;
      padding-right: 10%;
    }
  }

  @media (max-width: 400px) {
    .hero--main {
      padding-left:  5%;
      padding-right: 5%;
    }
    .title__hero {
      font-size:   calc(1.5 * var(--font-size-big));
      line-height: calc(1.5 * var(--line-height-big));
    }
    .text__hero {
      font-size:   var(--font-size-regular);
      line-height: var(--line-height-regular);
      
    }
  }

  
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/accordion.css ***!
  \*****************************************************************************************************************/
.accordion {
  display:         flex;
  flex-flow:       column nowrap;
  justify-content: flex-start;
  align-items:     center; 
  width:           90%;
  gap:             1.5rem;  
}

  .js-accordion--content {
    display:       none;
    background:    rgba(var(--brand-color-rgb), .7);
    color:         var(--secondary-color);
    font-size:     var(--font-size-medium);
    line-height:   var(--line-height-medium);
    padding:       2rem;
    border-radius: 2px;
    width:         80%;
   
  }

  .js-accordion--content.js-active {
    display: block;
  }

  
    .accordion--text {
      margin-bottom: 1rem;
    }


    .accordion--list {
      margin-bottom:   1rem;
      padding-left:    1.5rem;
    }

      .accordion--link {
        color: var(--primary-color);
      }

      .accordion--link:hover {
        text-decoration: underline;
      }

    



  @media (max-width: 864px) {
    .js-accordion--content {
      width: 100%;
    }
  }

  @media (max-width: 554px) {
    .accordion {
      width: 100%;
    }
    .js-accordion--content {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
  

      

      
/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/belga.css ***!
  \*************************************************************************************************************/
.belga {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

  .belga-headline {
    margin: 2rem;
    width: 75vw;
  }

    .list-title {
      text-transform: uppercase ;
  
    }

    .list-subtitle {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 400;
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
      align-self: flex-start;
    }

  .list-item_name {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: var(--line-height-regular);
    color: var(--brand-color);
  }

  .list-subname-wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    
  }

  .list-item_subname {
    font-size : var(--font-size-small);
    line-height: var(--line-height-small);
    align-self: center;
  }

  .list-toggle {
    padding-top: .5rem;
  }
  
      



.list-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  width: 75vw;
  
  
}

 

  

  .list-item_content {
    display: none;
  }

  /*TOGGLE CSS*/

  .visible-content {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .list-item_image {
    width: 20%;
    height: auto;
  }

  .hidden {
    display: none;
  } 



/* DEATILED VIEW*/

.selectedItem {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin-top: calc(var(--header-height) + 2rem);

  
  
}

.selectedItem > .list-header  {
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  align-items: center;
  
}

.list-item_image {
  width: 28vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.selectedItem .list-subname-wrapper {
  justify-content: center;
}
.selectedItem .list-item_subname {
 
  text-align: center;
}

.list-item_text {
  font-size : calc(var(--font-size-regular) * 0.9);
  line-height: calc(var(--line-height-regular) * 0.9);
  color: var(--brand-color);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
 
  
}

.btn__back {
  background:   transparent;
  border-color: var(--brand-color);
  color:        var(--brand-color);
  width: 5.25rem;
  width: auto;
  height: 2rem;
  border:       1px solid;
  font-weight:  400;
  letter-spacing: normal;
  margin-right: 0;
  margin-left: auto;
  margin-top: 2rem;

  
  display: flex;
  align-items: center;
  justify-content: center;
}

/*-----------------------------------------------*/
/* DESKTOP VIEW */
/*-----------------------------------------------*/
@media (min-width: 1024px) {
  .belga-headline {
    width: unset;
    margin-top: calc(var(--header-height) + 2rem);
  }
  .list-subtitle {
    text-transform: uppercase;
    text-align: center;
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
  } 
  .list-content {
    width: auto;
    gap: 2rem;
    
  }
  .list-item {
    max-width: 300px;
  }
  .list-item:hover {
   box-shadow: 0px 3px 6px #00000029;
   padding: .5rem;
   transition: 0.3s; 
  }
  .list-item_name {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
  }
  .list-item_subname {
    font-size : var(--font-size-regular);
    line-height: var(--line-height-regular);
    width: 90%;
    
  }
  .list-toggle {
    padding-top: unset;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
  }
  /* DEATILED VIEW*/
  .selectedItem{
    max-width: 674px;
  }
  .selectedItem:hover {
    box-shadow: none;
    padding: 0;
    transition: none; 
   }
  .selectedItem > .list-header {
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .selectedItem .list-item_subname {
    width: unset;
  }

  .selectedItem > .list-item_content {
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
    width: 100%;
  }
  .selectedItem .list-item_description {
    align-self: flex-end;
  }
  .list-item_image {
    width: auto;
    height: 12rem;
    margin-left: 0;
    margin-right: 0;
   
  }
  .list-item_text {
    max-width: 21.875rem;
    max-width: 20rem;
    margin-top: auto;
  }
  .btn__back:hover {
    cursor: pointer;
    background:   var(--brand-color);
    border-color: var(--brand-color);
    color:        var(--secondary-color);
  }
  
  
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/hoptop.css ***!
  \**************************************************************************************************************/
/*-----MOBILE FIRST STYLES ------*/

/*HERO SECTION*/


.specials-hero {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin-top: var(--header-height);
  /*min-height: calc(100vh - var(--header-height));*/
  background-color: #ffffff; /* fallback */
  background-color: rgba(var(--tertiary-color-rgb), 0.2);
  box-shadow: 0 10px 50px rgba(var(--tertiary-color-rgb), 0.25);
  padding-left: 2rem;
  padding-right: 2rem;
  /*margin-bottom: auto;*/

  
}
  .hero-sun-wrapper {
  position: relative;
  top: -50px; /* feltolja a napot a header után */
  width: 150px;
  height: 150px; /* opcionális, ha biztosítani akarjuk a wrapper méretét */
  margin: 0 auto;
  z-index: 50; 
  margin-bottom: -50px; /* visszahúzza a napot a szöveg mögé */
}

.hero-sun-wrapper svg.hero-sun {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 50px rgba(var(--tertiary-color-rgb), 1));
}
 
  .h-title {
    color: var(--brand-color);
    text-align: center;
    font-size: calc(var(--font-size-regular) * 2);
    line-height: calc(var(--line-height-regular) * 2);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    margin-top: 3.75rem;
    
  }

  

    .h-content {
      margin-left: auto;
      margin-right: auto;
      font-size: 1 rem;
      color: var(--brand-color);
      text-align: center;
      width: 100%;
      margin-bottom: 2.5rem;
    }
      .h-name {
        font-size : calc(var(--font-size-regular) * 1.5);
        line-height: calc(var(--line-height-regular) * 1.4);
      }

    .h-more {
      display: none;
      font-size: var(--font-size-medium);
      line-height: var(--line-height-medium);
      text-align: center;
      margin-top: auto;
      padding-top: 1rem;
    
    }

.down-arrow {
  display: none;
  margin-top: .5rem;
  margin-bottom: auto;
  display: flex;
  justify-content: center;
}

.down-arrow svg {
  display: none;
  width: 24px;
  height: 32px;
}



/*PRODUCTS SECTION*/


.products {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 77vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  
}

  .products-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--brand-color);
    margin-top: 3.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2rem;
    width: 77vw;
    margin-left: auto;
    margin-right: auto;
  }

  .product-card {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
    max-width: 345px;
    /*margin-top: 2rem;*/
    color: var(--brand-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.5);
    box-shadow: 4px 4px 10px rgba(var(--tertiary-color-rgb), 0.25);
    padding: 2.5rem 1.5rem;
    border-radius: 25px;
  }

    .product-header {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      
    }

    .p-name {
      font-family: 'Josefin Sans', sans-serif;
      font-size: var(--font-size-medium);
      text-align: center;
     
    }

    .p-type {
      color: var(--primary-color);
      font-size: calc(var(--font-size-regular) * 0.9);
      text-align: center;
    }

    .p-image {
      width: 50vw;
      max-width: 296px;
      filter: drop-shadow(0px clamp(5px, 1.2vw, 10px) clamp(5px, 1.2vw, 10px) rgba(var(--primary-color-rgb), 0.25));
      margin-bottom: 1rem;
    }

    .product-info {
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-end;
      gap: 1rem;
      
    }

      .p-desc {
        font-size: 1rem;
        line-height: 1.2rem;
        width: 64vw;
        max-width: 256px;
      }
      .p-price {
        color: var(--primary-color);
        font-size: 1.25rem;
      }
      
  .six-pack {
    background-color: #ffffff; /* fallback */
    background-color: rgba(var(--tertiary-color-rgb), 0.2);
    box-shadow: 0 4px 10px rgba(var(--tertiary-color-rgb), 0.25);
    width: 100vw;
    padding: 11.7vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap:0;  
    margin-bottom: 2rem;

  }

   .six-pack > h2 {
    margin-top:auto
   }
  .six-pack > p {
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--brand-color);
    text-align: center;
    max-width: 250px;
    margin-bottom: auto;
    

  }
      
      
  
  .CTA {
    color: var(--brand-color);
    font-size: var(--font-size-big);
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
  }





/*-----DESKTOP STYLES ------*/

/*HERO SECTION*/

@media (min-width: 1024px) {
  .hero-sun-wrapper {
    width: 260px;
    height: 260px;
    top: -80px; /* finomhangolás a nagyobb körhöz */
  }

  
  .h-title {
    /*margin-top: 13vh;*/
    margin-bottom: 0;
    font-size: 5rem;
    line-height: 6rem;
  } 
  
  
  .h-content {
    margin-top: 6vh;
    font-size: 2.6rem;
    line-height: 3.9rem;
    max-width: 820px;
  }
  
  .h-more {
    display: none;
    margin-top: 4vh;
    font-size: 2.18rem;
    font-weight: 400;
  }
  .down-arrow svg {
    display: none;
    width: 48px;
    height: 64px;
  }
}

/*PRODUCTS SECTION*/
@media (min-width: 1024px) {
  .products-title {
    font-size: 3.75rem;
    line-height: 4.5rem;
    margin-top: 6rem;
    margin-bottom: 4rem;
  }
  .products {
    flex-flow: row wrap;
    align-items: stretch;
    gap: 5rem;
    margin-top: 7vh;
    width: 100%;
    
  }
  
  .product-card {
    justify-content: flex-start;;
  }
  .product-info {
    flex-grow: 1;
  }
  .p-price {
    margin-top: auto;
  }
  .six-pack {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .six-pack > p {
    font-size: 2rem;
    line-height: 2.5rem;
    max-width: 400px;
  }
  
  
  
  .CTA {
    font-size: 3.75rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 6rem;
  }
}
/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/privacy.css ***!
  \***************************************************************************************************************/

ul.privacy--list {
  list-style-type: none;
  margin:          auto;
}



.privacy--contacts__wrapper {
  display:         flex;
  flex-flow:       column nowrap;
  justify-content: flex-start;
  align-items:     center;
  gap:             0;
  width:           100%;
  margin-bottom:   1rem;
}

  .privacy--contacts {
    padding-top:    0;
    padding-bottom: 0;
  }

    .privacy--link {
      color: var(--brand-color);
    }

    .privacy--link:hover {
      text-decoration: underline;
    }

  
/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/impressium.css ***!
  \******************************************************************************************************************/
.impressium--wrapper {
  display:         flex;
  flex-flow:       column nowrap;
  justify-content: flex-start;
  align-items:     flex-start;
  
}

  .impressium--subwrapper {
    margin-top:    1rem;
    margin-bottom: 1rem;
  }
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/footer.css ***!
  \**************************************************************************************************************/
footer {
    height:           var(--footer-height);
    width:            100%;
    display:          flex;
    flex-flow:        column nowrap;
    justify-content:  center;  
    align-items:      center;
    gap:              calc(var(--line-height-small) / 2);
    background:       var(--primary-color) 0% 0% no-repeat padding-box;
    opacity:          1;
    
  }

  .links--wrapper {
    display:         flex;
    flex-flow:       column nowrap;
    justify-content: center;
    align-items:     center;
    gap:             0;
  }
  
    .footer--text {
      width:           69.375rem;
      text-align:      center;
      letter-spacing:  0.15rem;
      text-transform:  uppercase;
      color:           var(--tertiary-color);
    }

    .footer--text__link {
      color:           var(--brand-color);
    }

    .footer--text__link:hover {
      text-decoration: underline;
    }
  

    
/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/icons.css ***!
  \*************************************************************************************************************/
/* Social media icons */

.icons--wrapper {
    /*width:           50%;*/
    height:          2rem;
    display:         flex;
    flex-flow:       row nowrap;
    justify-content: flex-start;
    gap:             .625rem;

  }

    .icons {
      display:          flex;
      flex-flow:        row nowrap;
      justify-content:  center;
      align-items:      center;
      width:            2rem;
      height:           2rem;
      background-color: var(--brand-color);
      color:            var(--secondary-color);
      opacity:          .8;
      border-radius:    50%;
    }

    .icons:hover {
      background-color: transparent;
      color:            var(--brand-color);
      border:           .125rem solid var(--brand-color);
    }  


    .icons__light {
      background-color: var(--tertiary-color);
      color:            var(--primary-color);
    }

    .icons__light:hover {
        background-color: transparent;
        color:            var(--tertiary-color);
        border:           .125rem solid var(--tertiary-color);
      }  

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./public/css/partials/hide.css ***!
  \************************************************************************************************************/
.hide {
  display: none;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./public/css/style.css ***!
  \**************************************************************************************************************************************************************************/





/*# sourceMappingURL=style.css.map*/