/*GENERAL*/
h2, h3, h6 {
  text-transform: uppercase;
  letter-spacing: 2px;
  }
h2, h6 {
  display: inline-block;
  font-weight: 700;
}
h3 {
  font-weight: 300;
}
.small-copy {
  text-transform: none;
}
.help-block ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #b71c1c;
}
.alert-success {
    background-color: transparent !important;
    border: 0;
    font-size: 16px;
}
/* navbar */
.sidebar-nav {
  padding-top: 2vh;
  position: fixed;
  z-index: 20;
  width: 100%;
}
button.close {
  border: 0;
  padding: 0;
  margin-right: 12px;
  background-color: transparent;
}
#impressum .sidebar-nav, #impressum footer {
    background: inherit;
}
/*bg*/
.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
footer {
    position: fixed;
    bottom: 3vh;
    right: 0;
    width: 100vw;
    height: 40px;
    z-index: 20;
}
footer p {
  position: absolute;
  bottom: 0;
  right:0;
  width: auto;
  font-size: 14px;
  margin: 0;
}
footer a {
  font-size: 14px;
  color: #fff;
  bottom: 5px;
  position: relative;
  right: 3vw;
}
#kontakt footer a, #wirtschaft footer a, #privat footer a {
  color: #000;
}
#impressum {
  background-color: #000;
}
.impressum {
  position: relative;
  width: 60vw;
  top: 35vh;
  left: 3vw;
  color: #fff;
  display: table-cell;
  padding-bottom: 80px;
}
.impressum p {
    font-size: 14px;
    text-transform: uppercase;
}
#impressum h2 {
  font-size: 16px;
  font-weight: 700;
}
#impressum .copy{
  position: relative;
  top: 2vh;
}
span.imp-info {
    left: 90px;
    position: absolute;
}
/*HOME*/
#home h2 {
  font-size: 80px;
  color: #fff;
}
#home.carousel-caption {
  width: 35vw;
}
#home .item.mocu-brand.active.full-screen {
    background-size: 50% auto !important;
}
/*CSSTYPING*/
/*CSSTYPING*/
.animation_typing{
  width: 80%;
  height: 85%;
}
.css-typing
{
    color: black;
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 2s steps(60, end);
    animation: type 2s steps(60, end);
}
.pillar_sign{
  color: lightgrey;
  -webkit-animation: blink 1s infinite;
          animation: blink 1s infinite;
}
@-webkit-keyframes blink{
  to{opacity: .0;}
}
@keyframes blink{
  to{opacity: .0;}
}
@keyframes type{
    from { width: 0; }
}
.css-typing:nth-child(2){
  -webkit-animation: type2 4s steps(60, end);
          animation: type2 4s steps(60, end);
}
.css-typing:nth-child(3){
  -webkit-animation: type3 6s steps(60, end);
          animation: type3 6s steps(60, end);
}
.css-typing:nth-child(4){
  -webkit-animation: type4 8s steps(60, end);
          animation: type4 8s steps(60, end);
}
.css-typing:nth-child(5){
  -webkit-animation: type5 10s steps(60, end);
          animation: type5 10s steps(60, end);
}
@keyframes type{
  from { width: 0; }
}
@-webkit-keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}
@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}
@-webkit-keyframes type3{
  0%{width: 0;}
  65%{width: 0;}
  100%{ width: 100; }
}
@keyframes type3{
  0%{width: 0;}
  65%{width: 0;}
  100%{ width: 100; }
}
@-webkit-keyframes type4{
  0%{width: 0;}
  75%{width: 0;}
  100%{ width: 100; }
}
@keyframes type4{
  0%{width: 0;}
  75%{width: 0;}
  100%{ width: 100; }
}
@-webkit-keyframes type5{
  0%{width: 0;}
  85%{width: 0;}
  100%{ width: 100; }
}
@keyframes type5{
  0%{width: 0;}
  85%{width: 0;}
  100%{ width: 100; }
}
@-webkit-keyframes type{
    from { width: 0; }
}
/*END*/
.carousel.carousel-fade .item {
	-webkit-transition: opacity 0.01s ease-in-out;
	transition: opacity 0.01s ease-in-out;
	opacity:0.9;
}
.carousel.carousel-fade .active.item {
	opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
	left: 0;
	z-index: 2;
	opacity: 0;
	filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
	left: 0;
	z-index: 1;
}
.carousel.carousel-fade .carousel-control {
	z-index: 3;
}
.skip {
  position: fixed;
  bottom: 14vh;
  left:3vw;
  width: 30px;
  line-height:0.8;
}
.skip a {
  color: #000;
  font-size: 14px;
  text-transform: uppercase;
}
/*AGENTUR*/
#agentur .item {background-color:#000;}
#agentur .carousel-indicators li, #agentur h2, #agentur h3, #agentur p {
   color:#fff;
 }
  /*SLIDE-PAGE*/
#wirtschaft .col-md-6, #privat .col-md-6{
    padding-left: 0;
    padding-right: 0;
  }
ul.col-list {
    list-style-type: none;
    padding: 0;
    margin-top: 3vh;
  }
ul.col-list li {
    font-size: 16px;
    text-transform: uppercase;
}
 /*KONTAKT*/
#kontakt {
   background-image: url(../img/agentur_mocu_kontakt-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position:center center;
   background-attachment: fixed;
   background-color: #f1f1ef;
 }
#kontakt .navbar-default .navbar-nav > li > a,
#wirtschaft .navbar-default .navbar-nav > li > a,
#privat .navbar-default .navbar-nav > li > a {
    color: #000;
}
#kontakt .navbar-default .navbar-toggle .icon-bar,
#wirtschaft .navbar-default .navbar-toggle .icon-bar,
#privat .navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}
#kontakt .row {
    margin-left: 0;
    margin-right: 0;
}
.kontakt {
  margin-left: 3vw;
  padding-top: 28vh;
  z-index: 5;
  overflow: auto;
}
.contact-copy {
 margin-top: 100px;
}
.contact-copy > p {
    text-transform: none;
    letter-spacing: 1px;
}
.contact-copy a{
 color: #000;
}
#kontakt .col-xs-12, #kontakt .col-sm-8, #kontakt .col-sm-7, #impressum .col-sm-6 {
    padding-left: 0;
    padding-right: 0;
}
/* Input Styles */
 .form{
   width: 100%;
   padding: 0;
   padding-bottom: 4px;
   background:none;
   border-radius:0;
   border: none;
   border-bottom:2px solid rgba(0, 0, 0, 1);
   margin-bottom:5px;
   color: #000 !important;
   -webkit-transition: all 0.4s;
   transition: all 0.4s;
   font: 300 14px/1.8 'Open Sans', sans-serif;
   z-index:0;
 }
::-webkit-input-placeholder {color: #000; text-transform: uppercase; font: 300 14px/1.8 'Open Sans', sans-serif;}
::-moz-placeholder {color: #000;text-transform:uppercase; font: 300 14px/1.8 'Open Sans', sans-serif;}
:-ms-input-placeholder {color: #000;text-transform:uppercase; font: 300 14px/1.8 'Open Sans', sans-serif;}
:-moz-placeholder {color: #000;text-transform:uppercase; font: 300 14px/1.8 'Open Sans', sans-serif;}
 .form:hover{
   border-bottom:2px solid #b2b2b2;
 }
 .form:focus{
   color: white;
   outline: none;
   border-bottom:2px solid #b2b2b2;
 }
 .textarea{
   height: 80px;
   max-width: 100%;
 }
/* Generic Button Styles */
 .button{
   padding:8px 12px;
   background:#0A5175;
   display: block;
   width:120px;
   margin:10px 0 0px 0;
   border-radius:3px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   text-align:center;
   font-size:0.8em;
 }
 .button:hover{
   background:#8BC3A3;
   color:white;
 }
/* Send Button Styles */
 .form-btn{
   position: absolute;
   width:auto;
   font: 300 14px/1.42857143 'Open Sans', sans-serif;
   text-transform: uppercase;
   display: block;
   height: auto;
   border:0;
   right: 0;
   background-color: transparent;
   padding: 0;
 }
 .form-btn:hover{
   color: #878787;
 }
 .form-btn:active{
   opacity: 0.9;
 }
center{
 margin-top:330px;
}
input {
   position: relative;
   z-index: 9999;
}

/*RESPONSIVE*/

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
    width: 250px !important;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .contact-copy {
    margin-top: 30px;
  }
  #impressum .copy{
  top: 0;
  }
}
@media (max-width: 768px) {
  #home h2 {
  font-size: 36px;
  }
  #home .carousel-caption {
  top: 37vh;
  }
  .contact-copy {
  margin-top: 16px;
  }
  .impressum {
  width: 94vw;
  top: 14vh;
  }
  .kontakt {
    padding-top: 14vh;
    padding-bottom: 80px;
    width: 94vw;
  }
  .navbar-collapse[aria-expanded="true"] {
    background-color: #000;
    height:100vh;
    width:100vw;
    position: absolute;
    top: 0;
    z-index: 20;
    border: 0;
    padding-top: 50px;
}
  #impressum .sidebar-nav, #impressum footer {
    background: inherit;
  }
  #kontakt .navbar-collapse[aria-expanded="true"],
  #wirtschaft .navbar-collapse[aria-expanded="true"],
  #privat .navbar-collapse[aria-expanded="true"] {
    background-color: #f1f1ef !important;
}
  #kontakt {
       background-image: none;
       background-color: #f1f1ef ;
    }
  .sidebar-nav {
      padding-top: 0 !important;
  }
  #kontakt .sidebar-nav, #kontakt footer {
      background:inherit;
  }
  .navbar-toggle {
    z-index: 25;
    padding-top: 25px;
}
  #home .item.mocu-brand.active.full-screen {
      background-size: 70% auto;
}
    }
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
    .sidebar-nav .navbar .navbar-collapse {
      padding: 0;
      max-height: none;
    }
    .sidebar-nav .navbar ul {
      float: none;
      display: block;
    }
    .sidebar-nav .navbar li {
      float: none;
      display: block;
    }
    #home .item.mocu-brand.active.full-screen {
          background-size: 70% auto !important;
      }
    .contact-copy {
      margin-top: 30px;
    }
    .impressum {
    top: 25vh;
    }
    #impressum .copy {
      top: 2vh;
    }
    .kontakt {
    padding-top: 25vh;
    }
}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 991px)
                            {
    #home h2 {
    font-size: 64px;
}
}

@media screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (orientation: landscape) {
    .kontakt {
      padding-top: 24vh;
    }
    .impressum {
    top: 24vh;
    }
    footer {
        bottom: 0;
    }
    footer a {
      bottom: 10px;
    }
}
@media screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (orientation: landscape) {
    .kontakt {
      padding-top: 24vh;
  }
    .impressum {
    top: 24vh;
  }
    #home .carousel-caption {
    top: 20vh;
  }
    h2, h3 {
    font-size: 16px;
  }
  .carousel-control {
    display: none;
  }
  footer {
      bottom: 0;
  }
  footer a {
  bottom: 10px;
}
}
@media screen
  and (min-device-width: 360px)
  and (max-device-width: 640px)
  and (orientation: portrait) {
    #wirtschaft .col-xs-4, #privat .col-xs-4 {
      width: 80%;
    }
}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait) {
    .sidebar-nav {
      padding-top: 3vh !important;
    }
    .carousel-control.left {
      left:42vw;
    }
    .carousel-control {
    font-size: 36px;
    top: auto;
    bottom: 3vh;
    z-index: 5;
  }
  .carousel-control.right {
    left: 54vw;
  }
  footer {
    bottom: 3vh;
    z-index: 1;
}
  footer a {
    bottom: 5px;
}
}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape) {
    #kontakt {background-image: url(../img/agentur_mocu_kontakt-bg.jpg);
    }
    .kontakt {padding-top: 20vh;}
    .carousel-control.left {
    right: 10vw;
}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 768px),
only screen and (                -webkit-min-device-pixel-ratio: 2) and (max-width: 768px),
only screen and (                min-resolution: 192dpi) and (max-width: 768px),
only screen and (                -webkit-min-device-pixel-ratio: 2)  and (max-width: 768px),
only screen and (                min-resolution: 2dppx)  and (max-width: 768px) {
  #home .item.mocu-brand.active.full-screen {
        background-size: 90% auto !important;
    }
    .carousel-control.left {
      left:38vw;
    }
    .carousel-control {
    font-size: 30px;
    top: auto;
    bottom: 2vh;
    z-index: 5;
  }
  .carousel-control.right {
    left: 54vw;
  }
  footer {
    bottom: 0vh;
    height: 70px;
  }
  footer a {
    bottom: 25px;
  }
}