/* Add here all your css styles (customizations) */

/* ############################## */
/* VARIABLES */
/* ############################## */
/* NEUTRAL THEME */
:root {
	--zms_topbar_bg:#136988;
	--zms_header_bg:#ffffff !important;
	--zms_header_main_text_color:#333333;
	--zms_header_dropdown_text_color:#333333;
	--zms_logo: url('skin_zms5_base/common/img/zmslogo.svg');
	--zms_card_bg:white;
	--zms_card_shadow:0 0 2rem rgba(0,0,0,0.2);
	--zms_card_delimiter_border:1px dotted #333;
	--zms_color_primary:#07aee9;
	--zms_color_primary_border:#07aee9;
	--zms_color_primary_hover:#07aee9;
	--zms_color_primary_border_hover:#07aee9;
	--zms_color_primary_opac15:#07aee926;
	--zms_color_secondary:#6c757d;
	--zms_color_secondary_border:#6c757d;
	--zms_color_secondary_hover:#5a6268;
	--zms_color_secondary_border_hover:#545b62;
	--zms_color_black:#000000;
}

/* /VARIABLES */
/* ############################## */

body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#topbar {
	background:var(--zms_topbar_bg);
	color: white;
	font-size: small;
	padding: .25rem 1rem .5rem 4.75rem;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
}
#topbar a,
#topbar a:hover {
	color: white;
	text-decoration:none;
}
#topbar a:last-child {
	border-right:none;
}
#topbar a i {
	opacity:0.65;
}
#topbar a:hover i {
	opacity:1;
}
@media (max-width: 991px) {
	#topbar {
		padding: .25rem 1rem .5rem 4.75rem;
		text-align: left;
	}
	#topbar a.nav-item.pr-3,
	#topbar a.nav-item.px-3 {
		padding-left:0 !important
	}
}
@media (min-width: 992px) {
	#topbar {
		padding: .25rem 2rem .5rem 2rem;
	}
}



#header_nav_toggler {
	z-index: 10000;
	color:var(--zms_header_main_text_color);
	position:absolute;
	background: var(--zms_header_bg);
	border-radius:0;
}
#header_nav_toggler:not(.collapsed) {
	position:fixed;
	top:0;
	left:0;
}
#header_nav_toggler:not(.collapsed) .fa-bars:before {
	content: "\f00d";
}
header,
header nav {
	background: var(--zms_header_bg);
}
header a.navbar-brand {
	background-image: var(--zms_logo);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
header a.navbar-brand img {
	image-rendering: optimizequality;
	visibility:hidden;
}

@media (min-width: 992px) {
	#header_nav_toggler {
		display:none;
	}
	header.collapse {
		display:block !important;
	}
	header li.dropdown:hover .dropdown-menu {
		display:block !important
	}
	header .dropdown-menu {
		border-radius: 0;
		border-top: 3px solid var(--zms_color_primary);
	}
	a[data-toggle="dropdown-toggle"] {
		display:none;
	}
	header .navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 1.5rem;
		padding-left: 0;
		max-width:calc((100vw - 240px) / 5);
		overflow:hidden;
		text-overflow:ellipsis
	}
	header .navbar-expand-lg .navbar-nav li:last-child .dropdown-menu {
		right: 0;
		left: unset;
	}
}
@media (max-width: 991px) {
	header {
		position:fixed !important;
		top:0;
		left:0;
		width:80vw;
		max-width:32rem;
		height:100vh;
		box-shadow:1rem 1rem 100vw;
		z-index: 100;
		padding-top:0;
		transition:left .5s ease, box-shadow 1.5s ease;
	}
	header:not(.show) {
		left: -80vw;
		height:100vh;
		box-shadow:none;
		transition:left .5s ease, box-shadow 3s ease-out;
	}
	header .navbar-brand {
		display:block;
		margin:0 auto;
		text-align:center
	}
	header .navbar-brand img {
		width:calc(80vw - 4rem);
		max-width:20rem;
		margin-left: -1rem;
	}
	header nav.navbar {
		align-items: flex-start;
		justify-content: flex-end;
		flex-flow: column;
	}
	header nav.navbar,
	header nav.navbar .navbar-collapse,
	header nav.navbar .navbar-collapse.collapse, 
	header nav.navbar .navbar-collapse.collapse .navbar-nav{
		width:100%;
		display: flex !important;
	}
	header .dropdown-menu {
		opacity: 0;
		visibility:hidden;
		overflow: hidden;
		max-width:calc(80vw - 2rem);
		transition: opacity 1s;
	}
	header .dropdown-menu.show,
	header .dropdown-menu:target {
		opacity: 1;
		visibility:visible;
		display:block !important;
		transition: opacity 1s;
	}
	header .dropdown-menu .dropdown-item {
		text-overflow:ellipsis;
		overflow:hidden;
	}
	li.nav-item {
		border-bottom:1px dotted var(--zms_header_main_text_color);
		margin: 0 -.8rem;
		padding: 0 .8rem;
	}
	li.nav-item.dropdown .nav-link a[data-toggle="dropdown"] {
		float:right;
		text-align:right;
		width:2rem;
		height:2rem;
	}
	li.nav-item.dropdown .nav-link > a.text-truncate {
		display:inline-block;
		width:calc(100% - 2rem);
		overflow:hidden;
		text-overflow:ellipsis
	}
	li.nav-item.dropdown .dropdown-menu {
		margin-top:-1rem;
		background-color: transparent;
		border:0;
		border-radius: 0;
		color:var(--zms_header_main_text_color);
	}
	li.nav-item.dropdown .dropdown-menu a:not(:hover) {
		color:var(--zms_header_main_text_color);
	}

}
header > nav > .navbar-collapse >ul > li {
	color:var(--zms_header_main_text_color);
}
header > nav > .navbar-collapse >ul > li > .nav-link a,
header > nav > .navbar-collapse >ul > li > .nav-link a:hover {
	padding-right:.3rem;
	color:var(--zms_header_main_text_color);
	text-decoration:none
}
header > nav > .navbar-collapse >ul > li.active > .nav-link a,
header > nav > .navbar-collapse >ul > li > .nav-link a:hover {
	color:var(--zms_color_primary);
}

main article {
	padding-top:3rem;
}

/* CUSTOMIZE: CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	--margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
	bottom: 3rem;
	z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
	height: 32rem;
	background-size:cover;
}
.carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
}
.carousel h1 {
	text-shadow: 0 0 3rem #00263f;
	font-size: 480%;
	font-weight: 100;
	text-align: left;
	line-height:1;
	margin-bottom:1.5rem;
	color:#ffffff;
}
.carousel p {
	font-size: 220%;
	font-weight: 600;
	text-align: left;
	color:#ffffff;
	font-style:italic;
	background:#e91e63;
	display:inline-block;
	padding:0 1rem;
	line-height:1.35
}
@media (max-width: 991px) {
	.carousel h1 {
		font-size: 450%;
	}
}

/* CUSTOMIZE: CARD
-------------------------------------------------- */
.card-deck {
	margin-bottom: 2rem;
}
.card-deck .card {
	background: var(--zms_card_bg);
	box-shadow: var(--zms_card_shadow);
}
@media (max-width: 991px) {
	.card-deck .card {
		display: flex;
		flex: auto;
		margin-bottom: 2rem;
	}
}
.card-deck .card .card-header {
	/* color: white; */
}
.home #e164.card-deck .card:nth-child(1) .card-header {
	background: #3474a4;
}
.home #e164.card-deck .card:nth-child(2) .card-header {
	background: #ff8300;
}
.home #e164.card-deck .card:nth-child(3) .card-header {
	background:var(--zms_color_primary);
}
.card-deck .card .card-img-top {
	width: 100%;
	max-height: 7rem;
	object-fit: cover;
}
.web.home #e164.card-deck .card:nth-child(1) .card-img-top {
	background: #3f83b5;
}
.web.home #e164.card-deck .card:nth-child(2) .card-img-top {
	background: #FF9800;
}
.web.home #e164.card-deck .card:nth-child(3) .card-body {
	padding-top: .25rem;
}
.web.home #e164.card-deck .card:nth-child(3) .card-body p.card-text {
	display:none;
}
.web.home #e164.card-deck .card:nth-child(3) .card-body ol {
	padding: 0;
	margin: 0 -1.2rem;
}
.web.home #e164.card-deck .card:nth-child(3) .card-body ol li {
	padding: .5rem 0 .5rem 1rem;
	list-style-type: none;
	border-bottom: var(--zms_card_delimiter_border);
}
.web.home #e164.card-deck .card:nth-child(3) .card-body ol li a {
	color: #333;
}
.web.home #e164.card-deck .card:nth-child(3) .card-body ol li a:before {
	content: "\f15c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: .5rem;
	color: var(--zms_color_primary);
	font-size: 150%;
}
.card-deck .card .btn.btn-primary {
	background-color: var(--zms_color_secondary);
	border-color:var(--zms_color_secondary_border);
	margin:1rem 0;
}
.card-deck .card .btn.btn-primary:hover {
	background-color: var(--zms_color_secondary_hover);
	border-color: var(--zms_color_secondary_border_hover)
}
.card-deck .card .card-linklist {
	min-height: 1px;
	padding: 1.25rem;
}
.web .contentEditable .bt_card_layout.card-deck {
	display:flex;
	flex-direction: row;
	flex-flow: row wrap;
	align-items:strech;
}
.web .contentEditable .bt_card_layout.card-deck > .bt_card {
	flex:1;
}
.web .contentEditable .bt_card_layout.card-deck > .bt_card > div {
	height:100%
}
.web .contentEditable.zmi-highlight:hover:before {
	z-index:10;
}

/* CUSTOMIZE: JUMBOTRON
-------------------------------------------------- */
.web.home .jumbotron {
	background-color:unset !important;
}
.web.home .jumbotron h1.display-4 {
	font-size: 2.5rem;
}
.web.home .jumbotron h1.display-4,
.web.home .jumbotron .lead {
	text-align: center;
}
.web.home .jumbotron .btn {
	background-color: var(--zms_color_primary) !important;
	border-color: var(--zms_color_primary_border) !important;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
}

/* CUSTOMIZE: FOOTER
-------------------------------------------------- */
footer * {
	font-size:normal;
	color:white;
}
footer a {
	color:white;
}
footer a:hover {
	color:white;
}
footer .text-center {
	font-size: small;
}
footer #socialmedia {
	font-size:1rem;
	white-space:nowrap;
}
footer .d-lg-flex {
	--height:1.25rem;
}

section#overview {
	background: #607D8B;
	background:#54626e;
	padding:2rem;
	margin:3rem 0 0 0;
	color:white;
}
section#overview > .row > div {
	max-width:20rem;
	margin:0 auto;
}
section#overview a,
section#contacts a:hover {
	color:#ffffffcc;
	text-decoration:none;
}
section#overview a:hover {
	color:#ffffff;
}
section#overview h2 {
	color: white;
	text-transform: uppercase;
	font-weight:normal;
	font-size: 1rem;
	margin: 0 0 1.5rem;
}
section#overview h2:after {
	content:' ';
	height:1rem;
	display:block;
	width:6rem;
	border-bottom:1px solid #ffffff8a;
}
section#overview article h3 {
	color: white;
	font-size: 1rem;
	font-weight:normal;
	margin:0;
}
section#overview hr {
	border-top: 1px dotted #ffffff80;
}
section#overview p {
	color: white;
	font-size: small;
	line-height: 1.5;
}
section#overview #useful_links ul li {
	margin-bottom:1.5rem;
	border-bottom:1px solid #ffffff33;
}
section#overview #useful_links ul li:hover {
	border-bottom:1px solid #ffffff66;
}
section#overview #useful_links ul li i {
	display:block;
	float:right;
	margin:0 .25rem;
}
section#overview #our_contacts p {
	line-height: 2;
}
section#overview #our_contacts i {
	display: block;
	float: left;
	width: 2.2rem;
	text-align: center;
	padding: .6rem;
	font-size:140%;
	margin: 0 .75rem 0 0;
	background: #ffffff40;
	border-radius: 4px;
	opacity:.75
}
section#overview #our_contacts address p span {
	display:block;
	margin-left:3rem
}

/* EASTEREGG */
@media (min-width: 1600px) {
	div#about_us {
		min-width:420px !important;
		transition:min-width 1s;
	}
	div#about_us p:before {
		content:' ';
		display:block;
		float:left;
		width:6rem;
		height:8rem;
		background-image:url('/sites/gpoh/bs5_gpoh/common/img/Schrappe.jpg');
		background-position:top;
		background-size:cover;
		margin:0 1rem 3rem 0;
		opacity:1;
		transition:height 1s, width 1s ease-in-out;
	}
	div#about_us:hover {
		cursor:zoom-in;
		min-width:520px !important;
		transition:min-width 1s ease-in-out;
	}
	div#about_us:hover p:before {
		width:10rem;
		height:14rem;
		transition:height 1s ease-in-out, width 1s ease-in-out;
	}
}


/* MAIN CONTENT */

li.breadcrumb-item a {
	color:var(--zms_color_primary);
}

main > div.row > article h1.title {
	margin-top: 1rem;
	margin-bottom: .5rem;
	font-weight: 300;
}
@media (max-width: 576px) {
	main > div.row > article h1.title {
		font-size: 3rem;
	}
}
@media (max-width: 767px) {
	main > div.row {
		flex-flow: column-reverse;
	}
}


/* ASIDE CONTENT */

@media (max-width: 768px) {
	aside.sidebar {
		/* NOT needed if nav translated to header section
			border-top:1px dotted black;
			padding:2rem
		*/
	}
}
aside .ZMSTeaserElement h2 {
	font-size: 1.15rem;
	margin: 0 0 .15rem 0;
	font-weight: bold;
	line-height: 1.5;
}
aside .ZMSTeaserElement .title {
	text-transform: uppercase;
	font-size: 1.15rem;
	border-bottom: 2px solid white;
	margin: -1.25rem;
	padding: 1.25rem;
	padding-bottom: .5rem;
	margin-bottom: .5rem;
	font-weight: bold;
	opacity: .55;
	text-overflow: ellipsis;
	overflow: hidden;
}
aside .ZMSTeaserElement .text {
	XX-overflow: hidden;
	display: block;
	text-overflow: ellipsis;
}
aside .ZMSTeaserElement .text a {
	text-overflow: ellipsis;
}
aside .ZMSTeaserElement ol.uploads li a:before {
	content: "\f15c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: .5rem;
	color: var(--zms_color_primary);
	font-size: 100%;
}
aside .ZMSTeaserElement ol.uploads {
	padding: 0;
	margin: 0 -1.2rem 2rem;
}
aside .ZMSTeaserElement ol.uploads li {
	padding: .5rem 0 .5rem 1rem;
	list-style-type: none;
	border-bottom: var(--zms_card_delimiter_border);
	text-overflow: ellipsis;
	overflow: hidden;
}
aside .ZMSTeaserElement .title a,
aside .ZMSTeaserElement ol.uploads li a {
	color: #0c5460;
}
aside .ZMSTeaserElement ol.uploads li a:before {
	content: "\f019";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: .5rem;
	color: var(--zms_color_primary);
	color: #000000;
	font-size: 100%;
}
aside .ZMSTeaserElement .HREF_MORE {
	display:none;
}
aside ul#sidebarnav {
	margin:-0.65rem 0 0 0;
	padding:0;
}
aside ul#sidebarnav > li {
	margin:.5rem 0 .5rem 0;
	padding:0;
	list-style-type:none;
	line-height:2;
}
aside ul#sidebarnav li a {
	padding:0;
	list-style-type:none;
	color:#333333;
	display:block;
	padding:0 1rem;
}
ul#sidebarnav li.current > a {
	font-weight:bold;
}
aside ul#sidebarnav > li.active > a,
aside ul#sidebarnav > li.current > a {
	background:var(--zms_color_primary_opac15);
}
/* Aggrated Aside-Nav */
header ul#sidebarnav {
	list-style-type:none;
	padding-left: 1.5rem;
}

header .dropdown-item.active,
header .dropdown-item.active:hover,
header .dropdown-item:active {
	text-decoration: none;
	font-weight:bold;
	opacity:0.6;
	background-color: #f8f9fa;;
	color:var(--zms_header_main_text_color);
}

main nav.toc {
	margin: 3rem 0;
	padding: 0 1rem 1rem 0;
	border: 1px solid var(--zms_color_primary);
	background: #9e9e9e0d;
}
main nav.toc:before {
	content:'Table of Content';
	display:inline-block;
	padding:0.5rem 1rem;
	background:var(--zms_color_primary);
	color:white;
	font-weight:bold;
	margin:0 0 1rem 0
}
main nav.toc a {
	color:#607D8B
}


/* SEARCH RESULT */
.flow form.search legend,
#search_results h4 {
	display:none
}
#search_results {
	border:1px solid var(--zms_color_primary) !important; 
	padding:0 1rem 0rem 1rem;
	background:#9e9e9e0d;
	margin:2rem 0 0 0;
}
.flow form.search div:not(.header) > .col-md-12 {
	padding-right: 0;
	padding-left: 0;
}
.flow #search_results .header.row {
	margin-bottom: 1rem
}
.flow #search_results .header.row {
	background:var(--zms_color_primary);
	color:white;
	display:inline-block;
	padding:.5rem;
	margin-left:-1rem;
	position:relative
}
.flow #search_results .header.row span#q {
	padding:0 .3rem;
	font-weight:bold
}
.flow #search_results h2 {
	font-size: 1rem;
	font-weight: bold;
	margin: 1rem 0 .25rem 0;
	padding:.3rem 0 0 1.5rem
}
.flow #search_results h2:before {
	content: "\f15b";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	box-sizing: border-box;
	margin-left:-1.35rem;
	color: #607D8B;
	position:absolute
}
.flow #search_results h2.ZMSFolder:before {
	content: "\f07b";
}
.flow #search_results h2.ZMSDocument:before {
	content: "\f15c";
}
.flow #search_results h2 a,
.flow #search_results .breadcrumb a {
	color: #607D8B;
}
.flow #search_results .breadcrumb {
	display:none;
	top: inherit;
	z-index: auto;
	padding:0;
	margin:0;
	font-style:italic;
	font-size:small;
	background:none;
	border-top:1px dotted  #9e9e9e
}
.flow #search_results .line p:after {
	content:" ...";
}
.flow .pagination {
	margin-top:1rem
}




a,
.page-link {
	color: #2c388c;
}
.page-item.active .page-link,
.btn-primary {
	background-color: #2c388c;
	border-color: #2c388c;
}



/* ################ */
/* INDIVIDUAL PAGES */
/* ################ */
body#zmsid_e8782 main article h2 {
	margin:2rem 0;
}
body#zmsid_e8782 main article div.ZMSGraphic .graphic  {
	float:left;
	margin:.25rem 2rem 1rem 0;
	filter: grayscale(100%);
	box-shadow:.25rem .25rem 1rem #00000038;
}
/*-- BO InfoBox --*/
div.infobox  {
	border-top:5px solid #ccc;
	background-color:#f6f6f6;
	padding:1rem;
	width:auto;
}
p.infoboxtitle {
	font-size:1.75rem;
}
div.infobox > div {
	margin-bottom:1rem;
}

div.infobox div.ZMSFile div.title a:link, 
div.infobox div.ZMSFile div.title a:visited {
	font-weight:bold;
	text-decoration:none;
}
/*-- EO InfoBox --*/

.teaser img {
	max-width:100%;
	margin-bottom:1rem
}
#sc_members {
	column-count: 3;
}

@media (max-width: 768px) {
	#sc_members {
		column-count: 2;
	}
}
#zmsid_e35 .jumbotron p.lead  a.btn {
	background:unset;
	border:unset;
	padding:0;
	color: #607D8B;
	font-weight:bold;
}

#zmsid_e35 .jumbotron p.lead  a.btn:hover {
	text-decoration:underline;
}

#zmsid_e35 .jumbotron p.lead  a.btn:before {
	content:"\f1c1";
	color:#e91e63;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	margin-right:.5rem;
	font-size:1.5rem;
}
#zmsid_e35 .card-deck .card p.card-text {
	font-size: 90%;
}