@import url("https://use.typekit.net/hhm1gps.css");
body,
html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  font-family: "Museo-Sans", Helvetica, sans-serif;
  margin-bottom: 15px;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

p,
li {
  font-family: "Museo-Sans", Helvetica, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

a:focus {
  outline: none;
}

/* The side navigation menu */
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #fff;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 80px;
  /* Place content 60px from the top */
  transition: 0.3s ease;
  /* 0.5 second transition effect to slide in the sidenav */
  font-family: "Museo-Sans", Helvetica, sans-serif;
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s ease;
  font-weight: 400;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.3s ease;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}
.main {
  width: 100%;
  box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.8);
}
.main header {
  height: 80px;
  border-bottom: 1px solid #3e5261;
  background: #2f2f2f;
  background-size: cover;
  z-index: 999;
  box-sizing: border-box;
}
.main header #logo {
  padding: 0px 15px;
}
.main header #logo img {
  width: 200px;
  max-width: 250px;
}
@media (min-width: 767px) {
  .main header #logo img {
    width: 250px;
  }
}
.main header #logo .nav {
  text-align: right;
}
.main header #logo .nav .collapse-btn {
  color: #bcbcbc;
  font-size: 20px;
  text-align: right;
}
@media (min-width: 992px) {
  .main header #logo .nav .collapse-btn {
    display: none;
  }
}
.main header #logo .nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
@media (min-width: 992px) {
  .main header #logo .nav ul {
    display: block;
  }
}
.main header #logo .nav ul li {
  font-family: "Museo-Sans", Helvetica, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 13px;
  color: #bcbcbc;
  letter-spacing: 1px;
  position: relative;
}
@media (min-width: 767px) {
  .main header #logo .nav ul li {
    padding: 0px 10px;
    font-size: 16px;
    display: inline-block;
  }
}
.main header #logo .nav ul li a {
  color: #bcbcbc;
  text-decoration: none;
  width: 100%;
}
.main header #logo .nav ul li a:hover {
  color: white;
}
.main header #logo .nav ul li a.active {
  color: white;
}
.main header #logo .nav ul li img {
  padding-top: 10px;
  max-width: 100%;
  width: 300px;
}
@media (min-width: 767px) {
  .main header #logo .nav ul li img {
    padding-top: 0px;
  }
}
.main .hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  background: url(../img/newphoto.jpg) no-repeat center center #c8d6d5;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  position: relative;
  border-bottom: 2px solid #c8d6d5;
  min-height: 9vh;
}
@media (min-width: 767px) {
  .main .hero {
    min-height: 85vh;
  }
}
.main .hero:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #fff, #000);
  opacity: 0.2;
}
.main .hero .hero-text {
  text-align: center;
  padding: 30px;
  z-index: 2;
}
@media (min-width: 767px) {
  .main .hero .hero-text {
    padding: 50px;
  }
}
.main .hero .hero-text .new {
  color: #3e5261;
  font-size: 1.4rem;
}
.main .hero .hero-text img {
  max-width: 600px;
  width: 90%;
}
.main .hero .hero-text p {
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.main .hero .hero-text .play-action {
  margin-top: 30px;
}
.main .hero .hero-text .play-action .video-open {
  text-decoration: none;
  color: #3e5261;
  display: block;
  cursor: pointer;
}
.main .hero .hero-text .play-action .video-open p {
  line-height: 1.2;
}
.main .hero .hero-text .play-action .video-open .fa-play-circle {
  font-size: 2rem;
  color: #3e5261;
  padding-top: 10px;
}
.main .hero .hero-text .play-action .video-open:hover p {
  color: #c9714b;
}
.main .hero .hero-text .play-action .video-open:hover .fa-play-circle {
  color: #c9714b;
}
@media (min-width: 767px) {
  .main .hero .link-box {
    margin-bottom: 30px;
  }
}
.main .hero .link-box .box {
  background: RGBA(47, 47, 47, 0.9);
  box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}
@media (min-width: 767px) {
  .main .hero .link-box .box {
    border-radius: 50px;
  }
}
.main .hero .link-box .box ul.link-list li {
  color: #d3d3d3;
  font-weight: 300;
  position: relative;
}
.main .hero .link-box .box ul.link-list li .buy-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s ease;
  cursor: pointer;
  z-index: 9;
}
.main .hero .link-box .box ul.link-list li img {
  max-width: 100px;
  width: 100%;
  margin: 0;
  transition: 0.2s ease;
  cursor: pointer;
  padding: 10px 0;
}
@media (min-width: 767px) {
  .main .hero .link-box .box ul.link-list li img {
    padding: 20px 0px;
  }
}
.main .hero .link-box .box ul.link-list li:hover img {
  transform: translateY(-5px);
}
.main .buy-links .hero-right {
  text-align: center;
  color: white;
  position: relative;
  height: 100px;
}
.main .buy-links .hero-right:first-child {
  background: url(../img/texture1.jpg);
  background-size: cover;
}
.main .buy-links .hero-right:nth-child(2) {
  background: url(../img/texture2.jpg);
  background-size: cover;
}
.main .buy-links .hero-right:nth-child(3) {
  background: url(../img/texture3.jpg);
  background-size: cover;
}
.main .buy-links .hero-right:nth-child(4) {
  background: url(../img/texture4.jpg);
  background-size: cover;
}
.main .buy-links .hero-right:last-child {
  background: url(../img/texture5.jpg);
  background-size: cover;
}
.main .buy-links .hero-right:hover {
  background: #3f5260;
  cursor: pointer;
}
.main .buy-links .hero-right a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.main .buy-links .hero-right a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 150px;
}
.main section.video {
  background: #b55a34;
}
.main section.video h2 {
  padding: 50px 50px;
  color: white;
  text-align: center;
}
.main section.video .item {
  width: 95%;
  background: black;
  border-radius: 7px;
  margin: 0 auto;
}
@media (min-width: 767px) {
  .main section.video .item {
    margin: 0px;
    width: 100%;
  }
}
.main section.video .item .owl-video-wrapper {
  margin-left: auto;
  margin-right: auto;
}
.main section.video .owl-nav {
  text-align: center;
}
.main section.video .owl-nav .owl-prev {
  margin: 10px;
  font-size: 2rem;
  color: #783c25;
  transition: 0.2s ease;
}
.main section.video .owl-nav .owl-prev:hover {
  color: white;
}
.main section.video .owl-nav .owl-prev:focus {
  outline: none;
}
.main section.video .owl-nav .owl-next {
  margin: 10px;
  font-size: 2rem;
  color: #783c25;
  transition: 0.2s ease;
}
.main section.video .owl-nav .owl-next:hover {
  color: white;
}
.main section.video .owl-nav .owl-next:focus {
  outline: none;
}
.main section.tour-dates {
  font-family: "Museo-Sans", Helvetica, sans-serif;
}
.main section.tour-dates .tour-left {
  background: #547881 url(../img/jon.jpg) no-repeat;
  background-size: cover;
  color: white;
  padding: 100px 50px;
  box-sizing: border-box;
  text-align: left;
}
.main section.tour-dates .tour-left p {
  margin-bottom: 15px;
}
.main section.tour-dates .tour-right {
  background: RGBA(215, 210, 195, 1);
  color: white;
  padding: 50px 15px;
}
.main section.tour-dates .tour-right .social-list div > a {
  color: #446776;
  font-size: 3rem;
}
@media (min-width: 767px) {
  .main section.tour-dates .tour-right {
    padding: 100px 50px;
  }
}
.main section.tour-dates .tour-right iframe {
  width: 100%;
  max-width: 100%;
}
.main section.tour-dates .tour-right h2 {
  margin-bottom: 30px;
  text-align: left;
}
.main section.tour-dates .tour-right .bit-widget {
  min-width: 300px;
}
.main section.tour-dates .tour-right .bit-event-list-title {
  display: none;
}
.main section.tour-dates .tour-right .show {
  padding: 0px 30px;
  margin-bottom: 30px;
}
@media (min-width: 767px) {
  .main section.tour-dates .tour-right .show {
    padding: 0px;
  }
}
.main section.tour-dates .tour-right span.month {
  display: block;
  background: #b55a34;
  padding: 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  text-align: center;
  color: white;
}
.main section.tour-dates .tour-right span.day {
  display: block;
  background: white;
  padding: 5px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  color: #b55a34;
  font-size: 1.5rem;
  font-weight: 700;
}
.main section.tour-dates .tour-right .venue-name {
  line-height: 1.5;
  font-size: 1rem;
  text-align: left;
}
@media (min-width: 767px) {
  .main section.tour-dates .tour-right .venue-name {
    font-size: 1rem;
  }
}
.main section.tour-dates .tour-right .tix {
  margin-top: 5px;
  padding-left: 0px;
}
.main section.tour-dates .tour-right .tix a {
  padding-right: 10px;
  color: white;
  font-weight: 300;
}
.main section.photo-spot {
  padding: 30px 0;
  text-align: left;
}
@media (min-width: 767px) {
  .main section.photo-spot {
    padding: 100px 0;
  }
}
.main section.photo-spot img {
  margin-bottom: 30px;
}
.main section.photo-spot p {
  margin-bottom: 20px;
  text-align: left;
  padding: 0px;
  line-height: 1.5;
  font-size: 1rem;
}
@media (min-width: 767px) {
  .main section.photo-spot p {
    padding: 0px 0px;
    font-size: 1.1rem;
  }
}
@media (min-width: 992px) {
  .main section.photo-spot p {
    padding: 0px 50px;
  }
}
.main section.instagram {
  background: #2f2f2f;
}
.main section.instagram .left-side {
  padding: 15px;
}
.main section.instagram .left-side img {
  width: 100%;
}
.main section.instagram .right-side {
  text-align: center;
  color: white;
  padding: 30px 0px 15px 0px;
}
@media (min-width: 767px) {
  .main section.instagram .right-side h2 {
    padding: 30px 0;
  }
}
.main section.instagram .right-side p {
  margin-bottom: 15px;
}

footer {
  background: #3e5261;
  color: white;
  padding: 30px 15px 0px 15px;
  font-family: "Museo-Sans", Helvetica, sans-serif;
  font-weight: 300;
}
@media (min-width: 767px) {
  footer {
    padding: 100px 15px 0px 15px;
  }
}
footer .left-side {
  text-align: center;
}
footer .left-side h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}
@media (min-width: 767px) {
  footer .left-side h3 {
    margin-bottom: 30px;
  }
}
footer .left-side .social-list {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 4px;
  font-size: 1.4rem;
  margin-bottom: 30px;
}
@media (min-width: 767px) {
  footer .left-side .social-list {
    font-size: 2rem;
  }
}
footer .left-side .social-list a {
  color: white;
}
@media (min-width: 767px) {
  footer .left-side .social-list a .fa {
    padding: 15px;
  }
}
footer .right-side {
  text-align: center;
}
footer .right-side h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}
@media (min-width: 767px) {
  footer .right-side h3 {
    margin-bottom: 30px;
  }
}
footer .right-side .contact-item {
  margin-bottom: 30px;
}
footer .right-side .contact-item h4 {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 8px;
}
footer .right-side .contact-item p {
  font-weight: 300;
  font-size: 1.1rem;
}
footer .right-side .contact-item a {
  color: white;
  font-size: 1rem;
}
footer .copyright {
  font-family: "Museo-Sans", Helvetica, sans-serif;
  padding: 50px 0 30px 0;
  font-size: 0.8rem;
  font-weight: 300;
}