html,
body {
  margin: 0px !important;
  padding: 0px !important;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: "Roboto 200", sans-serif;
}
a,
button,
li,
.form-group span .fa {
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a,
a:focus,
a:visited,
a:hover {
  text-decoration: none;
  font-style: normal;
  color: #888;
}
section {
  position: relative;
}
section h1 {
  margin: 0 0 40px 0;
  font-size: 40px;
  text-align: center;
  color: #666;
}
.form-group span {
  display: inline-block;
  width: 100%;
  position: relative;
}
.form-group span input[type="password"] {
  padding-right: 30px;
}
.form-group span .fa-eye-slash,
.form-group span .fa-eye {
  position: absolute;
  cursor: pointer;
  right: 0px;
  top: 0px;
  padding: 14px;
  font-size: 20px;
  color: #fff;
}

.teaser {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
  height: 100%;
}
.teaser .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background-image: url("../images/bg.jpg");
  background-position: center;
  background-size: cover;
}
.teaser .bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.teaser figure.logo {
  margin-top: 30px;
  position: relative;
  display: inline-block;
  width: 275px;
  height: 110px;
}
.teaser figure.logo::before {
  content: "";
  height: 50%;
  width: 1000vw;
  position: absolute;
  right: 0;
  top: 18%;
  background-color: #fff;
}
.teaser figure.logo img {
  width: auto;
  /* height: 100%;  */
  position: absolute;
  width: 220px;
  top: 28%;
}

#contactBox {
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
}

#contactBox.visible {
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 1;
}

.teaser nav.floater {
  margin-top: 30px;
}
.teaser nav.floater ul {
  display: inline-block;
}
.teaser nav.floater li {
  background-color: #d79c00;
  color: white;
  margin-bottom: 15px;
  position: relative;
  padding: 10px 0;
  display: table;
}
.teaser nav.floater ul:hover li:hover {
  opacity: 1;
}
.teaser nav.floater ul:hover li {
  opacity: 0.6;
}
.teaser nav.floater li::before {
  content: "";
  width: 100vw;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 100%;
  top: 0;
}
.teaser nav.floater li a {
  color: inherit;
}
.teaser nav.floater li i {
  font-size: 28px;
  width: 50px;
  display: inline-table;
  text-align: center;
  vertical-align: middle;
}
.teaser nav.floater li h4 {
  display: inline-table;
  margin: 0;
  vertical-align: middle;
  font-size: 18px;
}

.teaser h1 {
  color: #363636;
  font-size: 40px;
  font-family: "Titillium 300";
}
.teaser h2 {
  color: #363636;
  font-size: 26px;
  font-family: "Titillium 200";
  line-height: 1.4;
}

.teaser .desc {
  color: #093952;
}

.teaser .desc h1 {
  color: #ffbb00;
}

.teaser .desc p {
  font-size: 1.7rem;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 5px;
  padding: 4px;
}

.teaser nav.infos {
  margin-top: 20px;
}
.teaser nav.infos ul {
  border-left: solid 4px #fff;
  padding-left: 20px;
}
.teaser nav.infos li {
  margin-bottom: 10px;
}
.teaser nav.infos .fa-circle {
  color: #093952;
}
.teaser nav.infos h4 {
  color: #093952;
  vertical-align: middle;
  margin: 0;
  margin-left: 6px;
  display: inline-table;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.75);
}
.teaser nav.infos a {
  color: inherit;
}

.teaser .brands {
  margin-top: 75px;
}
.teaser .brands img {
  width: 80px;
  height: auto;
}

.teaser .content .content-header h3 {
  background-color: #093952;
  color: #fff;
  display: inline-block;
  margin: 0;
  line-height: 36px;
  padding: 0 10px;
  font-size: 22px;
  font-family: "Roboto 300";
}
.teaser .content .content-body {
  /* background-color: rgba(255,255,255,.6);  */
  background-color: rgba(215, 158, 0, 0.6);
  padding: 15px 0;
}
.teaser .content .content-body h3 {
  padding: 0 15px;
  margin: 0 0 25px;
  font-size: 18px;
  font-family: "Roboto 300";
  color: #3e7c93;
}
.teaser .content .content-body .btn {
  background-color: #3e7c93;
  color: #fff;
}

.realperson-text {
  color: white !important;
}

.calendar .modal-content {
  border-radius: 2px;
}
.calendar .modal-header {
  background-color: #000;
  font-family: "Roboto 300";
}
.calendar .modal-header .close {
  color: #fff;
  font-size: 26px;
  margin-top: 0;
  opacity: 0.6;
}
.calendar .modal-header .close:hover {
  opacity: 1;
}
.calendar .modal-title {
  color: #fff;
  font-size: 22px;
}
.calendar .modal-body h3 {
  margin: 0 0 15px;
  font-size: 18px;
  font-family: "Roboto 300";
  color: #cc0a00;
}
.calendar .modal-body ul {
  margin: 0;
}
.calendar .modal-body li {
  color: #666666;
  margin-bottom: 10px;
}
.calendar .modal-body h4 {
  font-size: 16px;
  font-family: "Roboto 300";
  margin: 0;
}
.calendar .modal-body p {
  font-size: 14px;
  font-family: "Roboto 100";
  margin-bottom: 0;
}

.teaser footer {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #093952;
  padding: 10px 0;
  width: 100%;
}
.teaser footer .rights {
  font-size: 12px;
  color: #fff;
}

/* BUBLES */
#background-wrap {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 0;
}
/* KEYFRAMES */
@-webkit-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}
@-moz-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}
@keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}
@-webkit-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}
@-moz-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}
@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}
/* ANIMATIONS */
.x1 {
  -webkit-animation: animateBubble 25s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 25s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 25s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: -5%;
  top: 5%;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.x2 {
  -webkit-animation: animateBubble 20s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 20s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 20s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 5%;
  top: 80%;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}
.x3 {
  -webkit-animation: animateBubble 28s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 28s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 28s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 10%;
  top: 40%;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  transform: scale(0.7);
}
.x4 {
  -webkit-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  left: 20%;
  top: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}
.x5 {
  -webkit-animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 30%;
  top: 50%;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}
.x6 {
  -webkit-animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 50%;
  top: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
}
.x7 {
  -webkit-animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 65%;
  top: 70%;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}
.x8 {
  -webkit-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  left: 80%;
  top: 10%;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}
.x9 {
  -webkit-animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  left: 90%;
  top: 50%;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.x10 {
  -webkit-animation: animateBubble 26s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 26s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 26s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  left: 80%;
  top: 80%;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}
/* OBJECTS */
.bubble {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
    inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
    inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
    inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  height: 100px;
  position: absolute;
  width: 100px;
}
.bubble:after {
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(0%, rgba(255, 255, 255, 0.5)),
    color-stop(70%, rgba(255, 255, 255, 0))
  ); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
  content: "";
  height: 180px;
  left: 10px;
  position: absolute;
  width: 180px;
}