/* Custom Styles for Dr.B.O. */

/* created 2015 */

/* html */
html									{font-size: 100%; font-size: 16px; font-size: 1rem;}

/* body */
body									{font-family: 'Raleway', Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility;}

/* logo */
.logo									{height: 150px; position: absolute; margin-left: 50px; z-index: 101;}

/* typography */
h2										{font-size: 2rem; font-weight: 300; color: rgba(160, 160, 160, 1); }
p										{font-size: 0.9375rem; font-size: 15px; font-weight: 300; color: rgba(95, 95, 95, 1); letter-spacing: 0.5px; line-height: 1.625;}
a										{color: rgba(95, 95, 95, 1); font-size: 0.9375rem; font-size: 15px; font-weight: 300; letter-spacing: 0.5px; line-height: 1.625;}
a:hover									{color: rgba(95, 95, 95, 1);}

.lead									{font-size: 1.125rem; font-size: 18px; line-height: 1.5; font-weight: 200; display: block; width: 90%; margin: 0 auto;}
.lead-extra								{font-size: 1.125rem; font-size: 18px; line-height: 1.5; font-weight: 200; display: block; width: 70%; margin: 0 auto;}
em										{text-transform: uppercase; font-style: normal; font-weight: 400;}
.center									{text-align: center;}
.headline-small	h2						{color: rgba(100, 96, 96, 1); text-align: center;  position: relative;  margin-bottom: 30px; font-size: 2rem; font-size: 32px; font-weight: 200;}
.headline-small	p						{text-align: center; }
.headline-small-style2 h2				{color: rgba(100, 96, 96, 1); text-align: left;  position: relative;  margin-bottom: 15px; font-size: 1.125rem; font-size: 18px; font-weight: 200;}				
.dr-height								{text-transform: uppercase; font-size: 0.9375rem; font-size: 15px; font-weight: 400;text-rendering: optimizeLegibility;}
.dr-height-small						{text-transform: uppercase;  font-size: 12px; font-weight: 400;text-rendering: optimizeLegibility;}
.upper-drbo								{text-transform: uppercase; font-size: 12px; font-weight: 400;}

/* header-bild */
.header-image-wrap						{height: 425px; margin-top: 0px; background-color: rgba(235, 235, 235, 1); border-bottom: 1px solid rgba(230, 230, 230, 1); overflow: hidden;}
.header-image	img						{width:1170px; margin: 0 auto;-webkit-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.11);-moz-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.11);
										box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.11);}

/* helper */
.distance-top-01						{padding-top: 15px;}

/* teaser */
.main-teaser							{margin-top: 20px;}
.main-teaser-element					{border-right: 1px solid rgb(205, 205, 205);}
.main-teaser-element:last-child			{border-right: none;}
.main-teaser a							{margin-bottom: 0px; display: block;}
.main-teaser a:hover					{color: rgba(180, 180, 180, 1); text-decoration: none;}
.main-teaser-icon						{height: 50px; width: 50px; display: block; float: left; margin-right: 25px; margin-bottom: 10px;}

.leistungen-teaser						{margin-top: 30px;}	
.leistungen-teaser-element				{background-color: rgba(255, 255, 255, 1); margin-bottom: 30px; overflow: hidden; min-height: 210px; 
										-webkit-box-shadow:1px 0px 10px 1px rgba(240,240,240,1);-moz-box-shadow:1px 0px 10px 1px rgba(240,240,240,1);box-shadow: 1px 0px 10px 1px rgba(240,240,240,1);}
.leistungen-teaser-element h2			{font-size: 0.9375rem; font-size: 15px;line-height: 1.25; text-transform: none; text-align: center; font-weight: 300; padding-left: 10px; padding-right: 10px;}
.leistungen-teaser-element:hover img	{opacity: 0.5; }
.leistungen-teaser a					{text-decoration:none;}
.leistungen-teaser-element-large		{min-height: 240px;}


/* header-bild */
.einleitung								{text-align: center; margin-left: 0px; margin-right: 0px; padding-top: 0px;}
.einleitungstext h2						{position: relative;  margin-bottom: 40px; margin-top: 0px; color:rgba(100, 96, 96, 1); font-size: 3.25rem; font-size: 52px; font-weight:100;}
.einleitungstext p						{margin-bottom: 30px;}

/* explaination */
.explaination							{margin-top: 30px;}

/* divider */
.divider								{width: 100%; border-bottom: 1px solid rgba(220, 220, 220, 1);text-align: center;}
.divider h3								{font-size: 0.9375rem; font-size: 15px; color:rgba(255, 255, 255, 1); 
										font-weight: 400; letter-spacing: 0.25px; text-transform: uppercase; margin: 0px; display: inline-block;
										padding: 5px 10px; position: relative; top: 13px; border-radius: 16px;}

.divider-thin							{border-top: 1px solid rgba(240, 240, 240, 1);width: 100%; display: block; margin-top: 30px; margin-bottom: 40px;}
.divider-top							{padding-top:50px; margin-top: 30px;
									-webkit-box-shadow: 0px -10px 5px -12px rgba(0,0,0,0.42);-moz-box-shadow: 0px -10px 5px -12px rgba(0,0,0,0.42);box-shadow: 0px -10px 5px -12px rgba(0,0,0,0.42);}

/* listen */
.bm-color-01-active															{background-color:rgba(240, 240, 240, 1);}
ul.behandlungsmethoden-allgemeinmedizin-small > li > a.bm-color-01-active 	{color:rgba(150, 150, 150, 1);}
.bm-color-02-active															{background-color:rgba(240, 240, 240, 1);}
ul.behandlungsmethoden-aesthetik-small > li > a.bm-color-02-active 			{color:rgba(150, 150, 150, 1);}

ul.untersuchungen > li > h2		{display: flex; line-height: 1.25;}

/* modal-small */
.modal-small					{width: 50%; margin: 0 auto;}

/* media */
.media							{margin-bottom: 15px;}
.media-body						{display: table-cell; vertical-align: middle;}
.media-body	p					{padding-left: 15px; padding-top: 10px;}

/* datenschutz */
ul.datenschutz					{padding-left: 0;}	
.datenschutz	li				{border-bottom: 1px dotted rgba(230, 230, 230, 1); padding-bottom: 0px; padding-top: 5px; list-style-position: inside;}
.datenschutz	li	> p			{color: rgb(160, 160, 160); display: inline-table; width: 90%; margin-bottom: 3px;}

/* kontakt */
.kontakt						{background-color:rgba(240, 240, 240, 1);}
.kontakt h2						{font-size: 1.25rem; font-size: 20px; color: rgba(150, 150, 150, 1); }
.kontakt p						{line-height: 0.75; color: rgba(150, 150, 150, 1);}
.kontakt a						{line-height: 1; color: rgba(150, 150, 150, 1);}
.kontakt-divider				{width: 100%; display: block; background-color: rgba(210, 210, 210, 1); height: 2px; border-bottom: 1px solid rgba(255,255,255,1); margin-bottom: 10px;}

.kontakt-angaben h2				{font-size: 1.25rem; font-size: 20px; color: rgba(95, 95, 95, 1); }
.kontakt-angaben h3				{font-size: 1rem; font-size: 16px; color: rgba(95, 95, 95, 1); }
address							{margin-bottom: 0px;}

ol.anfahrt-list					{padding-left: 0;}	
.anfahrt-list	li				{border-bottom: 1px dotted rgba(230, 230, 230, 1); padding-bottom: 0px; padding-top: 5px; list-style-position: inside;}
.anfahrt-list	li	> p			{color: rgb(160, 160, 160); display: inline-table; width: 90%; margin-bottom: 3px;}

/* btn-kontakt */
.btn-kontakt					{background-color: rgba(160, 160, 160, 1); }
.btn-kontakt:hover				{background-color: rgba(210, 210, 210, 1); }
a.btn-kontakt					{margin-bottom: 20px; color: rgba(255,255,255,1);}

.flower							{margin-top: 0px; width: 100%;}
.flower	img						{height: 150px; display: block; margin: 0 auto;}

/* portrait*/
.portrait						{margin-bottom: 30px;-webkit-box-shadow:1px 0px 10px 1px rgba(240,240,240,0.7);-moz-box-shadow:1px 0px 10px 1px rgba(240,240,240,0.7);
								box-shadow: 1px 0px 10px 1px rgba(240,240,240,0.7);}

/* team */
.team							{margin-top: 30px;}

.carousel-coworker				{background-color: rgba(255, 255, 255, 1); height: 280px; margin-top: 0px; z-index: 98; overflow: hidden; margin-top: 30px;}
.caption-coworkers				{background-color: rgb(255,255,255); padding-top: 20px; padding-bottom: 0px; bottom: 30px; left: 15px; right: 15px; height: 80px;}
.caption-coworkers	h2			{margin: 0px; font-size: 0.9375rem; font-size: 15px; font-weight: 400; text-shadow: none;}
.caption-coworkers	p			{text-shadow: none; color: rgb(160, 160, 160); font-size: 0.6875rem; font-size: 11px; }
.team-element					{text-align: center;margin-bottom: 30px;
								-webkit-box-shadow:1px 0px 10px 1px rgba(240,240,240,1);-moz-box-shadow:1px 0px 10px 1px rgba(240,240,240,1);box-shadow: 1px 0px 10px 1px rgba(240,240,240,1); }

/* kosmetik-anwendung */
.kosmetik-anwendungen				{margin-top: 0px; margin-bottom: 60px; }
.kosmetik-anwendungen h2			{font-size: 1.125rem; font-size: 18px; font-weight: 200; color: rgb(100, 96, 96); margin-top: 0px; border-bottom: 1px solid rgba(240,240,240,1); padding-bottom: 10px;
									margin-top: 0px;}
.kosmetik-anwendungen h2:before		{content: ''; display: inline; height: 20px; width: 20px; margin-right: 10px; background-image: url(../img/icons/grey-2.svg);float: left;}
.kosmetik-anwendung-detail			{min-height: 200px; padding: 15px;	}

/* termine */
.termine							{margin-top: 30px; }
.termine h2							{font-size: 1.125rem; font-size: 18px; font-weight: 300; color: rgb(100, 96, 96);  margin-top: 0px; border-bottom: 1px solid rgba(240,240,240,1); padding-bottom: 10px;
									margin-top: 0px;}
.termine h3							{font-size: 1.125rem; font-size: 18px; font-weight: 200; line-height: 1.25;color: rgb(100, 96, 96); margin-top: 0px;}
.termine-detail						{min-height: 200px; padding: 15px;	}

ul.termine							{padding-left: 0px;}
ul.termine	> li					{list-style: none; margin-bottom: 30px;}
.date	p							{color:rgb(189, 120, 169); padding-bottom: 0px; margin-bottom: 0px;}

/* mitgliedschaften */
.mitgliedschaften					{margin-top: 60px;}

/* impressum */
.impressum	h2						{font-size: 1.25rem; font-size: 20px; color: rgba(95, 95, 95, 1); }

/* datenschutz */
.datenschutz h2						{font-size: 1.25rem; font-size: 20px; color: rgba(95, 95, 95, 1); }

/* lebenslauf */
.lebenslauf	> tbody > tr > td 		{border: none;}
.lebenslauf	> tbody > tr > th 		{border: none;}
/* maps */
.maps								{width: 100%; height: 400px; display: block; margin: 0 auto; margin-top: 40px;}

.table > tbody > tr > td, 
.table > tbody > tr > th, 
.table > tfoot > tr > td, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > thead > tr > th			{padding-bottom: 0px;}


/* mediaqueries */
/* Super small devices (phones, less than 400px) */
@media (max-width: 400px){

.logo							{position: absolute; left: 0; width: 50%; margin-left: 25%;}
.logo img						{height: 100px; display: block; margin: 0 auto;}	
h2								{color: rgba(45, 45, 45, 1);}
p,a								{font-weight: 300; color: rgba(45, 45, 45, 1); letter-spacing: 0.5px; line-height: 1.625;font-size: 14px;}
.main-teaser a					{margin-bottom: 20px;}

.row							{margin-left: 0px; margin-right: 0px;}
.container						{padding-left: 0px; padding-right: 0px;}			

/* einleitungstext */
.einleitung						{margin-bottom: 30px;}
.einleitungstext				{padding: 0;}
.einleitungstext h2				{color: rgba(45, 45, 45, 1); font-weight:200; font-size: 1.5rem; font-size: 24px; margin-bottom: 40px;}
.einleitungstext p				{margin-bottom: 0px;}
.lead							{font-size: 0.875rem;font-size: 14px; font-weight: 300; text-align: left; width: 100%; margin-bottom: 0px; padding-left: 15px;}

/* teaser */

.main-teaser					{margin-top: 0px;}
.main-teaser-element			{border-right:none;}
.main-teaser-icon				{height: 40px; width: 40px; margin-bottom: 0px; margin-right: 5px;}
.leistungen-teaser				{margin-top: 0px;}
.leistungen-teaser-element		{min-height: 210px; }
.leistungen-teaser-element h2	{color: rgba(45, 45, 45, 1); font-size: 0.75rem; font-size: 12px;}

/* header-bild */
.header-image-wrap				{height: 100%; border-bottom:none;padding-left: 0px;padding-right: 0px;}
.header-image	img				{width: 100%; display: block; margin: 0 auto;}

/* headline-small */
.headline-small h2				{color: rgba(45, 45, 45, 1); font-size: 1.5rem; font-size: 24px; font-weight: 200;}
.headline-small p				{text-align: left;}
.headline-small-style2 h2		{color: rgba(45, 45, 45, 1); font-weight: 200;}

/* divider */
.divider						{margin-top: 30px; margin-bottom: 30px; }
.divider h3						{font-size:0.75rem; font-size:12px; letter-spacing: 0;}

/* zitat */
.zitat							{margin-top: 10px;}
.zitat h2						{margin-bottom: 5px;}
.zitat h3						{text-align: left;}
.zitat > .zitat-text p			{text-align: left; width: 100%; padding-left: 5px;}

/* zitat */
.well							{padding-top: 50px;}

/* untersuchungen */
ul.untersuchungen > li::before	{background-repeat: no-repeat; height: 30px;}
.mesosteps img					{margin-bottom: 30px;}

/* kosmetik */
.kosmetik-anwendung-detail		{min-height: 0px;}
.kosmetik-anwendungen h2		{line-height: 1.25;}

/* modal */
.modal-small					{width: 95%; margin: 0 auto;}
.modal-dialog					{width: 94%;}
.modal h2						{font-size: 1.25rem; font-size: 20px;}
.modal h3						{font-size: 1.25rem; font-size: 20px;}
ul.modal-list > li > h2			{letter-spacing: 0.5px; line-height: 1.625;font-size: 14px; font-weight: 300;}
ul.modal-list > li::before		{margin-top: 3px;}

/* tab-pane */
.tab-pane-intro h2				{font-size: 1.5rem; font-size: 24px; padding-top: 20px;}
.tab-pane-intro h3				{font-weight: 300;}
.tab-pane-intro h4				{font-weight: 300;}

/* bottom menu */
ul.behandlungsmethoden-allgemeinmedizin > li > a		{display: flex;}
ul.behandlungsmethoden-aesthetik > li > a				{display: flex;}
ul.behandlungsmethoden-allgemeinmedizin-small > li > a	{display: flex;}
ul.behandlungsmethoden-aesthetik-small > li > a			{display: flex;}
ul.behandlungsmethoden-allgemeinmedizin-small > li > 
a.bm-color-01-active									{color: rgba(45, 45, 45, 1);}
ul.behandlungsmethoden-aesthetik-small > li > 
a.bm-color-02-active									{color: rgba(45, 45, 45, 1);}
.fa-angle-right											{padding-left: 0px; padding-right: 5px; padding-top: 2px;}


/* drBO */
.caption-coworkers				{bottom: 0px;}
.caption-coworkers p			{color: rgba(45, 45, 45, 1);}

/* erfolge */
.erfolge						{margin-top: 30px;}

/* dtermine */
.termine h3						{color: rgba(45, 45, 45, 1);}
.termin-group:first-child		{margin-top: 0px;}
.termin-group					{margin-top: 40px;}
/* footer */
footer							{margin-bottom: 20px;}
footer	h2						{font-size: 1.25rem; font-size: 20px; font-weight: 200;}
.kontakt p						{color: rgba(95, 95, 95, 1);}
.kontakt a						{color: rgba(95, 95, 95, 1);}
.kontakt h2						{color: rgba(95, 95, 95, 1); font-weight: 200;}
a.btn-kontakt					{width: 100%; margin-top: 15px; height: 40px; padding-top: 12px;}
a.btn-kontakt					{color: rgba(255, 255, 255, 1);}
a.btn-kontakt > .fa-angle-right	{position: absolute; top: 110px; right: 20px;}
}

/* Extra small devices (phones, less than 768px) */
@media (min-width: 401px) and (max-width: 767px){
/* logo */
.logo							{position: absolute; margin-left: 0px; }
.logo img						{height: 125px; display: block; margin: 0 auto;}
h2								{color: rgba(45, 45, 45, 1);}
p,a								{font-weight: 300; color: rgba(45, 45, 45, 1); letter-spacing: 0.5px; line-height: 1.625;}
.headline-small h2				{color: rgba(45, 45, 45, 1);}
.headline-small-style2 h2		{color: rgba(45, 45, 45, 1); font-weight: 200;}


.row							{margin-left: -5px; margin-right: -5px;}
/* einleitungstext */
.einleitung						{margin-bottom: 30px;}
.einleitungstext				{padding: 0;}
.einleitungstext h2				{color: rgba(45, 45, 45, 1); font-weight:200; margin-bottom: 40px; font-weight:100; font-size: 2.375rem; font-size: 38px;}
.einleitungstext p				{margin-bottom: 0px;}
.lead							{font-size: 0.875rem; font-size: 14px; font-weight: 300; text-align: left; width: 100%; margin-bottom: 0px;padding-left: 15px;}

/* headline-small */
.headline-small h2				{font-size: 1.5rem; font-size: 24px; font-weight: 200;}
.headline-small p				{text-align: left;}

/* header-bild */
.header-image-wrap				{height: 100%; border-bottom:none;padding-left: 0px;padding-right: 0px;}
.header-image	img				{width: 100%; display: block; margin: 0 auto;}

/* teaser */

.main-teaser-element			{border-right: none;}
.main-teaser-icon				{height: 100%; margin-bottom: 0px;}
.main-teaser a					{margin-bottom: 20px;}
.leistungen-teaser-element h2	{color: rgba(45, 45, 45, 1);}
.leistungen-teaser-element img	{width: 100%; }

/* divider */
.divider						{margin-top: 30px; margin-bottom: 30px; }
.divider h3						{letter-spacing: 0;}

/* zitat */
.zitat							{margin-top: 10px;}
.zitat h2						{margin-bottom: 5px;}
.zitat h3						{text-align: left;}
.zitat > .zitat-text p			{text-align: left; width: 100%; padding-left: 5px;}

/* untersuchungen */
ul.untersuchungen > li::before	{background-repeat: no-repeat; height: 30px;}

.mesosteps img					{margin-bottom: 30px;}

/* modal */
.modal-small					{width: 95%; margin: 0 auto;}
.modal-dialog					{width: 94%;}
.modal h2						{font-size: 1.25rem; font-size: 20px;}
.modal h3						{font-size: 1.25rem; font-size: 20px;}
ul.modal-list > li > h2			{letter-spacing: 0.5px; line-height: 1.625;font-size: 14px; font-weight: 300;}
ul.modal-list > li::before		{margin-top: 3px;}

/* tab-pane */
.tab-pane-intro h2				{font-size: 1.5rem; font-size: 24px; padding-top: 20px;}
.tab-pane-intro h3				{font-weight: 300;}
.tab-pane-intro h4				{font-weight: 300;}

/* bottom menu */
ul.behandlungsmethoden-allgemeinmedizin > li > a		{display: flex;}
ul.behandlungsmethoden-aesthetik > li > a				{display: flex;}
ul.behandlungsmethoden-allgemeinmedizin-small > li > a	{display: flex;}
ul.behandlungsmethoden-aesthetik-small > li > a			{display: flex;}
ul.behandlungsmethoden-allgemeinmedizin-small > li > 
a.bm-color-01-active									{color: rgba(45, 45, 45, 1);}
ul.behandlungsmethoden-aesthetik-small > li > 
a.bm-color-02-active									{color: rgba(45, 45, 45, 1);}
.fa-angle-right											{padding-left: 0px; padding-right: 5px; padding-top: 2px;}

/* drBO */
.caption-coworkers				{bottom: 0px;}
.caption-coworkers p			{color: rgba(45, 45, 45, 1);}
.termine h3						{color: rgba(45, 45, 45, 1);}

/* erfolge */
.erfolge						{margin-top: 30px;}

/* kosmetik */
.kosmetik-anwendung-detail		{min-height: 0px;}
.kosmetik-anwendungen h2		{line-height: 1.25;}

/* footer */
footer							{margin-bottom: 20px;}
footer	h2						{font-size: 1.25rem; font-size: 20px; font-weight: 200;}
.kontakt p						{color: rgba(95, 95, 95, 1);}
.kontakt a						{color: rgba(95, 95, 95, 1);}
.kontakt h2						{color: rgba(95, 95, 95, 1); font-weight: 200;}
a.btn-kontakt					{width: 100%; margin-top: 15px; height: 40px; padding-top: 12px;}
a.btn-kontakt					{color: rgba(255, 255, 255, 1);}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px){

/* logo */
.logo							{position: absolute; margin-left: 0px; }
.logo img						{display: block; margin: 0 auto;}

/* einleitungstext */
.einleitungstext				{padding: 0;}
.einleitungstext h2				{margin-bottom: 40px; font-weight:100; font-size: 2.375rem; font-size: 38px;}
.einleitungstext p				{margin-bottom: 0px;}
.lead							{font-size: 0.875rem; font-size: 14px; font-weight: 300; text-align: center; width: 100%; margin-bottom: 0px;}

/* main-teaser */

.main-teaser-icon				{height: 75px;}

/* header-bild */
.header-image-wrap				{height: 350px; border-bottom:none; padding-left: 0px; padding-right: 0px;}
.header-image	img				{max-width: 991px; display: block; margin: 0 auto;}

/* portrait */
.portrait						{margin-top: 30px;}

/* erfolge */
.erfolge						{margin-top: 30px;}

/* teaser */
.main-teaser					{margin-top: 50px;}
.main-teaser-element			{border-right: none;}
.main-teaser a					{margin-bottom: 20px;}
.leistungen-teaser-element		{min-height: 250px; }
	
/* divider */
.divider						{margin-top: 30px; margin-bottom: 30px;}

.caption-coworkers				{background-color: rgb(255,255,255); padding-top: 20px; padding-bottom: 0px; bottom: 0px; left: 15px; right: 15px; height: 80px;}


.mesosteps img					{margin-bottom: 30px;}

/* tab-pane */
.tab-pane-intro h3				{font-weight: 300;}
.tab-pane-intro h4				{font-weight: 300;}

/* tab-pane */
.kosmetik-anwendung-detail		{min-height: 0px;}
.kosmetik-anwendungen h2		{line-height: 1.25;}

/* footer */
footer							{margin-bottom: 20px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px){
.logo							{position: absolute; margin-left: 0px; }	

p,a								{font-weight: 300; color: rgba(95, 95, 95, 1); letter-spacing: 0.5px; line-height: 1.625;}

/* header-bild */
.header-image-wrap				{height: 405px; border-bottom:none; padding-left: 0px; padding-right: 0px;}
.header-image	img				{max-width: 1199px; display: block; margin: 0 auto;}

/* divider */
.divider						{margin-top: 30px; margin-bottom: 30px; }

/* erfolge */
.erfolge						{margin-top: 30px;}

/* kontakt */
.kontakt h2						{font-size: 18px; font-size: 1,125rem;}


}



/* Larger Screens */
@media (min-width: 1200px){}