/* -------------------------------- */
/*              FONTS               */
/* -------------------------------- */   
@font-face {
    font-family: 'muliregular';
    src: url('../muli-webfont.woff2') format('woff2'), url('../muli-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: 'muliregular';
    src: url('../muli-bold-webfont.woff2') format('woff2'), url('../muli-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    }

@font-face {
    font-family: 'Eveleth Clean';
    src: url('../EvelethCleanRegular.woff2') format('woff2'), url('../EvelethCleanRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
    


/* -------------------------------- */
/*             COLOURS              */
/* -------------------------------- */
.clr1 { color: #232a51; } 
.clr2 { color: #191919; } 
.clr3 { color: #ffffff; }
.clr4 { color: #6a7072; }


/* -------------------------------- */
/*     BASIC PAGE SETUP & FONTS     */
/* -------------------------------- */
body {
    color: #191919;
    margin: 0px auto;
    padding: 0;
    background: #ffffff;
    font-family: 'muliregular', Arial, Helvetica, sans-serif;
    }

body, html {
    height: 100%;
    overflow-x: hidden
    }


/* -------------------------------- */
/*           MAIN LAYOUT            */
/* -------------------------------- */
.container {
    clear: both;
    margin: 0px auto;
    padding: 100px 0px;
    max-width: 1170px;
    }

#header {
    margin: 0px;    
    padding: 10px 0px 0px 0px;
    display: block;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 200;
    }

#header .container { padding: 0px;}

#footer {
    padding: 0px;
    border-top: 2px solid #ffffff;
    }
    #footer .container { padding: 100px 0px 5px 0px; }

.banner {
    height: auto;
    margin: 20px 0px 0px 0px;
    padding: 100px 50px;
    min-height: 550px;
    background-color: #000822;
    background-image: url(../images/banner_dma-ducting.jpg);
    background-repeat: no-repeat;
    background-position: left;
    }
    @media screen and (max-width: 1366px) {
        .banner { min-height: 500px; background-image: url(../images/banner_dma-ducting02.jpg); }
        }
    @media screen and (max-width: 1024px) {
        .banner { background-image: url(../images/banner_dma-ducting.jpg); }
        }
    @media screen and (max-width: 816px) {
        .banner { background-image: url(../images/banner_dma-ducting.jpg); min-height: 300px; padding: 50px 10px }
        }

.banner_other {
    height: auto;
    margin: 20px 0px 0px 0px;
    padding: 50px;
    min-height: 250px;
    background-color: #000822;
    background-repeat: no-repeat;
    background-position: left;background-image: url(../images/banner_other.jpg);
    }
    @media screen and (max-width: 816px) {
        .banner_other { background-image: url(../images/banner_aaa-laser-cut03.jpg); }
        }   
    @media screen and (max-width: 414px) {
        .banner_other { min-height: 200px; padding: 50px 10px; }
        }

.bannercontent { 
    margin: 0px auto;    
    max-width: 1170px;
    }

.topspace { padding-top: 40px; }
.bottomspace { margin-bottom: 20px; }    
.leftspace { padding-left: 60px; }

.parallax {
    margin: 0px;
    padding: 0px;
    height: auto;
    background-image: url(../images/parallax_background.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;
    }

.parallax .container {
    clear: both;
    margin: 0px auto;
    padding: 60px 10px;
    position: relative;
    }


/* -------------------------------- */
/*            NAVIGATION            */
/* -------------------------------- */
.navbar-container { margin: 0px auto;}

.navbar-default {
    border: 0px;
    padding-top: 50px;    
    background-color: transparent;
    }

.nav {
    float: none;
    border: 0px;
    }

.navbar {
    border: 0px solid transparent;
    position: relative;
    min-height: 45px;
    margin-bottom: 0px;
    }

.navbar-nav {
    width: 100%;
    margin: 0px;
    text-align: right;
    }

.navbar-nav > li {
    float: none;
    margin: 0px;
    padding: 0px 10px;
    display: inline-block;
    line-height: 20px;
    }

.navbar-default .navbar-nav > li > a {
    color: #232a51;
    padding: 0px; 
    font-size: 14px;
    margin-top: 0px;
    font-weight: bold;
    text-transform: uppercase;
    }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #040204;  
    text-decoration: none;
    background-color: transparent;
    }

.navbar-default .navbar-toggle {
    margin-top: 10px;
    border-color: #040204;
    background-color: #040204;
    }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #232a51;
    }

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
    }

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
    }

ul.navbar-nav {
    margin: 0px;
    padding: 0px !important;
    }


    .sticky {
        background-color: #ffffff;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }


@media (max-width: 767px) {
    .navbar-container { margin: 0px auto 0px auto; }
    .navbar-default {
        margin-top: 0px;
        padding-top: 0px;
        }
        
    .navbar {
        border: 0px solid transparent;
        position: relative;
        margin-bottom: 0px;
        left: 0px;
        }
    .navbar-nav {
        width: 100%;
        margin: 0px;
        text-align: left;
        }

    .navbar-nav > li {
        float: none;
        color: #ffffff;
        display: block;
        line-height: 30px;
        margin-top: 0px;
        padding: 5px 10px; 
        background-color: #ffffff
        }

    .navbar-default .navbar-nav > li > a {
        width: 100%;
        margin: 0px;
        padding: 5px 10px; 
        text-align: center;
        z-index: 100;
        }

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus,
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        margin: 0px;
        padding: 5px 10px; 
        text-align: center;
        border-bottom: 0px;
        background-color: #ffffff
        }
    }


/* -------------------------------- */
/*             HEADINGS             */
/* -------------------------------- */
h1, h2, h3, h4, h5, h6 { 
    color: #232a51;
    margin: 0px 10px;     
    font-weight: normal; 
    font-family: 'Eveleth Clean', Arial, Helvetica, sans-serif;
    }
h1 {
    color: #ffffff;
    margin: 20px 10px 20px 10px;    
    font-size: 40px;
    text-align: left;
    line-height: 44px;
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    .subheading { font-size: 33px; }


h2 {
    font-size: 30px;
    text-align: left;
    line-height: 36px;
    font-weight: normal;    
    letter-spacing: 1px;
    text-transform: uppercase;
    }

h3 {
    margin: 20px 10px;    
    font-size: 22px;
    text-align: left;
    line-height: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'muliregular', Arial, Helvetica, sans-serif
    }
    .banner h3 { color: #ffffff; max-width: 460px; }

h4 {
    margin: 0px;
    font-size: 24px;
    text-align: left;
    line-height: 30px;
    letter-spacing: 1px;
    }

h6 {
    color: #191919;
    padding: 25px 0px;
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;    
    font-family: 'muliregular', Arial, Helvetica, sans-serif;
    }

.parallax h2, .parallax h6 { color: #ffffff;}

@media (max-width: 816px) {
    h1, .banner h3 { text-align: center;}
    .banner h3 {  margin: 20px auto }
    }

@media (max-width: 420px) {
    h1 { font-size: 22px; line-height: 24px;} .subheading { font-size: 18px; }
    .banner h3 { font-size: 18px; line-height: 21px; font-weight: bold;}
    }

/* -------------------------------- */
/*            PARAGRAPHS            */
/* -------------------------------- */
p, ol, ul, dl, address {
    color: #191919;
    }

p {
    margin: 20px 10px;
    padding: 0px;
    hyphens: auto;
    font-size: 15px;
    text-align: justify;
    line-height: 22px;
    }
    #footer p { margin: 2px; line-height: 26px;}


p.logo {  margin: 5px 0px; text-align: left;}

p.credits, p.privacy {
    color: #6a7072;
    padding: 50px 10px 10px 10px;
    font-size: 10px;
    text-align: right;    
    font-weight: normal;
    letter-spacing: 1px;
    }
    p.privacy { text-align: left;}

p.image { margin: 0px 10px;}

.lft { text-align: left; }
.rgt { text-align: right; }
.ctr { text-align: center; }

.bi { 
    color: #232a51;
    font-size: 110%;
    margin-right: 10px;
    }
    .bi-bookmark { color: #ffffff }


.ten-columns > .col-md-2 { width: 20%; }

.parallax p { 
    color: #ffffff; 
    text-align: center;
    margin: 5px 10px
    }
    
/* -------------------------------- */
/*              LISTS               */
/* -------------------------------- */

ul {
    color: #040204;
    margin: 5px 10px 20px 10px;
    padding: 5px 10px 0px 10px;
    hyphens: auto;
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    }

li {
    padding: 1px 5px 2px 5px;
    margin: 1px 5px 2px 5px;
    }


/* -------------------------------- */
/*              LINKS               */
/* -------------------------------- */
a:link, a:visited, a:hover, a:active { text-decoration: none }

a:link, a:visited { color: #191919; }
a:active, a:hover { color: #232a51 }

#footer a:link, #footer a:visited { color: #191919; }
#footer a:active, #footer a:hover {  color: #232a51}

.parallax a:link, .parallax a:visited { color: #ffffff}

a:link.button,  a:visited.button { color: #191919!important}
a:hover.button,  a:active.button { color: #ffffff!important}

.btn-default {
    color: #191919;
    background-color: #fff;
    border-color: #ccc;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .btn-default:focus,
  .btn-default.focus {
    color: #ffffff!important;
    background-color: #232a51;
    border-color: #8c8c8c;
  }
  .btn-default:hover {
    color: #ffffff!important;
    background-color: #232a51;
    border-color: #adadad;
  }


/* -------------------------------- */
/*              FORMS               */
/* -------------------------------- */
input, textarea, select {
    color: #ffffff;
    border: 0px;
    margin: 4px 0px;
    padding: 8px 10px;
    font-size: 15px;
    width: 100%;
    line-height: 26px;    
    text-align: justify;
    background: #232a51;
    border-radius: 2px;
    border: 1px solid #ffffff;
    }

input.submit { width: auto; background-color: #040204; border-radius: 2px; margin-bottom: 20px;}
select { height: 42px; padding-left: 6px; background-color: #1ba1d6; color: #ffffff; }
input { height: auto; }


.nomore {
    display: none !important;
    }

:-moz-placeholder { color: #a5a5a5; }     
::-moz-placeholder { color: #a5a5a5 !important; opacity: 1 } 
:-ms-input-placeholder { color: #a5a5a5; } 
::-webkit-input-placeholder { color: #a5a5a5; }



/* -------------------------------- */
/*              IMAGES              */
/* -------------------------------- */
img {
    width: auto\9; /* ie8 */
    height: auto\9;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    }

.border {border: 2px solid #ffffff; }

.icon { padding-top: 20px;}
.icon { padding: 10px; }
.icon:hover {
    background: black;
    overflow: hidden;
    background: #232a51;  /* fallback colour. Make sure this is just one solid colour. */
    border-radius: 5px;
}

.services {
    margin-bottom: 30px;
}


/* -------------------------------- */
/*            RESPONSIVE            */
/* -------------------------------- */
@media screen and (max-width: 1200px) {
    .container { padding-left: 10px; padding-right: 10px; }
    }

@media screen and (max-width: 1024px) {
    .leftspace { padding-left: 0px; }
    .firstblock .topspace { padding-top: 0px;}
    .navbar-default {
        border: 0px;
        padding-top: 20px;    
        background-color: transparent;
        }
    }

 @media screen and (max-width: 816px) {
    .navbar-default { padding-top: 0px; }
    .parallax .container { padding: 50px 30px; }
    #footer .container { padding: 30px; }
    p.logo { margin-left: 5px;}
    p.logo img { max-height: 150px; }
    .parallax { background-attachment:scroll; background-repeat: repeat;}
    img.mobile { display: none}
    
    .bottomspace { margin-bottom: 0px; }
    .leftspace { padding-left: 15px; }
    .topspace { padding-top: 0px; }

    p { text-align : left}
    .rgt { text-align: left; }

    .ten-columns .col-sm-6 { width: 50%; }
    .ten-columns .col-sm-12 { width: 100%; }
    .ten-columns .col-xs-12 { width: 100% ;}
    }

    @media screen and (max-width: 600px) {
        .btn-default {
            display: block;
          }
    }

    @media screen and (max-width: 414px) {
        #header { height: 160px; }
        p.credits, p.privacy { text-align: center; }
        .navbar-default {
            padding-top: 0px;    
            }
            p.logo img { max-width: 300px; }
        }