body {
        font-family: 'Passion One', sans-serif !important;
      }
      /*nav*/
      nav {
          height: 8vh;
          background: #5c8a02;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 50px;
      }
      .logo {
          margin: auto;
          width: 100%;
      }
      .logo img {
        max-width: 200px;
      }
      @media (min-width: 2560px) {
        .logo img {
          max-width: 300px;
        }
      }
      .social {
        font-size: 24px;
        display: flex;
      }
      @media (max-width: 1024px) {
        nav .social {
          display: none;
        }
        nav {
          justify-content: center;
          height: 10vh;
        }
        .logo {
            margin: auto;
            text-align: center;
        }
        .logo img {
            max-width: 70%;
            padding: 0;
        }
      }

      .social a {
        color: #fff;
        transition: .3s;
        padding: 15px;
      }
      .social a:after {
          background: #fff;
          content: "";
          height: 3px;
          width: 100%;
          transition: .3s;
          display: block;
          margin-top: 5px;
      }
      .social a:hover:after {
        background: #5c8a02;
      }

      .social a:hover {
        color: #000;
        text-decoration: underline;
      }

      .container {
        background: url('../img/Brondo_bg_temp.jpg');
        background-size: cover;
        background-position: top;
        width: 100%;
      }
      .title {
        background: #fff;
        width: 100%;
        text-align: center;
      }
      .title h1 {
        font-weight: 600;
        font-size: 32px;
        text-transform: uppercase;
        margin: 12px 0 8px;
        line-height: 1;
      }
      /*Slider*/
      .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient( to bottom, transparentize(#0E1D33, 0.2) , transparentize(#0E1D33, 0.8) );
      }

      .hero-slider {
        width: 100%;
        height: 92vh;
        overflow: hidden;
      }

      @media (max-width: 1024px) {
        .hero-slider {
          height: 500px;
        }
      } 

      @media (max-width: 767px) {
        .hero-slider {
          height: 300px;
        }
      }

      .carousel-cell {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        position: relative;
      }
      .carousel-cell .slide-content {
        position: relative;
        top: 75%;
        transform: translateY(-50%);
        text-align: center;
      }
            
      .carousel-cell .btn{
        display: inline-block;
        padding: 15px 30px;
        text-transform: uppercase;
        font-family: 'Passion One', sans-serif !important;
        font-size: 2em;
        color: #000;
        background-color: #c4ff51;
        text-decoration: none;
      }
      @media (min-width: 2560px){
        .carousel-cell .btn {
          font-size: 3em;
        }
      }
      @media (max-width: 767px) {
        .carousel-cell .btn {
          padding: 15px;
          font-size: 1.5em;
        }
      }
      .carousel-cell .btn:hover{
        background: #fff;
        color: #000;
        transition: all .2s ease;
      }
      .flickity-button {
          color: #fff;
      }
      .flickity-prev-next-button {
        width: 80px;
        height: 80px;
        background: transparent;
      }  
      .flickity-prev-next-button:hover {
        background: transparent;
      }
          
      .flickity-prev-next-button:hover  .arrow{
        fill: white;
      }
        
      .flickity-page-dots {
        bottom: 30px;
      }
      .flickity-page-dots .dot {
        width: 30px;
        height: 4px;
        opacity: 1;
        background: rgba(255,255,255,0.5);
        border: 0 solid white;
        border-radius: 0;
      }   
      .flickity-page-dots .dot.is-selected{
        background: #5c8a02;
        border: 0 solid #5c8a02; 
      }
      /*Tour Dates*/
      .tour-dates {
        max-width: 1200px;
        margin: 50px auto;
      }
      .bit-widget .bit-rsvp {
          color: #000 !important;
          background: #fff !important;
          border: 0 !important;
          transition: .3s;
      }
      .bit-widget .bit-rsvp:hover {
          color: #000 !important;
          background: #c5ff52 !important;
      }
      .bit-widget .bit-play-my-city-button {
          background-color: #fff !important;
          border: 0 !important;
          color: #000 !important;
          transition: .3s;
      }
      .bit-widget .bit-play-my-city-button:hover {
          background-color: #000 !important;
          color: #fff !important;
      }
      .bit-widget .bit-offers {
          background-color: #c5ff52 !important;
          border: 0 !important;
          color: #000 !important;
          transition: .3s;
      }
      .bit-widget .bit-offers:hover {
          background-color: #000 !important;
          color: #Fff !important;
      }
      .bit-widget .bit-event .bit-event-buttons {
          margin: 10px 0 10px 0;
      }
      /*Footer*/
      footer {
        background: #000;
        color: #6c6c6c;
        padding: 50px;
        display: block;
        width: 100%;
        height: fit-content;
        text-align: center;
      }
      .footer-logo {
          padding-bottom: 20px;
      }
      .footer-container a {
        color: #5c8a02;
      }
      .footer-container a:hover {
        color: #6c6c6c;
      }
      footer .social {
        padding-bottom: 20px;
        text-align: center;
        margin: auto;
        justify-content: center;
      }
      footer .social a {
        color: #fff;
      }
      footer .social a:hover {
        color: #5c8a02;
      }
      footer .social a:after {
          background: #fff;
          content: "";
          height: 3px;
          width: 100%;
          transition: .3s;
          display: block;
          margin-top: 5px;
      }
      footer .social a:hover:after {
        background: #000;
      }
      .footer-logo {
          padding-bottom: 20px;
          margin: auto;
      }
      .footer-logo img {
          max-width: 80%;
      }


      /* --------------------------------
      Masking
      -------------------------------- */
      .slide-content .title, .slide-content .caption, .slide-content .btn {
        position: relative;
      }


      @-webkit-keyframes slide-up {
        0% {
          opacity: 0;
          -webkit-transform: translateY(100%);
        }

        100% {
          opacity: 1;
          -webkit-transform: translateY(0);
        }
      }

      @-moz-keyframes slide-up {
        0% {
          opacity: 0;
          -moz-transform: translateY(100%);
        }

        100% {
          opacity: 1;
          -moz-transform: translateY(0);
        }
      }

      @keyframes slide-up {
        0% {
          opacity: 0;
          transform: translateY(100%);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @-webkit-keyframes slide-down {
        0% {
          opacity: 0;
          -webkit-transform: translateY(-100%);
        }

        100% {
          opacity: 1;
          -webkit-transform: translateY(0);
        }
      }

      @-moz-keyframes slide-down {
        0% {
          opacity: 0;
          -moz-transform: translateY(-100%);
        }

        100% {
          opacity: 1;
          -moz-transform: translateY(0);
        }
      }

      @keyframes slide-down {
        0% {
          opacity: 0;
          transform: translateY(-100%);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @-webkit-keyframes divider-mask {
        0%,
        100% {
          transform: scaleX(0);
        }

        40%,
        60% {
          -webkit-transform: scaleX(1);
        }
      }

      @-moz-keyframes divider-mask {
        0%,
        100% {
          transform: scaleX(0);
        }

        40%,
        60% {
          -moz-transform: scaleX(1);
        }
      }

      @keyframes divider-mask {
        0%,
        100% {
          transform: scaleX(0);
        }

        40%,
        60% {
          transform: scaleX(1);
        }
      }