/* 
    Document   : mobile
    Created on : 2012-maj-07, 14:52:42
    Author     : Peter Elmered
    Description:
        Purpose of the stylesheet follows.
*/
/*
 * LESS-MIXINS v0.1
 * http://socialfactory.se/
 *
 * Copyright 2012, Peter Elmered
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
/**
 * INDEX
 *
 * CLEARFIX
 * WRAP
 * PRE
 * HIDE-TEXT (CSS image replacement)
 * TEXT ALIGN SHORTCUTS
 * MARGIN SHORTCUTS
 * MARGIN - H / V
 * PADDING SHORTCUTS
 * PADDING - H / V
 * SIZING, BOXING and MASKING
 * MASKING
 * POSITIONING
 * BORDER-RADIUS
 * BOX-SHADOW
 * TEXT-SHADOW
 * GRADIENT
 * ROTATE
 * SPRITES
 * VERTICAL STATES SPRITE
 * HORIZONTAL STATES SPRITE
 * INLINE LIST
 * USER-SELECT
 * SCALE
 * TRANSLATE
 * SKEW
 * TEXT-COLUMNS
 * TRANSITIONS
 * ARROWS
 *
 *
 *
 *
 */
/**
 * TODO:
 *
 * More default values(and use them more)
 * Add more mixins
 * Sort mixins in a logical order. Alphabetical or categorized/gouped(and separated into multiple files?)? - Give me feedback on this one
 * Better demopage and documentation
 *
 *
 * Please fork and/or make a pull request!
 */
/**
 * CLEARFIX
 * (from TwitterBootstrap)
 */
@import url("http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700");
@import url("http://fonts.googleapis.com/css?family=Libre+Baskerville");
.clearfix,
.clr {
  *zoom: 1;
}
.clearfix:before,
.clr:before,
.clearfix:after,
.clr:after {
  display: table;
  content: "";
}
.clearfix:after,
.clr:after {
  clear: both;
}
.wrap {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}
.pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}
/**
 * CSS image replacement
 * (from TwitterBootstrap)
 *
 * I removed the border and background rule to allow element define it's own rules!
 */
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
}
/**
 * TEXT ALIGN SHORTCUTS
 * these rules are simple quick shortcuts to the "text-align" CSS property
 */
.tl {
  text-align: left;
}
.tr {
  text-align: right;
}
.tc {
  text-align: center;
}
.tj {
  text-align: justify;
}
/**
 * MARGIN SHORTCUTS
 * these are shortcuts to the margin-{side} CSS property
 */
/**
 * MARGIN - H / V
 * these are shortcuts to set only horizontals or vertical margins without alter existing rules
 * you can use these mixins with one value applied to the left/right, top/bottom margins or
 * you can use them with separated values
 */
/**
 * PADDING SHORTCUTS
 * these are shortcuts to the padding-{side} CSS property
 */
/**
 * PADDING - H / V
 * these are shortcuts to set only horizontals or vertical paddings without alter existing rules
 * you can use these mixins with one value applied to the left/right, top/bottom paddings or
 * you can use them with separated values
 */
/**
 * SIZING, BOXING and MASKING
 */
/* size is inpired by the TwitterBootstrap mixin for arguments order. */
/* this is a compatibility decision but I don't uderstand why to start with height!!! Why Twitter? Why? */
.block {
  display: block;
}
/* inline-block backwards compatibilty hack */
.inline-block {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
/* inline-block shortcuts */
.iblock {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
/**
 * MASKING
 */
.mask {
  display: block;
  overflow: hidden;
}
.inline-mask {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  overflow: hidden;
}
.imask {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  overflow: hidden;
}
/**
 * POSITIONING
 */
.rel {
  position: relative;
}
.abs {
  position: absolute;
  top: 0;
  left: 0;
}
.abs-r {
  position: absolute;
  top: 0;
  right: 0;
}
.abs-b {
  position: absolute;
  bottom: 0;
  left: 0;
}
.abs-br {
  position: absolute;
  bottom: 0;
  right: 0;
}
/**
 * Border Radius
 *
 */
/* single border radius applied to all corners */
/* two values applied tob/bottom then bottom/top */
/* two values - left/right right/left */
/* two values - topLeft/bottomRight topRight/bottomLeft */
/* two values - top borders */
/* border-radius different for every corner */
/**
 * BOX-SHADOW
 *
 * Example usage: .box-shadow(0px 6px 15px 4px rgba(0, 0, 0, 0.15));
 */
/**
 * TEXT-SHADOW
 *
 *
 */
/**
 * GRADIENT
 *
 *
 */
/**
 * GRADIENT ADVANCED
 *
 *
 */
/**
 * ROTATE
 *
 *
 */
/**
 * SPRITES
 *
 */
/**
 * VERTICAL STATES SPRITE
 * usefull for 2 or 3 states buttons when state-related images
 * are disposed vertically
 */
/**
 * HORIZONTAL STATES SPRITE
 * usefull for 2 or 3 states buttons when state-related images
 * are disposed horizontally
 */
/**
 * INLINE LIST
 *
 */
.inline-list,
.ilist {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-position: inside;
}
.inline-list li,
.ilist li {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
/**
 * USER-SELECT
 *
 * Disables selection
 */
/**
 * SCALE
 *
 */
/**
 * TRANSLATE
 *
 */
/**
 * SKEW
 *
 */
/**
 * TEXT-COLUMNS
 *
 */
/**
 * TRANSITIONS
 *
 */
/**
 * ARROWS
 * Using only borders(no images)
 */
/* Fonts */
/*Dosis*/
/*@import url("http://fonts.googleapis.com/css?family=Dosis:400,700");*/
/*Bree Serif*/
/* @import url("http://fonts.googleapis.com/css?family=Bree+Serif"); */
/*Open Sans*/
/* @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700"); */
/*Ruda*/
/* @import url("http://fonts.googleapis.com/css?family=Ruda:400,600,700"); */
/*@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");*/
/* VARIABLES */
/* HEADERS */
/* TEXTS */
/* LINKS */
/* Base / Body */
/*url(../images/top-bg-startpage.png) repeat-x 0 0;*/
/*url(../images/top-bg-subpage.png) repeat-x 0 0;*/
/* Header */
/* Logo*/
/* Social buttons */
/*#FFF url(../images/misc/social-button-gloss.png) no-repeat 0 0;*/
/*#FFF url(../images/misc/social-button-gloss.png) no-repeat 0 0;*/
/*#FFF url(../images/misc/social-button-gloss.png) no-repeat 0 0;*/
/* Main menu */
/*#FFF url(../images/menu-active-bg.png) repeat-x 0 0;*/
/* Används tillsammans med @menuListPadding för att förhindra att menyn hoppa om man använder borders vid hover (@mainMenuHoverBoxBorderWidth) */
/*#FFF url(../images/menu-active-bg.png) repeat-x 0 0;*/
/* Används tillsammans med @menuListPadding för att förhindra att menyn hoppa om man använder borders vid hover (@mainMenuHoverBoxBorderWidth) */
/* 0px 15px*/
/* Normalt @menuLinkPadding left + 20-30px */
/* Main menu dropdown/Flyout */
/* Standard: 38px . Använd inte för att göra mellanrum mellan huvudmeny och unndermeny, då fungerar det ej */
/* Bör oftast vara samma som @menuListPadding för att submenyn ska hämna rätt */
/* ex: 0px 5px 11px rgba(50, 50, 50, 0.75); */
/* Top Content */
/*#FCFCFC url(../images/top-bg-startpage.png) repeat-x 0 0;*/
/*#FCFCFC url(../images/top-bg-subpage.png) repeat-x 0 0;*/
/*0px 45px 30px -40px rgba(50, 50, 50, 0.75);*/
/* Content */
/*3px solid #117542;*/
/* Widgets */
/* 11px solid #76634B */
/* 11px solid #76634B */
/* 0px 20px 30px -15px rgba(50, 50, 50, 0.75); */
/*10px solid #E5ECF3;*/
/* 11px solid #E7E6E2 */
/* 12px 0 12px 0 */
/* Footer widget */
/* Footer */
/* Producerad av... */
/* PAGER */
/* BUTTONS */
/*25px*/
/* FORMS */
/*25px*/
/*25px*/
/* MIXINS / FUNCTIONS */
/* Example:
   -webkit-box-shadow: 0px 6px 15px 4px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 6px 15px 4px rgba(0, 0, 0, 0.15);
   box-shadow: 0px 6px 15px 4px rgba(0, 0, 0, 0.15);
*/
.columns .phone-one.columns,
.columns .phone-two.columns,
.columns .phone-three.columns,
.columns .phone-four.columns {
  margin-left: 1.1% !important;
  margin-right: 1.1% !important;
  float: left;
  min-height: 1px;
  position: relative;
  padding: 0;
}
/* Mobile */
@media handheld, only screen and (device-width: 768px), (device-width: 800px) {
  .reveal-modal-bg {
    position: absolute;
  }
  .reveal-modal,
  .reveal-modal.small,
  .reveal-modal.medium,
  .reveal-modal.large,
  .reveal-modal.xlarge {
    width: 60%;
    top: 30%;
    left: 15%;
    margin-left: 0;
    padding: 5%;
    height: auto;
  }
}
@media handheld, only screen and (max-width: 767px) {
  .reveal-modal-bg {
    position: absolute;
  }
  .reveal-modal,
  .reveal-modal.small,
  .reveal-modal.medium,
  .reveal-modal.large,
  .reveal-modal.xlarge {
    width: 80%;
    top: 15%;
    left: 5%;
    margin-left: 0;
    padding: 5%;
    height: auto;
  }
}
/*
      
NOTES

Close button entity is ×

Example markup

<div id="myModal" class="reveal-modal">
   <h2>Awesome. I have it.</h2>
   <p class="lead">Your couch.  I it's mine.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
   <a class="close-reveal-modal">&#215;</a>
</div>

*/
/* --------------------------------------------------
   :: Typography
   -------------------------------------------------- */
@media handheld, only screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 1.3;
  }
  h2 {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.3;
  }
  h3 {
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 1.3;
  }
  h4 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.2;
  }
  h5 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.2;
  }
  h6 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.2;
  }
  body,
  p {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.4;
  }
}
/* --------------------------------------------------
   :: Grid
   -------------------------------------------------- */
/* Tablet screens */
@media only screen and (device-width: 768px), (device-width: 800px) {
  /* Currently unused */
}
/* Mobile */
@media only screen and (max-width: 767px) {
  div.container {
    padding: 0;
  }
  body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .container {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .row {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .row .row .column,
  .row .row .columns {
    padding: 0;
  }
  .column,
  .columns {
    width: auto !important;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .column .row-content,
  .columns .row-content {
    padding-right: 0px !important;
    border-right: none !important;
  }
  .column:last-child,
  .columns:last-child {
    margin-right: 0;
  }
  .offset-by-one,
  .offset-by-two,
  .offset-by-three,
  .offset-by-four,
  .offset-by-five,
  .offset-by-six,
  .offset-by-seven,
  .offset-by-eight,
  .offset-by-nine,
  .offset-by-ten,
  .offset-by-eleven,
  .centered {
    margin-left: 0 !important;
  }
  .phone-auto-height {
    height: auto !important;
  }
  /* Mobile 4-column Grid */
  .row .phone-one.column:first-child,
  .row .phone-two.column:first-child,
  .row .phone-three.column:first-child,
  .row .phone-four.column:first-child,
  .row .phone-one.columns:first-child,
  .row .phone-two.columns:first-child,
  .row .phone-three.columns:first-child,
  .row .phone-four.columns:first-child {
    margin-left: 0;
  }
  .row .phone-one.column,
  .row .phone-two.column,
  .row .phone-three.column,
  .row .phone-four.column,
  .row .phone-one.columns,
  .row .phone-two.columns,
  .row .phone-three.columns,
  .row .phone-four.columns {
    margin-left: 1.1% !important;
    margin-right: 1.1% !important;
    float: left;
    min-height: 1px;
    position: relative;
    padding: 0;
  }
  .row .phone-one.columns {
    width: 21.68% !important;
  }
  .row .phone-two.columns {
    width: 47.8% !important;
  }
  .row .phone-three.columns {
    width: 73.9% !important;
  }
  .row .phone-four.columns {
    width: 100% !important;
  }
}
@media only screen and (max-width: 440px) {
  .row .phone-one.columns,
  .row .phone-two.columns,
  .row .phone-three.columns,
  .row .phone-four.columns {
    width: 100% !important;
    float: none !important;
    margin-left: 0;
    margin-right: 0;
    display: block;
    clear: both;
  }
}
/* --------------------------------------------------
   :: Block Grids
   -------------------------------------------------- */
@media only screen and (max-width: 960px) {
    .block-grid.mobile {
    margin-left: 0;
  }
   .block-grid.mobile li {
    float: none;
    width: 100%;
    margin-left: auto;
  }
  .block-grid.three-up {
    margin-left: -2%;
  }
  .block-grid.three-up > li {
    margin-left: 2%;
    width: 31%;
  }
  .block-grid.four-up {
    margin-left: -2%;
  }
  .block-grid.four-up > li {
    margin-left: 2%;
    width: 31%;
  }
}
@media only screen and (max-width: 767px) {
    .block-grid.mobile {
    margin-left: 0;
  }
   .block-grid.mobile li {
    float: none;
    width: 100%;
    margin-left: auto;
  }
  .block-grid.three-up {
    margin-left: -2%;
  }
  .block-grid.three-up > li {
    margin-left: 2%;
    width: 44%;
  }
  .block-grid.four-up {
    margin-left: -2%;
  }
  .block-grid.four-up > li {
    margin-left: 2%;
    width: 44%;
  }
}
@media only screen and (max-width: 467px) {
    .block-grid.mobile {
    margin-left: 0;
  }
   .block-grid.mobile li {
    float: none;
    width: 100%;
    margin-left: auto;
  }
  .block-grid.three-up {
    margin-left: -2%;
  }
  .block-grid.three-up > li {
    margin-left: 2%;
    width: 100%;
  }
  .block-grid.four-up {
    margin-left: -2%;
  }
  .block-grid.four-up > li {
    margin-left: 2%;
    width: 100%;
  }
}
/* -------------------------------------------------- 
   :: Mobile Visibility Affordances
---------------------------------------------------*/
.show-on-small-phones {
  display: none !important;
}
.show-on-phones {
  display: none !important;
}
.show-on-tablets {
  display: none !important;
}
.show-on-desktops {
  display: block !important;
}
.hide-on-small-phones {
  display: block;
}
.hide-on-phones {
  display: block !important;
}
.hide-on-tablets {
  display: block !important;
}
.hide-on-desktops {
  display: none !important;
}
.table-show-on-phones {
  display: none !important;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
  .hide-on-small-phones {
    display: block;
  }
  .hide-on-phones {
    display: block !important;
  }
  .hide-on-tablets {
    display: none !important;
  }
  .hide-on-desktops {
    display: block !important;
  }
  .show-on-small-phones {
    display: none !important;
  }
  .show-on-phones {
    display: none !important;
  }
  .show-on-tablets {
    display: block !important;
  }
  .show-on-desktops {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .hide-on-small-phones {
    display: none;
  }
  .hide-on-phones {
    display: none !important;
  }
  .hide-on-tablets {
    display: block !important;
  }
  .hide-on-desktops {
    display: block !important;
  }
  .show-on-small-phones {
    display: block !important;
  }
  .show-on-phones {
    display: block !important;
  }
  .show-on-tablets {
    display: none !important;
  }
  .show-on-desktops {
    display: none !important;
  }
  .table-hide-on-phones {
    display: none !important;
  }
}
@media only screen and (max-width: 467px) {
  .hide-on-small-phones {
    display: none;
  }
  .hide-on-phones {
    display: none !important;
  }
  .hide-on-tablets {
    display: block !important;
  }
  .hide-on-desktops {
    display: block !important;
  }
  .show-on-small-phones {
    display: block !important;
  }
  .show-on-phones {
    display: block !important;
  }
  .show-on-tablets {
    display: none !important;
  }
  .show-on-desktops {
    display: none !important;
  }
  .table-hide-on-phones {
    display: none !important;
  }
  .table-show-on-phones {
    display: table !important;
    width: 98% !important;
  }
  .table-show-on-phones:before {
    content: "" !important;
  }
}
/* only screen and (device-width: 1280px), only screen and (max-device-width: 1280px),  /*
/* Keeping this in as a reminder to address support for other tablet devices like the Xoom in the future */
/* Specific overrides for elements that require something other than display: block */
table.show-on-desktops {
  display: table !important;
}
table.hide-on-phones {
  display: table !important;
}
table.hide-on-tablets {
  display: table !important;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
  table.hide-on-phones {
    display: block !important;
  }
  table.hide-on-desktops {
    display: block !important;
  }
  table.show-on-tablets {
    display: block !important;
  }
}
@media only screen and (max-width: 767px) {
  table.hide-on-tablets {
    display: block !important;
  }
  table.hide-on-desktops {
    display: block !important;
  }
  table.show-on-phones {
    display: block !important;
  }
  .bold-on-phones:before {
    font-weight: bold;
  }
}
/* -------------------------------------------------- 
   :: Forms
---------------------------------------------------*/
@media only screen and (max-width: 767px) {
  div.form-field input,
  div.form-field input.small,
  div.form-field input.medium,
  div.form-field input.large,
  div.form-field input.oversize,
  input.input-text,
  input.input-text.oversize,
  textarea,
  form.nice div.form-field input,
  form.nice div.form-field input.oversize,
  form.nice input.input-text,
  form.nice input.input-text.oversize,
  form.nice textarea {
    display: block;
    width: 96%;
    padding: 6px 2% 4px;
    font-size: 18px;
  }
  form.nice div.form-field input,
  form.nice div.form-field input.oversize,
  form.nice input.input-text,
  form.nice input.input-text.oversize,
  form.nice textarea {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  form.nice div.form-field.error small,
  form.nice small.error {
    padding: 6px 2%;
    display: block;
  }
  form.nice div.form-field.error .small + small,
  form.nice .small + .error {
    width: auto;
  }
  form.nice div.form-field.error .medium + small,
  form.nice .medium + .error {
    width: auto;
  }
  form.nice div.form-field.error .large + small,
  form.nice .large + .error {
    width: auto;
  }
}
/* -------------------------------------------------- 
   :: UI
---------------------------------------------------*/
/* Top containers */
@media only screen and (max-width: 767px) {
  .home #top-wrapper {
    background: #1C9AB2 url('../images/top-bg-startpage.png') repeat-x 0 50px !important;
  }
  #top-wrapper {
    background: #1C9AB2 url('../images/top-bg-subpage.png') repeat-x 0 -20px !important;
  }
  #site-logo img {
    float: right;
  }
}
@media only screen and (max-width: 550px) {
  /*
   .home #top-wrapper {                 
      background: #1C9AB2 url('../images/top-bg-startpage.png') repeat-x 0 175px !important;
   }
   #top-wrapper {
      background: #1C9AB2 url('../images/top-bg-subpage.png') repeat-x 0 -20px !important;
   }
   */
  #site-logo,
  #site-logo ul,
  #site-header-search {
    float: none !important;
    width: 100% !important;
  }
  #site-logo a {
    padding: 10px 10px 5px 10px !important;
  }
  #site-logo img {
    width: 80% !important;
    margin-left: 10% !important;
    margin-right: 10% !important;
    float: none !important;
    padding: 0 !important;
  }
  #top_search_form {
    float: none !important;
    padding: 0 !important;
    margin: -5px auto 0 auto !important;
  }
}
/* Main menu */
@media only screen and (max-width: 767px) {
  #site-nav-main,
  #site-nav-main ul,
  #site-nav-main li {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center;
    height: auto;
  }
  #site-nav-main a {
    padding: 10px 10px;
  }
}
@media only screen and (max-width: 500px) {
  #main-menu li {
    float: none;
  }
}
/* Slider */
@media only screen and (max-width: 767px) {
  #top-content #flexslider-container {
    width: 100% !important;
  }
  #top-container.slider-container .slides img {
    display: none !important;
  }
  #top-container.slider-container .slides .slider_caption {
    height: 95%;
    width: 90% !important;
    padding: 20px 5% !important;
    display: block;
  }
}
/* Buttons */
@media only screen and (max-width: 767px) {
  .button {
    display: block;
  }
  button.button {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  form.nice input.button-match {
    padding: 6px 5px 8px;
  }
}
/* Tabs */
@media only screen and (max-width: 767px) {
  dl.tabs.mobile,
  dl.nice.tabs.mobile {
    width: auto;
    margin: 20px -20px 40px;
    height: auto;
  }
  dl.tabs.mobile dt,
  dl.tabs.mobile dd,
  dl.nice.tabs.mobile dt,
  dl.nice.tabs.mobile dd {
    float: none;
    height: auto;
  }
  dl.tabs.mobile dd a {
    display: block;
    width: auto;
    height: auto;
    padding: 18px 20px;
    line-height: 1;
    border: solid 0 #ccc;
    border-width: 1px 0 0;
    margin: 0;
    color: #555;
    background: #eee;
    font-size: 15px;
    font-size: 1.5rem;
  }
  dl.tabs.mobile dd a.active {
    height: auto;
    margin: 0;
    border-width: 1px 0 0;
  }
  .nice.tabs.mobile {
    border-bottom: solid 1px #ccc;
    height: auto;
  }
  .nice.tabs.mobile dd a {
    padding: 18px 20px;
    border: none;
    border-left: none;
    border-right: none;
    border-top: 1px solid #ccc;
    background: #fff;
  }
  .nice.tabs.mobile dd a.active {
    border: none;
    background: #00a6fc;
    color: #fff;
    margin: 0;
    position: static;
    top: 0;
    height: auto;
  }
  .nice.tabs.mobile dd:first-child a.active {
    margin: 0;
  }
  dl.contained.mobile,
  dl.nice.contained.mobile {
    margin-bottom: 0;
  }
  dl.contained.tabs.mobile dd a {
    padding: 18px 20px;
  }
  dl.nice.contained.tabs.mobile dd a {
    padding: 18px 20px;
  }
}
/* Containers */
@media only screen and (max-width: 767px) {
  #info-box {
    width: 100% !important;
    margin: 0 !important;
    float: none  !important;
  }
  #info-box #info-box-container {
    padding: 5px !important;
  }
}
/* Nav Bar */
@media only screen and (max-width: 767px) {
  .nav-bar {
    height: auto;
  }
  .nav-bar > li {
    float: none;
    display: block;
    border-right: none;
  }
  .nav-bar > li > a {
    text-align: left;
    border-top: 1px solid #ddd;
    border-right: none;
  }
  .nav-bar > li:first-child > a {
    border-top: none;
  }
  .nav-bar > li.has-flyout > a:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    display: none !important;
  }
  .nav-bar > li:hover ul {
    position: relative;
  }
  .flyout {
    display: none !important;
    position: relative;
    width: auto;
    top: 1px;
    left: 0;
  }
  .flyout.right {
    float: none;
    right: auto;
    left: -1px;
  }
  .flyout.small,
  .flyout.large {
    width: auto;
  }
  .flyout > li > a {
    padding-left: 30px;
  }
  .flyout p:last-child {
    margin-bottom: 18px;
  }
}
/* START PAGE */
@media only screen and (max-width: 500px) {
  #flexslider-container {
    margin: 0 -40px;
    padding: 0 20px;
  }
  #top-content-widget-area .top-widget {
    padding-bottom: 200px;
  }
}
@media only screen and (max-width: 440px) {
  /* Latest news */
  #latest-news-container li.news-row {
    height: 40px;
  }
  #latest-news-container h4.news-title {
    position: relative;
    display: block;
  }
  #latest-news h4.news-title a::before {
    top: -3px;
  }
  #latest-news-container div.news-date {
    position: relative;
    display: block;
    font-size: 12px;
    padding-left: 20px;
    margin-top: -2px;
    line-height: 1;
  }
  #latest-news-container .horizontal-fade {
    display: none;
  }
  /* Listor */
  #bottom-row-1 .vertical-divider-on-phone::before {
    background: none;
  }
  #bottom-row-1 .vertical-divider-on-phone > * {
    margin-left: 0;
  }
}
/* FOOTER */
@media only screen and (max-width: 767px) {
  .bottom-row-social.body .widget:last-child {
    display: none;
  }
  #footer-row .columns.middle .middle-container {
    border-width: 0 4px 0 0 !important;
  }
}
@media only screen and (max-width: 440px) {
  .footer-header {
    background: url('../images/divider-bg.png') repeat-x bottom left transparent;
    padding-bottom: 5px !important;
    border: none;
  }
  .bottom-row-social .horizontal-divider {
    display: none !important;
  }
  #footer-row #get-the-app {
    position: relative !important;
    height: 133px !important;
    padding: 0 20px !important;
    margin: 0 -20px !important;
    /*abckground: url('http://wp.socialfactory.se/forenadebolag/wp-content/themes/standard/stylesheets/../images/Bottom-Bg.png') repeat-x 0 0;*/
    background: #E6E6E7;
  }
  #footer-row #get-the-app .get-app {
    right: 155px !important;
  }
  #footer-row #get-the-app .mobile-app-img {
    right: 80px !important;
  }
}
/* MISC */
@media only screen and (max-width: 767px) {
  .row .vertical-divider-on-phone,
  .row .horizontal-divider-on-phone {
    position: relative;
  }
  .row .horizontal-divider-on-phone {
    padding-top: 60px;
    display: block;
    clear: both;
  }
  .row .horizontal-divider-on-phone:before {
    content: "";
    height: 10px;
    width: 100%;
    position: absolute;
    display: block;
    top: 25px;
    left: 0;
    background: url('../images/divider-bg.png') repeat-x center left transparent;
  }
  .vertical-divider-on-phone:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    width: 10px;
    height: 100%;
    background: url('../images/divider-bg.png') repeat-y top center transparent;
    margin: 0;
  }
  .vertical-divider-on-phone > * {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 967px) {
  .row .vertical-divider-on-tablet,
  .row .horizontal-divider-on-tablet {
    position: relative;
  }
  .row .horizontal-divider-on-tablet {
    padding-top: 60px;
    display: block;
    clear: both;
  }
  .row .horizontal-divider-on-tablet:before {
    content: "";
    height: 10px;
    width: 100%;
    position: absolute;
    display: block;
    top: 25px;
    left: 0;
    background: url('../images/divider-bg.png') repeat-x center left transparent;
  }
  .vertical-divider-on-tablet:before {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    width: 10px;
    height: 100%;
    background: url('../images/divider-bg.png') repeat-y top center transparent;
    margin: 0;
  }
  .vertical-divider-on-tablet > * {
    margin-left: 10px;
  }
}
/* OTHERS */
@media only screen and (max-width: 1100px) {
  .alert-list-section-header {
    margin-left: -10px !important;
  }
  #footer-row #get-the-app .mobile-app-img {
    right: 0 !important;
    margin-bottom: 25px!important;
    margin-top: 20px !important;
  }
}
@media only screen and (max-width: 767px) {
  .widget .widget_content {
    text-align: left !important;
  }
  .widget h4 {
    float: none !important;
    text-align: left !important;
  }
  .alert-list-section-header {
    margin-left: -10px !important;
  }
  form .form-row-first,
  form .form-row-last {
    float: none;
    width: 100%;
  }
  form .form-row.notes {
    clear: both;
  }
  form .form-row {
    margin: 0 0 6px 0;
  }
  .entry .box.half {
    width: 93%;
  }
}
@media only screen and (max-width: 467px) {
  .widget .widget_content {
    text-align: left !important;
  }
  .widget h4 {
    float: none !important;
    text-align: left !important;
  }
  /* COMMENTS */
  #comments-list .comment-content {
    margin-top: 20px;
    max-width: 320px;
    width: auto !important;
  }
  #comments-list .comment-content .arrow-small {
    border: 9px solid transparent !important;
    border-bottom: 9px solid white!important;
    margin-left: 11px!important;
    margin-top: -28px !important;
  }
  #comments-list .comment-content .arrow-big {
    border: 10px solid transparent!important;
    border-bottom: 10px solid #CCC!important;
    margin-left: 10px!important;
    margin-top: -31px !important;
  }
  /* SHOP */
  form .form-row-first,
  form .form-row-last {
    float: none;
    width: 100%;
  }
  form .form-row.notes {
    clear: both;
  }
  form .form-row {
    margin: 0 0 6px 0;
  }
  .entry .box.half {
    width: 93%;
  }
}