html {
	background-color: black;
	
}
.navbar {
	z-index:1 !important;
	}
.videoSnippet{
	font-size: 12px !important;
	}

.animation.ng-enter {
  animation: fadeInUp 1.5s;
  -webkit-animation: fadeInUp 1.5s;
  -moz-animation: fadeInUp 1.5s;
  -ms-animation: fadeInUp 1.5s;
}

.animation.ng-leave {
  animation: fadeInUp 1s;
  -webkit-animation: fadeInUp 1s;
  -moz-animation: fadeInUp 1s;
  -ms-animation: fadeInUp 1s;
}

.videoCategory { 
	font-size: 12px !important;
	color: #BBB;
	}
.text-glow { 
	color:#fff;
	text-shadow: 1px 1px 20px #000, 1px 1px 3px #444;
}
.pad10 {
	padding-top: 10px;
	}
.navbar-inverse .navbar-brand {
	color: #CCC;
	}
.navbar-inverse .navbar-nav > li > a {
	color: #CCC;
	}	

body {
	padding-top: 50px !important;
}
.navbar-right > li > a, .navbar-right > li > a:visited { color: #CCC;
	} 
.navbar-right > li > a:hover, .navbar-right > li > a:focus{ color: #FFF !important;
	} 

.navbar {
	background-color: black;
    margin-bottom: 0px;
}
.navbar-brand
{
  font-size: 14px !important;
}
.navbar-right{
	font-size: 12px !important;
	}

body {
	color: #CCC;
	padding-top: 0px;
	background-color: black;
	font-family: 'Open Sans', sans-serif;
	/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

img {
	border: 5px solid black;
    margin-left: auto;
    margin-right: auto;
		-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.col-md-6, .col-sm-12, .col-lg-4{
	padding:0px;
}

.hovereffect {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}

.hovereffect .overlay {
	position: absolute;
	overflow: hidden;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 40%;
	-webkit-transition: opacity 2s, -webkit-transform 0.70s;
	transition: opacity 2s;
	-webkit-transform: scale(0,1);
	-ms-transform: scale(0,1);
	transform: scale(0,1);
}

@media only screen and (max-width: 960px) {
	.hovereffect .overlay {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	.videoCategory { 
	font-size: 12px !important;
	color: #BBB;
	}
	img {
	-webkit-filter: grayscale(0%) !important;
	filter: grayscale(0%) !important;
	}
}

.hovereffect:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.hovereffect img {
	display: block;
	position: relative;
	-webkit-transition: all 0.70s;
	transition: all 0.70s;
}

.hovereffect:hover img{
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	-ms-transform:scale(1.03);
	-webkit-transform:scale(1.03);
	transform:scale(1.03);


}

.hovereffect h2 {
	text-transform: uppercase;
	text-align: center;
	position: relative;
	font-size: 22px;
	background-color: transparent;
	color: #FFF;
	padding: 1em 0;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: opacity 2s;
}

.hovereffect a, hovereffect p {
	color: #FFF;
	padding: 1em 0;
	opacity: 1;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.70s, -webkit-transform 0.70s;
	transition: opacity 2s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
}