/**************************************************************************
Name:			CTAs.css
Description:	Styling for cta sections.
Date Created: 	02.06.2020 Brynn Chivers
Modified:
**************************************************************************/


.ctaContainer
{
	background-image:		url(/images/pattern2016.jpg);
	background-position:	left top;
	background-repeat:		repeat;
	background-size:		500px 499px;
	color:					#ccc;
	font-size:				17px;
	margin-top:				0;
	padding:				30px 0px 40px 0px;

	width: 100%;

	-webkit-box-ordinal-group: 7;
	-ms-flex-order: 6;
	order: 6;

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

.ctaWrapper
{
	max-width: 1400px;
	width: 100%;
}

.ctaContainer div.column.span_1_1
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}


.ctaContainer div.grid div.ctaGroup2 div.span_1_1
{
	border-left: 10px solid transparent;
}

.ctaContainer div.span_1_2, .ctaContainer div.span_1_2 div.span_1_1
{
	overflow: visible;
}

.ctaContainer div.span_1_2 div.span_1_1
{
	position: relative;
}

.ctaContainer div.rightRule
{
	background-color:	#999;
	height:				100%;
	margin-right:		-20px;
	position:			absolute;
	right:				0;
	top:				0;
	width:				1px;
}

.ctaContainer div.leftRule
{
	background-color:	#999;
	height:				100%;
	left:				0;
	margin-left:		-21px;
	position:			absolute;
	top:				0;
	width:				1px;
}

html.lt-ie8 .ctaContainer div.span_1_1
{
	width: 98%;
}

html.lt-ie8 .ctaContainer div.ctaBlock
{
	width: 48%;
}

.ctaContainer h1
{
	color: #FFFFFF;
}

.ctaContainer h3
{
	color:			#FFFFFF;
	font-family:	"acumin-pro-condensed-n7","acumin-pro-condensed",sans-serif;
	font-size:		50px;
	font-style:		normal;
	font-weight:	400;
	line-height:	66px;
	margin-bottom:	10px;
	margin-top:		0;
}

.ctaContainer h4,
.ctaContainer p
{
	margin-bottom:	15px;
	margin-top:		 0;

	font-family: aller;
	color: #CCCCCC;
	font-size: 17px;
	line-height: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .17px;
}

.ctaContainer p
{
	margin-bottom: 20px;
	text-transform: none;
}

.ctaContainer div.featureText a
{
	color:				#74B6D8;
	font-size:			20px;
	line-height: 		25px;
	font-weight:		bold;
	text-decoration: 	none;

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

.ctaContainer div.featureText a:hover
{
	color: #99d5f4;
}

div.ctaBlock
{
	float:			left !important;
	margin-top:		10px;
	margin-bottom:	10px;
}

.ctaContainer div.featureText
{
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-flex-line-pack: start;
	    align-content: flex-start;
	height: 100%;
}

.ctaContainer div.featureText *
{
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	        flex: 0 0 100%;
}

.grid div.ctaBlock.left
{
	border-left: 0;
}

.grid div.ctaBlock.column.right
{
	border-right: 0;
}

div.outdoor
{
	cursor: pointer;
}

a.cta, div.outdoor div.outdoor-padding
{
	background-color:		#fff;
	display:				block;
	color:					#333;
	font-size:				17px;
	padding:				17px 20px;
	padding-top: 			0;
	overflow:				hidden;
	text-decoration:		none;
	position:				relative;
	border-radius:		 	5px;

	-webkit-box-sizing: 			border-box;

	        box-sizing: 			border-box;
}

a.cta
{
	position: relative;
	-webkit-transform: rotateX(0);
		-ms-transform: rotateX(0);
			transform: rotateX(0);

	-webkit-transition: -webkit-transform 0.7s ease-out;
	transition: -webkit-transform 0.7s ease-out;
	-o-transition: transform 0.7s ease-out;
	transition: transform 0.7s ease-out;
	transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
}
a.cta:hover
{
	text-decoration: none;
}

a.cta .cta-back
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 40px;

	background-color: #3895c5;
	color: #fff;

	-webkit-transform: rotateX(-180deg);
		-ms-transform: rotateX(-180deg);
			transform: rotateX(-180deg);

	-webkit-transition: opacity .3s ease-in;
	-o-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;

	opacity: 0;

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

div.cta-hov-content.soft-hov a.cta .cta-back
{
	opacity: 1;
}

a.cta h1,
div.outdoor h1
{
	font-family:	"acumin-pro-condensed-n7","acumin-pro-condensed",sans-serif;
	color:			#000000;
	font-size:		50px;
	line-height: 	66px;
	font-weight:	400;
	margin-bottom:	44px;
	overflow:		hidden;
	-o-text-overflow:	ellipsis;
	   text-overflow:	ellipsis;
	text-transform:	none;
	white-space:	nowrap;
}

.ctaContainer div.ctaBlock input.ctaEdit
{
	background-color: #838383;
	border: 2px solid #838383;
	border-radius:		0 0 0 0;
	color:						#FFFFFF;
	float:						right;
	font-size:				12px;
	font-weight:			bold;
	height:					 26px;
	margin:					 0px 0px 5px 0px;
	min-width:				45px;
	outline:					medium none;
	padding:					0;
}

a.ctaGreen
{
	background-color: #007550;
	position: relative;
}

a.ctaGreen, a.ctaGreen h1
{
	color: #ffffff;
}

a.cta .bgText
{
	font-family: "acumin-pro-condensed-n9","acumin-pro-condensed",sans-serif;
	line-height: 60px;
	font-size:	 88px;
	font-style:	normal;
	font-weight: 900;

	position:		absolute;
	right:			 2px;
	bottom:			0px;
	color:			 #999999;
	color:			 rgba(51, 51, 51, 0.3);
}

a.cta.ctaGreen .bgText
{
	color:			 #2a6452;
	color:			 rgba(51, 51, 51, 0.3);
}

div.cta-hov-content.soft-hov a.cta
{
	-webkit-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
			transform: rotateX(180deg);

	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-o-transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955), -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

div.outdoor
{
	background-repeat:	 no-repeat;
	background-position: top center;
	border-radius: 5px;
	background-size: cover;

	-webkit-transform: rotateX(0);
		-ms-transform: rotateX(0);
			transform: rotateX(0);

	-webkit-transition: -webkit-transform 0.7s ease-out;
	transition: -webkit-transform 0.7s ease-out;
	-o-transition: transform 0.7s ease-out;
	transition: transform 0.7s ease-out;
	transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
}

div.cta-hov-content.soft-hov div.outdoor
{
	-webkit-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
			transform: rotateX(180deg);

	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-o-transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955), -webkit-transform 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

div.outdoor div.outdoor-padding
{
	background-color: transparent;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,	rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear,	left top, left bottom,	from(rgba(0,0,0,0.65)),color-stop(40%, rgba(0,0,0,0)),to(rgba(0,0,0,0)));
	background: linear-gradient(to bottom,	rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%); /* W3C */
	border: 0 !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
	height: 100%;
	width: 100%;
	min-height: 185px;
	padding-bottom: 0px;
	padding-top: 0px;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

div.outdoor h1
{
	color: #fff;
}

div.outdoor .cta-back
{
	background-color: #3895c5;
	border:					 0;
	color:						#fff;
	font-size:				40px;
	text-align: center;
	position:				 absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 5px;

	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
	box-shadow:				 2px 2px 2px rgba(0, 0, 0, 0.75);

	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);

	opacity: 0;

	-webkit-transition: opacity .3s ease-in;
	-o-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;

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

div.cta-hov-content.soft-hov div.outdoor .cta-back
{
	opacity: 1;
}

@media only screen and ( max-width: 1200px )
{
	div.ctaBlock a.cta h1, div.outdoor h1
	{
		font-size: 33px;
		margin-bottom: 50px;
	}

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

	div.ctaBlock.left
	{
		border-left: 0;
	}
}

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

	div.ctaBlock a.cta h1, div.outdoor h1
	{
		font-size: 31px;
		margin-bottom: 44px;
	}

	div.ctaBlock a.cta
	{
		font-size: 15px;
	}
}

@media only screen and ( max-width: 1000px )
{
	.ctaContainer div.span_1_1 h3
	{
		font-size: 45px;
	}

	div.ctaBlock a.cta h1, div.outdoor h1
	{
		font-size: 29px;
		margin-bottom: 38px;
	}

	div.ctaBlock a.cta
	{
		font-size: 12px;
	}
}


@media only screen and ( max-width: 900px )
{
	.ctaContainer div.span_1_1 h3
	{
		font-size: 40px;
	}

	div.ctaBlock a.cta h1
	{
		font-size: 27px;
		margin-bottom: 32px;
	}

	div.ctaBlock a.cta
	{
		font-size: 12px;
	}
}

@media only screen and ( max-width: 880px )
{
	div.ctaBlock a.cta h1
	{
		font-size: 25px;
		margin-bottom: 28px;
	}

	div.ctaBlock a.cta
	{
		font-size: 12px;
	}
}


@media only screen and ( max-width: 850px )
{
	.ctaContainer div.column.span_1_1
	{
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
	}
	.ctaFeatures .ctaGroup1,
	.ctaFeatures .ctaGroup2
	{
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 50% 50%;
		grid-template-columns: 50% 50%;
	}
	div.ctaBlock
	{
		border: none;
		margin: 0;
		padding: 5px;
		float: none !important;
		width: initial;
	}

	div.ctaBlock a.cta h1, div.outdoor h1
	{
		font-size: 35px;
		margin-bottom: 57px;
	}

	div.ctaBlock a.cta
	{
		font-size: 17px;
	}
}


@media only screen and ( max-width: 768px )
{
	.ctaContainer .grid
	{
		width: inherit;
	}

	.ctaFeatures .ctaGroup1,
	.ctaFeatures .ctaGroup2
	{
		-ms-grid-columns: 100%;
		grid-template-columns: 100%;
	}
	.ctaContainer div.span_1_2,
	.ctaContainer div.span_1_2 div.span_1_1
	{
		overflow: hidden;
	}

	.ctaContainer .span_1_2
	{
		width: 100%;
	}
/*
	html.lt-ie8 .ctaContainer div.ctaBlock.span_1_2
	{
		width: 48% !important;
	}*/

	.ctaContainer div.rightRule,
	.ctaContainer div.leftRule
	{
		display: none;
	}
}


@media only screen and ( max-width: 600px )
{
	div.ctaBlock a.cta h1,
	div.outdoor h1
	{
		line-height: 50px;
		margin-bottom: 30px;
	}
	.ctaContainer a.cta p
	{
		margin-bottom: 48px;
	}
	a.cta .cta-back
	{
		font-size: 30px;
	}

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

@media only screen and ( max-width: 568px )
{
	a.cta,
	div.outdoor
	{
		height: 185px !important;
	}
}

@media only screen and ( max-width: 400px )
{
	.ctaContainer .ctaFeatures .ctaGroup1,
	.ctaContainer .ctaFeatures .ctaGroup2
	{
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}
}