/********************************************
 
This is a new CSS file, started on 8/12/19
All updates past this date should be made in this file.

The purpose of this file is to have a clean slate to 
start more modern updates and move away from the old site's style.

********************************************/

/********************************************
 
Nav - Skip To Content

********************************************/

	#skip_to_content{
		opacity: 0;
		height: 1px;
		width: 100%;
		display: block;
		text-align: center;

	}
	#skip_to_content:focus{
		height: auto;
		opacity: 1;
	}


/********************************************
 
Media Center

********************************************/
	
	/***** Hero ******/
		.basic_hero.media_center{
			/*height: 675px;*/
		}

		.media.hero_banner{
			background-color: #E43E31;
			text-align: center;
			margin: 50px 0;
		}
		.media.hero_banner>h1{
			color: #fff;
			padding: 35px 35px;
			font-size: 65px;
		}

		.media.hero_banner>p{
			color: #fff;
			padding: 35px 35px;
			font-size: 35px;
		}

		.media.hero_banner.home{
			background-color: #e43e31;
			text-align: center;
			margin: 50px 0;
		}
		.media.hero_banner.home>h1{
			color: #fff;
			padding: 15px 35px;
			font-size: 34px;
		}
	


	/***** Filter ******/
		.media_1>.container{
			max-width: 1450px;
			padding: 30px;
		}
		.media_1>.container>h1{
			font-size: 32px;
			color: #028acb;
			font-weight: bold;
			margin-bottom: 40px;
			display: inline-block;
		}
		.media_1>.container>.copy{
			padding: 0px 0px 35px;
			max-width: 1000px;
			margin: auto;
		}
		.media_1>.container>.copy>p{
			font-size: 24px;
			line-height: 28px;
			text-align: center;
		}

		.media_1 .wrapper{
			display: flex;
			justify-content: space-between;
			align-items: center;

		}
		
		/***** Search ******/
			.media_1 .wrapper>.search{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex:2;
			}
			.media_1 .wrapper>.search>input[type="text"]{
				width: 100%;
				max-width: 540px;
				height: 45px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 12px;
				box-sizing: border-box;
				border:solid 1px #adadac;
				margin-right: 15px;
			}
			.media_1 .wrapper>.search>input[type="submit"]{
				width: 100%;
				max-width: 135px;
				height: 45px;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				font-size: 24px !important;
			}

		/***** Categories ******/
			.media_1 .wrapper>.categories>select{
				font-size: 24px;
				font-weight: 600;
				color: #028acb;
				border:none;
				border-bottom: solid 1px #adadac;
				height: 45px;
			}

	/***** Media Center Results ******/
		.media_grid #results{
			display: flex;
			flex-wrap: wrap;
			max-width: 1450px;
			padding-right: 20px;
			padding-left: 20px;
		}
	

		/***** Media Center form ******/
			.media_grid #results>.media_center_form{
				width: 66.666%;
				position: relative;
				overflow:hidden;
				padding: 15px;
				box-sizing: border-box;
			}
			.media_grid #results>.media_center_form>.inner{
				background-color: #a5d06f;
				height: 100%;
				width: 100%;
				box-sizing: border-box;
				padding: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.media_grid #results>.media_center_form>.inner>.image{
				width: 250px;
			}

		/***** Content ******/
			.media_grid #results>.media_center_form>.inner>.content{
				width: calc(100% - 250px);
				padding-left: 30px;
				box-sizing: border-box;
			}
			.media_grid #results>.media_center_form>.inner>.content>.copy>.headline{
			    color: #fff;
			    font-size: 28px;
			    line-height: 32px;
			    font-weight: 600;
			    margin-bottom: 3px;
			    padding: 15px;
			    /*padding-bottom: 0px;*/
			    background: #007cbc;
			    display: inline-block;
			}
			.media_grid #results>.media_center_form>.inner>.content>.copy>.body{
				color: #fff;
				font-size: 18px;
				line-height: 20px;
				margin-bottom: 25px;
				background: #007cbc;
				padding: 15px;
				
				display: inline-block;
			}

		/***** Form ******/
			.media_grid #results>.media_center_form>.inner>.content>form{
				display: flex;
			}
			.media_grid #results>.media_center_form>.inner>.content>form>div{
				display: flex;
				flex-direction: column;
				width: 100%;
			}
			.media_grid #results>.media_center_form>.inner>.content>form>div:first-of-type{
				padding-right: 15px;
			}
			.media_grid #results>.media_center_form>.inner>.content>form>div>input[type="text"]{
				border: none;
				margin-bottom: 15px;
				padding: 15px;
			}
			.media_grid #results>.media_center_form>.inner>.content>form>div>input[type="submit"]{
				display: inline-block;
				background-color:#007cbc !important; 
				align-self: flex-start;
				margin-top: 15px;
			}
			.media_grid #results>.media_center_form>.inner>.content>form>div>textarea{
				height: 100%;
				padding: 15px;
				border: none;
			}

		/***** Load More button ******/

			.more_media{
				margin: 50px auto;
				display: inline-block;
			}




		/***** Text-based posts ******/
			.media_grid #results>.post_preview{
				width: 33.333%;
				position: relative;
				overflow:hidden;
				padding: 15px;
				box-sizing: border-box;
			}

			.media_grid #results>.post_preview>.inner{
				background-color: #007cbc;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				height: 100%;
				box-sizing: border-box;
			}
			.media_grid #results>.post_preview>.inner>.copy{
				padding: 60px 20px 15px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				height: calc(100% - 250px);
				width: 100%;
				box-sizing: border-box;
			}
			.media_grid #results>.post_preview.pr_post>.inner>.copy{
				align-items: center;
				justify-content: center;
				height: 100%;
				padding: 15px;
			}
			.media_grid #results>.post_preview>.inner>.copy>h5{
				color: #fff;
				font-size: 28px;
				padding-bottom: 15px;
				border-bottom: solid 3px #a6d06f;
			}
			.media_grid #results>.post_preview>.inner>.copy>p{
				color: #fff;
				font-size: 18px;
				line-height: 20px;
				
				padding-bottom: 20px;
				padding-top: 15px;
			}
			.media_grid #results>.post_preview>.inner>.copy>a{
				display: inline-block;
			}
			.media_grid #results>.post_preview>.inner>.copy>a{
				border-bottom: solid 3px #a6d06f;
				background-color: #007cbc !important;
				padding: 8px 5px 5px;
				
				
			}
			.media_grid #results>.post_preview>.inner>.copy>a:hover{
				background-color: #a6d06f !important;
			}


			.media_grid #results>.post_preview>.inner>.image{
				width: 100%;
				height: 238px;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: top center;
			}
			.media_grid #results>.post_preview>.inner>.icon{
				position: absolute;
				top: -10px;
				right: -10px;
				height: 65px;
				width:65px;
				border-radius: 100%;
				display:flex;
				justify-content: center;
				align-items: center;
				background-color: #E43E31;
				color: #fff;
				font-size: 36px;
			}
			.media_grid #results>.post_preview>.inner>.icon>.fa-play{
				color: #fff;
				position: relative;
				top: 2px;
				left: 3px;
			}

		/***** Video posts ******/	
			.media_grid #results>.post_preview.video_post{
				min-height: 400px;
			}
			.media_grid #results>.post_preview.video_post>.inner{
				height: 100%;
				justify-content: center;
				border-bottom: none;
			}
			.media_grid #results>.post_preview.video_post>.inner>.video-popup{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.media_grid #results>.post_preview.video_post>.inner>.overlay{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(0,0,0,.45);
				z-index: 11;
				height: 100%;
				width: 100%;
				cursor: pointer;
				transition: .25s ease-in-out;
				padding: 15px;
				box-sizing: border-box;
				pointer-events: none;
			}
			.media_grid #results>.post_preview.video_post>.inner:hover>.overlay{
				background-color: rgba(0,0,0,.25);
			}
			.media_grid #results>.post_preview.video_post>.inner>.overlay>h5{
				color: #fff;
	    		font-size: 24px;
	    		padding-bottom: 15px;
	    		text-align: center;
			}
			.media_grid #results>.post_preview.video_post>.inner>.overlay>img{
				height: 55px;
				width: 55px;
				transition: .25s ease-in-out;
			}
			.media_grid #results>.post_preview.video_post>.inner:hover>.overlay>img{
				transform: scale(1.15);
			}



/********************************************
 
New Home Slider

********************************************/
	.home_1 .swiper-wrapper{
		height: 650px;
		
	}
	.home_swiper .swiper-slide{
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.home_swiper .swiper-slide>.content{
		display: inline-flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		box-sizing: border-box;
		padding:50px 35px;
		max-width: 1250px;
	}

	.home_swiper .swiper-slide>.content a:hover{
		text-decoration: underline;
	}

	.home_swiper .swiper-slide>.content>.green{
		background-color: #a6d06f;
	}
	.home_swiper .swiper-slide>.content>.blue{
		background-color: #007cbc;
	}
	.home_swiper .swiper-slide>.content>.red{
		background-color: #e43e31;
	}
	.home_swiper .swiper-slide>.content>.headline{
		margin-bottom: 20px;
		display: block;
	}
	.home_swiper .swiper-slide>.content>.headline>p{
		font-size: 41pt;
		line-height: 45pt;
		font-weight: 700;
		min-height: 56px;
		padding: 8px 15px;
		border-bottom: solid 5px transparent;
	}
	/*.home_swiper .swiper-slide>.content>.headline:hover>p{
		border-bottom: solid 5px #fff;
	}*/
	.home_swiper .swiper-slide>.content>.subhead>p{
		font-size: 18pt;
		font-weight: 700;
		line-height: 20pt;
		max-width: 585px;
		padding: 8px 15px;
		border-bottom: solid 5px transparent;
	}
	/*.home_swiper .swiper-slide>.content>.subhead:hover>p{
		border-bottom: solid 5px #fff;
	}*/

	.home_swiper .swiper-button-next,
	.home_swiper .swiper-button-prev{
		background-image: none;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 80px;
		padding: 15px;
		text-shadow: 
			2px 0px 5px #000,
			0px 2px 5px #000,
			-2px 0px 5px #000,
			0px -2px 5px #000;
	}

	.home_swiper .swiper-pagination{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.home_swiper .swiper-pagination-bullet{
		transition: .25s ease-in-out;
		opacity: 1;
		background-color: #fff;
	}
	.home_swiper .swiper-pagination-bullet-active{
		transform: scale(1.5);
		background-color: #007cbc;
	}

	.home_2 .container{
		max-width: 1450px;
		padding-right: 35px;
		padding-left: 35px;
		margin-bottom: 50px;
	}

	.media_grid .container{
		max-width: 1450px;
		padding-right: 35px;
		padding-left: 35px;
		margin-bottom: 50px;
	}



/********************************************
 
Homepage zipcode search

********************************************/
	.zip_box {
		background-color: #A5D06F;
		padding: 25px 30px 30px;
		color: white;
		font-size: 18pt;
		font-weight: 700;
		position: relative;
		
		max-width: 425px;
		float:right;
		display: flex;
		justify-content: center;
	}

	.zip_box > div > form {
		margin-top: 10px;

	}

	.zip_box > div > form > input[type=text] {
		padding: 5px 15px;
		font-size: 14pt;
		width: 155px;
		box-sizing: border-box;
		border: none;
		border-top: solid 3px #fff;
		border-bottom: solid 3px #fff;
		margin-right: 15px;
	}

	.zip_box .btn{
		padding-bottom: 9px;
	}



/********************************************
 
Homepage media center

********************************************/

	.blog{
		background-color: #007cbc;
	}

	.blog .btn_small{
		border-bottom: solid 3px #a6d06f;
		padding: 5px 15px;
		padding-left: 0;
		transition: .25s ease-in-out;
	}
	.blog .btn_small:hover{
		padding-right: 25px;
		background-color: #007cbc !important;
	}



/********************************************
 
Schedule a Tour page/form

********************************************/

	#fran_form > div > input, 
	#fran_form > div > select, 
	#fran_form > div > textarea{
		background-color: #fff;
		border-bottom: solid 5px #007cbc;
		color: #4a4a4a;
		box-shadow:
		  0 0.6px 2.2px rgba(0, 0, 0, 0.02),
		  0 1.3px 5.3px rgba(0, 0, 0, 0.028),
		  0 2.5px 10px rgba(0, 0, 0, 0.035),
		  0 4.5px 17.9px rgba(0, 0, 0, 0.042),
		  0 8.4px 33.4px rgba(0, 0, 0, 0.05),
		  0 20px 80px rgba(0, 0, 0, 0.07)
		;

	}

	#fran_form .btn{
		background-color: #007cbc !important;
		border: solid 5px #007cbc !important;
		padding: 11px 27px !important;
	}
	#fran_form .btn:hover{
		border: solid 5px #a6d06f !important;
	}
	#fran_form > h5{
		width: calc(100% - 15px);
		margin: 5px auto;
		position: relative;
		left: -2px;
		font-size: 24px;
	}
	#fran_form > hr{
		background-color: #a6d06f;
		height: 5px;
		width: calc(100% - 15px);
		margin: 0px auto 15px;
		position: relative;
		left: -2px;
	}




/********************************************
 
Notification Banner

********************************************/

	@keyframes notification_load {
	  0%   { max-height: 0px; }
	  100% { max-height: 300px; }
	}


	#notification_banner{
		background-color: #e43e31;
		color: #fff;
		display: block;
		border-bottom: solid 3px #fff;
		max-height: 0px;
		animation: notification_load 1s ease forwards;
		animation-delay: .5s;
		overflow: hidden;
		position: relative;
		z-index: 10;
	}

	#notification_banner.hide{
		animation: notification_load 1s ease backwards;
		animation-delay: .5s;
	}
	#notification_banner>.close{
		position: absolute;
		top: 5px;
		right: 15px;
		font-size: 1.6rem;
		padding: 5px;
		cursor: pointer;
	}
	#notification_banner>.container{
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		padding-top: 35px;
		padding-bottom: 35px;
	}
	#notification_banner>.container>.title{
		font-size: 32px;
		font-weight: 600;
		padding: 0px 15px 15px;
		margin-bottom: 5px;
		border-bottom: solid 1px #fff;
		display: inline-block;
	}
	#notification_banner>.container>.body{
		font-size: 20px;
		line-height: 24px;
		font-weight: 500;
	}


/********************************************
 
Locator Page

********************************************/
	.locator_1 #location_form .submit>button:hover{
		text-decoration: underline;
	}

/********************************************
 
Careers Page

********************************************/

	.careers_page.disclaimer>.container>.back_to_top{
		width: auto;
		height: auto;
		color: #fff;
		padding: 10px;
	}

/********************************************
 
ADA

********************************************/
	/***** Form Labels *****/
		.--ada_form_label{
			display: block;
			opacity: 0;
			height: 1px;
			margin-bottom: -1px;
			z-index: -1;
			pointer-events: none;
		}