/* from old 2017 css file - can we cull this for reps? */

#site,
#site * {
    box-sizing: border-box
}

#site {
    background: #fff;
    margin: 0 auto;
    width: 100%;
    position: relative
}

body {
    background: #fff
}

body.coverlayed {
    overflow: hidden
}

div#ccm-highlighter {
    z-index: 333
}

a.boxlink,
a .boxlink,
.print-me {
    background-color: #0072bc;
    display: inline-block;
    padding: .25em 1em;
    color: #fff;
    text-decoration: none;
    font-family: "Arial", sans-serif;
    font-size: 1.125em;
    font-weight: normal;
    margin: 0 0 .3em;
    transition: all .3s;
    text-transform: uppercase
}

a.boxlink.alternate,
a .boxlink.alternate,
.print-me.alternate {
    background: #fbbe40
}

a.boxlink:hover,
a:hover .boxlink,
.print-me:hover {
    background-color: #0091ef;
    color: #fff
}

hr {
    margin: 2em 0;
    border-color: #0072bc
}

hr.light {
    border-color: #ddd
}

.page-content h1 {
    color: #0072bc
}

/* .pdf::after,
a[href$=".pdf"]::after,
a[title$=".pdf"]::after {
    content: "";
    background: url(../img/icon-pdf.svg) no-repeat center center/contain;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-left: .25em
} */

@media only screen and (min-width: 60em) {
    .offset-left {
        position: relative;
        left: -1em
    }

    .offset-right {
        position: relative;
        right: -1em
    }
}

#guts {
    margin: auto
}

#guts>.content {
    max-width: 60em
}

body.reparea #guts {
    min-width: 1080px
}

img {
    max-width: 100%;
    height: auto;
    transition: all .2s linear
}

.content {
    width: 100%;
    max-width: 1920px;
    padding: 0 1em;
    margin: auto;
    position: relative
}

.content.site-main {
    padding: 3em 1em
}

.content.interior-one-col {
    max-width: 76em
}

img.img-right,
.img-right img,
img.img-left,
.img-left img {
    display: block;
    margin: 0 0 1em;
    border-radius: 0 1em 0 0;
    border-bottom: .5rem solid #0072bc
}

img.img-right.basic-img,
.img-right img.basic-img,
img.img-left.basic-img,
.img-left img.basic-img {
    border: none;
    border-radius: 0
}

.img-holder-square {
    padding: 1em 0;
    position: relative;
    width: 100%;
    height: 0;
    padding: 100% 0 0;
    margin: 1em 0;
    background: #fff;
    border: 1em solid #fff !important
}

.img-holder-square img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (min-width: 60em) {

    img.img-right,
    .img-right img,
    .vidflushright {
        float: right;
        margin: 0 0 1em 2em
    }

    img.img-left,
    .img-left img {
        float: left;
        margin: 0 1em 1em 0
    }
}

body,
html {
    min-height: 100%
}

#site {
    position: relative;
    background: #fff;
    min-height: 100%
}

body.reparea #site {
    min-width: 1080px
}

.header-holder {
    position: relative
}

html.js #site-navigation {
    display: none
}

@media only screen and (min-width: 75em) {

    html,
    body {
        background: #fff
    }
}

.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.leftcol,
.rightcol {
    margin: 0 0 1em;
    padding: .5em;
    position: relative
}

.onecol.centered {
    padding: 0 2%
}

@media only screen and (min-width: 40em) {
    .fourcol {
        width: 50%;
        float: left;
        padding: 0 2em
    }

    .fourcol:nth-child(3) {
        clear: both
    }
}

@media only screen and (min-width: 60em) {
    .twocol {
        width: 50%;
        float: left;
        padding: 0 2em
    }

    .threecol {
        width: 33.3%;
        float: left;
        padding: 0 2em
    }

    .fourcol {
        width: 25%
    }

    .fourcol:nth-child(3) {
        clear: none
    }

    .fivecol {
        width: 20%;
        float: left;
        padding: 0 2em
    }

    .leftcol {
        width: 67%;
        float: left;
        padding: 0 1em
    }

    .rightcol {
        width: 33%;
        float: right;
        padding: 0 1em
    }

    .onecol {
        clear: both;
        padding: 0 2em
    }

    .row {
        clear: both;
        margin: 0 -2em
    }
}

@media only screen and (min-width: 72em) {
    .fourcol {
        width: 25%
    }

    .fourcol:nth-child(3) {
        clear: none
    }
}

@media only screen and (min-width: 1920px) {
    .row {
        margin: 0 -2em
    }
}

[class*=span] {
    margin-left: 2em
}

.page-logo {
    display: block;
    width: 100%;
    max-width: 18em;
    margin: 1em
}

@media only screen and (min-width: 60em) {
    .page-logo:not(.product-page-logo) {
        float: left
    }
}

body.representatives.representative .page-logo {
    float: none;
    margin-bottom: 0
}

.full-content {
    max-width: 62em;
    margin: 1em auto;
    padding: 1em
}

@media only screen and (min-width: 60em) {
    .full-content {
        float: left;
        width: calc(100% - 20em);
        padding: 1em 2em
    }
}

body.representatives.representative .full-content {
    max-width: 100%;
    width: 100%;
    padding: 0 1em;
    margin: 0 0 1em
}

body.representatives.representative .full-content>h1 {
    text-align: center;
    margin-top: 0
}

.prod-img-col {
    margin: 1em;
    width: 100%;
    max-width: 28em;
    text-align: center
}

.prod-img-col .logo {
    max-width: 18em;
    display: block;
    width: 100%;
    max-width: 18em
}

.prod-img-col .prod-img {
    margin-bottom: 1em
}

@media only screen and (min-width: 60em) {
    .prod-img-col {
        float: left
    }

    .prod-img-col.prod-scroll {
        background: lime;
        position: relative
    }
}

.prod-info-col {
    max-width: 62em;
    margin: 1em auto;
    padding: 1em
}

@media only screen and (min-width: 60em) {
    .prod-info-col {
        float: left;
        width: calc(100% - 30em);
        padding: 1em 2em
    }
}

@media only screen and (min-width: 60em) {
    .specs-twocol {
        column-count: 2
    }
}

.specs-twocol p {
    display: block;
    -webkit-column-break-inside: avoid;
    break-inside: avoid
}

.icon-pdf {
    background: url(../img/icon-pdf.svg) no-repeat center center/contain;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    text-align: left;
    text-indent: -9999px;
    overflow: hidden
}

.products-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.products-list .product-lines {
    border: 1px solid #0072bc;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 50%;
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
    margin: -0.5px;
    text-align: center
}

@media only screen and (min-width: 40em) {
    .products-list .product-lines {
        max-width: 33.3%;
        -ms-flex: 0 0 33.33%;
        flex-basis: 33.333%
    }
}

@media only screen and (min-width: 60em) {
    .products-list .product-lines {
        max-width: 20%;
        -ms-flex: 0 0 20%;
        flex-basis: 20%
    }
}

.products-list .product-lines img {
    display: block;
    padding: 1em;
    margin: auto;
    flex: 0 0 auto;
    object-fit: scale-down
}

.products-list .product-lines .titlehold {
    text-transform: uppercase;
    color: #585958;
    font-weight: bold;
    display: block;
    padding: .25em;
    font-size: .875em;
    transition: background .3s
}

.products-list .product-lines:hover .titlehold {
    background: #fbbe40;
    color: #fff
}

.products-list .product-lines .img-holder {
    -ms-display: flexbox;
    display: flex;
    align-items: center;
    -ms-flex-grow: 1;
    flex-grow: 1
}

.site-footer {
    text-align: center;
    border-top: 1px solid #0072bc;
    position: relative
}

.site-footer .rep-login {
    display: block;
    font-size: .875em;
    width: 100%;
    text-align: center;
    background: #005282;
    color: #fff;
    padding: .75em;
    text-transform: uppercase
}

.site-footer .rep-login:hover {
    background: #0072bc
}

.site-footer .logo {
    display: block;
    width: 220px;
    height: 85px;
    margin: 2em auto
}

.site-footer .privacy-policy {
    display: block;
    font-size: .875em;
    width: 100%;
    text-align: center;
    background: #0072bc;
    color: #fff;
    padding: .75em;
    text-transform: uppercase
}

.site-footer .privacy-policy:hover {
    background: #fbbe40
}

.site-footer .nav-socials {
    position: relative;
    top: 1rem
}

.nav-socials {
    display: block;
    text-align: center
}

.nav-socials a {
    display: inline-block;
    width: 2.25em;
    height: 2.25em;
    background: url(../img/icon-youtube.svg) no-repeat center center/contain;
    text-align: left;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 .25em
}

.nav-socials a:hover {
    opacity: .6
}

.nav-socials a:focus {
    outline: none
}

.nav-socials a.social-yt {
    background-image: url(../img/icon-youtube.svg)
}

.nav-socials a.social-li {
    background-image: url(../img/icon-linked-in.svg)
}

.nav-socials a.social-gp {
    background-image: url(../img/icon-g-plus.svg)
}

.nav-socials a.social-fb {
    background-image: url(../img/icon-facebook.svg)
}

.nav-socials a.social-tw {
    background-image: url(../img/icon-twitter.svg)
}

.nav-socials a.social-ig {
    background-image: url(../img/icon-instagram.svg)
}

.cookie-notice {
    position: fixed;
    display: block;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 131313;
    padding: 1rem;
    background: rgba(255, 255, 255, .95);
    background: linear-gradient(to bottom, rgba(199, 220, 234, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    transform: translateY(100%);
    transition: transform .3s;
    border-top: 4px solid #0072bc;
    text-align: center
}

.cookie-notice.unaccepted {
    transform: translateY(0)
}

@media only screen and (min-width: 60em) {
    .site-footer .rep-login {
        position: absolute;
        right: 1em;
        top: 25%;
        width: auto
    }

    .site-footer .nav-socials {
        position: absolute;
        left: 1em;
        top: 25%;
        width: auto
    }
}

form {
    margin: 0 0 1em
}

fieldset {
    padding: 1em;
    margin: 0 0 1em
}

form ul {
    padding: 0;
    margin: 0 0 1em;
    background: none;
    list-style: none
}

form ul li {
    padding: 0;
    margin: 0 0 .5em;
    background: none;
    list-style: none
}

fieldset ul li:before {
    content: ""
}

legend {
    color: #585958
}

form p {
    margin: 0 0 .4em
}

input[type=submit],
button {
    border: none;
    transition: all .3s
}

label {
    display: block
}

input[type=text],
input[type=password],
input[type=email],
input[type=tel],
textarea,
select {
    width: 100%;
    max-width: 500px;
    padding: .5em 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    line-height: normal;
    height: auto;
}

.configurator input[type=text],
.configurator input[type=password],
.configurator input[type=email],
.configurator input[type=tel],
.configurator textarea,
.configurator select {
    padding: .5em !important
}

/* .configurator select {
    padding: 0 .5em !important
} */

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 4px #0072bc
}

label.required:after {
    content: "*";
    color: #eb4803
}

form .state {
    display: inline-block;
    width: 30%;
    max-width: 140px
}

form .zip {
    display: inline-block;
    width: 55%;
    max-width: 260px
}

.checkboxes span,
.radios span {
    display: block;
    margin: 0 1em .5em 0
}

@media screen and (min-width: 60em) {

    .checkboxes span,
    .radios span {
        display: inline-block
    }
}

.checkboxes span label,
.radios span label {
    display: inline-block
}

.contact-form {
    margin: 2em auto;
    text-align: center;
    max-width: 600px;
    border: 1px solid #ddd;
    border-radius: 1em
}

.contact-form .form-group {
    margin: 0 0 1em
}

.input-append .add-on {
    position: relative;
    z-index: 113;
    cursor: pointer
}

.home-hero {
    position: relative
}

.home-hero .industry-slides {
    position: relative;
    width: 100%;
    height: 0;
    padding: 50% 0 0
}

.home-hero .aslide {
    background: url(../img/hero-fpo.jpg) no-repeat center center/cover;
    width: 100%;
    height: 100%
}

.home-hero .main-content {
    background: rgba(255, 255, 255, .9);
    padding: 2em 1em;
    position: relative;
    z-index: 113
}

.home-hero .logo {
    display: block;
    max-width: 460px;
    margin: auto
}

@media only screen and (min-width: 40em) {
    .home-hero .industry-slides {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
        left: 0;
        top: 0;
        padding: 0
    }

    .home-hero .main-content {
        background: linear-gradient(to bottom, white 0%, white 83%, rgba(255, 255, 255, 0.5) 100%);
        width: 100%;
        max-width: 40em;
        padding: 3em 3em 6em;
        margin: 0 auto
    }
}

@media only screen and (min-width: 60em) {
    .home-hero .main-content {
        margin-left: 5%
    }
}

.technical-resources {
    background: #0072bc;
    color: #fff;
    text-align: center;
    padding: 3em 2em
}

.technical-resources ul {
    padding: 0;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80vw
}

.technical-resources ul li {
    flex-basis: 100%;
    padding: 1vw
}

.technical-resources ul li a {
    display: block;
    border: 1px solid #fff;
    color: #fff;
    padding: 2vw;
    font-size: 4vw;
    text-transform: uppercase;
    vertical-align: middle;
    min-width: 14vw
}

@media screen and (min-width: 40em) {
    .technical-resources ul li a {
        font-size: 2vw
    }
}

@media screen and (min-width: 60em) {
    .technical-resources ul li a {
        font-size: 1vw;
        padding: 1vw
    }
}

.technical-resources ul li a::before {
    content: "";
    display: inline-block;
    width: 5vw;
    height: 5vw;
    background: url(../img/icon-nav-news.svg) no-repeat center center/contain;
    margin-right: 1vw;
    vertical-align: middle
}

@media screen and (min-width: 40em) {
    .technical-resources ul li a::before {
        width: 3vw;
        height: 3vw
    }
}

@media screen and (min-width: 60em) {
    .technical-resources ul li a::before {
        width: 2vw;
        height: 2vw
    }
}

.technical-resources ul li a:hover {
    background: #fbbe40
}

.technical-resources ul li a.tr-product-bulletins::before {
    background-image: url(../img/icon-product-bulletins.svg)
}

.technical-resources ul li a.tr-instruction-manuals::before {
    background-image: url(../img/icon-instruction-manuals.svg)
}

.technical-resources ul li a.tr-software-programs::before {
    background-image: url(../img/icon-software-programs.svg)
}

.technical-resources ul li a.tr-videos::before {
    background-image: url(../img/icon-videos.svg)
}

.technical-resources ul li a.tr-specifications::before {
    background-image: url(../img/icon-specifications.svg)
}

.technical-resources ul li a.tr-cad-drawings::before {
    background-image: url(../img/icon-cad-drawings.svg)
}

.technical-resources ul li a.tr-application-solutions::before {
    background-image: url(../img/icon-application-solutions.svg)
}

.technical-resources ul li a.tr-articles-white-papers::before {
    background-image: url(../img/icon-articles-white-papers.svg)
}

@media screen and (min-width: 40em) {
    .technical-resources ul li {
        flex-basis: auto
    }
}

.home-news {
    background: #fff;
    text-align: center;
    padding: 2em 1em
}

.home-news h1 {
    color: #0072bc
}

.home-news .more-news {
    font-size: 1.125em;
    text-transform: uppercase;
    padding: 1em 0 0
}

.news-listings {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.news-listing {
    display: flex;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding: 1em
}

@media screen and (min-width: 60em) {
    .news-listing {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }
}

.news-listing .inner {
    border: 1px solid #585958;
    display: block
}

@media screen and (min-width: 60em) {
    .news-listing .inner {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        align-items: center
    }
}

.news-listing .img {
    width: 100%;
    padding: 1em
}

@media screen and (min-width: 60em) {
    .news-listing .img {
        max-width: 35%;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%
    }
}

.news-listing .img .img-holder-square {
    margin: 0;
    border: none
}

.news-listing .details {
    padding: 0 1em 0 0;
    text-align: left;
    width: 100%
}

@media screen and (min-width: 60em) {
    .news-listing .details {
        max-width: 65%;
        -ms-flex: 0 0 65%;
        flex: 0 0 65%;
        border-left: 1px solid #585958;
        height: 100%
    }
}

.news-listing .the-date {
    display: inline-block;
    padding: .5em 1em;
    background: #0072bc;
    color: #fff;
    font-size: .825em;
    margin: 1em 0
}

.news-listing .excerpt {
    border-top: 1px solid #585958;
    border-bottom: 1px solid #585958;
    padding: 1em
}

.news-listing .excerpt h2 {
    color: #0072bc;
    font-size: 1.25em
}

.news-listing .excerpt p {
    color: #585958
}

.news-listing .news-link {
    padding: 1em;
    text-align: right;
    display: block;
    text-transform: uppercase
}

.product-nav {
    color: #fff;
    position: relative;
    z-index: 114
}

.product-nav ul {
    margin: 0;
    padding: 0
}

.product-nav ul li {
    margin: 0;
    padding: 0;
    display: inline-block
}

.product-nav ul li a {
    display: block;
    color: #fff;
    margin-bottom: .125em
}

.product-nav ul li a:hover {
    background-color: #fbbe40
}

@media only screen and (min-width: 40em) {
    .product-nav ul li.cycle-pager-active a {
        background-color: #fbbe40
    }
}

.product-nav h3 {
    display: block;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 1rem 2rem;
    margin: 0
}

.product-nav-brands {
    background: #005282
}

.product-nav-brands ul {
    padding: 1vw
}

.product-nav-brands a {
    height: 56px;
    display: flex !important;
    box-sizing: content-box !important;
    padding: 0 1vw;
    overflow: hidden;
    text-indent: -9999px;
    background-size: 76%;
    background-repeat: no-repeat;
    background-position: center center
}

.product-nav-brands .brand-dezurik {
    width: 14vw;
    max-width: 113px;
    background-image: url(../img/logo-dezurik.svg)
}

.product-nav-brands .brand-apco {
    width: 8vw;
    max-width: 55px;
    background-image: url(../img/logo-apco.svg);
    background-size: 70%
}

.product-nav-brands .brand-hilton {
    width: 17vw;
    max-width: 136px;
    background-image: url(../img/logo-hilton.svg)
}

.product-nav-brands .brand-willamette {
    width: 25vw;
    max-width: 215px;
    background-image: url(../img/logo-willamette.svg);
    background-size: 84%
}

.product-nav-industry {
    background: #5f97b4;
    text-transform: uppercase
}

.product-nav-industry ul {
    padding: .375vw 1vw
}

.product-nav-industry ul li {
    position: relative
}

.product-nav-industry ul li::after {
    content: "";
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .5);
    width: 1px;
    height: 70%;
    right: -3px;
    top: 15%
}

.product-nav-industry ul li:last-child::after {
    background: none
}

.product-nav-industry a {
    display: inline-block;
    padding: .5vw 1vw;
    font-size: 1.0625em
}

@media only screen and (min-width: 40em) {
    .product-nav-industry a {
        font-size: 1.7vw
    }
}

@media only screen and (min-width: 75em) {
    .product-nav-industry a {
        font-size: .95vw
    }
}

@media only screen and (min-width: 1920px) {
    .product-nav-industry a {
        text-align: center
    }
}

@media only screen and (min-width: 75em) {
    .product-nav-holder {
        display: -ms-flexbox;
        display: flex;
        background: #ddd
    }

    .product-nav-brands {
        -ms-flex: 0 0 38%;
        width: 38%
    }

    .product-nav-industry {
        width: 62%;
        -ms-flex: 0 0 62%;
        -ms-flex-grow: 1;
        flex-grow: 1
    }

    .product-nav-brands .brand-dezurik {
        width: 6vw
    }

    .product-nav-brands .brand-apco {
        width: 3vw
    }

    .product-nav-brands .brand-hilton {
        width: 7vw
    }

    .product-nav-brands .brand-willamette {
        width: 10vw
    }
}

.breadcrumbs {
    padding: 1em;
    border-bottom: 1px solid #0072bc;
    text-transform: uppercase
}

.breadcrumbs a {
    font-size: .75em
}

.breadcrumbs a.current {
    font-weight: bold;
    font-size: 1em
}

.product-nav-results .breadcrumbs {
    border-bottom: none;
    background: #fff;
    position: relative;
    z-index: 114
}

.product-results {
    position: relative;
    z-index: 114;
    background: #fff
}

.product-results h2 {
    background: #fbbe40;
    color: #fff;
    display: block;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    font-size: 1.25em;
    padding: .5em
}

.product-results ul {
    margin: 0;
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-wrap: wrap
}

.product-results ul li {
    border: 1px solid #0072bc;
    position: relative;
    list-style: none;
    margin: -0.5px;
    -ms-flex: 0 0 50%;
    flex-basis: calc(50% + 1px);
    text-align: center
}

@media screen and (min-width: 40em) {
    .product-results ul li {
        -ms-flex: 0 0 25%;
        flex-basis: calc(25% + 1px);
        max-width: calc(25% + 1px)
    }
}

@media screen and (min-width: 60em) {
    .product-results ul li {
        -ms-flex: 0 0 16.666%;
        flex-basis: calc(16.666% + 1px);
        max-width: calc(16.666% + 1px)
    }
}

.product-results ul li a {
    display: block;
    text-transform: uppercase;
    font-weight: bold
}

.product-results ul li a .title {
    display: block;
    color: #585958;
    line-height: 1;
    padding: .5em
}

.product-results ul li a .title .code {
    white-space: nowrap
}

.product-results ul li a .img {
    padding: 0 3vw
}

.product-results ul li a .img .img-holder-square {
    margin: 0
}

.product-results ul li a img {
    max-width: 40vw;
    max-height: 36vw
}

@media screen and (min-width: 40em) {
    .product-results ul li a img {
        max-width: 22vw;
        max-height: 20vw
    }
}

@media screen and (min-width: 60em) {
    .product-results ul li a img {
        max-width: 14vw;
        max-height: 12vw
    }
}

.product-results ul li a:hover .title {
    color: #fff;
    background: #fbbe40
}

.industry-hero {
    position: relative
}

.industry-hero .industry-slides {
    position: relative;
    width: 100%;
    height: 0;
    padding: 50% 0 0
}

.industry-hero .aslide {
    background: url(../img/hero-fpo.jpg) no-repeat center center/cover;
    width: 100%;
    height: 100%
}

.industry-hero .main-content {
    background: rgba(255, 255, 255, .9);
    padding: 2em 1em;
    position: relative;
    z-index: 1
}

.industry-hero .logo {
    display: block;
    max-width: 460px;
    margin: 0 auto 2em;
    text-align: center
}

@media only screen and (min-width: 40em) {
    .industry-hero {
        background-size: cover;
        background-position: center center
    }

    .industry-hero .industry-slides {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
        left: 0;
        top: 0;
        padding: 0
    }

    .industry-hero .main-content {
        background: linear-gradient(to bottom, white 0%, white 83%, rgba(255, 255, 255, 0.5) 100%);
        width: 100%;
        max-width: 40em;
        padding: 3em 3em 6em;
        margin: 0 auto
    }
}

@media only screen and (min-width: 60em) {
    .industry-hero .main-content {
        margin-left: 5%
    }
}

.blue-panel {
    background: #0072bc;
    color: #fff
}

.blue-panel h2 {
    font-size: 1.375rem
}

.blue-panel a {
    color: #fff
}

.blue-panel a:hover {
    color: #fbbe40
}

.blue-panel .pdf::after,
.blue-panel a[href$=".pdf"]::after,
.blue-panel a[title$=".pdf"]::after {
    background: url(../img/icon-pdf-inv.svg) no-repeat center center/contain
}

.blue-panel input[type=submit],
.blue-panel input[type=button],
.blue-panel button,
.blue-panel a.button {
    background: #fbbe40;
    color: #fff;
    padding: .5em 1em;
    line-height: normal;
    border: none;
    margin: 1em 0;
    transition: all .3s
}

.blue-panel input[type=submit]:hover,
.blue-panel input[type=button]:hover,
.blue-panel button:hover,
.blue-panel a.button:hover {
    background: #0091ef;
    color: #fff
}

.blue-panel .miniSurveyView #msg {
    margin-bottom: 2em
}

.blue-panel .miniSurveyView .required {
    color: #fbbe40
}

.blue-panel .disclaimers {
    font-size: .75em;
    margin: 0;
    padding: .5em 0
}

.blue-panel .radioPair {
    position: relative;
    padding: 0 0 .375em 1.25em;
    text-indent: -0.25em
}

.blue-panel .radioPair input[type=checkbox],
.blue-panel .radioPair input[type=radio] {
    position: absolute;
    left: 0;
    top: .25em
}

.blue-panel .big-title {
    font-size: 1.75em;
    font-weight: bold;
    line-height: 1.2
}

@media only screen and (min-width: 60em) {
    .blue-panel .miniSurveyView {
        max-width: 50em;
        float: left;
        margin-right: 2em
    }

    .blue-panel .miniSurveyView table.formBlockSurveyTable td.question {
        min-width: 130px
    }
}

.grey-panel {
    background: #808285;
    color: #fff;
    padding: 2em 0;
    text-align: center
}

.grey-panel a {
    color: #fbbe40
}

.grey-panel a:hover {
    color: #0091ef
}

@media only screen and (min-width: 60em) {
    .grey-panel {
        text-align: left
    }

    .grey-panel .content {
        max-width: 60em
    }

    .grey-panel .ind-pdf-thumb {
        float: left;
        margin: 0 2em 2em 0
    }

    .grey-panel h2 {
        max-width: 31em;
        line-height: 1.2
    }
}

.form1,
.form2,
.ind-content-panel {
    padding: 2em 1em
}

.ind-prod-panel {
    padding: 1em 0
}

.ind-pdf-thumb {
    max-width: 260px;
    display: inline-block;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5)
}

@media only screen and (min-width: 60em) {
    .news.detail .page-logo {
        margin-top: 5em
    }
}

.news-full .sharethis-inline-share-buttons {
    margin-bottom: 2em
}

.news-full .date {
    display: inline-block;
    background: #fbbe40;
    color: #fff;
    padding: .5em 1em
}

.news-full .img-holder-square {
    height: auto;
    padding: 0
}

.news-full .img-holder-square img {
    position: relative;
    left: auto;
    top: auto;
    transform: none
}

.news-full .xtras {
    padding: 0 1em
}

.news-full .xtras .img-holder-square {
    display: inline-block;
    border: none !important;
    margin: .25em;
    width: auto;
    max-width: 60px
}

.news-full .xtras .gallery-tag {
    display: inline-block;
    background: #0072bc;
    color: #fff;
    font-size: .875em;
    padding: .5em 1em;
    font-weight: normal;
    margin: 0 0 .5em
}

.news-this-year {
    display: flex;
    flex-wrap: wrap
}

.news-this-year .a-news-item {
    flex-basis: 50%;
    border: 1px solid #0072bc;
    margin: -0.5px;
    border-collapse: collapse;
    text-align: center;
    padding: 1em
}

@media only screen and (min-width: 60em) {
    .news-this-year .a-news-item {
        flex-basis: calc(16.666% + 1px);
        padding: 1.5em
    }
}

.news-this-year .a-news-item .date {
    display: inline-block;
    background: #0072bc;
    color: #fff;
    font-size: .875em;
    padding: .25em 1em
}

.news-this-year .a-news-item .title {
    font-size: 1em;
    text-transform: uppercase;
    color: #585958
}

.news-this-year .a-news-item .img-holder-square {
    margin: 1em 0
}

.news-this-year .a-news-item:visited {
    background: #fff
}

.news-this-year .a-news-item:hover {
    background: #0072bc
}

.news-this-year .a-news-item:hover .date {
    background: #fbbe40
}

.news-this-year .a-news-item:hover .title {
    color: #fff
}

.news-years {
    background: #5f97b4;
    color: #fff;
    text-align: center;
    padding: 1em
}

@media only screen and (min-width: 60em) {
    .news-years {
        padding: 2em
    }
}

.news-years .year-btns {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0
}

.news-years .year-btns li {
    flex-basis: 50%;
    padding: 1vw
}

@media only screen and (min-width: 60em) {
    .news-years .year-btns li {
        flex-basis: 25%
    }
}

.news-years .year-btns li a {
    border: 1px solid #fff;
    color: #fff;
    display: block;
    padding: 1vw;
    text-transform: uppercase
}

.news-years .year-btns li a:hover {
    background: #fbbe40
}

.rep-only-btns {
    border-bottom: 1px solid #0072bc
}

@media only screen and (min-width: 60em) {
    .rep-only-btns {
        border: none;
        float: right
    }
}

.rep-only-btns a {
    display: inline-block;
    background-position: center center;
    background-size: 106%;
    border: 1px solid #0072bc;
    width: 140px;
    height: 46px;
    margin: .25em
}

.rep-only-btns a.rep-btn-apslide {
    background-image: url(/airvalvesizingtool/img/apslide-logo.png)
}

.rep-only-btns a.rep-btn-tracker {
    background-image: url(../img/rep-btn-tracker.png)
}

.rep-only-btns a.rep-btn-configurator {
    background-image: url(../img/rep-btn-configurator.png)
}

.rep-only-btns a.rep-btn-webstock {
    background-image: url(../img/rep-btn-fast-track.png)
}

.rep-only-btns a.rep-btn-webnet {
    background-image: url(../img/rep-btn-webnet.png)
}

.rep-only-btns a.rep-btn-order-status {
    background-image: url(../img/rep-btn-order-status.png)
}

.rep-only-btns a:hover {
    border-color: #fbbe40
}

.repform.login {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: .5em;
    padding: 2em
}

@media only screen and (max-width: 1140px) {
    #drawing-form {
        clear: both
    }
}

@media only screen and (min-width: 1140px) {
    #drawing-form-nav {
        float: right
    }
}

.v_show_hide h2,
.v_show_hide .show_hide_h3,
.v_show_hide .show_hide_h3_sub {
    font-size: 1.25em;
    color: #0072bc;
    cursor: pointer
}

.v_show_hide h2::before,
.v_show_hide .show_hide_h3::before,
.v_show_hide .show_hide_h3_sub::before {
    content: "+";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    color: #fff;
    background: #0072bc;
    margin: 0 .25em 0 0;
    text-align: center
}

.v_show_hide h2:hover,
.v_show_hide .show_hide_h3:hover,
.v_show_hide .show_hide_h3_sub:hover {
    color: #0091ef
}

.v_show_hide h2:hover::before,
.v_show_hide .show_hide_h3:hover::before,
.v_show_hide .show_hide_h3_sub:hover::before {
    background: #0091ef
}

.v_show_hide .show_hide_h3,
.v_show_hide .show_hide_h3_sub {
    font-size: 1em
}

.v_show_hide .show_hide_h3+.show_hide_table {
    padding-left: 1em
}

.v_show_hide dt.open h2::before,
.v_show_hide .show_hide_h3.open::before,
.v_show_hide .show_hide_h3_sub.open::before {
    content: "-"
}

.rep-news-listings .news-item {
    border-bottom: 1px solid #ddd;
    padding: 1em 0
}

.rep-news-listings .news-item img {
    display: block;
    margin: 0 auto 1em
}

@media only screen and (min-width: 40em) {
    .rep-news-listings .news-item img {
        float: right;
        margin: 0 0 1em 2em
    }
}

.rep-news-listings .news-item .news-date {
    background: #fbbe40;
    color: #fff;
    display: inline-block;
    font-size: .825em;
    padding: .25em .5em
}

.rep-news-detail .date {
    background: #fbbe40;
    color: #fff;
    display: inline-block;
    padding: .5em 1em
}

.rep-news-detail .news-image {
    display: block;
    margin: 0 auto 1em
}

@media only screen and (min-width: 40em) {
    .rep-news-detail .news-image {
        float: right;
        margin: 0 0 1em 2em
    }
}

.rep-head-fields {
    padding: 0 2em
}

.rep-head-fields select {
    width: auto;
    max-width: 420px;
    min-width: 100px
}

@media only screen and (min-width: 60em) {
    .rep-head-field-rep {
        float: left
    }
}

@media only screen and (min-width: 60em) {
    .rep-head-field-user {
        float: right
    }
}

#product-div {
    display: flex;
    flex-wrap: wrap
}

#product-div .product-lines {
    text-align: center;
    padding: 1em;
    margin: -0.5px;
    border: 1px solid #0072bc;
    flex-basis: 50%;
    font-weight: bold;
    text-transform: uppercase
}

@media only screen and (min-width: 60em) {
    #product-div .product-lines {
        flex-basis: 33.33%
    }
}

@media only screen and (min-width: 40em) {
    #product-div .product-lines {
        flex-basis: 20%
    }
}

legend.showhideh {
    border-top: 1px solid #eee;
    margin-bottom: 10px;
    width: 98%;
    cursor: pointer;
    color: #585958
}

legend.showhideh::before {
    content: "+";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    color: #fff;
    background: #0072bc;
    margin: 0 .25em 0 0;
    text-align: center
}

legend.showhideh.open::before {
    content: "-"
}

.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child>.dropdown-toggle {
    padding: 6px
}

.fake-bs-btn {
    display: inline-block;
    *display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    background-color: #0072bc
}

.fake-bs-btn:hover,
.fake-bs-btn:focus,
.fake-bs-btn:active,
.fake-bs-btn.active,
.fake-bs-btn.disabled,
.fake-bs-btn[disabled] {
    color: #fff;
    background-color: #fbbe40
}

.store-listing {
    display: block;
    width: 230px;
    min-height: 220px;
    background: url(../images/bg-gradient.png) repeat-x center bottom;
    border: 1px solid #d9d9d9;
    float: left;
    margin: 0 12px 12px 0;
    padding: 10px;
    text-align: center;
    position: relative
}

.store-listing a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #808183;
    line-height: 14px;
    text-align: center
}

.store-listing h4 {
    margin: 0 0 10px
}

.store-listing img {
    box-shadow: 0 0 5px #ccc;
    margin: 0 auto 12px
}

.store_profile_4 .store-listing img {
    box-shadow: none;
    margin: 0 auto 12px
}

#store_profile_4 img {
    box-shadow: none
}

.store-listing price {
    display: block;
    margin: 0 0 3px
}

.store-listing a:hover {
    color: #0072bc
}

.store-listing a span.titlehold {
    display: table;
    width: 250px;
    height: 45px;
    position: absolute;
    bottom: 6px;
    left: 0
}

.store-listing a span.titlehold span {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px
}

.configurator {
    background: #f6f6f6;
    max-width: 1080px;
    margin: 0 auto 2em;
    padding: 1em 2em;
    border-radius: .5em
}

.configurator h4 {
    text-transform: none
}

.config-side-details {
    float: right;
    font-size: 12px;
    color: #7f7f7f;
    line-height: 15px;
    width: 100%;
    max-width: 465px;
    padding: 1em
}

.old-bs-fix {
    max-width: 1080px;
    margin: 0 auto 1em;
    padding: 1em 2em
}

.builder-wrapper {
    padding-top: 1em
}

.builder-left-col {
    float: left;
    width: 70%;
    padding-right: 1em
}

.builder-right-col {
    float: left;
    width: 30%
}

#qa_avail_qty {
    margin-top: 1em
}

#qa_avail_qty>table {
    width: 100%
}

#qa_avail_qty>table th {
    background: #fff
}

.qa_product,
.lookup-in-webstock {
    display: inline-block;
    background: #fff;
    padding: .25em .75em;
    border-radius: .25em;
    border: 1px solid #ddd;
    position: relative;
    top: -12px;
    vertical-align: top
}

.qa_product input,
.lookup-in-webstock input {
    display: inline-block;
    margin: 0
}

.qa_product label,
.lookup-in-webstock label {
    display: inline-block;
    font-size: 14px;
    margin: 0
}

.lookup-in-webstock {
    line-height: 20px
}

.store-listing {
    padding-bottom: 4em;
    min-height: 360px
}

.store-listing select {
    width: auto
}

.store-listing input[type=submit] {
    position: absolute;
    bottom: 1em;
    left: 0;
    transform: translateX(50%)
}

.flagged-order td {
    background: rgba(251, 190, 64, .2)
}

td.flagged-date {
    color: red
}

.form-search--order-status .quadcol {
    padding: 0 .5em
}

.far-group {
    display: flex;
    flex-wrap: wrap
}

.far-entry {
    border: 1px solid #0072bc;
    padding: 1em;
    margin-bottom: 1em;
    margin: -0.5px;
    flex-basis: 100%
}

.far-entry h2 {
    font-color: #0072bc;
    border-bottom: 1px dashed #ddd;
    font-size: 1.25em;
    margin-top: 0;
    color: #0072bc
}

@media only screen and (min-width: 60em) {
    .far-entry h2 {
        display: none
    }
}

.far-entry .far-data h3 {
    margin: 0 0 .125em;
    font-size: 1.0675em;
    line-height: 1.3
}

@media only screen and (min-width: 28em) {
    .far-entry .far-data h3 {
        width: 100px;
        float: left;
        text-align: right
    }

    .far-entry .far-data p {
        display: block;
        float: left;
        padding-left: 10px;
        max-width: calc(100% - 110px)
    }

    .far-entry .far-data .far-set {
        clear: both
    }
}

.far-entry.company-entry {
    padding: 1em 1em 0
}

@media only screen and (min-width: 60em) {
    .far-entry {
        flex-basis: 50%;
        max-width: calc(50% + 1px)
    }
}

.far-column-headers {
    display: none
}

@media only screen and (min-width: 60em) {
    .far-column-headers {
        display: block
    }

    .far-column-headers h2 {
        color: #0072bc;
        width: 50%;
        float: left;
        margin: 0 0 .5em
    }
}

#find-a-rep-form,
#find-a-rep-form-dropdown {
    display: block;
    background: rgba(221, 221, 221, .5);
    padding: 1em
}

#find-a-rep-form h3,
#find-a-rep-form-dropdown h3 {
    margin-top: 0
}

#contact-us-results .far-entry {
    flex: 0 0 100%;
    padding: .5em !important
}

@media only screen and (min-width: 60em) {
    #contact-us-results .far-entry {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.features-callout {
    display: block;
    padding: 1em;
    border: 1px solid #0072bc;
    margin: 2em auto;
    max-width: 340px
}

.features-callout h2 {
    color: #0072bc;
    font-size: 1.3675em;
    margin: 0 0 .25em
}

.features-callout .boxlink {
    display: block;
    margin: auto;
    max-width: 300px
}

.product-features-main {
    position: relative
}

.product-features-main a {
    display: inline-block;
    background: #fbbe40;
    color: #fff;
    font-size: .75em;
    position: absolute;
    z-index: 13;
    width: 6rem;
    padding: .5em;
    text-align: center;
    line-height: 1.2
}

.product-features-main a:hover {
    background: #0091ef
}

@media only screen and (min-width: 46rem) {
    .product-features-main a {
        font-size: 1em;
        width: 10rem
    }
}

.product-feature-header {
    text-align: center;
    position: relative
}

.product-feature-header h1 {
    margin: .5em 0 0
}

.product-feature-header h3 {
    margin: .25em 0 .5em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
    margin-bottom: 2rem
}

@media only screen and (min-width: 60em) {
    .product-feature-header h1 {
        margin: 1em 0 0
    }
}

.prev-next a.boxlink {
    font-size: .875rem;
    background: #fbbe40
}

.prev-next a.boxlink:hover {
    background: #0091ef
}

@media only screen and (min-width: 60em) {
    .prev-next {
        position: absolute;
        left: 0;
        top: -2.5em
    }
}

.product-feature-image-col {
    text-align: center
}

.product-feature-how-to {
    background: #0072bc;
    color: #fff;
    padding: .5em 1em;
    max-width: 800px;
    margin: 1em auto
}

.product-feature-how-to h2 {
    font-size: 1.5em;
    margin: .5em 0
}

@media only screen and (min-width: 60em) {
    .product-feature-how-to {
        padding: .5em 2em
    }
}

body.application-solutions .big-blue-header {
    background: #0072bc;
    position: relative
}

body.application-solutions .big-blue-header h1 {
    color: #fff;
    padding: 0 2rem
}

body.application-solutions .big-blue-header .page-logo {
    margin-right: 3em;
    margin: 2em 1em
}

body.application-solutions .full-content {
    margin: 0 0 1em;
    padding-top: 0
}

@media only screen and (min-width: 60em) {
    body.application-solutions .big-blue-header h1 {
        position: absolute;
        left: 22rem;
        bottom: 2.25rem;
        margin: 0;
        padding: 0
    }

    body.application-solutions .full-content {
        margin: 0 0 1em 20em
    }
}

.product-applications h2:first-child {
    margin-top: 0
}

.file-listing-show-hide {
    display: block;
    color: #fff;
    background: #585958;
    padding: .5em;
    cursor: pointer;
    transition: all .3s
}

.file-listing-show-hide::before {
    content: "+";
    background: #fff;
    color: #585958;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    margin: 0 .25em 0 0;
    text-align: center
}

.file-listing-show-hide:hover {
    background: #fbbe40
}

.file-listing-show-hide:hover::before {
    color: #fbbe40
}

.file-listing-show-hide.open {
    background: #fbbe40
}

.file-listing-show-hide.open::before {
    content: "-";
    color: #fbbe40
}

.product-app-language {
    display: none !important
}

.app-number-title {
    display: block;
    text-transform: uppercase
}

.product-app-listings {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.product-app-listings li {
    display: block;
    width: 100%;
    max-width: 290px;
    margin: 0 auto 1em;
    padding: 0;
    vertical-align: top
}

.product-app-listings a {
    display: block;
    color: #585958
}

.product-app-listings a.pdf::after,
.product-app-listings a[href$=".pdf"]::after,
.product-app-listings a[title$=".pdf"]::after {
    display: none
}

.product-app-listings a:hover {
    color: #0072bc
}

.product-app-listings .thumb {
    display: block;
    padding: 0 3em 0 0;
    position: relative;
    margin: 0 3em 1em 0
}

.product-app-listings .thumb::after {
    content: "";
    background: url(../img/icon-pdf.svg) no-repeat center center/contain;
    display: block;
    width: 2em;
    height: 2em;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    right: 0
}

.product-app-listings .thumb img {
    display: block;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5)
}

@media only screen and (min-width: 40em) {
    .product-app-listings li {
        display: inline-block;
        margin: 0 1em 1em 0
    }
}

.cad-html {
    min-height: 320px;
    overflow: hidden;
    position: relative
}

.cad-html h4 {
    margin: .25em 0 .5em
}

.cad-html input[type=text] {
    padding: .5em
}

.cad-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    padding-bottom: 1rem
}

.cad-html iframe {
    width: 100%;
    height: 320px;
    border: none
}

.drawing-download {
    padding-top: 1rem;
    border-top: 1px solid #eee
}

.drawing-download select {
    width: calc(100% - 150px);
    max-width: none
}

.help-label {
    display: block;
    font-size: .75em;
    margin-bottom: .5em
}

.cad-html::after {
    content: "";
    display: block;
    background: rgba(255, 255, 255, .9) url(/reponly/img/busy.gif) no-repeat center center/36px;
    opacity: .1;
    transition: opacity 1s;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1
}

.cad-html.loading::after {
    z-index: 13;
    opacity: 1
}

@media only screen and (min-width: 640px) {
    .cad-2col {
        grid-template-columns: 1fr 1fr
    }

    .cad-html iframe {
        height: 60vw
    }
}

@media only screen and (min-width: 960px) {
    .cad-2col {
        grid-template-columns: 1fr
    }

    .cad-html iframe {
        height: 320px
    }
}

@media only screen and (min-width: 1220px) {
    .cad-2col {
        grid-template-columns: 1fr 1fr
    }

    .cad-html iframe {
        height: 480px
    }
}

/* input[type=submit],
input[type=button],
button,
a.button {
    background: #0072bc;
    color: #fff;
    padding: .5em 1em;
    line-height: normal;
    border: none;
    transition: all .3s
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover {
    background: #fbbe40;
    color: #fff
} */

body.coverlayed {
    overflow: hidden
}

.coverlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1313;
    background: rgba(88, 89, 88, .95);
    left: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto
}

.coverlay .cover-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.coverlay .close-coverlay {
    cursor: pointer;
    display: block;
    height: 36px;
    width: 28px;
    padding: 18px 0 0;
    margin: 0 1em;
    position: fixed;
    outline: none;
    right: 0;
    top: 0;
    z-index: 113;
    outline: none
}

.admin-bar .coverlay .close-coverlay {
    top: 40px
}

.coverlay .close-coverlay span,
.coverlay .close-coverlay span:after {
    border-radius: 1px;
    height: 4px;
    width: 28px;
    background: #fff;
    position: absolute;
    display: block;
    content: "";
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 250ms ease-in-out
}

.coverlay .close-coverlay span:after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg)
}

.coverlay .close-coverlay:hover {
    opacity: .4
}

.coverlay .cover-content {
    color: #fff;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2em 3em;
    box-sizing: border-box
}

.coverlay .cover-content .content {
    max-width: 640px
}

.guts {
    padding: 0
}

.aside ul.nav {
    margin: 1em 0 2em;
    border-top: 1px solid #ddd
}

.aside ul.nav li {
    display: block
}

.aside ul.nav li a {
    display: block;
    padding: .5em 1em;
    border-bottom: 1px solid #ddd;
    font-size: 1.125em
}

.aside ul.nav li a:hover {
    background: rgba(221, 221, 221, .85)
}

.searchResult {
    padding: 1em 0;
    border-bottom: 1px solid #ddd
}

#materialDataList,
#material-form {
    background: rgba(221, 221, 221, .5);
    padding: 1em
}

@media only screen and (min-width: 40em) {

    #materialDataList .col,
    #material-form .col {
        width: 45%;
        display: inline-block;
        vertical-align: top
    }
}

.products-page-listing {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.products-page-listing .product-lines {
    text-align: center;
    padding: 1em;
    margin: -0.5px;
    border: 1px solid #0072bc;
    -ms-flex: 0 0 50%;
    flex-basis: 50%;
    font-weight: bold;
    text-transform: uppercase
}

@media only screen and (min-width: 40em) {
    .products-page-listing .product-lines {
        -ms-flex: 33.33%;
        flex-basis: 33.33%
    }
}

@media only screen and (min-width: 40em) {
    .products-page-listing .product-lines {
        -ms-flex: 20%;
        flex-basis: 20%
    }
}

.highlighted {
    border: 1px solid #0091ef;
    display: inline-block;
    padding: 0 .125em;
    border-radius: 2px
}

.apcost-holder,
.apco-worksheet-form {
    padding: 1em;
    background: #f6f6f6
}

.apcost-holder .apco-form-top label,
.apco-worksheet-form .apco-form-top label {
    display: inline-block
}

.apcost-holder .apco-form-top input[type=text],
.apco-worksheet-form .apco-form-top input[type=text] {
    display: inline-block;
    width: 240px
}

.apcost-holder fieldset,
.apco-worksheet-form fieldset {
    padding: 1em;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, .25)
}

.apcost-holder fieldset label,
.apcost-holder fieldset .label,
.apco-worksheet-form fieldset label,
.apco-worksheet-form fieldset .label {
    display: inline-block;
    font-weight: bold;
    width: 40%;
    min-width: 300px;
    text-align: right;
    padding: 0 1em;
    box-sizing: border-box
}

.apcost-holder fieldset .cost-savings-results label,
.apco-worksheet-form fieldset .cost-savings-results label {
    width: auto;
    padding: 0
}

.apcost-holder fieldset hr,
.apco-worksheet-form fieldset hr {
    margin: 1.25em 0
}

.apcost-holder .field-set,
.apcost-holder .result-set,
.apco-worksheet-form .field-set,
.apco-worksheet-form .result-set {
    padding: .25em 0;
    border-bottom: 1px dotted #ddd
}

.apcost-holder .field-set:last-of-type,
.apcost-holder .result-set:last-of-type,
.apco-worksheet-form .field-set:last-of-type,
.apco-worksheet-form .result-set:last-of-type {
    border: none
}

@media only screen and (min-width: 60em) {

    .apcost-holder .cost-savings-results .result-set,
    .apco-worksheet-form .cost-savings-results .result-set {
        text-align: right
    }
}

.apcost-holder legend,
.apco-worksheet-form legend {
    color: #0072bc;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 .5em;
    font-size: 1.25em
}

.apcost-holder input[type=text],
.apcost-holder select,
.apco-worksheet-form input[type=text],
.apco-worksheet-form select {
    width: 80px;
    display: inline-block
}

.apcost-holder input[type=text].med,
.apcost-holder select.med,
.apco-worksheet-form input[type=text].med,
.apco-worksheet-form select.med {
    width: 200px
}

.apcost-holder input[type=text].lg,
.apcost-holder select.lg,
.apco-worksheet-form input[type=text].lg,
.apco-worksheet-form select.lg {
    width: 320px
}

.apcost-holder input[type=text].editable,
.apcost-holder select.editable,
.apco-worksheet-form input[type=text].editable,
.apco-worksheet-form select.editable {
    border-color: #0091ef
}

.apcost-holder input[type=text],
.apco-worksheet-form input[type=text] {
    padding: .5em
}

.apcost-holder .result,
.apco-worksheet-form .result {
    display: inline-block
}

.apcost-holder .result.super,
.apco-worksheet-form .result.super {
    color: #0072bc;
    min-width: 140px;
    font-size: 1.25em;
    font-weight: bold
}

.apcost-holder .result.changed,
.apco-worksheet-form .result.changed {
    animation: changed 1s 1
}

.apcost-holder abbr,
.apco-worksheet-form abbr {
    display: inline-block;
    margin: 0 .5em;
    border-bottom: none
}

@keyframes changed {
    0% {
        color: #0091ef;
        opacity: 0
    }

    20% {
        color: #0072bc;
        opacity: 1
    }

    100% {
        color: #585958
    }
}

.apco-worksheet-form {
    background: none;
    padding: 0
}

.inline-modaal {
    display: none
}

.apcost-holder {
    position: relative
}

.apcost-buttons {
    text-align: center
}

.apcost-buttons ul {
    margin: 0 0 1em;
    padding: 0;
    list-style: none
}

.apcost-buttons a {
    width: 100%
}

.apcost-buttons .fa {
    font-size: 1.25em;
    width: 1em;
    position: relative;
    left: -0.25em;
    top: .125em
}

@media only screen and (min-width: 60em) {
    .apcost-buttons {
        text-align: right;
        position: absolute;
        right: 100%;
        top: auto;
        z-index: 2;
        width: 350px
    }

    .apcost-buttons a {
        width: auto
    }
}

.apcost-logo {
    display: block;
    width: 246px;
    height: 82px;
    border-radius: 16px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .25)
}

.printable {
    transition: all .5s;
    padding: 1em 0
}

.print-highlight {
    background: rgba(0, 114, 188, .1)
}

.apco-worksheet-table th {
    vertical-align: bottom
}

.caption {
    font-size: .75em;
    text-align: center;
    padding: .5em
}

@media only screen and (min-width: 800px) {
    .left-table {
        width: 52%;
        float: left;
        padding-right: 2em
    }

    .right-table {
        width: 48%;
        float: left
    }
}

.printme-logo {
    display: none
}

body.printme-body .printme-logo,
.modaal-content-container .printme-logo {
    display: inline-block;
    width: 180px;
    height: auto
}

body.printme-body .printme-logo.apcost-logo,
.modaal-content-container .printme-logo.apcost-logo {
    margin: 1em
}

body.printme-body .print-init-caps,
.modaal-content-container .print-init-caps {
    display: inline-block;
    text-transform: none;
    margin: .5em 0 .25em;
    font-size: 1.25em
}

.print-only {
    display: none
}

.printme-body div {
    box-sizing: border-box
}

#cost-comparison-table td {
    text-align: right
}

@media print {
    body.printme-body {
        background: #fff !important
    }

    .caption {
        margin: 0 .25em
    }

    .printme-logo {
        display: inline-block;
        width: 180px;
        height: auto
    }

    .printme-logo.apcost-logo {
        margin: 1em
    }

    .print-init-caps {
        display: inline-block;
        text-transform: none;
        margin: .5em 1em .25em;
        font-size: 1.25em
    }

    .printme-heading {
        margin-bottom: 1em
    }

    .apco-form-top .twocol {
        width: 40%;
        display: inline-block
    }

    .apco-instructions {
        line-height: 1.2
    }

    #cost-comparison-table {
        font-size: .625em
    }

    .apco-worksheet-form {
        font-size: .8125em;
        line-height: 1.2
    }

    .apcost-holder .field-set,
    .apcost-holder .result-set,
    .apco-worksheet-form .field-set,
    .apco-worksheet-form .result-set {
        padding: .125em 0
    }

    .apco-tech-info-tables {
        font-size: .875em
    }

    .apco-tech-info-tables .left-table {
        float: left;
        box-sizing: border-box;
        padding-right: 4em
    }

    .apco-tech-info-tables .right-table {
        float: left;
        background: blue;
        box-sizing: border-box
    }

    .apco-tech-info-tables {
        font-size: .75em
    }
}

/*! Animate.css - http://daneden.me/animate - Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.full_table,
.nice-table,
.price_book_table,
.contacts_table {
    border-collapse: collapse;
    margin: 0 0 1em;
    border: 1px solid #ddd
}

.full_table th,
.full_table td,
.nice-table th,
.nice-table td,
.price_book_table th,
.price_book_table td,
.contacts_table th,
.contacts_table td {
    border: 1px solid #ddd;
    text-align: left;
    padding: .3em .6em;
    vertical-align: top
}

.full_table tr:nth-child(even) td,
.nice-table tr:nth-child(even) td,
.price_book_table tr:nth-child(even) td,
.contacts_table tr:nth-child(even) td {
    background: rgba(0, 0, 0, .05)
}

.full_table thead td,
.nice-table thead td,
.price_book_table thead td,
.contacts_table thead td {
    font-weight: bold
}

.full_table,
.price_book_table {
    width: 100%
}

.table-wrap {
    width: 100%;
    overflow: auto
}

.table-wrap table {
    min-width: 680px
}

.smaller-table {
    font-size: .875em
}

.result-table.selection-guide.metal {
    font-size: .75em
}

.price_book_table {
    table-layout: fixed;
    font-size: .875em
}

.price_book_table a.file {
    white-space: nowrap
}

.price_book_table tr td:nth-child(1) {
    width: 22%
}

.price_book_table tr td:nth-child(2) {
    width: 12%
}

.price_book_table tr td:nth-child(3) {
    width: auto
}

.price_book_table tr td:nth-child(4) {
    width: 11%
}

.contacts_table {
    background: #fff;
    font-size: .875em
}

.contacts_table a.file {
    white-space: nowrap
}

.contacts_table tr td:nth-child(1) {
    min-width: 272px
}

.contacts_table tr td:nth-child(2) {
    min-width: 166px
}

.contacts_table tr td:nth-child(3) {
    min-width: 132px;
    white-space: nowrap
}

.contacts_table tr td:nth-child(4) {
    min-width: 220px;
    white-space: nowrap
}

.table-condensed {
    font-size: .875em
}

.table-condensed td,
.table-condensed th {
    padding: 3px
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    text-indent: -9999px
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%
}

.hidden {
    display: none !important;
    visibility: hidden
}

.visuallyhidden {
    border: 0;
    clip: rect(0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    margin: -1px;
    padding: 0
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
    margin: 0
}

.invisible {
    visibility: hidden
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: " ";
    display: table
}

.clearfix:after,
.row:after {
    clear: both
}

.clearfix,
.row {
    zoom: 1
}

@media print {
    * {
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr,
    img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3
    }

    h2, 
    h3 {
        page-break-after: avoid
    }

    #masthead,
    .site-footer,
    .rep-only-btns {
        display: none
    }
}

/*! Modaal - accessible modals - v0.3.1 - by Humaan, for all humans. - http://humaan.com */
.modaal-noscroll {
    overflow: hidden
}

.modaal-accessible-hide {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden
}

.modaal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0
}

.modaal-wrapper {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: auto;
    opacity: 1;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    transition: all .3s ease-in-out
}

.modaal-wrapper * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden
}

.modaal-wrapper .modaal-close {
    border: none;
    padding: 0;
    -webkit-appearance: none
}

.modaal-wrapper.modaal-start_none {
    display: none;
    opacity: 1
}

.modaal-wrapper.modaal-start_fade {
    opacity: 0
}

.modaal-wrapper *[tabindex="0"] {
    outline: none !important
}

.modaal-wrapper.modaal-fullscreen {
    overflow: hidden
}

.modaal-outer-wrapper {
    display: table;
    position: relative;
    width: 100%;
    height: 100%
}

.modaal-fullscreen .modaal-outer-wrapper {
    display: block
}

.modaal-inner-wrapper {
    display: table-cell;
    width: 100%;
    height: 100%;
    position: relative;
    vertical-align: middle;
    text-align: center;
    padding: 80px 25px
}

.modaal-fullscreen .modaal-inner-wrapper {
    padding: 0;
    display: block;
    vertical-align: top
}

.modaal-container {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: auto;
    text-align: left;
    max-width: 1000px;
    border-radius: 0px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    cursor: auto
}

.modaal-container.is_loading {
    height: 100px;
    width: 100px;
    overflow: hidden
}

.modaal-fullscreen .modaal-container {
    max-width: none;
    height: 100%;
    overflow: auto
}

.modaal-close {
    position: fixed;
    right: 20px;
    top: 20px;
    color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 100%;
    transition: all .2s ease-in-out
}

.modaal-close:focus,
.modaal-close:hover {
    outline: none;
    background: #fff
}

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
    background: #0072bc
}

.modaal-close span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden
}

.modaal-close:before,
.modaal-close:after {
    display: block;
    content: " ";
    position: absolute;
    top: 14px;
    left: 23px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    transition: background .2s ease-in-out
}

.modaal-close:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.modaal-close:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.modaal-fullscreen .modaal-close {
    background: #afb7bc;
    right: 10px;
    top: 10px
}

.modaal-content-container {
    padding: 30px
}

.modaal-confirm-wrap {
    padding: 30px 0 0;
    text-align: center;
    font-size: 0
}

.modaal-confirm-btn {
    font-size: 14px;
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    background: transparent
}

.modaal-confirm-btn.modaal-ok {
    padding: 10px 15px;
    color: #fff;
    background: #555;
    border-radius: 3px;
    transition: background .2s ease-in-out
}

.modaal-confirm-btn.modaal-ok:hover {
    background: #2f2f2f
}

.modaal-confirm-btn.modaal-cancel {
    text-decoration: underline
}

.modaal-confirm-btn.modaal-cancel:hover {
    text-decoration: none;
    color: #2f2f2f
}

@keyframes instaReveal {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes instaReveal {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.modaal-instagram .modaal-container {
    width: auto;
    background: transparent;
    box-shadow: none !important
}

.modaal-instagram .modaal-content-container {
    padding: 0;
    background: transparent
}

.modaal-instagram .modaal-content-container>blockquote {
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important
}

.modaal-instagram iframe {
    opacity: 0;
    margin: -6px !important;
    border-radius: 0 !important;
    width: 1000px !important;
    max-width: 800px !important;
    box-shadow: none !important;
    -webkit-animation: instaReveal 1s linear forwards;
    animation: instaReveal 1s linear forwards
}

.modaal-image .modaal-inner-wrapper {
    padding-left: 140px;
    padding-right: 140px
}

.modaal-image .modaal-container {
    width: auto;
    max-width: 100%
}

.modaal-gallery-wrap {
    position: relative;
    color: #fff
}

.modaal-gallery-item {
    display: none
}

.modaal-gallery-item img {
    display: block
}

.modaal-gallery-item.is_active {
    display: block
}

.modaal-gallery-label {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 20px 0 0;
    font-size: 18px;
    text-align: center;
    color: #fff
}

.modaal-gallery-label:focus {
    outline: none
}

.modaal-gallery-control {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
    cursor: pointer;
    color: #fff;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 100%;
    transition: all .2s ease-in-out
}

.modaal-gallery-control.is_hidden {
    opacity: 0;
    cursor: default
}

.modaal-gallery-control:focus,
.modaal-gallery-control:hover {
    outline: none;
    background: #fff
}

.modaal-gallery-control:focus:before,
.modaal-gallery-control:focus:after,
.modaal-gallery-control:hover:before,
.modaal-gallery-control:hover:after {
    background: #afb7bc
}

.modaal-gallery-control span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden
}

.modaal-gallery-control:before,
.modaal-gallery-control:after {
    display: block;
    content: " ";
    position: absolute;
    top: 16px;
    left: 25px;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    transition: background .2s ease-in-out
}

.modaal-gallery-control:before {
    margin: -5px 0 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.modaal-gallery-control:after {
    margin: 5px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.modaal-gallery-next {
    left: 100%;
    margin-left: 40px
}

.modaal-gallery-prev {
    right: 100%;
    margin-right: 40px
}

.modaal-gallery-prev:before,
.modaal-gallery-prev:after {
    left: 22px
}

.modaal-gallery-prev:before {
    margin: 5px 0 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.modaal-gallery-prev:after {
    margin: -5px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.modaal-video-wrap {
    margin: auto 50px;
    position: relative
}

.modaal-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    background: #000;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto
}

.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.modaal-iframe .modaal-content {
    width: 100%;
    height: 100%
}

.modaal-iframe-elem {
    width: 100%;
    height: 100%;
    display: block
}

@media only screen and (min-width: 1400px) {
    .modaal-video-container {
        padding-bottom: 0;
        height: 731px
    }
}

@media only screen and (max-width: 1140px) {
    .modaal-image .modaal-inner-wrapper {
        padding-left: 25px;
        padding-right: 25px
    }

    .modaal-gallery-control {
        top: auto;
        bottom: 20px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        background: rgba(0, 0, 0, .7)
    }

    .modaal-gallery-control:before,
    .modaal-gallery-control:after {
        background: #fff
    }

    .modaal-gallery-next {
        left: auto;
        right: 20px
    }

    .modaal-gallery-prev {
        left: 20px;
        right: auto
    }
}

@media screen and (max-width: 900px) {
    .modaal-instagram iframe {
        width: 500px !important
    }
}

@media screen and (max-height: 1100px) {
    .modaal-instagram iframe {
        width: 700px !important
    }
}

@media screen and (max-height: 1000px) {
    .modaal-inner-wrapper {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .modaal-instagram iframe {
        width: 600px !important
    }
}

@media screen and (max-height: 900px) {
    .modaal-instagram iframe {
        width: 500px !important
    }

    .modaal-video-container {
        max-width: 900px;
        max-height: 510px
    }
}

@media only screen and (max-width: 600px) {
    .modaal-instagram iframe {
        width: 280px !important
    }
}

@media only screen and (max-height: 820px) {
    .modaal-gallery-label {
        display: none
    }
}

.modaal-loading-spinner {
    background: none;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    -webkit-transform: scale(0.25);
    -ms-transform: scale(0.25);
    transform: scale(0.25)
}

@-webkit-keyframes modaal-loading-spinner {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: .1;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes modaal-loading-spinner {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    100% {
        opacity: .1;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.modaal-loading-spinner>div {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    margin-top: 4px;
    position: absolute
}

.modaal-loading-spinner>div>div {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #fff
}

.modaal-loading-spinner>div:nth-of-type(1)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.modaal-loading-spinner>div:nth-of-type(2)>div,
.modaal-loading-spinner>div:nth-of-type(3)>div {
    -ms-animation: modaal-loading-spinner 1s linear infinite;
    -moz-animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    -o-animation: modaal-loading-spinner 1s linear infinite
}

.modaal-loading-spinner>div:nth-of-type(1) {
    -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(45deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(2)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .12s;
    animation-delay: .12s
}

.modaal-loading-spinner>div:nth-of-type(2) {
    -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(90deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(3)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.modaal-loading-spinner>div:nth-of-type(4)>div,
.modaal-loading-spinner>div:nth-of-type(5)>div {
    -ms-animation: modaal-loading-spinner 1s linear infinite;
    -moz-animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    -o-animation: modaal-loading-spinner 1s linear infinite
}

.modaal-loading-spinner>div:nth-of-type(3) {
    -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(135deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(4)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .37s;
    animation-delay: .37s
}

.modaal-loading-spinner>div:nth-of-type(4) {
    -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(180deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(5)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.modaal-loading-spinner>div:nth-of-type(6)>div,
.modaal-loading-spinner>div:nth-of-type(7)>div {
    -ms-animation: modaal-loading-spinner 1s linear infinite;
    -moz-animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    -o-animation: modaal-loading-spinner 1s linear infinite
}

.modaal-loading-spinner>div:nth-of-type(5) {
    -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(225deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(6)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .62s;
    animation-delay: .62s
}

.modaal-loading-spinner>div:nth-of-type(6) {
    -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(270deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(7)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .75s;
    animation-delay: .75s
}

.modaal-loading-spinner>div:nth-of-type(7) {
    -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(315deg) translate(70px, 0)
}

.modaal-loading-spinner>div:nth-of-type(8)>div {
    -webkit-animation: modaal-loading-spinner 1s linear infinite;
    animation: modaal-loading-spinner 1s linear infinite;
    -webkit-animation-delay: .87s;
    animation-delay: .87s
}

.modaal-loading-spinner>div:nth-of-type(8) {
    -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(360deg) translate(70px, 0)
}


.cad-html {
    background: linear-gradient(to top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, 0) 100%);
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    border-bottom: 1px solid #0072BC;
}

/* Additions rep-only CSS from old site. Might be nice to figure out how to unuse some of this  */
/* CSS Document */

th { background: #efefef; }
table {border: 1px solid #D9D9D9; }
.table tbody > tr.odd > td, .table tbody > tr.odd > th { background: #fafafa; }
.table tr.grouped-field td { border-top: none; }
label, input, button, select, textarea { font-size: 12px; }
#configged {
  text-align: center;
  background: url("/themes/dezurik/images/bg-gradient.png") repeat-x center bottom #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #D9D9D9;
  padding: 12px;
  font-size: 14px;
}
.modal-backdrop { background: #fff; }
/*
.btn {
  color: #333333;
  background-color: #eee;
  *background-color: #ccc;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#ffeeeeee', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #ccc;
  *background-color: #ccc;
}
.btn-primary {
  color: #fff;
  background-color: #0072bc;
  *background-color: #0072bc;
  background-image: -moz-linear-gradient(top, #0099cc, #0072bc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0099cc), to(#0072bc));
  background-image: -webkit-linear-gradient(top, #0099cc, #0072bc);
  background-image: -o-linear-gradient(top, #0099cc, #0072bc);
  background-image: linear-gradient(to bottom, #0099cc, #0072bc)
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #0072bc;
  *background-color: #0072bc;
}
*/
.override-notes { margin-top: 5px; }
.class-price {
  white-space:nowrap;
}
.validating-conditions-div {
  display:none;
}
.a.validating-conditions-link {
  line-height:17px;
  vertical-align:top;
}

.dropdown-menu > li > a.invalid-option {
  color:#999999;
  font-style:italic;
}
.validating-conditions-table { font-size: 12px; }
.validating-conditions-table tr.No td {

}
p.warning {
  color: #a47e3c;
}
input.error {
  border:1px dotted red;
}
input.warning, textarea.warning, select.warning, checkbox.warning {
  border:1px dotted #a47e3c;
}
#product-code-message {
  color:#999;
}
#product-code-message.error {
  color:red;
}
span#product-code-message {
  display: block; /* so the margin works */
  margin: -10px 0 8px;
  font-size: 12px;
}
.table-head-sorter {
  color:#0072bc;
  cursor:pointer;
}
.table td {
  background-color:#FFF;
}
#coating-form { width: 840px; margin: 0 auto 40px; padding: 0; }
#coating-form .leftcol, #coating-form .rightcol { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px 20px; }
#coating-form .rightcol.summary { background: #fafafa; border-radius: 13px; }
#coating-form label { margin-bottom: 0; }
#coating-form .control-group { margin-bottom: 12px; }

.form-search { display: block; margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid #ddd; }
.form-search label { display: block; width: 100%; }
.form-search .quadcol { width: 25%; float: left; }
.form-search .quadcol button { font-size: 1em; padding: .375em 1em; margin: 27px .125em 0; }

.form-horizontal .control-group {
  margin-bottom: 8px;
}

.break-all {
  -ms-word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

#drag-word-div {
  height:355px;
  overflow:scroll;
  overflow-x: hidden;
  border: 1px #D9D9D9 solid;
}

#drag-word-list {
  list-style-type:none;
}

#drag-word-list li {
  font-size:10px;
}

tr.error td:first-child {
  background-color:#e7d4d4;
}

tr.error td:first-child {
  background-color:#b94a48;
}

.used-in-configurator {
  font-weight: bold;
}

.change-line-item-table {
  margin-bottom: 0;
}

.line-item-div {
  margin-bottom: 10px;
}

.notify-time { display: inline-block; display: none; position: fixed; right: 0; top: 0; background: #0072bc; background: rgba(0,114,188,.97); color: #fff; padding: 4px 12px; z-index: 13; }
.notify-time a { color: #c9eaff; }
.notify-time a:hover { color: #fff; }