a
{
    /* don't allow links to go off the page, this causes issues on mobile devices if this isn't done */
    max-width: 100%;
    word-wrap: break-word;
}

section > .container
{
/*    This removes any spacing from the top of the container inside a section*/
    margin-top: 0;
}

main .product-main
{
    /*this places the footer of the page always on the bottom, must be done through the product-main to fill in the space above to push the footer down*/
    min-height: -webkit-calc(100% - 253px);
    min-height: -moz-calc(100% - 253px);
    min-height: calc(100vh - 253px);
}

 main.page-main
 {
    /*this places the footer of the page always on the bottom, must be done through the product-main to fill in the space above to push the footer down*/
    min-height: -webkit-calc(100% - 235px);
    min-height: -moz-calc(100% - 235px);
    min-height: calc(100vh - 235px);
 }

.product-gallery--block p
{
/*    This gives padding between the pictures in the gallery to space them out a bit better*/
    padding: 0em 2em;
}

.product-specs .product-specs--spec-table
{
/*    This forces the tables to fit the content of the page, not go too wide*/
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 4em;
}

.product-specs--spec-table a:hover
{
    color:#111;
}

.product-specs--spec-table .icon-icon-circle-arrow:hover
{
    text-decoration: underline;
}

.product-specs--spec-table .tablerow
{
    display: table-row;
}

.product-specs--spec-table .tablerow:nth-child(even)
{
    background: #ececec;
}

.product-specs--spec-table .tableheader
{
    display: table-header-group;
}

.product-specs--spec-table .tablehead
{
    display: table-cell;
    font-weight: bold;
    padding: 8px;
    border-bottom: 2px solid #b4bcc2;
}

.product-specs--spec-table .tablecell
{
    display: table-cell;
    padding: 8px;
    border-bottom: 1px solid #b4bcc2;
}

p.breadcrumb
{
/*    This is for the breadcrumbs only, to change spacing and colors*/
    font-size: 1em;
    color: #111;
    margin: .3em 0 0 0;
}

p.breadcrumb a
{
    color: #111;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
    /* This controls the color of all of the headers used throughout the system */
    color: #101820;
}

h1.faults a:hover
{
    /* This controls the color of the faults when you hover over them */
    color: #e01e33;
    text-decoration: underline;
}

ol.procedure
{
    list-style-type: none;
    counter-reset: elementcounter;
    padding-left: 0;
}

ol.procedure li:before
{
    /* This places the word Step in front of the procedure lists so that they don't have to be added */
    content: "Step " counter(elementcounter) ":";
    counter-increment: elementcounter;
    font-weight: bold;
}

ol.procedure li
{
    padding: .5em;
}

ol.procedure li span
{
    padding-left: 1em;
}

table.product-specs--spec-table th
{
    vertical-align: top;
}

table.product-specs--spec-table td
{
    vertical-align: top;
}

figcaption
{
    /* This is to deal with captions under videos and images */
    font-weight: bold;
    text-align: center;
    padding: 1em;
}

.product-gallery .product-gallery--block .icon-play
{
    color: #e01e33;
    opacity: 1;
}

.product-gallery .product-gallery--block .icon-play:hover
{
    color: #ffffff;
}

.product-gallery .product-gallery--block .icon-play.red:hover
{
    /* when you mouse over the triangle image for videos , change color*/
    opacity: .85;
    color: #e01e33;
}

.product-gallery .product-gallery--image
{
    opacity: 1;
}

.product-gallery .product-gallery--image:hover
{
    opacity: 1;
}

.grid
{
    display: grid;
}

.imagemap
{
  position: relative;
}
.imagemap a
{
  display: block;
  position: absolute;
}

.safetysection
{
    width: 75%;
    display: inline-grid;
    border: 2px solid black;
    padding-bottom: 1em;
    margin: 1em auto;
}

.safetysection h4
{
    color: white;
    background-color: black;
    width: 100%;
    padding: .2em .1em;
    font-weight: bold;
    margin: 0;
}

.safetytable, .safetytable2
{
    display: table;
    margin: 1em;
}

.safetyrow, safetyrow2
{
    display: table-row;
}

.safetyrow .safetyimage, .safetyrow2 .safetyimage
{
    display: table-cell;
    width: 10em;
    padding-bottom: 1em;
}

.safetyrow .safetyimage img
{
    max-width: 10em;
}

.safetyrow .safetytext, .safetyrow2 .safetytext
{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3em;
    padding: 1em;
}

.modal
{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 310000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
}

/* Modal Content */
.modal-window
{
  background-color: #fefefe;
  margin: auto;
  width: 80%;
  max-width: 1100px;
  box-shadow: 0 0 0 10px rgba(0,0,0,.35);
  background: #121212;
}

.modal-window video
{
    height: auto;
    margin-bottom: 1rem;
    max-width: 100%;
    overflow: hidden;
    padding: .5em 1em;
    position: relative;
    outline: none;
}

/* The Close Button */
.remodal-close
{
  float: right;
  position: initial;
}

.close:hover,
.close:focus
{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.page-main
{
    /* padding-bottom: 18em; */
}

.navbar, .page-footer-colophon
{
    background: #101820;
}

.navbar-header
{
    width: 33%;
}

.tipue_search_content_url a
{
    /* This is hiding the green links that were being displayed in the search tool */
    display: none;
}

/********ANNOUNCEMENTS***********/
summary {
  font-size: 1.5em;
}

details {
  padding: 2em;
}

@media (max-width: 1030px)
{
    .navbar-header
    {
        width: 100%;
    }
}

.navbar-navs .nav-secondary .navbar-right .nav-tools, .navbar-navs .nav-secondary .navbar-right .nav-pages
{
    display: inline-flex;
    float: none !important;
    vertical-align: top;
    width: fit-content;
}

.modaltitle
{
    font-weight: bold;
    color: white;
    display: inline-block;
    font-size: 1.2em;
    font-family: 'DINNextLTPro-Bold',Helvetica,Arial,sans-serif;
    padding: 0.5em 0 0 0.8em;
}

img.logoimage
{
    width: 100%;
    margin-top: .5em;
}

@media(max-width: 1200px)
{
    img.logoimage
    {
        width: 100%;
        margin-top: .3em;
    }
}

@media(max-width: 993px)
{
    .homepage-hero
    {
        margin-top: -6em;
    }
}

@media(max-width: 450px)
{
        /* This deals with issues with the logo on very small phone styles like older iPhones and Androids */
    img.logoimage
    {
        max-width: 210px;
        margin-top: .5em;
    }

    main.page-main.homepage
    {
        /* This is setting the background of the homepage text area to black so it mixes with the black of the image that is being re-sized */
        background: #000000;
    }

    .homepage-hero
    {
        /* Deals with issues on phones where the search bar is floating over the image on the home page */
        margin-top: -4em;
    }

    .homepage-hero .vertically-centered-content
    {
        /* This is only for the home page to handle more issues with the boxes and different display sizes */
        padding-top: 8em !important;
    }


}

@media(max-width: 320px)
{
    img.logoimage
    {
        max-width: 170px;
        margin-top: .7em;
    }

    .homepage-hero .vertically-centered-content
    {
        /* This is only for the home page to handle more issues with the boxes and different display sizes */
        padding-top: 5em !important;
    }
}

.btn-primary
{
    background-color: #000000;
    border-color: #555555;
}

.form-group .btn-primary:hover
{
    color: #fff;
    background-color: #555555;
    border-color: #b4bcc2;
}

.searchbar
{
    background-color: #111;
}

.searchbar .form-group .form-control:selection
{
    background: #111;
    border-color: #111;
}
.searchbar .btn:hover
{
    background: #282828;
}

@media(max-width:  1000px)
{
    .safetysection
    {
        width: 90%;
    }

    .safetytable2, .safetyrow2, .safetyrow2 .safetytext
    {
        display: block;
    }

    .safetyrow2 .safetyimage
    {
        margin: 0 auto;
        display: unset;
    }

    .safetyrow2 .safetyimage .centerimage
    {
        width: 10em;
        max-width: 10em;
    }

    .navbar-default .navbar-nav>li>a, .navbar-default .nav-primary>li>a, .navbar-default .nav-pages>li>a
    {
        color: #111;
    }
}

@media(max-width: 700px)
{
    .safetyrow .safetyimage, .safetyrow .safetytext
    {
        margin: 0 auto;
        display: unset;
    }
}

@media (max-height: 580px) and (min-width: 1030px)
{
    .dropdown-menu
    {
        height: auto;
    }
}

@media (min-width: 1030px)
{
    .searchbar .form-group .btn
    {
        width: 25%;
    }
}

.navbar-default .nav-primary .navbar-nav.nav, .navbar-default .nav-primary .nav.nav-primary, .navbar-default .nav-primary .nav-pages
{
    width: auto;
}

.nav-primary .dropdown
{
    position: static;
    width: 100%;
    clear: both;
    overflow: hidden;
}

.nav-primary .dropdown-menu .nav>li, .nav-primary .dropdown-menu .nav-pages>li
{
    padding: 5px 0 0;
    text-align: left; /* added 12/11/2020 to handle service columns */
}

.nav-primary .dropdown-menu .nav>li>a, .nav-primary .dropdown-menu .nav-pages>li>a, .nav-primary ul>li ul>li>a, .nav-secondary ul>li ul>li>a
{
    color: #707070;
}

.nav-primary ul>li ul>li>a:hover, .nav-secondary ul>li ul>li>a:hover
{
    color: #101820;
}

.nav-primary .dropdown .dropdown-menu
{
    width: auto; /* change from 100% on 12/11/2020 to get full page width */
    background-color: #ececec; /* added 12/11/2020 to make the about dropdown color */
}

.nav-primary .dropdown .dropdown-menu.columns
{
    width: 100%; /* added to deal with 100% width for service */
    text-align: center;
    background-color: #ececec; /* Added 12/11/2020 to make the background color like the right side */
}

.nav-primary .dropdown .dropdown-menu .servicecolumns
{
    padding-bottom: 1em; /* added 12/11/2020 for service columns section */
}

.nav-primary .dropdown .dropdown-menu .servicecolumns .nav
{
    width: 23%;
    display: inline-grid;
}

.downloadbutton
{
    padding: .6em 2em .55em;
    letter-spacing: 0.05em;
}

@media(max-width: 450px)
{
    .downloadbutton
    {
        /* This is because the text needs to be shrunk for low res phones */
        font-size: .75em;
        padding: .5em;
    }
}

.nav-primary ul>li ul>li, .nav-secondary ul>li ul>li
{
    list-style: none;
    padding-left: .25em;
    font-family: "DINNextLTPro-Bold",Helvetica,Arial,sans-serif;
}

@media (min-width: 1400px)
{
    .nav-primary .dropdown a
    {
        font-size: 14px!important;
    }
}

@media (min-width: 1030px)
{
    .navbar-default .nav-primary .navbar-nav.nav, .navbar-default .nav-primary .nav.nav-primary, .navbar-default .nav-primary .nav-pages
    {
        padding-right: 25px;
    }

    .nav-primary .dropdown
    {
        float: left;
        width: auto;
        overflow: visible;
        clear: none;
        position: relative; /* was inherit before width change 12/11/2020 */
    }

    .nav-primary .dropdown.columns
    {
        position: inherit; /* added for service column sections */
    }

    .nav-primary .dropdown-menu .nav>li>a, .nav-primary .dropdown-menu .nav-pages>li>a
    {
        padding: 8px 35px;
        min-width: 240px;
        font-family: "DINNextLTPro-Bold",Helvetica,Arial,sans-serif;
    }

    .nav-primary .dropdown-menu .servicecolumns .nav>li>a, .nav-primary .dropdown-menu .servicecolumns .nav-pages>li>a
    {
        /* added 12/11/2020 for service columns */
        padding: 0;
    }

    .nav-primary .dropdown-menu .servicecolumns .nav>li:after, .nav-primary .dropdown-menu .servicecolumns .nav-pages>li:after
    {
        /* added 12/11/2020 for service columns */
        margin: 0 0 1em 0;
        border-bottom: 1px solid #b4bcc2;
    }

    .nav-primary .dropdown-menu .nav>li:after, .nav-primary .dropdown-menu .nav-pages>li:after
    {
        content: " ";
        display: block;
        width: 80%;
        margin: 0 10%;
        padding: 5px 0 0;
        border-bottom: 1px solid #b4bcc2;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(180, 188, 194);
    }

    .nav-primary .servicecolumns ul li ul
    {
       padding-left: 1.8em;
    }

    .nav-primary ul>li
    {
        float: none;
    }
}

@media (max-width: 1029px)
{
    .nav-primary .dropdown .dropdown-menu .servicecolumns .nav
    {
        width: 100%;
        display: block;
    }

    .navbar-navs .nav-secondary .navbar-right .nav-tools, .navbar-navs .nav-secondary .navbar-right .nav-pages
    {
        display: block;
        float: none !important;
        vertical-align: top;
        width: 100%;
        text-align: left;
    }
}

@media (min-width: 992px) and (max-width: 1029px)
{
    .nav-primary
    {
        width: 100%;
    }

    .navbar-default .nav-primary .navbar-nav>li>a, .navbar-default .nav-primary .nav-primary>li>a, .navbar-default .nav-primary .nav-pages>li>a
    {
        color: #111;
        font-family: "UnitedSansReg-Heavy",Helvetica,Arial,sans-serif;
        text-transform: uppercase;
        font-size: 1.1em;
        padding: 5px 15px;
        margin: 5px 0;
        position: relative;
    }

    .navbar-default .nav-secondary .navbar-nav>li>a, .navbar-default .nav-secondary .nav-primary>li>a, .navbar-default .nav-secondary .nav-pages>li>a
    {
        padding-top: inherit;
        padding-bottom: inherit;
        min-height: max-content;
    }

    .navbar-navs .form-control
    {
        width: 95%;
    }

    .homepage-hero .form-control
    {
        float: left;
        width: 55%;
    }

    .homepage-hero .btn
    {
        float: right;
        width: 45%;
        padding: 9px 12px;
    }
}
@media (min-width: 1401px)
{
a.support
{
    padding-top: .9em !important;
}
}

@media (max-width: 1400px)
{
a.support
{
    padding-top: .75em !important;
}

}

#annoucement
{
width: .7em;
padding-left: .8em;
width: .7em;
}

.fa-stack
{
width: .7em;
}

#announcementnew
{
display: inline-block;
font-weight: 300;
font-style: italic;
color: #e01e33;
}

.announcementone
{
color: white;
font-size: .7em;
font-weight: bold;
margin-left: .2em;
}

@media (max-width: 800px)
{
.announcementone
{
    margin-left: .1em;
}
}
@media (max-width: 1299px)
{
    .navbar-default .nav-secondary .navbar-nav.nav, .navbar-default .nav-secondary .nav.nav-primary, .navbar-default .nav-secondary .nav-pages
    {
        padding-right: 0;
    }
    
    .navbar-right
    {
        padding-right: 2em;
    }
}

#topsearchbutton
{
    display: block;
}

@media (max-width: 992px)
{
    #topsearchbutton
    {
        display: none;
    }
    
    .searchbar .form-group
    {
        width: 100%;
    }
    
    #searchbar
    {
        position: relative;
    }   
}