chore: clean legacy files

assets/css/bootstrap-datepicker3.css

@@ -24,7 +24,7 @@
   padding: 4px;
 }
 .datepicker-dropdown:before {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
@@ -34,7 +34,7 @@
   position: absolute;
 }
 .datepicker-dropdown:after {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
@@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
   margin-left: -5px;
   margin-right: -5px;
 }
-/*# sourceMappingURL=bootstrap-datepicker3.css.map */
+/*# sourceMappingURL=bootstrap-datepicker3.css.map */

assets/css/magnific-popup.css

@@ -8,7 +8,8 @@
   overflow: hidden;
   position: fixed;
   background: #0b0b0b;
-  opacity: 0.8; }
+  opacity: 0.8;
+}
 
 .mfp-wrap {
   top: 0;
@@ -18,7 +19,8 @@
   z-index: 1043;
   position: fixed;
   outline: none !important;
-  -webkit-backface-visibility: hidden; }
+  -webkit-backface-visibility: hidden;
+}
 
 .mfp-container {
   text-align: center;
@@ -28,16 +30,19 @@
   left: 0;
   top: 0;
   padding: 0 8px;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
 .mfp-container:before {
-  content: '';
+  content: "";
   display: inline-block;
   height: 100%;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
 
 .mfp-align-top .mfp-container:before {
-  display: none; }
+  display: none;
+}
 
 .mfp-content {
   position: relative;
@@ -45,29 +50,36 @@
   vertical-align: middle;
   margin: 0 auto;
   text-align: left;
-  z-index: 1045; }
+  z-index: 1045;
+}
 
 .mfp-inline-holder .mfp-content,
 .mfp-ajax-holder .mfp-content {
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-ajax-cur {
-  cursor: progress; }
+  cursor: progress;
+}
 
-.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
   cursor: -moz-zoom-out;
   cursor: -webkit-zoom-out;
-  cursor: zoom-out; }
+  cursor: zoom-out;
+}
 
 .mfp-zoom {
   cursor: pointer;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
-  cursor: zoom-in; }
+  cursor: zoom-in;
+}
 
 .mfp-auto-cursor .mfp-content {
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-close,
 .mfp-arrow,
@@ -75,16 +87,19 @@
 .mfp-counter {
   -webkit-user-select: none;
   -moz-user-select: none;
-  user-select: none; }
+  user-select: none;
+}
 
 .mfp-loading.mfp-figure {
-  display: none; }
+  display: none;
+}
 
 .mfp-hide {
-  display: none !important; }
+  display: none !important;
+}
 
 .mfp-preloader {
-  color: #CCC;
+  color: #ccc;
   position: absolute;
   top: 50%;
   width: auto;
@@ -92,17 +107,22 @@
   margin-top: -0.8em;
   left: 8px;
   right: 8px;
-  z-index: 1044; }
+  z-index: 1044;
-  .mfp-preloader a {
+}
-    color: #CCC; }
+.mfp-preloader a {
-    .mfp-preloader a:hover {
+  color: #ccc;
-      color: #FFF; }
+}
+.mfp-preloader a:hover {
+  color: #fff;
+}
 
 .mfp-s-ready .mfp-preloader {
-  display: none; }
+  display: none;
+}
 
 .mfp-s-error .mfp-content {
-  display: none; }
+  display: none;
+}
 
 button.mfp-close,
 button.mfp-arrow {
@@ -116,11 +136,13 @@ button.mfp-arrow {
   padding: 0;
   z-index: 1046;
   box-shadow: none;
-  touch-action: manipulation; }
+  touch-action: manipulation;
+}
 
 button::-moz-focus-inner {
   padding: 0;
-  border: 0; }
+  border: 0;
+}
 
 .mfp-close {
   width: 44px;
@@ -133,35 +155,41 @@ button::-moz-focus-inner {
   text-align: center;
   opacity: 0.65;
   padding: 0 0 18px 10px;
-  color: #FFF;
+  color: #fff;
   font-style: normal;
   font-size: 28px;
-  font-family: Arial, Baskerville, monospace; }
+  font-family: Arial, Baskerville, monospace;
-  .mfp-close:hover,
+}
-  .mfp-close:focus {
+.mfp-close:hover,
-    opacity: 1; }
+.mfp-close:focus {
-  .mfp-close:active {
+  opacity: 1;
-    top: 1px; }
+}
+.mfp-close:active {
+  top: 1px;
+}
 
 .mfp-close-btn-in .mfp-close {
-  color: #333; }
+  color: #333;
+}
 
 .mfp-image-holder .mfp-close,
 .mfp-iframe-holder .mfp-close {
-  color: #FFF;
+  color: #fff;
   right: -6px;
   text-align: right;
   padding-right: 6px;
-  width: 100%; }
+  width: 100%;
+}
 
 .mfp-counter {
   position: absolute;
   top: 0;
   right: 0;
-  color: #CCC;
+  color: #ccc;
   font-size: 12px;
   line-height: 18px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .mfp-arrow {
   position: absolute;
@@ -172,74 +200,91 @@ button::-moz-focus-inner {
   padding: 0;
   width: 90px;
   height: 110px;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: transparent;
-  .mfp-arrow:active {
+}
-    margin-top: -54px; }
+.mfp-arrow:active {
-  .mfp-arrow:hover,
+  margin-top: -54px;
-  .mfp-arrow:focus {
+}
-    opacity: 1; }
+.mfp-arrow:hover,
-  .mfp-arrow:before,
+.mfp-arrow:focus {
-  .mfp-arrow:after {
+  opacity: 1;
-    content: '';
+}
-    display: block;
+.mfp-arrow:before,
-    width: 0;
+.mfp-arrow:after {
-    height: 0;
+  content: "";
-    position: absolute;
+  display: block;
-    left: 0;
+  width: 0;
-    top: 0;
+  height: 0;
-    margin-top: 35px;
+  position: absolute;
-    margin-left: 35px;
+  left: 0;
-    border: medium inset transparent; }
+  top: 0;
-  .mfp-arrow:after {
+  margin-top: 35px;
-    border-top-width: 13px;
+  margin-left: 35px;
-    border-bottom-width: 13px;
+  border: medium inset transparent;
-    top: 8px; }
+}
-  .mfp-arrow:before {
+.mfp-arrow:after {
-    border-top-width: 21px;
+  border-top-width: 13px;
-    border-bottom-width: 21px;
+  border-bottom-width: 13px;
-    opacity: 0.7; }
+  top: 8px;
+}
+.mfp-arrow:before {
+  border-top-width: 21px;
+  border-bottom-width: 21px;
+  opacity: 0.7;
+}
 
 .mfp-arrow-left {
-  left: 0; }
+  left: 0;
-  .mfp-arrow-left:after {
+}
-    border-right: 17px solid #FFF;
+.mfp-arrow-left:after {
-    margin-left: 31px; }
+  border-right: 17px solid #fff;
-  .mfp-arrow-left:before {
+  margin-left: 31px;
-    margin-left: 25px;
+}
-    border-right: 27px solid #3F3F3F; }
+.mfp-arrow-left:before {
+  margin-left: 25px;
+  border-right: 27px solid #3f3f3f;
+}
 
 .mfp-arrow-right {
-  right: 0; }
+  right: 0;
-  .mfp-arrow-right:after {
+}
-    border-left: 17px solid #FFF;
+.mfp-arrow-right:after {
-    margin-left: 39px; }
+  border-left: 17px solid #fff;
-  .mfp-arrow-right:before {
+  margin-left: 39px;
-    border-left: 27px solid #3F3F3F; }
+}
+.mfp-arrow-right:before {
+  border-left: 27px solid #3f3f3f;
+}
 
 .mfp-iframe-holder {
   padding-top: 40px;
-  padding-bottom: 40px; }
+  padding-bottom: 40px;
-  .mfp-iframe-holder .mfp-content {
+}
-    line-height: 0;
+.mfp-iframe-holder .mfp-content {
-    width: 100%;
+  line-height: 0;
-    max-width: 900px; }
+  width: 100%;
-  .mfp-iframe-holder .mfp-close {
+  max-width: 900px;
-    top: -40px; }
+}
+.mfp-iframe-holder .mfp-close {
+  top: -40px;
+}
 
 .mfp-iframe-scaler {
   width: 100%;
   height: 0;
   overflow: hidden;
-  padding-top: 56.25%; }
+  padding-top: 56.25%;
-  .mfp-iframe-scaler iframe {
+}
-    position: absolute;
+.mfp-iframe-scaler iframe {
-    display: block;
+  position: absolute;
-    top: 0;
+  display: block;
-    left: 0;
+  top: 0;
-    width: 100%;
+  left: 0;
-    height: 100%;
+  width: 100%;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  height: 100%;
-    background: #000; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #000;
+}
 
 /* Main image in popup */
 img.mfp-img {
@@ -250,31 +295,36 @@ img.mfp-img {
   line-height: 0;
   box-sizing: border-box;
   padding: 40px 0 40px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 /* The shadow behind the image */
 .mfp-figure {
-  line-height: 0; }
+  line-height: 0;
-  .mfp-figure:after {
+}
-    content: '';
+.mfp-figure:after {
-    position: absolute;
+  content: "";
-    left: 0;
+  position: absolute;
-    top: 40px;
+  left: 0;
-    bottom: 40px;
+  top: 40px;
-    display: block;
+  bottom: 40px;
-    right: 0;
+  display: block;
-    width: auto;
+  right: 0;
-    height: auto;
+  width: auto;
-    z-index: -1;
+  height: auto;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  z-index: -1;
-    background: #444; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-  .mfp-figure small {
+  background: #444;
-    color: #BDBDBD;
+}
-    display: block;
+.mfp-figure small {
-    font-size: 12px;
+  color: #bdbdbd;
-    line-height: 14px; }
+  display: block;
-  .mfp-figure figure {
+  font-size: 12px;
-    margin: 0; }
+  line-height: 14px;
+}
+.mfp-figure figure {
+  margin: 0;
+}
 
 .mfp-bottom-bar {
   margin-top: -36px;
@@ -282,36 +332,45 @@ img.mfp-img {
   top: 100%;
   left: 0;
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-title {
   text-align: left;
   line-height: 18px;
-  color: #F3F3F3;
+  color: #f3f3f3;
   word-wrap: break-word;
-  padding-right: 36px; }
+  padding-right: 36px;
+}
 
 .mfp-image-holder .mfp-content {
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 .mfp-gallery .mfp-image-holder .mfp-figure {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
-@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+@media screen and (max-width: 800px) and (orientation: landscape),
+  screen and (max-height: 300px) {
   /**
        * Remove all paddings around the image on small screen
        */
   .mfp-img-mobile .mfp-image-holder {
     padding-left: 0;
-    padding-right: 0; }
+    padding-right: 0;
+  }
   .mfp-img-mobile img.mfp-img {
-    padding: 0; }
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-figure:after {
     top: 0;
-    bottom: 0; }
+    bottom: 0;
+  }
   .mfp-img-mobile .mfp-figure small {
     display: inline;
-    margin-left: 5px; }
+    margin-left: 5px;
+  }
   .mfp-img-mobile .mfp-bottom-bar {
     background: rgba(0, 0, 0, 0.6);
     bottom: 0;
@@ -319,12 +378,15 @@ img.mfp-img {
     top: auto;
     padding: 3px 5px;
     position: fixed;
-    box-sizing: border-box; }
+    box-sizing: border-box;
-    .mfp-img-mobile .mfp-bottom-bar:empty {
+  }
-      padding: 0; }
+  .mfp-img-mobile .mfp-bottom-bar:empty {
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-counter {
     right: 5px;
-    top: 3px; }
+    top: 3px;
+  }
   .mfp-img-mobile .mfp-close {
     top: 0;
     right: 0;
@@ -334,18 +396,25 @@ img.mfp-img {
     background: rgba(0, 0, 0, 0.6);
     position: fixed;
     text-align: center;
-    padding: 0; } }
+    padding: 0;
+  }
+}
 
 @media all and (max-width: 900px) {
   .mfp-arrow {
     -webkit-transform: scale(0.75);
-    transform: scale(0.75); }
+    transform: scale(0.75);
+  }
   .mfp-arrow-left {
     -webkit-transform-origin: 0;
-    transform-origin: 0; }
+    transform-origin: 0;
+  }
   .mfp-arrow-right {
     -webkit-transform-origin: 100%;
-    transform-origin: 100%; }
+    transform-origin: 100%;
+  }
   .mfp-container {
     padding-left: 6px;
-    padding-right: 6px; } }
+    padding-right: 6px;
+  }
+}

assets/css/swiper.css

@@ -41,7 +41,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
@@ -72,7 +74,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
 }
 .swiper-slide-invisible-blank {
   visibility: hidden;
@@ -87,11 +91,18 @@
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
-  -webkit-transition-property: height, -webkit-transform;
+  -webkit-transition-property:
-  transition-property: height, -webkit-transform;
+    height,
+    -webkit-transform;
+  transition-property:
+    height,
+    -webkit-transform;
   -o-transition-property: transform, height;
   transition-property: transform, height;
-  transition-property: transform, height, -webkit-transform;
+  transition-property:
+    transform,
+    height,
+    -webkit-transform;
 }
 /* 3D Effects */
 .swiper-container-3d {
@@ -121,28 +132,100 @@
   z-index: 10;
 }
 .swiper-container-3d .swiper-slide-shadow-left {
-  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-right {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-top {
-  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-bottom {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 /* IE10 Windows Phone 8 Fixes */
 .swiper-container-wp8-horizontal,
@@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
   -webkit-transform: translate3d(0px, -50%, 0);
   transform: translate3d(0px, -50%, 0);
 }
-.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 6px 0;
   display: block;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 8px;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
   display: inline-block;
-  -webkit-transition: 200ms top, 200ms -webkit-transform;
+  -webkit-transition:
-  transition: 200ms top, 200ms -webkit-transform;
+    200ms top,
-  -o-transition: 200ms transform, 200ms top;
+    200ms -webkit-transform;
-  transition: 200ms transform, 200ms top;
+  transition:
-  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
+    200ms top,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 0 4px;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   white-space: nowrap;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal
-  -webkit-transition: 200ms left, 200ms -webkit-transform;
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
-  transition: 200ms left, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms left;
+  -webkit-transition:
-  transition: 200ms transform, 200ms left;
+    200ms left,
-  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms left,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal.swiper-container-rtl
-  -webkit-transition: 200ms right, 200ms -webkit-transform;
+  > .swiper-pagination-bullets-dynamic
-  transition: 200ms right, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms right;
+  -webkit-transition:
-  transition: 200ms transform, 200ms right;
+    200ms right,
-  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms right,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right,
+    200ms -webkit-transform;
 }
 /* Progress */
 .swiper-pagination-progressbar {
@@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
   -ms-transform-origin: left top;
   transform-origin: left top;
 }
-.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+.swiper-container-rtl
+  .swiper-pagination-progressbar
+  .swiper-pagination-progressbar-fill {
   -webkit-transform-origin: right top;
   -ms-transform-origin: right top;
   transform-origin: right top;
 }
 .swiper-container-horizontal > .swiper-pagination-progressbar,
-.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-vertical
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 100%;
   height: 4px;
   left: 0;
   top: 0;
 }
 .swiper-container-vertical > .swiper-pagination-progressbar,
-.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-horizontal
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 4px;
   height: 100%;
   left: 0;
@@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-white {
   background: rgba(255, 255, 255, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-white
+  .swiper-pagination-progressbar-fill {
   background: #ffffff;
 }
 .swiper-pagination-black .swiper-pagination-bullet-active {
@@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-black {
   background: rgba(0, 0, 0, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-black
+  .swiper-pagination-progressbar-fill {
   background: #000000;
 }
 .swiper-pagination-lock {
@@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
 }
 .swiper-lazy-preloader:after {
   display: block;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

assets/js/jquery.easing.min.js

@@ -5,40 +5,300 @@
  * to offer multiple easing options
  *
  * TERMS OF USE - EASING EQUATIONS
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2001 Robert Penner
  * All rights reserved.
  *
  * TERMS OF USE - jQuery Easing
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2008 George McGinley Smith
  * All rights reserved.
  *
- * Redistribution and use in source and binary forms, with or without modification, 
+ * Redistribution and use in source and binary forms, with or without modification,
  * are permitted provided that the following conditions are met:
- * 
+ *
- * Redistributions of source code must retain the above copyright notice, this list of 
+ * Redistributions of source code must retain the above copyright notice, this list of
  * conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * Redistributions in binary form must reproduce the above copyright notice, this list
- * of conditions and the following disclaimer in the documentation and/or other materials 
+ * of conditions and the following disclaimer in the documentation and/or other materials
  * provided with the distribution.
- * 
+ *
- * Neither the name of the author nor the names of contributors may be used to endorse 
+ * Neither the name of the author nor the names of contributors may be used to endorse
  * or promote products derived from this software without specific prior written permission.
- * 
+ *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
- *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
- *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
- * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ * OF THE POSSIBILITY OF SUCH DAMAGE.
  *
-*/
+ */
-jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
+jQuery.easing.jswing = jQuery.easing.swing;
+jQuery.extend(jQuery.easing, {
+  def: "easeOutQuad",
+  swing: function (e, f, a, h, g) {
+    "use strict";
+    return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
+  },
+  easeInQuad: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f + a;
+  },
+  easeOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (f /= g) * (f - 2) + a;
+  },
+  easeInOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f + a;
+    }
+    return (-h / 2) * (--f * (f - 2) - 1) + a;
+  },
+  easeInCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f + a;
+  },
+  easeOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f + 1) + a;
+  },
+  easeInOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f + 2) + a;
+  },
+  easeInQuart: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f + a;
+  },
+  easeOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    return -h * ((f = f / g - 1) * f * f * f - 1) + a;
+  },
+  easeInOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f + a;
+    }
+    return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
+  },
+  easeInQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f * f + a;
+  },
+  easeOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
+  },
+  easeInOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
+  },
+  easeInSine: function (e, f, a, h, g) {
+    "use strict";
+    return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
+  },
+  easeOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sin((f / g) * (Math.PI / 2)) + a;
+  },
+  easeInOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
+  },
+  easeInExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
+  },
+  easeOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
+  },
+  easeInOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    if (f == 0) {
+      return a;
+    }
+    if (f == g) {
+      return a + h;
+    }
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
+    }
+    return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
+  },
+  easeInCirc: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
+  },
+  easeOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
+  },
+  easeInOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
+    }
+    return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
+  },
+  easeInElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      -(
+        g *
+        Math.pow(2, 10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j)
+      ) + e
+    );
+  },
+  easeOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
+      l +
+      e
+    );
+  },
+  easeInOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k / 2) == 2) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * (0.3 * 1.5);
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    if (h < 1) {
+      return (
+        -0.5 *
+          (g *
+            Math.pow(2, 10 * (h -= 1)) *
+            Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
+        e
+      );
+    }
+    return (
+      g *
+        Math.pow(2, -10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
+        0.5 +
+      l +
+      e
+    );
+  },
+  easeInBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * (f /= h) * f * ((g + 1) * f - g) + a;
+  },
+  easeOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
+  },
+  easeInOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    if ((f /= h / 2) < 1) {
+      return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
+    }
+    return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
+  },
+  easeInBounce: function (e, f, a, h, g) {
+    "use strict";
+    return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
+  },
+  easeOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g) < 1 / 2.75) {
+      return h * (7.5625 * f * f) + a;
+    } else {
+      if (f < 2 / 2.75) {
+        return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
+      } else {
+        if (f < 2.5 / 2.75) {
+          return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
+        } else {
+          return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
+        }
+      }
+    }
+  },
+  easeInOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if (f < g / 2) {
+      return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
+    }
+    return (
+      jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
+    );
+  },
+});

assets/js/scripts.js

@@ -1,208 +1,217 @@
 /* Description: Custom JS file */
 
+(function ($) {
+  "use strict";
 
-(function($) {
+  /* Navbar Scripts */
-    "use strict"; 
+  // jQuery for page scrolling feature - requires jQuery Easing plugin
-	
+  $(function () {
-	/* Navbar Scripts */
+    $(document).on("click", "a.page-scroll", function (event) {
-	// jQuery for page scrolling feature - requires jQuery Easing plugin
+      var $anchor = $(this);
-	$(function() {
+      $("html, body")
-		$(document).on('click', 'a.page-scroll', function(event) {
+        .stop()
-			var $anchor = $(this);
+        .animate(
-			$('html, body').stop().animate({
+          {
-				scrollTop: $($anchor.attr('href')).offset().top
+            scrollTop: $($anchor.attr("href")).offset().top,
-			}, 600, 'easeInOutExpo');
+          },
-			event.preventDefault();
+          600,
-		});
+          "easeInOutExpo",
+        );
+      event.preventDefault();
     });
+  });
 
-    // offcanvas script from Bootstrap + added element to close menu on click in small viewport
+  // offcanvas script from Bootstrap + added element to close menu on click in small viewport
-    $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
+  $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
-        $('.offcanvas-collapse').toggleClass('open')
+    "click",
-    })
+    function () {
+      $(".offcanvas-collapse").toggleClass("open");
+    },
+  );
 
-    // hover in desktop mode
+  // hover in desktop mode
-    function toggleDropdown (e) {
+  function toggleDropdown(e) {
-        const _d = $(e.target).closest('.dropdown'),
+    const _d = $(e.target).closest(".dropdown"),
-            _m = $('.dropdown-menu', _d);
+      _m = $(".dropdown-menu", _d);
-        setTimeout(function(){
+    setTimeout(
-            const shouldOpen = e.type !== 'click' && _d.is(':hover');
+      function () {
-            _m.toggleClass('show', shouldOpen);
+        const shouldOpen = e.type !== "click" && _d.is(":hover");
-            _d.toggleClass('show', shouldOpen);
+        _m.toggleClass("show", shouldOpen);
-            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
+        _d.toggleClass("show", shouldOpen);
-        }, e.type === 'mouseleave' ? 300 : 0);
+        $('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
-    }
+      },
-    $('body')
+      e.type === "mouseleave" ? 300 : 0,
-    .on('mouseenter mouseleave','.dropdown',toggleDropdown)
+    );
-    .on('click', '.dropdown-menu a', toggleDropdown);
+  }
+  $("body")
+    .on("mouseenter mouseleave", ".dropdown", toggleDropdown)
+    .on("click", ".dropdown-menu a", toggleDropdown);
 
+  /* Header Slider - Swiper */
+  var headerSlider = new Swiper(".header-slider", {
+    autoplay: {
+      delay: 3500,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    effect: "fade",
+    speed: 700,
+  });
 
-    /* Header Slider - Swiper */
+  /* Image Slider - Swiper */
-	var headerSlider = new Swiper('.header-slider', {
+  var imageSlider = new Swiper(".image-slider", {
-		autoplay: {
+    autoplay: {
-			delay: 3500,
+      delay: 3000,
-			disableOnInteraction: false
+      disableOnInteraction: false,
-		},
+    },
-		loop: true,
+    loop: false,
-		effect: "fade",
+    navigation: {
-		speed: 700
+      nextEl: ".swiper-button-next",
-    });
+      prevEl: ".swiper-button-prev",
-
+    },
-
+    slidesPerView: 3,
-    /* Image Slider - Swiper */
+    spaceBetween: 20,
-    var imageSlider = new Swiper('.image-slider', {
+    breakpoints: {
-        autoplay: {
+      // when window is <= 767px
-            delay: 3000,
+      767: {
-            disableOnInteraction: false
+        slidesPerView: 1,
-		},
+      },
-        loop: false,
+      // when window is <= 991px
-        navigation: {
+      991: {
-			nextEl: '.swiper-button-next',
+        slidesPerView: 2,
-			prevEl: '.swiper-button-prev'
+        spaceBetween: 10,
-		},
+      },
+      // when window is <= 1199px
+      1199: {
         slidesPerView: 3,
         spaceBetween: 20,
-		breakpoints: {
+      },
-            // when window is <= 767px
+    },
-            767: {
+  });
-                slidesPerView: 1
+
-            },
+  /* Image Slider Room - Swiper */
-            // when window is <= 991px
+  var imageSlider = new Swiper(".image-slider-room", {
-            991: {
+    autoplay: {
-                slidesPerView: 2,
+      delay: 3000,
-                spaceBetween: 10
+      disableOnInteraction: false,
-            },
+    },
-            // when window is <= 1199px
+    loop: false,
-            1199: {
+    navigation: {
-                slidesPerView: 3,
+      nextEl: ".swiper-button-next",
-                spaceBetween: 20
+      prevEl: ".swiper-button-prev",
-            },
+    },
-        }
+  });
+
+  /* Card Slider - Swiper */
+  var cardSlider = new Swiper(".card-slider", {
+    autoplay: {
+      delay: 4000,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    slidesPerView: 3,
+    spaceBetween: 30,
+    breakpoints: {
+      // when window is <= 767px
+      767: {
+        slidesPerView: 1,
+      },
+      // when window is <= 991px
+      991: {
+        slidesPerView: 2,
+      },
+    },
+  });
+
+  /* Image Lightbox - Magnific Popup */
+  $(".popup-link").magnificPopup({
+    removalDelay: 300,
+    type: "image",
+    callbacks: {
+      beforeOpen: function () {
+        this.st.image.markup = this.st.image.markup.replace(
+          "mfp-figure",
+          "mfp-figure " + this.st.el.attr("data-effect"),
+        );
+      },
+      beforeClose: function () {
+        $(".mfp-figure").addClass("fadeOut");
+      },
+    },
+    gallery: {
+      enabled: true, //enable gallery mode
+    },
+  });
+
+  /* Details Lightbox - Magnific Popup */
+  $(".popup-with-move-anim").magnificPopup({
+    type: "inline",
+    fixedContentPos: true,
+    fixedBgPos: true,
+    overflowY: "auto",
+    closeBtnInside: true,
+    preloader: false,
+    midClick: true,
+    removalDelay: 300,
+    mainClass: "my-mfp-slide-bottom",
+  });
+
+  /* Move Form Fields Label When User Types */
+  // for input and textarea fields
+  $("input, textarea").keyup(function () {
+    if ($(this).val() != "") {
+      $(this).addClass("notEmpty");
+    } else {
+      $(this).removeClass("notEmpty");
+    }
+  });
+
+  /* Datepicker - Bootstrap Datepicker */
+  $("#start").datepicker({
+    todayHighlight: true,
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
+
+  // detects change to selected date to keep the label above the value in the input field
+  $("#start")
+    .datepicker()
+    .on("changeDate", function (e) {
+      $("input[id=start]").addClass("notEmpty");
     });
 
+  $("#end").datepicker({
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
 
-    /* Image Slider Room - Swiper */
+  // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    var imageSlider = new Swiper('.image-slider-room', {
+  $("#end")
-        autoplay: {
+    .datepicker()
-            delay: 3000,
+    .on("changeDate", function (e) {
-            disableOnInteraction: false
+      $("input[id=end]").addClass("notEmpty");
-		},
-        loop: false,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev',
-		}
-    });
-    
-
-    /* Card Slider - Swiper */
-	var cardSlider = new Swiper('.card-slider', {
-		autoplay: {
-            delay: 4000,
-            disableOnInteraction: false
-		},
-        loop: true,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev'
-		},
-		slidesPerView: 3,
-		spaceBetween: 30,
-        breakpoints: {
-            // when window is <= 767px
-            767: {
-                slidesPerView: 1
-            },
-            // when window is <= 991px
-            991: {
-                slidesPerView: 2
-            }
-        }
     });
 
+  /* Back To Top Button */
+  // create the back to top button
+  $("body").prepend(
+    '<a href="body" class="back-to-top page-scroll">Back to Top</a>',
+  );
+  var amountScrolled = 700;
+  $(window).scroll(function () {
+    if ($(window).scrollTop() > amountScrolled) {
+      $("a.back-to-top").fadeIn("500");
+    } else {
+      $("a.back-to-top").fadeOut("500");
+    }
+  });
 
-    /* Image Lightbox - Magnific Popup */
+  /* Removes Long Focus On Buttons */
-	$('.popup-link').magnificPopup({
+  $(".button, a, button").mouseup(function () {
-		removalDelay: 300,
+    $(this).blur();
-		type: 'image',
+  });
-		callbacks: {
+})(jQuery);
-			beforeOpen: function() {
-				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
-			},
-			beforeClose: function() {
-				$('.mfp-figure').addClass('fadeOut');
-			}
-		},
-		gallery:{
-			enabled:true //enable gallery mode
-		}
-    });
-    
-
-    /* Details Lightbox - Magnific Popup */
-    $('.popup-with-move-anim').magnificPopup({
-		type: 'inline',
-		fixedContentPos: true,
-		fixedBgPos: true,
-		overflowY: 'auto',
-		closeBtnInside: true,
-		preloader: false,
-		midClick: true,
-		removalDelay: 300,
-		mainClass: 'my-mfp-slide-bottom'
-    });
-
-
-    /* Move Form Fields Label When User Types */
-    // for input and textarea fields
-    $("input, textarea").keyup(function(){
-		if ($(this).val() != '') {
-			$(this).addClass('notEmpty');
-		} else {
-			$(this).removeClass('notEmpty');
-		}
-    });
-
-    
-    /* Datepicker - Bootstrap Datepicker */
-	$('#start').datepicker({
-		todayHighlight: true,
-		autoclose: true,
-        format: 'MM/dd/yyyy',
-    });
-    
-    // detects change to selected date to keep the label above the value in the input field
-    $('#start').datepicker().on('changeDate', function(e) {
-        $("input[id=start]").addClass('notEmpty');
-    });
-	
-	$('#end').datepicker({
-		autoclose: true,
-		format: 'MM/dd/yyyy'
-    });
-
-    // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    $('#end').datepicker().on('changeDate', function(e) {
-        $("input[id=end]").addClass('notEmpty');
-    });
-    
-
-    /* Back To Top Button */
-    // create the back to top button
-    $('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
-    var amountScrolled = 700;
-    $(window).scroll(function() {
-        if ($(window).scrollTop() > amountScrolled) {
-            $('a.back-to-top').fadeIn('500');
-        } else {
-            $('a.back-to-top').fadeOut('500');
-        }
-    });
-
-
-	/* Removes Long Focus On Buttons */
-	$(".button, a, button").mouseup(function() {
-		$(this).blur();
-	});
-
-})(jQuery);

docs/spec/website-revamp-spec.md

@@ -1,24 +1,31 @@
 # Website Revamp Specification (WIP)
 
 - Branch: `revamp/website-spec`
-- Business Goal: Improve design to attract more customers and increase conversion rate.
+- Business Goal: Improve design to attract more customers and increase conversion
+  rate.
 - Primary Conversion: Submit a reservation request (inquiry form).
 - Secondary Actions: Highlight availability on Booking.com and Airbnb with badges/links.
-  - Booking.com: https://www.booking.com/hotel/gp/villafleurie.fr.html
+  - Booking.com: <https://www.booking.com/hotel/gp/villafleurie.fr.html>
-  - Airbnb (T2): https://airbnb.fr/h/villafleurie-t2
+  - Airbnb (T2): <https://airbnb.fr/h/villafleurie-t2>
-  - Airbnb (T3): https://airbnb.fr/h/villafleurie-t3
+  - Airbnb (T3): <https://airbnb.fr/h/villafleurie-t3>
-- Availability Flow: Inquiry form via Netlify Forms; manual confirmation (no live calendar sync).
+- Availability Flow: Inquiry form via Netlify Forms; manual confirmation
+  (no live calendar sync).
 - Audience: Small families and couples.
 - Languages: French and English (FR/EN).
 
 ## Internationalization
+
 - URL structure: folder-based `/fr/...` and `/en/...`.
 - Default language: FR. Root `/` redirects to `/fr/`.
-- Language toggle: visible in navbar; links to the sibling page (`/fr/x` ↔ `/en/x`), fallback to home if missing.
+- Language toggle: visible in navbar; links to the sibling page
-- SEO: set `<html lang>`, `hreflang` alternates, localized titles/descriptions; separate sitemap entries per locale.
+  (`/fr/x` ↔ `/en/x`), fallback to home if missing.
-- Tech note: update generator to support nested templates (e.g., `pages/fr/*.html`, `pages/en/*.html`) and preserve subdirectories in `dist/`.
+- SEO: set `<html lang>`, `hreflang` alternates, localized titles/descriptions;
+  separate sitemap entries per locale.
+- Tech note: update generator to support nested templates
+  (e.g., `pages/fr/*.html`, `pages/en/*.html`) and preserve subdirectories in `dist/`.
 
 ## Sitemap
+
 - Home: Hero, value proposition, lead form (primary CTA), Booking/Airbnb badges.
 - Apartments (overview): Grid of units with quick facts and CTAs.
   - T2 Corail: Details, amenities, gallery, inquiry CTA.
@@ -32,39 +39,59 @@
 - Footer: Language toggle (FR/EN), Privacy, Terms.
 
 ## Tech Stack
+
 - Framework: Astro (static output).
 - Styling: Tailwind CSS (utility-first); map brand tokens in config.
 - JS: Vanilla JS only (no jQuery). Use lightweight, dependency-free components.
-- Components: reuse existing HTML/CSS/JS where useful; migrate to `.astro` with Tailwind classes.
+- Components: reuse existing HTML/CSS/JS where useful; migrate to `.astro` with
-- Libraries: no Bootstrap, no Magnific. Static hero (no Swiper). Lightweight lightbox for gallery (vanilla, no jQuery).
+  Tailwind classes.
+- Libraries: no Bootstrap, no Magnific. Static hero (no Swiper). Lightweight
+  lightbox for gallery (vanilla, no jQuery).
 - Hosting: Netlify (static deploys).
 - Forms: Netlify Forms for reservation inquiries.
 
 ## Analytics & Events
+
 - Provider: Plausible (domain: `villafleuriegp.com`).
 - Primary events: `booking_request_submitted`, `click_airbnb`, `click_booking`.
 - Secondary events: `click_call`, `click_email`.
-- Event properties: `locale` (fr/en), `page` (e.g., home, apartment), `apartment` (t2/t3/na), `position` (navbar/hero/footer/section).
+- Event properties: `locale` (fr/en), `page` (e.g., home, apartment),
-- Implementation: use `plausible("event", {props})` on CTA clicks and after successful form submit; retain outbound-link tracking for platform links.
+  `apartment` (t2/t3/na), `position` (navbar/hero/footer/section).
+
+- Implementation: use `plausible("event", {props})` on CTA clicks and after
+  successful form submit; retain outbound-link tracking for platform links.
 
 ## Release Plan
-- Phase 1 (FR Core): Home, Appartements (T2/T3 pages), Reviews, Location & Access, Contact (inquiry form), Rates (flat pricing + links), footer legal links pointing to placeholders.
+
-- Phase 2 (EN + Media): EN translations for all Phase 1 pages, Gallery (standalone + per‑apartment mini‑galleries), translated reviews on EN pages.
+- Phase 1 (FR Core): Home, Appartements (T2/T3 pages), Reviews, Location & Access,
-- Phase 3 (Policies + Analytics + Perf): French policy pages (Terms, Privacy, Cancellation, House Rules), Plausible custom events, image optimizations (WebP/srcset), Lighthouse/perf pass, optional consent banner.
+  Contact (inquiry form), Rates (flat pricing + links), footer legal links pointing
+  to placeholders.
+- Phase 2 (EN + Media): EN translations for all Phase 1 pages, Gallery (standalone
+
+- per‑apartment mini‑galleries), translated reviews on EN pages.
+
+- Phase 3 (Policies + Analytics + Perf): French policy pages (Terms, Privacy,
+  Cancellation, House Rules), Plausible custom events, image optimizations
+  (WebP/srcset), Lighthouse/perf pass, optional consent banner.
 - Deploy: Netlify with preview deploys per PR; production on main branch.
 
 ## Timeline
+
 - Phase 1 target: next week (FR core launch).
-- Milestones: content freeze (T‑3), design QA + accessibility (T‑2), copy/links final check (T‑1), deploy + smoke test (T‑0).
+- Milestones: content freeze (T‑3), design QA + accessibility (T‑2), copy/links
+  final check (T‑1), deploy + smoke test (T‑0).
 
 ## Branding
+
 - Logo: `/assets/images/logo.png`
 - Primary color: `#1EBBCE`
-- Fonts: `/assets/webfonts` (use existing webfonts; confirm final pairing). Current template references Open Sans + PT Serif.
+- Fonts: `/assets/webfonts` (use existing webfonts; confirm final pairing). Current
+  template references Open Sans + PT Serif.
 - Secondary color: `#138A9A`
 - Border radius: `rounded-lg` (0.5rem)
 
 ## Contact & CTAs
+
 - Phone: `+33 6 58 96 12 79` (click‑to‑call link).
 - Email: `location.villafleurie@gmail.com` (site‑wide contact and form notifications).
 - Navbar: show a prominent call button (icon + number) on mobile/desktop.
@@ -74,7 +101,9 @@
   - EN: "Send a Request"
 
 ## Apartments
+
 ### T2 Corail
+
 - Max occupancy: 2–3 guests
 - Ideal for: couples and small families (2–3)
 - Size: 45 m²
@@ -84,10 +113,13 @@
 - Minimum stay: 3 nights
 - Check-in/out: 14:00 / 11:00
 - Highlight photos: TBD (6–10 featured images) — use placeholders until final selection
- - Description FR: Idéal pour les couples, appartement chaleureux et cosy, à proximité des plages et des commerces.
+- Description FR: Idéal pour les couples, appartement chaleureux et cosy, à
- - Description EN: Ideal for couples, a cozy and warm apartment close to beaches and shops.
+  proximité des plages et des commerces.
+- Description EN: Ideal for couples, a cozy and warm apartment close to beaches
+  and shops.
 
 ### T3 Azur
+
 - Max occupancy: up to 4 guests
 - Ideal for: couples and small families (up to 4)
 - Size: 55 m²
@@ -96,26 +128,38 @@
 - House rules: same as T2 Corail
 - Minimum stay: 3 nights
 - Check-in/out: 14:00 / 11:00
-- Highlight photos: TBD (6–10 featured images) — use placeholders until final selection
+- Highlight photos: TBD (6–10 featured images) — use placeholders until final
- - Description FR: Idéal pour les familles, appartement spacieux avec deux lits queen, proche des plages et des commerces.
+  selection
- - Description EN: Perfect for families, a spacious apartment with two queen beds, close to beaches and shops.
+- Description FR: Idéal pour les familles, appartement spacieux avec deux lits
+  queen, proche des plages et des commerces.
+- Description EN: Perfect for families, a spacious apartment with two queen beds,
+  close to beaches and shops.
 
 ## Reservation Inquiry Form
-- Required fields: full_name, email, arrival_date, departure_date, apartment (T2/T3), guests_adults, guests_children, consent_privacy.
+
+- Required fields: full_name, email, arrival_date, departure_date, apartment (T2/T3),
+  guests_adults, guests_children, consent_privacy.
 - Optional fields: phone, message.
 - Validation: basic required checks, email format, arrival < departure.
 - i18n: localized field labels and validation messages (FR/EN).
 
 ## Form Notifications & Auto-Reply
+
 - Owner notifications: send all submissions to `location.villafleurie@gmail.com`.
 - Auto-reply: enabled; send localized confirmation (FR/EN based on page locale).
-- Auto-reply content: brief thank you, submitted details (dates, apartment, guests), expected reply time, and links to Booking.com/Airbnb for instant booking.
+- Auto-reply content: brief thank you, submitted details (dates, apartment, guests),
-- Implementation: Netlify Forms + serverless email (provider TBD, recommendation: Resend) via submission-created function.
+  expected reply time, and links to Booking.com/Airbnb for instant booking.
-- Email details (TBD): sender name, from address (e.g., `noreply@villafleuriegp.com`), subject lines per locale.
+- Implementation: Netlify Forms + serverless email (provider TBD, recommendation:
-- Post-submit redirect: Yes — `/fr/merci` and `/en/thank-you` with confirmation and next steps (Booking/Airbnb CTAs).
+  Resend) via submission-created function.
+- Email details (TBD): sender name, from address (e.g., `noreply@villafleuriegp.com`),
+  subject lines per locale.
+- Post-submit redirect: Yes — `/fr/merci` and `/en/thank-you` with confirmation
+  and next steps (Booking/Airbnb CTAs).
 
 ## Booking Description / Rates Page
-- Purpose: explain pricing model and availability options, then drive inquiry or instant booking.
+
+- Purpose: explain pricing model and availability options, then drive inquiry or
+  instant booking.
 - Content blocks:
   - Pricing explainer (flat nightly rate per apartment; no seasonal pricing).
   - Secondary CTAs: Booking.com and Airbnb links.
@@ -124,86 +168,113 @@
     - Privacy Policy (FR)
     - Cancellation Policy (FR)
     - House Rules (FR)
-- Placement: terms section appears below pricing and CTAs as a concise block with 1‑line summaries + links.
+- Placement: terms section appears below pricing and CTAs as a concise block with
+  1‑line summaries + links.
 - URLs: TBD — define `/fr/...` pages only; English will link to the French policies.
 
 ### Pricing Details
+
 - Model: Flat nightly rate per apartment (no seasonal pricing).
 - T2 Corail nightly rate: 59 €.
 - T3 Azur nightly rate: 79 €.
 - Cleaning fee: 20 € if left dirty; free otherwise (per stay).
 - Security deposit: none.
-- Cancellation summary: 50% late cancellation fee (define late window in policy); link to full French policy.
+- Cancellation summary: 50% late cancellation fee (define late window in policy);
-- Cancellation summary: 50% fee for cancellations within 14 days of check‑in; link to full French policy. No‑show treated as late cancellation.
+  link to full French policy.
+- Cancellation summary: 50% fee for cancellations within 14 days of check‑in;
+  link to full French policy. No‑show treated as late cancellation.
 
 ## Legal & Policies (FR only)
+
 - Pages to create under FR namespace:
   - Conditions Générales d’Utilisation (CGU) / de Vente (CGV) — Terms
   - Politique de Confidentialité — Privacy
   - Politique d’Annulation — Cancellation
   - Règlement Intérieur — House Rules
 - Links: from Rates page and footer.
-- Include: owner/legal entity details, address, contact email/phone, hosting provider (Netlify), analytics (Plausible) note, data rights (RGPD), and effective date.
+- Include: owner/legal entity details, address, contact email/phone, hosting provider
-- Drafting: assistant to provide concise templates tailored to current rules once legal details are confirmed.
+  (Netlify), analytics (Plausible) note, data rights (RGPD), and effective date.
+- Drafting: assistant to provide concise templates tailored to current rules once
+  legal details are confirmed.
 
 ### Legal Entity Details
+
 - Legal name: VillaFleurie (Jacques Gordien)
-- Contact: location.villafleurie@gmail.com, +33 6 58 96 12 79
+- Contact: <location.villafleurie@gmail.com>, +33 6 58 96 12 79
 - Jurisdiction: France
 - Hosting provider: Netlify
 - Analytics: Plausible (privacy‑friendly, no cookies by default)
 - Company ID: SIRET/SIREN — TBD (provide if applicable)
 
 ## Home Page Copy (Initial)
+
 - FR Headline: Séjours confortables au Gosier pour couples et petites familles
-- FR Subheadline: Deux appartements lumineux, près des plages. Envoyez une demande ou réservez instantanément.
+- FR Subheadline: Deux appartements lumineux, près des plages. Envoyez une demande
+  ou réservez instantanément.
 - EN Headline: Comfortable stays in Le Gosier for couples and small families
-- EN Subheadline: Two bright apartments near the beaches. Send a request or book instantly.
+- EN Subheadline: Two bright apartments near the beaches. Send a request or book
+  instantly.
 
 ## Home Description Copy
-- FR: Villa est un lieu de vacances unique situé sur le magnifique archipel de la Guadeloupe, prête à accueillir des touristes en quête de tranquillité tout au long de l'année.
+
-- EN: Villa is a unique holiday retreat in the beautiful Guadeloupe archipelago, ready to welcome tranquility‑seeking guests all year round.
+- FR: Villa est un lieu de vacances unique situé sur le magnifique archipel de
-- Images: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg`, `/assets/images/villafleurie_t3_chambre.jpg`, `/assets/images/villafleurie_t2_terrasse.jpg`.
+  la Guadeloupe, prête à accueillir des touristes en quête de tranquillité
+  tout au long de l'année.
+- EN: Villa is a unique holiday retreat in the beautiful Guadeloupe archipelago,
+  ready to welcome tranquility‑seeking guests all year round.
+- Images: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg`,
+  `/assets/images/villafleurie_t3_chambre.jpg`, `/assets/images/villafleurie_t2_terrasse.jpg`.
 
 ## Home Hero
+
 - Type: static image (no carousel).
 - Image: `/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg` (shared FR/EN).
-- Overlay: localized headline, subheadline, primary CTA (inquiry), secondary Booking/Airbnb badges.
+- Overlay: localized headline, subheadline, primary CTA (inquiry), secondary
+  Booking/Airbnb badges.
 - Performance: responsive sizes, WebP preferred, lazy‑load below the fold.
 
 ## Home Page Sections (Order)
-1) Description: brief intro copy (FR/EN) and 2–3 supporting images.
+
-2) Facilities: showcase key amenities (icons + short labels).
+1. Description: brief intro copy (FR/EN) and 2–3 supporting images.
-3) Rooms Overview: cards for T2 Corail and T3 Azur with quick facts and CTAs.
+2. Facilities: showcase key amenities (icons + short labels).
-4) Reviews: 6–8 curated quotes with star ratings and attribution.
+3. Rooms Overview: cards for T2 Corail and T3 Azur with quick facts and CTAs.
-5) Location & Access: map embed + address/GPS + parking note.
+4. Reviews: 6–8 curated quotes with star ratings and attribution.
-6) Footer: contact, quick links, legal.
+5. Location & Access: map embed + address/GPS + parking note.
+6. Footer: contact, quick links, legal.
 
 ## Navigation
+
 - Language toggle in navbar; legal links in footer.
-- FR order: Accueil, Appartements, Galerie, Avis, Accès, Tarifs & Disponibilités, FAQ, Contact
+- FR order: Accueil, Appartements, Galerie, Avis, Accès, Tarifs & Disponibilités,
-- EN order: Home, Apartments, Gallery, Reviews, Location & Access, Rates & Availability, FAQ, Contact
+  FAQ, Contact
+- EN order: Home, Apartments, Gallery, Reviews, Location & Access, Rates & Availability,
+  FAQ, Contact
 
 ## SEO
+
 - Title format: "[Page Title] · VillaFleurie" (localized).
 - Meta descriptions: custom per page (120–160 chars), localized FR/EN.
-- Open Graph/Twitter: default OG image at `/assets/images/og-default.jpg`; custom OG for Home and each Apartment.
+- Open Graph/Twitter: default OG image at `/assets/images/og-default.jpg`; custom
+  OG for Home and each Apartment.
 - Hreflang: cross-link FR/EN counterparts; `<html lang>` set per locale.
 - Sitemap: include both locales; mark FR as default.
 
 ## Gallery
+
 - Standalone page: lightbox grid of curated photos (20–30 images max).
 - Per‑apartment mini‑galleries: 6–10 highlight photos on each apartment page.
 - Captions: Yes — localized FR/EN; concise (3–6 words), only when helpful.
 - Attribution: optional small note when photos feature platform badges.
 
 ## Images & Performance
+
 - Formats: generate WebP with JPG fallback.
 - Responsive: provide `srcset` and appropriate `sizes` for hero, cards, and lightbox.
 - Hero: prefetch/prioritize hero image; lazy‑load below‑the‑fold assets.
 - Naming: keep existing filenames; add `-webp` variants on build if we add a pipeline.
 
 ## FAQ
+
 - Format: concise Q&A; FR primary, EN translated.
 - Items (FR → EN to translate):
   - Parking: « Parking gratuit et sécurisé sur place. »
@@ -218,6 +289,7 @@
   - Annulation: « Annulation tardive: 50% dans les 14 jours avant l’arrivée. »
 
 ### FAQ — EN Translations
+
 - Parking: Free and secure parking on site.
 - Beach: Beach 10 minutes' walk away.
 - Rules: No smoking, no parties, no pets.
@@ -228,7 +300,9 @@
 - Minimum stay: 3 nights minimum.
 - Wi‑Fi: Fast, reliable Wi‑Fi.
 - Cancellation: Late cancellation: 50% fee within 14 days of arrival.
+
 ## Facilities (Icons & Labels)
+
 - AC
   - Icon: `fa-solid fa-snowflake`
   - FR: "Climatisation"
@@ -263,25 +337,31 @@
   - EN: "Family‑friendly"
 
 ## Location & Access
+
 - Map: Google Maps embed iframe using provided URL.
-  - Embed src: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde
+  - Embed src: <https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde>
 - Address: 4 rue Gerty Archimède, 97190 Le Gosier (localized FR/EN label).
 - GPS: 16.207078, -61.489915 (rounded from embed URL) — display optionally.
 - Parking: secured onsite parking (align copy with amenities).
 
 ### Badge Labels
+
 - FR: "Réserver sur Booking.com", "Réserver sur Airbnb (T2)", "Réserver sur Airbnb (T3)"
 - EN: "Book on Booking.com", "Book on Airbnb (T2)", "Book on Airbnb (T3)"
 
 ## Notes
+
 - Keep one primary CTA per page; Booking/Airbnb links as secondary actions.
 - This document will evolve iteratively as we refine requirements.
 
 ## Reviews
+
 - Source: curated from Booking.com; raw dataset captured at `docs/spec/data/reviews-raw.txt`.
 - Display: show 6–10 highlight quotes with name, country, date, rating (converted to 5-star), short excerpt, and “from Booking.com” attribution.
- - i18n: Translate reviews on EN pages; show originals on FR pages. Include a small “translated from {language}” note where applicable. Prefer curated/manual translations for accuracy.
+- i18n: Translate reviews on EN pages; show originals on FR pages. Include a small “translated from {language}” note where applicable. Prefer curated/manual translations for accuracy.
+
 ## Apartments Overview Cards
+
 - Each card shows: size (m²), max guests, bed setup, 3–4 key amenity icons, nightly rate (shown), and primary CTA.
 - Currency: EUR (€).
 - T2 Corail quick facts: 45 m²; 2–3 guests; 1 queen + sofa‑bed; AC, Wi‑Fi, kitchen, parking; 59 €/night.

package.json

@@ -6,7 +6,8 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "format": "prettier -wl ."
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
@@ -14,5 +15,9 @@
     "lucide-astro": "^0.542.0",
     "tailwindcss": "^4.1.13"
   },
-  "packageManager": "pnpm@10.15.1"
+  "packageManager": "pnpm@10.15.1",
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14"
+  }
 }

pages/contact.html

@@ -1,85 +1,136 @@
-{% extends "layouts/layout.html" %}
+{% extends "layouts/layout.html" %} {% block content %}
-{% block  content %}
 <!-- Header -->
 <header class="ex-header bg-gray">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h1 class="green">Nous contacter</h1>
+        <h1 class="green">Nous contacter</h1>
-            </div> <!-- end of col -->
+      </div>
-        </div> <!-- end of row -->
+      <!-- end of col -->
-    </div> <!-- end of container -->
+    </div>
-</header> <!-- end of ex-header -->
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</header>
+<!-- end of ex-header -->
 <!-- end of header -->
 
-
 <!-- Form -->
 <div class="ex-form-1 bg-gray pb-6">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <p class="mb-5">Voici l'occasion de nous contacter si vous êtes à la recherche d'une location capable
+        <p class="mb-5">
-                    d'offrir une expérience étonnante en termes de confort et de détente <a
+          Voici l'occasion de nous contacter si vous êtes à la recherche d'une
-                            href="mailto:location.villafleurie@gmail.com">location.villafleurie@gmail.com</a> ou
+          location capable d'offrir une expérience étonnante en termes de
-                    appelez-nous quand vous le pouvez <a href="tel:+33658961279">+33 6 58 96 12 79</a>.</p>
+          confort et de détente
-                <p>
+          <a href="mailto:location.villafleurie@gmail.com"
+            >location.villafleurie@gmail.com</a
+          >
+          ou appelez-nous quand vous le pouvez
+          <a href="tel:+33658961279">+33 6 58 96 12 79</a>.
+        </p>
+        <p>
+          <!-- Contact Form -->
+        </p>
 
-                    <!-- Contact Form -->
+        <form
-                <form id="contactForm" name="contactForm" data-toggle="validator" data-focus="false" method="post"
+          id="contactForm"
-                      action="/reservation.html" netlify>
+          name="contactForm"
-                    <div class="form-group">
+          data-toggle="validator"
-                        <input type="text" class="form-control-input" id="cname" name="name" required>
+          data-focus="false"
-                        <label class="label-control" for="cname">Nom complet</label>
+          method="post"
-                        <div class="help-block with-errors"></div>
+          action="/reservation.html"
-                    </div>
+          netlify
-                    <div class="form-group">
+        >
-                        <input type="email" class="form-control-input" id="cemail" name="email" required>
+          <div class="form-group">
-                        <label class="label-control" for="cemail">Email</label>
+            <input
-                        <div class="help-block with-errors"></div>
+              type="text"
-                    </div>
+              class="form-control-input"
-                    <div class="form-group">
+              id="cname"
-                        <textarea class="form-control-textarea" id="cmessage" name="message" required></textarea>
+              name="name"
-                        <label class="label-control" for="cmessage">Votre message</label>
+              required
-                        <div class="help-block with-errors"></div>
+            />
-                    </div>
+            <label class="label-control" for="cname">Nom complet</label>
-                    <div class="form-group">
+            <div class="help-block with-errors"></div>
-                        <button type="submit" class="form-control-submit-button">Envoyer</button>
+          </div>
-                    </div>
+          <div class="form-group">
-                    <div class="form-message">
+            <input
-                        <div id="cmsgSubmit" class="h3 text-center hidden"></div>
+              type="email"
-                    </div>
+              class="form-control-input"
-                </form>
+              id="cemail"
-                <!-- end of contact form -->
+              name="email"
-
+              required
-            </div> <!-- end of col -->
+            />
-        </div> <!-- end of row -->
+            <label class="label-control" for="cemail">Email</label>
-    </div> <!-- end of container -->
+            <div class="help-block with-errors"></div>
-</div> <!-- end of ex-form-1 -->
+          </div>
+          <div class="form-group">
+            <textarea
+              class="form-control-textarea"
+              id="cmessage"
+              name="message"
+              required
+            ></textarea>
+            <label class="label-control" for="cmessage">Votre message</label>
+            <div class="help-block with-errors"></div>
+          </div>
+          <div class="form-group">
+            <button type="submit" class="form-control-submit-button">
+              Envoyer
+            </button>
+          </div>
+          <div class="form-message">
+            <div id="cmsgSubmit" class="h3 text-center hidden"></div>
+          </div>
+        </form>
+        <!-- end of contact form -->
+      </div>
+      <!-- end of col -->
+    </div>
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</div>
+<!-- end of ex-form-1 -->
 <!-- end of form -->
 
-
 <!-- Basic -->
 <div class="ex-basic-1 pt-5">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h2 class="mt-3 mb-4">Où nous trouver</h2>
+        <h2 class="mt-3 mb-4">Où nous trouver</h2>
-                <p class="mb-5">Notre mission à VillaFleurie est de nous concentrer sur tous les détails pour faire de
+        <p class="mb-5">
-                    votre séjour une expérience extraordinaire. une expérience inoubliable. Nous avons formé notre
+          Notre mission à VillaFleurie est de nous concentrer sur tous les
-                    personnel pour qu'il réponde à vos attentes et les dépasse, afin que votre expérience à la
+          détails pour faire de votre séjour une expérience extraordinaire. une
-                    VillaFleurie ne soit pas un simple souvenir, mais l'un de vos meilleurs souvenirs.
+          expérience inoubliable. Nous avons formé notre personnel pour qu'il
-                    Nous sommes passionnés et nous ne vous décevrons pas.</p>
+          réponde à vos attentes et les dépasse, afin que votre expérience à la
+          VillaFleurie ne soit pas un simple souvenir, mais l'un de vos
+          meilleurs souvenirs. Nous sommes passionnés et nous ne vous décevrons
+          pas.
+        </p>
 
-                <div class="map-responsive mb-5">
+        <div class="map-responsive mb-5">
-                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"
+          <iframe
-                            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"
-                            referrerpolicy="no-referrer-when-downgrade"></iframe>
+            width="600"
-                </div>
+            height="450"
+            style="border: 0"
+            allowfullscreen=""
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
+          ></iframe>
+        </div>
 
-                <a class="btn-solid-reg mb-6" href="index.html#header">Réserver</a>
+        <a class="btn-solid-reg mb-6" href="index.html#header">Réserver</a>
-            </div> <!-- end of col -->
+      </div>
-        </div> <!-- end of row -->
+      <!-- end of col -->
-    </div> <!-- end of container -->
+    </div>
-</div> <!-- end of ex-basic-1 -->
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</div>
+<!-- end of ex-basic-1 -->
 <!-- end of basic -->
 {% endblock %}

pages/layouts/layout.html

@@ -239,4 +239,3 @@
     <!-- Custom scripts -->
   </body>
 </html>
-

pages/reservation.html

@@ -1,14 +1,19 @@
-{% extends "layouts/layout.html" %}
+{% extends "layouts/layout.html" %} {% block content %}
-{% block  content %}
 <!-- Header -->
 <header class="ex-header bg-gray">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h1 class="green">Merci pour votre message. Nous vous recontactons dès que possible.</h1>
+        <h1 class="green">
-            </div> <!-- end of col -->
+          Merci pour votre message. Nous vous recontactons dès que possible.
-        </div> <!-- end of row -->
+        </h1>
-    </div> <!-- end of container -->
+      </div>
-</header> <!-- end of ex-header -->
+      <!-- end of col -->
+    </div>
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</header>
+<!-- end of ex-header -->
 <!-- end of header -->
 {% endblock %}

pages/t2-corail.html

@@ -1,163 +1,216 @@
-{% extends "layouts/layout.html" %}
+{% extends "layouts/layout.html" %} {% block content %}
-{% block  content %}
 <!-- Header -->
 <header class="ex-header bg-gray">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h1 class="green">T2 Corail - 59€/nuit</h1>
+        <h1 class="green">T2 Corail - 59€/nuit</h1>
-            </div> <!-- end of col -->
+      </div>
-        </div> <!-- end of row -->
+      <!-- end of col -->
-    </div> <!-- end of container -->
+    </div>
-</header> <!-- end of ex-header -->
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</header>
+<!-- end of ex-header -->
 <!-- end of header -->
 
-
 <!-- Basic -->
 <div class="ex-basic-1 bg-gray pb-6">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-lg-12">
+      <div class="col-lg-12">
+        <!-- Image Slider Room -->
+        <div class="slider-container">
+          <div class="swiper-container image-slider-room">
+            <div class="swiper-wrapper">
+              <!-- Slide -->
+              <div class="swiper-slide">
+                <div class="image-container">
+                  <a
+                    class="popup-link"
+                    href="../images/villafleurie_t2_chambre.jpg"
+                    data-effect="fadeIn"
+                    ><img
+                      class="img-fluid"
+                      src="../images/villafleurie_t2_chambre.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
 
-                <!-- Image Slider Room -->
+              <!-- Slide -->
-                <div class="slider-container">
+              <div class="swiper-slide">
-                    <div class="swiper-container image-slider-room">
+                <div class="image-container">
-                        <div class="swiper-wrapper">
+                  <a
+                    class="popup-link"
+                    href="../images/villafleurie_t2_chambre_2.jpg"
+                    data-effect="fadeIn"
+                    ><img
+                      class="img-fluid"
+                      src="../images/villafleurie_t2_chambre_2.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
 
-                            <!-- Slide -->
+              <!-- Slide -->
-                            <div class="swiper-slide">
+              <div class="swiper-slide">
-                                <div class="image-container">
+                <div class="image-container">
-                                    <a class="popup-link" href="../images/villafleurie_t2_chambre.jpg"
+                  <a
-                                       data-effect="fadeIn"><img
+                    class="popup-link"
-                                            class="img-fluid" src="../images/villafleurie_t2_chambre.jpg"
+                    href="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
-                                            alt="alternative"></a>
+                    data-effect="fadeIn"
-                                </div>
+                    ><img
-                            </div>
+                      class="img-fluid"
-                            <!-- end of slide -->
+                      src="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
+              <div class="swiper-slide">
+                <div class="image-container">
+                  <a
+                    class="popup-link"
+                    href="../images/villafleurie_t2_salon_2.jpg"
+                    data-effect="fadeIn"
+                    ><img
+                      class="img-fluid"
+                      src="../images/villafleurie_t2_salon_2.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+            </div>
+            <!-- end of swiper-wrapper -->
 
-                            <!-- Slide -->
+            <!-- Add Arrows -->
-                            <div class="swiper-slide">
+            <div class="swiper-button-next"></div>
-                                <div class="image-container">
+            <div class="swiper-button-prev"></div>
-                                    <a class="popup-link" href="../images/villafleurie_t2_chambre_2.jpg"
+            <!-- end of add arrows -->
-                                       data-effect="fadeIn"><img
+          </div>
-                                            class="img-fluid" src="../images/villafleurie_t2_chambre_2.jpg"
+          <!-- end of swiper container -->
-                                            alt="alternative"></a>
+        </div>
-                                </div>
+        <!-- end of slider-container -->
-                            </div>
+        <!-- end of image slider -->
-                            <!-- end of slide -->
+      </div>
-
+      <!-- end of col -->
-                            <!-- Slide -->
+    </div>
-                            <div class="swiper-slide">
+    <!-- end of row -->
-                                <div class="image-container">
+  </div>
-                                    <a class="popup-link" href="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
+  <!-- end of container -->
-                                       data-effect="fadeIn"><img
+</div>
-                                            class="img-fluid" src="../images/villafleurie_t2_salon_1_wl81yXI.jpg"
+<!-- end of ex-basic-1 -->
-                                            alt="alternative"></a>
-                                </div>
-                            </div>
-                            <!-- end of slide -->
-                            <div class="swiper-slide">
-                                <div class="image-container">
-                                    <a class="popup-link" href="../images/villafleurie_t2_salon_2.jpg"
-                                       data-effect="fadeIn"><img
-                                            class="img-fluid" src="../images/villafleurie_t2_salon_2.jpg"
-                                            alt="alternative"></a>
-                                </div>
-                            </div>
-                        </div> <!-- end of swiper-wrapper -->
-
-                        <!-- Add Arrows -->
-                        <div class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div>
-                        <!-- end of add arrows -->
-
-                    </div> <!-- end of swiper container -->
-                </div> <!-- end of slider-container -->
-                <!-- end of image slider -->
-
-            </div> <!-- end of col -->
-        </div> <!-- end of row -->
-    </div> <!-- end of container -->
-</div> <!-- end of ex-basic-1 -->
 <!-- end of basic -->
 
-
 <!-- Basic -->
 <div class="ex-basic-1 pt-5">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h2 class="mt-3 mb-4">Description</h2>
+        <h2 class="mt-3 mb-4">Description</h2>
-                <p class="mb-5">Chacune des chambres de la VillaFleurie a été conçue pour offrir la meilleure expérience
+        <p class="mb-5">
-                    possible à de nombreux voyageurs, qu'ils soient à la recherche d'aventure ou qu'ils apprécient le
+          Chacune des chambres de la VillaFleurie a été conçue pour offrir la
-                    confort. Nous avons conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et toute
+          meilleure expérience possible à de nombreux voyageurs, qu'ils soient à
-                    l'équipe est très fière de ce que nous avons réalisé.</p>
+          la recherche d'aventure ou qu'ils apprécient le confort. Nous avons
+          conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et
+          toute l'équipe est très fière de ce que nous avons réalisé.
+        </p>
 
-                <div class="text-box mb-6">
+        <div class="text-box mb-6">
-                    <h3>Des chambres conçues pour le confort et la détente</h3>
+          <h3>Des chambres conçues pour le confort et la détente</h3>
-                    <p>Les chambres sont conçues pour offrir les meilleurs niveaux possibles de confort et de
+          <p>
-                        relaxation. Le design contemporain est basé sur des couleurs réconfortantes et parvient à plaire
+            Les chambres sont conçues pour offrir les meilleurs niveaux
-                        à de nombreux types de personnalités. Les matériaux utilisés sont modernes et durables.</p>
+            possibles de confort et de relaxation. Le design contemporain est
-                </div> <!-- end of text-box -->
+            basé sur des couleurs réconfortantes et parvient à plaire à de
+            nombreux types de personnalités. Les matériaux utilisés sont
+            modernes et durables.
+          </p>
+        </div>
+        <!-- end of text-box -->
 
-                <ul class="list-unstyled list-icon-lg mb-5">
+        <ul class="list-unstyled list-icon-lg mb-5">
-                    <li class="media">
+          <li class="media">
-                        <div class="list-icon bg-1">
+            <div class="list-icon bg-1">
-                            <i class="fas fa-shower"></i>
+              <i class="fas fa-shower"></i>
-                        </div>
+            </div>
-                        <div class="media-body">
+            <div class="media-body">
-                            <h3 class="list-item-title">Aménagements modernes</h3>
+              <h3 class="list-item-title">Aménagements modernes</h3>
-                            <p class="list-item-text">Les équipements et les chambres de VillaFleurie sont conçus pour
+              <p class="list-item-text">
-                                offrir les meilleurs niveaux possibles de confort et de relaxation. Le design est
+                Les équipements et les chambres de VillaFleurie sont conçus pour
-                                contemporain, basé sur des couleurs réconfortantes, et parvient à séduire de nombreux
+                offrir les meilleurs niveaux possibles de confort et de
-                                types de personnalités et de goûts. Les matériaux utilisés dans la
+                relaxation. Le design est contemporain, basé sur des couleurs
-                                construction de VillaFleurie proviennent des meilleurs fournisseurs.</p>
+                réconfortantes, et parvient à séduire de nombreux types de
-                        </div>
+                personnalités et de goûts. Les matériaux utilisés dans la
-                    </li>
+                construction de VillaFleurie proviennent des meilleurs
-                    <li class="media">
+                fournisseurs.
-                        <div class="list-icon bg-2">
+              </p>
-                            <i class="fas fa-tv"></i>
+            </div>
-                        </div>
+          </li>
-                        <div class="media-body">
+          <li class="media">
-                            <h3 class="list-item-title">Appareils électroménagers de qualité</h3>
+            <div class="list-icon bg-2">
-                            <p class="list-item-text">Toute l'électronique est fonctionnelle et conçue pour offrir les
+              <i class="fas fa-tv"></i>
-                                meilleurs niveaux de confort et de relaxation. Le design est contemporain, basé sur des
+            </div>
-                                couleurs réconfortantes et parvient à séduire de nombreux types de personnalités et de
+            <div class="media-body">
-                                goûts. L'objectif principal de tous les appareils est d'offrir un grand confort à
+              <h3 class="list-item-title">
-                                l'intérieur.</p>
+                Appareils électroménagers de qualité
-                        </div>
+              </h3>
-                    </li>
+              <p class="list-item-text">
-                </ul> <!-- end of list-unstyled -->
+                Toute l'électronique est fonctionnelle et conçue pour offrir les
+                meilleurs niveaux de confort et de relaxation. Le design est
+                contemporain, basé sur des couleurs réconfortantes et parvient à
+                séduire de nombreux types de personnalités et de goûts.
+                L'objectif principal de tous les appareils est d'offrir un grand
+                confort à l'intérieur.
+              </p>
+            </div>
+          </li>
+        </ul>
+        <!-- end of list-unstyled -->
 
-                <p class="mb-4">D'autres caractéristiques ont été conçues pour offrir les meilleurs niveaux possibles de
+        <p class="mb-4">
-                    confort et de relaxation. Le design contemporain basé sur des couleurs réconfortantes et parvient à
+          D'autres caractéristiques ont été conçues pour offrir les meilleurs
-                    séduire de nombreux types de personnalités et de goûts. Les matériaux utilisés dans la
+          niveaux possibles de confort et de relaxation. Le design contemporain
-                    construction de la villa sont modernes et durables.</p>
+          basé sur des couleurs réconfortantes et parvient à séduire de nombreux
+          types de personnalités et de goûts. Les matériaux utilisés dans la
+          construction de la villa sont modernes et durables.
+        </p>
 
-                <ul class="list-unstyled li-space-lg amenities mb-5">
+        <ul class="list-unstyled li-space-lg amenities mb-5">
-                    <li class="media">
+          <li class="media">
-                        <i class="fas fa-shower"></i>
+            <i class="fas fa-shower"></i>
-                        <div class="media-body"><strong>Réserve d'eau</strong> VillaFleurie est équipée d'une réserve
+            <div class="media-body">
-                            d'eau permettant de ne pas se soucier des éventuelles coupures d'eau
+              <strong>Réserve d'eau</strong> VillaFleurie est équipée d'une
-                        </div>
+              réserve d'eau permettant de ne pas se soucier des éventuelles
-                    </li>
+              coupures d'eau
-                    <li class="media">
+            </div>
-                        <i class="fas fa-tv"></i>
+          </li>
-                        <div class="media-body"><strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
+          <li class="media">
-                            passer à l'intérieur.
+            <i class="fas fa-tv"></i>
-                        </div>
+            <div class="media-body">
-                    </li>
+              <strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
-                    <li class="media">
+              passer à l'intérieur.
-                        <i class="fas fa-snowflake"></i>
+            </div>
-                        <div class="media-body"><strong>Climatisation</strong> de pointe spécialement conçue pour créer
+          </li>
-                            une température optimale
+          <li class="media">
-                        </div>
+            <i class="fas fa-snowflake"></i>
-                    </li>
+            <div class="media-body">
-                </ul>
+              <strong>Climatisation</strong> de pointe spécialement conçue pour
-                <a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
+              créer une température optimale
-            </div> <!-- end of col -->
+            </div>
-        </div> <!-- end of row -->
+          </li>
-    </div> <!-- end of container -->
+        </ul>
-</div> <!-- end of ex-basic-1 -->
+        <a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
+      </div>
+      <!-- end of col -->
+    </div>
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</div>
+<!-- end of ex-basic-1 -->
 <!-- end of basic -->
 {% endblock %}

pages/t3-azur.html

@@ -1,156 +1,203 @@
-{% extends "layouts/layout.html" %}
+{% extends "layouts/layout.html" %} {% block content %}
-{% block  content %}
 <!-- Header -->
 <header class="ex-header bg-gray">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h1 class="green">T3 Azur - 79€/nuit</h1>
+        <h1 class="green">T3 Azur - 79€/nuit</h1>
-            </div> <!-- end of col -->
+      </div>
-        </div> <!-- end of row -->
+      <!-- end of col -->
-    </div> <!-- end of container -->
+    </div>
-</header> <!-- end of ex-header -->
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</header>
+<!-- end of ex-header -->
 <!-- end of header -->
 
-
 <!-- Basic -->
 <div class="ex-basic-1 bg-gray pb-6">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-lg-12">
+      <div class="col-lg-12">
+        <!-- Image Slider Room -->
+        <div class="slider-container">
+          <div class="swiper-container image-slider-room">
+            <div class="swiper-wrapper">
+              <!-- Slide -->
+              <div class="swiper-slide">
+                <div class="image-container">
+                  <a
+                    class="popup-link"
+                    href="../images/villafleurie_t3_chambre.jpg"
+                    data-effect="fadeIn"
+                    ><img
+                      class="img-fluid"
+                      src="../images/villafleurie_t3_chambre.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
 
-                <!-- Image Slider Room -->
+              <!-- Slide -->
-                <div class="slider-container">
+              <div class="swiper-slide">
-                    <div class="swiper-container image-slider-room">
+                <div class="image-container">
-                        <div class="swiper-wrapper">
+                  <a
+                    class="popup-link"
+                    href="../images/villafleurie_t3_salon.jpg"
+                    data-effect="fadeIn"
+                    ><img
+                      class="img-fluid"
+                      src="../images/villafleurie_t3_salon.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
 
-                            <!-- Slide -->
+              <!-- Slide -->
-                            <div class="swiper-slide">
+              <div class="swiper-slide">
-                                <div class="image-container">
+                <div class="image-container">
-                                    <a class="popup-link" href="../images/villafleurie_t3_chambre.jpg"
+                  <a
-                                       data-effect="fadeIn"><img class="img-fluid"
+                    class="popup-link"
-                                                                 src="../images/villafleurie_t3_chambre.jpg"
+                    href="../images/villafleurie_t3_cuisine.jpg"
-                                                                 alt="alternative"></a>
+                    data-effect="fadeIn"
-                                </div>
+                    ><img
-                            </div>
+                      class="img-fluid"
-                            <!-- end of slide -->
+                      src="../images/villafleurie_t3_cuisine.jpg"
+                      alt="alternative"
+                  /></a>
+                </div>
+              </div>
+              <!-- end of slide -->
+            </div>
+            <!-- end of swiper-wrapper -->
 
-                            <!-- Slide -->
+            <!-- Add Arrows -->
-                            <div class="swiper-slide">
+            <div class="swiper-button-next"></div>
-                                <div class="image-container">
+            <div class="swiper-button-prev"></div>
-                                    <a class="popup-link" href="../images/villafleurie_t3_salon.jpg"
+            <!-- end of add arrows -->
-                                       data-effect="fadeIn"><img class="img-fluid"
+          </div>
-                                                                 src="../images/villafleurie_t3_salon.jpg"
+          <!-- end of swiper container -->
-                                                                 alt="alternative"></a>
+        </div>
-                                </div>
+        <!-- end of slider-container -->
-                            </div>
+        <!-- end of image slider -->
-                            <!-- end of slide -->
+      </div>
-
+      <!-- end of col -->
-                            <!-- Slide -->
+    </div>
-                            <div class="swiper-slide">
+    <!-- end of row -->
-                                <div class="image-container">
+  </div>
-                                    <a class="popup-link" href="../images/villafleurie_t3_cuisine.jpg"
+  <!-- end of container -->
-                                       data-effect="fadeIn"><img class="img-fluid"
+</div>
-                                                                 src="../images/villafleurie_t3_cuisine.jpg"
+<!-- end of ex-basic-1 -->
-                                                                 alt="alternative"></a>
-                                </div>
-                            </div>
-                            <!-- end of slide -->
-
-                        </div> <!-- end of swiper-wrapper -->
-
-                        <!-- Add Arrows -->
-                        <div class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div>
-                        <!-- end of add arrows -->
-
-                    </div> <!-- end of swiper container -->
-                </div> <!-- end of slider-container -->
-                <!-- end of image slider -->
-
-            </div> <!-- end of col -->
-        </div> <!-- end of row -->
-    </div> <!-- end of container -->
-</div> <!-- end of ex-basic-1 -->
 <!-- end of basic -->
 
-
 <!-- Basic -->
 <div class="ex-basic-1 pt-5">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-xl-10 offset-xl-1">
+      <div class="col-xl-10 offset-xl-1">
-                <h2 class="mt-3 mb-4">Description</h2>
+        <h2 class="mt-3 mb-4">Description</h2>
-                <p class="mb-5">Chacune des chambres de la VillaFleurie a été conçue pour offrir la meilleure expérience
+        <p class="mb-5">
-                    possible à de nombreux voyageurs, qu'ils soient à la recherche d'aventure ou qu'ils apprécient le
+          Chacune des chambres de la VillaFleurie a été conçue pour offrir la
-                    confort. Nous avons conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et toute
+          meilleure expérience possible à de nombreux voyageurs, qu'ils soient à
-                    l'équipe est très fière de ce que nous avons réalisé.</p>
+          la recherche d'aventure ou qu'ils apprécient le confort. Nous avons
+          conçu les chambres en nous appuyant sur plus de 10 ans d'expérience et
+          toute l'équipe est très fière de ce que nous avons réalisé.
+        </p>
 
-                <div class="text-box mb-6">
+        <div class="text-box mb-6">
-                    <h3>Des chambres conçues pour le confort et la détente</h3>
+          <h3>Des chambres conçues pour le confort et la détente</h3>
-                    <p>Les chambres sont conçues pour offrir les meilleurs niveaux possibles de confort et de
+          <p>
-                        relaxation. Le design contemporain est basé sur des couleurs réconfortantes et parvient à plaire
+            Les chambres sont conçues pour offrir les meilleurs niveaux
-                        à de nombreux types de personnalités. Les matériaux utilisés sont modernes et durables.</p>
+            possibles de confort et de relaxation. Le design contemporain est
-                </div> <!-- end of text-box -->
+            basé sur des couleurs réconfortantes et parvient à plaire à de
+            nombreux types de personnalités. Les matériaux utilisés sont
+            modernes et durables.
+          </p>
+        </div>
+        <!-- end of text-box -->
 
-                <ul class="list-unstyled list-icon-lg mb-5">
+        <ul class="list-unstyled list-icon-lg mb-5">
-                    <li class="media">
+          <li class="media">
-                        <div class="list-icon bg-1">
+            <div class="list-icon bg-1">
-                            <i class="fas fa-shower"></i>
+              <i class="fas fa-shower"></i>
-                        </div>
+            </div>
-                        <div class="media-body">
+            <div class="media-body">
-                            <h3 class="list-item-title">Aménagements modernes</h3>
+              <h3 class="list-item-title">Aménagements modernes</h3>
-                            <p class="list-item-text">Les équipements et les chambres de VillaFleurie sont conçus pour
+              <p class="list-item-text">
-                                offrir les meilleurs niveaux possibles de confort et de relaxation. Le design est
+                Les équipements et les chambres de VillaFleurie sont conçus pour
-                                contemporain, basé sur des couleurs réconfortantes, et parvient à séduire de nombreux
+                offrir les meilleurs niveaux possibles de confort et de
-                                types de personnalités et de goûts. Les matériaux utilisés dans la
+                relaxation. Le design est contemporain, basé sur des couleurs
-                                construction de VillaFleurie proviennent des meilleurs fournisseurs.</p>
+                réconfortantes, et parvient à séduire de nombreux types de
-                        </div>
+                personnalités et de goûts. Les matériaux utilisés dans la
-                    </li>
+                construction de VillaFleurie proviennent des meilleurs
-                    <li class="media">
+                fournisseurs.
-                        <div class="list-icon bg-2">
+              </p>
-                            <i class="fas fa-tv"></i>
+            </div>
-                        </div>
+          </li>
-                        <div class="media-body">
+          <li class="media">
-                            <h3 class="list-item-title">Appareils électroménagers de qualité</h3>
+            <div class="list-icon bg-2">
-                            <p class="list-item-text">Toute l'électronique est fonctionnelle et conçue pour offrir les
+              <i class="fas fa-tv"></i>
-                                meilleurs niveaux de confort et de relaxation. Le design est contemporain, basé sur des
+            </div>
-                                couleurs réconfortantes et parvient à séduire de nombreux types de personnalités et de
+            <div class="media-body">
-                                goûts. L'objectif principal de tous les appareils est d'offrir un grand confort à
+              <h3 class="list-item-title">
-                                l'intérieur.</p>
+                Appareils électroménagers de qualité
-                        </div>
+              </h3>
-                    </li>
+              <p class="list-item-text">
-                </ul> <!-- end of list-unstyled -->
+                Toute l'électronique est fonctionnelle et conçue pour offrir les
+                meilleurs niveaux de confort et de relaxation. Le design est
+                contemporain, basé sur des couleurs réconfortantes et parvient à
+                séduire de nombreux types de personnalités et de goûts.
+                L'objectif principal de tous les appareils est d'offrir un grand
+                confort à l'intérieur.
+              </p>
+            </div>
+          </li>
+        </ul>
+        <!-- end of list-unstyled -->
 
-                <p class="mb-4">D'autres caractéristiques ont été conçues pour offrir les meilleurs niveaux possibles de
+        <p class="mb-4">
-                    confort et de relaxation. Le design contemporain basé sur des couleurs réconfortantes et parvient à
+          D'autres caractéristiques ont été conçues pour offrir les meilleurs
-                    séduire de nombreux types de personnalités et de goûts. Les matériaux utilisés dans la
+          niveaux possibles de confort et de relaxation. Le design contemporain
-                    construction de la villa sont modernes et durables.</p>
+          basé sur des couleurs réconfortantes et parvient à séduire de nombreux
+          types de personnalités et de goûts. Les matériaux utilisés dans la
+          construction de la villa sont modernes et durables.
+        </p>
 
-                <ul class="list-unstyled li-space-lg amenities mb-5">
+        <ul class="list-unstyled li-space-lg amenities mb-5">
-                    <li class="media">
+          <li class="media">
-                        <i class="fas fa-shower"></i>
+            <i class="fas fa-shower"></i>
-                        <div class="media-body"><strong>Réserve d'eau</strong> VillaFleurie est équipée d'une réserve
+            <div class="media-body">
-                            d'eau permettant de ne pas se soucier des éventuelles coupures d'eau
+              <strong>Réserve d'eau</strong> VillaFleurie est équipée d'une
-                        </div>
+              réserve d'eau permettant de ne pas se soucier des éventuelles
-                    </li>
+              coupures d'eau
-                    <li class="media">
+            </div>
-                        <i class="fas fa-tv"></i>
+          </li>
-                        <div class="media-body"><strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
+          <li class="media">
-                            passer à l'intérieur.
+            <i class="fas fa-tv"></i>
-                        </div>
+            <div class="media-body">
-                    </li>
+              <strong>TV LCD moderne</strong> pour les jours de pluie qu'il faut
-                    <li class="media">
+              passer à l'intérieur.
-                        <i class="fas fa-snowflake"></i>
+            </div>
-                        <div class="media-body"><strong>Climatisation</strong> de pointe spécialement conçue pour créer
+          </li>
-                            une température optimale
+          <li class="media">
-                        </div>
+            <i class="fas fa-snowflake"></i>
-                    </li>
+            <div class="media-body">
-                </ul>
+              <strong>Climatisation</strong> de pointe spécialement conçue pour
-                <a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
+              créer une température optimale
-            </div> <!-- end of col -->
+            </div>
-        </div> <!-- end of row -->
+          </li>
-    </div> <!-- end of container -->
+        </ul>
-</div> <!-- end of ex-basic-1 -->
+        <a class="btn-solid-reg mb-6" href="index.html">Réserver</a>
+      </div>
+      <!-- end of col -->
+    </div>
+    <!-- end of row -->
+  </div>
+  <!-- end of container -->
+</div>
+<!-- end of ex-basic-1 -->
 <!-- end of basic -->
 {% endblock %}

pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 onlyBuiltDependencies:
-  - '@tailwindcss/oxide'
+  - "@tailwindcss/oxide"
   - esbuild
   - sharp

public/assets/css/bootstrap-datepicker3.css

@@ -24,7 +24,7 @@
   padding: 4px;
 }
 .datepicker-dropdown:before {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
@@ -34,7 +34,7 @@
   position: absolute;
 }
 .datepicker-dropdown:after {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
@@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
   margin-left: -5px;
   margin-right: -5px;
 }
-/*# sourceMappingURL=bootstrap-datepicker3.css.map */
+/*# sourceMappingURL=bootstrap-datepicker3.css.map */

public/assets/css/magnific-popup.css

@@ -8,7 +8,8 @@
   overflow: hidden;
   position: fixed;
   background: #0b0b0b;
-  opacity: 0.8; }
+  opacity: 0.8;
+}
 
 .mfp-wrap {
   top: 0;
@@ -18,7 +19,8 @@
   z-index: 1043;
   position: fixed;
   outline: none !important;
-  -webkit-backface-visibility: hidden; }
+  -webkit-backface-visibility: hidden;
+}
 
 .mfp-container {
   text-align: center;
@@ -28,16 +30,19 @@
   left: 0;
   top: 0;
   padding: 0 8px;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
 .mfp-container:before {
-  content: '';
+  content: "";
   display: inline-block;
   height: 100%;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
 
 .mfp-align-top .mfp-container:before {
-  display: none; }
+  display: none;
+}
 
 .mfp-content {
   position: relative;
@@ -45,29 +50,36 @@
   vertical-align: middle;
   margin: 0 auto;
   text-align: left;
-  z-index: 1045; }
+  z-index: 1045;
+}
 
 .mfp-inline-holder .mfp-content,
 .mfp-ajax-holder .mfp-content {
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-ajax-cur {
-  cursor: progress; }
+  cursor: progress;
+}
 
-.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
   cursor: -moz-zoom-out;
   cursor: -webkit-zoom-out;
-  cursor: zoom-out; }
+  cursor: zoom-out;
+}
 
 .mfp-zoom {
   cursor: pointer;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
-  cursor: zoom-in; }
+  cursor: zoom-in;
+}
 
 .mfp-auto-cursor .mfp-content {
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-close,
 .mfp-arrow,
@@ -75,16 +87,19 @@
 .mfp-counter {
   -webkit-user-select: none;
   -moz-user-select: none;
-  user-select: none; }
+  user-select: none;
+}
 
 .mfp-loading.mfp-figure {
-  display: none; }
+  display: none;
+}
 
 .mfp-hide {
-  display: none !important; }
+  display: none !important;
+}
 
 .mfp-preloader {
-  color: #CCC;
+  color: #ccc;
   position: absolute;
   top: 50%;
   width: auto;
@@ -92,17 +107,22 @@
   margin-top: -0.8em;
   left: 8px;
   right: 8px;
-  z-index: 1044; }
+  z-index: 1044;
-  .mfp-preloader a {
+}
-    color: #CCC; }
+.mfp-preloader a {
-    .mfp-preloader a:hover {
+  color: #ccc;
-      color: #FFF; }
+}
+.mfp-preloader a:hover {
+  color: #fff;
+}
 
 .mfp-s-ready .mfp-preloader {
-  display: none; }
+  display: none;
+}
 
 .mfp-s-error .mfp-content {
-  display: none; }
+  display: none;
+}
 
 button.mfp-close,
 button.mfp-arrow {
@@ -116,11 +136,13 @@ button.mfp-arrow {
   padding: 0;
   z-index: 1046;
   box-shadow: none;
-  touch-action: manipulation; }
+  touch-action: manipulation;
+}
 
 button::-moz-focus-inner {
   padding: 0;
-  border: 0; }
+  border: 0;
+}
 
 .mfp-close {
   width: 44px;
@@ -133,35 +155,41 @@ button::-moz-focus-inner {
   text-align: center;
   opacity: 0.65;
   padding: 0 0 18px 10px;
-  color: #FFF;
+  color: #fff;
   font-style: normal;
   font-size: 28px;
-  font-family: Arial, Baskerville, monospace; }
+  font-family: Arial, Baskerville, monospace;
-  .mfp-close:hover,
+}
-  .mfp-close:focus {
+.mfp-close:hover,
-    opacity: 1; }
+.mfp-close:focus {
-  .mfp-close:active {
+  opacity: 1;
-    top: 1px; }
+}
+.mfp-close:active {
+  top: 1px;
+}
 
 .mfp-close-btn-in .mfp-close {
-  color: #333; }
+  color: #333;
+}
 
 .mfp-image-holder .mfp-close,
 .mfp-iframe-holder .mfp-close {
-  color: #FFF;
+  color: #fff;
   right: -6px;
   text-align: right;
   padding-right: 6px;
-  width: 100%; }
+  width: 100%;
+}
 
 .mfp-counter {
   position: absolute;
   top: 0;
   right: 0;
-  color: #CCC;
+  color: #ccc;
   font-size: 12px;
   line-height: 18px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .mfp-arrow {
   position: absolute;
@@ -172,74 +200,91 @@ button::-moz-focus-inner {
   padding: 0;
   width: 90px;
   height: 110px;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: transparent;
-  .mfp-arrow:active {
+}
-    margin-top: -54px; }
+.mfp-arrow:active {
-  .mfp-arrow:hover,
+  margin-top: -54px;
-  .mfp-arrow:focus {
+}
-    opacity: 1; }
+.mfp-arrow:hover,
-  .mfp-arrow:before,
+.mfp-arrow:focus {
-  .mfp-arrow:after {
+  opacity: 1;
-    content: '';
+}
-    display: block;
+.mfp-arrow:before,
-    width: 0;
+.mfp-arrow:after {
-    height: 0;
+  content: "";
-    position: absolute;
+  display: block;
-    left: 0;
+  width: 0;
-    top: 0;
+  height: 0;
-    margin-top: 35px;
+  position: absolute;
-    margin-left: 35px;
+  left: 0;
-    border: medium inset transparent; }
+  top: 0;
-  .mfp-arrow:after {
+  margin-top: 35px;
-    border-top-width: 13px;
+  margin-left: 35px;
-    border-bottom-width: 13px;
+  border: medium inset transparent;
-    top: 8px; }
+}
-  .mfp-arrow:before {
+.mfp-arrow:after {
-    border-top-width: 21px;
+  border-top-width: 13px;
-    border-bottom-width: 21px;
+  border-bottom-width: 13px;
-    opacity: 0.7; }
+  top: 8px;
+}
+.mfp-arrow:before {
+  border-top-width: 21px;
+  border-bottom-width: 21px;
+  opacity: 0.7;
+}
 
 .mfp-arrow-left {
-  left: 0; }
+  left: 0;
-  .mfp-arrow-left:after {
+}
-    border-right: 17px solid #FFF;
+.mfp-arrow-left:after {
-    margin-left: 31px; }
+  border-right: 17px solid #fff;
-  .mfp-arrow-left:before {
+  margin-left: 31px;
-    margin-left: 25px;
+}
-    border-right: 27px solid #3F3F3F; }
+.mfp-arrow-left:before {
+  margin-left: 25px;
+  border-right: 27px solid #3f3f3f;
+}
 
 .mfp-arrow-right {
-  right: 0; }
+  right: 0;
-  .mfp-arrow-right:after {
+}
-    border-left: 17px solid #FFF;
+.mfp-arrow-right:after {
-    margin-left: 39px; }
+  border-left: 17px solid #fff;
-  .mfp-arrow-right:before {
+  margin-left: 39px;
-    border-left: 27px solid #3F3F3F; }
+}
+.mfp-arrow-right:before {
+  border-left: 27px solid #3f3f3f;
+}
 
 .mfp-iframe-holder {
   padding-top: 40px;
-  padding-bottom: 40px; }
+  padding-bottom: 40px;
-  .mfp-iframe-holder .mfp-content {
+}
-    line-height: 0;
+.mfp-iframe-holder .mfp-content {
-    width: 100%;
+  line-height: 0;
-    max-width: 900px; }
+  width: 100%;
-  .mfp-iframe-holder .mfp-close {
+  max-width: 900px;
-    top: -40px; }
+}
+.mfp-iframe-holder .mfp-close {
+  top: -40px;
+}
 
 .mfp-iframe-scaler {
   width: 100%;
   height: 0;
   overflow: hidden;
-  padding-top: 56.25%; }
+  padding-top: 56.25%;
-  .mfp-iframe-scaler iframe {
+}
-    position: absolute;
+.mfp-iframe-scaler iframe {
-    display: block;
+  position: absolute;
-    top: 0;
+  display: block;
-    left: 0;
+  top: 0;
-    width: 100%;
+  left: 0;
-    height: 100%;
+  width: 100%;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  height: 100%;
-    background: #000; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #000;
+}
 
 /* Main image in popup */
 img.mfp-img {
@@ -250,31 +295,36 @@ img.mfp-img {
   line-height: 0;
   box-sizing: border-box;
   padding: 40px 0 40px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 /* The shadow behind the image */
 .mfp-figure {
-  line-height: 0; }
+  line-height: 0;
-  .mfp-figure:after {
+}
-    content: '';
+.mfp-figure:after {
-    position: absolute;
+  content: "";
-    left: 0;
+  position: absolute;
-    top: 40px;
+  left: 0;
-    bottom: 40px;
+  top: 40px;
-    display: block;
+  bottom: 40px;
-    right: 0;
+  display: block;
-    width: auto;
+  right: 0;
-    height: auto;
+  width: auto;
-    z-index: -1;
+  height: auto;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  z-index: -1;
-    background: #444; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-  .mfp-figure small {
+  background: #444;
-    color: #BDBDBD;
+}
-    display: block;
+.mfp-figure small {
-    font-size: 12px;
+  color: #bdbdbd;
-    line-height: 14px; }
+  display: block;
-  .mfp-figure figure {
+  font-size: 12px;
-    margin: 0; }
+  line-height: 14px;
+}
+.mfp-figure figure {
+  margin: 0;
+}
 
 .mfp-bottom-bar {
   margin-top: -36px;
@@ -282,36 +332,45 @@ img.mfp-img {
   top: 100%;
   left: 0;
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-title {
   text-align: left;
   line-height: 18px;
-  color: #F3F3F3;
+  color: #f3f3f3;
   word-wrap: break-word;
-  padding-right: 36px; }
+  padding-right: 36px;
+}
 
 .mfp-image-holder .mfp-content {
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 .mfp-gallery .mfp-image-holder .mfp-figure {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
-@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+@media screen and (max-width: 800px) and (orientation: landscape),
+  screen and (max-height: 300px) {
   /**
        * Remove all paddings around the image on small screen
        */
   .mfp-img-mobile .mfp-image-holder {
     padding-left: 0;
-    padding-right: 0; }
+    padding-right: 0;
+  }
   .mfp-img-mobile img.mfp-img {
-    padding: 0; }
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-figure:after {
     top: 0;
-    bottom: 0; }
+    bottom: 0;
+  }
   .mfp-img-mobile .mfp-figure small {
     display: inline;
-    margin-left: 5px; }
+    margin-left: 5px;
+  }
   .mfp-img-mobile .mfp-bottom-bar {
     background: rgba(0, 0, 0, 0.6);
     bottom: 0;
@@ -319,12 +378,15 @@ img.mfp-img {
     top: auto;
     padding: 3px 5px;
     position: fixed;
-    box-sizing: border-box; }
+    box-sizing: border-box;
-    .mfp-img-mobile .mfp-bottom-bar:empty {
+  }
-      padding: 0; }
+  .mfp-img-mobile .mfp-bottom-bar:empty {
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-counter {
     right: 5px;
-    top: 3px; }
+    top: 3px;
+  }
   .mfp-img-mobile .mfp-close {
     top: 0;
     right: 0;
@@ -334,18 +396,25 @@ img.mfp-img {
     background: rgba(0, 0, 0, 0.6);
     position: fixed;
     text-align: center;
-    padding: 0; } }
+    padding: 0;
+  }
+}
 
 @media all and (max-width: 900px) {
   .mfp-arrow {
     -webkit-transform: scale(0.75);
-    transform: scale(0.75); }
+    transform: scale(0.75);
+  }
   .mfp-arrow-left {
     -webkit-transform-origin: 0;
-    transform-origin: 0; }
+    transform-origin: 0;
+  }
   .mfp-arrow-right {
     -webkit-transform-origin: 100%;
-    transform-origin: 100%; }
+    transform-origin: 100%;
+  }
   .mfp-container {
     padding-left: 6px;
-    padding-right: 6px; } }
+    padding-right: 6px;
+  }
+}

public/assets/css/swiper.css

@@ -41,7 +41,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
@@ -72,7 +74,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
 }
 .swiper-slide-invisible-blank {
   visibility: hidden;
@@ -87,11 +91,18 @@
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
-  -webkit-transition-property: height, -webkit-transform;
+  -webkit-transition-property:
-  transition-property: height, -webkit-transform;
+    height,
+    -webkit-transform;
+  transition-property:
+    height,
+    -webkit-transform;
   -o-transition-property: transform, height;
   transition-property: transform, height;
-  transition-property: transform, height, -webkit-transform;
+  transition-property:
+    transform,
+    height,
+    -webkit-transform;
 }
 /* 3D Effects */
 .swiper-container-3d {
@@ -121,28 +132,100 @@
   z-index: 10;
 }
 .swiper-container-3d .swiper-slide-shadow-left {
-  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-right {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-top {
-  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-bottom {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 /* IE10 Windows Phone 8 Fixes */
 .swiper-container-wp8-horizontal,
@@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
   -webkit-transform: translate3d(0px, -50%, 0);
   transform: translate3d(0px, -50%, 0);
 }
-.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 6px 0;
   display: block;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 8px;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
   display: inline-block;
-  -webkit-transition: 200ms top, 200ms -webkit-transform;
+  -webkit-transition:
-  transition: 200ms top, 200ms -webkit-transform;
+    200ms top,
-  -o-transition: 200ms transform, 200ms top;
+    200ms -webkit-transform;
-  transition: 200ms transform, 200ms top;
+  transition:
-  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
+    200ms top,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 0 4px;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   white-space: nowrap;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal
-  -webkit-transition: 200ms left, 200ms -webkit-transform;
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
-  transition: 200ms left, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms left;
+  -webkit-transition:
-  transition: 200ms transform, 200ms left;
+    200ms left,
-  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms left,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal.swiper-container-rtl
-  -webkit-transition: 200ms right, 200ms -webkit-transform;
+  > .swiper-pagination-bullets-dynamic
-  transition: 200ms right, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms right;
+  -webkit-transition:
-  transition: 200ms transform, 200ms right;
+    200ms right,
-  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms right,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right,
+    200ms -webkit-transform;
 }
 /* Progress */
 .swiper-pagination-progressbar {
@@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
   -ms-transform-origin: left top;
   transform-origin: left top;
 }
-.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+.swiper-container-rtl
+  .swiper-pagination-progressbar
+  .swiper-pagination-progressbar-fill {
   -webkit-transform-origin: right top;
   -ms-transform-origin: right top;
   transform-origin: right top;
 }
 .swiper-container-horizontal > .swiper-pagination-progressbar,
-.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-vertical
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 100%;
   height: 4px;
   left: 0;
   top: 0;
 }
 .swiper-container-vertical > .swiper-pagination-progressbar,
-.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-horizontal
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 4px;
   height: 100%;
   left: 0;
@@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-white {
   background: rgba(255, 255, 255, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-white
+  .swiper-pagination-progressbar-fill {
   background: #ffffff;
 }
 .swiper-pagination-black .swiper-pagination-bullet-active {
@@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-black {
   background: rgba(0, 0, 0, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-black
+  .swiper-pagination-progressbar-fill {
   background: #000000;
 }
 .swiper-pagination-lock {
@@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
 }
 .swiper-lazy-preloader:after {
   display: block;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

public/assets/js/jquery.easing.min.js

@@ -5,40 +5,300 @@
  * to offer multiple easing options
  *
  * TERMS OF USE - EASING EQUATIONS
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2001 Robert Penner
  * All rights reserved.
  *
  * TERMS OF USE - jQuery Easing
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2008 George McGinley Smith
  * All rights reserved.
  *
- * Redistribution and use in source and binary forms, with or without modification, 
+ * Redistribution and use in source and binary forms, with or without modification,
  * are permitted provided that the following conditions are met:
- * 
+ *
- * Redistributions of source code must retain the above copyright notice, this list of 
+ * Redistributions of source code must retain the above copyright notice, this list of
  * conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * Redistributions in binary form must reproduce the above copyright notice, this list
- * of conditions and the following disclaimer in the documentation and/or other materials 
+ * of conditions and the following disclaimer in the documentation and/or other materials
  * provided with the distribution.
- * 
+ *
- * Neither the name of the author nor the names of contributors may be used to endorse 
+ * Neither the name of the author nor the names of contributors may be used to endorse
  * or promote products derived from this software without specific prior written permission.
- * 
+ *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
- *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
- *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
- * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ * OF THE POSSIBILITY OF SUCH DAMAGE.
  *
-*/
+ */
-jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
+jQuery.easing.jswing = jQuery.easing.swing;
+jQuery.extend(jQuery.easing, {
+  def: "easeOutQuad",
+  swing: function (e, f, a, h, g) {
+    "use strict";
+    return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
+  },
+  easeInQuad: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f + a;
+  },
+  easeOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (f /= g) * (f - 2) + a;
+  },
+  easeInOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f + a;
+    }
+    return (-h / 2) * (--f * (f - 2) - 1) + a;
+  },
+  easeInCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f + a;
+  },
+  easeOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f + 1) + a;
+  },
+  easeInOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f + 2) + a;
+  },
+  easeInQuart: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f + a;
+  },
+  easeOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    return -h * ((f = f / g - 1) * f * f * f - 1) + a;
+  },
+  easeInOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f + a;
+    }
+    return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
+  },
+  easeInQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f * f + a;
+  },
+  easeOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
+  },
+  easeInOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
+  },
+  easeInSine: function (e, f, a, h, g) {
+    "use strict";
+    return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
+  },
+  easeOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sin((f / g) * (Math.PI / 2)) + a;
+  },
+  easeInOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
+  },
+  easeInExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
+  },
+  easeOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
+  },
+  easeInOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    if (f == 0) {
+      return a;
+    }
+    if (f == g) {
+      return a + h;
+    }
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
+    }
+    return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
+  },
+  easeInCirc: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
+  },
+  easeOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
+  },
+  easeInOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
+    }
+    return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
+  },
+  easeInElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      -(
+        g *
+        Math.pow(2, 10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j)
+      ) + e
+    );
+  },
+  easeOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
+      l +
+      e
+    );
+  },
+  easeInOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k / 2) == 2) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * (0.3 * 1.5);
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    if (h < 1) {
+      return (
+        -0.5 *
+          (g *
+            Math.pow(2, 10 * (h -= 1)) *
+            Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
+        e
+      );
+    }
+    return (
+      g *
+        Math.pow(2, -10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
+        0.5 +
+      l +
+      e
+    );
+  },
+  easeInBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * (f /= h) * f * ((g + 1) * f - g) + a;
+  },
+  easeOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
+  },
+  easeInOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    if ((f /= h / 2) < 1) {
+      return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
+    }
+    return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
+  },
+  easeInBounce: function (e, f, a, h, g) {
+    "use strict";
+    return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
+  },
+  easeOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g) < 1 / 2.75) {
+      return h * (7.5625 * f * f) + a;
+    } else {
+      if (f < 2 / 2.75) {
+        return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
+      } else {
+        if (f < 2.5 / 2.75) {
+          return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
+        } else {
+          return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
+        }
+      }
+    }
+  },
+  easeInOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if (f < g / 2) {
+      return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
+    }
+    return (
+      jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
+    );
+  },
+});

public/assets/js/scripts.js

@@ -1,208 +1,217 @@
 /* Description: Custom JS file */
 
+(function ($) {
+  "use strict";
 
-(function($) {
+  /* Navbar Scripts */
-    "use strict"; 
+  // jQuery for page scrolling feature - requires jQuery Easing plugin
-	
+  $(function () {
-	/* Navbar Scripts */
+    $(document).on("click", "a.page-scroll", function (event) {
-	// jQuery for page scrolling feature - requires jQuery Easing plugin
+      var $anchor = $(this);
-	$(function() {
+      $("html, body")
-		$(document).on('click', 'a.page-scroll', function(event) {
+        .stop()
-			var $anchor = $(this);
+        .animate(
-			$('html, body').stop().animate({
+          {
-				scrollTop: $($anchor.attr('href')).offset().top
+            scrollTop: $($anchor.attr("href")).offset().top,
-			}, 600, 'easeInOutExpo');
+          },
-			event.preventDefault();
+          600,
-		});
+          "easeInOutExpo",
+        );
+      event.preventDefault();
     });
+  });
 
-    // offcanvas script from Bootstrap + added element to close menu on click in small viewport
+  // offcanvas script from Bootstrap + added element to close menu on click in small viewport
-    $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
+  $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
-        $('.offcanvas-collapse').toggleClass('open')
+    "click",
-    })
+    function () {
+      $(".offcanvas-collapse").toggleClass("open");
+    },
+  );
 
-    // hover in desktop mode
+  // hover in desktop mode
-    function toggleDropdown (e) {
+  function toggleDropdown(e) {
-        const _d = $(e.target).closest('.dropdown'),
+    const _d = $(e.target).closest(".dropdown"),
-            _m = $('.dropdown-menu', _d);
+      _m = $(".dropdown-menu", _d);
-        setTimeout(function(){
+    setTimeout(
-            const shouldOpen = e.type !== 'click' && _d.is(':hover');
+      function () {
-            _m.toggleClass('show', shouldOpen);
+        const shouldOpen = e.type !== "click" && _d.is(":hover");
-            _d.toggleClass('show', shouldOpen);
+        _m.toggleClass("show", shouldOpen);
-            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
+        _d.toggleClass("show", shouldOpen);
-        }, e.type === 'mouseleave' ? 300 : 0);
+        $('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
-    }
+      },
-    $('body')
+      e.type === "mouseleave" ? 300 : 0,
-    .on('mouseenter mouseleave','.dropdown',toggleDropdown)
+    );
-    .on('click', '.dropdown-menu a', toggleDropdown);
+  }
+  $("body")
+    .on("mouseenter mouseleave", ".dropdown", toggleDropdown)
+    .on("click", ".dropdown-menu a", toggleDropdown);
 
+  /* Header Slider - Swiper */
+  var headerSlider = new Swiper(".header-slider", {
+    autoplay: {
+      delay: 3500,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    effect: "fade",
+    speed: 700,
+  });
 
-    /* Header Slider - Swiper */
+  /* Image Slider - Swiper */
-	var headerSlider = new Swiper('.header-slider', {
+  var imageSlider = new Swiper(".image-slider", {
-		autoplay: {
+    autoplay: {
-			delay: 3500,
+      delay: 3000,
-			disableOnInteraction: false
+      disableOnInteraction: false,
-		},
+    },
-		loop: true,
+    loop: false,
-		effect: "fade",
+    navigation: {
-		speed: 700
+      nextEl: ".swiper-button-next",
-    });
+      prevEl: ".swiper-button-prev",
-
+    },
-
+    slidesPerView: 3,
-    /* Image Slider - Swiper */
+    spaceBetween: 20,
-    var imageSlider = new Swiper('.image-slider', {
+    breakpoints: {
-        autoplay: {
+      // when window is <= 767px
-            delay: 3000,
+      767: {
-            disableOnInteraction: false
+        slidesPerView: 1,
-		},
+      },
-        loop: false,
+      // when window is <= 991px
-        navigation: {
+      991: {
-			nextEl: '.swiper-button-next',
+        slidesPerView: 2,
-			prevEl: '.swiper-button-prev'
+        spaceBetween: 10,
-		},
+      },
+      // when window is <= 1199px
+      1199: {
         slidesPerView: 3,
         spaceBetween: 20,
-		breakpoints: {
+      },
-            // when window is <= 767px
+    },
-            767: {
+  });
-                slidesPerView: 1
+
-            },
+  /* Image Slider Room - Swiper */
-            // when window is <= 991px
+  var imageSlider = new Swiper(".image-slider-room", {
-            991: {
+    autoplay: {
-                slidesPerView: 2,
+      delay: 3000,
-                spaceBetween: 10
+      disableOnInteraction: false,
-            },
+    },
-            // when window is <= 1199px
+    loop: false,
-            1199: {
+    navigation: {
-                slidesPerView: 3,
+      nextEl: ".swiper-button-next",
-                spaceBetween: 20
+      prevEl: ".swiper-button-prev",
-            },
+    },
-        }
+  });
+
+  /* Card Slider - Swiper */
+  var cardSlider = new Swiper(".card-slider", {
+    autoplay: {
+      delay: 4000,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    slidesPerView: 3,
+    spaceBetween: 30,
+    breakpoints: {
+      // when window is <= 767px
+      767: {
+        slidesPerView: 1,
+      },
+      // when window is <= 991px
+      991: {
+        slidesPerView: 2,
+      },
+    },
+  });
+
+  /* Image Lightbox - Magnific Popup */
+  $(".popup-link").magnificPopup({
+    removalDelay: 300,
+    type: "image",
+    callbacks: {
+      beforeOpen: function () {
+        this.st.image.markup = this.st.image.markup.replace(
+          "mfp-figure",
+          "mfp-figure " + this.st.el.attr("data-effect"),
+        );
+      },
+      beforeClose: function () {
+        $(".mfp-figure").addClass("fadeOut");
+      },
+    },
+    gallery: {
+      enabled: true, //enable gallery mode
+    },
+  });
+
+  /* Details Lightbox - Magnific Popup */
+  $(".popup-with-move-anim").magnificPopup({
+    type: "inline",
+    fixedContentPos: true,
+    fixedBgPos: true,
+    overflowY: "auto",
+    closeBtnInside: true,
+    preloader: false,
+    midClick: true,
+    removalDelay: 300,
+    mainClass: "my-mfp-slide-bottom",
+  });
+
+  /* Move Form Fields Label When User Types */
+  // for input and textarea fields
+  $("input, textarea").keyup(function () {
+    if ($(this).val() != "") {
+      $(this).addClass("notEmpty");
+    } else {
+      $(this).removeClass("notEmpty");
+    }
+  });
+
+  /* Datepicker - Bootstrap Datepicker */
+  $("#start").datepicker({
+    todayHighlight: true,
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
+
+  // detects change to selected date to keep the label above the value in the input field
+  $("#start")
+    .datepicker()
+    .on("changeDate", function (e) {
+      $("input[id=start]").addClass("notEmpty");
     });
 
+  $("#end").datepicker({
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
 
-    /* Image Slider Room - Swiper */
+  // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    var imageSlider = new Swiper('.image-slider-room', {
+  $("#end")
-        autoplay: {
+    .datepicker()
-            delay: 3000,
+    .on("changeDate", function (e) {
-            disableOnInteraction: false
+      $("input[id=end]").addClass("notEmpty");
-		},
-        loop: false,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev',
-		}
-    });
-    
-
-    /* Card Slider - Swiper */
-	var cardSlider = new Swiper('.card-slider', {
-		autoplay: {
-            delay: 4000,
-            disableOnInteraction: false
-		},
-        loop: true,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev'
-		},
-		slidesPerView: 3,
-		spaceBetween: 30,
-        breakpoints: {
-            // when window is <= 767px
-            767: {
-                slidesPerView: 1
-            },
-            // when window is <= 991px
-            991: {
-                slidesPerView: 2
-            }
-        }
     });
 
+  /* Back To Top Button */
+  // create the back to top button
+  $("body").prepend(
+    '<a href="body" class="back-to-top page-scroll">Back to Top</a>',
+  );
+  var amountScrolled = 700;
+  $(window).scroll(function () {
+    if ($(window).scrollTop() > amountScrolled) {
+      $("a.back-to-top").fadeIn("500");
+    } else {
+      $("a.back-to-top").fadeOut("500");
+    }
+  });
 
-    /* Image Lightbox - Magnific Popup */
+  /* Removes Long Focus On Buttons */
-	$('.popup-link').magnificPopup({
+  $(".button, a, button").mouseup(function () {
-		removalDelay: 300,
+    $(this).blur();
-		type: 'image',
+  });
-		callbacks: {
+})(jQuery);
-			beforeOpen: function() {
-				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
-			},
-			beforeClose: function() {
-				$('.mfp-figure').addClass('fadeOut');
-			}
-		},
-		gallery:{
-			enabled:true //enable gallery mode
-		}
-    });
-    
-
-    /* Details Lightbox - Magnific Popup */
-    $('.popup-with-move-anim').magnificPopup({
-		type: 'inline',
-		fixedContentPos: true,
-		fixedBgPos: true,
-		overflowY: 'auto',
-		closeBtnInside: true,
-		preloader: false,
-		midClick: true,
-		removalDelay: 300,
-		mainClass: 'my-mfp-slide-bottom'
-    });
-
-
-    /* Move Form Fields Label When User Types */
-    // for input and textarea fields
-    $("input, textarea").keyup(function(){
-		if ($(this).val() != '') {
-			$(this).addClass('notEmpty');
-		} else {
-			$(this).removeClass('notEmpty');
-		}
-    });
-
-    
-    /* Datepicker - Bootstrap Datepicker */
-	$('#start').datepicker({
-		todayHighlight: true,
-		autoclose: true,
-        format: 'MM/dd/yyyy',
-    });
-    
-    // detects change to selected date to keep the label above the value in the input field
-    $('#start').datepicker().on('changeDate', function(e) {
-        $("input[id=start]").addClass('notEmpty');
-    });
-	
-	$('#end').datepicker({
-		autoclose: true,
-		format: 'MM/dd/yyyy'
-    });
-
-    // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    $('#end').datepicker().on('changeDate', function(e) {
-        $("input[id=end]").addClass('notEmpty');
-    });
-    
-
-    /* Back To Top Button */
-    // create the back to top button
-    $('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
-    var amountScrolled = 700;
-    $(window).scroll(function() {
-        if ($(window).scrollTop() > amountScrolled) {
-            $('a.back-to-top').fadeIn('500');
-        } else {
-            $('a.back-to-top').fadeOut('500');
-        }
-    });
-
-
-	/* Removes Long Focus On Buttons */
-	$(".button, a, button").mouseup(function() {
-		$(this).blur();
-	});
-
-})(jQuery);

src/styles/global.css

@@ -6,5 +6,7 @@
 }
 
 @layer base {
-  body { @apply antialiased; }
+  body {
+    @apply antialiased;
+  }
 }

template/article.html

@@ -1,319 +1,507 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
     <!-- SEO Meta Tags -->
-    <meta name="description" content="Description">
+    <meta name="description" content="Description" />
-    <meta name="author" content="Author">
+    <meta name="author" content="Author" />
 
     <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
-	<meta property="og:site_name" content="" /> <!-- website name -->
+    <meta property="og:site_name" content="" />
-	<meta property="og:site" content="" /> <!-- website link -->
+    <!-- website name -->
-	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
+    <meta property="og:site" content="" />
-	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
+    <!-- website link -->
-	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
+    <meta property="og:title" content="" />
-	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
+    <!-- title shown in the actual shared post -->
-	<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
+    <meta property="og:description" content="" />
+    <!-- description shown in the actual shared post -->
+    <meta property="og:image" content="" />
+    <!-- image link, make sure it's jpg -->
+    <meta property="og:url" content="" />
+    <!-- where do you want your post to link to -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- to have large image post format in Twitter -->
 
     <!-- Webpage Title -->
     <title>Article Details - Villa</title>
-    
+
     <!-- Styles -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
-    <link href="css/bootstrap.css" rel="stylesheet">
+      rel="stylesheet"
-    <link href="css/fontawesome-all.css" rel="stylesheet">
+    />
-    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
+    <link
-    <link href="css/swiper.css" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
-	<link href="css/magnific-popup.css" rel="stylesheet">
+      rel="stylesheet"
-	<link href="css/styles.css" rel="stylesheet">
+    />
-	
+    <link href="css/bootstrap.css" rel="stylesheet" />
-	<!-- Favicon  -->
+    <link href="css/fontawesome-all.css" rel="stylesheet" />
-    <link rel="icon" href="images/favicon.png">
+    <link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
-</head>
+    <link href="css/swiper.css" rel="stylesheet" />
-<body data-spy="scroll" data-target=".fixed-top">
+    <link href="css/magnific-popup.css" rel="stylesheet" />
-    
+    <link href="css/styles.css" rel="stylesheet" />
+
+    <!-- Favicon  -->
+    <link rel="icon" href="images/favicon.png" />
+  </head>
+  <body data-spy="scroll" data-target=".fixed-top">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg fixed-top navbar-light">
-        <div class="container">
+      <div class="container">
-            
+        <!-- Text Logo - Use this if you don't have a graphic logo -->
-            <!-- Text Logo - Use this if you don't have a graphic logo -->
+        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
-            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
 
-            <!-- Image Logo -->
+        <!-- Image Logo -->
-            <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
+        <a class="navbar-brand logo-image" href="index.html"
+          ><img src="images/logo.svg" alt="alternative"
+        /></a>
 
-            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+        <button
-                <span class="navbar-toggler-icon"></span>
+          class="navbar-toggler p-0 border-0"
-            </button>
+          type="button"
+          data-toggle="offcanvas"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+        <div
-                <ul class="navbar-nav ">
+          class="navbar-collapse offcanvas-collapse"
-                    <li class="nav-item">
+          id="navbarsExampleDefault"
-                        <a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
+        >
-                    </li>
+          <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
+            <li class="nav-item">
-                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
+              <a class="nav-link" href="article.html"
-                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                >Article <span class="sr-only">(current)</span></a
-                            <a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
+              >
-                            <div class="dropdown-divider"></div>
+            </li>
-                            <a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
+            <li class="nav-item dropdown">
-                            <div class="dropdown-divider"></div>
+              <a
-                            <a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
+                class="nav-link dropdown-toggle"
-                        </div>
+                href="#"
-                    </li>
+                id="dropdown01"
-                    <li class="nav-item">
+                data-toggle="dropdown"
-                        <a class="nav-link" href="contact.html">Contact</a>
+                aria-haspopup="true"
-                    </li>
+                aria-expanded="false"
-                </ul>
+                >Rooms</a
-                <span class="nav-item ml-auto">
+              >
-                    <a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown01">
-                </span>
+                <a class="dropdown-item page-scroll" href="balcony-room.html"
-                <span class="nav-item lang-switch">
+                  >Balcony Room</a
-                    <a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
+                >
-                </span>
+                <div class="dropdown-divider"></div>
-            </div> <!-- end of navbar-collapse -->
+                <a class="dropdown-item page-scroll" href="panoramic-room.html"
-        </div> <!-- end of container -->
+                  >Panoramic Room</a
-    </nav> <!-- end of navbar -->
+                >
+                <div class="dropdown-divider"></div>
+                <a
+                  class="dropdown-item page-scroll"
+                  href="presidential-room.html"
+                  >Presidential Room</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+          </ul>
+          <span class="nav-item ml-auto">
+            <a class="btn-outline-sm" href="tel:1-800-324-9832"
+              ><i class="fas fa-phone-alt"></i>1-800-324-9832</a
+            >
+          </span>
+          <span class="nav-item lang-switch">
+            <a class="lang-item no-line active" href="index.html"
+              ><img src="images/language-en.jpg" alt="alternative" />EN</a
+            >
+            &nbsp;|&nbsp;
+            <a class="lang-item no-line" href="index.html"
+              ><img src="images/language-it.jpg" alt="alternative" />IT</a
+            >
+          </span>
+        </div>
+        <!-- end of navbar-collapse -->
+      </div>
+      <!-- end of container -->
+    </nav>
+    <!-- end of navbar -->
     <!-- end of navigation -->
 
-
     <!-- Header -->
     <header class="ex-header bg-gray">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h1 class="green">Popular Tourist Attraction Near Villa</h1>
+            <h1 class="green">Popular Tourist Attraction Near Villa</h1>
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+        </div>
-    </header> <!-- end of ex-header -->
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </header>
+    <!-- end of ex-header -->
     <!-- end of header -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 bg-gray pb-6">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <img class="img-fluid" src="images/article-details-large.jpg" alt="alternative">
+            <img
-                </div> <!-- end of col -->
+              class="img-fluid"
-            </div> <!-- end of row -->
+              src="images/article-details-large.jpg"
-        </div> <!-- end of container -->
+              alt="alternative"
-    </div> <!-- end of ex-basic-1 -->
+            />
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 pt-5">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <p class="mt-3">Are you looking for a relaxing experience in a wonderful Mediterranean setting? Then Villa is the right answer for romantic couples and fun families. You will find everything you need for a great holiday at Villa, from clean rooms with beautiful views to wonderful cuisine and friendly staff which will go out of their way to serve you.</p>
+            <p class="mt-3">
-                    <p class="mb-6">You can have a good time indoors but the most exciting things await you outside in close proximity of the Villa or further way as tourist attractions. We have our own very large pool for you to enjoy but Villa's position close to the sea shore provides access to wonderful sandy beaches with restricted access only for Villa customers.</p>
+              Are you looking for a relaxing experience in a wonderful
+              Mediterranean setting? Then Villa is the right answer for romantic
+              couples and fun families. You will find everything you need for a
+              great holiday at Villa, from clean rooms with beautiful views to
+              wonderful cuisine and friendly staff which will go out of their
+              way to serve you.
+            </p>
+            <p class="mb-6">
+              You can have a good time indoors but the most exciting things
+              await you outside in close proximity of the Villa or further way
+              as tourist attractions. We have our own very large pool for you to
+              enjoy but Villa's position close to the sea shore provides access
+              to wonderful sandy beaches with restricted access only for Villa
+              customers.
+            </p>
 
-                    <h2 class="mb-4">Enjoy The Mediterranean Experience</h2>
+            <h2 class="mb-4">Enjoy The Mediterranean Experience</h2>
-                    <p>Our mission at Villa is to focus an all the details to make your stay an amazing experience. We've trained our staff to meet your expectations and exceed them so that your Villa experience becomes not just a regular memory but one of the best memories you have. We're passionate about this stuff and we will not let you down.</p>
+            <p>
-                    <p class="mb-5">You can enjoy our clean spacious rooms, the splendid gardens, beautiful sea views and well thought out amenities. Villa's restaurant is famous for the fine cuisine created with only the freshest of local ingredients, cooked by famous chefs and served by our polite staff. The establishment's only purpose is to make you feel comfortable and relaxed.</p>
+              Our mission at Villa is to focus an all the details to make your
-                </div> <!-- end of col -->
+              stay an amazing experience. We've trained our staff to meet your
-            </div> <!-- end of row -->
+              expectations and exceed them so that your Villa experience becomes
-        </div> <!-- end of container -->
+              not just a regular memory but one of the best memories you have.
-    </div> <!-- end of ex-basic-1 -->
+              We're passionate about this stuff and we will not let you down.
+            </p>
+            <p class="mb-5">
+              You can enjoy our clean spacious rooms, the splendid gardens,
+              beautiful sea views and well thought out amenities. Villa's
+              restaurant is famous for the fine cuisine created with only the
+              freshest of local ingredients, cooked by famous chefs and served
+              by our polite staff. The establishment's only purpose is to make
+              you feel comfortable and relaxed.
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Cards -->
     <div class="ex-cards-1 mb-4">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    
+            <!-- Card -->
-                    <!-- Card -->
+            <div class="card">
-                    <div class="card">
+              <ul class="list-unstyled">
-                        <ul class="list-unstyled">
+                <li class="media">
-                            <li class="media">
+                  <span class="fa-stack">
-                                <span class="fa-stack">
+                    <span class="fas fa-circle fa-stack-2x"></span>
-                                    <span class="fas fa-circle fa-stack-2x"></span>
+                    <span class="fa-stack-1x">1</span>
-                                    <span class="fa-stack-1x">1</span>
+                  </span>
-                                </span>
+                  <div class="media-body">
-                                <div class="media-body">
+                    <h4>Beautiful Location</h4>
-                                    <h4>Beautiful Location</h4>
+                    <p>
-                                    <p>Villa is located at the Mediterranean sea and offers easy access to historical towns and tourist attractions</p>
+                      Villa is located at the Mediterranean sea and offers easy
-                                </div>
+                      access to historical towns and tourist attractions
-                            </li>
+                    </p>
-                        </ul>
+                  </div>
-                    </div> <!-- end of card -->
+                </li>
-                    <!-- end of card -->
+              </ul>
+            </div>
+            <!-- end of card -->
+            <!-- end of card -->
 
-                    <!-- Card -->
+            <!-- Card -->
-                    <div class="card">
+            <div class="card">
-                        <ul class="list-unstyled">
+              <ul class="list-unstyled">
-                            <li class="media">
+                <li class="media">
-                                <span class="fa-stack">
+                  <span class="fa-stack">
-                                    <span class="fas fa-circle fa-stack-2x"></span>
+                    <span class="fas fa-circle fa-stack-2x"></span>
-                                    <span class="fa-stack-1x">2</span>
+                    <span class="fa-stack-1x">2</span>
-                                </span>
+                  </span>
-                                <div class="media-body">
+                  <div class="media-body">
-                                    <h4>Great Amenities</h4>
+                    <h4>Great Amenities</h4>
-                                    <p>You have complete unrestricted access to our restaurant, private pool, beautiful gardens and sunny terrace</p>
+                    <p>
-                                </div>
+                      You have complete unrestricted access to our restaurant,
-                            </li>
+                      private pool, beautiful gardens and sunny terrace
-                        </ul>
+                    </p>
-                    </div> <!-- end of card -->
+                  </div>
-                    <!-- end of card -->
+                </li>
+              </ul>
+            </div>
+            <!-- end of card -->
+            <!-- end of card -->
 
-                    <!-- Card -->
+            <!-- Card -->
-                    <div class="card">
+            <div class="card">
-                        <ul class="list-unstyled">
+              <ul class="list-unstyled">
-                            <li class="media">
+                <li class="media">
-                                <span class="fa-stack">
+                  <span class="fa-stack">
-                                    <span class="fas fa-circle fa-stack-2x"></span>
+                    <span class="fas fa-circle fa-stack-2x"></span>
-                                    <span class="fa-stack-1x">3</span>
+                    <span class="fa-stack-1x">3</span>
-                                </span>
+                  </span>
-                                <div class="media-body">
+                  <div class="media-body">
-                                    <h4>Awesome Restaurant</h4>
+                    <h4>Awesome Restaurant</h4>
-                                    <p>Taste our delicious food made from fresh local ingredients that will delight meat lovers and vegetarians</p>
+                    <p>
-                                </div>
+                      Taste our delicious food made from fresh local ingredients
-                            </li>
+                      that will delight meat lovers and vegetarians
-                        </ul>
+                    </p>
-                    </div> <!-- end of card -->
+                  </div>
-                    <!-- end of card -->
+                </li>
-
+              </ul>
-                </div> <!-- end of col -->   
+            </div>
-            </div> <!-- end of row -->   
+            <!-- end of card -->
-        </div> <!-- end of container -->   
+            <!-- end of card -->
-    </div> <!-- end of ex-cards-1 -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-cards-1 -->
     <!-- end of cards -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <p class="mb-6">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
+            <p class="mb-6">
-                    
+              Each of Villa's rooms was designed to offer the best possible
-                    <h2 class="mb-4">Popular Tourist Attractions</h2>
+              experience for many types of travelers from the adventure seekers
-                    <img class="img-fluid mb-5" src="images/article-details-small.jpg" alt="alternative">
+              to those who value comfort. We've designed the rooms based on more
-                    <p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+              than 10 years of experience in the hospitality business and the
-                    <p class="mb-5">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
+              entire team is very proud of what we achieved with Villa.
-                    <div class="text-box mb-5">
+            </p>
-                        <h3>Wonderful Experience At The Mediterranean Sea</h3>
-                        <p>Enjoy the sun, the cool water and the benefits of fresh air by booking Villa the wonderful experience at the Mediterranean sea. It's the perfect holiday location for both tranquility seeking couples and fun families. Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and relaxing patterns.</p>
-                    </div> <!-- end of text-box -->
-                    <p class="mb-4">You can enjoy our clean spacious rooms, the splendid gardens, beautiful sea views and well thought out amenities. Villa's restaurant is famous for the fine cuisine created with only the freshest of local ingredients, cooked by famous chefs and served by our polite staff. The establishment's only purpose is to make you feel comfortable and relaxed.</p>
-                    <ul class="list-unstyled li-space-lg mb-5">
-                        <li class="media">
-                            <i class="fas fa-square"></i>
-                            <div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
-                        </li>
-                        <li class="media">
-                            <i class="fas fa-square"></i>
-                            <div class="media-body"><strong>Modern LCD TV</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
-                        </li>
-                        <li class="media">
-                            <i class="fas fa-square"></i>
-                            <div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
-                        </li>
-                        <li class="media">
-                            <i class="fas fa-square"></i>
-                            <div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
-                        </li>
-                        <li class="media">
-                            <i class="fas fa-square"></i>
-                            <div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
-                        </li>
-                    </ul>
 
-                    <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+            <h2 class="mb-4">Popular Tourist Attractions</h2>
-                </div> <!-- end of col -->
+            <img
-            </div> <!-- end of row -->
+              class="img-fluid mb-5"
-        </div> <!-- end of container -->
+              src="images/article-details-small.jpg"
-    </div> <!-- end of ex-basic-1 -->
+              alt="alternative"
+            />
+            <p>
+              The rooms are designed to offer the best possible levels of
+              comfort and relaxation. The design is contemporary based on
+              comforting colors and manages to appeal to many types of
+              personalities and tastes. The materials used in Villa's
+              construction are modern and durable, offering warm temperatures in
+              the winter and cooler summer days.
+            </p>
+            <p class="mb-5">
+              Villa's amenities and rooms rooms are designed to offer the best
+              possible levels of comfort and relaxation. The design is
+              contemporary based on comforting colors and manages to appeal to
+              many types of personalities and tastes. The materials used in
+              Villa's construction are provided by top suppliers.
+            </p>
+            <div class="text-box mb-5">
+              <h3>Wonderful Experience At The Mediterranean Sea</h3>
+              <p>
+                Enjoy the sun, the cool water and the benefits of fresh air by
+                booking Villa the wonderful experience at the Mediterranean sea.
+                It's the perfect holiday location for both tranquility seeking
+                couples and fun families. Villa's amenities and rooms rooms are
+                designed to offer the best possible levels of comfort and
+                relaxation. The design is contemporary based on comforting
+                colors and relaxing patterns.
+              </p>
+            </div>
+            <!-- end of text-box -->
+            <p class="mb-4">
+              You can enjoy our clean spacious rooms, the splendid gardens,
+              beautiful sea views and well thought out amenities. Villa's
+              restaurant is famous for the fine cuisine created with only the
+              freshest of local ingredients, cooked by famous chefs and served
+              by our polite staff. The establishment's only purpose is to make
+              you feel comfortable and relaxed.
+            </p>
+            <ul class="list-unstyled li-space-lg mb-5">
+              <li class="media">
+                <i class="fas fa-square"></i>
+                <div class="media-body">
+                  <strong>Warm shower</strong> for those early spring and late
+                  autumn days. Showers are also available at the beach
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-square"></i>
+                <div class="media-body">
+                  <strong>Modern LCD TV</strong> for rainy days that have to be
+                  spent inside. You can event connect the gaming console
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-square"></i>
+                <div class="media-body">
+                  <strong>Air conditioning</strong> that is state of the art
+                  technology specially designed to create the optimum
+                  temperature
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-square"></i>
+                <div class="media-body">
+                  <strong>Beautiful views</strong> from any window. Enjoy them
+                  from inside the room or sitting outside on the large balcony
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-square"></i>
+                <div class="media-body">
+                  <strong>Packed minibar</strong> loaded with goodies so you can
+                  enjoy some treats if you forget to shop in town
+                </div>
+              </li>
+            </ul>
+
+            <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Footer -->
     <div class="footer">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
+            <h3>
-                    <div class="social-container">
+              If you are looking too have a comfortable and relaxing time then
-                        <span class="fa-stack">
+              you should get in touch with us using
-                            <a href="#your-link">
+              <a class="green" href="mailto:reception@villa.com"
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                >reception@villa.com</a
-                                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              >
-                            </a>
+            </h3>
-                        </span>
+            <div class="social-container">
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-twitter fa-stack-1x"></i>
+                  <i class="fab fa-facebook-f fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-pinterest-p fa-stack-1x"></i>
+                  <i class="fab fa-twitter fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-instagram fa-stack-1x"></i>
+                  <i class="fab fa-pinterest-p fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-youtube fa-stack-1x"></i>
+                  <i class="fab fa-instagram fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                    </div> <!-- end of social-container -->
+              <span class="fa-stack">
-                </div> <!-- end of col -->
+                <a href="#your-link">
-            </div> <!-- end of row -->
+                  <i class="fas fa-circle fa-stack-2x"></i>
-        </div> <!-- end of container -->
+                  <i class="fab fa-youtube fa-stack-1x"></i>
-    </div> <!-- end of footer -->  
+                </a>
+              </span>
+            </div>
+            <!-- end of social-container -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of footer -->
     <!-- end of footer -->
-
 
     <!-- Copyright -->
     <div class="copyright">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <hr class="divider">
+            <hr class="divider" />
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-            <div class="row">
+        </div>
-                <div class="col-lg-6">
+        <!-- end of row -->
-                    <ul class="list-unstyled li-space-lg p-small">
+        <div class="row">
-                        <li><a href="article.html">Article</a></li>
+          <div class="col-lg-6">
-                        <li><a href="balcony-room.html">Balcony Room</a></li>
+            <ul class="list-unstyled li-space-lg p-small">
-                        <li><a href="panoramic-room.html">Panoramic Room</a></li>
+              <li><a href="article.html">Article</a></li>
-                        <li><a href="presidential-room.html">Presidential Room</a></li>
+              <li><a href="balcony-room.html">Balcony Room</a></li>
-                        <li><a href="contact.html">Contact</a></li>
+              <li><a href="panoramic-room.html">Panoramic Room</a></li>
-                    </ul> <!-- end of list-unstyled -->
+              <li><a href="presidential-room.html">Presidential Room</a></li>
-                </div> <!-- end of col -->
+              <li><a href="contact.html">Contact</a></li>
-                <div class="col-lg-6">
+            </ul>
-                    <p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
+            <!-- end of list-unstyled -->
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- enf of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+          <div class="col-lg-6">
-    </div> <!-- end of copyright --> 
+            <p class="p-small statement">
+              Copyright © <a href="#your-link">Name</a>
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- enf of row -->
+      </div>
+      <!-- end of container -->
+    </div>
     <!-- end of copyright -->
-    
+    <!-- end of copyright -->
-    	
+
     <!-- Scripts -->
-    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+    <!-- jQuery for Bootstrap's JavaScript plugins -->
-    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+    <script src="js/bootstrap.min.js"></script>
-    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+    <!-- Bootstrap framework -->
-    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+    <script src="js/jquery.easing.min.js"></script>
-    <script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
+    <!-- jQuery Easing for smooth scrolling between anchors -->
-    <script src="js/scripts.js"></script> <!-- Custom scripts -->
+    <script src="js/swiper.min.js"></script>
-</body>
+    <!-- Swiper for image and text sliders -->
-</html>
+    <script src="js/jquery.magnific-popup.js"></script>
+    <!-- Magnific Popup for lightboxes -->
+    <script src="js/bootstrap-datepicker.min.js"></script>
+    <!-- Datepicker for Bootstrap -->
+    <script src="js/scripts.js"></script>
+    <!-- Custom scripts -->
+  </body>
+</html>

template/balcony-room.html

@@ -1,305 +1,471 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
     <!-- SEO Meta Tags -->
-    <meta name="description" content="Description">
+    <meta name="description" content="Description" />
-    <meta name="author" content="Author">
+    <meta name="author" content="Author" />
 
     <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
-	<meta property="og:site_name" content="" /> <!-- website name -->
+    <meta property="og:site_name" content="" />
-	<meta property="og:site" content="" /> <!-- website link -->
+    <!-- website name -->
-	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
+    <meta property="og:site" content="" />
-	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
+    <!-- website link -->
-	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
+    <meta property="og:title" content="" />
-	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
+    <!-- title shown in the actual shared post -->
-	<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
+    <meta property="og:description" content="" />
+    <!-- description shown in the actual shared post -->
+    <meta property="og:image" content="" />
+    <!-- image link, make sure it's jpg -->
+    <meta property="og:url" content="" />
+    <!-- where do you want your post to link to -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- to have large image post format in Twitter -->
 
     <!-- Webpage Title -->
     <title>Balcony Room - Villa</title>
-    
+
     <!-- Styles -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
-    <link href="css/bootstrap.css" rel="stylesheet">
+      rel="stylesheet"
-    <link href="css/fontawesome-all.css" rel="stylesheet">
+    />
-    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
+    <link
-    <link href="css/swiper.css" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
-	<link href="css/magnific-popup.css" rel="stylesheet">
+      rel="stylesheet"
-	<link href="css/styles.css" rel="stylesheet">
+    />
-	
+    <link href="css/bootstrap.css" rel="stylesheet" />
-	<!-- Favicon  -->
+    <link href="css/fontawesome-all.css" rel="stylesheet" />
-    <link rel="icon" href="images/favicon.png">
+    <link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
-</head>
+    <link href="css/swiper.css" rel="stylesheet" />
-<body data-spy="scroll" data-target=".fixed-top">
+    <link href="css/magnific-popup.css" rel="stylesheet" />
-    
+    <link href="css/styles.css" rel="stylesheet" />
+
+    <!-- Favicon  -->
+    <link rel="icon" href="images/favicon.png" />
+  </head>
+  <body data-spy="scroll" data-target=".fixed-top">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg fixed-top navbar-light">
-        <div class="container">
+      <div class="container">
-            
+        <!-- Text Logo - Use this if you don't have a graphic logo -->
-            <!-- Text Logo - Use this if you don't have a graphic logo -->
+        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
-            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
 
-            <!-- Image Logo -->
+        <!-- Image Logo -->
-            <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
+        <a class="navbar-brand logo-image" href="index.html"
+          ><img src="images/logo.svg" alt="alternative"
+        /></a>
 
-            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+        <button
-                <span class="navbar-toggler-icon"></span>
+          class="navbar-toggler p-0 border-0"
-            </button>
+          type="button"
+          data-toggle="offcanvas"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+        <div
-                <ul class="navbar-nav ">
+          class="navbar-collapse offcanvas-collapse"
-                    <li class="nav-item">
+          id="navbarsExampleDefault"
-                        <a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
+        >
-                    </li>
+          <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
+            <li class="nav-item">
-                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
+              <a class="nav-link" href="article.html"
-                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                >Article <span class="sr-only">(current)</span></a
-                            <a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
+              >
-                            <div class="dropdown-divider"></div>
+            </li>
-                            <a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
+            <li class="nav-item dropdown">
-                            <div class="dropdown-divider"></div>
+              <a
-                            <a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
+                class="nav-link dropdown-toggle"
-                        </div>
+                href="#"
-                    </li>
+                id="dropdown01"
-                    <li class="nav-item">
+                data-toggle="dropdown"
-                        <a class="nav-link" href="contact.html">Contact</a>
+                aria-haspopup="true"
-                    </li>
+                aria-expanded="false"
-                </ul>
+                >Rooms</a
-                <span class="nav-item ml-auto">
+              >
-                    <a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown01">
-                </span>
+                <a class="dropdown-item page-scroll" href="balcony-room.html"
-                <span class="nav-item lang-switch">
+                  >Balcony Room</a
-                    <a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
+                >
-                </span>
+                <div class="dropdown-divider"></div>
-            </div> <!-- end of navbar-collapse -->
+                <a class="dropdown-item page-scroll" href="panoramic-room.html"
-        </div> <!-- end of container -->
+                  >Panoramic Room</a
-    </nav> <!-- end of navbar -->
+                >
+                <div class="dropdown-divider"></div>
+                <a
+                  class="dropdown-item page-scroll"
+                  href="presidential-room.html"
+                  >Presidential Room</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+          </ul>
+          <span class="nav-item ml-auto">
+            <a class="btn-outline-sm" href="tel:1-800-324-9832"
+              ><i class="fas fa-phone-alt"></i>1-800-324-9832</a
+            >
+          </span>
+          <span class="nav-item lang-switch">
+            <a class="lang-item no-line active" href="index.html"
+              ><img src="images/language-en.jpg" alt="alternative" />EN</a
+            >
+            &nbsp;|&nbsp;
+            <a class="lang-item no-line" href="index.html"
+              ><img src="images/language-it.jpg" alt="alternative" />IT</a
+            >
+          </span>
+        </div>
+        <!-- end of navbar-collapse -->
+      </div>
+      <!-- end of container -->
+    </nav>
+    <!-- end of navbar -->
     <!-- end of navigation -->
 
-
     <!-- Header -->
     <header class="ex-header bg-gray">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h1 class="green">Balcony Room - $59/day</h1>
+            <h1 class="green">Balcony Room - $59/day</h1>
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+        </div>
-    </header> <!-- end of ex-header -->
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </header>
+    <!-- end of ex-header -->
     <!-- end of header -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 bg-gray pb-6">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
+            <!-- Image Slider Room -->
+            <div class="slider-container">
+              <div class="swiper-container image-slider-room">
+                <div class="swiper-wrapper">
+                  <!-- Slide -->
+                  <div class="swiper-slide">
+                    <div class="image-container">
+                      <a
+                        class="popup-link"
+                        href="images/room-balcony-1.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-balcony-1.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                    <!-- Image Slider Room -->
+                  <!-- Slide -->
-                    <div class="slider-container">
+                  <div class="swiper-slide">
-                        <div class="swiper-container image-slider-room">
+                    <div class="image-container">
-                            <div class="swiper-wrapper">
+                      <a
+                        class="popup-link"
+                        href="images/room-balcony-2.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-balcony-2.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                                <!-- Slide -->
+                  <!-- Slide -->
-                                <div class="swiper-slide">
+                  <div class="swiper-slide">
-                                    <div class="image-container">
+                    <div class="image-container">
-                                        <a class="popup-link" href="images/room-balcony-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-1.jpg" alt="alternative"></a>
+                      <a
-                                    </div>
+                        class="popup-link"
-                                </div>
+                        href="images/room-balcony-3.jpg"
-                                <!-- end of slide -->
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-balcony-3.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
+                </div>
+                <!-- end of swiper-wrapper -->
 
-                                <!-- Slide -->
+                <!-- Add Arrows -->
-                                <div class="swiper-slide">
+                <div class="swiper-button-next"></div>
-                                    <div class="image-container">
+                <div class="swiper-button-prev"></div>
-                                        <a class="popup-link" href="images/room-balcony-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-2.jpg" alt="alternative"></a>
+                <!-- end of add arrows -->
-                                    </div>
+              </div>
-                                </div>
+              <!-- end of swiper container -->
-                                <!-- end of slide -->
+            </div>
-
+            <!-- end of slider-container -->
-                                <!-- Slide -->
+            <!-- end of image slider -->
-                                <div class="swiper-slide">
+          </div>
-                                    <div class="image-container">
+          <!-- end of col -->
-                                        <a class="popup-link" href="images/room-balcony-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-balcony-3.jpg" alt="alternative"></a>
+        </div>
-                                    </div>
+        <!-- end of row -->
-                                </div>
+      </div>
-                                <!-- end of slide -->
+      <!-- end of container -->
-
+    </div>
-                            </div> <!-- end of swiper-wrapper -->
+    <!-- end of ex-basic-1 -->
-
-                            <!-- Add Arrows -->
-                            <div class="swiper-button-next"></div>
-                            <div class="swiper-button-prev"></div>
-                            <!-- end of add arrows -->
-
-                        </div> <!-- end of swiper container -->
-                    </div> <!-- end of slider-container -->
-                    <!-- end of image slider -->
-
-                </div> <!-- end of col -->
-            </div> <!-- end of row -->
-        </div> <!-- end of container -->
-    </div> <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 pt-5">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h2 class="mt-3 mb-4">Description</h2>
+            <h2 class="mt-3 mb-4">Description</h2>
-                    <p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
+            <p class="mb-5">
+              Each of Villa's rooms was designed to offer the best possible
+              experience for many types of travelers from the adventure seekers
+              to those who value comfort. We've designed the rooms based on more
+              than 10 years of experience in the hospitality business and the
+              entire team is very proud of what we achieved with Villa.
+            </p>
 
-                    <div class="text-box mb-6">
+            <div class="text-box mb-6">
-                        <h3>Rooms Designed For Comfort And Relaxation</h3>
+              <h3>Rooms Designed For Comfort And Relaxation</h3>
-                        <p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+              <p>
-                    </div> <!-- end of text-box -->
+                The rooms are designed to offer the best possible levels of
+                comfort and relaxation. The design is contemporary based on
+                comforting colors and manages to appeal to many types of
+                personalities and tastes. The materials used in Villa's
+                construction are modern and durable, offering warm temperatures
+                in the winter and cooler summer days.
+              </p>
+            </div>
+            <!-- end of text-box -->
 
-                    <ul class="list-unstyled list-icon-lg mb-5">
+            <ul class="list-unstyled list-icon-lg mb-5">
-                        <li class="media">
+              <li class="media">
-                            <div class="list-icon bg-1">
+                <div class="list-icon bg-1">
-                                <i class="fas fa-shower"></i>
+                  <i class="fas fa-shower"></i>
-                            </div>
+                </div>
-                            <div class="media-body">
+                <div class="media-body">
-                                <h3 class="list-item-title">Modern Amenities</h3>
+                  <h3 class="list-item-title">Modern Amenities</h3>
-                                <p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
+                  <p class="list-item-text">
-                            </div>
+                    Villa's amenities and rooms rooms are designed to offer the
-                        </li>
+                    best possible levels of comfort and relaxation. The design
-                        <li class="media">
+                    is contemporary based on comforting colors and manages to
-                            <div class="list-icon bg-2">
+                    appeal to many types of personalities and tastes. The
-                                <i class="fas fa-tv"></i>
+                    materials used in Villa's construction are provided by top
-                            </div>
+                    suppliers.
-                            <div class="media-body">
+                  </p>
-                                <h3 class="list-item-title">Brand Name Appliances</h3>
+                </div>
-                                <p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
+              </li>
-                            </div>
+              <li class="media">
-                        </li>
+                <div class="list-icon bg-2">
-                        <li class="media">
+                  <i class="fas fa-tv"></i>
-                            <div class="list-icon bg-3">
+                </div>
-                                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
-                            </div>
+                  <h3 class="list-item-title">Brand Name Appliances</h3>
-                            <div class="media-body">
+                  <p class="list-item-text">
-                                <h3 class="list-item-title">Packed Minibar</h3>
+                    All the electronics are functional and designed to offer the
-                                <p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
+                    best possible levels of comfort and relaxation. The design
-                            </div>
+                    is contemporary based on comforting colors and manages to
-                        </li>
+                    appeal to many types of personalities and tastes. The main
-                    </ul> <!-- end of list-unstyled -->
+                    focus of all appliances is to offer a great vacation time
+                    while indoors.
+                  </p>
+                </div>
+              </li>
+              <li class="media">
+                <div class="list-icon bg-3">
+                  <i class="fas fa-wine-bottle"></i>
+                </div>
+                <div class="media-body">
+                  <h3 class="list-item-title">Packed Minibar</h3>
+                  <p class="list-item-text">
+                    The minibar is packed with goodie and designed to offer the
+                    best possible levels of comfort and relaxation. The design
+                    is contemporary based on comforting colors and manages to
+                    appeal. The main focus of the minibar is to offer a great
+                    vacation time while you are in the room.
+                  </p>
+                </div>
+              </li>
+            </ul>
+            <!-- end of list-unstyled -->
 
-                    <p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+            <p class="mb-4">
+              Other features designed to offer the best possible levels of
+              comfort and relaxation. The design is contemporary based on
+              comforting colors and manages to appeal to many types of
+              personalities and tastes. The materials used in Villa's
+              construction are modern and durable, offering warm temperatures in
+              the winter and cooler summer days.
+            </p>
 
-                    <ul class="list-unstyled li-space-lg amenities mb-5">
+            <ul class="list-unstyled li-space-lg amenities mb-5">
-                        <li class="media">
+              <li class="media">
-                            <i class="fas fa-shower"></i>
+                <i class="fas fa-shower"></i>
-                            <div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
+                <div class="media-body">
-                        </li>
+                  <strong>Warm shower</strong> for those early spring and late
-                        <li class="media">
+                  autumn days. Showers are also available at the beach
-                            <i class="fas fa-tv"></i>
+                </div>
-                            <div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
+              </li>
-                        </li>
+              <li class="media">
-                        <li class="media">
+                <i class="fas fa-tv"></i>
-                            <i class="fas fa-snowflake"></i>
+                <div class="media-body">
-                            <div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
+                  <strong>Modern LCD tv</strong> for rainy days that have to be
-                        </li>
+                  spent inside. You can event connect the gaming console
-                        <li class="media">
+                </div>
-                            <i class="fas fa-image"></i>
+              </li>
-                            <div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
+              <li class="media">
-                        </li>
+                <i class="fas fa-snowflake"></i>
-                        <li class="media">
+                <div class="media-body">
-                            <i class="fas fa-wine-bottle"></i>
+                  <strong>Air conditioning</strong> that is state of the art
-                            <div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
+                  technology specially designed to create the optimum
-                        </li>
+                  temperature
-                    </ul>
+                </div>
-                    <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+              </li>
-                </div> <!-- end of col -->
+              <li class="media">
-            </div> <!-- end of row -->
+                <i class="fas fa-image"></i>
-        </div> <!-- end of container -->
+                <div class="media-body">
-    </div> <!-- end of ex-basic-1 -->
+                  <strong>Beautiful views</strong> from any window. Enjoy them
+                  from inside the room or sitting outside on the large balcony
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
+                  <strong>Packed minibar</strong> loaded with goodies so you can
+                  enjoy some treats if you forget to shop in town
+                </div>
+              </li>
+            </ul>
+            <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Footer -->
     <div class="footer">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
+            <h3>
-                    <div class="social-container">
+              If you are looking too have a comfortable and relaxing time then
-                        <span class="fa-stack">
+              you should get in touch with us using
-                            <a href="#your-link">
+              <a class="green" href="mailto:reception@villa.com"
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                >reception@villa.com</a
-                                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              >
-                            </a>
+            </h3>
-                        </span>
+            <div class="social-container">
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-twitter fa-stack-1x"></i>
+                  <i class="fab fa-facebook-f fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-pinterest-p fa-stack-1x"></i>
+                  <i class="fab fa-twitter fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-instagram fa-stack-1x"></i>
+                  <i class="fab fa-pinterest-p fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-youtube fa-stack-1x"></i>
+                  <i class="fab fa-instagram fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                    </div> <!-- end of social-container -->
+              <span class="fa-stack">
-                </div> <!-- end of col -->
+                <a href="#your-link">
-            </div> <!-- end of row -->
+                  <i class="fas fa-circle fa-stack-2x"></i>
-        </div> <!-- end of container -->
+                  <i class="fab fa-youtube fa-stack-1x"></i>
-    </div> <!-- end of footer -->  
+                </a>
+              </span>
+            </div>
+            <!-- end of social-container -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of footer -->
     <!-- end of footer -->
-
 
     <!-- Copyright -->
     <div class="copyright">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <hr class="divider">
+            <hr class="divider" />
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-            <div class="row">
+        </div>
-                <div class="col-lg-6">
+        <!-- end of row -->
-                    <ul class="list-unstyled li-space-lg p-small">
+        <div class="row">
-                        <li><a href="article.html">Article</a></li>
+          <div class="col-lg-6">
-                        <li><a href="balcony-room.html">Balcony Room</a></li>
+            <ul class="list-unstyled li-space-lg p-small">
-                        <li><a href="panoramic-room.html">Panoramic Room</a></li>
+              <li><a href="article.html">Article</a></li>
-                        <li><a href="presidential-room.html">Presidential Room</a></li>
+              <li><a href="balcony-room.html">Balcony Room</a></li>
-                        <li><a href="contact.html">Contact</a></li>
+              <li><a href="panoramic-room.html">Panoramic Room</a></li>
-                    </ul> <!-- end of list-unstyled -->
+              <li><a href="presidential-room.html">Presidential Room</a></li>
-                </div> <!-- end of col -->
+              <li><a href="contact.html">Contact</a></li>
-                <div class="col-lg-6">
+            </ul>
-                    <p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
+            <!-- end of list-unstyled -->
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- enf of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+          <div class="col-lg-6">
-    </div> <!-- end of copyright --> 
+            <p class="p-small statement">
+              Copyright © <a href="#your-link">Name</a>
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- enf of row -->
+      </div>
+      <!-- end of container -->
+    </div>
     <!-- end of copyright -->
-    
+    <!-- end of copyright -->
-    	
+
     <!-- Scripts -->
-    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+    <!-- jQuery for Bootstrap's JavaScript plugins -->
-    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+    <script src="js/bootstrap.min.js"></script>
-    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+    <!-- Bootstrap framework -->
-    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+    <script src="js/jquery.easing.min.js"></script>
-    <script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
+    <!-- jQuery Easing for smooth scrolling between anchors -->
-    <script src="js/scripts.js"></script> <!-- Custom scripts -->
+    <script src="js/swiper.min.js"></script>
-</body>
+    <!-- Swiper for image and text sliders -->
-</html>
+    <script src="js/jquery.magnific-popup.js"></script>
+    <!-- Magnific Popup for lightboxes -->
+    <script src="js/bootstrap-datepicker.min.js"></script>
+    <!-- Datepicker for Bootstrap -->
+    <script src="js/scripts.js"></script>
+    <!-- Custom scripts -->
+  </body>
+</html>

template/contact.html

@@ -1,237 +1,354 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
     <!-- SEO Meta Tags -->
-    <meta name="description" content="Description">
+    <meta name="description" content="Description" />
-    <meta name="author" content="Author">
+    <meta name="author" content="Author" />
 
     <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
-	<meta property="og:site_name" content="" /> <!-- website name -->
+    <meta property="og:site_name" content="" />
-	<meta property="og:site" content="" /> <!-- website link -->
+    <!-- website name -->
-	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
+    <meta property="og:site" content="" />
-	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
+    <!-- website link -->
-	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
+    <meta property="og:title" content="" />
-	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
+    <!-- title shown in the actual shared post -->
-	<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
+    <meta property="og:description" content="" />
+    <!-- description shown in the actual shared post -->
+    <meta property="og:image" content="" />
+    <!-- image link, make sure it's jpg -->
+    <meta property="og:url" content="" />
+    <!-- where do you want your post to link to -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- to have large image post format in Twitter -->
 
     <!-- Webpage Title -->
     <title>Contact Details - Villa</title>
-    
+
     <!-- Styles -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
-    <link href="css/bootstrap.css" rel="stylesheet">
+      rel="stylesheet"
-    <link href="css/fontawesome-all.css" rel="stylesheet">
+    />
-    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
+    <link
-    <link href="css/swiper.css" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
-	<link href="css/magnific-popup.css" rel="stylesheet">
+      rel="stylesheet"
-	<link href="css/styles.css" rel="stylesheet">
+    />
-	
+    <link href="css/bootstrap.css" rel="stylesheet" />
-	<!-- Favicon  -->
+    <link href="css/fontawesome-all.css" rel="stylesheet" />
-    <link rel="icon" href="images/favicon.png">
+    <link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
-</head>
+    <link href="css/swiper.css" rel="stylesheet" />
-<body data-spy="scroll" data-target=".fixed-top">
+    <link href="css/magnific-popup.css" rel="stylesheet" />
-    
+    <link href="css/styles.css" rel="stylesheet" />
+
+    <!-- Favicon  -->
+    <link rel="icon" href="images/favicon.png" />
+  </head>
+  <body data-spy="scroll" data-target=".fixed-top">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg fixed-top navbar-light">
-        <div class="container">
+      <div class="container">
-            
+        <!-- Text Logo - Use this if you don't have a graphic logo -->
-            <!-- Text Logo - Use this if you don't have a graphic logo -->
+        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
-            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
 
-            <!-- Image Logo -->
+        <!-- Image Logo -->
-            <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
+        <a class="navbar-brand logo-image" href="index.html"
+          ><img src="images/logo.svg" alt="alternative"
+        /></a>
 
-            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+        <button
-                <span class="navbar-toggler-icon"></span>
+          class="navbar-toggler p-0 border-0"
-            </button>
+          type="button"
+          data-toggle="offcanvas"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+        <div
-                <ul class="navbar-nav ">
+          class="navbar-collapse offcanvas-collapse"
-                    <li class="nav-item">
+          id="navbarsExampleDefault"
-                        <a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
+        >
-                    </li>
+          <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
+            <li class="nav-item">
-                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
+              <a class="nav-link" href="article.html"
-                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                >Article <span class="sr-only">(current)</span></a
-                            <a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
+              >
-                            <div class="dropdown-divider"></div>
+            </li>
-                            <a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
+            <li class="nav-item dropdown">
-                            <div class="dropdown-divider"></div>
+              <a
-                            <a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
+                class="nav-link dropdown-toggle"
-                        </div>
+                href="#"
-                    </li>
+                id="dropdown01"
-                    <li class="nav-item">
+                data-toggle="dropdown"
-                        <a class="nav-link" href="contact.html">Contact</a>
+                aria-haspopup="true"
-                    </li>
+                aria-expanded="false"
-                </ul>
+                >Rooms</a
-                <span class="nav-item ml-auto">
+              >
-                    <a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown01">
-                </span>
+                <a class="dropdown-item page-scroll" href="balcony-room.html"
-                <span class="nav-item lang-switch">
+                  >Balcony Room</a
-                    <a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
+                >
-                </span>
+                <div class="dropdown-divider"></div>
-            </div> <!-- end of navbar-collapse -->
+                <a class="dropdown-item page-scroll" href="panoramic-room.html"
-        </div> <!-- end of container -->
+                  >Panoramic Room</a
-    </nav> <!-- end of navbar -->
+                >
+                <div class="dropdown-divider"></div>
+                <a
+                  class="dropdown-item page-scroll"
+                  href="presidential-room.html"
+                  >Presidential Room</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+          </ul>
+          <span class="nav-item ml-auto">
+            <a class="btn-outline-sm" href="tel:1-800-324-9832"
+              ><i class="fas fa-phone-alt"></i>1-800-324-9832</a
+            >
+          </span>
+          <span class="nav-item lang-switch">
+            <a class="lang-item no-line active" href="index.html"
+              ><img src="images/language-en.jpg" alt="alternative" />EN</a
+            >
+            &nbsp;|&nbsp;
+            <a class="lang-item no-line" href="index.html"
+              ><img src="images/language-it.jpg" alt="alternative" />IT</a
+            >
+          </span>
+        </div>
+        <!-- end of navbar-collapse -->
+      </div>
+      <!-- end of container -->
+    </nav>
+    <!-- end of navbar -->
     <!-- end of navigation -->
 
-
     <!-- Header -->
     <header class="ex-header bg-gray">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h1 class="green">Contact Us</h1>
+            <h1 class="green">Contact Us</h1>
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+        </div>
-    </header> <!-- end of ex-header -->
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </header>
+    <!-- end of ex-header -->
     <!-- end of header -->
 
-
     <!-- Form -->
     <div class="ex-form-1 bg-gray pb-6">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <p class="mb-5">Here is your opportunity to get in touch with us if you are looking for a B&B capable of offering an amazing experience both in terms of comfort and relaxation <a href="mailto:reception@villa.com">reception@villa.com</a> or just give us a call whenever you can <a href="tel:1-800-324-9832">1-800-324-9832</a></p>
+            <p class="mb-5">
-                    
+              Here is your opportunity to get in touch with us if you are
-                    <!-- Contact Form -->
+              looking for a B&B capable of offering an amazing experience both
-                    <form id="contactForm" data-toggle="validator" data-focus="false">
+              in terms of comfort and relaxation
-                        <div class="form-group">
+              <a href="mailto:reception@villa.com">reception@villa.com</a> or
-                            <input type="text" class="form-control-input" id="cname" required>
+              just give us a call whenever you can
-                            <label class="label-control" for="cname">Name</label>
+              <a href="tel:1-800-324-9832">1-800-324-9832</a>
-                            <div class="help-block with-errors"></div>
+            </p>
-                        </div>
-                        <div class="form-group">
-                            <input type="email" class="form-control-input" id="cemail" required>
-                            <label class="label-control" for="cemail">Email</label>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                        <div class="form-group">
-                            <textarea class="form-control-textarea" id="cmessage" required></textarea>
-                            <label class="label-control" for="cmessage">Your message</label>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                        <div class="form-group">
-                            <button type="submit" class="form-control-submit-button">Submit</button>
-                        </div>
-                        <div class="form-message">
-                            <div id="cmsgSubmit" class="h3 text-center hidden"></div>
-                        </div>
-                    </form>
-                    <!-- end of contact form -->
 
-                </div> <!-- end of col -->
+            <!-- Contact Form -->
-            </div> <!-- end of row -->
+            <form id="contactForm" data-toggle="validator" data-focus="false">
-        </div> <!-- end of container -->
+              <div class="form-group">
-    </div> <!-- end of ex-form-1 -->
+                <input
+                  type="text"
+                  class="form-control-input"
+                  id="cname"
+                  required
+                />
+                <label class="label-control" for="cname">Name</label>
+                <div class="help-block with-errors"></div>
+              </div>
+              <div class="form-group">
+                <input
+                  type="email"
+                  class="form-control-input"
+                  id="cemail"
+                  required
+                />
+                <label class="label-control" for="cemail">Email</label>
+                <div class="help-block with-errors"></div>
+              </div>
+              <div class="form-group">
+                <textarea
+                  class="form-control-textarea"
+                  id="cmessage"
+                  required
+                ></textarea>
+                <label class="label-control" for="cmessage">Your message</label>
+                <div class="help-block with-errors"></div>
+              </div>
+              <div class="form-group">
+                <button type="submit" class="form-control-submit-button">
+                  Submit
+                </button>
+              </div>
+              <div class="form-message">
+                <div id="cmsgSubmit" class="h3 text-center hidden"></div>
+              </div>
+            </form>
+            <!-- end of contact form -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-form-1 -->
     <!-- end of form -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 pt-5">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h2 class="mt-3 mb-4">Location Information</h2>
+            <h2 class="mt-3 mb-4">Location Information</h2>
-                    <p class="mb-5">Our mission at Villa is to focus an all the details to make your stay an amazing experience. We've trained our staff to meet your expectations and exceed them so that your Villa experience becomes not just a regular memory but one of the best memories you have. We're passionate about this stuff and we will not let you down.</p>
+            <p class="mb-5">
-                        
+              Our mission at Villa is to focus an all the details to make your
-                    <div class="map-responsive mb-5">
+              stay an amazing experience. We've trained our staff to meet your
-                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6423.841890375458!2d25.435475745356655!3d36.386907765681734!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1499ce86adfd9ff7%3A0xb2a761f740d68afc!2sSantorini!5e0!3m2!1sen!2sro!4v1596106317886!5m2!1sen!2sro" allowfullscreen></iframe>
+              expectations and exceed them so that your Villa experience becomes
-                    </div>
+              not just a regular memory but one of the best memories you have.
-                    
+              We're passionate about this stuff and we will not let you down.
-                    <a class="btn-solid-reg mb-6" href="index.html#header">Home</a>
+            </p>
-                </div> <!-- end of col -->
-            </div> <!-- end of row -->
-        </div> <!-- end of container -->
-    </div> <!-- end of ex-basic-1 -->
-    <!-- end of basic -->
 
+            <div class="map-responsive mb-5">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6423.841890375458!2d25.435475745356655!3d36.386907765681734!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1499ce86adfd9ff7%3A0xb2a761f740d68afc!2sSantorini!5e0!3m2!1sen!2sro!4v1596106317886!5m2!1sen!2sro"
+                allowfullscreen
+              ></iframe>
+            </div>
+
+            <a class="btn-solid-reg mb-6" href="index.html#header">Home</a>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
+    <!-- end of basic -->
 
     <!-- Footer -->
     <div class="footer">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
+            <h3>
-                    <div class="social-container">
+              If you are looking too have a comfortable and relaxing time then
-                        <span class="fa-stack">
+              you should get in touch with us using
-                            <a href="#your-link">
+              <a class="green" href="mailto:reception@villa.com"
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                >reception@villa.com</a
-                                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              >
-                            </a>
+            </h3>
-                        </span>
+            <div class="social-container">
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-twitter fa-stack-1x"></i>
+                  <i class="fab fa-facebook-f fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-pinterest-p fa-stack-1x"></i>
+                  <i class="fab fa-twitter fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-instagram fa-stack-1x"></i>
+                  <i class="fab fa-pinterest-p fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-youtube fa-stack-1x"></i>
+                  <i class="fab fa-instagram fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                    </div> <!-- end of social-container -->
+              <span class="fa-stack">
-                </div> <!-- end of col -->
+                <a href="#your-link">
-            </div> <!-- end of row -->
+                  <i class="fas fa-circle fa-stack-2x"></i>
-        </div> <!-- end of container -->
+                  <i class="fab fa-youtube fa-stack-1x"></i>
-    </div> <!-- end of footer -->  
+                </a>
+              </span>
+            </div>
+            <!-- end of social-container -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of footer -->
     <!-- end of footer -->
-
 
     <!-- Copyright -->
     <div class="copyright">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <hr class="divider">
+            <hr class="divider" />
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-            <div class="row">
+        </div>
-                <div class="col-lg-6">
+        <!-- end of row -->
-                    <ul class="list-unstyled li-space-lg p-small">
+        <div class="row">
-                        <li><a href="article.html">Article</a></li>
+          <div class="col-lg-6">
-                        <li><a href="balcony-room.html">Balcony Room</a></li>
+            <ul class="list-unstyled li-space-lg p-small">
-                        <li><a href="panoramic-room.html">Panoramic Room</a></li>
+              <li><a href="article.html">Article</a></li>
-                        <li><a href="presidential-room.html">Presidential Room</a></li>
+              <li><a href="balcony-room.html">Balcony Room</a></li>
-                        <li><a href="contact.html">Contact</a></li>
+              <li><a href="panoramic-room.html">Panoramic Room</a></li>
-                    </ul> <!-- end of list-unstyled -->
+              <li><a href="presidential-room.html">Presidential Room</a></li>
-                </div> <!-- end of col -->
+              <li><a href="contact.html">Contact</a></li>
-                <div class="col-lg-6">
+            </ul>
-                    <p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
+            <!-- end of list-unstyled -->
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- enf of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+          <div class="col-lg-6">
-    </div> <!-- end of copyright --> 
+            <p class="p-small statement">
+              Copyright © <a href="#your-link">Name</a>
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- enf of row -->
+      </div>
+      <!-- end of container -->
+    </div>
     <!-- end of copyright -->
-    
+    <!-- end of copyright -->
-    	
+
     <!-- Scripts -->
-    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+    <!-- jQuery for Bootstrap's JavaScript plugins -->
-    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+    <script src="js/bootstrap.min.js"></script>
-    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+    <!-- Bootstrap framework -->
-    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+    <script src="js/jquery.easing.min.js"></script>
-    <script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
+    <!-- jQuery Easing for smooth scrolling between anchors -->
-    <script src="js/scripts.js"></script> <!-- Custom scripts -->
+    <script src="js/swiper.min.js"></script>
-</body>
+    <!-- Swiper for image and text sliders -->
-</html>
+    <script src="js/jquery.magnific-popup.js"></script>
+    <!-- Magnific Popup for lightboxes -->
+    <script src="js/bootstrap-datepicker.min.js"></script>
+    <!-- Datepicker for Bootstrap -->
+    <script src="js/scripts.js"></script>
+    <!-- Custom scripts -->
+  </body>
+</html>

template/css/bootstrap-datepicker3.css

@@ -24,7 +24,7 @@
   padding: 4px;
 }
 .datepicker-dropdown:before {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
@@ -34,7 +34,7 @@
   position: absolute;
 }
 .datepicker-dropdown:after {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
@@ -675,4 +675,4 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
   margin-left: -5px;
   margin-right: -5px;
 }
-/*# sourceMappingURL=bootstrap-datepicker3.css.map */
+/*# sourceMappingURL=bootstrap-datepicker3.css.map */

template/css/magnific-popup.css

@@ -8,7 +8,8 @@
   overflow: hidden;
   position: fixed;
   background: #0b0b0b;
-  opacity: 0.8; }
+  opacity: 0.8;
+}
 
 .mfp-wrap {
   top: 0;
@@ -18,7 +19,8 @@
   z-index: 1043;
   position: fixed;
   outline: none !important;
-  -webkit-backface-visibility: hidden; }
+  -webkit-backface-visibility: hidden;
+}
 
 .mfp-container {
   text-align: center;
@@ -28,16 +30,19 @@
   left: 0;
   top: 0;
   padding: 0 8px;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
 .mfp-container:before {
-  content: '';
+  content: "";
   display: inline-block;
   height: 100%;
-  vertical-align: middle; }
+  vertical-align: middle;
+}
 
 .mfp-align-top .mfp-container:before {
-  display: none; }
+  display: none;
+}
 
 .mfp-content {
   position: relative;
@@ -45,29 +50,36 @@
   vertical-align: middle;
   margin: 0 auto;
   text-align: left;
-  z-index: 1045; }
+  z-index: 1045;
+}
 
 .mfp-inline-holder .mfp-content,
 .mfp-ajax-holder .mfp-content {
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-ajax-cur {
-  cursor: progress; }
+  cursor: progress;
+}
 
-.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
   cursor: -moz-zoom-out;
   cursor: -webkit-zoom-out;
-  cursor: zoom-out; }
+  cursor: zoom-out;
+}
 
 .mfp-zoom {
   cursor: pointer;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
-  cursor: zoom-in; }
+  cursor: zoom-in;
+}
 
 .mfp-auto-cursor .mfp-content {
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-close,
 .mfp-arrow,
@@ -75,16 +87,19 @@
 .mfp-counter {
   -webkit-user-select: none;
   -moz-user-select: none;
-  user-select: none; }
+  user-select: none;
+}
 
 .mfp-loading.mfp-figure {
-  display: none; }
+  display: none;
+}
 
 .mfp-hide {
-  display: none !important; }
+  display: none !important;
+}
 
 .mfp-preloader {
-  color: #CCC;
+  color: #ccc;
   position: absolute;
   top: 50%;
   width: auto;
@@ -92,17 +107,22 @@
   margin-top: -0.8em;
   left: 8px;
   right: 8px;
-  z-index: 1044; }
+  z-index: 1044;
-  .mfp-preloader a {
+}
-    color: #CCC; }
+.mfp-preloader a {
-    .mfp-preloader a:hover {
+  color: #ccc;
-      color: #FFF; }
+}
+.mfp-preloader a:hover {
+  color: #fff;
+}
 
 .mfp-s-ready .mfp-preloader {
-  display: none; }
+  display: none;
+}
 
 .mfp-s-error .mfp-content {
-  display: none; }
+  display: none;
+}
 
 button.mfp-close,
 button.mfp-arrow {
@@ -116,11 +136,13 @@ button.mfp-arrow {
   padding: 0;
   z-index: 1046;
   box-shadow: none;
-  touch-action: manipulation; }
+  touch-action: manipulation;
+}
 
 button::-moz-focus-inner {
   padding: 0;
-  border: 0; }
+  border: 0;
+}
 
 .mfp-close {
   width: 44px;
@@ -133,35 +155,41 @@ button::-moz-focus-inner {
   text-align: center;
   opacity: 0.65;
   padding: 0 0 18px 10px;
-  color: #FFF;
+  color: #fff;
   font-style: normal;
   font-size: 28px;
-  font-family: Arial, Baskerville, monospace; }
+  font-family: Arial, Baskerville, monospace;
-  .mfp-close:hover,
+}
-  .mfp-close:focus {
+.mfp-close:hover,
-    opacity: 1; }
+.mfp-close:focus {
-  .mfp-close:active {
+  opacity: 1;
-    top: 1px; }
+}
+.mfp-close:active {
+  top: 1px;
+}
 
 .mfp-close-btn-in .mfp-close {
-  color: #333; }
+  color: #333;
+}
 
 .mfp-image-holder .mfp-close,
 .mfp-iframe-holder .mfp-close {
-  color: #FFF;
+  color: #fff;
   right: -6px;
   text-align: right;
   padding-right: 6px;
-  width: 100%; }
+  width: 100%;
+}
 
 .mfp-counter {
   position: absolute;
   top: 0;
   right: 0;
-  color: #CCC;
+  color: #ccc;
   font-size: 12px;
   line-height: 18px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .mfp-arrow {
   position: absolute;
@@ -172,74 +200,91 @@ button::-moz-focus-inner {
   padding: 0;
   width: 90px;
   height: 110px;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: transparent;
-  .mfp-arrow:active {
+}
-    margin-top: -54px; }
+.mfp-arrow:active {
-  .mfp-arrow:hover,
+  margin-top: -54px;
-  .mfp-arrow:focus {
+}
-    opacity: 1; }
+.mfp-arrow:hover,
-  .mfp-arrow:before,
+.mfp-arrow:focus {
-  .mfp-arrow:after {
+  opacity: 1;
-    content: '';
+}
-    display: block;
+.mfp-arrow:before,
-    width: 0;
+.mfp-arrow:after {
-    height: 0;
+  content: "";
-    position: absolute;
+  display: block;
-    left: 0;
+  width: 0;
-    top: 0;
+  height: 0;
-    margin-top: 35px;
+  position: absolute;
-    margin-left: 35px;
+  left: 0;
-    border: medium inset transparent; }
+  top: 0;
-  .mfp-arrow:after {
+  margin-top: 35px;
-    border-top-width: 13px;
+  margin-left: 35px;
-    border-bottom-width: 13px;
+  border: medium inset transparent;
-    top: 8px; }
+}
-  .mfp-arrow:before {
+.mfp-arrow:after {
-    border-top-width: 21px;
+  border-top-width: 13px;
-    border-bottom-width: 21px;
+  border-bottom-width: 13px;
-    opacity: 0.7; }
+  top: 8px;
+}
+.mfp-arrow:before {
+  border-top-width: 21px;
+  border-bottom-width: 21px;
+  opacity: 0.7;
+}
 
 .mfp-arrow-left {
-  left: 0; }
+  left: 0;
-  .mfp-arrow-left:after {
+}
-    border-right: 17px solid #FFF;
+.mfp-arrow-left:after {
-    margin-left: 31px; }
+  border-right: 17px solid #fff;
-  .mfp-arrow-left:before {
+  margin-left: 31px;
-    margin-left: 25px;
+}
-    border-right: 27px solid #3F3F3F; }
+.mfp-arrow-left:before {
+  margin-left: 25px;
+  border-right: 27px solid #3f3f3f;
+}
 
 .mfp-arrow-right {
-  right: 0; }
+  right: 0;
-  .mfp-arrow-right:after {
+}
-    border-left: 17px solid #FFF;
+.mfp-arrow-right:after {
-    margin-left: 39px; }
+  border-left: 17px solid #fff;
-  .mfp-arrow-right:before {
+  margin-left: 39px;
-    border-left: 27px solid #3F3F3F; }
+}
+.mfp-arrow-right:before {
+  border-left: 27px solid #3f3f3f;
+}
 
 .mfp-iframe-holder {
   padding-top: 40px;
-  padding-bottom: 40px; }
+  padding-bottom: 40px;
-  .mfp-iframe-holder .mfp-content {
+}
-    line-height: 0;
+.mfp-iframe-holder .mfp-content {
-    width: 100%;
+  line-height: 0;
-    max-width: 900px; }
+  width: 100%;
-  .mfp-iframe-holder .mfp-close {
+  max-width: 900px;
-    top: -40px; }
+}
+.mfp-iframe-holder .mfp-close {
+  top: -40px;
+}
 
 .mfp-iframe-scaler {
   width: 100%;
   height: 0;
   overflow: hidden;
-  padding-top: 56.25%; }
+  padding-top: 56.25%;
-  .mfp-iframe-scaler iframe {
+}
-    position: absolute;
+.mfp-iframe-scaler iframe {
-    display: block;
+  position: absolute;
-    top: 0;
+  display: block;
-    left: 0;
+  top: 0;
-    width: 100%;
+  left: 0;
-    height: 100%;
+  width: 100%;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  height: 100%;
-    background: #000; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #000;
+}
 
 /* Main image in popup */
 img.mfp-img {
@@ -250,31 +295,36 @@ img.mfp-img {
   line-height: 0;
   box-sizing: border-box;
   padding: 40px 0 40px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 /* The shadow behind the image */
 .mfp-figure {
-  line-height: 0; }
+  line-height: 0;
-  .mfp-figure:after {
+}
-    content: '';
+.mfp-figure:after {
-    position: absolute;
+  content: "";
-    left: 0;
+  position: absolute;
-    top: 40px;
+  left: 0;
-    bottom: 40px;
+  top: 40px;
-    display: block;
+  bottom: 40px;
-    right: 0;
+  display: block;
-    width: auto;
+  right: 0;
-    height: auto;
+  width: auto;
-    z-index: -1;
+  height: auto;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  z-index: -1;
-    background: #444; }
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-  .mfp-figure small {
+  background: #444;
-    color: #BDBDBD;
+}
-    display: block;
+.mfp-figure small {
-    font-size: 12px;
+  color: #bdbdbd;
-    line-height: 14px; }
+  display: block;
-  .mfp-figure figure {
+  font-size: 12px;
-    margin: 0; }
+  line-height: 14px;
+}
+.mfp-figure figure {
+  margin: 0;
+}
 
 .mfp-bottom-bar {
   margin-top: -36px;
@@ -282,36 +332,45 @@ img.mfp-img {
   top: 100%;
   left: 0;
   width: 100%;
-  cursor: auto; }
+  cursor: auto;
+}
 
 .mfp-title {
   text-align: left;
   line-height: 18px;
-  color: #F3F3F3;
+  color: #f3f3f3;
   word-wrap: break-word;
-  padding-right: 36px; }
+  padding-right: 36px;
+}
 
 .mfp-image-holder .mfp-content {
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 .mfp-gallery .mfp-image-holder .mfp-figure {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
-@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+@media screen and (max-width: 800px) and (orientation: landscape),
+  screen and (max-height: 300px) {
   /**
        * Remove all paddings around the image on small screen
        */
   .mfp-img-mobile .mfp-image-holder {
     padding-left: 0;
-    padding-right: 0; }
+    padding-right: 0;
+  }
   .mfp-img-mobile img.mfp-img {
-    padding: 0; }
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-figure:after {
     top: 0;
-    bottom: 0; }
+    bottom: 0;
+  }
   .mfp-img-mobile .mfp-figure small {
     display: inline;
-    margin-left: 5px; }
+    margin-left: 5px;
+  }
   .mfp-img-mobile .mfp-bottom-bar {
     background: rgba(0, 0, 0, 0.6);
     bottom: 0;
@@ -319,12 +378,15 @@ img.mfp-img {
     top: auto;
     padding: 3px 5px;
     position: fixed;
-    box-sizing: border-box; }
+    box-sizing: border-box;
-    .mfp-img-mobile .mfp-bottom-bar:empty {
+  }
-      padding: 0; }
+  .mfp-img-mobile .mfp-bottom-bar:empty {
+    padding: 0;
+  }
   .mfp-img-mobile .mfp-counter {
     right: 5px;
-    top: 3px; }
+    top: 3px;
+  }
   .mfp-img-mobile .mfp-close {
     top: 0;
     right: 0;
@@ -334,18 +396,25 @@ img.mfp-img {
     background: rgba(0, 0, 0, 0.6);
     position: fixed;
     text-align: center;
-    padding: 0; } }
+    padding: 0;
+  }
+}
 
 @media all and (max-width: 900px) {
   .mfp-arrow {
     -webkit-transform: scale(0.75);
-    transform: scale(0.75); }
+    transform: scale(0.75);
+  }
   .mfp-arrow-left {
     -webkit-transform-origin: 0;
-    transform-origin: 0; }
+    transform-origin: 0;
+  }
   .mfp-arrow-right {
     -webkit-transform-origin: 100%;
-    transform-origin: 100%; }
+    transform-origin: 100%;
+  }
   .mfp-container {
     padding-left: 6px;
-    padding-right: 6px; } }
+    padding-right: 6px;
+  }
+}

template/css/swiper.css

@@ -41,7 +41,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
@@ -72,7 +74,9 @@
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
 }
 .swiper-slide-invisible-blank {
   visibility: hidden;
@@ -87,11 +91,18 @@
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
-  -webkit-transition-property: height, -webkit-transform;
+  -webkit-transition-property:
-  transition-property: height, -webkit-transform;
+    height,
+    -webkit-transform;
+  transition-property:
+    height,
+    -webkit-transform;
   -o-transition-property: transform, height;
   transition-property: transform, height;
-  transition-property: transform, height, -webkit-transform;
+  transition-property:
+    transform,
+    height,
+    -webkit-transform;
 }
 /* 3D Effects */
 .swiper-container-3d {
@@ -121,28 +132,100 @@
   z-index: 10;
 }
 .swiper-container-3d .swiper-slide-shadow-left {
-  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-right {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    right top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    left,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-top {
-  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 .swiper-container-3d .swiper-slide-shadow-bottom {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    linear,
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left top,
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    left bottom,
+    from(rgba(0, 0, 0, 0.5)),
+    to(rgba(0, 0, 0, 0))
+  );
+  background-image: -webkit-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: -o-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5),
+    rgba(0, 0, 0, 0)
+  );
 }
 /* IE10 Windows Phone 8 Fixes */
 .swiper-container-wp8-horizontal,
@@ -298,48 +381,93 @@ button.swiper-pagination-bullet {
   -webkit-transform: translate3d(0px, -50%, 0);
   transform: translate3d(0px, -50%, 0);
 }
-.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 6px 0;
   display: block;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 8px;
 }
-.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-vertical
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
+  .swiper-pagination-bullet {
   display: inline-block;
-  -webkit-transition: 200ms top, 200ms -webkit-transform;
+  -webkit-transition:
-  transition: 200ms top, 200ms -webkit-transform;
+    200ms top,
-  -o-transition: 200ms transform, 200ms top;
+    200ms -webkit-transform;
-  transition: 200ms transform, 200ms top;
+  transition:
-  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
+    200ms top,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top;
+  transition:
+    200ms transform,
+    200ms top,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets
+  .swiper-pagination-bullet {
   margin: 0 4px;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+.swiper-container-horizontal
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   white-space: nowrap;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal
-  -webkit-transition: 200ms left, 200ms -webkit-transform;
+  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
-  transition: 200ms left, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms left;
+  -webkit-transition:
-  transition: 200ms transform, 200ms left;
+    200ms left,
-  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms left,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left;
+  transition:
+    200ms transform,
+    200ms left,
+    200ms -webkit-transform;
 }
-.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-container-horizontal.swiper-container-rtl
-  -webkit-transition: 200ms right, 200ms -webkit-transform;
+  > .swiper-pagination-bullets-dynamic
-  transition: 200ms right, 200ms -webkit-transform;
+  .swiper-pagination-bullet {
-  -o-transition: 200ms transform, 200ms right;
+  -webkit-transition:
-  transition: 200ms transform, 200ms right;
+    200ms right,
-  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
+    200ms -webkit-transform;
+  transition:
+    200ms right,
+    200ms -webkit-transform;
+  -o-transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right;
+  transition:
+    200ms transform,
+    200ms right,
+    200ms -webkit-transform;
 }
 /* Progress */
 .swiper-pagination-progressbar {
@@ -360,20 +488,24 @@ button.swiper-pagination-bullet {
   -ms-transform-origin: left top;
   transform-origin: left top;
 }
-.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+.swiper-container-rtl
+  .swiper-pagination-progressbar
+  .swiper-pagination-progressbar-fill {
   -webkit-transform-origin: right top;
   -ms-transform-origin: right top;
   transform-origin: right top;
 }
 .swiper-container-horizontal > .swiper-pagination-progressbar,
-.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-vertical
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 100%;
   height: 4px;
   left: 0;
   top: 0;
 }
 .swiper-container-vertical > .swiper-pagination-progressbar,
-.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+.swiper-container-horizontal
+  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 4px;
   height: 100%;
   left: 0;
@@ -385,7 +517,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-white {
   background: rgba(255, 255, 255, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-white
+  .swiper-pagination-progressbar-fill {
   background: #ffffff;
 }
 .swiper-pagination-black .swiper-pagination-bullet-active {
@@ -394,7 +527,8 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar.swiper-pagination-black {
   background: rgba(0, 0, 0, 0.25);
 }
-.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
+.swiper-pagination-progressbar.swiper-pagination-black
+  .swiper-pagination-progressbar-fill {
   background: #000000;
 }
 .swiper-pagination-lock {
@@ -484,7 +618,7 @@ button.swiper-pagination-bullet {
 }
 .swiper-lazy-preloader:after {
   display: block;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

template/js/jquery.easing.min.js

@@ -5,40 +5,300 @@
  * to offer multiple easing options
  *
  * TERMS OF USE - EASING EQUATIONS
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2001 Robert Penner
  * All rights reserved.
  *
  * TERMS OF USE - jQuery Easing
- * 
+ *
- * Open source under the BSD License. 
+ * Open source under the BSD License.
- * 
+ *
  * Copyright © 2008 George McGinley Smith
  * All rights reserved.
  *
- * Redistribution and use in source and binary forms, with or without modification, 
+ * Redistribution and use in source and binary forms, with or without modification,
  * are permitted provided that the following conditions are met:
- * 
+ *
- * Redistributions of source code must retain the above copyright notice, this list of 
+ * Redistributions of source code must retain the above copyright notice, this list of
  * conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * Redistributions in binary form must reproduce the above copyright notice, this list
- * of conditions and the following disclaimer in the documentation and/or other materials 
+ * of conditions and the following disclaimer in the documentation and/or other materials
  * provided with the distribution.
- * 
+ *
- * Neither the name of the author nor the names of contributors may be used to endorse 
+ * Neither the name of the author nor the names of contributors may be used to endorse
  * or promote products derived from this software without specific prior written permission.
- * 
+ *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
- *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
- *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
- * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ * OF THE POSSIBILITY OF SUCH DAMAGE.
  *
-*/
+ */
-jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){"use strict";return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){"use strict";return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){"use strict";return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){"use strict";return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){"use strict";return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){"use strict";return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){"use strict";return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){"use strict";return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){"use strict";return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){"use strict";return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){"use strict";return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){"use strict";if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){"use strict";return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){"use strict";return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){"use strict";if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){"use strict";var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){"use strict";if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){"use strict";return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){"use strict";if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){"use strict";if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
+jQuery.easing.jswing = jQuery.easing.swing;
+jQuery.extend(jQuery.easing, {
+  def: "easeOutQuad",
+  swing: function (e, f, a, h, g) {
+    "use strict";
+    return jQuery.easing[jQuery.easing.def](e, f, a, h, g);
+  },
+  easeInQuad: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f + a;
+  },
+  easeOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (f /= g) * (f - 2) + a;
+  },
+  easeInOutQuad: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f + a;
+    }
+    return (-h / 2) * (--f * (f - 2) - 1) + a;
+  },
+  easeInCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f + a;
+  },
+  easeOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f + 1) + a;
+  },
+  easeInOutCubic: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f + 2) + a;
+  },
+  easeInQuart: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f + a;
+  },
+  easeOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    return -h * ((f = f / g - 1) * f * f * f - 1) + a;
+  },
+  easeInOutQuart: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f + a;
+    }
+    return (-h / 2) * ((f -= 2) * f * f * f - 2) + a;
+  },
+  easeInQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * (f /= g) * f * f * f * f + a;
+  },
+  easeOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    return h * ((f = f / g - 1) * f * f * f * f + 1) + a;
+  },
+  easeInOutQuint: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * f * f * f * f * f + a;
+    }
+    return (h / 2) * ((f -= 2) * f * f * f * f + 2) + a;
+  },
+  easeInSine: function (e, f, a, h, g) {
+    "use strict";
+    return -h * Math.cos((f / g) * (Math.PI / 2)) + h + a;
+  },
+  easeOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sin((f / g) * (Math.PI / 2)) + a;
+  },
+  easeInOutSine: function (e, f, a, h, g) {
+    "use strict";
+    return (-h / 2) * (Math.cos((Math.PI * f) / g) - 1) + a;
+  },
+  easeInExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == 0 ? a : h * Math.pow(2, 10 * (f / g - 1)) + a;
+  },
+  easeOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    return f == g ? a + h : h * (-Math.pow(2, (-10 * f) / g) + 1) + a;
+  },
+  easeInOutExpo: function (e, f, a, h, g) {
+    "use strict";
+    if (f == 0) {
+      return a;
+    }
+    if (f == g) {
+      return a + h;
+    }
+    if ((f /= g / 2) < 1) {
+      return (h / 2) * Math.pow(2, 10 * (f - 1)) + a;
+    }
+    return (h / 2) * (-Math.pow(2, -10 * --f) + 2) + a;
+  },
+  easeInCirc: function (e, f, a, h, g) {
+    "use strict";
+    return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a;
+  },
+  easeOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    return h * Math.sqrt(1 - (f = f / g - 1) * f) + a;
+  },
+  easeInOutCirc: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g / 2) < 1) {
+      return (-h / 2) * (Math.sqrt(1 - f * f) - 1) + a;
+    }
+    return (h / 2) * (Math.sqrt(1 - (f -= 2) * f) + 1) + a;
+  },
+  easeInElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      -(
+        g *
+        Math.pow(2, 10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j)
+      ) + e
+    );
+  },
+  easeOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k) == 1) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * 0.3;
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    return (
+      g * Math.pow(2, -10 * h) * Math.sin(((h * k - i) * (2 * Math.PI)) / j) +
+      l +
+      e
+    );
+  },
+  easeInOutElastic: function (f, h, e, l, k) {
+    "use strict";
+    var i = 1.70158;
+    var j = 0;
+    var g = l;
+    if (h == 0) {
+      return e;
+    }
+    if ((h /= k / 2) == 2) {
+      return e + l;
+    }
+    if (!j) {
+      j = k * (0.3 * 1.5);
+    }
+    if (g < Math.abs(l)) {
+      g = l;
+      var i = j / 4;
+    } else {
+      var i = (j / (2 * Math.PI)) * Math.asin(l / g);
+    }
+    if (h < 1) {
+      return (
+        -0.5 *
+          (g *
+            Math.pow(2, 10 * (h -= 1)) *
+            Math.sin(((h * k - i) * (2 * Math.PI)) / j)) +
+        e
+      );
+    }
+    return (
+      g *
+        Math.pow(2, -10 * (h -= 1)) *
+        Math.sin(((h * k - i) * (2 * Math.PI)) / j) *
+        0.5 +
+      l +
+      e
+    );
+  },
+  easeInBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * (f /= h) * f * ((g + 1) * f - g) + a;
+  },
+  easeOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a;
+  },
+  easeInOutBack: function (e, f, a, i, h, g) {
+    "use strict";
+    if (g == undefined) {
+      g = 1.70158;
+    }
+    if ((f /= h / 2) < 1) {
+      return (i / 2) * (f * f * (((g *= 1.525) + 1) * f - g)) + a;
+    }
+    return (i / 2) * ((f -= 2) * f * (((g *= 1.525) + 1) * f + g) + 2) + a;
+  },
+  easeInBounce: function (e, f, a, h, g) {
+    "use strict";
+    return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a;
+  },
+  easeOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if ((f /= g) < 1 / 2.75) {
+      return h * (7.5625 * f * f) + a;
+    } else {
+      if (f < 2 / 2.75) {
+        return h * (7.5625 * (f -= 1.5 / 2.75) * f + 0.75) + a;
+      } else {
+        if (f < 2.5 / 2.75) {
+          return h * (7.5625 * (f -= 2.25 / 2.75) * f + 0.9375) + a;
+        } else {
+          return h * (7.5625 * (f -= 2.625 / 2.75) * f + 0.984375) + a;
+        }
+      }
+    }
+  },
+  easeInOutBounce: function (e, f, a, h, g) {
+    "use strict";
+    if (f < g / 2) {
+      return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a;
+    }
+    return (
+      jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
+    );
+  },
+});

template/js/scripts.js

@@ -1,208 +1,217 @@
 /* Description: Custom JS file */
 
+(function ($) {
+  "use strict";
 
-(function($) {
+  /* Navbar Scripts */
-    "use strict"; 
+  // jQuery for page scrolling feature - requires jQuery Easing plugin
-	
+  $(function () {
-	/* Navbar Scripts */
+    $(document).on("click", "a.page-scroll", function (event) {
-	// jQuery for page scrolling feature - requires jQuery Easing plugin
+      var $anchor = $(this);
-	$(function() {
+      $("html, body")
-		$(document).on('click', 'a.page-scroll', function(event) {
+        .stop()
-			var $anchor = $(this);
+        .animate(
-			$('html, body').stop().animate({
+          {
-				scrollTop: $($anchor.attr('href')).offset().top
+            scrollTop: $($anchor.attr("href")).offset().top,
-			}, 600, 'easeInOutExpo');
+          },
-			event.preventDefault();
+          600,
-		});
+          "easeInOutExpo",
+        );
+      event.preventDefault();
     });
+  });
 
-    // offcanvas script from Bootstrap + added element to close menu on click in small viewport
+  // offcanvas script from Bootstrap + added element to close menu on click in small viewport
-    $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on('click', function () {
+  $('[data-toggle="offcanvas"], .navbar-nav li a:not(.dropdown-toggle').on(
-        $('.offcanvas-collapse').toggleClass('open')
+    "click",
-    })
+    function () {
+      $(".offcanvas-collapse").toggleClass("open");
+    },
+  );
 
-    // hover in desktop mode
+  // hover in desktop mode
-    function toggleDropdown (e) {
+  function toggleDropdown(e) {
-        const _d = $(e.target).closest('.dropdown'),
+    const _d = $(e.target).closest(".dropdown"),
-            _m = $('.dropdown-menu', _d);
+      _m = $(".dropdown-menu", _d);
-        setTimeout(function(){
+    setTimeout(
-            const shouldOpen = e.type !== 'click' && _d.is(':hover');
+      function () {
-            _m.toggleClass('show', shouldOpen);
+        const shouldOpen = e.type !== "click" && _d.is(":hover");
-            _d.toggleClass('show', shouldOpen);
+        _m.toggleClass("show", shouldOpen);
-            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
+        _d.toggleClass("show", shouldOpen);
-        }, e.type === 'mouseleave' ? 300 : 0);
+        $('[data-toggle="dropdown"]', _d).attr("aria-expanded", shouldOpen);
-    }
+      },
-    $('body')
+      e.type === "mouseleave" ? 300 : 0,
-    .on('mouseenter mouseleave','.dropdown',toggleDropdown)
+    );
-    .on('click', '.dropdown-menu a', toggleDropdown);
+  }
+  $("body")
+    .on("mouseenter mouseleave", ".dropdown", toggleDropdown)
+    .on("click", ".dropdown-menu a", toggleDropdown);
 
+  /* Header Slider - Swiper */
+  var headerSlider = new Swiper(".header-slider", {
+    autoplay: {
+      delay: 3500,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    effect: "fade",
+    speed: 700,
+  });
 
-    /* Header Slider - Swiper */
+  /* Image Slider - Swiper */
-	var headerSlider = new Swiper('.header-slider', {
+  var imageSlider = new Swiper(".image-slider", {
-		autoplay: {
+    autoplay: {
-			delay: 3500,
+      delay: 3000,
-			disableOnInteraction: false
+      disableOnInteraction: false,
-		},
+    },
-		loop: true,
+    loop: false,
-		effect: "fade",
+    navigation: {
-		speed: 700
+      nextEl: ".swiper-button-next",
-    });
+      prevEl: ".swiper-button-prev",
-
+    },
-
+    slidesPerView: 3,
-    /* Image Slider - Swiper */
+    spaceBetween: 20,
-    var imageSlider = new Swiper('.image-slider', {
+    breakpoints: {
-        autoplay: {
+      // when window is <= 767px
-            delay: 3000,
+      767: {
-            disableOnInteraction: false
+        slidesPerView: 1,
-		},
+      },
-        loop: false,
+      // when window is <= 991px
-        navigation: {
+      991: {
-			nextEl: '.swiper-button-next',
+        slidesPerView: 2,
-			prevEl: '.swiper-button-prev'
+        spaceBetween: 10,
-		},
+      },
+      // when window is <= 1199px
+      1199: {
         slidesPerView: 3,
         spaceBetween: 20,
-		breakpoints: {
+      },
-            // when window is <= 767px
+    },
-            767: {
+  });
-                slidesPerView: 1
+
-            },
+  /* Image Slider Room - Swiper */
-            // when window is <= 991px
+  var imageSlider = new Swiper(".image-slider-room", {
-            991: {
+    autoplay: {
-                slidesPerView: 2,
+      delay: 3000,
-                spaceBetween: 10
+      disableOnInteraction: false,
-            },
+    },
-            // when window is <= 1199px
+    loop: false,
-            1199: {
+    navigation: {
-                slidesPerView: 3,
+      nextEl: ".swiper-button-next",
-                spaceBetween: 20
+      prevEl: ".swiper-button-prev",
-            },
+    },
-        }
+  });
+
+  /* Card Slider - Swiper */
+  var cardSlider = new Swiper(".card-slider", {
+    autoplay: {
+      delay: 4000,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    slidesPerView: 3,
+    spaceBetween: 30,
+    breakpoints: {
+      // when window is <= 767px
+      767: {
+        slidesPerView: 1,
+      },
+      // when window is <= 991px
+      991: {
+        slidesPerView: 2,
+      },
+    },
+  });
+
+  /* Image Lightbox - Magnific Popup */
+  $(".popup-link").magnificPopup({
+    removalDelay: 300,
+    type: "image",
+    callbacks: {
+      beforeOpen: function () {
+        this.st.image.markup = this.st.image.markup.replace(
+          "mfp-figure",
+          "mfp-figure " + this.st.el.attr("data-effect"),
+        );
+      },
+      beforeClose: function () {
+        $(".mfp-figure").addClass("fadeOut");
+      },
+    },
+    gallery: {
+      enabled: true, //enable gallery mode
+    },
+  });
+
+  /* Details Lightbox - Magnific Popup */
+  $(".popup-with-move-anim").magnificPopup({
+    type: "inline",
+    fixedContentPos: true,
+    fixedBgPos: true,
+    overflowY: "auto",
+    closeBtnInside: true,
+    preloader: false,
+    midClick: true,
+    removalDelay: 300,
+    mainClass: "my-mfp-slide-bottom",
+  });
+
+  /* Move Form Fields Label When User Types */
+  // for input and textarea fields
+  $("input, textarea").keyup(function () {
+    if ($(this).val() != "") {
+      $(this).addClass("notEmpty");
+    } else {
+      $(this).removeClass("notEmpty");
+    }
+  });
+
+  /* Datepicker - Bootstrap Datepicker */
+  $("#start").datepicker({
+    todayHighlight: true,
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
+
+  // detects change to selected date to keep the label above the value in the input field
+  $("#start")
+    .datepicker()
+    .on("changeDate", function (e) {
+      $("input[id=start]").addClass("notEmpty");
     });
 
+  $("#end").datepicker({
+    autoclose: true,
+    format: "MM/dd/yyyy",
+  });
 
-    /* Image Slider Room - Swiper */
+  // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    var imageSlider = new Swiper('.image-slider-room', {
+  $("#end")
-        autoplay: {
+    .datepicker()
-            delay: 3000,
+    .on("changeDate", function (e) {
-            disableOnInteraction: false
+      $("input[id=end]").addClass("notEmpty");
-		},
-        loop: false,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev',
-		}
-    });
-    
-
-    /* Card Slider - Swiper */
-	var cardSlider = new Swiper('.card-slider', {
-		autoplay: {
-            delay: 4000,
-            disableOnInteraction: false
-		},
-        loop: true,
-        navigation: {
-			nextEl: '.swiper-button-next',
-			prevEl: '.swiper-button-prev'
-		},
-		slidesPerView: 3,
-		spaceBetween: 30,
-        breakpoints: {
-            // when window is <= 767px
-            767: {
-                slidesPerView: 1
-            },
-            // when window is <= 991px
-            991: {
-                slidesPerView: 2
-            }
-        }
     });
 
+  /* Back To Top Button */
+  // create the back to top button
+  $("body").prepend(
+    '<a href="body" class="back-to-top page-scroll">Back to Top</a>',
+  );
+  var amountScrolled = 700;
+  $(window).scroll(function () {
+    if ($(window).scrollTop() > amountScrolled) {
+      $("a.back-to-top").fadeIn("500");
+    } else {
+      $("a.back-to-top").fadeOut("500");
+    }
+  });
 
-    /* Image Lightbox - Magnific Popup */
+  /* Removes Long Focus On Buttons */
-	$('.popup-link').magnificPopup({
+  $(".button, a, button").mouseup(function () {
-		removalDelay: 300,
+    $(this).blur();
-		type: 'image',
+  });
-		callbacks: {
+})(jQuery);
-			beforeOpen: function() {
-				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure ' + this.st.el.attr('data-effect'));
-			},
-			beforeClose: function() {
-				$('.mfp-figure').addClass('fadeOut');
-			}
-		},
-		gallery:{
-			enabled:true //enable gallery mode
-		}
-    });
-    
-
-    /* Details Lightbox - Magnific Popup */
-    $('.popup-with-move-anim').magnificPopup({
-		type: 'inline',
-		fixedContentPos: true,
-		fixedBgPos: true,
-		overflowY: 'auto',
-		closeBtnInside: true,
-		preloader: false,
-		midClick: true,
-		removalDelay: 300,
-		mainClass: 'my-mfp-slide-bottom'
-    });
-
-
-    /* Move Form Fields Label When User Types */
-    // for input and textarea fields
-    $("input, textarea").keyup(function(){
-		if ($(this).val() != '') {
-			$(this).addClass('notEmpty');
-		} else {
-			$(this).removeClass('notEmpty');
-		}
-    });
-
-    
-    /* Datepicker - Bootstrap Datepicker */
-	$('#start').datepicker({
-		todayHighlight: true,
-		autoclose: true,
-        format: 'MM/dd/yyyy',
-    });
-    
-    // detects change to selected date to keep the label above the value in the input field
-    $('#start').datepicker().on('changeDate', function(e) {
-        $("input[id=start]").addClass('notEmpty');
-    });
-	
-	$('#end').datepicker({
-		autoclose: true,
-		format: 'MM/dd/yyyy'
-    });
-
-    // detects change to selected date to keep the label above the value in the input field// keeps the label above the value in the input field
-    $('#end').datepicker().on('changeDate', function(e) {
-        $("input[id=end]").addClass('notEmpty');
-    });
-    
-
-    /* Back To Top Button */
-    // create the back to top button
-    $('body').prepend('<a href="body" class="back-to-top page-scroll">Back to Top</a>');
-    var amountScrolled = 700;
-    $(window).scroll(function() {
-        if ($(window).scrollTop() > amountScrolled) {
-            $('a.back-to-top').fadeIn('500');
-        } else {
-            $('a.back-to-top').fadeOut('500');
-        }
-    });
-
-
-	/* Removes Long Focus On Buttons */
-	$(".button, a, button").mouseup(function() {
-		$(this).blur();
-	});
-
-})(jQuery);

template/panoramic-room.html

@@ -1,305 +1,471 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
     <!-- SEO Meta Tags -->
-    <meta name="description" content="Author">
+    <meta name="description" content="Author" />
-    <meta name="author" content="Name">
+    <meta name="author" content="Name" />
 
     <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
-	<meta property="og:site_name" content="" /> <!-- website name -->
+    <meta property="og:site_name" content="" />
-	<meta property="og:site" content="" /> <!-- website link -->
+    <!-- website name -->
-	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
+    <meta property="og:site" content="" />
-	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
+    <!-- website link -->
-	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
+    <meta property="og:title" content="" />
-	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
+    <!-- title shown in the actual shared post -->
-	<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
+    <meta property="og:description" content="" />
+    <!-- description shown in the actual shared post -->
+    <meta property="og:image" content="" />
+    <!-- image link, make sure it's jpg -->
+    <meta property="og:url" content="" />
+    <!-- where do you want your post to link to -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- to have large image post format in Twitter -->
 
     <!-- Webpage Title -->
     <title>Panoramic Room - Villa</title>
-    
+
     <!-- Styles -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
-    <link href="css/bootstrap.css" rel="stylesheet">
+      rel="stylesheet"
-    <link href="css/fontawesome-all.css" rel="stylesheet">
+    />
-    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
+    <link
-    <link href="css/swiper.css" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
-	<link href="css/magnific-popup.css" rel="stylesheet">
+      rel="stylesheet"
-	<link href="css/styles.css" rel="stylesheet">
+    />
-	
+    <link href="css/bootstrap.css" rel="stylesheet" />
-	<!-- Favicon  -->
+    <link href="css/fontawesome-all.css" rel="stylesheet" />
-    <link rel="icon" href="images/favicon.png">
+    <link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
-</head>
+    <link href="css/swiper.css" rel="stylesheet" />
-<body data-spy="scroll" data-target=".fixed-top">
+    <link href="css/magnific-popup.css" rel="stylesheet" />
-    
+    <link href="css/styles.css" rel="stylesheet" />
+
+    <!-- Favicon  -->
+    <link rel="icon" href="images/favicon.png" />
+  </head>
+  <body data-spy="scroll" data-target=".fixed-top">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg fixed-top navbar-light">
-        <div class="container">
+      <div class="container">
-            
+        <!-- Text Logo - Use this if you don't have a graphic logo -->
-            <!-- Text Logo - Use this if you don't have a graphic logo -->
+        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
-            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
 
-            <!-- Image Logo -->
+        <!-- Image Logo -->
-            <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
+        <a class="navbar-brand logo-image" href="index.html"
+          ><img src="images/logo.svg" alt="alternative"
+        /></a>
 
-            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+        <button
-                <span class="navbar-toggler-icon"></span>
+          class="navbar-toggler p-0 border-0"
-            </button>
+          type="button"
+          data-toggle="offcanvas"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+        <div
-                <ul class="navbar-nav ">
+          class="navbar-collapse offcanvas-collapse"
-                    <li class="nav-item">
+          id="navbarsExampleDefault"
-                        <a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
+        >
-                    </li>
+          <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
+            <li class="nav-item">
-                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
+              <a class="nav-link" href="article.html"
-                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                >Article <span class="sr-only">(current)</span></a
-                            <a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
+              >
-                            <div class="dropdown-divider"></div>
+            </li>
-                            <a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
+            <li class="nav-item dropdown">
-                            <div class="dropdown-divider"></div>
+              <a
-                            <a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
+                class="nav-link dropdown-toggle"
-                        </div>
+                href="#"
-                    </li>
+                id="dropdown01"
-                    <li class="nav-item">
+                data-toggle="dropdown"
-                        <a class="nav-link" href="contact.html">Contact</a>
+                aria-haspopup="true"
-                    </li>
+                aria-expanded="false"
-                </ul>
+                >Rooms</a
-                <span class="nav-item ml-auto">
+              >
-                    <a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown01">
-                </span>
+                <a class="dropdown-item page-scroll" href="balcony-room.html"
-                <span class="nav-item lang-switch">
+                  >Balcony Room</a
-                    <a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
+                >
-                </span>
+                <div class="dropdown-divider"></div>
-            </div> <!-- end of navbar-collapse -->
+                <a class="dropdown-item page-scroll" href="panoramic-room.html"
-        </div> <!-- end of container -->
+                  >Panoramic Room</a
-    </nav> <!-- end of navbar -->
+                >
+                <div class="dropdown-divider"></div>
+                <a
+                  class="dropdown-item page-scroll"
+                  href="presidential-room.html"
+                  >Presidential Room</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+          </ul>
+          <span class="nav-item ml-auto">
+            <a class="btn-outline-sm" href="tel:1-800-324-9832"
+              ><i class="fas fa-phone-alt"></i>1-800-324-9832</a
+            >
+          </span>
+          <span class="nav-item lang-switch">
+            <a class="lang-item no-line active" href="index.html"
+              ><img src="images/language-en.jpg" alt="alternative" />EN</a
+            >
+            &nbsp;|&nbsp;
+            <a class="lang-item no-line" href="index.html"
+              ><img src="images/language-it.jpg" alt="alternative" />IT</a
+            >
+          </span>
+        </div>
+        <!-- end of navbar-collapse -->
+      </div>
+      <!-- end of container -->
+    </nav>
+    <!-- end of navbar -->
     <!-- end of navigation -->
 
-
     <!-- Header -->
     <header class="ex-header bg-gray">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h1 class="green">Panoramic Room - $79/day</h1>
+            <h1 class="green">Panoramic Room - $79/day</h1>
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+        </div>
-    </header> <!-- end of ex-header -->
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </header>
+    <!-- end of ex-header -->
     <!-- end of header -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 bg-gray pb-6">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
+            <!-- Image Slider Room -->
+            <div class="slider-container">
+              <div class="swiper-container image-slider-room">
+                <div class="swiper-wrapper">
+                  <!-- Slide -->
+                  <div class="swiper-slide">
+                    <div class="image-container">
+                      <a
+                        class="popup-link"
+                        href="images/room-panoramic-1.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-panoramic-1.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                    <!-- Image Slider Room -->
+                  <!-- Slide -->
-                    <div class="slider-container">
+                  <div class="swiper-slide">
-                        <div class="swiper-container image-slider-room">
+                    <div class="image-container">
-                            <div class="swiper-wrapper">
+                      <a
+                        class="popup-link"
+                        href="images/room-panoramic-2.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-panoramic-2.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                                <!-- Slide -->
+                  <!-- Slide -->
-                                <div class="swiper-slide">
+                  <div class="swiper-slide">
-                                    <div class="image-container">
+                    <div class="image-container">
-                                        <a class="popup-link" href="images/room-panoramic-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-1.jpg" alt="alternative"></a>
+                      <a
-                                    </div>
+                        class="popup-link"
-                                </div>
+                        href="images/room-panoramic-3.jpg"
-                                <!-- end of slide -->
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-panoramic-3.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
+                </div>
+                <!-- end of swiper-wrapper -->
 
-                                <!-- Slide -->
+                <!-- Add Arrows -->
-                                <div class="swiper-slide">
+                <div class="swiper-button-next"></div>
-                                    <div class="image-container">
+                <div class="swiper-button-prev"></div>
-                                        <a class="popup-link" href="images/room-panoramic-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-2.jpg" alt="alternative"></a>
+                <!-- end of add arrows -->
-                                    </div>
+              </div>
-                                </div>
+              <!-- end of swiper container -->
-                                <!-- end of slide -->
+            </div>
-
+            <!-- end of slider-container -->
-                                <!-- Slide -->
+            <!-- end of image slider -->
-                                <div class="swiper-slide">
+          </div>
-                                    <div class="image-container">
+          <!-- end of col -->
-                                        <a class="popup-link" href="images/room-panoramic-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-panoramic-3.jpg" alt="alternative"></a>
+        </div>
-                                    </div>
+        <!-- end of row -->
-                                </div>
+      </div>
-                                <!-- end of slide -->
+      <!-- end of container -->
-
+    </div>
-                            </div> <!-- end of swiper-wrapper -->
+    <!-- end of ex-basic-1 -->
-
-                            <!-- Add Arrows -->
-                            <div class="swiper-button-next"></div>
-                            <div class="swiper-button-prev"></div>
-                            <!-- end of add arrows -->
-
-                        </div> <!-- end of swiper container -->
-                    </div> <!-- end of slider-container -->
-                    <!-- end of image slider -->
-
-                </div> <!-- end of col -->
-            </div> <!-- end of row -->
-        </div> <!-- end of container -->
-    </div> <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 pt-5">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h2 class="mt-3 mb-4">Description</h2>
+            <h2 class="mt-3 mb-4">Description</h2>
-                    <p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
+            <p class="mb-5">
+              Each of Villa's rooms was designed to offer the best possible
+              experience for many types of travelers from the adventure seekers
+              to those who value comfort. We've designed the rooms based on more
+              than 10 years of experience in the hospitality business and the
+              entire team is very proud of what we achieved with Villa.
+            </p>
 
-                    <div class="text-box mb-6">
+            <div class="text-box mb-6">
-                        <h3>Rooms Designed For Comfort And Relaxation</h3>
+              <h3>Rooms Designed For Comfort And Relaxation</h3>
-                        <p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+              <p>
-                    </div> <!-- end of text-box -->
+                The rooms are designed to offer the best possible levels of
+                comfort and relaxation. The design is contemporary based on
+                comforting colors and manages to appeal to many types of
+                personalities and tastes. The materials used in Villa's
+                construction are modern and durable, offering warm temperatures
+                in the winter and cooler summer days.
+              </p>
+            </div>
+            <!-- end of text-box -->
 
-                    <ul class="list-unstyled list-icon-lg mb-5">
+            <ul class="list-unstyled list-icon-lg mb-5">
-                        <li class="media">
+              <li class="media">
-                            <div class="list-icon bg-1">
+                <div class="list-icon bg-1">
-                                <i class="fas fa-shower"></i>
+                  <i class="fas fa-shower"></i>
-                            </div>
+                </div>
-                            <div class="media-body">
+                <div class="media-body">
-                                <h3 class="list-item-title">Modern Amenities</h3>
+                  <h3 class="list-item-title">Modern Amenities</h3>
-                                <p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
+                  <p class="list-item-text">
-                            </div>
+                    Villa's amenities and rooms rooms are designed to offer the
-                        </li>
+                    best possible levels of comfort and relaxation. The design
-                        <li class="media">
+                    is contemporary based on comforting colors and manages to
-                            <div class="list-icon bg-2">
+                    appeal to many types of personalities and tastes. The
-                                <i class="fas fa-tv"></i>
+                    materials used in Villa's construction are provided by top
-                            </div>
+                    suppliers.
-                            <div class="media-body">
+                  </p>
-                                <h3 class="list-item-title">Brand Name Appliances</h3>
+                </div>
-                                <p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
+              </li>
-                            </div>
+              <li class="media">
-                        </li>
+                <div class="list-icon bg-2">
-                        <li class="media">
+                  <i class="fas fa-tv"></i>
-                            <div class="list-icon bg-3">
+                </div>
-                                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
-                            </div>
+                  <h3 class="list-item-title">Brand Name Appliances</h3>
-                            <div class="media-body">
+                  <p class="list-item-text">
-                                <h3 class="list-item-title">Packed Minibar</h3>
+                    All the electronics are functional and designed to offer the
-                                <p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
+                    best possible levels of comfort and relaxation. The design
-                            </div>
+                    is contemporary based on comforting colors and manages to
-                        </li>
+                    appeal to many types of personalities and tastes. The main
-                    </ul> <!-- end of list-unstyled -->
+                    focus of all appliances is to offer a great vacation time
+                    while indoors.
+                  </p>
+                </div>
+              </li>
+              <li class="media">
+                <div class="list-icon bg-3">
+                  <i class="fas fa-wine-bottle"></i>
+                </div>
+                <div class="media-body">
+                  <h3 class="list-item-title">Packed Minibar</h3>
+                  <p class="list-item-text">
+                    The minibar is packed with goodie and designed to offer the
+                    best possible levels of comfort and relaxation. The design
+                    is contemporary based on comforting colors and manages to
+                    appeal. The main focus of the minibar is to offer a great
+                    vacation time while you are in the room.
+                  </p>
+                </div>
+              </li>
+            </ul>
+            <!-- end of list-unstyled -->
 
-                    <p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+            <p class="mb-4">
+              Other features designed to offer the best possible levels of
+              comfort and relaxation. The design is contemporary based on
+              comforting colors and manages to appeal to many types of
+              personalities and tastes. The materials used in Villa's
+              construction are modern and durable, offering warm temperatures in
+              the winter and cooler summer days.
+            </p>
 
-                    <ul class="list-unstyled li-space-lg amenities mb-5">
+            <ul class="list-unstyled li-space-lg amenities mb-5">
-                        <li class="media">
+              <li class="media">
-                            <i class="fas fa-shower"></i>
+                <i class="fas fa-shower"></i>
-                            <div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
+                <div class="media-body">
-                        </li>
+                  <strong>Warm shower</strong> for those early spring and late
-                        <li class="media">
+                  autumn days. Showers are also available at the beach
-                            <i class="fas fa-tv"></i>
+                </div>
-                            <div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
+              </li>
-                        </li>
+              <li class="media">
-                        <li class="media">
+                <i class="fas fa-tv"></i>
-                            <i class="fas fa-snowflake"></i>
+                <div class="media-body">
-                            <div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
+                  <strong>Modern LCD tv</strong> for rainy days that have to be
-                        </li>
+                  spent inside. You can event connect the gaming console
-                        <li class="media">
+                </div>
-                            <i class="fas fa-image"></i>
+              </li>
-                            <div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
+              <li class="media">
-                        </li>
+                <i class="fas fa-snowflake"></i>
-                        <li class="media">
+                <div class="media-body">
-                            <i class="fas fa-wine-bottle"></i>
+                  <strong>Air conditioning</strong> that is state of the art
-                            <div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
+                  technology specially designed to create the optimum
-                        </li>
+                  temperature
-                    </ul>
+                </div>
-                    <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+              </li>
-                </div> <!-- end of col -->
+              <li class="media">
-            </div> <!-- end of row -->
+                <i class="fas fa-image"></i>
-        </div> <!-- end of container -->
+                <div class="media-body">
-    </div> <!-- end of ex-basic-1 -->
+                  <strong>Beautiful views</strong> from any window. Enjoy them
+                  from inside the room or sitting outside on the large balcony
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
+                  <strong>Packed minibar</strong> loaded with goodies so you can
+                  enjoy some treats if you forget to shop in town
+                </div>
+              </li>
+            </ul>
+            <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Footer -->
     <div class="footer">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
+            <h3>
-                    <div class="social-container">
+              If you are looking too have a comfortable and relaxing time then
-                        <span class="fa-stack">
+              you should get in touch with us using
-                            <a href="#your-link">
+              <a class="green" href="mailto:reception@villa.com"
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                >reception@villa.com</a
-                                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              >
-                            </a>
+            </h3>
-                        </span>
+            <div class="social-container">
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-twitter fa-stack-1x"></i>
+                  <i class="fab fa-facebook-f fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-pinterest-p fa-stack-1x"></i>
+                  <i class="fab fa-twitter fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-instagram fa-stack-1x"></i>
+                  <i class="fab fa-pinterest-p fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-youtube fa-stack-1x"></i>
+                  <i class="fab fa-instagram fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                    </div> <!-- end of social-container -->
+              <span class="fa-stack">
-                </div> <!-- end of col -->
+                <a href="#your-link">
-            </div> <!-- end of row -->
+                  <i class="fas fa-circle fa-stack-2x"></i>
-        </div> <!-- end of container -->
+                  <i class="fab fa-youtube fa-stack-1x"></i>
-    </div> <!-- end of footer -->  
+                </a>
+              </span>
+            </div>
+            <!-- end of social-container -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of footer -->
     <!-- end of footer -->
-
 
     <!-- Copyright -->
     <div class="copyright">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <hr class="divider">
+            <hr class="divider" />
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-            <div class="row">
+        </div>
-                <div class="col-lg-6">
+        <!-- end of row -->
-                    <ul class="list-unstyled li-space-lg p-small">
+        <div class="row">
-                        <li><a href="article.html">Article</a></li>
+          <div class="col-lg-6">
-                        <li><a href="balcony-room.html">Balcony Room</a></li>
+            <ul class="list-unstyled li-space-lg p-small">
-                        <li><a href="panoramic-room.html">Panoramic Room</a></li>
+              <li><a href="article.html">Article</a></li>
-                        <li><a href="presidential-room.html">Presidential Room</a></li>
+              <li><a href="balcony-room.html">Balcony Room</a></li>
-                        <li><a href="contact.html">Contact</a></li>
+              <li><a href="panoramic-room.html">Panoramic Room</a></li>
-                    </ul> <!-- end of list-unstyled -->
+              <li><a href="presidential-room.html">Presidential Room</a></li>
-                </div> <!-- end of col -->
+              <li><a href="contact.html">Contact</a></li>
-                <div class="col-lg-6">
+            </ul>
-                    <p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
+            <!-- end of list-unstyled -->
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- enf of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+          <div class="col-lg-6">
-    </div> <!-- end of copyright --> 
+            <p class="p-small statement">
+              Copyright © <a href="#your-link">Name</a>
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- enf of row -->
+      </div>
+      <!-- end of container -->
+    </div>
     <!-- end of copyright -->
-    
+    <!-- end of copyright -->
-    	
+
     <!-- Scripts -->
-    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+    <!-- jQuery for Bootstrap's JavaScript plugins -->
-    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+    <script src="js/bootstrap.min.js"></script>
-    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+    <!-- Bootstrap framework -->
-    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+    <script src="js/jquery.easing.min.js"></script>
-    <script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
+    <!-- jQuery Easing for smooth scrolling between anchors -->
-    <script src="js/scripts.js"></script> <!-- Custom scripts -->
+    <script src="js/swiper.min.js"></script>
-</body>
+    <!-- Swiper for image and text sliders -->
-</html>
+    <script src="js/jquery.magnific-popup.js"></script>
+    <!-- Magnific Popup for lightboxes -->
+    <script src="js/bootstrap-datepicker.min.js"></script>
+    <!-- Datepicker for Bootstrap -->
+    <script src="js/scripts.js"></script>
+    <!-- Custom scripts -->
+  </body>
+</html>

template/presidential-room.html

@@ -1,305 +1,471 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
     <!-- SEO Meta Tags -->
-    <meta name="description" content="Description">
+    <meta name="description" content="Description" />
-    <meta name="author" content="Author">
+    <meta name="author" content="Author" />
 
     <!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
-	<meta property="og:site_name" content="" /> <!-- website name -->
+    <meta property="og:site_name" content="" />
-	<meta property="og:site" content="" /> <!-- website link -->
+    <!-- website name -->
-	<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
+    <meta property="og:site" content="" />
-	<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
+    <!-- website link -->
-	<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
+    <meta property="og:title" content="" />
-	<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
+    <!-- title shown in the actual shared post -->
-	<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
+    <meta property="og:description" content="" />
+    <!-- description shown in the actual shared post -->
+    <meta property="og:image" content="" />
+    <!-- image link, make sure it's jpg -->
+    <meta property="og:url" content="" />
+    <!-- where do you want your post to link to -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- to have large image post format in Twitter -->
 
     <!-- Webpage Title -->
     <title>Presidential Room - Villa</title>
-    
+
     <!-- Styles -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
-    <link href="css/bootstrap.css" rel="stylesheet">
+      rel="stylesheet"
-    <link href="css/fontawesome-all.css" rel="stylesheet">
+    />
-    <link href="css/bootstrap-datepicker3.css" rel="stylesheet">
+    <link
-    <link href="css/swiper.css" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap"
-	<link href="css/magnific-popup.css" rel="stylesheet">
+      rel="stylesheet"
-	<link href="css/styles.css" rel="stylesheet">
+    />
-	
+    <link href="css/bootstrap.css" rel="stylesheet" />
-	<!-- Favicon  -->
+    <link href="css/fontawesome-all.css" rel="stylesheet" />
-    <link rel="icon" href="images/favicon.png">
+    <link href="css/bootstrap-datepicker3.css" rel="stylesheet" />
-</head>
+    <link href="css/swiper.css" rel="stylesheet" />
-<body data-spy="scroll" data-target=".fixed-top">
+    <link href="css/magnific-popup.css" rel="stylesheet" />
-    
+    <link href="css/styles.css" rel="stylesheet" />
+
+    <!-- Favicon  -->
+    <link rel="icon" href="images/favicon.png" />
+  </head>
+  <body data-spy="scroll" data-target=".fixed-top">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg fixed-top navbar-light">
-        <div class="container">
+      <div class="container">
-            
+        <!-- Text Logo - Use this if you don't have a graphic logo -->
-            <!-- Text Logo - Use this if you don't have a graphic logo -->
+        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
-            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Villa</a> -->
 
-            <!-- Image Logo -->
+        <!-- Image Logo -->
-            <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
+        <a class="navbar-brand logo-image" href="index.html"
+          ><img src="images/logo.svg" alt="alternative"
+        /></a>
 
-            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+        <button
-                <span class="navbar-toggler-icon"></span>
+          class="navbar-toggler p-0 border-0"
-            </button>
+          type="button"
+          data-toggle="offcanvas"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+        <div
-                <ul class="navbar-nav ">
+          class="navbar-collapse offcanvas-collapse"
-                    <li class="nav-item">
+          id="navbarsExampleDefault"
-                        <a class="nav-link" href="article.html">Article <span class="sr-only">(current)</span></a>
+        >
-                    </li>
+          <ul class="navbar-nav">
-                    <li class="nav-item dropdown">
+            <li class="nav-item">
-                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
+              <a class="nav-link" href="article.html"
-                        <div class="dropdown-menu" aria-labelledby="dropdown01">
+                >Article <span class="sr-only">(current)</span></a
-                            <a class="dropdown-item page-scroll" href="balcony-room.html">Balcony Room</a>
+              >
-                            <div class="dropdown-divider"></div>
+            </li>
-                            <a class="dropdown-item page-scroll" href="panoramic-room.html">Panoramic Room</a>
+            <li class="nav-item dropdown">
-                            <div class="dropdown-divider"></div>
+              <a
-                            <a class="dropdown-item page-scroll" href="presidential-room.html">Presidential Room</a>
+                class="nav-link dropdown-toggle"
-                        </div>
+                href="#"
-                    </li>
+                id="dropdown01"
-                    <li class="nav-item">
+                data-toggle="dropdown"
-                        <a class="nav-link" href="contact.html">Contact</a>
+                aria-haspopup="true"
-                    </li>
+                aria-expanded="false"
-                </ul>
+                >Rooms</a
-                <span class="nav-item ml-auto">
+              >
-                    <a class="btn-outline-sm" href="tel:1-800-324-9832"><i class="fas fa-phone-alt"></i>1-800-324-9832</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown01">
-                </span>
+                <a class="dropdown-item page-scroll" href="balcony-room.html"
-                <span class="nav-item lang-switch">
+                  >Balcony Room</a
-                    <a class="lang-item no-line active" href="index.html"><img src="images/language-en.jpg" alt="alternative">EN</a> &nbsp;|&nbsp; <a class="lang-item no-line" href="index.html"><img src="images/language-it.jpg" alt="alternative">IT</a>
+                >
-                </span>
+                <div class="dropdown-divider"></div>
-            </div> <!-- end of navbar-collapse -->
+                <a class="dropdown-item page-scroll" href="panoramic-room.html"
-        </div> <!-- end of container -->
+                  >Panoramic Room</a
-    </nav> <!-- end of navbar -->
+                >
+                <div class="dropdown-divider"></div>
+                <a
+                  class="dropdown-item page-scroll"
+                  href="presidential-room.html"
+                  >Presidential Room</a
+                >
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+          </ul>
+          <span class="nav-item ml-auto">
+            <a class="btn-outline-sm" href="tel:1-800-324-9832"
+              ><i class="fas fa-phone-alt"></i>1-800-324-9832</a
+            >
+          </span>
+          <span class="nav-item lang-switch">
+            <a class="lang-item no-line active" href="index.html"
+              ><img src="images/language-en.jpg" alt="alternative" />EN</a
+            >
+            &nbsp;|&nbsp;
+            <a class="lang-item no-line" href="index.html"
+              ><img src="images/language-it.jpg" alt="alternative" />IT</a
+            >
+          </span>
+        </div>
+        <!-- end of navbar-collapse -->
+      </div>
+      <!-- end of container -->
+    </nav>
+    <!-- end of navbar -->
     <!-- end of navigation -->
 
-
     <!-- Header -->
     <header class="ex-header bg-gray">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h1 class="green">Presidential Room - $99/day</h1>
+            <h1 class="green">Presidential Room - $99/day</h1>
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+        </div>
-    </header> <!-- end of ex-header -->
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </header>
+    <!-- end of ex-header -->
     <!-- end of header -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 bg-gray pb-6">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
+            <!-- Image Slider Room -->
+            <div class="slider-container">
+              <div class="swiper-container image-slider-room">
+                <div class="swiper-wrapper">
+                  <!-- Slide -->
+                  <div class="swiper-slide">
+                    <div class="image-container">
+                      <a
+                        class="popup-link"
+                        href="images/room-presidential-1.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-presidential-1.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                    <!-- Image Slider Room -->
+                  <!-- Slide -->
-                    <div class="slider-container">
+                  <div class="swiper-slide">
-                        <div class="swiper-container image-slider-room">
+                    <div class="image-container">
-                            <div class="swiper-wrapper">
+                      <a
+                        class="popup-link"
+                        href="images/room-presidential-2.jpg"
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-presidential-2.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
 
-                                <!-- Slide -->
+                  <!-- Slide -->
-                                <div class="swiper-slide">
+                  <div class="swiper-slide">
-                                    <div class="image-container">
+                    <div class="image-container">
-                                        <a class="popup-link" href="images/room-presidential-1.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-1.jpg" alt="alternative"></a>
+                      <a
-                                    </div>
+                        class="popup-link"
-                                </div>
+                        href="images/room-presidential-3.jpg"
-                                <!-- end of slide -->
+                        data-effect="fadeIn"
+                        ><img
+                          class="img-fluid"
+                          src="images/room-presidential-3.jpg"
+                          alt="alternative"
+                      /></a>
+                    </div>
+                  </div>
+                  <!-- end of slide -->
+                </div>
+                <!-- end of swiper-wrapper -->
 
-                                <!-- Slide -->
+                <!-- Add Arrows -->
-                                <div class="swiper-slide">
+                <div class="swiper-button-next"></div>
-                                    <div class="image-container">
+                <div class="swiper-button-prev"></div>
-                                        <a class="popup-link" href="images/room-presidential-2.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-2.jpg" alt="alternative"></a>
+                <!-- end of add arrows -->
-                                    </div>
+              </div>
-                                </div>
+              <!-- end of swiper container -->
-                                <!-- end of slide -->
+            </div>
-
+            <!-- end of slider-container -->
-                                <!-- Slide -->
+            <!-- end of image slider -->
-                                <div class="swiper-slide">
+          </div>
-                                    <div class="image-container">
+          <!-- end of col -->
-                                        <a class="popup-link" href="images/room-presidential-3.jpg" data-effect="fadeIn"><img class="img-fluid" src="images/room-presidential-3.jpg" alt="alternative"></a>
+        </div>
-                                    </div>
+        <!-- end of row -->
-                                </div>
+      </div>
-                                <!-- end of slide -->
+      <!-- end of container -->
-
+    </div>
-                            </div> <!-- end of swiper-wrapper -->
+    <!-- end of ex-basic-1 -->
-
-                            <!-- Add Arrows -->
-                            <div class="swiper-button-next"></div>
-                            <div class="swiper-button-prev"></div>
-                            <!-- end of add arrows -->
-
-                        </div> <!-- end of swiper container -->
-                    </div> <!-- end of slider-container -->
-                    <!-- end of image slider -->
-
-                </div> <!-- end of col -->
-            </div> <!-- end of row -->
-        </div> <!-- end of container -->
-    </div> <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Basic -->
     <div class="ex-basic-1 pt-5">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-xl-10 offset-xl-1">
+          <div class="col-xl-10 offset-xl-1">
-                    <h2 class="mt-3 mb-4">Description</h2>
+            <h2 class="mt-3 mb-4">Description</h2>
-                    <p class="mb-5">Each of Villa's rooms was designed to offer the best possible experience for many types of travelers from the adventure seekers to those who value comfort. We've designed the rooms based on more than 10 years of experience in the hospitality business and the entire team is very proud of what we achieved with Villa.</p>
+            <p class="mb-5">
+              Each of Villa's rooms was designed to offer the best possible
+              experience for many types of travelers from the adventure seekers
+              to those who value comfort. We've designed the rooms based on more
+              than 10 years of experience in the hospitality business and the
+              entire team is very proud of what we achieved with Villa.
+            </p>
 
-                    <div class="text-box mb-6">
+            <div class="text-box mb-6">
-                        <h3>Rooms Designed For Comfort And Relaxation</h3>
+              <h3>Rooms Designed For Comfort And Relaxation</h3>
-                        <p>The rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+              <p>
-                    </div> <!-- end of text-box -->
+                The rooms are designed to offer the best possible levels of
+                comfort and relaxation. The design is contemporary based on
+                comforting colors and manages to appeal to many types of
+                personalities and tastes. The materials used in Villa's
+                construction are modern and durable, offering warm temperatures
+                in the winter and cooler summer days.
+              </p>
+            </div>
+            <!-- end of text-box -->
 
-                    <ul class="list-unstyled list-icon-lg mb-5">
+            <ul class="list-unstyled list-icon-lg mb-5">
-                        <li class="media">
+              <li class="media">
-                            <div class="list-icon bg-1">
+                <div class="list-icon bg-1">
-                                <i class="fas fa-shower"></i>
+                  <i class="fas fa-shower"></i>
-                            </div>
+                </div>
-                            <div class="media-body">
+                <div class="media-body">
-                                <h3 class="list-item-title">Modern Amenities</h3>
+                  <h3 class="list-item-title">Modern Amenities</h3>
-                                <p class="list-item-text">Villa's amenities and rooms rooms are designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are provided by top suppliers.</p>
+                  <p class="list-item-text">
-                            </div>
+                    Villa's amenities and rooms rooms are designed to offer the
-                        </li>
+                    best possible levels of comfort and relaxation. The design
-                        <li class="media">
+                    is contemporary based on comforting colors and manages to
-                            <div class="list-icon bg-2">
+                    appeal to many types of personalities and tastes. The
-                                <i class="fas fa-tv"></i>
+                    materials used in Villa's construction are provided by top
-                            </div>
+                    suppliers.
-                            <div class="media-body">
+                  </p>
-                                <h3 class="list-item-title">Brand Name Appliances</h3>
+                </div>
-                                <p class="list-item-text">All the electronics are functional and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The main focus of all appliances is to offer a great vacation time while indoors.</p>
+              </li>
-                            </div>
+              <li class="media">
-                        </li>
+                <div class="list-icon bg-2">
-                        <li class="media">
+                  <i class="fas fa-tv"></i>
-                            <div class="list-icon bg-3">
+                </div>
-                                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
-                            </div>
+                  <h3 class="list-item-title">Brand Name Appliances</h3>
-                            <div class="media-body">
+                  <p class="list-item-text">
-                                <h3 class="list-item-title">Packed Minibar</h3>
+                    All the electronics are functional and designed to offer the
-                                <p class="list-item-text">The minibar is packed with goodie and designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal. The main focus of the minibar is to offer a great vacation time while you are in the room.</p>
+                    best possible levels of comfort and relaxation. The design
-                            </div>
+                    is contemporary based on comforting colors and manages to
-                        </li>
+                    appeal to many types of personalities and tastes. The main
-                    </ul> <!-- end of list-unstyled -->
+                    focus of all appliances is to offer a great vacation time
+                    while indoors.
+                  </p>
+                </div>
+              </li>
+              <li class="media">
+                <div class="list-icon bg-3">
+                  <i class="fas fa-wine-bottle"></i>
+                </div>
+                <div class="media-body">
+                  <h3 class="list-item-title">Packed Minibar</h3>
+                  <p class="list-item-text">
+                    The minibar is packed with goodie and designed to offer the
+                    best possible levels of comfort and relaxation. The design
+                    is contemporary based on comforting colors and manages to
+                    appeal. The main focus of the minibar is to offer a great
+                    vacation time while you are in the room.
+                  </p>
+                </div>
+              </li>
+            </ul>
+            <!-- end of list-unstyled -->
 
-                    <p class="mb-4">Other features designed to offer the best possible levels of comfort and relaxation. The design is contemporary based on comforting colors and manages to appeal to many types of personalities and tastes. The materials used in Villa's construction are modern and durable, offering warm temperatures in the winter and cooler summer days.</p>
+            <p class="mb-4">
+              Other features designed to offer the best possible levels of
+              comfort and relaxation. The design is contemporary based on
+              comforting colors and manages to appeal to many types of
+              personalities and tastes. The materials used in Villa's
+              construction are modern and durable, offering warm temperatures in
+              the winter and cooler summer days.
+            </p>
 
-                    <ul class="list-unstyled li-space-lg amenities mb-5">
+            <ul class="list-unstyled li-space-lg amenities mb-5">
-                        <li class="media">
+              <li class="media">
-                            <i class="fas fa-shower"></i>
+                <i class="fas fa-shower"></i>
-                            <div class="media-body"><strong>Warm shower</strong> for those early spring and late autumn days. Showers are also available at the beach</div>
+                <div class="media-body">
-                        </li>
+                  <strong>Warm shower</strong> for those early spring and late
-                        <li class="media">
+                  autumn days. Showers are also available at the beach
-                            <i class="fas fa-tv"></i>
+                </div>
-                            <div class="media-body"><strong>Modern LCD tv</strong> for rainy days that have to be spent inside. You can event connect the gaming console</div>
+              </li>
-                        </li>
+              <li class="media">
-                        <li class="media">
+                <i class="fas fa-tv"></i>
-                            <i class="fas fa-snowflake"></i>
+                <div class="media-body">
-                            <div class="media-body"><strong>Air conditioning</strong> that is state of the art technology specially designed to create the optimum temperature</div>
+                  <strong>Modern LCD tv</strong> for rainy days that have to be
-                        </li>
+                  spent inside. You can event connect the gaming console
-                        <li class="media">
+                </div>
-                            <i class="fas fa-image"></i>
+              </li>
-                            <div class="media-body"><strong>Beautiful views</strong> from any window. Enjoy them from inside the room or sitting outside on the large balcony</div>
+              <li class="media">
-                        </li>
+                <i class="fas fa-snowflake"></i>
-                        <li class="media">
+                <div class="media-body">
-                            <i class="fas fa-wine-bottle"></i>
+                  <strong>Air conditioning</strong> that is state of the art
-                            <div class="media-body"><strong>Packed minibar</strong> loaded with goodies so you can enjoy some treats if you forget to shop in town</div>
+                  technology specially designed to create the optimum
-                        </li>
+                  temperature
-                    </ul>
+                </div>
-                    <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+              </li>
-                </div> <!-- end of col -->
+              <li class="media">
-            </div> <!-- end of row -->
+                <i class="fas fa-image"></i>
-        </div> <!-- end of container -->
+                <div class="media-body">
-    </div> <!-- end of ex-basic-1 -->
+                  <strong>Beautiful views</strong> from any window. Enjoy them
+                  from inside the room or sitting outside on the large balcony
+                </div>
+              </li>
+              <li class="media">
+                <i class="fas fa-wine-bottle"></i>
+                <div class="media-body">
+                  <strong>Packed minibar</strong> loaded with goodies so you can
+                  enjoy some treats if you forget to shop in town
+                </div>
+              </li>
+            </ul>
+            <a class="btn-solid-reg mb-6" href="index.html">Home</a>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of ex-basic-1 -->
     <!-- end of basic -->
 
-
     <!-- Footer -->
     <div class="footer">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <h3>If you are looking too have a comfortable and relaxing time then you should get in touch with us using <a class="green" href="mailto:reception@villa.com">reception@villa.com</a></h3>
+            <h3>
-                    <div class="social-container">
+              If you are looking too have a comfortable and relaxing time then
-                        <span class="fa-stack">
+              you should get in touch with us using
-                            <a href="#your-link">
+              <a class="green" href="mailto:reception@villa.com"
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                >reception@villa.com</a
-                                <i class="fab fa-facebook-f fa-stack-1x"></i>
+              >
-                            </a>
+            </h3>
-                        </span>
+            <div class="social-container">
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-twitter fa-stack-1x"></i>
+                  <i class="fab fa-facebook-f fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-pinterest-p fa-stack-1x"></i>
+                  <i class="fab fa-twitter fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-instagram fa-stack-1x"></i>
+                  <i class="fab fa-pinterest-p fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                        <span class="fa-stack">
+              <span class="fa-stack">
-                            <a href="#your-link">
+                <a href="#your-link">
-                                <i class="fas fa-circle fa-stack-2x"></i>
+                  <i class="fas fa-circle fa-stack-2x"></i>
-                                <i class="fab fa-youtube fa-stack-1x"></i>
+                  <i class="fab fa-instagram fa-stack-1x"></i>
-                            </a>
+                </a>
-                        </span>
+              </span>
-                    </div> <!-- end of social-container -->
+              <span class="fa-stack">
-                </div> <!-- end of col -->
+                <a href="#your-link">
-            </div> <!-- end of row -->
+                  <i class="fas fa-circle fa-stack-2x"></i>
-        </div> <!-- end of container -->
+                  <i class="fab fa-youtube fa-stack-1x"></i>
-    </div> <!-- end of footer -->  
+                </a>
+              </span>
+            </div>
+            <!-- end of social-container -->
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- end of row -->
+      </div>
+      <!-- end of container -->
+    </div>
+    <!-- end of footer -->
     <!-- end of footer -->
-
 
     <!-- Copyright -->
     <div class="copyright">
-        <div class="container">
+      <div class="container">
-            <div class="row">
+        <div class="row">
-                <div class="col-lg-12">
+          <div class="col-lg-12">
-                    <hr class="divider">
+            <hr class="divider" />
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- end of row -->
+          <!-- end of col -->
-            <div class="row">
+        </div>
-                <div class="col-lg-6">
+        <!-- end of row -->
-                    <ul class="list-unstyled li-space-lg p-small">
+        <div class="row">
-                        <li><a href="article.html">Article</a></li>
+          <div class="col-lg-6">
-                        <li><a href="balcony-room.html">Balcony Room</a></li>
+            <ul class="list-unstyled li-space-lg p-small">
-                        <li><a href="panoramic-room.html">Panoramic Room</a></li>
+              <li><a href="article.html">Article</a></li>
-                        <li><a href="presidential-room.html">Presidential Room</a></li>
+              <li><a href="balcony-room.html">Balcony Room</a></li>
-                        <li><a href="contact.html">Contact</a></li>
+              <li><a href="panoramic-room.html">Panoramic Room</a></li>
-                    </ul> <!-- end of list-unstyled -->
+              <li><a href="presidential-room.html">Presidential Room</a></li>
-                </div> <!-- end of col -->
+              <li><a href="contact.html">Contact</a></li>
-                <div class="col-lg-6">
+            </ul>
-                    <p class="p-small statement">Copyright © <a href="#your-link">Name</a></p>
+            <!-- end of list-unstyled -->
-                </div> <!-- end of col -->
+          </div>
-            </div> <!-- enf of row -->
+          <!-- end of col -->
-        </div> <!-- end of container -->
+          <div class="col-lg-6">
-    </div> <!-- end of copyright --> 
+            <p class="p-small statement">
+              Copyright © <a href="#your-link">Name</a>
+            </p>
+          </div>
+          <!-- end of col -->
+        </div>
+        <!-- enf of row -->
+      </div>
+      <!-- end of container -->
+    </div>
     <!-- end of copyright -->
-    
+    <!-- end of copyright -->
-    	
+
     <!-- Scripts -->
-    <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+    <!-- jQuery for Bootstrap's JavaScript plugins -->
-    <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+    <script src="js/bootstrap.min.js"></script>
-    <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+    <!-- Bootstrap framework -->
-    <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+    <script src="js/jquery.easing.min.js"></script>
-    <script src="js/bootstrap-datepicker.min.js"></script> <!-- Datepicker for Bootstrap -->
+    <!-- jQuery Easing for smooth scrolling between anchors -->
-    <script src="js/scripts.js"></script> <!-- Custom scripts -->
+    <script src="js/swiper.min.js"></script>
-</body>
+    <!-- Swiper for image and text sliders -->
-</html>
+    <script src="js/jquery.magnific-popup.js"></script>
+    <!-- Magnific Popup for lightboxes -->
+    <script src="js/bootstrap-datepicker.min.js"></script>
+    <!-- Datepicker for Bootstrap -->
+    <script src="js/scripts.js"></script>
+    <!-- Custom scripts -->
+  </body>
+</html>