@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --site1:#4b532c;
    --site1-rgb:75,83,44;
    --site2:#788862;
    --site2-rgb:120,136,98;
    --site3:#bdcda7;
    --site3-rgb:189,205,167;
    --site4:#ffffff;
    --site4-rgb:255,255,255;
    --site5:#5b4a3a;
    --site5-rgb:91,74,58;
}

/* basics */
.vh100 {min-height:100vh;justify-content:center;}
#wood {
    width: 100vw;
    height: 100%;
    position: absolute;
    z-index: -1;
    opacity: .01;
    background-repeat: repeat-y;
    background-position: center
}
html, body {
  scroll-behavior: smooth;
  height: 100%;
}
fieldset a {color:white;text-decoration:none;}
.modal .form-group {margin-bottom:1rem}
.modal .form-control {border-radius:0;background:rgba(255,255,255,.2);border:0 none;color:white;}

/* alert */
#alert-modal .modal-header {border:0 none;border-top-left-radius:3rem;border-top-right-radius:3rem;padding:2rem 2rem 0 2rem;background:var(--site1);position:relative;color:white}
#alert-modal .modal-header button {background:none;border:0 none;position:absolute;top:2rem;right:2rem;width:2rem;z-index:11}

/* font */
body {font-weight:normal;position:relative}
h1, h2, h3, h4, h5, h6, strong {font-weight:bold;}
.fs-8 {font-size: 4rem}
.fs-7 {font-size: 3.5rem}
.fs-6 {font-size: 3rem}
.fs-5 {font-size: 2.5rem}
.fs-4 {font-size: 2rem}
.fs-3 {font-size: 1.5rem}
.fs-2 {font-size: 1rem}
.fs-1 {font-size: .75rem}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400; /* 400-900 */
  font-style: normal;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100; /* 100-900 */
  font-style: normal;
}

/* color */
.btn-site {border-radius:1.25rem;border-color:white;color:white;}
.btn-site:hover {border-color:white!important;background-color:rgba(255,255,255,.15)!important}
.btn-ds {border-radius:1.25rem;border-color:white;color:white;}
.btn-ds:hover {border-color:white!important;background-color:rgba(255,255,255,.15)!important}
.btn-ds-success {border-radius:1.25rem;border-color:white;color:white;background:var(--bs-success)}
.btn-ds-danger {border-radius:1.25rem;border-color:white;color:white;background:var(--bs-danger)}

/* navbar */
.navbar-overlay {
  position: relative;
}
.nav-item.sub {display:none;}

body.default .navbar-overlay .navbar,
body.products .navbar-overlay .navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 12;
  background-color: rgba(0, 0, 0, 0.15);
}
body.products h1 svg {width:20vw;margin-left:-.6vw}
body.products h3 svg {width:6vw}

header .navbar-nav .dropdown-item {border-radius:0;background:transparent}
header .navbar-nav .dropdown-item:hover {background:white}
header .navbar-nav > .nav-item > a, header .navbar-nav > .nav-item button {padding-left:3.25rem!important;padding-right:3.25rem!important;transition:none!important;text-transform:uppercase;font-family: "Playfair Display", serif;}
header .navbar-nav > .nav-item.lang > a {padding-left:.5rem!important;padding-right:.5rem!important}
header .navbar-nav > .nav-item.lang > a.active {font-weight:700}

header .dropdown-menu {text-align:center}
header .category {font-weight:bold;text-transform:uppercase;}
header .dropdown-toggle.show {position:relative;z-index:1010}

.navbar-brand {
  margin: .25rem 0 0 5.5rem;
  padding: 0;
}

.navbar-nav li a {
  color: #ffffff;
}

.dropdown-menu, .dropdown-item { 
  color: #ffffff; 
  background-color: rgba(75, 83, 44, 0.85); 
  margin-top: 0;
}

.nav-item.dropdown {
  position: relative;
}

.nav-item.dropdown .dropdown-menu.show {
  width: max-content;
  width: 14rem;
  margin: 0;
  border: none;
  position: absolute;
  top: -.5rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 1rem 1rem;
  font-size:.875rem;
  padding-bottom:1rem;
  padding-top:3.5rem
}

.navbar .load-modal {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #ffffff;
}

.navbar .load-modal:hover,
.navbar .load-modal:focus {
  color: #ffffff;
  text-decoration: none;
}

.modal-body {
  color: #ffffff;
  background-color: #4b532c;
  border-radius: 3rem;
  margin: 3rem;
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.modal-body h2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; 
  font-style: normal;
}

.modal-body > div > p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400; 
  font-size: small;
  margin:2px 0;
}

.modal-content {
  position: relative;
  border-radius: 3rem;
  background-color: transparent;
  border-color: transparent;
}

.modal .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  filter: invert(1);
  margin: 5px;
}

/* footer */
footer {
    color: #ffffff;
    background-color:transparent;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 180; 
    font-style: normal;
    text-align:center;
    margin-top:2rem
}
footer p {padding:0 1rem}
footer svg {height:.875rem}
footer a {display:inline-block;color:white;font-weight:500;text-decoration:none;}
footer a.ergo {vertical-align:middle}

/* img */
body {
  overflow-x: hidden;
  background-color: #4b532c;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100; /* 100-900 */
  font-style: normal;
}

.full-bg {
  min-height: calc(100vh - 80px);
  width: 100%;

  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 0  0 3rem 3rem;
  -webkit-box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2); 
  box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2);
  overflow: hidden;

  background-image: 
        linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0)),
        url('/static/img/InserimentoFlex-Slim_Oslo.jpg');
    background-size: cover;
    background-position: center;
}

.full-bg-content {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  position:relative
}

/* card */
.box-model {
  box-shadow: inset -8px 0 12px rgba(0,0,0,0.35);
   padding: 0;
}
.box-model a {position:relative;z-index:11;line-height:1;padding-top:.375rem;padding-bottom:.5625rem;}

.card {
    width: 100%;
    height: auto;
    display: flex;           
    flex-direction: column;  
    align-items: flex-start; 
    padding: 1rem;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.card-body {
    color: #ffffff;
    padding: 0 5rem;
}

.card > svg {
  max-height: 60px;   
  width: auto;
  margin-bottom: 4px;
  padding: 0 5rem;
}

.card-title {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; 
  font-style: normal;
  font-size: 1rem;
}

.btn-outline-custom {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: transparent;
}

.btn-outline-custom:hover {
  background-color: #bdcda7;
  color: #4b532c;
  border-color: #bdcda7;
}

.card.gradient-top {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

/* default pages */

/* user */

/* default */
body.default h2 {
    color: #ffffff;
    font-size: 3rem;
    font-family: "Playfair Display", serif;
    font-weight: 150;
    font-optical-sizing: auto;
    font-style: normal;
    padding: 0 0 0 36px;
    text-align: left;
    margin-top: 4rem;
}
body.default #modal h2 {padding-left:0}

body.default .A_logo-img{
  display: flex;
}

body.default .A_logo-img>svg {
  align-items: flex-end;
  max-height: 440px;
  opacity: 0.2;
}

/* products */
body.products main h1 {
  color: #ffffff;
  font-size: 5rem;
  margin: 0;
  padding-left: 2rem;
}

body.products main h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; 
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

body.products main .td-text1 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; 
  font-style: normal;
  max-width: 60%;
  margin-bottom: 2rem;
  padding-left: 2rem;
}

body.products main .borostyan-img {
  height: 500px;
  width: 500px;
  position: absolute;
  bottom: 0;
  right: 10%;
  display: flex;
  align-items: flex-end;
}
body.products main .borostyan-img img {width:auto;height:100%;}
body.products main .borostyan-img {
  right: 8%;
  transform: rotateZ(-12deg);
  bottom: -8%;
}

.model-title {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600; 
  font-style: normal;
  padding: 0px 5rem;
  margin: 4px 0px;
}

body.products main .card-title {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; 
  font-style: normal;
  margin: 3px 0px .5rem 0;
}

body.products main .box-model {
  min-height: 160px;
}

body.products main .btn-outline-custom {
  margin: 3px 0px;
}

body.products main #tags {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  margin-bottom: 3rem;
  max-width: 60%;
}
body.products main #tags > div {height:16.25rem}
body.products main #tags > div .tagimg {position:relative}

body.products main .tags img {
  width:80%;
  height:auto;
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
}

body.products main #tag-5, #tag-6, #tag-7, #tag-8, #tag-9 {
  background-color: rgba(189, 205, 167, 0.15);
  margin: 2rem;
  color: #ffffff;
  max-width: 100%;
  border-radius: 3rem;
}

body.products main .tags .tagtext {
  margin: auto;
  padding: 1.5rem 1rem;
}

body.products main .tags h4 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800; 
  font-style: normal;
  margin-top: 8px;
  font-size: 1.2rem;
}

body.products main .tags .td-text {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; 
  font-style: normal;
  font-size: 0.90rem;
  margin: 0;
  max-width: 100%;
}

body.products main #wares {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  max-width: 1050px;
}
body.products main #wares h2 svg, body.products main #mwares h2 svg {width:80%;margin-left:-2%}
body.products main #wares .toggle-item button {margin:0!important;padding-bottom:0!important}
body.products main #wares .toggle-item small {padding-left:3.25rem;margin-top:-.125rem;display:block}
body.products main .wares .load-modal {width:100%}
body.products main .wares .col-9,
body.products main .wares .col-3 {
  overflow: hidden;
}
body.products main .wares h4 {font-size:1rem;font-weight:500;}
body.products main .wares p {margin:0;font-size:.875rem}

body.products main .wares img {
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
  max-height: 607px;
  height:100%;
}
body.products main #ware-7 img {max-height:666px}

body.products main .wares .second-img {height:100%}

body.products main #wares > div {
  color:white;
  margin-top:6rem;
  margin-bottom:1.5rem;
  padding:3rem;
  border-radius:3rem;
  background-color: var(--site1);
  -webkit-box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2); 
  box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2);
}
body.products main #mwares > div {
  color:white;
  margin-top:6rem;
  margin-bottom:1.5rem;
  padding:1rem .5rem;
  border-radius:3rem;
  background-color: var(--site1);
  -webkit-box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2); 
  box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2);
}
#mwares h2 {font-size:3rem;font-weight:600;text-align:center;max-width:100%;margin-bottom:0}
#mwares h3 {font-size:1rem;font-weight:300;text-align:center;font-family: "Playfair Display", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;margin-bottom:2.5rem}
#mwares h4 {font-size:1.25rem;font-weight:500;text-align:center;margin-top:2rem;margin-bottom:0}
#mwares small {display:block;text-align:center;margin-bottom:1rem}

#mwares .carousel-item > div > div {padding:0 .25rem;}
#mwares .carousel-item > div > div .img-div {border-radius:.75rem;overflow:hidden;height:20rem}
#mwares .carousel-item > div > div img {object-fit:cover;height:100%}
#mwares .row {margin:0}
#mwares .carousel-control-prev {left:-5vw}
#mwares .carousel-control-next {right:-5vw}
#mwares .carousel-control-prev svg {width:2rem;height:2rem;transform:rotate(180deg);}
#mwares .carousel-control-next svg {width:2rem;height:2rem}
#mwares .second-img {width:100%;height:auto}

body.products main .wares h2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; 
  font-style: normal;
  font-size: 3rem;
  margin: 0;
  padding: 0;
}

body.products main .wares h3 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 100; 
  font-style: normal;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

body.products main .wares ul {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  padding-left: 0;
  }

body.products main .wares li > button{
  background-color: transparent;
  color: #ffffff;
  margin: 5px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; 
  font-style: normal;
}
.h-product .btn-outline-light {display:block;width:100%}

.toggle-item .nav-link{
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0;
  padding-right:0;
}

.toggle-item .nav-link span{
  background: none !important;
  color: #cfd8a8;
  display: flex;
  align-items: center;
  position: relative;
  height: 32px;
  padding-left: 52px;
}

.toggle-item .nav-link.active span{
  color: #ffffff;
  background: none !important;
}

.toggle-item span{
  position: relative;
}

.toggle-item span::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 32px;
  height: 16px;
  background-color: #6b7a4a;
  border-radius: 20px;
  transition: 0.25s ease;
}

.toggle-item span::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 12px;
  height: 12px;
  background-color: #cfe3a2;
  border-radius: 50%;
  transition: 0.25s ease;
  transform: translateX(0);
}

.toggle-item .nav-link.active span::before {
  background-color: #ffffff;
}

.toggle-item .nav-link.active span::after {
  transform: translateX(16px);
  background-color: #3d4a1f;
}

.toggle-item .nav-link {
  background-color: transparent !important;
  border: 0;
  box-shadow: none !important;
  color: inherit;
}

.toggle-item .nav-link:hover,
.toggle-item .nav-link:focus,
.toggle-item .nav-link:active {
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

.toggle-item .nav-link:focus-visible {
  outline: none;
}

body.products main .wares .btn, body.products main #mwares .btn {
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 2rem;
  background-color: transparent;
  font-size: 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; 
  font-style: normal;
}

body.products main .wares .btn-outline-light:hover, body.products main #mwares .btn-outline-light:hover {
  background-color: #bdcda7;
  color: #4b532c;
  border-color: #bdcda7;
}

/* article */
body.article header {position:relative}
body.article header::before,
body.article header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
}
body.article header::before {
  top: 0;
  box-shadow: inset 0 6px 6px rgba(0,0,0,0.25);
}
body.article header::after {
  bottom: 0;
  box-shadow: inset 0 -6px 6px rgba(0,0,0,0.25);
}

body.article section {
  color:white;
  margin-top:6rem;
  margin-bottom:3rem;
  padding:3rem;
  border-radius:3rem;
  -webkit-box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2); 
  box-shadow: 0px 4px 20px 12px rgba(0,0,0,0.2);
}

body.article h1 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 150;
}

body.article .td-text {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; 
  font-style: normal;
}

body.article main ul{
  display: flex;
  padding: 2px;
  margin-bottom: 1rem;
}

body.article main li{
  max-width: 23%;
  border-radius: .75rem;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 5px;
}

body.article main li .nav-link.active {
  background-color: rgba(255, 255, 255, 0.4); 
  border-radius: .75rem;
}

body.article article .nav-item > button {
  padding: 0;
}

body.article .nav-item > button > h3 {
  font-size: 1rem;
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: .25rem .5rem;
  background-color: rgba(255, 255, 255, 0.2); 
  border-radius: .75rem;
  height: 3rem;
  display:grid;
  align-content:center;
}

body.article main .tab-content a {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

body.article main .tab-content {
  padding: 7px;
}
body.article main a{color:white;text-decoration:none;}

body.article article .nav-pills button svg {width:40%;height:auto;padding:1.5rem 0 1rem 0}
body.article article .tab-content .btn-block {text-align:left}
body.article article .tab-content .btn-block svg {float:right;width:1.5rem;height:1.5rem}
#article-modal .modal-body button.close, #ware-modal .modal-body button.close {background:none;border:0 none;position:sticky;top:0;right:0;width:2rem;float:right;z-index:11}
#article-modal .article-img.float-right {width:40%;height:auto;float:right;margin-top:-11%}
#article-modal .article-img.float-right p {display:none;}
#article-modal .modal-body-scroll {
  position: relative;
  overflow-y: auto;
  padding-bottom: 0
}
#article-modal .shadow-div {
  position: sticky;
  bottom: 0;
  height: 2rem;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(var(--site1-rgb),0),
    rgba(var(--site1-rgb),1)
  );
}
#article-modal h2 {font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#ware-modal .modal-body h3 {font-size:1rem;}
#article-modal .modal-content > img {
  position: absolute;
  bottom: 3rem;
  height: 70vh;
  right: 3rem;
}

/* pager */
.page-link, .page-link:link, .page-link:visited {text-decoration:none}
.page-link {border:0 none;font-weight:bold;border-radius:.125rem!important;background:var(--site1);color:white!important}
.page-link.active, .page-link:hover {background-color:var(--site2);color:white}

/* custom input */
.form-control::placeholder {color:rgba(var(--site1-rgb),.4)}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.25;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-check input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    background-color:white;
}
.custom-radio .checkmark {border-radius:50%}
.custom-check input ~ .checkmark, .custom-radio input ~ .checkmark, .custom-check:hover input ~ .checkmark, .custom-radio:hover input ~ .checkmark {background-color:white;border:1px solid var(--site1)}
.custom-check input:checked ~ .checkmark {background-color:var(--site1)}
.custom-radio input:checked ~ .checkmark {background-color:white}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-check input:checked ~ .checkmark:after, .custom-radio input:checked ~ .checkmark:after {display:block}
.custom-radio .checkmark:after {
    top: 1px;
    left: 1px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:var(--site1);
}
.custom-check .checkmark:after {
    left: 5px;
    top: 2px;
    width: .5rem;
    height: .75rem;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* contact-us */
#contact-us-editor .tab-content {padding:0}
#contact-us-editor .form-control {border:0 none;background-image:none;margin-bottom:1rem;border-radius:.5rem!important;padding:.75rem;background:rgba(255,255,255,.15);color:white}
#contact-us-editor .form-control::placeholder {color:white}
#contact-us-editor .form-control-feedback {display:none}
body.article section.container-lg {background:var(--site1)}
body[class*=contact-] section.container-lg {padding-bottom:0}
body[class*=contact-] main .vcard {margin-top:3rem;margin-bottom:2rem}
body[class*=contact-] main .vcard > div {margin-bottom:1rem}
body[class*=contact-] main .vcard > div > span {border-radius:1.25rem;border:1px solid white;padding:.375rem 1rem;vertical-align: middle;}
body[class*=contact-] main .vcard a {color:white;text-decoration:none;}
body[class*=contact-] main svg {width:2.5rem;height:auto;margin-right:1rem}
body[class*=contact-] main .article-img p {display:none}
body[class*=contact-] main .img-div {position: relative;}
body[class*=contact-] main .article-img {position:absolute;bottom:0}

@media screen and (min-width:1200px){
}

@media screen and (max-width:1366px) {
  .navbar-brand {margin-left:5rem}
  header .navbar-nav > .nav-item > a, header .navbar-nav > .nav-item button {padding-left:1.5rem!important;padding-right:1.5rem!important}
}
@media screen and (max-width:1199px){
  body.products main #tags {max-width:80%;}
  body.products main #tags > div {height:19rem}
  #article-modal .modal-content > img {
    position: absolute;
    bottom: 3rem;
    height: 60vh;
    right: 1rem;
  }
}

@media screen and (max-width:991px) {
  body[class*=contact-] main .article-img {position:relative;}
  #article-modal .modal-body {padding-left:1rem;padding-right:1rem}
  #article-modal .modal-body > .row > div > img {
    margin-top:-1rem;
    margin-bottom:1rem;
    margin-left:1.5rem;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 90%,
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 90%,
      rgba(0,0,0,0) 100%
    );
  }
  .modal-body {border-radius:1.5rem}
  body.products main h2, body.products main .td-text1 {max-width:100%}
  body.products main .borostyan-img {
    right: -2%;
    transform: rotateZ(0deg);
    bottom: -8%;
  }
  body.products main #tags > div {height:auto}
  body.products main .tags {margin:.5rem 0 2rem 0;text-align:center;-webkit-box-shadow: 0px 16px 20px -8px rgba(0,0,0,0.2);box-shadow: 0px 16px 20px -8px rgba(0,0,0,0.2);}
  body.products main #tags {max-width:100%}
  body.products main .tags img {position:relative;left:0;transform:translateX(0)}
  body.products main #tags > div .tagimg {padding-top:1.5rem}
}

@media screen and (max-width:768px) {
  .navbar {padding-left:1rem;padding-right:1rem}
  .navbar .container-fluid {padding:0}
  .navbar:has(.navbar-toggler[aria-expanded="true"]) {
    background-color:var(--site1)!important;
  }
  #navbarNav {padding:.75rem;justify-content:left!important;}
  header .navbar-nav > .nav-item > a, header .navbar-nav > .nav-item button {padding-left:0!important;}
  header .navbar-nav {position:relative;padding-bottom:4rem}
  header .navbar-nav > .nav-item.lang {position:absolute;bottom:0;right:3rem}
  header .navbar-nav > .nav-item.lang:last-child {right:0}
  header .navbar-nav > .nav-item.lang > a {font-size:1rem;}
  .navbar .dropdown-menu {display:none!important;}
  .nav-item.sub {display:inline-block;padding-left:1rem}
  .nav-item.sub a {color:white;text-decoration:none;font-family: "Montserrat", sans-serif!important;
    font-optical-sizing: auto!important;
    font-weight: 100!important; /* 100-900 */
    font-style: normal!important;}
  .nav-item .ware {text-transform:none!important}
  .nav-item.sub a.category {font-weight: 500!important;}
  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url('/static/img/szendvicsmenu_ikon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
      background-image: url('/static/img/x_close.svg');
      padding: 5px;
  }

  .navbar-collapse {
    background-color:var(--site1);
    width: 100vw;
    padding: 2rem;
    z-index: 9999;
    transition: 0.3s ease;
  }

  .navbar-toggler {
    position: relative;
    z-index: 10000;
    border: transparent;
  }

  .navbar-toggler:focus,
  .navbar-toggler:active,
  .navbar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .navbar-toggler:hover {
      text-decoration: none;
  }

  .navbar-nav {
    gap: .25rem;
    text-align: left;
  }

  .navbar-nav .nav-link, .navbar .load-modal {
    font-size: 1.5rem;
    color: #ffffff;
  }

  body.default h2 {padding:0}
  body.nav-open {
    overflow: hidden;
  }
  .modal-body {
    margin: 1rem;
  }
  .modal-body .article-img {display:none}
  body.products main h1 {padding-left:0;text-align:left!important;font-size:4rem}
  body.products main h2, body.products main .td-text1 {padding-left:0;max-width:80%;font-size:.875rem}
  body.products main h2 {font-weight:500}
  .model-title, .card-body, .card > svg {padding:0}
  .card, .top-section {padding-left:1.5rem}
  body.products main .borostyan-img {right: -13%;transform: rotateZ(17deg);z-index: 1;}
  body.article main li{max-width:46%}
  body.article section.container-lg {margin-left:.75rem;margin-right:.75rem;width:calc(100% - 1.5rem);padding:3rem 2rem}
  body.default h1 {font-size:2.25rem;padding:0}
  body.products h1 svg {width:46vw;margin-left:-1.2vw}
  body.products h3 svg {width:24vw}
  body.products main #wares h2 svg, body.products main #mwares h2 svg {width:50%;margin-left:0}
  .h-product .btn-outline-light {width:calc(100% - 2rem);margin-left:1rem}
}

@media screen and (max-width:480px) {
}