/**
* HEADER
* ----------------------------------------------
*
*   Date: 2014-01-08
*
* Author: Hillsong Digital Team
*
*  Notes: The Header is a component that renders the header elements
*         including:
*         - Background
*         - Titles
*         - Social Media
*         - Promos
*
*/


/*
//====================================================================
//
// MOBILE / SMALL SCREEN (0px - 480px)
//
//====================================================================
*/



/*
//---------------------------------------
// Header Defaults and Backgrounds
//---------------------------------------
*/

.header {
	background-attachment: scroll;
	background-repeat: no-repeat;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	background-position: center center;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: relative;

	/* ORIGINAL
	padding-top: 50px;
	padding-bottom: 50px;
	*/
	padding-top: 100px;
	padding-bottom: 100px;

}

.featured-header { }

.header-container .header {
	/* Fills up the height of the screen */
	height: 100vh;
	background-attachment: fixed;
}

.imageblock-container .header {
	/* Fills up the width of the screen, retains aspect ratio */
	width: 100vw;
	min-height: 700px;
	background-attachment: fixed;
}

.android .header-container .header,
.ios .header-container .header,
.android .imageblock-container .header,
.ios .imageblock-container .header{
	background-attachment: scroll;
}

.header .title.image {
	max-width: 85vw;
	text-align:center;
}

.header .title.image img {
	max-width: 700px;
}

.header .title { max-width: 85vw; }
/*
//---------------------------------------
// Title
//---------------------------------------
*/


.header .title {
	position: relative;
	z-index: 500;

	-webkit-animation: fadeup 0.4s ease-out;
	-moz-animation: fadeup 0.4s ease-out;
	-ms-animation: fadeup 0.4s ease-out;
	-o-animation: fadeup 0.4s ease-out;
	animation: fadeup 0.4s ease-out;
}

.header .title h1 {
	font-weight: 700;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	margin-top: 10px;
	text-transform: uppercase;
	/*Gotham*/
	letter-spacing: -0.02em;
	margin-top: -4px; /* counter line height */
}

.featured-header .title h1 { font-size: 29px; line-height: 29px; text-transform: none; }


.header .title.longtext h1 {
	font-size: 35px;
	line-height: 35px;
}


.header .title.topoffset { margin-top: 16px; }

.header .title.image { margin: 0 auto; }
.header .title.image a {
	opacity: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.header .title.image a:hover { opacity: 0.75; }

.header .title.image img {
	width: 100%;
	/*max-width: 100%;*/
	height: auto;
}

.header.portrait-title-image { padding-top: 50px; padding-bottom: 50px; }
.header.portrait-title-image .title.image { max-width: 180px; }

.header .subtitle {
	margin-top: 8px;
	position: relative;
	z-index: 500;

	-webkit-animation: fadeup 0.6s ease-out;
	-moz-animation: fadeup 0.6s ease-out;
	-ms-animation: fadeup 0.6s ease-out;
	-o-animation: fadeup 0.6s ease-out;
	animation: fadeup 0.6s ease-out;
}

.header .subtitle.smalltext { max-width: 400px; margin: 0 auto;  margin-top: 8px; }

.header .subtitle h2 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
.featured-header .subtitle h2 { font-size: 13px; line-height: 16px;  }

.header .subtitle:last-child { margin-bottom: 20px; }

.header .subtitle.smalltext h2 {
	font-size: 16px;
	line-height: 22px;
}

.header.longtext .subtitle { display: none; }


/*
//------------------------
// Button
//------------------------
*/
.header .rowbutton {
	margin-top: 14px;
	position: relative;
	z-index: 500;

	-webkit-animation: fadeup 0.8s ease-out;
	-moz-animation: fadeup 0.8s ease-out;
	-ms-animation: fadeup 0.8s ease-out;
	-o-animation: fadeup 0.8s ease-out;
	animation: fadeup 0.8s ease-out;
}
.header .rowbutton .button {
	color: #fff; border-color: rgba(255,255,255,1);
}
.header .rowbutton .button:nth-of-type(n+1) { margin-top: 15px; }
.header .rowbutton .button:hover { border-color: rgba(255,255,255,0.5); }

/*
//------------------------
// Social
//------------------------
*/

.social {
	text-align: center;
	/*margin-bottom: 0px;*/
	/*margin-top: 15px;*/
	position: absolute;
	bottom: 15vh;
	width: 100%;
	z-index: 2;
}

.imageblock-container .social {
	bottom: 100px;
}

.imageblock-container .social {
	bottom: 100px;
}

.social a {
	display: inline-block;
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease-out;
}

.social a:hover { opacity: 1; }

.social a span {
	position: relative;
	float: left;
	display: inline;
	margin: 0 5px;
	text-indent: -9999em;
	width: 30px;
	height: 30px;
	line-height: 40px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	-ms-behavior: url(img/backgroundsize.min.htc);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.social .twitter span { background-image: url(img/social-twitter-transparent@2x.png); }
.social .facebook span { background-image: url(img/social-facebook-transparent@2x.png); }
.social .instagram span { background-image: url(img/social-instagram-transparent@2x.png); }
.social .youtube span { background-image: url(img/social-youtube-transparent@2x.png); }
.social .podcast span {background-image: url(img/social-podcast-transparent@2x.png);}


/*
//------------------------
// SUBPAGE HEADER
//------------------------
*/
.subpage-header {}

.subpage-header a {
	-webkit-transition: all 0.4s ease 0s;
	-moz-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}

.subpage-header .section-row { padding-top: 0px; padding-bottom: 0px; }

.subpage-header-details { margin-top: 20px !important; }

.subpage-header-image img { width: 100%; height: auto; }

.subpage-header .rowtitles { margin-top: -10px; margin-bottom: 15px; }
.subpage-header .rowtitle { color: #898989; }
.subpage-header .rowsubtitle { color: #464646; }

.subpage-header .info { color: #898989; margin-bottom: 20px; }

.subpage-header .icon { font-size: inherit; margin-left: 0px; margin-right: 0px; }


.subpage-header .info .avatar {
	width: 45px;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	opacity: 1;
	-webkit-transition: all 0.4s ease 0s;
	-moz-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}

.subpage-header .info .avatar:hover { opacity: 0.75; }

.subpage-header .info .avatar img { width: 100%; height: auto; }

.subpage-header .info .person {
	display: inline-block;
	vertical-align: middle;
	margin-left: 13px;
}

.subpage-header .info .more { display: none; }


.subpage-header .info .name { font-weight: 700; }
.subpage-header .info .name a { color: #898989;}
.subpage-header .info .name a:hover { color: #464646; }
.subpage-header .info .time { font-weight: 300; position: relative; top:-2px; }

.subpage-header .eventdetails { margin-bottom: 0px; }

.subpage-header .item  { display: inline-block; margin-right: 15px; }
.subpage-header .item:last-child { margin-right: 0px; }
.subpage-header .item .icon { margin-right: 5px }

.subpage-header .details { margin-bottom: 20px; }
.subpage-header .details a { color: #898989; }

.event .subpage-header .address .icon { font-size: 18px; }
.event .subpage-header .calendar-text { font-weight: 700; font-size: 15px; line-height: 20px; }

.single-post .subpage-header + .section-wrap .section-row { padding-top: 0px; }

/*
//---------------------------------------
// Header With Video
//---------------------------------------
*/

.headerwithvideo .headervideo {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: 100%;
	background-size: cover;
	z-index: 0;
}
.firefox .headerwithvideo .headervideo { height: auto; }

/*
//---------------------------------------
// Header Slideshow
//---------------------------------------
*/

.headerwithslideshowbg .headerslideshowcontainer {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: 100%;
	background-size: cover;
}

.headerslideshowwrap, .headerslideshow, .headerslide {
	position: absolute;
	top: 0px !important;
	bottom: 0px;
	width: 100%;
	background-size: cover;
}

.headerwithslideshowbg .slideshowControlDotsWrap,
.headerwithslideshowbg .slideshowPrevButton,
.headerwithslideshowbg .slideshowNextButton { display: none; }


/*
.headerslideshow { position: absolute; top: 0px; }
.headerslideshow .headerslide {
	z-index: 0 !important;
	background-attachment: scroll;
	background-repeat: no-repeat;

	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

	background-position: center bottom;
	opacity: 0;
	display: none;

}

.headerslideshow .headerslide:first-child { opacity: 1; display: block; }


.headerwithslideshow,
.headerwithslideshow .headerslide { min-height: 300px !important; height: 300px; }

.headerwithslideshow .slideshowControlDotsWrap { position: absolute; bottom: 0px; width: 100%; }
.headerwithslideshow .slideshowControlDotsWrap .slideshow-dots { color: #fff; }

.headerwithslideshow .headerslide .title { margin-top: 20px; }
.headerwithslideshow .headerslide .title h1 { font-size: 29px; line-height: 29px; }

.headerwithslideshow .headerslide .subtitle { margin-top: 2px; }
.headerwithslideshow .headerslide .subtitle h2 { font-size: 13px; line-height: 16px; }

.headerwithslideshow .headerslide .rowbutton { margin-top: 14px; }
.headerwithslideshow .headerslide .rowbutton .button { color: #fff; border-color: rgba(255,255,255,0.5); }
.headerwithslideshow .headerslide .rowbutton .button:hover { border-color: rgba(255,255,255,1); }

.headerwithslideshow .slideshowPrevButton { left: 0px; top:15px; background: url('../img/pagination-previous.png') 50% 50% no-repeat; z-index: 500; display: none; }
.headerwithslideshow .slideshowNextButton { right: 0px; top:15px; background: url('../img/pagination-next.png') 50% 50% no-repeat; z-index: 500; display: none; }

.headerwithslideshowbg .slideshowPrevButton { display: none; }
.headerwithslideshowbg .slideshowNextButton { display: none; }
.headerwithslideshowbg .slideshowControlDotsWrap { display: none; }

.headerslideshow { width: 100%; }
.headerslideshow .headerslide { width: 100%; }
*/
/*
//====================================================================
//
// TABLET (Bigger than 767px )
//
//====================================================================
*/
@media only screen and (min-width: 767px) {

	.header {
		/*ORIGINAL
		padding-top: 150px;
		padding-bottom: 150px;
		*/
		/*padding-top: 100px;
		padding-bottom: 100px;*/
	}

	.header .title { /*max-width: 700px;*/ margin:0 auto;}

	.header .title h1 { font-size: 60px; line-height: 60px; margin-top: -6px; }

	.header .title.topoffset, .headertwo .title.image.topoffset { margin-top: 125px; }
	/*.header .title.image { max-width: 600px; margin-top: 30px; margin-bottom: 20px; }*/

	.header.portrait-title-image { padding-top: 80px; padding-bottom: 80px; }
	.header.portrait-title-image .title.image { max-width: 230px; }

	.header .subtitle { margin-top: 8px; }
	.header .subtitle:last-child { margin-bottom: 0px; }

	.header .subtitle h2 { font-size:32px; line-height: 40px; }

	.header .rowbutton { margin-top: 16px; }

	.featured-header .title { width: 755px; margin: 0 auto; }
	.featured-header .title h1 { font-size: 50px; line-height: 50px; }
	.featured-header .subtitle h2 { font-size: 30px; line-height: 30px; }

	/*.featured-header-long-title { padding-top: 180px; padding-bottom: 180px; }*/

	/*
	//------------------------
	// Social
	//------------------------
	*/
	/*.social { bottom: 180px; position: absolute; margin-bottom: 15px;  }*/
	.social a span { width: 40px; height: 40px; }


	/*
	//------------------------
	// Subpage Header
	//------------------------
	*/

	.subpage-header-details { margin-top: 50px !important; padding-top: 0px !important; padding-bottom: 0px !important; }
	.subpage-header .rowtitles { margin: 0 auto; margin-bottom: 20px; max-width: 800px;width: auto; }
	.subpage-header .info { margin-bottom: 40px; }
	.subpage-header .info .more { display: inline; }
	.subpage-header .eventdetails { margin-bottom: -15px; }
	.subpage-header .details { margin-bottom: 40px; }

	/*
	//---------------------------------------
	// Header Video
	//---------------------------------------
	*/
	.headerwithvideo .headervideo { display: block; }

	/*
	//---------------------------------------
	// Header Slideshow
	//---------------------------------------
	*/

	/*.headerwithslideshow .headerslide .title { margin-top: 20px; }
	.headerwithslideshow .headerslide .title h1 { font-size: 50px; line-height: 50px; }

	.headerwithslideshow .headerslide .subtitle { margin-top: 13px; }
	.headerwithslideshow .headerslide .subtitle h2 { font-size: 30px; line-height: 30px; }

	.headerwithslideshow .headerslide .rowbutton { margin-top: 40px; }


	.headerwithslideshow .slideshowPrevButton { display: block; left: 20px; }
	.headerwithslideshow .slideshowNextButton { display: block; right: 20px; }
	.headerwithslideshowbg .slideshowPrevButton { display: none; }
	.headerwithslideshowbg .slideshowNextButton { display: none; }
	*/


}

/*
//====================================================================
//
// DEFAULT (Bigger than 979px )
//
//====================================================================
*/
@media only screen and (min-width: 979px) {

	/*.header .title { max-width: 900px; }*/

	.header .title h1 { font-size: 75px; line-height: 75px; }

	/*.header .title.image { max-width: 700px; margin-top: 30px; margin-bottom: 20px; }*/

	.header.portrait-title-image .title.image { max-width: 300px; }

	.featured-header .title { width: 755px; margin:0 auto; }
	.featured-header .title h1 { font-size: 60px; line-height: 60px; }
	.featured-header .subtitle h2 { font-size: 36px; line-height: 36px; }

	.headerwithvideo .headervideo { height: auto; }

	.header.featured-header-long-title .title h1 { font-size: 60px; line-height: 60px; }

	/*
	.headerwithslideshow .headerslide .title h1 { font-size: 75px; line-height: 75px; }
	.headerwithslideshow .headerslide .subtitle h2 { font-size: 36px; line-height: 36px; }
	.headerwithslideshow .headerslide .rowbutton { margin-top: 70px; }

	.headerwithslideshow .slideshowPrevButton { left: 50px; top:-32px; }
	.headerwithslideshow .slideshowNextButton { right: 50px; top:-32px; }
	*/

}

/*
//====================================================================
//
// LARGE SCREEN ( Bigger than 1199px )
//
//====================================================================
*/
@media only screen and (min-width:1199px){

	/*.header .title { max-width: 1190px; }*/

	.headerwithvideo .headervideo { height: auto; }

	/*.headerwithslideshow .slideshowPrevButton { left: 100px; }
	.headerwithslideshow .slideshowNextButton { right: 100px;  }

	.headerwithvideo .headervideo { height: auto; }	*/

}



/*
//====================================================================
//
// EXTRA LARGE
//
//====================================================================
*/

@media only screen and  (min-height:1100px) and (min-width:979px) {

}


/* Width Fixes */
@media only screen and (min-width:1680px) {

	/*.headerwithslideshow .headerslide .logo { margin-top: 165px; }

	.headerwithslideshow .slideshowPrevButton { left: 300px; }
	.headerwithslideshow .slideshowNextButton { right: 300px;  }*/
}

@media only screen and (min-width:1800px) {

	.header {
		/*ORIGINAL
		padding-top: 200px;
		padding-bottom: 200px;
		*/
		padding-bottom: 300px;
	}

	.header .topoffset { margin-top: 50px; }

	/*.header .title h1 { font-size: 100px; line-height: 100px; }*/

	/*.header .title.image { max-width: 800px;  margin-top: 50px; margin-bottom: 40px; }*/

	.header .subtitle h2 { font-size: 44px; line-height: 50px; }

	.featured-header .title { width: 1200px; }

	/*.headerwithslideshow .headerslide .title h1 { font-size: 100px; line-height: 100px; }
	.headerwithslideshow .headerslide .subtitle { margin-top: 30px; }

	.headerwithslideshow .slideshowPrevButton { left: 300px; top:-45px; }
	.headerwithslideshow .slideshowNextButton { right: 300px; top:-45px; }*/


}

@media only screen and (min-width:1900px) {

	/*.headerwithslideshow .headerslide .logo { margin-top: 215px; }
	.headerwithslideshow .headerslide .title h1 { font-size: 125px; line-height: 125px; }

	.headerwithslideshow .slideshowPrevButton { left: 300px; top:-34px; }
	.headerwithslideshow .slideshowNextButton { right: 300px; top:-34px; }*/

}

@media only screen and (min-width:2400px){

	/*.headerwithslideshow .slideshowPrevButton { left: 500px; top:-82px; }
	.headerwithslideshow .slideshowNextButton { right: 500px; top:-82px; }*/

}

/*temp fix for menu */
@media only screen and (max-width: 766px){
.header .title {
    z-index:0;
}
}