o*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

body,html{
	margin:0;
	padding: 0;
	height: 100%;
}
.wrapper{
	width: 1000px;
	margin: auto;
	height: 100%;
	position: relative;
		
}

.portfolioPage .inner{width:calc(100% - 280px);padding-left:0px;padding-bottom:15.5px;overflow:scroll;padding-right:15.5px;}
.leftThingy{
	float:left;
	width: 30%;
	background-color:#CCC;
	height: 100%;
}

.gThingy{
	float:left;
	width: 70%;
	background-color: white;
	height: 100%;
}
.gImage{
	float:left;
	overflow:hidden;
	position:relative;
	border: 4px solid white;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	cursor:pointer;
}
/*
.arrow{
	position: absolute;
	bottom:0px;
	right: 0px;
	height:66px;
	width: 66px;
	background: url(../images/arrow.png);	
	display: none;
	background-size:cover;
	
	
}
*/



.a0 .arrow {
	width: 0;
	height: 0;
	border-bottom: 60px solid white;
	border-left: 60px solid transparent;
	position: absolute;
	bottom:0px;
	right: 0px;
	display: none;
	cursor: pointer;
}

.a0 .arrow div{
	position: absolute;
	z-index: 20;
	width: 60px;
	height: 60px;
	margin-left: -27px;
	margin-top: 20px;
	color: #547614;
	font-size: 30px;
}

.b0 .arrow {
	width: 0;
	height: 0;
	border-bottom: 60px solid white;
	border-right: 60px solid transparent;
	position: absolute;
	bottom:0px;
	left: 0px;
	display: none;
	cursor: pointer;
}

.b0 .arrow div{
	position: absolute;
	z-index: 20;
	width: 60px;
	height: 60px;
	margin-left: 10px;
	margin-top: 20px;
	color: #547614;
	font-size: 30px;
}

.a1 .arrow {
	width: 0;
	height: 0;
	border-top: 60px solid white;
	border-left: 60px solid transparent;
	position: absolute;
	top:0px;
	right: 0px;
	display: none;
	cursor: pointer;
}

.a1 .arrow div{
	position: absolute;
	z-index: 20;
	width: 60px;
	height: 60px;
	margin-left: -27px;
	margin-top: -65px;
	color: #547614;
	font-size: 30px;
}

.b1 .arrow {
	width: 0;
	height: 0;
	border-top: 60px solid white;
	border-right: 60px solid transparent;
	position: absolute;
	top:0px;
	left: 0px;
	display: none;
	cursor: pointer;
}

.b1 .arrow div{
	position: absolute;
	z-index: 20;
	width: 60px;
	height: 60px;
	margin-left: 10px;
	margin-top: -65px;
	color: #547614;
	font-size: 30px;
}

.imgContainer{
	width:calc(33.3% - 19.5px);
	
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	float:left;
	position:relative;
	
}

.imgContainer a{
	display: block;
    width: 100%;
    height: inherit;
}

.overlay {
    text-align: center;
    width: 100%;
    height: 100%;
	box-sizing: content-box;
    position: absolute;
    opacity:0;
    background-color: rgba(0,0,0,0.6);
    padding: 50% 5px 0px 5px;
    box-sizing: border-box;
    color:white;
    line-height: 100%;
	transition:opacity .5s;
}

@media screen and (max-width: 1149px) {
	.imgContainer{
		width:calc(50% - 19.5px);
		
	}
	
.portfolioPage .inner{width:calc(100% - 280px);padding-left:0px;padding-bottom:45px;overflow:scroll;padding-right:0px;}
	
}

@media screen and (max-width: 799px) {
	.imgContainer{
		width:calc(100% - 9.5px);
		
	}
	
}
@media screen and (max-width: 615px) {
html, body {
		background:#fff !important;
		height: auto;
	}
	.portfolioPage .inner{width:100%;height:auto;overflow:visible;padding-bottom:0px;}
	.imgContainer{float:none;display:block;}
}