section.logo_grid{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding:calc(2*var(--gutter)) 0;
	background:#F5F7F7;
}

section.logo_grid.text .rightcol{
	padding-top:0;
}

section.logo_grid.text .col2{
	margin-top:0;
}

section.logo_grid .logos{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 1px;
	background:#d5dedf;
	row-gap: 1px;
	padding:0;
	border-top:1px solid #d5dedf;
	border-bottom:1px solid #d5dedf;
	margin:var(--gutter) auto;

}

section.logo_grid .logo_single{
	aspect-ratio:1;
	background:#F5F7F7;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

section.logo_grid .logo_single .l{
	width:50%;
	height:30%;
	position: relative;
	opacity: .5;
}

section.logo_grid .logo_single.has_writeup .l{
	opacity: 1;
}
section.logo_grid .logo_single.has_writeup{
	cursor:pointer;
	overflow: hidden;
}
section.logo_grid .logo_single.has_writeup .overlay p{
	color:#fff;
}
section.logo_grid .logo_single.has_writeup .overlay p:before{
	content:'';
	width:15px;
	height:11px;
	background:url(../images/quotation.svg) center center no-repeat;
	background-size:contain;
	color:var(--blue);
	top:0;
	margin-bottom:10px;
	left:0;
	display: block;
}
section.logo_grid .logo_single.has_writeup .l:after{
	content:"";
	width: 25px;
	height: 25px;
	z-index: 0;
	position: absolute;
	bottom: -50%;
	left: calc(50% - 12px);
	background:url(../images/mark.png) center center no-repeat;
	background-size:contain;
}
section.logo_grid .logo_single.has_writeup .overlay small{
	color:#fff;
	font-size:12px;
	font-weight:bold;
}
section.logo_grid .logo_single.has_writeup .overlay{
	top:101%;
	position: absolute;
	left:0;
	width:100%;
	height:100%;
	background:var(--darkest-blue);
	color:#fff;
	transition:all 1s;
	padding:30px;
	display: flex;
	align-items: center;
	opacity: 0;
	z-index: 1;
	 transition-timing-function: cubic-bezier(.03,.44,.2,.98);
}
section.logo_grid .logo_single.has_writeup:hover .overlay{
	top:0;
	opacity: 1;
}


@media only screen and (max-width: 1440px) {
	section.logo_grid .logos{
	  grid-template-columns:1fr 1fr 1fr;
	  }
	  section.logo_grid .logo_single.has_writeup .overlay p,  section.logo_grid .logo_single.has_writeup .overlay small,
		section.logo_grid .logo_single.has_writeup  {

			font-size: 16px;
			line-height: 24px;
			margin:0;
		}
}

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

  section.logo_grid .logos{
  grid-template-columns: 1fr 1fr;
  }
  section.logo_grid .container {
	  display: block;

  }
  section.logo_grid .leftcol{
	  margin-bottom:30px;
  }
  section.logo_grid .logo_single.has_writeup .overlay p,  section.logo_grid .logo_single.has_writeup .overlay small,
  section.logo_grid .logo_single.has_writeup  {

	  font-size: 14px;
	  line-height: 22px;
	  margin:0;
  }
  section.logo_grid .logo_single.has_writeup .overlay small{
	  margin-top:5px;
	  display: block;
  }
  section.logo_grid .logo_single.has_writeup .overlay{
	  padding:20px;
  }
}


@media only screen and (max-width: 768px) {
	section.logo_grid .logo_single.has_writeup .overlay p,  section.logo_grid .logo_single.has_writeup .overlay small,
	  section.logo_grid .logo_single.has_writeup  {

		  font-size: 10px;
		  line-height: 14px;
		  margin:0;
	  }
	 section.logo_grid .logo_single.has_writeup .l:after{
	 width: 15px;
	 height: 15px;
 }
}