.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  font-family: Brandon;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity .6s
}

.tooltip1:hover .tooltiptext {
  visibility: visible;
  opacity: .6
}

@font-face {
  font-family: FontAwesome;
  font-weight: 400;
  font-style: normal;
  src: url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0);
  src: url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0) format("embedded-opentype"), url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format("woff2"), url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0) format("woff"), url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0) format("truetype"), url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular) format("svg")
}

@font-face {
  font-display: swap;
  font-family: Brandon;
  src: url(../../Fonts/BrandonGrotesque-Regular.eot);
  src: url(../../Fonts/BrandonGrotesque-Regular.eot?#iefix) format("embedded-opentype"), url(../../Fonts/BrandonGrotesque-Regular.woff) format("woff"), url(../../Fonts/BrandonGrotesque-Regular.otf) format("truetype")
}

@font-face {
  font-display: swap;
  font-family: BrandonBold;
  src: url(../../Fonts/BrandonGrotesque-Bold.eot);
  src: url(../../Fonts/BrandonGrotesque-Bold.eot?#iefix) format("embedded-opentype"), url(../../Fonts/BrandonGrotesque-Bold.woff) format("woff"), url(../../Fonts/BrandonGrotesque-Bold.otf) format("truetype")
}

@font-face {
  font-display: swap;
  font-family: AGaramondPro;
  src: url(../../Fonts/AGaramondPro-Regular.eot);
  src: url(../../Fonts/AGaramondPro-Regular.eot?#iefix) format("embedded-opentype"), url(../../Fonts/AGaramondPro-Regular.woff) format("woff"), url(../../Fonts/AGaramondPro-Regular.otf) format("truetype")
}

@font-face {
  font-family: AGaramondProItalic;
  src: url(../../Fonts/AGaramondPro-Italic.eot);
  src: url(../../Fonts/AGaramondPro-Italic.eot?#iefix) format("embedded-opentype"), url(../../Fonts/AGaramondPro-Italic.woff) format("woff"), url(../../Fonts/AGaramondPro-Italic.otf) format("truetype")
}

body {
  opacity: 1;
  overflow-x: hidden;
  margin: 0;
  text-align: center;
  background-color: #f8f7f2 !important;
  position: relative;
  width: 100%
}

.Brandon {
  font-family: Brandon;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

.BrandonBold {
  font-family: BrandonBold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

.AdobeGaramond {
  font-family: AGaramondPro;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

.AdobeGaramondItalic {
  font-family: AGaramondProItalic
}

.XSText {
  font-size: 16.67px
}

.SText {
  font-size: 20px
}

.MText {
  font-size: 41.47px
}

.LText {
  font-size: 61.66px;
  line-height: 1
}

.L2Text {
  font-size: 86px
}

.XLText {
  font-size: 148.66px
}

.pismoMalaSlova {
  line-height: 1.5;
  letter-spacing: 1.3px
}

.roseGold {
  color: #f0b99c
}

a {
  text-decoration: none !important
}

a:hover {
  text-decoration: none !important
}

.grabbable {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab
}

.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.galleryImg1,
.galleryImg2,
.galleryImg3 {
  cursor: pointer
}

.galleryImg1:hover,
.galleryImg2:hover,
.galleryImg3:hover {
  color: #b1543e
}

.galleryImg1:after,
.galleryImg2:after,
.galleryImg3:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 6px;
  left: 50%;
  position: absolute;
  background: #b1543e;
  transition: width .3s ease 0s, left .3s ease 0s;
  width: 0
}

.galleryImg1:hover:after,
.galleryImg2:hover:after,
.galleryImg3:hover:after {
  left: 0;
  width: 180px
}

#LisceContainer {
  overflow: hidden
}

.list01 {
  position: absolute;
  width: 87px;
  height: 90px;
  background: url(../../Assets/Letter/leaf-01.png) center
}

.list02 {
  position: absolute;
  width: 78px;
  height: 103px;
  background-size: contain;
  background: url(../../Assets/Letter/leaf-02.png) center
}

.list03 {
  position: absolute;
  width: 112px;
  height: 53px;
  background-size: contain;
  background: url(../../Assets/Letter/leaf-03.png) center
}

.list04 {
  position: absolute;
  width: 121px;
  height: 56px;
  background-size: contain;
  background: url(../../Assets/Letter/leaf-04.png) center
}

.list05 {
  position: absolute;
  width: 172px;
  height: 229px;
  background-size: contain;
  background: url(../../Assets/Letter/leaf-big.png) center no-repeat;
  background-size: 70%
}

.StrelicaScroller {
  display: block;
  position: absolute;
  right: 20px;
  top: 330px;
  background: url(../../Assets/scrollStrelica.png) no-repeat center;
  background-size: contain;
  height: 56px;
  width: 63px;
  z-index: 98
}

.breadCrumb {
  position: relative;
  font-family: AGaramondProItalic;
  color: #000 !important;
  margin-top: 25px
}

.RCLogo {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: url(../../Assets/RC_logo.png) no-repeat center;
  background-size: contain;
  height: 79px;
  width: 76px;
  z-index: 1000
}

.RoomDetailsContainer {
  position: absolute;
  max-width: 300px;
  top: 200px;
  right: 80px;
  background-color: #f8f7f2
}

.SpecialRoomDetailsContainer {
  max-width: 300px;
  height: 365px;
  top: 200px;
  right: 80px;
  background-color: #f8f7f2
}

.RoomDetailsSubContainer {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  margin: 5px;
  border: 1px solid #495d58
}

.RoomDetailsTitle {
  letter-spacing: 9px;
  padding-top: 30px;
  color: #495d58;
  width: calc(100% - 52px);
  margin-left: auto;
  margin-right: auto
}

.RoomDetailsText {
  padding-top: 30px;
  width: calc(100% - 52px);
  margin-left: auto;
  margin-right: auto;
  color: #495d58
}

.RoomDetails {
  color: #000;
  padding-top: 50px;
  letter-spacing: 6px
}

.AccomodationGallery {
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f8f7f2;
  z-index: 1000
}

#BookNowContainer {
  position: fixed;
  top: 0;
  right: 0;
  font-size: 0;
  text-align: center;
  z-index: 1200
}

#BookNowBttn {
  float: left;
  background-color: #b1543e;
  width: 160px;
  height: 60px;
  color: #fff;
  z-index: 999;
  font-size: 16.67px;
  font-family: Brandon;
  line-height: 60px;
  cursor: pointer
}

#MenuBttn {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../../Assets/Menu/Menu.png) center;
  background-size: contain;
  width: 60px;
  height: 60px;
  opacity: 1;
  z-index: 1001
}

#CloseMenuBttn {
  position: relative;
  top: calc(50% - 12.5px);
  left: calc(50% - 12.5px);
  background: url(../../Assets/Menu/CloseMenu.png) center;
  background-size: contain;
  width: 25px;
  height: 25px;
  opacity: 0;
  z-index: 1000
}

#CloseMenuBttn:hover {
  top: calc(50% - 13px);
  left: calc(50% - 13px);
  width: 26px;
  height: 26px
}

.MenuBttnContainer {
  background-color: #1d2228;
  cursor: pointer;
  position: relative;
  width: 60px;
  height: 60px;
  float: left
}

.HomepageCont {
  height: auto;
  width: 100%;
  text-align: center
}

.NajveciNaslov {
  letter-spacing: 12px;
  color: #ffd062;
  opacity: .11
}

.LetterText {
  padding-top: 50px;
  color: #495d58
}

.LetterTextSmall {
  color: #60706c;
  padding-top: 60px;
  display: inline-block;
  font-size: 20px;
  font-family: AGaramondProItalic;
  max-width: 420px;
  letter-spacing: 1px;
  padding-left: 20px;
  padding-right: 20px
}

.flex-container {
  padding-top: 20px;
  margin: auto;
  justify-content: center;
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 1275px
}

.flex-container1 {
  padding-top: 15px;
  margin: auto;
  justify-content: center;
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 505px;
  text-align: center
}

.flex-container-gallery {
  padding-top: 20px;
  justify-content: center;
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 505px;
  text-align: center;
  padding-bottom: 30px;
  color: #495d58
}

.flex-container2 {
  margin: auto;
  justify-content: center;
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 1200px
}

.item {
  flex-grow: 1;
  position: relative
}

.subtitle {
  color: #d0a639;
  letter-spacing: 2px;
  cursor: pointer
}

.item2 {
  flex-grow: 3;
  font-family: AGaramondPro;
  font-size: 20px
}

#logo {
  background: url(../../Assets/logo.png) no-repeat center;
  position: relative;
  width: 223px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px
}

#smallLogo {
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px
}

#LoveLetter3,
#LoveLetter4,
#SecondText,
#ThirdText,
#illustration2,
#illustration3 {
  opacity: 0
}

#FirstText.visible,
#LoveLetter2.visible,
#LoveLetter3.visible,
#LoveLetter4.visible,
#SecondText.visible,
#ThirdText.visible #illustration1.visible,
#illustration2.visible,
#illustration3.visible {
  opacity: 1
}

#FirstText {
  opacity: 0;
  max-width: 560px;
  display: inline-block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px
}

#illustration1,
#illustration2,
#illustration3 {
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px
}

#illustration1,
#illustration2,
#illustration3 {
  padding-top: 120px
}

#illustration3 {
  max-width: 320px
}

#PrviDioPismaTXT {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px
}

#DrugiDioPismaTXT {
  position: relative;
  left: 0;
  right: 0;
  top: 100px;
  max-width: 450px;
  margin: auto
}

#TreciDioPismaTXT {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px
}

#LoveLetter2,
#LoveLetter3,
#LoveLetter4 {
  top: 80px;
  padding-left: 20px;
  padding-right: 20px
}

#SecondTextContainer,
#ThirdTextContainer {
  max-width: 400px;
  height: 1000px;
  opacity: 1;
  position: absolute;
  right: 200px
}

#SecondLetterContainer {
  position: absolute;
  right: 0;
  left: 0;
  top: 2600px;
  z-index: 1000;
  height: 100vh
}

#ThirdLetterContainer {
  height: 2000px;
  background-color: #f8f7f2;
  margin-top: 0;
  position: absolute;
  right: 0;
  left: 0
}

.StreliceBijele {
  width: 12px;
  height: 23px
}

.WhiteDivider {
  background: url(../../Assets/CrticaDivider_Bijela.png) center;
  height: 19px
}

.WhiteDividerMenu {
  background: url(../../Assets/CrticaDivider_Bijela.png) center;
  width: 60px;
  height: 40px;
  background-repeat: repeat-x
}

.GrayDivider {
  background: url(../../Assets/CrticaDivider_Siva.png) center center;
  height: 16px
}

#ScrollContainer,
#ScrollContainer1 {
  position: relative;
  bottom: 135px;
  left: 0;
  right: 0
}

#ScrollContainer2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

#ScrollContainer1,
#ScrollContainer2 {
  opacity: 0
}

.ScrollTitleGray {
  color: #9a9a9a !important;
  letter-spacing: 5px
}

.ScrollTitle {
  color: #fff;
  letter-spacing: 5px
}

.LetterTitleYellow {
  font-family: AGaramondPro;
  font-size: 14px;
  color: #ffa100 !important;
  padding-top: 15px;
  letter-spacing: 3px;
  padding-bottom: 15px
}

.LetterTitleGray {
  font-family: AGaramondPro;
  font-size: 14px;
  color: #495d58 !important;
  padding-top: 15px;
  letter-spacing: 3px;
  padding-bottom: 15px
}

.LetterTitleGrayWithLines {
  color: #9a9a9a;
  letter-spacing: 4px
}

.LetterTitleBlackWithLines {
  color: #000;
  letter-spacing: 4px
}

#HomeEkran {
  position: relative;
  height: 100vh;
  width: 100%
}

#LetterEkran2,
#LetterEkran3 {
  opacity: 0
}

#LetterEkran,
#LetterEkran2,
#LetterEkran3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: #f8f7f2
}

#ExperiencesAndAmenitiesEkran {
  position: relative;
  background-color: #f8f7f2
}

.ExpAndAmText {
  text-align: left
}

#PharomatiqModul {
  background: url(../../Assets/HeroExperiences/lavander-fields.webp) center no-repeat;
  background: -webkit-image-set(url(../../Assets/HeroExperiences/lavander-fields.webp) 1x);
  background: image-set(url(../../Assets/HeroExperiences/lavander-fields.jpg) 1x)
}

#WineModul {
  background: url(../../Assets/HeroExperiences/resort.webp) center no-repeat;
  background: -webkit-image-set(url(../../Assets/HeroExperiences/resort.webp) 1x);
  background: image-set(url(../../Assets/HeroExperiences/resort.jpg) 1x)
}

#OliveModul {
  background: url(../../Assets/HeroExperiences/stone-house-at-sea.webp) center no-repeat;
  background: -webkit-image-set(url(../../Assets/HeroExperiences/stone-house-at-sea.webp) 1x);
  background: image-set(url(../../Assets/HeroExperiences/stone-house-at-sea.jpg) 1x)
}

#StoryEkran {
  margin-top: 200px;
  background-color: #f8f7f2;
  position: relative
}

.BookStoryTitle {
  color: #000;
  padding-top: 30px
}

.BookStorySubtitle {
  color: #864738;
  padding-top: 95px;
  padding-left: 20px;
  padding-right: 20px
}

.BookStorySmallTitle {
  color: #bfc3be;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px
}

.BttnContainer {
  padding-top: 20px
}

.BttnContainer2 {
  padding-top: 2px
}

.BookNowBttn2 {
  cursor: pointer;
  color: #495d58;
  background-color: #fdfcfa;
  width: 240px;
  height: 46px;
  color: #000;
  font-size: 18px;
  font-family: AGaramondPro;
  line-height: 50px;
  margin: auto;
  border: 1px solid #c7c6c2;
  letter-spacing: 3px
}

.ExploreBttnContainer {
  padding-top: 40px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px
}

.ExploreBttn {
  text-align: center;
  cursor: pointer;
  background-color: #fdfcfa;
  width: 240px;
  height: 46px;
  color: #000;
  font-size: 18px;
  font-family: AGaramondPro;
  line-height: 50px;
  letter-spacing: 1.5px
}

.StickyContainer {
  position: relative;
  width: 100%;
  height: 6550px;
  margin: auto;
  max-width: 100%;
}

#MindfulTXT {
  line-height: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

#MindfullLuxuryNaslov {
  position: absolute;
  left: 0;
  right: 0;
  top: 380px;
  z-index: 1002
}

#continueExploring {
  padding-top: 80px;
  padding-bottom: 80px
}

.SocialContainer {
  margin-top: 0;
  height: 50px;
  width: 88px
}

.SocialContainer1 {
  margin-top: 0;
  height: 50px;
  width: 88px
}

.FB {
  background: url(../../Assets/Footer/facebook-icon.png) center no-repeat;
  background-size: contain;
  width: 39px;
  height: 40px;
  float: left;
  cursor: pointer
}

.FB:hover {
  background: url(../../Assets/Footer/facebook-icon-hover.png) center no-repeat
}

.Insta {
  background: url(../../Assets/Footer/instagram-icon.png) center no-repeat;
  background-size: contain;
  width: 39px;
  height: 40px;
  float: left;
  margin-left: 10px;
  cursor: pointer
}

.Insta:hover {
  background: url(../../Assets/Footer/instagram-icon-hover.png) center no-repeat
}

#navContainer {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 150px
}

#navContainer1 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 20px
}

.darkContainer {
  position: fixed;
  opacity: 0;
  background-color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media screen and (max-width:991px) {
  .SocialContainer {
    margin: auto
  }

  #LL1,
  #LL2 {
    display: none
  }

  #ScrollContainer,
  #ScrollContainer1,
  #ScrollContainer2 {
    display: none
  }

  #navContainer {
    margin-top: 0
  }
}

@media screen and (max-height:800px) {
  #navContainer1 {
    margin-top: 20px
  }
}

@media screen and (max-height:940px) {
  #navContainer {
    margin-top: 0
  }
}

@media screen and (max-width:1200px) {
  #MindfullLuxuryNaslov {
    top: 300px
  }
}

@media screen and (min-width:1201px) {
  #MindfullLuxuryNaslov {
    top: 480px
  }
}

@media screen and (max-height::800px) {
  #MindfullLuxuryNaslov {
    top: 380px
  }
}

@media screen and (max-height:650px) {
  #LetterEkran3 {
    height: 750px
  }

  #navContainer {
    margin-top: 50px
  }
}

@media screen and (max-width:991px) {
  .list01 {
    display: none
  }

  .list02 {
    display: none
  }

  .list03 {
    display: none
  }

  .list04 {
    display: none
  }

  .list05 {
    display: none
  }
}

@media screen and (max-width:550px) {
  .BookStoryTitle {
    font-size: 75px !important
  }

  #illustration1,
  #illustration3 {
    padding-top: 60px
  }
}

@media screen and (max-width:500px) {
  .flex-container-gallery {
    max-width: 200px;
    padding-bottom: 20px
  }

  .arrow-down {
    top: 50px;
    left: 8px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #f8f7f2
  }

  .galleryImg1,
  .galleryImg2,
  .galleryImg3 {
    font-size: 25px
  }

  .galleryImg1:hover:after,
  .galleryImg2:hover:after,
  .galleryImg3:hover:after {
    width: 74px
  }
}

@media screen and (max-width:450px) {
  .NajveciNaslov {
    font-size: 40px
  }

  .BookStorySubtitle {
    font-size: 40px
  }

  .BookStorySmallTitle {
    font-size: 20px
  }

  #SecondTextContainer,
  #ThirdTextContainer {
    max-width: 300px;
    padding: 10px;
    max-height: 350px
  }

  #SecondTextContainer {
    max-height: 400px
  }

  #SecondTextContainer>.LText,
  #ThirdTextContainer>.LText {
    font-size: 40px;
    max-width: 300px
  }

  .LetterText {
    font-size: 30px
  }

  .LetterTitleGrayWithLines {
    font-size: 16px
  }
}

@media screen and (min-width:451px) and (max-width:800px) {
  .BookStoryTitle {
    font-size: 130px
  }

  .NajveciNaslov {
    font-size: 50px;
    line-height: 70px !important
  }

  .BookStorySubtitle {
    font-size: 50px
  }

  .BookStorySmallTitle {
    font-size: 30px
  }

  #SecondTextContainer,
  #ThirdTextContainer {
    max-width: 400px
  }

  #SecondTextContainer>.LText,
  #ThirdTextContainer>.LText {
    font-size: 60px;
    max-width: 400px
  }

  .LetterText {
    font-size: 30px
  }
}

@media screen and (min-width:801px) and (max-width:1000px) {
  .NajveciNaslov {
    font-size: 70px
  }

  .BookStorySubtitle {
    font-size: 50px
  }

  .BookStorySmallTitle {
    font-size: 30px
  }

  .LetterText {
    font-size: 35px
  }
}

@media screen and (min-width:1201px) {
  .NajveciNaslov {
    font-size: 110px
  }
}

@media screen and (min-width:1001px) and (max-width:1200px) {
  .NajveciNaslov {
    font-size: 90px
  }

  .BookStorySmallTitle {
    font-size: 30px
  }
}

@media screen and (max-height:800px) {
  #HomeEkran {
    height: 800px
  }
}

@media screen and (max-width:1200px) {
  #HomeEkran {
    height: 800px
  }

  #logo {
    display: block;
    background: url(../../Assets/logoMobile.png) no-repeat center;
    width: 134px;
    height: 96px;
    top: 40px;
    padding-top: 80px
  }
}

@media screen and (max-width:1200px) {
  #MindfulTXT {
    opacity: .16 !important
  }

  .ExploreBttnContainer {
    text-align: center
  }

  #WineModul {
    margin-top: -60px
  }

  #OliveModul {
    margin-top: -60px
  }

  #navContainer2 {
    max-width: 600px;
    flex-direction: column;
    padding-top: 0
  }

  #navContainer1 {
    margin-top: 20px;
    flex-direction: column
  }

  #navContainer {
    max-width: 600px;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0
  }

  .subtitle {
    padding-top: 15px;
    font-size: 16.67px
  }

  #SecondTextContainer,
  #ThirdTextContainer {
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto
  }

  #continueExploring {
    padding-top: 40px;
    padding-bottom: 40px
  }

  #continueExploring>.SText {
    font-size: 16.67px
  }

  #navContainer2,
  .flex-container2 {
    flex-wrap: wrap
  }

  .RoomDetailsContainer {
    top: 500px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto
  }

  .SpecialRoomDetailsContainer {
    top: 500px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto
  }

  .AccomodationGallery1 {
    max-width: 1280px !important;
    margin-left: auto;
    margin-right: auto;
    height: 500px
  }

  .GalleryImgContainer {
    height: 868px
  }

  .ExploreBttn {
    margin-right: auto;
    margin-left: auto
  }

  .ExpAndAmText {
    text-align: center
  }
}

.link {
  cursor: pointer;
  transition: .4s
}

.link:hover {
  color: #fff !important
}

.link1 {
  opacity: .7;
  cursor: pointer;
  transition: .4s
}

.link1:hover {
  opacity: 1
}

.btn {
  background: 0 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  z-index: 100
}

.btn:after {
  content: "";
  position: absolute;
  z-index: 50;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.btn:before {
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  z-index: 99
}

.btn-1 {
  background-color: #fdfcfa;
  z-index: 99
}

.btn-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #864738;
  z-index: -50
}

.btn-1c:active,
.btn-1c:hover {
  color: #fff !important;
  letter-spacing: 1px
}

.btn-1c:active:after,
.btn-1c:hover:after {
  width: 100%
}

.btn1 {
  background: 0 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  z-index: 100
}

.btn1:after {
  content: "";
  position: absolute;
  z-index: 50;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.btn1:before {
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  z-index: 99
}

.btn1-1 {
  background-color: #fdfcfa;
  z-index: 99
}

.btn1-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #864738;
  z-index: -50
}

.btn1-1c:active,
.btn1-1c:hover {
  color: #fff !important;
  letter-spacing: 1px
}

.btn1-1c:active:after,
.btn1-1c:hover:after {
  width: 100%
}

.btn2 {
  background: 0 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  z-index: 100
}

.btn2:after {
  content: "";
  position: absolute;
  z-index: 50;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.btn2:before {
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  z-index: 99
}

.btn2-1 {
  background-color: #fdfcfa;
  z-index: 99
}

.btn2-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #864738;
  z-index: -50
}

.btn2-1c:active,
.btn2-1c:hover {
  color: #fff;
  letter-spacing: 1px
}

.btn2-1c:active:after,
.btn2-1c:hover:after {
  width: 100%
}

.btn3 {
  background: 0 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  z-index: 100
}

.btn3:after {
  content: "";
  position: absolute;
  z-index: 50;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.btn3:before {
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  z-index: 99
}

.btn3-1 {
  background-color: #864738;
  z-index: 99
}

.btn3-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #864738;
  z-index: -50
}

.btn3-1c:active,
.btn3-1c:hover {
  color: #fff;
  letter-spacing: 1px
}

.btn3-1c:active:after,
.btn3-1c:hover:after {
  width: 100%
}

.cl-effect-11 {
  position: relative;
  display: inline-block
}

.cl-effect-11::before {
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  max-width: 0;
  color: #fff;
  content: attr(data-hover);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s
}

.cl-effect-11:active:before,
.cl-effect-11:hover:before {
  max-width: 100%
}

.cl-effect-12 {
  cursor: pointer;
  position: relative;
  display: inline-block;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.cl-effect-12::before {
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  max-width: 0;
  color: #0e83cd;
  content: attr(data-hover)
}

.cl-effect-12:active:before,
.cl-effect-12:hover:before {
  max-width: 100%
}

.MenuContainer {
  overflow: scroll;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../Assets/Menu/city-hill-hvar.webp) no-repeat center;
  background: -webkit-image-set(url(../../Assets/Menu/city-hill-hvar.webp) 1x);
  background: image-set(url(../../Assets/Menu/city-hill-hvar.jpg) 1x);
  background-size: cover;
  z-index: 1003;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.MenuContainer,
.NavContainerMobile {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.MenuContainer::-webkit-scrollbar,
.NavContainerMobile::-webkit-scrollbar {
  display: none
}

#navDescription,
#navigation {
  opacity: 0;
  position: relative
}

.NavContainerMobile {
  display: none;
  position: relative;
  height: 100%;
  min-height: 100%;
  width: 50%;
  float: left;
  text-align: left;
  background-color: rgba(40, 40, 40, .41)
}

.NavContainer {
  position: relative;
  height: 100%;
  min-height: 100%;
  width: 50%;
  float: left;
  text-align: left;
  background-color: rgba(40, 40, 40, .41)
}

.DetailsContainer {
  height: 100%;
  position: relative;
  width: 50%;
  float: left;
  background-color: rgba(255, 255, 255, .1)
}

.MenuLogo {
  margin-top: 60px;
  margin-bottom: 70px
}

.MenuItems {
  padding-bottom: 30px;
  letter-spacing: 6px;
  color: #ffa100
}

.accordion,
.accordion1 {
  position: relative;
  color: #d0a639;
  width: 100%;
  margin-top: 30px;
  text-align: left;
  transition: .4s;
  letter-spacing: 6px;
  height: 28px
}

.placeholder {
  position: relative;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease-out;
  letter-spacing: 6px;
  line-height: 30px;
  text-transform: uppercase
}

.MenuArrow {
  width: 11px;
  height: 26px;
  background: url(../../Assets/Menu/MenuArrow.png) center no-repeat;
  background-size: contain;
  float: left;
  margin-left: 20px;
  transition: all .5s
}

.MenuItem {
  display: inline-block;
  height: 28px;
  cursor: pointer
}

.active>.MenuArrow {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.placeholder.active {
  transition: overflow 1.5s ease .5s
}

.NavTextContainer {
  padding-left: 100px
}

.SubMenu>.WhiteDivider,
.accordion1>.WhiteDivider,
.accordion>.WhiteDivider {
  width: 0;
  height: 28px;
  position: absolute;
  top: 0;
  left: -80px;
  transition: all .3s
}

.MenuItem:hover+.WhiteDivider {
  width: 60px
}

@media screen and (max-height:710px) {

  .accordion,
  .accordion1 {
    margin-top: 10px
  }

  .navTextContainer {
    font-size: 20px
  }

  .SocialContainer1 {
    margin-top: 20px
  }
}

@media screen and (max-width:850px) {
  .MenuContainer {
    overflow: hidden
  }

  .NavContainerMobile {
    display: block;
    width: 100%;
    padding-left: 0;
    margin: auto;
    overflow: scroll
  }

  .NavContainer {
    display: none;
    width: 100%;
    padding-left: 0;
    margin: auto
  }

  .NavTextContainer {
    width: 300px;
    margin: auto;
    padding-left: 0
  }

  .DetailsContainer {
    display: none
  }
}

#ReservationEkran {
  overflow-x: scroll;
  position: fixed;
  top: 0;
  left: 0;
  background: #f8f7f2;
  max-width: 0;
  height: 100vh;
  display: none;
  z-index: 1003
}

#ReservationEkran {
  -ms-overflow-style: none;
  scrollbar-width: none
}

#ReservationEkran::-webkit-scrollbar {
  display: none
}

.fa {
  font-size: .5em
}

.hover {
  background: #eee
}

#about a {
  text-decoration: none
}

.text-center {
  text-align: center;
  position: relative;
  font-size: 40px;
  color: #495d58;
  height: 65px
}

.calContainer {
  position: relative;
  width: 33.33%;
  min-height: 850px;
  height: 100%;
  float: left
}

.borderCont {
  position: absolute;
  right: 0;
  height: 80%;
  width: 0;
  border-right: 1px solid #000;
  top: 50%;
  transform: translateY(-50%)
}

#mobileReservation {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-40px);
  display: none;
  opacity: 0
}

#mobileContainer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: auto;
  text-align: center
}

#left,
#left1,
#right,
#right1 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 26px
}

.past {
  color: #c3c3c3
}

.day,
.day1 {
  cursor: pointer
}

.day.past,
.day1.past {
  cursor: auto
}

.selected {
  background-color: #e6e6e6
}

#right,
#right1 {
  right: 10px;
  background: url(../../Assets/Menu/MenuArrow.png) center no-repeat
}

#left,
#left1 {
  background: url(../../Assets/Menu/MenuArrow_Left.png) center no-repeat;
  left: 10px
}

.dateContainer {
  width: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.dateInput {
  margin-top: 15px;
  display: block;
  cursor: pointer;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  border: none;
  color: #495d58
}

#t1,
#t2 {
  position: relative;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  max-width: 400px;
  padding: 20px;
  margin: auto
}

.reservationBttnContainer {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%
}

.reservationBookNowBttn {
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  color: #495d58;
  width: 240px;
  height: 46px;
  line-height: 50px;
  border: 1px solid #c7c6c2;
  letter-spacing: 1.5px
}

.mobileContainerTemp {
  top: 0 !important;
  transform: translateY(0) !important
}

#reservation1 {
  position: relative;
  margin-top: 40px
}

.noDisplay {
  display: none !important
}

.showDisplay {
  display: block !important
}

input:focus {
  outline: 0
}

#arriveCont {
  opacity: 0;
  transform: translateY(-40px)
}

#departCont {
  opacity: 0;
  transform: translateY(-40px)
}

#adultCont {
  opacity: 0;
  transform: translateY(-40px)
}

.accordion,
.accordion1 {
  position: relative;
  color: #ffa100;
  width: 100%;
  margin-top: 30px;
  text-align: left;
  transition: .4s;
  letter-spacing: 6px;
  height: 28px
}

.placeholder {
  position: relative;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease-out;
  letter-spacing: 6px;
  line-height: 30px;
  text-transform: uppercase
}

.MenuArrow {
  width: 11px;
  height: 26px;
  background: url(../../Assets/Menu/MenuArrow.png) center no-repeat;
  background-size: contain;
  float: left;
  margin-left: 20px;
  transition: all .5s
}

.MenuItem {
  display: inline-block;
  height: 28px;
  cursor: pointer
}

.active>.MenuArrow {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.placeholder.active {
  transition: overflow 1.5s ease .5s
}

.SubMenu>.WhiteDivider,
.accordion1>.WhiteDivider,
.accordion>.WhiteDivider {
  width: 0;
  height: 28px;
  position: absolute;
  top: 0;
  left: -80px;
  transition: all .3s
}

.MenuItem:hover+.WhiteDivider {
  width: 60px
}

.accordion {
  position: relative;
  color: #ffa100;
  width: 100%;
  margin-top: 30px;
  text-align: left;
  transition: .4s;
  letter-spacing: 6px;
  height: 28px
}

#footer {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative
}

.footerImg {
  background: gray;
  min-height: 900px;
  background: url(../../Assets/Footer/old-hill-city-chapel.webp) center;
;
  background-size: cover
}

.flex-container-footer {
  padding-top: 20px;
  margin: auto;
  justify-content: center;
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 1200px;
  padding-left: 30px;
  padding-right: 30px
}

.footerLogo {
  background-color: #000
}

#footerHome {
  text-align: center;
  cursor: pointer;
  display: inline-block
}

.footerNavItem {
  padding-bottom: 5px;
  color: #9a9a9a
}

.footerNavMainItem {
  padding-bottom: 20px;
  color: #d0a639
}

#footerReservations {
  margin-top: 0;
  letter-spacing: 4px;
  cursor: pointer
}

#footerContact {
  margin-top: 0;
  letter-spacing: 4px;
  cursor: pointer
}

.item3 {
  flex-grow: 1;
  max-width: 300px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  height: 340px
}

.itemtemp {
  flex-grow: 1;
  max-width: 300px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  height: 120px
}

@media screen and (max-width:1300px) {
  .flex-container-footer {
    flex-wrap: wrap
  }

  .itemtemp {
    height: 0
  }
}

@media screen and (max-width:1200px) {
  #footerContact {
    margin-top: 0
  }
}

@media screen and (max-width:450px) {
  .footerImg {
    min-height: 1400px
  }
}

@media screen and (max-width:600px) {
  .footerImg {
    min-height: 1600px !important
  }

  .item3 {
    height: auto;
    width: 100%;
    margin: auto;
    text-align: center;
    padding-bottom: 20px;
    padding-left: 0px !important
  }
}

@media screen and (min-width:451px) and (max-width:800px) {
  .BookStoryTitle {
    font-size: 130px
  }

  .NajveciNaslov {
    font-size: 71.66px
  }

  .BookStorySubtitle {
    font-size: 50px
  }

  .BookStorySmallTitle {
    font-size: 30px
  }

  #SecondTextContainer,
  #ThirdTextContainer {
    max-width: 400px
  }

  #SecondTextContainer>.LText,
  #ThirdTextContainer>.LText {
    font-size: 60px;
    max-width: 400px
  }

  .LetterText {
    font-size: 30px
  }

  .footerImg {
    min-height: 1200px
  }
}

@media screen and (min-width:801px) and (max-width:1000px) {
  .footerImg {
    min-height: 1200px
  }
}

@media screen and (min-width:1001px) and (max-width:1035px) {
  .footerImg {
    min-height: 1200px
  }
}

@media screen and (min-width:1036px) and (max-width:1200px) {
  .footerImg {
    min-height: 870px
  }
}

h1 {
  display: block;
  margin: 0;
  font-size: inherit;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 400
}

h2 {
  display: block;
  font-size: inherit;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 400
}

h3 {
  display: block;
  font-size: inherit;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 400
}