/*
Theme Name: www.drgabimey.de
Version: 1.00
Author: Simon Cipa @ cipa+co markenkommunikation
Author URI: http://www.buero-cc.de
*/

@import url("css/reset.css");
@import url("css/tools.css");


/* allgemein
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body { height: 100%; }
html { min-width: 300px; background: #F3EFEE; }
body { margin: 0px!important; overflow-x: hidden; overflow-y: scroll; }
img { max-width: 100%; height: auto; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* Header
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header { top: 0; left: 0; background-color: transparent; height: 120px; width: 100%; min-width: 320px; display: block; z-index: 99999; }
header .wrapper.wrapper-header.clearfix { height: 100%; }

/* logo
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
a#logo { display: block; background: url('images/mey-logo.png') 0 0 no-repeat; width: 281px; height: 63px; position: absolute; top: 33px; left: 17px; z-index: 1000; text-indent: -9999px; }

/* Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
div.wrapper { margin: 0 auto; max-width: 800px; position: relative; }
div.wrapper-image { margin-bottom: 12px; }
div.wrapper-footer-image { margin: 12px auto; }

/* Accordion
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
div.accordion { background-color: #cba1a4; color: #FFF; margin: 12px; }  
#content div.accordion .content-inner { max-width: 520px; padding: 1em 0; margin-bottom: 30px; }
div.accordion .content-box { display: none; }
.accordion-section-content { color: #FFF; display: none; clear: both; }
#content div.accordion .content-inner ul { margin: 0 0 10px -13px; }

/* typography
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body { color: #AA9C95; font: 16px/1.6 'Work Sans', Arial, Helvetica, sans-serif; font-weight: 300; }
h1,h2,h3 { font: 100%/1.4 'Work Sans', Arial, Helvetica, sans-serif; clear: both; font-weight: 300; }

h1 { font-size: 16px; margin-bottom: 60px; line-height: 1.3em; color: #CBA1A4; text-transform: uppercase; font-weight: 300; letter-spacing: 3px;}
h1.second-headline { margin-top: 80px; margin-bottom: 30px; }
#homepage h1 { margin-bottom: 25px; }
body.praxis-lesitungen #content h1 { margin-bottom: 0; }
h2 { font-size: 16px; line-height: 24px; text-align: left; font-weight: 500;  margin: 0 0 -5px 0; letter-spacing: 1px; }
strong,b,.bold { font-weight: 500; }
p { font-size: 16px; margin-bottom: 25px;  }



/* Background + Colors
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.color-white { color: #fff; }
.color-rosa { color: #CBA1A4; }
.bg-color-white { background-color: #FFF; }
.bg-color-brown { background-color: #aa9c95; }
.bg-color-rosa { background-color: #cba1a4; }

/* Abstände
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.margin-b-12 {margin-bottom: 12px!important;}

/* Sprechzeiten + Kontakt
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.sprechzeit-tag-montag { margin-right: 15px; }
.sprechzeit-tag-dienstag { margin-right: 25px; }
.sprechzeit-tag-mittwoch { margin-right: 23px; }

.kontakt-label-telefon { margin-right: 40px; }
.kontakt-label-mail { margin-right: 15px; }

/* Navigation
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
nav { height: 24px; background: #AA9C95; z-index: 99999; line-height: 1; }
nav ul { margin: 0; padding: 0; }
nav ul li { width: 24.5%; text-align: center; padding: 0; display: inline-block; list-style-type: none; }
nav ul li a { display: block; color: #FFF; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; font-size: 11px; line-height: 26px; }
nav ul li a:hover, nav ul li a.active { color: #000; }
nav ul li.homepage-link { display: none; }
.menu ul { margin:0; padding:0; list-style-type:none; } 
.menu ul:after {content:''; display:block; clear:both; } 
a.nav-btn { display: none; }



/* Content
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#content { width: 100%; background: transparent;}
#content .content-inner, footer .content-inner { max-width: 580px; margin: 0 auto; padding: 3em 0; }


/* Content Listen
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#content ul { list-style-type: none; margin: 0 0 50px -13px; padding: 0; }
#content ul li { font-size: 16px; font-weight: 300; list-style-type: none; text-indent: -26px; padding-left: 40px;}
#content ul.about { margin: 0 0 0 -13px; } 
#content ul.about li { padding-bottom: 15px; }
#content ul li:before { content:'° '; margin-right: 14px; padding: 0; position: relative; top: 5px; }
#content ul li.more:before { content:'› '; margin-right: 14px; padding: 0; position: relative; top: 0; text-decoration: none!important; }
#content ul li.more a { font-size: 11px; color: #fff; text-decoration: underline;  }
#content ul li.more a:hover { text-decoration: none; cursor: pointer;  }

/* Links
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #FFF; text-decoration: none; }
a:hover { color: #000; text-decoration: none; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s;  }
a:active { background-color: transparent; }

a.no-effect {color: #AA9C95; text-decoration: none; }  
a.no-effect:hover {color: #AA9C95; text-decoration: none; cursor: pointer; }  

/* Footer
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
footer { margin: 0 auto; max-width: 800px; background-color: #AA9C95; color: #FFF;  }

/* media queries
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1170px) {
  div.wrapper { width: auto; }
}

@media screen and (min-width: 802px) { nav { display: block!important; } }

@media screen and (max-width: 801px) {
    
    header { position: relative; background-color: #FFF; height: 150px; width: 100%; min-width: 320px; }
    .mobile-header { position: fixed; top: 0; left: 0; background-color: #AA9D95; height: 44px; width: 100%; min-width: 320px; display: block; z-index: 99999; }
    header .wrapper.wrapper-header.clearfix { height: auto; }

    nav { height: 44px; background: #AA9D95; }
    nav ul li a { font-size: 14px; line-height: 38px; text-align: left; margin-left: 45px; }
    nav ul li.homepage-link { display: inline-block; }
    a.nav-btn {display: block; position: absolute; right: 36px; top: 6px; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer; outline: none; background-image: url('images/nav-icon.png'); background-repeat: no-repeat; background-position: center center; background-size: 100%; overflow: hidden; z-index: 999999; white-space: nowrap; text-indent: 100%; }
    a.nav-btn.open { background-image: url('images/nav-icon-close.png'); }

    a#logo { margin-top: 30px; }

    div.wrapper-image { margin-bottom: 12px; }

    .menu-icon { display: inherit; float:left; } 
    .menu { height: 200px; width: 100%; float: left; z-index: 999999; position: fixed; background: #AA9D95; top: 44px; left: 0; display:none; }
    .menu ul li {width: 100%; }


    #content .content-inner, footer .content-inner { max-width: 580px; margin: 0 auto; padding: 3em 1em; }

    #content div.accordion .content-inner { padding: 1em; } 

  }


@media screen and (max-width: 767px) {  
  body { position: relative; }
  main { padding: 3em 0 1em 0!important; } 

}

@media screen and (max-width: 550px) {}
@media screen and (max-width: 450px) {}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

        a#logo { background-image: url('images/mey-logo@2x.png'); background-size: 100%; }
        a.nav-btn { width: 34px; height: 34px; background-image: url('images/nav-icon@2x.png'); background-size: 100%; }
        a.nav-btn.open { width: 34px; height: 34px; background-image: url('images/nav-icon-close@2x.png'); background-size: 100%; }
        

}