/*
@font-face {
    font-family: "GroteskReg", arial, sans-serif;
	font-weight: 400;
	font-style: normal;
    src: url('includes/fonts/foundersgrotesk-regular.otf') format('opentype'), url('includes/fonts/foundersgrotesk-regular.woff') format('woff');
}

@font-face {
    font-family: "GroteskBold", arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url('includes/fonts/foundersgrotesk-bold.otf') format('opentype'), url('includes/fonts/foundersgrotesk-bold.woff') format('woff');
}*/

/****************** SETUP ********************/
* {
	border: 0; 
	margin: 0; 
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	text-decoration: none; 
}

body {     
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 14px;
	background: #fff;
	text-align: left;
	max-width: 100%;
	min-width: 320px;
	/*padding-bottom: 500px;*/
	/*opacity: 0;*/
	padding-bottom: 60px;
}

a {	color: #1f1f1f}
strong {font-weight: 600;}
h1, h2, h3 {font-weight: 500;}

.content {
	width: calc(100% - 40px);
	max-width: 1300px;
	display: flex;
}


.content-title {
	padding: 40px 0;
	font-size: 32px;
	letter-spacing: 1.6px;
	position: relative;
	color: #515151;	
}


.subpage-title {
	padding: 20px 0;
	font-size: 32px;
	letter-spacing: 1.6px;
	position: relative;
	color: #515151;	
}
#selCat {text-decoration: underline;font-weight: bold;}
/****************** HEADER ********************/
header {
	display: flex;
	width: 100%;
	justify-content: center;
}
	header .content {
		display: flex;
		justify-content: space-between;
		padding: 20px 0;
		align-items: center;
	}
			header .content nav a {
				padding: 10px 20px;
				font-size: 16px;
				font-weight: 500;
			}
			header .content nav a:hover {
				color: #73AA3B;
			}
			#logotyp {width: 250px;}
			#logotyp img {
				width: calc(182px * 0.6);
				height: calc(102px * 0.6);
			}
	header form {
		width: calc(100% - 250px);
		display: flex;
		justify-content: flex-end;
		position: relative;
	}
	#searchForm {
		display: flex;
		align-items: baseline;
		width: 230px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		position: relative;
	}
	#searchForm label {
		font-size: 10px;
		color:#cecece;
	}
		#searchForm input[type='text']{
			width: 200px;
			border-bottom: 1px #cecece solid;
			margin-right: 20px; 
			padding: 5px;
			color:#515151;
		}
		#searchForm input[type='checkbox']{
			margin-right: 20px; 
			padding: 5px;
			accent-color: #cecece;
		}
		#searchForm select{
			min-width: 100px;
			width: 19%;
			border-bottom: 1px #cecece solid;
			margin-right: 20px; 
			padding: 5px;
			color:#515151;
			font-size: 12px;
			background: #fff;
		}
			#searchForm select option {
				font-size: 10px;
				padding: 2px 0;
			}

		#searchForm input[type='image']{
			margin-bottom: -10px;
			opacity: 0.5;
		}
		#advSearch {
			width: 20px;
			height: 20px;
			border-radius: 10px;
			background-color: #cecece;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: calc( 50% - 10px );
			right: 240px;
			padding-top: 1px;
		}
/********************************************************************************************* MATERIALS ********************/

#materials {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 400px;
	padding: 25px 0;
}

#materials .content {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

#menuButton {
	position: fixed; 
	top: 250px;
	left: -25px;
	z-index: 11;
	background: #cecece;
	height: 50px;
	width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: rotate(-90deg);
	color: #fff;
	box-sizing: border-box;
	line-height: 30px;
	z-index: 15;
}
	/*************************************** CONTENT LEFT */
	#materials .content .content-left {
		flex-direction: column;
		justify-content: flex-start;
		align-items: left;
		display: flex;
		width: 250px;
		box-sizing: border-box;
		padding-right: 20px;
	}
	#materials .content .content-left-kat {
		flex-direction: column;
		justify-content: flex-start;
		align-items: left;
		display: none;
		width: 250px;
		box-sizing: border-box;
		padding-right: 20px;
	}
		#materials .box-cat-item {
			padding-bottom: 10px;
		}
		#materials .content-left .box-cat, #materials .content-left .box-cat-item, #materials .content-left .box-cat-c {
			flex-direction: column;
			justify-content: flex-start;
			align-items: left;
			display: flex;
			overflow: hidden;
		}
		.box-cat-c {
			height: 0px;
			overflow: hidden;
		}
		#materials .box-cat-a{
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			display: flex;		
			padding: 5px 0;
		}
			#materials .box-cat-a a{
				font-weight: 700;	
				font-size: 16px;
				white-space: nowrap;
			}
			#materials .box-cat-expand {
				width: 20px;
			}
			#materials .box-cat-c {
				padding-left: 20px;
				box-sizing: border-box;
				width: 100%;
			}
				#materials .box-cat-d {
					padding: 5px 0;
					font-size: 12px;
					line-height: 12px;
				}

	/*************************************** CONTENT RIGHT */
	#materials .content .content-right {
		box-sizing: border-box;
		padding: 0 0px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: calc(100% - 250px);
	}
	#materials .content .content-right-kat {
		box-sizing: border-box;
		padding: 0 0px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	/*************************************************  CATEGORIES **/
	#materials #catView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}
		#materials .itemContainer {
			width: 30%;
			min-width: 250px;
			display: flex;
			height: 200px;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			border-top: 1px #cecece solid;
			border-bottom: 1px #cecece solid;
			margin-bottom: 40px;
			aspect-ratio: 1/1;
		}

	/*************************************************  MATERIAL LIST **/
	#materials .content .content-right-kat #mats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(210px, 1fr));
		gap: 40px;
		width: 100%;
	}



		#materials .matContainer {
			width: 100%;
			max-width: 250px;
			display: flex;
			aspect-ratio: 1/1;
			align-items: center;
			justify-content: center;
			font-size: 16px;
		}
			#materials .matContainer .matView, #materials .matContainer .matView a,  #materials .matContainer .matImg {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#materials .matContainer .matImg img {
				min-width: 100%;
				min-height: 100%;
				width: 100%;
				height: auto;
			}
			#materials .matContainer .matView {
				position: relative;
			}
			
			#materials .matContainer .matView:hover .matHover {
				opacity: 1;
			}


				#materials .matContainer .matHover {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(0,0,0,0.7);
					color: #fff;
					font-weight: bold;
					box-sizing: border-box;
					padding: 10px;
					opacity: 0;
					transition: opacity .25s ease-in-out;
					text-align: center;
				}

			
				#materials .matContainer .matView .matTitle span{
					font-size: 11px;
					text-decoration: underline;
				}


	#pageNumbers {
		width: 100%;
		padding: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		box-sizing: border-box;
	}
	#pageNumbers a, #pageNumbers span  {margin: 0 5px; padding: 5px;}
	#pageNumbers span{font-weight: bold;}

	/*************************************************  MATERIAL CARD **/
	#matCard {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
		#matCard-left, #matCard-right {
			width: 50%;
			box-sizing: border-box;
			padding: 0 10px;
			display: flex;
			flex-direction: column;
		}
	/*************************************************  MATERIAL CARD LEFT **/
	/*#matCard-left {

	}
	*/
		#matCard-title {
			width: 100%;
			padding-bottom: 5px;
			border-bottom: 1px #ccc solid;
		}
			#matCard-title h1 {	font-size: 30px;position: relative;}
			#matCard-title p  {	font-size: 20px;}

			#inStudio::after {
				content: "";
				position: absolute;
				right: 10px;
				top: calc( 50% - 10px );
				height: 20px;
				width: 20px;
				border-radius: 10px;
				background-color: #73AA3B;
			}
			.inStudio {position: relative;}			
			.inStudio::after {
				content: "";
				position: absolute;
				right: 10px;
				top: 10px;
				height: 10px;
				width: 10px;
				border-radius: 5px;
				background-color: #73AA3B;
			}

			#matCard-cat {
				padding: 20px 0;
				display: flex;
				flex-direction: column;
			}
			#matCard-cat p {padding: 10px 0 5px;}
				#matCard-cat a {
					position: relative;
					padding: 4px 0 4px 20px;
					box-sizing: border-box;
				}
				#matCard-cat a::after {
					content: "+";
					position : absolute;
					left: 5px;
					top: 3.5px;
				}
			#matCard-cat p {padding: 15px 0 5px;}
			
			#matCard-com {line-height: 24px;} 
			#matCard-com a {text-decoration: underline;}
			
			#matCard-desc {
				padding: 20px 0;
				line-height: 24px;
			}

			#previewImage {height: 0;width: 0;overflow: hidden;}


			#matCard-eticeta {
				padding: 10px;
				box-sizing: border-box;
				border: 1px solid #919191;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 600px;
				background: #fff;
			}
				.matCard-eticeta-qrDesc {padding: 0 10px 0 100px;position: relative;}
				.matCard-eticeta-qrDesc p:nth-child(1) {
					font-size: 28px;
					font-weight: bold;
					padding-bottom: 5px;
				}
				.matCard-eticeta-qrDesc p:nth-child(2) {
					font-size: 20px;
					padding-bottom: 5px;
				}
				.matCard-eticeta-logo {
					position: absolute;
					top: 35px;
					left: -35px;
					height: 80px;
					transform: rotate(-90deg);
				}

			#downloadEticeta {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px 0;
			}
				#downloadEticeta a{
					width: 200px;
					background-color: #919191;
					color: #fff;
					text-align: center;
					padding: 15px 0;
				}

	/*************************************************  MATERIAL CARD RIGHT **/
	#matCard-right {
		justify-content: flex-start;
		align-items: center;
	}
		#matCard-mainImg {
			width: 100%;
			overflow: hidden;
		}
		#matCard-mainImg img {width: 100%; height: auto;aspect-ratio: 1 / 1;}
		#matCard-imgCon {
			padding-top: 20px;
			display: grid;
			grid-template-columns: repeat(3, calc(33.3% - 13.3px));
			grid-template-rows: auto;
			grid-gap: 20px;
			width: 100%;
			max-width: 100%;
			position: relative;
		}
		#matCard-imgCon a {width: 100%;overflow: hidden;aspect-ratio: 1 / 1;}
		#matCard-imgCon a img{width: 100%;height: auto;aspect-ratio: 1 / 1;}

		/************************************************* LIBRARY ****************/
		#library {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			min-height: 400px;
			padding: 25px 0;
		}
		
		#library .content {
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			position: relative;
			width: 100%;
		}
		#lib {
			width: 100%;
		}
		.initialLetter {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 32px;
			font-weight: bold;
		}

			.bContainer {
				position: relative;
			}
			.bContainer .inStudio::after {
				content: "";
				position: absolute;
				right: 10px;
				top: calc( 50% - 10px );
				height: 20px;
				width: 20px;
				border-radius: 10px;
				background-color: #73AA3B;
			}
			.bContainer .inStudio {position: relative;}			
			.bContainer .inStudio::after {
				content: "";
				position: absolute;
				right: 10px;
				top: 10px;
				height: 10px;
				width: 10px;
				border-radius: 5px;
				background-color: #73AA3B;
			}

			.bView {
				position: relative;
				padding: 10px;
				width: 100%;
			}
			.bView:hover {
				background-color:#ebebeb;
			}
			.bView:hover .bHover {
				display: block;
			}
				.bHover {
					position: fixed;
					top: 100px;
					right: 0;
					width: 400px;
					height: auto;
					display: none;
					padding: 20px;
				}
					.bHover img {
						width: 100%;
						height: auto;
						border: #1f1f1f 10px solid;
					}

					.bTitle {
						font-weight: bold;
						font-size: 24px;
						text-decoration: underline;
					}
					.bAuthor {
						font-size: 18px;
					}
					.bPub span, .bAuthor span{
						font-size: 12px;
						color:#919191;
					} 



					#lib-letters a section{
						font-size: 16px;
						font-weight: bold;
						padding: 5px;
					}
					#lib-letters a:first-child{
						color: #ccc;
					}

					#library, #library .content, #book-eticeta, #lib-letters {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
					}
					#book-eticeta {
						margin-top: 40px;
						padding-top: 20px;
						border-top: #ccc 1px solid;
					}



					#book {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						max-width: 800px;
					}
						#book-back {padding-bottom: 20px;}
						#book-back a{
							color:#c9c9c9;
							font-weight: bold;
							text-decoration: underline;
						}
						#book-gallery {
							width: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}
							#book-mainImg {
								width: 100%;
								height: auto;
								display: flex;
								flex-direction: column;
								justify-content: center;
							}
								#book-mainImg img {
									max-width: 100%;
									height: auto;
								}


						#book-title {
							width: 100%;
							padding-bottom: 5px;
							border-bottom: 1px #ccc solid;
						}
							#book-title h1 {	font-size: 30px;position: relative;}
							#book-title p  {	font-size: 20px;}
				
							#inStudio::after {
								content: "";
								position: absolute;
								right: 10px;
								top: calc( 50% - 10px );
								height: 20px;
								width: 20px;
								border-radius: 10px;
								background-color: #73AA3B;
							}
							.inStudio {position: relative;}			
							.inStudio::after {
								content: "";
								position: absolute;
								right: 10px;
								top: 10px;
								height: 10px;
								width: 10px;
								border-radius: 5px;
								background-color: #73AA3B;
							}
				
							#book-cat {
								padding: 20px 0;
								display: flex;
								flex-direction: column;
							}
							#book-cat p {padding: 10px 0 5px;}
								#book-cat a {
									position: relative;
									padding: 4px 0 4px 20px;
									box-sizing: border-box;
								}
								#book-cat a::after {
									content: "+";
									position : absolute;
									left: 5px;
									top: 3.5px;
								}
							#book-cat p {padding: 15px 0 5px;}
							
							#book-com {line-height: 24px;} 
							#book-com a {text-decoration: underline;}
							
							#book-desc {
								padding: 20px 0;
								line-height: 24px;
							}













			#changeLib {
				position: fixed;
				left: 0;
				bottom: 0;
				right: 0;
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60px;
			}
			 #changeLib a {
				background-color: #d6d6d6;
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			 }








.fContent {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.fContent ul {
	padding-left: 20px;
	padding-bottom: 20px;
}
#weekSelect {
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 875px; 
}
	#weekSelect a {
		padding: 5px 10px;
		background: #106cb6;	
		color: #fff;
	}
.oneWeek {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 30px 0 20px;
	border-bottom: 1px #ccc solid;
}
	.oneWeek-add {
		padding: 15px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
	}
		.oneWeek-total {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: baseline;
			padding-left: 20px;
		}
		.oneWeek-total input{
			padding-left: 10px;
			font-weight: bold;
			font-size: 16px;
			position: relative;
			width: 70px;
		}			
			.oneWeek-total .green{
				color: green;
			}
			.oneWeek-total .red{
				color: red;
			}

		.oneWeek-add a {			
			background: #106cb6;
			color: #fff;
			padding: 5px;
			font-size: 11px;
		}
		.oneWeek-projects {
			padding: 25px 0 0 15px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: baseline;
		}
		.oneWeek-projects select {
			padding: 3px;
			margin: 0 15px 0 5px;
			background: #fff;
			border-bottom: 1px #ccc solid;
		}
		.oneWeek-projects input[type="range"] {
			margin-bottom: -5px;
		}
		
		.oneWeek-projects input[type="number"] {
			border-bottom: 1px #ccc solid;
			padding: 3px;
			margin: 0 15px 0 5px;
			background: #fff;
			width: 50px;
		}

		.oneWeek-p {
			padding-bottom: 10px;
		}

	#fForm-save {width: 100%;}	
	#fForm-save input{
		width: 100%;
		margin-top: 20px;
		padding: 10px 0;
		background: #106cb6;
		color: #fff;
		font-weight: bold;
	}

	#loginContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
		#loginContent #cForm {
			margin: 20px 0;
			font-size: 11px;
			width: 210px;
		}
		#loginContent input[type="text"], #loginContent input[type="password"] {
			border-bottom: 1px #ccc solid;
			padding: 3px;
			background: #fff;
			width: 150px;
			margin-left: 5px;
		}
		#loginContent input[type="submit"], .button-blu {
			padding: 3px;
			width: 100%;
			box-sizing: border-box;
			margin-top: 15px;
			background: #106cb6;
			color: #fff;
			font-weight: bold;
		}
			.cForm-line {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: baseline;
			}
			#logoSection {
				display: flex;
				justify-content: center;
			}
				#logoSection img {
					height: 60px;
					margin:  30px;
				}

		.sideBox{
			font-size: 11px;
			line-height: 16px;
		}





		#searchTab {
			position: absolute;
			top: 0;
			left: -320px;
			z-index: 10;
			background: #fff;
			height: 100%;
			padding: 20px;
			width: 320px;
			max-width: 100vw;
			box-sizing: border-box;
			display: flex;
			color:#515151;
			font-size: 12px;
		}	
		#searchTab-wrapper {
			width: inherit;
			height: inherit;
			position: relative;	
		}	
		#searchTab #searchButton { 
			position: absolute; 
			top: 230px;
			right: -105px;
			z-index: 11;
			background: #cecece;
			height: 50px;
			width: 120px;
			justify-content: center;
			align-items: center;
			transform: rotate(-90deg);
			color: #fff;
			box-sizing: border-box;
			line-height: 30px;
			z-index: 15;
			font-size: 14px;
			display: none;
		}
		#searchTab-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
		}
		#searchTab-form select{
			width: 100%;
			background-color: #fff;
			border-bottom: 1px #cecece solid;
			margin: 10px 0;
			padding: 5px;
			color: #515151;
		}
		#searchTab-form select option{
			font-size: 10px;
			padding: 2px 0;
		}
		#searchTab-form input[type="text"]{
			width: 100%;
			background-color: #fff;
			border-bottom: 1px #cecece solid;
			margin: 10px 0;
			padding: 5px;
			color: #515151;
		}
		#searchTab-form input[type="image"]{
			opacity: 0.5;
		}

/****************** RESPONISIVE RULES ********************/

	@media all and (max-width:1200px) { 
	}
	@media all and (max-width:1000px) { 
			
		header .content form {display: none;}
		#searchTab {
			display: flex;
		}
		
		#searchTab #searchButton { 
			display: flex;
		}
	}
	@media all and (max-width:750px) { 
		#matCard {
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}
		#matCard-left, #matCard-right {width: 100%;}
		#matCard-left {order: 2;margin-top: 20px;}
	}
	@media all and (max-width:600px) { 
		header .content {flex-direction: column;align-items: flex-start;}
	}
	@media all and (max-width:450px) {
		#materials .matContainer {
			max-width: 420px;
		}  
	}
	@media (min-width:800px) and (max-width:1000px) { 
	}