/*****************
								      // -----------------
								      // FOR MOBILE PHONE 
								      // _________________
								      // *****************/


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


	.header {
		padding: 18px 10px !important;
		background: #fff;
	}
	
	.logo img {
		width: 100%;
		min-width: 116px;
		max-width: 116px;
		height: auto;
		display: block;
		margin: 0px;
		padding: 0px 0px 0px 0px;
	}
	

	.bolton img {
		width: 113px;
		height: auto;
		display: block;
		margin: 0px;
		padding: 0px 0px 0px 0px; right: 20px;
	}


	
	#splashArea {
		width: 100%;
		height: 450px;
		display: block;
		z-index: 200;
		top: 0px;
		margin: 0px 0px 0px 0px;
		border: 0px;
		padding: 0px 0px 0px 0px;
		background: url('../images/video-bg.jpg');
		background-position: top center;
		 -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}
	


	#splashArea .pageCurl {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 240px;
		height: auto;
		z-index: 9999999999999999999;
	}
	




	
	
	.splashInner {
		height: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0))
	}
	
	
	.splashTxt {
		text-align: left;
		padding: 33px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
	
	.splashTxt h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 24px;
		line-height: 30px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #fff;
		padding: 0px 20% 0px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
	}
	
	
	
	.splashButton {
		font-size: 18px;
		font-weight: 300;
		padding: 8px 16px 6px 16px;
	}	
	
	.splashButton i {
		display: none;
	}	
	
	.splashButton.float-right {
		float: left; background: red;
		text-align: left;
	}
	
	
	
	#splashArea video {
		display: none;
	}
	
	
	
	#rowArea .slider img {
		width: 90px !important;
	}	
	

	#rowArea {
		font-family: 'Work Sans', sans-serif;
		font-size: 14px;
		line-height: 18px;
		font-weight: 300;
		letter-spacing: 0px;
		color: #676767;
		padding: 40px 0px;
		margin: 0px 0px 0px 0px;
	}
	
	#rowArea.logos {
		padding: 20px 0px;

	}


	#rowArea h1 {
		font-size: 22px;
		line-height: 40px;

	}
	
	.greenRow {

		padding: 40px 0px;

	}

	.greenRow h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 38px;
		line-height: 40px;
		font-weight: 300;
		color: #fff;
		letter-spacing: 0px;
		padding: 0px 0px 30px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0);
	}
	
	
	.greenRowImg img {
		max-height: 80px;
		padding-top: 16px;
	}

	
	.greenRow .pic {
		padding-bottom: 10px;
		
	}


	#particles-js {
		width: 100%;
		max-width: 80%;
		height: 100%;
		position: absolute;
		padding: 0px;
		margin: 0px;

	}
	
	
	#productsArea { 
		padding: 30px 20px;
	}
	
	
	#productsArea .scrollArea img { 
		width: auto;
		display: block;
		height: 80px;
		max-height: 80px;
	}
	
	#contactArea h2 {
		padding: 20px 0px 10px 0px;

	}
	
	#contactArea { 
		padding: 40px 20px;

	}
	
	
	#botStrip .footerLogo img { 
		max-width: 60px;
	}
	
	#botStrip { 
		padding: 20px 20px;
	}
	
	
}


								      /*****************
								      // -----------------
								      // FOR MOBILE PHONE LANDSCAPE
								      // _________________
								      // *****************/


@media only screen and (max-width: 740px) and (orientation: landscape) {

	
	.header {
		padding: 18px 10px !important;
		background: #fff;
	}



	#splashArea {
		width: 100%;
		height: 350px;
		display: block;
		z-index: 200;
		top: 0px;
		margin: 0px 0px 0px 0px;
		border: 0px;
		padding: 0px 0px 0px 0px;
		background: url('../images/video-bg.jpg');
		background-position: top left;
		 -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}	
	
	
	.splashTxt h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 24px;
		line-height: 30px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #fff;
		padding: 0px 40% 0px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
	}
	
	
	#splashArea video {
		display: none;
	}
	
	.greenRow h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 38px;
		line-height: 40px;
		font-weight: 300;
		color: #fff;
		letter-spacing: 0px;
		padding: 0px 0px 30px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0);
	}
	
	
	.greenRow img {
		max-height: 80px;
		padding-top: 16px;
	}
	
	
	#particles-js {
		width: 100%;
		max-width: 90%;
		height: 100%;
		position: absolute;
		padding: 0px;
		margin: 0px;

	}
	
	#contactArea h2 {
		padding: 20px 0px 10px 0px;

	}	
	
}




								      /*****************
								      // -----------------
								      // FOR TABLET PORTRAIT
								      // _________________
								      // *****************/
								      
								      
@media only screen and (min-width: 600px) and (orientation: portrait) {
 	
	.header {
		padding: 18px 10px !important;
		background: #fff;
	}

	.logo img {
		width: 100%;
		min-width: 100% !important;
		max-width: 100% !important;
	}


	.bolton img {
		width: 143px;
		height: auto;
		display: block;
		margin: 0px;
		padding: 5px 0px 0px 10px;
		
	}




	.menu__link {
		font-size: 14px;
		color: #6c6d70;
		display: block;
		padding: 10px 14px 8px 14px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}



	#splashArea {
		width: 100%;
		height: 700px;
		display: block;
		z-index: 200;
		top: 0px;
		margin: 0px 0px 0px 0px;
		border: 0px;
		padding: 0px 0px 0px 0px;
		
		background: url('../images/video-bg.jpg');
		 -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
		 
	}

	.splashTxt h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 42px;
		line-height: 60px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #fff;
		padding: 0px 40% 0px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
	}

	#particles-js {
		width: 100%;
		max-width: 90%;
		height: 100%;
		position: absolute;
		padding: 0px;
		margin: 0px;

	}
	
	
	.aboutColourBlock {
		font-family: 'Work Sans', sans-serif;
		font-size: 14px;
		line-height: 16px;
		font-weight: 300;
		letter-spacing: 0px;
		color: #fff;
		padding: 20px;
		background: transparent;
	}	
	
	#productsArea { 
		padding: 30px 20px;

	}
	
	
	
	#contactArea { 
		padding: 40px 20px;

	}
	

	#botStrip { 
		padding: 20px 20px;
	}	
  
}

								      /*****************
								      // -----------------
								      // FOR TABLET LANDSCAPE
								      // _________________
								      // *****************/


@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){

	.header {
		padding: 18px 10px !important;
		background: #fff;
	}
	
	.logo img {
		width: 100%;
		min-width: 100% !important;
		max-width: 100% !important;
	}


	.bolton img {
		width: 143px;
		height: auto;
		display: block;
		margin: 0px;
		padding: 5px 0px 0px 10px;
		
	}



	.headerLinks a {
		padding: 10px 20px 8px 20px;
	}

	#particles-js {
		width: 100%;
		max-width: 90%;
		height: 100%;
		position: absolute;
		padding: 0px;
		margin: 0px;

	}

	.aboutColourBlock {
		font-family: 'Work Sans', sans-serif;
		font-size: 14px;
		line-height: 16px;
		font-weight: 300;
		letter-spacing: 0px;
		color: #fff;
		padding: 20px;
		background: transparent;
	}
	
	#productsArea { 
		padding: 30px 20px;

	}
	
	
	
	#contactArea { 
		padding: 40px 20px;

	}
	

	#botStrip { 
		padding: 20px 20px;
	}	
	
	
}



								      /*****************
								      // -----------------
								      // FOR 320PX SCREENS PORTRAIT
								      // _________________
								      // *****************/

  @media (max-device-width: 320px)
  and (orientation: portrait) {
  	
  	
	
	#splashArea {
		width: 100%;
		height: 360px;
		display: block;
		z-index: 200;
		top: 0px;
		margin: 0px 0px 0px 0px;
		border: 0px;
		padding: 0px 0px 0px 0px;
		background: url('../images/video-bg.jpg');
		background-position: top left;
		 -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
	}
  	
  	
	.splashTxt h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 20px;
		line-height: 24px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #fff;
		padding: 0px 20% 0px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
	}
	
	.splashButton {
		font-size: 16px;
		font-weight: 300;
		padding: 8px 16px 6px 16px;
	}
	
  
}




								      /*****************
								      // -----------------
								      // IPAD PRO 12INCH
								      // _________________
								      // *****************/


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

	.menu__link {
		font-size: 16px;
		color: #6c6d70;
		display: block;
		padding: 10px 14px 8px 14px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	
	
	
	#splashArea {
		width: 100%;
		height: 700px;
		display: block;
		z-index: 200;
		top: 0px;
		margin: 0px 0px 0px 0px;
		border: 0px;
		padding: 0px 0px 0px 0px;
		
		background: url('../images/video-bg-tablet.jpg');
		background-position: top right;
		 -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		  background-size: cover;
		 
	}

	.splashTxt h1 {
		font-family: 'Work Sans', sans-serif;
		font-size: 42px;
		line-height: 60px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #fff;
		padding: 0px 40% 0px 0px;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.6);
	}	
	
	
	.aboutColourBlock {
		font-family: 'Work Sans', sans-serif;
		font-size: 16px;
		line-height: 20px;
		font-weight: 300;
		letter-spacing: 0px;
		color: #fff;
		padding: 40px;
		background: transparent;
	}	
	
	
	
	
	
	
}








								      /*****************
								      // -----------------
								      // TO FIX DESKTOP ELEMENTS
								      // _________________
								      // *****************/



@media only screen and (min-width: 1200px) {
 
 

 

  
}