*{
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto Slab', serif;
  /*font-family: 'Nanum Pen Script', cursive;*/
  /*font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;*/
  font-size:16px;
  background-color: #FFF;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /*background-size: 40px 40px;
  background-attachment: fixed;
  background-image:
    linear-gradient(to right, rgb(220, 220, 220) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(220, 220, 220) 1px, transparent 1px);
  */
  display: flex;
  flex-direction: column;
}


@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}

@font-face {
  font-family: webLogoFont;
  src: url("/fonts/nonstop.italic.ttf");
}

.container{
  margin-top: 30px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  min-height: 100%;
  flex: 1 0 auto;
}

/*=================================================*/
/*             NAVIGATION BAR / HEADER             */
/*=================================================*/
/* Add a background color to the top navigation */
header {
  display: block;
  align-items: center;
  /*background-color: #ffb452;*/
  width: 100%;
  height: 125px;
}

.topnav {
  /*background-color: white;*/
  /*background-color: #ffb452;*/
  /*min-width: 400px;*/
  overflow: hidden;
  /*position: fixed;*/
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 125px;
  transition: all ease 0.3s;
  z-index: 990;
  max-width: 1024px;
  left: 50%;
  transform: translateX(-50%);
}

/* Style the links inside the navigation bar */
.topnav a {
  margin-top: auto;
  float: left;
  display: block;
  color: black;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 20px 16px;
  font-size: 18px;
  height: 125px;
  transition: all ease 0.3s;
}

.topnav span{
  float: right;
  transition: all 0.3s;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #E76D6B;
  color: #FFF;
  text-decoration: dotted underline rgb(255, 255, 255);
}

.topnav > .websiteLogo {
  padding-top: 12px;
  font-family: webLogoFont;
  font-size: 20px;
  height: 125px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 983px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav span {display: none;}
  .topnav .iconWrapper {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-right: 30px;
  }
  .topnav a.icon {
    float: right;
    display: block;
    padding-top: 50px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 983px) {

  .topnav.responsive {position: relative;width: 100%;box-sizing: border-box;height:auto;min-height: 250px;transition: all 0.3s;}
  .topnav.responsive a.icon {
    position: absolute;
    background-color: black;
    right: 0;
    top: 0;
  }
  .topnav.responsive span {display:block;float: right;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    /*background-color: white;*/
    padding: 10px 14px;
    transition: all ease 0.3s;
  }
}


/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(255,255,255); /* Black fallback color */
  background-color: rgba(255,255,255, 0.95); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  color: black;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: white;
  background-color: #cc5d5b;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}



/*=================================================*/
/*=================================================*/
/*=================================================*/

.content {
  /*background-color: #FFF;*/
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
  text-align: center;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
}

p {
  color: #555;
  margin: 10px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

p .terms {
  text-align: left;
}

.homePage {
  /*margin-right: auto;
  margin-left: 0px;*/
  text-align: justify;
}

.largeImage {
  width: 100%;
  max-width: 1000px;
  min-width: 320px;
}

.smallImage {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
}

.frontPageLogo {
  width: 40%;
  max-width: 600px;
  min-width: 300px;
}

/*=================================================*/
/*                  TITLE STYLES                   */
/*=================================================*/

h1 {
  font-size: 18px;
  color: #73ABA5;
  padding: 10px;
  margin-bottom: 60px;
  border: 2px solid #73ABA5;
  /*box-shadow: 10px 10px 0px 0px rgba(182,70,0,0.8);*/
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  transition: 0.3s;
  cursor: default;
}

h1:hover {
  color: #fff;
  background-color: #73ABA5;
  cursor: default;
}

h2 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #73ABA5;
}

h2.emphasis {
  margin-bottom: 0px;
  font-size: 20px;
  font-weight: 800;
  /*text-decoration: underline;
  text-decoration-style: double;
  text-underline-offset: 15px;*/
}

.dashedTitle h2 {
  text-align:center;
  font-weight: 600;
  font-size:20px; letter-spacing:1px;
  display: grid;
  /*grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;*/
}

/*.dashedTitle h2:after,.dashedTitle h2:before {
  content: " ";
  display: block;
  border-bottom: 2px solid #ccc;
  background-color:#fff;
}*/

h3 {
  font-size: 18px;
  text-decoration: underline;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid lightgrey;
}


/*=================================================*/
/*                  BUTTON STYLES                  */
/*=================================================*/

.button--active {
  background-color: darkmagenta;
  color: white;
  padding: 10px;
  border: 2px solid darkmagenta;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  margin: 0px 10px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button--active:hover {
  background-color: white;
  color: darkmagenta;
  text-decoration: underline;
}

.button {
  font-family: 'Roboto Slab', serif;
  min-width: 150px;
  padding: 14px;
  background-color: #cc5d5b;
  border: 3px solid #cc5d5b;
  color: white;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.button:hover {
  background-color: white;
  color: #cc5d5b;
  border-color: white;
  transition: all ease 0.3s;
}

/*=================================================*/
/*                      FOOTER                     */
/*=================================================*/
.footer {
  /*background-color: #ffb452;*/
  color: black;
  font-size: 12px;
  padding: 40px;
  width: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  /*max-height: 150px;*/
  margin-top: auto;
  flex-shrink: 0;
}

.footer, .push {
  height: 150px;
}

.footer > .footer-image {
  display: block;
  top:0;
  margin-top: -100px;
  margin-left: auto;
  margin-right: auto;
}


/*=================================================*/
/*=================================================*/
/*=================================================*/



/* ==================================================
                    CONTACT FORM
====================================================*/

form { max-width:420px; margin:50px auto; }

.feedback-input {
  color:black;
  /*font-family: Helvetica, Arial, sans-serif;*/
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid black;
  transition: all 0.3s;
  padding: 10px;
  margin-bottom: 30px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid rgb(48, 0, 48);background-color: lightyellow; }

legend, fieldset {
  border: none;
  font-weight: 200;
  display: block;
  text-align: left;
}

fieldset {
  margin-bottom: 25px;
}

selectGender > label, input[type="radio"] {
  font-weight: 200;
}

input[type="radio"] {
  margin-right: 15px;
}

input[type="submit"] {
  font-family: 'Roboto Slab', serif;
  min-width: 150px;
  padding: 14px;
  background-color: #cc5d5b;
  border: 3px solid #cc5d5b;
  color: white;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.input[type="submit"]:hover {
  background-color: white;
  color: #cc5d5b;
  border-color: white;
  transition: all ease 0.3s;
}

label {
  color: black;
  font-weight: 500;
  display: block;
  text-align: left;
  margin-bottom: 5px;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  /*font-family: 'Montserrat', Arial, Helvetica, sans-serif;*/
  max-width: 100%;
  cursor:pointer;
  color:black;
  padding-top:10px;
  padding-bottom:10px;
  font-weight:700;
}

form > #package {
  margin-bottom: 5px;
}

form > .formCaption {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #73ABA5;
}

/*==================================*/
/*==================================*/
/*==================================*/

/* ==================================================
                    TOUR PACKAGES
====================================================*/
.scrolling-wrapper {
  width: 100%;
  display: inline-block;
  align-items: center;
  text-align: center;
  min-height: 400px;

  .card {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 260px;
    max-width: 800px;
    padding: 20px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    text-align: left;
    /*background-color: rgba(255, 255, 150, 0.8);*/
    background-color: #ebcccc;
    box-shadow: 5px 10px 8px #888888;
    transition: all ease 0.3s;
    white-space: normal;
    box-sizing: border-box;
    border-radius: 15px;
  }

  .card:hover {
    background-color: #e6a9a8;
  }

  @media screen and (max-width:600px) {
    .card {
      flex-wrap: wrap;
      align-items: center;
    }
    .cardImage {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      flex: 100%;
      align-content: center;
    }
  }

  .cardImage {
    flex: 30%;
    margin-top: auto;
    margin-bottom: auto;
    align-content: center;
  }

  .cardImage > img {
    margin-left: auto;
    margin-right: auto;
  }

  .textBlock {
    flex: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    padding: 10px;
  }

  .card > .textBlock > h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #cc5d5b;
    font-weight: bold;
    text-decoration: none;
  }

  .card > .textBlock > span {
    font-size: 0.8rem;
    margin-bottom: 12px;
    font-style: italic;
  }

  .card > .moreInfo {
    flex: 100%;
  }

  .tourDescription {
    font-size: 1.0rem;
  }

  .tourPrice {
    display: inline-block;
    min-width: 150px;
    border: darkorange;
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    background-color: #cc5d5b;
    color: white;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all ease 0.3s;
  }

  .tourPrice:hover {
    background-color: white;
    color: #cc5d5b;
  }

  .tourDescription > ul {
    list-style-type: none;
  }


}

.modal-button {
  margin-right: auto;
  font-family: 'Roboto Slab', serif;
  min-width: 150px;
  padding: 14px;
  background-color: #cc5d5b;
  border: 3px solid #cc5d5b;
  color: white;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.modal-button:hover {
  background-color: white;
  color: #cc5d5b;
  border-color: white;
  transition: all ease 0.3s;
}

      /* =============================================
                          MODAL BOXES
      ==============================================*/
        /* The Modal (background) */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 999; /* Sit on top */
          padding-top: 50px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
          min-height: 500px;
        }

        /* Modal Content */
        .modal-content {
          position: relative;
          background-color: #fefefe;
          margin: auto;
          padding: 0;
          border: 1px solid #888;
          width: 700px;
          height: 90%;
          max-width: 100%;
          max-height: 100%;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
          -webkit-animation-name: animatetop;
          -webkit-animation-duration: 0.4s;
          animation-name: animatetop;
          animation-duration: 0.4s;
          min-height: 500px;
          z-index: 999;
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
          from {top:-300px; opacity:0}
          to {top:0; opacity:1}
        }

        @keyframes animatetop {
          from {top:-300px; opacity:0}
          to {top:0; opacity:1}
        }

        /* The Close Button */
        .close {
          color: red;
          float: right;
          font-size: 40px;
          font-weight: bold;
        }

        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }

        .row > .column {
          padding: 0 8px;
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
        
        /* Create four equal columns that floats next to eachother */
        .column {
          float: left;
          width: 25%;
        }

        .modal-header {
          padding: 2px 16px;
          margin-top: 5px;
          background-color: white;
          color: red;
        }

        .modal-body {
          padding: 2px 16px;
          overflow-y: scroll;
          font-size: 0.8rem;
          min-height: 200px;
          height: 85%;
          margin-bottom: 40px;
          margin-top: 20px;
          margin-left: 20px;
          max-width: 90%;
        }

        .modal-footer {
          padding: 2px 16px;
          background-color: white;
          color: red;
          position: absolute;
          bottom: 0;
          right: 0;
        }

        
        @media screen and (max-width: 500px) {
          .modal-content {
            max-width: 90%;
          }
          .modal-body {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
          }
        }

        /* Hide the slides by default */
        .mySlides {
          display: none;
        }

        /* Next & previous buttons */
        .prev,
        .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -50px;
          color: white;
          font-weight: bold;
          font-size: 20px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
          -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }

        /* Number text (1/3 etc) */
        .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }

        /* Caption text */
        .caption-container {
          text-align: center;
          background-color: black;
          padding: 2px 16px;
          color: white;
        }

        img.demo {
          opacity: 0.6;
        }

        .active,
        .demo:hover {
          opacity: 1;
        }

        img.hover-shadow {
          transition: 0.3s;
        }

        .hover-shadow:hover {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

/* ==================================================
                    REVIEWS
====================================================*/
.reviews{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.reviewContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.reviewBox {
  width: 500px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  background-color: #ebcccc;
  padding: 20px;
  margin: 15px;
  cursor: pointer;
  transition: all ease 0.3s;
  min-height: 200px;
}

.profiles--img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.profiles--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profiles{
  display: flex;
  align-items: center;
}

.profiles--name {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.profiles--name strong {
  color: #cc5d5b;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.profiles--name span {
  color: #979797;
  font-size: 1.0rem;
}

.profiles--title {
  display: block;
  color: #cc5d5b;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}

.reviewBox-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.review-text p {
  font-size: 1.0rem;
  color: #4b4b4b;
  text-align: justify;
}

.reviewBox:hover {
  transform: translateY(-10px);
  transition: all ease 0.3s;
}

@media(max-width:1060px){
  .reviewBox{
    width: 45%;
    padding: 10px;
  }
}
@media(max-width:790px){
  .reviewBox{
    width: 100%;
  }
}


/* ==================================================
                    YOUTUBE
====================================================*/

.youtubeVideo{
  width: 853px;
  height: 505px;
}

.smallYoutubeVideo{
  width: 80%;
  max-width: 350px;
  min-height: 200px;
}

@media(max-width:900px){
  .youtubeVideo{
    width: 640px;
    height: 385px;
  }
}

@media(max-width:700px){
  .youtubeVideo{
    width: 560px;
    height: 340px;
  }
}

@media(max-width:600px){
  .youtubeVideo{
    width: 400px;
    height: 250px;
  }
}

@media(max-width:500px){
  .youtubeVideo{
    width: 360px;
    height: 225px;
  }
}

@media(max-width:400px){
  .youtubeVideo{
    width: 340px;
    height: 210px;
  }
}

@media(max-width:360px){
  .youtubeVideo{
    width: 280px;
    height: 175px;
  }
}

@media(max-width:320px){
  .youtubeVideo{
    width: 280px;
    height: 175px;
  }
}


/* ==================================================
                    GALLERY
====================================================*/

div.gallery {
  margin: 5px;
  border: 1px solid #cc5d5b;
  border-radius: 15px;
  display:inline-block;
  width: 200px;
  height: 350px;
  overflow: hidden;
  background-color: #ebcccc;
}

div.gallery:hover {
  border: 1px solid #cc5d5b;
}

div.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

div.gallery > div.desc {
  padding: 15px;
  text-align: center;
}

/* ==================================================
                    ABOUT
====================================================*/

div.galleryAbout {
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 15px;
  display:inline-block;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

div.galleryAbout:hover {
  border: 1px solid #777;
}

div.galleryAbout img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

div.galleryAbout > div.desc {
  padding: 15px;
  text-align: center;
}

/* ==================================================
                    PAST TOURS
====================================================*/

.pastTours {
  width: 90%;
  min-width: 300px;
  display: grid;
  grid-template-columns: 330px auto;
  background-color: #ebcccc;
  border: 2px dashed #cc5d5b;
  padding: 10px;
  transition: all ease 0.3s;
  min-height: 200px;
  overflow: hidden;
  margin-bottom: 20px;
}

.pastTours > img {
  width: 100%;
  max-width: 280px;
  object-fit: cover;
}

.pastTours > img:hover {
  cursor: pointer;
}

.pastTours > .mainText {
  text-align: justify;
  font-size: 12px;
  width: 100%;
}

.titleText {
  color: #cc5d5b;
  font-size: 16px;
  font-weight: bold;
}

@media(max-width:750px){
  .pastTours{
    grid-template-columns: 330px;
    grid-template-rows: auto auto;
  }
  .pastTours > img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
}



/* ==================================================
                TERMS AND CONDITIONS
====================================================*/

.toc > ul, li {
  color: #555;
  margin: 10px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.toc > ul ul {
  margin-left: 20px;
}