/*
	www.w3schools.com/w3css/w3css_grid.asp
	www.w3schools.com/cssref/css_selectors.asp



	new-logo blue: #1f3e78
	old-blue:	#2162A0; 
	grey 75%	#646464
	grey 60%	#878787
	grey 49%	#9e9e9e
	
	blue-medium1 #297dbb
	blue-medium1 #2f88c4
	lightblue #f0f9fd
	lightblue2 #bfd6EA
		
	grey 18,75%	#dad9da	
	grey 15%	#e6e6e6

	standard -> Raleway22/32 -> schwarz 75% -> Abstand unten 16px
	info -> Raleway Italic 22/32 -> schwarz60%
	Sub -> Droid Serif 22/32 -> Abstand danach 16 px
	• liste -> Raleway22/32 -> Abstand unten 4px -> Einzugl links +-16px
		• liste1
		• liste2
		• liste3 asdasd asda sasdcasdasds
	standard tabelle -> Raleway22/32-> Abstand unten 0px
	H1 -> Raleway ExtraLite60/64
	H1 Subheading Raleway32/48
	H2 Raleway Lite34/48
	H3 Raleway 26/32
	H4 -> schwarz 49% -> Raleway Bold Italic 20/32

*/

/* BASICS------------------------------- */

html, body {
    font-family: 'Raleway', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 20px;
}


/* LAYOUT------------------------------- */
/*
	developer.mozilla.org/en-US/docs/Web/CSS/position
	developer.mozilla.org/en-US/docs/Web/CSS/display
*/
/* https://www.w3schools.com/cssref/css3_pr_background-size.asp */
/* padding: vertical horizontal */ 
/* padding: top right bottom left */ 

.page-wrapper{
	padding:0 ; 
	background-color:#2162A0;
}

#header{
	/*background-color:#2162A0;*/
	background-image: url('../img/main-image-gradient1.png');
	background-color: #f7f7f7;
	
}

#header-inner{
	background-image: url('../img/main-image-2.jpg');
	/*background-position: top center;
	background-size: 80%; *//*contain; cover; */
	background-repeat: no-repeat;
	min-height: 210px;
}

.site-logo {
	padding: 12px;
	margin: 8px;
	/*width: 140px;*/
}

a.site-logo {
	/*background-color: rgba(34,100,164,.7);*/
}

a.site-logo:hover {
	opacity:1 !important;
}

a.site-logo:hover img {
	filter: drop-shadow(8px 8px 10px #1f3e78);
}

.site-name-slogan {
	 position: relative;
	/*bottom: -5.5em;*/
	width: 1200px;
	margin: 0 auto !important;
	/*visibility: hidden;*/
}

.site-name a {
	font-size:0.8em;
	font-weight:500;
	color:#fff;
	text-transform: initial;
	/*visibility:visualy-hidden;*/
}

.site-name a:hover {
	filter: drop-shadow(8px 8px 10px #1f3e78);
	opacity:1 !important;
	border-bottom:1px solid  #bfd6EA; /*#f0f9fd;*/
}


 #main-navigation-inner-h {
	max-width: 1200px;
	margin: 0 auto !important;
}

.node__content{
	padding:0 1.0em 0;
}

.w3-button{
	border-bottom:3px solid rgba(255,255,255,0);
}

.w3-hover-over:hover, .w3-button:hover {
	color:#2162A0  !important;
	background-color:  #f0f9fd !important;
	border-bottom:3px solid #f0f9fd;
}

#welcome-text {
  background-color: inherit;
  color: #f0f9fd;
}

#main-container{
	background:#fff;
}

.w3-row-padding {
	padding:0 4px 0 0;
}

.center {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 0;
}

.space-right	{
	padding-right:32px;
}

.space-left	{
	padding-left:32px;
}

.block-system-breadcrumb-block {
	padding: 0 1.0em;
}

ul.breadcrumb {
    padding: 8px 0;
}

.w3-margin-8 {
	margin:8px;
}
body.user-logged-in .w3-content {
	/* the main editor panel in the admin backend gets this class, it´s usally to small */
	max-width:95%;
}

/* TYPO ------------------------------- */
.node--view-mode-full .w3-container.node__content .field--name-body p {
	text-align: left;
}


.view-content p {
    text-align:left; 
	/*justify;*/
}

h1,h2,h3,h4,h5{
	color:#2162A0;
	font-family: 'Raleway', 'Roboto', Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 2.72em;
	font-weight: 300;
	line-height:1.2;
	margin: 0.6em 0 0.4em 0;
}

.node__content p, 
.node__content h1,
.node__content h2,
.node__content h3,
.node__content ul {
	max-width:840px;
}

.node__content em ,
.node__content .info,
.node__content dt {
	font-style:normal;
	font-weight:600;
	color:#2162A0;
}

h1 > em {
	/* E > F: so wird das Element F nur dann angesprochen, wenn es ein Kindelement eines E-Elements ist. */ 
	font-weight: 500;
	font-family: 'Droid Serif', 'Georgia', 'Times new Roman', serif;
}

.w3-xxlarge {
	font-size: 2.2em !important;
	line-height: 1.5em;
}

dt {
	margin-top: 0.25em;
}

dd{
	margin-bottom: 0.25em;
}

li, dd, dt{
	/* margin-bottom: 0.182em */ 
	margin-bottom: 1.0em;
}
.node__content li {
	border-bottom:4px solid #eee;
}

.grey{
	background-color: #dad9da !important; 
	padding:2px;
}

.lightgrey{
	background-color: #eee !important; 
	padding:4px;
}

.lightblue{
	background-color: #f0f9fd !important; 
	padding:4px;
}

.lightblue2{
	background-color: #bfd6EA !important; 
	padding:2px;
}


.blue{
	background-color: #2162A0 !important; 
	color:#fff !important;
	padding:2px;
}

.lightblue li{
	border-color:#bfd6EA;
	border-width: 3px;
}
.lightblue1 li{
	border-color:#fff;
	border-width: 3px;
}
.lightgrey  li{
	border-color:#ccc;
	border-width: 3px;
}

/* CUSTOM ------------------------------- */
#superMegaHeader{	
	width:100%;
	margin:0 auto  !important;
	display:inline;
}

#page-title-inner {
	width:100% ;
}

.main-navigation-wrapper,
.close-nav,
.mobile-nav {
  background-color: inherit !important;
  color: #fff !important;
}

/* --Language---------------------------------------- */ 
.language-switcher-language-url {
	width: 8em;
	float: right;
	height: 1.25em;
	margin-right:2.05em;

	/*width: 4em;
	margin-top: 10px;*/
}

.language-switcher-language-url h2, 
.language-switcher-language-url li {
	font-size:inherit;
	font-size:0.7em;
	color:inherit;
	margin:0;
	padding:0;
	/*display:inline;*/
}

.language-switcher-language-url li{
	margin:4px 4px;
	color:#bfd6EA;
}

.language-switcher-language-url .is-active{
	color:#aaa;
	border-bottom:1px solid #eee;
	color:#dad9da	
}

.ul-parent-main {
	border-left:2px solid #2f88c4;/*#bfd6EA*/	
} 
li.li-item-main a.li-link-main{
	border-left:1px solid #2f88c4;/*#bfd6EA*/
	border-right:1px solid #2f88c4;/*#bfd6EA*/
  font-size: inherit !important;
  line-height:30px;
}
	
}

ul.ul-parent-main{
	/*border-right:2px solid #f0f9fd;  #bfd6EA*/
}



/* -- page-title ---------------------------------------- */ 

.block-system-breadcrumb-block{
	margin-bottom: -24px;
}
#page-title{
	padding: 8px 16px !important;/*w3padding*/
	color:#fff;
}
/* page-title over main image */ 
.block-page-title-block > h1.page-title{
	/* display:inline; */ 
	/*position:relative;
	top: 32px;
	left: 8px;
	height:0;
	font-size:3.6em !important;
	line-height:1.5;
	font-weight:600;*/
	padding: 0px 0px;
	margin: 0;
	font-size:2.72em;
	background-color: #4e4e4e;
	color:#fff;
}

.block-page-title-block > h1.page-title > span{
	
	/*padding: 0.125em 0.5em;
	background-color:#2162A0dd;*/
}

/* page-title */ 
/* element1~element2 	p ~ ul 	Selects every <ul> element that are preceded by a <p> element */ 
/*#superMegaHeader ~ .page-title { */
	/* select every page-title that is preceded by a superMegaHeader */ 
	/*width: 100%;
	font-size: 2.72em !important;
}*/


/* ------Slider slick slider override startpage --------------------*/ 
.slidertext {
	position:relative;
	font-size:300% !important;
	/* line-height:1.2 !important; */ 
	font-weight:600 !important;
	top: -240px;
	left: 16px;
	height:0;
	Max-width:100% !important;
	color:#fff!important;
}

.slidertext > span {
	/* padding: 0.125em 0.5em; */ 
	line-height:1.5 !important;
	padding: 0.125em;
	background-color:#2162A0dd;
}

ul.slick-dots{
	max-width:100% !important;
	/* sonst sind die dots beim Startslider als superMegaHeader vertikal angeordnet oben links */
	position: initial !important;
}
ul.slick-dots li{
	border-bottom:none !important;
}

ul.linklist > li{
	 list-style-image: url('../img/symbol-link.svg');
}

/* link symbol nonbreakingspace */
p>a:before {
	content: "\f0c1 \00A0";
	font-family: 'Font Awesome 5 Free';
	color:#2162A0; 
}
/* paperclip symbol nonbreakingspace */
.file a:before{
	content: "\f0c6 \00A0";
	font-family: 'Font Awesome 5 Free';
	font-size:120%;
	color:#2162A0; 
}

/* 
 www.drupal.org/project/d8w3css/issues/2945001 
*/
.mobile-nav:hover,
ul li.li-expanded > a:hover {
  cursor: pointer!important;
}

ul li.li-expanded > a:hover {
  cursor: pointer!important;
}

/*Drupal10 w3csss v2 footer colums all centered*/
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter,
.w3-col.s1, .w3-col.s2, .w3-col.s3, .w3-col.s4, .w3-col.s5, .w3-col.s6,  .w3-col.s7,  .w3-col.s8,  .w3-col.s9,  .w3-col.s10,  .w3-col.s11,  .w3-col.s12,
.w3-col.m1, .w3-col.m2, .w3-col.m3, .w3-col.m4, .w3-col.m5, .w3-col.m6,  .w3-col.m7,  .w3-col.m8,  .w3-col.m9,  .w3-col.m10,  .w3-col.m11,  .w3-col.m12,
.w3-col.l1, .w3-col.l2, .w3-col.l3, .w3-col.l4, .w3-col.l5, .w3-col.l6,  .w3-col.l7,  .w3-col.l8,  .w3-col.l9,  .w3-col.l10,  .w3-col.l11,  .w3-col.l12 {
  text-align: left;
}


/* RESPONSIVE ----------------------------------------------------------- */
/* Small/Medium Screen Only */
/* ---max-width:992px---------------------------------------------------- */
/* ---------------------------------------------------------------------- */

@media (max-width:992px) {
	
	body {
		font-size: 85% !important;
		line-height:1.55;
		}
	
	.page-wrapper{
		padding:0 8px !important;
		}


	#header-inner{
		background-position: top left;
		background-size: 900px;
		min-height: 12em;
		}
	
	.block-page-title-block {
		width:100%;
		}

	.block-system-breadcrumb-block {
		padding: 0 0.6em;
		margin-bottom: -24px;
		}
		
	.space-right {
		padding-right: 0.5em;
		}

}/* END  992px Screen*/


/* ---max-width:600px---------------------------------------------------- */
/* Small Screen Only */
/* ---------------------------------------------------------------------- */
@media (max-width:600px) {
	
	body {
		font-size: 70% !important;
		line-height:1.65;
		}
		
	p {
		padding: inherit !important;
		margin: 0;
		}
		
	h1{
		font-weight:500;
		font-size:150%;
		}
			
	.w3-container{
		padding:0.25em;
		}

	.block-system-branding-block .site-name a{
		padding: 0 !important;
		overflow: hidden;
		width: 22em;
		text-align:left;
		}

	.page-wrapper{
		padding:0 6px !important;
		}
		
	.site-name-slogan {
		bottom: -7em;

		}

	a.site-logo img{
		width:80px;
		}

	 .mobile-nav {
	 width:40%;
		 height:30px;
		 padding:10px;
		 float:right;
		}

	.language-switcher-language-url {
	   width: unset;
		position: relative;
		margin-bottom:0px;
		padding:0;
		}

	.slidertext{
		font-size:140% !important;
		top: -4em;
		left: 0.25em;
		}
	
	.slidertext > span {
		font-weight:600 !important;
		}

	.block-page-title-block {
		width:100%;
		font-size: 100% !important;
		}
		
	.block-page-title-block > h1.page-title{
		font-size: 1.6em !important;
		top: 16px;
		left: 8px;
		}
	
	.block-system-breadcrumb-block {
		padding:8px 0;
		margin-bottom: -4px;
		}
		
	.space-right {
		padding-right: 0.2em;
		}

}/* END Small Screen Only */