/* CSS Document */
body{
	font-family: sans-serif;
	font-size:14px;
	line-height:26px;
}
.wrapper-outside{
	box-sizing:border-box;
	position:relative;
	width:100%;
	overflow:hidden;
}

.wrapper-bg{
	top:80px;
	position:absolute;
	height:100%;
	width:100%;
	background-image: url("../assets/bg.png");
	background-repeat: repeat-y;
	z-index:1;
}

.wrapper{
	box-sizing: border-box;
	display:flex;
	position:relative;
	flex-direction:row;
	max-width: 1600px;
	width:100%;
	z-index:2;
	padding:30px 60px;
}

.item{
	margin:15px;
	width:100%;
}

.image{
	overflow: hidden;
	position:relative;
	padding-top:150%;
	clip-path: url(#clip);
}

.gradient{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 70%);
	z-index:1;
}

.image img{
	position:absolute;
	width:100%;
	height:100%;
	left: 0px;
	top:0px;
}

.content{
	position:absolute;
	left:0px;
	bottom:10px;
	padding:20px;
	z-index:2;
}

.content h3, .content p{
	color:white;
}

.content h3{
	font-family: serif;
	font-size:3em;
	margin:0;
}

a.button{
	display:inline-block;
	background-color:#BB5434;
	color:white;
	text-decoration:none;
	padding:10px 20px;
	
	font-family:serif;
	text-transform:uppercase;
	letter-spacing:.2em;
}

a.button::after{
	content:"→";
	padding-left:8px;
}


/** Display Purposes **/
section{
	width:60%;
}

code{
	box-sizing:border-box;
	display:inline-block;
	padding:10px;
	font-family: monospace;
	background:#EDEDED;
}