section.first {
	z-index: 1;
}
	
	section.first  h1 {
		margin: 0 auto; 
		width: 90%;
		max-width: 1920px;
	}
		section.first  h1 span {
			text-transform: uppercase;
			font-size: 3vw;
			display: block;
			width: fit-content;
			background: rgba(187,197,209, 0.9);
			font-weight: 400;
			padding: 2px 15px 2px 15px;
		}
			section.first  h1 span.hl1 {
				margin: -45px 0px 0px 5%;
				z-index: 1;
				
			}
			section.first  h1 span.hl2 {
				margin: 15px 0px 0px 32%;
			}


	section div.gen {
		display: table;
		max-width: 1900px;
		width: 96%;
		margin: 80px auto;
		
	}
		section div.gen div.text {
			display: table-cell;
			width: 32%;
			font-size: 1.4vw;
			font-weight: 300;
			box-sizing: border-box;			
		}
			section div.gen div.text div {
				background: linear-gradient(to bottom, rgba(0,0,60,0.1), rgba(0,0,60,0.15));
				padding: 15px 20px 15px 20px;
			}
		
			section div.gen div.text a {
				font-size: 1.2vw;
				font-weight: 600;
				text-decoration: none;
				border-bottom: 2px solid #000000;
				text-transform: uppercase;
			}
			section div.gen div.text a:hover {
				color: #1993a5;
				border-bottom: 2px solid #1993a5;
			}
			
		


div.body {
	width: 100%;
	max-width: 1700px;
	margin: 0px auto;
	padding: 20px; 
	box-sizing: border-box;
	margin-top: 65px;
}

					
					

@media screen and (max-width: 1000px) {
	section div.gen {
		display: block;
		margin: 50px auto;
	}
			section div.gen div.text {
				display: block;
				width: 80%;
				font-size: 2vw;
				box-sizing: border-box;
				padding: 10px 0px 50px 0px;
				margin: 0 auto;
			}
			
				section div.gen div.text a {
					font-size: 1.8vw;
				}
				
				
			section div.gen div.projects {
				display: block;
				padding: 0px 0px 0px 0px;
			}
			
				section div.gen div.projects div.prj span.name {
					font-size: 2.8vw;
				}
				
				section div.gen div.projects div.prj p.descr {
					font-size: 1.6vw; 
				}
				section div.gen div.projects div.prj img.ico {
					width: 80%;
					max-width: 270px;
				}

	
}



@media screen and (max-width: 821px) {		

	div.body {
		padding: 20px 5px 20px 5px;
	}

	section.first  h1 {
		width: 100%;
	}
		section.first  h1 span {
			font-size: 4vw;
			padding: 2px 10px 2px 10px;
		}
			section.first  h1 span.hl1 {
				margin: -22px 0px 0px 2%;
				
			}
			section.first  h1 span.hl2 {
				margin: 4px 0px 0px 28%;
			}
	
	
	section div.gen div.text {
		width: 100%;
		font-size: 16px;
		padding: 0px 10px 50px 10px;
	}
	
		section div.gen div.text a {
			font-size: 14px;
		}
		
		section div.gen div.projects div.prj span.name {
			font-size: 24px;
		}
		
		section div.gen div.projects div.prj p.descr {
			font-size: 14px; 
		}
		section div.gen div.projects div.prj p.lnk a.big {
			font-size: 24px;
		}
		
	
	div.body {
		margin-top: 40px;
	}
	div.crumbs {
		font-size: 12px;
		
	}
	
	
		
}
	
@media screen and (max-width: 600px) {

	section div.gen div.projects div.frame {
		display: block;
	}
	
	section div.gen div.projects div.ln {
		display: block;
	}

	section div.gen div.projects div.prj {
		display: block;
	}
	section div.gen div.projects div.prj+div.prj {
		border-left: 0px;
	}
	section div.gen div.projects div.prj p.lnk a.big {
			margin-top: 300px;
	}
	div.crumbs {
		font-size: 11px;
		
	}
}



div.mline h1 {
	font-weight: 500;
	font-size: 3vw;
	text-align: center;
}

	div.mline h1 span {
		font-weight: 700;
		border: 4px solid #aa3014;
		color: #aa3014;
		padding: 1px 10px 1px 10px;
		white-space: nowrap;
	}
	
	
div.mline p {
	width: 55%;
	margin: 20px 0px 20px 20%;
	font-size: 1.8vw;
	font-weight: 300;
}
	div.mline p.small {
		color: #606060;
		font-size: 1.2vw;
	}

@media screen and (max-width: 821px) {
	div.mline h1 {
		font-size: 24px;
		line-height: 40px;
	}
	div.mline h1 span {
		border: 3px solid #aa3014;
		padding: 0px 5px 0px 5px;
		margin: 2px;
	}
	
	
	div.mline p {
		width: 90%;
		margin: 20px 0px 20px 5%;
		font-size: 16px;
		font-weight: 400;
	}
		div.mline p.small {
			font-size: 11px;
		}
}



div.cat {
	max-width: 1600px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
	margin: 20px 0px 20px 0px;
}
	div.cat div.line {
		padding: 1vw 0px 1vw 0px;
		width: 29%;
		margin: 20px 2% 30px 2%;
		box-sizing: border-box;
		min-width: 290px;
		text-align: center;
	}
	
	
		div.cat div.line div.counts {
			position: absolute;
			z-index: 2;
			margin: -20px 0px 0px 0px;
		}	
			
				div.cat div.line div.counts span {
					display: inline-block;
					font-size: 12px;
					background: #303033;
					border-radius: 20px;
					color: #ffffff;
					padding: 5px 10px 1px 10px;
					margin: 0px 3px 0px 0px;
					font-weight: 100;
				}
					div.cat div.line div.counts span.tolc {
						background: linear-gradient(to top right, #ff6021, #ca3900);
					}
					div.cat div.line div.counts span.pisu {
						background: linear-gradient(to top right, #de7800, #de4400);
					}
					div.cat div.line div.counts span.dush {
						background: linear-gradient(to top right, #00acd1, #0084a0);
					}
					div.cat div.line div.counts span.rako {
						background: linear-gradient(to top right, #3ec2e3, #02a9d3);
					}
					div.cat div.line div.counts span b {
						font-size: 14px;
						font-weight: 600;
					}
					div.cat div.line div.counts img {
						height: 24px;
					}
					
				
				
	div.cat div.line div.ico a {
		display: block;
		aspect-ratio: 7/4;
		width: 100%;
		overflow: hidden;
	}
	
		div.cat div.line div.ico img {
			width: 100%;
		}
		div.cat div.line div.ico img.one {
			display: block;
		}
		div.cat div.line div.ico img.two {
			display: none;
		}
		
		
	
		div.cat div.line div.ico div.dots span {
			opacity: 0;
			font-size: 16px;
			font-weight: 900;
		}
		div.cat div.line div.ico div.dots span.one {
			font-weight: 900;
			opacity: 1;
		}
		div.cat div.line div.ico div.dots span.two {
			font-weight: 100;
			opacity: 1;
		}
		
		
			div.cat div.line:hover div.ico img.one {
				display: none;
			}
			div.cat div.line:hover div.ico img.two {
				display: block;
			}
			
			div.cat div.line:hover div.ico div.dots span.one {
				font-weight: 100;
			}
			div.cat div.line:hover div.ico div.dots span.two {
				font-weight: 900;
			}
			
			
		div.cat div.line div.name {
			font-size: 1.5vw;
		}
			div.cat div.line div.name a {
				color: #004d58;
				text-decoration: none;
				border-bottom: 1px solid rgba(0, 77, 88, 0.9);
				transition: border 200ms ease-out;
			}
			div.cat div.line div.name a:hover {
				color: #006674;
				border-bottom: 1px solid #ff4200;
			}
			
			
		div.cat div.line div.text {
			font-size: 1.2vw;
			color: #505050;
			font-weight: 300;
			margin: 1vw 0px 1vw 0px;
		}
		
		
@media screen and (max-width: 1200px) {
	div.cat div.line div.name {
		font-size: 20px;
	}
	div.cat div.line div.text {
		font-size: 16px;
	}
	
	
	
	
}



div.filter {
	background: #f0f0f0;
	padding: 10px;
	border-radius: 20px;
	box-sizing: border-box;
}
	div.filter div.capt {
		margin: 10px 0px 10px 10px;
		font-size: 1.6vw;
		font-family: 'Bitter', sans-serif;
		font-weight: 600;
		text-transform: uppercase;
	}
	
	div.filter div.frame {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
		div.filter div.frame div.block {
			padding: 5px 15px 5px 5px;
			max-width: 480px;
		}
		div.filter div.frame div.block+div.block {
			
		}
			div.filter div.frame div.block p {
				margin: 5px 0px 5px 0px;
				font-size: 18px;
				font-weight: 300;
				border-bottom: 1px dashed #000000;
				cursor: pointer;
			}
				div.filter div.frame div.block:hover p {
					color: #004d58;
					border-bottom: 1px dashed #ff4200;
				}
				
			
			
			
			
			div.filter div.frame div.block div.flow {
				position: absolute;
				max-width: 420px;
				background: rgba(220,220,220,0.9);
				border-radius: 20px;
				padding: 20px;
				display: none;
				z-index: 3;
				margin: 0px 5px 0px -5px;
			}
				div.filter div.frame div.block:hover div.flow {
					display: block;
				}
				
			div.filter div.frame div.block label {
				display: inline-block;
				background: #ffffff;
				margin: 5px 15px 5px 0px;
				cursor: pointer;
				padding: 3px 10px 2px 30px; 
				border-radius: 10px;
				text-transform: uppercase;
				font-size: 16px;
				font-weight: 400;
				box-shadow: 0px 2px 4px rgba(0,0,0,0.07);
			}
			
				
				div.filter div.frame div.block input {
					cursor: pointer;
					position: absolute;
					margin: 2px 0px 0px -22px;
				}
				
			div.filter div.frame div.block label:hover {
				box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
			}
			
		div.filter div.frame div.reset  p {
			margin: 2px;
			text-align: center;
		}
			div.filter div.frame div.reset  p.cnt {
				font-style: italic;
				font-weight: 500;
				color: #606060;
			}
			div.filter div.frame div.reset button {
				border-radius: 20px;
				border: 1px solid #c0c0c0;
				padding: 4px 10px 4px 10px;
				font-weight: 700;
				font-family: 'Bitter', sans-serif;
				cursor: pointer;
			}
			div.filter div.frame div.reset button:hover {
				background: #f4f4f4;
			}
			
@media screen and (max-width: 1030px) {
	div.filter div.capt {
		font-size: 18px;
	}
}			

@media screen and (max-width: 700px) {
	div.filter div.frame div.block p {
		margin: 3px 0px 3px 0px;
		font-size: 15px;
	}
	div.filter div.frame div.block label {
		margin: 0px 6px 6px 0px;
		padding: 4px 7px 4px 25px;
		border-radius: 10px;
		text-transform: uppercase;
		font-size: 13px;
	}
		div.filter div.frame div.block input {
			margin: 0px 0px 0px -18px;
		}
		
	div.filter div.capt {
		font-size: 16px;
	}	
	
}