// Generic special states that could apply, and media queries
$menu-font-color: $menu-font-color;

.alert {
  color: $forms-error-color;
  font-weight: bold;
}

.hidden {
  display: none !important;
}

.show-flex {
  display: flex !important;
}

// Small screens
@media screen and (max-width: 900px) {
  body {
    margin-bottom: 310px !important;
  }

  //  Topbar
  #topbar {
    height: auto;
    flex-direction: column;
  }

  .topbar-logo img {
    max-height: 48px;
  }

  .topbar-network-logo img {
    max-height: 36px;
  }

  #topbar > * {
    margin: 8px 0;
  }

  #topbar .topbar-title {
    text-align: center;
  }

  // Breadcrumb
  .breadcrumb {
    flex-direction: column;
  }

  //   Content
  .main {
    flex-direction: column;
  }

  .centralcol {
    order: 1;
  }
  .leftcol {
    order: 2;
    min-width: 0;
    width: auto;
    margin: 0 5%;
  }
  .rightcol {
    order: 3;
    min-width: 0;
    width: auto;
    margin: 0 5% 20px 5%;
  }

  iframe {
    width: 60vw;
    height: 34vw;
  }

  // Login form and user-toolbar
  .user-toolbar {
    text-align: center;
  }

  #login-popup {
    @include flex;
    position: static;
    margin-top: 6px;
  }

  #login-popup .popup-form {
    display: none;
    position: static;
    width: 100%;
  }

  #login-popup .show {
    @include flex;
  }

  // Events page
  .ot-all-events {
    flex-direction: column;

  }

  .ot-all-events .event {
    height: auto;
  }

  .ot-all-events .event-preview {
    flex-direction: column;
  }

  .ot-all-events .event-preview .event-poster img {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .ot-all-events .event-preview .event-name {
    text-align: center;
  }

  // Structures page
  .ot-structures {
    flex-direction: column;
  }

  .ot-structures .structure-controls {
    order: 0;
  }

  .ot-structures .structure-results {
    order: 1;
  }

  // Contact form and other forms

  form .row {
    flex-wrap: wrap;
  }

  .contact-form {
    min-width: 200px;
  }


  //   Footer
  #footer {
    height: auto;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
  }

  #footer::after {
    height: 100%;
  }

  .footer-navbar {
    flex-direction: column;
    padding: 0;
  }

  .footer-navbar li {
    margin-bottom: 16px;
  }

  footer .logo-ot {
    margin: auto;
  }

}

// Small screen or devices which do not support hovering
@media screen and (hover: none), screen and (max-width: 900px) {
  //  Menu
  #menu {
    display: none;

    flex-direction: column;
    align-items: center;
  }

  #menu .caret {
    display: none;
  }

  #menu-container .toggle-menu {
    @include flex;
  }

  #menu-container .toggle-dropdown {
    @include flex;
  }

  #menu li {
    margin: 6px 0;
    flex-direction: column;
    width: 80%;
    height: auto;
  }

  #menu li .menu-label {
    @include flex;
    flex-direction: row;
    align-items: center;
  }

  #menu li a {
    flex: 1;
  }

  #menu .dropdown-menu {
    flex-direction: column;
    position: static;
    float: none;
    width: 100%;
    background: transparent;
    box-shadow: none;
    color: $menu-font-color;
    margin-left: 16px;
    border-left: solid 1px $menu-font-color;
  }

  #menu .dropdown-menu li:hover {
    background: transparent;
  }

  #menu .dropdown-menu a {
    color: $menu-font-color;
    height: auto;
    white-space: normal;
    text-align: left;
  }

  #menu .dropdown-menu li:hover a {
    color: $menu-font-color;
  }

  #menu .dropdown.dropdown-displayed a {
    color: $menu-font-color;
  }
}
