a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #898989;
    background: #ffffff;
    height: 100%;
    width: 100%;
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

a {
    color: #333333;
    text-decoration: none;
}

em {font-style: italic;}

strong, b {font-weight: 600;}

u {text-decoration: underline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

* {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

.container {
    overflow: auto;
    height: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    width:90%;
    max-width: 100%;
}

.col1-12 {
    width: 8.333%;
    width: calc(100% / 12);
    width: -webkit-calc(100% / 12);
    width: -moz-calc(100% / 12);
    padding: 0 10px;
}

.col2-12 {
    width: 16.666%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    padding: 0 10px;
}

.col3-12 {
    width: 24.999%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    padding: 0 10px;
}

.col4-12 {
    width: 24.999%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    padding: 10px 10px;
}

.col5-12 {
    width: 41.666%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    padding: 0 10px;
}

.col6-12 {
    width: 49.999%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    padding: 0 10px;
}

.col7-12 {
    width: 58.333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    padding: 0 10px;
}

.col8-12 {
    width: 66.666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    padding: 0 10px;
}

.col9-12 {
    width: 74.999%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    padding: 0 10px;
}

.col10-12 {
    width: 83.333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    padding: 0 10px;
}

.col11-12 {
    width: 91.666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    padding: 0 10px;
}

.col12-12 {
    width: 100%;
    padding: 10px 0
}

.col {
    overflow: hidden;
    float: left;
    display: block;
    position: relative;
}

.col:first-of-type {
    padding-left: 0;
}

.col:last-of-type {
    padding-right: 0;
}

.dcr_landing{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

.dcr_landing .col12-12{
    height:50%;
    padding:0;
}

.dcr_landing .col4-12{
    text-align:center;
    position: relative;
    height:100%;
    padding:40px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.dcr_landing .col4-12 .overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

.dcr_landing .col4-12:hover > .overlay{
    opacity: 0.6;
}

.sewing{background-image: url(sewing.jpg);}
.cutting{background-image: url(cutting.jpg);}
.cnc{background-image: url(cnc.jpg);}
.leather{background-image: url(leather.jpg);}
.shoe{background-image: url(cutting-blades.jpg);}
.advshoe{background-image: url(advshoe.jpg);}
.ppe{background-image: url(ppe.jpg);}
.shoe_repair{background-image: url(shoe_repair.jpg);}
.goodyear{background-image: url(goodyear.jpg);}

.sewing .overlay{background:rgba(255, 0, 0, 0.5);}
.cutting .overlay{background:rgba(170, 192, 229,0.5);}
.cnc .overlay{background:rgba(75, 185, 98, 0.5);}
.leather .overlay{background:rgba(244, 134, 33, 0.5);}
.shoe .overlay{background:rgba(101, 48, 34, 0.7);}
.advshoe .overlay{background:rgba(101, 48, 34, 0.7);}
.ppe .overlay{background:rgba(255, 255, 0, 0.4);}
.shoe_repair .overlay{background:rgba(255, 255, 0, 0.4);}
.goodyear .overlay{background:rgba(255, 255, 0, 0.4);}

.logo{
    background:rgba(255,255,255,0.8);
    z-index:5;
    position: absolute;
    bottom:0;
    left: 0;
    right:0;
    padding:20px;
    height: 40%;
}

.logo img{
    height:120px;
    float:left;
}

.logo .content_block{
    float:left;
    text-align: left;
    margin-left:20px;
    position: relative;
    margin-top:30px;
    opacity:0.7;
    max-width: 50%;
}

.dcr_landing .col4-12:hover .content_block{
    opacity:1;
}

.logo .content_block h1{
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
}

.logo .content_block p{
    font-weight:600;
    font-size: 13px;
}

/*smaller screens*/
@media only screen and (max-width: 1550px) {
    .logo img {
        height: 80px;
    }
    .logo .content_block {
        float: left;
        text-align: left;
        margin-left: 20px;
        position: relative;
        margin-top: 14px;
        opacity: 0.7;
        max-width: 40%;
    }
    .logo .content_block h1 {
        font-size: 20px;
        line-height: 1;
        font-weight: 600;
    }
    .logo .content_block p {
        font-weight: 400;
        font-size: 12px;
    }
}

/*mobiles*/
@media only screen and (max-width: 767px) {

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

    .col,
    .dcr_landing,
    .dcr_landing .col12-12,
    .dcr_landing .col4-12{
        width: 100% !important;
        min-width: 0;
        height:auto;
        float: left;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .dcr_landing .col4-12{
        min-height:400px;
    }
    .logo img {
        height: 120px;
    }
    .logo .content_block {
        float: left;
        text-align: left;
        margin-left: 20px;
        position: relative;
        margin-top: 35px;
        max-width: 40%;
    }
    .logo .content_block h1 {
        font-size: 20px;
        line-height: 1;
        font-weight: 600;
    }
    .logo .content_block p {
        font-weight: 400;
        font-size: 16px;
    }
    .logo {
        height: 40%;
    }
}