@charset "utf-8";

/* CSS Document */


/* UNIVERSAL CLASSES */

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


/*THERE WAS A CLOSED BRACKET HERE AND TAKING IT AWAY FIXED THE HEADER LOGO AND ALL THAT 3/6/2023 */

    body {
        min-height: 100%;
        font-size: 1em;
        line-height: 1.4;
        margin: 0px;
        padding: 0px;
        background-position: center;
    }
    .container {
        margin: auto;
        padding: 0px;
    }
    div,
    ul {
        margin: 0px;
        padding: 0px;
        overflow:inherit;
    }
    
 /*    div {	
        overflow: hidden;	
    }*/
    
     /*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: 'Open Sans', Arial, sans-serif;
        color: white;
        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: 20px;
        font-weight: 1000;
    }
    h2 {
        font-size: 18px;
        letter-spacing: 1.5px;
    }
    .red-border-left {
        border-left: 3px solid #0090cc;
        padding-left: 14px;
    }
    .red-border-left-dot-peen-landing-page {
        border-left: 3px solid #0090cc;
        padding-left: 14px;
        color: black;
    }
    .red-border-left-dot-peen{
        border-left: 3px solid #0090cc;
        padding-left: 14px;
        color: white;  
    }
    
    .red-border-left-drilling-highlight-container{
        border-left: 3px solid #0090cc;
        padding-left: 14px;
        padding-right: 14px;
        color: white;
        background-color: black;
        font-size: 35px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-transform: uppercase;
        word-spacing: 2px;
        letter-spacing: .85px;

    }
    .drilling-highlight-container-info{
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px 10px 10px 14px;
        color: white;
        background-color: #792727;
        border-radius: .2em;
    }
    
    .drilling-highlight-container-info-bullets{
        background-color: black;
        max-width: 370px;
        margin-top:0px;
        border-radius: .2em;
    }
    
    .drill-highlight-container-page-link{
        margin-top: 10px;
    }

     .red-border-left-ink-marker {
        border-left: 3px solid #0090cc;
       /* padding-left: 14px;*/
        color:white;
    }
    .red-border-left-dot-peen span{
       font-size: 40px;   
    }
    
    .red-border-left-ink-marker-info{
        background-color: black;
        border-radius: 5px;
        font-family: Helvetica, serif;
        letter-spacing: 1px;
        font-size:20px;
        color: white;
        padding-left: 15px;
        padding-top:5px;
        padding-bottom: 5px;
        padding-right: 15px;
        
    }
    .single-dot-ink-marker-header{
        margin-left: -10px;
        margin-bottom: 16px;
        
    }
    
    .single-dot-ink-marker-info-container{
        text-align: center;
    }
    
    .single-dot-ink-marker-info-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 20px;
        font-weight: 1000;
        text-transform: uppercase;
        text-decoration: underline;
        color: #262626
    }
    
    .single-dot-ink-marker-info {
        width: auto;
        display: inline-block;
        text-align: left;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 20px;
        font-weight: 1000;
        text-transform: uppercase;
        color: #262626
    }
    
    .ink-marker-video-link{
        text-align: center;
        margin-top: 12px;
    }

    .dot-peen-info {
        background-color: black;
        border-radius: 5px;
        font-family: Georgia, serif;
        letter-spacing: 1px;
        font-size:17px;
        color: white;
        padding-left: 15px;
        padding-top:5px;
        padding-bottom: 5px;
        padding-right: 15px;
    }
        .dot-peen-info span {

    } 
    
    
    
    .hide-on-mobile.dot-peen-product-page-header{
        margin-top: 80px;
       
    }
    
    
    .dot-peen-results-info,
    .ink-marker-info{
        background-color: black;
        border-radius: 5px;
        font-family: Georgia, serif;
        letter-spacing: 1px;
        font-size:17px;
        color: white;
        padding-left: 15px;
        padding-top:5px;
        padding-bottom: 5px;
        padding-right: 15px;
    }
    
    .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 #0090cc;
        padding-bottom: 6px;
        display: block;
        text-align: center;
        font-weight: bold;
    }
    

    
    
    
    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: center;*/
        font-size: 32px;
    }
    .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;
        line-height: 1.6em;
        word-spacing: 1px;
        letter-spacing: 0.3px;
        font-weight: 400;
        color: white;
    }
    
    .drilling-highlight-container-info-bullets .drilling-bullets li{
       color: white;
       font-size: 20px;
       margin-left: 35px;
    }
    
    p {
        clear: both;
        margin-top: 0px;
        margin-bottom: 40px;
        text-align: left;
    }
    .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;
    }
    
    .half-width-special-spacing {
        width: 43%;
        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;
    }
    
    .fifty-percent-width {
        width: 49%;
        margin-right: 2%;
        float: right;
    }
    
    .fifty-eight-percent-width {
        width: 58%;
        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 #0090cc;
        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 #0090cc;
        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 #0090cc;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: -2px;
    }
    .margin-top-5{
        margin-top: 5px;
    }
    .margin-top-10{
        margin-top: 10px;
    }
    
    .margin-top-15{
        margin-top: 15px;
    }
    .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;
}
    #cloud-image-1 {
        width: 52.5%;
        margin-right: 2.5%
    }
    #cloud-image-2 {
        width: 44.5%;
    }
    #retrofit-container-1 {
        width: 30%;
        float: left;
    }
    #retrofit-container-2 {
        width: 70%;
        float: left;
    }
    #drill-container-1 {
        width: 42%;
        float: left;
        margin-right: 4%;
    }
    #drill-container-2 {
        width: 54%;
        float: left;
        margin-top: 50px;
    }

    #dotpeen-container-1 {
        width: 42%;
        float: left;
/*        margin-right: 4%;*/
    }
    #dotpeen-container-2 {
        width: 54%;
/*        float: left;*/
        margin-top: 50px;
/*        margin-left: -140px;*/
    }
    /*
        #drill-container-1 {
        width: 42%;
        float: left;
        margin-right: 4%;
    }
    #drill-container-2 {
        width: 54%;
        float: left;
        margin-top: 50px;
    }
*/
    #three-tile-row h1 {
        background: White;
        text-align: center;
        margin: 0px;
        padding: 10px;
        font-weight: 500;
        font-size: 20px;
        border-radius: 4px;
    }
    .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,
        .half-width-special-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%;
        }
        
        .half-width-special-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;
        }
        
                
    }
    @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 #0090cc;
            padding-left: 10px;
        }
        .hide-on-mobile {
            display: none;
    
        }
        .show-on-mobile {
            display: block;
        }

    }
}


/* HEADER */

@media {
    header {
        background-color: #0f233d;
    }
    #div_header {
        margin: auto;
        max-width: 1240px;
        overflow: visible;
    }
    #logo {
        height: 80px;
        margin: 12px 0px 18px 30px;
    }
    #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;
        text-align: center;
        background-color: #e6e6e6;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0);
        border-top: 0px solid #414141;
        border-bottom: 0px solid #792727;
    }
    #main_menu li {
        display: inline-block;
    }
    #main_menu a {
        display: block;
        padding: 12px 40px;
        color: #262626;
        font-size: 17px;
        letter-spacing: 2.5px;
        font-weight: 400;
        /*        margin-bottom: -1px;*/
    }
    #main_menu li > a {
        transition: background 0.25s;
    }
    #main_menu a:hover {
        background-color: #0090cc;
        color: white;
    }
    #main_menu li:hover > a {
        background-color: #0090cc;
        color: white;
    }
    /*Added 2/27/23 */
    #main_menu ul li:hover > a {
        display:block;
        background-color: #0090cc;
        color:white;
    }
    #main_menu ul li> a{
        transition: background 0.25s;
    }
    #active,
    a#active {
        background-color: #0998d3; 
        color: white;
    }
    #main_menu div > a { 
        border-bottom: 1px #d6d6d6 solid; /* this is dropdown menu divider line color*/
        padding: 10px 18px;
        background: white;
        float: left;
        clear: both;
        text-align: left;
        width: 205px;
        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;
    }*/
        /*sub menu stuff here */
  .marking_solutions 
    {
        display: flex;
        flex-direction: column;
        position:relative;
       
    }



   #main_menu .marking_solutions
    {
        display:none;
        flex-direction: column;
      
    }
    #marking_menu_item .marking_solutions ul{ 
        display:flex;
        flex-direction: column;
        padding-top: 0px;
        padding-right: 0px;
        left:100%;
        overflow-x: visible;
        position:relative;
        box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.9);
    }
    
    #marking_menu_item .marking_solutions li {
        margin: 0px;
    }
    
    #marking_menu_item .marking_solutions { /*actually manipulates the li items within the ul */
        display:none;
        flex-direction: column;
        padding-top: 0px;
        padding-right: 0px;
        left:100%;
        overflow-x: visible;
        position:relative;
        box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.9);
    }
    
   #main_menu #marking_menu_item:hover  .marking_solutions /*this is displaying the UL not the individual list items. i.e. if you change the background color, itjust changed
    background color of 'marking solutions' not 'dot peen' or 'ink marker' */
    {
        display:block;
        position:absolute;
        overflow-x: visible;
        
    }
 
    
    #Video_List a:visited{
        color: black;
        text-shadow: .5px 1px 1px black;  
    }
    #Video_List a:link{
        color: black;
        text-shadow: .5px 1px 1px black;  
    }
     #Video_List a:hover{
        color: crimson;
        /*border: 3px solid #792727;*/ 
    }
        #Video_List ol {
        vertical-align:middle;
        display: inline-block;
   
     
    }
    #Video_List ol li {
       /* background: url(ftp://atek6616@ftp.atekautomation.com/Logos-and-Icons/copy_icon_small.png) no-repeat left center; */
        background: url(../images/Logos-and-Icons/video_camera_small.png) no-repeat left center;
        vertical-align: middle;
        margin: 0;
        padding: 3px 0px 2.3px 20px;
        list-style: none;
    }
    
    .copyButton{
        display: inline-flex;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
    }
    .copyButton:hover::after{
        
    }



   
/*RESOURCES PAGE*/
    
    #pdf-button-wrapper{
        margin-bottom: 40px;
    }
    
    .video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
    }

.video-item {
    width: calc(33.33% - 20px); /* 3 items per row with spacing */
    text-align: center;
    }

.video-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s, box-shadow 0.3s;
    }

.video-item img:hover {
    transform: scale(1.02);

    }
    

/* Adjust layout for tablets */
@media (max-width: 768px) {
    .video-item {
        width: calc(50% - 20px); /* 2 items per row */
    }
}

/* Adjust layout for small devices (e.g., phones) */
@media (max-width: 480px) {
    .video-item {
        width: 100%; /* 1 item per row */
    }
}    

/*END OF RESOURCES PAGE*/    

   
/*LIGHT INDUSTRIAL PAGE*/    
    .single-dot-ink-marker {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    
    .single-dot-ink-marker img {
        width: 66%;
    }
    
    #Plate_Solutions_Highlight_Container {
        padding: 50px 0px 50px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
/*      background-image: url(../images/Backgrounds/GenX_LI_Background.jpg);
        background-position:center;
        background-size: cover;*/
        background-color: black;
        margin-bottom: 60px;
        
    }
    
    #Plate_Solutions_Highlight_Container img{
        border: 2px solid #0090cc;
    }
    
    #software-image {
    transition: opacity 1s ease-in-out;
    opacity: 1;
    }

    #software-image.hidden {
    opacity: 0;
    }
    
    div.genx-nexus-machine-software-description-light-industrial.fourty-percent-width{
        margin-top: 0px;
    }
    
/*LIGHT INDUSTRIAL VIEWS*/
    @media screen and (max-width: 740px){
    .single-dot-ink-marker img {
        width: 99%;
    }
}

/*END OF LIGHT INDUSTRIAL VIEWS*/
/*END OF LIGHT INDUSTRIAL PAGE*/
    
    
/*Nexus HD Page*/
    .software-and-table-wrapper {
        display: flex;
        justify-content: center;
        padding:24px;
        background-color: #434343;
        border-radius: 4px;
        border: 1px solid black;
    }
    
    .Software_Comparison_Container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .Software_Header_And_Buttons {
        display: inline-flex; 
        flex-direction: column; 
        width: fit-content; 
        text-align: center;
    }
    
    .Software_Button_Container {
        display: flex;
        gap: 10px;
        
    }
    
    div.genx-nexus-machine-software-description.fourty-percent-width{
        margin-top: 30px;
    }
    
    div.content-container {
        text-align: left;
    }
    

    
    .black-border-bottom{
        border-bottom: 2px solid black;
        display: inline-block;
        text-align: center;
        font-weight: bold;
    }
    
    #quick-machine-spec-title-wrapper {
        display: flex;
        justify-content: center;
    
    }
    
    .quick-machine-spec-columns ul{
        display: flex;
        flex-direction: column;
        align-items:center;
    }
    
    .quick-machine-spec-columns li{
        color: black;
        font-size: 18px;
    }
    
    .add-on-title {
        text-align: center;
        color:black;
    }
    
    .section-highlight-container-add-ons{
        background-color: #434343;
        padding: 40px 40px 40px 40px;
        max-width: 1160px;
        display: flex;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid black;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    
    .flex-container {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add spacing between images and text */
}
    .stacked-image{
    width: 90%; /* Make images take the full width of the container */
    margin-bottom: 10px; /* Add spacing between stacked images */
}
    .stacked-image-wrapper{
        width: 50%;
    }
    
    #machine-highlight-container-genX {
        padding: 15px 0px 25px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/Bevel-Highlight-Background-GenX.jpg);
        background-position: center;
        background-size: cover;
    }
    #genx-nexushd-add-on-list-background-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #genx-nexushd-add-on-list-background{

        border: 1px solid #0090cc;
        border-radius: 2px;
        background-color: #0f233d;
        padding: 2px 8px 2px 8px;
    }
    
    .genx-nexushd-add-on-list{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .genx-nexushd-add-on-list p{
        font-size: 18px;
        font-weight:700;
        text-align: center;
    }
    
    #genx-add-on-title-wrapper {
        display: flex;
        justify-content: center;
    }
    
    #genx-add-on-title-wrapper p{
        text-align: center;
        font-size: 22px;
        border: 1px solid #0090cc;
        background-color: black;
        padding: 0px 8px 0px 8px;
        margin-bottom: 10px;
        border-radius: 2px;
    }
    



/*Nexus HD Views*/
    @media screen and (max-width: 740px){
        .software-and-table-wrapper{
            flex-direction: column;
        }
        
        div.genx-nexus-machine-software-description.fourty-percent-width{
            margin-top: 0px;
        }
        
        div.content-container ul.genx-nexus-software-features{
            text-align: center;
            
        }
        
        .content-container .genx-nexushd-add-on-list p{
            
            text-align: center !important;
            font-size: 12px;
        }
        
        div.fifty-eight-percent-width.last-column.margin-top-5 {
            width: 100%;
        }
        
            .genx-nexus-software-features {
        list-style-type: none; /* Remove default list style */
        padding: 0; /* Remove default padding */
        margin: 0; /* Remove default margin */
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
}

    .genx-nexus-software-features li {
        position: relative; /* Enable positioning for pseudo-elements */
        margin-bottom: 10px; /* Space between list items */
        display: flex; /* Use flexbox for the individual list items */
        align-items: center; /* Center content vertically */
}

    .genx-nexus-software-features li::before {
        content: ''; /* Empty content for the square marker */
        left: 0; /* Position marker at the left */
}
    .genx-nexus-software-features li::after {
        content: ''; /* Empty content for the square marker */
        right: 0; /* Position marker at the left */
}

    }
    
/*End of Nexus HD Page*/
    
    
/*BEVEL X PAGE*/
        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);
    }
    
        .iframe-wrapper-2 {
        width: 61%; /* Adjusted width */
        margin: 0 auto; /* Center the container horizontally */
        position: relative; 
        padding-top: 33.75%; /* 16:9 aspect ratio */
        box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(255, 255, 255, 0.5),
                    inset -0.1em -0.1em 0.1em 0 rgba(0, 0, 0, 0.5);
        background-color: #0f233d; /* Ensure background color */
        box-sizing: border-box; /* Padding won't affect size */
    }
    
    .iframe-size-2 {
        position: absolute;
        top: 5%; /* Space from the top to ensure frame visibility */
        left: 0;
        width: 100%;
        height: 90%; /* Adjust height to allow space for top/bottom frame */
        border: none; /* No border for the video */
    }
    
    .iframe-wrapper-insight-controller-features {
        width: 61%; /* Adjusted width */
        margin: 0 auto; /* Center the container horizontally */
        position: relative; 
        padding-top: 33.75%; /* 16:9 aspect ratio */
        box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(255, 255, 255, 0.5),
                    inset -0.1em -0.1em 0.1em 0 rgba(0, 0, 0, 0.5);
        background-color: #0f233d; /* Ensure background color */
        box-sizing: border-box; /* Padding won't affect size */
    }
    
    .iframe-size-insight-controller-features {
        position: absolute;
        top: 5%; /* Space from the top to ensure frame visibility */
        left: 2.5%;
        right: 2.5%;
        width: 95%;
        height: 90%; /* Adjust height to allow space for top/bottom frame */
        border: none; /* No border for the video */
    }
    
    #Yaskawa-Drives {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }
    
    #Yaskawa-Drives-Picture {
        width: 70%;
        border: 2px solid black;
    }
    
    div#Yaskawa-Drives-List-Wrapper {
        margin-top: 4px;
        text-align: center;
    }
    
    div#Yaskawa-Drives-List-Wrapper li{
        font-size: 18px;
        
    }
    
    div#Yaskawa-Drives-List-Wrapper li::marker{
        font-size: 13px;
    }
    
    div#Plasma_Capacities_Container.full-width-container {
        background-color: transparent;
        margin: 0 auto;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #Plasma_Options_Header_Container h1 {
        position: relative; /* Needed for positioning the pseudo-element */
        text-align: center; /* Center the text within the container */
        margin: 0 auto; /* Center the h1 itself */
        max-width: 500px;
    }
    
    #hypertherm-beveled-container {
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/BevelCuttingBackground.jpg);
        background-position: bottom;
        background-size: cover;
        padding: 10px 0px;
        margin-bottom: 80px;
    }
    
    #Insight_Controller_Button_Container {
        margin-top: 10px;
    }
    
    .content-container.Plate_Or_Steel_Solutions_Software_Images {
        min-height: 400px;
    }
    

    

    
/*END OF BEVEL X PAGE*/
    
    
/*Bevel-X Views*/
@media screen and (max-width: 740px) {
    .iframe-wrapper-2 {
        width: 90%; /* Adjust the wrapper size for smaller screens */
        margin: 0 auto; /* Center the wrapper */
        position: relative; 
        padding-top: 56.25%; /* Maintain the 16:9 aspect ratio */
        box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(255, 255, 255, 0.5),
                    inset -0.1em -0.1em 0.1em 0 rgba(0, 0, 0, 0.5);
        background-color: #0f233d;
        box-sizing: border-box;
        overflow: hidden; /* Prevents any overflow */
    }

    .iframe-size-2 {
        position: absolute;
        top: 0; 
        left: 1.1%; /* Add space for the border */
        width: 98%; /* Slightly reduce width to show the border */
        height: 98%; /* Match height to keep proportion */
        border: none; /* Ensure no additional iframe borders */
    }
    
    .iframe-wrapper-insight-controller-features {
        width: 90%; /* Increase width for smaller viewports */
        padding-top: 50%; /* Adjust aspect ratio to maintain proper height */
    }
    
    .iframe-size-insight-controller-features {
        top: 2.5%; /* Adjust spacing */
        left: 0;
        right: 0;
        width: 100%; /* Make the iframe fill the wrapper */
        height: 95%; /* Adjust height to fill more space */
    }
    
    .fifty-percent-width {
        width: 100%; /* Adjust width to fill the available space */
        box-sizing: border-box; /* To ensure padding/margins are accounted for */
    }
    
    div#Yaskawa-Drives-List-Wrapper {
        margin-top: 4px;
    }
    
    div#Yaskawa-Drives-List-Wrapper li{
        font-size: 14px;
        
    }
    
    div#Yaskawa-Drives-List-Wrapper li::marker{
        font-size: 10px;
    }
    
    #Yaskawa-Drives-Picture {
        width: 100%;
        border: 2px solid black;
    }
    
    #hypertherm-beveled-container{
        margin-bottom: 30px;
    }
    
    .Software_Header_And_Buttons {
        display: inline-flex; 
        flex-direction: column; 
        align-items: center; 
        width: fit-content; 
        text-align: center;
    }
    
    p#insight-controller-features.center-align-paragraph {
        text-align: center;
    }
    
}

    @media screen and (max-width: 408px){
    div#Yaskawa-Drives-List-Wrapper li{
       text-align: center;
        
    }  

}
    
/*End of Bevel-X Views*/
    
/*EDUCATIONAL PAGE*/
    #flashcut-highlight-container {
        margin: 0px auto 80px auto;
        padding: 30px 0px;
        padding: 70px 0px 70px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/GenX_Educational_Background.jpg);
        background-position: center;
        background-size: cover;
    }
    
    .flashcut-description {  
    }
    
    .flashcut-description-background {
        background-color: #0f233d;
        border: 1px solid #0090cc;
        border-radius: 2px;
        width: 59%;
        padding: 15px;
    }
    
    .flashcut-image-wrapper {
        
    }

/*END OF EDUCATIONAL PAGE*/
    
/*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: #0090cc;
    }
    #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: #0090cc;
    }
    @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%;
        position: relative;
        text-align: center;
        overflow: hidden;
    }
    #main-banner-top {
        background-image: url(../images/Home/banner-top.jpg);
        height: 180px;
        background-size: cover;
        background-position: center;
    }
    #main-banner-background {
        margin: 0px 0px 0px 0px;
        background-image: url(../images/Backgrounds/GenX_Machine_With_Software_On_Screen.jpg);
        background-size: cover;
        background-position: center;
/*        background-attachment: fixed;*/
        text-align: center;
    }
    #main-banner-background img {
        width: 100%;
        max-width: 1000px;
        margin: 70px auto;
    }
    #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 {
        background: #2f2f2f;
        overflow: hidden;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #banner-stripe #envelope {
        margin-right: 8px;
        font-size: 18px;
    }
    #banner-stripe a {
        color: black;
        color: white;
        background-color: #ebebeb;
        background-color: #792727;
        letter-spacing: .3em;
        word-spacing: .15em;
        font-size: 15.5px;
        padding: 16px 0px;
        /*        background-color: #2c2c2c;*/
        display: block;
        /*    font-family: proxima-nova,Helvetica,Arial,sans-serif;   */
        cursor: pointer;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
        border-top: 0px solid #414141;
        border-bottom: 0px solid #414141;
    }
    #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: 0px 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: #0f233d;
        padding: 30px 0px 60px 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;
    }
    div.crash-protection-highlight-container
    {
        clear: both;
        max-width: 1240px;
        overflow: hidden;
        margin:0px 0px 0px 0px;
    }
    .content-container ul {
        overflow: hidden;
        margin: auto;
        width: 100%;
    }
    .content-container ul.single-dot-ink-marker-info{
        width: auto;
        margin-bottom: 8px;
    }
    .full-width-container {
        background-color: #707070;
        text-align: left;
        padding: 40px 0px 60px 0px;
    }
    div.section-highlight-container {
        background-color: #f4f4f4;
        text-align: left;
        padding: 40px 40px 40px 40px;
        max-width: 1160px;
    }
    #new-drilling-highlight-container,
    #dotpeen-highlight-container,
    #dotpeen-background-container,
    #yaskawa-highlight-container,
    #controller-software-container,
    #drill-highlight-container,
    #bevel-highlight-container {
        margin: 0px auto 80px auto;
        padding: 30px 0px;
    }
    #controller-software-container {
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/BevelCuttingBackground4.jpg);
        background-position: center;
        background-size: cover;
        padding-bottom: 0px;
    }
    
    /*ADDED FOR MARKING SOLUTIONS PAGE 3/9/23 dotpeen and inkmarker*/
    
    #dot-peen-background-container {
        position:relative;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/dot_peen_banner_background_3_low_opacity_smaller.png);
        /*background-image: url(../images/Backgrounds/dot_peen_banner_background_2_low_opacity.png);*/
        background-position: right;
        background-size: cover;
        padding-bottom: 0px;
    }
    
    #ink-marker-background-container {
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/ink_marker_banner_low_opacity4_smaller.png);
        /*background-image: url(../images/Home/ink-marker.jpg);*/
        background-position:center;
        background-size:cover;
        padding-bottom: 0px;
    }
    
    #dot-peen-results-background-container{
        
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/Up_Close_Background_Resize_Try_Edited_Smaller.jpg);
        /*background-image: url(../images/Backgrounds/dot_peen_banner_background_2_low_opacity.png);*/
        /*background-position:bottom right;*/
        /*background-size:100% 100%;*/
        background-size:cover;
        background-repeat: no-repeat;
/*        padding: 130px;*/
        
    }
    
    #ink-marker-single-dot-rusty-results-background-container {
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Products/Ink_Markers/Single_Dot/Rusty_Plate_Results2.jpg);
        /*background-image: url(../images/Home/ink-marker.jpg);*/
        
        background-size:cover;
        padding-bottom: 0px;
        margin-bottom:50px;
    }
    
    /*END OF ADDED 3/9/23*/
    
    /*CONTACT PAGE STUFF*/
    #Text_Message_Checkbox_Container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    }
    
    /*END OF CONTACT PAGE STUFF*/
    
   #new-drilling-highlight-container {
    padding: 80px 0px 40px 0px;
    box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
    }

    #yaskawa-highlight-container {
        padding: 60px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/Yaskawa-Background.jpg);
        background-position: center;
        background-size: cover;
    }
    #drill-highlight-container {
        padding: 150px 0px 200px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/Drilling-Highlight-Background.jpg);
        background-position: center;
        background-size: cover;
    }
    #dotpeen-highlight-container {
        padding: 150px 0px 200px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Products/Dot_Peen/Up_Close_Background_Resize_Try.png);
        background-position: right;
        background-size: cover;
        text-align: left;
    }
    #bevel-highlight-container {
        padding: 150px 0px 200px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/Part-Result-Background.jpg);
        background-position: center;
        background-size: cover;
    }
    
    #ink-marker-highlight-container {
        padding: 150px 0px 200px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: url(../images/Backgrounds/ink_marker_frame_export3.png);
        background-position: bottom;
        background-size: cover;
    }
    
    
    #drill-highlight-container p,
    #drill-highlight-container h1,
    #bevel-highlight-container p,
    #bevel-highlight-container h1,
    #hypertherm-beveled-container p {
        color: white;
        text-shadow: 0.5px 0.5px 3px black;
    }
    #xpr-logo {
        max-width: 320px;
        margin-left: -10px;
        margin-bottom: 16px;
    }
    #yaskawa-logo {
        width: 100%;
        max-width: 380px;
        margin-bottom: 30px;
    }
    #ethercat-logo {
        max-width: 320px;
        margin-top: 40px;
        margin-bottom: 30px;
        margin-left: -6px;
    }
    .product-highlight-link {
        cursor: pointer;
    }
    .product-highlight-container {
        background-color: #0090cc;
        text-align: left;
        padding: 30px 30px 30px 20px;
        max-width: 1190px;
        margin: 0px auto 60px auto;
        overflow: hidden;
        border: 3px solid black;
        position: relative;
    }
    .product-highlight-link:hover .product-highlight-container {
        background-color: #0998d3;
        border: 3px solid #1747b6;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }
    .product-highlight-container img {
        max-width: 40%;
        float: left;
        margin-right: 0px;
    }
    .product-highlight-container div {
        width: 58%;
        padding-left: 15px;
    }
    .product-highlight-container ul {
        margin-top: 16px;
    }
    .product-highlight-container h1 {  /*this manipulates header of plasma/oxyfuel/drill controller */
        /*display:inline-block;*/ /*this was the cause of the repeated text on the hide on mobile*/
        border-bottom: 2px solid black;
        padding-bottom: 6px;
        text-align: left;
        font-weight: 500;
        font-size: 24px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .product-highlight-container p {
        margin-bottom: 10px;
    }
    .link-corner-arrow {
        position: absolute;
        bottom: 0;
        right: 0;
        max-height: 60px;
        opacity: 0;
    }
    .product-highlight-link:hover .link-corner-arrow {
        opacity: 1;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    .fixed-stripe-container {
        min-height: 400px;
        margin: 0px 0px 70px 0px;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        text-align: center;
    }
    .fixed-stripe-container h1 {
        margin: 140px auto;
        color: black;
        font-weight: bold;
        font-size: 40px;
        text-align: center;
        max-width: 640px;
        color: white;
        text-shadow: 3px 3px 3px black;
    }
    .no-padding-container {
        padding: 0px;
    }
    .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) {
        div.content-container {
            text-align: center;
        }
        div.content-container ul {
            text-align: left;
        }
        .product-highlight-container .product-highlight-image {
            /*max-width: 500px;*/
            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%;
            padding-left: 0px;
        }
        .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: #0f233d;
            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;
        }
        #dotpeen-highlight-container{

        },
            #hypertherm-beveled-container,
    #yaskawa-highlight-container,
    #controller-software-container,
    #drill-highlight-container,
    #bevel-highlight-container  {
        margin: 0px auto 30px auto;
        padding: 20px 0px;
    }
        #dotpeen-highlight-container,
        #drill-highlight-container,
    #bevel-highlight-container,
        #hypertherm-beveled-container {
            padding: 20px 10px;
        }
        
    #dotpeen-highlight-container{
        background-image: url(../images/Products/Dot_Peen/Up_Close_Dark.png);
        } 
        
        
/*ADDED 3/9/23 FOR DOT PEEN AND INK MARKER CHOICE PAGE*/        
        
 
        
    #drill-highlight-container {
        background-image: url(../images/Backgrounds/Drilling-Highlight-Background-Mobile.jpg);
                
    }
    #bevel-highlight-container {
        background-image: url(../images/Backgrounds/Part-Result-Background-Mobile.jpg);
        background-position: 20% 20%;
        max-height: 500px;        
    }
    #hypertherm-beveled-container {
        background-image: url(../images/Backgrounds/BevelCuttingBackground-Mobile.jpg);
    }
         #yaskawa-logo {
            max-width: 280px;
            text-align: center;
            margin: 20px 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: #1747b6;
            color: white;
            border: 0px;
            border-radius: 3px;
        }
        div.container-margin {
            margin: 0px auto 20px 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: #0f233d;
/*            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{
        /*    padding: 10px 4px;*/
        }
        .section-highlight-container,
        .full-width-container {
          /*  margin: 10px auto 4px auto;
            padding: 0px 10px 10px 10px;*/
        }
    }
}


/* TITLES  */

@media {
    .subpage-title {  /*this manipulates the titles Jarrid was saying were different fonts*/
        margin-bottom: 40px;
        border-bottom: 2px solid #0090cc;
        max-width: 1236px;
        font-size: 26px;
        font-weight: 200;
    }
    .subpage-title span {
        font-weight: 600;
    }
    @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 #0090cc 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 */

@media {
    #three-tile-row-no-spacing {
        margin-bottom: 0px;
        overflow: hidden;
    }
    #three-tile-row-no-spacing > div {
        float: left;
        width: 33.33%;
        margin-right: 0%;
        min-width: 100px;
        text-align: center;
        position: relative;
    }
    #three-tile-row-no-spacing img {
        width: 100%;
    }
    #three-tile-row-no-spacing .last-column {
        margin-right: 0px;
    }
    #three-tile-row-no-spacing .column-title {
        background-color: #f5f5f5;
        border-bottom: 1.5px #0090cc solid;
    }
    #three-tile-row-no-spacing .column-title h2 {
        text-align: center;
    }
    #three-tile-row-no-spacing .alternate-column-title {
        background-color: #f0f0f0;
        border: 0px;
    }
    #three-tile-row-no-spacing .alternate-column-title h2 {
        color: black;
    }
    #three-tile-row-no-spacing h2 {
        color: black;
        margin: 8px;
        font-weight: 400;
        text-align: center;
        font-size: 18px;
        letter-spacing: 0.8px;
    }
    .mobile-column-title {
        display: none;
    }
    @media screen and (max-width: 1000px) {
        #three-tile-row-no-spacing > div {
            width: 32.5%;
            margin-right: 1.25%;
        }
    }
    @media screen and (max-width: 800px) {
        #three-tile-row-no-spacing {
            margin-bottom: 20px;
        }
        #three-tile-row-no-spacing h2.mobile-column-title {
            display: block;
        }
    }
    @media screen and (max-width: 600px) {
        #three-tile-row-no-spacing {
            padding: 6px;
            padding-bottom: 0px;
            margin-bottom: 10px;
            /*        background-color: #ededed;*/
        }
        #three-tile-row-no-spacing div {
            width: 100%;
            max-width: 440px;
            margin-right: 0%;
            float: none;
            margin: 0px auto;
            clear: both;
        }
        #three-tile-row-no-spacing > div {
            margin-bottom: 20px;
        }
        #three-tile-row-no-spacing h2 {
            display: block;
            font-size: 16px;
        }
        #three-tile-row-no-spacing h2.mobile-column-title {
            display: none;
        }
        #three-tile-row-no-spacing .last-column {
            margin: 0px auto;
        }
    }
}


/* FOOTER */

@media {
    #footer-container {
        width: 100%;
        background: #0f233d;
    }
    #footer-container div {
        text-align: center;
        background-color: #0090cc;
        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: 30px 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: 10px 14px;
        color: white;
        font-size: 12px;
    }
    #first-contact {
        margin-left: 80px;
        margin-right: 40px;
    }
    #copyright {
        font-size: 11.5px;
        font-weight: 100;
        text-align: center;
        color: #d0d0d0;
        margin-top: 50px;
        letter-spacing: 0.05em;
    }
    #copyright:before {
        content: "(c) 2024 "
    }
    @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: 20px;
        }
    }
}


/* SOCIAL MEDIA LINKS */

@media {
    ul.social {
        float: none;
        display: none;
    }
    ul.social li {
        display: inline-block;
        list-style: none;
        margin: 12px 34px;
    }
    .social a {
        color: #e8e8e8;
        font-size: 28px;
        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: #0090cc;
        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: #0090cc;
        box-shadow: 1px 1px 3px 0px black;
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 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: #006088;
        border: 1px solid whitesmoke;
    }
    @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 */

@media {
    #Quote-Request-Header {
        margin-top: 0px;
        margin-bottom: 10px;
        padding: 10px 0px;
        background-color: #0998d3;
        border-radius: 4px;
    }
    #Quote-Request-Header h2 {
        margin: 0px;
        font-weight: 400;
        font-size: 22px;
        color: white;
        text-align: center;
    }
    .quote-request-container {
        padding: 20px;
        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: #0090cc;
        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;
        }
    }
}

.vader-pic {
    display: none;
}

.vader-container:hover .drill-pic {
    display: none;
}

.vader-container:hover .vader-pic {
    display: block;
}

#made-in-usa {
    display: flex; 
    max-width: 160px;
    float: right;
    background: transparent;
    margin: 22px 20px 15px 30px;
}

#made-in-usa div {

}

#made-in-usa p {
    margin: 2px 0px 4px 0px;
    padding-left: 0px;
    font-size: 15.5px;
    text-align: center;
    color: #333333;
    font-weight: 500;
    letter-spacing: 1.1px;
}

#made-in-usa:hover div {
    background-color: #343434;
}

#made-in-usa:hover {
    background: #ffce00;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.65);
}

@media screen and (max-width: 900px) {
    #made-in-usa {
        display: none;
    }
}

/*Ink Marker Page*/
@media screen and (max-width:280px){
    .red-border-bottom{
            font-size: 14px;
    }
}



@media screen and (max-width: 740px) {
    .content-container.custom-rusty-single-dot-ink-marker-container {
            text-align: left;
}
    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;
    }
    
#ink-marker-single-dot-rusty-results-background-container {
        background-position: -300px 0px;
    }
}

@media screen and (min-width: 180px) and (max-width: 540px){
    #ink-marker-single-dot-rusty-results-background-container {
        background-position: -400px 0px;
    }
}

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


/*Dot Peen Page*/
/*
@media screen and (min-width: 820px) and (max-width: 1800px){
    .content-container.circular-degrees-container{
        display: flex;
        align-items: center;
    }
}
*/

.content-container.circular-degrees-container{
        display: flex;
        align-items: center;
    }

@media screen and (max-width: 740px){
#dotpeen-container-2 {
        width: 100%;
        margin-top: 50px;
    }
    
/*
    .content-container.circular-degrees-container{
        display: flex;
        flex-direction: column;
    }
*/
}

@media screen and (max-width: 820px){
    .content-container.circular-degrees-container{
        display: flex;
        flex-direction: column;
    }
    
    .content-container.circular-degrees-container .half-width.last-column{
        width: 100%;
    }
    
    p, .center-align-paragraph{
        text-align: justify;
    }
    
    #flashcut-highlight-container {
        margin: 0px auto 80px auto;
        padding: 30px 0px;
        box-shadow: inset 0px -2px 15px rgba(0, 0, 0, 0.3);
        background-image: none;
        background-color: black;
        background-position: center;
        background-size: cover;
    }
    
    .flashcut-description-background {
        background-color: #0f233d;
        border: 1px solid #0090cc;
        border-radius: 2px;
        width:auto;
        padding: 15px;
    }
    

}

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