@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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;
    width: 100%;
}
/*-
--------------------------- START STYLES /*



/* LAYOUT */
/*html{scroll-behavior:smooth}*/
section, .content, .content-lrg, .mission, .vision, .values, nav, footer {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
}
sub, sup {
    font-size: 0.7em;
}
sup {
    vertical-align: top;
}
.table {
    display: table;
    width: 100%;
}
.table-auto {
    table-layout: auto;
}
.table-cell  {
    display: table-cell;
}
.product-table-cell {
    display: block;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: auto;
}
.flex {
    display: flex;
}
.flex-reverse {
    flex-direction: row-reverse;
}
.flex-column {
    display: flex;
    flex-flow: column;
}
.flex-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}

/* WRAPPERS */
.wrapper, .wrapper-index, .wrapper-products, .wrapper-services, .wrapper-about, .wrapper-product-overview {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
    z-index: 1;
}

.wrapper-services li {
	margin-bottom: 15px;
}
.wrapper {
    margin-top: 200px;
}
.wrapper-index {
    text-align: center;
    margin-top: 775px;
}
.wrapper-about {
    margin-top: 780px;
}

.wrapper-products img {
    max-width: 600px;
    width: 100%;
}
.main-content {
    width: 100%;
    height: 100%;
    position: relative;
}
.home-content {
	
	width: 100%;
	height: 100%;
	position: relative;
	
}
.absolute {
	position: absolute;
	top: 200px;
}
.content, .content-lrg, .container-products {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}
.content {
    padding: 3em 1.5em;
}

.product-banner-img, .container-products {
    padding: 3em 1.5em;
}
.content-lrg {
    padding: 4em 1.5em 5em 1.5em;
}
.product-wrapper {
    width: 90%;
    margin: 0 auto;
}

/* ALIGN */

.v-align-top {
    vertical-align: top;
}
.mission, .vision {
    text-align: center;
}

/* DISPLAY */

.none-table-cell {
    display: none
}

/* ASIDE */

.docs-table {
    display: table;
    margin-top: 3em;
    margin: 0 auto;
}
.docs-table a.button {
    display: block;
    vertical-align: middle;
}
.docs-table li {
    display: block;
}
.mission, .vision, .values {
    padding: 3em;
    width: 100%;
}
.vision {
    margin: 0;
}
.values li {
    color: #fff;
    display: block;
}
.content-icon {
    width: 50%;
    max-width: 70px;
    margin-bottom: 20px;
}
.full-height {
    height: 100%;
}

/* HEADER */

#header /*fixed header */ {
    padding-top: 90px;
    /* z-index: -1; */
    width: 100%;
    padding-bottom: 4em;
     /* position: fixed; */
    top: 0;
    left: 0;
}
.header-text, .header-text-center, .header-text-left {
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 2;
}
.product-heading-center {
    text-align: center
}
.product-heading {
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 2;
    margin-top: 30px;
    padding: 0 5em;
}
.header-text {
    text-align: center;
}
.header-text-center {
    text-align: center;
}
.header-text-left {
    text-align: left;
}

/*BANNERS */

.banner-1 {
    background: url("../img/banners/banner-1.jpg") no-repeat fixed center;
    width: 100%;
    height: 50%;
    background-size: cover;

}
.banner-2 {
    background: url("../img/banners/banner-2.jpg") no-repeat fixed center;
    width: 100%;
    height: 50%;
    background-size: cover;
}
.banner-3 {
    background: url("../img/banners/banner-3.jpg") no-repeat fixed center;
    width: 100%;
    height: 50%;
    background-size: cover;
}
.banner-4 {
    background: url("../img/banners/banner-4.jpg") no-repeat fixed center;
    width: 30% !important;
    height: 50%;
    background-size: cover;
}
.banner-about {
    background: url("../img/banners/banner-about.jpg") no-repeat fixed right;
    width: 100%;
    background-size: auto;
}
.banner-products {
    background: url("../img/banners/banner-products.jpg") no-repeat fixed right center;
    width: 100%;
    background-size: cover;
}
.banner-contact {
    background: url("../img/banners/banner-contact.jpg") no-repeat left center;
    width: 100%;
    
}
.banner-fabricated, .banner-onsite, .banner-trenching, .banner-lining {
    height: 250px !important;
}
.banner-fabricated {
    background: url("../img/services/fabricated.jpg") no-repeat fixed top center;
    background-size: auto;
}
.banner-onsite {
    background: url("../img/services/onsite.jpg")no-repeat fixed center;
    background-size: contain;
}
.banner-trenching {
    background: url("../img/services/trenching.jpg") no-repeat fixed center;
    background-size: contain;
    
}
.banner-lining {
    background: url("../img/services/lining.jpg") no-repeat fixed center bottom;
    background-size: contain;
}
.banner-hire {
    background: url("../img/services/hire.jpg") no-repeat fixed left bottom;
}

/* FONT - TEXT */

.hide-text {
    color: transparent;
    height: 0;
    visibility: hidden;
}

body, html {
    font-family: 'Nunito Sans', sans-serif;
    color: #0f3464;
}
h1, h2, h3, h4, h5, h6, p, a, li, hr {
    z-index: 10;
}
h1, h2, h3, h4 {
    text-transform: uppercase;
}
h1, h2 {
    letter-spacing: 3px;
}
h3, h4 {
    letter-spacing: 2px;
}
h1 /* title - banner heading */ {
    font-size: 1.5em;
    line-height: 1.8em;
}
h2 /* content sub-title */ {
    font-size: 1.3em;
    color: #00A3EE;
    line-height: 1.5em;
}
h3 /* sub-title in text-box */ {
    font-size: 1.2em;
    margin-bottom: 1.4em;
}
h4 /* box headings */ {
    font-size: 1em;
    margin: 1em 0;
    line-height: 1.5em;
}
p {
    font-size: .95em;
    line-height: 1.3em;
    margin: 1em 0;
    letter-spacing: 1px;
}

.banner-sub-text {
     font-size: 1em;
    margin: 1em 0;
    line-height: 1.5em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

input, textarea, select {
    font-size: .95em !important;
    letter-spacing: 1px;
}
figcaption {
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 10px;
    font-size: 0.9em;
    line-height: 1.5em;
}
a {
    text-decoration: none;
    color: #0f3464;
}

a.footer-link {
	color: #fff !important;
	
}

a, li {
     font-size: .95em;
}
a.link {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    
}
a.link:hover {
    color: #e86625 !important;
}
a:hover {
    cursor: pointer;
    text-decoration: none !important;
}
ul {
    list-style: none;
}
ul li::before {
    content: "\2022";
    color: #00b4d8;
    font-weight: bold;
    display: inline-block;
	margin-right: 18px;
    margin-left: -28px;
}
ul.content-list {
    padding: 20px 0 20px 15%;
}
ul.ul-margin {
    margin-left: 50px;
}
.bullets li:before {
    content: "\2022";
    color: #e86625;
    font-weight: bold;
    display: inline-block;
    margin-left: -20px;
    width: 20px;
}
li {
    display: block;
    font-size: 1.1em;
    line-height: 1.2em;
    letter-spacing: 1px;
	
}
.bg-dark-grey h4, .bg-dark-grey h3, .bg-dark-grey h2, .bg-dark-grey p, .bg-dark-grey a {
    color: #fff;
}
.text-upper {
    text-transform: uppercase;
}

/* NAVIGATION */

#mainNav {
    width: 250px;
    left: -250px;    
}

#mainNav li:last-child {
    line-height: 0;
}
nav > li {
    list-style-: none;
}
nav li::before {
    content: "";
}
#navbar {
    background-color: #fff;
    z-index: 333;
    top: 0;
    width: 100%;
}

.top-nav {
    padding: 1em 2em;
    overflow: hidden;
    background-color: #fff;
    display: table;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}
.top-nav ul {
    vertical-align: middle;
    text-align: right;
    display: none;
}
.top-nav li {
    display: inline-block;
    line-height: 1em;
    margin-right: 20px;
}
.main-nav, .sub-nav-2, .services-nav {
    z-index: 10;
    width: 100%;
    position: relative;
    text-align: center;
}
.main-nav {
    background-color: #034fa0;
    display: none;
}

.sub-nav-2, .services-nav {
    background-color: #ffffff;
    padding: 1em .5em 1.5em .5em;
    display: table;
    border-bottom: 3px solid #f2f3f3;
    margin-top: 100px;
}
.sub-nav-2 h2 {
    margin: 10px 0;
}
.sub-nav-2 li, .sub-nav-2 li a, .services-nav li a {
    -webkit-transition: .5s ease-in-out;
     transition: .5s ease-in-out;
}
.sub-nav-2 li a, .services-nav li a {
    padding: 1em 0;
}
.sub-nav-2 li:hover a {
    color: #fff !important;
}
.sub-nav-2 li:hover {
    cursor: pointer;
}
h2#openSideNav {
    text-align: left;
    margin: 0 auto;
    margin-left: 30px;
}
#sideNav {
    margin-top: 0;
    width: 100%;
}
#sideNav-2 {
    width: 320px;
    padding: 1em 0 2em 0;
    position: absolute;
    top: 0;
    left: -320px;
}
#sideNav-services {
    width: 0;
    padding: 2.5em 0;
    position: absolute;
    top: 280px;
}
.hvr-sweep-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    -ms-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
    color: white;
}
.hvr-sweep-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.hvr-sweep-to-top.hvr-aqua:before {
    background: #00aac0;
}
.hvr-sweep-to-top.hvr-blue:before {
    background: #0377a5;
}
.hvr-sweep-to-top.hvr-mid-blue:before {
    background: #0398c6;
}
.hvr-sweep-to-top.hvr-peach:before {
    background: #ee8550;
}
.hvr-sweep-to-top.hvr-orange:before {
    background: #e86625;
}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}
#butt.active-sub-nav {
    background-color: #00aac0;
}
#butt.active-sub-nav a, #electro.active-sub-nav a, #back.active-sub-nav a, #socket.active-sub-nav a, #fab.active-sub-nav a {
    color: #fff !important;
}
#butt.active-sub-nav li, #electro.active-sub-nav li, #back.active-sub-nav li, #socket.active-sub-nav li, #fab.active-sub-nav li {
    color: #fff !important;
}
#electro.active-sub-nav {
    background-color: #0377a5;
}
#socket.active-sub-nav {
    background-color: #ee8550;
}
#fab.active-sub-nav {
    background-color: #0398c6;
}
#back.active-sub-nav {
    background-color: #e86625;
}
#sideNav h2 {
    margin-bottom: 20px !important;
}
.side-nav {
    text-align: right;
    padding: 6em 2em 1em 1em;
}
.main-nav ul {
    margin: auto;
    display: table;
    table-layout: fixed;
}
.main-nav li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1em;
    line-height: normal;
}
#navbar ul li:last-child {
    margin-right: 0;
    
}
.main-nav ul li:last-child {
    display: inline;
}
.main-nav a {
    color: #ffffff;
}
.mobile-main-nav, .mobile-side-nav {
    width: 0;
    z-index: 9999;
    left: 0;
    background-color: #0f3464;
    -webkit-transition: 0.5s;
    transition: 0.5s;
     top: 0;
    position: fixed;
    overflow: scroll;  
}

.mobile-main-nav {
     height: 100%;
}

.mobile-side-nav {
    height: 95%;
}

.mobile-main-nav a.button {
    margin-top: 0;
    text-transform: lowercase;
}

.nav-items {
    display: none;
}
.nav-items a {
    display: block;
}
.main-nav a, .sub-nav a, .side-nav a, .mobile-side-nav a, .mobile-main-nav a, .sub-nav-2 a, .services-nav a {
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 3px;
}
.main-nav a {
	font-size: 0.85em;
    letter-spacing: 3px;
}


.side-nav a {
    padding: 10px 0;
}
.side-nav li {
    display: block;
    line-height: 1.3em;
    position: relative;
    cursor: pointer;
}
.mobile-side-nav a, .mobile-main-nav a {
    color: #fff;
    /*width: 40px;
    height: 50px;*/
    text-align: center;
    ;
}
.mobile-side-nav li {
    list-style: none;
    line-height: 1.3em;
    padding: .5em 0;
    display: block;
    position: relative;
}

.mobile-main-nav li {
    list-style: none;
    line-height: 2em;
    display: block;
    position: relative;
}
.mobile-side-nav ul li:before, .mobile-main-nav ul li:before {
    content: "";
}
.mobile-side-nav ul {
    padding-right: 2em;
    text-align: right;
}
.mobile-main-nav ul {
    padding-left: 2em;
}
.closebtn {
    position: absolute;
    top: 30px;
    right: 25px;
    width: 40px;
    z-index: 99999;
    font-size: 1.1em !important;
}

#sideNav-2 .closebtn {
    top: 0;
    position: relative;
    right: 0;
    padding: .5em 0;
}    

.hamburger {
    display: table-cell;
    vertical-align: middle;
}
.hamburger h2 {
    margin-bottom: 10px;
}
.product-wrapper > h2 {
    margin-bottom: 10px;
}
.main-nav li {
    font-size: 0.7em;
}
.guide-overview {
    padding: 20px 20px 40px 20px;
}
.guide img, .overview img {
    width: 80%;
}
.main-nav a {
    /*height: 100%; */
    display: block;
}
.main-nav li:hover, .main-nav:hover::after, .sub-nav li:hover {
    cursor: pointer;
}
a.guide, a.overview {
    position: relative;
}

/* MAIN NAV - top main navigation links*/

.main-nav a::after, a.active-link::after, .side-nav li::after, i.active-link::after, .mobile-main-nav a::after, .sub-nav li::after, .mobile-side-nav li::after, .mobile-side-nav a::after, .side-nav a::after, .services-nav a::after, .guide::after, .overview::after, a.content-links span::after {
    -webkit-transition: width .5s ease, background-color .5s ease;
    transition: width .5s ease, background-color .5s ease;
}

.main-nav a::after, a.active-link::after, .side-nav li::after {
    content: '';
    display: block;
    margin: 15px auto 0 auto;
    height: 3px;
    width: 0px;
    background: transparent;
}
.main-nav li:last-child > a:hover::after, .mobile-main-nav li:last-child > a:hover::after {
    background: transparent;
}
li.active-link::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: -3px;
    height: 3px;
    width: 40px;
    background: #fff;
}
.main-nav li:last-child > a:hover::after {
    backgound: #fff;
}

/* MOBILE MAIN-NAV - slide out main navigation links */

.mobile-main-nav a::after {
    content: '';
    display: block;
    height: 3px;
    width: 0px;
    background: transparent;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.mobile-main-nav a:hover::after {
    left: 0;
    bottom: 0;
}

/* SUB-NAV - top sub navigation links (products page) */

.sub-nav li::after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    margin-top: 15px;
    background: transparent;
}
.sub-nav li:hover::after {
    width: 40px;
    background: #e86625;
    margin-bottom: 25px;
}

/* MOBILE SIDE-NAV - slide out sub navigation links */

.mobile-side-nav li::after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
}
.mobile-side-nav a::after {
    content: '';
    display: block;
    height: 3px;
    width: 0px;
    background: transparent;
    position: absolute;
    right: 3px;
    bottom: 0;
}
.mobile-side-nav a:hover::after {
    width: 40px;
}

/* SIDE NAV - products menu */

.side-nav a::after {
    content: '';
    display: block;
    height: 3px;
    width: 0px;
    background: transparent;
    position: absolute;
    bottom: 8px;
    right: 3px;
}
.side-nav a:hover::after {
    width: 40px;
    bottom: 8px;
    right: 3px;
}

/* SERVICES NAV - (servics page) */

.services-nav a::after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
}

/* GUIDE & OVERVIEW */

.guide::after, .overview::after {
    content: '';
    display: block;
    margin: 10px auto;
    height: 3px;
    width: 0px;
    background: transparent;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

/* ALL HOVER AFTER ORANGE */

.main-nav li > a:hover::after, .guide:hover::after, .overview:hover::after, .mobile-main-nav a:hover::after, .services-nav a:hover::after, li.active-link:hover::after {
    width: 40px;
    background: #e86625;
}

/* SIDE NAV & MOBILE SIDE NAV HOVER COLOURS */

.side-nav.aqua a:hover::after, .mobile-side-nav.aqua a:hover::after {
    background-color: #00aac0;
}
.side-nav.blue a:hover::after, .mobile-side-nav.blue a:hover::after {
    background-color: #0377a5;
}
.side-nav.mid-blue a:hover::after, .mobile-side-nav.mid-blue a:hover::after {
    background-color: #0398c6;
}
.side-nav.peach a:hover::after, .mobile-side-nav.peach a:hover::after {
    background-color: #ee8550;
}
.side-nav.orange a:hover::after, .mobile-side-nav.orange a:hover::after {
    background-color: #e86625;
}

/* CONTENT LINKS ORANGE HOVER */

a.content-links span::after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
}

a.content-links span:hover::after {
    width: 40px;
    background: #fff;
}
.anchor, .anchor-mobile, .anchor-mobile-about, .anchor-projects {
    position: relative;
    z-index: -99;
}
.anchor-mobile {
    display: block;
    content: " ";
    margin-top: -400px;
    height: 400px;
    visibility: hidden;
    pointer-events: none;
}
    .anchor-projects {
        display: block;
        content: " ";
        margin-top: -250px;
        height: 250px;
    visibility: hidden;
    pointer-events: none;
}
.anchor:before {
    display: block;
    content: " ";
    margin-top: -10px;
    height: 10px;
    visibility: hidden;
    pointer-events: none;
}
.anchor-mobile-about {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
}
.sub-nav li, .sub-nav-2 li, .services-nav li, .services-nav li {
    display: block;
}

/* PROJECTS */

.projects-tab {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
.projects-text {
    margin-top: 140px;
    max-width: 1200px;
    margin: 0 auto;
    width: 80%;
}
.projects-tab a {
    width: 100%;
}
.projects-1, .projects-2, .projects-3 {
    height: 200px;
}
.projects-1 {
    background-image: url("../img/projects/projects-1.jpg");
}
.projects-2 {
    background-image: url("../img/projects/projects-2.jpg");
}
.projects-3 {
    background-image: url("../img/projects/projects-3.jpg");
}

/* ABOUT */

.offer a {
    width: 100%;
}

.benefits-1, .benefits-2, .benefits-3, .projects-1, .projects-2, .projects-3 {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
.benefits-1, .benefits-2, .benefits-3 {
    height: 200px;
}
#benefits1-txt, #benefits2-txt, #benefits3-txt {
    padding: 3em 1em;
}
.benefits-1 {
    background-image: url("../img/banners/benefits-1.jpg");
}
.benefits-2 {
    background-image: url("../img/banners/benefits-2.jpg");
}
.benefits-3 {
    background-image: url("../img/banners/benefits-3.jpg");
}
#benefits1:hover, #benefits2:hover, #benefits3:hover, .projects-1:hover, .projects-2:hover, .projects-3:hover {
    cursor: pointer;
    /*background: rgba(224, 77, 38, 1); */
}
.boxes h4:hover, .boxes hr:hover {
    cursor: pointer;
}
#benefits1:hover h3, #benefits2:hover h3, #benefits3:hover h3, .projects-1 h2 :hover, .projects-2 h2:hover, .projects-3 h2:hover {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
}
.offer {
    height: auto;
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
}
.offer-text {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.opacity-offer {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.opacity-offer:hover {
    background-color: rgba(224, 77, 38, 0.5);
    cursor: pointer;
    -webkit-transition: 0.5s;
     transition: 0.5s;
}

/* TEXT ALIGNMENT */

.text-center, .heading-center {
    text-align: center;
}
.text-center-left, .text-center-left-tablet {
    text-align: center;
}
.text-center-left-tablet {
    margin: auto;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* SERVICES BOXES */

.bg-fittings {
    background: url("../img/services/sm-fittings.jpg") center/cover no-repeat;
}
.bg-fittings:hover {
    background: url("../img/services/sm-fittings-col.jpg") center/cover no-repeat;
}
.bg-fabrication {
    background: url("../img/banners/services-fabrication.jpg") center/cover no-repeat;
}
.bg-services {
    background: url("../img/banners/services-trenching.jpg") center/cover no-repeat;
}
.bg-equipment {
    background: url("../img/banners/services-machine-hire.jpg") center/cover no-repeat;
}
.overlay {
    position: relative;
}
.overlay::after {
    content: ' ';
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    -webkit-transition: all 1s;
     transition: all 1s;
}
.overlay:hover::after {
    opacity: 0;
    cursor: pointer;
}
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.grayscale:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* PRODUCTS */

.banner-img {
    margin: 0 auto;
    max-width: 330px;
    display: block;
    width: 60%;
}
.product-img, .product-design-img {
    width: 70%;
}

.product-img {
    max-width: 400px;
    padding: 1em;
    margin: auto;
}
.product-design-img {
    max-width: 550px;
    padding: 1em;
    margin: auto;
}
.machine-img {
    width: 80%;
    margin: auto;
    max-width: 400px;
}
.machine-padding {
    text-align: center;
    border-bottom: 2px solid #f2f3f3;
}
.machine-padding table {
    margin-bottom: 20px;
}
.table-font-sm {
    font-size: .7em;
}
.lower-upper {
    text-transform: none;
}

/* MARGINS AND PADDING */

.margin-bottom {
    margin-bottom: 1.5em
}
.products-padding {
    padding: 2em 1em;
    max-width: 1500px;
    margin: 0 auto;
}
.fittings-padding {
    padding: 2em;
    max-width: 1800px;
    margin: 0 auto;
}
.banner-padding, .about-banner-padding {
    padding: 1em;
    max-width: 1800px;
    margin: 0 auto;
    text-align: center;
}
.home-banner-padding {
    padding: 5em 1em;
    max-width: 1800px;
    margin: 0 auto;
}
.machine-padding {
    padding: 1.5em;
    max-width: 1800px;
    margin: 0 auto;
}
.footer-padding {
    padding: 1.5em;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*.services-padding {
    padding: 4em;
}*/
.projects-padding {
    margin-top: 150px;
}
.padding-1 {
    padding: 1em;
}

/* COLORS */

.aqua {
    color: #00aac0;
}
.bg-aqua {
    background-color: #00aac0;
}
.blue {
    color: #0377a5;
}
.bg-blue {
    background-color: #0377a5;
}
.mid-blue {
    color: #0398c6;
}
.bg-mid-blue {
    background-color: #0398c6;
}
.orange {
    color: #e86625;
}
.bg-orange {
    background-color: #00b4d8;
}
.peach {
    color: #ee8550;
}
.bg-peach {
    background-color: #ee8550;
}
.dark-grey {
    color: #3e424d;
}
.bg-dark-grey {
    background-color: #3e424d;
}
.dark-blue {
    color: #0f3464;
}
.bg-dark-blue {
    background-color: #0f3464;
}
.bg-footer-blue {
	background-color: #034fa0;
}
.mid-grey {
    color: #676f7f;
}
.bg-mid-grey {
    background-color: #676f7f;
}
.light-grey {
    color: #f9f9f9;
}
.bg-light-grey {
    background-color: #f9f9f9;
}
.white {
    color: #fff;
}
.bg-white {
    background-color: #fff;
}
.black {
    color: #000;
}

/* TABLES */

table {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
}
.table-fixed {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 40px;
}
tr:nth-child(even) {
    background: #f2f3f3;
}
tr:nth-child(odd) {
    background: #fff;
}
th {
    padding: 0.7em 0.3em;
    border-right: 1px #f2f3f3 solid;
    vertical-align: middle;
    font-size: .8em;
}
td {
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
    font-size: .9em;
}
.machine-tables td {
    padding: 0.5em;
    line-height: 1.4em;
    text-align: left !important;
}
figure.product, figure.drawing {
    width: 70%;
    padding-top: 150px;
    margin: 0 auto;
    text-align: center;
}
figure.product {
    padding-top: 90px;
}
figure.drawing {
    padding: 0 0 20px 0;
}
figure.machines {
    width: 100%;
}

/* COLUMNS */

.col-1, .col-2, .col-3, .col-4, .boxes, .col-10, .col-30, .col-40, .col-60, .col-70, .col-40-lrg, .col-60-lrg, .col-100, .col-50, .banner-column, .services-banner {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: auto;
}
.col-1, .col-100 {
    width: 100%;
}
.col-2, .col-50 {
    width: 100%;
}
.col-3 {
    width: 75%;
    margin: 0 auto;
}
.col-4 {
    width: 25%;
}
.col-10, .col-40, .col-60, .col-60-lrg, .col-40-lrg, .services-banner {
    width: 100%;
}
.col-20 {
    width: 20%;
}

.col-30, .col-70  {
    width: 100%;
}
.banner-column {
    width: 100%;
}
.services-content {
    width: 100%;
}
.side-nav-wrapper {
    width: 30%;
}
.boxes-sm, .boxes-lr {
    width: 100%;
    height: 300px;
     -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    align-items: center;
    align-self: center;
    text-align: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
}
.boxes-sm:hover, .boxes-lr:hover {
    cursor: pointer;
}
.guide:hover, .overview:hover {
    cursor: pointer;
}
.wrapper-fixed-height {
    height: 500px;
    width: 100%;
    float: left;
}
.services-1 a, .services-2 a {
    width: 100%;
}

/* SHAPES */

.bg-shape-grey {
    background-color: #f7f8f9;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 100%, 0 0, 0 0, 100% calc(100% - -23vw));
}
.bg-shape-blue {
    background-color: #0377a5;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 178% 0, 0 163%, 100% calc(100% - 0vw));
}

/* ELEMENTS */

button, a.button {
    border-radius: 10px;
    width: 140px;
    height: 60px;
    color: #fff;
    box-shadow: none;
    border: none;
    font-size: 14px;
    letter-spacing: 1px;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    margin-top: 15px;
     display: block;
}

 a.button {
    text-align: center;
     line-height: 60px;
}

.button-centered-left, .button-centered, .button-auto {
    margin: auto;
}

button:hover, a.button:hover {
    cursor: pointer;
}

button:focus, a:focus, a.button:focus {
    outline: none;
}

.button-margin {
    margin-top: 20px;
}
.main-nav button, .main-nav a.button {
    margin-top: 0;
}
button.bg-orange:hover, a.button.bg-orange:hover {
    background-color: #e86625;
}
button.bg-blue:hover, a.button.bg-blue:hover {
    background-color: #00aac0;
}

hr {
    width: 50px;
    height: 0.8px;
    background-color: #0377a5;
    border: 1px solid #0377a5;
    margin-bottom: 20px;
}
footer hr {
    width: 50px;
    height: 0.5px;
    background-color: #e86625;
    border: 1px solid #e86625;
}
.qa-img {
    text-align: center;
}
.qa-text {
    display: block;
}
.qa-img > img {
    max-width: 200px;
}
img {
    width: 100%;
    height: auto;
	display: block;
}
.centered {
    text-align: center;
    justify-content: center;
   
}
.align-center {
    align-items: center;
}
.middle {
    vertical-align: middle;
}
.padding-50 {
    padding: 25px 0;
}
.padding-30 {
    padding: 30px 0;
}
.padding-10 {
    padding: 10px 0;
}
.padding-bottom-2 {
    padding-bottom: 2em;
}
.no-padding {
    padding: 0;
    margin: 0;
}
.active-box {
    border-right: 5px solid #e86625;
}
.relative {
    position: relative;
}
.title-hide {
    display: block;
    padding: 30px 0;
    position: fixed;
    top: 85px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    z-index: 999;
}

/* FOOTER */

footer {
    width: 100%;
    height: auto;
    display: table;
    bottom: 0;
    text-align: center;
}
figure#logo {
    width: 200px;
    max-width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#small-logo {
     -webkit-transition: 1s;
    transition: 1s;
   
}
figure.watermark {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.watermark-padding {
    padding-right: 30px;
    padding-left: 20px;
}

.address p:nth-of-type(1) {
    margin-bottom: 0;
}

.address p:nth-of-type(3) {
    margin-top: 15px;
}



footer p, footer h3 {
    color: #fff;
}
footer p {
    font-size: 1em;
}
.footer-left {
    width: 50%;
    display: table-cell;
}
.border-top {
    border-top: 1.5px solid #f2f2f3;
}

.active-border {
    border: 2px solid #fff;
    padding: 1em 0;
    margin: 3px;
}
.image {
    position: relative;
    width: 400px;
    height: 400px;
}
.image img {
    width: 100%;
    vertical-align: top;
}
.image::after {
    content: '\A';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.image:hover::after {
    opacity: 1;
}
.height-450 {
    height: 450px;
}

/* SLIDE OUT MENU */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 290px;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    padding-top: 60px;
}
.sidenav a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    margin-left: 50px;
}
.side-nav-hide {
    display: block;
    padding-top: 40px;
}

/* CONTACT */

.contact-us .table-cell {
    vertical-align: top;
}
.contact-us .table-cell:nth-child(2) {
    vertical-align: middle;
}
.contact-us p {
    margin: 0;
}
.contact-details img.icon {
    width: 50px;
}
.contact-details .table-cell:first-child {
    width: 70px;
}
.contact-details .table-cell {
    vertical-align: top;
}
.contact-details-padding {
    width: 90%;
    margin: 0 auto;
}
.contact-left, .contact-right {
    width: 100%;
}
#contact-form-wrapper {
    width: 100%;
}
.contact-us .table {
    padding-top: 1em;
}
.contact-us p {
    color: #fff;
}
.focus-transition {
    width: 300px;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #f2f3f3;
    -webkit-transition: .5s linear;
    transition: .5s linear;
}
.focus-transition:focus {
    width: 300px;
    border: 2px solid #00aac0;
    outline: none;
}

/* CONTACT FORM */

.contact-icon {
    width: 50px;
    height: 50px;
    margin-right: 50px;
}
.container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#contact {
    background: #F9F9F9;
    padding: 25px;
    margin: 50px 0;
}
fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}
#contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="tel"], #contact-form input[type="url"], #contact-form textarea, #contact-form select {
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    margin: 5px 0;
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    color: #3e424d;
}
#contact-form input[type="text"]:hover, #contact-form input[type="email"]:hover, #contact-form input[type="tel"]:hover, #contact-form input[type="url"]:hover, #contact-form textarea:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #AAA;
}
#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}
#contact input:focus, #contact textarea:focus {
    outline: 0;
    border: 1px solid #999;
}
::-webkit-input-placeholder {
    color: #888;
}
:-moz-placeholder {
    color: #888;
}
::-moz-placeholder {
    color: #888;
}
:-ms-input-placeholder {
    color: #888;
}
::-webkit-input-placeholder { /* Edge */
    color: #676f7;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #676f7;
}
::placeholder {
    color: #676f7f;
}
.with-errors li {
    color: #e86625;
}
.with-errors ul li:before {
    content: '';
}
.alert {
    position: relative;
    padding: .75em 1.25em;
    margin-bottom: 1em;
    border: 1px solid transparent;
    border-radius: .25em;
}
.alert-success {
    color: #fff;
    background-color: #0377a5;
    line-height: 1.8em;
}
.alert-success button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    width: 10px;
    height: 10px;
    float: right;
    margin-top: 0;
    font-size: 1.5em;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
}
.alert-success.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

/* GALLERY */

.gallery {
    text-align: center;
    margin-top: 186px;
    max-width: 1600px;
    margin: 0 auto;
}
.gallery img {
    width: 100px;
    height: 92.67px;
    height: auto;
    transition: .5s ease-in-out;
}
.gallery a {
    height: 100%;
    position: relative;
}
.gallery-overlay::after {
    content: ' ';
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 92.67px;
    top: -77px;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.gallery-overlay:hover::after {
    opacity: 0.8;
    top: -77px;
    height: 92.67px !important;
}
.placeholder {
    margin: 0 auto;
    text-align: center;
}
.placeholder img {
    max-width: 500px;
    height: auto;
    margin: 0 auto;
}

/* ADDITIONAL */

.max-width {
    max-width: 1300px;
}
.column-reverse {
    flex-direction: column-reverse;
}
.column-reverse-services {
    flex-direction: column-reverse;
}
    .hide {
        display: none;
    }

/* ACTIVE LINKS */

.active-side-link {
    font-weight: 900;
}

/* IMAGES */

    figure.product, figure.drawing {
        width: 50%;
    }
    figure.product {
        padding-top: 10px;
    }

/* SERVICES */

#services {
    width: 75%;
    max-width: 1400px;
    margin: 0 auto;
}
.services-1 a, .services-2 a {
    width: 100%;
}
.wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* MEDIA QUERIES */


@media screen and (min-height: 481px) and (max-height: 640px) {
    .banner-padding, .products-padding, .about-banner-padding  {
        padding: 1em;
    }
}

@media screen and (max-width: 549px) and (max-height: 568px) {
   .banner-img {
      display: none;
    }
    .side-nav-hide {
        padding-top: 40px;
    }
    .closebtn {
        top: 30px;
    }
    #header {
        padding-top: 140px;
    }
    .wrapper-index, .wrapper-about {
        margin-top: 490px;
    }
 
    h4, .banner-sub-text {
        font-size: 1em;
    }
    
    p {
        font-size: 0.95em
    } 
    a.button {
        margin-top: 10px;
    }
}


@media screen and (min-width: 768px) and (min-height: 569px) {
    .banner-img {
      display: block;
    }    
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}
@media screen and (min-width: 500px) {
    h1 {
    font-size: 1.7em;
    line-height: 2em;
}
    h2  {
        font-size: 1.4em;
        line-height: 1.8em;
    }

    h4, .banner-sub-text  {
        font-size: 1.2em;
        line-height: 1.6em;
    }
    p {
        font-size: 1.1em;
    
    }
    input, textarea, select {
        font-size: 1em !important;
    }

    a, li {
         font-size: 1em;
    }
    .top-nav {
    padding: 1em 2em;
    }
    .banner-8 {
        width: 50% !important;
    }
    .contact-details-padding {
        width: 70%;
        margin: 0 auto;
    }
    .lower-upper {
        text-transform: uppercase;
    }
    
    h1 {
    font-size: 1.8em;
    }
    th {
    padding: 0.7em;
    font-size: 1em;
    }
    .machine-tables td {
    padding-left: 20px;
    }
}
@media screen and (min-width: 541px) {
    .sub-nav li, .sub-nav-2 li, .services-nav li {
        display: inline-block;
        padding: 0.5em 0.4em;
    }
    .anchor:before {
        margin-top: -100px;
        height: 100px;
    }
}
@media screen and (min-width: 600px) {
    .benefits-1, .benefits-2, .benefits-3 {
        width: 100%;
        height: 100%;
    }
    .offer a {
        width: 33.33%;
        height: 300px;
    }
    .projects-1, .projects-2, .projects-3 {
        height: 300px;
    }
    .projects-tab a {
        width: 33.33%;
    }
    .wrapper-about {
        margin-top: 835px;
    }
    .offer {
        height: 300px;
    }
    .docs-table li {
        display: table-cell;
    }
    .anchor-mobile {
        display: none;
    }
    
    .services-nav li {
        display: inline-block;
        padding: .5em 1em;
    }
    .products-padding {
        padding: 2em 1em;
    }
    .banner-padding, .about-banner-padding {
        padding: .5em 1em;
    }
}

@media screen and (max-width: 640px) , screen and (max-height: 360px) {
   .anchor-mobile-about {
        margin-top: -100px;
        height: 100px;
    }
    .banner-fabricated, .banner-onsite, .banner-trenching, .banner-lining {
    height: 150px !important;
 }
    .anchor:before {
    margin-top: -1px;
    height: 1px;
    }
}
@media screen and (max-width: 768px) , screen and (max-height: 1024px) {
    .banner-img {
        width: 100%;
    }
  
}
@media screen and (width: 375px) , screen and (height: 667px) {
   .banner-img {
width: 80%;
    } 
}
@media screen and (min-width: 640px) {
    .container-products {
    padding: 1em 1.5em;
    }
}

@media screen and (min-width: 641px) {
   .anchor-mobile-about {
        margin-top: -400px;
        height: 400px;
    }
}

@media screen and (min-width: 648px) {
    .machines-img-padding {
        margin-top: 38px;
        padding-right: 20px;
        height: 38px;
    }
      h4, .banner-sub-text {
        font-size: 1.2em;
    }
  
}
@media screen and (min-width: 768px) {
    
    .mobile-side-nav {
        height: 100%;  
    }
    .mobile-main-nav {
        height: 67%;
    }
    .contact, .address {
    padding-right: 15px;
}
    
    .docs-table a.button {
        display: inline-block;
        margin: 20px 20px 0 20px;
}
    .anchor:before {
        margin-top: -250px;
        height: 250px;
    }
    .services-2 a {
        width: 50%;
    }
    .header-text {
        text-align: left;
    }
    .col-2, .col-50 {
        width: 50%;
    }
    .col-10 {
        width: 10%;
    }
    .col-40 {
        width: 40%;
    }
    .col-60 {
        width: 60%;
    }
    .content  {
        padding: 3em;
    }
     .container-products {
        padding: 3em 2em;
    }
      .product-banner-img {
        padding: 3em 1em;
    }
    .values {
        width: 35%;
        margin-top: -40px;
    }
    .mission {
        float: right;
        width: 75%;
    }
    .vision {
        width: 65%;
    }
  
    .wrapper-index {
        margin-top: 475px;
    }
    footer hr {
        text-align: right;
        margin-left: 0;
        background-color: #e86625;
        border: 1px solid #e86625;
    }
    footer {
        text-align: left;
    }
    figure.watermark {
        margin: 1.2em 0;
    }
    .watermark-padding {
    padding-left: 50px;
    }
  
    .wrapper-about {
        margin-top: 435px;
    }
 
    .machine-padding {
        padding: 1.5em 2.5em;
    }
    .footer-padding {
        padding: 1.5em 2.5em;
        
    }
    .contact-left {
        width: 40%;
    }
    .contact-right {
        width: 60%;
    }
    #navbar {
        position: fixed;
    }
     .banner-column {
        width: 40%;
    }
    .button-margin {
    margin-top: 20px;
}
    .wrapper-products {
        margin-top: 190px;
    }
   .wrapper-product-overview {
        margin-top: 150px;
    }
    figure.product {
        padding-top: 90px;
    }
    .product-img-column {
        width: 30%;
    }
       .product-table-cell {
        display: table-cell;
    }
    .products-padding {
    padding: 1em 1em 1em 2em;
}
     .button-centered-left {
        margin: 0;
    }
     #header {
        padding-top:115px;
    }
     .text-center-left {
        text-align: left;
    }  
}

@media screen and (max-width: 768px) {
	.top-nav {
		background-color: #034fa0;
	}
	.absolute {
		 top: 100px;
	}
	
	.service-margin-top {
		margin-top: -400px;
	}
}

@media screen and (min-width: 769px) {
      .wrapper-products {
        margin-top: 200px;
    }
        .product-wrapper {
        width: 70%;
    }
    .hide {
        display: block;
    }
    .side-nav-hide {
        display: none;
    }
    .hamburger {
        display: none;
    }
    .product-heading {
        padding: 0 5em 0 13em;
    }
    .heading-center {
        text-align: left
    }
    .wrapper-products, .wrapper-product-overview {
        margin-top: 290px;
    }
    h1 {
        font-size: 2.1em;
    }
    .header-text, .header-text-center, .header-text-left {
        margin-top: 50px;
    }
    .wrapper-index {
        margin-top: 600px;
    }
    .text-center-left-tablet {
        text-align: left;
        margin: 0;
    }   
    .title-hide {
        display: none;
    }
    .products-padding {
        padding: 3em;
        margin-top: 0px;
    }
    .banner-padding {
        padding: 3em 0;
    }
    .about-banner-padding  {
        padding: 2em 1em 3em 1em;
    }
    .banner-img {
        width: 100%;
    }
    .machine-padding table {
        margin-bottom: 0;
    }
  
    .sub-nav li, .sub-nav-2 li, .services-nav li {
        font-size: 1em;
    }
  
    .col-30 {
        width: 30%;
    }
    .col-70 {
        width: 70%;
    }
    .mission, .vision {
        text-align: left;
    }
    .top-nav {
        position: relative;
    }
    .top-nav ul {
        display: table-cell;
    }
    .main-nav {
        display: table;
    }
    .services-nav {
        padding: 1em .5em;
    }
    .services-nav li {
        display: inline-block;
        padding: 0.5em;
        font-size: 1em;
    }
    .sub-nav-2, .services-nav {
        margin-top: 0;
        padding: 1em .5em;
    }
    .sub-nav li::after {
        margin-top: 10px;
    }
    .contact-us .table {
        padding-top: 2em;
    }
    .wrapper {
        margin-top: 250px;
    }
    .col-40-lrg {
        width: 40%;
    }
    .col-60-lrg {
        width: 60%;
    }
    .wrapper-about {
        margin-top: 600px;
    }
    .column-reverse {
        flex-direction: column;
        flex-flow: wrap;
    }

    .machine-img-padding {
        height: 77px;
    }
    .machine-img {
        width: 90%;
    }

    .guide-overview {
        padding: 20px;
    }
    .qa-img {
        text-align: right;
    }
    .qa-text {
        display: flex;
        align-items: center;
    }
    .product-heading-center {
        text-align: left;
    }
    .product-text-left-padding {
        padding-left: 5%;
    }
    .anchor-mobile-about {
        margin-top: -450px;
        height: 450px;
    }
    .contact-details-padding, #contact-form-wrapper {
        width: 90%;
    }
      .table-fixed {
        table-layout: auto;
    }
       #header {
        padding-top:135px;
    }  
}

@media screen and (min-width: 769px) and (max-width: 969px) {
	.small-text {
		font-size: 70%;
	}
} 

@media screen and (min-width: 992px) {
          .column-reverse-services {
        flex-direction: column;
        flex-flow: wrap;
    }
    .services-content {
        width: 60%;
    }
      .services-banner {
        width: 40%;
    }
     .banner-fabricated, .banner-onsite, .banner-trenching, .banner-lining {
        height: auto !important;
    }
      .banner-fabricated {
        background-position: left;
          background-size: contain;
    }
    .banner-onsite {
        background-position: right bottom;
        background-size: contain;
    }
    .banner-trenching {
        background-position: left bottom;
        background-size: contain;
    }
    .banner-lining {
        background-position: right bottom;
        background-size: contain;
    }
     h1 {
        font-size: 2.2em;
    }
    .side-nav-wrapper {
        width: 30%;
    }

    .product-img  {
        width: 70%;
    }
    .product-text-left-padding {
        padding-left: 10%;
    }
    .banner-img {
        width: 100%;
    }
    button  {
        width: 140px;
        height: 60px;
        font-size: 14px;
    }
    
    .main-nav li {
        font-size: 1em;
    }
     .header-text-center, .header-text-left {
        margin-top: 100px;
    }
      .header-text {
        margin-top: 60px;
    }
    .offer {
        height: 450px;
        width: 55%;
    }
    .offer-text {
        width: 45%;
    }
    .table-font-sm {
        font-size: 1em;
    }
    .anchor-mobile-about {
        margin-top: -320px;
        height: 320px;
    }
    #benefits1-txt, #benefits2-txt, #benefits3-txt {
        padding: 3em 2.5em;
    }
     .banner-padding  {
        padding: 3em 2em;
    }
    .about-banner-padding {
        padding: 0 2em 1em 1em;
    }
}
@media screen and (min-width: 1024px) {
    .wrapper-index {
        margin-top: 660px;
    }
    .machine-img {
        width: 80%;
    }
}
@media screen and (min-width: 1150px) {
    .wrapper-about {
        margin-top: 700px;
    }
     .anchor-projects {
        display: none;
    }
}
@media screen and (min-width: 1280px) {
    figure.product, figure.drawing {
        width: 60%;
    }
    .wrapper-products, .wrapper-product-overview {
        margin-top: 284px;
    }
    .products-padding {
        padding: 3em 5em;
    }
       .fittings-padding {
        padding: 3em 5em;
    }
    .banner-padding {
        padding: 3em;
    }
    #services {
        width: 50%;
    }
    h1 {
        font-size: 2.5em;
    }
    .watermark-padding {
        padding-left: 100px;
    }
    .contact-details-padding {
        width: 50%;
    }

}

@media screen and (min-width: 1441px) {
    .main-nav li {
        font-size: 1.2em;
    }
    .content {
        padding: 3em;
    }
     .container-products {
        padding: 5em 5em 1em 5em;
    }
      .product-banner-img{
        padding: 5em 2em;
    }
    .wrapper-index {
        margin-top: 650px;
    }
    .wrapper-about {
        margin-top: 650px;
    }
    .machine-img-absolute {
        position: relative;
        top: 0;
    }
        .machine-img {
        width: 70%;
    }
      .wrapper-products {
        margin-top: 300px;
    }
    .wrapper-product-overview {
        margin-top: 220px;
    }
}
@media screen and (min-width: 1920px) {
    h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.7em;
    }
    h4, .banner-sub-text {
        font-size: 1.5em;
    }
    p, li, a, textarea, input {
        font-size: 1.3em
    }
    .top-nav li, .top-nav a:link {
        font-size: 26px;
    }
    button, a.button {
        font-size: 16px;
        margin-top: 25px;
        line-height: 76px;
        width: 160px;
        height: 76px;
    }
    .content  {
        padding: 7em;
    }
    .container-products {
        padding: 7em 5em 1em 5em;
    }
     .product-banner-img {
        padding: 7em 2em;
    }
    .boxes-sm {
        height: 450px;
    }
    .projects-1, .projects-2, .projects-3 {
        height: 400px;
    }
    .banner-fabricated {
        background-size: contain;
    }
    .offer a {
        height: 400px;
    }
     .wrapper-products {
        margin-top: 320px;
    }
    .wrapper-product-overview {
        margin-top: 230px;
    }
    .main-nav ul {
        padding: .5em 0;
    }
    .mission, .vision, .values {
        padding: 6em;
    }
    ul.content-list {
    padding: 20px 0 20px 20%;
    }
     .top-nav {
        padding: 2em;
    }
    figure.watermark {
        width: 190px;
        max-width: 190px;
    }
    .boxes-lr {
        height: 400px;
    }
    .sub-nav-2, .services-nav {
        padding: 2em
    }
    .sub-nav-2 a, .main-nav a, .services-nav a {
        font-size: 1.1em;
    }
    .main-nav a.button, button {
        font-size: 18px;
    }
    .sub-nav-2 li, .services-nav li {
    padding: 1em;
    }
    .wrapper-products {
        margin-top: 400px;
    }
    .side-nav li {
        line-height: 1.7em;
    }
    .side-nav a {
        font-size: 1em;
    }
    td {
        padding: .7em;
        font-size: 1.2em;
    }
    .wrapper {
        margin-top: 350px;
    }
    .wrapper-index, .wrapper-about {
        margin-top: 720px;
    }
    #header {
        padding-top: 185px;
    }
    a.link {
        font-size: 1em
    }
         .sub-nav-2, .services-nav {
        padding: 1em
    }
	.home-content {
		margin-top: 120px;
	}
}

@media screen and (min-width: 2560px) {
    h2 {
        font-size: 2.2em;
    }

    .address p:nth-of-type(2), .address p:nth-of-type(4) {
        font-size: 1em;
        padding: 0 0 .5em 0;
    }
    footer p {
        font-size: 1.3em;
    }
    footer a {
        font-size: 1em;
    }
    .main-nav ul {
        padding: .2em 0;
    }  

}

@supports (-webkit-touch-callout: none) {
  .banner-1, .banner-2, .banner-3, .banner-4, .banner-contact, .banner-fabricated, .banner-onsite, .banner-trenching, .banner-lining, .banner-hire {
        background-attachment: scroll;
        /*background-size: auto;*/
    }
    .banner-fabricated, .banner-onsite, .banner-trenching, .banner-lining {
        background-size: 90%;
        height: 500px !important;
        }
    .banner-onsite {
        background-position: bottom;
    }
    }