/*===========================================
	RESPONSIVE MENUS
===========================================*/
.ResponsiveNavigation {
	display: none;
}

@media screen and (max-width: 1128px) {
	.PageHeaderContainer .PositionContainer.SalesContainer {
		display: none;
	}
}

@media screen and (max-width: 980px) {
	/*===========================================
		PAGE HEADER
	===========================================*/
	.PageHeaderContainer .PositionContainer.LogoContainer {
		flex-basis: 100%;
		align-items: center;
	}
		.PageHeaderContainer .PositionContainer.LogoContainer img {
			max-width: 250px;
		}
		
		.PageHeaderContainer .ContentLeft {
			display: none;
		}
	
	.Navigation {
		display: none;
	}
	.ResponsiveNavigation {
		display: block;
	}
	
	
	/*===========================================
		CHRISTMAS COUNTDOWN
	===========================================*/
	.ChristmasCountDownBar {
		padding: 20px 0;
		color: #FFF;
		background: #23452e url(/web-images/images/backgrounds/green_background.png) no-repeat; 
		background-position: center; 
		background-size: cover;
	}
		.ChristmasCountDownBar .CountDownDisplay {
			display: inline-block;
		}
			.ChristmasCountDownBar .CountDownDisplay .TimeValue {
				float: left;
				font-size: 3em;
				min-width: 80px;
				text-align: right;
			}
			.ChristmasCountDownBar .CountDownDisplay .HeaderLabel {
				width: 100%;
				display: block;
				background: pink;
				float: left;
				padding: 12px 20px 12px 0;
				font-size: 1.5em;
			}
			.ChristmasCountDownBar .CountDownDisplay .TimeLabel {
				float: left;
				padding: 20px 0 0 10px;
				font-size: 1.5em;
			}
	
	/*===========================================
		BANNER BOX
	===========================================*/
	.BannerSection {
		padding: 20px;
		text-align: center;
	}
		.BannerSection img {
			float: none;
			margin-right: 0;
			padding-bottom: 10px;
		}
		.BannerSection h2 {
			float: none;
			margin-bottom: 0;
		}
		.BannerSection .ButtonLink {
			float: none;
			padding: 20px 0 0 0;
		}
	
	.FlexContainer .OneHalf_FlexItem {
		flex-basis: 100%;
		margin: 0;
	}
	
	.FlexContainer .OneHalfWideMargin_FlexItem {
		flex-basis: 100%;
		margin-right: 0;
		text-align: center;
	}
		.FlexContainer .OneHalfWideMargin_FlexItem .ContentContainer_VMiddle {
			padding: 20px 0;
		}
		
	.FlexContainer .OneThirdMargin_FlexItem,
	.FlexContainer .OneThirdMargin_FlexItem:nth-child(3n){
		flex-basis: 49%;
		margin: 0 1% 10px 0;
	}
		.FlexContainer .OneThirdMargin_FlexItem:nth-child(2n),
		.FlexContainer .OneThirdMargin_FlexItem:last-child {
			flex-basis: 49%;
			margin: 0 0 10px 0;
		}
		
	.FlexContainer .OneFifthMargin_FlexItem,
	.FlexContainer .OneFifthMargin_FlexItem:nth-child(5n){
		flex-basis: 32.66%;
		margin: 0 1% 10px 0;
	}
		.FlexContainer .OneFifthMargin_FlexItem:nth-child(3n),
		.FlexContainer .OneFifthMargin_FlexItem:last-child {
			flex-basis: 32.68%;
			margin: 0 0 10px 0;
		}
		
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem,
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(5n) {
		border: 1px solid #DEDEDE;
		flex-basis: calc(32.66% - 2px);
		margin: 0 1% 10px 0;
		background: #FFF;
	}
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(3n),
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:last-child {
			flex-basis: calc(32.668 - 2px);
			margin: 0 0 10px 0;
		}
		
	
	.FlexContainer .OneQuarterMargin_FlexItem,
	.FlexContainer .OneQuarterMargin_FlexItem:nth-child(4n) {
		flex-basis: 49%;
		margin: 0 1% 10px 0;
	}
		.FlexContainer .OneQuarterMargin_FlexItem:nth-child(2n),
		.FlexContainer .OneQuarterMargin_FlexItem:last-child {
			margin: 0 0 10px 0;
		}
			
	
	/*	Company Logo 	*/
	.CompanyLogoDisplay .OneQuarterMargin_FlexItem {
		border: 1px solid #DEDEDE;
		flex-basis: calc(49% - 2px);
	}
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem .DisplayBox {
			text-align: center;
		}
	
	.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem,
	.SavingsDisplay .FlexContainer.CompanyLogoDisplay .OneQuarterMargin_FlexItem {
		flex-basis: calc(49.5% - 2px);
		margin: 0 1% 10px 0;
	}
		.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem:nth-child(2n),
		.SavingsDisplay .FlexContainer.CompanyLogoDisplay .OneQuarterMargin_FlexItem:nth-child(2n) {
			margin: 0 0 10px 0;
		}
		
	
	.SavingsDisplay .WhyHoldFunds {
		height: 600px;
	}
	
	/*===========================================
		CONTACT
	===========================================*/
	.OneHalf_Margin {
		float: left;
		width: 100%;
		margin-right: 0;
	}
	
	
	
	/*===========================================
		SHOPPING CART
	===========================================*/
	.CheckoutContainer .CustomerDetails {
		flex-basis: 100%;
		margin: 0;
	}
	.CheckoutContainer .Summary {
		margin: 0;
		flex-basis: 100%;
	}
}


@media screen and (max-width: 668px) {
	/*=========================================== 
		PAGE HERO
	===========================================*/
	.PageImageContainer,
	.PageImageContainer.about, 
	.PageImageContainer.services, 
	.PageImageContainer.isa, 
	.PageImageContainer.fixed-rate-bond, 
	.PageImageContainer.shares, 
	.PageImageContainer.funds, 
	.PageImageContainer.contact {
		height: 350px;
	}
		.PageImageContainer .HeroContent h2 {
			font-size: 2.5em
		}
		.PageImageContainer .HeroContent h3 {
			font-size: 1.75em;
		}
	
	.Padding_50 {
		padding: 25px;
	}
	
	
	/*===========================================
		CHRISTMAS COUNTDOWN
	===========================================*/
	.ChristmasCountDownBar .CountDownDisplay .TimeValue {
		font-size: 2em;
		min-width: 45px;
	}
	.ChristmasCountDownBar .CountDownDisplay .TimeLabel {
		font-size: 1em;
		padding: 10px 0 0 10px;
	}
	
	
	/*===========================================
		GRAPHIC BANNER
	===========================================*/
	.GraphicBanner .PositionContainerLeft,
	.GraphicBanner .PositionContainerRight {
		display: none;
	}
	
	
	/*===========================================
		CONTACT US
	===========================================*/
	.Contact .FlexContainer .OneHalfMargin_FlexItem {
		flex-basis: 100%;
		margin-right: 0%;
	}
	
	.Contact h2,
	.Contact h3 {
		text-align: center;
	}
	.Contact .ContactInformation p {
		text-align: center;
	}
	
	
	/*=========================================== 
		FOOTER
	===========================================*/
	.PageFooterContainer .OneThirdMargin_FlexItem:nth-child(1) {
		display: none;
	}
	
		
	.PageFooterContainer .DisclaimerInformation {
		float: none;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
		.PageFooterContainer .DisclaimerInformation p {
			text-align: center;
		}
	.PageFooterContainer .ContactInformation {
		float: none;
		width: 100%;
		text-align: center;
	}
		.PageFooterContainer .ContactInformation h3,
		.PageFooterContainer .ContactInformation p {
			text-align: center;
		}
}


@media screen and (max-width: 568px) {
	/*===========================================
		DISPLAY BOXES
	===========================================*/
	.FlexContainer .OneThirdMargin_FlexItem {
		flex-basis: 100%;
		margin: 0 0 10px 0;
	}
		.FlexContainer .OneThirdMargin_FlexItem:nth-child(3n),
		.FlexContainer .OneThirdMargin_FlexItem:nth-child(2n),
		.FlexContainer .OneThirdMargin_FlexItem:last-child {
			flex-basis: 100%;
			margin: 0 0 10px 0;
		}
		
	.FlexContainer .OneFifthMargin_FlexItem,
	.FlexContainer .OneFifthMargin_FlexItem:nth-child(3n),
	.FlexContainer .OneFifthMargin_FlexItem:last-child {
		flex-basis: 49.5%;
		margin: 0 1% 10px 0;
	}
		.FlexContainer .OneFifthMargin_FlexItem:nth-child(2n),
		.FlexContainer .OneFifthMargin_FlexItem:last-child {
			margin: 0 0 10px 0;
		}
		
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem,
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(5n) {
		border: 1px solid #DEDEDE;
		flex-basis: calc(49.5% - 2px);
		margin: 0 1% 10px 0;
		background: #FFF;
	}
		
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(3n) {
			margin: 0 1% 10px 0;
		}
		
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(2n),
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:last-child {
			margin: 0 0 10px 0;
		}
		
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem .DisplayBox {
			padding: 20px 20px;
		}
		
	
	.FlexContainer .OneQuarterMargin_FlexItem,
	.FlexContainer .OneQuarterMargin_FlexItem:nth-child(4n) {
		flex-basis: 100%;
		margin: 0 0 10px 0;
	}
			
	/*	Company Logo 	*/
	.CompanyLogoDisplay .OneQuarterMargin_FlexItem {
		border: 1px solid #DEDEDE;
		flex-basis: calc(100% - 2px);
	}
	
	.HomepageProductRange .ProductRangeContainer .ProductRangeImage {
		float: left;
		width: 100%;
	}
		.HomepageProductRange .ProductRangeContainer .ProductRangeImage img {
			height: 200px;
			padding: 10px;
		}
		
	.HomepageProductRange .ProductRangeContainer .ProductRangeContent {
		float: left;
		width: calc(100% - 40px);
		margin: 0 20px;
		height: 350px;
	}
		.HomepageProductRange .ProductRangeContainer .ProductRangeContent h3 {
			text-align: center;
		}
	
	
	.ProductItemDisplay .FlexContainer .OneHalfWideMargin_FlexItem {
		flex-basis: 100%;
	}
	
	/*===========================================
		Bar Banner
	===========================================*/
	.BannerBar {
		display: none;
	}
	
	
	/*===========================================
		SHOPPING CART
	===========================================*/
	.ShoppingCart .QuantityContainer input {
		margin: 0 5px 0 5px;
	}
	.ShoppingCart input {
		width: 30px;
	}
	.ShoppingCart .QuantityContainer button {
		margin-right: 5px;
	}
	.ShoppingCart .ControlButtons .ContentButton {
		float: left;
		margin-top: 10px;
	}
	
	.CheckoutContainer .ContentContainer {
		padding: 50px 20px;
	}
		.CheckoutContainer .ContentContainer .FormNameContainer .FormTitle {
			margin: 0;
			flex-basis: 100%;
		}
		.CheckoutContainer .ContentContainer .FormNameContainer .FormFirstName {
			margin: 0;
			flex-basis: 100%;
		}
		.CheckoutContainer .ContentContainer .FormNameContainer .FormLastName {
			margin: 0;
			flex-basis: 100%;
		}
	
	
	
	/*.ShoppingCart table th:nth-child(1),
	.ShoppingCart table td:nth-child(1){ 
		display:none;
	} */
	
	
	
	/*.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem,
	.SavingsDisplay .FlexContainer.CompanyLogoDisplay .OneQuarterMargin_FlexItem {
		flex-basis: 100%;
		margin: 0 0 10px 0;
	}
		.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem:nth-child(4n),
		.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem:nth-child(2n),
		.SavingsDisplay .FlexContainer.CompanyLogoDisplay .OneQuarterMargin_FlexItem:nth-child(4n),
		.SavingsDisplay .FlexContainer.CompanyLogoDisplay .OneQuarterMargin_FlexItem:nth-child(2n) {
			margin: 0 0 10px 0;
		}
		
		.SavingsDisplay .FlexContainer.BankingCompany .OneQuarterMargin_FlexItem p {
			text-align: center;
		}
		
	.SavingsDisplay .WhyHoldFunds {
		height: 750px;
	}
	
	.SavingsDisplay .WhyHoldFunds .OneHalfWideMargin_FlexItem {
		flex-basis: 100%;
		margin-right: 0;
	}
		.SavingsDisplay .WhyHoldFunds .OneHalfWideMargin_FlexItem:nth-child(2n) {
			margin: 0 0 10px 0;
		}*/
		
		
	/*=========================================== 
		FUNDS
	===========================================*/
	/*.SavingsDisplay .FundDisplayBoxes .FundImage1 {
		height: 300px;
	}
	.SavingsDisplay .FundDisplayBoxes .ContentDisplay {
		float: none;
		width: calc(100% - 40px);
		padding: 0 20px;
	}
		.SavingsDisplay .FundDisplayBoxes h2 {
			padding-top: 20px;
		}
		
	.SavingsDisplay .WhyHoldFunds .ContentDisplayBox .OneHalfWideMargin_FlexItem {
		margin-bottom: 10px;
	}
	.SavingsDisplay .WhyHoldFunds .ContentDisplayBox .OneHalfWideMargin_FlexItem p {
		padding-bottom: 0;
	}
	
	.SavingsDisplay .WhyHoldFunds {
		height: 750px;
	}*/
}


@media screen and (max-width: 420px) {
	/*===========================================
		LOGO BAR
	===========================================*/
	.PageHeaderContainer .CompanyLogo img {
		max-width: 225px;
	}
	
	.PageHeaderContainer .ShoppingBasket {
		width: 70px;
	}
		.PageHeaderContainer .ShoppingBasket .BasketCount,
		.PageHeaderContainer .ShoppingBasket .BasketValue {
			font-size: 0.9em;
			padding: 5px;
		}
	
	
	.PageHeaderContainer .HeaderBar .ContentRight {
		float: left;
	}
		.PageHeaderContainer .HeaderBar ul li {
			float: left;
			padding: 5px;
		}
	
	
	/*===========================================
		HERO CONTAINER
	===========================================*/
	.PageImageContainer .HeroContentPadding {
		padding: 20px;
	}
		.PageImageContainer .HeroContent h2 {
			font-size: 1.5em;
		}
		.PageImageContainer .HeroContent h3 {
			font-size: 1em;
		}
		.PageImageContainer .HeroContent p {
			font-size: 0.9em;
			padding: 0 0 10px 0;
		}
	
	/*===========================================
		CHRISTMAS COUNTDOWN
	===========================================*/
	.ChristmasCountDownBar .CountDownDisplay .TimeValue {
		font-size: 1.5em;
		min-width: 30px;
	}
	.ChristmasCountDownBar .CountDownDisplay .TimeLabel {
		font-size: 0.9em;
		padding: 10px 0 0 5px;
	}
	
	.SavingsDisplay .WhyHoldFunds {
		height: 900px;
	}
	
	.FlexContainer .OneFifthMargin_FlexItem,
	.FlexContainer .OneFifthMargin_FlexItem:nth-child(3n),
	.FlexContainer .OneFifthMargin_FlexItem:last-child {
		flex-basis: 100%;
		margin: 0 0 10px 0;
	}
	
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem,
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(3n),
	.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem:nth-child(5n) {
		flex-basis: calc(100% - 2px);
		margin: 0 0 10px 0;
	}
		.FlexContainer.CompanyLogoDisplay .OneFifthMargin_FlexItem .DisplayBox {
			text-align: center;
		}
}