/*
Index Style
*/
/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Lato:400,300,700,900');
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
/* === fontawesome === */
@import url('font-awesome.css');
/* ==== overwrite bootstrap standard ==== */


@import url('../js/animate.css');

/*===========================
  Portfolio
============================ */
/* --- section heading --- */
.section-header {
	text-align: center;
}
.section-header h2.section-heading {
	text-transform: capitalize;
	font-weight: 700;
}

#section-works {
	margin-top:30px;
	margin-bottom:30px;	
}

nav#filter a {
	background-color: #EEE;
	color:#555;	
}

nav#filter a:hover, nav#filter a.current {
	background-color: #428bca;
	color:#fff;
}

.isotopeWrapper article{
    margin-bottom: 30px;
    margin-right: 0px;
}

#portfolio img  {
	width:100%;
}

#portfolio article p {
	margin-bottom:1.45em;/*set next row on the baseline*/
}
nav#filter {
	margin-bottom:1.5em;
}

nav#filter li {
	display:inline-block;
	margin:0 0 0 5px;
}
nav#filter a {
	padding: 4px 12px;
	line-height: 20px;
	text-decoration: none;
}
nav#filter ul {
	margin-top:30px;
}

.portfolio-items article img {width:100%;} 

.portfolio-item {
	display: block;
	position: relative;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.portfolio-item img {
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;

}
.portfolio-item .portfolio-desc {
    display: block;
    opacity: 0;
    position: absolute;
    width: 100%;
	left: 0;
	top: 0;
	color: rgba(220, 220, 220);
}

.portfolio-item:hover .portfolio-desc {
	padding-top: 20%;
	height: 100%;
    transition: all 200ms ease-in-out 0s;
	opacity: 1;
}

.portfolio-item .portfolio-desc a {
	color: #fff;
	font-size: small;
}
.portfolio-item .portfolio-desc a:hover {
	/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
	text-decoration: none;	
}
.portfolio-item .portfolio-desc i:hover {
	color:#fff;	
}
.portfolio-item .portfolio-desc .folio-info {
	top: -20px;
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	height: 0;
	opacity: 0;
	position: relative;
	margin-top: 0px;
}

.portfolio-item:hover .folio-info{
    height: 100%;
    opacity: 1;
    transition: all 500ms ease-in-out 0s;
    top: 0px;
    background-color: #cb1103;
    text-align: center;
}

.portfolio-item .portfolio-desc .folio-info h5 {
	text-transform: capitalize;
	text-align:center;
}
.portfolio-item .portfolio-desc .folio-info p {
	color: #ffffff;
	font-size: small;
	text-align: left;
}
.bottom-line
{
    margin-top: 20px;
    margin-bottom: 40px;
    border: 0;
    border-top: 0px;
    height: 3px;
    width: 50px;
    background-color: #cb1103;
}

/*===========================
YouTube
============================ */

    .box_srcollbar {
        overflow:auto;
        width:auto;
        height:500px;
        padding:5px;
        background-color:#F9F9F9;
        color:#000;    }