ul.index {
  text-align: justify !important;
  text-justify: distribute-all-lines;
  font-size: 0 !important; }
  ul.index > * {
    text-align: left;
    font-size: medium; }
  ul.index:after {
    content: '';
    display: inline-block;
    width: 100%; }

ul.index li {
  vertical-align: top;
  display: inline-block;
  width: 100%; }

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.browsehappy {
  margin: 0.2em 0;
  background: #333;
  color: #000;
  padding: 0.2em 0; }

/* ========================================================================== */
/* !--------- LAYOUT -------------------------------------------------------- */
/* ========================================================================== */
html {
  margin-bottom: 1px; }

html, body, #container {
  height: 100%; }

div#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%; }

body {
  background-color: #333;
  overflow-x: hidden; }

/*
.logo-background {
	background:  url(../layout/Bilder/bg-gibriel-sand.png) 0 0; 
	padding-bottom: 4rem;
	padding-top: 4rem;
}

#pagetitle-inner {
	@include background-image(linear-gradient(to right, #f0ebdd 0%, #d4ccb6 30%, #d4ccb6 40%, #9a8f6f 100%));
	@include transform(transform, rotate, -.5deg);
	z-index: 5;
}

#claim {
	position: relative;
	top:-3rem;
}

#claim-inner{
	@include background-image(linear-gradient(to right, #999 0%, #111 100%));
	@include transform(transform, rotate, .5deg);
}
*/
html, button, input, select, textarea,
.pure-g [class*="pure-u"],
.pure-g-r [class*="pure-u"] {
  /* Set your content font stack here: */
  font: normal 300 100%/1.83em ubuntu, sans-serif;
  letter-spacing: 0.07em;
  color: #222; }

div#container {
  width: 100%; }
  @media screen and (max-width: 47.9375em) {
    div#container.margin {
      margin-left: 10em; } }

.editorial-inner,
.collection-inner,
.about-inner,
.sidebar,
.inFooter,
.aside .news-inner {
  margin: 0 auto;
  padding: 0 0.75em;
  max-width: 80em;
  text-decoration: center; }

div#mainContent .mainContent-inner {
  padding-top: 1em; }

header {
  width: 100%; }

.header-main-inner, footer {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed; }

.header-main-inner {
  width: 100%;
  z-index: 999;
  border: none; }
  @media screen and (max-width: 47.9375em) {
    .header-main-inner {
      background-color: transparent;
      border: none; } }

header aside {
  margin-left: 0em; }
  @media screen and (max-width: 47.9375em) {
    header aside.margin {
      margin-left: 0.01em; } }

section {
  text-align: center; }

header .aside .news {
  position: absolute;
  top: 16%;
  width: 100%; }

section#teaser .aside,
section#contact,
section#collection {
  background-image: -webkit-linear-gradient( top , #80b7c6 0%, #e2d7bf 72%);
  background-image: linear-gradient(to bottom, #80b7c6 0%, #e2d7bf 72%); }

section#about,
section#editorial,
section#imprint {
  background-image: -webkit-linear-gradient( top , #99cec8 0, #918e6f 80%);
  background-image: linear-gradient(to bottom, #99cec8 0, #918e6f 80%); }

.texture {
  background: url(../img/bg-gibriel-sand.png) 0 0; }

.section-inner {
  padding: 10% 0; }
  .section-inner .border {
    border-right: 1px solid #FFF; }
    .section-inner .border:last-child {
      border: none; }

.editorial-inner {
  padding: 10% 10%; }

.imprint-inner {
  padding-bottom: 15.1rem; }

article h1,
article h2,
article h3,
article p,
article blockquote,
article.video {
  padding: 0 0.75em; }
  @media screen and (min-width: 30em) {
    article h1,
    article h2,
    article h3,
    article p,
    article blockquote,
    article.video {
      margin-right: 8.3333%;
      margin-left: 8.3333%; } }
  @media screen and (min-width: 47.9375em) {
    article h1,
    article h2,
    article h3,
    article p,
    article blockquote,
    article.video {
      margin-right: 16.66666%;
      margin-left: 16.66666%; } }
  @media screen and (min-width: 67.5em) {
    article h1,
    article h2,
    article h3,
    article p,
    article blockquote,
    article.video {
      margin-right: 25%;
      margin-left: 25%; } }

article.video p, article.video h1 {
  margin-right: 0;
  margin-left: 0; }

footer {
  position: relative;
  display: block;
  height: 3.1rem;
  margin-top: -3.1rem;
  color: #FFF; }

.inFooter {
  padding-bottom: .8em;
  padding-top: .8em; }
  .inFooter a {
    text-decoration: underline; }

/* ========================================================================== */
/* !--------- HEADLINES ----------------------------------------------------- */
/* ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: #FFF;
  line-height: 130%; }

h1, h2 {
  text-align: left;
  font-weight: 300;
  text-transform: uppercase; }

.logo h1 {
  font-weight: 400;
  font-size: 1em;
  text-transform: uppercase; }
  @media screen and (min-width: 47.9375em) {
    .logo h1 {
      text-align: left; } }
  @media screen and (max-width: 47.9375em) {
    .logo h1 {
      text-align: center;
      font-weight: 700;
      padding-bottom: .4em;
      background-color: rgba(0, 0, 0, 0.5); } }

h1.section {
  font-weight: 400; }

.logo h1 a:link,
.logo h1 a:visited {
  color: #FFF; }

header aside h1 {
  margin-bottom: 9%; }

header aside h3 {
  margin-top: 6%; }

header aside h2.logo {
  background: transparent url(../img/gibriel.gif) 0 0 no-repeat;
  background-size: 100%;
  width: 250px;
  padding-bottom: 7.1%;
  display: block;
  margin: 0 auto;
  position: relative; }
  @media screen and (min-width: 30em) {
    header aside h2.logo {
      width: 300px; } }
  @media screen and (min-width: 47.9375em) {
    header aside h2.logo {
      width: 420px; } }
  @media screen and (min-width: 75.5em) {
    header aside h2.logo {
      width: 600px; } }

header aside h1,
header aside h3 {
  font-weight: 300;
  line-height: 140%;
  color: #FFF;
  text-transform: uppercase; }
  header aside h1 p,
  header aside h3 p {
    text-align: center; }

header aside h1 {
  font-size: 1.34rem; }
  @media screen and (min-width: 30em) {
    header aside h1 {
      font-size: 2rem; } }
  @media screen and (min-width: 47.9375em) {
    header aside h1 {
      font-size: 3rem; } }
  @media screen and (min-width: 75.5em) {
    header aside h1 {
      font-size: 4.4rem; } }
header aside h3 {
  font-size: 0.9711rem; }
  @media screen and (min-width: 30em) {
    header aside h3 {
      font-size: 1.17rem; } }
  @media screen and (min-width: 47.9375em) {
    header aside h3 {
      font-size: 1.638rem; } }
  @media screen and (min-width: 75.5em) {
    header aside h3 {
      font-size: 2.34rem; } }

h1.category {
  position: relative;
  font-size: 1em;
  text-align: center;
  top: -.8em;
  margin: 0 auto 2em;
  padding: 0 1em;
  background: #FFF;
  font-weight: 300;
  color: #bfbfbf;
  width: auto;
  display: inline; }

.single-page h1.category {
  text-align: left;
  width: auto;
  margin: 0 0 0 4em;
  display: block;
  top: 0; }

figcaption h3, figcaption h4 {
  line-height: 125%;
  text-align: center;
  color: #FFF; }
figcaption h3 {
  font-weight: 400; }
figcaption h4 {
  font-weight: 400;
  font-size: .85em; }

/* ========================================================================== */
/* !--------- LINKS --------------------------------------------------------- */
/* ========================================================================== */
a:link,
a:visited {
  color: #222;
  text-decoration: none; }

footer a:link, footer a:visited {
  color: #FFF;
  text-decoration: underline; }

a.active {
  color: #666; }

a:hover {
  color: #c2ba8c;
  text-decoration: none; }

/*
a.button:hover, .section-scroll-down h1 {
	background-color: #c2ba8c;
}
*/
/* ========================================================================== */
/* !--------- TYPOGRAFIE ---------------------------------------------------- */
/* ========================================================================== */
blockquote {
  font-style: italic;
  margin-left: 2em; }

p {
  text-align: left; }
  p img {
    margin-right: 2em;
    width: 85%; }
    @media screen and (min-width: 20em) and (max-width: 30em) {
      p img {
        width: 100%; } }
    @media screen and (min-width: 30em) {
      p img {
        width: 65%; } }
    @media screen and (min-width: 47.9375em) {
      p img {
        width: 50%; } }

article p {
  color: #FFF; }

article.about p {
  font-weight: 300;
  text-align: center;
  font-size: 1.3em;
  line-height: 300%;
  color: #fff; }

section#imprint {
  font-size: 75%; }

footer p {
  padding: 0;
  margin: 0; }

/* ========================================================================== */
/* !--------- LIST ---------------------------------------------------------- */
/* ========================================================================== */
.content ul li {
  list-style: none; }

ul.index {
  width: 100%; }
  @media screen and (max-width: 30em) {
    ul.index li {
      width: 100%; } }
  @media screen and (min-width: 47.9375em) {
    ul.index li {
      width: 31.12583%; } }
  @media screen and (min-width: 67.5em) {
    ul.index li {
      width: 22.51656%; } }

/* ========================================================================== */
/* !--------- MENU ---------------------------------------------------------- */
/* ========================================================================== */
div#icon {
  position: absolute;
  top: .7rem;
  left: 1rem;
  color: #FFF;
  display: none;
  z-index: 4; }
  @media screen and (max-width: 47.9375em) {
    div#icon {
      display: block; } }

@media screen and (max-width: 47.9375em) {
  div#icon.margin {
    left: 1rem; } }
a#menu-icon {
  width: 24px;
  height: 24px;
  background: transparent url(../img/menu.gif) 0 -24px no-repeat; }

.home a#menu-icon {
  background-position: 0 -24px; }

div#menu {
  text-align: right;
  font-weight: 300;
  margin-top: -2.7rem; }
  @media screen and (max-width: 47.9375em) {
    div#menu {
      float: left;
      margin-left: -20rem;
      height: 100%; }
      div#menu.margin {
        margin-left: -11rem; } }

.home div#menu {
  font-weight: 400; }

nav.horizontal ul,
nav.horizontal ul li {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0; }

@media screen and (min-width: 47.9375em) {
  nav.horizontal ul {
    text-align: right;
    display: inline-block;
    zoom: 1; } }
@media screen and (max-width: 47.9375em) {
  nav.horizontal ul {
    display: block;
    width: 10rem;
    text-align: left; } }

nav.horizontal ul li {
  padding: .5rem 0;
  font-weight: 300; }
  @media screen and (min-width: 47.9375em) {
    nav.horizontal ul li {
      display: inline-block;
      zoom: 1;
      text-align: right;
      border: none; } }
  @media screen and (max-width: 47.9375em) {
    nav.horizontal ul li {
      display: block;
      text-align: left;
      padding-left: 1.5rem;
      border-bottom: 1px solid #444; } }

@media screen and (max-width: 47.9375em) {
  nav.horizontal ul#langswitch {
    padding-left: 1.5rem; } }
nav.horizontal ul#langswitch li {
  padding-right: none; }
  @media screen and (max-width: 47.9375em) {
    nav.horizontal ul#langswitch li {
      display: inline-block;
      border-bottom: none;
      padding-left: 0; } }

nav.horizontal ul li a {
  padding: .2em .5em; }
  nav.horizontal ul li a:link, nav.horizontal ul li a:visited {
    color: #FFF; }
    @media screen and (max-width: 47.9375em) {
      nav.horizontal ul li a:link, nav.horizontal ul li a:visited {
        color: #000; } }
  nav.horizontal ul li a:hover, nav.horizontal ul li a:activ {
    background-color: #c2ba8c;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em; }
  nav.horizontal ul li a.active:link, nav.horizontal ul li a.active:visited {
    color: #c2ba8c; }
  nav.horizontal ul li a.active:hover {
    color: #FFF; }

div.section-scroll-down {
  width: 100%;
  padding: 1rem 0 0;
  background-color: #000; }
  div.section-scroll-down .scroll-down-inner {
    position: relative;
    top: 2rem; }
  div.section-scroll-down span {
    position: relative;
    top: -29px;
    display: block;
    margin: 0 auto;
    width: 160px;
    height: 45px;
    background: transparent url(../img/arrow-scrolldown-black.png) center top no-repeat;
    background-size: 100%;
    -webkit-transition: top 0.3s ease-out;
    -moz-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out; }
  div.section-scroll-down a {
    color: #FFF;
    width: 14rem; }
    div.section-scroll-down a:hover h1 {
      zoom: 1;
      filter: alpha(opacity=100);
      opacity: 1; }
    div.section-scroll-down a:hover span {
      top: 0; }
  div.section-scroll-down h1 {
    width: 14rem;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
    font-size: 1.66rem;
    margin-bottom: 2rem;
    letter-spacing: .2rem;
    padding: .5rem 0 .6rem;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out; }

/* ========================================================================== */
/* !---------IMAGEAREA IMAGES/VIDEO ----------------------------------------- */
/* ========================================================================== */
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  /* Default for 1600x900 videos 16:9 ratio*/
  padding-top: 0px;
  height: 0;
  overflow: hidden; }

div.gallery {
  text-align: center;
  padding-bottom: 3em;
  padding-top: 3em;
  	/*
  @media screen and (min-width: 67.5em){
  		padding-right: 16.5%;
  		padding-left: 16.5%;
  	}
  */ }
  @media screen and (min-width: 30em) {
    div.gallery {
      padding-right: 8.33333%;
      padding-left: 8.33333%; } }
  @media screen and (min-width: 47.9375em) {
    div.gallery {
      padding-right: 10%;
      padding-left: 10%; } }

@media screen and (max-width: 47.9375em) {
  .pure-u-1-2 div.gallery {
    padding-right: 15%;
    padding-left: 15%; } }
@media screen and (min-width: 67.5em) {
  .pure-u-1-2 div.gallery {
    padding-right: 10%;
    padding-left: 10%; } }

#counter {
  display: inline-block;
  float: left; }

#next, #prev {
  color: #888;
  position: absolute;
  top: 50%;
  z-index: 999;
  font-family: "helvetica neue", helvetica, ariel, sans-serif; }
  #next a, #prev a {
    font-weight: 300;
    color: #FFF;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    position: relative; }
    @media screen and (min-width: 20em) and (max-width: 30em) {
      #next a, #prev a {
        font-size: 3rem;
        top: -0.75rem; } }
    @media screen and (min-width: 30em) {
      #next a, #prev a {
        font-size: 5rem;
        top: -1.25rem; } }
    @media screen and (min-width: 47.9375em) {
      #next a, #prev a {
        font-size: 8rem;
        top: -2rem; } }
    @media screen and (min-width: 67.5em) {
      #next a, #prev a {
        font-size: 10rem;
        top: -2.5rem; } }
    #next a:hover, #prev a:hover {
      zoom: 1;
      filter: alpha(opacity=90);
      opacity: 0.9; }

#next {
  right: -5em; }
  @media screen and (max-width: 47.9375em) {
    #next {
      right: .5em; } }

#prev {
  left: -5em; }
  @media screen and (max-width: 47.9375em) {
    #prev {
      left: .5em; } }

#next a {
  background-position: right bottom; }

#pref a {
  background-position: left bottom; }

@media screen and (max-width: 30em) {
  .thumb-image.pure-g-r > .pure-u,
  .thumb-image.pure-g-r > [class*="pure-u-"] {
    width: 100%; } }
@media screen and (min-width: 30em) {
  .thumb-image.pure-g-r > .pure-u,
  .thumb-image.pure-g-r > [class*="pure-u-"] {
    width: 50%; } }

@media screen and (min-width: 30em) {
  .thumb-image.pure-g-r > .pure-u-1-3 {
    width: 50%; } }
@media screen and (min-width: 47.9375em) {
  .thumb-image.pure-g-r > .pure-u-1-3 {
    width: 33%; } }
@media screen and (min-width: 30em) {
  .thumb-image.pure-g-r > .pure-u-1-4 {
    width: 50%; } }
@media screen and (min-width: 47.9375em) {
  .thumb-image.pure-g-r > .pure-u-1-4 {
    width: 25%; } }

ul.thumb-image {
  margin: 0px;
  padding: 0px; }
  ul.thumb-image li a {
    display: block;
    padding-left: .5em;
    padding-right: .5em; }
  ul.thumb-image figure {
    margin: 0 4.16666% 2rem;
    padding-left: .5em;
    padding-right: .5em;
    text-align: center; }
    ul.thumb-image figure figcaption {
      background-color: rgba(0, 0, 0, 0.25);
      -moz-border-radius: .5em;
      -webkit-border-radius: .5em;
      border-radius: .5em; }

.transparent {
  zoom: 1;
  filter: alpha(opacity=13);
  opacity: 0.13; }

.overflow {
  overflow: hidden; }

.aside div.squarebox-teaser {
  position: relative; }
  .aside div.squarebox-teaser img {
    position: absolute; }
  @media screen and (max-width: 30em) {
    .aside div.squarebox-teaser {
      padding-bottom: 100%; }
      .aside div.squarebox-teaser img {
        width: 157.5%;
        left: -50%; } }
  @media screen and (min-width: 30em) {
    .aside div.squarebox-teaser {
      padding-bottom: 80%; }
      .aside div.squarebox-teaser img {
        width: 125.5%;
        left: -10%; } }
  @media screen and (min-width: 47.9375em) {
    .aside div.squarebox-teaser {
      padding-bottom: 63.7%; }
      .aside div.squarebox-teaser img {
        width: 100%;
        left: 0; } }

div.squareboxHalf {
  position: relative;
  padding-bottom: 66.66666%;
  width: 100%;
  background-color: #000; }
  div.squareboxHalf #fader {
    position: absolute;
    width: 100%; }

.cycle-slideshow img {
  height: 100%; }

div.squarebox-2-3 {
  position: relative;
  padding-bottom: 50%; }

div.squarebox-1-4 {
  position: relative;
  padding-bottom: 25%; }

div.squarebox {
  position: relative;
  padding-bottom: 100%;
  width: 100%; }
  div.squarebox img {
    position: absolute;
    width: 100%; }

/*
figure{
	overflow-x: hidden;
	height: 50%;
}
*/
.rounded {
  background-color: #FFF;
  -moz-border-radius-topleft: 30px;
  -webkit-border-top-left-radius: 30px;
  border-top-left-radius: 30px;
  -moz-border-radius-bottomright: 30px;
  -webkit-border-bottom-right-radius: 30px;
  border-bottom-right-radius: 30px;
  overflow: hidden; }

#fader.image {
  background-color: #000; }
  #fader.image figure {
    background-color: #000;
    display: none;
    height: 100%; }

.oldie #fader.image figure {
  display: block; }

figure.landscape img {
  margin: auto 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto; }
figure.portrait img {
  margin-right: 0;
  right: 0;
  width: auto;
  height: 100%; }

.ease {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.x-overflow {
  overflow-x: hidden; }

.angular {
  position: relative;
  width: 101%;
  top: -3rem;
  left: -1rem;
  padding-left: 4rem;
  padding-top: 4rem;
  padding-bottom: 2rem; }

.shadow {
  box-shadow: 30px 0px 30px rgba(20, 20, 20, 0.53);
  -webkit-box-shadow: 30px 0px 30px rgba(20, 20, 20, 0.53); }

/*# sourceMappingURL=styles.css.map */