*,*::before,*::after {  box-sizing: border-box;}
html {  -moz-text-size-adjust: none;  -webkit-text-size-adjust: none;  text-size-adjust: none;}
body, h1, h2, h3, h4, p,figure, blockquote, dl, dd {  margin-block-end: 0;}
ul[role='list'],ol[role='list'] {  list-style: none;}
body {  min-height: 100vh;  line-height: 1.5;}
button, input, label { line-height: 1.1; }
h1, h2, h3, h4 {  text-wrap: balance;}
a:not([class]) {  text-decoration-skip-ink: auto; }
img,picture {  max-width: 100%;  display: block;}
input, button,textarea, select {  font: inherit;}
textarea:not([rows]) {  min-height: 10em;}
:target {  scroll-margin-block: 5ex;}
h1, h2, h3, h4, p { margin: 0; }
input:-internal-autofill-selected {appearance: menulist-button;background-image: none !important;background-color: none !important;color: fieldtext !important;}

:root {
  /* font-size 800 - 1434 */
  --fs-12: clamp(0.7558rem, 0.7867rem + -0.0344vw, 0.7695rem);
  --fs-15: clamp(0.8772rem, 0.8205rem + 0.1134vw, 0.9221rem);
  --fs-18: clamp(1rem, 0.8423rem + 0.3155vw, 1.125rem);
  --fs-22: clamp(1.14rem, 0.8466rem + 0.5868vw, 1.3725rem);
  --fs-27: clamp(1.2996rem, 0.8266rem + 0.946vw, 1.6745rem);
  --fs-33: clamp(1.4815rem, 0.7733rem + 1.4165vw, 2.0428rem);
  --fs-40: clamp(1.689rem, 0.6753rem + 2.0272vw, 2.4923rem);
  --fs-49: clamp(1.9254rem, 0.5183rem + 2.8142vw, 3.0405rem);
/* padding, margin, gap 360 - 1434 */
  --p-19-9: clamp(0.5938rem, 0.3947rem + 0.8845vw, 1.1875rem);
  --p-38-19: clamp(1.1875rem, 0.7895rem + 1.7691vw, 2.375rem);
  --p-57-19: clamp(1.1875rem, 0.3914rem + 3.5382vw, 3.5625rem);
  --p-57-38: clamp(2.375rem, 1.977rem + 1.7691vw, 3.5625rem);
  --p-76-19: clamp(1.1875rem, -0.0066rem + 5.3073vw, 4.75rem);
  --p-76-38: clamp(2.375rem, 1.5789rem + 3.5382vw, 4.75rem);
  --p-76-57: clamp(3.5625rem, 3.1645rem + 1.7691vw, 4.75rem);
  --p-114-76: clamp(4.75rem, 3.9539rem + 3.5382vw, 7.125rem);
  --p-114-38: clamp(2.375rem, 0.7828rem + 7.0764vw, 7.125rem);
  --p-190-76: clamp(4.75rem, 2.3617rem + 10.6145vw, 11.875rem);
/* colors */
  --blue: #00396C;
  --lightblue: #76C7F0;
  --darkblue: #1F70B7;
  --white: #ffffff;
  --sans: "PT Sans", sans-serif;

}
html, body { min-height: 100vh; }
body { 
  margin: 0; padding: 0; 
  color: var(--white); background: transparent linear-gradient(180deg, #76C7F0 0%, #1F70B7 100%) 0% 0% no-repeat padding-box;
  font-family: var(--sans); font-style: normal; font-weight: 400; font-size: var(--fs-18); line-height: calc(24/18); font-optical-sizing: auto;
}
h1, .h1 { font-size: var(--fs-49); line-height: 1.22; font-weight: 700; }
h2, .h2 { font-size: var(--fs-33); line-height: 1.22; font-weight: 700; }
h3, .h3 { font-size: var(--fs-27); line-height: 1.22; font-weight: 700; }
.button {
  display: flex; justify-content: center; align-items: center; 
  background: transparent; color: var(--white); text-decoration: none; font-weight: 700;
  border: 2px solid var(--white); border-radius: 50vh; padding: 10px 38px; box-shadow: 0px 0px 0px 0px rgba(0,57,108,0);
  transition: all 0.25s ease;
  &:hover { background: var(--white); box-shadow: 0px 20px 40px 0px rgba(0,57,108,0.3); transition: all 0.25s ease; color: var(--blue); }
}
figure { margin: 0; padding: 0; }
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 .hamburger {
  padding: 0; display: block; cursor: pointer;
  transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear;
  font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; 
}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after {background-color: var(--blue); }
.hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 40px; height: 4px; background-color: var(--blue); border-radius: 4px; position: absolute;
  transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; 
}
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg);transition-delay: 0.12s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {top: 0;opacity: 0;transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {bottom: 0;transform: rotate(-90deg);transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }


header { display: flex; width: 90%; max-width: 1434px; margin: 0 auto; }
.logo { position: relative; z-index: 999999; max-width: none; }
nav { flex: 1; display: flex; }
.nav-links {
  display: flex; align-items: flex-start; flex: 1; column-gap: 3vw; padding: 97px 3vw 0 3vw;
  & a { position: relative; font-size: var(--fs-22); color: var(--blue); font-weight: 700; text-decoration: none; padding-bottom: 14px; overflow: hidden; }
  & a::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transition: all 0.25s ease; }  
  & a:hover::after { transform: scaleX(100%); transition: all 0.25s ease; } 
  & a.active::after { transform: scaleX(100%); } 
}
.form-search { display: flex; flex-direction: column; padding-top: 43px; }
.form-search div { padding-bottom: 10px; color: var(--blue); font-size: var(--fs-27); letter-spacing: -0.02rem; }
.form-search fieldset { border: 0; margin: 0; padding: 0; display: flex; }
.form-search img { max-width: none; }
.form-search input { flex: 1; border: 0; background: transparent; border-bottom: 2px solid var(--blue); padding: 10px 10px 10px 0; }
.form-search input::placeholder { color: var(--blue); }
.form-search button { border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid var(--blue); padding: 10px 0; }


.hamburger { display: none; }

@media (max-width: 1300px) {

  .logo { width: 200px; }
  header { justify-content: space-between; }
  nav {
    position: fixed; z-index: 999998; width: 100vw; height: 100vh; left: 0; top: 0;
    flex-direction: column; padding-top: 117px;
    background: transparent linear-gradient(180deg, #76C7F0 0%, #1F70B7 100%) 0% 0% no-repeat padding-box;
    display: none; opacity: 0; transition: opacity .3s ease, display .3s ease allow-discrete;
  }
  nav.is-open { opacity: 1; display: block; }
  @starting-style { nav.is-open { opacity: 0; } }
  .nav-links { width: 90%; flex: 0; margin: 0 auto; padding: 2vh 0; flex-direction: column; column-gap: 0; row-gap: 2vh; }
  .nav-links a { font-size: 30px; }
  .form-search { padding: 2vh 0; width: 90%; margin: 0 auto; }
  .form-search div { display: none; }
  .hamburger { display: block; align-self: flex-start; margin-top: 45px; position: relative; z-index: 999999; }  

}


.hero { display: flex; width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-38-19);}
.hero-section { width: 50%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: var(--p-76-19); aspect-ratio: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.hero-section .h1 { 
  position: relative; color: var(--white); text-decoration: none; padding-bottom: 14px; transform: translateY(0); transition: all 0.25s ease;
  &::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--white); transform: scaleX(0); transition: all 0.25s ease; }
  &:hover { transform: translateY(-7px); transition: all 0.25s ease; }
  &:hover::after { transform: scaleX(100%); transition: all 0.25s ease; }
}
.symptoms { display: flex; width: 100%; justify-content: space-between; align-items: baseline; }
.symptoms a { display: flex; flex-direction: column; align-items: center; color: var(--white); text-decoration: none; width: fit-content; }
.symptoms img { width: 76px; transform-origin: center center; transition: all 0.25s ease; }
.symptoms a:hover img { transform: scale(1.15); transition: all 0.25s ease-in-out; }
.symptoms a strong { display: block; padding-top: 10px; transition: all 0.25s ease-in-out; }
.symptoms a:hover strong { transform: translateY(5px); transition: all 0.25s ease-in-out; }

@media (max-width: 1300px) {

  .symptoms img { width: 38px; }

}

@media (max-width: 800px) {

  .hero { flex-direction: column; row-gap: var(--p-38-19); }
  .hero-section { width: 100%; }

}

.dosage { display: flex; width: 90%; max-width: 1434px; margin: 0 auto; justify-content: space-between; align-items: center; padding: var(--p-76-19); column-gap: var(--p-76-19); margin-top: var(--p-114-38); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.dosage h2 { max-width: min-content; }

@media (max-width: 800px) {

  .dosage { flex-direction: column; aspect-ratio: 1; }
  .dosage h2 { max-width: fit-content; text-wrap: pretty; }

}

.faq-highlight {width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-114-38); }
.faq-highlight h2 { width: 100%; }
.faq-highlight .higlights { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: var(--p-76-38); margin-top: var(--p-76-38); }
.faq-highlight .highlight { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: var(--p-57-19); }
.faq-highlight .highlight img { object-fit: cover; width: 100%; height: 100%; object-position: center; }
.faq-highlight .highlight aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--p-38-19); }
.faq-highlight .highlight aside .button { margin-top: auto;  }

@media (max-width: 1300px) {
  
  .faq-highlight .highlight { display: grid; grid-template-rows: repeat(2, auto); grid-template-columns: auto; }
  .faq-highlight .highlight figure { aspect-ratio: 5 / 3; overflow: hidden; }

}

@media (max-width: 800px) {
  .faq-highlight .higlights { display: flex; flex-direction: column; }
}

.page-headline { margin-top: var(--p-38-19); padding: var(--p-57-38) 0; background: var(--blue); }
.page-headline .wrapper { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1434px; margin: 0 auto; gap: var(--p-76-19); }
.page-headline h1 { display: flex; flex-direction: column; line-height: 1.1; }
.page-headline h1 span, .page-headline h1 em { font-size: var(--fs-22); font-style: normal; }
.page-headline .buttons { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--p-38-19); }


@media (max-width: 800px) {
  
  .page-headline .wrapper { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .page-headline .buttons { flex-direction: column; align-items: flex-start; }
  .page-headline .buttons .button { width: 100%; }

}

.filters { display: flex; justify-content: flex-start; align-items: flex-start; width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-76-19); gap: var(--p-38-19); }
.filters a { 
  font-size: var(--fs-18); font-weight: bold; color: var(--blue); text-decoration: none; padding-bottom: 7px; 
  &::after { content: ""; display: block; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transition: all 0.25s ease-in-out; }
  &:hover::after { transform: scaleX(100%); transition: all 0.25s ease-in-out; }
  &.active::after { transform: scaleX(100%); }
}

@media (max-width: 800px) {

  .filters { flex-wrap: wrap; column-gap: 0; }
  .filters a { 
    width: 50%; 
    &.active { text-decoration-line: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
    &.active::after { display: none; }
  }
}

.products { width: 90%; max-width: 1434px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p-76-57) var(--p-190-76); margin-top: var(--p-76-38); }
.products .product { display: flex; width: 100%; flex-direction: column; justify-content: flex-end; gap: var(--p-19-9); margin-top: 0; }
.products .product .img { display: flex; justify-content: center; }
.products .product .text { display: flex; align-items: flex-start; flex-direction: column; gap: var(--p-19-9); }
.products .product .data { display: flex; flex-direction: column; }
.products .product .data .type { font-size: var(--fs-18); font-weight: 400; }
.products .product .data .name { font-size: var(--fs-33);font-weight: 700; }
.products .product .data .qtty { font-size: var(--fs-27); font-weight: 700; }
.products .product .data .qtty em { font-size: var(--fs-18); font-style: normal; }

@media (max-width: 1300px) {

  .products { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 800px) {

  .products { grid-template-columns: 1fr; }
  .products .product .data { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
  .products .product .data .type { width: 100%; }

}


.medicine { width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-76-38);}
.medicine .packshot, .medicine article { max-width: 60%; }
.medicine .packshot { display: flex; flex-direction: column; margin: 0 auto; }

.medicine article { margin: 0 auto; margin-top: var(--p-76-38); }
.medicine article > * + * { margin-top: var(--p-38-19);  }
.medicine article h2 + p, .medicine article p + p { margin-top: var(--p-19-9); }

.medicine article table { table-layout: fixed; /*text-align: center;*/ border-spacing: 8px; }
.medicine article th { text-wrap: balance; width: 2%; background: var(--blue); padding: 10px; }
.medicine article td { border-bottom: 2px solid var(--white); padding: 2px 10px 10px 10px; }

@media (max-width: 800px) {
  
  .medicine .packshot, .medicine article { max-width: 100%; }  
  .medicine article table tr:first-child { display: none; }
  .medicine article table { border-spacing: 0; }
  .medicine article table tr { display: block; padding: 10px 0; border-bottom: 2px solid var(--white); }
  .medicine article table tr:first-child + tr { border-top: 2px solid var(--white); }  
  .medicine article table td { display: grid; grid-template-columns: 1fr 1fr; padding: 0; border: 0; text-align: left; gap: 10px; }
  .medicine article table td::before { content: attr(data-label); }

}

.medicine-dosage { max-width: 1674px; width: 100%; margin: 0 auto; margin-top: var(--p-76-38); padding: var(--p-76-38) 0; background: var(--blue); border-radius: 30px; }
.medicine-dosage .header, .medicine-dosage .steps { max-width: 1434px; width: 90%; margin: 0 auto; }

.medicine-dosage .header { 
  display: flex; gap: var(--p-38-19) var(--p-76-38); 
  & h2 { flex: 1; }
  & p { flex: 2; }
}

.medicine-dosage .steps { display: flex; gap: var(--p-76-38); }
.medicine-dosage .step { flex: 1; }

.medicine-dosage .head { display: grid; justify-items: center; align-items: center; }
.medicine-dosage .head span, .medicine-dosage .head strong { grid-row: 1; grid-column: 1; }
.medicine-dosage .head span { font-size: clamp(9.375rem, 5.4318rem + 7.8864vw, 12.5rem);; font-weight: 700; opacity: 0.1; text-align: center; }
.medicine-dosage .head strong { font-size: var(--fs-22); text-align: center; }

.medicine-dosage .choose { display: flex; flex-direction: column; gap: var(--p-38-19); }
.medicine-dosage .product { 
  display: flex; align-items: center; background: rgba(31,112,183, 0.1); padding: var(--p-38-19); gap: var(--p-38-19); border-radius: 20px; cursor: pointer; transition: all 0.25s ease;
  &:hover { background: rgba(31,112,183, 1); transition: all 0.25s ease; }
  &.active { background: rgba(31,112,183, 1); }
}
.medicine-dosage .product .text, .medicine-dosage .product .img { flex: 1; }
.medicine-dosage .product .text { display: flex; flex-direction: column; }
.medicine-dosage .product .text .name { font-size: var(--fs-33); font-weight: 700; line-height: 1; }
.medicine-dosage .product .text .qtty { font-size: var(--fs-22); font-weight: 700; }
.medicine-dosage .product .text .qtty em { font-style: normal; font-size: var(--fs-18); }

.medicine-dosage .slider { display: flex; flex-direction: column; position: relative; padding-top: 50px; user-select: none; }
.medicine-dosage .pin { position: absolute; top: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap:0; width: 60px; cursor: pointer; }
.medicine-dosage .pin .txt { 
  grid-area: 1 / 1 / 2 / 2; display: flex; flex-direction: column; justify-content: center; align-items: center;
	position: relative; line-height: 1;
	& strong { text-align: center; font-size: var(--fs-15); color: var(--blue); }
	& .num { font-size: var(--fs-18); }
	& .measurement { margin-top: -3px; }
}
.medicine-dosage .pin .drop{
	grid-area: 1 / 1 / 2 / 2; background-color: var(--white); width: 100%; aspect-ratio: 1; border-radius:0% 100% 100% 100%; transform-origin: center center; transform: rotate(225deg);
}
.medicine-dosage .track { display: flex; justify-content: space-between; align-items: center; padding: var(--p-38-19) 25px var(--p-19-9); }
.medicine-dosage .track span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.medicine-dosage .track-minmax { display: flex; justify-content: space-between; align-items: center; }
.medicine-dosage .track-minmax div { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; line-height: 1.1; }
.medicine-dosage .track-minmax div span { font-size: var(--fs-22); font-weight: 700; }
.medicine-dosage .track-minmax div strong { font-size: var(--fs-15); }
.medicine-dosage .note { margin-top: var(--p-76-38); }

.medicine-dosage .result { 
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--p-76-38);
  background: var(--darkblue); border-radius: 30px; gap: var(--p-38-19); text-align: center;
}
.medicine-dosage .result strong { font-size: var(--fs-27); line-height: 1; }
.medicine-dosage .result span { font-size: var(--fs-22); text-wrap: balance; }

@media (max-width: 1300px) { 

  .medicine-dosage .steps { flex-wrap: wrap; }
  .medicine-dosage .step:last-child { width: 100%; flex: auto; }

}

@media (max-width: 800px) {

  .medicine-dosage .header { 
   flex-direction: column;
    & h2 { flex: auto; }
    & p { flex: auto; }
  }
  .medicine-dosage .steps { flex-direction: column; }
  .medicine-dosage .slider { padding-top: 70px; }

}


.faq { 
  width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-76-38);
  display: grid; grid-template-columns: repeat(2,1fr);  gap: 0 var(--p-114-38); 
}
.faq a { 
  display: block; font-size: var(--fs-27); font-weight: 700; padding-block: var(--p-38-19); text-decoration: none; 
  color: var(--white); border-bottom: 1px solid var(--white); transition: all 0.25s ease;
  &:hover { color: var(--blue); transition: all 0.25s ease; }
}

.faq-answer { 
  width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-76-38); 
  display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--p-38-19) var(--p-114-38);
}
.faq-answer article { flex: 1 1 50%; }
.faq-answer article p { font-size: var(--fs-22); font-weight: 400; }
.faq-answer article > * + * { margin-top: var(--p-19-9); }
.faq-answer article p + p, .faq-answer article h3 + p, .faq-answer article h2 + h3 { margin-top: var(--p-19-9); }
.faq-answer aside { flex: 1 1 50%; display: flex; flex-direction: column; }
.text-only article a { color: var(--blue); }
.faq-answer aside a { 
  display: block; font-size: var(--fs-22); font-weight: 700; padding-block: var(--p-19-9); text-decoration: none; 
  color: var(--white); border-bottom: 1px solid var(--white); transition: all 0.25s ease;
  &:hover { color: var(--blue); transition: all 0.25s ease; }
  &.active { color: var(--blue); border-bottom: 1px solid var(--blue); }
}

.text-only { width: 90%; max-width: 1434px; margin: 0 auto; margin-top: var(--p-76-38); }
.text-only article { max-width: 60%; }
.text-only article > * + * { margin-top: var(--p-38-19); }
.text-only article p + p, .text-only article h3 + p, .text-only article h2 + h3 { margin-top: var(--p-19-9); }
.text-only article a { color: var(--blue); }


@media (max-width: 800px) {

  .faq { display: block; }
  .faq-answer aside { display: none; }
  .text-only article { max-width: none; }

}


footer { background: var(--blue); margin-top: var(--p-114-38); }
footer .wrapper { 
  width: 90%; max-width: 1434px; margin: 0 auto; padding: var(--p-76-38) 0; 
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: auto auto;
  gap: var(--p-76-19); grid-auto-flow: row;
  grid-template-areas:
    "lupocet lupocet text text text text belupo belupo"
    "links links links links links links links links";
}
footer .lupocet { grid-area: lupocet; }
footer .lupocet img { width: 200px; }
footer .text { grid-area: text; font-size: var(--fs-27); text-align: center; text-wrap: balance; }
footer .belupo { grid-area:belupo; justify-self: end; }
footer .belupo img { width: 200px; }
footer .links { grid-column: links; display: flex; justify-content: center; gap: var(--p-38-19); }
footer .links a { 
  position: relative; color: var(--white); text-decoration: none; padding-bottom: 7px;
  &::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--white); transform: scaleX(0); transition: all 0.25s ease-in-out; }
  &:hover::after { transform: scaleX(100%); transition: all 0.25s ease-in-out; }
}

@media (max-width: 1300px) { 

  footer .wrapper {
    grid-template-columns: repeat(6, 1fr); 
    grid-template-areas:
      "lupocet text text text text belupo"
      "links links links links links links";
  }

}

@media (max-width: 600px) { 
  
  footer .wrapper { 
    grid-template-columns: repeat(2, 1fr);  grid-template-rows: auto auto auto;
    grid-template-areas:
      "text text"
      "lupocet belupo"
      "links links";
  }
  footer .text { text-align: left; }
  footer .links { flex-direction: column; }
  footer .belupo { justify-self: left; }
  footer img { max-width: 130px; }

}



.hidden,[hidden] { display: none !important;}
.visually-hidden { border: 0;  clip: rect(0, 0, 0, 0);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  white-space: nowrap;  width: 1px;}
.visually-hidden.focusable:active,.visually-hidden.focusable:focus {  clip: auto;  height: auto;  margin: 0;  overflow: visible;  position: static;  white-space: inherit;  width: auto;}
.invisible { visibility: hidden;}
.clearfix::before,.clearfix::after { content: "";  display: table;}
.clearfix::after { clear: both;}

@media print {
  *,  *::before,  *::after { background: #fff !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
  a,a:visited {text-decoration: underline;}
  a[href]::after {content: " (" attr(href) ")";}
  abbr[title]::after {content: " (" attr(title) ")"; }
  a[href^="#"]::after,a[href^="javascript:"]::after {content: "";}
  pre {white-space: pre-wrap !important;}
  pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
  tr,img {page-break-inside: avoid;}
  p,h2,h3 {orphans: 3;widows: 3;}
  h2,h3 {page-break-after: avoid;}
}

.cookie-policy {
  position: fixed; z-index: 999999999; left: 0; top: 0; background-color: rgba(57,91,106,0.85) !important;
  width: 100vw; height: 100vh; display: flex; align-items: flex-end; justify-content: flex-end;
}
.cookie-policy form { max-width: 700px; padding: 60px 100px; background-color: var(--blue); }
.cookie-policy form * { color: var(--white); }
.cookie-policy form > * + * { margin-top: 30px; }
.cookie-policy form h3 { color: var(--white); }
.cookie-policy form a { display: inline-block; text-decoration: underline; }
.cookie-policy button { 
  display: inline-block; color: var(--white); border: 1px solid var(--white); background-color: transparent;
  height: 60px; border-radius: 30px; padding: 0 30px; margin-right: 15px; cursor: pointer;
  font-family: var(--sans); font-style: normal; font-weight: 700; font-size: var(--fontSize-16-18); line-height: 1; font-variant: small-caps; letter-spacing: 0.1em;
}

@media only screen and (max-width: 1025px) {
  .cookie-policy form { padding: 50px 20px; }
  .cookie-policy form p { line-height: 1.2 }
}