/**
* COMPONENTS
* ----------------------------------------------
*
*   Date: 2014-01-19
*
* Author: Hillsong Digital Team
*
*  Notes: Elements are reuseable components that exists all over the site
*         including styles for things such as:
*         - Responsive Columns
*         - Buttons
*         - Carousels
*
*/

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

/*
//---------------------------------------
// Button
//---------------------------------------
*/

.button,
input[type=submit] {
	font-size: 13px;
	line-height: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .2em;
	text-decoration: none;
	text-align: center;

	cursor: pointer;
	display: inline-block;
	position: relative;

	background: transparent;
	color: #898989;

	border-width: 2px;
	border-style: solid;
	border-color: rgba(137,137,137,0.5);

	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 25px;
	padding-left: 25px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 25px;

	-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;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.button:hover,
input[type=submit]:hover { border-color: rgba(170, 144, 85, 1); color: #898989; }

.button[disabled=disabled] { color: #ebebeb; border-color: #ebebeb; }

.button.purchase {
	background: #3E7DA7;
	color: #fff;
	border: 2px solid #3E7DA7;
	border-bottom: 2px solid #005481;
}
.button.purchase:hover {
	background: #2C8EB7;
	border: 2px solid #2C8EB7;
	border-bottom: 2px solid #3E7DA7;
}

.button + .button { margin-left: 16px; }
.button + .button:first-child { margin-left: 0px; }

/*
//---------------------------------------
// Fluid Videos & Images (Mobile)
//---------------------------------------
*/

.fluid {
	width: 100%;
	max-width: 100%;
	height: auto;
}


.fluidVideo {
	position: relative;
	padding-bottom: 48.25%; /*52.25%; *//* 16:9 */
	padding-top: 25px;
	height: 0;
	max-width: 100%;
	margin: 0 auto;
}

.fluidVideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fluid-width-video-wrapper { width: 100%; margin: 0 auto; } /* Removes Black Bars on sides */




/* Fluid Video Specific Media Querie Fix */
@media only screen and (min-width: 420px){
	.fluidVideo { padding-bottom: 51.25%; }
}


/*
//---------------------------------------
// Responsive Grid System (Mobile)
//---------------------------------------
*/
.grid { clear: both; padding: 0px; margin: 0px; margin-bottom: 30px; }
.grid:last-child { margin-bottom: 0px; }

.col { display: block; float:left; /*margin: 1% 0 0% 1.6%;*/ margin: 0px 0 30px 1.6%; }
.col:last-child { margin-bottom: 0px; }
.col p:last-child { margin-bottom: 0px; }

.row:before, .row:after { content:""; display:table; }
.row:after { clear:both; }

.colspan_1_of_1,
.colspan_2_of_2,
.colspan_1_of_2,
.colspan_3_of_3,
.colspan_2_of_3,
.colspan_1_of_3,
.colspan_4_of_4,
.colspan_3_of_4,
.colspan_2_of_4,
.colspan_1_of_4,
.colspan_5_of_5,
.colspan_4_of_5,
.colspan_3_of_5,
.colspan_2_of_5,
.colspan_1_of_5,
.colspan_6_of_6,
.colspan_5_of_6,
.colspan_4_of_6,
.colspan_3_of_6,
.colspan_2_of_6,
.colspan_1_of_6 {width: 100%; margin-left: 0; }

/*
//---------------------------------------
// Float Grid
//---------------------------------------
*/

.float-grid { clear: both; padding: 0px; margin: 0px; margin-bottom: 30px; }
.float-grid:last-child { margin-bottom: 0px; }

.column { display: block; float:left; margin: 3.6% 0 0% 3.6%; margin-bottom: 20px; }
.colspan-1-of-1,
.colspan-1-of-2,
.colspan-1-of-3 { width: 100%; margin-left: 0; }

.colspan-1-of-4 { width: 48.2%; }
.colspan-1-of-4:nth-child(odd){ margin-left: 0px; }

/*
//---------------------------------------
// Shadow (Mobile)
//---------------------------------------
*/
.shadow {
	-webkit-box-shadow: 0 0 3px #666;
	-moz-box-shadow: 0 0 3px #666;
	box-shadow: 0 0 3px #666;
}

/*
//---------------------------------------
// Clearfix (Mobile)
//---------------------------------------
*/
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*
//---------------------------------------
// Show & Hides (Mobile)
//---------------------------------------
*/
.hideonmobileshowontabletinline { display: none !important; }
.hideonmobileshowontabletblock { display: none !important; }
.hideonmobileshowondefaultinline { display: none !important; }
.hideonmobileshowondefaultblock { display: none !important; }

.hideontabletshowonmobileinline { display: inline !important; }
.hideontabletshowonmobileblock { display: block !important; }

.hide { display: none; }

/*
//---------------------------------------
// Ellipsis
//---------------------------------------
*/
.ellipsis {
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

/*
//---------------------------------------
// Responsive Tables
//---------------------------------------
*/

.table-row {}
.table-cell {
	display: inline-block;
	padding-top: 6px;
	padding-bottom: 6px;
}


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

	/*
	//---------------------------------------
	// Responsive Grid System (Tablet)
	//---------------------------------------
	*/
	.grid { clear: both; padding: 0px; margin: 0px; margin-bottom: 33px; }
	.grid:last-child { margin-bottom: 0px; }

	.col { display: block; float:left; margin: 1% 0 0% 5.6%; }
	.col:first-child { margin-left: 0; }

	.colspan_2_of_2 { width: 100%; }
	.colspan_1_of_2 { width: 47.2%; }

	.colspan_3_of_3 { width: 100%; }
	.colspan_2_of_3 { width: 64.8%; }
	.colspan_1_of_3 { width: 29.6%; }

	.colspan_4_of_4 { width: 100%; }
	.colspan_3_of_4 { width: 73.6%; }
	.colspan_2_of_4 { width: 47.2%; }
	.colspan_1_of_4 { width: 20.8%; }

	.colspan_5_of_5 { width: 100%; }
	.colspan_4_of_5 { width: 78.88%; }
	.colspan_3_of_5 { width: 57.76%; }
	.colspan_2_of_5 { width: 36.64%; }
	.colspan_1_of_5 { width: 15.52%; }

	.colspan_6_of_6 { width: 100%; }
	.colspan_5_of_6 { width: 82.4%; }
	.colspan_4_of_6 { width: 64.8%; }
	.colspan_3_of_6 { width: 47.2%; }
	.colspan_2_of_6 { width: 29.6%; }
	.colspan_1_of_6 { width: 12%; }

	.row:before, .row:after { content:""; display:table; }
	.row:after { clear:both; }


	/*
	//---------------------------------------
	// Float Grid
	//---------------------------------------
	*/

	.float-grid { clear: both; padding: 0px; margin: 0px; margin-bottom: 33px; }
	.float-grid:last-child { margin-bottom: 0px; }

	.column { display: block; float:left; margin: 3.6% 0 0% 3.6%; }
	.column:first-child { margin-left: 0; }

	.colspan-1-of-1 { width: 100%; }
	.colspan-1-of-2 { width: 48.2%; }
	.colspan-1-of-2:nth-child(odd){ margin-left: 0px; }

	/* 4 in a row */
	.colspan-1-of-4 { width: 22.3%; }
	.colspan-1-of-4:nth-child(odd){ margin-left: 3.6%; }
	.colspan-1-of-4:nth-child(4n + 1){ margin-left: 0px; }
	.colspan-1-of-4:first-child{ margin-left: 0px; }


	/*
	//---------------------------------------
	// Show & Hides (Tablet)
	//---------------------------------------
	*/
	.hideonmobileshowontabletinline { display: inline !important; }
	.hideonmobileshowontabletblock { display: block !important; }

	.hideontabletshowonmobileinline { display: none !important; }
	.hideontabletshowonmobileblock { display: none !important; }


	/*
	//---------------------------------------
	// SLIDESHOWS // Column Rows Slideshow (Tablet)
	//---------------------------------------
	*/
	/*.slideshowwrap .slideshow { width: 83%; }
	.slideshowPrevButton,
	.slideshowNextButton { display: block; }*/

}


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

	/*
	//---------------------------------------
	// Float Grid
	//---------------------------------------
	*/



	/*
	//---------------------------------------
	// Fluid Videos (Mobile)
	//---------------------------------------
	*/

	.fluidVideo { padding-bottom: 53.25%; }

	/*
	//---------------------------------------
	// SLIDESHOWS // Column Rows Slideshow (Default)
	//---------------------------------------
	*/

	/*.slideshowwrap .slideshow { width: 85%; }*/


	/*
	//---------------------------------------
	// Show & Hides (Default)
	//---------------------------------------
	*/
	.hideonmobileshowondefaultinline { display: inline !important; }
	.hideonmobileshowondefaultblock { display: block !important; }


}

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

}

/*
//====================================================================
//
// For Giving
//
//====================================================================
*/
.page-id-5840 .multibutton span, .page-id-5840 .multibutton .button, .page-id-5840 .multibutton a{
	width:100% !important;
	display:block !important;
	margin: 5px 0 !important;
}