/* 
  Author: Orqa Design
  Author URI: http://orqadesign.com/
  Description: 2017 Website for Star UK Engineering Ltd
  Version: 1.0
  License: For use by Star UK Engineering Ltd Only
  */

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
.fa-bars:before { content: "\f0c9" }
.fa-instagram:before { content: "\f16d" }
.fa-angle-left:before { content: "\f104" }
.fa-angle-right:before { content: "\f105" }
.fa-envelope-o:before { content: "\f0e0" }
.fa-facebook:before { content: "\f09a" }
.fa-user:before { content: "\f007" }
.fa-calendar:before { content: "\f073" }
.fa-star:before { content: "\f005" }
.fa-check-circle-o:before { content: "\f05d" }
.fa-check-circle:before { content: "\f058" }
.fa-map-pin:before { content: "\f276" }
.fa-clock-o:before { content: "\f017" }
.fa-youtube:before { content: "\f167" }
.fa-arrow-circle-o-left:before { content: "\f190" }
.fa-arrow-circle-o-right:before { content: "\f18e" }
.fa-download:before { content: "\f019" }
.fa-angle-double-up:before { content: "\f102" }
.fa-angle-double-right:before { content: "\f101" }
.wrapper { width: 1400px; margin: 0 auto; }
.inner-wrapper { padding-left: 70px; padding-right: 70px; box-sizing: border-box; width: 100%; float: left; }
body { font-family: 'Roboto', sans-serif; }
b { }
.left { float: left; }
.right { float: right; }
html { scroll-behavior: smooth; }
a { text-decoration: none; }
a:hover { }
.clear { clear: both; }
.heading-bar { background-color: #ff901b; padding-top: 20px; padding-bottom: 20px; text-align: center; width: 100%; float: left; }
.heading-bar h1 { color: #ffffff; font-size: 23px; line-height: 23px; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
h3 { font-size: 53px; line-height: 63px; text-align: center; color: #ffffff; font-weight: 300; letter-spacing: -1px; padding-bottom: 60px; }
h4 { font-size: 47px; line-height: 57px; color: #ff901b; font-weight: 900; text-transform: uppercase; text-align: center; }
h2 { color: #112953; font-size: 30px; font-weight: 900; padding-bottom: 30px; }
.logo-icon { width: 40%; float: left; text-align: right; box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; }
.logo-area, .menu { width: 60%; float: left; text-align: left; padding-left: 50px; box-sizing: border-box; padding-top: 40px; }
.tel-sticky { float: right; border: 5px solid #ff901b; padding: 10px 15px; color: #112953; font-size: 24px; font-weight: 900; display: block; margin-top: -5px; }
.hero { width: 100%; float: left; padding-top: 100px; padding-bottom: 100px; }
.tel-sticky a { color: #112953; }
.tel-sticky .fa { color: #ff901b; }
.menu a { color: #112953; font-size: 18px; font-weight: 900; text-transform: uppercase; display: inline-block; padding-right: 20px; }
.services { color: #112953; font-size: 18px; line-height: 26px; font-weight: 300; text-align: justify; padding-top: 50px; padding-bottom: 70px; width: 100%; float: left; }
.services-wrap { text-align: center; }
.service { width: 25%; display: inline-block; text-align: center; vertical-align: top; box-sizing: border-box; padding: 45px; font-weight: 400; }
.about { background-color: #ff901b; font-weight: 300; color: #fff; height: 450px; margin-bottom: 100px; overflow: hidden; }
h6 { font-size: 36px; line-height: 36px; padding-bottom: 30px; margin-top: -10px; text-align: left; }
p { margin-bottom: 20px; }
.about p { font-size: 18px; line-height: 26px; }
.about .left { width: 50%; float: left; text-align: justify; padding-right: 30px; box-sizing: border-box; padding-top: 70px; padding-bottom: 70px; }
.about .right { width: 30%; float: right; }
.about h2 { color: #fff; }
.about .right img { margin-top: -30px; }
.training ul li:before { font-family: 'FontAwesome'; content: '\f132'; margin: 0 15px 0 -15px; color: #ff901b; font-size: 24px; float: left; display: block; }
.training ul li { padding-left: 20px; padding-bottom: 15px; font-weight: 300; font-size: 18px; color: #112953; width: 100%; float: left; box-sizing: border-box; }
.reform { float: right; margin-top: -100px; padding-bottom: 100px; }
.portfolio { text-align: center; }
.port-img img { width: 100%; }
.port-img { width: 19.2%; margin-right: 1%; margin-bottom: 1%; display: inline-block; }
.port-img:nth-of-type(5n) { margin-right: 0%; }
.reviewsbutton { border: 5px solid #ff901b; padding: 10px 15px; color: #112953; font-size: 24px; font-weight: 900; }
.reviewsbutton .fa { color: #ff901b; }
.reviews { padding-top: 100px; padding-bottom: 100px; width: 100%; float: left; }
.reviews p { color: #112953; }
.tagline { font-weight: 900; color: #fff; text-transform: uppercase; font-size: 24px; line-height: 34px; background-color: #112953; padding-top: 20px; padding-bottom: 20px; }
.tagline .tag { width: 60%; }
.contact { padding-top: 100px; padding-bottom: 100px; width: 100%; float: left; }
.contact h2 { color: #ff911e; font-size: 60px; line-height: 65px; font-weight: 300; letter-spacing: -2px; }
.socialmedia { float: right; margin-top: -90px; }
.socialmedia a { color: #ff911e; font-size: 60px; color: #ff911e; margin-left: 10px; text-decoration: none; }
.tel, .email { color: #112953; font-weight: 900; font-size: 30px; line-height: 30px; padding-bottom: 10px; }
.tel .fa, .email .fa { color: #ff901b; padding-right: 10px; }
.copyright { color: #112953; font-size: 14px; line-height: 18px; font-weight: 300; padding-top: 50px }
.copyright a { color: #112953; }
img.handy { float: right; margin-top: -700px; }
.email a { color: #112953; }
.fb-reviews { min-height: 200px; }
/* Menu */

.menu a:nth-of-type(5) { padding-right: 0%; }
html, body { overflow-x: hidden; }
/* Fade Transition */
a.button, a, .circlebutton, .wpcf7-submit, button, .circle-button .buttontitle { -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; opacity: 1; }
a.button:hover, a:hover, .circlebutton:hover, .wpcf7-submit:hover, button:hover, .circle-button .buttontitle:hover { opacity: 0.5; }
 @media screen and (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* IE11 hide native button*/
select::-ms-expand {
display: none;
}
 @supports (-webkit-overflow-scrolling: touch) {
}
}
 @media all and (-ms-high-contrast:none) {
 *::-ms-backdrop, .my_elements_with_border_radius {
border-radius: 0
}
}
 _::-webkit-full-page-media, _:future, :root .safari-class {
 font-weight: 500;
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/

@media only screen and (max-width:1470px) {
.wrapper { width: 1200px; }
.service { padding: 45px 25px; }
.about .left { width: 60%; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/

@media only screen and (max-width:1270px) {
.wrapper { width: 1000px; }
.logo-icon { width: 30%; }
.logo-area, .menu { width: 70%; }
.service { padding: 45px 0px; }
.about { height: 500px; }
.about .right img { margin-top: 0px; width: 380px; }
img.handy { margin-right: -100px; }
.tagline .tag { width: 50%; }
.socialmedia { margin-right: -90px; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:1050px) {
.wrapper { width: 800px; }
.logo-icon img { width: 100%; }
.logo-area, .menu { width: 79%; padding-left: 10px; }
.logo-icon { width: 21%; padding-top: 80px; }
.menu { padding-bottom: 50px; }
.service { padding: 45px 10px; }
.service img { width: 100%; }
.about .left { width: 66%; padding-right: 30px; padding-top: 60px; padding-bottom: 70px; }
.reviews .inner-wrapper { padding-left: 0px; padding-right: 0px; }
img.handy { margin-right: -100px; width: 500px; margin-top: -600px; }
.tel, .email { font-size: 24px; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:850px) {
.wrapper { width: 700px; }
.right { width: 100%; float: none; }
.left { width: 100%; float: none; }
.menu { width: 100%; text-align: center; padding-top: 10px; padding-left: 0px; }
.logo-area { width: 63%; }
.logo-icon { width: 30%; padding-top: 70px; }
.menu a { padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
.inner-wrapper { padding-left: 0px; padding-right: 0px; }
.tagline .tag { width: 40%; }
.tel, .email { font-size: 18px; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:720px) {
.wrapper { width: auto; margin-left: 40px; margin-right: 40px; }
.logo-area img { width: 100%; }
.service { width: 50%; }
.service img { width: initial; }
.about .left { width: 100%; padding-bottom: 20px; padding-right: 0px; }
.about { height: initial; }
.about .right { width: 100%; padding-bottom: 70px; }
.about .right img { width: 100%; }
.reform { float: none; margin-top: 20px; }
.training ul li:nth-of-type(2):before { padding-bottom: 20px; }
.port-img { width: 49%; }
img.handy { margin-right: 0px; width: 300px; margin-top: -550px; }
.tagline .tag { width: 50%; }
.socialmedia { margin-right: 0px; }
.tel, .email { font-size: 30px; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:650px) {
.socialmedia { margin-right: 0px; float: none; margin-top: 0px; margin-bottom: 30px; }
img.handy { margin-right: 0px; width: 250px; margin-top: -500px; }
}

/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:540px) {
.wrapper { width: auto; margin-left: 20px; margin-right: 20px; }
.logo-icon { width: 30%; padding-top: 70px; padding-right: 0px; }
h3 { font-size: 43px; line-height: 43px; }
.hero { padding-top: 50px; padding-bottom: 50px; }
h4 { font-size: 27px; line-height: 27px; }
.tagline .tag { width: 45%; }
img.handy { margin-right: -10px; }
.tel, .email { font-size: 17px; }
}


/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:450px) {
.service img { width: 100%; }
.training ul li:before { padding-bottom: 20px; }
.training ul li { padding-bottom: 20px; }
.training ul li:nth-of-type(2):before { padding-bottom: 40px; }
img.handy { margin-right: 0px; width: 100%; margin-top: -80px; margin-right: 0px; }
.tagline .tag { width: 100%; text-align: center; }
.reviewsbutton { display: block; text-align: center; }
.contact h2, .socialmedia, .tel, .email, .copyright { text-align: center; }
}
/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:370px) {
.logo-icon { padding-top: 20px; }
.tel-sticky { float: none; text-align: center; }
.training ul li:nth-of-type(2):before { padding-bottom: 50px; }
}


/*-------------------- MEDIA QUERIES --------------------------------------------*/
 @media only screen and (max-width:319px) {
body { min-width: 319px; }
}