@import url(https://fonts.googleapis.com/css?family=Muli:300);

/* //////////////////////////////////////  mobile sticky header ///////////////////////////// */

.main_h {
  position: fixed;
  max-height: 70px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background: none;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  top:0px;
  padding-bottom: 6px;
  font-family:'Muli', sans-serif;
    background-color: rgba(255, 255, 255, 0.93);
}

@media only screen and (max-width: 766px) {
  .main_h {
    padding-top: 25px;
  }
}

.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1;
  top: 0px;
  border-bottom: 1px solid gainsboro;
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.logo {
  width: 250px;
  font-size: 25px;
  color: #ff8939;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
}

@media only screen and (max-width: 766px) {
  .logo {
    float: none;
  }
}

nav {
  float: right;
  width: 60%;
}
nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;

}

nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
}

nav ul a {
  color: #888;
  text-transform: uppercase;
  font-size: 12px;
}

nav ul a:hover {
  color: #bbb;
}

a{
        color:#590202;
  		text-decoration: none;
        padding-bottom:0.7em;
}

#active{
 color: #ff8939;
}

@media only screen and (max-width:966px) {

        nav {
  float: 70%;
}
        nav ul li {
  margin-left: 15px;
}

}

@media only screen and (max-width: 766px) {
  nav {
    width: 100%;
  }

    nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }

    nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }

}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

@media only screen and (max-width: 766px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius:5px;
  background: #ff8939;
  display: block;
}

.row {
  width: 100%;
  margin: 0 auto;
  position: relative;
        max-width:960px;
}

/* //////////////////////////////////////  hero ///////////////////////////// */

.hero {
  position: relative;
  background: url(../images/index.jpg);) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding-top:33vh;
        min-height: 500px;/* fallback für ältere Browser eine mindesthöhe von 500px generieren*/
   height:60vh;/* 100vh die Anzeigehöhe des Displays auslesen und als Boxhöhe zuweisen */
  letter-spacing: 2px;
  font-family: 'Roboto', sans-serif;
}
.hero h1 {
  font-size:3.2em;
  line-height: 1.3;
}

/* ////////////////// für alle Medientypen-Ausgabegeraäte soll gelten  ///// */

* {
        margin:0;
        padding:0;
        box-sizing: border-box;
}

body {
  color: #000;
  background: white;
  font-family:'Muli', sans-serif;
}

.viertel{
        background-color:#ff8939;
        font-size:0.7em;
        padding:0.5em;
}

/*  //////////////////////////////////   main /////////////////////////// */

main{
        margin-top:2em;
}

/*  ////////////////    willkommen    ///////////////////////////////////   */

#willkommen{
        color:#590202;
        padding-bottom:0.7em;
}

#willkommen h3{
        padding-bottom:0.5em;
}

#willkommen p{
        padding-bottom:0.3em;
}

#willkommen span{
        padding-right:2em;
}


.halbe{
        background-color:#ffceac;
        font-size:0.9em;
}

.fix ul li{
        list-style-type:none;
        padding:0.5em 0;
}

.fix .vm{
        vertical-align:middle;
        margin-right:0.5em;
}

.fix h2{
        margin-top:1em;
}

.fix a{
        text-decoration:none;
        font-size:2em;
        color:#000;
}

.fix ul li a{
        text-decoration:none;
        font-size:1em;
        color:#000;
}

.fix {
        margin:1em 0.5em;
}
.aktuelles{
        margin:1em 0.5em;
        padding-bottom:1.9em;
}

.aktuelles a{
        color:#000;
}

.aktuelles h2{
        margin-bottom:0.5em;
}

.aktuelles hr{
        margin:1em;
}
.mitte{
        text-align:center;
        margin-top:1em;
}

hr{
        margin:1em 5em;
}

.zweidrittel{
        background-color:#ffceac;
        font-size:0.9em;
        padding:1em 0.5em 0.5em;
        margin-top:1.1em;
}
.zweidrittel p{
        padding-bottom:0.5em;
}

.drittel img{
        margin-left:-0.5em;
}

/*  ////////////////    Leistungen    ///////////////////////////////////   */

.dreiviertel{
        background-color:#ffceac;
        font-size:0.9em;
        padding:0.9em 0.5em;
        }

.dreiviertel ul {
           padding-top:0.1em;
        color:#590202;
        margin-left: 0.6em;
        padding-left: 0.6em;
}

.dreiviertel ul  li{
           padding-top:0.3em;
}

.dreiviertel ul  li span{
           color:#000;
}

#leistungen{
        text-align:center;
        margin-bottom:1em;
}

.hausarztvertrag{
        font-size:0.9em;
        background-color:#ffedcc;
        padding:1em;
}

.hausarztvertrag h3{
        padding-bottom:0.3em;
}

.hausarztvertrag a{
        color:#000;
}

.leistungenliste{
        padding-left:0.5em;
}

.leistungenliste ul  li{
           padding-top:0.3em;
}

.leistungenliste a{
        color:#000;
}

/*  ////////////////    ueberuns    ///////////////////////////////////   */

#praxisteam {
        text-align:center;
}

#praxisteam h3{
        padding-bottom:1em;
}

#praxisteam h4{
        padding-top:1em;
}

#konzept p{
        padding-top:0.5em;
}

#orga p{
        padding-top:0.56em;
}

/*  ////////////////    praxis slider ///////////////////////////////////   */

.praxis{
        padding:1em 0.5em;
        margin-bottom:1em;
        border-radius:5%;
}

.praxis h3{
        padding-bottom:1em;
}

.rg-image-wrapper{
        position:relative;
        padding:20px 30px;
        background:transparent url(../images/black.png) repeat top left;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        min-height:20px;
}
.rg-image{
        position:relative;
        text-align:center;
        line-height:0px;
}
.rg-image img{
        max-height:100%;
        max-width:100%;
}
.rg-image-nav a{
        position:absolute;
        top:0px;
        left:0px;
        background:#000 url(../images/nav.png) no-repeat -20% 50%;
        width:28px;
        height:100%;
        text-indent:-9000px;
        cursor:pointer;
        opacity:0.3;
        outline:none;
        -moz-border-radius: 10px 0px 0px 10px;
        -webkit-border-radius: 10px 0px 0px 10px;
        border-radius: 10px 0px 0px 10px;
}
.rg-image-nav a.rg-image-nav-next{
        right:0px;
        left:auto;
        background-position:115% 50%;
        -moz-border-radius: 0px 10px 10px 0px;
        -webkit-border-radius: 0px 10px 10px 0px;
        border-radius: 0px 10px 10px 0px;
}
.rg-image-nav a:hover{
        opacity:0.8;
}
.rg-caption {
        text-align:center;
        margin-top:15px;
        position:relative;
}
.rg-caption p{
        font-size:11px;
        letter-spacing:2px;
        font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
        line-height:16px;
        padding:0 15px;
        text-transform:uppercase;
}
.rg-view{
        height:30px;
}
.rg-view a{
        display:block;
        float:right;
        width:16px;
        height:16px;
        margin-right:3px;
        background:#464646 url(../images/views.png) no-repeat top left;
        border:3px solid #464646;
        opacity:0.8;
}
.rg-view a:hover{
        opacity:1.0;
}
.rg-view a.rg-view-full{
        background-position:0px 0px;
}
.rg-view a.rg-view-selected{
        background-color:#6f6f6f;
        border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
        background-position:0px -16px;
}
.rg-loading{
        width:46px;
        height:46px;
        position:absolute;
        top:50%;
        left:50%;
        background:#000 url(../images/ajax-loader.gif) no-repeat center center;
        margin:-23px 0px 0px -23px;
        z-index:100;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        opacity:0.7;
}

/*  ////////////////    Kontakt ///////////////////////////////////   */
address{
        font-size:0.8em;
        font-style:normal;
        padding-top:1em;
        padding-bottom:1em;
}

address a{
        text-decoration:none;
        color:#000;
        vertical-align:auto;
}

#notdienst{
        background-color:#ffedcc;
        font-size:0.8em;
        padding: 1em 0.5em;
}

#notdienst ul {
           padding-top:0.1em;
        color:#590202;
        margin-left: 0.6em;
        padding-left: 0.6em;
}

#notdienst ul  li{
           padding-top:0.4em;
}

#notdienst ul  li span{
           color:#000;
}

#notdienst a{
        text-decoration:none;
        color:#000;
        vertical-align:auto;
}

#canvas{
    background-color:#fff;

}

#map_canvas{
    height:450px;
    width:100%;
}

.scrollof{
    pointer-events: none;
}

/*  //////////////////////////////////   impressum  /////////////////////////// */
#impressum{
        font-size:0.8em;
}

#impressum h1{
        padding-bottom:0.8em;
}

#listefooter a{
        text-decoration:none;
        color:#000;
}

/*  ////////////////////// vertretung  ///////////////////////////*/
#vertretung{
        background:#ffedcc;
        max-width:300px;
        margin:auto;
        padding:1em;
}

#vertretung a{
        text-decoration:none;
        color:#000;
}

.notvertretung{
        max-width:595px;
        margin:auto;

}

/*  //////////////////////////////////   footer  /////////////////////////// */

footer{
        margin-top:2em;
}

#listefooter{
overflow:hidden;
color: #000;
background-color:#ffeee3;
font-family:'Muli', sans-serif;
padding:1em 0;
margin:auto;
width:fullwidth;
font-size:0.9em;
}

footer ul{
text-align:center;
}

footer ul li {
list-style-type:none;
padding-left:2em;
display:inline;
}


/*  ----------------------------------  Breakpoint für Monitore bis 959px ---------------------*/
@media only screen and (max-width:959px){
.viertel{
font-size:0.9em;
}

header .row{
        padding-left:2em;
        padding-right:2em;
}

.halbe{
        margin:2em 0;
        padding:1em;
}

.drittel{
        background-color:#ffceac;

}
.drittel p{
        text-align:center;
        padding:2em 0 1.8em 0;
}

.zweidrittel p{
        padding:0 0.5em 0.5em 0.5em;
}

.dreiviertel{
        margin-top:2em;
}

/*  ////////////////////// leistungen  ///////////////////////////*/

#leistungenabstand{
        margin-top:2em;
        margin-bottom:1.5em;
}

.hausarztvertrag{
        margin-top:2em;
        padding-left:1em;
}

#leistungen{
        padding-left:1em;
        padding-right:1em;
}


/*  ////////////////////// ueberuns  ///////////////////////////*/

#hrpraxisteam{
        margin-top:2em;
}

#praxisteam img{
    width: 100%;
    height: auto;
}

#praxisteam {
    text-align:left;
        padding:0.5em;
}

/*  ////////////////////// kontakt  ///////////////////////////*/

#impressum{
        margin:1em;
}

#notdienst{
        padding-left:1em;
        padding-right:1em;
}

}


/*  ---------------------------------- Ende Breakpoint bis 600 px ---------------------*/
@media only screen and (max-width: 600px) {
.hero h1 {
  font-size:2em;
}
.hero h2 {
  font-size:1.2em;
}
.hero h2  span{
  display:block;
}
.balken{
        display:none !important;
}


}


/*  ----------------------------------  Breakpoint für Monitore ab 960px ---------------------*/
@media only screen and (min-width:960px){

.innerbox{
        max-width:960px;
        margin:auto;
        }

.viertel{
        width:23.5%;
        float:left;
        margin-right:2%;
}

.halbe{
        width:49%;
        float:left;
        margin-right:2%;
        padding:1em;
}

.row{
        overflow:hidden;
}

.drittel{
        width:32%;
        float:left;
        margin-right:2%;
        padding-left:0.5em;
}

.zweidrittel{
        width:66%;
        float:left;
        margin-right:2%;
}

.row{
        overflow:hidden;
}

.dreiviertel{
        width:74%;
        float:left;
        margin-right:2%;
}

.dreiviertel:last-child,
.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child,
.viertel:last-child{
        margin-right:0;
}

}
/* /////////////////////////////////   Back to top button //////////////////////  */
#back-top {
        position: fixed;
        bottom: 30px;
        right:30px;

}
#back-top a {
        display: block;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        color: #ff8939;
        /* background color transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
}
#back-top a:hover {
        color: #ff8939;
}

#back-top a i{
        display:block;
        font-size:4em;
        color:#ff8939;
}

@media only screen and (max-width:600px){
        #back-top a i{
        display:block;
        font-size:3em
}

}


/*   ////////   back-to-top   //////////////////////  */
/* arrow icon (span tag) */
#back-top span {
        width: 78px;
        height: 78px;
        display: block;
        margin-bottom: 7px;
        background: #f90 url(../images/navigate.png) no-repeat center center;
        /* rounded corners */
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        /* background color transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
}
#back-top a:hover span {
        background-color: #ff8939;
}