header.tall {
	height:536px;
}

header #title {
	position: relative;
	z-index: 10;
	height: 50px;
}

header #title h2 {
	padding-left: 65px;
	background: url(../img/logo-ywam.png) no-repeat 15px 16px;
}

header #tile-wrapper {
	z-index: 0;
	width: 150%;
	margin-left: -25%;
}

header #tiles {
 	margin-left: auto;
	margin-right: auto;
	position: relative;
 }

header #tiles #featured-bg {

	max-width: 960px;
	width: 100%;
	height: 536px;

	margin: 0 auto;

	position: relative;
	z-index: 2;

	-webkit-box-shadow: 0px 0px 100px 30px hsla(240, 100%, 0%, 0.75);
			box-shadow: 0px 0px 100px 30px hsla(240, 100%, 0%, 0.75);

}

header.tall #tiles #featured-bg {
	height: 698px;
}

header #tiles .tile {
	width: 270px;
	height: 172px;
	background:  #222 !important;
	position: relative;
	z-index: 1;

	opacity: 0.2;
	overflow: hidden;
}

header.tall #tiles .tile, header.single #tiles .tile  {
	width: 270px;
	height: 160px;
	background:  #222 !important;
	position: relative;
	z-index: 1;

	opacity: 0.2;
	overflow: hidden;
}

header #tiles .tile img {
	position: relative;
}

header #tiles .tile:hover {
	height: 172px;
	opacity: 1;
}
header.tall #tiles .tile:hover, header.single #tiles .tile:hover {
	height: 160px;
	opacity: 1;
}

header #tiles .tile:hover p {
	opacity: 1;
}

header #tiles .tile.featured {
	opacity: 1;
	z-index: 3;
	top: -112px !important;
}

header #tiles .tile.large {
	height: 346px;
	width: 686px;
}

header.tall #tiles .tile.large {
	height: 484px;
}

header.single #tiles .tile.large {
	width: 960px;
		height: 325px !important;
}

header #tiles .tile p {

	display: block;
	
	color: #fff;
	font-size: 20px;
	
	position:absolute;
		left: 0;
		right: 0;
		bottom: -10px;

	padding: 15px;
	padding-top: 15%; /*More room for the gradient!*/
	padding-bottom: 25px;
	opacity: 0;

	text-shadow: 0 0 5px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=0);

	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 10%, rgba(0,0,0,0) 16%, rgba(0,0,0,0.7) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(0,0,0,0)), color-stop(16%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 10%,rgba(0,0,0,0) 16%,rgba(0,0,0,0.7) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 10%,rgba(0,0,0,0) 16%,rgba(0,0,0,0.7) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 10%,rgba(0,0,0,0) 16%,rgba(0,0,0,0.7) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 10%,rgba(0,0,0,0) 16%,rgba(0,0,0,0.7) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 );

	-webkit-transition: all 0.8s ease-out;
	   -moz-transition: all 0.8s ease-out;
		-ms-transition: all 0.8s ease-out;
		 -o-transition: all 0.8s ease-out;
			transition: all 0.8s ease-out;

}

header #tiles .large p {
	font-size: 30px;
}

header.tall #tiles .large p {

	font-size: 30px;
	line-height: 35px;
	font-weight: 600;

	text-transform: uppercase;

}

header #tiles .tile.featured p {
	opacity: 1;
}

header.single #tiles .tile p {
	opacity: 1;
}


@media (max-width: 960px) {
 

header #tiles #featured-bg {

	max-width: 750px;
	width: 100%;
	height: 536px;

	margin: 0 auto;

	position: relative;
	z-index: 2;

	-webkit-box-shadow: 0px 0px 100px 30px hsla(240, 100%, 0%, 0.75);
			box-shadow: 0px 0px 100px 30px hsla(240, 100%, 0%, 0.75);

}

header.tall #tiles #featured-bg {
	height: 698px;
}

header #tiles .tile {
	width: 165px;
	height: 160px;
	background:  #222 !important;
	position: relative;
	z-index: 1;

	opacity: 0.2;
	overflow: hidden;
}

header #tiles .tile img {
	position: relative;
}

header #tiles .tile:hover {
	height: 160px;
	opacity: 1;
}

header #tiles .tile:hover p {
	opacity: 1;
}

header #tiles .tile.featured {
	opacity: 1;
	z-index: 3;
	top: -112px !important;
}

header #tiles .tile.large {
	height: 481px;
	width: 580px;
}

header.tall #tiles .tile.large {
	height: 484px;
}

header.single #tiles .tile.large {
	width: 960px;

}

}
/*Isotope animationsz*/
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: all;
     -moz-transition-property: all;
      -ms-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}