html{
  scroll-behavior: smooth;
  }/* ----------------------------------------TYPOGRAPHY---------------------------------------- */
body{
  background-color: black!important;
}
@font-face {
  font-family: Ortica;
  src: url("Ortica-Light.woff");

}
@font-face {
  font-family: Chappa;
  src: url("chappa-Black.ttf");

}
h5{
  font-family: Chappa;
  font-size: 19vw;
}
p{
  font-family: Ortica;
  font-size: 1.6vh;
  color: white;
  letter-spacing: 1px;
}
button{
  font-weight: 100;
  font-family: Ortica;
  font-size: 2vh;
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none!important;
}
.accordion{
  font-size: 2vh;
}
h1,input{
  font-weight: 100;
  font-family: Ortica;
  font-size: 2vh;
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none!important;
}
.thankyou-main-text .ty-text{color:white!important}
/*---------------------------------------- SLIDER ----------------------------------------*/
.transform{

-webkit-transform: matrix(-1,0.000,-0.000,-1,0,0);
-moz-transform: matrix(-1,0.000,-0.000,-1,0px,0px);
-ms-transform: matrix(-1,0.000,-0.000,-1,0,0);
-o-transform: matrix(-1,0.000,-0.000,-1,0,0);
transform: matrix(-1,0.000,-0.000,-1,0,0);

}

.numeration {
  color: white;
  font-family: Ortica;
  position: absolute;
  font-size:70%;
  bottom: 30px;
  left: 50%;
    z-index: 9;
    transform: translateX(-50%);
}


}

.slick-dots {
  display: none !important;
}
.slider {
  position: absolute;
  top:0;
width:100%;
margin-top: 50vh;
transform: translateY(-50%);

}

.slick-slide {
  padding:1vw;
  margin: 0px 0vw;
  overflow: hidden;

}

.slick-slide img {
  width: 100%;
}
.slick-prev,
.slick-next {
  width: 50vw;
display: block;
height: 70vh;
z-index: 9999;
}
.slick-prev{
cursor:w-resize;
}
.slick-next{cursor:e-resize;}
.slick-prev:before, .slick-next:before  {
    content: '';}

.slick-slide img, .slick-active img {
  transition: all ease-in-out .2s;
filter: opacity(.5);    }


.slick-current img {
  filter: blur(0px);
  opacity: 1;
}
.item{
width: auto;
height: 40vw;
overflow: hidden
}


.item img{

position: relative;
width: 100%;
height: auto;
/* margin: -5%; */
top: 50%;
transform: translateY(-50%);
}

}

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

 button.accordion {
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #fff;
    text-align: left;
    outline: none;
    transition: 0.4s;

}

button.accordion.active, button.accordion:hover {
}
button.accordion:after {
    content: '+'; /* Unicode character for "plus" sign (+) */
    font-size: 2vh;
    width:30px;
    float: right;
    color:white!important;
}

button.accordion.active:after {
    content: "-"; /* Unicode character for "minus" sign (-) */
}

div.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

body{
  width:100vw;
  height:100%;
  position: absolute;
  background-color:black;
  overflow: hidden;
margin:0 auto;  }
.headerMobile{
display:none;
}
.header{
  display:block;
  width:100vw;
  height: 6vh;
  background-color:black;
  position: fixed;
  z-index: 9999;
  padding-left:1vw;
}
.bodycontent{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;

}
.child{
   scroll-snap-align: start;
}
  .header ul, .headerMobile ul{

    top:0;
    left:1vw;

  text-decoration: none;
 list-style-type: none;
 display: flex;
 width: 49vw;
 height: 2vh;
justify-content: space-between;
padding:0;
font-family: Ortica;
font-size: 2vh;
letter-spacing: 1px;
color: white;
}
li{
  cursor:pointer;
  opacity: 1;
  transition: opacity .3s;
}
.frontPage{
  box-sizing: border-box;
  display: flex;
      height: 100vh;
      width: 98vw;
      padding-bottom:3vh;
      position: relative;
      left:1vw;
}
.bigLogo{
  width: 50%;
  display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     margin-top: 7vH

}
.bigLogo img{
  flex-shrink: 0;
  width: 100%;
  height: 100%
}
.landingPhoto{
  width:48%;
  position: relative;
  left:1%;
  display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     margin-top: 7vH
   }
.landingPhoto img{
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

.galleryPage{
  opacity: 0;
  width: 100vw;
  height:100vh;
 max-height: -webkit-fill-available;
  position: relative;
}
.faqPage{
  width: 96vw;
    margin-left: 1.5vw;
    height: 100vh;  max-height: -webkit-fill-available;
    position: relative;
    padding-top: 0;
    overflow: hidden;

}
.faqPage .fom{
  position: absolute;
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

 .fom button{
   background-color: black;
   color: white;
   border-top:1px solid white!important;
   cursor: pointer;
   padding: 2.5vh;
   width: 100%;
   border: none;
   text-align: left;
   text-decoration: none!important;
   outline: none;
   transition: 0.4s;
   text-align: center;
   font-size: 2vh;
   line-height: 0;
 }


 .fom button a, .fom p a {
	 display: block;
	 color: white;
   text-decoration: none;
}
 .fom p {
   color:white;
   padding-bottom: 30px;
    margin-left: 0px;
    padding-inline: 50px;
    text-align: center;
}


.bookinPage{
width:96vw;
  margin-left:1.5vw;
height: 100vh;  max-height: -webkit-fill-available;
  position: relative;
  padding-top: 13vh;
  overflow-x: hidden;
}
.formEntry{
  width:100%;
  border-top:1px solid white;
  display: flex;
}
.formEntry h1{
  cursor:default;
  color:white;
  float:left;
  width:fit-content;
}
input, input:focus-visible, input:active{
  width: 70%;
  background-color: transparent;
    border: none!important;
    float: left;
    margin-left:10px;
    color:grey
}
input[type="text"], input[type="password"], textarea, select {
  outline: none!important;
  border: none!important;
background: transparent!important;
border-radius: 0px!important;

}
.button{
  border-radius:0px!important;
  background-color: black!important;
  -webkit-border-radius:0px!important;
  -webkit-background-color: black!important;
  border:1px solid white!important;
  color:white;
  width: 30%;
height: 55px;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-left:0px;
transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill:hover {
  color: black;
}

.fill:before {
  content: "";
  position: absolute;
  background: white;
background-blend-mode: difference;
 bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

.fill:hover:before {
  top: 0;
}



/*----------------------- DEVICES---------------------------------*/
@media only screen  and (orientation: portrait)
  and (min-device-width: 320px)
  and (max-device-width: 1024px)  {

      .nomobile{
        display: none!important;
      }
      .nodesktop{display:block!important;
      margin-top:150px;
      position: relative;
      left: 10%;}
    body, html{
      width:100vw;
      height:100%;
      overflow: hidden;
    }
    p, .numeration{
      font-family: Ortica;
      color: white;
      letter-spacing: 1px;
      font-size: 2vh!important;
    }
    .slick-dots {
      display: none !important;
    }
    button{
      border-radius:0px!important;
      background-color: black!important;
      -webkit-border-radius:0px!important;
      -webkit-background-color: black!important;
      font-weight: 100!important;
      font-family: Ortica !important;
      font-size: 2vh!important;
      color: white!important;
      letter-spacing: 1px!important;
      text-transform: uppercase!important;
      text-decoration: none!important;
    }
    .fom button a, .fom p a {
    width: 98%;!important;}

    h1,input{
      font-weight: 100;
      font-family: Ortica!important;
      font-size: 2vh!important;
      color: white!important;
      letter-spacing: 1px!important;
      text-transform: uppercase!important;
      text-decoration: none!important;
    }
    .fom button{
      text-align: left!important;
      font-size: 2vh!important;
      line-height: 1.3!important;
      padding-top: 2vh!important;
      padding-right: 50px!important;
      border-radius:0px!important;
      background-color: black!important;
    }
    .fom p{
      text-align: left;
font-size: 2vh!important;
    }
    button.accordion:after {
      position: relative;
    right: -20px;
        content: '+'; /* Unicode character for "plus" sign (+) */
        font-size: 4vw;
        width:30px;
        float: right;
        color:white!important;
        margin-left:20px;
    }

    .formEntry h1 {
        color: white;
        float: left;
        max-width: 52%;
        min-width: fit-content;
    }
    .button{
      border-radius:0px!important;
      background-color: black!important;
      border:2px solid white!important;
    width: 100%!important;
    height: 85px!important;

    }
    .header{
      display: none;
    }
    .headerMobile{
      display: block;
      width:100vw;
      height: 6vh;
      background-color:black;
      position: fixed;
      z-index: 9999;
      padding-left:2vw;
    }
   .header ul, .headerMobile ul{
     width: 96%;
   }
.frontPage{
  flex-direction: column-reverse;
  width: 96vw;
    left: 2vw;
    overflow: hidden;
    top:0;
}
.bigLogo{
  width: 98%;
height: 43vh;
position: absolute;
top:35vh;
left:1vw;

}
.bigLogo img{
  flex-shrink: 0;
  width: 100%;
  height: 100%
}
.landingPhoto{
 width: 100%;
height: 34vh;
position: absolute;
top:0vh;
margin-bottom:0vw;}

.item {
  height:40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;}

.item img{
    width: auto;
    height: auto;
    position: relative;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%
}

.fom{

  margin-top: 20vh;
    transform: translateY(-50%);
}
.fom:last-child{
  border-bottom:1px solid white;
}
.slider {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 43vh;
    transform: translateY(-50%);
}


.numeration {

  bottom: 100px;
  }
  .slick-prev, .slick-next {
      font-size: 0;
      line-height: 0;
      position: absolute;
      top: 65%;
      opacity: 0;}

.faqPage{
  padding-top: 0;
}
.faqPage .fom {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
}
}
.nodesktop{
  display:none;
}
.nomobile{
  display: block;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (orientation: landscape) {
.nomobile{
  display: none;
}
.nodesktop{display:block;}
.landingPhoto{
  display: none;
}
.bigLogo{
  width: 100%;
      margin-top: 9vh;
      height: 68vh;
}

h1,input, ul, p, .numeration{

  font-size: 3vh!important;
  }

  .item img {
    position: relative;
    width: 30%;
    height: auto;
    /* margin: -5%; */
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.fom button{
  padding:3vw;
}
.header{
  display: none;
}
.headerMobile{
  display: block;
  width:100vw;
  height: 6vh;
  background-color:black;
  position: fixed;
  z-index: 9999;
  padding-left:2vw;
}
.header ul, .headerMobile ul{
 width: 96%;
}
}

/*iPAD*/

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)

 {
   .nodesktop{
     display:none;
   }
   .nomobile{
     display: block;
   }
    .bigLogo {
    width: 98%;
    height: 51vh;}

    .fom button {
padding: 0.5vh;}

.fom p{
  margin-left: 30px;}
}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
{
  .nodesktop{
    display:none;
  }
  .nomobile{
    display: block;
  }
    .bigLogo {
    width: 100%;
    margin-top: 9vh;
    height: 84%;
    }

    .item img {
width: 80%;}

h1, input, ul, p, .numeration {
font-size: 2vh;
}
}
.form-all:before {
  background: none!important;
}

.form-header-group  .header-large{
  display: none!important;
}

.branding21{
  display: none!important
}