Initial

assets/css/appt.css

@@ -0,0 +1,12 @@
+@import "core.css";
+@import "layout.css";
+@import "header.css";
+@import "footer.css";
+
+@import "links.css";
+@import "buttons.css";
+@import "lists.css";
+@import "swiper.css";
+@import "components.css";
+@import "utility.css";
+@import "media.css";

assets/css/buttons.css

@@ -0,0 +1,81 @@
+.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--color-white);
+	border-radius: var(--border-radius);
+	font-size: 1.25rem;
+  color: var(--color-black);
+  padding: 0.25rem 0.75rem;
+  border: 0.0625rem solid var(--color-gray);
+	font-family: var(--font-primary);
+  text-decoration: none;
+	box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0.0625rem 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
+  z-index: 0;
+  cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  background-size: 220% auto;
+  background-image: linear-gradient(to right, #ffffff 0%, #eeeded 60%, #ffffff 100%);
+  border-radius: var(--border-radius);
+  -o-border-radius: var(--border-radius);
+  -ms-border-radius: var(--border-radius);
+  -moz-border-radius: var(--border-radius);
+  -webkit-border-radius: var(--border-radius);
+  transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+}
+
+.button:hover {
+	border: 0.0625rem solid var(--color-gray);
+	box-shadow: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4);
+}
+
+.button:hover::before {
+  background-position: right center;
+}
+
+.button:active {
+	box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.4);
+}
+
+
+.button--icon,
+.button--back,
+.button--gallery {
+	display: flex;
+  align-items: center;
+	justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.button--back {
+  padding: 0.375rem 0.875rem;
+  gap: 0.25rem;
+}
+
+.button--gallery {
+  margin: 0 0 0 auto;
+  padding: 0.25rem 0.875rem;
+  gap: 0.375rem;
+}
+
+.button--gallery svg {
+  margin-left: -0.25rem;
+}

assets/css/components.css

@@ -0,0 +1,47 @@
+.gallery {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.375rem;
+  filter: blur(3rem);
+  width: calc(100% - 3rem);
+  height: calc(100% - 3rem);
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transition: 0.625s filter linear, 0.625s -webkit-filter linear;
+  -o-transition: 0.625s -o-filter linear;
+  -ms-transition: 0.625s -ms-filter linear;  
+  -moz-transition: 0.625s -moz-filter linear;
+  -moz-transition: 0.625s filter linear;
+  -webkit-transition: 0.625s -webkit-filter linear;
+}
+
+.gallery__item img {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 16/9;
+  cursor: pointer;
+}
+
+.preview {
+  position: absolute;
+  top: calc(50% - 2rem);
+  background: var(--color-white);
+  box-shadow: var(--shadow-outset);
+  cursor: pointer;
+}
+
+.preview:hover {
+  background: var(--color-white-100);
+}
+
+.preview--prev {
+  left: 0;
+  padding: 1.25rem 1rem 1.25rem 1.5rem;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.preview--next {
+  right: 0;
+  padding: 1.25rem 1.5rem 1.25rem 1rem;
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}

assets/css/core.css

@@ -0,0 +1,111 @@
+:root {
+	--font-primary: 'Merienda', cursive;
+	--font-secondary: 'Kaushan Script', cursive;
+	--font-tertiary: 'Dancing Script', cursive;
+
+	--color-white: #ffffff;
+  --color-white-100: #f1f1f1;
+  --color-gray: #898989;
+	--color-black: #101010;
+
+	--border-radius: 0.25rem;
+	--header-shadow: 0rem 0.25rem 1rem -0.125rem rgb(0 0 0 / 30%);
+
+  --shadow-inset: inset 0 0 0.5rem var(--color-gray);
+  --shadow-outset: 0 0 0.5rem var(--color-gray);
+}
+
+body {
+	margin: 0;
+	overflow: overlay;
+	font-family: var(--font-primary);
+  background: var(--color-white-100);
+  height: 100vh;
+}
+
+body.noscroll {
+	overflow-y: hidden;
+}
+
+body svg {
+  overflow: visible;
+}
+
+br {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+/* ::-webkit-scrollbar-track {
+  background: var(--color-white);
+} */
+
+::-webkit-scrollbar-thumb {
+  border: 0.125rem solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 5rem;
+  background-color: var(--color-black);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-gray);
+}
+
+.close {
+  display: none;
+  position: absolute;
+  top: -0.1875rem;
+  right: -0.1875rem;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.close:hover svg{
+  fill: var(--color-gray);
+}
+
+.close--preview {
+  display: block;
+  top: 0.25rem;
+  right: 0.25rem;
+}
+
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5rem;
+  height: 5rem;
+  transform: translate(-50%,-50%);
+}
+.loader div {
+  position: absolute;
+  top: 2rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background: var(--color-gray);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loader div:nth-child(1) {
+  left: 0.5rem;
+  animation: loader-one 0.6s infinite;
+}
+.loader div:nth-child(2) {
+  left: 0.5rem;
+  animation: loader-two 0.6s infinite;
+}
+.loader div:nth-child(3) {
+  left: 2rem;
+  animation: loader-two 0.6s infinite;
+}
+.loader div:nth-child(4) {
+  left: 3.5rem;
+  animation: loader-three 0.6s infinite;
+}
+@keyframes loader-one {0% {transform: scale(0);}100% {transform: scale(1);}}
+@keyframes loader-two {0% {transform: translate(0, 0);}100% {transform: translate(1.5rem, 0);}}
+@keyframes loader-three {0%{transform: scale(1);}100%{transform: scale(0);}}

assets/css/footer.css

@@ -0,0 +1,18 @@
+.footer {
+	display: flex;
+	justify-content: center;
+	padding-block: 2rem 5rem;
+	background: var(--color-white);
+}
+
+.footer__content .title {
+	text-decoration: underline;
+}
+
+.footer__content .link {
+	display: block;
+}
+
+.footer__content ul + ul {
+	margin-top: 1.5rem;
+}

assets/css/header.css

@@ -0,0 +1,86 @@
+.header {
+	position: sticky;
+	top: 0;
+	left: 0;
+	width: 100%;
+  height: 5rem;
+	background-color: var(--color-white);
+	box-shadow: var(--header-shadow),var(--shadow-inset);
+	margin-bottom: -5rem;
+	z-index: 10;
+}
+
+.header.is-open {
+  box-shadow: unset;
+}
+
+.header.is-open .header__mobile {
+  display: block;
+  position: fixed;
+}
+
+.header__section {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+  height: 100%;
+}
+
+.header__mobile {
+  display: none;
+  width: 100%;
+  height: calc(100% - 4.75rem);
+  background-color: var(--color-white);
+  z-index: 20;
+}
+
+.header__button {
+	position: relative;
+	border: 0;
+	background: transparent;
+	padding: 2rem 2rem;
+}
+
+.header__button > span{
+    display: block;
+    position: absolute;
+    height: 0.125rem;
+    width: 1.625rem;
+    background: var(--color-black);
+    opacity: 1;
+    left: calc(50% - 0.8125rem);
+	border-radius: 10rem;
+    transform: rotate(0deg);
+    transition: all 0.3s ease;
+}
+
+.header__button > span:nth-child(1) {
+	top: calc(50% - 0.4375rem);
+}
+
+.header__button > span:nth-child(2) {
+	top: calc(50% - 0.0625rem);
+}
+
+.header__button > span:nth-child(3) {
+	top: calc(50% - 0.0625rem);
+}
+
+.header__button > span:nth-child(4) {
+	top: calc(50% + 0.3125rem);
+}
+
+.header__button.is-active > span:nth-child(1),
+.header__button.is-active > span:nth-child(4) {
+  width: 0%;
+  left: 50%;
+}
+
+.header__button.is-active > span:nth-child(2) {
+  transform: rotate(45deg);
+}
+
+.header__button.is-active > span:nth-child(3) {
+  transform: rotate(-45deg);
+}

assets/css/layout.css

@@ -0,0 +1,290 @@
+.container {
+	max-width: 80rem;
+	margin-inline: auto;
+}
+
+.section {
+	position: relative;
+}
+
+.section--block {
+  width: 100vw;
+  height: calc(100% - 5rem);
+  overflow: hidden;
+}
+
+.section__intro {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: calc(100vh - 5rem);
+  display: flex;
+  flex-direction: column-reverse;
+	background: var(--color-white-100);
+	transition: left 1.25s ease-in-out;
+}
+
+.section__picture {
+  width: 100vw;
+  max-height: 18.75rem;
+  height: auto;
+	object-fit: cover;
+}
+
+.section__content {
+	overflow-y: auto;
+  margin-block: 0 0.75rem;
+}
+
+.section__footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 0.875rem;
+  gap: 1rem;
+}
+
+.section__footer iframe{
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+  box-shadow: var(--shadow-outset);
+}
+
+.section__footer p {
+  display: none;
+  margin: auto 0;
+  text-align: justify;
+}
+
+.section__footer div:last-child {
+  display: flex;
+  flex-direction: column;
+}
+
+.section__welcome {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+  padding: 2rem;
+}
+
+.section__welcome,
+.section__left,
+.section__right {
+  box-shadow: var(--shadow-inset);
+}
+
+.section__welcome .title {
+	font-size: 2rem;
+	text-decoration: underline;
+  margin-block: 0;
+}
+
+.section--badges {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: inset 0 -0.5rem 0.75rem #c9c9c9;
+	border-top: 0.0625rem solid #aaaaaa;
+}
+
+.section__badges {
+  text-align: center;
+	background: var(--color-white);
+	border-radius: 0.25rem;
+	padding: 3rem 2rem;
+  margin: 2rem;
+	box-shadow: 0.0625rem 0.0625rem 0.5rem rgba(0, 0, 0, 0.2), 0.0625rem 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
+}
+
+.section__badges .title {
+  font-size: 0.875rem;
+  margin-block: 0.25rem;
+}
+
+.section__badges p {
+  font-size: 0.875rem;
+  margin-block: 0;
+}
+
+.section__badges div + div {
+  margin-top: 2rem;
+}
+
+.section__header {
+	display: flex;
+  align-items: start;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 2rem;
+  line-height: 1.15;
+}
+
+.section__header .title {
+  margin-block: 0 0.75rem;
+}
+
+.section__links {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.section__links .button {
+  width: 10rem;
+  justify-content: center;
+}
+
+.section__left,
+.section__right {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  width: calc(100vw - 3rem);
+	height: calc(100% - 3rem);
+  background: var(--color-white-100);
+  transition: all 1.25s ease-in-out;
+  border-left: 0.0625rem solid var(--color-gray);
+}
+
+.section__right .list{
+  font-size: 0.875rem;
+}
+
+.section__right .list + .list{
+  margin-top: 0.75rem;
+}
+
+.section__right li+li{
+  margin-top: 0.125rem;
+}
+
+.section__left {
+  left: -100%;
+}
+
+.section__gallery {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 8rem;
+  height: 8rem;
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-outset);
+  transform: translate(-50%,-50%);
+  z-index: 1;
+  transition: all 1.25s ease;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.section__gallery::-webkit-scrollbar {
+  display: none;
+}
+
+.section__gallery.is-open {
+  display: flex;
+}
+
+.section__gallery.loaded {
+  width: 95%;
+  height: 95%;
+}
+
+.section__gallery.loaded .loader{
+  opacity: 0;
+}
+
+.section__gallery.loaded .close{
+  display: block;
+}
+
+.section__gallery.loaded .gallery{
+  filter: blur(0);
+}
+
+.section--preview {
+  position: fixed;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-white-100);
+  z-index: 10;
+}
+
+.section--preview.horizontal .close--preview {
+  left: 0.25rem;
+  right: unset;
+}
+
+.section--preview.horizontal img {
+  width: 90vh;
+  height: 90vw;
+  transform: rotate(-90deg);
+}
+
+.section--preview.horizontal .preview {
+  left: calc(50% - 3.25rem);
+  transform: rotate(-90deg);
+}
+
+.section--preview.horizontal .preview--prev {
+  top: unset;
+  bottom: 0;
+}
+
+.section--preview.horizontal .preview--next {
+  top: 0;
+  right: unset;
+}
+
+.section--preview.is-open {
+  display: flex;
+}
+
+.section--preview img {
+  width: 90%;
+  max-width: 100rem;
+  height: 90%;
+  max-height: 56.25rem;
+  object-fit: cover;
+  box-shadow: var(--shadow-outset);
+}
+
+.section--switch .section__intro{
+  flex-direction: column;
+}
+
+.section--switch .section__left {
+  left: -100%;
+}
+
+.section--switch .section__right {
+  left: 100%;
+}
+
+.section__control {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.section__price {
+  overflow-y: auto;
+  margin-bottom: 0.625rem;
+}

assets/css/links.css

@@ -0,0 +1,45 @@
+.link {
+	color: var(--color-black);
+	display: inline-flex;
+	align-items: center;
+	text-decoration: none;
+  cursor: pointer;
+}
+
+.link--underline {
+  text-decoration: underline;
+}
+
+.link--underline:hover {
+  text-decoration: none;
+}
+
+.link--logo {
+	font-size: clamp(1rem,2.5vw,2rem);
+	gap: 1.25rem;
+}
+
+.link--logo img {
+	padding: 0.5rem 0 0.5rem 0.75rem;
+}
+
+.list--dropdown .link {
+  justify-content: center;
+  width: calc(100% - 0.75rem);
+  font-size: 1.25rem;
+  padding: 0.375rem;
+}
+
+.list--dropdown .link:hover {
+  opacity: 0.6;
+}
+
+.link--socials {
+  margin-right: 1rem;
+  border-radius: 1rem;
+  box-shadow: var(--shadow-outset);
+}
+
+.link--socials:hover {
+  scale: 0.95;
+}

assets/css/lists.css

@@ -0,0 +1,101 @@
+.list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.list--menu {
+	display: none;
+	font-size: 1.5rem;
+}
+
+.list--menu > li {
+	position: relative;
+	display: flex;
+	width: 8.75rem;
+	height: 5rem;
+}
+
+.list--menu > li:hover .header__dropdown {
+  height: 9.375rem;
+}
+
+.list--menu .header__dropdown {
+	position: absolute;
+	top: 4rem;
+	width: 8.75rem;
+	height: 0;
+	background: var(--color-white);
+	transition: .3s ease;
+	border-radius: 0 0 var(--border-radius) var(--border-radius);
+  box-shadow: 0rem 0.75rem 0.75rem -0.125rem rgb(0 0 0 / 30%);
+	overflow: hidden;
+}
+
+.list--menu > li + li {
+	margin-left: 0.5rem;
+}
+
+.list--menu > li > a {
+	position: relative;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.list--menu > li > a::after {
+	content: '';
+	position: absolute;
+  left: 0;
+  bottom: 1rem;
+  width: 100%;
+	height: 0.625rem;
+  background: no-repeat 50% 70%;
+  background-image: url("../../img/underline.webp");
+  background-size: 65% 0.4375rem;
+	transition: opacity 0.15s;  
+	opacity: 0; 
+}
+
+.list--menu li:hover > a::after{
+  opacity: 1;
+}
+
+.list--dropdown {
+	padding-top: 1rem;
+}
+
+.list--object {
+	font-size: 0.875rem;
+}
+
+.list--object li+li {
+  margin-top: 1rem;
+}
+
+.section__right .list--dot {
+	list-style-type: circle;
+  margin-left: 1.375rem;
+  font-size: 0.6875rem;
+}
+
+.list--mobile {
+	text-align: center;
+	font-size: 1.375rem;
+	border-top: 0.0625rem solid var(--color-black);
+    padding-top: 0.75rem;
+}
+
+.list--mobile .link {
+  padding-inline: 3rem;
+}
+
+.list--mobile li + li {
+	margin-top: 0.375rem;
+}
+
+.link--title {
+	font-size: 1.75rem;
+	font-weight: bold;
+	text-decoration: underline;
+}

assets/css/media.css

@@ -0,0 +1,173 @@
+@media screen and (min-width: 40.0625rem) {
+  br {
+    display: block;
+  }
+
+  .section__links {
+    align-items: start;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0;
+    width: 100%;
+  }
+
+  .section__links--events {
+    justify-content: start;
+    gap: 1.5rem;
+  }
+
+  .section__links button {
+    width: unset;
+  }
+
+  .section__links .button {
+    width: unset;
+  }
+}
+
+@media screen and (min-width: 50.0625rem) {
+  .show-medium {
+    display: block;
+  }
+
+  .swiper__content {
+    left: unset;
+    right: 10%;
+    bottom: 10%;
+    padding: 1rem 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: -0.375rem -0.375rem 0.625rem rgba(0, 0, 0, 0.4), 0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.4);
+  }
+
+  .swiper__content .title{
+    height: unset;
+    font-size: 3rem;
+  }
+
+  .gallery {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .swiper__image {
+    object-position: 20% 0%;
+  }
+
+  .section__badges {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    width: 100%;
+    max-width: 81.25rem;
+  }
+
+  .section__badges div + div {
+    margin-top: 0;
+  }
+
+  .section--badges {
+    height: 30rem;
+  }
+
+  .list--menu {
+    display: flex;
+  }
+
+  .header__button {
+    display: none;
+  }
+
+  .footer__content {
+    display: flex;
+    justify-content: space-between;
+    min-width: 40rem;
+  }
+}
+
+@media screen and (min-width: 75.0625rem) {
+  .section--switch .section__intro {
+    flex-direction: row;
+  }
+
+  .close--preview {
+    top: 2rem;
+    right: 1rem;
+  }
+
+  .section--block {
+    height: 40rem;
+    max-height: calc(100vh - 5rem);
+  }
+
+  .section__intro {
+    height: 100%;
+    flex-direction: row;
+  }
+
+  .section__left,
+  .section__right {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: calc(50% - 6.5rem);
+    height: calc(100% - 6.5rem);
+    padding: 3.25rem;
+  }
+
+  .section__right .list{
+    font-size: 1rem;
+  }
+
+  .section__right .list + .list{
+    margin-top: 1.25rem;
+  }
+
+  .section__left {
+    left: -50%;
+  }
+
+  .section--switch .section__left {
+    left: 0%;
+  }
+
+  .section__picture {
+    width: 50vw;
+    height: 100%;
+    max-height: 100%;
+    z-index: 1;
+  }
+
+  .section__welcome {
+    min-height: 25rem;
+  }
+
+  .gallery {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  .footer__content {
+    min-width: 50rem;
+  }
+}
+
+@media screen and (min-width: 91.375rem) {
+  .hide-text {
+    display: none;
+  }
+
+  .section__footer p {
+    display: block;
+  }
+
+  .section__footer iframe {
+    max-width: unset;
+  }
+}
+
+@media screen and (min-width: 100.0625rem) {
+  .close--preview {
+    right: 2.5%;
+  }
+
+  .swiper__content {
+    bottom: 20%;
+  }
+}

assets/css/swiper.css

@@ -0,0 +1,58 @@
+.swiper {
+	position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.swiper__image {
+  width: 100vw;
+  height: 100%;
+	object-fit: cover;
+  object-position: 33% 0%;
+}
+
+.swiper__content {
+	position: absolute;
+  bottom: 0;
+  z-index: 1;
+  left: 0;
+  right: 0;
+	background: var(--color-white);
+	padding: 1rem 0 2rem;
+	font-size: 2rem;
+}
+
+.swiper__content .title{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 4.5rem;
+  font-size: 2.25rem;
+  line-height: 1;
+	margin-block: 0 1rem;
+}
+
+.swiper__links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.swiper__slide {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  transition: left 1.25s ease-in-out;
+}
+
+.swiper__slide:first-child {
+  left: 0;
+}
+
+.swiper__slide:last-child {
+  left: -100%;
+}

assets/css/utility.css

@@ -0,0 +1,3 @@
+.show-medium {
+  display: none;
+}

assets/js/app.js

@@ -0,0 +1,438 @@
+$(document).ready(function(){
+  $('a').on('click', function(event) {
+    if (this.hash !== "") {
+      event.preventDefault();
+      var hash = this.hash;
+      $('html, body').animate({
+        scrollTop: $(hash).offset().top - 80
+      }, 800, function(){
+        window.location.hash = hash;
+      });
+    }
+  });
+});
+
+$(function() {
+  $(window).on('resize', function(e) {
+    if (screen.width < screen.height){
+      $('.section--preview').addClass('horizontal');
+    }else{
+      $('.section--preview').removeClass('horizontal');
+    }
+  });
+})
+
+init();
+
+function init() {
+  let state = 0;
+
+  if (screen.width < screen.height){
+    $('.section--preview').addClass('horizontal');
+  }else{
+    $('.section--preview').removeClass('horizontal');
+  }
+
+  $('.js-prev-slide').click(function() {
+    if(state - 1 == -1){state = 2;}else{state = state - 1;}
+    swiper(state,0);
+  });  
+  $('.js-next-slide').click(function() {
+    if(state + 1 == 3){state = 0;}else{state = state + 1;}
+    swiper(state,1);
+  });
+
+  $('.js-menu-object').click(function() {
+    closeSequence($('body').find('.section--block' + $(this).attr('href')));
+  });
+  $('.js-menu-detail').click(function() {
+    menuControl($('body').find('.section--block' + $(this).attr('href')), "detail");
+  });
+  $('.js-menu-gallery').click(function() {
+    menuControl($('body').find('.section--block' + $(this).attr('href')), "gallery");
+  });
+  $('.js-menu-price').click(function() {
+    menuControl($('body').find('.section--block' + $(this).attr('href')), "price");
+  });
+
+  $('.js-left-open').click(function() {
+    let position;
+    if (screen.width > 1200){position = 50;}else{position = 0;}
+    if($(this).closest('.section').hasClass('section--switch')){
+      $(this).closest('.section').find('.section__left').css('left',position + '%');
+    }else{
+      $(this).closest('.section').find('.section__left').css('left','0%');
+    }
+  });
+  $('.js-left-close').click(function() {
+    let position1;
+    let position2;
+    if (screen.width > 1200){position1 = 0;position2 = -50;}else{position1 = -100;position2 = -100;}
+    if($(this).closest('.section').hasClass('section--switch')){
+      $(this).closest('.section').find('.section__left').css('left',position1 + '%');
+    }else{
+      $(this).closest('.section').find('.section__left').css('left',position2 + '%');
+    }
+  });
+  $('.js-gallery-open').click(function() {
+    const x = $(this).closest('.section').find('.section__gallery');
+    x.addClass('is-open');
+    if(!x.hasClass('loaded')){loadGallery(this,x.attr('data-object'),x.attr('data-items'));}
+  });
+  $('.js-gallery-close').click(function() {
+    $(this).closest('.section').find('.section__gallery').removeClass('is-open');
+  });
+  $('.js-right-open').click(function() {
+    let position;
+    if (screen.width > 1200){position = 50;}else{position = 0;}
+    if($(this).closest('.section').hasClass('section--switch')){
+      $(this).closest('.section').find('.section__right').css('left',position + '%');
+    }else{
+      $(this).closest('.section').find('.section__right').css('left','0%');
+    }
+  });
+  $('.js-right-close').click(function() {
+    let position;
+    if (screen.width > 1200){position = 50}else{position = 100;}
+    if($(this).closest('.section').hasClass('section--switch')){
+      $(this).closest('.section').find('.section__right').css('left','100%');
+    }else{
+      $(this).closest('.section').find('.section__right').css('left',position + '%');
+    }
+  });
+
+  $('.js-preview-close').click(function() {
+    $('body').removeClass('noscroll');
+    $('body').find('.section--preview').removeClass('is-open');
+  });
+
+  $('.js-preview-prev').click(function() {
+    let data = $(this).closest('.section--preview');
+    let x = Number(data.attr('data-object'));
+    let y = Number(data.attr('data-item'));
+    let z = Number(data.attr('data-items'));
+    galleryControl(x,0,y,z);
+  });
+
+  $('.js-preview-next').click(function() {
+    let data = $(this).closest('.section--preview');
+    let x = Number(data.attr('data-object'));
+    let y = Number(data.attr('data-item'));
+    let z = Number(data.attr('data-items'));
+    galleryControl(x,1,y,z);
+  });
+
+  $('.js-menu-button').click(function() {
+    if($(this).hasClass('is-active')){
+      $(this).removeClass('is-active');
+      $('body').removeClass('noscroll');
+      $('body').find('.header').removeClass('is-open');
+    }else{
+      $(this).addClass('is-active');
+      $('body').addClass('noscroll');
+      $('body').find('.header').addClass('is-open');
+    }
+  });
+
+  $('.js-menu-close').click(function() {
+    $('body').find('.header').removeClass('is-open');
+    $('body').find('.js-menu-button').removeClass('is-active');
+    $('body').removeClass('noscroll');
+  });
+}
+
+function swiper(e,f) {
+  const a = $('.js-slide-one');
+  const b = $('.js-slide-two');
+  const c = $('.js-slide-three');
+
+  if (e == 1) {
+    if (f == 1) {
+      $(a).css('zIndex','1');
+      $(c).css('zIndex','-1');
+    } else {
+      $(a).css('zIndex','-1');
+      $(c).css('zIndex','1');
+    }
+    $(b).css('zIndex','1');
+    $(a).css('left','-100%');
+    $(b).css('left','0%');
+    $(c).css('left','100%');
+  } else if (e == 2) {
+    if (f == 1) {
+      $(b).css('zIndex','1');
+      $(a).css('zIndex','-1');
+    } else {
+      $(b).css('zIndex','-1');
+      $(a).css('zIndex','1');
+    }
+    $(c).css('zIndex','1');
+    $(a).css('left','100%');
+    $(b).css('left','-100%');
+    $(c).css('left','0%');
+  } else {
+    if (f == 1) {
+      $(c).css('zIndex','1');
+      $(b).css('zIndex','-1');
+    } else {
+      $(c).css('zIndex','-1');
+      $(b).css('zIndex','1');
+    }
+    $(a).css('zIndex','1');
+    $(a).css('left','0%');
+    $(b).css('left','100%');
+    $(c).css('left','-100%');
+  }
+}
+
+function loadGallery(item,object,maxItems){
+  let imageUrls = [];
+  const loadImage = src =>
+  new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  })  
+;
+
+switch(Number(object)) {
+  case 0:
+    imageUrls = [
+      "img/gallery/statek/1.webp",
+      "img/gallery/statek/2.webp",
+      "img/gallery/statek/3.webp",
+      "img/gallery/statek/4.webp",
+      "img/gallery/statek/5.webp",
+      "img/gallery/statek/6.webp",
+      "img/gallery/statek/7.webp",
+      "img/gallery/statek/8.webp",
+      "img/gallery/statek/9.webp",
+      "img/gallery/statek/10.webp",
+      "img/gallery/statek/11.webp",
+      "img/gallery/statek/12.webp",
+      "img/gallery/statek/13.webp",
+      "img/gallery/statek/14.webp",
+      "img/gallery/statek/15.webp",
+      "img/gallery/statek/16.webp",
+      "img/gallery/statek/17.webp",
+      "img/gallery/statek/18.webp",
+      "img/gallery/statek/19.webp",
+      "img/gallery/statek/20.webp",
+      "img/gallery/statek/21.webp",
+      "img/gallery/statek/22.webp",
+      "img/gallery/statek/23.webp",
+      "img/gallery/statek/24.webp"
+    ];
+    break;
+  case 1:
+    imageUrls = [
+      "img/gallery/penzion/1.webp",
+      "img/gallery/penzion/2.webp",
+      "img/gallery/penzion/3.webp",
+      "img/gallery/penzion/4.webp",
+      "img/gallery/penzion/5.webp",
+      "img/gallery/penzion/6.webp",
+      "img/gallery/penzion/7.webp",
+      "img/gallery/penzion/8.webp",
+      "img/gallery/penzion/9.webp",
+      "img/gallery/penzion/10.webp",
+      "img/gallery/penzion/11.webp",
+      "img/gallery/penzion/12.webp",
+      "img/gallery/penzion/13.webp",
+      "img/gallery/penzion/14.webp",
+      "img/gallery/penzion/15.webp",
+      "img/gallery/penzion/16.webp",
+      "img/gallery/penzion/17.webp",
+      "img/gallery/penzion/18.webp",
+      "img/gallery/penzion/19.webp",
+      "img/gallery/penzion/20.webp",
+      "img/gallery/penzion/21.webp",
+      "img/gallery/penzion/22.webp",
+      "img/gallery/penzion/23.webp",
+      "img/gallery/penzion/24.webp"
+    ];
+    break;
+    case 2:
+      imageUrls = [
+        "img/gallery/chata/1.webp",
+        "img/gallery/chata/2.webp",
+        "img/gallery/chata/3.webp",
+        "img/gallery/chata/4.webp",
+        "img/gallery/chata/5.webp",
+        "img/gallery/chata/6.webp",
+        "img/gallery/chata/7.webp",
+        "img/gallery/chata/8.webp",
+        "img/gallery/chata/9.webp",
+        "img/gallery/chata/10.webp",
+        "img/gallery/chata/11.webp",
+        "img/gallery/chata/12.webp",
+        "img/gallery/chata/13.webp",
+        "img/gallery/chata/14.webp",
+        "img/gallery/chata/15.webp",
+        "img/gallery/chata/16.webp",
+        "img/gallery/chata/17.webp",
+        "img/gallery/chata/18.webp",
+        "img/gallery/chata/19.webp",
+        "img/gallery/chata/20.webp",
+        "img/gallery/chata/21.webp",
+        "img/gallery/chata/22.webp",
+        "img/gallery/chata/23.webp",
+        "img/gallery/chata/24.webp"
+      ];
+      break;
+  case 3:
+    imageUrls = [
+      "img/gallery/statek/6.webp",
+      "img/gallery/statek/w1.webp",
+      "img/gallery/statek/w2.webp",
+      "img/gallery/statek/w6.webp",
+      "img/gallery/statek/w3.webp",
+      "img/gallery/statek/w4.webp",
+      "img/gallery/statek/3.webp",
+      "img/gallery/statek/9.webp",
+      "img/gallery/statek/8.webp",
+      "img/gallery/statek/7.webp",
+      "img/gallery/statek/11.webp",
+      "img/gallery/statek/w5.webp"
+    ];
+}
+
+Promise.all(imageUrls.map(loadImage)).then(images => {
+  let count = 1;
+  images.forEach((image, i) =>{
+    $(item).closest('.section').find('.gallery').append($('<div class="gallery__item js-gallery-item" data-order="' + count + '"></div>').append(image));
+    if(count == maxItems){
+      $(item).closest('.section').find('.section__gallery').addClass('loaded');
+      $('.js-gallery-item').click(function() {
+        let z;
+        let x = $('body').find('.section--preview');
+        let y = Number($(this).attr('data-order'));
+        let w = Number($(item).closest('.section').find('.section__gallery').attr('data-items'));
+        let c = $(this).closest('.section').attr('id');
+
+        if(c == "statek"){z = 0;}else if(c == "penzion"){z = 1;}else if(c == "chata"){z = 2;}else{z = 3;}
+        $('body').addClass('noscroll');
+        x.attr('data-object',z);
+        x.attr('data-item',y);
+        x.attr('data-items',w);
+        x.find('img').attr('src',$(this).find('img').attr('src'));
+        x.addClass('is-open');
+      });
+    }
+    count = count + 1;
+  });
+}
+);
+}
+
+function galleryControl(e,f,g,h) {
+  let object;
+  let next = loopControl(g, f, h);
+  
+  switch(e) {
+    case 0:
+      object = "statek";
+      break;
+    case 1:
+      object = "penzion";
+      break;
+    case 2:
+      object = "chata";
+      break;
+    case 3:
+      object = "statek";
+  }
+  $('body').find('.section--preview').attr('data-item',next);
+  if(e==3){
+    switch(next) {
+      case 1:
+        next = "6";
+        break;
+      case 2:
+        next = "w1";
+        break;
+      case 3:
+        next = "w2";
+        break;
+      case 4:
+        next = "w6";
+        break;
+      case 5:
+        next = "w3";
+        break;
+      case 6:
+        next = "w4";
+        break;
+      case 7:
+        next = "3";
+        break;
+      case 8:
+        next = "9";
+        break;
+      case 9:
+        next = "8";
+        break;
+      case 10:
+        next = "7";
+        break;
+      case 11:
+        next = "11";
+        break;
+      case 12:
+        next = "w5";
+    } 
+  }
+  $('body').find('.section--preview').find('img').attr('src','img/gallery/' + object + '/' + next + '.webp');
+}
+
+function loopControl(e,f,g) {
+  if(f){if(g+1==e+1){e=1;}else{e=e+1;}}else{if(0==e-1){e=g;}else{e=e-1;}}return e;
+}
+
+function menuControl(e,f) {
+  let position;
+  if (screen.width > 1200){position = 50;}else{position = 0}
+  closeSequence(e);
+
+  if(f=="detail"){
+    if(e.hasClass('section--switch')){
+      e.find('.section__left').css('left',position+'%');
+    }else{
+      e.find('.section__left').css('left','0%');
+    }
+  }else if(f=="gallery"){
+    let x = e.find('.section__gallery');
+    x.addClass('is-open');
+    if(!x.hasClass('loaded')){loadGallery(e,x.attr('data-object'),x.attr('data-items'));}
+  }else{
+    if(e.hasClass('section--switch')){
+      e.find('.section__right').css('left',position+'%');
+    }else{
+      e.find('.section__right').css('left','0%');
+    }
+  }
+}
+
+function closeSequence(e) {
+  let position1;
+  let position2;
+  let position3;
+  let position4;
+  if (screen.width > 1200){position1 = 0;position2 = 100;position3 = -50;position4 = 50;}else{position1 = -100;position2 = 100;position3 = -100;position4 = 100;}
+
+  if($('body').find('.header').hasClass('is-open')){
+    $('body').removeClass('noscroll');
+    $('body').find('.header').removeClass('is-open');
+    $('body').find('.js-menu-button').removeClass('is-active');
+  }
+
+  if(e.hasClass('section--switch')){
+    e.find('.section__left').css('left',position1+'%');
+    e.find('.section__right').css('left',position2+'%');
+  }else{
+    e.find('.section__left').css('left',position3+'%');
+    e.find('.section__right').css('left',position4+'%');
+  }
+  e.find('.section__gallery').removeClass('is-open');
+}