html {
    width:100%;
    min-height:100%;
    background:#eaeaea;
 /*   background: linear-gradient(45deg,#e5e5e5 0%,#fff 100%);*/
    font-size:14px;
}
body {
    font-family:sans-serif;
    width:100%;
    min-height:100%;
}
html,
body {
    margin:0;
    padding:0;
}

/*
 *
 * Hauptseite
 *
 */

#bgtop {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:290px;
    background-image:url(../images/z_topgradient.png);
    background-position:top;
    z-index:-1;
}
#container {
    max-width:1300px;
    margin:60px auto;
    background:#fff;
    border-radius:8px;
}
#topbar {
    height:170px;
    position:relative;
}
#logo {
    padding:30px 0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-decoration:none;
    display:inline-block;
}
#logo > div:nth-child(1) {
    margin-left:30px;
    width:110px;
    height:110px;
    background-image:url(../images/logo_zahn.png); 
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
    vertical-align:top;
}
#logo > div:nth-child(2) {
    display:inline-block;
    margin-top:30px;
    margin-left:20px;
    vertical-align:top;
    color:#777;
}
#logo > div:nth-child(2) > div:nth-child(1) {
    font-size:28px;
    margin-bottom:8px;
}
#logo > div:nth-child(2) > div:nth-child(1) {
    font-size:20px;
}

#kontakt {
    text-align:right;
    position:absolute;
    right:0;
    top:0;
    font-size:13px;
    color:#777;
    padding:20px 30px;
}
#kontakt .title {
    font-weight:600;
    border-bottom:1px solid #aaa;
    margin-bottom:4px;
    padding-bottom:2px;
}
#kontakt a {
    color:#85ADBC;
}

#bilder {
    height:150px;
}
#bilder > div {
    width:33.333333%;
    height:150px;
    display:inline-block;
    vertical-align:top;
    float:left;
    background-position:center;
    background-size:cover;
}
#bilder > div:nth-child(1) { background-image:url(../images/dentist.jpg); }
#bilder > div:nth-child(2) { background-image:url(../images/dentist_light.jpg); }
#bilder > div:nth-child(3) { background-image:url(../images/team2.jpg); }

#menu {
    height:60px;
    line-height:60px;
    background:#988EBD;
    color:#fff;
    font-family: "roboto condensed";
    font-weight: 600;
    font-size: 18px;
}
#menu ul {
    padding:0;
    margin:0;
}
#menu li { 
    display:inline-block;
    float:left;
    vertical-align:top;
    border-right:1px solid #fff;
    transition:background 0.3s ease;
}
#menu li a { 
    text-decoration:none; 
    color:#fff; 
    display:inline-block; 
    padding:0 20px;
}

#menu li:hover {background:#8980A9;}
#breadcrumbs {
    height:50px;
    line-height:50px;
    border-bottom:1px solid #eee;
    color:#aaa;
    font-size:14px;
}
#breadcrumbs .fa-home {
    margin:0 10px 0 20px;
    background:#aaa;
    color:#fff;
    padding:6px;
    border-radius:50%;
}
#breadcrumbs a {
    color:#85ADBC;
}

#f_spotlight { text-align:center; }

#infobar {
    padding:30px 100px;
    color:#666;
}

#content {
    display:table;
    width:100%;
}
#maincontent h1,
#maincontent h2,
#maincontent h3,
#maincontent h4,
#maincontent h5,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5 { color:#85ADBC; }
#content .text {
    display:table-cell;
    background:#fafafa;
    padding:20px 40px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#content .text a { color:#85ADBC; }
#content .text img { padding:0 20px; max-width:100%; }
.times {
    display:table-cell;
    width:400px;
    padding-bottom:20px;
    background:#f5f5f5;
    color:#444;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    vertical-align: top;
}
.times h2 { padding:20px; margin:0; }
.times p { padding:0 20px; line-height: 20px;}
.times a { color: #85ADBC; }
table.ordtimes {
    width:100% !important;
    max-width:400px;
    border-collapse:collapse;
    margin-bottom:30px;
}
table.ordtimes td {
    vertical-align:top;
    font-weight:700;
    color:#999;
    font-family:"roboto condensed";
    line-height:30px;
    padding:4px 0 4px 30px;
    border-bottom:1px solid #f5f5f5;
}
table.ordtimes tr > td:nth-child(1) { background:#eaeaea; text-transform:uppercase;}
table.ordtimes tr > td:nth-child(2) { background:#fafafa;}

#features > div { clear:both; }
#features .box {
    width: 33.333333333333%;
    display:inline-block;
    vertical-align:top;
    float:left;
    height:170px;
    background:#A79DC8;
    color:#fff;
}

#features .box > div:nth-child(1) {
    height:100%;
    width:120px;
    font-size:40px;
    float:left;
}
#features .box > div:nth-child(1) .fa {
    background:#fff;
    color:#988EBD;
    padding:14px;
    border-radius:50%;
    margin-top:47px;
    margin-left:40px;
    width:48px;
    height:48px;
    line-height:48px;
    text-align:center;
}
#features .box > div:nth-child(2) {
    margin-left:120px;
    padding:0 20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#features .box .title {
    font-family:"roboto condensed";
    font-size:22px;
    margin-top:46px;
    margin-bottom:8px;
}
#features .box .text {
    font-size:15px;
	line-height:20px;
}

#anfahrtswitch {
    height:360px;
    clear:both;
    background:#f8f8f8;
}
#anfahrtswitch > div:nth-child(1) {
    width:60%;
    display:inline-block;
    vertical-align:top;
    height:360px;
    padding:40px 0 40px 60px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#anfahrtswitch > div:nth-child(1) .title  {
    font-variant: small-caps;
    color:#777;
    width:400px;
}
#anfahrtswitch > div:nth-child(1) .title > div:nth-child(1) {
    font-size:30px;
    margin-bottom: 10px;
    border-bottom: 1px solid #aaa;
}
#anfahrtswitch > div:nth-child(1) .title > div:nth-child(2) {
    font-size:24px;
}
#anfahrtswitch .box {
    margin-top:20px;
    position:relative;
    display:inline-block;
    border-radius:8px;
    transition:box-shadow 0.3s ease;
    text-decoration:none;
}
#anfahrtswitch .box:hover { box-shadow:0 0 8px #C9D28F; }

#anfahrtswitch .box > div:nth-child(1) {
    height:170px;
    width:280px;
    background:#fff;
    background-image: url(../images/logo_allgemein.png);
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
    vertical-align:top;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
    margin-right:4px;
}
#anfahrtswitch .box > div:nth-child(2) {
    display:inline-block;
    vertical-align:top;
    height:170px;
    width:280px;
    background:#C9D28F;
    color:#fff;
    text-align:center;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
    font-size:16px;
    padding-top:60px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#anfahrtswitch .box > div:nth-child(2) > div:nth-child(1) {
    font-size:18px;
    margin-bottom:10px;
}
#anfahrtswitch .box > div:nth-child(3) {
    position:absolute;
    top:56px;
    left:253px;
    height:50px;
    width:50px;
    background:#fff;
    border:4px solid #f8f8f8;
    border-radius:50%;
    text-align:center;
    color:#C9D28F;
    font-size: 24px;
    font-weight: 700;
    line-height: 50px;
}
#anfahrtswitch > div:nth-child(2) {
    width:40%;   
    display:inline-block;
    vertical-align:top;
    height:360px;
    padding:20px 40px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#anfahrtswitch > div:nth-child(2) h2 { margin:0 0 20px 0; color:#85ADBC; }
#footer {
    clear:both;
    height:50px;
    line-height:50px;
    background:#444;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    color:#aaa;
}
#footer a {
    text-decoration:none;
    color:#aaa;
}
#footer > div:nth-child(1) {
    display:inline-block;
    padding:0 40px;
    
}
#footer > div:nth-child(2) {
    float:right;
    padding:0 40px;
}

#maincontent {
    min-height:300px;
    display:table;
}

#maincontent .menu {
    display:table-cell;
    padding-top:40px;
    min-width:300px;
}
#maincontent .menu ul {
    margin:0;
    padding:0;
    list-style:none;
}
#maincontent .menu li {
    background:#f5f5f5;
    list-style: none;
}
#maincontent .menu li:hover {
    background:#eee;
}
#maincontent .menu li:not(:first-child) {
    border-top:1px solid #fff;
}
#maincontent .menu li.current {
    background:#eee;
    list-style:none;
}
#maincontent .menu a {
    text-decoration:none;
    color:#aaa;
    font-family:"roboto condensed";
    font-size:16px;
    line-height:20px;
    padding:10px 20px 10px 30px;
    display:block;
    position:relative;
}
#maincontent .menu a:before {
    content:"";
    position:absolute;
    left:10px;
    top:16px;
    padding:4px;
    background:#aaa;
}
#maincontent .text {
    display:table-cell;
    vertical-align:top;
    padding:20px 60px 40px 60px;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#maincontent .text .trennlinie { padding: 0; }

#maincontent .text a { color:#85ADBC; }
#maincontent .text iframe { max-width:100%; }
#content .text,
#maincontent .text {
    line-height:20px;
}
#maincontent .text table td { vertical-align:top; }
#maincontent .text img { padding: 0 20px; max-width:100%; }#maincontent .text img.links { padding:0 20px 0 0; }#maincontent .text img.rechts { padding:0 0 0 20px; }
.kdherror { padding:6px 14px; color:#A02121; border:1px solid #A02121; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#mobilemenu { display:none; border-bottom:1px solid #f5f5f5; }
#mobilemenu > a { 
    display:inline-block; 
    width:50%; 
    text-align:center; 
    height:50px;
    line-height:50px;
    vertical-align:top;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#mobilemenu > a:hover {
    background:#f5f5f5;
}
#mobilemenu > a:first-child .fa {
    background: #aaa;
    color: #fff;
    padding: 6px;
    border-radius: 50%;
    font-size:14px;
    width:14px;
    height:14px;
}
#mobilemenu > a:last-child {
    color: #444;
    font-size:24px;
    border-left:1px solid #f5f5f5;
}

/*
 Media Queries for responsive css
*/
@media screen and (max-width:1300px) {
    #container { margin:0; border-radius:0; }
    #footer { border-radius:0; }
}
@media screen and (max-width:1199px) {
    #anfahrtswitch { height:auto; }
    #anfahrtswitch > div:nth-child(1) { display:block; width:100%; height:auto; padding-bottom:0; text-align:center; }
    #anfahrtswitch > div:nth-child(1) .title { margin:0 auto; }
    #anfahrtswitch > div:nth-child(2) { display:block; width:100%; padding-left:60px; }
    #anfahrtswitch > div:nth-child(2) iframe { width: 100%; }
}
@media screen and (min-width:1100px) {
    #features > div > .box:nth-child(odd) { background:#988EBD; }
}
@media screen and (max-width:1099px) {
    #content { display:block; }
    #content .text { display:block; }
    #content .times > div { max-width:400px; margin:auto; }
    #content .times { display:block; width:100%; padding:0 40px 20px 40px; }
    #content .times h2 { padding:20px 0; }
}
@media screen and (min-width: 800px) and (max-width: 1099px) {
    #features > div > .box { width:50%; }
    #features > div > .box:nth-child(1) { background:#988EBD; }
    #features > div > .box:nth-child(4) { background:#988EBD; }
    #features > div > .box:nth-child(5) { background:#988EBD; }
}
@media screen and (max-width: 999px) {
    #maincontent .text { padding: 20px 20px 40px 20px; }
}
@media screen and (max-width: 899px) {
    #mobilemenu { display:block; }
    #menu { display:none; height:auto; line-height:50px; }
    #menu.visible { display:block; }
    #menu li { display:block; float:none; border-right:none;}
    #menu li:not(:last-child) { border-bottom: 1px solid #fff; }
    #menu li a { display:block; }
    #breadcrumbs { display:none; }
    #bilder > div { width:50%; }
    #bilder > div:last-child { display:none; }
}
@media screen and (max-width: 799px) {
    #maincontent { display:block; }
    #maincontent .menu { display:block; padding-top:0; }
    #maincontent .text { display:block; }

    #features > div > .box { width:100%; height:120px; }
    #features > div > .box:nth-child(odd) { background:#988EBD; }
    #features .box > div:nth-child(1) .fa { margin-top:22px; }
    #features .box .title { margin-top:28px; }
}
@media screen and (max-width: 699px) {
    #anfahrtswitch > div:nth-child(1) { padding:40px 10px 0 10px; }
    #anfahrtswitch > div:nth-child(2) { padding:20px 10px 0 10px; }
    #kontakt { display:none; }
}

@media screen and (max-width: 599px) {
    #anfahrtswitch > div:nth-child(1) .title { width: auto; }
    #anfahrtswitch .box > div:nth-child(3) { top:145px; left:111px; }
    #anfahrtswitch .box > div:nth-child(1) { display:block; border-radius:8px 8px 0 0; margin:0 0 4px 0; }
    #anfahrtswitch .box > div:nth-child(2) { display:block; border-radius:0 0 8px 8px; }
    #content .text img { display:none; }
    #maincontent .text img { float:none !important; display:block; margin:0 auto; }
}

@media screen and (max-width:522px) {
	#features > div > .box:nth-child(6) > div > .title { margin-top: 10px; }
}

@media screen and (max-width: 499px) {
    #content .text { padding:20px 10px; }
    #content .times { padding:0 10px 10px 10px; }
    #footer { height: auto; text-align: center; }
    #footer > div:nth-child(2) { float:none }

    #features > div > .box { height:85px; }
    #features .box > div:nth-child(1) { font-size:24px; width:85px; }
	#features > div > .box:nth-child(6) > div > .title { margin-top: 28px; }
    #features .box > div:nth-child(1) .fa {
        width:25px;
        height:25px;
        line-height:25px;
        margin-top:16px;
        margin-left:16px;
    }
    #features .box > div:nth-child(2) { margin-left:95px; padding:0;}
    #features .box .title {font-size:20px; }
    #features .box .text { display:none; }
    #bilder > div:nth-child(2) { display:none; }
    #bilder > div { width:100%; }
    #topbar {
        height:120px;
    }
    #logo > div:nth-child(1) {
        width:60px;
        height:60px;
        background-size:60px;
    }
    #logo > div:nth-child(2) { margin-top:10px; }
    #logo > div:nth-child(2) > div:nth-child(1) { font-size:16px; }
    #logo > div:nth-child(2) > div:nth-child(2) { font-size:13px; }
}
@media screen and (max-width: 399px) {
    #topbar {
        height:120px;
    }
    #logo > div:nth-child(1) {
        margin-left:20px;
    }
    #logo > div:nth-child(2) { margin-left:10px; }
    #logo > div:nth-child(2) > div:nth-child(1) { font-size:15px; }
}