#responsive-menu{display: flex; flex-direction:  column;
    background-color: #39628C;
    padding:0px;
    border-bottom:0px
}
body{
    font-family: 'Rubik', sans-serif;
    color: #333;
}
h1,h2,h3,h4,h5,h6{
color: #5181B3;
font-family: 'Rubik', sans-serif;
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
}
ul li a{
    font-family: 'Rubik', sans-serif;
}
#menutop, #menubottom{
    padding: 20px;
}
#menubottom{
    width: 100%;
    background-color: #e4e4e4;
}
#menubottom ul{
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.8rem;
}
#menubottom ul>li:not(:last-of-type){
    border-right: 1px solid #39628C;
}
#menubottom .active a{
    background: unset;
    color: #39628C;
}


.breadcrumbs{
    display: flex;
    justify-content: center;

}


.socialtop{
    flex-direction: row !important;
}

.socialtop a{
    width: 50%;
    max-width: 30px;
}

#menutop .social img{
    width: 100%;
height: auto !important;
border: 1px solid #fff6;
border-radius: 50%;
}
#menutop .social img:hover{
   
border: 1px solid rgba(255, 255, 255, 0.589);

}

.socials img{
    width: 40px;
    margin-right: 5px;
}

footer .socials img{
    border:1px solid #ffffff7d;
    border-radius: 50%;
    width: 40px !important;
    margin: 4px;
}

.maincontainer h1{
    margin-bottom: 30px;
}
.maincontainer .social{
    font-size: 2rem;
    margin-right: 10px;
}
footer h6{
    margin-top: 20px;
}
footer .social{
    font-size: 1.2rem;
    margin-right: 5px;
}

#menutop{
    display: flex;
    justify-content: space-between;
    margin: 0px;
}
#menutop>div{
    display: flex;
    color: #e4e4e4;
    justify-content: center;
    align-items: center;
}
#menutop .contacts{
    display: flex;
    flex-direction: column;
    padding: 0px 30px;
}
#menutop .contacts:not(:last-of-type){
border-right: 1px solid #e4e4e4;
}
#menutop .contacts i{
    margin-right: 5px;
}
#menutop .button{margin-bottom: 0px;}

.homebox,.info{
    text-align: center;
    margin-bottom: 20px;
    background: #f9f9f9;
    padding: 20px;
}
.homebox .covercontainer{
    margin-bottom: 10px;
}

#content h2{
   
}

.select-trigger{
    list-style-type: none;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s ease all;
}

.select-trigger:hover{
    color: #39628C;
    font-weight: bold;
}

.select-trigger img{
    width: 30px; margin-right: 5px;
}

#mainslider{
    position: relative;
    width: 100vw;
}

#mainslider.homepage{
    height: 100vh;
}


footer a, #mainslider .contacts{
    color: white;
    cursor: pointer;
}
footer a:hover, #mainslider .contacts:hover{
    color: white;
    text-decoration: underline;
}



#mainslider.transparent .slick-slider{
    position: absolute;
    top:0px;
    z-index: 0;
}

@media screen and (max-width: 39.9375em) {
    #mainslider.transparent:not(.homepage) .slick-slider{
        position: relative;
    }
}



.slick-prev::before, .slick-next::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }

.slick-prev::before {
    content: '\f053';
  }

.slick-next::before {
    content: '\f054';
  }

.slick-prev, .slick-next {
    width: unset;
    height: unset;
    background-color: #4b78a8;
    opacity: 0.8;
    padding: 10px;
    z-index: 1;
    transition: 0.3s ease all;
  }
  
  .slick-arrow:hover{
    background-color: #4b78a8;
      opacity: 1;
  }

.slick-prev{
    left:0;
}
.slick-next{
    right: 0;
}

#mainslider.transparent #responsive-menu, #mainslider.transparent .title-bar{
background: #39628CB8;
position: relative;
z-index: 1;
}

#mainslider.transparent ul{
    background-color: unset;
}
#mainslider.transparent #responsive-menu li > a{
    color:white;
    font-weight: bold;
    font-size: 1.1rem;
}
#responsive-menu ul.submenu{
    background:rgba(68, 100, 132, 0.88); border:  unset;
}
#responsive-menu ul.submenu a{
    width: 100%; text-align: center;
  
}

#responsive-menu ul.submenu li{
    border-right:  unset !important;
}
#responsive-menu ul.submenu li:hover a{
    background: #42516f87 !important;
text-decoration: underline;
}

#responsive-menu li > a{
    transition: 0.3s ease all;
}

#mainslider.transparent #responsive-menu li > a:hover, #mainslider.transparent #responsive-menu li.is-active a{ 
background-color: rgba(68, 100, 132, 0.88)
}

#mainslider.transparent #menubottom ul > li:not(:last-of-type){
    border-right: 1px solid #FFF;
}

#mainslider.transparent #menubottom, #mainslider.transparent .submenu-mobile{
    padding: 10px;
    background-color: #e4e4e43b;
}

.title-bar {
    flex-direction: column;
    padding: 0px;
}
.title-bar>div{
    padding: 10px;
}
.topmenu-mobile{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.submenu-mobile{width: 100%; display: flex; justify-content: space-between;}
.submenu-mobile>.contacts{text-align: center; font-size: 1.5rem; flex: 33%}

#content>*,footer,#responsive-menu,#mainslider, #mainslider .slick-slider,.info{
    opacity: 0;
}

.accomodations .cell, .sections .cell{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.sections .cell:nth-child(2), .mobilehome .cell:nth-child(2), .accomodations .cell:nth-child(2){
    background: #f9f9f9;
padding: 10px;
}

.mobilehome{margin-bottom: 50px;}

.grid-margin-x.grid-x.mobilehome > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.season {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    width: 100%;
    background: #f9f9f9;
    border:1px solid #ececec;
    padding: 20px;
    height: 100%;
    margin-bottom: 20px;
}
.season h3{
    text-align: center !important;
    color: white;

}
.switchLang ul{
    background: #6f8cab !important;
border-color: #8aa1b9;
}
.season p{
    margin-bottom: 5px;
}

@media screen and (max-width: 39.9375em) {
.seasongroup{
    margin-bottom: 10px;
}
}

.rateperiod{
    margin-bottom: 2px;
    font-size: 0.95rem;
}
.season.high{
    border-color: #df5d5d;
}
.season.medium{
    border-color: rgb(230, 145, 83);
}
.season.low{
    border-color: rgb(47, 176, 36);
}

.season.high h3, .heading .high{
    background-color: #df5d5d;
    color: white;
    font-weight: bold;
}
.season.medium h3, .heading .medium{
    background-color: rgb(230, 145, 83);
    color: white;
    font-weight: bold;
}
.season.low h3, .heading .low{
    background-color: rgb(47, 176, 36);
    color: white;
    font-weight: bold;
}

.ratetable .heading{
    text-transform: uppercase;
}




.ratetitle {
    background: #f0f0f0;
    margin: 5px 0px;
    padding: 5px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.rateitem {
    background: #f9f9f9;
    margin: 5px 0px;
    padding: 5px;
}

.rateitem>div{
    padding: 6px 6px;
}

.rateitem .high{
    background: #f7c9c9;
}
.rateitem .medium{
    background: #f7e3c9;
}
.rateitem .low{
    background: #daf7c9;
}

.rateitem div{
    flex: 12%;
}

.rateitem div:nth-child(1){
    flex: 64%;
    justify-content: left !important;
    text-align: left !important;
}

@media screen and (max-width: 39.9375em) {
    .ratetable .heading div:nth-child(1){
        display: none;
    }
    .rateitem div:nth-child(1){
        flex: 100% !important;
    flex: 0 0 100%;
text-align: center !important;
justify-content: center;
align-items: center;
align-content: center;
}
.rateitem{
    flex-wrap: wrap;
}
}

#maincontact{margin-bottom: 0px;}
#maincontact .maincontainer{
    margin: 30px auto;
}
#maincontact fieldset{
    display: flex;
}
#maincontact fieldset div{
    width: 100%;
    margin: 5px;
}
#maincontact textarea{
    height: 100px;
}


.ratetable{
    display: flex;
    flex-direction: column;
}

.ratetable .heading{
    background: unset;
    color: #333;
    padding: 0px;
}

.ratetable .heading, .ratetable .rateitem {
    display: flex;
}
.ratetable .heading div{
    padding: 8px;
}
.ratetable .heading div, .ratetable .rateitem div{
    flex:25%;
    text-align:center;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 5px;
}


.accomodations{
    margin: 80px auto !important; 
}

.accomodations:nth-child(even), .sections:nth-child(event){

}
.accomodations:nth-child(odd) .grid-x, .sections:nth-child(odd) .grid-x, .sections.grid-x:nth-child(odd){
    flex-direction: row-reverse;
}   

.godown{
    cursor: pointer;
    position: absolute;
    width: 50px;
    height: 30px;
    bottom:30px;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    right: 0px;
    margin: auto;
    background: #5180b394;
    color: white;
    animation-name: floating;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

.triggerpreview{
    width: 45px !important;
    animation-name: floatingbis;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#scrollToTop{
    background: #ececec;
color: #5584b5;
}

#scrollToTop:hover{
    background: #c3d7e5;
    color: #4b78a8;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
@keyframes float {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 3px); }
    to   { transform: translate(0, -0px); }    
}

@keyframes floatingbis {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 5px); }
    to   { transform: translate(0, -0px); }    
}


.info .blu{
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.info:hover .blu{
    animation-name: float;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


.dotations img{
    width: 30px;
}


.dotations{
    margin-left: 0px;
}
.headingservice{
    margin-top: 50px;
}


@media screen and (min-width: 40em) {
    .dotations{
        margin-left: 0px;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

@media screen and (min-width: 64em) {

    .dotations{
        margin-left: 0px;
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }
}

.dotations.inline li{
    list-style-type: none;
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 10px;
    border-right: 1px solid #5181b3;
    padding-right: 20px;
}

.dotations li{
    list-style-type: none;
    margin-bottom: 15px;
}
.dotations li img{
    margin-right: 8px;
}

.mapcontainer{
    position: relative;
}



.trigger{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.trigger-detail{
    width: 300px;
    padding: 10px;
    background: #f7f7f7;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.35s linear !important;
    border: 2px solid #d6d6d6;
    z-index: 100;
  }

  .trigger:hover .trigger-detail, .trigger.hover .trigger-detail{
    visibility: visible;
    opacity: 1;
}

  .trigger-detail h5{
      margin-top: 10px;
      margin-bottom: 0px;;
  }

  /*
#swim-trigger {
    top: 45.2%;
    left: 25.7%;
    width: 6%;
    height: 8%;
  
  }

  #swim-trigger .trigger-detail{
 
  }
  */






.mapcontainer img{
    width:100%;

}

.covercontainer{
    overflow: hidden;
}
.covercontainer img{
    transition: 0.3s ease all;
    margin-bottom: 0px;
}
.homebox:hover .covercontainer img{
    transform: scale(1.2);
}


.grid-container.full{
    background: #f9f9f9;
    padding: 20px 0px;
}
.off-canvas-content #content{
    padding: 0px;
}

.maincontainer{
    width: 80%;
    margin: auto;
    margin: 60px auto;
}

.grid-container.full{
    margin: 100px auto;
}

.maincontainer h3{
    margin: 30px 0px;
    text-align: left;
}

    .contactbox h3{
        text-align: center;
    }

    .contactbox .contacts{
        text-align: left;
        margin-bottom: 10px;
    }

    .contactbox .icon{
        width: 50px;
    }

.contactForm textarea{
    height: 120px;
}

.roadSlider{
    margin-bottom: 10px !important;
}

.contactForm .callout.secondary{
    background: #f9f9f9;
}
#policy{margin-right: 5px;}

.button{
    text-transform: uppercase;
}

.caption{
    max-width: 900px;
    text-align: center;
   /* padding: 80px 0px;*/
}

.caption h1{
    margin-bottom: 10px;
    font-size: 4rem;
}

@media screen and (max-width: 39.9375em) {
    .caption h1{
        font-size: 2.5rem;
    }
}

.caption h2{
    color: #92b3c6;
}

.button{
    background: #39628C;
    color:white;
    box-shadow: 6px 6px 0 #5584b5;
    transform: skewX(-15deg);
    transition: 0.3s;
    position: relative;
}

.button:hover{
    background: #5584b5;
    box-shadow: 4px 4px 0 #39628C;
}


.button.readmore{
    padding-right: 35px;
}
.button.readmore::after{
    transition: 0.3s ease all;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f054';
    position: absolute;
    right: 15px;
opacity: 0.6;
}

.button.button.readmore:hover::after{
    right: 10px;
    opacity: 1;
}


#main{
    padding-bottom: 0px;
}

footer{
    position: relative;
    padding: 20px 0px;
    background: #39628C;
    color:white;
}

footer .cell img{
    width: 60px;
    margin-bottom:10px
}
footer h6{
    color: white;
    font-weight: bold;
}

.info.cell{margin-top: 30px;}

.info.cell>*{
    text-align: left;
}

.info.cell img{
    width: 50px;
    margin-right: 10px;
}

footer{
    padding-bottom: 0px;
}
#developed {
    background: #8ea1b56e;
    padding: 20px;
    color: white;
    font-weight: bold;
}

.icon{
    width: 35px;
margin-right: 10px;
}

footer .contacts, .maincontainer .contacts{
    display: inline-block;
    width:100%;
    margin-bottom: 10px;

}

footer .menu a, footer a{
    color: white;
    background: unset;
    text-transform: uppercase;
}
footer .menu .active a{
    background: unset;
    text-decoration: underline;
}

#offCanvas{
    background: #39628C;
font-size: 14pt;
text-align: center;
color: white;
height: auto;
}

#offCanvas a{
    color: white;
}

#offCanvas .active a{
    background: #5d7d9d;
    color: white !important;
}

.off-canvas li a {
    border-bottom: 1px solid #7d99a9;
}

.off-canvas li a:hover {
    background: #92b3c6;
    color: #334a61 !important;
  }


  .headingletter {
    font-weight: 800;
    text-transform: uppercase;
    overflow: hidden;
  }
  
  .headingletter .letter {
    display: inline-block;
    line-height: 1em;
  }


  .animatedheading span {
    display: inline-block;
    animation: slideLeft 1.5s forwards;
    opacity: 0;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  @keyframes slideLeft {
    from {
      opacity: 0;
      transform: translateX(200px);
    } 
    to {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  #rules{margin-top: 10px;}

  #contactBar {
    opacity: 0;
    position: fixed;
    right: 0;
    z-index: 10;
    bottom: 120px;
    margin: auto;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .contactRight {
    padding: 5px;
    transition: .3s ease all;
    transform: translateX(66%);
    background: #5081b3cc;
    margin: 2px 0;
    text-transform: uppercase;
    color: white !important;
  }

  .contactRight:hover {
    transform: translateX(0);
    background: #5b87a0bd;
  }

  .contactRight img {
    width: 30px;
    margin-right: 10px;
    margin-left: 5px;
    transition: .3s all ease;
  }