<!-- Our portfolio -->

.portfolio,
.portfolio_title,
.portfolio_filter,
.portfolio_categories,
.search,
#searchForm,
#container,
#main,
.input,
.portfolio_list,
.portfolio_list li,
.portfolio_list img,
.mix,
.p {
  
  margin: 0;
  padding: 0;
  
}
	
.portfolio {
  
display: block;
padding-top: 70px;
padding-bottom: 100px;
background-color: #11749e;
width: auto;
text-align: center;
  
}

.p {

position: absolute;
font-family: 'Roboto Condensed', sans-serif;
line-height: 210px;
font-weight: bold;
font-size: 247px;
color: #3c8daf;
text-align: center;
text-transform: uppercase;
margin-left: -70px;

}

.portfolio_title {

position: relative;
font-family: 'Gotham Medium', sans-serif;
 color: #fff;
  font-weight: normal;
  font-size: 37px;
  line-height: 45px;
  text-transform: uppercase;
  padding-top: 78px;
  
}


.portfolio_categories {
  
  padding: 50px;
  
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  
}

.portfolio_filter {
  
  display: inline-block;
  margin: 0 5px;
  
  font-family: 'Gotham Medium', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 32px;
  text-transform: capitalize;
  color: #fff;
  
}

.portfolio_filter input[type="radio"] {
  
  display: none;
  
}

.portfolio_filter span {
  
  display: inline-block;
 padding: 2px 20px;
  border: 1px solid #ebebeb;
  box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
  
}

.portfolio_filter:hover span,
.portfolio_filter input[type="radio"]:checked + span {
  
  border-color: #3c8daf;
  background-color: #3c8daf;
  color: #fff;
  
}

/*-------------
SEARCH
-------------*/

#container {
     width:300px;
    height:100%;
    position:relative;
    display: block;
    float: right;
    vertical-align: baseline;
}

#main {
    width:300px;
    position:absolute;
    top:50%;
    margin:-10px 0 -120px 0;
   
}


#searchForm fieldset {
    width:300px;
    position:relative;
    display:block;
    border: none;

}

div.input {
    width:150px;
    padding:5px 15px 7px 15px;
    border-radius:20px;
    border:1px solid #c6d2db;
    border-top:1px solid #b4c1cb;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
    float:right;
    background:#e8edf1;
}

div.input.focus {
        border:1px solid #9ecbe2;
        box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);
    }

input#s {
    width:100%;
    border:0;
    border-radius:20px;
    background:transparent;
    height:16px;
    color:#b4bdc4;
    text-shadow:0 1px 1px #fff;
}

input#s:focus {
        outline:none
    }

input#searchSubmit {
     width:25px;
    height:25px;
    text-indent:-9999px;
    overflow:hidden;
    background:url(../img/search-icon.png) no-repeat;
    border:0;
    position:absolute;
    top:13px; right:13px;
    z-index:15;
    display:block;
    cursor:pointer;
}



.portfolio_list {
  padding-top: 15px;
  
}

.portfolio_list li {
	list-style-type: none;
	display: inline-block;
	width: 300px;
	position: relative; 
	height: 200px;
	overflow: hidden;
}

.portfolio_list img {
 max-width: 100%;
  height: auto;
 display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
margin: 0 auto;


}

.portfolio_name {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
color: #fff;
padding-top: 80px;
text-align: center;
opacity: 0;
transition: all .5s;
transform: scale(0) rotate(90deg);
}


.portfolio_list li:hover .portfolio_name {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}




<!-- /Our portfolio -->