/******************************************************************************************************************************************
 Global Styles 
 *****************************************************************************************************************************************/
	 
	body.page-template-app,
	body.parent-pageid-775 {
		background-color: #2D375E;
		color: #ffffff;
	}

	ol li { color: #222222; list-style: decimal; }

	.ath-application-icon { 
		border-radius: 10px !important; 
		height: 50px !important; 
		width: 50px !important; 
		box-shadow: none !important; 
	}
	.ath-container 		{ background-color: #fff !important; } 
	.ath-phone:after 	{ background-color: #fff !important; }
	.ath-container p 	{ text-shadow: none !important; color: #000000 !important; font-size: 1em !important; line-height: 1.2em !important; }
	.ath-container.ath-ios p { line-height: 1.5em !important; } 

/******************************************************************************************************************************************
 Header 
 *****************************************************************************************************************************************/
 
	.exit-app 				{ display: block; width: 100%; text-align: center; color: #EAEAEA; font-size: 1em; padding: 1em; transition: 0.3s all ease; position: relative; bottom: 0; }
	.exit-app:hover 		{ color: #FFB900; }
	
	.app-header 			{ padding: 1em 1.25em; background-color: #212B56; color: #ffffff; }
	.app-logo 				{ max-width: 200px; max-height: 300px; width: auto; height: auto; margin: 0 auto; }
	
	.back-link img			{ width: 40px; height: 40px; background-color: #374475; border-radius: 5px; }
	.home-link img 			{ width: auto; height: 40px; float: left; }
	
	.home-text 				{ display: inline-block; padding: 12px; float: left; }

	.app-icon-container					{ position: absolute; top: 0; right: 0; transform: translateY(-75%); }
	.app-header .icon.language-links 	{ position: relative; }

	.language-links-box {
		text-align: center;
		position: absolute;
		padding: 2em;
		top: 50%;
		left: 50%;
		width: auto;
		transform: translate(-50%, -50%);
		background-color: rgba(255, 255, 255, 0.97);
		border-radius: 5px;
		box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.87);
		z-index: 999;
	}
	
	


/******************************************************************************************************************************************
 Grid 
 *****************************************************************************************************************************************/
	 
	.app-container 				{ width: 90%; max-width: 1000px; margin: 0 auto; }
	.app-container-small 		{ max-width: 400px; width: 90%; margin: 0 auto; }
	.full-width-container 		{ width: 100%; max-width: 1000px; margin: 0 auto; }
	.parent-pageid-775 .left25 	{ width: 25%; }
	
	.left40						{ width: 40%; float: left; }
	.left20 					{ width: 20%; float: left; }
	.midd50 					{ width: 95%; max-width: 500px; margin: 0 auto; }
	
	.pad50 						{ padding: 50px; }
	.padtb100 					{ padding: 15% 0; }
	
	


/******************************************************************************************************************************************
 Slider
 *****************************************************************************************************************************************/
 	
 	.app-slider 				{ position: relative; }
	.app-slider .slide 			{ cursor: pointer; -webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; }
	.slick-next 				{ background-image: url(../images/icon-white-arrow-left-app.png); right: 0; left: auto !important; width: 60px; }
	.slick-prev 				{ background-image: url(../images/icon-white-arrow-left-app.png); left: 0; right: auto !important; width: 60px; }
	.slick-disabled 			{ opacity: 0.1; }
	
	.app-slider .slick-next 	{ background-image: url(../images/icon-blue-arrow-left-app.png); }
	.app-slider .slick-prev 	{ background-image: url(../images/icon-blue-arrow-left-app.png); }
	

/******************************************************************************************************************************************
 Colours
 *****************************************************************************************************************************************/

	.blue-bg 					{ background-color: #2D375E; }
	.white 						{ color: #ffffff !important; }
	

/******************************************************************************************************************************************
 Typography 
 *****************************************************************************************************************************************/
 
	h1, h2, h3, h4, h5, p 		{ color: #ffffff; }
	h1 							{ font-weight: 700; font-size: 1.8em; }
	h3 							{ font-size: 1.2em; }

	p.light 					{ color: #80838e; }

	hr {
		border: 0;
		height: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}


/******************************************************************************************************************************************
 Forms
 *****************************************************************************************************************************************/
 
	.home-search input[type=text] { 
		width: 80%; 
		display: block; 
		float: left; 
		padding: 1em; 
		border-radius: 0px; 
		border-top-left-radius: 5px; 
		border-bottom-left-radius: 5px; 
		margin: 0; 
		border: none;
	}
	.home-search input[type=text]:focus { background-color: #fff; }
	.home-search input[type=submit] { 
		width: 20%; 
		display: block; 
		float: left;
		padding: 0.9em; 
		border-radius: 0px;
		border-top-right-radius: 5px; 
		border-bottom-right-radius: 5px; 
		background-color: #3F4D80; 
		text-transform: uppercase; 
		margin: 0;
		color: #ffffff;
		font-weight: 700;
		font-size: 1em;
	}

	.wpcf7-form p 			{ padding-bottom: 0; }
	input[type=submit] 		{ margin-bottom: 0; }

	.button 				{ display: block; font-weight: 700; text-align: center; padding: 1em; max-width: 500px; margin: 0 auto; }
	.button.yellow 			{ background-color: #FFB900; color: #333333; }
	.button.blue 			{ background-color: #3E4C7F; }
	
	label 					{ cursor: pointer; }
	input[type=radio] 		{ position: absolute; top: -99999px; left: -99999px; }
	
	input[type=text] 		{ font-size: 0.91em; }
	
	.ui-autocomplete {
		background-color: #E6E8F2;
		padding: 5px 0 0; 
		border-bottom-left-radius: 8px; 
		border-bottom-right-radius: 8px; 
		overflow: hidden; 
		max-height: 250px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ui-autocomplete li 		{ padding: 0.5em; width: 100%; color: #2D375E; border-bottom: 1px solid #D9D9D9; cursor: pointer; }
	.ui-autocomplete li:hover 	{ background-color: #F2F3F8; }
	
	
	.modal .container { 
		padding: 2%; 
		width: 95%; 
		max-width: 400px; 
		min-width: 0; 
		max-height: 90%;
		overflow-y: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -25%);
		transform: translate(-50%, -25%);
		opacity: 0;
		margin: 0;
		-webkit-transition: 1s all ease;
		transition: 1s all ease;
		border-radius: 5px;
	}
	.modal .container h2	{ color: #3E4C7F; font-weight: 700; }
	.modal.active .container { 
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		opacity: 1;
		-webkit-transition: 1s all ease;
		transition: 1s all ease;
	}
	.modal .close {
		position: absolute;
		top: 2px;
		right: 2px;
		background: #22273a;
		border: none;
		color: #fff;
		cursor: pointer;
	}
	.modal.save-app ol { padding: 0 0 0.5em 1em; }
	.modal.save-app ol li { margin-bottom: 0.5em; }
	.modal a {
		color: #000000;
	}



/******************************************************************************************************************************************
 Dropdowns 
 *****************************************************************************************************************************************/
 
 	.result 	{ display: block; width: 100%; margin-bottom: 2px; margin-top: 2px; }
	.result a { 
		padding: 1.5em 3em 1.5em 2em; 
		background: url(../images/icon-white-arrow-right-app.png) no-repeat right center / 40px 40px #3F4D80; 
		display: block; 
		transition: 0.3s all ease; 
	}
	.dropdown { margin-bottom: 2px; margin-top: 2px; }
	.dropdown a { 
		padding: 1.5em 2em; 
		background: url(../images/icon-white-arrow-down-app.png) no-repeat right center / 40px 40px #3F4D80; 
		display: block; 
		transition: 0.3s all ease; 
		border-bottom: 1px solid #3E4C7F;
	}
	.result a:hover,
	.dropdown a:hover 				{ background-color: #4C5D9B; }
	.dropdown a.active { 
		background-color: #fff; 
		color: #3F4D80; 
		border-bottom: 1px solid #d4d3d3; 
		background-image: url(../images/icon-blue-arrow-top-app.png);  
	}
	.dropdown a.active h3 			{ color: #3F4D80; }
	.dropdown-content 				{ display: none; background-color: #fff; color: #3F4D80; margin-bottom: 3px; }
	.dropdown-content p,
	.dropdown-content a,
	.dropdown-content li 			{ color: #3F4D80; }



/******************************************************************************************************************************************
 Profiles 
 *****************************************************************************************************************************************/
	
	
	
	.profiles img 					{ max-width: 50px; max-height: 50px; display: inline; text-align: center; margin-bottom: 0.5em; }
	.profiles .left25 				{ cursor: pointer; transition: 0.3s all ease; }
	.profiles .left25:hover 		{ background-color: rgba(255,255,255,0.1); }
	
	.profiles .left25.active 		{ background-color: #ffffff; color: #2D375E; }
	.profile-content 				{ display: none; background-color: #ffffff; color: #2D375E; }
	.profile-content h5,
	.profile-content p 				{ color: #2D375E; }
	.profile-content p.white 		{ color: #ffffff; }
	.profile-content div 			{ opacity: 0; -webkit-transition-delay: 1s; transition-delay: 1s; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; }
	.profile-content.active div 	{ opacity: 1; }
	
	.profile 						{ height: 115px; }
	.profile .blue-icon 			{ display: none; }
	.profile .white-icon 			{ display: inline; }
	.profile.active .blue-icon 		{ display: inline; }
	.profile.active .white-icon 	{ display: none; }
	
	.small-profile 					{ width: 30px; }
	
	.yellow-arrow 					{ background: url(../images/icon-yellow-arrow-right.png) no-repeat center; background-size: 45px; }


/******************************************************************************************************************************************
 Solutions
 *****************************************************************************************************************************************/
 
	.solution-box .term				{ position: relative; height: 200px; background-size: cover; background-position: center; }
	.solution-name 					{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 90%; }
		

/******************************************************************************************************************************************
 Term Colours
 *****************************************************************************************************************************************/
	
	.result.term-heat  				{ border-left: 10px solid #E0410E; }
	.result.term-cold 				{ border-left: 10px solid #3996A8; }
	.result.term-corrosive 			{ border-left: 10px solid #77619A; }
	.result.term-electrical 		{ border-left: 10px solid #A0BADE; }
	.result.term-hygienic 			{ border-left: 10px solid #AAAAAA; }
	.result.term-oxidisation 		{ border-left: 10px solid #000000; }
	.result.term-precision 			{ border-left: 10px solid #000000; }
	.result.term-springs 			{ border-left: 10px solid #759D32; }
	.result.term-strength 			{ border-left: 10px solid #8B98A8; }
	.result.term-water 				{ border-left: 10px solid #54A9DD; }
	.result.term-lightweight-wire	{ border-left: 10px solid #E4E4E4; }
	
	.property-box 					{ padding: 20px 0; }
	.property-box .term 			{ background-size: cover; background-position: center; }



/******************************************************************************************************************************************
 Pagination
 *****************************************************************************************************************************************/

	.pagination 					{ background-color: #38436b; border-color: #546398; max-width: 95%; margin: 30px auto 0; }
	.pagination .page-numbers 		{ color: #ffffff; }
	.pagination span.page-numbers,
	.pagination .page-numbers 		{ padding: 10px 15px; }


/******************************************************************************************************************************************
 Filter
 *****************************************************************************************************************************************/
	
	.filter-button a 				{ display: block; border: 1px solid #46558f; background-color: rgba(255,255,255,0.025); padding: 1em 2em; transition: 0.3s all ease; }
	.filter-button a:hover 			{ background-color: rgba(255,255,255,0.05); }
	.filter-button a.active 		{ background-color: #fff; }
	.filter-button a.active p 		{ color: #2D375E; }
	.filter-container .left33 		{ width: 33.33%; }
	


/******************************************************************************************************************************************
 Sectors / Applications
 *****************************************************************************************************************************************/
	
	.term 							{ background-color: rgba(0,0,0,0.2); position: relative; }
	.term:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,0.15);
	}
	
	
	
/******************************************************************************************************************************************
 Animations
 *****************************************************************************************************************************************/
 
	.animate { opacity: 0; }
	
	.animated {
	  -webkit-animation-duration: 0.5s;
	  animation-duration: 0.5s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}
	@-webkit-keyframes fadeInUp {
	  from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	  }
	
	  to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}	
	@keyframes fadeInUp {
	  from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	  }
	
	  to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	.fadeInUp {
	  -webkit-animation-name: fadeInUp;
	  animation-name: fadeInUp;
	}
	@-webkit-keyframes fadeIn {
	  from {
		opacity: 0;
	  }
	
	  to {
		opacity: 1;
	  }
	}
	@keyframes fadeIn {
	  from {
		opacity: 0;
	  }
	
	  to {
		opacity: 1;
	  }
	}
	.fadeIn {
	  -webkit-animation-name: fadeIn;
	  animation-name: fadeIn;
	}


	.app-call { display: none; }
	

/******************************************************************************************************************************************
 Responsive 
 *****************************************************************************************************************************************/

	@media all and (max-width: 1030px) {
		
		.modal .container 					{ padding: 4%; }
		
	}
	
	@media all and (max-width : 650px) {
				
		.left50 							{ width: 50%; }
		.left50.pad50 						{ padding: 30px 10px; }
		.solution-box 						{ padding: 0 0 1px 0; width: 50%; }
		
		body.page-id-782 .exit-app 			{ padding-bottom: 70px; }
		.property-box 						{ padding: 0 0 20px; }
		.pagination .prev,
		.pagination .next 					{ display: none; }
		
		.modal .container 					{ padding: 4%; }
		
		.solution-box .term					{ height: 125px; border: none; }
		
		.filter-button a 					{ padding: 1em 0.5em; }
		.filter-container h2 				{ padding: 0 2.5% 5px; }
		.filter-container .filter 			{ padding: 0; }
		
		.app-call,
		.app-enquire 						{ width: 50%; float: left; display: block; }
		
	}
	
	
	@media all and (max-width : 500px) {
				
		.app-header 						{ padding: 0.75em 1em; }
		.back-link img						{ width: 30px; height: 30px; }
		.home-link img 						{ height: 30px; }
	
		.app-logo 							{ max-width: 200px; max-height: 200px; width: auto; height: auto; margin: 0 auto; }
		.profile 							{ height: 90px; }
		.profiles img 						{ max-width: 35px; height: auto; max-height: 25px; display: inline; text-align: center; }
		.small-profile 						{ width: 17px; height: auto; }
		
		.profile-content .pad20 			{ padding: 10px; }
		
		.app-slider .slide 					{ opacity: 0.5 !important; }
		.app-slider .slide.slick-current 	{ opacity: 1 !important; }
		
		input 								{ padding: 1em; }
		
		.enquire-fixed 						{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }
		
		.yellow-arrow 						{ background: url(../images/icon-yellow-arrow-right.png) no-repeat center; background-size: 35px; }
		
		.modal .container 					{ padding: 5%; }
		
	}
	
	
	@media all and (max-width : 300px) {
	
		solution-box 						{ width: 100%; }
		.left50 							{ width: 100%; }
		
	}