/*	==============================
 *
 *	Kathweb 2017 Responsive Layout
 *	www.kathweb.de
 *
 *	==============================
 *
 *	TABLE OF CONTENTS
 *
 *	// CSS Variables
 *
 *	// mobile first
 *	Google Fonts
 *	General Definitions
 *	- helper classes
 *	Typography
 *	Header
 *	- Navigation
 *	  - helper
 *	  - Hamburger
 *	- Suche
 *	Main Content
 *	- RSS Feed
 *	- Lexikon
 *	Sidebar
 *	- Panel
 *	  - Impuls
 *	  - Stellenmarkt
 *	  - Buchtipp
 *	  - Lexikon
 *	Footer
 *
 *	// RSS Feed Float
 *	Main Content
 *	- RSS Feed
 *
 *	// desktop
 *	General Definitions
 *	- helper classes
 *	Header
 *	- Navigation
 *	Main Content
 *	- Slider
 *	Sidebar
 *	- Panels
 *	  - Buchtipp
 *	Footer
 */



/*	CSS Variables
 *	=============
 *	Alle globalen Variablen koennen hier definiert werden.
 *	Achtung! Aenderungen betreffen das komplette Layout!!
 */

:root {

	--brand-color: #820000;
	--page-background: #f0f0f0;
	--main-background: #fff;
	--slider-background: #e5e5e5;
	--desktop-nav-background: #f6f6f6;
	--text-color: #222;

	--heading-font-weight: 600;

	--border-radius: .3rem;

}



/*	get Google Fonts
 *	================
 */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../font/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../font/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../font/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
	font-display: swap;
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../font/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../font/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../font/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
	font-display: swap;
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../font/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../font/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../font/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
	font-display: swap;
}



/*	General
 *	=======
 */

	*, *:before, *:after {
		margin: 0; padding: 0;
		box-sizing: border-box;
	}

	html {font-size: 62.5%;}

	body {
		background: #f0f0f0; background: var(--page-background, #f0f0f0);
		font-family: 'Open Sans', Verdana, Helvetice Neue, Arial, sans-serif; font-size: 16px; font-size: 1.6rem;
		hyphens: auto;
		color: #222; color: var(--text-color, #222);
		line-height: 1.5;
	}

	p {margin: 0.5rem 0;}

	#page {
		position: relative;
		margin: 0 auto;
		width: 100%; min-height: 100%; min-height: 100vh;
		background: #fff; background: var(--main-background, #fff);
		overflow: hidden;
	}

	#brand img {
		width: 70%; max-width: 27rem;
		/*margin-left: -0.6rem;*/
	}

	.image-responsive { max-width: 100%; height: auto; }

	/* helper classes */
	.mobile {display: inherit;}
	.desktop {display: none;}
	.clearfix {clear: both;}



/*	Typography
 *	==========
 */

	h1 {
		padding: 2.275rem 0 0.25rem 0;
		font-size: 3.2rem; font-weight: 600; font-weight: var(--heading-font-weight, 600);
		color: #820000; color: var(--brand-color, #820000);
		line-height: 1.2;
	}

	h2 {
		padding: 2.95rem 0 1.5rem 0;
		font-size: 2.8rem; font-weight: 600; font-weight: var(--heading-font-weight, 600);
		color: #820000; color: var(--brand-color, #820000);
		line-height: 1.2;
	}

	h3 {
		padding: 3.2rem 0 1.25rem 0;
		font-size: 2.4rem; font-weight: 600; font-weight: var(--heading-font-weight, 600);
		color: #820000; color: var(--brand-color, #820000);
		line-height: 1.2;
	}

	h4 {
		padding: 1.25rem 0 1rem 0;
		font-size: 1.8rem; font-weight: 600; font-weight: var(--heading-font-weight, 600);
		color: #820000; color: var(--brand-color, #820000);
		line-height: 1.2;
	}

	h5 {
		padding: 0;
		font-size: 1.4rem; font-weight: 600; font-weight: var(--heading-font-weight, 600);
		color: #820000; color: var(--brand-color, #820000);
		line-height: 1.2;
	}

	a {
		color: #820000; color: var(--brand-color, #820000);
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	a.button {
		display: inline-block;
		margin-top: 1rem; padding: 0.75rem;
		border-radius: .3rem; border-radius: var(--border-radius, .3rem);
		border: .1rem solid #820000; border: 0.1rem solid var(--brand-color, #820000);
		background: transparent;
		transition: all 250ms;
	}

	a.button:hover {
		background: #820000; background: var(--brand-color, #820000);
		color: #fff; color: var(--main-background, #fff);
	}

	a.button:hover {text-decoration: none;}

	h3 > a:after {
		display: inline-block;
		margin-left: 0.5rem;
		font-family: Linearicons-Free;
		speak: none;
		font-style: normal;
		font-weight: 400;
		font-size: 75%;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: '\e876';
	}

	.item h3 > a:after {
		margin: 0;
		content: '';
	}



/*	Header
 *	======
 */

	#main-header {
		padding: 3rem;
	}


	/* Navigation */

	#main-nav ul {
		position: fixed; top: 0; left: -37.5rem;
		padding: 4.5rem;
		width: 37.5rem; height: 100%; height: 100vh;
		background: #f0f0f0; background: var(--page-background, #f0f0f0);
		list-style: none;
		z-index: 998;
		transition: all 500ms ease;
	}

	#main-nav ul.is-visible {left: 0;}

	#main-nav ul li {
		margin: 1.5rem 0;
		transform: translateX(-37.5rem);
		transition: all 750ms ease;
	}

	#main-nav ul li:first-of-type {margin-top: 0;}

	#main-nav ul.is-visible li {
		transform: translateX(0);
	}

	#main-nav ul li a {
		position: relative;
		padding-bottom: 0.1rem;
		font-size: 1.6rem;
		text-transform: uppercase;
	}

	#main-nav ul li a:hover {text-decoration: none;}

	#main-nav ul li a::before {
		content: '';
		position: absolute; left: 0; bottom: 0;
		display: block;
		width: 0; height: 0.1rem;
		transition: width 0s ease, background 0.5s ease;
	}

	#main-nav ul li a::after {
		content: '';
		position: absolute; right: 0; bottom: 0;
		display: block;
		width: 0; height: 0.1rem;
		background: #820000; background: var(--brand-color, #820000);
		transition: width 0.5s ease;
	}

	#main-nav ul li a:hover::before {
		width: 100%;
		background: #820000; background: var(--brand-color, #820000);
		transition: width 0.5s ease;
	}

	#main-nav ul li a:hover::after {
		width: 100%;
		background: transparent;
		transition: all 0s ease;
	}


		/* Nav Helper */

		.nav-helper {
			display: none;
			position: absolute; top: 0; bottom: 0; left: 0; right: 0;
			opacity: 0; z-index: 997;
		}

		.nav-helper.is-active {display: block;}


		/* Hamburger */

		.hamburger {
			position: absolute; top: 4.5rem; right: 3rem;
			border: 0;
			background-color: transparent;
			overflow: visible; cursor: pointer; z-index: 999;
		}

		.hamburger-box {
			display: inline-block;
			position: relative;
			width: 3rem; height: 2rem;
		}

		.hamburger-inner {
			display: block;
			top: 0;
		}

		.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
			position: absolute;
			width: 3rem; height: 0.2rem;
			background-color: #820000; background-color: var(--brand-color, #820000);
			transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease;
		}

		.hamburger-inner::before, .hamburger-inner::after {
			content: "";
			display: block;
		}

		.hamburger-inner::before {
			top: 1rem;
			transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.2s;
		}

		.hamburger-inner::after {
			top: 2rem;
			bottom: -1rem;
		}

		.hamburger.is-active .hamburger-inner {transform: translate3d(0, 1rem, 0) rotate(45deg);}

		.hamburger.is-active .hamburger-inner::before {
			transform: rotate(-45deg) translate3d(1rem, -0.6rem, 0);
			opacity: 0;
		}

		.hamburger.is-active .hamburger-inner::after {transform: translate3d(0, -2rem, 0) rotate(-90deg);}


	/* Search Bar */

	#main-nav form {
		position: relative;
		margin-top: 2rem;
	}

	#main-nav form input.search {
		margin: 0 0 1rem; padding: 0.5rem 0;
		width: 100%; height: calc(3rem + 0.2rem);
		border: none;
		border-bottom: 0.1rem solid #e5e5e5; border-bottom: 0.1rem solid var(--slider-background, #e5e5e5); outline: none;
		background: transparent;
		font-size: 1.4rem;
		color: #333;
		resize: none;
	}

	#main-nav form input.search:focus {border-color: #820000; border-color: var(--brand-color, #820000);}

	#main-nav form input.search:focus + label[placeholder]:before,
	#main-nav form input.search.has-content + label[placeholder]:before {
		color: #820000; color: var(--brand-color, #820000);
		transition-duration: .2s;
		transform: translate(-0.15rem, -1.75rem) scale(0.9, 0.9);
	}

	#main-nav form input.search + label[placeholder] {
		display: block;
		pointer-events: none;
		margin-top: -3rem;
		line-height: 1rem;
	}

	#main-nav form input.search + label[placeholder]:before {
		content: attr(placeholder);
		display: inline-block;
		color: #666;
		white-space: nowrap;
		transition: 0.3s ease-in-out;
	}

	#main-nav form button {
		position: absolute; top: 0.75rem; right: 0;
		display: inline-block;
		border: none;
		background: transparent;
		font-size: 1.6rem;
		color: #666;
		cursor: pointer;
	}



/*	Main Content
 *	============
 */

	#main-content {
		padding: 0 3rem;
		text-align: left; text-align-last: left;
	}

	.breadcrumbs {
		display: block;
		padding: 3rem;
		width: 100%;
		list-style: none;
	}
	.breadcrumbs li {display: inline-block;}
	.breadcrumbs li:not(:last-of-type):after {content: ' >';}

	#main-content ol {
		margin: 1rem 0 1rem 2rem;
		line-height: 2;
	}

	#main-content ul {
		margin: 1rem 0 1rem 1.5rem;
		line-height: 2;
	}

	/*	Main RSS Feed */

	.item {
		margin: 0; padding: 3.2rem 0;
		border-bottom: 0.1rem solid #e5e5e5; border-bottom: 0.1rem solid var(--slider-background, #e5e5e5);
	}

	.item > .item-head h3 {padding-top: 1.5rem; text-align: left;}

	.item > .item-body > p > a:hover {
		background: #820000; background: var(--brand-color, #820000);
		color: #fff; color: var(--main-background, #fff);
	}

	.item > .item-head > .source {text-transform: uppercase;}

	/*.item > .item-body img {width: 20rem;}*/

	.item > .item-body:after {
		clear: both;
		display: table;
		content: '';
	}

	.item > .item-footer {
		clear: both;
		margin-top: 1.5rem;
		font-size: 1.2rem;
	}

	.item > .item-footer > .rm {
		float: right;
		display: inline-block;
		padding: 0.75rem;
		border-radius: .3rem; border-radius: var(--border-radius, .3rem);
		border: 0.1rem solid #820000; border: 0.1rem solid var(--brand-color, #820000);
		background: transparent;
		transition: all 250ms;
	}

	.item > .item-footer > .rm:hover {
		text-decoration: none;
		background: #820000; background: var(--brand-color, #820000);
		color: #fff; color: var(--main-background, #fff);
	}

	.item > .item-footer > .timestamp {
		display: block;
		padding-top: 0.9rem;
	}


	/* Lexikon Navigation */

	#lex-nav {
		margin-top: 3rem;
		width: 100%;
		text-align: center; text-align-last: center;
	}

	#lex-nav td {width: 25%;}
	#lex-nav td a.button {width: 90%;}


	/* Article List */

	#articleList ul {list-style: none;}
	#articleList p {margin: 0; padding: 0;}

	#articleList .newsPagination .pagination {margin: 0;}
	#articleList .newsPagination a {
		display: block;
		float: left;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		margin-right: 10px;
		border: none;
		padding-left: .6rem;
	}
	#articleList .newsPagination a.active {background: #820000; background: var(--brand-color, #820000);}
	#articleList .newsPagination a:first-of-type {margin-left: 0;}


	/* Pagination */

	.pagination {
		display: inline-block;
		margin: 20px 0;
		width: 100%;
		line-height: 25px;
		text-align: center;
	}

	.pagination a {margin: 0 5px;}

	.page_current {
		font-weight: bold;
		color: #333;
	}

	.pag_float_left {float: left;}
	.pag_float_right {float: right;}

	.pag_float_left a, .pag_float_right a {
		display: inline-block;
		margin-top: 0.75rem; padding: 0.5rem 0.75rem;
		border-radius: .3rem; border-radius: var(--border-radius, .3rem);
		border: 0.1rem solid #820000; border: 0.1rem solid var(--brand-color, #820000);
		background: transparent;
		transition: all 250ms;
	}

	.pag_float_left a:hover, .pag_float_right a:hover {
		background: #820000; background: var(--brand-color, #820000);
		text-decoration: none;
		color: #fff; color: var(--main-background, #fff);
	}


	/* Search */

	submit.search {
	    vertical-align: top;
	    background: #820000;
	    border: 1px solid #820000;
	    border-radius: .3rem;
	    height: 28px;
	    color: #fff;
	    padding: 0 15px;
	    cursor: pointer;
	}

	#search_result li a, #search_result li a:hover, #search_result li a:active, #search_result li a:visited {
    color: #820000;
	}



/*	Sidebar
 *	=======
 */

	#main-sidebar {
		padding: 0 3rem;
		text-align: justify; text-align-last: left;
	}

	.panel {
		padding-bottom: 3rem;
		border-bottom: 0.1rem solid #e5e5e5; border-bottom: 0.1rem solid var(--slider-background, #e5e5e5);
		text-align: left;
	}

	.panel:last-child {border-bottom: none;}

	.panel:after {
		clear: both;
		display: table;
		content: '';
	}

	.panel a {
		display: block;
		margin-top: 1rem;
		text-align: left;
	}

	.panel a:first-of-type {margin-top: 0;}
	.panel .desc {margin: 0 0 1rem 0;}


		/* impuls */

		.impuls .panel a {
			display: inline;
			margin: 0;
			text-align: left;
		}

		.impuls .panel {
			padding-bottom: 3rem;
			border-bottom: 0.1rem solid #e5e5e5; border-bottom: 0.1rem solid var(--slider-background, #e5e5e5);
		}

		.impuls .panel div {margin-bottom: .75rem;}
		.impuls .panel div:first-of-type {font-weight: bold;}
		.impuls .panel div:first-of-type a {font-weight: normal;}


		/* stellenmarkt */

		.navi {
			position: relative;
			margin: 1rem 0; padding-left: 1.5rem;
		}

		.navi::before {
			position: absolute; left: 0; top: .3rem;
			width: 12px;
			height: 12px;
			background: url('https://www.kathweb.de/cms/upload/bullets/list-icon.png') no-repeat;
			color: #820000; color: var(--brand-color, #820000);
			content: ' ';
		}

		/* stellenmarkt */

		.panel .job-list {
			margin: 0 0 0 1.5rem;
			list-style: square;
			list-style-image: url('https://www.kathweb.de/cms/upload/bullets/list-icon.png');
		}

		.panel .job-list li {margin: 0 0 .5rem 0;}

		.panel .desc a { display: inline-block; }

		/* buchtipp */

		.panel .book img {float: left;}

 		.panel .book .info {
			float: left;
			padding-left: 1rem;
			width: calc(100% - 15rem);
		}

		.panel .book .info:after {
			clear: both;
			display: table;
			content: '';
		}

		.panel .book .desc {
			margin: 1rem 0 0 0; padding: 0;
			clear: both;
			width: 100%;
		}

		.panel .book .info p {font-weight: bold; font-size: 1.6rem;}
		.panel .book .info a.button {display: inline-block;}


		/* Lexikon Navigation */

		.panel #lex-nav {margin-top: 0;}
		.panel #lex-nav td {width: 33.3333333333%;}
		.panel #lex-nav td a.button {width: 100%;}


		/* Nostobox */

		.nosto_element {
			margin: 1rem auto;
			width: 100%;
		}
		
		.nosto-product-list {list-style: none;}
		
		.nosto-product-list-item {
			display: flex;
			align-items: center;
			margin-left: -1rem; padding: 1rem;
			width: calc(100% + 2rem);
			text-align: left;
			transition: background 250ms ease-in-out;
		}

		.nosto-product-list-item:hover {
			background: var(--page-background);
		}
		
		.nosto-product-list-item:not(:first-of-type) {
			margin-top: 1.4rem;
		}
		
		.nosto-product-image img {
			margin-right: 10px;
			width: 150px;
		}
		
		.nosto-product-info a {color: #222; color: var(--text-color, #222);}
		.nosto-product-info a:hover {text-decoration:none;}
		
		.nosto-product-name { font-weight: bold; }
		
		.nosto-product-description,
		.nosto-price-info { margin-top: 1rem; }
		
		.nosto-price-info,
		.nosto-current-price {color: #820000; color: var(--brand-color, #820000);}
		.nosto-old-price {font-size: 75%; color: #999;}



/*	Footer
 *	======
 */

	#main-footer {
		margin-top: 3rem;
		padding: 3rem;
		background: #e5e5e5; background: var(--slider-background, #e5e5e5);
	}

	#main-footer .footer-list {margin-top: 2rem;}
	#main-footer .footer-list:first-of-type {margin-top: 0;}

	#main-footer ul {
		margin-top: 3rem;
		list-style: none;
	}

	#main-footer ul:first-of-type {margin-top: 0;}
	#main-footer ul li {margin-top: 1rem;}

	#main-footer h4 {color: #333;}



/*	RSS Feed Float
 *	===========
 *
 *	applies when: screen > 500px
 */

@media (min-width: 31.25rem) {

	/* Main RSS Feed */

	.item:last-of-type {border: none;}

	.item > .item-body img {
		float: left;
		margin: 0.4rem 1rem 0 0;
	}

	.item > .item-body p {width: 100%;}

	.item > .item-body:after {
		clear: both;
		display: table;
		content: '';
	}
}



/*	Desktop CSS
 *	===========
 *
 *	applies when: screen > 960px
 */

@media (min-width: 60rem) {

/*	General
 *	=======
 */

	body {font-size: 14px; font-size: 1.4rem;}

	#page {
		position: relative;
		width: 96rem; min-height: 100%; min-height: 100vh;
	}

	#side-banner {
		position: absolute; top: 16rem; left: calc(96rem + 3rem);
		width: 16rem; height: 60rem;
		background: #e5e5e5; background: var(--slider-background, #e5e5e5);
	}

	/* helper classes */
	.mobile {display: none;}
	.desktop {display: inherit;}



/*	Header
 *	======
 */

	#main-header {
		height: 16rem;
	}


		/* Navigation */

		#main-nav {
			margin: 1rem -3rem; padding: 2rem 3rem;
			width: 96rem; height: 6.5rem;
			background: #f6f6f6; background: var(--desktop-nav-background, #f6f6f6);
		}

		#main-nav form {
			position: absolute; top: 3rem; right: 3rem;
			margin-top: 0;
			width: 30.6rem;
		}

		#main-nav ul {
			float: left;
			position: inherit; top: 0; left: 0;
			margin: 0; padding: 0;
			width: auto; height: auto;
			background: transparent;
			list-style: none;
			z-index: 998;
		}

		#main-nav ul:after {
			clear: both;
			display: table;
			content: '';
		}

		#main-nav ul li {
			display: inline-block;
			margin: 0 2rem 0 0;
			transform: translateX(0);
		}

		/*#main-nav ul li a {
			color: #f6f6f6;
		}*/



/*	Main Content
 *	============
 */

	#main-content {
		float: left;
		margin-bottom: 3rem; padding-right: 1.5rem;
		width: 65%;
	}


		/*	Slider */

		#slider-wrapper {margin-bottom:3rem;}
		#slider-wrapper > img {z-index: 999;}

		#slider {
			position: relative;
			width: 96rem; height: 28rem;
			background: #e5e5e5; background: var(--slider-background, #e5e5e5);
			overflow: hidden;
		}

		#slider .slides .slide {
			position: absolute; top: 0; left: 0;
		}

		#slider .slides .slide .slide-content {
			position: relative;
		}

		#slider .pager {
			position: absolute; bottom: 0; left: 0;
			padding: 1.5rem 3rem 1rem 3rem;
			width: 35rem;
			background: #e5e5e5; background: var(--slider-background, #e5e5e5);
			z-index: 10;
		}

		#slider .pager a {
			margin-right: 0.5rem;
		}

		.slide-content img {
			position: absolute; top: 0; left: 35rem;
		}

		.slide-caption {
			position: absolute; top: 0; left: 0;
			display: block;
			margin: 0; padding: 2rem 3rem;
			width: 35rem; height: 28rem;
			background: #e5e5e5; background: var(--slider-background, #e5e5e5);
			z-index: 9;
		}

		.slide-caption h2 {margin: 0; padding: 0;}



/*	Sidebar
 *	=======
 */

	#main-sidebar {
		float: left;
		padding: 0 3rem 0 1.5rem;
		width: 35%;
		border-left: 1px solid #eee;
	}
	
		/*.panel:first-of-type h2 {padding-top: 0;}*/

		/* buchtipp */

		.panel .book img {
			float: left;
			margin-right: 1rem;
			width: 14rem;
		}

		.panel .book .info {
			float: none;
			padding-left: 0;
			width: 100%;
		}

		.panel .book .info p {font-weight: bold; font-size: 1.6rem;}
		.panel .book .info a.button {display: inline-block;}



/*	Footer
 *	======
 */

	#main-footer {clear: both;}

	#main-footer::after {
		clear: both;
		display: table;
		content: '';
	}

	#main-footer .footer-list {
		float: left;
		display: block;
		margin: 0;
		width: 21.6666666666%;
	}

	#main-footer .footer-list:nth-child(4) {
		padding-left: 0.75rem;
		width: 35%;
	}

} /* end of query */