@charset "utf-8";

/*
* CSS-Design
* Website Dr. Roland Bültemann
* RESPONSIVE WEBSITE
*/


/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html{	
	font-size: 100%; /* Browserstandard: 16px */
    position: relative; 
    min-height: 100%;
    background-color: #f0f0f0;
}

img{
	max-width: 100%;
}

.clear{
    clear: both;
}

#mobile-menu-btn{
    float: left;
    padding: 0 0 5px 10px;
    color: #e7663e;
    font-size: 1rem; 
    font-weight: 400;
}

#close-button{ /* nur für landing-pages */
    position: absolute;
    left: 0px;
    top: -40px;
}

/* Layout * * * * * * * * */

.wrapper{
	max-width: 1200px;
	margin: 0 auto;
    overflow: hidden;
}

#frame{ /* Kopfleiste */
    margin-bottom: 35px;
    -webkit-box-shadow: -1px -1px 8px 1px #818384;
    -moz-box-shadow:    -1px -1px 8px 1px #818384;
    box-shadow:         -1px -1px 8px 1px #818384;  
}

header .wrapper{
	background-color: #f0f0f0;
    padding: 30px 0 10px 0;
}

header img{
    float: left;
    margin-left: 20px;
}

header h3{ /* Dr. Roland Bültemann Arzt für Innere Medizin */
    float: right;
    margin: 40px 0 0 0;
    font-size: 1rem;
    font-weight: 400;
}

#main{
    width: 55%;
    margin-bottom: 300px;
    margin-top: 10px;
    float: left;
}

#main-content{
    width: 100%;
}

article{
    padding: 30px 20px;
    margin: 0px 0 50px 0;
    background-color: #fff;
}

.responsiveContainer {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* aside */

#right{
    width: 20%;
    float: right;
    padding-left: 1%;
    padding-top: 15px;
}


#left{
    width: 22%;
    float: left;
    margin-left: 1%;
    padding-top: 40px;   
}


/* footer */

footer{
	width: 100%;
	float: left;
	background: #e7663e;	
	color: #fff;
    padding: 40px 0 40px 10px;
    position: absolute;
    left: 0;
    bottom: 0px;
}


/* main navigation aside right * * */

nav.aside ul{
    float: right;
    list-style: none;
    display: block;
    width: 100%;
}

nav.aside li{
    font-weight: 700;
    border-bottom: dotted 1px #777777;
}

nav.aside li a{
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 10px 0 0px 10px;
}

nav.aside li a:hover{
    color: #e7663e;
}

.active{
    color: #e7663e;    
}
/* navigation end */


aside .infos-grün{
    padding: 20px 5px 0px 10px;
    line-height: 24px;
    font-weight: 700;
    color: #1e853c;
} 
    
aside .infos-grau{
    padding: 0px 0px 20px 10px;
    line-height: 24px;
    font-weight: 600;
    color: #666666;
}

.aside-aktuelles{ /* aside left */
    padding-right: 30px;    
}



/* Typografie * * * * * * */


/* Accordion * * * * * * */

dt{
    cursor:pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 26px;
}

dt:before{
    content: url("../images/aufzaehlungszeichen.png");
    margin-right: 7px;
}

dd{
    display: none;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 10px;
    line-height: 26px;
    padding: 0 0 0 20px;
}


a, p, h1, h2, h3, h4, h5, h6{
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 10px;
    line-height: 26px;
}

b {color: #666666;
}

a {
    color: #666666;
    text-decoration: none;
    font-weight: 600;
}

.row-team a{
     color: #e7663e;   
}

footer a {
    color: #fff;
    text-decoration: underline;
}

.top {
    cursor: pointer;
}

footer a:hover {
    color: #666666;
}

a:hover {
    color: #666666;
    text-decoration: none;
    color: #e7663e;
}

h1 {
    color: #e7663e;
    font-size: 2rem;
    line-height: 36px;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px #b5b5b5;
    font-weight: 400;
}

h2{
    color: #666666;
    font-size: 1.5rem;
    font-weight: 600;
}

.logotext{
    float: left;
    color: #e7663e;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 18px 0 0 0;
}

.logotextklein{
    float: left;
    text-transform: none;
    color: #666666;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 19px;
    padding: 5px 0 0 0;
}

h3 {
    color: #666666;
    font-size: 1.2rem;
    font-weight: 600;
}


h4 {
    color: #555555;
    font-size: 1rem;
    font-weight: 400;    
}


h5 {
    color: #666666;
    font-size: 0.9rem;       
}

.teamspalte {
    padding-left: 25px;     
}

h6 {
    color: #666666;
    font-size: 0.7rem;
    line-height: 16px;
}

p {
	font-size: 16px;
	font-size: 1rem;
	margin: 0 0 15px;
}

blockquote {
margin: 12px 0 24px 25px;
font-style: italic;
font-family: Georgia, Times, serif;
line-height: 22px;
color: #666; 
}

blockquote:before { content: '„'; color: #3d6aa1;  font-size:40px;
margin-left: -20px;}


/* Liste */
ul, ol{
	margin: 0 0 12px 20px;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
    list-style: none;
    list-style-image: url("../images/aufzaehlungszeichen.png");	  
}


ol{
    font-family: 'Open Sans', sans-serif;    
}

nav ul{
list-style: none;
margin: 0 ;
}


/* Tabelle * * * */

table{
	border-collapse: collapse;
	margin: 12px 0 24px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    width: 100%;
}

thead{
	background: #3d6aa1;
	color: #fff;
    font-size: 1rem; 
}

th{
	padding: 3px 0;
    border-right: 1px solid #fff;
    color: #adcdeb;
    padding: 6px 2% 0 2%;    
}

td{
	border-top: 4px solid #fff;
	padding: 8px 10px;
	border-right: 1px solid #fff;
    width: 70%;
}

tbody tr:nth-child(even) {
    background-color: #e4e4e4;
}
     
tbody tr:nth-child(odd) {
    background-color: #f2f3f3;
}
   


/* Raster * * * * * * * * */

.row{
	width: 100%;
	float: left;
}

.row-team{
	width: 100%;
	float: left;
    padding: 30px 20px;
    margin: 0px 0 50px 0;
    background-color: #fff;
}

.row-team h6{
    padding: 0 0 0 20px;
}

.column {
float: left;
}

.full { width: 100%; }
.half { width: 49%; }
.third { width: 33%; }
.two-thirds { width: 66%; }
.fourth { width: 25%; }
.two-fourth {width: 50%;}
.three-fourth {width:75%;}


/* subnaviagation */
nav .row{
    margin-left: 0;
}

nav .column{ 
    float: left;
    display: inline;
    width: 48%;
    padding: 30px 0;
    text-align: center;
    letter-spacing: 1px;
    margin-left: 3%;
    margin-bottom: 3%;
    list-style: none !important;
    -webkit-box-shadow: -0.5px -0.5px 4px 0.5px #818384;
    -moz-box-shadow:    -0.5px -0.5px 4px 0.5px #818384;
    box-shadow:         -0.5px -0.5px 4px 0.5px #818384;
}

nav .column-first{   
    float: left;
    display: inline;
    width: 48%;
    padding: 30px 0;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 3%;
    list-style: none !important;
    -webkit-box-shadow: -0.5px -0.5px 4px 0.5px #818384;
    -moz-box-shadow:    -0.5px -0.5px 4px 0.5px #818384;
    box-shadow:         -0.5px -0.5px 4px 0.5px #818384;
    margin-left: 0%;
}/* subnaviagation end*/
  

    

/* Media Queries * * * * * * * * */


@media only screen and (min-width: 1280px){
        
#mobile-menu-btn{
    display: none;
}
    
header h4{/* mobile */
    display: none;
}
     
#sub-one-column{
    display: none;
}

#sub-one-column-all{
    display: none;
} 
    
.logo-mobile{
display: none;
    }
}


    
@media only screen and (min-width: 980px) and (max-width: 1279px) {  
 
#mobile-menu-btn{
    display: none;
}
    
header h4{
    display: none;
}

#sub-one-column{
    display: none;
}

#sub-one-column-all{
    display: none;
}
   
.logo-mobile{
display: none;
    }  
      
}
  
    
@media only screen and (min-width: 760px) and (max-width: 979px) {
    
#mobile-menu-btn{
    display: none;
}
    
.logo-mobile{
display: none;
    }  
     
.wrapper {
    margin-left: 2%;
}

    
header h4{
    display: none;
}
      
#sub{ /* subnavigation two-columns */
    display: none;
} 
 
    
#sub-one-column-all{
    display: none;
}
    
/* subnavigation */    
#sub-one-column{
    margin-top: 50px;
}
    
nav .one-column{ 
    float: left;
    display: inline;
    width: 100%;
    padding: 30px 0;
    text-align: center;
    letter-spacing: 1px;
    margin-left: 0.5%;
    margin-bottom: 3%;
    list-style: none !important;
    -webkit-box-shadow: -0.5px -0.5px 4px 0.5px #818384;
    -moz-box-shadow:    -0.5px -0.5px 4px 0.5px #818384;
    box-shadow:         -0.5px -0.5px 4px 0.5px #818384;
}/* subnavigation end */
    

    
/* aside */
#left{
    display: none;       
} 
    
#right{
    width: 24%;
}/* aside end*/    

#main{
    width: 75%;
}    
    
header h3{
    margin: 40px 35px 0 0;
}
    
.logo-mobile{
display: none;
    }   
}
    

@media only screen and (max-width: 759px) {
    
.logotext{
display: none;
}

.logotextklein{
display: none;
}
 
.wrapper {
    margin: 0 2%;
}    
  
aside{
    display: none; 
}    
    
    
header h3{
    display: none;
}
    
.telmobile{
    font-size: 1.5rem;
    margin-right: 15px;
    text-align: center;
}
   
    
#main{
    width: 100%;
    margin-bottom: 400px;
}
    

/* navigation */
#sub-one-column{
    display: none;
}
    
nav .one-column{ 
    float: left;
    display: inline;
    width: 100%;
    padding: 30px 0;
    text-align: center;
    letter-spacing: 1px;
    margin-left: 0.5%;
    margin-bottom: 3%;
    list-style: none !important;
    -webkit-box-shadow: -0.5px -0.5px 4px 0.5px #818384;
    -moz-box-shadow:    -0.5px -0.5px 4px 0.5px #818384;
    box-shadow:         -0.5px -0.5px 4px 0.5px #818384;
}

/* mobile-nav */
#sub-one-column-all{
    margin-right: 1%;
    display: none;
    
} /* navigation end */
     
#sub{/* subnavigation two-columns */
    display: none;
}
    
#mobile-main-content{
}
 
    
footer .third {
    width: 100%;
    margin: 0 0 0 50px;
    overflow: hidden; 
}
    
.logo-normal{
    display: none;
}

}


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

      
.logotext{
display: none;
}

.logotextklein{
display: none;
}

    
body {
    width: 100%;
    margin: 0 auto;
}
    
#frame{
    padding: 20px 0 0 0;
}


header h3{
    display: none;
}
   
    
aside{
    display: none;
}
    
#main{
    margin-bottom: 400px;
    float: left;
    padding: 0 10px 0 5px;
}
       
   
footer .third {
    width: 100%;
    margin: 0 0 0 40px;
    overflow: hidden; 
}
    
.third {
    width: 100%;
}
    
.logo-normal{
    display: none;
}
    
.logo-mobile{
    margin: 0 0 0 50px;
}
    
header img{
    float: left;
    margin-left: 10px;
}

    
    
}