/******************************************************************
Site Name: 
Author: 

Stylesheet: IE Stylesheet

So instead of using the respond.js file to add media query support
to IE, we're going to use SASS to create an easily readable css file.
Here, we import all the styles the standard stylesheet gets, only
without the media queries. No need to worry about editing anything!

******************************************************************/
/*
Remember, all the BASE styles are called already since IE can
read those. Below, we need to import only the stuff IE can't 
understand (what's inside the media queries). We also need to
import the mixins file so SASS can understand the variables.
*/
/* import mixins */
/******************************************************************
Site Name: Ambient Recording
Author: Felix Franz

Stylesheet: Mixins & Constants Stylesheet


******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*********************
TYPOGRAPHY
*********************/
@font-face {
  font-family: 'OpenSansRegular';
  src: url("../fonts/OpenSans-Regular-webfont.eot");
  src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'OpenSansItalic';
  src: url("../fonts/OpenSans-Italic-webfont.eot");
  src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'OpenSansLight';
  src: url("../fonts/OpenSans-Light-webfont.eot");
  src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'OpenSansBold';
  src: url("../fonts/OpenSans-Bold-webfont.eot");
  src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
  font-weight: normal;
  font-style: normal; }
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

/*********************
CSS3 GRADIENTS
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BORDER RADIUS
*********************/
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
BUTTONS
*********************/
.button, .button:visited {
  font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #253b53;
  border-top-color: #2e4a68;
  border-left-color: #2e4a68;
  padding: 4px 12px;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 20px;
  line-height: 21px;
  border-radius: 4px;
  background-color: #314f6f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#395c81), to(#314f6f));
  background-image: -webkit-linear-gradient(top, #395c81, #314f6f);
  background-image: -moz-linear-gradient(top, #395c81, #314f6f);
  background-image: -o-linear-gradient(top, #395c81, #314f6f);
  background-image: linear-gradient(to bottom, #395c81, #314f6f); }
  .button:hover, .button:focus, .button:visited:hover, .button:visited:focus {
    color: #fff;
    border: 1px solid #253b53;
    border-top-color: #1a2a3a;
    border-left-color: #1a2a3a;
    background-color: #29435e;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#314f6f), to(#29435e));
    background-image: -webkit-linear-gradient(top, #314f6f, #29435e);
    background-image: -moz-linear-gradient(top, #314f6f, #29435e);
    background-image: -o-linear-gradient(top, #314f6f, #29435e);
    background-image: linear-gradient(to bottom, #314f6f, #29435e); }
  .button:active, .button:visited:active {
    background-color: #395c81;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#314f6f), to(#395c81));
    background-image: -webkit-linear-gradient(top, #314f6f, #395c81);
    background-image: -moz-linear-gradient(top, #314f6f, #395c81);
    background-image: -o-linear-gradient(top, #314f6f, #395c81);
    background-image: linear-gradient(to bottom, #314f6f, #395c81); }

.blue-button, .blue-button:visited {
  border-color: #1472ad;
  background-color: #1681c4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4));
  background-image: -webkit-linear-gradient(top, #1990db, #1681c4);
  background-image: -moz-linear-gradient(top, #1990db, #1681c4);
  background-image: -o-linear-gradient(top, #1990db, #1681c4);
  background-image: linear-gradient(to bottom, #1990db, #1681c4);
  box-shadow: inset 0 0 3px #59b3ec; }
  .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus {
    border-color: #116396;
    background-color: #1472ad;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad));
    background-image: -webkit-linear-gradient(top, #1784c9, #1472ad);
    background-image: -moz-linear-gradient(top, #1784c9, #1472ad);
    background-image: -o-linear-gradient(top, #1784c9, #1472ad);
    background-image: linear-gradient(to bottom, #1784c9, #1472ad); }
  .blue-button:active, .blue-button:visited:active {
    background-color: #1990db;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db));
    background-image: -webkit-linear-gradient(top, #1681c4, #1990db);
    background-image: -moz-linear-gradient(top, #1681c4, #1990db);
    background-image: -o-linear-gradient(top, #1681c4, #1990db);
    background-image: linear-gradient(to bottom, #1681c4, #1990db); }

/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.

The grid below is a combination of the 1140 grid and Twitter Boostrap. 
I liked 1140 but Boostrap's grid was way more detailed so I merged them 
together, let's see how this works out. If you want to use 1140, the original 
values are commented out on each line.

******************************************************************/
.onecol {
  width: 5.801104972%; }

/* 4.85%;  } /* grid_1  */
.twocol {
  width: 14.364640883%; }

/* 13.45%; } /* grid_2  */
.threecol {
  width: 22.928176794%; }

/* 22.05%; } /* grid_3  */
.fourcol {
  width: 31.491712705%; }

/* 30.75%; } /* grid_4  */
.fivecol {
  width: 40.055248616%; }

/* 39.45%; } /* grid_5  */
.sixcol {
  width: 48.618784527%; }

/* 48%;    } /* grid_6  */
.sevencol {
  width: 57.182320438000005%; }

/* 56.75%; } /* grid_7  */
.eightcol {
  width: 65.74585634900001%; }

/* 65.4%;  } /* grid_8  */
.ninecol {
  width: 74.30939226%; }

/* 74.05%; } /* grid_9  */
.tencol {
  width: 82.87292817100001%; }

/* 82.7%;  } /* grid_10 */
.elevencol {
  width: 91.436464082%; }

/* 91.35%; } /* grid_11 */
.twelvecol {
  width: 99.999999993%; }

/* 100%;   } /* grid_12 */
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
  position: relative;
  float: left;
  margin-left: 2.762430939%; }

.first {
  margin-left: 0; }

.last {
  float: right; }

/******************************************************************
Site Name: Ambient Recording
Author: Felix Franz

Stylesheet: 481px and Up Stylesheet

******************************************************************/
#inner-header {
  border-bottom: 1px solid #e5e5e5;
  height: 130px; }

#logo {
  float: left;
  width: 25%;
  max-width: 171px;
  margin: 25px 0 0px; }
  #logo img {
    width: 100%; }

.top-nav.search-open li a {
  display: none; }

.lang-select {
  position: absolute;
  top: 10px;
  right: 40px;
  width: 50px;
  z-index: 1; }
  .lang-select #lang_sel a, .lang-select #lang_sel a:visited {
    border-color: #fff; }

#lang_sel_list.lang_sel_list_vertical a, #lang_sel_list.lang_sel_list_vertical a:visited {
  border: none !important;
  background: transparent !important; }

#lang_sel_list.lang_sel_list_vertical ul {
  border: none !important;
  background: transparent !important; }

#lang_sel_list a, #lang_sel_list a:visited, #lang_sel_list ul a, #lang_sel_list_list ul a:visited {
  background: !important; }

#lang_sel_list.lang_sel_list_vertical li {
  width: 30px !important;
  background: transparent !important; }

/*********************
NAVIGATION STYLES
*********************/
#searchform.search-open {
  width: 50%;
  margin: 47px 70px 0 0; }

#searchform {
  float: right;
  margin: 50px 70px 0 0;
  width: 4%; }

#searchform.hidethis {
  display: inline-block !important; }

.top-nav {
  display: none; }

/*********************
PRODUCT NAVIGATION
*********************/
.side-nav {
  float: left;
  margin-top: 1.34em;
  width: 20%;
  font-size: 0.9em; }
  .side-nav ul.nav {
    width: 100%; }
    .side-nav ul.nav li {
      float: none;
      border-top: 1px solid #e5e5e5;
      display: block;
      text-align: left; }
      .side-nav ul.nav li a {
        padding: 7px 0; }
    .side-nav ul.nav > li:first-child {
      border-top: 1px solid #e5e5e5; }
    .side-nav ul.nav > li {
      font-family: "OpenSansBold", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .side-nav ul.nav .sub-menu {
      display: none; }
      .side-nav ul.nav .sub-menu li {
        font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        display: block; }
    .side-nav ul.nav .current-menu-item .sub-menu, .side-nav ul.nav .current-menu-parent .sub-menu {
      display: block;
      margin: 0;
      padding: 0; }

/*********************
PRODUCTS
*********************/
.products-grid {
  float: left;
  width: 80%;
  padding: 0 0 0 2%; }

.intro h1 {
  font-size: 1.5em; }
.intro p {
  font-size: 1.2em;
  margin: 30px 0; }

.grid article, .grid-4 article {
  width: 48%;
  height: 256px;
  text-align: center; }
  .grid article .thumb, .grid-4 article .thumb {
    width: 100%;
    margin: 0 10px 10px 0;
    float: left;
    height: 160px;
    margin: 0 0 10px 0; }
  .grid article .wp-post-image, .grid-4 article .wp-post-image {
    width: 100%;
    height: auto; }
  .grid article .h2, .grid-4 article .h2 {
    margin: 10px 0 0; }

/*********************
4er GRID + FEATURES
*********************/
.grid-4 article {
  width: 48%;
  padding: 0 0 1.38% 0;
  margin: 0 1%;
  position: relative;
  border-bottom: none;
  overflow: hidden;
  text-align: left; }
  .grid-4 article .thumb {
    height: auto;
    margin: 0; }
    .grid-4 article .thumb a img {
      float: left; }
  .grid-4 article .entry-content p {
    width: 100%;
    margin-top: 2px; }
.grid-4 article.big {
  width: 48%;
  height: auto; }
.grid-4 article.regular {
  height: auto; }
.grid-4 .feature-text {
  width: 102%;
  background: #fff;
  padding: 0 10px;
  bottom: 0;
  position: absolute;
  height: auto;
  -webkit-transition: all 0.2s ease;
  /* Saf3.2+, Chrome */
  -moz-transition: all 0.2s ease;
  /* FF4+ */
  -ms-transition: all 0.2s ease;
  /* IE10? */
  -o-transition: all 0.2s ease;
  /* Opera 10.5+ */
  transition: all 0.2s ease;
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0); }
.grid-4 article:hover .feature-text {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100); }

/*********************
SINGLE PRODUCT
*********************/
.single #main {
  margin-top: 15px; }
.single article {
  margin: 0 8% 40px 8%; }
  .single article > h1 {
    margin-top: 0; }
  .single article h3, .single article h2 {
    font-size: 1.5em;
    margin: 10px 0;
    color: #9c9c9c;
    font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .single article h3 a, .single article h2 a {
      color: #565656; }
  .single article .entry-content .tablepress {
    width: 100%; }
.single .grid .related_posts_header, .single .grid .related_posts_header_ENG {
  font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9em; }
.single .grid article {
  width: 24%;
  margin: 20px 1% 20px 0; }
  .single .grid article .entry-content p {
    width: 100%; }

/*********************
HOME
*********************/
.home .intro p {
  margin: 25px 0 25px;
  padding: 0;
  text-align: center;
  font-size: 1.7em; }
.home .intro .royalSlider {
  padding: 20px 0 0px;
  left: 0;
  margin: 0px 0 0px;
  border-top: 1px solid #e5e5e5; }
.home .intro .myCustomSkin .rsBullets {
  margin: 0;
  top: -10%; }
.home article {
  height: auto; }

/*********************
ARCHIVE & LISTEN
*********************/
.liste article ul {
  font-family: "GoudyBookletter", "Georgia", Cambria, Times New Roman, Times, serif;
  font-size: 24px; }
  .liste article ul li {
    border-top: 1px solid #e5e5e5;
    padding: 10px 0; }
    .liste article ul li.h4 {
      color: #A3AEBA;
      font-weight: 300; }
    .liste article ul li a {
      color: #727272;
      text-decoration: none; }
      .liste article ul li a:hover {
        color: #A3AEBA; }

/*********************
DEPARTMENTS & PERSONS
*********************/
.departments {
  padding: 40px 0 0;
  float: left;
  width: 100%;
  border-top: 1px solid #e5e5e5; }
  .departments article {
    border-bottom: 1px solid #e5e5e5;
    width: 31.491712705%;
    min-height: 220px;
    float: left;
    margin: 0 0.75% 20px; }
    .departments article article-header {
      width: 100%;
      float: left; }
    .departments article .h2, .departments article h3 {
      margin: 0;
      font-size: 1.2em; }
    .departments article .entry-content {
      margin: 20px 0 0;
      width: 100%;
      float: left; }
      .departments article .entry-content .wp-post-image {
        float: left;
        width: 30%;
        max-width: 90px; }
      .departments article .entry-content p, .departments article .entry-content h4 {
        width: 65%;
        margin: 0 0 0 5%;
        float: right; }
      .departments article .entry-content h4 {
        font-family: "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/*********************
POSTS & CONTENT STYLES
*********************/
/* entry content */
.entry-content {
  /* at this larger size, we can start to align images */ }
  .entry-content .alignleft, .entry-content img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left; }
  .entry-content .alignright, .entry-content img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right; }
  .entry-content .aligncenter, .entry-content img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both; }

/* end .entry-content */
/*********************
FOOTER STYLES
*********************/
/*
check your menus here. do they look good?
do they need tweaking?
*/
.footer .social-links {
  float: right;
  display: inline-block;
  margin: 17px 0 0;
  width: auto; }
  .footer .social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    float: left;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60); }
    .footer .social-links a:hover {
      opacity: 0.8;
      -moz-opacity: 0.8;
      filter: alpha(opacity=80); }

/* end .footer-links */
/******************************************************************
Site Name: Ambient Recording
Author: Felix Franz
Stylesheet: Tablet & Small Desktop Stylesheet

******************************************************************/
/*********************
GENERAL STYLES
*********************/
/*********************
LAYOUT & GRID STYLES
*********************/
.wrap {
  max-width: 1140px; }

/*********************
HEADER STYLES
*********************/
#logo {
  width: 20%; }

#inner-header nav {
  float: right;
  width: 80%;
  display: inline-block; }

.top-nav {
  margin-top: 47px;
  width: 95%;
  float: right;
  text-align: right;
  display: inline-block; }
  .top-nav li {
    display: inline-block;
    width: auto;
    background: transparent; }
    .top-nav li a {
      background: transparent;
      font-size: 14px; }

.nav {
  /* end .menu li */ }
  .nav li a {
    padding: 5px;
    border: none; }
  .nav li ul.sub-menu li a,
  .nav li ul.children li a {
    padding-left: 30px; }

/* end .nav */
.top-nav li {
  /*
  plan your menus and drop-downs wisely.
  */
  /* showing sub-menus */ }
  .top-nav li ul.sub-menu,
  .top-nav li ul.children {
    margin-top: 0;
    background: #fff;
    position: absolute;
    display: none;
    z-index: 8999; }
    .top-nav li ul.sub-menu li,
    .top-nav li ul.children li {
      display: block; }
      .top-nav li ul.sub-menu li a,
      .top-nav li ul.children li a {
        padding-left: 10px;
        border-right: 0;
        display: block;
        width: 180px;
        border-bottom: 1px solid #ccc;
        text-align: left; }
      .top-nav li ul.sub-menu li:last-child a,
      .top-nav li ul.children li:last-child a {
        border-bottom: 0; }
  .top-nav li:hover ul {
    top: auto;
    display: block; }

.top-nav.search-open {
  width: 70%;
  margin-top: 47px; }
  .top-nav.search-open a {
    font-size: 12px; }

#searchform.search-open {
  width: 70%;
  margin: 45px 0 0 0; }

#searchform {
  float: right;
  margin: 50px 0 0 0;
  width: 4%; }

input#s {
  width: 250px; }

/*********************
GRID
*********************/
.grid article {
  width: 31.491712705%;
  height: 256px;
  text-align: center; }
  .grid article .thumb {
    width: 100%;
    margin: 0 10px 10px 0;
    float: left;
    height: 160px;
    margin: 0 0 10px 0; }
  .grid article .wp-post-image {
    width: 100%;
    height: auto; }
  .grid article .h2 {
    margin: 10px 0 0; }

/*********************
NAVIGATION STYLES
*********************/
#nav-toggle {
  display: none; }

/*********************
HEADER SINGLE
*********************/
.single #inner-header {
  height: 70px;
  margin-top: 10px; }
  .single #inner-header a.go-back {
    display: inline-block;
    float: left;
    margin: 12px 0 0;
    position: relative;
    left: -100px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50); }
    .single #inner-header a.go-back span {
      position: relative;
      display: inline-block;
      top: -15px; }
  .single #inner-header #logo {
    margin: -10px 0 0 -70px;
    max-width: 90px; }
    .single #inner-header #logo img.logo-big {
      display: none; }
    .single #inner-header #logo img.logo-small {
      display: inline-block;
      opacity: 0.7;
      -moz-opacity: 0.7;
      filter: alpha(opacity=70);
      width: 90px; }
  .single #inner-header .top-nav {
    margin-top: 15px;
    padding: 0; }
    .single #inner-header .top-nav li a {
      padding: 0 6px; }
  .single #inner-header #searchform {
    margin-top: 15px; }

/*********************
PRODUCT NAVIGATION
*********************/
.single article .entry-content .tablepress {
  width: 66%; }

/*********************
4er GRID + FEATURES
*********************/
.grid-4 article {
  width: 23%; }

/*********************
KRITIK & SINGLES
*********************/
.single article {
  margin: 0 0 40px 0; }
.single .wp-post-image {
  display: inline-block;
  float: left;
  margin: 10px 15px 5px 0; }
.single .prev, .single .next {
  float: none;
  position: fixed;
  top: 500px;
  font-size: 4em;
  font-family: "GoudyBookletter", "Georgia", Cambria, Times New Roman, Times, serif; }
  .single .prev a, .single .next a {
    color: #e5e5e5;
    text-decoration: none; }
    .single .prev a:hover, .single .next a:hover {
      color: #A3AEBA; }
.single .prev {
  left: 20px; }
.single .next {
  right: 20px; }

/*********************
FOOTER STYLES
*********************/
/*
you'll probably need to do quite a bit
of overriding here if you styled them for
mobile. Make sure to double check these!
*/
.footer-links ul li {
  /*
  be careful with the depth of your menus.
  it's very rare to have multi-depth menus in
  the footer.
  */ }

/* end .footer-links */
/******************************************************************
Site Name: Ambient Recording
Author: Felix Franz
Stylesheet: Desktop Stylsheet

This is the desktop size. It's larger than an iPad so it will only
be seen on the Desktop. 

******************************************************************/
#logo {
  width: 25%;
  margin-top: 25px; }

.top-nav li a {
  font-size: 16px; }

.grid-page article {
  border-bottom: 1px solid #e5e5e5;
  width: 31.491712705%;
  float: left;
  margin: 0 0.75% 40px; }
  .grid-page article .h2 {
    margin: 5px 0 0; }
    .grid-page article .h2 a {
      color: #565656; }
  .grid-page article .entry-content p {
    margin: 0 0 20px;
    color: #9c9c9c;
    font-size: 0.777777778em;
    font-family: "OpenSansItalic", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.respond-form {
  margin: 2em 0 1.1em 0; }

.eightcol {
  width: 65.4%; }

/* 65.4%;  } /* grid_8  */
/* 
you can call the larger styles if you want, but there's really no need 
*/
/******************************************************************
ADDITIONAL IE FIXES
These fixes are now ONLY seen by IE, so you don't have to worry
about using prefixes, although it's best practice. For more info
on using Modernizr classes, check out this link:
http://www.modernizr.com/docs/
******************************************************************/
/*
For example, you can use something like:

.no-textshadow .class { ... }

You can also target specific versions by using the classes applied to
the html element. These can sometimes change, so take a look inside the
header.php file to see what they are:


.lt-ie8 .class { ... }

*/