/* CSS Document */

section{
	display: table;
	width: 100%;
}

#hero{

	position: relative;
}

.hero-bg{
	position: absolute;
	width: 100% !important;
	height: 100% !important;
	background-image: url(img/hero_bg.jpg);
	background-color: #0c040f;
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: -129px 133px;
	opacity: 1;
}

#heroContent{
	background-image: url(img/logo_bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center 30%;
	font-size: .9em;
	line-height: 1.5em;
	position: absolute;
	top: 30%;
	right: 30%;
	padding: 0 60px;
}

#heroContent p:last-child{
	padding-left: 30px;
}

#heroContent h1{
	font-family: Againts, serif;
	font-size: 3.7em;
}

 a.info-link{
	width: 22px;
	height: 22px;
	background: url(img/info.svg) center no-repeat;
	background-size: contain;
}

#heroContent a.info-link{
	position: absolute;
	right: -40px;
	top: -20px;
}

#heroContent a.button{
	margin-top: 30px;
}

#categories h1{
	margin-bottom: 60px;
}

.section > div{
	width: auto;
	margin: auto;
	padding: 5% 0;
}

.category{
	color: white;
	margin: 0 7px;
	width: 238px;
}

.category:first-child{
	margin-left: 0;
}

.category:last-child{
	margin-right: 0;
}

.category > div{
	height: 212px;
	background-position: center;
	background-size: auto 103%;
	background-repeat: no-repeat;
	background-blend-mode: luminosity;
	transition: background .5s ease;
	border-radius: 2px;
	border-width: 2px;
	border-style: solid;
}

.category > p{
	font-size: 1.35em;
	padding: 25px 0 20px 0;
	margin: 0;
    opacity: 1;
	line-height: 1.6em;
}

.category:hover > div{
}

.category:hover > p{
	opacity: 1;
}

.portfolio-wrapper{
	min-height: 100%;
	table-layout: fixed;
}

.portfolio-wrapper header{
	font-size: 1.2em;
	height: 65px;
}

.header-back-cell{
	width: 70px;
	text-align: center;
	opacity: .7;
}

.header-back-cell:hover{
	opacity: 1;
	transition: opacity .5s ease;
}

.header-cat-cell{
	padding: 0 0 0 25px;
	line-height: 1.8em;
	border-width: 1px !important;
}

footer{
	height: 40px;
	font-size: .8em;
}

.timeline{
	background-image: url(img/timeline.svg);
	background-repeat: repeat-y;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	z-index: 2;
	opacity: .2;
	background-size: 83% auto;
}

article{
	position: relative;
	padding-bottom: 50px;
}

article .description, article .details{
	display: inline-block;
	vertical-align: top;
}

article .text-content{
/*	margin-top: -200px;
	padding-top: 215px;
*/
}

article .description{
	width: 60%;
	/*border-right: 2px solid #752564;*/
    padding-right: 80px;
}

article .details{
	width: 30%;
	margin-left: 5%;
}

article h1{
	padding-bottom: 45px;
}

.article-loader{
	width: 100%;
	height: 70px;
	background-size: 30px 30px !important;
}

.details .involvment .row .cell{
	padding: 3px 13px;
}

.details .involvment .row .cell:first-child{
	text-transform: capitalize;
	padding-left: 0;
}

.details .involvment .row .cell:last-child{
	padding-right: 0;
}

.details .involvment .canal{
	height: 4px;
	width: 100%;
}

.details .involvment .fill{
	height: 100%;
}


article .text{
	line-height: 1.8em;
	color: rgba(255,255,255, .7);
	font-size: .9em;
}

article .text p:first-child::first-letter{
	font-size: 2.5em;
	text-transform: uppercase;
	font-weight: bold;
	color: rgba(255,255,255, 1);
	margin-right: 2px;
}

article .sub-title{
	font-weight: bold;
}

.year{
	position: absolute;
	left: 0;
	font-size: 0.9em;
	z-index: 10;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	padding: 0 9px 2px 50px;
	opacity: .8;
}

@media only screen and (max-width: 860px) {
	.hero-bg {
		background-size: 150%;
		background-position: 10% 10%;
		opacity: .5;
	}

   #heroContent {
		margin: auto;
		width: 100%;
		text-align: center;
		top: 40%;
		right: auto;
		padding: 0 30px;
		background: none;
	}

	#heroContent a.info-link {
		right: 20px;
		top: 0;
	}

	#categories h1 {
		margin-bottom: 40px;
	}

	.category > div {
		height: 110px;
		background-size: 120%;
	}

	.category > p {
		font-size: 1em;
		padding-bottom: 35px;
	}

	.header-cat-cell{
		font-size: .9em;
	}

	.timeline{
		display: none;
	}

	.year{
		position: relative;
		text-align: center;
		padding: 0 5px 0 5px;
		margin: 0 auto 10px auto;
		white-space: nowrap;
		font-size: .7em;
		line-height: .9em;
		border-bottom: none;
		font-weight: bold;
		opacity: .7;
	}

	article .description{
		width: 100%;
		padding: 0;
	}

	article .details {
		width: 100%;
		margin-left: 0;
		font-size: .9em;
	}

	article .sub-title {
		margin-top: 30px;
	}
}