:root {
--font-size-xtrasmall: 1rem;
  --font-size-small: .9rem;
  --font-size-small: 1.1rem;
  --font-size-normal: 1.3rem;
  --font-size-medium: 2.4rem;
  --font-size-big: 6.5rem;
  --color-white:#FFFFFF;
  --color-grey:#635f5c;
  --line-thickness: 1px;
  --line-thickness-big: 1px;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
html {
   width: 100%;
   -webkit-tap-highlight-color: transparent;
   font-size: 1.15vw;
   scroll-behavior: smooth;
}
body {
   line-height: 1.32;
   height: 100%;
   font-family: 'Monument Grotesk';
   font-size:var(--font-size-small);
   color: var(--color-grey);
   background-color: var(--color-white);
   font-weight: normal;
   display: flex;
   letter-spacing: 0.03em;
   flex-direction: column;
   min-height: 100vh;
}

.text a{
    position: relative;
}
a {
    text-decoration: none;
    color: inherit;
}
h1, h2, h3{
      font-weight: 100;
}
h1{
    font-size:var(--font-size-big);
}
h2{
    font-size:var(--font-size-small);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
}
strong{
      font-weight: 500;
}
.text ul {
    margin-left: 1.15em;
}
.swiper-slide-active .imgInner img {transform: scale(1.1);}
.dropInner {
    margin-top: 1em;
    padding-bottom: .5em;
    padding-left: .3rem;
}
.text ul li {
    text-indent: -.88em;
    list-style-type:none;
}
.bulletgap .text ul li {
    margin-bottom: .5em;
}
.text p:not(:last-child) {
    margin-bottom: .5em;
}
.text ul li:before{
    content:'\2013';
    margin-right: .25em;
}
button{
    font-size:inherit;
    font-weight:inherit;
    background-color:inherit;
    color:inherit;
    cursor:pointer;
}
main {
    position: relative;
    /* overflow: hidden; */
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 1.5rem 2rem 15rem;
    z-index: 3;
}
article.imageslider {
    height: 32.5vw;
    overflow: hidden;
}

.swiper-slide figcaption {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
    font-size: var(--font-size-xtrasmall);
    color: var(--color-white);
    opacity:0;
    transition: .25s opacity ease-out;
}

body:not(.scrolled) .swiper-slide-active figcaption{
    opacity:1;
}
.imagegallery {
    height: 100%;
    width: 100%;
    position: relative;
}
#logo img {
    width: 100%;
}

#logo {
    width: 15rem;
    left: 2.1rem;
    position: absolute;
    top: 2.1rem;
}

ul.buttons {
    gap: .75rem;
    color: var(--color-white);
    display: flex;
    list-style-type: none;
    font-size: var(--font-size-normal);
    flex-grow: 1;
}
header ul.buttons{
     top: 2rem;
     right: 2.3rem;
     position: absolute;
}
article.dropdownBlock {
    grid-column: 2;
    /* transform: translateX(-.5rem); */
}
article.dropdownBlock {
    border-top: var(--line-thickness) solid var(--color-grey);
}
.imgInner {
    position: absolute;
    height: 100%;
    width: 100%;
}

.imgBox {
    width: 100%;
    height: 100%;
}

.swiper-container {
    height: 100%;
}
footer .socialmedia li a svg {
    height: 1.35rem;
    overflow: visible !important;
    padding: .05rem;
}

footer .socialmedia li a svg path {
    fill: var(--color-grey);
}

ul.socialmedia {
    display: flex;
    list-style-type: none;
    gap: .75rem;
    left: 2.1rem;
    bottom: .9rem;
    position: absolute;
}
.imgInner img {
    width: 100%;
    height: 100%;
    transition: transform 1.5s ease-out;
    object-fit: cover;
    object-position: center 33%;
}
.dropdown {
    border-bottom: var(--line-thickness) solid var(--color-grey);
    position: relative;
}
.dropdown.in .plus {
    transform: rotate(45deg);
}
.dropBox {
    display: none;
}
.plus {
    height: 1rem;
    pointer-events: none;
    width: 1rem;
    position: absolute;
    right: .5rem;
    transition: .15s transform ease-out;
    top: .5rem;
}

.plus:after, .plus:before {
    width: var(--line-thickness-big);
    height: 100%;
    background-color: var(--color-grey);
    content: '';
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
}

.plus:after {
    transform: rotate(90deg) translate(-50%,-50%);
}
.titleBox {
    font-size: var(--font-size-big);
    line-height: .95;
    letter-spacing: 0;
    grid-row: 1/3;
}
body.changing .titleBox, body.changing .claimBox {
 opacity:0;
    
}
.titleBox,.claimBox{
    transition: .5s opacity ease-out;
}
.claimBox {
    font-size: var(--font-size-medium);
    /* transform: translateX(-.5rem); */
    padding-top: .55rem;
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin-bottom: 2rem;
}
#cookiemessage {
    background-color: var(--color-grey);
    color: var(--color-white);
    padding: 1rem 2rem;
    position: fixed;
    bottom: 0;
    font-size: var(--font-size-xtrasmall);
    z-index: 3;
    width: 100%;
    display: flex;
    gap: 5rem;
}
.dropdown h2 {
    padding: .4rem 2rem .37rem .3rem;
    transition: .15s all ease-out;
    cursor: pointer;
}
#screenshot {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-image: url(../img/home.png);
    z-index: 2;
    background-size: 100% auto;
    opacity: 0;
    background-repeat: no-repeat;
    pointer-events: none;
    display:none;
}
.mobTextBox {
    display:none;
}

ul.buttons li a, ul.buttons li button {
    border: var(--line-thickness) solid var(--color-white);
    padding: .27rem .7rem;
    display: inline-block;
    border-radius: 4rem;
    transition: .15s all ease-out;
}
#cookiemessage ul.buttons {
    white-space: nowrap;
    margin-top: .25rem;
}
ul.socialmedia li a {
    overflow: visible !important;
}
   ul.socialmedia li a svg path{
       transition:fill .2s ease-out;
   }
.rightBlock {
    grid-column: 2;
}
.mobTitle {
    font-size: var(--font-size-big);
    line-height: 1;
    margin-bottom: .2em;
    max-width: calc(100% - .5rem);
}

.mobClaim {
    line-height: 1.1;
    font-size: var(--font-size-normal);
    max-width: calc(100% - 1rem);
}
footer {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding-bottom: 1rem;
    position: relative;
    z-index: 3;
}
footer ul.buttons {
    margin-bottom: 1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
    transform: translateX(-.25rem);
}
footer ul.buttons li a {
    color:var(--color-grey);
    border: var(--line-thickness) solid var(--color-grey);
}
@media (min-width: 1800px) {
 html{
     font-size:19px;
 }
}

@media (min-width: 992px) and (max-width: 1414px){
 :root {
  --line-thickness-big: 1px;
}
}

@media (min-width: 992px)  {
 
}
@media (min-width: 501px) and (max-width: 992px) {
  html {
      font-size: 4vw;
  }  
}
@media (min-width: 200px) and (max-width: 500px) {
  html {
      font-size: 5.65vw;
  }  
  
}



@media (max-width: 992px) {
 :root {
  --font-size-xtrasmall: .6rem;
  --font-size-small: .8rem;
  --font-size-normal: 1rem;
  --font-size-medium: 1rem;
  --font-size-big: 2.75rem;
  --line-thickness-big: 1px;
}
article.imageslider {
    height: 100vh;
    position: relative;
}
    .imgInner img {height: 120%;top: -15%;position: absolute;}
.plus {
    width: .75rem;
    height: .75rem;
}
    footer ul.buttons {
        gap:.25rem;
    }
main {
    padding: 1rem .75rem 7rem;
    z-index: 2;
    grid-template-columns: repeat(1,1fr);
}
    .mobClaim br {
    display: none;
}.swiper-slide figcaption {
    left: 1rem;
    font-size: var(--font-size-small);
}
.mobTextBox {
    position: absolute;
    bottom: 7.5rem;
    color: var(--color-white);
    z-index: 3;
    left: 1rem;
    display:block;
}
    #cookiemessage {
    flex-direction: column;
    padding: 1rem;
    gap: .5rem;
}

#cookiemessage ul.buttons {font-size: var(--font-size-xtrasmall);gap: .25rem;}
article.dropdownBlock {
    grid-column: 1;
    transform: none;
}

ul.socialmedia {
    position: relative;
    left: .2rem;
    bottom: unset;
    margin-bottom: .75rem;
}
body.scrolled .swiper-slide-active figcaption{
    opacity:1;
}
footer {
    padding: 1rem .75rem;
    grid-template-columns: repeat(1,1fr);
}

.rightBlock {
    grid-column: 1;
}

header ul.buttons {
    flex-direction: column;
    gap: .5rem;
    top: unset;
    right: unset;
    bottom: 3rem;
    left: .75rem;
}

#logo {
    left: 1rem;
    top: 1rem;
    width: 12rem;
}
    footer .socialmedia li a svg {
    height: 1rem;
}
    header {height: 100%;position: absolute;}
.titleBox, .claimBox {
    display: none;
}
  footer  ul.buttons li a {
    padding: .15rem .5rem .05rem;
   font-size:var(--font-size-small);
}
ul.buttons li a {
    padding: .15rem .75rem .05rem;
}

footer ul.buttons {
    margin-bottom: 1rem;
}
    
}
@media (hover: none) {
 
}
@media (hover: hover) {
.dropdown h2:hover {
    background-color: var(--color-grey);
    color: var(--color-white);
}
.dropdown h2:hover + .plus:after, .dropdown h2:hover + .plus:before{
background-color:var(--color-white);        
}
header ul.buttons li a:hover {
    background-color: var(--color-white);
    color: var(--color-grey);
}
    footer ul.buttons li a:hover {
    background-color: var(--color-grey);
    color: var(--color-white);
}
    ul.buttons li button:hover {
    background-color: var(--color-white);
    color: var(--color-grey);
}
    ul.socialmedia li a:hover {
    opacity: 0.75;
}
footer .socialmedia li a:hover svg path {
    fill: rgb(99 95 92 / 75%);
}
}
@font-face {
    font-family: 'Monument Grotesk';
    src: url('fonts/MonumentGrotesk-Regular.woff2') format('woff2'),
        url('fonts/MonumentGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Monument Grotesk';
    src: url('fonts/MonumentGrotesk-Medium.woff2') format('woff2'),
        url('fonts/MonumentGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
::selection {
   color: var(--color-white);
   background-color: var(--color-grey);
}
::-moz-selection {
   color:  var(--color-white);
   background-color: var(--color-grey);
}