/*  Author:   Martin Stettler (http://dieweberei.ch/)
  	Version:  26112015
*/

/*  FONTS

*/


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html,
body,
ul {
  margin:0;
  padding:0;
  background-color: #c0b6aa; /* color def for form */
  font: normal 18px 'Ubuntu', Arial, sans-serif; /* no color def for form! */
  line-height: 1;
}

li {
  list-style-type: none; /* for text-danger in form */
}

h1 {
    margin: 0;
    padding: 0;
}

h2 {
  font-weight: 400;
  color: #9cb4be;
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 70px 0;
}

h3,
h3 p {
  font-weight: 300;
  color: #FFF;
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 30px 0;
}

h2,
h3 {
  -ms-word-break: break-all;
      word-break: break-all;
      /* Non standard for webkit */
      word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word;
}

@media (min-width: 480px) {
  
  h2,
  h3 {
    font-size: 36px;
  }
}

p {
  color: #FFF;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 50px;
}

p.date {
  text-transform: uppercase;
  font-weight: 300;
}

b {
  font-weight: 400;
}

a,
a:hover {
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}

a,
a:hover,
a:visited,
a:active {
  text-decoration: none !important;
}

.logo,
.logo.shrink h1,
a.btn-news,
.social-item {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

img {
    max-width: 100%;
    height: auto; }

/* not found */

h6 {
  font-weight: 300;
  color: #FFF;
  font-size: 48px;
  text-transform: uppercase;
  margin: 30px 0;
}
.not-found,
.not-found p {
  text-align: center;
  color: #000;
}

.not-found a {
  color: #FFF;
}

.not-found a:hover,
.not-found a:active {
  color: #000;
}

/* ==========================================================================
   Browse Happy prompt lte IE 7
   ========================================================================== */

.browsehappy {
  margin: 0.2em 0;
  background: #cc0033;
  color: #FFF;
  padding: 0.5em;
}

.browsehappy a {
  color: #FFF;
  text-decoration: underline;
}

.browsehappy a:hover {
  text-decoration: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.logo {
    position: relative;
    padding-top: 80px;
    margin: 0;
    width: 200px;
    background: transparent; /* #414042 */
    z-index: 1200;
}

.logo img {
    width: 200px;
}

@media (min-width: 480px) {

   .logo.shrink {
        position: fixed;
        padding-top: 10px;
        padding-bottom: 10px;  
    }

    .logo.shrink img {
        width: 200px;  
    }
}

@media (min-width: 769px) {

   .logo {
        padding-top: 100px;
        padding-bottom: 75px;
    } 

    .logo,
    .logo img {
        width: 250px;
    }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

html, body {
  height: 100%;
}

body {

}

.main-navigation {
    position: relative;
    float: right;
    height: auto;
    width: 155px;
    border: 0;
    margin: 0;
    padding-top: 120px;
    padding-bottom: 75px;
    background: transparent; /* #414042 */
    z-index: 1200;
}

.main-navigation.shrink {
    position: absolute;
    right: 15px;
    padding-top: 20px;
    padding-bottom: 0px;
}

@media (max-width: 480px) {

    .main-navigation {
        position: absolute;
        top: 100px;
        right: 15px;
    }
}

@media (max-width: 768px) {

    .main-navigation {
        position: absolute;
        top: 0;
        padding-top: 10px;
        padding-bottom: 0px;
        right: 15px;
    }
}

.dropdown {
    position:relative;
    top: 0;
    padding-bottom: 10px;
    margin: 0;
    border: 0;
    background: transparent;
    border: 0;
}

.dropdown a {
    color: #FFF;
    text-decoration: none;
}

.dropdown-menu { /* b.3411 ff */
  width: 100%;
  min-width: 155px; /* depends menu length */
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #9cb4be;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.dropdown-menu li {
    font-size: 21px;
    font-weight: 300;
    font-family: 'Ubuntu' Arial, sans-serif;
    border-top: 1px solid #9cb4be;
    border-right: 1px solid #9cb4be;
    border-bottom: 1px solid #414042;
    border-left: 1px solid #9cb4be;
    color: #000;
}

.dropdown-menu li:last-child {
    border-bottom:  1px solid #9cb4be;
}

.dropdown-menu li:hover {
    border:  1px solid #FFF;
    border-bottom: 1px solid #414042;
}

.dropdown-menu li:last-child:hover {
    border-bottom:  1px solid #FFF;
}


.icon-bar {
  display: block;
  width: 35px;
  height: 3px;
  margin: 4px 20px 4px 0;
  border-radius: 0;
  background-color: #FFF;
}

.button-label {
    padding-left: 30px;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Ubuntu' Arial, sans-serif;
    text-transform: uppercase;
}

.button-label:before {
  content: '';
  width: 0;
  height: 50%;
  position: absolute;
  border: 1px solid #FFF;
  top: 15%;
  left: 60px;
}

.button-bars {
  display: inline-block;
  float: left;
}


@media (min-width: 0) {
  .navbar-toggle {
    display: block; /* force showing the toggle */
  }
}

/* ==========================================================================
   CONTENT
   ========================================================================== */
/*.row {
  border: 1px solid yellow;
}
.col-md-12,
.col-md-4,
.col-md-6,
.col {
    border: 1px solid red;
}
*/

section .bg-dark {
  background: #414042;
}

/* scrolling to anchor correctly */
#service,
#about {
  margin-top: -180px; padding-top: 180px;
}

@media (min-width: 768px) {
  #service,
  #about {
    margin-top: -300px; padding-top: 300px;
  }
}

.menu.shrink {
    position: fixed;
    margin: 0 auto; /* centering in container */
    left: 0; /* centering in container */
    right: 0; /* centering in container */
    height: 80px;
    z-index: 1200;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
}

@media (max-width: 479px) {

    .menu.shrink {
        height: 60px;
    }
}

@media (max-width: 479px) {
  .menu.shrink .logo {
    display: none;
    padding: 0;
  }
}

section .news,
section .service,
section .about,
.imprint {
  padding-top: 45px;
  padding-bottom: 45px;
}

.footer {
  padding-top: 45px;
}

.connect {
  margin-top: 45px;
}

@media (min-width: 1200px) {

    .container {
        width: 100%;
        max-width: 1400px;
    }

    section .menu {
        padding: 0 150px;
    }

    section .news,
    section .service,
    section .about,
    .footer,
    .imprint {
        padding: 45px 150px;
    } 
}

.portrait {
  text-align: left;
}

@media (min-width: 992px) {

  .portrait {
    text-align: right;
  }
}

.portrait img {
  max-width: 100%;
}

/* NEWS */
.item-blue,
#item1 {
  background: #9cb4be;
}

#item1 .content-inner a:hover,
#item1 .content-inner a:active {
  color: #9cb4be;
}

.item-brown,
#item2 {
  background: #a89989;
}

#item2 .content-inner a:hover,
#item2 .content-inner a:active {
  color: #a89989;
}

.item-red,
#item3 {
  background: #896a6f;
}

#item3 .content-inner a:hover,
#item3 .content-inner a:active {
  color: #896a6f;
}

.item-gold,
#item4 {
  background: #9b9773;
}

#item4 .content-inner a:hover,
#item4 .content-inner a:active {
  color: #9b9773;
}

.item-orange,
#item5 {
  background: #a1654d;
}

#item5 .content-inner a:hover,
#item5 .content-inner a:active {
  color: #a1654d;
}

.item-green,
#item6 {
  background: #6d8282;
}

#item6 .content-inner a:hover,
#item6 .content-inner a:active {
  color: #6d8282;
}

.gallery-expander {
  background: #FFF;
}

.gallery-contents h2 {
  color: #000;
  margin: 0 0 30px 0;
}

.gallery-contents p {
  font-size: 21px;
  margin-bottom: 25px;
  text-transform: uppercase;
  font-weight: 300;
  color: #000;
  line-height: 1.2;
}

.btn-gallery {
  border: 2px solid #000;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  width: 95px;
  padding: 5px 10px;
  font-weight: 400;
}

.btn-gallery:hover {
  background: #FFF;
  border-color: #FFF;
}

.content-inner {
  width: auto;
  padding: 90px 0;
}

.content-inner p {
  font-size: 21px;
}

.content-inner a {
  color: #000;
  text-decoration: none;
}

.content-inner a:hover,
.content-inner a:active {
  color: #000;
}

.content-inner img {
  padding-bottom: 35px;
}

.icon-times {
  font-family: 'Ubuntu', Arial, sans-serif;
  font-weight: 300;
  border: 1px solid black;
}

.gallery-expander-contents h2,
.gallery-expander-contents p {
  color: #000;
  margin: 0 0 35px 0;
}

.image {
  text-align: left;
  padding-bottom: 0px;
}

@media (min-width: 992px) {

  .image {
    text-align: right;
  }
}
.image img {
  max-width: 100%;
}

ul.default {
  background: transparent;
}

ul.default li {
  list-style-image: none;
  text-align: left;
  font-weight: 300;
  line-height: 1.4;
  color: #FFF;
}

ul.default li a,
p a {
  text-decoration: none;
  color: #FFF;
}

ul.default li a:hover,
ul.default li a:active,
p a:hover,
p a:active {
  text-decoration: none;
  color: #9cb4be;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer .footer,
footer .social,
footer .connect {
  background: #9cb4be;
}

.social-item  {
  margin: 45px 0;
  border: 2px solid #000;
}

.social-item:hover {
  background: #FFF;
  border-color: #FFF;
}

@media (max-width: 767px) {

    .connect h2 {
      text-align: center;
    }

    .footer .logo2 {
      display: none;
    }
}

.connect h2,
.footer p {
  color: #000;
  margin: 0;
}

.social-item a h4 {
  color: #000;
  text-transform: uppercase;
  font-size: 34px;
  font-weight: 400;
  text-align: center;
  margin: 0;
  padding: 18px 0;
}

.social-item a:hover {
  text-decoration: none;
}

footer .imprint {
  background: #414042;
}

.imprint p {
  margin-bottom: 0;
}

.imprint a {
  color: #FFF;
}

.imprint a:hover,
.imprint a:active {
  color: #9cb4be;
  text-decoration: none;
}

/* Imprint */
.hidden {
  display: none;
}

#imprint-inside {
  margin-top: 20px;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::-moz-selection {
    text-shadow: none;
    background: #ddd8d1;
}

::selection {
    text-shadow: none;
    background: #ddd8d1;
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #ddd8d1;
}