.purple {
		color: #1c355e;
	}
	.red {
		color: #f06b2a;
	}
	.white {
		color: #fff;
	}
	h1, h2, h3, h4, h5 {
		font-family: ff-cocon-pro, sans-serif;
	}
	.homepage {
		background-color: #F8F8F8;
		width: 100%;
		min-height: 32vw;
		box-sizing: border-box;
		padding: 0;
		position: relative;
		overflow: hidden;
		margin-bottom: 30px;
	}
	.homepage .content {
		position: relative;
		z-index: 2;
	}
	.homepage h1, 
	.homepage h2 {
		font-size: 65px;
		line-height: 1;
		margin: 0 0 10px 0;
		font-weight: 400;
	}
	.homepage h3 {
		font-size: 60px;
		line-height: 1;
		margin: 0 0 10px 0;
		font-weight: 400;
	}
	.homepage .homeBoxes {
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		width: 100%;
		box-sizing: border-box;
	}
	.homepage .homeBoxes .homeBox {
		display: block;
		position: relative;
		background-color: #333;
		padding: 40px 30px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.homepage .homeBoxes .homeBox h3 {
		color: #FFF;
		position: relative;
		z-index: 2;
		font-size: 30px;
		margin-bottom: 30px;
	}
	.homepage .homeBoxes .homeBox h4 {
		color: #FFF;
		position: relative;
		z-index: 2;
		margin-bottom: 15px;
		font-size: 18px;
		font-weight: 400;
	}
	.homepage .homeBoxes .homeBox > .bg {
		display: block;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		max-width: none;
		opacity: 0.5;
		transition: opacity 1s;
	}
	.homepage .homeBoxes .homeBox.entered > .bg {
		opacity: 1.0;
	}
	.homepage .homeBoxes .homeBox.newCarDeals {
		width: calc(45% - 6px);
		height: 36vw;
	}
	.homepage .homeBoxes .homeBox.newCarDeals h1 {
		color: #FFF;
		position: relative;
		z-index: 2;
		margin-top: 20px;
	}
	.homepage .homeBoxes .homeBox.newCarDeals h1 span {
		display: block;
	}
	.homepage .homeBoxes .homeBox.newCarDeals h2 {
		color: #FFF;
		position: relative;
		z-index: 2;
		font-size: 30px;
	}
	.homepage .homeBoxes .homeBox.newCarDeals h2 span {
		display: block;
	}
	.homepage .homeBoxes .homeBox.newCarDeals .tickboxes {
		padding: 0;
		list-style: none;
		position: relative;
		z-index: 2;
	}
	.homepage .homeBoxes .homeBox.newCarDeals .tickboxes li {
		padding: 0 0 5px 50px;
		color: #FFF;
		position: relative;
		background: url("img/new25/whiteTick.png") 0px 6px no-repeat;
		background-size: 30px;
		font-family: ff-cocon-pro, sans-serif;
		font-size: 24px;
		font-weight: 400;
		margin-bottom: 2px;
	}
	.homepage .homeBoxes .homeBox.newCarDeals iframe {
		width: 460px;
		height: 220px;
		border: none;
		overflow: hidden;
		position: relative;
		z-index: 2;
		max-width: 60%;
	}
	.homepage .homeBoxes .homeBox.newCarDeals .bg {
		height: 120%;
		width: auto;
		transform: translate(-45%, -50%);
	}
	.homepage .homeBoxes .homeBox .button {
		display: inline-block;
		background-color: #ff5100;
		color: #FFF;
		border: 2px solid #FFF;
		padding: 10px;
		position: relative;
		z-index: 2;
		font-family: ff-cocon-pro, sans-serif;
		transition: all 100ms;
	}
	.homepage .homeBoxes .homeBox .button:hover {
		transform: scale(1.03);
		background: rgba(0,0,0,0.3);
		text-decoration: none;
	}
	.homepage .homeBoxes .homeBox.financeSection {
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		width: 55%;
		height: 36vw;
		flex-wrap: wrap;
		background-color: #FFF;
		padding: 0;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		margin-bottom: 6px;
		height: 44px;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox {
		position: relative;
		width: calc(25% - 4.5px);
		height: 44px;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .navTop {
		position: relative;
		background-color: #ff5100;
		color: #FFF;
		width: 100%;
		height: 44px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		font-family: ff-cocon-pro, sans-serif;
		z-index: 2;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .navTop:hover {
		background-color: #F07E55;
		text-decoration: none;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .navTop img {
		margin-left: 5px;
		transition: transform 300ms;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox.open .navTop img {
		transform: rotate(180deg);
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown {
		transition: max-height 300ms;
		max-height: 0px;
		overflow-y: hidden;
		position: absolute;
		top: 44px;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 100;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox.open .financeDropdown {
		max-height: 1000px;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown > div, 
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown > span, 
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown > a {
		text-decoration: none;
		background-color: #ff5100;
		color: #FFF;
		width: 100%;
		height: 44px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		font-family: ff-cocon-pro, sans-serif;
		z-index: 2;
		
		&:hover {
			background-color: #F07E55;
			text-decoration: none;
		}
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown.budgetSearch {
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown.bodyTypeSearch {
		background-color: #FFF;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
	}
	.homepage .homeBoxes .homeBox.financeSection .financeNav .financeNavBox .financeDropdown.bodyTypeSearch > a {
		background-color: #FFF;
		color: #ff5100;
		display: block;
		width: 50%;
		padding: 10px;
		box-sizing: border-box;
	}

	.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals {
		width: calc(50% - 3px);
		height: calc(18vw - 5px);
		margin-bottom: 6px;
	}
	.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals .bg {
		height: 100%;
		width: auto;
	}
	.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing {
		width: calc(50% - 3px);
		height: calc(18vw - 5px);
		margin-bottom: 6px;
	}
	.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing .bg {
		height: 120%;
		width: auto;
	}
	.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing {
		width: calc(33.33% - 4px);
		height: calc(18vw - 1px);
	}
	.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing .bg {
		height: 100%;
		width: auto;
	}
	.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide {
		width: calc(33.33% - 4px);
		height: calc(18vw - 1px);
	}
	.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide .bg {
		height: 100%;
		width: auto;
	}
	.homepage .homeBoxes .homeBox.financeSection .inStockDeals {
		width: calc(33.33% - 4px);
		height: calc(18vw - 1px);
	}
	.homepage .homeBoxes .homeBox.financeSection .inStockDeals .bg {
		height: 100%;
		width: auto;
	}
	.popupBox {
		color: #FFF;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 10000;
		transform: translate(-50%,-50%);
		width: 800px;
		height: auto;
		overflow: hidden;
		max-width: calc(100% - 60px);
		padding: 0px;
		box-sizing: border-box;
		display: none;
		border-radius: 40px;
	}
	.popupBox a.close {
		position: absolute;
		top: 10px;
		right: 20px;
		width: 30px;
		font-size: 30px;
		text-align: center;
		color: #FFF;
		opacity: 1.0;
		z-index: 101;
	}
	@media screen and (max-width: 640px){
		.popupBox a.close {
			top: 10px;
			right: 20px;
			width: 20px;
			font-size: 20px;
		}
	}
	.popupBox a.close:hover {
		opacity: 0.8;
	}
	.popupBox .content {
		position: relative;
		z-index: 100;
		width: 100%;
	}
	.popupBox .content .movie, 
	.popupBox .content .movie video {
		display: block;
		text-decoration: none;
		width: 100%;
		height: auto;
	}
	.hasVidBox .tickBox {
		width: 390px;
		border: 1px solid #1c355e;
		border-radius: 20px;
		background-color: #FFF;
		padding: 10px 10px 0px 10px;
	}
	
	.financeBoxes {
		width: 90%;
		margin: 40px auto;
		display: flex;
		justify-content: space-between;
	}
	.financeBoxes .homeBox {
		width: 25%;
		height: 28vw;
		box-sizing: border-box;
		border-radius: 10px;
		border: 10px solid #FFF;
		display: block;
		position: relative;
		background-color: #333;
		padding: 50px 50px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.financeBoxes .homeBox h3 {
		color: #000000;
		position: relative;
		z-index: 2;
		font-size: 40px;
		margin: 10px 0 15px 0;
	}
	.financeBoxes .homeBox p {
		margin-bottom: 15px;
		font-size: 18px;
		font-family: ff-cocon-pro, sans-serif;
		color: #484848;
		position: relative;
		z-index: 2;
		min-height: 100px;
		width: 90%;
	}
	.financeBoxes .homeBox .button {
		display: inline-block;
		background-color: #ff5100;
		color: #FFF;
		border: 2px solid #FFF;
		padding: 10px 40px 10px 10px;
		position: relative;
		z-index: 2;
		font-family: ff-cocon-pro, sans-serif;
		transition: all 100ms;
	}
	.financeBoxes .homeBox .button:hover {
		color: #fff;
		transition: all 100ms;
		transform: scale(1.03);
		background: rgba(0,0,0,0.3);
		text-decoration: none;
	}
	.financeBoxes .homeBox .button span {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
	}
	.financeBoxes .homeBox .bg {
		display: block;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 101%;
		min-height: 100%;
		max-width: none;
		opacity: 1;
	}
	
	
	@media screen and (max-width: 2270px){
		.financeBoxes .homeBox p {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 2200px){
		.homepage .homeBoxes .homeBox.newCarDeals h1 {
			font-size: 55px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals h2 {
			font-size: 26px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals .tickboxes li {
			font-size: 20px;
			background-size: 26px;
		}
	}
	@media screen and (max-width: 1880px){
		.homepage .homeBoxes .homeBox.newCarDeals h1 {
			font-size: 45px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals h2 {
			font-size: 24px;
		}
		.homepage .homeBoxes .homeBox h3 {
			font-size: 26px;
		}
		.homepage .homeBoxes .homeBox h4 {
			font-size: 16px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals .tickboxes li {
			font-size: 18px;
			background-size: 24px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals iframe {
  			width: 450px;
		}
	}
	@media screen and (max-width: 1640px){
		.homepage .homeBoxes .homeBox {
			padding: 20px 15px;
		}
		.financeBoxes .homeBox h3 {
			font-size: 30px;
		}
		.financeBoxes .homeBox {
			padding: 40px 20px;
		}
	}
	@media screen and (max-width: 1520px){
		.homepage .homeBoxes .homeBox.newCarDeals h1 {
			font-size: 36px;
			margin-top: 0;
		}
		.homepage .homeBoxes .homeBox.newCarDeals h2 {
			font-size: 20px;
		}
		.homepage .homeBoxes .homeBox h3 {
			font-size: 20px;
		}
		.homepage .homeBoxes .homeBox h4 {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1430px){
		.homepage .homeBoxes .homeBox.newCarDeals iframe {
			width: 360px;
		}
		.homepage .homeBoxes .homeBox.financeSection .financeNav {
			margin-bottom: 3px;
		}
		.homepage .homeBoxes .homeBox.financeSection .financeNav a {
			width: calc(25% - 2.25px);
		}
		.homepage .homeBoxes .homeBox.financeSection .financeNav a, 
		.homepage .homeBoxes .homeBox .button {
			font-size: 14px;
			padding: 10px 3px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals {
			width: calc(45% - 3px);
		}
		.homepage .homeBoxes .homeBox.financeSection {
		}
		.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals, 
		.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing {
			width: calc(50% - 1.5px);
			height: calc(18vw - 1px);
			margin-bottom: 3px;
		}
		.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing, 
		.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide, 
		.homepage .homeBoxes .homeBox.financeSection .inStockDeals {
			width: calc(33.33% - 2px);
			height: calc(18vw - 2px);
		}
		.homepage .homeBoxes .homeBox.newCarDeals .tickboxes {
			margin: 5px 0;
		}
	}
	@media screen and (max-width: 1320px){
		.financeBoxes .homeBox {
			padding: 30px 20px;
		}
		.financeBoxes .homeBox p {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1230px){
		.homepage .homeBoxes {
			flex-wrap: wrap;
		}
		.homepage .homeBoxes .homeBox.newCarDeals, 
		.homepage .homeBoxes .homeBox.financeSection {
			width: 100%;
			height: auto;
			margin-bottom: 3px;
		}
		.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals, 
		.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing {
			height: calc(36vw - 28px);
		}
		.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing, 
		.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide, 
		.homepage .homeBoxes .homeBox.financeSection .inStockDeals {
			height: calc(36vw - 22px);
		}
		.homepage .homeBoxes .homeBox.newCarDeals .bg {
			transform: translate(-50%, -50%);
			width: 100%;
			height: auto;
		}
		.homepage .homeBoxes .homeBox.newCarDeals iframe {
			height: 180px;
			margin-top: 10px;
		}
	}
	@media screen and (max-width: 1140px){
		.financeBoxes .homeBox {
			padding: 15px;
		}
		.financeBoxes .homeBox .button {
			padding: 10px 30px 10px 10px;
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1002px){
		.financeBoxes .homeBox h3 {
			font-size: 20px;
		}
	}
	@media screen and (max-width: 970px){
		.financeBoxes {
			flex-wrap: wrap;
		}
		.financeBoxes .homeBox {
			width: 50%;
			height: 61vw;
		}
	}
	@media screen and (max-width: 900px){
		.homepage .homeBoxes .homeBox.newCarDeals .bg {
			width: auto;
			height: 100%;
		}
	}
	@media screen and (max-width: 650px){
		.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals, 
		.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing, 
		.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing, 
		.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide, 
		.homepage .homeBoxes .homeBox.financeSection .inStockDeals {
			width: 100%;
			margin-bottom: 3px;
			
			& .bg {
				width: 100%;
				height: auto;
				min-height: 0;
			}
		}
		.homepage .homeBoxes .homeBox.financeSection .carLeaseDeals, 
		.homepage .homeBoxes .homeBox.financeSection .electricCarLeasing {
			height: 45vw;
		}
		.homepage .homeBoxes .homeBox.financeSection .shortTermLeasing, 
		.homepage .homeBoxes .homeBox.financeSection .stepByStepGuide, 
		.homepage .homeBoxes .homeBox.financeSection .inStockDeals {
			height: 45vw;
		}
		.homepage .homeBoxes .homeBox.financeSection .financeNav {
			flex-wrap: wrap;
			height: auto;
			margin-bottom: 0;
		}
		.homepage .homeBoxes .homeBox.financeSection .financeNav a {
			width: calc(50% - 1.5px);
			margin-bottom: 3px;
		}
	}
	@media screen and (max-width: 550px){
		.homepage .homeBoxes .homeBox.newCarDeals h1 {
			font-size: 26px;
		}
		.homepage .homeBoxes .homeBox.newCarDeals iframe {
			max-width: 90%;
		}
	}
	@media screen and (max-width: 500px){
		.financeBoxes .homeBox {
			width: 100%;
			height: 111vw;
		}
	}
	@media screen and (max-width: 400px){
		.homepage .homeBoxes .homeBox.newCarDeals h1 {
			font-size: 22px;
		}
	}
}