/*---------essentials---------*/

html {height: 100%; width: 100%;  text-align: center; background-image: url(img/bckg.jpg); background-repeat: no-repeat; background-attachment: fixed; 
background-size: cover; box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit; overflow:hidden; text-overflow:ellipsis;}

body {display: inline-block; height: 100%; max-width: 1100px; margin-left:auto; margin-right:auto;  font-family: CeraPRO-Regular;}
p {line-height: 150%; font-size: 100%;  padding:0; margin: 0 auto; text-align: justify;}
div a {display: block; text-decoration:none;}
a, a:visited {color: inherit;}
nav ul li a {text-decoration: none;}

/*---------menu---------*/

#menu {width: calc(75% - 50px); position: fixed; top: 0px; left: 50px; height: 40px; z-index: 1000; display: flex; padding: 0px; margin: 0px;}
   li {list-style-type: none; justify-content: space-between; line-height: 40px; font-size: 120%; font-weight: bold; width: 100%; height: 100%; text-align: center; }
     #m00 {display: none;}
     #m0 {background-color: black; color: #dcdcdc;}
     #m1 {background-color: black; color: #dcdcdc;}
     #m2 {background-color: black; color: #dcdcdc;}
     #m3 {background-color: black; color: #dcdcdc;}
     #m4 {background-color: black; color: #dcdcdc;}
  

         .fp-viewing-chapter0 #m0 {background-color: #dcdcdc; color: black; animation: menuanim 500ms ease-in-out 0s 1 normal;}
         .fp-viewing-chapter1 #m1 {background-color: #dcdcdc; color: black; animation: menuanim 500ms ease-in-out 0s 1 normal;}
         .fp-viewing-chapter2 #m2 {background-color: #dcdcdc; color: black; animation: menuanim 500ms ease-in-out 0s 1 normal;}
         .fp-viewing-chapter3 #m3 {background-color: #dcdcdc; color: black; animation: menuanim 500ms ease-in-out 0s 1 normal;}
         .fp-viewing-chapter4-0 #m4 {background-color: #dcdcdc; color: black; animation: menuanim 500ms ease-in-out 0s 1 normal;}
       

                 @keyframes menuanim {0% {transform: rotateX(0deg);}100% {transform: rotateX(360deg);}}


.dropdown {position: fixed; display: flex; width: 50%; height: 200px; top: 0px; left: 50%; z-index: 10;}
   .dropbtn {background-color: black; color: #dcdcdc; font-size: 120%; font-weight: bold;  position: absolute; width: 50%; height: 40px; top: 0px; left: 50%; border: none;}
   .dropdown-content {display: none; position: absolute; left: 0px; top: 40px; background-color: #dcdcdc; color: black; height: 160px; width: 100%; z-index: 10; 
                      font-weight: bold; align-items: center; border-bottom: 15px solid #414141; border-left: 15px solid dimgrey;}

                  
.hoverable {position: absolute; width: 50%; height: 40px; top: 0px; left: 50%; z-index: 1000; background-color: rgba(0, 0, 0, 0.6);}

      .dropdown:hover .dropdown-content {display: flex;}
      .dropdown:hover .dropbtn {background-color: #dcdcdc; color: black;}

.contactinfo {width: 30%;}  
.phonelink {color: blue; line-height: 30px;}
.reservationslink {color: blue; width: 70%; font-size: 250%;}

.flag {position: fixed; display: inline-block; width: 50px; top: 0px; left: 0px; z-index: 10;}

/*---------basic stuff---------*/

.section {height: 100vh; position: absolute; top: 0px; left: 0px; text-align: justify;}
    

.logobox {position: absolute; display: none; top: 35vh; left: 0vw; width: 100vw; height: 30vh; background-color: rgba(0, 0, 0, 0.4);}
.fp-viewing-chapter00 .logobox {display: block;}
.fp-viewing-chapter00 .logobox {animation: logoanim 2s ease-in-out 0s 1 normal forwards;} 
  @keyframes logoanim {0% {top: -35vh} 100% {top: 35vh}}
.logo {height: 90%;}

#boxes {color: black; background-color: #dcdcdc; position: absolute; display: flex; align-items: center;  border: 5px solid #dcdcdc;}
#images {position: absolute; border: 5px solid #dcdcdc;}

.box {width: 50%; height: 70%; left: 50%; top: 15%;}
.box1 {width: 65%; height: 25%; top: 5%; left: 35%;}
.box2 {width: 65%; height: 25%; top: 35%; left: 0%;}
.box3 {width: 65%; height: 25%; top: 65%; left: 35%;}

.box4 {width: 60%; height: 30%; top: 10%; left: 4%;}
.box5 {width: 28%; height: 25%; top: 40%; left: 36%; text-align: center;}
.box6 {width: 60%; height: 30%; top: 65%; left: 36%;}


.image0 {height: 70%; top: 15%; left: 0%;} 
.image1 {height: 25%; top: 5%; left: 0%;}
.image2 {height: 25%; top: 35%; right: 0%;}
.image3 {height: 25%; top: 65%; left: 0%;}
.image4 {height: 55%; top: 10%; left: 64%;}
.image5 {height: 55%; top: 40%; left: 4%;}

.image7 {height: 150px; top: 0;}
.image8 {height: 120px; top: 0;}
.image9 {height: 200px; top: 0;}
.image10 {height: 180px; top: 0;}


.window {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-image: url('img/wood.jpg');}
.window-inner {position: absolute; left: 15px; top: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background-color: #dcdcdc; padding: 2%; display: flex; align-items: center;}
.open-left {position: absolute; left: 0%; top: 0%; width: 50%; height: 100%; background-image: url('img/glare.jpg'); border: 10px solid #3d271c;}
.open-right {position: absolute; left: 50%; top: 0%; width: 50%; height: 100%; background-image: url('img/glare.jpg'); border: 10px solid #3d271c;}
.open-left1 {position: absolute; left: 0%; top: 0%; width: 50%; height: 100%; background-image: url('img/glare.jpg'); border: 10px solid #3d271c;}
.open-right1 {position: absolute; left: 50%; top: 0%; width: 50%; height: 100%; background-image: url('img/glare.jpg'); border: 10px solid #3d271c;}
.mobileclick {display: none;}

.fp-viewing-chapter0 .open-left{animation: winleft 2s ease-in-out 1 normal forwards;} 
.fp-viewing-chapter0 .open-right{animation: winright 2s ease-in-out 1 normal forwards;} 
.fp-viewing-chapter1 .open-left1 {animation: winleft 2s ease-in-out 1 normal forwards;} 
.fp-viewing-chapter1 .open-right1 {animation: winright 2s ease-in-out 1 normal forwards;}

.fp-viewing-chapter2 .open-left {animation: winleft 2s ease-in-out 1 normal forwards;} 
.fp-viewing-chapter2 .open-right {animation: winright 2s ease-in-out 1 normal forwards;}
  
    @keyframes winleft {0% {transform: perspective(1000px) rotateY(0deg); transform-style: preserve-3d; transform-origin: 0;} 100% {transform: perspective(1000px) rotateY(90deg); transform-origin: 0;}}
    @keyframes winright {0% {transform: perspective(1000px) rotateY(0deg); transform-style: preserve-3d; transform-origin: 100%;} 100% {transform: perspective(1000px) rotateY(-90deg); transform-origin: 100%;}}

.row {background-color: #dcdcdc; position: relative; margin-top: 2%; left: 0px; color: black; display: flex; justify-content: space-between; align-items: center; width: 100%; border: 5px solid #dcdcdc;}
.column {padding: 0 10px;}



.photobox{position: absolute; width: 100%; height: 80%; top: 0px; left: 0px; color: black; background-color: #dcdcdc; padding: 5px; display: table; vertical-align: middle; }
 
#landscape {width: 100%;}
#portrait {height: 100%;}

.restmobileimg {display: none;}
.villagemobileimg {display: none;}



/*---------------------Start of smaller screen version---------------------------*/

    /*------------------Mobile Portrait---------------------------*/



@media screen and (max-width:360px) and (max-aspect-ratio: 1/1){
.mobilehidden {display: none;}
#mobilehidden {display: none;}
body {width: calc(100% - 24px); position: absolute; left: 0px;}
p {font-size: 70%}
#menu {display: none;}	

.fp-viewing-chapter0 .flag{display: none;}
.fp-viewing-chapter1 .flag{display: none;}
.fp-viewing-chapter2 .flag{display: none;}
.fp-viewing-chapter3 .flag{display: none;}
.fp-viewing-chapter4-0 .flag{display: none;} .fp-viewing-chapter4-1 .flag{display: none;}  .fp-viewing-chapter4-2 .flag{display: none;}  .fp-viewing-chapter4-3 .flag{display: none;}  .fp-viewing-chapter4-4 .flag{display: none;}  .fp-viewing-chapter4-5 .flag{display: none;}.fp-viewing-chapter4-6 .flag{display: none;}.fp-viewing-chapter4-7 .flag{display: none;}.fp-viewing-chapter4-8 .flag{display: none;}.fp-viewing-chapter4-9 .flag{display: none;}.fp-viewing-chapter4-10 .flag{display: none;}.fp-viewing-chapter4-11 .flag{display: none;}.fp-viewing-chapter4-12 .flag{display: none;}.fp-viewing-chapter4-13 .flag{display: none;}


.dropdown {width: 100%; height: 250px; left: 0%; top: calc(100% - 250px);}
   .dropbtn {width: 100%; height: 50px; left: 0%;  top: calc(100% - 50px); font-size: 80%; background-color: black;}
   .dropdown-content {width: 100%; height: 200px; left: 0%; top: calc(100% - 250px); font-size: 80%; border-bottom: none; border-left: none; flex-direction: column;}
 
.phonelink {line-height: 25px;}

.section {height: calc(100% - 130px); top: 0px;}

.logo {width: 50%; margin: 0 auto;}
.logobox {height: 20vh; top: 40vh;}
  @keyframes logoanim {0% {top: -40vh} 100% {top: 40vh}}

.image0 {height: auto; width: 80%; left: 10%; border: 5px solid #e8e1a8;} 
.fp-viewing-chapter0 .image0 {animation: firstimageanim 1s ease-in-out 0s 1 normal; animation-delay: 1500ms;}
  @keyframes firstimageanim {0% {left: 15%;} 100% {left: 200%;}}         


.box {width: 90%; height: 75%; left: 5%; top: 10%;}
.fp-viewing-chapter0 .box {animation: firstboxanim 2700ms ease-in-out 0s 1 normal;}
  @keyframes firstboxanim {0% {left: -200%;} 100% {left: 5%;}}   

.fp-viewing-chapter0 .open-left{animation-delay: 2s;} 
.fp-viewing-chapter0 .open-right{animation-delay: 2s;}    


.image1 {top: 2%;}
.image2 {top: 32%;}
.image3 {top: 62%;}
.box1 {width: 40%; height: 25%; top: 2%; left: 60%;}
.box2 {width: 40%; height: 25%; top: 32%; left: 0%;}
.box3 {width: 40%; height: 25%; top: 62%; left: 60%;}

  
.fp-viewing-chapter1 .box1 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 1s;}
.fp-viewing-chapter1 .box2 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
.fp-viewing-chapter1 .box3 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 3s;}
   @keyframes box1anim {0% {width: 40%; color: #dcdcdc;} 90% {width: 100%; left: 0%; color: #dcdcdc;}  100% {width: 100%; left: 0%; color: black;}} 
  
.fp-viewing-chapter1 .window-inner {animation: box1transform 1s ease-in-out 0s 1 normal forwards; animation-delay: 4s;}
   @keyframes box1transform {0% {left: 5%; top: 5%; width: 90%; height: 90%; padding: 2%;} 100% {left: 0%; top: 0%; width: 100%; height: 100%; padding: 0%;}}      

.fp-viewing-chapter1 .open-left1{animation-delay: 4s;} 
.fp-viewing-chapter1 .open-right1{animation-delay: 4s;}   

  
.image4 {display: none;}
.image5 {display: none;}
.box4 {width: 100%; height: 17%; top: 2%; left: 0%;}
.box5 {display: none;}
.box6 {width: 100%; height: 25%; top: 22%; left: 0%; z-index: 10;}

.fp-viewing-chapter2 .window-inner {animation: box1transform 300ms ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
   @keyframes box1transform {0% {left: 5%; top: 5%; width: 90%; height: 90%; padding: 2%;} 100% {left: 0%; top: 0%; width: 100%; height: 100%; padding: 0%;}}


.image7 {display: none;}
.image8 {display: none;}
.image9 {display: none;}
.image10 {display: none;}

.restmobileimg {display: block; width: 70%; left: 15%; bottom: 50px; z-index: 5;}
.villagemobileimg {display: block; width: 90%; left: 5%; bottom: 50px; z-index: 5;}

.row {top: -20%;}
        
}





@media screen and (min-width:361px)and (max-width: 450px) and (max-aspect-ratio: 1/1){	

.mobilehidden {display: none;}
#mobilehidden {display: none;}
body {width: calc(100% - 24px); position: absolute; left: 0px;}
p {font-size: 75%}
#menu {display: none;}	

.fp-viewing-chapter0 .flag{display: none;}
.fp-viewing-chapter1 .flag{display: none;}
.fp-viewing-chapter2 .flag{display: none;}
.fp-viewing-chapter3 .flag{display: none;}
.fp-viewing-chapter4-0 .flag{display: none;} .fp-viewing-chapter4-1 .flag{display: none;}  .fp-viewing-chapter4-2 .flag{display: none;}  .fp-viewing-chapter4-3 .flag{display: none;}  .fp-viewing-chapter4-4 .flag{display: none;}  .fp-viewing-chapter4-5 .flag{display: none;}.fp-viewing-chapter4-6 .flag{display: none;}.fp-viewing-chapter4-7 .flag{display: none;}.fp-viewing-chapter4-8 .flag{display: none;}.fp-viewing-chapter4-9 .flag{display: none;}.fp-viewing-chapter4-10 .flag{display: none;}.fp-viewing-chapter4-11 .flag{display: none;}.fp-viewing-chapter4-12 .flag{display: none;}.fp-viewing-chapter4-13 .flag{display: none;}


.dropdown {width: 100%; height: 250px; left: 0%; top: calc(100% - 250px);}
   .dropbtn {width: 100%; height: 50px; left: 0%;  top: calc(100% - 50px); font-size: 80%; background-color: black;}
   .dropdown-content {width: 100%; height: 200px; left: 0%; top: calc(100% - 250px); font-size: 80%; border-bottom: none; border-left: none; flex-direction: column;}
 
.phonelink {line-height: 25px;}

.logo {width: 50%; margin: 0 auto;}
.logobox {height: 20vh; top: 40vh;}
  @keyframes logoanim {0% {top: -40vh} 100% {top: 40vh}}

.image0 {height: auto; width: 80%; left: 10%; border: 5px solid #e8e1a8;} 
.fp-viewing-chapter0 .image0 {animation: firstimageanim 1s ease-in-out 0s 1 normal; animation-delay: 1500ms;}
  @keyframes firstimageanim {0% {left: 15%;} 100% {left: 200%;}}         


.box {width: 90%; height: 70%; left: 5%; top: 10%;}
.fp-viewing-chapter0 .box {animation: firstboxanim 2700ms ease-in-out 0s 1 normal;}
  @keyframes firstboxanim {0% {left: -200%;} 100% {left: 5%;}}   

.fp-viewing-chapter0 .open-left{animation-delay: 2s;} 
.fp-viewing-chapter0 .open-right{animation-delay: 2s;}    


.image1 {height: 28%; top: 2%;}
.image2 {height: 26%;top: 33%;}
.image3 {height: 28%;top: 62%;}
.box1 {width: 40%; height: 28%; top: 2%; left: 60%;}
.box2 {width: 40%; height: 26%; top: 33%; left: 0%;}
.box3 {width: 40%; height: 28%; top: 62%; left: 60%;}

  
.fp-viewing-chapter1 .box1 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 1s;}
.fp-viewing-chapter1 .box2 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
.fp-viewing-chapter1 .box3 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 3s;}
   @keyframes box1anim {0% {width: 40%; color: #dcdcdc;} 90% {width: 100%; left: 0%; color: #dcdcdc;}  100% {width: 100%; left: 0%; color: black;}} 
  

.fp-viewing-chapter1 .open-left1{animation-delay: 4s;} 
.fp-viewing-chapter1 .open-right1{animation-delay: 4s;}   

  
.image4 {display: none;}
.image5 {display: none;}
.box4 {width: 100%; height: 20%; top: 2%; left: 0%;}
.box5 {display: none;}
.box6 {width: 100%; height: 28%; top: 23%; left: 0%; z-index: 10;}


.image7 {display: none;}
.image8 {display: none;}
.image9 {display: none;}
.image10 {display: none;}

.restmobileimg {display: block; width: 70%; left: 15%; bottom: 50px; z-index: 5;}
.villagemobileimg {display: block; width: 90%; left: 5%; bottom: 50px; z-index: 5;}

.row {top: -20%;}
        
}




@media screen and (min-width:451px)and (max-width: 650px) and (max-aspect-ratio: 1/1){	
.mobilehidden {display: none;}
#mobilehidden {display: none;}
body {width: calc(100% - 24px); position: absolute; left: 0px;}
p {font-size: 90%}
#menu {display: none;}	

.fp-viewing-chapter0 .flag{display: none;}
.fp-viewing-chapter1 .flag{display: none;}
.fp-viewing-chapter2 .flag{display: none;}
.fp-viewing-chapter3 .flag{display: none;}
.fp-viewing-chapter4-0 .flag{display: none;} .fp-viewing-chapter4-1 .flag{display: none;}  .fp-viewing-chapter4-2 .flag{display: none;}  .fp-viewing-chapter4-3 .flag{display: none;}  .fp-viewing-chapter4-4 .flag{display: none;}  .fp-viewing-chapter4-5 .flag{display: none;}.fp-viewing-chapter4-6 .flag{display: none;}.fp-viewing-chapter4-7 .flag{display: none;}.fp-viewing-chapter4-8 .flag{display: none;}.fp-viewing-chapter4-9 .flag{display: none;}.fp-viewing-chapter4-10 .flag{display: none;}.fp-viewing-chapter4-11 .flag{display: none;}.fp-viewing-chapter4-12 .flag{display: none;}.fp-viewing-chapter4-13 .flag{display: none;}


.dropdown {width: 100%; height: 250px; left: 0%; top: calc(100% - 250px);}
   .dropbtn {width: 100%; height: 50px; left: 0%;  top: calc(100% - 50px); font-size: 80%; background-color: black;}
   .dropdown-content {width: 100%; height: 200px; left: 0%; top: calc(100% - 250px); font-size: 80%; border-bottom: none; border-left: none; flex-direction: column;}
 
.phonelink {line-height: 25px;}

.section {height: calc(100% - 130px); top: 0px;}

.logo {width: 50%; margin: 0 auto;}
.logobox {height: 20vh; top: 40vh;}
  @keyframes logoanim {0% {top: -40vh} 100% {top: 40vh}}

.image0 {height: auto; width: 80%; left: 10%; border: 5px solid #e8e1a8;} 
.fp-viewing-chapter0 .image0 {animation: firstimageanim 1s ease-in-out 0s 1 normal; animation-delay: 1500ms;}
  @keyframes firstimageanim {0% {left: 15%;} 100% {left: 200%;}}         


.box {width: 90%; height: 75%; left: 5%; top: 10%;}
.fp-viewing-chapter0 .box {animation: firstboxanim 2700ms ease-in-out 0s 1 normal;}
  @keyframes firstboxanim {0% {left: -200%;} 100% {left: 5%;}}   

.fp-viewing-chapter0 .open-left{animation-delay: 2s;} 
.fp-viewing-chapter0 .open-right{animation-delay: 2s;}    


.image1 {top: 2%;}
.image2 {top: 32%;}
.image3 {top: 62%;}
.box1 {width: 40%; height: 25%; top: 2%; left: 60%;}
.box2 {width: 40%; height: 25%; top: 32%; left: 0%;}
.box3 {width: 40%; height: 25%; top: 62%; left: 60%;}

  
.fp-viewing-chapter1 .box1 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 1s;}
.fp-viewing-chapter1 .box2 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
.fp-viewing-chapter1 .box3 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 3s;}
   @keyframes box1anim {0% {width: 40%; color: #dcdcdc;} 90% {width: 100%; left: 0%; color: #dcdcdc;}  100% {width: 100%; left: 0%; color: black;}} 
  
.fp-viewing-chapter1 .window-inner {animation: box1transform 1s ease-in-out 0s 1 normal forwards; animation-delay: 4s;}
   @keyframes box1transform {0% {left: 5%; top: 5%; width: 90%; height: 90%; padding: 2%;} 100% {left: 0%; top: 0%; width: 100%; height: 100%; padding: 0%;}}      

.fp-viewing-chapter1 .open-left1{animation-delay: 4s;} 
.fp-viewing-chapter1 .open-right1{animation-delay: 4s;}   

  
.image4 {display: none;}
.image5 {display: none;}
.box4 {width: 100%; height: 17%; top: 2%; left: 0%;}
.box5 {display: none;}
.box6 {width: 100%; height: 25%; top: 22%; left: 0%; z-index: 10;}

.fp-viewing-chapter2 .window-inner {animation: box1transform 300ms ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
   @keyframes box1transform {0% {left: 5%; top: 5%; width: 90%; height: 90%; padding: 2%;} 100% {left: 0%; top: 0%; width: 100%; height: 100%; padding: 0%;}}


.image7 {display: none;}
.image8 {display: none;}
.image9 {display: none;}
.image10 {display: none;}

.restmobileimg {display: block; width: 70%; left: 15%; bottom: 50px; z-index: 5;}
.villagemobileimg {display: block; width: 90%; left: 5%; bottom: 50px; z-index: 5;}

.row {top: -20%;}

}




@media screen and (min-width:651px)and (max-width: 850px) and (max-aspect-ratio: 1/1){	
.mobilehidden {display: none;}
#mobilehidden {display: none;}
body {width: 90%; position: absolute; left: 5%;}
p {font-size: 100%}

#menu {width: calc(100% - 50px); font-size: 80%;}


.dropdown {width: 100%; height: 250px; left: 0%; top: calc(100% - 250px);}
   .dropbtn {width: 100%; height: 50px; left: 0%;  top: calc(100% - 50px); font-size: 80%; background-color: black;}
   .dropdown-content {width: 100%; height: 200px; left: 0%; top: calc(100% - 250px); font-size: 80%; border-bottom: none; border-left: none; flex-direction: column;}
 
.phonelink {line-height: 25px;}

.section {height: calc(100% - 130px); top: 0px;}

.logo {width: 50%; margin: 0 auto;}
.logobox {height: 20vh; top: 40vh;}
  @keyframes logoanim {0% {top: -40vh} 100% {top: 40vh}}

.image0 {height: auto; width: 60%; left: 20%; top: 15%; border: 5px solid #e8e1a8;} 
.fp-viewing-chapter0 .image0 {animation: firstimageanim 1s ease-in-out 0s 1 normal; animation-delay: 1500ms;}
  @keyframes firstimageanim {0% {left: 15%;} 100% {left: 200%;}}         


.box {width: 80%; height: 70%; left: 10%; top: 15%;}
.fp-viewing-chapter0 .box {animation: firstboxanim 2700ms ease-in-out 0s 1 normal;}
  @keyframes firstboxanim {0% {left: -200%;} 100% {left: 5%;}}   

.fp-viewing-chapter0 .open-left{animation-delay: 2s;} 
.fp-viewing-chapter0 .open-right{animation-delay: 2s;}    


.image1 {top: 50px;}
.image2 {top: 35%;}
.image3 {top: 65%;}
.box1 {width: 40%; height: 25%; top: 50px; left: 60%;}
.box2 {width: 40%; height: 25%; top: 35%; left: 0%;}
.box3 {width: 40%; height: 25%; top: 65%; left: 60%;}

  
.fp-viewing-chapter1 .box1 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 1s;}
.fp-viewing-chapter1 .box2 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 2s;}
.fp-viewing-chapter1 .box3 {animation: box1anim 1s ease-in-out 0s 1 normal forwards; animation-delay: 3s;}
   @keyframes box1anim {0% {width: 40%; color: #dcdcdc;} 90% {width: 100%; left: 0%; color: #dcdcdc;}  100% {width: 100%; left: 0%; color: black;}} 
  

.fp-viewing-chapter1 .open-left1{animation-delay: 4s;} 
.fp-viewing-chapter1 .open-right1{animation-delay: 4s;}   

  
.image4 {display: none;}
.image5 {display: none;}
.box4 {width: 80%; height: 17%; top: 50px; left: 10%;}
.box5 {display: none;}
.box6 {width: 80%; height: 25%; top: 25%; left: 10%; z-index: 10;}


.image7 {display: none;}
.image8 {display: none;}
.image9 {display: none;}
.image10 {display: none;}

.restmobileimg {display: block; width: 50%; left: 25%; bottom: 50px; z-index: 5;}
.villagemobileimg {display: block; width: 80%; left: 10%; bottom: 50px; z-index: 5;}

.row {top: -20%; width: 80%; left: 10%;}

.photobox{ width: 100%; height: calc(100%-80px); top: 40px;}

}







 /*------------------Mobile Landscape---------------------------*/


@media screen and (max-width:850px)and (min-aspect-ratio: 1/1){	
.mobilehidden {display: none;}
#mobilehidden {display: none;}
.landscapehidden {display: none;}
body {width: 95%; position: absolute; left: 0%;}
p {font-size: 70%}

#menu {width: calc(100% - 40px); height: 30px; font-size: 70%; left: 40px;}
.flag {width: 40px;}

.dropdown {width: 60%; height: 230px; left: 0%; top: calc(100% - 230px);}
   .dropbtn {width: 100%; height: 30px; left: 0%;  top: calc(100% - 30px); font-size: 80%; background-color: black;}
   .dropdown-content {width: 100%; height: 200px; left: 0%; top: calc(100% - 230px); font-size: 80%; border-bottom: none; border-left: none; flex-direction: column;}
 
.phonelink {line-height: 25px;}

.box {width:75%; height: 65%; left:25%;}
.box1 {width: 80%; height: 25%; top: 7%; left: 20%;}
.box2 {width: 80%; height: 25%; top: 36%; left: 0%;}
.box3 {width: 80%; height: 25%; top: 65%; left: 20%;}

.box4 {width: 100%; height: 25%; top: 15%; left: 0%;}
.box5 {width: 100%; height: 10%; top: 45%; left: 0%;}
.box6 {width: 100%; height: 25%; top: 60%; left: 0%;}


.image0 {height: 65%; top: 15%; left: 0%;} 
.image1 {height: 25%; top: 7%; left: 0%;}
.image2 {height: 25%; top: 36%; right: 0%;}
.image3 {height: 25%; top: 65%; left: 0%;}
.image4 {display: none;}
.image5 {display: none;}

.image7 {display: none;}
.image8 {display: none;}
.image9 {display: none;}
.image10 {display: none;}


.window {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-image: url('img/wood.jpg');}
.window-inner {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.open-left {display: none;}
.open-right {display: none;}
.open-left1 {display: none;}
.open-right1 {display: none;}

.photobox{ width: 100%; height: calc(100%-80px); top: 40px;}
}










/*---------------------Tablet---------------------------*/




@media screen and (min-width:851px)and (max-width: 1100px){	
body {width: 96%;}
p {font-size: 85%;}
li {font-size: 90%;  white-space: nowrap;}
.dropbtn {font-size: 90%; width: 40%; left: 60%; }

.dropdown {width: 70%; left: 30%;}
  
   .dropdown-content {font-size: 80%;}


.box {left: 45%;}
.image0{left: 5%;}
.box5 {width: 33%; left: 31%;}
.box6 {width: 61%; left: 31%;}
.image9 {height: 150px;}
.image10 {height: 150px;}

}




@media screen and (min-width:1101px)and (max-height: 880px){	
li {font-size: 100%;  white-space: nowrap;}
p {font-size: 90%;}
.dropbtn {font-size: 100%;}
.box {width: 55%; left: 45%}
.image7 {height: 120px; top: 0;}
.image8 {height: 100px; top: 0;}
.image9 {height: 170px; top: 0;}
.image10 {height: 130px; top: 0;}

}