/**
* Initial state, hidden off screen
*/
.clicky-menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  /*[1]*/
}

@media only screen and (max-width: 1089px) {
  .clicky-menu {
    display: none !important;
  }
}

/**
 * No JS fallback
 *
 * Triggers menus on hover rather than click. Supports
 * keyboard navigation in modern browsers.
 */
.clicky-menu.no-js li:hover > ul {
  visibility: visible;
}

.clicky-menu.no-js li:focus-within > ul {
  /*[2]*/
  visibility: visible;
}

/**
 * Open/Close Menu Behavior with JS
 */
.clicky-menu ul[aria-hidden=false] {
  visibility: visible;
}

/* Prevent offscreen-submenus */
.clicky-menu .sub-menu--right {
  left: auto !important;
  right: 0 !important;
}

/* Hidden SVG used for down arrows */
svg[hidden] {
  display: none;
  position: absolute;
}

.site-navigation {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px auto 300px;
  /*background-color: rgba(255, 255, 255, 0.1);*/
  background-color: white;
}

.site-navigation .main-menu {
  width: 45%;
  box-shadow: none;
}

.site-navigation li {
    font-family: 'Roboto', Arial;
    font-weight: 300;
    text-transform: uppercase;
}

.site-navigation li a {
    color: var(--main-color);
}

.clicky-menu {
  justify-content: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 540px) {
  .clicky-menu {
    display: flex;
  }
}

/* General Link & Button Styles */
.clicky-menu a,
.clicky-menu button {
    margin: 0.25em;
    padding: 1em;
    background: transparent;
    color: rgba(255, 255,255, 1);
    text-decoration: none;
    font-family: inherit;
    font-size: 17px !important;
    border-radius: 3px;

}

.clicky-menu a:hover,
.clicky-menu button:hover {
  background: #fff;
}

.clicky-menu a:focus,
.clicky-menu button:focus {
  outline: 0.125em dotted purple;
  outline-offset: -0.125em;
}

/* Top Level Items */
.clicky-menu > li {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: stretch;
  flex-wrap: wrap;
}

.clicky-menu > li > a,
.clicky-menu > li > button {
  flex: 1 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 0;
  font-size: inherit;
  line-height: 1.5;
  cursor: pointer;
}

@media (min-width: 540px) {
  .clicky-menu > li > a,
  .clicky-menu > li > button {
    justify-content: center;
  }
}

/* Icon */
.clicky-menu svg {
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
}

.clicky-menu [aria-expanded=true] svg {
  transform: scaleY(-1);
}

/* Submenu Styles */
.clicky-menu ul {
  min-width: 100%;
  margin-top: 0.25em;
  padding: 0;
  list-style: none;
  background-color: #eee;
  border-radius: 3px;
}

@media (min-width: 540px) {
  .clicky-menu {
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
  }
}

/* Responsive Submenu Behavior */
.clicky-menu ul[aria-hidden=false] {
  position: static;
  width: 100%;
  flex: 0 0 auto;
}

@media (min-width: 540px) {
  .clicky-menu ul[aria-hidden=false] {
    position: absolute;
    width: auto;
  }
}

/* Submenu Links */
.clicky-menu ul a {
  color: #666;
  display: block;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
}

@media (min-width: 540px) {
  .clicky-menu ul a {
    padding: 0.375em 1em;
    white-space: nowrap;
  }
}


/* Tours menu
==============================================================================*/

#tours-categories-menu {
  position: absolute;
  background: white;
  width: 65rem;
  top: 0;
  margin: auto;
  left: -50%;
  padding: 3rem 1rem 0 1rem;
  opacity: 0;
  transition: opacity 1s, top 1s;
}

.site-navigation .main-menu:hover #tours-categories-menu {
  opacity: 1;
  top: 7rem;
}

#tours-categories-menu h2 {
  font-size: 1.5rem !important;
  font-weight: 700;
  color: #777;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #777;
}

#tours-categories-menu .categories-wrapper {
  display: flex;
}

#tours-categories-menu .category {
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline:none
}

#tours-categories-menu .category .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 2px solid #d4d2d2;
  cursor: pointer;
}

#tours-categories-menu .category .icon-wrapper:hover img {
  width: 4.5rem;
}

#tours-categories-menu .category img {
  width: 4rem;
  transition: width 200ms;
}

#tours-categories-menu .category span {
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
}

#tours-categories-menu .buttons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 13rem;
}

#tours-categories-menu button {
  display: flex;
  align-items: center;
  border: 2px solid var(--main-color);
  border-radius: 1rem;
  color: var(--main-color);
  height: 3.5rem;
  padding: 0 5rem 0 5rem !important;
  font-size: 1.2rem !important;
}

#tours-categories-menu button:hover {
  background: var(--main-color);
  color: white;
}