/* Schriften einbinden
================================================== */

/* first for IE 4–8 */
@font-face {
    font-family: DINWeb;
    src: url("../fonts/DINWeb.eot");
}

/* then for WOFF-capable browsers */
@font-face {
    font-family: DINWeb;
    src: url("../fonts/DINWeb.woff") format("woff");
}


/* Basics
================================================== */
body {
    -webkit-text-size-adjust: none; /* Font Resizing iPhone ausschalten */
    font-family: DINWeb, sans-serif;
    color: #606060;
    line-height: 1.4em;
    background: #fff;
    /*border-top: 35px solid #fff;*/
    /* Permanente Scrolleiste gegen Verschieben beim Starten oder Beenden der Diashow*/
    overflow-y: scroll;
}

/* Boders rechts, volle Höhe */
body:before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    border-right:25px solid #fff;
}

#main-outer {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    /*position: relative;*/
    top: 0px;
    left: 0px;
    background-color: white;
}
#main-inner {
    position: absolute;
    left: 0px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    background: #e1f3fa;
}

/* columns
================================================== */
.container .column, .container .columns {
    margin-bottom: 20px;
}

/* Typography
================================================== */
p {
    font-size: 14px; 
    padding: 0px 0px 8px 0px;
    line-height: 1.3em;
}
p small {
    font-size: 13px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.1;
    padding: 0px 0px 15px 0px;
}
h2 {
    font-size: 30px;
    color: #7ea516;
    padding-bottom: 8px;
    text-transform: uppercase;
}
h3 {
    font-size: 20px;
    color: #32B3DD;
    padding-bottom: 16px;
    line-height: 1.25;
}
h4 {
    font-size: 18px;
    color: #7ea516;
    line-height: 1.25;
    padding-top: 8px;
    padding-bottom: 8px;
}

a, a:visited {
    color: #32B3DD;
    text-decoration: none;
}
small {
    font-size: 85%;
}
.green {
    color: #7ea516;
}
.bildunterschrift {
    font-size: 13px;
    color: #32B3DD;
    padding-top: 3px;
    line-height: 1.25;
}



/* Metanav / Logo
================================================== */
.header {
    padding-top: 35px;
}

.slideshow {
    /*opacity:0.1;*/
    /*filter:alpha(opacity=10);  For IE8 and earlier */
    display: none !important;
}

.border-top {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -55;
    height: 35px;
    width: 100%;
    background: #fff;
}

.logo-window-right {
    display: block;
    width: 214px;
    height: 98px;
    background: url('../images/artwork/logo-zahnklinik-phoenixsee-dortmund.png') #007392 top left no-repeat;
    position: absolute;
    right: 0px;
    top: 120px;
    z-index: 1000;
}
.logo {
    width: 100%;
    height:140px;
    background: url('../images/artwork/logo-zahnklinik-phoenixsee-dortmund-mobile.png') #007392 50% 50% no-repeat;
}

.logo {
    display: none;
}

/* Metanav Header
================================================== */
.metanav-top {
    margin-top: -10px;
}
.metanav-top .nav-pills > li {
    display: inline;
    margin-right: 20px;
    position: relative;
}
.metanav-top .nav-pills > li > a {
    font-size: 12px;
    background-color: #50c8e6;
    color: #fff;
}
.metanav-top .nav-pills > li > a:hover {
    color: #1a819d;
    background-color: #ecf7fb;
}
/* Little arrow */
/*.metanav-top .nav-pills > li:after { 
    content: "";
    width: 0;
    height: 0;
    position: absolute;
        right: -11px;
    left: 100%;
    margin-top: -5px;
    border-width: 0px 15px 15px 0px;
    border-style: solid;
    border-color: #00637f transparent;
}*/

/* Little arrow in Kombi mit DropDown MEnü */
/*.metanav-top .nav-pills > li.wrapper-dropdown:after {*/ 
/*left: 97%;*/
/*}*/

/* Navigation
================================================== */
nav {
    /*margin-bottom: 100px;*/
}
/* Main Menü als Select */

.nav-pills > li {
    margin-bottom: 20px;
}
.nav-pills > li > a {
    color: #333;
    font-size: 13px;
    /*padding: 6px 10px 4px 10px;*/
    padding: 10px 10px 8px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-transform: uppercase;
}
/* saf3+, chrome1+ */
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    .nav-pills > li > a {
        padding: 6px 10px 4px 10px;
    }
}*/
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    color: #1a819d;
    background-color: #ecf7fb;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    color: #1a819d;
    background-color: #ecf7fb;
}

/* Dropdown
================================================== */
.wrapper-dropdown {
    /* Size & position */
    position: relative;
    margin: 0 auto;

    /* Styles */
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;

    /* Styles */
    background: #ecf7fb;
    border-radius: 0 0 3px 3px;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.wrapper-dropdown .dropdown li:first-child {
    padding-top: 7px;
}

.wrapper-dropdown .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown .dropdown li a {
    display: block;
    text-decoration: none;
    padding: 5px 0;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown .dropdown li:last-of-type a {
    border: none;
}

/* Hover state */
.wrapper-dropdown .dropdown li:hover a {
    color: #57a9d9;
}

/* Active state */
.wrapper-dropdown.active {
    border-radius: 5px 5px 0 0;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown.active .dropdown {
    max-height: 400px;
}


/* Sidebar-left
================================================== */
.sidebar-left {
    text-align: right;
}
.sidebar-left ul.nav,
.sidebar-left p,
.sidebar-left h1,
.sidebar-left h2,
.sidebar-left h3,
.sidebar-left h4 {
    padding-right: 20px;
}
.sidebar-left h1,
.sidebar-left h2,
.sidebar-left h3 {
    padding-bottom: 15px;
}
.sidebar-left h3 {
    font-size: 30px;
}

/* Maincontent
================================================== */
.maincontent {
    margin-top:236px;
}


/* Forms
================================================== */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
    background: #ecf7fb;
    border-color: #a8d8e7;
    padding: 4px 4px;
}
input[type="checkbox"], input[type="radio"] {
    margin-bottom: 8px;
}

label, legend {
    font-weight: normal;
    font-size: 15px;
    color: #32B3DD;
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.box form h4 {
    padding-left: 0px;
}
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    color: #fff;
    text-shadow: none;
}


/* Validation
================================================== */
#commentForm label.error {
    color: #b70000;
}
#commentForm input.error {
    border-color: #b70000;
}

/*#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
        margin-left: 10px;
        width: auto;
        display: inline;
}
#newsletter_topics label.error {
        display: none;
        margin-left: 103px;
}*/

/* Supersized Arrows ein- und ausblenden
================================================== */
#supersized {
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
    right:0;
}
.supersized-startseite {
    opacity:1 !important;
    filter:alpha(opacity=100) !important; /* For IE8 and earlier */
}
.supersized-arrow-navigation {
    display: none;
}
.supersized-left {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: -111;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */ 
}

/* Boxes
================================================== */
.box {
    background: #e3e3e3;
    padding-bottom: 20px;
    -webkit-box-shadow: 2px 2px 2px 0px #e3e3e3;
    box-shadow: 2px 2px 2px 0px #e3e3e3;
}
.box-white {
    background: #ffffff;
}

.box-transparent {
    background: transparent;
    box-shadow: none;
} 

.box img {
    height: auto;
    max-width: 100%;
}
.box h2 {
    font-size: 26px;
}
.box h2,
.box h3,
.box h4,
.box p,
.box ul {
    padding-left: 14px;
    padding-right: 14px;
}
.box p.btn {
    margin-left: 14px;
    padding-left: 10px;
}
.box form {
    padding-left: 14px;
    padding-top: 20px;
}
.box h2 {
    padding-top: 20px;
    text-transform: uppercase;
}
.box .box-header-blue {
    height: 170px;
    background: url('../images/artwork/box-header-blue.png') bottom left no-repeat #e1f3fa;
    position: relative;
}
.box .box-header-blue img {
    position: absolute;
    right: 0px;
    top: 10px;
}
.box-leistungen {
    min-height: 290px;
}
.box-service {
    min-height: 390px;
}
.box-mitarbeiter {
    min-height: 270px;
}
.container-box-mitarbeiter .box-mitarbeiter {
    margin-left: 10px;
    margin-right: 0;
}
.container-box-mitarbeiter .box-mitarbeiter:first-child,
.container-box-mitarbeiter .box-mitarbeiter:nth-child(2n+3) {
    margin-left: 0;
    margin-right: 10px;
}
.box-mitarbeiter h4 {
    font-size: 16px;
}
.box-mitarbeiter h4, .box-mitarbeiter p {
    padding-left: 6px;
    padding-right: 6px;
}

/*START Für Preview, später löschen*/
.box .box-header-blue {
    height: 90px;
    background: url('../images/artwork/box-header-blue.png') top left no-repeat #e1f3fa;
}
.box-leistungen {
    min-height: 210px;
}
/*END Für Preview, später löschen*/


/* Slidecaption
================================================== */
#slidecaption {
    position:absolute;
    bottom: 20px;
    left:20px;
    color: #fff;
    padding: 20px 20px 20px 20px;
    background: #000000;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    width:400px;
}

/* Icons
================================================== */
.icon-left {
    background-repeat: no-repeat;
    background-position: 10px 6px;
    padding-left: 35px !important;
}
.icon-right {
    background-repeat: no-repeat;
    background-position: 93% 6px;
    padding-right: 25px !important;
}
.icon-left.camera, .icon-right.camera {
    background-image: url('../images/icons/r4-6.png'); 
}
.icon-left.camera-white, .icon-right.camera-white {
    background-image: url('../images/icons/r4-6-white.png'); 
}
.icon-left.stop, .icon-right.stop {
    background-image: url('../images/icons/r1-7.png'); 
}
.icon-left.stop-white, .icon-right.stop-white {
    background-image: url('../images/icons/r1-7-white.png'); 
}
.icon-left.click, .icon-right.click {
    background-image: url('../images/icons/r0-click.png');
}
.icon-left.click-white, .icon-right.click-white {
    background-image: url('../images/icons/r0-click-white.png'); 
}

/* Buttons by CSSButtonGenerator.com
================================================== */
.btn {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #e7e7e7;
    display:inline-block;
    font-family:Trebuchet MS;
    font-size:14px;
    font-weight:normal;
    padding:6px 12px;
    text-decoration:none;
}
.btn-small {
    font-size:13px;
    padding:5px 6px;
}
.btn:active {
    position:relative;
    top:1px;
}
.btn-default > a  {
    color:#666666;
}
.btn-inverse  {
    background-color: #474949;
    border:1px solid #474949;
}
.btn-inverse:hover {
    background-color: #32B3DD;
    border-color: #32B3DD;;
    color:#ffffff;
}
.btn-default  {
    background-color:#f9f9f9;
    border:1px solid #dcdcdc;
}
.btn-default:hover {
    background-color:#e9e9e9;
}
.btn-primary > a {
    color:#ffffff;
}
.btn-primary {
    background-color:#3d94f6;
    border:1px solid #337fed;
}
.btn-primary:hover {
    background-color:#1e62d0;
    color:#ffffff;
}

/* Read More
================================================== */
.read-more{
    display: none;
    padding-top: 20px;
}
.toggle-read-more {
    cursor: pointer;
    color: #32B3DD;
}
.read-more ul {
    padding-left: 32px;
    list-style-type: circle;
}
.read-more ul li {
    margin-top: 6px;
}

/* -------------------------------------------------- 
        :: GMap
---------------------------------------------------*/
.gmap {
    width: 100%;
    max-width: 430px;
    min-height: 300px;
    background: #ccc;
    margin: 0px 0px 30px 15px;
}

.gmap img {
    vertical-align: top;
    max-width: 100%;
}

/* footer
================================================== */
.footer {
    background: #fff;
    /*font-size: 9px;*/
}
.footer .divider {
    padding: 0 10px;
}
.footer ul {
    margin-bottom: 0;
}
.footer li {
    display: inline;
    margin-right: 12px;
    font-size: 14px;
}
.footer .container {
    padding-top: 15px;
}
.footer.footer-startseite {
    background: #123564;
    padding: 8px 0px 0px 0px;
}
.footerright {
    text-align:right;
}


/* Helpers
================================================== */
.transparent {
    background: transparent !important;
}


/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* Tablet Portrait size and bigger (devices and browsers) */
@media only screen and (min-width: 768px) {
    .hidden-desktop { display: none !important; visibility: hidden; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

    /*body { background-color: #f6f6f6 !important; }*/
    .visible-desktop { display: none !important; visibility: hidden; }
    .header {padding-top: 0px; margin-bottom: 170px; }

    /* Boxes */
    .box { margin-bottom:20px !important; }
    /* Main Menü als Select */
    /*nav { margin-bottom: 30px; }*/
    /* Headerbereich */
    .header { display: block; /*background: #007392;*/ }
    .logo { position: absolute; display: block; top: 40px;}
    .logo-window-right { display: none !important;}
    /* Linker Bereich */
    .sidebar-left { text-align: left; }
    .footer {
        background: transparent;
    }

    .footer li {
        display: list-item;
    }
    /*footerright*/
    footerright { text-align:left;}
    /*supersized*/
    /*#supersized { display: none !important; }*/

    /*slideshow, dishow */
    .slideshow {
        /*opacity:1;*/
        /*filter:alpha(opacity=100);  For IE8 and earlier */
        display: inline !important;
    }
    #slidecaption {
        bottom: 0px;
        left:0px;
        padding: 6px;
        width: auto;
        font-size: 12px;
        line-height: 14px;
    }
    .diashow {
        display: none !important;
    }

    .metanav-top {
        position: absolute;
        display: block;
        z-index: 1000000;
        top: 22px;
        right: -20px;
    }
    .metanav-top .nav-pills > li > a {
        background-color: #606060;
    }
    .metanav-top .nav-pills > li:after {
        content: normal;
    }



}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {


}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}