* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: 'Montserrat', serif;
   overflow-x: hidden;
}

ul {
   list-style: none;
   padding: 0;
}

h1, h2, h3 {
   font-family: 'Playfair Display SC', serif;
   font-weight: bold;
}

h1, h2, h3, p {
   color: #181d26;
}

.landing h1, .landing h2 {
   text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

li {
   display: inline;
}

/* Create two equal columns that floats next to each other */
.column {
   float: left;
   width: 50%;
   padding: 10px;
   height: 300px; /* Should be removed. Only for demonstration */
 }

 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .column {
     width: 100%;
   }
 }

section > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 15px;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: box-shadow 0.3s;
}

section:not(.landing-container):nth-of-type(odd) {
   background-color: #ece0d5;;
}

hr {
  border: 0;
  height: 2px;
  width: 20vw;
  margin: 20px;
  background-color: #3b3d3f;
}

footer {
   color: white;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   text-align: center;
   padding: 0px 25px;
   background-color: #35363a;
}

.footer-text {
   color: white;
}

#logo {
   width: 30px;
   height: 25px;
}

.landing {
   height: 90vh;
   justify-content: center;
}

@keyframes fadein {
   100% {
      opacity: 1;
   }
}

.landing-container {
   position: relative;
}

.landing-content {
   margin-top: 5px;
   opacity: 0;
   animation: fadein 3s forwards ease-out;
}

.landing-image-list {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   margin: 0;
   z-index: -1;
}

.landing-image-list li {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   margin: 0;
   z-index: -1;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   opacity: 1;
   animation: imageAnimation 50s linear infinite;
}

.landing-image-list li:nth-child(1) {
  background-image: url("../../assets/images/Donga_img_0.jpg")
}

.landing-image-list li:nth-child(2) {
  background-image: url("../../assets/images/Donga_img_1.jpg");
  animation-delay: 10s;
}

.landing-image-list li:nth-child(3) {
  background-image: url("../../assets/images/Donga_img_2.jpg");
  animation-delay: 20s;
}

.landing-image-list li:nth-child(4) {
  background-image: url("../../assets/images/Donga_img_3.jpg");
  animation-delay: 30s;
}

.landing-image-list li:nth-child(5) {
   background-image: url("../../assets/images/Donga_img_4.jpg");
   animation-delay: 40s;
 }

@keyframes imageAnimation {
   0% {
      opacity: 0;
      animation-timing-function: ease-in;
   }
   10% {
      opacity: 0.3;
      animation-timing-function: ease-out;
   }
   20% {
      opacity: 0.3;
   }
   30% {
      opacity: 0;
   }
}

.landing-btn {
   color: #eff4fc;
   background-color: #3b3d3f;
   padding: 15px 35px;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: bold;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: all 0.3s;
}

.landing-btn:hover {
   color: #3b3d3f;
   background-color: #d9ae7b;
   box-shadow: 0 8px 25px 0 rgba(0,0,0,0.2);
}

.service-icon {
   font-size: 3em;
   color: #3b3d3f;
}

.social-icon {
   font-size: 3em;
   color: #3b3d3f;
   transition: all 0.3s;
}

.social-icon:hover {
   color: #d9ae7b;
}

.social-icon-container {
   width: 50%;
   display: flex;
   justify-content: space-around;
}

.contact-link {
   color: #3b3d3f;
   transition: all 0.3s;
}

.contact-link:hover {
   color: #d9ae7b;
}

.grid {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   justify-content: space-around;
}

.about-us-image {
   background-clip: content-box;
   flex-basis: 40%;
   text-align: center;
   padding: 20px;
   margin: 1vw;
   height: 300px;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: box-shadow 0.3s;
}

.about-us-image:hover {
   box-shadow: 0 8px 25px 0 rgba(0,0,0,0.2);
}

#about_house_img {
   width:100%;
   min-width:100%;
   min-height:100%;
   max-height:100%;
   max-width:100%;
}

/* container */
.responsive-two-columns {
   display:flex;
   flex-wrap:wrap;
}

/* columns */
.responsive-two-columns > * {
   width:100%;
   padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
   .responsive-two-columns > * {
       width:50%;
   }
}

#air_bnb_reviews {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.horizontalgap {
   float: left;
   overflow: hidden;
   height: 1px;
   width: 0px;
 }

.photo-gallery-image {
   width: 580px;
   height: 350px;
   background-clip: content-box;
   object-fit: cover;
   text-align: center;
   padding: 20px;
   background-color: white;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.photo-gallery-image-0 {
   background-image: url("../images/jpeg-optimizer_Gallery_00.jpg");
}

.photo-gallery-image-1 {
   background-image: url("../images/jpeg-optimizer_Gallery_01.jpg");
}

.photo-gallery-image-2 {
   background-image: url("../images/jpeg-optimizer_Gallery_02.jpg");
}

.photo-gallery-image-3 {
   background-image: url("../images/jpeg-optimizer_Gallery_03.jpg");
}

.photo-gallery-image-4 {
   background-image: url("../images/jpeg-optimizer_Gallery_04.jpg");
}

.photo-gallery-image-5 {
   background-image: url("../images/jpeg-optimizer_Gallery_05.jpg");
}

.photo-gallery-image-6 {
   background-image: url("../images/jpeg-optimizer_Gallery_06.jpg");
}

.photo-gallery-image-7 {
   background-image: url("../images/jpeg-optimizer_Gallery_07.jpg");
}

.photo-gallery-image-8 {
   background-image: url("../images/jpeg-optimizer_Gallery_08.jpg");
}

.photo-gallery-image-9 {
   background-image: url("../images/jpeg-optimizer_Gallery_09.jpg");
}

.photo-gallery-image-10 {
   background-image: url("../images/jpeg-optimizer_Gallery_10.jpg");
}

.photo-gallery-image-11 {
   background-image: url("../images/jpeg-optimizer_Gallery_11.jpg");
}

.photo-gallery-image-12 {
   background-image: url("../images/jpeg-optimizer_Gallery_12.jpg");
}

.photo-gallery-image-13 {
   background-image: url("../images/jpeg-optimizer_Gallery_13.jpg");
}

.photo-gallery-image-14 {
   background-image: url("../images/jpeg-optimizer_Gallery_14.jpg");
}

.service-group {
   flex-basis: 50%;
   text-align: center;
   padding: 25px;
}

.service-description {
   padding: 0 25px;
}

.book-now {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.reviews {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.footer-link {
   color: #d9ae7b;
   text-decoration: none;
   transition: all 0.3s;
}

.footer-link:hover {
   text-shadow: 0px 0px 1px #d9ae7b;
}

/* Media queries for responsive breakpoints */

/* for-phone-only-portrait */
@media (max-width: 599px) {
   footer {
      flex-direction: column;
   }

   h1 {
      font-size: 2em;
   }

   hr {
     width: 40vw;
   }

   .landing {
      justify-content: flex-start;
      padding-top: 30vh;
   }

   .landing-logo {
      margin-bottom: 45px;
   }

   .landing-logo {
      margin-top: -10px;
      height: 90px;
   }

   .grid li {
      flex-basis: 100%;
   }

   .social-icon-container {
      width: 100%;
      display: flex;
      justify-content: space-around;
   }

   .contact-content {
      flex-basis: 100%;
   }

   .photo-gallery-image {
      width: 90vw;
      height: 60vw;
      padding: 5px;
   }
}

/* for-phone-only-landscape */
@media (max-width: 599px)
   and (orientation: landscape) {

   h2.landing-content {
      font-size: 1.0em;
   }

   .landing-logo {
      margin-top: -40px;
      margin-bottom: 25px;
      height: 90px;
   }
}

/* for-tablet-portrait-up */
@media (min-width: 600px) {
   h1 {
      font-size: 2em;
   }
}

 /* for-tablet-portait-only */
@media (min-width: 600px) and (max-width: 899px) {
   .service-group {
      flex-basis: 40%;
   }
}

 /* for-tablet-landscape-up */
@media (min-width: 900px) {
   h1 {
      font-size: 3em;
   }
}

 /* for-tablet-landscape-only */
@media (min-width: 900px) and (max-width: 1199px) {

}

 /* for-desktop-up */
@media (min-width: 1200px) {

}

 /* for-desktop-only */
@media (min-width: 1200px) and (max-width: 1799px) {

}

 /* for-big-desktop-up */
@media (min-width: 1800px) {

}