@import url('http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic');
/*	Resets	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
  display: block;
}

a img {
  border: 0;
}

input {
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Selection colours (easy to forget) */
::selection 	 	{background: @green;color:#fff;}
::-moz-selection 	{background: @green;color:#fff;}
img::selection 		{background: transparent;color:#fff;}
img::-moz-selection	{background: transparent;color:#fff;}
body {-webkit-tap-highlight-color: @green;}

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

.transition(@time){
  -webkit-transition: all (@time);
  -moz-transition: all (@time);
  -ms-transition: all (@time);
  -o-transition: all (@time);
  transition: all (@time);
}

.pointer {
  cursor: pointer;
}

.italic {
  font-style: italic;
}

.floatLeft {
  float:left;
}

.buttonWrapper {
  display: inline-block;
  & > div{
    padding: 0 !important;
  }
}


/* ------------------------------------------------------------------- */
/* ------------------------- Galerie --------------------------------- */

.slide {
  background-position: center center !important;
  background-size: cover !important;
  &:first-of-type{
    background: url('img/eindruecke/galerie_01.jpg');
  }
  &:nth-of-type(2){
    background: url('img/eindruecke/galerie_02.jpg');
  }
  &:nth-of-type(3){
    background: url('img/eindruecke/galerie_03.jpg');
  }
  &:nth-of-type(4){
    background: url('img/eindruecke/galerie_04.jpg');
  }
  &:nth-of-type(5){
    background: url('img/eindruecke/galerie_05.jpg');
  }
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: transparent;
  border: 2px solid #fff;
}

/* ------------------------------------------------------------------- */
/* ------------------------- Variables ------------------------------- */

/* -- Font-Colors -- */
@mainfont: #fff;

/* -- BG-Colors -- */
.greenBG(@alpha) {
  background:  rgba(153,204,51,(@alpha));
}
.grey(@alpha) {
  background:  rgba(26,26,26,(@alpha));
}

@green:  rgba(153,204,51,1);
@blue: rgba(102,153,153,1);
@grey: rgba(26,26,26,1);

/* ------------------------------------------------------------------- */

html {
  font-family: 'Droid Serif', serif;
  color: @mainfont;
  height: 100%;
}
body {
  background: @grey;
  font-size: 18px;
  #logo {
    position: fixed;
    top: 40px;
    left: 90px;
    z-index: 200;
    img{
      width: 50%;
    }
  }
  #menuButton {
    position: fixed;
    z-index: 200;
    top: 40px;
    right: 90px;
    font-size: 1.6em;
    .pointer;
  }
  #menu {
    display: none;
    z-index: 180;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    .grey(0.95);
    .menu-section {
      display: table;
      table-layout: fixed;
      width: 100%;
      height: 100%;
      .menu-tableCell {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        height: 100%;
      }
    }
    ul {
      list-style: none;
      li {
        &:last-of-type {
          color: @green;
          margin-top: 10px;
        }
        a{
          display: inline-block;
          padding: 20px 0;
        }
      }
    }
  }
  a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    &:hover,
    &:active {
    }
  }
  #fullpage {
    z-index: 100;
    .col-100{
      max-width: 1000px;
      display: inline-block;
      padding: 40px 90px;
    }
    h1 {
      font-size: 1.5em;
      text-transform: uppercase;
    }
    h2{
      font-size: .9em;
      margin-bottom: 1.5em;
    }
    p {
      margin-bottom: 1em;
    }
    .section{
      text-align: center;
      position: relative;
      &:after {
        content: "";
        opacity: 1;
        z-index: -1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
       background-position: center center !important;
        background-size: cover !important;
      }
      .button {
        &.floatLeft:first-of-type{
          margin-right: 50px;
        }
        &.floatLeft:last-of-type{
          margin-left: 40px;
        }
        i {
          display: block;
          font-size: 1.8em;
          margin: 50px 0 10px;
        }
      }
      &#home{
        &:after {
          background: url('img/bg_startseite.jpg');
        }
        h1 {
          margin-bottom: .5em;
          text-transform: none;
        }
        p {
          font-size: 1.25em
        }
      }
      &#gestern_heute {
        &:after {
          background: url('img/bg_historie_1.jpg');
        }
      }
      &#kulinarisch {
        &:after {
          background: url('img/bg_kulinarisches.jpg');
        }
        .fp-tableCell {
          //vertical-align: bottom;
        }
        .grunerStoerer{
          padding: 60px 90px;
          .greenBG(0.6);
          position: relative;
          bottom: 0;
          .col-100 {
            padding: 0 90px;
          }
        }
      }
      &#freizeit {
        &:after {
          background: url('img/bg_freizeit.jpg');
        }
        .col-100 {
          padding-bottom: 0;
        }
        .greenContainerWrapper{
          .greenContainer {
            .greenBG(0.6);
            width: 31.5%;
            display: block;
            font-size: .9em;
            text-align: left;
            padding: 30px;
            margin-right: 2%;
            float:left;
            &:last-of-type {
              margin-right: 0;
            }
            h3 {
              margin-bottom: 20px;
            }
            p {
              margin-bottom: 0;
            }
          }
        }
      }
      &#eventz {
        &:after {
          background: url('img/bg_events.jpg');
        }
      }
      &#contact {
        &:after {
          background: url('img/bg_kontakt.jpg');
        }
        a {
          color: @green;
        }
        .button {
          a {
            color: #fff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 850px) {
  body {
    //font-size: 20px;
    #logo {
      img {
        width: 40%;
      }
    }
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  body {
    font-size: 16px;
    #fullpage{
      .section {
        &#freizeit {
          .greenContainerWrapper {
            .greenContainer {
              font-size: 1em;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .fp-controlArrow.fp-next {
    right: 20px;
  }.fp-controlArrow.fp-prev {
    left: 20px;
  }
  body {
    font-size: 16px;
    #logo {
      top: 20px;
      left: 50%;
      margin-left: -60px;
    }
    #menuButton {
      top: 20px;
      right: 20px;
      font-size: 1.8em;
    }
    #fullpage {
      .col-100 {
        width: 100%;
        margin: 0;
        padding: 40px 20px;
      }
      .section {
        .fp-tableCell {
          padding: 0;
        }
        &#kulinarisch {
          .grunerStoerer{
            padding: 40px 20px;
          }
          .fp-tableCell {
            vertical-align: middle;
          }
        }
        &#freizeit {
          .greenContainerWrapper {
            .greenContainer {
              font-size: .9em;
              text-align: left;
              margin-bottom: 20px;
              float:none;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 560px) {
  body {
    font-size: 12px;
    #logo {
      margin-left: -46px;
    }
    #menu {
      padding-top: 80px;
        ul {
          li{
            a {
              padding: 10px 0;
            }
          }
        }
    }
    #fullpage {
      .col-100:first-child {
        padding-top: 120px;
      }
      #kulinarisch {
        &.section {
          .grunerStoerer {
            .col-100 {
              padding: 0;
            }
          }
        }
      }

      #contact {
        p:last-of-type {
          margin-bottom: 0;
        }
      }

      .section {
        .button{
          i {
            margin: 25px 0 10px;
          }
          &.floatLeft:first-of-type{
            margin-right: 0;
          }
        }
      }
    }
  }
}