/* Main settings for body */
:root {
  --sm-space: 2rem;
  --md-space: 3rem;
  --purple: #F592FC;
  --purple-text: #943678;
  --fon: #FFFFED;
  --card-color: rgba(99, 80, 80, 0.3);
  --gold: #CCC093;
  --yellow-button: #D0BD73;
  --rose-button: #D18ABC;
  --border-yellow-button: #b39b3b;
    /* color-scheme: dark light; */
}
/* Cookies styles */
#cookieModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: var(--fon);
  margin: 200px auto auto auto;
  padding: 20px 20px 20px 40px;
  border: 1px solid #888;
  width: 90%;
  text-align: left;
  border-radius: 1ch;
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
}
@media only screen and (max-width: 600px) {
  .modal-content {
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
  }
 }
 .modal-content p{
  line-height: 44px;
  line-height: 1;
}
#acceptCookiesBtn {
  display: flex;
  margin-left: auto;
  margin-right: 20px;
  justify-content: center;
  vertical-align: middle;
  max-width: 200px;
  width: 100%;
  height: 50px;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 42px;
  text-align: center;
  color: rgb(35, 32, 22);
  border: 0;
  border-radius: 15px;
  background-color: var(--gold);
  box-shadow: 2px 0px 16px 7px rgba(66, 59, 31, 0.31) inset;
  -webkit-box-shadow: 2px 0px 16px 7px rgba(66, 59, 31, 0.31) inset;
  -moz-box-shadow: 2px 0px 16px 7px rgba(66, 59, 31, 0.31) inset;
}
#acceptCookiesBtn:hover {
background-color: var(--black-gold);
}
@media only screen and (max-width: 600px) {
  #acceptCookiesBtn {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }
 }
/* /////////////// */
.modal{
  position: absolute;
  border: 0;     
  min-width: 50%; 
  max-width: 700px;
  /* width: 700px; */
  width: 50%; 
  background-color: transparent;
  overflow: hidden;
  max-height: 900px;
  height: 900px;
  left: 20px;
  top: 110%;
  padding: .5em 1em;
}
.modal:before {
  content: " ";
  position: fixed;
  left: 0;
  top: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0,0,0,0.3);
  z-index: -1;
  }
.app{
  position: relative;
  min-height: 100dvh;
  font-family: "Lato", sans-serif;
} 
.app{
  background-color: var(--fon);
}
@font-face {
font-family: "kanyon";
src: url("https://sametised-kaed.eu/foonts/Kanyon-Light.woff") format("woff");
font-display: fallback;
src: url("https://sametised-kaed.eu/foonts/kanyon/WEB/Kanyon-Light/Kanyon-Light.eot?#iefix") format("embedded-opentype"), url("https://sametised-kaed.eu/foonts/kanyon/WEB/Kanyon-Light/Kanyon-Light.svg")
  format("svg"), url("https://sametised-kaed.eu/foonts/kanyon/WEB/Kanyon-Light/Kanyon-Light.woff") format("woff"), url("https://sametised-kaed.eu/foonts/kanyon/TTF/kanyon-light.ttf")
  format("truetype");
  font-weight: lighter;
  font-style: normal;
}
h1, h2, h3, select, .footer-text{
  font-family: "kanyon";
}
.menu-box{
  position:fixed;
  display: flex;
  flex-direction: row;
  width: 100svw;
  max-width: 100svw;
  overflow-x: hidden;
  overflow-y: auto; 
  max-height: 11.5dvw;
  min-height: 11.5dvw;
  height: 11.5dvw;
  top: 0;
  margin-bottom: auto;
  background: transparent;
  align-items: center;
  justify-content: space-between;
  z-index: 4;
  opacity: 0;
  transition: 2s;
  animation: show 7s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.menu__bg__start {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: 11.5dvw;
    min-height: 11.5dvw;
    height: 11.5dvw;
    background-color: rgb(255, 255, 255, 0.7);
    -webkit-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 4px 8px 0px rgba(34, 60, 80, 0.2);
    z-index: 2;
  }
  .menu__bg{
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: 11.5dvw;
    min-height: 11.5dvw;
    height: 11.5dvw;

    background-color: var(--fon);
    z-index: 3;
  }
  .menu__bg:before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 85px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    height: 2px;
    background-color: transparent;
  }
  .logo-box{
    height: 11.5dvw;
    max-height: 11.5dvw;
    margin-left: 7dvw;
  }
  @media only screen and (max-width: 600px) {
  .logo-box {
    margin-left: 12dvw;
    }
  }
  @media only screen and (max-width: 600px) {
    .menu-box, .menu__bg__start, .menu__bg, .logo-box {
      max-height: 25dvw;
      min-height: 25dvw;
      height: 25dvw;
    }
  }
  .logo{
    max-height: inherit;
    height: inherit;
    object-fit: contain;
    width: auto;
    max-width: inherit;
  }
  .select{   
    min-width: 11.5dvw;
    font-size: 1.7rem;
    text-align: center;
    margin-right: 10%;
  }
  #standard-select{
    background-color: transparent;
    border: none;
  }
/* svg */
  path{
    transition: transform 0.25s;
  }
  .active path:nth-of-type(1){
    transform: rotate(45deg);
    transform-origin: -1px 3px;
  }
  .active path:nth-of-type(2){
    display: none;
  }
  .active path:nth-of-type(3){
    transform: rotate(-45deg);
    transform-origin: 0px 13px;
  }
.top-panel {
  background: var(--fon);
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
/* Menu message */
.message {
  display: flex;
  flex-direction: row;
  font-weight: 300;
  position: relative;
  padding: 1em;
  margin: 0 auto 0 0;
  max-width: 980px
}
@media only screen and (max-width: 600px) {
  .message {
    flex-direction: column;
  }
}
.message div{
  margin: 0 4%;
}
.message div:nth-child(1),
.message div:nth-child(2){
  margin-top: 15px;
}
.message ul li{
  list-style-type: none;
  color: black;
}
.message a {
  color: black;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.message a:visited{
  text-decoration: none;
  color: var(--purple-text);
}
.message a:hover,
.message a:active{
  text-decoration: underline;
}
.open {
  clip: rect(0 0 0 0);
  opacity: 0;
  min-width: 100%;
  width: 100%;
}
/* Menu button */
label.btn {
  position: relative;
  min-width: 90px;
  width: 90px;
  max-width: 90px;
  right: 7dvw;
  cursor: pointer;
  color: #fff;
  font-size: 100%;
  line-height: 2em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;  
  height: 90px;
}
@media only screen and (max-width: 600px) {
  label.btn{
    right: 12dvw;
  }
}
label.btn > span,
label.btn > span::before
{
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: black;
  border: 1px solid black;
  border-radius: 35%;
}
label.btn > span::before {
  content: '';
  top: -12px;
  max-width: 40%;
  right: 0;
}
.open:checked ~ .btn > span {
  transform: rotate(45deg);
  top: 50%;
  left: 10%;
  margin: 0;
  width: 80%;
}
.open:checked ~ .btn > span::before {
  position: absolute;
  top: 0;
  margin: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  transform: rotate(90deg);
}
/* .open:checked ~ .btn > span::after {
  top: 0;
  transform: rotate(90deg);
} */
/* #open:checked ~ .menu__box {
  visibility: visible;
  left: 0;
} */
/* Переключатель при наведении */
label.btn:hover {
  -webkit-transition: 0.35s;
  -moz-transition: 0.35s;
  transition: 0.35s;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}
.open:checked ~ .top-panel {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.35s;
  -moz-transition: 0.35s;
  transition: 0.35s
}
.open:not(:checked) ~ .top-panel {
  -webkit-transition: 0.35s;
  -moz-transition: 0.35s;
  transition: 0.35s
}
/* Цвет переключателя при клике */

/* .open:checked ~ .top-panel > label.btn {
  background: #dd6149
} */
/* Стрелка переключателя вверх*/
/* 
.open:checked ~ .top-panel > label.btn:after {
  content: '\f077';
  font: normal 18px/1 FontAwesome
} */

  /* box1 */
  .mere{
    position: relative;
    z-index: 0;
    background-image: url(https://sametised-kaed.eu/images/Mere-with-lungs.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -11.5dvw; 
    background-position: center;
    width: 100dvw;
    min-height: 48dvmax;
    height: auto;
    overflow-x: hidden;
  }
  @media only screen and (min-width: 1500px) {
    .mere {
        min-height: 55dvw;
    }
  }
  @media only screen and (max-width: 1200px) {
    .mere {
      background-image: url(https://sametised-kaed.eu/images/Mere.png);
      background-position: top;
      min-height: 50dvw;
      height: 50dvw;
      margin-top: 0; 
    }
  }
  @media only screen and (max-width: 1000px) {
    .mere {
      min-height: 60dvw;
      height: 60dvw;
    }
  }
  @media only screen and (max-width: 600px) {
    .mere {
      min-height: 85dvw;
      height: 85dvw;
    }
  }
  @media only screen and (max-width: 500px) {
    .mere {
      min-height: 106dvw;
      height: 106dvw;
    }
  }
  @media only screen and (max-width: 400px) {
    .mere {
      min-height: 125dvw;
      height: 125dvw;
    }
  }
  .text-box{
    position: absolute;
    z-index: 1;
    display: flex;
    top: 3.7%;    
    width: 100%;
    justify-content: center;
    flex-direction: column;
  }
  @media only screen and (max-width: 1300px) {
    .text-box {
      top: 3%;
    }
  }
  @media only screen and (max-width: 1000px) {
    .text-box {
      top: 2.5%;
    }
  }
  @media only screen and (max-width: 900px) {
    .text-box {
      top: 2.3%;
    }
  }
  @media only screen and (max-width: 600px) {
    .text-box {
      top: 4%;
    }
  }
  .h1-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  @media only screen and (max-width: 600px) {
    .h1-box{
      flex-direction: column;
    }
  }
    @keyframes show{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    @keyframes rotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(180deg);
      }
    }
    @keyframes view {
      0% {
        scale: 0;
        opacity: 0;
        transform: translateY(0);
      }
      100% {
        scale: 1;
        position: relative;
        z-index: 2000;
        background-color: var(--fon);
        opacity: 1;
        transform: translateY(30px);
      }
    }
    h1 {
      font-size: 12rem;
      letter-spacing: 0.6rem;
      font-weight: lighter;
      text-align: center;
      margin-left: 3.5dvw;
      color: white;
      opacity: 0;
      transition: 2s;
      animation: show 9s 1;
      animation-fill-mode: forwards;
      animation-delay: 0.5s;
      text-transform: uppercase;
    }
    @media only screen and (max-width: 600px) {
      h1 {
        margin-left: 0;
        font-size: 7.5rem;
        letter-spacing: 0.4rem;
        margin-top: 2%;
      }
    }
    h1 + span{
      font-family: "Lato", sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.05rem;
      vertical-align: middle;
      font-weight: bold;
      font-style: normal;
      color: white;     
      margin-top: 6dvw;
      opacity: 0;
      transition: 2s;
      animation: show 9s 1;
      animation-fill-mode: forwards;
      animation-delay: 0.5s;
      text-transform: uppercase;
    }
    @media only screen and (max-width: 600px) {
      h1 + span{        
        margin-left: auto;
        margin-right: auto;
        font-size: 0.9rem;
        margin-top: -2%;
        margin-bottom: 5%;
      }
    }
    h2{
      text-align: center;
      text-transform: uppercase;
      font-size: 4.5rem;
      letter-spacing: 0.24rem;
      font-weight: lighter;
      line-height: 1.95;
      color: var(--purple-text);
    }
    @media only screen and (max-width: 600px) {
      h2 {
        font-size: 3rem;
        letter-spacing: 0.2rem;
        line-height: 2.5;
      }
    }
    h3 {
      font-size: 2.9rem;
      letter-spacing: 0.1rem;
      line-height: 0.1rem;
      font-weight: lighter;
      text-align: center;
      color: var(--purple);
      opacity: 0;
      transition: 2s;
      animation: show 7s 1;
      animation-fill-mode: forwards;
      animation-delay: 0.8s;
    } 
    @media only screen and (max-width: 600px) {
      h3{
        font-size: 2rem;
        letter-spacing: 0.11rem;
        margin-top: 3%;
        line-height: 2rem;
      }
    }
    .white-button{
      width: calc(var(--sm-space) * 12);
      height: calc(var(--sm-space) * 2.5);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      border-radius: 1ch;
      border: 2px solid var(--border-yellow-button);
      margin-left: auto;
      margin-right: auto;
      z-index: 5;
      background-color: var(--yellow-button);
      margin-top: 7.8%;
      opacity: 0;
      transition: 2s;
      animation: show 7s 1;
      animation-fill-mode: forwards;
      animation-delay: 2s;
      color: black;
    }
    .white-button:hover{
      background-color: var(--purple);
      color: black;
      border: none;
      animation-delay: 0.1s;
      transition: 0s; 
    }
    @media only screen and (max-width: 600px) {
      .white-button{
        margin-top: 14%;
        font-size: 1.2rem;
      }
    }
     /* carousel */
    .slider-box-1, .slider-box-2{
      background-color: var(--fon);
      min-width: 100%;
      padding-bottom: 6.5%;
    }    
 .main-box{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
 }
/*--------------------------- box-1 ------------------ */
html{
  font-size: 100%;
} 
@media only screen and (min-width: 1400px) {
  html {
      font-size: 110%;
  }
}
@media only screen and (max-width: 1000px) {
  html {
      font-size: 80%;
  }
}
@media only screen and (max-width: 800px) {
  html {
      font-size: 60%;
  }
}
@media only screen and (max-width: 600px) {
  html {
      font-size: 80%;
  }
}
@media only screen and (max-width: 400px) {
  html {
      font-size: 0.7rem;
      font-size: 70%;
  }
}
section {
  --gap: var(--md-space);
  display: grid;
  grid-gap: var(--gap);
  gap: var(--gap);
  margin-left: auto;
  margin-right: auto;
}
.slider-box-1   section {
  border: 1px solid black;
  border-radius: 1ch;
}
@media only screen and (max-width: 600px) {
  .slider-box-1   section {
    border: none;
  }
}
.slider-box-1 section{
  max-width: 86dvw;
  width: 86dvw;
}
@media only screen and (max-width: 600px) {
  .slider-box-1 section {
    max-width: 95dvvw;
    width: 95dvw;
  }
}
.arrow-back{
  position: absolute;
  width: 2.4dvw;
  height: auto;
  left: -8%;
  top: 43%;
  filter: invert(12%) sepia(4%) saturate(6934%) hue-rotate(318deg) brightness(96%) contrast(82%);
}
.arrow{
  position: absolute;
  width: 2.4dvw;
  height: auto;
  right: -8%;
  transform: rotate(180deg);
  top: 43%;
  filter: invert(12%) sepia(4%) saturate(6934%) hue-rotate(318deg) brightness(96%) contrast(82%);
}
.arrow-back:hover,.arrow:hover {
  filter: invert(66%) sepia(82%) saturate(783%) hue-rotate(242deg) brightness(112%) contrast(99%);
}
@media only screen and (max-width: 600px) {
  .arrow-back {
    width: 6dvw;
    left: -10%;
    overflow-y: visible;
  }
}
@media only screen and (max-width: 600px) {
  .arrow {
    width: 6dvw;
    right: -10%;
  }
}
/* section > header { 
    padding-left: var(--gap); 
    padding-right: var(--gap);
    display: grid;
    grid-gap: calc(1rem / 2);
    gap: calc(1rem / 2);
    grid-gap: calc(var(--sm-space) / 2);
    gap: calc(var(--sm-space) / 2)
  } */
/* section > header > :is(h2,h3) {
      margin: 0;
    } */
.horizontal-media-scroller-1{
  --size: 69dvw;
  display: grid;
  grid-auto-flow: column;
  grid-gap: calc(var(--gap) / 5);
  gap: calc(var(--gap) / 5);
  margin: 0;
  padding-left: var(--gap);
  padding-right: var(--gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -ms-scroll-snap-type: inline mandatory;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--gap);
  -ms-overflow-style: none;  /* IE и Edge */
  scrollbar-width: none;  /* Firefox */
}
@media only screen and (max-width: 600px) {
  .horizontal-media-scroller-1  {
    --size: 140dvw;
  }
}
.horizontal-media-scroller-1::-webkit-scrollbar {
  display: none;
}
.horizontal-media-scroller-1 > ul{
  max-height: var(--gap);
}
.horizontal-media-scroller-1 > li {
    display: inline-block;
    margin-left: calc(var(--gap)*3);
    margin-right: calc(var(--gap)*3);
    margin-top: calc(var(--size)/9);
    margin-bottom: calc(var(--size)/9);
    /*  container padding fix  */
  }
  @media only screen and (max-width: 600px) {
    .horizontal-media-scroller-1 > li {
      margin-top: 0;
    }
  }
.horizontal-media-scroller-1 > li:last-of-type figure {
      position: relative;
    }

[dir="ltr"] .horizontal-media-scroller-1 > li:last-of-type figure::after {
        right: calc(var(--gap) * -1);
}

[dir="rtl"] .horizontal-media-scroller-1 > li:last-of-type figure::after {
        left: calc(var(--gap) * -1);

}
.horizontal-media-scroller-1 > li:last-of-type figure::after {
  content: "";
  position: absolute;
  width: var(--gap);
  height: 100%;
  top: 0;
  right: calc(var(--gap) * -1);
}
figure {
  scroll-snap-align: center;     
}
.horizontal-media-scroller-1 > a ,
.card-href {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    scroll-margin-top: 14dvw;
  }
  @media only screen and (max-width: 600px) {
    .horizontal-media-scroller-1 > a, .card-href {
      scroll-margin-top: 23dvw;
  }
  }
.card-href:focus {
  /* scroll-padding-top: -11.5dvw; */
  /* scroll-margin-block: 11.5dvw; */
  /* scroll-padding-top: 11.5dvw; */
      /* outline-offset: calc(var(--gap) / 8);
      transition: 1s;
      animation: view 1.5s 1;
      animation-fill-mode: forwards;
      animation-delay: 0.5s; */
    }
@media (prefers-reduced-motion: no-preference) {
      .card-href {
        transition: outline-offset .25s ease;
      }
    }
figure {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none
}
.horizontal-media-scroller-1 figure > picture {
    width: calc(var(--size)/2);
    max-height: calc(var(--size)/2);
  }
  .picture-box-1{
    width: calc(var(--size)/2);
    min-width: calc(var(--size)/2);
  }
  @media only screen and (max-width: 600px) {
    .picture-box-1 {
      display: none;
    }
  }

  .img-scroller-1{
    width: 100%;
    height: 100%;
    min-height: 34dvw;
    /* padding: 30%; */
    padding: 0%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 1ch;
    border: 1px solid black;
  }

.figcaption-box{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: calc(var(--size)/2);
  max-width: calc(var(--size)/2);
  max-height: calc(var(--size)/2);
  border: solid 1px black;
  border-radius: 1ch;
  display: flex;
  align-items: center;
  padding: 4dvw;   
  background-color: var(--card-color);
  text-align: center;
  color: black;
}
@media only screen and (max-width: 600px) {
  .figcaption-box {
    min-height: calc(var(--size) - 15dvw);
    border: none;
  }
}

@media only screen and (max-width: 510px) {
  .figcaption-box {
    min-height: calc(var(--size) - 2dvw) ;
  }
}

@media only screen and (max-width: 400px) {
  .figcaption-box {
    min-height: calc(var(--size) - 16px);
  }
}

figure > .figcaption-box > figcaption {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 0.5;
  white-space: nowrap;
  color: var(--purple-text);
  margin-top: 3%;
}

@media only screen and (max-width: 800px) { 
figure > .figcaption-box > figcaption {
  font-size: 1.4rem;
  }
}

@media only screen and (max-width: 600px) { 
  figure > .figcaption-box > figcaption {
    font-size: 1.8rem;
    margin-top: 17%;
    }
  }

  .img-figcaption-box{
    display: none;
  }

  @media only screen and (max-width: 600px) { 
    .img-figcaption-box {
      display: block;
      width: 80%;
      height: auto;
      height: 40%;
      object-position: center;
      object-fit: contain;
      margin: 0%;
      }
    }

  .card-text{
  margin-top: 6%;
  font-size: 0.7rem;
  font-weight: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 800px) { 
  .card-text{
    font-size: 0.8rem;
    }
  }

@media only screen and (max-width: 700px) { 
    .card-text{
      font-size: 0.7rem;
      }
    }

@media only screen and (max-width: 600px) { 
  .card-text{
    max-width: 86%;
    font-size: 1rem;
    margin-top: 1%;
    }
  }

  @media only screen and (max-width: 460px) { 
    .card-text{
      font-size: 0.9rem;
      }
    }

    @media only screen and (max-width: 415px) { 
      .card-text{
        font-size: 0.8rem;
        }
      }

  /* Hide the toggle checkbox */
.expand-toggle {
  display: none;
}

/* Style the button */
.expand-btn {
  position: absolute;
  top: 35%;
  display: flex;
  font-size: 0.7rem;
  border-radius: 0.8ch;
  border: 1px solid black;
  background-color: transparent;
  padding: 5px 15px 5px 15px;
  align-items: center; 
}

@media only screen and (max-width: 600px) { 
  .expand-btn{
    top: 60%;
    }
  }

  @media only screen and (max-width: 500px) { 
    .expand-btn{
      top: 58%;
      }
    }

 .expand-btn-hidden{
  display: none;
  margin-top: -25px;
  font-size: 0.7rem;
  border-radius: 0.8ch;
  border: 1px solid black;
  padding: 5px 32px 5px 32px;
  align-items: center; 
  background-color: rgb(249, 249, 164);
 }

.expand-toggle:checked +  p{
  display: flex;
  flex-wrap: wrap;
  height: auto;
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* Style the button when the checkbox is checked */
.expand-toggle:checked ~ .expand-btn {
  position: relative;
  margin-top: 10px;
  top: 0;
  opacity: 0;
}

/* Show hidden content when the checkbox is checked */
.expand-toggle:checked ~ .expand-btn-hidden{
  display: block;
}

/* Hide content when the checkbox is checked */
.expand-toggle:checked ~ h6, .expand-toggle:checked ~ .contraindication, .expand-toggle:checked ~ .price{
  display: none;
}

h6{
  font-size: 0.9rem;
  position: absolute;
  top: 38%;
}

.footer-h6{
  position: relative;
  font-weight: normal;
  line-height: 1;
}

@media only screen and (max-width: 900px) { 
  h6 {
    top: 36%;
    }
  }

@media only screen and (max-width: 600px) { 
  h6 {
    font-size: 1.2rem;
    line-height: 1;
    top: 60%;
    }
  }
  @media only screen and (max-width: 500px) { 
    h6 {
      font-size: 1.2rem;
      line-height: 1;
      top: 57%;
      }
    }

h6 + p{
  position: absolute;
  top: 52%;
  display: flexbox;
  font-size: 0.7rem;
  font-weight: normal;
  word-break: break-word;
  max-width: 38%;
}

@media only screen and (max-width: 800px) { 
  h6 + p{
    font-size: 0.6rem;
    }
  }

@media only screen and (max-width: 600px) { 
  h6 + p{
    font-size: 1rem;
    top: 68%;
    max-width: 80%;
    }
  }

  @media only screen and (max-width: 500px) { 
    h6 + p{
      font-size: 1rem;
      top: 66%;
      }
    }
    @media only screen and (max-width: 460px) { 
      h6 + p{
        font-size: 0.9rem;
        }
      }

      @media only screen and (max-width: 415px) { 
        h6 + p{
          font-size: 0.8rem;
          }
        }

.price{
  position: absolute;
  top: 60%;
  font-weight: bold;
  font-size: 0.8rem;
}

  @media only screen and (max-width: 600px) { 
    .price {
      font-size: 1.05rem;
      top: 73%;
    }
  }

.price + object{
  width: 38%;
  position: absolute;
  bottom: 12%;
}

@media only screen and (max-width: 600px) { 
  .price + object {
    width: 80%;
    margin-top: 0;
    font-size: 1.1rem;
    bottom: 10%;
  }
}
.card-button{
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 9% 36%; */
  width: calc(var(--sm-space) * 12);
  height: calc(var(--sm-space) * 2.5);
  max-width: 100%;
  border-radius: 1ch;
  border: 1px solid var(--purple-text);
  margin-left: auto;
  margin-right: auto;
  z-index: 5;
  background-color: var(--rose-button);
  color: black;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.card-button:hover{
  background-color: var(--purple);
}
/*--------------------------- box-2 ------------------ */

.slider-box-2{
  min-width: 100%;
  padding-bottom: 10%;
  background-image: 
  linear-gradient(
    157.67deg, #1A1218 3.24%, #665756 97.35%
  );
}
.slider-box-2 h2, .map-box h2{
  font-size: 5.5rem;
  color: white;
  /* margin-top: 7%; */
  margin-top: 2%;
}
.slider-box-2 section{
  max-width: 98dvw;
  width: 98dvw;
  --gap: var(--md-space);
  display: grid;
  grid-gap: var(--gap);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.slider-box-2 section::before{
  content: "";
  background-image: url(https://sametised-kaed.eu/images/Patern1.svg);
  position: absolute;
  margin-top: -19%;
  width: 30dvw;
  height: 30dvw;
  background-size: cover;
  left: 6.5%;
  overflow: hidden;
  overflow-y: hidden;
}
.slider-box-2 section::after{
  content: "";
  background-image: url(https://sametised-kaed.eu/images/Patern2.svg);
  position: absolute;
  margin-top: 50%;
  margin-right: 3%;
  width: 30dvw;
  height: 30dvw;
  background-size: cover;
  right: 0;
  overflow: hidden;
  z-index: -1;
}
.horizontal-media-scroller-2 {
  text-align: center;
  --size-2: 98dvw;
  display: grid;
  grid-auto-flow: column;
  grid-gap: calc(var(--gap)  * 8);
  gap: calc(var(--gap)  * 2);
  margin: 0;  
  padding-left: var(--gap);
  padding-right: var(--gap);
  padding-bottom: calc(var(--gap) / 8);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -ms-scroll-snap-type: inline mandatory;
  scroll-snap-type: inline mandatory;
  -ms-overflow-style: none; 
  scrollbar-width: none;  

}
.ha-clickable-area {
  position: var(--ha-clickable-area-position, relative);
  isolation: isolate;
}
.ha-clickable-area::before {
  content: "";
  position: absolute;
  margin-top: 1rem;
  inset: calc(-3 * var(--ha-clickable-area-expandable-ratio));
  z-index: -1;
}
.arrow-back-2-p{
  position: absolute;
  display: flexbox;
  left: 5%;
  top: 50%;
  z-index: 2000;
}
.arrow-back-2{
  width: 2.4dvw;
  height: auto;
  filter: invert(93%) sepia(7%) saturate(1237%) hue-rotate(3deg) brightness(95%) contrast(87%);
}
.arrow-2-p{
  position: absolute;
  display: flexbox;
  right: 5%;
  top: 50%;
  z-index: 2000;
}
.arrow-2-link{
  z-index: 2000;
  --ha-clickable-area-expandable-ratio: 0.75rem;
  width: 2rem;
  height: 2rem; 
}
.arrow-2{ 
  width: 2.4dvw;
  height: auto;
  transform: rotate(180deg);
  filter: invert(93%) sepia(7%) saturate(1237%) hue-rotate(3deg) brightness(95%) contrast(87%);
}
.arrow-back-2:hover, .arrow-2:hover{
  filter: invert(82%) sepia(49%) saturate(3772%) hue-rotate(223deg) brightness(101%) contrast(97%);
}
.yellow-button-box{
  /* --size-2: 98dvw; */
  /* --width: calc(var(--size-2)/2); */
  /* width: var(--width); */
  max-width: var(--width);
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10%;
}
.yellow-button{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: calc(var(--sm-space) * 12);
  height: calc(var(--sm-space) * 2.6);
  white-space: nowrap;
  border-radius: 1ch;
  border: 2px solid var(--border-yellow-button);
  background-color: var(--yellow-button);
  animation-fill-mode: forwards;
  animation-delay: 1s;
  color: black;
  position: relative;
  z-index: 1;
}
.yellow-button:hover{
  background-color: var(--purple);
}
@media only screen and (max-width: 600px) { 
  .yellow-button-box {
    margin-top: -15dvw;
  }
}
.horizontal-media-scroller-2::-webkit-scrollbar {
  display: none;
}
.horizontal-media-scroller-2 > li {
  display: flex;
  margin-right: auto; 
  margin-left: auto;
  align-items: center;
  margin-top: -6dvw;
  margin-bottom: calc(var(--size-2)/9);
  text-align: center;
  align-self: center;
  justify-self: center;  
  }
  .horizontal-media-scroller-2 > a, .picture-href {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .horizontal-media-scroller-2 > a:focus {

      }
  @media (prefers-reduced-motion: no-preference) {
        .horizontal-media-scroller-2 > a { 
        
        }
      }
.horizontal-media-scroller-2 > li:last-of-type figure {
      position: relative;
      z-index: 1000;
    }
[dir="ltr"] .horizontal-media-scroller-2 > li:last-of-type figure::after {
  right: calc(var(--gap) * -1);   
}
[dir="rtl"] .horizontal-media-scroller-2 > li:last-of-type figure::after {
  left: calc(var(--gap) * -1);
}
.horizontal-media-scroller-2 > li:last-of-type figure::after {
  content: "";
  position: absolute;
  width: var(--gap);
  height: 100%;
  top: 0;
  right: calc(var(--gap) * -1);
}
.horizontal-media-scroller-2 figure {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.horizontal-media-scroller-2 figure > picture {
    width: var(--size-2);
    height: auto;
    display: flex;
    align-items: center;
  }
  .horizontal-media-scroller-2 figure > picture > img{
    margin: 15%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid transparent;
    border-radius: 1ch;
  } 
  @media only screen and (max-width: 600px) { 
    .horizontal-media-scroller-2 figure > picture > img{
      width: 70%;
    } 
  }  
  .gift-card{
    width: 86dvw;
    border: 1px solid black;
    border-radius: 1ch;
    box-sizing: border-box;
    --gap: var(--md-space);
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-bottom: 8%;
  }
  .gift-box{
    margin: 0;
    background-color: var(--fon);
  }
  .gift-container{
    display: inline-flex;
    justify-content: center;   
    margin-top: 7dvw;
    margin-bottom: 7dvw;
  }
  .gift, .gift-back{
    -o-object-fit: contain;
    object-fit: contain;
    overflow: hidden;
    width: 34dvw;
    max-width: 34dvw;
    height: auto;
    border: 1px solid black;
    border-radius: 1ch;
    padding: 11% 7% 11%;
  }
  .gift{
    background-color: var(--card-color);
  }
  .ellipse{
    display: none;
  }
  .gift-button{
    display: none;
  }
  .gift-mobile-box{
    position: absolute;
    width: 100%;
    display: flex;
    place-items: center;
    max-height: 100%;
  }
  .gift-text{
    position: absolute;
    place-items: center;
    display: flex;
    width: 15%;
    height: auto;
    margin-top: 33%;
    margin-left: 60%;
  }
  h5{
    color: var(--purple-text);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
  }
  @media only screen and (max-width: 600px) { 
    .gift-card{
      border: none;
      width: 66dvw;
      max-width: 66dvw;
      margin-top: -7%;
      margin-bottom: 0;
    }
    .gift-container{
      display: flex;
      flex-direction: column;
      place-items: center;
    }
    .gift{
      width: 70dvw;
      max-width: 70dvw;
      margin-left: auto;
      margin-right: auto;
      padding: 45% 10% 45%;
    }
    .gift-back {
      display: none;
    }
    .gift-mobile-box{
      position: absolute;
      flex-direction: column;
      margin-top: -10%;
      justify-content: space-between;
      display: flex;
      place-items: center;
      width: auto;
      height: calc(66dvw * 1.35);
    }
    .ellipse{
      display: block;
      min-width: 26dvw;
      height: 26dvw;
    }
    .gift-text{      
      height: auto;
      width: auto;
      margin-left: auto;
      margin-top: auto;
      margin-top: 15%;
    }
    .gift-button{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      height: calc(var(--sm-space) * 2.5);
      width: 56dvw;
      max-width: 56dvw;
      left: 50%;
      transform:translate(-50%, 0); 
      border-radius: 1ch;
      border: 1px solid var(--purple-text);
      text-decoration: none;
      background-color: var(--rose-button);
      color: black;
      font-weight: 500;
    }
    .gift-button:hover{
      background-color: var(--purple);
    }
  }
    /* map */
    .map-box{
      background-image: linear-gradient( 157.67deg, #1A1218 3.24%, #665756 97.35% );
      width: 100%;
    }
    .map-container{
      display: flex;
      flex-direction: column;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5dvw;
    }
    .map{
      width: 135.5%;
      min-width: 135.5%;
      height: auto;
      margin-top: -45%;
      margin-bottom: -35%;
      margin-left: -17.5%;
      /*     */
      object-position: center;
      object-fit: cover;
      /* margin-left: auto;
      margin-right: auto; */
      overflow: hidden;
    }

    /* .house{
      margin-top: 5dvw;
    } */
    .map-text{
      color: white;
      margin: 10% 0 18%;
    }
    .map-text a{
      text-decoration: none;
      color: white;
    }
    /* reviews */
    .slider-box-3{
      width: 86dvw;
      box-sizing: border-box;
      --gap: var(--md-space);
      display: grid;
      grid-gap: var(--gap);
      gap: var(--gap);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 8%;
      background-color: var(--fon);
      place-items: center;
    }
    .slider-box-3 h2{
      margin-bottom: -4%;
    }
      .slider-box-3 section{
        justify-content: center;   
        --gap: var(--md-space);
        display: grid;
        grid-gap: var(--gap);
        gap: var(--gap);    
        margin-left: auto;
        margin-right: auto; 
        border: 1px solid black;
        border-radius: 1ch;
        padding: 8dvw;
      }
      @media only screen and (max-width: 600px){
        .slider-box-3{
          margin-bottom: 6%;
        }
        .slider-box-3 section{
          padding: 0dvw;
          border: none;
          margin-top: -7%;
          margin-bottom: 0;
        }
      }
      .horizontal-media-scroller-3{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: var(--card-color);
        border-radius: 1ch; 
        margin: 8dvw;
      }   
    @media only screen and (max-width: 600px){
      .horizontal-media-scroller-3 {
        --size-3: 230px;     
        display: grid;
        grid-auto-flow: column;
        justify-content: normal; 
        grid-gap: calc(var(--gap) / 2);
        gap: calc(var(--gap) / 2);
        margin: 0;    
        padding-left: var(--gap);
        padding-right: var(--gap);   
        padding-bottom: calc(var(--gap) / 2);    
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -ms-scroll-snap-type: inline mandatory;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: calc(var(--gap) / 2);
        -ms-overflow-style: none;  /* IE и Edge */
        scrollbar-width: none;  /* Firefox */
      }
    }
    @media only screen and (max-width: 600px){
      .horizontal-media-scroller-3::after {
        top:90%;
        left:50%;
        transform:translate(-50%, -90%);
      }
    }
      .horizontal-media-scroller-3 > li {
        min-width: 23%;
        width: 23%;
        background-color: white;
        margin-left: 0;
        margin-right: 0;
        margin-top: 10%;
        margin-bottom: 18%;
        border-radius: 1ch;
      }
      @media only screen and (max-width: 600px){
      .horizontal-media-scroller-3 > li {
        display: inline-block;
        margin-left: calc( var(--gap)*3.5);
        margin-right: calc( var(--gap)*3.5);
        margin-top: calc(var(--size-3)/3);
        margin-bottom: calc(var(--size-3)/3);
        background-color: white;
        min-width: auto;
        width: auto;
      }
    }
    /* @media only screen and (max-width: 600px){
      .horizontal-media-scroller-3 .arrow-3, .horizontal-media-scroller-3 .arrow-back-3 {
        display: block;
      }
    } */
    .horizontal-media-scroller-3 a{
      text-decoration: none;
      scroll-margin-left: 0;
    }
      .horizontal-media-scroller-3 > li:last-of-type figure {
        position: relative;
      }  
      [dir="ltr"] .horizontal-media-scroller-3 > li:last-of-type figure::after {
        right: calc(var(--gap) * -1);
      }   
      [dir="rtl"] .horizontal-media-scroller-3 > li:last-of-type figure::after {
        left: calc(var(--gap) * -1);
      }
      .horizontal-media-scroller-3 > li:last-of-type figure::after {
        content: "";
        position: absolute;   
        width: var(--gap);
        height: 100%;   
        top: 0;
        right: calc(var(--gap) * -1);
      }

      .horizontal-media-scroller-3 > a{
        /* max-width: 70dvw;
        padding: 3%;
        background-color: white; */
      }

    .horizontal-media-scroller-3 figure > picture {
      width: var(--size-3);
      height: var(--size-3);
    }

    .horizontal-media-scroller-3::-webkit-scrollbar {
      display: none;
    }

    .horizontal-media-scroller-3 figure {
      scroll-snap-align: center;
      display: grid;
      grid-gap: calc(var(--gap) / 2);
      gap: calc(var(--gap) / 2);
      margin: 0;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-radius: 1ch;
    }
    .horizontal-media-scroller-3 figure > picture {
        width: var(--size-3);
        height: var(--size-3);   
      }
      .img-figcaption-box-3{
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
      }
      
    @media only screen and (max-width: 900px) { 
      .img-figcaption-box-3 {
        width: 60%;
        height: auto;
        }
      }

    @media only screen and (max-width: 600px) { 
      .img-figcaption-box-3 {
        width: 32%;
        height: auto;
        margin: 12%;
        margin-left: auto;
        margin-right: auto;
        }
      }
      .img-figcaption-box-3 + div{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20%;
      }
      .img-figcaption-box-3 + div > figcaption{
        text-align: center;
        color: var(--purple-text);
        font-weight: bold;
        margin-top: 9%; 
      }  
    .img-figcaption-box-3 + div > p{
      display: flexbox;
      font-size: 0.7rem;
      font-weight: normal;
      line-height: 1;
      word-break: break-word;
      margin-top: 5%; 
      text-align: center;
      color: black;
    } 
  @media only screen and (max-width: 600px) { 
    .img-figcaption-box-3 + div > p{
      font-size: 0.8rem;
      margin-top: 1%;
      }
    }
    .stars{
      position: absolute;
      margin-top: 40%;
    }
    @media only screen and (max-width: 600px) { 
      .stars{
        margin-top: 75%;
        }
      }
      @media only screen and (max-width: 500px) { 
        .stars{
          margin-top: 93%;
          }
        }


        .arrow-back-3{
          display: none;
        }
        .arrow-3{
          display: none;
        }
        .arrow-back-3:hover,.arrow-3:hover {
          filter: invert(66%) sepia(82%) saturate(783%) hue-rotate(242deg) brightness(112%) contrast(99%);
        }
        @media only screen and (max-width: 600px) {
          .arrow-back-3 {
            overflow-clip-margin: content-box;
            overflow: clip;
            display: block;
            width: 6dvw;
            left: -33%;
            overflow-y: visible;
            position: absolute;
            height: auto;
            top: 43%;
            filter: invert(12%) sepia(4%) saturate(6934%) hue-rotate(318deg) brightness(96%) contrast(82%);
          }
        }
        @media only screen and (max-width: 600px) {
          .arrow-3 {
            overflow-clip-margin: content-box;
            overflow: clip;
            display: block;
            width: 6dvw;
            right: -33%;
            position: absolute;
            height: auto;
            transform: rotate(180deg);
            top: 43%;
            filter: invert(12%) sepia(4%) saturate(6934%) hue-rotate(318deg) brightness(96%) contrast(82%);
          }
        }
/* footer */
footer{
      background-image: linear-gradient( 157.67deg, #1A1218 3.24%, #665756 97.35% );
      color: white;
      text-align: center;
    }
  footer h6{
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 1%;
  }
    .line {
      border-bottom: 1px solid var(--gold);
      width: 10%;
      margin-top: auto;
      margin-bottom: auto;
     }
     .line a img:hover{
      position: relative;
      color: var(--purple-text);
     }
     .footer-box{
      display: flex;
      flex-direction: row;
      justify-content: center;
     }
     .footer-box a{
      margin: 1% 1% auto;
     }
     .footer-box a:hover{
      filter: invert(66%) sepia(82%) saturate(783%) hue-rotate(242deg) brightness(112%) contrast(99%);
     }
     .footer-box img{
      margin: 0.5%;
     }
     .footer-text{
      color: var(--gold);
      margin-bottom: 3%;
     }
     .mobile-pattern-top, .mobile-pattern{
      display: none;
     }
     @media only screen and (max-width: 600px) { 
      .mobile-pattern-top, .mobile-pattern{
        display: block;
        content: url(https://sametised-kaed.eu/images/Mobile-pattern.svg);
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 6%;
        height: 100%;
        }
      }
      @media only screen and (max-width: 600px) { 
        .mobile-pattern-top{
          margin-top: -16%;
          margin-bottom: 6%;
          }
        }