/*
 * tuerkis2
 */
/*
 * red
 */
/*
 * grey
 */
/*
 * lightGrey
 */
/*
 * white
 */
/*
 * black
 */
htm,
body {
  height: 100%;
  min-height: 100%; }

body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: #252729;
  background: #fafafa;
  letter-spacing: 0.015em;
  opacity: 1;
  transition: 0.5s opacity ease-out;
  transition-delay: 0.1s; }

body.fade-out {
  opacity: 0;
  transition: none; }

html {
  background: url("../pics/ring-alt.gif") no-repeat fixed center 100px #00a4cc; }

#body_ifr html {
  background: none; }

strong {
  font-weight: 700; }

h2,
h3,
h4,
h5 {
  font-weight: 700;
  color: #00a4cc; }

h2 {
  font-size: 1.5em;
  margin-bottom: 30px; }

h3 {
  font-size: 1.3em;
  margin: 15px 0 10px 0; }

h4 {
  font-size: 1.1em;
  color: #252729; }

.textArticle .text h4 {
  padding-left: 15px; }

h5 {
  font-size: 1em;
  color: #252729; }

::selection {
  background: #00a4cc;
  color: white; }

::-moz-selection {
  background: #00a4cc;
  color: white; }

a {
  color: #00a4cc;
  transition: all ease-out 0.3s; }

a:hover {
  color: #74c9e3; }

.wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto; }

.wrapperSmall {
  width: 95%;
  max-width: 800px;
  margin: 0 auto; }

#main {
  background: white;
  border-top: solid 15px #00a4cc; }

/*
 * ==========================================================================
 * Header
 * ==========================================================================
 */
header {
  width: 100%;
  border-top: solid 10px #00a4cc;
  background: white;
  padding-top: 130px; }

#mobile header {
  border-top: solid 10px white;
  padding-top: 80px; }

#mobile header div.logo {
  padding: 0;
  margin: 0 auto;
  width: 250px; }

header div.navCont {
  width: 100%;
  height: 60px;
  position: relative;
  z-index: 10; }

header div.imgCont {
  height: auto;
  width: 100%;
  max-width: 1600px;
  background: #fafafa;
  margin: 0 auto;
  position: relative;
  z-index: 1; }

#mobile header div.imgCont {
  top: 0px; }

header div.imgCont img {
  position: relative; }

header div.imgCont .logo {
  position: absolute;
  right: 10%;
  top: 30%;
  width: 300px; }

header div.imgCont .textCont h1 {
  font-size: 1.7em;
  color: #252729;
  line-height: 1.5em;
  margin-bottom: 30px;
  font-weight: 700; }

header div.imgCont .textCont h1 span {
  display: block;
  font-size: 0.8em; }

header div.headCont {
  height: 130px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }

#mobile header div.headCont {
  height: 60px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }

header div.headCont .textCont {
  position: absolute;
  left: 2%;
  top: 40%;
  width: 80%; }

.startHead {
  background: white;
  padding: 40px 30px 60px 30px;
  text-align: center; }

.startHead h1 {
  font-size: 2.4em;
  color: #252729;
  margin-bottom: 30px; }

.startHead h1 span {
  font-size: 0.7em;
  color: #252729;
  display: block; }

header div.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: url("../pics/logo_zahnwerk_foot.svg") no-repeat 20px center white;
  -webkit-box-shadow: 0 4px 6px -6px rgba(50, 50, 50, 0.08);
  -moz-box-shadow: 0 5px 11px 0 rgba(50, 50, 50, 0.08);
  box-shadow: 0 5px 11px 0 rgba(50, 50, 50, 0.08);
  transform: translate3d(0, 0, 0) !important;
  transition: all ease-out 0.3s; }

header div.slideInUp {
  transform: translate3d(0, -200%, 0);
  transition: all ease-out 0.3s; }

header #map_canvas {
  height: 500px; }

header .navSec {
  position: absolute;
  bottom: 0; }

header .navSec ul li {
  display: inline-block; }

header .navSec ul li a {
  display: block;
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 15px;
  text-decoration: none;
  color: #252729;
  font-size: 20px;
  -moz-box-shadow: inset 0 -10px 5px -10px rgba(50, 50, 50, 0.4);
  -webkit-box-shadow: inset 0 -10px 5px -10px rgba(50, 50, 50, 0.4);
  box-shadow: inset 0 -10px 5px -10px rgba(50, 50, 50, 0.4); }

header .navSec ul li a:hover {
  text-decoration: underline; }

header .navSec ul li.active a {
  background: #00a4cc;
  color: white;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

header .navSec ul li.active a:hover {
  text-decoration: none; }

#mobileTop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 4444;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.9); }

#hamburger {
  box-sizing: border-box;
  display: block;
  height: 45px;
  position: absolute;
  left: 5px;
  top: 7px;
  width: 70px; }

#hamburger::before,
#hamburger::after,
#hamburger span {
  background: #3f4044 none repeat scroll 0 0;
  content: "";
  display: block;
  height: 6px;
  left: 20px;
  position: absolute;
  width: 30px; }

#hamburger::before {
  top: 10px; }

#hamburger span {
  top: 20px; }

#hamburger::after {
  top: 30px; }

#hamburger::before,
#hamburger::after,
#hamburger span {
  transition-delay: 0.5s;
  transition-duration: 0.5s;
  transition-property: transform, top, bottom, left, opacity;
  transition-timing-function: ease; }

html.mm-opening #hamburger::before,
html.mm-opening #hamburger::after {
  top: 20px; }

html.mm-opening #hamburger span {
  left: -50px;
  opacity: 0; }

html.mm-opening #hamburger::before {
  transform: rotate(45deg); }

html.mm-opening #hamburger::after {
  transform: rotate(-45deg); }

#menu a.mmfullsubopen {
  width: 100%; }

/*
 * ==========================================================================
 * Main Navigation
 * ==========================================================================
 */
#navMain {
  height: 60px;
  background: none; }

#navMain ul,
#navMain ul li {
  list-style: none;
  margin: 0;
  padding: 0; }

#navMain ul li a {
  display: inline-block;
  padding: 10px 25px;
  font-size: 22px;
  color: #252729;
  text-decoration: none;
  float: left;
  transition: all ease-out 0.3s;
  line-height: 1.5;
  font-weight: 300; }

#navMain ul li a:hover {
  text-decoration: underline; }

#navMain ul li a.active {
  text-decoration: underline; }

#navMain .phone {
  height: 60px;
  width: auto;
  font-size: 16px;
  color: #252729;
  padding: 18px 25px; }

#navMain .phone i {
  margin-right: 10px; }

/*
 * ==========================================================================
 * Main Content
 * ==========================================================================
 */
#contMain {
  width: 100%; }

#main .navThird {
  background: #00a4cc;
  width: 100%;
  height: auto;
  padding-bottom: 15px; }

#main .navThird ul li {
  display: inline-block; }

#main .navThird ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 15px; }

#main .navThird ul li a.active,
#main .navThird ul li a:hover {
  text-decoration: underline; }

.textArticle h2 {
  width: 25%;
  height: auto;
  font-size: 1.5em;
  color: #00a4cc;
  line-height: 1.5em;
  padding: 5px 30px;
  font-weight: 300;
  margin: 30px 0 30px 0;
  float: left; }

.textArticle h2 span {
  font-size: 0.7em; }

.textArticle .text {
  padding: 35px 40px 60px 30px;
  color: #252729;
  display: block;
  width: 75%;
  float: right; }

.textArticle .text .textCon {
  border-top: 1px solid #f3f3f3;
  padding: 0 10px; }

.textArticle .text ul,
.textArticle .text ol {
  padding: 10px 0 10px 20px; }

.textArticle .text li {
  list-style: disc;
  padding: 5px 0; }

.textArticle .text ol li {
  list-style: decimal; }

.textArticle .text p {
  padding: 10px 0 10px 15px; }

#contMainMobile .textArticle h2 {
  float: none;
  clear: both;
  width: 100%;
  text-align: center; }

#contMainMobile .textArticle .text {
  float: none;
  clear: both;
  width: 100%; }

#contMainMobile .textArticle h2 span {
  display: none; }

#history .row,
#production .row {
  margin-bottom: 40px;
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 20px; }

/*
 * ==========================================================================
 * Teaser
 * ==========================================================================
 */
.teaserCont {
  position: relative;
  margin-top: -60px;
  z-index: 10; }

.teaserContUnder {
  background: white; }

#mobile .teaserCont,
#mobile .teaserContUnder {
  margin-top: -10px; }

.teaserContUnder {
  margin-top: 0px; }

.teaser .inner {
  background: #e5e5e5;
  border: solid 1px white;
  text-align: center;
  transition: all ease-out 0.3s;
  position: relative;
  height: 300px;
  display: block;
  text-decoration: none; }

.teaser .icon {
  font-size: 3em;
  color: #00a4cc;
  text-align: center;
  transition: all ease-out 0.5s;
  padding: 60px 0;
  display: block; }

.teaser .border {
  width: 100%;
  position: absolute;
  top: 150px;
  transition: all ease-out 0.3s;
  margin: 20px auto; }

.teaser .border .innerBorder {
  width: 30%;
  height: 1px;
  border-radius: 5px;
  background: #00a4cc;
  margin: 0 auto; }

.teaser .text {
  font-size: 1.2em;
  color: #00a4cc;
  padding: 20px 0;
  position: absolute;
  top: 170px;
  transition: all ease-out 0.3s;
  width: 100%; }

.teaser .inner:hover {
  background: #00a4cc; }

.teaser .inner:hover .icon {
  color: white; }

.teaser .inner:hover .border {
  top: 210px;
  height: 3px; }

.teaser .inner:hover .border .innerBorder {
  background: white;
  height: 3px; }

.teaser .inner:hover .text {
  color: white;
  top: 160px; }

.teaserContUnder .teaser .inner {
  background: white;
  border: solid 1px #fafafa; }

.teaserContUnder .teaser .inner:hover {
  background: #00a4cc; }

#teaserHead {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
  background: #fafafa; }

#teaserHead .text img,
#teaserStartImg img {
  width: 230px;
  height: auto; }

#teaserHead .text,
#teaserStartImg img {
  height: auto;
  padding: 30px 0; }

.underTeaser {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto; }

/*
 * ==========================================================================
 * Helper
 * ==========================================================================
 */
.txt_big_col {
  display: inline-block;
  font-size: 2.5em;
  color: #00a4cc;
  line-height: 0;
  margin: 50px 15px 0 0; }

.mt10 {
  margin-top: 10px; }

.mt60 {
  margin-top: 60px; }

.mt80 {
  margin-top: 80px; }

.mb60 {
  margin-bottom: 60px; }

.mb80 {
  margin-bottom: 80px; }

.m5 {
  margin: 5px !important; }

.txtCenter {
  text-align: center; }

.txtRight {
  text-align: right; }

.p5 {
  padding: 5px !important; }

.p20 {
  padding: 20px !important; }

.p60 {
  padding: 60px !important; }

.fr {
  float: right; }

.fl {
  float: left; }

.cl {
  clear: both; }

.bgCol6 {
  background: white; }

.bold {
  font-weight: 700; }

.txtCol3 {
  color: #252729; }

.bgWhite {
  background: white; }

img {
  border: medium none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  vertical-align: bottom; }

.img-popup:hover {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.rel {
  position: relative; }

.abs {
  position: absolute; }

/*
 * ==========================================================================
 * Buttons
 * ==========================================================================
 */
.ghost-button-border-color {
  border: 2px solid #74c9e3;
  color: #74c9e3;
  display: inline-block;
  outline: medium none;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: border-color 0.1s ease-out 0s, color 0.3s ease-out 0s;
  width: 200px;
  margin: 15px 0; }

.ghost-button-border-color:hover,
.ghost-button-border-color:active {
  border-color: #252729;
  color: #252729;
  transition: border-color 0.1s ease-in 0s, color 0.3s ease-in 0s; }

/*
 * ==========================================================================
 * To top
 * ==========================================================================
 */
.to-top {
  height: 60px;
  background-color: none; }

.to-top .to-top-wrap {
  height: 60px;
  width: 70px;
  position: absolute;
  right: 0;
  text-align: center; }

.to-top .to-top-wrap a {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.15);
  text-decoration: none; }

.to-top .to-top-wrap a:hover,
.to-top .to-top-wrap a:focus {
  background-color: rgba(0, 0, 0, 0.4); }

.to-top .to-top-wrap i {
  font-size: 30px;
  line-height: 55px; }

.to-top .row {
  position: relative; }

/*
 * ==========================================================================
 * Footer
 * ==========================================================================
 */
footer {
  background-color: #fafafa;
  position: relative; }

footer img.logoFoot {
  width: 175px; }

footer p {
  color: #252729;
  font-size: 13px; }

footer a {
  color: #252729; }

footer a:hover {
  color: #00a4cc; }

footer ul.footer-group {
  border-top: solid 1px #00a4cc;
  padding-top: 25px;
  margin-bottom: 45px; }

footer ul.footer-group li {
  display: inline-block; }

footer ul.footer-group li a {
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none; }

footer ul.footer-group li a:hover,
footer ul.footer-group li a.active {
  color: #00a4cc;
  text-decoration: underline; }

footer ul.footer-group li {
  margin-right: 15px; }

footer ul.footer-group li:last-child {
  margin-right: 0; }

footer span.icon {
  font-size: 12px;
  margin: 0 2px; }

footer .footerInner {
  padding: 75px 0 60px 0; }