.projects {
	padding-top: 100px;
	width: 100%;
	height: 45vh;
	background-color:  rgba(250, 250, 250, 1);
	padding-bottom: 5vh;
}
.project {
	border: 3px;
	border-style: solid;
	border-color: black;
	transition: all 1s ease;
	z-index: 0;
	position: relative;
	overflow: hidden;
	width: 40vw;
}
.project-left {
	float: left;
	left: 5vw;
}
.project-right {
	float: right;
	right: 5vw;
}
.project img {
	width: 40vw;
}
.project .clientname {
	color: rgba(0, 255, 0, 1);
	text-align: center;
	width: 40vw;
	font-size: 2vw;
	font-family: oldelm;
	padding-top: 10vh;
}
.project .info {
	font-family: endurest;
	color: rgba(0, 255, 0, 1);
	width: 40vw;
	text-align: center;
	font-size: 1vw;
}
.project .hover {
	transition: all 1s ease;
	position: absolute;
    top: 0vh;
    background: rgba(255,255,255,.6);
    opacity:0;
    height: 100%;
    width: 40vw;
}

.project:hover {
	-webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
}


.project:hover .hover{
	-webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	opacity:1;
}


@media only screen and (max-width: 768px) {
	.projects {
	}
	.project {
		width: 90vw;
		left: 5vw;
	}
	.project img {
		width: 90vw;
	}
	.project .clientname {
		text-align: center;
		width: 90vw;
		font-size: 5vw;
	}
	.project .info {
		font-size: 3vw;
		text-align: center;
		width: 90vw;
	}
	.project .hover {
		transition: all 1s ease;
		position: absolute;
		top: 0vh;
		opacity:0;
		height: 100%;
		width: 90vw;
	}

	.project:hover {
		-webkit-transform: scale(.9);
		-ms-transform: scale(.9);
		transform: scale(.9);
	}

	.project:hover .hover{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity:1;
	}
	.project-break {
		padding-top: 10vh;
		width: 100%;
	}
	.project-right {
	margin-top: 10vh;
		float: left;
		left: 5vw;
	}
}