@font-face {
	font-family: futura;
	src: url(../css/FuturaPTBook.otf);
  }
/* ?grid in our projects */
.grid_container {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-gap: 20px;
  }
  .small_image {
	align-content: space-between;
	display: grid;
	padding-bottom: 5px;
  }
  .small_image > img {
	height: 283px;
  }
  .structural_engineer h1,.pagination>h1{
	margin: 40px 0;

  }
  .what_we_do_blank>div,.structural_engineer>div,.tabset{
	width: 90%;
	overflow: hidden;
	margin: auto;
  }
  .tabset{
	margin-bottom: 70px;

  }
  .head1,.project-container-content,.categories-content,
 .sorty,.sort-grp{
	  overflow: hidden;
  }
/* tabheader */
/*
 CSS for the main interaction
*/

.tabset > input[type="radio"] {
	position: absolute;
	left: -200vw;
  }
  
  .tabset .tab-panel {
	display: none;
  }
  
  .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
  .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
  .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
  .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
  .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
  .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
	display: grid;
  }
  
  /*
	 Styling
	*/
  
  .tabset > label {
	position: relative;
	display: inline-block;
	padding: 25px 0px;
	border-bottom: 0;
	color: #505565;
	cursor: pointer;
	font-family: futura;
	font-size: 14px;
	line-height: 24px;
	width: 20%;
	text-align: center;
  }
  .structural_engineer h6{
	  display: flex;
	  text-decoration: underline;
	  font-size: 16px;
	  align-items: end;
	  margin-top: 50px;
	  
  }
  .structural_engineer h6>a{
	color: #003BDE;

  }
  
  .structural_engineer h6>a:hover{
	  color: #000;
	  cursor: pointer;
	  transition: .2s;
  }.structural_engineer h6 img:hover{
	  transform: scale(1.1);
	  transition: .2s;
  }
  .tabset > label::after {
	content: "";
	position: absolute;
	left: 0px;
	bottom: 10px;
	width: 100%;
	border-radius: 10px;
	height: 2px;
	background: #d3d4d8;
  }
  
  .other{
	  margin-left: auto;
  }
  .tabset > label:hover {
	color: #9dbbc6;
	transition: 0.2s;
  }
  .tabset > input:focus + label {
	color: #0073a1 !important;
  }
  .tabset > label:hover::after {
	background: #9dbbc6;
  }
  
  .tabset > input:focus + label::after,
  .tabset > input:checked + label::after {
	background: #003bde;
  }
  #rauchbier{
	/* display: grid; */
	grid-template-columns: 24% 50%;
}
#rauchbier .ash-text3{
	margin-bottom: 35px;
}
  .ash-text3{
	color:#505565;
	line-height: 24px;
  }	
  .category{
	  margin: 40px 0 180px 0;
  }
  .categories{
	  display: block;
  }
 .projects{
	  display: grid;
	  grid-gap: 4%;
	  grid-template-columns: 48% 48%;
  }
  .categories img{
	  max-width: 100%;
  }
  .categories img:hover{
	  opacity: 0.9;
	  transition: .3s;
	  filter: grayscale(80%);
  }
 
  .categories p,.project-title{
	  font-weight: bold;
	  color: #000;
	  font-size: 25px;
line-height: 16px;
letter-spacing: .5px;
  }
  .categories p:hover, .project-title:hover{
	  color: #003BDE;
	  transition: .2s;
  }
.grid_container img{
	max-width: 100%;
	height: auto;
}
.big_image{
	align-items: center;
    display: flex;
}

.project-container{
	width: 90%;
	margin: auto;
}
.project-container-content>div.head1{
	/* width: 12%; */
	/* padding: 8px 0; */
	margin: 40px 0;
}
.project-container-content>div.head1>h1{
	border-bottom: 4px solid #000;
	width: fit-content;
	font-family: futura;
	padding: 8px 0;

}

.sorty>h1{
font-size: 30px;
line-height: 32px;
margin-right: 90px;
}
.sorty{
	display: flex;
	align-items: center;
}
.alpha{
	display: flex;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	padding: 14px 10px 14px 30px;
	background-color: #F0F1F3;
	margin-left: 30px;
}
.alpha:hover{
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	transition: .2s;
	
}
.sort-btn{
	background-color: Transparent;
	align-items: center;
	cursor: pointer;
	border: none;
	outline: none;
	font-size: 12px;
line-height: 16px;
color:  #003BDE;

}
/* .sort-btn>img{
	margin-left: 25px;
} */
.sort-btn>img:hover{
	transform: scale(1.3);
	transition: .2s;
}
.sort-btn:hover{
	color:  black;
	transition: .2s;
	/* background-color:black; */
}

/* sort and filter */

.dropbtn {
	font-family: futura;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
  }
  
 
  
  #myInput {
	box-sizing: border-box;
	background-image: url('../images/search_down.png');
	background-position: 85% 50%;;
	background-repeat: no-repeat;
	font-size: 16px;
	width: 130px;
	padding: 10px;
	outline: none;
	border: 1px solid #A1A4B1;
  }
  /* #myInput:hover{
	border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;

  }
   */
  /* #myInput:focus {outline: 3px solid #ddd;} */
  
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  .dropdown-content {
	  /* margin-left: 120px; */
	display: none;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.9);
	min-width: 230px;
	overflow: auto;
	border: 1px solid #A1A4B1;
	z-index: 1;
  }
  .sort-grp:hover .dropdown-content{
	  display: block;
  }
  .dropdown-content a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .dropdown a:hover,.drop-active {background-color: white;
color: #000;
transition: .2s;}
  
  .show {display: block;}



  @media (max-width: 2660px) and (min-width: 2520px){

  .grid_container {
	grid-gap: 3%;
	grid-template-columns: 40% 40%;
}
.structural_engineer>div, .tabset {
	width: 70%;
	margin: auto;
}
.light-bg{
	position: relative !important;
}
  }
  @media (max-width: 1270px) {
.project-title,.project-title{
	font-size: 20px;
} 
}
@media (max-width: 1023px) {
	.project-title{
		font-size: 15px;
	} 
	}
	
  @media (max-width: 930px) {
	#rauchbier{
		grid-template-columns: 35% 60%;
	}
  }
  @media (max-width: 767px) {
	.project-title{
		font-size: 12px;
	} 
	}
  @media (max-width: 745px) {
	#rauchbier{
		grid-template-columns: 35% 65%;
	}
  }
  @media (max-width: 624px) {
	.project-title{
		font-size: 10px;
	} 
	}
  @media (max-width: 613px) {
	#rauchbier .ash-text3{
		font-size: 13px;
	}
  }
  @media (max-width: 577px){
	.categories{
		grid-template-columns: 1fr;
		grid-gap: 1%

	}
	.project-title{
		font-size: 20px;
	} 
	.category{
		margin-bottom: 190px;
	}
	}
  
  @media (max-width: 561px){
  .structural_engineer h1{
	  font-size: 20px;
  }
}
@media (max-width: 516px) {
	#rauchbier{
		grid-template-columns: 45% 55%;
	}
  }
  @media (max-width: 492px) {
	  .sorty>h1{
		  margin-right: 10px;
	  }
	  .alpha{
		  margin-left: 15px;
	  }
	  .sort{
		  /* display: flex; */
		  align-items: center;
		  justify-content: space-between;
	  }
  }
  @media (max-width: 484px) {
	.project-title{
		font-size: 15px;
	} 
	}
@media (max-width: 466px){
	.structural_engineer h1{
		font-size: 15px;
	}
  }
  @media (max-width: 399px) {
  
}
  @media (max-width: 376px) {
	#rauchbier{
		font-size: 11px;
		grid-template-columns: 50% 50%;
	}
	
  }
  @media (max-width: 374px) {
	  .dropdown-content{
		  /* margin-left: 70px; */
		  min-width: 200px;
		  /* min-width: -webkit-fill-available; */
		  /* max-width: 70%; */
	  }
	  .project-container{
		  overflow: hidden;
	  }
	  #myInput{
		  width: 100px;

	  }
	  .sorty>h1{
		  font-size: 22px;
	  }
	  .alpha{
		  padding-left: 20px;
	  }
  }
  @media (max-width: 370px) {
	.project-title{
		font-size: 12px;
	} 
	}
  @media (max-width: 344px){
	.structural_engineer h1{
		font-size: 13px;
	}
  }
  @media (max-width: 327px){
	.tmt{
		margin-top: 59px;
	}
}