@charset "utf-8";

/* CSS Document */


/* UNIVERSAL CLASSES */

@media {
    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        font-family: 'Montserrat' , sans-serif;
        color: Black;
        min-height: 100%;
    }

    body {
        min-height: 100%;
        font-size: 1em;
        line-height: 1.4;
        margin: 0px;
        padding: 0px;
        background-position: center;
        background: #272727;
    }
    .container {
        background: #272727;
        margin: auto;
        padding: 0px;
    }
    div,
    ul {
        margin: 0px;
        padding: 0px;
        overflow:inherit;
    }
    
     /*Was a div here with overflow:hidden and taking it away lets submenu work but screws up formatting on products page. works either in div here or in div ul above changing it to inherit fixed it*/
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7 {
        font-family: 'Montserrat' , sans-serif;
        color: whitesmoke;
        text-align: left;
        word-spacing: 2px;
        font-weight: 600;
        letter-spacing: .85px;
        margin: 6px 0px 6px 0px;
        display: block;
        text-transform: uppercase;
    }
    h1 {
        font-size: 30px;
        margin-bottom: 10px;
        font-weight: 1000;
    }
    h2 {
        font-size: 18px;
        letter-spacing: 1.5px;
    }
    
    .Clickable_Text {
        cursor: pointer;
        text-decoration: underline;
    }
    
    
    .red-border-left {
        border-left: 3px solid #792727;
        padding-left: 14px;
    }
    
    .Text_Background{
        /*height: 160px;
        width: 400px;*/
        display: block;
        border-radius: 3pt;
        padding-left: 6px;
        padding-top: 6px;
        padding-bottom: 0px;
        padding-right: 6px;
        background-color: #792727;
        box-shadow: 2px 2px 3px 0px black;
        margin-bottom: 10px;
        width: 39%;
    }

    .red-border-bottom {
        border-bottom: 2px solid #b0181b;
/*        padding-bottom: 6px;*/
        display: block;
        text-align: center;
        font-weight: bold;
    }
    
    h1.red-border-bottom#red-border-bottom-software{
        color: white;
    }
    
    
    
    h1.red-background-header {
        margin: 0px;
        padding: 4px;
        background: #8e2a2a;
        display: block;
        text-align: center;
        font-weight: 400;
        color: white;
        letter-spacing: 2px;
    }
    .intro-header {
        text-align: left;
        font-size: 22px;
        font-weight: 500;
    }
    .product-intro {
        font-size: 32px;
    }
    .center-align-paragraph {
        text-align: center;
    }
    .heading {
        font-size: 18px;
        font-weight: 600;
    }
    p,
    li {
        font-family: 'Open Sans', Arial, sans-serif;
        margin: 0px;
        padding: 0px;
        font-size: 15px;
/*        color: #383838;*/
        line-height: 1.6em;
        word-spacing: 1px;
        letter-spacing: 0.3px;
        font-weight: 400;
        color: #212121;
    }
    
    p {
        clear: both;
        margin-top: 0px;
        margin-bottom: 15px;
        text-align: left;
        color: #c5c5c5;
    }

    .center-align {
        text-align: center;
    }
    ul,
    ol,
    dl {
        margin-left: 0px;
        color: #3e3e3e;
    }
    li {
        list-style: square;
        margin-left: 16px;
        line-height: 2.0em;
    }
    img {
        max-width: 100%;
    }
    a img {
        border: none;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
    }
    .clearfloat {
        /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
    .br_20 {
        height: 0px;
        opacity: 0;
        margin: 2px;
    }
    hr {
        display: block;
        margin: 80px auto;
        border-style: inset;
        border-width: 1px;
        opacity: 0.6;
    }
    .full-width {
        width: 100%;
        margin-right: 0%;
        float: left;
    }
    .half-width {
        width: 49%;
        margin-right: 2%;
        float: left;
    }
    .half-width-more-spacing {
        width: 47%;
        margin-right: 6%;
        float: left;
    }
    .half-width-most-spacing {
        width: 45%;
        margin-right: 10%;
        float: left;
    }
    .one-third-width {
        width: 32%;
        margin-right: 2%;
        float: left;
    }
    .two-third-width {
        width: 66%;
        margin-right: 2%;
        float: left;
    }
    .fourty-percent-width {
        width: 39%;
        margin-right: 2%;
        float: left;
    }
    
    .sixty-percent-width {
        width: 59%;
        margin-right: 2%;
        float: left;
    }
    .thirty-percent-width {
        width: 29%;
        margin-right: 2%;
        float: left;
    }
    .seventy-percent-width {
        width: 69%;
        margin-right: 2%;
        float: left;
    }
    .three-fifths-width {
        width: 59%;
        margin-right: 1.5%;
        float: left;
    }
    .two-fifths-width {
        width: 39%;
        margin-right: 4%;
        float: left;
    }
    .last-column {
        margin-right: 0%;
    }
    .half-width-more-spacing .last-column {
        margin-right: 3%;
    }
    .arrow {
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #db0000;
        display: inline-block;
        margin-right: 6px;
        margin-bottom: -3px;
    }
    .arrow-small {
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 9px solid #792727;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: -2px;
    }
    .arrow-mid {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #792727;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: -2px;
    }
    .margin-top-10{
        margin-top: 10px;
    }
    .margin-top-20 {
        margin-top: 20px;
    }
    .margin-top-40 {
        margin-top: 40px;
    }
    .margin-top-60 {
        margin-top: 60px;
    }
    .margin-top-80 {
        margin-top: 80px;
    }
    .margin-top-100{
        margin-top: 100px;
    }
    .margin-top-140{
        margin-top: 140px;
    }
  
    .margin-bottom-0{
        margin-bottom: 0px;
    }
.margin-top-0{
    margin-top:0px;
}


    #three-tile-row h1 {
        background: White;
        text-align: center;
        margin: 0px;
        padding: 10px;
        font-weight: 500;
        font-size: 20px;
        border-radius: 4px 4px 0px 0px;
    }
    .show-on-mobile {
        display: none;
    }
    @media screen and (max-width: 1100px) {
        p,
        li {
            font-size: 14px;
            line-height: 1.7em;
            word-spacing: 1px;
            letter-spacing: 0.3px;
        }
    }
    @media screen and (max-width: 1000px) {
        h1 {
            font-size: 24px;
            margin: 20px 0px 10px 0px;
        }
        .product-intro {
            font-size: 28px;
        }
        h2 {
            font-size: 18px;
            font-weight: 400;
        }
        .arrow {
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #792727;
            margin-right: 6px;
            margin-bottom: -2px;
        }
        .arrow-small {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid #792727;
            margin-right: 6px;
            margin-bottom: -1px;
        }
        .arrow-mid {
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid #792727;
            margin-right: 6px;
            margin-bottom: -1px;
        }
        .clear-early {
            width: 84%;
            margin-left: 8%;
            margin-right: 8%;
        }
        .hide-on-tablet {
            display: none;
        }
        .intro-header {
            font-size: 30px;
        }
        .margin-top-10{
            margin-top: 0px;
        }
        .margin-top-20 {
            margin-top: 0px;
        }
        .margin-top-40 {
            margin-top: 0px;
        }
        .margin-top-60 {
            margin-top: 0px;
        }
        .margin-top-80 {
            margin-top: 0px
        }
        .margin-top-100{
            margin-top: 0px;
        }
        .margin-top-140{
            margin-top: 0px;
        }
        #retrofit-container-2,
        #cloud-image-1,
        #cloud-image-2 {
            width: 100%;
            margin-right: 0%;
            float: none;
            margin-bottom: 10px;
        }
    }
    @media screen and (max-width: 740px) {
        
         .full-width,
        .half-width,
        .half-width-more-spacing,
        .half-width-most-spacing,
        .one-third-width,
        .two-third-width,
        .thirty-percent-width,
        .fourty-percent-width,
        .sixty-percent-width,
        .seventy-percent-width,
        .three-fifths-width,
        .two-fifths-width,
        #drill-container-1,
        #drill-container-2
        {
            width: 100%;
            margin-right: 0%;
            float: none;
            margin-bottom: 10px;
        }
        
        .half-width-more-spacing .last-column {
            margin-right: 0%;
        }
        .clear-early {
            width: 100%;
            margin-left: 0%;
            margin-right: 0%;
        }
        
        p,
        .center-align-paragraph {
            text-align: justify;
        }
        .intro-header {
            font-size: 22px;
        }
        .red-border-bottom.intro-header {
            text-align: center;
        }
                
    }
    
    iframe-size {
        position:absolute;
        top:0px;
        left:0;
        width:68%;
        height:90%;
        padding: 0px 15px 0px 7px;
    }
    
    iframe-wrapper {
        padding:32% 0 0 0;
        position:relative; 
        box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
    }
    
    @media screen and (max-width: 600px) {
        .product-intro,
        h1 {
            font-size: 24px;
            margin: 10px 0px 10px 0px;
            padding-left: 0px;
        }
        h2 {
            font-size: 17px;
            font-weight: 400;
        }
        h1.red-background-header {
            margin: 0px;
            padding: 4px;
            background: #8e2a2a;
            display: block;
            text-align: center;
            font-weight: 400;
            color: white;
            letter-spacing: 2px;
        }
        p {
            font-size: 13px;
            line-height: 1.7em;
            word-spacing: 1px;
            letter-spacing: 0.3px;
            margin-bottom: 24px;
        }
        p.description {
            margin-bottom: 20px;
        }

        p.sub-description {
            margin-top: 10px;
        }
        .red-border-left {
            border-left: 2px solid #930000;
            padding-left: 10px;
        }
        .hide-on-mobile {
            display: none;
    
        }
        .show-on-mobile {
            display: block;
        }

    }
}


/* HEADER */

@media {
    header {
        background-color: #272727;
    }
    #div_header {
        margin: auto;
        max-width: 1240px;
        overflow: visible;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #logo {
        height: 70px;
        margin: 4px 0px 4px 0px;
    }
    #contact_info {
        font-size: 15px;
        float: right;
        margin: 26px 30px 0px 10px;
        color: white;
    }
    #contact_info li {
        list-style: none;
        color: white;
    }
    #phone-number,
    #phone-number i {
        font-size: 14px;
        color: black;
    }
    #phone-number {
        float: right;
        margin-top: 20px;
        margin-right: 20px;
        display: none;
    }
    #email-subscribe-form {
        float: right;
        margin-top: 30px;
        margin-right: 10px;
        min-width: 294px;
    }
    #email-subscribe-form a {
        float: right;
        color: white;
        background: #792727;
        border-radius: 2px;
        font-size: 12px;
        padding: 6px 10px;
    }
    #email-subscribe-form i {
        margin-right: 4px;
    }
    #email-subscribe-form p {
        clear: both;
        color: black;
        letter-spacing: 0.1em;
        margin-top: 6px;
        font-weight: lighter;
        font-size: 13.5px;
    }
    .subscribe-message {
        margin-top: 34px;
        margin-bottom: 0px;
    }
    #email-subscribe-form input[type=text],
    #email-subscribe-form input[type=submit] {
        border-radius: 2px;
    }
    #email-subscribe-form input[type=submit] {
        border: 0px;
    }
    #email-subscribe-form input[type=text] {
        padding: 6px;
        margin-right: 8px;
        width: 170px;
    }
    #email-subscribe-form input[type=submit] {
        color: white;
        background: #792727;
        padding: 8px 10px;
        cursor: pointer;
    }
    #email-subscribe-form input[type=submit]:hover {
        background: #b90000;
    }
    @media screen and (max-width: 900px) {
        #logo {
            height: 40px;
            margin: 10px 0px 10px 10px;
        }
        #email-subscribe-form p {
            display: none;
        }
        #phone-number {
            margin-top: 16px;
            margin-right: 20px;
        }
        #email-subscribe-form {
            margin-top: 16px;
            margin-right: 10px;
        }
        

    }
    @media screen and (max-width: 700px) {
        #phone-number {
            display: none;
        }
        /*        #email-subscribe-form {
            min-width: 246px;
        }
        #email-subscribe-form input[type=text] {
            width: 130px;
        }*/
    }
    @media screen and (max-width: 600px) {
        #email-subscribe-form {
            display: none;
        }
    }
    @media screen and (max-width: 460px) {
        #logo {
            height: 36px;
            margin: 8px 0px 8px 8px;
        }
    }
    @media screen and (max-width: 400px) {
        #Phone_Label {
            display: none;
        }
    }
}


/* NAVIGATION */

@media {
    #nav_bar {
        margin: 0px;
        height: 30px;
        text-align: center;
        background-color: #e6e6e6;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0);
        border-top: 1px solid black;
        display: flex; /* Added */
        justify-content: center; /* Added */
        align-items: center; /* Added */
        overflow: hidden;
/*        margin-bottom: 3px;*/
    }
    
    
    #main_menu li {
        display: inline-block;
    }
    #main_menu a {
        display: block;
        padding: 0px 40px;
        color: #262626;
        font-size: 13px;
        letter-spacing: 2.5px;
        font-weight: 400;
        max-height: 45px;
        /*        margin-bottom: -1px;*/
    }
    #main_menu li > a {
        transition: background 0.25s;
    }
    #main_menu a:hover {
        background-color: #b0181b;
        color: white;
    }
    #main_menu li:hover > a {
        background-color: #b0181b;
        color: white;
    }
    /*Added 2/27/23 */
    #main_menu ul li:hover > a {
        display:block;
        background-color: #b0181b;
        color:white;
    }
    #main_menu ul li> a{
        transition: background 0.25s;
    }
    #active,
    a#active {
        background-color: #b0181b;
        color: white;
    }
    #main_menu div > a { 
        border-bottom: 1px #d6d6d6 solid; /* this is dropdown menu divider line color*/
        padding: 10px 0px 20px 20px;
        background: white;
        float: left;
        clear: both;
        text-align: left;
        width: 160px;
        font-size: 15px;
        font-weight: 400;
        color: black;
    }


    #main_menu ul li{
        font: 'Open Sans';
        font-size: 25px;
        border-bottom: 1px #d6d6d6 solid; /* this is dropdown menu divider line color*/
        display: flex;
        padding:0;
        background: white;
       
        clear: both;
        text-align: left;
        width: 160px;
        font-size: 15px;
        font-weight: 400;
        color: black;
    }
       div#marking_menu_item { 
        border-bottom: 1px #d6d6d6 solid; /* this is dropdown menu divider line color*/
        padding: 0;
        background: white;
     
        clear: both;
        text-align: left;
        width: 160px;
        font-size: 15px;
        font-weight: 400;
        color: black;
    
    }

    #main_menu a.last-dropdown-item {
        border-bottom: 0px;
    }
  
    .dropdown_content {
        display: none;
        position: absolute;
    }
      #main_menu li:hover .dropdown_content {
        display: block;
        opacity: 1;
        animation-name: example;
        animation-duration: 0.4s;
        box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.9);
        z-index: 10;

    }
     
    .dropdown_content:hover {

        background: gray;
    }

/*ADDED THIS 2/27/23 TESTING*/
#main_menu dropdown_content:active .marking_solutions:hover
{
    background-color: black;
}

    #compact_nav_wrap {
        display: none;
        float: left;
        padding: 0px;
        z-index: 10000;
    }
    #compact_nav_wrap ul {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
    }
    #compact_nav_wrap > ul {
        background: #792727;
    }
    #compact_nav_wrap > ul > li > a {
        text-align: center;
    }
    #compact_nav_wrap ul a {
        display: block;
        color: white;
        text-decoration: none;
        font-weight: 100;
        font-size: 15px;
        letter-spacing: 1px;
        padding: 8px;
    }
    #compact_nav_wrap ul a:visited {
        color: white;
    }
    #compact_nav_wrap ul li {
        position: relative;
        /*	float:left;*/
        margin: 0;
        padding: 0;
    }
    #compact_nav_wrap ul li.current-menu-item {
        background: #ddd;
    }
    #compact_nav_wrap ul ul {
        display: none;
        position: absolute;
        z-index: 100000;
        top: 100%;
        left: 0;
        background: #656565;
        padding: 0;
        box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.5);
    }
    #compact_nav_wrap ul ul li {
        float: none;
        width: 146px;
        border-bottom: 1px #8b8b8b solid;
    }
    #compact_nav_wrap ul ul ul li {
        float: none;
        width: 104px;
        border-bottom: 1px #8b8b8b solid;
    }
    #compact_nav_wrap ul ul a {
        line-height: 120%;
        padding: 8px 0px;
        padding-left: 10px;
        font-size: 13px;
    }
    #compact_nav_wrap ul ul ul {
        top: 0;
        left: 100%;
        background: #3c3c3c;
    }
    #compact_nav_wrap li.last-dropdown-item {
        border-bottom: 0px;
    }
    #menu-button {
        cursor: pointer;
    }
    #menu-button i {
        font-size: 30px;
        font-weight: 100;
        padding: 7px 6px;
    }
    #compact_nav_wrap ul ul li:hover > ul {
        display:block;
    }
    #myDiv {
        display: none;
    }
    #compact_nav_wrap ul ul li:hover {
        background: #790000;
    }
    @keyframes example {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @media screen and (max-width: 1100px) {
        #main_menu a {
            padding-left: 18px;
            padding-right: 18px;
        }
    }
    @media screen and (max-width: 900px) {
        #nav_bar {
            display: none;
        }

        #compact_nav_wrap {
            display: block;
        }
    }

}


/* MAIN BANNER */

@media {
    #main-banner {
        width: 100%;
        max-height: 600px;
        position: relative;
        text-align: center;
        overflow: hidden;
        z-index: 0;
    }
    #main-banner-top {
        background-size: cover;
        background-position: center;
        border-bottom: 1px solid black;
    }
    #main-banner-background {
        margin: 0px 0px 0px 0px;
        background-color: #272727;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        text-align: center;
        position: relative;
        width: 100vw;
    }
    #main-banner-background img {
        position: relative;
        width: 100%;
        max-width: 1000px;
        margin: 70px auto;
        z-index: 1;
    }
    #main-banner #main-banner-image,
    #main-banner #mobile-banner-image {
        opacity: 1;
        float: none;
        max-width: 640px;
        margin: 0px auto;
        padding: 20px 30px;
        box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.7);
        background-color: rgb(255, 255, 255, 1);
        border-top: 0px solid #930000;
        border-bottom: 0px solid #930000;
        border-radius: 0px;
    }
    #main-banner h1 {
        color: black;
        letter-spacing: 2px;
        word-spacing: 6px;
        font-size: 40px;
        font-weight: 400;
        text-align: center;
        max-width: 700px;
        margin: 0px auto;
    }
    #mobile-banner-image {
        display: none;
        margin: 10px auto;
    }
    #banner-stripe {
        position: relative;
        background: #2f2f2f;
        overflow: hidden;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
        z-index: 2;
    }
    #banner-stripe #envelope {
        margin-right: 8px;
        font-size: 18px;
    }
    #banner-stripe a {
        color: black;
        color: white;
        background-color: #ebebeb;
        background-color: #b0181b;
        letter-spacing: .3em;
        word-spacing: .15em;
        font-size: 15.5px;
        display: block;
        cursor: pointer;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
    #banner-stripe a:hover {
        background: #984343;
        color: white;
    }
    #banner-stripe h3 {
        color: white;
        float: left;
        margin: 0px 40px;
    }
    #banner-stripe div {
        display: inline-block;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
    @media screen and (max-width: 1100px) {
        #main-banner-top {
            height: 140px;
        }
        #main-banner-background img {
            max-width: 800px;
        }
    }
    @media screen and (max-width: 1000px) {
        #banner-stripe {
            margin-bottom: 0px;
        }
        #banner-stripe a {
            letter-spacing: .1em;
            word-spacing: .08em;
        }
    }
    @media screen and (max-width: 720px) {
        #main-banner-top {
            height: 120px;
        }
        #main-banner-background {
            margin: 6px 0px 0px 0px;
        }
        #main-banner-background img {
            margin: 30px auto;
        }
    }
    @media screen and (max-width: 600px) {
        #main-banner-image {
            display: none;
        }
        #mobile-banner-image {
            display: block;
        }
        #banner-stripe a {
            letter-spacing: .1em;
            word-spacing: .08em;
            font-size: 14px;
            padding: 12px 0px;
            color: white;
        }
        #banner-stripe #envelope {
            margin-right: 8px;
            font-size: 16px;
        }
        #main-banner-top {
            background-image: url(../images/Home/banner-top.jpg);
            height: 80px;
        }
        #main-banner-background {
            margin: 3px 0px 0px 0px;
        }
    }
    @media screen and (max-width: 500px) {
        #main-banner-top {
            background-image: url(../images/Home/banner-top.jpg);
            height: 70px;
        }
        #banner-stripe a {
            letter-spacing: .03em;
            word-spacing: .05em;
            font-size: 13.5px;
        }
        #banner-stripe #envelope {
            margin-right: 6px;
            font-size: 14px;
        }
    }
}


/* SUB PAGE BANNER */

@media {
    .sub-page-banner {
        overflow: hidden;
        background: transparent;
        background-position: center;
        background-size: cover;
        min-height: 100px;
        background-image: url(../images/Home/banner-top.jpg);
    }
    @media screen and (max-width: 900px) {
        .sub-page-banner {
            min-height: 80px;
            background-image: url(../images/Home/banner-top-mobile.jpg);
        }
    }
    @media screen and (max-width: 720px) {
        .sub-page-banner {
            min-height: 80px;
        }
    }
}


/* CONTAINERS */

@media {
    div.content-background-container {
        background-color: #272727;
        padding: 30px 0px 0px 0px;
    }
    div.content-container,
    div.intro-container1,
    div.intro-container2,
    div.intro-container3,
    div.intro-container4,
    div.intro-container5,
    div.intro-container6,
    div.intro-container7,
    div.intro-container8,
    div.smaller-content-container {
        clear: both;
        max-width: 1240px;
        margin: 0px auto;
        overflow: hidden;
    }
   /* div.intro-container1,
    div.intro-container2,
    div.intro-container3,
    div.intro-container4 {
        max-width: 1300px;
        padding: 0px 14px;
        padding-top: 26px;
    }*/
    div.intro-container2 {
        margin-bottom: 30px;
        padding-top: 10px;
    }
    div.intro-container4 {
        margin-bottom: 30px;        
        padding-top: 10px;
    }
    div.intro-container6 {
        margin-bottom: 30px;
        padding-top: 10px;
    }
    
    div.smaller-content-container {
        max-width: 1160px;
    }
    div.container-border {
        border: 10px solid #e5e5e5;
        padding: 40px 80px;
    }
    div.section-highlight-container,
    div.full-width-container,
    div.container-margin {
        margin: 0px auto 80px auto;
    }

    .content-container ul {
        overflow: hidden;
        margin: auto;
        width: 100%;
    }

    .full-width-container {
        background-color: #f4f4f4;
        text-align: left;
        padding: 40px 0px 60px 0px;
    }
    div.section-highlight-container {
        text-align: left;
        padding: 40px 40px 40px 40px;
        max-width: 1160px;
    } 
    
    /*STEEL SOLUTIONS TRIAL PAGE*/
    
    #ss-background-container{
        background-color: black;
    }
    #sstrial_header{
        background-color: black;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%; /* Ensures the container takes the full width */
        padding: 0 10px; /* Small padding to avoid edge overflow */
        box-sizing: border-box;
        overflow: hidden; /* Prevents any overflow issues */
    }
    
    #ss-text-logo{
        max-width: 75vw;
        height: auto;
    }
    
    #Text_Message_Checkbox_Container_Trial{
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -webkit-flex-direction: column;
        flex-direction: column;
        align-items: center; /* Vertically centers both elements */
        margin-top: 20px; /* Adds space above the submit button and CAPTCHA */
        clear: both; /* Clears any floating elements above */    
    }
    

    
    #Contact_Submit_Button {
        -webkit-appearance: none; 
    }
    
    .trial-request-container {
        padding: 10px;
        background-color: #f4f4f4;
        border-radius: 5px;
    }
    
    #trial-request-content-container {
        display: flex;
        justify-content: center; /* Centers the content horizontally */
        padding: 20px; /* Add some padding for mobile responsiveness */
        box-sizing: border-box;
    }
    
    #Trial-Request-Header {
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 0px 0px;
        background-color: #4c4c4c;
        border-radius: 4px;
        
    }
    
    #Trial-Request-Header-Text {
    text-align: center;
    }
    
    #trial-text-inputs-wrapper{
        margin-bottom: 5px;
    }
    
    textarea::placeholder{
        color: black;
        opacity: 1;
    }
    
    /*END OF STEEL SOLUTIONS TRIAL PAGE*/

    .subpage-title-container {
        margin: 0px auto;
        max-width: 1240px;
    }
    @media screen and (max-width: 1290px) {
        div.content-container,
        div.smaller-content-container,
        div.subpage-container,
        div.subpage-title-container,
        div.intro-container1,
        div.intro-container2,
        div.intro-container3,
        div.intro-container4,
        div.intro-container5,
        div.intro-container6,
        div.intro-container7,
        div.intro-container8{
            padding: 0px 14px;
        }
        .section-highlight-container,
        .full-width-container {
            margin: 30px auto 20px auto;
            padding: 20px 0px 40px 0px;
        }
    }
    @media screen and (max-width: 1100px) {
        .product-highlight-container h1 {
            text-align: left;
            font-weight: 600;
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    @media screen and (max-width: 740px) {
        
        .g-recaptcha {
        transform: scale(0.8); /* Scale down further on smaller screens */
        }
        
        div.content-container {
            text-align: center;
        }
        div.content-container ul {
            text-align: left;
        }
        .product-highlight-container .product-highlight-image {
            float: none;
            margin: 0px auto;
            display: block;
            width: 100%;
        }
        .product-highlight-container {
            padding: 10px 16px;
            margin: 0px auto 26px auto;
        }
        .product-highlight-container div {
            width: 100%;
        }
        .product-highlight-container h1 {
            text-align: center;
            font-weight: 600;
            font-size: 22px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .product-highlight-container li {
            display: none;
        }
        div.content-background-container {
            background-color: #272727;
            padding: 14px 0px 10px 0px;
        }
        div.intro-container2 {
            margin-bottom: 10px;
        }
        div.intro-container4 {
            margin-bottom: 0px;
        }
        div.container-margin {
            margin: 0px auto 60px auto;
        } 
}
    @media screen and (max-width: 600px) {
         .product-highlight-container h1 {
            text-align: center;
            font-weight: 400;
            font-size: 18px;
            margin-top: 10px;
            margin-bottom: 10px;
            letter-spacing: 5px;
            padding: 8px 0px;
            background: #6d2424;
            color: white;
            border: 0px;
            border-radius: 3px;
        }
        div.container-margin {
            margin: 0px auto 60px auto;
        }
        div.section-highlight-container,
        div.full-width-container {
            margin: 20px auto;
            padding: 30px 0px;
        }

    }
    @media screen and (max-width: 540px) {
        .link-corner-arrow {
            display: none;
        }
    }
    @media screen and (max-width: 460px) {
        div.content-background-container {
            background-color: #272727;
/*            padding: 8px 10px 6px 10px;*/
        }
        div.content-container,
        div.subpage-container,
        div.intro-container1,
        div.intro-container2,
        div.intro-container3,
        div.intro-container4,
        div.intro-container5,
        div.intro-container6,
        div.intro-container7,
        div.intro-container8{
        }

    }
}

/* TITLES  */

@media {
    .subpage-title { 
        margin-bottom: 0px;
        border-bottom: 2px solid #b0181b;
        max-width: 1236px;
        font-size: 26px;
        font-weight: 200;
    }
    .subpage-title span {
        font-weight: 600;
    }
    .subpage-title#subpage-title-contact{
        margin-bottom: 10px;
    }
    @media screen and (max-width: 700px) {
        .subpage-title {
            margin-bottom: 10px;
            text-align: center;
            margin-top: 0px;
            font-size: 22px;
        }
    }
    @media screen and (max-width: 400px) {
        .subpage-title {
            font-size: 18px;
        }
    }
}


/* THREE TILE ROW */

@media {
    #three-tile-row {
        overflow: hidden;
    }
    #three-tile-row > div {
        float: left;
        width: 32%;
        margin-right: 2%;
        min-width: 100px;
        text-align: center;
        position: relative;
    }
    #three-tile-row img {
        width: 100%;
    }
    #three-tile-row .last-column {
        margin-right: 0px;
    }
    div.img-and-title {
        position: relative;
        overflow: hidden;
    }
    div.row-without-links a {
        cursor: default;
    }
    div.row-with-links div.img-and-title {
        cursor: pointer;
    }
    div.row-with-links div.img-and-title:hover {
        opacity: 0.8;
    }
    #three-tile-row img.play-icon {
        color: white;
        opacity: 0;
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
    }
    #three-tile-row div.img-and-title:hover img.play-icon {
        opacity: 0.75;
    }
    #three-tile-row .column-title {
        background-color: #f5f5f5;
        border-bottom: 1.5px #930000 solid;
    }
    #three-tile-row .column-title h2 {
        text-align: center;
    }
    #three-tile-row .alternate-column-title {
        background-color: #f0f0f0;
        border: 0px;
    }
    #three-tile-row .alternate-column-title h2 {
        color: black;
    }
    #three-tile-row h2 {
        color: black;
        margin: 8px 0px;
    }
    .mobile-column-title {
        display: none;
    }
    @media screen and (max-width: 1000px) {
        #three-tile-row > div {
            width: 32.5%;
            margin-right: 1.25%;
        }
    }
    @media screen and (max-width: 800px) {
        .column-title h2 {
            display: none;
        }
        #three-tile-row h2.mobile-column-title {
            display: block;
        }
        .column-title {
            padding: 0px;
        }
        #three-tile-row img.play-icon {
            color: white;
            opacity: 0.8;
            position: absolute;
            top: 80%;
            left: 85%;
            transform: translate(-50%, -50%);
            width: 25%;
        }
        .row-with-links div.img-and-title:hover img.play-icon {
            opacity: 0.75;
            /*    transition: opacity 0.25s;*/
        }
    }
    @media screen and (max-width: 600px) {
        #three-tile-row {
            padding: 6px;
            padding-bottom: 0px;
            /*        background-color: #ededed;*/
        }
        #three-tile-row div {
            width: 100%;
            max-width: 440px;
            margin-right: 0%;
            float: none;
            margin: 0px auto;
            clear: both;
        }
        #three-tile-row > div {
            margin-bottom: 20px;
        }
        #three-tile-row h2 {
            display: block;
            font-size: 16px;
        }
        #three-tile-row h2.mobile-column-title {
            display: none;
        }
        #three-tile-row .last-column {
            margin: 0px auto;
        }
    }
}


/* THREE TILE ROW NO SPACING */




/*QUOTE*/
@media{
    #Company-Quote-Container{
        padding: 10px 0px 20px 0px;
    }
    #Company-Quote {
        font-family: 'Montserrat' , sans-serif;
        max-width: 1000px;
        text-align: center;
        
    }
}

/* FOOTER */

@media {
    #footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #272727;
    }
    #footer-container div {
        text-align: center;
        border-bottom: 0px solid #930000;
    }
    #footer-container li {
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }
    #footer_email a {
        color: white;
        font-size: 14px;
    }
    footer {
        max-width: 1200px;
        color: white;
        margin: auto;
/*        padding: 20px 0px;*/
        text-align: center;
    }
    footer span {
        font-weight: 700;
        font-size: 115%;
        line-height: 34px;
    }
    footer ul {
        margin-bottom: 20px;
    }
    footer p {
        text-align: center;
        margin-bottom: 10px 0px 0px 0px;
        font-family: "Goudy Bookletter 1911", sans-serif;
        color: white;
        font-size: 12px;
    }

    #footer-address{
        margin-top: 45px;
        margin-bottom: 0px;
        padding: 2px 4px 2px 4px;
        border-radius: 2px;
        background-color: #4C4C4C;
    }
    #first-contact {
        margin-left: 80px;
        margin-right: 40px;
    }
    #copyright {
        font-size: 11.5px;
        font-weight: 100;
        text-align: center;
        color: #d0d0d0;
        margin-top: 10px;
        letter-spacing: 0.05em;
    }
    #copyright:before {
        content: "(c) 2025 "
    }
    @media screen and (max-width: 1180px) {
        footer ul p {
            margin: 10px;
            font-size: 11px;
        }
    }
    @media screen and (max-width: 1100px) {
        footer ul p {
            margin: 10px 4px;
        }
    }
    @media screen and (max-width: 1100px) {
        footer ul p {
            margin: 10px 10px 10px 10px;
        }
    }
    @media screen and (max-width: 940px) {
        footer ul p {
            margin: 10px 20px 10px 20px;
        }
    }
    @media screen and (max-width: 740px) {
        #first-contact {
            margin: 10px 4px 10px 4px;
        }
        footer ul p {
            margin: 10px 4px 10px 4px;
            font-size: 12px;
            line-height: 19px;
        }
        footer span {
            font-weight: 700;
            font-size: 115%;
            line-height: 20px;
        }
        #footer-container footer li {
            display: block;
        }
    }
    @media screen and (max-width: 400px) {
        footer ul p {
            font-size: 11px;
        }
        #copyright {
            margin-top: 10px;
        }
    }
}


/* SOCIAL MEDIA LINKS */

@media {
    ul.social {
        float: none;
    }
    ul.social li {
        display: inline-block;
        list-style: none;
        margin: 6px 24px;
    }
    .social a {
        color: #f5f5f5;
        font-size: 22px;
        margin: 0px auto;
        text-decoration: none;
    }
    .social a:hover i {
        transition: transform 0.25s;
    }
    .social a:hover i {
        color: White;
        -ms-transform: translate(0px, -5px);
        /* IE 9 */
        -webkit-transform: translate(0px, -5px);
        /* Safari */
        transform: translate(0px, -5px);
    }
    @media screen and (max-width: 440px) {
        ul.social li {
            margin: 6px 10px;
        }
        .social a {
            font-size: 28px;
        }
    }
}


/* BUTTONS */

@media {
    .RedButton,
    .RedButton-Small {
        font-family: 'Open Sans', Arial, sans-serif;
        color: white;
        font-size: 16px;
        font-weight: 400;
        padding: 8px 14px;
        background-color: #6d1111;
        box-shadow: 1px 1px 3px 0px black;
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 6px;
    }
    .RedButton-Marking-Solutions{
        font-family: 'Open Sans', Arial, sans-serif;
        color: white;
        font-size: 22px;
        font-weight: 450;
        padding: 8px 14px;
        background-color: #792727;
        box-shadow: 1px 1px 3px 0px black;
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        margin: 6px;
    }
    .RedButton-Small {
        font-size: 14px;
        padding: 0px 6px;
        box-shadow: 0.5px 0.5px 0.5px 0px black;
    }
    .RedButtonAlt {
        visibility: collapse;
    }
    .RedButton-Marking-Solutions:hover,
    .RedButton:hover,
    .RedButton-Small:hover {
        background: #984343;
    }
    
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 24px;
            border-radius: 10%;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }
        .nav-button:hover {
            background-color: rgba(255, 255, 255, 0.8);
            color: black;
            transform: translateY(-50%) scale(1.1);
        }
        .nav-button.left {
            left: 10px;
        }
        .nav-button.right {
            right: 10px;
        }
    
    @media screen and (max-width: 740px){
        #insight-software-click-steel-solutions-button{
            text-align: center;
        }
    }
    
    @media screen and (max-width: 600px) {
        .RedButton {
            font-size: 14px;
            padding: 6px 12px;
        }
        .RedButton-Small {
            font-size: 13px;
        }
    }
    @media screen and (max-width: 460px) {
        #menu-button i {
            font-size: 26px;
            padding: 5px 6px;
        }
    }
    @media screen and (max-width: 400px) {
        #menu-button i {
            font-size: 26px;
            padding: 5px 6px;
        }
    }
}


/* QUOTE REQUEST FORM */
#form-submit-button-wrapper{
    text-align: center;
}
@media {
    #Quote-Request-Header {
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 0px 0px;
        background-color: #b0181b;
        border-radius: 4px;
    }
    #Quote-Request-Header h2 {
        margin: 0px;
        font-weight: 400;
        font-size: 22px;
        color: white;
        text-align: center;
    }
    .quote-request-container {
        padding: 10px;
        background-color: #f4f4f4;
        border-radius: 5px;
    }
    .quote-request-container label {
        font-size: 16px;
    }
    .quote-input-div-left {
        float: left;
        width: 49%
    }
    #quote-request-form {
        text-align: left;
    }
    #quote-request-form span {
        color: gray;
        font-size: 13px;
        margin-left: 0px;
    }
    .quote-input-div-right {
        float: right;
        width: 49%;
    }
    #Contact_Information {
        list-style: none;
        background: rgba(255, 255, 255, 0.85);
        padding: 30px;
        color: white;
        height: auto;
        min-height: 460px
    }
    #Contact_Information span {
        font-weight: 800;
        font-size: 126%;
        line-height: 34px;
    }
    #Contact_Information p {
        color: Black;
        text-align: left;
    }
    #quote-request-form input[type=text] {
        width: 100%;
        padding: 8px 8px;
        margin: 4px 0 8px 0;
        box-sizing: border-box;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #a0a0a0;
    }
    #quote-request-form input[type=button],
    #quote-request-form input[type=submit],
    #quote-request-form input[type=reset] {
        background-color: #b0181b;
        border: none;
        color: white;
        padding: 10px 32px;
        text-decoration: none;
        /*margin-left: 10px;*/
        cursor: pointer;
        font-size: 16px;
        border-radius: 4px;
    }
    #quote-request-form input[type=button]:hover,
    #quote-request-form input[type=submit]:hover,
    #quote-request-form input[type=reset]:hover {
        background-color: #d60000;
    }
    select {
        width: 100%;
        padding: 8px 10px;
        margin: 4px 0 10px 0;
        box-sizing: border-box;
        font-size: 14px;
    }
    option {
        font-size: 13px;
        padding: 20px;
    }
    textarea {
        width: 100%;
        height: 150px;
        padding: 8px 10px;
        font-size: 14px;
        margin: 4px 0 10px 0;
        box-sizing: border-box;
        resize: none;
        border-radius: 4px;
        border: 1px solid #a0a0a0;
    }
    #quote_request {
        position: fixed;
        right: -75px;
        top: 290px;
        z-index: 10001;
        -ms-transform: rotate(-90deg);
        /* IE 9 */
        -webkit-transform: rotate(-90deg);
        /* Safari */
        transform: rotate(-90deg);
        box-shadow: 0px 2px 4px 0px black;
    }
    #quote_request i {
        margin-left: 6px;
    }
    #quote_request div {
        background: #d60000;
        padding: 4px;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 180px;
        border-radius: 2px 2px 0px 0px;
    }
    #quote_request div:hover {
        background: #ff0000;
    }
    #quote_request p {
        text-align: center;
        color: white;
        margin: 0px;
        padding: 2px;
        font-size: 16px;
        font-weight: 100;
    }
    #quote_request img {
        height: 14px;
        margin-left: 6px;
        margin-bottom: -1px;
    }
    @media screen and (max-width: 700px) {
        #quote_request {
            right: -67px;
            top: auto;
            bottom: 80px;
        }
        .quote-request-container {
            padding: 20px;
            padding-top: 0px;
            padding-left: 20px;
        }
        #quote_request div {
            padding: 3px;
            width: 160px;
        }
        #quote_request p {
            font-size: 14.5px;
            font-weight: 100;
        }
        #quote_request img {
            height: 12px;
            margin-left: 5px;
        }
    }
    @media screen and (max-width: 600px) {
        #Quote-Request-Header {
            margin-top: 0px;
            margin-bottom: 10px;
        }
        .quote-request-container {
            padding: 6px;
        }
        .quote-request-container label {
            font-size: 15px;
        }
        #quote-request-form input[type=text] {
            width: 100%;
            padding: 6px 8px;
            margin: 4px 0 10px 0;
            box-sizing: border-box;
            font-size: 13.5px;
        }
    }
    @media screen and (max-width: 460px) {
        #quote_request {
            right: 12px;
            top: auto;
            bottom: 0px;
            -ms-transform: rotate(0deg);
            /* IE 9 */
            -webkit-transform: rotate(0deg);
            /* Safari */
            transform: rotate(0deg);
        }
        #quote_request div {
            padding: 2px;
            width: 140px;
        }
        #quote_request p {
            font-size: 13.5px;
            font-weight: 100;
        }
        #quote_request img {
            height: 10px;
        }
    }
}



#social-media-header {
    margin: 0px 0px 0px 0px;
    max-width: 300px;
    float: right;
    background: #b0181b;
    border-radius: 3px;
    /*    box-shadow: 0.5px 0.5px 2px 0px rgba(0, 0, 0, 0.9);*/
}

#social-media-header div {
    border-radius: 3px 3px 0px 0px;
    background: #404040;
    padding: 0px 4px;
}

#social-media-header p {
    margin: 0px 0px 0px 0px;
    background-color: #8e1414;
    padding-left: 0px;
    font-size: 11px;
    text-align: center;
    color: #f5f5f5;
    font-weight: 500;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

#social-media-header:hover div {
    background-color: #343434;
}

#social-media-header:hover {
    background: #b0181b;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.65);
}






@media screen and (max-width: 740px) {

    div.content-container {
            text-align: center;
}
    div.content-container ul {
            text-align: left;
}
    
    .fourty-percent-width {
        width: 100%;
        margin-right: 0%;
        float: none;
        margin-bottom: 10px;
    }
}


@media screen and (max-width: 1000px){
    .Text_Background{
            width: 60%;
        }
}


@media screen and (max-width: 820px){

    
    p, .center-align-paragraph{
        text-align: justify;
    }
    


}

/*468px rule for contact page*/
@media screen and (max-width: 468px){
    #Contact_Submit_Button{
        margin-bottom: 10px;
    }
    
    .quote-request-container{
        padding-bottom: 40px;
    }
}