/* CSS Homepage Sanitätshaus Gutbrod. Responsives Design */

/* Mobile First */

@charset "utf-8";


/* ---------  general ---------- */
html, body {margin:0; padding:0; color:#000; font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#000; font-weight:normal; line-height:1.4; overflow-wrap:break-word; word-wrap:break-word; background:#fff;}

.clearfloat {clear:both; height:0; font-size:1px; line-height:0}

.top-margin-x-small {margin-top:10px;}
.top-margin-small {margin-top:20px;}
.top-margin {margin-top:30px;}
.top-margin-medium {margin-top:40px;}
.top-margin-large {margin-top:50px;}

.bottom-margin-x-small {margin-bottom:10px;}
.bottom-margin-small {margin-bottom:20px;}
.bottom-margin {margin-bottom:30px;}
.bottom-margin-medium {margin-bottom:40px;}
.bottom-margin-large {margin-bottom:50px;}

.no-margin-bottom {margin-bottom:0!important}
.no-padding-bottom {padding-bottom:0!important}



ul, ol, dl {padding:0; margin:0}

h1, h2, h3, h4, h5, h6 {
	/*font-family: Arial,Helvetica,sans-serif; */
	font-family: 'Merriweather', serif; 
	margin-top:0;
}

h1 {/*font-size:1.875rem;*/ font-size:30px; font-weight:normal; line-height:120%;color:#0575BB;}
h1.homeH1 {/*font-size:1.875rem;*/ font-size:28px; font-weight:normal; line-height:120%;color:#0575BB;}
h2 {/*font-size: 1.25rem;*/ font-size:24px; font-weight:normal; line-height:120%; color:#0575BB; }
h3 {/*font-size:1.500rem;*/ font-size:21px; font-weight:normal; line-height:120%; color:#0575BB;} 

h4 {/*font-size:1.3334rem;*/ font-size:19px; line-height:120%; color:#0575BB;}
h5 {/*font-size:1.167rem;*/ font-size:17px; font-weight:normal; line-height:120%; color:#0575BB;}
h6 {/*font-size:1.167rem;*/ font-size:16px; font-weight:normal; line-height:120%; color:#000;}

/* Unterstich für Headlines */
hr.hrHeadline{ margin-top:11px;width:53px; border-top: 2px solid transparent; border-color:#0575BB; margin-bottom:21px; margin-left:0; text-align:left;}
hr.hrHeadline.underlineH1 {margin-top:20px;}
hr.hrHeadline.underlineH2 {margin-top:6px;}
hr.hrHeadline.underlineH3 {margin-top:3px;}
hr.hrHeadline.underlineH4 {margin-top:2px;}
hr.hrHeadline.underlineH5,
hr.hrHeadline.underlineH6 {margin-top:0; border-color:#000}
hr.hr-center {margin-right:auto; margin-left:auto;}

p, ul, ol, dl, table {/*font-size:16px;*/ font-size:1.0rem; font-family:Arial,Helvetica,sans-serif; font-weight:normal; color:#000;}
p {line-height:1.45; padding-bottom:8px;}
.small-txt {font-size:0.75rem;}

.red {color:#A62C33}
.green {color:#0575BB;}
strong {color:#0575BB; font-weight:normal}
.underline {text-decoration:underline}
.uppercase {text-transform:uppercase}
p.increased-font-size, ul.increased-font-size {font-size:1.3334rem;}/* 16px */

ul {list-style-type: none;}
/* liste mit dash */
ul.ul-text {line-height:1.45; padding-bottom:8px; margin:0 0 10px 0; list-style-type: none; padding-left:1em}
ul.ul-text > li:before {content: "- "; display:inline-block; width:1rem; margin-left:-1rem}

/* liste von Links */
ul.ul-text-links {line-height:1.6;} 


a,  a img {border:none}
a, a:link, a:visited {color:#0575BB; text-decoration:underline;}
a:hover, .a:focus {color:#0575BB; text-decoration:none;}
a:acitve {color:#0575BB; text-decoration:underline;}

a.no-underline-link, a.no-underline-link:visited, a.no-underline-link:active {text-decoration:none;}
a.no-underline-link:hover {text-decoration:underline;}

/* Headline mit Link */
a.a-headline {display:inline-block;}
a.a-headline, 
a.a-headline:hover, 
a.a-headline:focus {text-decoration:none;} 
a.a-headline h1, a.a-headline h2, a.a-headline h3,
a.a-headline h4, a.a-headline h5, a.a-headline h6 {display:inline-block; margin-bottom:4px}

.btn.btn-primary {background-color:#0575BB; font-size: 16px; /*text-transform: uppercase;*/ border:none; padding: 13px 16px 15px 16px; letter-spacing: 0.07rem;  border-radius:0; text-decoration:none; color:#fff; margin-right:6px}
.btn.btn-primary:last-child {margin-right:0}
.btn.btn-lg.btn-primary i {padding-left:15px; font-weight:normal; font-size:13px; position:relative; bottom:1px}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {background-color:#044E7C; transition:0.3s; color:#fff;}

/* ---------  Ende general ---------- */


/* -------------------------------------*/
/* ------------ Site grid  ------------ */
/* -------------------------------------*/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default setting */

section {width:100%; box-sizing: border-box; margin:0 auto; padding:0;}
.contentBox {width:100%; max-width:1140px; box-sizing: border-box; margin:0 auto; padding:0 10px;}

.sectionHeader {background:#fff; z-index:10; height:10px;}
@media screen and (min-width: 900px) {
	.sectionHeader {height:20px;}
}
.sectionMainNavi {background:#fff; min-height:70px;}
@media screen and (min-width: 900px) {
	.sectionMainNavi {height:auto; /*min-height:70px;*/}
}
.sectionBranding {background:#fff;}
.sectionMainContent {background:#fff; margin-top:40px; /*margin-bottom:30px;*/}
.sectionFooter {width: 100%;margin:0 0 0 0; position:relative; margin-top:50px; margin-bottom:0;}
.sectionFooter .contentBox {background-color:#e3e3e3;}


/* -- Logo -- */
.logo {display:inline-block; position:absolute; top:30px; width:200px; z-index:10; }
.logo img {width:100%}
/* logo for Medium Devices 1000px and up  */
@media screen and (min-width: 900px) {
	.logo {width:250px; top:45px;}
}
/* -- Ende Logo -- */

/* -------------------------------------------*/
/* ------------ End of Site grid ------------ */
/* -------------------------------------------*/


/* ----------------------------- */
/* ------ Main Navigation ------ */
/* ----------------------------- */
.mainNavi {width:100%; box-sizing:border-box;}

 /* Die Klasse .toggleMenu blendet das Hamburger-Icon ein und aus.
Die Klasse wird von JavaScript gesetzt.
JavaScript ist in der Datei  ResponsiveDropDownNaviTokens.txt
Ab welcher Auflösung der Hamburger-Icon eingeblendet wird ebenso in der Datei ResponsiveDropDownNaviTokens.txt eingestellt */
.toggleMenu {display:block; background:transparent;padding: 10px 15px;}
/* Die Klasse .toggle-active blendet beim Klick auf Hamburger-Icon das Hauptmenü ein und aus (Bei kleinen Bildschirmauflösungen).
Die Klasse wird von JavaScript gesetzt.
JavaScript ist in der Datei ResponsiveDropDownNaviTokens.txt */
.toggle-active {display: block;}

/* -------- Hamburger-Menu-Button ----------- */
/* Hamburger-Menu-Button positionieren */
.menu-item {box-sizing:border-box; padding:15px 0 15px 0; background-color:transparent; text-align:right;}
/* -- humburger menu button styling -- */
.hamburger {display: block;position: relative;overflow: hidden;margin: 0;padding: 0;width: 30px;height: 29px;font-size: 0;text-indent: -9999px;appearance: none;-webkit-appearance: none;-moz-appearance: none;box-shadow: none;border-radius: 2px;border: none;cursor: pointer;transition: background 0.3s; -webkit-transition:background 0.3s}
.hamburger :focus {outline:none;}
.hamburger span {display: block;position: absolute;top: 13px;left: 4px;right: 4px;height: 3px;background: #fff;}
.hamburger span:before,
.hamburger span:after {position: absolute;display: block;left: 0;width: 100%;height: 3px;background-color: #fff;content: "";}
.hamburger span:before {top:-7px;}
.hamburger span:after {bottom: -7px;}
	/* hamburger animation to X icon */
.hamburger {background-color:#0575BB;} 
.hamburger span {
	transition: background 0s 0s;
	-webkit-transition: background 0s 0s; /* Safari */
}
.hamburger span::before,
.hamburger span::after {
	transition-duration: 0.3s, 0.3s;
	-webkit-transition-duration: 0.1s; /* Safari */
	transition-delay: 0s, 0s;
	-webkit-transition-delay: 0s, 0s; /* Safari */
}
.hamburger span::before {	
	transition-property: top, transform; 
	/* transition-property: top, transform;  */
	/* -webkit-transition-property:top, -webkit-transform 0s; */  /* Safari */
	/* -ms-transition-property:top, -ms-transform 0s ;*/ /* IE 9 */
}
.hamburger span::after {	
	transition-property: bottom, transform;
	/* transition-property: bottom, transform; */
	/* -webkit-transition-property: bottom, -webkit-transform 0s; */ /* Safari */
	/* -ms-transition-property: bottom, -ms-transform; */ /* IE 9 */
}
	/* active state, i.e. menu open */
.hamburger.ham-is-active {background-color:#0575BB;}
.hamburger.ham-is-active span {background: none;}
.hamburger.ham-is-active span::before {
	top: 0;	
	transform: rotate(45deg);
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform:rotate(45deg); /* Safari */
}
.hamburger.ham-is-active span::after {
	top: 0;	
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform:rotate(-45deg); /* Safari */
}
.hamburger.ham-is-active span::before,
.hamburger.ham-is-active span::after {
	transition-delay: 0s, 0.3s;
	-webkit-transition-delay: 0.0s, 0.0s;
	-ms-transition-delay: 0.0s, 0.3s;
	background-color: #fff;
}
/* -- end humburger menu button styling --*/
/*------- ende Hamburger-Menu-Button --------------- */

.navi {list-style: none; *zoom:1; background:#e3e3e3; /*position:relative; top:50px;*/ height:auto; z-index:100; box-sizing:border-box;}
.navi:before,
.navi:after {content: " "; display: table; }
.navi:after {clear: both;}
.navi ul {list-style: none;display: block;width: 100%;}
.navi a {padding:15px 20px 5px 20px; color:#000; font: 16px/1em  Arial, Helvetica, sans-serif; min-height:42px; /*text-transform: uppercase;*/ box-sizing:border-box;}
.navi li {position: relative; clear:both;}

.navi > li {float: none;border-top: 1px solid #fff;}
.navi > li:first-child {border-top:none;}
.navi > li > .parent {background-image: none;}
.navi > li > a {display: block; text-decoration:none;}

/* -toggle to open sub menu at small devices- */
.navi li .open-subMenu {float:right; width:23%; padding: 10px 15px 10px 15px; min-height:42px; box-sizing:border-box; margin:0px; cursor:pointer; z-index:200; position:relative; background:#A1A2A6; text-align:center;} 
.navi li .open-subMenu:hover {background:#0575BB; transition:0.3s} 
@media screen and (min-width: 450px) {
	.navi li .open-subMenu {width:13%;}
}

/* genericon pfeil nach unten einblenden */
.navi li .open-subMenu span.genericon:after {content:'\f502'; font: normal 1.0em Genericons;color:#fff; position:relative; top:8px;}
/* genericon pfeil nach oben einblenden */
.navi li.hover .open-subMenu span.genericon:after {content:'\f500'; font: normal 1.0em Genericons;color:#fff; position:relative; top:0px}
/* -end of toggle to open sub menu at small devices- */

.navi li  ul {position:absolute; left: -9999px; margin-left:0;}
.navi > li.hover > ul {left: 0;}
.navi li li.hover ul {left: 100%;top: 0;}
.navi li li a {display: block; background:#B7B8B9; position:relative; border-top: 1px solid #fff; text-decoration:none;}
.navi li li li a {background:#B7B8B9; border-top: 1px solid #fff;}
.navi > li.hover > ul , 
.navi li li.hover ul {position: static;}

.navi li a:hover {background-color:#0575BB; color:#fff; transition:0.3s}
.navi ul.subNav li a:hover {background-color:#0575BB; transition:0.3s}

.currentMenuItem {background-color:#0575BB;}
.currentMenuItem a {color:#fff}


/* Navi for Medium Devices 1000px and up  */

/* Important if you change pixel value of viewport please keep in mind 
	- if you work in DNN, to change this value also in DNN Menu - ResponsiveDropDownNaviTokens.txt
	- if you work without DNN, to change this value also in templates/js/navigation.js 
	- in both cases ajust the breack point for Logo and sections (manue and header) in Site Grid */
@media screen and (min-width: 1000px) {
	.mainNavi {height:90px;}
		
	.toggleMenu {display:none;}
	.menu-item {display:none;}
	.hamburger {display:none;}
	
	.navi {background:transparent; float:right; position:relative; /*top:45px;*/ top:30px; box-sizing:border-box;}
	.navi ul {box-sizing:border-box;}
	.navi li {clear:none; box-sizing:border-box; padding:0; margin:0;}
	.navi li a:hover {
		background-color: transparent;
		transition: 0.0s
	}

	.navi a {color:#000; padding:0 12px 20px 12px; /*font: 12px/1em  Arial, Helvetica, sans-serif;*/ /*text-transform: uppercase;*/ min-height:inherit; box-sizing:border-box;}
	.navi > li {float: left; border-top: none;}
	
	.navi li li, 
	.navi li li li {width:200%; box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2)}
	.navi li li a, 
	.navi li li li a {background:#fff; color:#000; white-space:nowrap; padding: 10px 20px; width: 100%}
	.navi li li a {z-index:100;}
	.navi li li li a {z-index:200;}	
	.navi > li.hover > ul , 
	.navi li li.hover ul {position: absolute;}	

	/* at hover shows a line under navi items */
	.navi li > a {
		border-bottom: 2px solid #fff;
		padding-bottom: 6px; /* defines space between menu and menu separator */
	}

	.navi li.hover > a {
		border-bottom: 2px solid #0575BB;
	}

	/* at hover do not show a line under navi items of subNav */
	.navi ul.subNav li > a {
		border-bottom: 0px solid #fff;
	}

	.navi ul.subNav li.hover > a {
		border-bottom: 0px solid #fff;
	}

	/* lets menue separator line shine through the subnavigation */
	.navi ul.subNav {
		border-top: 1px solid transparent;
		box-sizing: border-box;
	}

	.navi > li.hover a {
		color: #000;
	}

	.navi li.hover a:hover {
		color: #0575BB;
	}

	.navi ul.subNav {
		z-index: 400;
		border-left: 0;
		border-right: 0;
	}

	.navi ul.subNav a {
		/*font-size: 12px*/
	}

	.navi li.hover ul.subNav a:hover {
		background-color: #fff;
		background-image: none;
		transition: 0s;
	}

	.navi .currentMenuItem {
		background: transparent;
	}

	.navi .currentMenuItem > a {
		border-bottom: 2px solid #0575BB;
	}

}
/* end Navi for media screen min-width: 1000px and up */

/* ---------------------------------- */
/* ------ Ende Main Navigation ------ */
/* ---------------------------------- */

/* ----------------------------------------*/
/* -------- Styling Footer --------------- */
/* ----------------------------------------*/
.footer {padding:30px 20px 40px 20px; }
.footer .footerLogo {max-width:150px;}
.footer .footerText {color:#666; font-size:14px; padding:15px 0 0 0; margin:0}
/* ----------------------------------------*/
/* -------- End Styling Footer ----------- */
/* ----------------------------------------*/


/* ----------------------------------------*/
/* ----- Styling Branding Home ----------- */
/* ----------------------------------------*/
.brandingBoxHome {
	position: relative;
	text-align: center;
	overflow:hidden;
}
.brandingBoxHome .brandingImg {position: relative; width:100%;}
.brandingBoxHome .brandingCaption {
	box-sizing: border-box;
	position: absolute;
	top:20%;
	z-index:10;
	display:block;
	width: 100%;	
}
@media screen and (min-width: 350px) {
	.brandingBoxHome .brandingCaption {top:30%;}
}
@media screen and (min-width: 1000px) {
	.brandingBoxHome .brandingCaption {top:38%;}
}

.brandingBoxHome .brandingCaptionContent {
	margin: 0 auto;
	width: 60%;
	background-color: #fff;
	opacity: 0.95;
	text-align: center;
	color: #7a7a70;
	padding: 4% 5% ;
	font-size: 31px;
}
.brandingBoxHome .brandingCaptionContent .captionImg {max-width:304px; display:inline-block;}
.brandingBoxHome .brandingCaptionContent .captionImg img {width:100%;} 
/* ----------------------------------------*/
/* ----- End Styling Branding Home ------- */
/* ----------------------------------------*/

/* ----------------------------------------*/
/* ----- Styling Branding Following Pages ----------- */
/* ----------------------------------------*/
.brandingBoxFollow {
	position: relative;
	text-align: center;
	overflow:hidden;
}
.brandingBoxFollow .brandingImg {position: relative; width:100%;}

/* bei kleinen Bildschirmen wird Caption abgeschaltet 
	und stattdessen slogan unter dem Branding-Bild angezeigt
*/
.brandingBoxFollow .brandingCaption {display:none;}
.brandingBoxFollow .brandingAlt { 
	box-sizing: border-box;
		display:block;
		width: 100%; 
		border-bottom: 2px solid #C5D7F1;
		width: 100%;
		text-align: center;
}
.brandingBoxFollow .brandingAlt .brandingCaptionContent {
		margin: 0 auto;
		background-color: #fff;
		text-align: center;
	}

.brandingBoxFollow .brandingAlt .captionImg {margin:35px auto;}
.brandingBoxFollow .brandingAlt .brandingCaptionContent .captionImg {max-width:304px; display:block;}
.brandingBoxFollow .brandingAlt .brandingCaptionContent .captionImg img {width:100%;} 


/* bei großen Bildschirmen wird Caption eingeschaltet. 
	der slogan ist im Caption.
	Der alternative Slogan (unter dem Bild) wird abgeschaltet
*/
@media screen and (min-width: 500px) {
	.brandingBoxFollow .brandingAlt {display:none;}

	.brandingBoxFollow .brandingCaption {
		box-sizing: border-box;
		position: absolute;
		top:20%;
		z-index:10;
		display:block;
		width: 100%;	
	}
	
	@media screen and (min-width: 1000px) {
		.brandingBoxFollow .brandingCaption {top:20%;}
	}

	.brandingBoxFollow .brandingCaption .brandingCaptionContent {
		margin: 0 auto;
		width: 40%;
		background-color: #fff;
		opacity: 0.95;
		text-align: center;
		color: #7a7a70;
		padding: 1%;
		font-size: 31px;
	}
	.brandingBoxFollow .brandingCaption .brandingCaptionContent .captionImg {max-width:250px; display:inline-block;}
	.brandingBoxFollow .brandingCaption .brandingCaptionContent .captionImg img {width:100%;} 
}
/* ----------------------------------------*/
/* ----- End Styling Following Pages ------- */
/* ----------------------------------------*/

/* ----------------------------------------*/
/* ----- Styling Home Main Content ------- */
/* ----------------------------------------*/

/* ----------------------------------------*/
/* ----- End Styling Home Main Content ------- */
/* ----------------------------------------*/


/* ------------------------------------------------------*/
/* accordion */
/* ------------------------------------------------------*/
.wrapperDropDownArea {box-sizing:border-box; width:100%; margin-bottom:6px}
.headerDropDownArea {background:#C5D7F1; cursor:pointer}
.headerDropDownArea:hover {background:#BBD1EE; transition: background-color 0.2s}

.headerDropDownArea .headerToggle .toggleH {color:#0575BB; padding:16px 10px;margin:0; box-sizing:border-box;}

.headerDropDownArea .headerToggle .toggleH::after { content:'+'; font-family:Arial, Helvetica, sans-serif; display:inline-block; float:right; font-size:30px}
.headerDropDownArea.open .headerToggle .toggleH::after { content:'-'; font-family:Arial, Helvetica, sans-serif; display:inline-block; float:right; font-size:36px}

.contentDropDownArea {padding:20px 0 10px 0; display:none}

.contentDropDownArea .column-1 {padding-left:0;}
.contentDropDownArea .column-2 {padding-left:0; padding-right:0; padding-top:20px}
 @media screen and (min-width:768px) { 
	.contentDropDownArea .column-2 {padding-left:15px; padding-top:0}
}
/* ------------------------------------------------------*/
/* ende of accordion */
/* ------------------------------------------------------*/