#blogPost .copy-container img {
  width: 100% !important
}
@media(max-width:1080px)and (hover:none) {
  .menu-bar > li > [aria-haspopup=true]:hover ~ ul, .menu-bar > li > [aria-haspopup=true] ~ ul:hover, .mobile-menu-trigger:hover ~ ul {
    left: 0
  }
  .menu-bar > li > [aria-haspopup=true] ~ ul [aria-haspopup=true]:hover ~ ul {
    max-height: 50rem;
    -webkit-animation: dropdown .3s forwards;
    animation: dropdown .3s forwards
  }
  .menu-bar > li > [aria-haspopup=true] ~ ul [aria-haspopup=true] ~ ul:hover {
    max-height: 50rem;
    transform: scaleY(1)
  }
  .menu-bar > li:hover ~ .mobile-menu-header a {
    visibility: hidden
  }
}
@keyframes dropdown {
  0% {
    opacity: 0;
    transform: scaleY(0)
  }
  50% {
    opacity: 1
  }
  to {
    transform: scaleY(1)
  }
}
.header-banner {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: 50%
}
.header-banner video {
  z-index: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  min-height: 100%;
  background-color: #8f6fb1;
  -o-object-fit: cover;
  object-fit: cover
}
.header-banner i.o2a {
  font-size: 10rem;
  margin-bottom: 2rem
}
@media screen and (min-width:768px) {
  .header-banner i.o2a {
    font-size: 20rem
  }
}
.header-banner .banner-header {
  margin-bottom: 3rem;
  color: #fff
}
.header-banner p {
  margin-bottom: 6rem;
  color: #fff;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem
}
@media screen and (min-width:768px) {
  .header-banner p {
    font-size: 1.6rem;
    line-height: 2rem
  }
}
.header-banner h1 + p {
  line-height: 2.3rem
}
@media screen and (min-width:768px) {
  .header-banner h1 + p {
    max-width: 73rem;
    margin: 0 auto 6rem
  }
}
.header-banner .overlay {
  padding: 0 2rem
}
.header-banner .blog-category {
  letter-spacing: 7px;
  font-weight: 600
}
@media screen and (max-width:768px) {
  .header-banner .btn {
    min-width: 24rem;
    padding: 2rem 6rem;
    font-weight: 500;
    font-size: 1.3rem
  }
}
.overlay {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, .4);
  height: 100%
}
@keyframes float {
  0% {
    transform: translateY(0) translateX(-50%)
  }
  50% {
    transform: translateY(-20px) translateX(-50%)
  }
  to {
    transform: translateY(0) translateX(-50%)
  }
}
.banner-header .overlay {
  border: 0 !important
}
.listing {
  position: absolute;
  background: rgba(26, 26, 26, .7)
}
.destinations {
  position: relative;
  background-color: #2c2c2c
}
.blog-header {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  background: rgba(26, 26, 26, .7)
}
.blog-header ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}
@media screen and (min-width:680px) {
  .blog-header ul {
    flex-wrap: nowrap
  }
}
.blog-header ul li {
  width: 100%;
  padding: 1rem 2rem;
  text-align: center
}
@media screen and (min-width:680px) {
  .blog-header ul li {
    padding-top: 4rem;
    padding-bottom: 2rem
  }
}
.blog-header ul li:first-child {
  position: relative;
  padding-bottom: 0
}
.blog-header ul li:first-child:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 100px;
  background-color: #8f6fb1
}
@media screen and (min-width:680px) {
  .blog-header ul li:first-child:after {
    bottom: 50%;
    left: auto;
    right: 0;
    transform: translateY(80%);
    width: 2px;
    height: 15px;
    background-color: #fff
  }
}
@media screen and (min-width:680px) {
  .blog-header ul li:first-child {
    padding-bottom: 2rem
  }
}
.blog-header ul p {
  margin-bottom: 1rem
}
@media screen and (min-width:680px) {
  .blog-header .author-tab {
    text-align: right;
    padding-right: 2rem
  }
}
@media screen and (min-width:680px) {
  .blog-header .date-tab {
    text-align: left;
    padding-left: 2rem
  }
}
.blog-header .info-blog {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 7px
}
.intro-container {
  position: relative;
  width: 100%
}
.intro-container.light-copy-intro {
  color: #000 !important;
  background: #f3f3f3 !important
}
.contact-bg {
  background: linear-gradient(180deg, #232323 100%, #282828 0)
}
.copy-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  padding: 4rem 3rem
}
@media screen and (min-width:1023px) {
  .copy-container {
    max-width: 45%
  }
}
.copy-container h2:first-child {
  text-align: center
}
.copy-container.blog {
  max-width: 960px !important
}
.header-position {
  bottom: 120px
}
#blogPosts {
  position: relative;
  z-index: 24;
  padding: 6.5rem 0 6.2rem;
  background: linear-gradient(180deg, #232323, #282828);
  text-align: center
}
#blogPosts.blog-home {
  display: none
}
@media screen and (min-width:768px) {
  #blogPosts.blog-home {
    display: block
  }
}
@media screen and (min-width:768px) {
  #blogPosts, #blogPosts .wrapper {
    padding-left: 7rem;
    padding-right: 7rem
  }
}
#blogPosts .latest-posts {
  display: flex;
  flex-direction: column;
  padding-bottom: 4.5rem
}
@media screen and (min-width:768px) {
  #blogPosts .latest-posts {
    flex-direction: row
  }
}
.post {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  height: 30rem;
  display: block;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  transition: all .3s ease-out
}
@media screen and (min-width:768px) {
  .post {
    max-width: 600px;
    min-width: 49%;
    height: auto;
    margin-bottom: 4rem
  }
}
@media screen and (min-width:768px) {
  .post:nth-child(odd) {
    margin-right: 2%
  }
}
.post:hover .image-container {
  transform: scale(1.2)
}
.post .image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #8f6fb1;
  background-position: 50%;
  background-size: cover;
  transition: all .3s ease-out
}
.post .image-container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2)
}
.post .post-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 2rem 3rem;
  background: rgba(255, 102, 153, .9);
  color: #fff;
  text-align: left
}
.post .post-copy .header {
  position: relative;
  top: auto;
  left: auto;
  font-size: 1.2rem;
  line-height: 2.4rem;
  letter-spacing: .15rem
}
@media screen and (min-width:768px) {
  .post .post-copy .header {
    font-size: 1.6rem
  }
}
.post .post-copy p {
  display: flex;
  align-items: center
}
.post .post-copy span + span {
  position: relative;
  padding-left: 2rem
}
.post .post-copy span + span:before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: #fff
}
.blog-home {
  padding: 4rem 0 1rem !important
}
@media screen and (min-width:768px) {
  .blog-home {
    padding: 6.5rem 5rem 1rem !important
  }
}
.blog-home .latest-posts {
  padding-top: 1.5rem;
  padding-bottom: 0 !important
}
hr, hr:after, hr:before {
  border: 1px solid #cacaca !important;
  margin: 2rem 0 !important
}
.center {
  text-align: center
}