/**************************************************************************
Name:			buttons.css
Description:	Styling for page buttons that navigate to the
				individual show pages and internal pages.
Date Created: 	02.04.2020 Brynn Chivers
Modified:
**************************************************************************/
.landingpageButtonContainer
{
	width: 100%;
	margin-bottom:	10px;
	margin-top:		-170px;
	padding:		0;
	position:		relative;
	z-index:		7;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	font-family: aller;
	font-weight: 400;
}

.landingButtonTile
{
	margin: 				0 30px;
	width: 					255px;
	min-height: 			155px;
	max-width: 				25%;
	padding: 				0;
	background-color: 		rgba(255, 255, 255, .8);
	border-radius: 			5px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	-webkit-transition: background-color .25s;
	-o-transition: background-color .25s;
	transition: background-color .25s;
}

.landingButtonTile .mainLink
{
	color:			#014832;
	-o-text-overflow:	ellipsis;
	   text-overflow:	ellipsis;
	white-space:	nowrap;
	width: 			100%;
	-webkit-box-flex: 			1;
	    -ms-flex: 			1 0 100%;
	        flex: 			1 0 100%;

	display: 		-webkit-box;

	display: 		-ms-flexbox;

	display: 		flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: 	center;
	    -ms-flex-align: 	center;
	        align-items: 	center;
}

.landingButtonTile .mainLink:hover,
.landingButtonTile .mainLink:active
{
	text-decoration: none;
}

.landingButtonTile h2
{
	font-size:		36px;
	line-height: 	42px;
	letter-spacing: .36px;
	font-weight: 400;

	margin: 10px 0px;
}

.landingButtonTile:hover,
.landingButtonTile:active
{
	background-color: rgba(255, 255, 255, .9);
}

.landingButtonTile .buttonDate
{
	color: 			#000000;
	font-size: 		18px;
	line-height: 	30px;
	letter-spacing: .18px;

	-webkit-transition: font-size .25s;

	-o-transition: font-size .25s;

	transition: font-size .25s;
}

.landingpageButtonContainer .actionBar
{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding:	0 2px;
	display: 	-webkit-box;
	display: 	-ms-flexbox;
	display: 	flex;
	width: 		100%;
}


.landingpageButtonContainer .actionBar .action
{
	background-color: 	#007550;
	color:				#FFFFFF;
	font-size:			18px;
	line-height:		24px;
	letter-spacing: 	.18px;
	font-weight: 		bold;
	text-align:			center;
	-o-text-overflow:		ellipsis;
	   text-overflow:		ellipsis;
	white-space:		nowrap;
	margin: 			3px 1.5px;
	padding:			10px 5px;

	border-radius: 		7px;
	width:				45%;
	-webkit-box-flex: 				1;
	    -ms-flex: 				1 1 45%;
	        flex: 				1 1 45%;
	-webkit-box-sizing: 		border-box;
	        box-sizing: 		border-box;

	-webkit-transition: background-color .25s;
	-o-transition: background-color .25s;
	transition: background-color .25s;
}
.landingpageButtonContainer .actionBar .action:hover,
.landingpageButtonContainer .actionBar .action:active
{
	text-decoration: none;
	background-color: #014832;
}

/* SHOWPAGE BUTTONS */

.showpageButtonContainer
{
	position: absolute;
	right: 0;
	top: 16px;

	width: 66%;
	z-index: 7;
}

.showpageButtonWrapper
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.showpageButton
{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	position: relative;
	padding: 10px 5px;
	margin: 0 5px;
	width: 150px;

	background: transparent -o-linear-gradient(top, #F1F8F6 0%, #C2E3D8 100%) 0% 0% no-repeat padding-box;
	background: transparent -webkit-gradient(linear, left top, left bottom, from(#F1F8F6), to(#C2E3D8)) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(180deg, #F1F8F6 0%, #C2E3D8 100%) 0% 0% no-repeat padding-box;

	background-color: #014832;
	border: 1px solid #018057;
	border-radius: 3px;

	color: #333333;
	cursor: pointer;
	text-align: center;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	-webkit-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
}
.showpageButton:hover
{
	text-decoration: none;
	/*border-radius: 10px;*/
	/*font-size: 18px;*/
	background: #014832;
	border-color: #014832;
	color: #fff;
}

.calendarContainer
{
	-webkit-box-ordinal-group: 11;
	    -ms-flex-order: 10;
	        order: 10;
}

/*************************************************************************
Animations
**************************************************************************/

.landingpageButtonContainer.homepageButtons .landingButtonTile
{
	-webkit-transform:	scale(1.1) rotateX(-90deg);
	-ms-transform:		scale(1.1) rotateX(-90deg);
	transform:			scale(1.1) rotateX(-90deg);

	-webkit-animation:	half-flip-scale .4s 1.65s ease-out both;
	animation:			half-flip-scale .4s 1.65s ease-out both;
}

.landingpageButtonContainer.homepageButtons .landingButtonTile.half-flip-scale-reverse,
.landingpageButtonContainer.homepageButtons .landingButtonTile.half-flip-scale-reverse:nth-of-type(2),
.landingpageButtonContainer.homepageButtons .landingButtonTile.half-flip-scale-reverse:nth-of-type(3),
.landingpageButtonContainer.homepageButtons .landingButtonTile.half-flip-scale-reverse:nth-of-type(4)
{
	-webkit-animation:	half-flip-scale-reverse .4s 0s ease-out both;
	animation:			half-flip-scale-reverse .4s 0s ease-out both;
}

.landingpageButtonContainer.homepageButtons .landingButtonTile:nth-of-type(2) { -webkit-animation-delay: 1.90s; animation-delay: 1.90s; }
.landingpageButtonContainer.homepageButtons .landingButtonTile:nth-of-type(3) { -webkit-animation-delay: 2.15s; animation-delay: 2.15s; }
.landingpageButtonContainer.homepageButtons .landingButtonTile:nth-of-type(4) { -webkit-animation-delay: 2.40s; animation-delay: 2.40s; }

.landingpageButtonContainer.homepageButtons div span.arrow
{
	background-color: 	#333;
	bottom:				0;
	color:				#fff;
	display:			block;
	font-size:			27px;
	font-style:			normal;
	height:				66px;
	left:				0;
	line-height:		66px;
	padding-right:		10px;
	position:			absolute;
	right:				0;
	text-align:			right;

	-moz-border-radius-bottomright: 3px;
	 -moz-border-radius-bottomleft: 3px;
		border-bottom-right-radius: 3px;
		 border-bottom-left-radius: 3px;
}

.landingpageButtonContainer.showPageButton div.span_11_12.forBackBtn
{
	border: 0;
}

.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn
{
	border-left: 10px solid transparent;
}

.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn a
{
	padding: 4px 6px 6px 10px;
}

.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn a h1
{
	line-height: 1.1em;
}

.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn a span.backArrow
{
	font-size:	1.12em;
	font-style: normal;
	color:		#fff;
	position:	absolute;
	bottom:		1px;
	left:		10px;
}

.landingpageButtonContainer.showPageButton div.forBackBtn div
{
	margin:		0;
	padding:	0;
}


.landingpageButtonContainer.videoButton div a,
.landingpageButtonContainer.showPageButton div a
{
	height:				90px;
	background:			#ca8601;
	color:				#ffffff;
	position:			relative;
	cursor:				pointer;
}

.landingpageButtonContainer.showPageButton div a
{
	background:		#3895c5;
}

.landingpageButtonContainer.videoButton div a h1,
.landingpageButtonContainer.showPageButton div a h1
{
	font-size:		1.12em;
	line-height:	1.22;
	white-space:	normal;
	position:		relative;
	z-index:		1;
}

.landingpageButtonContainer.videoButton div a .arrow,
.landingpageButtonContainer.showPageButton div a .arrow
{
	background:		#333;
	color:			#fff;
	font-style:		normal;
	text-align:		right;
	padding:		2px 10px 0 0;
	font-size:		27px;
	line-height:	27px;
	position:		absolute;
	bottom:			0;
	left:			0;
	right:			0;
	top:			60px;
}


div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div a .arrow div.icon
{
	background-position: center center;
	background-repeat: 	 no-repeat;
	background-size: 	 26px 26px;
	display: 			 inline-block;
	height: 			 26px;
	position:			 relative;
	top: 				 6px;
	width:				 26px;
}

.landingpageButtonContainer.videoButton div a input[type="submit"]
{
	background:	transparent;
	color:		transparent;
	border:		none;
	position:	absolute;
	top:		-3px;
	right:		-3px;
	bottom:		-3px;
	left:		-3px;
	z-index:	3;
	border-radius:	3px;
}

@media only screen and ( max-width: 1150px )
{
	.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn a h1
	{
		display: none;
	}
}
@media only screen and ( max-width: 1100px )
{
	.landingpageButtonContainer div a h1
	{
		font-size: 32px;
	}

	.landingpageButtonContainer div a
	{
		font-size:	22px;
	}

	.landingpageButtonContainer.homepageButtons div a span.arrow
	{
		height:			62px;
		line-height:	62px;
	}

	.landingpageButtonContainer div a.action
	{
		font-size:		27px;
		line-height:	50px;
	}
	.landingButtonTile
	{
		margin: 0 10px;
	}
}

@media only screen and ( max-width: 1024px )
{

	/* LANDING PAGE BUTTONS */
		.landingpageButtonContainer div a h1
		{
			font-size: 30px;
		}

		.landingpageButtonContainer div a
		{
			font-size: 20px;
		}

		.landingpageButtonContainer div div.actionBar
		{
		}

		.landingpageButtonContainer.homepageButtons div a span.arrow
		{
			height:			58px;
			line-height: 58px;
		}

		.landingpageButtonContainer div a.action
		{
			font-size:	 25px;
			line-height: 46px;
			height:			46px;
		}

		.landingButtonTile h2
		{
			font-size: 27px;
			line-height: 30px;
		}
		.landingButtonTile .buttonDate
		{
			font-size: 16px;
			line-height: 20px;
		}

	/* SHOW PAGE BUTTONS */
		.showpageButtonContainer
		{
			top: 280px;
			width: 100%;

			display: -webkit-box;

			display: -ms-flexbox;

			display: flex;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
		}

		.interiorMain:not(.showPageMain) .showpageButtonWrapper
		{
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
		}
		.interiorMain:not(.showPageMain) .showpageButton
		{
			margin: 5px;
		}
}

@media only screen and (max-width: 920px)
{
}

@media only screen and ( max-width: 900px )
{
	.landingpageButtonContainer div a h1
	{
		font-size:	 24px;
	}

	.landingpageButtonContainer div a
	{
		font-size: 18px;
	}

	.landingpageButtonContainer div a.action
	{
		font-size: 23px;
	}

	.landingButtonTile {
		margin: 0px 5px;
	}

	/* SHOW PAGE BUTTONS */
		.showpageButtonContainer
		{
			top: 200px;
		}
		.showpageButtonWrapper
		{
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			width: 85%;
		}
		.showpageButton
		{
			margin: 10px 5px;
		}
}


@media only screen and ( max-width: 800px )
{

	.landingpageButtonContainer div a h1
	{
		font-size:	 24px;
	}

	.landingpageButtonContainer div a
	{
		font-size: 16px;
	}

	.landingpageButtonContainer div a.action
	{
		font-size: 20px;
	}
}

@media only screen and ( max-width: 768px )
{
	/* PLACE HERE BECAUSE ITS FOR STYLING THESE BUTTONS */
	.main.section.landingPage
	{
		margin-top: -375px;
	}

	.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn
	{
		width:	8.33%;
		width: calc( 100% / 12 *	1 );
	}

	.landingpageButtonContainer.showPageButton div.span_11_12.forBackBtn
	{
		width: 91.66%;
		width: calc( 100% / 12 * 11 );
 	}


	.landingpageButtonContainer.homepageButtons div.column:nth-of-type(1) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
	.landingpageButtonContainer.homepageButtons div.column:nth-of-type(2) { -webkit-animation-delay: 0.50s; animation-delay: 0.50s; }
	.landingpageButtonContainer.homepageButtons div.column:nth-of-type(3) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
	.landingpageButtonContainer.homepageButtons div.column:nth-of-type(4) { -webkit-animation-delay: 1.00s; animation-delay: 1.00s; }

	.landingpageButtonContainer
	{
		margin-top:		0px;
	}

	.landingpageButtonContainer div.span_1_12,
	.landingpageButtonContainer div.span_1_11,
	.landingpageButtonContainer div.span_1_10,
	.landingpageButtonContainer div.span_1_9,
	.landingpageButtonContainer div.span_1_8,
	.landingpageButtonContainer div.span_1_7,
	.landingpageButtonContainer div.span_1_6,
	.landingpageButtonContainer div.span_1_5,
	.landingpageButtonContainer div.span_1_4,
	.landingpageButtonContainer div.span_1_3,
	.landingpageButtonContainer div.span_1_2,
	.landingpageButtonContainer div.span_1_1
	{
		margin-top: 20px;
		width:			100%;
	}

	.landingpageButtonContainer.homepageButtons div.span_1_4
	{
		margin-bottom: 82px;
		margin-top:		0;
		width: 			 50%;
	}

	.landingpageButtonContainer div a
	{
		font-size: 26px;
		height:		82px;
		padding:	 6px;
	}

	.landingpageButtonContainer div a h1
	{
		font-size:		 38px;
		margin-bottom: 10px;
	}

	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton
	{
		height: auto;
	}

	.landingpageButtonContainer.homepageButtons div.column,
	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column
	{
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}

	.landingpageButtonContainer.homepageButtons div.column.noleftborder	{ border-left:	 0; }
	.landingpageButtonContainer.homepageButtons div.column.norightborder 	{ border-right:	0; }
	.landingpageButtonContainer.homepageButtons div.column.lastRow 		{ margin-bottom: 72px; }

	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column:first-child,
	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column:nth-child(4)
	{
		border-left: 0;
	}

	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column:nth-child(3),
	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column:nth-child(6)
	{
		border-right: 0;
	}

	div.section.main.interiorMain.showPage .landingpageButtonContainer.showPageButton div.column
	{
		margin-top: 10px;
	}

	.landingpageButtonContainer
	{
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}

	.landingButtonTile
	{
		min-width: 40vw;
		height: 100%;
		min-height: 165px;
		height: 165px;
		margin: 9px 15px;
		padding: 0;

		-webkit-box-flex: 0;
		    -ms-flex: 0 1 40vw;
		        flex: 0 1 40vw;
	}

	.landingpageButtonContainer a
	{
		border:			none;
		border-radius:	0;
		-webkit-box-shadow:		none;
		        box-shadow:		none;
		height:			auto;
	}
	.landingButtonTile h2
	{
		font-size:		20px;
		line-height:	23px;
	}

	.landingButtonTile .buttonDate
	{
		font-size:		14px;
		line-height:	20px;
	}

	.landingpageButtonContainer .actionBar
	{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding-bottom: 2px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		-webkit-box-flex: 1;
		    -ms-flex: 1 0 auto;
		        flex: 1 0 auto;
	}
	.landingButtonTile .mainLink
	{
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 100%;
		        flex: 1 1 100%;
	}

	.landingpageButtonContainer .actionBar .action
	{
		font-size: 16px;
		line-height: 16px;

		width: initial;
		height: 35px;
		margin: 2px 4px;
		-webkit-box-flex: 0;
		    -ms-flex: none;
		        flex: none;
	}

	.landingpageButtonContainer.videoButton, .landingpageButtonContainer.showPageButton
	{
		margin-top: 0;
	}

	.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn
	{
		margin-top: 20px;
		width:		100%;
	}

	.landingpageButtonContainer.showPageButton div.span_1_12.forBackBtn a h1
	{
		display: block;
	}

	.landingpageButtonContainer.showPageButton div.span_11_12.forBackBtn
	{
		width: 100%;
	}

	.showpageButtonContainer
	{
		top: -180px;
		z-index: 10;
	}
}

@media only screen and (max-width: 568px)
{
	.showpageButtonWrapper
	{
		width: 95%;
	}
}

@media only screen and (max-width: 400px)
{
	.landingButtonTile
	{
		margin: 9px 5px;
		min-width: 45vw;
		-webkit-box-flex: 0;
		    -ms-flex: 0 1 45vw;
		        flex: 0 1 45vw;
	}


	.showpageButton
	{
		font-size: 14px;
		line-height: 18px;
		width: 130px;
	}

}

/**************************************************************************
Retina-specific Image Replacement
**************************************************************************/
@media
	only screen and ( -webkit-device-pixel-ratio: 2 ),
	only screen and ( -webkit-min-device-pixel-ratio: 2 ),
	only screen and ( -o-min-device-pixel-ratio: 2/1 ),
	only screen and ( min-resolution: 192dpi ),
	only screen and ( -webkit-min-device-pixel-ratio: 2	),
	only screen and ( -o-min-device-pixel-ratio: 2/1	),
	only screen and ( min-resolution: 2dppx	)
{

}