/*.row-galeria {display: grid; gap:10px; grid-template-columns:1fr 1fr 1fr 1fr; padding: 0;}*/
.row-galeria {columns: 4 200px; column-gap: 1.5rem;  gap:10px; padding: 0;}


.column-galeria {width:100%;}
.column-galeria .project img {width: 100%; border-radius: 6px;}

@media screen and (max-width: 800px) {
	.row-galeria {grid-template-columns:1fr 1fr;}
}
@media screen and (max-width: 600px) {
	.row-galeria {grid-template-columns:1fr;}
}


.column-galeria{}
.teste{background: #ffffff; width: 700px; padding: 40px; position: relative; opacity: 1;}
.teste img{max-height: 400px; max-width: 100%; display: grid; justify-content: center; margin: auto;}



@import url('https://fonts.googleapis.com/css?family=Inconsolata|Merriweather');

$body: 'Inconsolata', monospace;
$big: 'Merriweather', serif;

$white: #ffffff;
$primary: #F2DAD7;
$secondary: #D1A39E;
$light: #CECDCA;
$dark: #474545;

$ease: all 0.3s ease-in-out;

body {
  font-family: $body;
  margin: 0;
}

button {
  cursor: pointer;
}

#portfolio {
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(200px, 1fr));
	grid-template-rows: 1fr 1fr;
	grid-gap: 2px;
}
.project {
	position: relative;
	display: flex;
	overflow: hidden;
	margin-bottom: 10px;
}
.project img {
}
.project p {
	position: absolute;
	text-align: center;
	width: 100%;
	padding: 1em 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 3;
	background-color: #faebd787;
    color: black;
    font-weight: 500;
}

.grid__title {
	position: absolute;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	bottom: 30px;
	font-weight: 100;
	font-size: 0.8em;
	z-index: 3;
	text-transform: uppercase;
	color: #474545;
	letter-spacing: 2px;
}



.project:hover .grid__overlay {
	transform: translateY(0%);
	border-radius:8px;
}

.project:hover img {
	opacity:0.1;
}

.grid__overlay {
	background: #6c9fd3e6;
	height: 100%;
	width:100%;
	grid-column: 1/-1;
	grid-row: 1/-1;
	position: absolute;
	display: grid;
	justify-items: center;
	align-items: center;
	transform: translateY(100%);
	transition: all 0.3s ease-in-out;
	z-index: 999;
	top: 0;
	margin-bottom: 20px;
	border-radius:8px;
}

.grid__overlay button {
  background: none;
  outline: none;
  font-weight: 100;
  letter-spacing: 2px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-transform: uppercase;
  padding: 10px;
}
.grid__overlay button:hover {
  transition: all 0.3s ease-in-out;
  background: #ffffff;
  color: #D1A39E;
}


//project popup overlay


.ov_innerTeste {background: #ffffff; width: 700px; padding: 20px; position: relative; opacity: 1;}

.overlay {position: fixed; background: #474545b3; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 9999;}
.overlay.open {display: grid; align-items: center; justify-items: center;}

.close {position: absolute; top: 8px; right: 10px; background: none; outline: 0; color: #474545; border: 0; text-transform: uppercase; letter-spacing: 2px;}
.close:hover {color: #D1A39E;}


@media screen and (max-width: 940px) {
	.row-galeria {columns: 3 200px;}
}
@media screen and (max-width: 820px) {
	.row-galeria {columns: 2 200px;}
}

@media screen and (max-width: 790px) {
	.teste {width: calc(100% - 80px);}
}
@media screen and (max-width: 540px) {
	.row-galeria {columns: 1 200px;}
}