html,body {
  padding:0;margin:0;
  background:white;
}
/* color concept */
.color-1 { 
  background-color:#b19cab !important;
  background-color:#8a7330 !important;
  background-color:#a89459 !important;
  background-color:#9EB6DA !important;
  
  background-color:#D5B8B4!important;
  background-color:#A69460!important;
  
}
.color-2 { 
  background-color:#beaeb0 !important;
  background-color:#c0b17d !important;
  background-color:#AEC2DB !important;
  
  background-color:#C7CDD8!important;
  background-color:#D9D8DD!important;
}
.color-3 { 
  background-color:#ca9b64 !important;
  background-color:#8b8975 !important;
  background-color:#838E56 !important;
  
  background-color:#595957!important;
  background-color:#999995!important;
  background-color:#A68D6F!important;
}
.color-4 { 
  background-color:#af8d69 !important;
  background-color:#bea481 !important;
  background-color:#A2A58A !important;
  
  background-color:#D8AFA9!important;
  background-color:#F2E0D0!important;
}
.color-5 { 
  background-color:#f1dcd4 !important;
  background-color:#beaf4f !important;
  background-color:#D8D7D5 !important;
  
  background-color:#7C8594!important;
  background-color:#F2EEEB!important;
}


#overlay {
  
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: white;
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  transform: scale(0.8);
  }
#overlay.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  }

#overlay .close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 30px;
  color: black;
  opacity: 1;
  }
#overlay .close i {
  color: black;
  opacity: 1;
  }

#overlay .inner {
  max-width: 800px;
  width: 100%;
  min-height: 200px;
  }

footer {
  margin-bottom:80px;
}
footer a {
  color:black;
}
.logo-big {
  margin-top:50px;
  max-width:300px;
  z-index:1000;
}
.slogan-big {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
}
.slogan-big-inner {
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:60px;
  width: 100%;
  text-align: center;  
  *font-family:"Futura","Century Gothic";
  font-weight:100;
  text-transform:lowercase;
}
.slogan-bottom-right {
  position:absolute;
  right:100px;
  bottom:100px;
}
.slogan-bottom-right-inner {
  font-size:60px;
  text-align: right;  
  color: white;
  *font-family:"Futura","Century Gothic";
  font-weight:100;
  text-transform:lowercase;
}
hr {
  border-color:white;
}
/* header */
#project-content {
  min-height:100vh; 
}
.inner-content {
  
  padding-bottom:100px;
}
.background-image {
  top:0;
  height:100vh;
  width:100%;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}
.scroll-down {
  position:absolute;
  bottom:30px;
  left:0;
  text-align:center;
  color:white;
  width:100%;
  font-size:45px;
}
.scroll-down:hover {
  color:rgba(255,255,255,0.5);
}

.postit {
  position:fixed;
  z-index:0;
  
  max-width:400px;
  *position:absolute;
  line-height:1.6;
  font-family: 'Open Sans';
  font-size:18px;
  text-align:center;
  background:#efde2e;
  background:rgba(255,255,255,0.8);
  background:rgba(200,0,0,0.5);
  background:#f1dcd4;
  padding:20px;
  z-index:0;
  opacity:1;
  -webkit-transition:opacity 1000ms ease;
  -moz-transition:opacity 1000ms ease;
}
.postit.h {
  opacity:0;
  *-webkit-transform:rotateX(90deg);
  *-moz-transform:rotateX(90deg);
  *-ms-transform:rotateX(90deg);
}
.postit a {
  color:black;
}

/* navigation */
.white {
  background:white;
  z-index:100;
  position:absolute;
  width:100%;
}
nav {
  width:100%;
  z-index:10;
  min-height:130px;
  padding-bottom:50px;
  background:#fff;
  *border-bottom:1px solid #eee;
}
nav .container {
  position:relative;
}
nav .logo {
  max-height:60px;
  margin-top:35px;
  *display:none;
  z-index:3;
  position:absolute;
  *left:0;
}
nav .top-nav {
  *float:right;
  text-align:center;
  padding-left:0;
  margin-left:0;
}
nav ul {
  width:100%;
  *position:absolute;
  left:0;
  padding-left:0;
  margin-left:0;
  z-index:2;
  
}
nav .top-nav li {
  display:inline-block;
  *float:left;
  list-style:none;
  line-height:80px;
  vertical-align:middle;
  font-family: 'Cutive Mono';
  margin: 0 10px;
}
nav .top-nav li a {
  color:black;
  text-transform:uppercase;
  text-transform:lowercase;
}


/* left nav */
.servus-nav {
  margin-left:0;
  padding-left:0;
  
}
.servus-nav li {
  list-style:none;
  font-family:'Open Sans';
  text-transform:uppercase;
  margin-bottom:15px;
  text-align:right;
  margin-left:0;
  
  padding-left:0;
  
}
.servus-nav li a{
  color:#aaa;
  font-size:22px;
  font-weight:100;
  text-transform:lowercase;
}
.servus-nav li a:hover {
  color:black;
}
.servus-nav li a.active{
  background:#efde2e;
  color:black;
}


/* servus box layout */

.servus-row {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  margin:-10px;
}
.servus-box {
  float:left;
  padding:10px;
  -webkit-transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -ms-transition:all 300ms ease;
  -webkit-transform:rotateX(0deg);
  -moz-transform:rotateX(0deg);
  -ms-transform:rotateX(0deg);
}
.servus-box.out {
  *-webkit-transform:scale(0.5);
  -webkit-transform:rotateX(90deg);
  -moz-transform:rotateX(90deg);
  -ms-transform:rotateX(90deg);
  opacity:0.5;
}
.servus-box-inner, .servus-box-inner-small {
  
  width:100%;
  position: relative;
}
.servus-box-third {
  width:33.3%;
  
}
.servus-box-two-third {
  width:66.6%;
  
}
.servus-box-half {
  width:50%;
}
.servus-box-quarter {
  width:25%;
}
.servus-box-full {
  width:100%;
}
.third-column {
  width:33.3%;
  float:left;
}
.half-column {
  width:50%;
  float:left;
}
.fix-top-margin {
  margin-top:-10px; 
}
.servus-box-inner:before {
  content:     "";
  display:     block;
  padding-top: 100%; /* initial ratio of 1:1*/
}

.servus-box-flexible .servus-box-inner:before {
  padding-top: 0 !important;
}

.servus-box-flexible .servus-content {
  position: static !important;
} 


.servus-box-inner-small:before {
  content:     "";
  display:     block;
  padding-top: 64.4%; /* Fallback!! */
  padding-top: calc((100% - 10px) / 3 * 2)
}

.servus-box .servus-content {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  background:#eee;
  background-size:cover;
  background-position:center;
  padding:30px;
  *box-sizing:content-box;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  *overflow-y: scroll;
}
.visionsbilder {
  background-position:center top !important;
}
.servus-content h1 {
  padding-top:30%;
  font-size:30px;
  font-weight:100;
  text-transform:lowercase;
  text-align:center;
}
.servus-box h1 small {
  color:inherit;
  font-size:16px;
  display:block;
  margin-top:20px;
}
.servus-content h2 {
  color:red;
  color:black;
  font-size:20px;
  margin-bottom:10px;
}
.servus-box a {
  *margin-top:10%;
  *display:inline-block;
  color:black;
}
.servus-content ul {
  padding:0;
}
.servus-content li {
  list-style:none;
  margin-bottom:5px;
}
.servus-content p, .servus-content li {
  font-size:18px;
  font-weight:300;
}
@media screen and (max-width:1200px) {
.servus-content p, .servus-content li {
  font-size:16px;
}
}

.servus-box a:hover, .servus-box a.active {
  *color:red !important;
  *font-weight:bold;
  color:#888;
  color:white;
}


.servus-box-scroll-wrapper {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  overflow:hidden;
}
.servus-box-scroller{
  -webkit-transition:all 450ms ease;
  -moz-transition:all 450ms ease;
  display:block;
  position:absolute;
  height:100%;
  z-index:10001;
  width:100%;
  
}
.servus-box-content-slide {
  display:inline-block;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  padding:30px;
  background:#aaa;
  overflow:scroll;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
/* scroller */
.content-wrapper {
  position:relative;
  width:100%;
  z-index:1;
  background:white;
  overflow-x:hidden;
  overflow-y:hidden;
  height:800px;
}


.content-scroller {
  -webkit-transition:all 450ms ease;
  -moz-transition:all 450ms ease;
  display:block;
  position:relative;
  height:100%;
  z-index:1000;
  
}

.content-slide {
  display:inline-block;
  width:100%;
  position:absolute;
  top:0;
  padding-top:10px;
  
}

/* seminar */
.seminar {
  
}

.seminar h2 {
  color:black;
  font-size:28px;
  font-weight:300;
  margin-bottom:30px;
}
.seminar-kat h2:first-child {
  margin-top:0px;
}
.seminar-kat h2 {
  margin-top:50px;
  color:black;
  font-size:28px;
  *font-size:16px;
  font-weight:300;
  *font-weight:700;
  margin-bottom:30px;
}
.seminar-kat p, .seminar-kat li {
  font-size:16px;
  *font-weight:700;
}
.seminar h3 {
  font-size:16px;
  font-weight:700;
}
.seminar p,.seminar li {
  font-size:16px;
  position:relative;
  font-weight:300;
}
.seminar li {
  margin-bottom:5px;
  list-style:none;
}
.seminar li:before {
  content:'\f00c';
  position:absolute;
  left:-20px;
  margin-top:5px;
  font: normal normal normal 14px/1 FontAwesome;
}
.seminar ul {
  margin-left:0;
  padding-left:20px;
}

/* team */

.team h1 {
  position:absolute;
  bottom:0;
  left:0;
  padding-top:0%;
  padding:20px;
  background:rgba(0,0,0,0.7);
  font-size:18px;
  width:100%;
  margin-bottom:0;
  color:white;
}
@media screen and (max-width:1200px) {
.team h1 {
  font-size:16px;
}
}

/* partner */
.partner {
  padding:30px 0px;
  *min-height:300px;
}
.partner h3 {
  font-size:16px;
  font-weight:700;
  min-height:40px;
}
.partner .img {
  width:100%;
  height:100px;
  margin-bottom:10px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:white;
}


.nav-toggle-button {
  float:right;
  color:black;
  font-size:32px;
  margin-top:35px;
}

@media screen and (max-width:766px) {
.background-image {
  background-attachment: scroll;
}

.slogan-bottom-right {
  right: 20px;
}
.slogan-bottom-right-inner {
  font-size: 20px;
}



.servus-box-third {
  width:100%;
  
}
.servus-box-two-third {
  width:100%;
  
}
.servus-box-half {
  width:100%;
}
.servus-box-quarter {
  width:100%;
}
.servus-box-full {
  width:100%;
}
.third-column {
  width:100%;
  float:left;
}
.half-column {
  width:100%;
  float:left;
}

}