@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
    font-family: 'IBM Plex Sans Condensed', sans-serif;	
	font-size:1em;
	color:#666;
}

hr{
	width:8em;
	border:none;
	height:2px;
	background:#C00;
	margin:-1em auto 2em

}

/*------------------TOP---------------*/

.top{
	height:15em;
	width:100%
}

.top-img{
    background-repeat:no-repeat;
	background:url(../img/project/top.jpg);
	height: 100%;
	background-size: cover;
	background-position: center;
}



/*------------------CCM---------------*/

.project{
	padding:3% 0 0;
	color:#666;
	height:1%;
	overflow:hidden;
	text-align:center
}

.project h1{
	font-weight:200;
	font-size:4em;
	text-align:center;
}

.project p{
	padding-bottom:2em;	
}

.item-wrapper{
	float:left;
	height:22rem;
	width:25%;
	position:relative;
	overflow:hidden;
}

.content{
	height:100%;
	background-color:rgba(0,0,0,.5);
	cursor:pointer; 
}

.content h2{
	position:absolute;
	width:70%;
	margin:40% 15% 0;
	text-align:center;
	font-size:2em;
	font-weight:300;
	color:#FFF;
}

.content i{
	position:absolute;
	color:#FFF;
	font-size:2em;
	width:10%;
	margin:30% 45% 0;
	text-align:center

}

.content img{
	width:auto;
	height:22rem;
}

.popup-title {
	position:absolute;
	top:100%;
	width:100%;
	transition: transform 250ms;
	vertical-align: bottom;
}
.popup-title span {
	display:block;
	margin:0;
	background-color:#000;
	padding:1em;
	color:#FFF;
	opacity:.7
}

.item-wrapper:hover .popup-title {
  transform:translateY(-100%);
}


@media only screen and (max-width: 1400px){

.item-wrapper{
	width:33.33%;
}	
}

@media only screen and (max-width: 1000px){

.item-wrapper{
	width:50%;
}	
}


@media only screen and (max-width: 600px){

.item-wrapper{
	width:100%;
}

.content h2{
	margin:30% 15% 0;
}

.content i{
	margin:22.5% 45% 0;
}

.content img{
	width:100%;
	height:22rem;
}
}




@media only screen and (max-width: 480px){
	
.project{
	padding:3% 0 0
}

.project h1{
	line-height:.9em;
	font-size:2.8em
}


.content h2{
	margin:52.5% 15% 0;
}

.content i{
	margin:40% 45% 0;
}

.content img{
	width:auto;
	height:22rem;
}




}