:root {
   --mw-blue: #365f7a;
   --separator: 2px solid #b5b5b5;
}

@font-face {
   font-family: 'Againts';
   src: url('../fonts/againts.otf');
}

.travel,
.accommodation {
   font-size: 16px;
}

.travel p {
   font-size: 1em;
}

.back-to-mw-link {
   position: absolute;
   top: 30px;
   left: 20px;
   color: white;
   height: 0px;
}

.back-to-mw-link:hover {
   color: black;
   text-decoration: none;
}

.back-to-mw-link:focus {
   color: white;
   outline: none;
}

.travel-navbar .nav > li:first-child {
   display: none;
}

.travel-navbar img {
   width: 90px;
   height: 50px;
}

.travel-navbar p {
   font-size: 1em;
   text-align: center;
}

.travel-navbar a {
   padding: 10px 10px !important;
}

.travel-navbar .dropdown > .dropdown-menu {
   width: auto;
   left: unset;
}

.travel-navbar .dropdown > .dropdown-menu > li {
   float: none !important;
   width: 100% !important;
}

.travel-searchbox {
   position: relative;
   border: 5px solid var(--mw-blue);
   padding: 0 10px 0 10px;
}

.travel-searchbox input {
   color: black;
}

.travel-searchbox .awesomplete {
   width: 100%;
}

.travel .intro,
.travel .country-intro {
   position: relative;
   text-align: center;
   color: white;
   width: 100%;
   height: 400px;
   overflow: hidden;
}

.travel .intro > img,
.country-intro > img {
   min-width: 101%;
   min-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.travel .btn,
.accommodation .btn {
   margin: 10px 0;
   font-weight: bold;
}

.travel .intro-desc {
   position: absolute;
   width: 80%;
   top: 50%;
   left: 10%;
   transform: translate(0, -50%);
}

.travel .intro-desc h1 {
   text-shadow: 2px 2px 8px black;
}

.travel .intro-desc p {
   background-color: #2551778c;
   padding: 10px;
   border-radius: 20px;
   text-shadow: 1px 1px 2px black;
   font-size: 1.3em;
}

.travel .intro-desc .btn {
   text-transform: none;
}

.travel .intro-bottom {
   display: table;
   width: 100%;
   height: 85px;
   background-color: var(--mw-blue);
}

.travel .intro-bottom div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   font-size: 1.5em;
   font-weight: bold;
   color: white;
}

.travel .intro-bottom a {
   font-size: 1em;
   margin-top: 5px;
}

.travel .intro-bottom .btn {
   color: white;
   background-color: var(--mw-blue);
   box-shadow: 2px 2px 15px 5px #172e50;
   border: 4px solid #3e6e96;
}

.travel .intro-bottom .btn:hover,
.travel .intro-bottom .btn:focus,
.travel .intro-bottom .btn:active {
   background-color: #3e6e96;
}

.travel h1 {
   font-size: 3em;
   font-weight: bold;
}

.travel h2 {
   font-size: 3em;
   font-weight: bold;
   text-align: center;
   margin-top: 20px;
   color: var(--mw-blue);
}

.travel h3 {
   font-size: 2em;
   font-weight: bold;
   color: var(--mw-blue);
   text-align: center;
}

.travel h4 {
   font-size: 1.5em;
   font-weight: bold;
   color: var(--mw-blue);
   text-align: center;
}

.travel hr {
   width: 40px;
   margin-left: auto;
   margin-right: auto;
   color: var(--mw-blue);
   border-top: 6px solid var(--mw-blue);
}

.travel .country-header {
   position: absolute;
   height: 100%;
   width: 80%;
   top: 15%;
   left: 10%;
   text-shadow: 2px 2px 8px black;
}

.travel .country-header img {
   min-width: 0;
   min-height: 0;
   height: 200px;
}

.travel .container {
   padding-bottom: 20px;
}

.travel-list {
   overflow: hidden;
   display:flex;
   flex-wrap: wrap;
   margin: 0 -5px;
}

.travel-list.box-shadow > li {
   border: none;
}

.travel-list.box-shadow .travel-list-item {
   box-shadow: 0 0 10px rgb(0 0 0 / 10%);
   border: solid 1px rgba(0, 0, 0, 0.1);
}

.travel-list .anchor {
   padding-top: 10px;
}

.travel-list > li {
   display: flex;
   flex-direction: column;
   width: 30.3333%;
   float: left;
   text-align: center;
   list-style: none;
   padding: 20px 0 10px;
   margin: 0 1.5% 0% 1.5%;
   border-bottom: var(--separator);
}

/* if only 1 element */
.travel-list > li:only-child {
   width: 40%;
   margin-left: 30%;
}

/* if only 2 or 4 elements */
.travel-list > li:first-child:nth-last-child(2),
.travel-list > li:first-child:nth-last-child(4),
.travel-list > li:nth-child(3):nth-last-child(2) {
   margin-left: 18.5%;
}

.travel-list.full-width > li:nth-child(1):nth-last-child(2),
.travel-list.full-width > li:nth-child(1):nth-last-child(4),
.travel-list.full-width > li:nth-child(3):nth-last-child(2) {
   margin: 0 1%;
   width: 48%;
}

.travel-list.full-width > li:nth-child(2):nth-last-child(1),
.travel-list.full-width > li:nth-child(2):nth-last-child(3),
.travel-list.full-width > li:nth-child(4):nth-last-child(1) {
   margin: 0 1%;
   width: 48%;
}


.travel-list-item {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 100%;
   color: black;
   text-align: left;
}

.travel-list-item:hover,
.travel-list-item > a:hover {
   text-decoration: none;
   color: black;
}

.travel-list-item .tour-image {
   display: block;
}

.travel-list-item .details {
   display: flex;
   flex-direction: column;
   padding: 0 5px 5px 5px;
   flex: 1;
}

.box-title,
.travel-list-item .tour-name {
   color: white;
   background-color: var(--mw-blue);
   font-size: 1.4em;
   font-weight: bold;
   line-height: 1.8em;
   text-align: center;
}

.travel-list-item .description {
   flex: 1;
   display: inline-block;
   margin-top: 5px;
}

.travel-list-item .title {
   font-weight: bold;
   font-size: 1.1em;
   color: black;
   margin: 4px 0 0;
}

.package-list .travel-list-item .title {
   flex: 1;
}

.travel-list-item .sale-offer {
   font-weight: bold;
   font-size: 1.1em;
   color: red;
}

.travel-list-item .subtitle {
   font-weight: bold;
}

.travel-list-item .enquire  {
   float: left;
}

.travel-list-item .inclusions-title {
   color: var(--mw-blue);
   margin: 4px 0;
}

.travel-list-item .inclusions {
   flex: 1;
   margin-bottom: 10px;
   list-style: disc;
}

.travel-list-item .inclusions li {
   margin-left: 20px;
}

.travel-list-item .more {
   position: relative;
   margin-top: 5px;
}

.travel-list-item .features .item {
   padding: 10px 0;
}

.travel-list-item .features img {
   width: 40px;
   height: 40px;
}

.travel-list-item .specifications {
   border-top: 2px solid gainsboro;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.travel-list-item .specifications .item {
   padding: 10px;
   text-align: center;
}

.travel-list-item .specifications .item .title {
   color: black !important;
   font-weight: normal;
   font-size: 1em;
}

.travel-list-item .specifications .item .value {
   color: var(--primary-color);
   font-weight: bold;
}

.mountainbike .travel-list-item .details .title {
   color: var(--primary-color);
}

.mountainbike .travel-list-item .description {
   flex: none;
}

.addon-item .content {
   padding: 0 10px 10px;
}

.addon-item .title {
   font-family: 'Againts', sans-serif !important;
   font-size: 3rem;
   padding-left: 10px;
   color: var(--mw-blue);
}

.price-detail {
   color: black;
   text-align: left;
   font-size: 1.1em;
   padding-right: 20px;
}

.price-detail.full-width {
   padding-right: 0px;
}

td.price-detail {
   padding-bottom: 10px;
}

.price-header {
   display: inline-block;
}

.price {
   display: inline-block;
   color: var(--mw-blue);
   font-weight: bold;
   white-space: nowrap;
}

.travel-list-item .more .glyphicon {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
}

.travel-list-item .more-header {
   float: left;
   color: var(--mw-blue);
}

.travel-list-item .glyphicon {
   font-size: 1.3em;
   color: var(--mw-blue);
}

.travel-list-item .btn {
   width: 100%;
   margin: 10px 0;
}

.latest-deals {
   position: relative;
}

.latest-deals .owl-nav button.owl-prev,
.latest-deals .owl-nav button.owl-next {
   height: auto;
   font-size: 110px !important;
   color: var(--mw-blue) !important;
}

.latest-deals .owl-nav button > span {
   top: -13px;
}

.group-tours-list .title {
   color: var(--mw-blue);
}

.travel .hbspt-form {
   padding: 5px;
}

.accommodation {

}

.accommodation .header {
   padding: 10px 0 10px;
   border-bottom: var(--separator);
}

.accommodation .glyphicon {
   color: var(--mw-blue);
}

.accommodation h1 {
   font-size: 2em;
   font-weight: bold;
   color: var(--mw-blue);
}

.accommodation h2 {
   font-size: 1.4em;
   font-weight: bold;
   color: var(--mw-blue);
}

.accommodation .map {
   height: 450px;
}

.accommodation .sidebar .map {
   height: 100%;
}

.accommodation .map iframe {
   width: 100%;
   height: 100%;
}

.accommodation ul {
   list-style-type: disc;
   list-style-position: inside;
}

#accommodation-packages button.owl-prev {
   display: none;
}

.travel .container > .description {
   padding: 10px 0;
}

.destination-group-tours h1 {
   text-align: center;
   margin-top: 10px;
   text-transform: uppercase;
   color: var(--mw-blue);
}

.destination-group-tours .about-item {
   padding-bottom: 20px;
}

.destination-group-tours .about-item ul {
   list-style: disc;
   margin-left: 20px;
}

.destination-group-tours .with {
   text-align: center;
   font-size: 16px;
   margin-bottom: 20px;
}

.destination-group-tours .with .guide-name {
   color: var(--mw-blue);
   font-size: 35px;
   font-weight: bold;
   letter-spacing: 1px;
}

.destination-group-tours .price-box {
   border: 1px solid var(--mw-blue);
   color: var(--mw-blue);
   text-align: center;
   padding: 10px;
   margin: 10px 0;
}

.destination-group-tours .price-box .price {
   font-weight: bold;
}

.destination-group-tours .buttons {
   display: flex;
   justify-content: space-between;
}

.destination-group-tours .buttons a {
   width: 45% !important;
}

.testimonial-item {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 10px;
   background-color: aliceblue;
}

.testimonial-item .testimonial {
   padding: 5px 0;
}

.testimonial-item .name {
   font-weight: bold;
   text-align: center;
}

.testimonial-item .tour {
   display: block;
   color: var(--mw-blue);
}

.circle-img {
   width: 140px;
   height: 140px;
   border-radius: 70px;
   border: 2px solid var(--mw-blue);
   position: relative;
   overflow: hidden;
}

.circle-img img {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 130px !important;
   height: 130px !important;
   border-radius: 65px;
}

#accommodation-packages .owl-stage {
   margin-left: 2px;
}

#accommodation-packages .owl-item:hover {
   margin: 10px;
}

.accommodation-package {
   padding: 5px 10px;
}

.accommodation-package .btn {
   margin: 10px 0;
   width: 100%;
}

.other-accommodation .owl-nav button {
   top: -10% !important;
}

.trails-section img {
   width: 100%;
}

.green-color {
   color: #4b9d4b !important;
}

.travel .title-section.tabs {
   padding-bottom: 20px;
}

.travel .resp-tabs-container {
   padding-top: 20px;
}

.travel ul.resp-tabs-list li,
.travel ul.resp-tabs-list li.resp-tab-active,
.travel ul.resp-tabs-list li:hover {
   border-radius: 20px;
   width: auto;
   padding: 10px 20px !important;
}

.travel ul.resp-tabs-list li a {
   line-height: normal;
   font-size: 1rem;
}

.travel .tabs h2 {
   border-bottom: none;
}

.accommodation-options .collapsable .collapse {
   transition: max-height .5s;
}

.accommodation-options .collapsable .collapse-item.opened .collapse {
   max-height: 50vh;
   overflow: scroll;
   
}

.mountainbike-video-ratio {
   padding-top: min(38.2%, 65vh);
}

.mountainbike-video-ratio > .content {
   transform: none;
}

.full-width-sixteen-nine {
   position: relative;
   overflow: hidden;
}

.full-width-sixteen-nine .dummy {
   height: calc(100vw * .5625);
}

.full-width-sixteen-nine > *:not(.dummy) {
   height: calc(100vw * .5625);
   width: 100vw;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
}

.full-width-sixteen-nine.max-height-70 {
   max-height: 70vh;
}

.background-img {
   position: relative;
}

.background-img > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
   position: absolute;
}

.mountainbike .hero-header .title {
   font-family: 'Againts', sans-serif !important;
   font-size: 6rem;
}

.mountainbike-tab {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.mountainbike-tab > div {
   width: 50%;
   padding: 10px;
}

.mountainbike-tab .details {
   display: flex;
   flex-wrap: wrap;
   padding-bottom: 20px;
}

.mountainbike-tab .details .item {
   padding: 5px max(2.5vw, 15px);
}

.mountainbike-tab .details .item:not(:first-child):not(:last-child) {
   border: 2px solid black;
}

.mountainbike-tab .details .item:first-child {
   border-top: 2px solid black;
   border-bottom: 2px solid black;
}

.mountainbike-tab .details .item:last-child {
   border-top: 2px solid black;
   border-bottom: 2px solid black;
}

.mountainbike-tab .details .value {
   color: var(--mw-blue);
   font-size: 1.2rem;
   font-weight: bold;
   padding-bottom: 5px;
}

.mountainbike-tab .details .title {
   font-weight: 600;
}

.mountainbike-tab .features .item {
   padding: 10px;
}

.mountainbike-tab .features img {
   width: 40px;
   height: 40px;
}

.mountainbike-tab .features .text {
   font-weight: 600;
}

.mountainbike .carousel-gallery .owl-dots {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   color: white;
}

#packages {
   padding: 20px 0 10px;
}

#packages .resp-tabs-container {
   background: transparent;
}

@media only screen and (min-width: 1201px) {
   .travel-navbar > .container {
      display: flex;
      flex-direction: row;
   }

   .travel-searchbox {
      display: inline-block;
      flex: 1;
      margin-left: 10px;
      height: 60px;
      margin-top: 15px;
   }
}

@media only screen and (max-width: 1200px) {
   .travel-navbar {
      border: 0;
   }

   .travel-list-item .sale-offer {
      display: block;
   }
}

@media only screen and (max-width: 1024px) {
   .back-to-mw-link {
      display: none;
   }

   .travel-navbar .nav > li:first-child {
      display: block;
   }

   .travel-navbar .navbar-collapse.collapse.in {
      min-height: auto !important;
      height: auto !important;
   }
   .travel-navbar img {
      display: none;
   }

   .travel-navbar p {
      text-align: left;
   }
   
   .mountainbike .hero-header .title {
      font-size: 4rem;
   }
}

@media only screen and (min-width: 992px) {
   .travel-list-item .specifications .item:nth-child(2) {
      border-left: 2px solid gainsboro;
      border-right: 2px solid gainsboro;
   }
}

@media only screen and (max-width: 767px) {
   .travel,
   .accommodation {
      font-size: 14px;
   }

   .travel .intro {
      height: 300px;
   }

   .travel .country-intro {
      height: 100px;
   }

   .travel .country-header {
      top: 0;
   }

   .travel .country-header > * {
      top: 50%;
      transform: translate(0, -50%);
   }

   .travel .country-header img {
      height: 80px;
   }

   .travel h1 {
      font-size: 2em;
      font-weight: bold;
   }

   .travel h2 {
      font-size: 2em;
   }

   .destination .intro-desc {
      top: 55%;
   }

   .destination .intro-desc a {
      display: block;
      margin: 0 auto 20px;
      width: 220px;
   }

   .travel .intro-desc p {
      font-size: 1.1em;
   }

   .travel-list > li {
      width: 47% !important;
      margin: 0 1.5% !important;
   }

   .travel-list > li:only-child,
   .travel-list.group-tours-list > li {
      width: 97% !important;
      margin: 0 1.5% !important;
   }

   .travel .container {
      padding: 0 15px 10px;
   }

   .travel .intro-bottom div {
      font-size: 1.1em;
   }

   .travel .intro-bottom .enquiry-header {
      display: block;
   }

   .box-title,
   .travel-list-item .tour-name {
      font-size: 1.2em;
      padding: 1px 0;
   }

   .testimonial-item .tour {
      display: inline-block;
   }

   .accommodation .sidebar .enquire-sidebar {
      display: flex;
      flex-direction: column;
   }

   .accommodation .sidebar .enquire-sidebar .enquiry-form {
      order: 2;
   }

   .accommodation .sidebar .map {
      height: 450px;
   }
   
   .destination-group-tours .with .guide-name {
      font-size: 30px;
   }
   
   .mountainbike-tab > div {
      width: 100%;
      padding: 10px 0;
   }
}

@media only screen and (max-width: 639px) {

}

@media only screen and (max-width: 599px) {
}

@media only screen and (max-width: 479px) {
   .mountainbike .hero-header .title {
      font-size: 3rem;
   }
   
   .travel-list.mobile-big {
      margin: 0;
   }
   
   .travel-list.mobile-big > li {
      width: 100% !important;
      margin: 0 !important;
   }
}
