@charset "utf-8";
/*-----------------------------------------------------------------------------------*/
/* SHARED ELEMENTS                                                                   */
/*-----------------------------------------------------------------------------------*/


.pc_off { display: none}
.tablet_off { display: block}


body{ background-color:#081d34;font-family: 'Lato', sans-serif; font-size:18px; line-height:1.4em; color:#dddddd; font-weight: 300;}
body {
  animation: pageFade 0.4s ease;
}

@keyframes pageFade {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

h1 {font-size:36px; line-height:1.4em; margin-bottom:1em}

strong {color:#ffffff;}

p { margin-bottom:1em}

a { color:#b98700;
  text-decoration: none;}
a:hover{color:#6eb6de}

.image_hvac { float:right; margin:20px; margin-right:0; margin-top:0; width:400px; height:auto;}



.main_width { max-width:1400px; margin:auto auto; padding-left:20px; padding-right:20px; border:0px solid red}
.clear_both {clear: both; line-height:0; height:0; overflow:hidden; border:0px solid white}


.learn_more{text-transform:uppercase; color:#a97c06; font-size:13px; letter-spacing:0.1em; text-decoration:none; padding-left:40px;display:block; width:140px; border:0px solid red;}

.learn_more a { 
  text-decoration: none;
  position: relative;
  padding-bottom:1px;
  border:0px solid white;
}



.learn_more a:after {
  content: '';
  position: absolute;
  top: 7px;
  left: -40px;
  width: 26%;
  transition: 0.4s;
  border-bottom: 1px solid #5f9fc3;
}

.learn_more a:hover:after {width: 190%;}
.learn_more a:hover { color:#5f9fc3}




/* content - has required text objects... */
/* Crossbrowser Solution */
.content ul{list-style-type: none;padding: 0px;margin: 0px;line-height:3.0em; margin-bottom:2em; border:0px solid red}
.content li{background-image:url(images/bullet.png) ;background-repeat: no-repeat; background-position: 26px 23px;padding-left: 50px;}



/* ---- hero ---- */
.non_hero_padding { padding-top:100px}
.hero_container{ height:500px;  border:0px solid white; overflow:hidden}
.parallax {position:absolute; width:100%; height:500px; z-index:10;}
.parallax_tablet { display:none}
.hero_opacity{ height:500px;width:100%; position:absolute; background-color:#000; opacity: 0.2;}
.hero_texture{ height:500px; width:100%; position:absolute; background-image:url(images/hero/chevrons.png), url(images/hero/gradient.png); background-repeat:no-repeat, repeat-x;background-position:right, bottom;}
.hero_content{ height:520px; position:absolute; border:0px solid red;  z-index:100;  }
.hero_text { width:calc(100%-100px); min-width:340px; padding-top:300px; padding-left:100px; color:#dddddd; font-size:24px; line-height:1.6em;}
.hero_text h1{ font-size:40px; margin-bottom:0; line-height:36px}
.hero_text h2{ font-size:24px; margin-bottom:0; line-height:34px}

.hero_height_home {height:707px;}
.hero_height_home_mask {height:707px;}
.hero_text_home { padding-top:380px; width:30%;}
/* the texture and opacity layers needed mask bar underneath to stop flashing during rendering... */
.hero_mask_bar{ height:100px; width:100%; position:relative; top:-0px; background-color:#081d34}



/* ---- reveal (Y)---- */
.reveal{
  position: relative;
  transform: translateY(60px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}


/* ---- reveal X---- */
.reveal_x{
  position: relative;
  transform: translateX(-60px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal_x.active{
  transform: translateX(0);
  opacity: 1;
}


/* ---- reveal X load---- */
.reveal_x_load{
  position: relative;
  transform: translateX(-60px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal_x_load.active{
  transform: translateX(0);
  opacity: 1;
}



/*-----------------------------------------------------------------------------------*/
/* TEMPLATE                                                                          */
/*-----------------------------------------------------------------------------------*/
/*slde togle doesnt work with position fixed - so use menue 0 to 100%*/
header{min-height:181px;  border-bottom:1px solid #2b639e; background-color:rgba(3, 19, 36, 0.9); display:block;  position:fixed; top:0; left:0; z-index:1000; width:100%; transition:0.5s all ease; height:103px; display:block}
#open { width:0}

.spacer {height:181px}

.header_top{ height:103px;  background-color:#000000}

.logo{ float:left; height:45px; width:277px; margin-top:30px; position:relative;}
.logo{transition: 0.6s;}
.logo:hover{opacity:0.5}

.UKAS_accredited_logo {float:right;transition: 0.6s;}
.UKAS_accredited_logo:hover{opacity:0.5}

.header_phone { float:right; width:256px; font-size:18px; color:#6eb6de; text-align:center; padding-top:33px; height:70px; border-left:1px solid #2b639e; }
.header_phone img{ position:relative; top:4px; left:-20px}

.header_login { float:right; text-align:right; width:256px; font-size:18px; color:#6eb6de;padding-top:39px; border:0px solid red}
.header_login a{ color:#dddddd; margin-right:20px; border:0px solid green}
.header_login a{ transition: 1s;}
.header_login a:hover{ color:#b98700}
.header_login span{ border:0px solid #2b639e; background-color:#081d34; padding:16px; padding-left:24px}
.header_login img{ position:relative; top:4px; left:-8px}



.scroll_to_top { margin-top:-83px; height:83px; margin-right:40px;cursor: pointer;}
.scroll_to_top img{height:43px; width:43px; float:right; background-color:#000000; border:1px solid white}
.scroll_to_top img:hover{background-color:#a97c06; transition:0.5s}


/*--- footer */
footer{border-top:1px solid #2b639e; background-color:#000000; font-size:13px;}
footer .links{border-left:1px solid #2b639e; border-right:1px solid #2b639e}

footer .phone{ display:inline-block;  padding-left:84px;border-right:0px solid #2b639e;  font-size:18px; color:#6eb6de; text-align:center; padding-left:8px; padding-right:8px }
footer .phone img{ position:relative; top:4px; left:-20px}

footer .links{display:inline-block;  padding-left:8px; padding-right:8px; letter-spacing:0.05em;  }
footer .links a{ text-transform:uppercase}

footer .copyright{display:inline-block; padding-left:8px; padding-right:8px }
footer .copyright a{ color:#dddddd}

footer .certificates {display:inline-block;text-align:right;height:103px; background-color:#000000; }
footer .certificates div{display:inline-block;text-align:right; white-space: nowrap;height:103px; width:296px; overflow:hidden;background-color:#ffffff;}
footer .certificates img{transition: 0.6s;}
footer .certificates img:hover{opacity:0.5}


footer .center_table {display: table; width:100%}
footer .center_cell {display: table-cell; width:100%; vertical-align: middle; text-align:center; height: 103px;}



footer {display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  }

@media screen and (max-width: 1024px) {
  footer {grid-template-columns: 50fr 50fr;}
  footer .copyright{border-top:1px solid #2b639e}
  footer .certificates{border-top:1px solid #2b639e}
}

@media screen and (max-width: 760px) {
  footer {grid-template-columns: 100fr;}
  footer .center_cell {height: 53px;}
  footer .phone{border:0; padding-top:25px}
  footer .links{border-top:0px; padding-top:0; padding-left:50px;}
  footer .links{border-left:0; border-right:0}
  footer .copyright{padding-top:0; border-top:0; padding-bottom:25px }
  footer .certificates{border-top:0px; border:0; border-top:0px solid #2b639e; text-align:right}
}




/*-----------------------------------------------------------------------------------*/
/* SECTOR BUTTONS                                                                    */
/*-----------------------------------------------------------------------------------*/

.sector_buttons {display: grid;
  grid-template-columns: 33fr 33fr 33fr;
  }
  


  
.sector_buttons a .button .opacity {transition: 0.6s; background-color:rgba(3, 19, 36, 0.65)}
.sector_buttons a .button:hover .opacity {background-color:rgba(3, 19, 36, 0.90)}

.sector_buttons a .button .button_bar .learn_more_button {text-transform:uppercase; color:#a97c06; font-size:13px; letter-spacing:0.1em; text-decoration:none; padding-left:34px;display:block; width:140px;}
.sector_buttons a .button .button_bar .learn_more_button { 
  position: relative;
  top:-6px;
}

.sector_buttons a .button .button_bar .learn_more_button:after {
  content: '';
  position: absolute;
  top: 13px;
  left: -10px;
  width: 14%;
  transition: 0.4s;
  border-bottom: 1px solid #5f9fc3;
}

.sector_buttons a .button:hover .button_bar .learn_more_button:after {width: 100%;}
.sector_buttons a .button:hover .button_bar .learn_more_button {color:#5f9fc3}



.button{border-top:1px solid;  background-repeat:no-repeat; background-size: cover;}
.opacity{height:450px;}
.button h2{ font-size:36px; padding:0; line-height:56px;margin-top:0; margin-bottom:28px}

.button_text {height:342px; padding:50px; padding-top:58px; font-size:16px; color:#dddddd}
.button_bar { height:60px; position:relative; top:-60px; background-image:url(images/homepage/bar_bg.png); background-repeat:repeat-x}

.icon { height:60px; width:60px; float:right;}
.learn_more_margin{ float:left; margin-top:24px; margin-left:30px; border:0px solid red}



.aerospace{border-color:#9e0b0f;  background-image: url(images/homepage/buttons/areospace.jpg)}
.nuclear{border-color:#dc5800;  background-image: url(images/homepage/buttons/nuclear.jpg)}
.high_precision{border-color:#b98700;  background-image: url(images/homepage/buttons/high_precision.jpg)}
.facilities_management {border-color:#3cb878; background-image: url(images/homepage/buttons/facilities_management.jpg)}
.havac {border-color:#5f9fc3; background-image: url(images/homepage/buttons/havac.jpg)}
.carbon_composites {border-color:#662d91; background-image: url(images/homepage/buttons/carbon_composites.jpg)}

@media screen and (max-width: 1224px) {
  .sector_buttons {grid-template-columns: 50fr 50fr;}

  .aerospace{border-color:#9e0b0f;  background-image: url(images/homepage/buttons/tablet-optimised/areospace.jpg)}
  .nuclear{border-color:#dc5800;  background-image: url(images/homepage/buttons/tablet-optimised/nuclear.jpg)}
  .high_precision{border-color:#b98700;  background-image: url(images/homepage/buttons/tablet-optimised/high_precision.jpg)}
  .facilities_management {border-color:#3cb878; background-image: url(images/homepage/buttons/tablet-optimised/facilities_management.jpg)}
  .havac {border-color:#5f9fc3; background-image: url(images/homepage/buttons/tablet-optimised/havac.jpg)}
  .carbon_composites {border-color:#662d91; background-image: url(images/homepage/buttons/tablet-optimised/carbon_composites.jpg)}
}
 
@media screen and (max-width: 760px) {
  .sector_buttons {grid-template-columns: 100fr;}
}

@media screen and (max-width: 440px) {
  .button_text {height:372px; padding-top:28px;}
  .button h2{ font-size:24px; margin-bottom:4px; line-height:30px}
}




/*-----------------------------------------------------------------------------------*/
/* WHY CHOSE US                                                                      */
/*-----------------------------------------------------------------------------------*/
.why_chose_us { height:86px; padding-top:90px;  padding-bottom:0px; text-align:center; }
.why_chose_us h2{ font-size:36px}

.why_button_area {
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-rows: 1fr;
  }

@media screen and (min-width: 761px) and (max-width: 1224px) {
  /*.why_button_area {grid-template-columns: 33fr 33fr 33fr;} LEAVES AN ODD PANEL AT THE END*/
  .why_button_area {grid-template-columns: 50fr 50fr;}
}
 
@media screen and (max-width: 760px) {
  .why_button_area {grid-template-columns: 50fr 50fr;}
}

@media screen and (max-width: 600px) {
  .why_button_area {grid-template-columns: 100fr;}
}

  
.why_button_area div {display:inline-block; padding:40px; padding-top:36px; padding-bottom:10px; text-align:center; background-color:#031324; font-size:16px}
.why_button_area div h2{ font-size:24px; margin-bottom:1em; margin-top:1em}



/*-----------------------------------------------------------------------------------*/
/* CAPABILITIES                                                                      */
/*-----------------------------------------------------------------------------------*/
.capabilities {
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-rows: 1fr;
  }

@media screen and (min-width: 761px) and (max-width: 1024px) {
  .capabilities {grid-template-columns: 33fr 33fr 33fr;}
}
 
@media screen and (max-width: 760px) {
  .capabilities {grid-template-columns: 50fr 50fr;}
}

@media screen and (max-width: 600px) {
  .capabilities {grid-template-columns: 100fr;}
}


.capabilities div {display:inline-block; background-color:#031324; padding:20px; padding-left:80px; text-align:center; background-repeat:no-repeat; background-position:20px 50%; border:0px solid white}

.capabilities div.gas { background-image:url(images/capabilities/gas.png)}
.capabilities div.environment { background-image:url(images/capabilities/environment.png)}
.capabilities div.gas_storage { background-image:url(images/capabilities/gas_storage.png)}
.capabilities div.oven { background-image:url(images/capabilities/oven.png)}
.capabilities div.battery { background-image:url(images/capabilities/battery.png)}


.capabilities div.electrical_lab { background-image:url(images/capabilities/electrical_lab.png)}
.capabilities div.thermometer { background-image:url(images/capabilities/thermometer.png)}
.capabilities div.pressure { background-image:url(images/capabilities/pressure.png)}

.capabilities div.dimensions { background-image:url(images/capabilities/dimensions.png)}
.capabilities div.weight { background-image:url(images/capabilities/weight.png)}
.capabilities div.torque { background-image:url(images/capabilities/torque.png)}
.capabilities div.wind { background-image:url(images/capabilities/wind.png)}






/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM (Get in Touch)                                                       */
/*-----------------------------------------------------------------------------------*/




.get_in_touch_form { width:40%; padding:0px; padding-top:60px; padding-bottom:80px; font-size:18px}
.get_in_touch_form .hide_long { display:inline-block}

.get_in_touch_form .form_row { font-size:16px; margin-top:-4px; background-image:url(images/underline_unit.png); background-repeat:repeat-x; background-position:0 32px}
.get_in_touch_form .form_row_message {background-position:0 111px}
.get_in_touch_form .form_row label {color:#69aed5; margin-right:5px}
.get_in_touch_form .form_row input {background-color: transparent; border:0; height:30px; color:#dddddd; position:relative;top:-2px;font-size:15px;}
.get_in_touch_form .form_row textarea {height:100px; position:relative; top:0px; background-color:transparent;color:#dddddd; border:0}

.get_in_touch_form .form_row {display: flex;}       /*flex */
.get_in_touch_form .form_row div {flex-grow: 1;}    /* fill remining space*/
.get_in_touch_form .form_row div input{ width:100%}
.get_in_touch_form .form_row div textarea{ width:100%}


.get_in_touch_form input[type=submit] {transition: 1s; margin-top:30px; color:#dddddd; background-color:#081d34; border:0; text-transform:uppercase; padding:10px; padding-right:20px; padding-left:40px; height:48px; background-image: url(images/icon_submit.png); background-repeat:no-repeat; background-position: 16% 50%}
.get_in_touch_form input[type=submit]:hover{ color:#b98700}




.get_in_touch {background-image:url(images/hero/contact.jpg); background-repeat:no-repeat; background-size:  2000px 1001px; background-position:right bottom; background-color:#07142a}

@media screen and (max-width: 1600px) {
  .get_in_touch_form { width:50%;}
  .get_in_touch {background-size:  1600px 800px; background-position:right bottom; }
}

@media screen and (max-width: 1024px) {
  .get_in_touch {background-image:url(images/hero/tablet-optimised/contact.jpg);}
  .get_in_touch {background-size:  1024px 500px; background-position:right bottom; }
  .get_in_touch_form { width:70%;}
  .get_in_touch_form .hide_long { display:none}
}

@media screen and (max-width: 800px) {
  .get_in_touch {background-size:  800px 500px; background-position:right bottom; }
  .get_in_touch_form { width:100%;}
}


<!-- http://projects.verou.me/bubbly/  -->
.speech_bubble_pos { position:absolute; width:100%}



.speech_bubble img{ margin-right:5px; position:relative; top:4px;}

.speech_bubble {
	display:block;
	margin-top:-26px;
	width:calc(100%-14px);
	padding-left:7px; padding-right:7px;
	height:30px;
	position: relative; top:2px;
	background: transparent;
	border-radius: 4px;
	font-size:16px;
}

.speech_bubble_before {
	display:inline-block;
	position: relative;
	top: -5px;
	left: 17px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-bottom-color: transparent;
	border-top: 0;
	margin-left: -8px;
	margin-top: -8px;
}


@media screen and (max-width: 600px) {
   .speech_bubble {font-size:14px;}
}



/*-----------------------------------------------------------------------------------*/
/* CONTACT PAGE                                                                      */
/*-----------------------------------------------------------------------------------*/
.padding_top {padding-top:10px; }
.contact_row { margin-bottom:50px}

.squiggle_outside{ color:#b98700; text-decoration:none}
.squiggle { display:none}


/*-----------------------------------------------------------------------------------*/
/* SECTOR PAGE                                                                       */
/*-----------------------------------------------------------------------------------*/
.sector_padding { padding-top:0px; padding-bottom:60px;}
.sector_lhs{ width:25%; float:left; border:0px solid red}
.sector_lhs h2 { font-size:32px; line-height:1.4em;}
.sector_rhs{ margin-left:5%; width:70%; float:left; border: 0px solid red}



/*-----------------------------------------------------------------------------------*/
/* PORTAL                                                                            */
/*-----------------------------------------------------------------------------------*/

.portal { background-color:#031324; margin-top:140px;}
.portal_lhs { float:left; width:60%; max-height:380px; border:0px solid white}
.portal_lhs img{ width:100%; height:auto; position:relative; top:-50px;  }
.portal_rhs { float:left; width:40%; padding-top:80px; border:0px solid green}


/*-----------------------------------------------------------------------------------*/
/* QUALITY                                                                           */
/*-----------------------------------------------------------------------------------*/

.quality { background-color:#17344d;}
.quality img{ float:right; margin-left:20px;}
.quality h1{ padding-top:80px}





/*-----------------------------------------------------------------------------------*/
/* MENU                                                                              */
/*-----------------------------------------------------------------------------------*/
.header_bottom_rhs { width:20%; float:right; display:block; padding-top:27px; border:0px solid red;  font-size:16px; letter-spacing:0.05em; }
.header_bottom_rhs ul { width:calc(100%-2px); padding:0; margin:0; text-align:right; border:0px solid red; margin-right:20px}
.header_bottom_rhs li {display:inline-block; background-image:none; padding:0; margin:0; margin-left:8%}
.header_bottom_rhs .margin_left { margin-left:0}
.header_bottom_rhs a{ text-transform: uppercase; color:#b98700;}
.header_bottom_rhs a:hover{color:#6eb6de}

.header_bottom_rhs a { 
  text-decoration: none;
  position: relative;
  padding-bottom:26px;
  border-bottom: 0px solid #000;
}

.header_bottom_rhs a:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  transition: 0.4s;
}


.header_bottom_rhs a:hover:after {width: 100%;}
.header_bottom_rhs a.active_quality:after {border-bottom: 2px solid #ffffff}
.header_bottom_rhs a.active_contact:after {border-bottom: 2px solid #ffffff}
.header_bottom_rhs a.active { border-bottom:2px solid; color:#6eb6de}
.header_bottom_rhs a.active_quality { border-bottom-color: #ffffff}
.header_bottom_rhs a.active_contact { border-bottom-color: #ffffff}





nav { padding-top:27px;  width:80%; min-height:51px; float:left;font-size:16px; letter-spacing:0.05em; background-repeat:repeat-y; background-image:url(images/underline_unit.png); background-position:100% 0 }
nav ul {padding:0; margin:0; display: flex; justify-content:space-between; border:0px solid red}

.lhs_margin {margin-left:60px}
.rhs_margin {margin-right:100px}




nav li {display: inline-block; background-image:none; padding:0; margin:0;}
nav li a {color:#dddddd; text-transform:uppercase}
nav li a {}
nav li a:hover{color:#6eb6de}


nav li a { 
  text-decoration: none;
  position: relative;
  padding-bottom:26px;
  border-bottom: 0px solid #000;
}



nav li a:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  transition: 0.4s;
}

nav li a:hover:after {width: 100%;}

nav li a.active_index:after {border-bottom: 2px solid #fff}
nav li a.active_aerospace:after {border-bottom: 2px solid #9e0b0f}
nav li a.active_nuclear:after {border-bottom: 2px solid #dc5800}
nav li a.active_precision:after {border-bottom: 2px solid #b98700}
nav li a.active_facilities:after {border-bottom: 2px solid #3cb878}
nav li a.active_hvac:after {border-bottom: 2px solid #5f9fc3}
nav li a.active_carbon:after {border-bottom: 2px solid #662d91}
nav li a.active_quality:after {border-bottom: 2px solid #ffffff}
nav li a.active_contact:after {border-bottom: 2px solid #ffffff}

nav li a.active { border-bottom:2px solid; color:#6eb6de}

nav li a.active_index { border-bottom-color: #fff}
nav li a.active_aerospace {border-bottom-color: #9e0b0f}
nav li a.active_nuclear {border-bottom-color: #dc5800}
nav li a.active_precision {border-bottom-color: #b98700}
nav li a.active_facilities {border-bottom-color: #3cb878}
nav li a.active_hvac {border-bottom-color: #5f9fc3}
nav li a.active_carbon {border-bottom-color: #662d91}
nav li a.active_quality {border-bottom-color: #ffffff}
nav li a.active_contact {border-bottom-color: #ffffff}

@media screen and (max-width: 1600px) {
  nav {font-size:14px;}
  .header_bottom_rhs {font-size:14px; }
  .rhs_margin {margin-right:20px}
  .lhs_margin {margin-left:40px}
}

@media screen and (max-width: 1240px) {
  .rhs_margin {margin-right:10px}
  .lhs_margin {margin-left:20px}
}

@media screen and (max-width: 1100px) {
  nav {font-size:13px;}
  .header_bottom_rhs {font-size:13px; }
  .rhs_margin {margin-right:10px}
  .lhs_margin {margin-left:10px}
}