/*
To make it easier to use all variables and mixins in any Sass file in this
theme, each .scss file has a @import "base" declaration. And this _base.scss
file is in charge of importing all the other partials needed for the theme.
*/
/* COLORS
=========================== */
/* dark grey menu blocks */
/* Green */
/* Purple */
/* Light green */
/* Magenta */
/* Cyan */
/* Red */
/* Yellow */
/* Slighty darker */
/* Slighty darker */
/* Messages colors */
/* SIZES & UNITS
=========================== */
/* MIXINS
=========================== */
/* FONTS
=========================== */
/* MARGINS & SPACING
=========================== */
/* BREAKPOINTS
=========================== */
/*  Use as following:
    @include mq($narrow,$wide) {
      font-size: xx;
    }
*/
/* IE SUPPORT
=========================== */
/*
These variables are used by many mixins to add additional CSS to support
specific versions of IE or specific vendor prefixes.

To turn on support for IE6 or IE7, set those variables to true.

Zen does not require special handling for IE8 or later. But Compass uses that
variable for a couple edge cases. We include it for completeness sake. See
the documentation at http://compass-style.org/reference/compass/support/
*/
/* IMPORTS
=========================== */
/*@import "zen";              // Add the Zen Grids responsive layout mixins.*/
/*@import "compass/utilities/general/clearfix"; // Better than Drupal's clearfix.*/
/*@import "compass/utilities/sprites"; // See http://compass-style.org/help/tutorials/spriting/ */
/*@import "compass/typography/vertical_rhythm"; // Helps set up a vertical rhythm. */
/*@import "toolkit/pe"; */
/*@import "custom";           // Import our custom mixins last. */
header#header nav#main-menu {
  display: none;
}

#mm-main-menu:not(.mm-menu) {
  display: none;
}

.mm-menu.mm-bracke .mm-list {
  padding: 1.2em 0 0;
}
@media screen and (min-width: 1099px) {
  .mm-menu.mm-bracke .mm-list {
    padding-top: 1.2em;
  }
}
@media screen and (max-width: 750px) {
  .mm-menu.mm-bracke .mm-list {
    padding-top: 2em;
  }
}
.mm-menu.mm-bracke .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) > a:not(.mm-subopen),
.mm-menu.mm-bracke .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) > span {
  padding: 12px 10px 12px 20px;
}
.mm-menu.mm-bracke .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  width: auto;
  margin-left: 0;
  position: relative;
  left: auto;
}
.mm-menu.mm-bracke .mm-list > li.mm-subtitle {
  margin-bottom: 2em;
  border: 0;
}
.mm-menu.mm-bracke .mm-list > li > a.-first-level {
  font-weight: bold;
  font-style: italic;
  font-family: "Bitter", serif;
  /* Rem font sizing with pixel fallback */
  font-size: 18px;
  line-height: 1.3;
  font-size: 1.8rem;
  line-height: 2.34rem;
}
.mm-menu.mm-bracke .mm-list > li > a.mm-subopen:hover {
  background: rgba(255, 255, 255, 0.05);
}
.mm-menu.mm-bracke .mm-list > li > a.mm-subopen:before {
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}
.mm-menu.mm-bracke .mm-list > li > a.mm-subclose {
  background: none;
  font-style: italic;
  font-family: "Bitter", serif;
  /* Rem font sizing with pixel fallback */
  font-size: 18px;
  line-height: 1.3;
  font-size: 1.8rem;
  line-height: 2.34rem;
}
.mm-menu.mm-bracke .mm-list > li a[href^="/tyck-till"] {
  /* Tyck till */
}
.mm-menu.mm-bracke .mm-list > li a[href^="/tyck-till"]:after {
  content: '\00A0';
  background: url(../../images/icon-tycktill.svg) no-repeat center center;
  background-size: 90%;
  display: inline-block;
  width: 20px;
  height: 17px;
  margin-left: 8px;
}
.mm-menu.mm-bracke .mm-list > li a[href^="/tyck-till"]:hover:after {
  background-size: 100%;
}
.mm-menu.mm-bracke .mm-list#mm-0 li.first {
  padding-top: 43px;
}
.mm-menu.mm-bracke .mm-list#mm-0 li.first > a {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mm-menu.mm-bracke a {
  -moz-transition: background 0.1s ease-in-out;
  -o-transition: background 0.1s ease-in-out;
  -webkit-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out;
}
.mm-menu.mm-bracke a:hover, .mm-menu.mm-bracke a:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.03);
}

.mm-menu-label {
  font-weight: bold;
  position: absolute;
  top: 0.4em;
  right: -44px;
}
@media screen and (max-width: 600px) {
  .mm-menu-label {
    display: none;
  }
}
html.mm-opening .mm-menu-label {
  display: none;
}
#hamburger:hover .mm-menu-label, #hamburger:focus .mm-menu-label, #hamburger:active .mm-menu-label {
  text-decoration: underline;
}