/**
 * CONTENTS
 *
 * GENERIC
 * Box-sizing............Better default `box-sizing`.
 * Media.................WP specific img aligns and iframe styling.
 *
 * BASE
 * Typography............@fontfaces, base text and vertical rhythem setup.
 *
 * COMPONENTS
 * Wrappers..............Wrapping and constraining elements.
 * Grid System...........Bootstrap based grid.
 * Clearfix..............Properly clear floats.
 *
 * Objects
 * Icons.................Icon Elements.
 * Buttons...............Button elements.
 * Tables................Table Styles.
 * Forms.................Form Elements.
 * Breadcrumbs...........Breadcrumbs.
 * Pagination............Pagination.
 * Sliders/Carousels.....Sliders/Carousels.
 * Posts.................Post content for loop on blog homepage, search page, archives, etc.
 * Tabs..................Tabbed content.
 *
 * UI
 * Page head.............The main page header.
 * Navigation............Navigation elements.
 * Masthead..............Page title/image/slideshow header block.
 * Sidebar...............Sidebar elements.
 * Page footer...........The main page footer.
 *
 * TRUMPS
 * Images................Round, Circle, Square Images.
 * Visiblity.............Make items visible.
 * Hiding................Make items invisible/hidden.
 * Screen Readers........Display for screen readers.
 * Print.................Display for printing.
 * Clears................Clearing floats.
 * Text alignment........Align text.
 * Font weights..........Adjust font weights.
 * Borders...............Add borders.
 * Add/remove margins....Remove margins.
 * Add/remove paddings...Remove padding.
 * Positioning...........float, center, and stick items.
 */




/*------------------------------------*\
    Generic
\*------------------------------------*/

/* ---- START DEV CSS -----*/
/**
 * Stuff added by developer to make it easier to use the form
 * Designer should organize these according to best practices
 */
.js-tabs {
    display: none;
}

/* make click events for the a tag */
a.js-tab-control > * {
  pointer-events: none;
}

canvas {
    background: #e6e6e6;
    /* there's some weird stuff going on with this plugin so we're setting the height in JS */
}

/* ---- END DEV CSS -----*/



/**
 * Box-sizing
 */

* { -webkit-box-sizing: border-box; box-sizing: border-box; }



/**
 * Media
 *
 * These selectors are hard cast because they are only used
 * by wordpress wyswyg when adding images to content
 */

/* TODO: Update image bottom margin to match paragraph margin */

.wp-caption.alignright,
.wp-caption.alignleft,
.wp-caption.alignnone,
.wp-caption.aligncenter {
    margin: 0;
    width: auto !important; /* to overwrite inline widths */
}

img.alignright,
.wp-caption.alignright img,
img.alignleft,
.wp-caption.alignleft img {
    height: auto;
    max-width: 50%;
}

img.alignnone,
.wp-caption.alignnone img,
img.aligncenter,
.wp-caption.aligncenter img {
    height: auto;
    max-width: 100%;
}

img.alignnone,
.wp-caption.alignnone,
img.aligncenter,
.wp-caption.aligncenter { margin: 0 0 22px 0; }

img.alignright,
.wp-caption.alignright {
    float: right;
    margin: 0 0 22px 30px;
}

img.alignleft,
.wp-caption.alignleft {
    float: left;
    margin: 0 30px 22px 0;
}

img.aligncenter,
.wp-caption.aligncenter img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}


/*------------------------------------*\
    Typography
\*------------------------------------*/

/* Please set up line-heights in ems */

body {
    font-family: Open Sans;
    color: #052540;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.h1, .h3, .h4, h1, h3, h4 {
    font-family: Lato, sans-serif;
    text-transform: uppercase;
}

h1, .h1 {
}

h2, .h2 {
}

h3, .h3 {
}

h4, .h4 {
}

p, ul, ol {
}

ul li {
    /* set up bullets as a :before or icon element, not as a background image */
}

hr {
}

a {
    text-decoration: none;
    word-break: break-all; /* force link text to overflow when too long for container */
    color: #1961a8;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: pointer;
}

    a:hover {
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        color: #103f6d;
        text-decoration: underline;
    }



/*------------------------------------*\
    COMPONENTS
\*------------------------------------*/


/**
 * Wrappers
 */

.container,
.container-fluid,
.wp-activate-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px; /* TODO: Default grid. Update if different in prototypes. */
    padding-right: 20px;
}

.container,
.wp-activate-container {
    max-width: 1366px;
}


/**
 * Grid System
 *
 * Bootstrap v3.3.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 * Base setup 20px gutters
 *
 * Phones         - xxs - <  600px    ** Default **
 * Small Tablets  - xs - >=  600px
 * Tablets        - sm - >= 768px
 * Desktop        - md - >= 1025px
 * Large Desktop  - lg - >= 1200px
 * --------------------------------------------------------------------------
 * Learn more here: http://getbootstrap.com/css/#grid
 * -------------------------------------------------------------------------- */

.row {
    margin-left: -20px; /* TODO: Default grid. Update if different in prototypes. */
    margin-right: -20px;
}

    [class*="col-"] {
        position: relative;
        min-height: 1px;
        padding-left: 20px; /* TODO: Default grid. Update if different in prototypes. */
        padding-right: 20px;
    }

/* Extra Extra small devices (devices, less than 600px) */
[class*="col-xxs-"] { float:left; }

.col-xxs-12 { width: 100%; }
.col-xxs-11 { width: 91.66666667%; }
.col-xxs-10 { width: 83.33333333%; }
.col-xxs-9  { width: 75%; }
.col-xxs-8  { width: 66.66666667%; }
.col-xxs-7  { width: 58.33333333%; }
.col-xxs-6  { width: 50%; }
.col-xxs-5  { width: 41.66666667%; }
.col-xxs-4  { width: 33.33333333%; }
.col-xxs-3  { width: 25%; }
.col-xxs-2  { width: 16.66666667%; }
.col-xxs-1  { width: 8.33333333%; }

.col-xxs-pull-12 { right: 100%; }
.col-xxs-pull-11 { right: 91.66666667%; }
.col-xxs-pull-10 { right: 83.33333333%; }
.col-xxs-pull-9  { right: 75%; }
.col-xxs-pull-8  { right: 66.66666667%; }
.col-xxs-pull-7  { right: 58.33333333%; }
.col-xxs-pull-6  { right: 50%; }
.col-xxs-pull-5  { right: 41.66666667%; }
.col-xxs-pull-4  { right: 33.33333333%; }
.col-xxs-pull-3  { right: 25%; }
.col-xxs-pull-2  { right: 16.66666667%; }
.col-xxs-pull-1  { right: 8.33333333%; }
.col-xxs-pull-0  { right: auto; }

.col-xxs-push-12 { left: 100%; }
.col-xxs-push-11 { left: 91.66666667%; }
.col-xxs-push-10 { left: 83.33333333%; }
.col-xxs-push-9  { left: 75%; }
.col-xxs-push-8  { left: 66.66666667%; }
.col-xxs-push-7  { left: 58.33333333%; }
.col-xxs-push-6  { left: 50%; }
.col-xxs-push-5  { left: 41.66666667%; }
.col-xxs-push-4  { left: 33.33333333%; }
.col-xxs-push-3  { left: 25%; }
.col-xxs-push-2  { left: 16.66666667%; }
.col-xxs-push-1  { left: 8.33333333%; }
.col-xxs-push-0  { left: auto; }

.col-xxs-offset-12 { margin-left: 100%; }
.col-xxs-offset-11 { margin-left: 91.66666667%; }
.col-xxs-offset-10 { margin-left: 83.33333333%; }
.col-xxs-offset-9  { margin-left: 75%; }
.col-xxs-offset-8  { margin-left: 66.66666667%; }
.col-xxs-offset-7  { margin-left: 58.33333333%; }
.col-xxs-offset-6  { margin-left: 50%; }
.col-xxs-offset-5  { margin-left: 41.66666667%; }
.col-xxs-offset-4  { margin-left: 33.33333333%; }
.col-xxs-offset-3  { margin-left: 25%; }
.col-xxs-offset-2  { margin-left: 16.66666667%; }
.col-xxs-offset-1  { margin-left: 8.33333333%; }
.col-xxs-offset-0  { margin-left: 0%; }

/* Extra small devices (phones, 600px and up) */
@media (min-width: 600px) {
    [class*="col-xs-"] {float:left;}

    .col-xs-12 { width: 100%; }
    .col-xs-11 { width: 91.66666667%; }
    .col-xs-10 { width: 83.33333333%; }
    .col-xs-9  { width: 75%; }
    .col-xs-8  { width: 66.66666667%; }
    .col-xs-7  { width: 58.33333333%; }
    .col-xs-6  { width: 50%; }
    .col-xs-5  { width: 41.66666667%; }
    .col-xs-4  { width: 33.33333333%; }
    .col-xs-3  { width: 25%; }
    .col-xs-2  { width: 16.66666667%; }
    .col-xs-1  { width: 8.33333333%; }

    .col-xs-pull-12 { right: 100%; }
    .col-xs-pull-11 { right: 91.66666667%; }
    .col-xs-pull-10 { right: 83.33333333%; }
    .col-xs-pull-9  { right: 75%; }
    .col-xs-pull-8  { right: 66.66666667%; }
    .col-xs-pull-7  { right: 58.33333333%; }
    .col-xs-pull-6  { right: 50%; }
    .col-xs-pull-5  { right: 41.66666667%; }
    .col-xs-pull-4  { right: 33.33333333%; }
    .col-xs-pull-3  { right: 25%; }
    .col-xs-pull-2  { right: 16.66666667%; }
    .col-xs-pull-1  { right: 8.33333333%; }
    .col-xs-pull-0  { right: auto; }

    .col-xs-push-12 { left: 100%; }
    .col-xs-push-11 { left: 91.66666667%; }
    .col-xs-push-10 { left: 83.33333333%; }
    .col-xs-push-9  { left: 75%; }
    .col-xs-push-8  { left: 66.66666667%; }
    .col-xs-push-7  { left: 58.33333333%; }
    .col-xs-push-6  { left: 50%; }
    .col-xs-push-5  { left: 41.66666667%; }
    .col-xs-push-4  { left: 33.33333333%; }
    .col-xs-push-3  { left: 25%; }
    .col-xs-push-2  { left: 16.66666667%; }
    .col-xs-push-1  { left: 8.33333333%; }
    .col-xs-push-0  { left: auto; }

    .col-xs-offset-12 { margin-left: 100%; }
    .col-xs-offset-11 { margin-left: 91.66666667%; }
    .col-xs-offset-10 { margin-left: 83.33333333%; }
    .col-xs-offset-9  { margin-left: 75%; }
    .col-xs-offset-8  { margin-left: 66.66666667%; }
    .col-xs-offset-7  { margin-left: 58.33333333%; }
    .col-xs-offset-6  { margin-left: 50%; }
    .col-xs-offset-5  { margin-left: 41.66666667%; }
    .col-xs-offset-4  { margin-left: 33.33333333%; }
    .col-xs-offset-3  { margin-left: 25%; }
    .col-xs-offset-2  { margin-left: 16.66666667%; }
    .col-xs-offset-1  { margin-left: 8.33333333%; }
    .col-xs-offset-0  { margin-left: 0%; }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    [class*="col-sm-"] {float:left;}

    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9  { width: 75%; }
    .col-sm-8  { width: 66.66666667%; }
    .col-sm-7  { width: 58.33333333%; }
    .col-sm-6  { width: 50%; }
    .col-sm-5  { width: 41.66666667%; }
    .col-sm-4  { width: 33.33333333%; }
    .col-sm-3  { width: 25%; }
    .col-sm-2  { width: 16.66666667%; }
    .col-sm-1  { width: 8.33333333%; }

    .col-sm-pull-12 { right: 100%; }
    .col-sm-pull-11 { right: 91.66666667%; }
    .col-sm-pull-10 { right: 83.33333333%; }
    .col-sm-pull-9  { right: 75%; }
    .col-sm-pull-8  { right: 66.66666667%; }
    .col-sm-pull-7  { right: 58.33333333%; }
    .col-sm-pull-6  { right: 50%; }
    .col-sm-pull-5  { right: 41.66666667%; }
    .col-sm-pull-4  { right: 33.33333333%; }
    .col-sm-pull-3  { right: 25%; }
    .col-sm-pull-2  { right: 16.66666667%; }
    .col-sm-pull-1  { right: 8.33333333%; }
    .col-sm-pull-0  { right: auto; }

    .col-sm-push-12 { left: 100%; }
    .col-sm-push-11 { left: 91.66666667%; }
    .col-sm-push-10 { left: 83.33333333%; }
    .col-sm-push-9  { left: 75%; }
    .col-sm-push-8  { left: 66.66666667%; }
    .col-sm-push-7  { left: 58.33333333%; }
    .col-sm-push-6  { left: 50%; }
    .col-sm-push-5  { left: 41.66666667%; }
    .col-sm-push-4  { left: 33.33333333%; }
    .col-sm-push-3  { left: 25%; }
    .col-sm-push-2  { left: 16.66666667%; }
    .col-sm-push-1  { left: 8.33333333%; }
    .col-sm-push-0  { left: auto; }

    .col-sm-offset-12 { margin-left: 100%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-9  { margin-left: 75%; }
    .col-sm-offset-8  { margin-left: 66.66666667%; }
    .col-sm-offset-7  { margin-left: 58.33333333%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-5  { margin-left: 41.66666667%; }
    .col-sm-offset-4  { margin-left: 33.33333333%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-2  { margin-left: 16.66666667%; }
    .col-sm-offset-1  { margin-left: 8.33333333%; }
    .col-sm-offset-0  { margin-left: 0%; }
}

/* Medium devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
  [class*="col-md-"] {float:left;}

  .col-md-12 { width: 100%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-9  { width: 75%; }
  .col-md-8  { width: 66.66666667%; }
  .col-md-7  { width: 58.33333333%; }
  .col-md-6  { width: 50%; }
  .col-md-5  { width: 41.66666667%; }
  .col-md-4  { width: 33.33333333%; }
  .col-md-3  { width: 25%; }
  .col-md-2  { width: 16.66666667%; }
  .col-md-1  { width: 8.33333333%; }

  .col-md-pull-12 { right: 100%; }
  .col-md-pull-11 { right: 91.66666667%; }
  .col-md-pull-10 { right: 83.33333333%; }
  .col-md-pull-9  { right: 75%; }
  .col-md-pull-8  { right: 66.66666667%; }
  .col-md-pull-7  { right: 58.33333333%; }
  .col-md-pull-6  { right: 50%; }
  .col-md-pull-5  { right: 41.66666667%; }
  .col-md-pull-4  { right: 33.33333333%; }
  .col-md-pull-3  { right: 25%; }
  .col-md-pull-2  { right: 16.66666667%; }
  .col-md-pull-1  { right: 8.33333333%; }
  .col-md-pull-0  { right: auto; }

  .col-md-push-12 { left: 100%; }
  .col-md-push-11 { left: 91.66666667%; }
  .col-md-push-10 { left: 83.33333333%; }
  .col-md-push-9  { left: 75%; }
  .col-md-push-8  { left: 66.66666667%; }
  .col-md-push-7  { left: 58.33333333%; }
  .col-md-push-6  { left: 50%; }
  .col-md-push-5  { left: 41.66666667%; }
  .col-md-push-4  { left: 33.33333333%; }
  .col-md-push-3  { left: 25%; }
  .col-md-push-2  { left: 16.66666667%; }
  .col-md-push-1  { left: 8.33333333%; }
  .col-md-push-0  { left: auto; }

  .col-md-offset-12 { margin-left: 100%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-8  { margin-left: 66.66666667%; }
  .col-md-offset-7  { margin-left: 58.33333333%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-5  { margin-left: 41.66666667%; }
  .col-md-offset-4  { margin-left: 33.33333333%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-2  { margin-left: 16.66666667%; }
  .col-md-offset-1  { margin-left: 8.33333333%; }
  .col-md-offset-0  { margin-left: 0%; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  [class*="col-lg-"] {float:left;}

  .col-lg-12 { width: 100%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-9  { width: 75%; }
  .col-lg-8  { width: 66.66666667%; }
  .col-lg-7  { width: 58.33333333%; }
  .col-lg-6  { width: 50%; }
  .col-lg-5  { width: 41.66666667%; }
  .col-lg-4  { width: 33.33333333%; }
  .col-lg-3  { width: 25%; }
  .col-lg-2  { width: 16.66666667%; }
  .col-lg-1  { width: 8.33333333%; }

  .col-lg-pull-12 { right: 100%; }
  .col-lg-pull-11 { right: 91.66666667%; }
  .col-lg-pull-10 { right: 83.33333333%; }
  .col-lg-pull-9  { right: 75%; }
  .col-lg-pull-8  { right: 66.66666667%; }
  .col-lg-pull-7  { right: 58.33333333%; }
  .col-lg-pull-6  { right: 50%; }
  .col-lg-pull-5  { right: 41.66666667%; }
  .col-lg-pull-4  { right: 33.33333333%; }
  .col-lg-pull-3  { right: 25%; }
  .col-lg-pull-2  { right: 16.66666667%; }
  .col-lg-pull-1  { right: 8.33333333%; }
  .col-lg-pull-0  { right: auto; }

  .col-lg-push-12 { left: 100%; }
  .col-lg-push-11 { left: 91.66666667%; }
  .col-lg-push-10 { left: 83.33333333%; }
  .col-lg-push-9  { left: 75%; }
  .col-lg-push-8  { left: 66.66666667%; }
  .col-lg-push-7  { left: 58.33333333%; }
  .col-lg-push-6  { left: 50%; }
  .col-lg-push-5  { left: 41.66666667%; }
  .col-lg-push-4  { left: 33.33333333%; }
  .col-lg-push-3  { left: 25%; }
  .col-lg-push-2  { left: 16.66666667%; }
  .col-lg-push-1  { left: 8.33333333%; }
  .col-lg-push-0  { left: auto; }

  .col-lg-offset-12 { margin-left: 100%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
  .col-lg-offset-10 { margin-left: 83.33333333%; }
  .col-lg-offset-9  { margin-left: 75%; }
  .col-lg-offset-8  { margin-left: 66.66666667%; }
  .col-lg-offset-7  { margin-left: 58.33333333%; }
  .col-lg-offset-6  { margin-left: 50%; }
  .col-lg-offset-5  { margin-left: 41.66666667%; }
  .col-lg-offset-4  { margin-left: 33.33333333%; }
  .col-lg-offset-3  { margin-left: 25%; }
  .col-lg-offset-2  { margin-left: 16.66666667%; }
  .col-lg-offset-1  { margin-left: 8.33333333%; }
  .col-lg-offset-0  { margin-left: 0%; }
}



/**
 * Clearfix
 * Apply clearing without adding additional markup
 */

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

.clearfix:after,
.container:after,
.container-fluid:after,
.row:after { clear: both; }


/*--------------------------------------------------------------*\
    OBJECTS
    Objects are independent generic stylibf classes or UI peices.
    All styles for objects should be self contained.

    e.g. an object shouldn't rely on trump helpers to apply padding etc.
\*--------------------------------------------------------------*/


/**
 * Buttons
 */

button,
.reset-dropdowns { cursor: pointer; }

.btn,
#confirm-color-selection input,
.payment-method-button,
.copy-address-button,
.wpcf7-submit {
    display: inline-block;
    padding: 16px 40px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 0;
}

/* red */
.btn-primary,
#confirm-color-selection input,
.wpcf7-submit {
    background-color: #ed162a;
    color: #fff;
    text-align: center;
}

.btn-primary:hover,
#confirm-color-selection input:hover,
.wpcf7-submit:hover {
    background-color: #a20c1a;
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-secondary,
.payment-method-button,
.copy-address-button {
    background-color: #002440;
    color: #fff;
}

.btn-secondary:hover,
.payment-method-button:hover,
.copy-address-button:hover {
    background-color: #00111e;
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-tertiary,
.payment-method-selection .btn {
    background: #fff !important;
    border: 2px solid #002440 !important;
    color: #002440 !important;
    transition: all 0.3s ease;
}

.btn-tertiary:hover,
.payment-method-selection .btn:hover {
    transition: all 0.3s ease;
    background: #002440 !important;
    border: 2px solid #002440 !important;
    color: #fff !important;
}

.payment-method-selection .btn.btn-primary {
    background: #002440 !important;
    border: 2px solid #002440 !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

/* full width */
.btn-block,
#confirm-payment,
.confirm-payment {
    display: block;
    width: 100%;
}

.btn + .btn {
    margin-top: 5px; /* Add margin-top when 2 buttons are next to each other */
}

@media (min-width: 600px) {
    .btn + .btn {
        margin-top: 0;
        margin-left: 5px;
    }
}


/* Red Header Button */
.header-button {
    display: inline-block;
    padding: 11px 20px;
    background-color: #ec152a;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.header-button:hover {
    background-color: #a20c1a;
    color: #fff;
    text-decoration: none;
}

/* Blue / Red hyperlink style */
.wpcf7-field-group-remove,
.wpcf7-field-group-add {
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    padding: 10px 5px 10px 45px;
    height: 41px;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: #f5f5f5;
    color: #1961a8;
    border: 1px solid #e8e8e8;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}

.wpcf7-field-group-remove,
.wpcf7-field-group-add{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.wpcf7-field-group-remove span,
.wpcf7-field-group-add span{
    font-weight: 500;
    display: inline-block;
    margin-left: 6px;
}

.wpcf7-field-group-add:hover,
.wpcf7-field-group-remove:hover {
    background: #e4e4e4;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.wpcf7-field-group-add:before,
.wpcf7-field-group-remove:before {
    font-family: 'opp-orders' !important;
    font-weight: lighter;
    position: absolute;
    margin-right: 11px;
    left: 0px;
    height: 41px;
    line-height: 41px;
    padding: 0 12px;
    display: block;
    color: #fff;
}

/* add (blue) */
.wpcf7-field-group-add {
    background: #f5f5f5;
    color: #1961a8;
    border: 1px solid #e8e8e8;
}

.wpcf7-field-group-add:hover {
    color: #103f6d;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.wpcf7-field-group-add:before {
    content: "\e902";
    font-size: 20px;
    background: #1961a8;
}

.wpcf7-field-group-add:hover:before {
    background: #103f6d;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* remove (red) */
.wpcf7-field-group-remove {
    color: #ed162a;
    margin-right: 20px;
}

.wpcf7-field-group-remove:hover:before {
    background-color: #a20c1a;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.wpcf7-field-group-remove:hover {
    color: #a20c1a;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.wpcf7-field-group-remove:before {
    content: "\e90d";
    font-size: 17px;
    background: #ed162a;
}

@media (min-width: 768px) {
    .wpcf7-field-group-remove,
    .wpcf7-field-group-add {
        width: calc(50% - 10px);
        margin-top: 10px;
        margin-bottom: 30px;
    }
}



/* Clear Button (Small Outline) */
#wpcf7_drawing-signature_clear,
#wpcf7_payment-signature_clear {
    border: 2px solid #dadada;
    color: #052540;
    padding: 5px 10px;
    background-color: #fff;
    margin-top: 20px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#wpcf7_drawing-signature_clear:hover,
#wpcf7_payment-signature_clear:hover {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
            box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
}


/* Prev / Next Pagination */
.order-section .pagination {
    margin: 20px 0;
    padding-top: 20px;
    border-top: #e7e7e7 solid 1px;
}

.btn.prev-drawing-page,
.btn.next-drawing-page {
    width: calc(50% - 15px);
    padding: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 14px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 0;
}

.btn.prev-drawing-page:hover,
.btn.next-drawing-page:hover {
    text-decoration: none;

}

.btn.prev-drawing-page {
    border: 2px solid #052540;
    color: #052540;
    background-color: #fff;
    margin-right: 15px;
}

.btn.next-drawing-page {
    border: 2px solid #052540;
    background-color: #052540;
    color: #fff;
    margin-left: 15px;
}

.check-alert {
    color: red;
}




/**
 * Icons
 */

@font-face {
  font-family: 'opp-orders';
  src:  url('../fonts/opp-orders.eot?mq1zbw');
  src:  url('../fonts/opp-orders.eot?mq1zbw#iefix') format('embedded-opentype'),
    url('../fonts/opp-orders.ttf?mq1zbw') format('truetype'),
    url('../fonts/opp-orders.woff?mq1zbw') format('woff'),
    url('../fonts/opp-orders.svg?mq1zbw#opp-orders') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'opp-orders' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-download:before {
  content: "\e913";
}
.icon-cheveron-right:before {
  content: "\e90c";
}
.icon-minus:before {
  content: "\e90d";
}
.icon-mail:before {
  content: "\e90e";
}
.icon-download-simple:before {
  content: "\e914";
}
.icon-alert:before {
  content: "\e912";
}
.icon-close1:before {
  content: "\e900";
}
.icon-phone-1:before {
  content: "\e901";
}
.icon-plus:before {
  content: "\e902";
}
.icon-checkmark-circle:before {
  content: "\e915";
}
.icon-close-circle:before {
  content: "\e916";
}
.icon-checkmark:before {
  content: "\e917";
}
.icon-unlocked:before {
  content: "\e910";
}
.icon-lock:before {
  content: "\e911";
}
.icon-phone-2:before {
  content: "\e90b";
}
.icon-drawing:before {
  content: "\e903";
}
.icon-selection:before {
  content: "\e904";
}
.icon-payment:before {
  content: "\e905";
}
.icon-delivery:before {
  content: "\e906";
}
.icon-refresh:before {
  content: "\e90f";
}
.icon-triangle-down:before {
  content: "\e907";
}
.icon-youtube-square:before {
  content: "\e908";
}
.icon-facebook-square:before {
  content: "\e909";
}
.icon-twitter-square:before {
  content: "\e90a";
}






/**
 * Tables
 */

table {
    border-collapse: collapse;
}

td {
}

tr {
}

th {
}

thead {
}

tbody {
}

tfoot {
}

/* Responsive Tables */
.table-wrap-outer { position: relative; }
.table-wrap-inner { overflow: auto; }

.js-table-fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

.table-wrap-outer:after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    height: 100%;
    width: 80px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

@media (min-width: 600px) {
    .table-wrap-outer:after { display: none; }
    .table-wrap-inner { overflow: visible !important; }
}



/**
 * Forms
 */

label,
.wpcf7-list-item-label {
    display: block;
    font-weight: 600;
    color: #052540;
    font-size: 15px;
    margin-bottom: 4px;
    margin-top: 24px;
}

/* add labels that don't need a top margin here */
.wpcf7-acceptance label {
    margin-top: 0;
}

.label-reset {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.label-reset .label-left {
    width: 60%;
}

.label-reset .label-right {
    width: 40%;
}

label span {
    color: #ed152a;
}

label .group-index {
    color: #052540;
}

select {
    width: 100%;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 12px 17px;
}

textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 12px 17px;
}

/* Removes default webkit form styling */
input:not([type="radio"]):not([type="checkbox"]),
button,
textarea {
    -webkit-appearance: none;
}


/* grouping */
.color-form-group,
.payment-form-group {
    border: #e7e7e7 solid 1px;
    padding: 0px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.wpcf7-field-group:first-child .color-form-group {
    margin-top: 0;
}

.form-group-label {
    text-transform: none;
    padding-bottom: 6px;
    margin-top: 0;
    background: #f5f5f5;
    padding: 13px 20px;
    margin-right: -20px;
    margin-left: -20px;
}

.address-group label,
.address-group .wpcf7-list-item-label {
    margin-top: 10px;
    margin-bottom: 2px;
}

.address-group > div:first-child label,
.address-group > div:first-child .wpcf7-list-item-label {
    margin-top: 24px;
}

/* LOADING SPINNER BEGIN */
.hide-spinner {
    visibility: hidden;
}
.lds-default-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    background-color: rgba(225, 225, 225, 0.65);
    z-index: 2;
    /* visibility: visible; */
    /* transition: background-color 2s, opacity 2s; */
}
/* .lds-default-container.hide-spinner {
    animation: hide-spinner 2s steps(10) forwards;
    opacity: 0;
    background-color: rgba(225, 225, 225, 0);
} */
.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-default div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
}
/* @keyframes hide-spinner {
    0%, 90% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
} */
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}
.lds-default div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}
/* LOADING SPINNER END */
/*
Pretty hacky way to output the same CF7 form on two different views, but make it look like a completely different form.
Reasons we want to do this:
- We autosave post meta under a single CF7 post ID key (PHP)
- We autopopulate previously filled values into form using JS
- If we were to output a different form that needed to autopopulate with values from a previous form:
    - We would need to update the PHP to always save values from the duplicate form into the original form meta (data in 1 place)
    - We would need to update the JS to always target and populate the duplicate form to update it with values from the original form meta (data in 1 place)
- Currently trying to avoid an exception and need to update the mini framework we have for this functionality
*/
/* Hide the delivery section header on the "Delivery Info" view */
[data-section="delivery"] .form-group-label {
    display: none;
}
/* Hide fields we don't want to see on the "Payment" view */
[data-section="payment"] .loading-dock-form-group, [data-section="payment"] .signer-phone-form-group, [data-section="payment"] .signer-email-form-group, [data-section="payment"] #confirm-delivery-info {
    display: none;
}

[data-section="payment"] input:read-only, [data-section="payment"] textarea:read-only  {
    background-color: #f5f5f5;
}

[data-section="payment"] input[type="submit"] {
    background-color: #ed162a;
}

[data-section="payment"] input:disabled {
    background-color: #f5f5f5;
}

.delivery-infomation-not-filled {
    color: #ed162a;
    font-weight: bold;
    font-size: large;
}

/* Hide the copy address button if no delivery address has been confirmed or the delivery address section is not enabled on this form */
.copy-address-from-delivery-hide .js-copy-address-from-delivery {
    display: none;
}

@media (min-width: 768px) {
    .color-form-group,
    .payment-form-group {
        padding: 0px 30px 40px 30px;
    }

    .form-group-label {
        padding: 13px 30px;
        margin-right: -30px;
        margin-left: -30px;
    }
}

@media (min-width: 1025px) {

}


/* default text input style */
[type="text"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"],
[type="week"],
[type="date"] {
    width: 100%;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 12px 17px;
    font-weight: 500;
    font-size: 16px;
    color: #052540;
    border-radius: 0;
}

@media (min-width: 768px) {
    [type="text"],
    [type="date"],
    [type="datetime"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="url"],
    [type="week"],
    [type="date"] {
        font-size: 15px;
    }
}

[type="text"]:focus,
[type="date"]:focus,
[type="datetime"]:focus,
[type="datetime-local"]:focus,
[type="email"]:focus,
[type="month"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="url"]:focus,
[type="week"]:focus,
[type="date"]:focus {
    border: 1px solid #052540;
    outline: 1px solid #052540;
}

input::-webkit-input-placeholder {
    padding: 10px;
    font-size: 15px;
    color: #aeaeae;
    font-style: italic;
    font-weight: 500;
}

input::-moz-placeholder {
    padding: 10px;
    font-size: 15px;
    color: #aeaeae;
    font-style: italic;
    font-weight: 500;
}

input:-ms-input-placeholder {
    padding: 10px;
    font-size: 15px;
    color: #aeaeae;
    font-style: italic;
    font-weight: 500;
}

input::-ms-input-placeholder {
    padding: 10px;
    font-size: 15px;
    color: #aeaeae;
    font-style: italic;
    font-weight: 500;
}

input::placeholder {
    padding: 0;
    font-size: 15px;
    color: #aeaeae;
    font-style: italic;
    font-weight: 500;
}


/* Default Submit Button Style */
.order-section,
.rawing-page .wpcf7-form {
    position: relative;
}

[type="submit"],
#activateform .submit {
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

[type="submit"].submitting {
    background-image:url(../img/btn-loading.gif);
    background-repeat: no-repeat;
    background-position: center;
    opacity: .75;
    color: transparent;
    transition: all 0.3s ease;
}

    /* Removes inconsistent padding from Firefox buttons */
    button::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border: none;
        padding:0;
    }

/* Default Radio/Checkbox Style (if using CF7) */
.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7-list-item .wpcf7-list-item-label,
.drawing-page [type="checkbox"] + label {
    display: inline-block;
    margin-left: 5px;
    margin-top: 0;
}

.wpcf7-radio label,
.wpcf7-checkbox label {
    margin: 0;
}

.reset-dropdowns,
.btn-grey {
    display: block;
    font-size: 14px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    height: 41px;
    line-height: 41px;
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-top: 29px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.reset-dropdowns .icon-refresh {
    position: relative;
    margin-right: 2px;
    top: 1px;
    opacity: .4;
}

.btn-grey span:before {
    position: relative;
    margin-right: 4px;
    top: 2px;
    font-size: 17px;
}


.reset-dropdowns:hover,
.btn-grey:hover {
    background: #e4e4e4;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-grey:hover {
    text-decoration: none;
}

.reset-dropdowns:hover .icon-refresh {
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


/* Locked Styling */
.locked .reset-dropdowns{
    display: none;
}

.form-locked-msg {
    background-color: #052540;
    color: #fff;
    border: #e7e7e7 solid 1px;
    padding: 25px 20px;
    font-size: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.form-locked-msg:before {
    display: block;
    width: 100%;
    background: rgba(255,255,255,.1);
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 2px;
    content: "\e911";
    font-size: 20px;
    display: block;
    font-family: 'opp-orders' !important;
    padding-right: 22px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.locked input[type="submit"],
.locked input,
.locked .selectric-wrapper,
.locked .wpcf7-field-groups a,
.locked form,
.locked .wpcf7-list-item,
.locked .wpcf7-list-item-label,
.locked .btn-primary:not(.next-section),
.locked button {
    cursor: not-allowed !important;
}

.locked input[type="email"],
.locked input[type="text"],
.locked .selectric,
.locked .selectric .label,
.locked .selectric .button {
    background-color: #ececec;
    color: rgba(5,37,64,.7);
}

.locked input,
.locked .selectric-wrapper {
    opacity: .8;
}

.locked .btn-primary:not(.next-section),
.locked input[type="submit"],
.locked button,
.locked label,
.locked #wpcf7_payment-signature_clear {
    opacity: .4;
}


.locked input[type="submit"]:hover,
.locked .btn-primary:hover, #confirm-color-selection input:hover,
.locked .wpcf7-submit:hover {
    background-color: #ed162a;
}

.locked .wpcf7-form-control-signature-wrap {
    background-color: #F5F5F5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.locked .wpcf7-form-control-signature-wrap:before,
.locked .wpcf7-form-control-signature-wrap:after {
    color: rgba(5,37,64,.39);
    font-weight: bolder;
}

.locked .wpcf7-form-control-signature-wrap:before {
    content: "\e911";
    font-size: 20px;
    display: block;
    font-family: 'opp-orders' !important;
    margin-bottom: 15px;
}

.locked .wpcf7-form-control-signature-wrap:after {
    content: "TEMPORARILY LOCKED BY sales representative";
    text-transform: uppercase;
    font-size: 13px;
    display: block;
}

.locked #wpcf7_payment-signature_clear:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
}

@media (min-width: 768px) {
    .form-locked-msg {

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .form-locked-msg:before {
        width: auto;
        background: none;
        text-align: left;
        margin-bottom: 0;
        border-radius: 0;
    }
}

/* locked styling end*/


.form-note {
    font-size: 14px;
}

.form-callout-box {
    background: #f5f5f5;
    padding: 10px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 15px;
}

.form-callout-box + .form-callout-box {
    margin-top: 15px;
}

.form-callout-box--red {
    background: #a20c1a;
    color: #fff;
}

.form-callout-box .callout-icon {
    font-size: 30px;
    padding-right: 17px;
    display: none;
}

@media (min-width: 768px) {
    .form-callout-box .callout-icon {
        display: inline-block;
    }
}

@media (min-width: 1025px) {
    label,
    .wpcf7-list-item-label {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .label-reset .label-left,
    .label-reset .label-right {
        width: auto;
    }

    label,
    .wpcf7-list-item-label {
        font-size: 18px;
    }
}

#tax-exemption-certificate {
    display: none;
}

.toggle-tax-exempt-wrapper .is-tax-exempt input:last-of-type{
    margin-left:25px;
}


/*---------------------------------*
Selectric
*---------------------------------*/

.selectric-wrapper {
    position: relative;
    cursor: pointer;
}

.selectric-responsive {
    width: 100%;
}

.selectric {
    border: 1px solid #d7d7d7;
    border-radius: 0px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.selectric .label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    margin: 0 37px 0 17px;
    font-size: 15px;
    line-height: 48px;
    color: #052540;
    height: 48px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.selectric .button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 37px;
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    color: #d7d7d7;
    text-align: center;
    font: 0/0 a;
    *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial;
}

.selectric .button:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    height: 42px;
    width: 1px;
    background: #d7d7d7;
}

.selectric .button:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #d7d7d7;
    border-bottom: none;
}

.selectric-focus .selectric {
    border: 1px solid #052540;
    outline: 1px solid #052540;
}

.selectric-hover .selectric {
    border: 1px solid #d7d7d7;
}

.selectric-hover .selectric .button {
    color: #a2a2a2;
}

.selectric-hover .selectric .button:after {
    border-top-color: #a2a2a2;
}

.selectric-open {
    z-index: 9999;
}

.selectric-open .selectric {
    border: 1px solid #052540;
    outline: 1px solid #052540;
}

.selectric-open .selectric-items {
    display: block;
    border: 1px solid #052540;
    outline: 1px solid #052540;
}

.selectric-below.selectric-open .selectric-items { border-top: none; }

.selectric-above.selectric-open .selectric-items { border-bottom: none; }

.selectric-disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.selectric-hide-select {
    position: relative;
    overflow: hidden;
    width: 0;
    height: 0;
}

.selectric-hide-select select {
    position: absolute;
    left: -100%;
}

.selectric-hide-select.selectric-is-native {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.selectric-hide-select.selectric-is-native select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
    z-index: 1;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    opacity: 0;
}

.selectric-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    outline: none !important;
    border: none !important;
    *font: 0/0 a !important;
    background: none !important;
}

.selectric-temp-show {
    position: absolute !important;
    visibility: hidden !important;
    display: block !important;
}

/* Items box */
.selectric-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #F8F8F8;
    border: 1px solid #c4c4c4;
    z-index: -1;
    -webkit-box-shadow: 0 0 10px -6px;
            box-shadow: 0 0 10px -6px;
}

.selectric-items .selectric-scroll {
    height: 100%;
    overflow: auto;
}

.selectric-above .selectric-items {
    top: auto;
    bottom: 100%;
}

.selectric-items ul, .selectric-items li {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    min-height: 20px;
}

.selectric-items li {
    background: #fff;
    display: block;
    padding: 10px 17px;
    color: #052540;
    cursor: pointer;
}

.selectric-items li.selected {
    background: #f5f5f5;
}

.selectric-items li.highlighted {
    background: #f5f5f5;
}

.selectric-items li:hover {
    background: #f5f5f5;
}

.selectric-items .disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default !important;
    background: none !important;
    color: #666 !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.selectric-items .selectric-group .selectric-group-label {
    font-weight: bold;
    padding-left: 10px;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: none;
    color: #444;
}

.selectric-items .selectric-group.disabled li {
    filter: alpha(opacity=100);
    opacity: 1;
}

.selectric-items .selectric-group li {
    padding-left: 25px;
}

/*---------------------------------*
Selectric END
*---------------------------------*/



/* CF7 Validation (Replace if not using CF7) */

/* Individual field error messages */
form .wpcf7-not-valid-tip {
    color: #ed152a;
    font-style: normal;
    font-size: 13px;
    display: block;
}

/* Entire form error message */
form.invalid .wpcf7-response-output {
    color: #ed152a;
    font-style: none;
    font-size: 13px;
    margin-top: 20px;
    border: 1px solid #ed152a;
    background-color: rgba(237, 21, 42,.15);
    padding: 10px;
}

form.sent .wpcf7-response-output {
    border-color: #cde3c3;
    background-color: #def0be;
    color: #000000;
    font-style: none;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px;
    display: block;
    width: 100%;
    font-size: 15px;
    padding: 5px;
    text-align: center;
}

.drawing-page .page-approved-status .pdf-page-approved-msg,
.drawing-page .page-approved-status .pdf-page-disapproved-msg {
    position: relative;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    padding-left: 35px;
    text-align: center;
}

.drawing-page .page-approved-status .pdf-page-disapproved-msg {
    color: #ed162a;
    border: 1px solid #ed162a;
    background-color: rgba(237, 21, 42,.05);
}

.drawing-page .page-approved-status .pdf-page-approved-msg {
    color: #229653;
    border: 1px solid #229653;
    background-color: rgba(34, 150, 83, .06);
}

.page-approved-status .pdf-page-disapproved-msg:before,
.page-approved-status .pdf-page-approved-msg:before {
    font-family: 'opp-orders' !important;
    content: "\e916";
    position: absolute;
    top: 0px;
    left: 0;
    display: block;
    font-size: 20px;
    width: auto;
    padding: 11px;
    color: #fff;
}

.page-approved-status .pdf-page-disapproved-msg:before {
    content: "\e916";
    background: #ed162a;
}

.page-approved-status .pdf-page-approved-msg:before {
    content: "\e915";
    background: #229653;
}


.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 6px solid purple;
}

@media (min-width: 768px) {
    .drawing-page .page-approved-status .pdf-page-approved-msg,
    .drawing-page .page-approved-status .pdf-page-disapproved-msg {
        padding: 20px;
        font-size: 18px;
        font-weight: 600;
        padding-left: 35px;
    }

    .page-approved-status .pdf-page-disapproved-msg:before,
    .page-approved-status .pdf-page-approved-msg:before {
        padding: 22px;
    }
}

/* Styling for fields that have errors */
select.wpcf7-not-valid,
textarea.wpcf7-not-valid,
input.wpcf7-not-valid,
.wpcf7-not-valid .selectric {
}



/**
 * Breadcrumbs
 */

.breadcrumbs {
    border-bottom: #e7e7e7 solid 1px;
}

.breadcrumb:first-child {
    padding-left: 0;
}

.breadcrumb {
    padding: 7px 10px;
    display: inline-block;
    border-right: #e7e7e7 solid 1px;
    text-transform: uppercase;
    color: #052540;
    font-size: 15px;
    font-weight: 500;
}

.breadcrumb.active {
    font-weight: 600;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding: 7px 14px;
    }
}



/**
 * Pagination
 */

.wp-pagenavi {
    margin-top: 50px;
}

.wp-pagenavi .pages {
    border: 0;
    margin-left: 0;
    padding-left: 0;
}

.wp-pagenavi span.current,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 6px 11px;
}

.wp-pagenavi span.current {
    background-color: #ddd;
    border-color: #ddd;
}

@media (min-width: 1025px) {

    .wp-pagenavi { margin-top: 70px; }

}



/**
 * Sliders/Carousels
 * Slick Slider - http://kenwheeler.github.io/slick/
 */

/* General styling */

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-slide,
.slick-arrow,
.slick-dots button,
.slick-slide:focus * {
    outline: none !important;
}

.slick-initialized .slick-slide {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

/* Preload affect */

.slick-slider .slide { display: none; }

.slick-slider .slide:first-child { display: block; }

.slick-slider.slick-initialized .slide { display: block; }

.js-slider-has-preloader { /* Add this class to your slider */
    min-height: 50px;
    position: relative;
}

.js-slider-has-preloader:before {
    content: url('../img/loading.gif'); /* Create and upload a loading gif to your image directory */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px; /* Update width based on gif size */
    height: 50px; /* Update height based on gif size */
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.js-slider-has-preloader-init:before {
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}


/* Slick Dots */

.slick-dots {
    padding: 0;
    margin: 0;
    list-style: none;
}

.slick-dots li {
    display: inline-block;
    cursor: pointer;
}

.slick-dots li:only-child { display: none; }

.slick-dots li button {
    display: block;
    cursor: pointer;
    outline: none;
}





/*---------------------------------*
Magnific
*---------------------------------*/

.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
          box-shadow: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
        transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    -ms-transform-origin: 0;
        transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    -ms-transform-origin: 100%;
        transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.mfp-bg {
    z-index: 1;
}

/*---------------------------------*
Magnific End
*---------------------------------*/

/* Magnific Custom */

@media (min-width: 600px) {
    .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
        height: 90.5vh;
        margin-top: 30px;
    }

    .mfp-iframe-holder .mfp-content {
         max-width: 98%;
    }
}


 /**
 * Posts
 * Used on blog, category, archive and search results pages
 */

.post-item {
    border-top: 1px solid #ddd;
    padding-top: 30px;
    margin-top: 30px;
}

.post-item:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.post-item__heading a {
    text-decoration: none;
}

.post-item .btn,
.post-item .btn-primary {
    margin-top: 30px;
}

.post-item__meta {
    font-size: .8em;
}

@media (min-width: 1025px) {

    .post-item {
        padding-top: 50px;
        margin-top: 50px;
    }

}




/**
 * Tabs
 * In use on search.php template by default.
 * Use as base for any other tabs on the site.
 */

.tabs {
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0;
}

.tabs:before,
.tabs:after {
    content: '';
    display: table;
}

.tabs:after,
.tab-content:after {
    clear: both;
}

.tab {
    list-style-type: none !important;
    margin: 0 5px -1px 0;
    padding: 0;
    float: left;
}

.tab > a {
    display: block;
    padding: 10px 35px;
    text-decoration: none;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 1px 1px 0 0;
    color: inherit;
    font-weight: bold;
}

.tab-active > a {
    border-bottom: 1px solid #fff;
}

.tab-active > a,
.tab:hover > a,
.tab:focus > a {
    color: inherit;
    background: #fff;
    text-decoration: none;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    display: none;
}




/* --------------------------------------------------*\
    UI
    UI peices are site specific non generic styles.
    eg: header, footer, sidebar, page specific styles
\* -----------------------------------------------------*/

/**
 * Page-head
 */


.page-header {
    padding-top: 0;
    padding-bottom: 13px;
    border-bottom: #e7e7e7 solid 1px;
    background-color: #fff;
}

.page-header .links {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.header-language {
    display: block;
    background-color: #ec152a;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em;
    height: 41px;
    line-height: 41px;
    text-align: center;
    width: 100%;
}

.header-language:hover {
    background-color: #a20c1a;
    color: #fff;
    text-decoration: none;
}

.header-phone {
    display: block;
    width: 100%;
    background-color: #002440;
    color: #fff;
    text-align: center;
    height: 41px;
    line-height: 41px;
}

.header-phone:hover {
    color: #fff;
}

.logos {
    width: 100%;
    margin-top: 13px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.logo-main {
    margin-right: 20px;
}

.logo-main img {
    width: 175px;
    height: auto;
}

.logo-sub span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    color: #666;
    display: inline-block;
    float: right;
    line-height: 12px;
}



@media (max-width: 1024px) {
    .logos {
        width: 100%;
    }
}

@media( min-width: 1025px ) {
    .page-header {
        padding-top: 11px;
        padding-bottom: 13px;
        border-bottom: #e7e7e7 solid 1px;
        background-color: #fff;
    }

    .page-header--sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .logos {
        margin-top: 0;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    .logo-main {
        margin-right: 60px;
    }

    .logo-main img {
        width: 225px;
        height: auto;
    }

    .header-phone {
        display: inline-block;
        margin-right: 12px;
        color: #ed162a;
        background-color: transparent;
        width: auto;
    }

    .header-phone:hover {
        color: #a20c1a;
    }

    .header-language {
        width: auto;
        display: inline-block;
        padding: 11px 25px;
        background-color: #ec152a;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .1em;
        height: auto;
        line-height: normal;
    }
}

/* Fix sticky header position for when admin bar visible
   TODO: Uncomment if design has sticky header */

/* .admin-bar .page-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .page-header {
        top: 46px;
    }
} */

@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), (-webkit-min-device-pixel-ratio: 2) and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (max-width: 1024px) {

    /* TODO: Add Retina-specific logo here - see instructions https://webpagefx.mangoapps.com/mlink/wiki/NjA3Nzg */

}


@media( min-width: 1025px ) {
    .sticky-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 125px; /* TODO: update to match how far down page when sidebar should stick */
    }
}



/**
 * Navigation
 */

.nav-primary {
}



/**
 * Masthead
 */

.masthead {
    background-color: #f5f5f5;
}

.masthead h1 {
    color: #052540;
    text-transform: uppercase;
    font-size: 32px;
}

.page-content {
    margin-top: 63px;
    margin-bottom: 78px;
    /*min-height: calc(100vh - 100px);*/
}

.main-content {
    margin-bottom: 54px;
}

.section-headline {
    color: #052540;
    margin-top: 0px;
    font-size: 30px;
    text-transform: none;
    border-bottom: #e7e7e7 solid 1px;
    padding-bottom: 4px;
}

@media (min-width: 1025px) {
    .masthead h1 {
        font-size: 62px;
    }

    .error404 .masthead h1 { font-size: 52px; }

    .job-num {
        font-size: 39px;
    }

    .page-content {
        margin-top: 36px;
        margin-bottom: 30px;
    }

    .page-content {
        min-height: calc(100vh - 516px);
    }

    .admin-bar .page-content {
        min-height: calc(100vh - 548px);
    }
}


/**
 * Sidebar
 */


/* Blog */

.blog .page-sidebar .widget {
    margin-bottom: 50px;
}



/**
 * Page-footer
 */

.page-footer {
    border-top: #f5f5f5 solid 1px;
    font-size: 12px;
    padding-top: 30px
}

.footer-menu a {
    text-transform: uppercase;
    font-weight: 500;
    word-break: normal;
    color: #002540;
    letter-spacing: 1px;
    font-size: 11px;
}

.footer-menu a:hover {
    font-weight: 700
}

.color-btns a,
.footer-info,
.footer-menu li,
.page-footer-sub li {
    display: inline-block
}

.footer-logos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.logo-footer {
    width: 180px
}

.footer-info {
    margin: 5px 0;
    width: 100%;
    text-align: center;
}

.footer-info a {
    color: #0061a5
}

.footer-info a:hover {
    color: #3bb88d
}

.footer-social-media {
    font-size: 35px;
    margin-top: 8px
}

.footer-social-media a:hover {
    text-decoration: none;
}

.footer-menu {
    margin: 15px 0;
    padding: 0
}

.footer-menu ul {
    padding: 0
}

.footer-menu li {
    width: calc(50% - 12px);
    vertical-align: top;
    padding-bottom: 5px;
    padding-top: 5px;
    border-top: #f5f5f5 solid 1px;
    line-height: 1.3em;
}

.footer-menu li:nth-child(odd) {
    margin-right: 20px;
}

.footer-logo .lowes-portal {
    color: #002540;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}

.page-footer-sub {
    background-color: #002540;
    padding: 12px 0;
    margin-top: 20px;
    color: #fff
}

.page-footer-sub ul {
    margin: 0 0 5px;
    padding: 0;
    text-align: center;
}

.page-footer-sub li {
    list-style: none
}

.page-footer-sub li:after {
    content: '|';
    margin: 0 3px 0 5px
}

.page-footer-sub li:last-child:after {
    content: ''
}

.page-footer-sub a {
    color: #fff;
    font-weight: 500;
}

.page-footer-sub a:hover {
    color: #3bb88d
}

.logo-social-footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            -ms-flex-direction: row;
        flex-direction: row;
    -webkit-box-pack: justify;
            -ms-flex-pack: justify;
        justify-content: space-between;
}

.logo_and_phone {
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            -ms-flex-direction: column;
        flex-direction: column;
}

.footer-phone a, .footer-email a {
    color: #0061a5;
}

.footer-phone a:hover, .footer-email a:hover {
    color: #3bb88d;
}

.footer-logos-tablet {
    width: 100%;
    margin-top: 30px;
}

.footer-info .switcher {
    margin: 0 auto;
    z-index: 0;
    position: relative;
}

.copyright { text-align: center; }

@media (max-width: 480px) {
    .logo-social-footer-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                -ms-flex-direction: column;
            flex-direction: column;
    }
}

@media (min-width:767px) {
    .footer-info {
        width: calc(50% - 15px);
        margin-left: 15px
    }
    .footer-menu {
        margin-top: 0
    }
    .footer-logos-sm {
        list-style: none;
        margin: 0;
        padding: 0
    }
    .footer-logos-sm li {
        float: left;
        width: 48%
    }
    .footer-logos-sm img {
        width: 90px
    }
    .page-footer img {
        float: left
    }
    .copyright {
        text-align: right
    }
    .page-footer-sub ul {
        margin: 0;
        text-align: left;
    }

    .logo_and_phone {
        width: 50%;
        text-align: left;
    }

    .footer-info { text-align: left; }

    .footer-info .switcher { margin: 0 0; }

    .footer-logos { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
}

@media (min-width:1025px) {
    .page-footer { width: 100%; }

    .footer-blocks { margin-bottom: 70px; }

    .footer-social-media {
        font-size: 25px;
        margin-top: 0;
    }

    .footer-menu { margin-left: 50px; }

    .logo-footer { width: 192px; }

    .footer-logos { text-align: right; }

    .footer-logos img {
        max-width: 100%;
        float: none;
    }
}




/**
 * Global
 */


@media(min-width: 480px) {

    .promotions-bar__text {
        font-size: 14px;
    }

}

@media(min-width: 768px) {

    .promotions-bar {
        padding: 5px 25px;
    }

    .promotions-bar__text {
        padding: 7px 20px;
        font-size: 16px;
    }

    .promotions-bar__text {
        width: 100%;
    }

}

/* Quick Link Aside */

.quick-links h1,
.quick-link h2 {
    background: #f5f5f5;
    text-align: center;
    text-transform: uppercase;
    color: #052540;
}

.quick-links {
    background: #f5f5f5;
    padding: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.quick-links h1 {
    font-size: 25px;
    width: 100%;
    letter-spacing: .06em;
}

.quick-link {
    width: 100%;
    background: #f5f5f5;
    -webkit-box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
            box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
    border: 1px solid #e6e6e6;
    font-size: 25px;
    text-align: center;
    color: #052540;
    list-style-type: none;
    margin: 16px auto;
    padding: 21px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    max-width: 207px;
}

.quick-link:hover {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.47);
            box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.47);
}


.quick-link h2 {
    font-size: 18px;
    margin-top: 7px;
    margin-bottom: 7px;
    line-height: 1.2em;
}

.quick-link h2 .icon-cheveron-right {
    position: relative;
    top: 4px;
    left: -5px;
}

.quick-link h2 .icon-cheveron-right:before {
    font-size: 22px;
    line-height: 18px;
}

.quick-link > a {
    height: 100%;
    text-decoration: none;
    word-break: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-weight: 500;
}

.quick-link__img span {
    display: inline-block;
}

.quick-link__img span:before {
    font-size: 60px;
    color: #052540;
}

.quick-link__img span.icon-delivery {
    height: 60px;
    position: relative;
    overflow: hidden;
}

.quick-link__img span.icon-delivery:before {
    font-size: 86px;
    position: relative;
    top: -12px;
}

.quick-link__img span.icon-payment:before { font-size: 56px; }

.quick-link__img span.icon-drawing:before { font-size: 64px; }

.section-status {
    margin-top: auto;
    display: block;
    width: 100%;
    font-size: 15px;
    padding: 5px;
    text-align: center;
    border: 1px solid;
}

.section-status.progress {
    border-color: #f1df8c;
    background-color: #fcf2c3;
    color: #5e5e5e
}

.section-status.complete {
    border-color: #cde3c3;
    background-color: #def0be;
    color: #000000;
}

.section-status.open {
    border-color: #ffc1a9;
    background-color: #f0ccbe;
    color: #181818;
}

.section-status.pending {
    background-color: #ECEEF1;
    border: 1px solid #dadada;
}

.quick-link-section {
    position: relative;
}

@media (min-width: 768px) {
    .quick-link {
        width: calc(50% - 46px);
        margin: 16px 23px;
        max-width: none;
    }
}

@media (max-width: 1024px) {

    .quick-link .delivery-link br {
        display: none;
    }

    .quick-links {
        padding: 5px 10px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .quick-links h1 {
        font-size: 18px;
        background: #fff;
        margin-top: 0;
        display: none;
    }

    .section-headline {
        border-bottom: none;
        margin-top: 15px;
    }

    .quick-link h2,
    .section-status {
        font-size: 12px; 
        background: none;
    }

    .quick-link {
        background: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        color: #052540;
        list-style-type: none;
        margin: 5px auto;
        padding: 5px;
        max-width: 50%;
    }

    .quick-link__img {
        height: 40px;
    }

    .quick-link__img span.icon-selection:before,
    .quick-link__img span.icon-payment:before,
    .quick-link__img span.icon-drawing:before {
        font-size: 40px;
    }

    .quick-link__img span.icon-delivery:before {
        top: 0;
        font-size: 50px;
    }

    .quick-link h2 .icon-cheveron-right:before {
        font-size: 20px;
    }

    .quick-link-section {
        margin-bottom: 30px;
        margin-right: 30px;
    }

    .quick-link-section p {
        font-size: 14px;
        margin: 0;
        background: #f5f5f5;
        padding: 0 0 15px;
    }

    .page-content {
        margin-top: 0px;
        margin-bottom: 30px;
    }

    .quick-link:hover {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

}

@media (max-width: 767px) {

    .quick-link-section {
        margin-right: 0;
    }

}

/**
 * Page Styling
 */


/* Color Selection */

.color-preview {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.color-preview > .swatch-group,
.color-preview > .video-group {
    width: 100%;
}

.wpcf7-form-control-wrap #multiple-rooms {
    display: flex;
    margin-bottom: 20px;
}

.wpcf7-form-control-wrap #multiple-rooms .wpcf7-list-item-label { font-weight: normal; }

.wpcf7-form-control-wrap #multiple-rooms .wpcf7-list-item.first { margin-right: 20px; }

.swatch-wrap {
    position: relative;
/*    border: 2px solid green;*/
    width: 100%;
    height: calc(100% - 40px);
}

.swatch-wrap .swatch {
    height: 100% !important;
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    -o-object-position: center center;
    object-position: center center;
}

.swatch-label,
.video-label {
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 2px;
    width: 100%;
    height: 20px;
    display: block;
}

#confirm-color-selection {
    margin-bottom: 55px;
    margin-top: 20px;
}

#confirm-color-selection .wpcf7-submit{
    width: 100%;
}

.swatch-group img {
    width: 100% !important;
    height: auto !important;
    border: #e7e7e7 solid 1px;
}

.selectric-color-dropdown li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.color-option-swatch {
    margin-right: 10px;
}

.color-option-swatch {
    height: 25px;
    width: 35px;
    border: 1px solid #e7e7e7;
}

.mfp-wrap {
    z-index: 100;
}

.video-group .popup-video {
    display: inline-block;
    position: relative;
    height: auto;
    overflow: hidden;
}

.video-group img {
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    width: 100%;
    height: auto;
}

    .video-group .popup-video:hover img {
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
                transform: scale(1.04);
    }

.video-group .popup-video:before {
    content:'';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    left: 0;
    top: 0;
    z-index: 1;
}

.video-group .popup-video:after {
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 15px 0 15px 20px;
    border-color: transparent transparent transparent #ffffff;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin-top:-15px;
    margin-left: -7.5px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.video-group .popup-video:hover:after {
    opacity: .6;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.loading {
    position: relative;
}

.loading:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    z-index: 10;
/*    border: 2px solid green;*/
}

.loading:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -27px;
    left: 50%;
    margin-left: -27px;
    width: 54px; /* Update width based on gif size */
    height: 54px; /* Update height based on gif size */
    background-color: transparent;
    background-image: url(../img/form-loading.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 11;
/*    border: 2px solid pink;*/
}

.js-slider-has-preloader:before {
    content: url('../img/loading.gif'); /* Create and upload a loading gif to your image directory */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px; /* Update width based on gif size */
    height: 50px; /* Update height based on gif size */
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.js-slider-has-preloader-init:before {
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}

@media (min-width: 768px) {
    .color-selection-form .color-preview > .swatch-group img,
    .color-selection-form .color-preview > .video-group img {
        margin-bottom: 35px;
    }

    .swatch-group img {
        width: auto !important;
        height: 115px !important;
    }

    .video-group .popup-video {
        display: inline-block;
        position: relative;
        height: 115px;
        overflow: hidden;
    }

    .video-group img {
        width: auto;
        height: 115px;
    }

    .color-selection-form .swatch-label,
    .color-selection-form .video-label {
        margin-top: 29px;
    }

    .color-preview > .swatch-group,
    .color-preview > .video-group {
        width: auto;
    }

    .color-preview > .swatch-group {
        margin-right: 2%;
    }
}

@media (min-width: 1025px) {
    .color-preview > .swatch-group,
    .color-preview > .video-group {
        width: auto;
    }

    #confirm-color-selection {
        margin-bottom: 0px;
    }
}



/* Order Review */
.order-review {
    font-size: 18px;
}

.order-review__phone,
.order-review__email {
    margin-top: 14px;
    margin-bottom: 14px;
}

.order-review__phone a {
    color: #052540;
    font-weight: 500;
}

.order-review__phone a:hover { text-decoration: underline; }

.order-review__email a { text-decoration: underline; }

.order-review__phone span,
.order-review__email span,
.rep-contact span {
    color: #1961a8;
    position: relative;
    top: 2px;
    margin-right: 2px;
    display: inline-block;
}

.order-review__email {
    margin-bottom: 25px;
}

.order-review__email span {
    top: 3px;
    margin-right: 3px;
}

.order-review__order-link {
    margin-top: 10px;
    margin-left: 5px;
    display: inline-block;
    font-size: 15px;
}

.order-review__order-link:hover { text-decoration: none; }

.order-review__order-link b { text-decoration: underline; }

.order-review__order-link span {
    position: relative;
    top: 2px;
}

.order-review__amount-due { display: inline; }


/* Button */
.next-section {
    margin-top: 10px;
}


/* Drawing Page */
.drawing-page .drawing-approval + label {
    margin-top: 0;
    display: inline-block;
}

.drawing-page form .wpcf7-submit {
    width: 100%;
    background-color: #002440;
    margin-top: 20px;
}

.drawing-page .wpcf7-not-valid-tip {
    margin-top: 15px;
}

.comments-title {
    text-transform: none;
    margin-top: 0;

    margin-bottom: 0;
    background: #229653;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.comment {
    border: #e7e7e7 solid 1px;
    margin-bottom: 20px;
    background: #e7e7e7;
    padding: 6px 20px;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 4px solid #229653;
}

.comment-label { display: none; }

.comment-label,
.sm-label {
    font-size: 12px;
    font-weight: 600;
    color: #bcbcbc;
    text-transform: uppercase;
}

.rep-contact {
    background: #f5f5f5;
    padding: 20px;
    margin-top: 30px;
}


.pdf-container {
    margin-bottom: 30px;
}

.wpcf7-form-control-signature-wrap {
    width: 100% !important;
}

.btn-download {
    margin-bottom: 20px;
}

/* drawing review */
.prev-drawing-page {
    float: left;
}
.next-drawing-page {
    float: right;
}
.drawing-page {
    display: none;
}
.drawing-page.pdf-container {
    height: 100vh
}
.drawing-pdf-page {
    cursor: pointer;
};

#invalid-fields-box {
    padding: 0.35em 0.625em 0.75em;
}

.invalid-wrapper {
    position: relative;
    right: auto;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    overflow: hidden;
    z-index: 1;
    color: #fff;
    background: #ec152a;
/*    border: 2px solid #ec152a;*/
    -webkit-box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
    box-shadow: 0px 0px 17.1px 0.9px rgba(0, 0, 0, 0.17);
}

.invalid-wrapper span.icon-alert {
    margin-right: 15px;
    margin-left: 10px;
}

.invalid-wrapper span.icon-alert:before {
    margin-top: -2px;
    font-size: 30px;
    color: #fff;
}

#invalid-fields-box {
    margin-top: 20px;
}

#invalid-fields-box p {
    margin-bottom: 10px;
}

#invalid-fields-box a {
    color: #fff;
    text-decoration: underline;
    transition: all 0.3s ease;
    word-break: normal;
}

#invalid-fields-box a:hover {
    opacity: .75;
    transition: all 0.3s ease;
}

.validation-error-tip {
    display: block;
    color: #ed152a;
    font-style: none;
    font-size: 13px;
    margin-top: 20px;
}

.drawing-pdf-page {
    overflow: hidden;
}

.drawing-pdf-page object {
    width: 100%;
    height: auto;
    min-height: 32vh;
}

@media (min-width: 768px) {
    .drawing-pdf-page object {
        min-height: 32vh;
    }
}

@media (min-width: 900px) {
    .drawing-pdf-page object {
        min-height: 60vh;
    }
}

@media (min-width: 1025px) {
    .drawing-pdf-page {
        width: 100%;
        padding-top: 78%;
        position: relative;
    }

    .drawing-pdf-page object {
        width: 100%;
        max-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: auto;
        right: auto;
    }
}

/*@media (max-width: 400px) {
    .drawing-pdf-page object {
        width: auto;
    }
}*/


/* Room Review */
.room-review + .room-review {
    margin-top: 30px;
    border-top: #e7e7e7 solid 1px;
}

.room-review .video-group {
    width: 100%;
}

#color-selection-summary h1 {
    font-size: 24px;
}

#color-selection-summary .fluid-width-video-wrapper iframe {
    position: relative !important;
}

@media (min-width: 768px) {
    .room-review .video-group {
        width: 306px;
    }

    .room-review .video-group .fluid-width-video-wrapper {
        width: 209px;
        height: 115px;
        padding-top: 0 !important;
    }

    #color-selection-summary .fluid-width-video-wrapper iframe {
        position: absolute !important;
    }
}



/* Access Page */
.access-form, .request-access {
    max-width: 670px;
    margin: 0 auto;
}

.access-form .wpcf7-list-item .wpcf7-list-item-label {
    margin-top: 20px;
    margin-bottom: 20px;
}

.access-form input {
    margin-top: 6px;
}



/* Delivery */

.signer-phone-form-group .form-note {
    margin-bottom: 12px;
    display: block;
}

/*.loading-dock-form-group { position: relative; }

.loading-dock-form-group-note {
    position: absolute;
    bottom: 8px;
    left: 60px;
}

.loading-dock-form-group .wpcf7-not-valid-tip {
    position: absolute;
}*/


/* Payment/Billing */
.payment-due {
    font-size: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: #f5f5f5;
    border: #e7e7e7 solid 1px;
    padding: 10px 20px;
}

.payment-due b {
    font-size: 24px;
}

#payment-form .form-note {
    margin-top: 20px;
}

#payment-form .acceptance-397 {
    text-align: center;
    display: block;
    margin-top: 35px;
    margin-bottom: 5px;
}

.payment-method-button, .copy-address-button {
    width: 100%;
    position: relative;
    margin-bottom: 40px;
    font-size: 14px;
    padding: 16px 10px;
}

#payment-form input {
	transition: background-color 0.5s ease;
}

#payment-form .highlight {
	transition: background-color 0.5s ease;
	background-color: #fcf2c3;
	opacity: .75;
}
.payment-info-table {
    width: 100%;
}
.payment-info-table td {
    padding: 7px;
    border: 1px solid #e2e2e2;
    vertical-align: top;
}

@media (min-width: 600px) {
    .payment-method-button, .copy-address-button {
        font-size: 16px;
        padding: 16px 40px;
    }
}


@media (min-width: 768px) {
    .payment-due {
        padding: 10px 30px;
    }
}

.payment-method-selection {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.payment-method-selection button {
    width: 100%;
}

@media (min-width: 670px) {
    .payment-method-selection button {
        width: calc(50% - 7px);
        margin: 0 0 7px;
        margin-left: 0 !important;
    }
}

/* Payment Confirmed/Not Confirmed */
/* VERSION 1 */
/*#payment-method-button {
    width: calc(100% - 64px);
    position: relative;
    margin-bottom: 20px;
    margin-left: 64px;
}

#payment-method-button:before {
    font-family: 'opp-orders' !important;
    content: "\e917";
    font-weight: lighter;
    position: absolute;
    left: -64px;
    top: 0;
    height: 52px;
    width: 52px;
    line-height: 54px;
    display: block;
    font-size: 20px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    color: #cccccc;
    display: inline-block;
    margin-right: 20px;
}

#payment-method-button.confirmed:before {
    color: #fff;
    border-color: #229653;
    background-color: #229653;
}*/
/* VERSION 1 END */

#payment-method-button:before {
    font-family: 'opp-orders' !important;
    content: "\e916";
    position: absolute;
    left: 50%;
    margin-left: -190px;
    margin-left: -95px;
    top: 64px;
    display: block;
    color: red;
    font-size: 20px;
    width: auto;
}

#payment-method-button:after {
    content: "Payment not confirmed";
    position: absolute;
    left: 50%;
    margin-left: -70px;
    top: 64px;
    display: block;
    font-family: Open Sans;
    color: #052540;
    font-weight: lighter;
    font-size: 14px;
    text-transform: none;
    width: auto;
    display: block;
}

#payment-method-button.confirmed:before {
    content: "\e915";
    color: #229653;
    left: 50%;
    margin-left: -121px;
}

#payment-method-button.confirmed:after {
    content: "Payment method confirmed";
    color: #229653;
    font-weight: bold;
    margin-left: -98px;
}

@media (min-width: 460px) {
    #payment-method-button:after {
        content: "Your payment method has not been confirmed yet";
        margin-left: -167px;
    }

    #payment-method-button:before {
        margin-left: -190px;
    }
}


/* Payment Review */
.continue-to-payment-wrapper {
    display: block;
    text-align: center;
    padding: 20px;
}

.continue-to-payment-wrapper br {
    display: none;
}

.continue-to-payment-msg {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.5em;
}

.continue-to-payment-wrapper .next-section {
    min-width: 234px;
    text-align: center;
    width: 100%;
}

@media (min-width: 419px) {
    .continue-to-payment-wrapper br {
        display: block;
    }
}

@media (min-width: 1025px) {
    .continue-to-payment-wrapper {
        padding: 30px 60px;
    }

    .continue-to-payment-msg {
        margin-top: 0;
        font-size: 18px;
    }
}


/* Braintree CC Billing Info */
.braintree-sheet {
    border: 1px solid #d7d7d7;
    border-radius: 0px;
}

.braintree-sheet__header {
    border-bottom: 1px solid #d7d7d7;
}

.braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field .braintree-form__hosted-field {
    border-color: #ed152a;
}

.braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field {
    border: 1px solid #d7d7d7;
    height: 48px;
}

.braintree-heading,
.braintree-large-button {
    font-family: Open Sans;
    color: #052540;
    font-size: 15px;
    font-weight: 600;
}

.braintree-large-button {
    background: #f5f5f5;
    font-size: 15px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.braintree-large-button:hover {
    background: #dedcdc;
    font-size: 15px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media (min-width: 1025px) {
    .braintree-heading {
        font-size: 18px;
    }
}


/* Username Activation Page */
#activateform #submit {
    background-color: #ed162a;
    color: #fff;
    text-align: center;
    padding: 16px 40px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    letter-spacing: .03em;
    border: 0;
    font-size: 16px;
    font-weight: 600;
}

#activateform #submit:hover {
    transition: all 0.3s ease;
    background-color: #a20c1a;
}

.wp-activate-container{
    max-width: 670px;
    margin: 30px auto 40px auto;
}

.wp-activate-container h2{
    font-family: Lato, sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}

.wp-activate-container #key {
    font-size: width: 100%;
    font-size: 15px;
}

.wp-activate-container label + br {
    display: none;
}

@media (min-width: 1025px) {
    .wp-activate-container{
        margin: 80px auto 90px auto;
    }
}

/**
 * Print CSS
 */

@media print {

    /* Reset*/
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
                box-shadow: none !important;
        filter: none !important;
        -webkit-filter: none !important;
        text-shadow: none !important;
    }

    h2, h3 {
       /* Avoid a paragraph being detached from the heading immediately preceding it */
        page-break-after: avoid;
    }

    figure, table {
        /* Avoid breaking figure or table into 2 pages */
        -webkit-column-break-inside: avoid;
           -moz-column-break-inside: avoid;
                break-inside: avoid;
        page-break-inside: avoid;
    }

    p {
        /* Prevent single line at the end of a page and a single line at the top the next page */
        orphans: 2;
        widows: 2;
    }


    /* Grid Styling */

    .container,
    .wp-activate-container { width: auto; }

    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }

    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666666666666%; }
    .col-sm-10 { width: 83.33333333333334%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666666666666%; }
    .col-sm-7 { width: 58.333333333333336%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666666666667%; }
    .col-sm-4 { width: 33.33333333333333%; }
    .col-sm-3 { width: 25%; }
    .col-sm-2 { width: 16.666666666666664%; }
    .col-sm-1 { width: 8.333333333333332%; }


    /* Slick Slider - remove if not using slick slider */

    .slick-slider .slick-arrow,
    .slick-slider .slick-dots {
        display: none !important; /* we usually don't need to show slider navigation for print */
    }

    /* For sliders you want to display full width for print.
       Update ".slick-slider" with your specific slider names. */
    .slick-slider,
    .slick-sliderg .slick-list,
    .slick-slider .slick-track,
    .slick-slider .slick-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* For sliders where you only want to show the 1st image of that slider.
       Update ".slick-slider" with your specific slider names. */
    .slick-slider .slick-slide              { display: none !important; }
    .slick-slider .slick-slide.slick-active { display: block !important; }

    /* Show Only Active Thumbnails */
    .slick-slider .slick-cloned {
        display: none;
    }

    /* Reset adaptiveHeight */
    .slick-list {
        height: auto !important;
    }

   /* Remove Scrollbars */
    .slick-track {
        width: auto !important;
        height: auto !important;
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important;
    }

    .slick-track.slick-slide {
        width: auto !important;
    }


}





/*------------------------------------*\
    Trumps
\*------------------------------------*/

/*testing*/

.break-words {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}


/* Flexbox */
.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.flex-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


/* Object Fit */
.bg-img-container,
.fill-img-container { position: relative; }

.bg-img,
.fill-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    font-family: 'object-fit: cover;';
    -o-object-position: center center;
       object-position: center center;
}

.contain-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    font-family: 'object-fit: contain;';
    -o-object-position: center center;
       object-position: center center;
}

.bg-img-content {
    position: relative;
    z-index: 2;
}

.bg-img {
    z-index: 1;
}

input#purchase-order-btn,
input#tax-exemption-certificate-file {
    display: none;
}



/* Firefox */
@-moz-document url-prefix() {
    @media (min-width: 1025px) {
        .drawing-pdf-page {
            width: 100%;
            padding-top: 82%;
            position: relative;
        }
    }
}



@-ms-viewport { width: device-width; }


/**
 * Images
 */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


/**
 * Visiblity
 */

.show { display: block !important; }

.visible-xxs,
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg { display: none !important; }

.visible-xxs-block,
.visible-xxs-inline,
.visible-xxs-inline-block,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block { display: none !important; }

@media (max-width: 599px) {
    .visible-xxs      { display: block !important; }
    table.visible-xxs { display: table; }
    tr.visible-xxs    { display: table-row !important; }
    th.visible-xxs,
    td.visible-xxs    { display: table-cell !important; }

    .visible-xxs-block        { display: block !important; }
    .visible-xxs-inline       { display: inline !important; }
    .visible-xxs-inline-block { display: inline-block !important; }
}


@media (min-width: 600px) and (max-width: 767px) {
    .visible-xs      { display: block !important; }
    table.visible-xs { display: table; }
    tr.visible-xs    { display: table-row !important; }
    th.visible-xs,
    td.visible-xs    { display: table-cell !important; }

    .visible-xs-block        { display: block !important; }
    .visible-xs-inline       { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .visible-sm      { display: block !important; }
    table.visible-sm { display: table; }
    tr.visible-sm    { display: table-row !important; }
    th.visible-sm,
    td.visible-sm    { display: table-cell !important; }

    .visible-sm-block        { display: block !important; }
    .visible-sm-inline       { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .visible-md      { display: block !important; }
    table.visible-md { display: table; }
    tr.visible-md    { display: table-row !important; }
    th.visible-md,
    td.visible-md    { display: table-cell !important; }

    .visible-md-block        { display: block !important; }
    .visible-md-inline       { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
}

@media (min-width: 1200px) {
    .visible-lg      { display: block !important; }
    table.visible-lg { display: table; }
    tr.visible-lg    {  display: table-row !important; }
    th.visible-lg,
    td.visible-lg    { display: table-cell !important; }

    .visible-lg-block        { display: block !important; }
    .visible-lg-inline       { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
}


/**
 * Hiding
 */

.hide,
.hidden-xxs-up { display: none !important; }
.hidden       { display: none !important; visibility: hidden !important; }
.invisible    { visibility: hidden !important; }
.text-hide    {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@media (max-width: 599px) {
    .hidden-xxs { display: none !important; }
}

    @media (min-width: 600px) {
      .hidden-xs-up { display: none !important; }
    }

@media (min-width: 600px) and (max-width: 767px) {
    .hidden-xs { display: none !important; }
}

    @media (max-width: 767px) {
      .hidden-xs-down { display: none !important; }
    }

    @media (min-width: 768px) {
      .hidden-sm-up { display: none !important; }
    }

@media (min-width: 768px) and (max-width: 1024px) {
    .hidden-sm { display: none !important; }
}

    @media (max-width: 1024px) {
      .hidden-sm-down { display: none !important; }
    }

    @media (min-width: 1025px) {
      .hidden-md-up { display: none !important; }
    }

@media (min-width: 1025px) and (max-width: 1199px) {
    .hidden-md { display: none !important; }
}

    @media (max-width: 1199px) {
      .hidden-md-down { display: none !important; }
    }

@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
}




/**
 * Screen Readers
 */

.sr-only,
.screen-reader-text,
.wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}




/**
 * Print
 */

.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block { display: none !important; }

@media print {
    .visible-print      { display: block !important; }
    table.visible-print { display: table; }
    tr.visible-print    { display: table-row !important; }
    th.visible-print,
    td.visible-print    { display: table-cell !important; }

    .visible-print-block        { display: block !important; }
    .visible-print-inline       { display: inline !important; }
    .visible-print-inline-block { display: inline-block !important; }

    .hidden-print { display: none !important; }
}


/**
 * Text alignment
 */

.text-left     { text-align:left  !important; }
.text-center   { text-align:center!important; }
.text-right    { text-align:right !important; }


/**
 * Positioning
 */

.affix-top    { position: fixed!important; top:    0!important; }
.affix-bottom { position: fixed!important; bottom: 0!important; }
.affix-left   { position: fixed!important; left:   0!important; }
.affix-right  { position: fixed!important; right:  0!important; }

.pull-right { float: right!important; }
.pull-left  { float: left !important; }

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* TODO: Update pushes, flushes, softs, and hards to match your vertical rhythm */

/**
 * Add/remove margins
 */

.push          { margin:       20px!important; }
.push-top      { margin-top:   20px!important; }
.push-right    { margin-right: 20px!important; }
.push-bottom   { margin-bottom:20px!important; }
.push-left     { margin-left:  20px!important; }
.push-ends     { margin-top:   20px!important; margin-bottom:20px!important; }
.push-sides    { margin-right: 20px!important; margin-left:  20px!important; }

.push-half         { margin:       10px!important; }
.push-half-top     { margin-top:   10px!important; }
.push-half-right   { margin-right: 10px!important; }
.push-half-bottom  { margin-bottom:10px!important; }
.push-half-left    { margin-left:  10px!important; }
.push-half-ends    { margin-top:   10px!important; margin-bottom:10px!important; }
.push-half-sides   { margin-right: 10px!important; margin-left:  10px!important; }

.flush         { margin:       0!important; }
.flush-top     { margin-top:   0!important; }
.flush-right   { margin-right: 0!important; }
.flush-bottom  { margin-bottom:0!important; }
.flush-left    { margin-left:  0!important; }
.flush-ends    { margin-top:   0!important; margin-bottom:0!important; }
.flush-sides   { margin-right: 0!important; margin-left:  0!important; }


/**
 * Add/remove paddings
 */
.soft          { padding:       20px!important; }
.soft-top      { padding-top:   20px!important; }
.soft-right    { padding-right: 20px!important; }
.soft-bottom   { padding-bottom:20px!important; }
.soft-left     { padding-left:  20px!important; }
.soft-ends     { padding-top:   20px!important; padding-bottom:20px!important; }
.soft-sides    { padding-right: 20px!important; padding-left:  20px!important; }

.soft-half          { padding:       10px!important; }
.soft-half-top      { padding-top:   10px!important; }
.soft-half-right    { padding-right: 10px!important; }
.soft-half-bottom   { padding-bottom:10px!important; }
.soft-half-left     { padding-left:  10px!important; }
.soft-half-ends     { padding-top:   10px!important; padding-bottom:10px!important; }
.soft-half-sides    { padding-right: 10px!important; padding-left:  10px!important; }

.hard          { padding:       0!important; }
.hard-top      { padding-top:   0!important; }
.hard-right    { padding-right: 0!important; }
.hard-bottom   { padding-bottom:0!important; }
.hard-left     { padding-left:  0!important; }
.hard-ends     { padding-top:   0!important; padding-bottom:0!important; }
.hard-sides    { padding-right: 0!important; padding-left:  0!important; }


@media (min-width:600px) {

    .flush-xs         { margin:       0 !important; }
    .flush-xs-top     { margin-top:   0 !important; }
    .flush-xs-right   { margin-right: 0 !important; }
    .flush-xs-bottom  { margin-bottom:0 !important; }
    .flush-xs-left    { margin-left:  0 !important; }
    .flush-xs-ends    { margin-top:   0 !important; margin-bottom:0 !important; }
    .flush-xs-sides   { margin-right: 0 !important; margin-left:  0 !important; }

    .push-xs          { margin:       20px !important; }
    .push-xs-top      { margin-top:   20px !important; }
    .push-xs-right    { margin-right: 20px !important; }
    .push-xs-bottom   { margin-bottom:20px !important; }
    .push-xs-left     { margin-left:  20px !important; }
    .push-xs-ends     { margin-top:   20px !important; margin-bottom:20px !important; }
    .push-xs-sides    { margin-right: 20px !important; margin-left:  20px !important; }

    .push-half-xs         { margin:       10px !important; }
    .push-half-xs-top     { margin-top:   10px !important; }
    .push-half-xs-right   { margin-right: 10px !important; }
    .push-half-xs-bottom  { margin-bottom:10px !important; }
    .push-half-xs-left    { margin-left:  10px !important; }
    .push-half-xs-ends    { margin-top:   10px !important; margin-bottom:10px !important; }
    .push-half-xs-sides   { margin-right: 10px !important; margin-left:  10px !important; }

    .push-double-xs         { margin:       40px !important; }
    .push-double-xs-top     { margin-top:   40px !important; }
    .push-double-xs-right   { margin-right: 40px !important; }
    .push-double-xs-bottom  { margin-bottom:40px !important; }
    .push-double-xs-left    { margin-left:  40px !important; }
    .push-double-xs-ends    { margin-top:   40px !important; margin-bottom:40px !important; }
    .push-double-xs-sides   { margin-right: 40px !important; margin-left:  40px !important; }

    .push-triple-xs         { margin:       60px !important; }
    .push-triple-xs-top     { margin-top:   60px !important; }
    .push-triple-xs-right   { margin-right: 60px !important; }
    .push-triple-xs-bottom  { margin-bottom:60px !important; }
    .push-triple-xs-left    { margin-left:  60px !important; }
    .push-triple-xs-ends    { margin-top:   60px !important; margin-bottom:60px !important; }
    .push-triple-xs-sides   { margin-right: 60px !important; margin-left:  60px !important; }

    .soft-xs          { padding:       20px !important; }
    .soft-xs-top      { padding-top:   20px !important; }
    .soft-xs-right    { padding-right: 20px !important; }
    .soft-xs-bottom   { padding-bottom:20px !important; }
    .soft-xs-left     { padding-left:  20px !important; }
    .soft-xs-ends     { padding-top:   20px !important; padding-bottom:20px !important; }
    .soft-xs-sides    { padding-right: 20px !important; padding-left:  20px !important; }

    .soft-half-xs          { padding:       10px !important; }
    .soft-half-xs-top      { padding-top:   10px !important; }
    .soft-half-xs-right    { padding-right: 10px !important; }
    .soft-half-xs-bottom   { padding-bottom:10px !important; }
    .soft-half-xs-left     { padding-left:  10px !important; }
    .soft-half-xs-ends     { padding-top:   10px !important; padding-bottom:10px !important; }
    .soft-half-xs-sides    { padding-right: 10px !important; padding-left:  10px !important; }

    .soft-double-xs          { padding:       40px !important; }
    .soft-double-xs-top      { padding-top:   40px !important; }
    .soft-double-xs-right    { padding-right: 40px !important; }
    .soft-double-xs-bottom   { padding-bottom:40px !important; }
    .soft-double-xs-left     { padding-left:  40px !important; }
    .soft-double-xs-ends     { padding-top:   40px !important; padding-bottom:40px !important; }
    .soft-double-xs-sides    { padding-right: 40px !important; padding-left:  40px !important; }

    .soft-triple-xs          { padding:       60px !important; }
    .soft-triple-xs-top      { padding-top:   60px !important; }
    .soft-triple-xs-right    { padding-right: 60px !important; }
    .soft-triple-xs-bottom   { padding-bottom:60px !important; }
    .soft-triple-xs-left     { padding-left:  60px !important; }
    .soft-triple-xs-ends     { padding-top:   60px !important; padding-bottom:60px !important; }
    .soft-triple-xs-sides    { padding-right: 60px !important; padding-left:  60px !important; }

    .hard-xs          { padding:       0 !important; }
    .hard-xs-top      { padding-top:   0 !important; }
    .hard-xs-right    { padding-right: 0 !important; }
    .hard-xs-bottom   { padding-bottom:0 !important; }
    .hard-xs-left     { padding-left:  0 !important; }
    .hard-xs-ends     { padding-top:   0 !important; padding-bottom:0 !important; }
    .hard-xs-sides    { padding-right: 0 !important; padding-left:  0 !important; }

}

@media (min-width:768px) {

    .flush-sm         { margin:       0 !important; }
    .flush-sm-top     { margin-top:   0 !important; }
    .flush-sm-right   { margin-right: 0 !important; }
    .flush-sm-bottom  { margin-bottom:0 !important; }
    .flush-sm-left    { margin-left:  0 !important; }
    .flush-sm-ends    { margin-top:   0 !important; margin-bottom:0 !important; }
    .flush-sm-sides   { margin-right: 0 !important; margin-left:  0 !important; }

    .push-sm          { margin:       20px !important; }
    .push-sm-top      { margin-top:   20px !important; }
    .push-sm-right    { margin-right: 20px !important; }
    .push-sm-bottom   { margin-bottom:20px !important; }
    .push-sm-left     { margin-left:  20px !important; }
    .push-sm-ends     { margin-top:   20px !important; margin-bottom:20px !important; }
    .push-sm-sides    { margin-right: 20px !important; margin-left:  20px !important; }

    .push-half-sm         { margin:       10px !important; }
    .push-half-sm-top     { margin-top:   10px !important; }
    .push-half-sm-right   { margin-right: 10px !important; }
    .push-half-sm-bottom  { margin-bottom:10px !important; }
    .push-half-sm-left    { margin-left:  10px !important; }
    .push-half-sm-ends    { margin-top:   10px !important; margin-bottom:10px !important; }
    .push-half-sm-sides   { margin-right: 10px !important; margin-left:  10px !important; }

    .push-double-sm         { margin:       40px !important; }
    .push-double-sm-top     { margin-top:   40px !important; }
    .push-double-sm-right   { margin-right: 40px !important; }
    .push-double-sm-bottom  { margin-bottom:40px !important; }
    .push-double-sm-left    { margin-left:  40px !important; }
    .push-double-sm-ends    { margin-top:   40px !important; margin-bottom:40px !important; }
    .push-double-sm-sides   { margin-right: 40px !important; margin-left:  40px !important; }

    .push-triple-sm         { margin:       60px !important; }
    .push-triple-sm-top     { margin-top:   60px !important; }
    .push-triple-sm-right   { margin-right: 60px !important; }
    .push-triple-sm-bottom  { margin-bottom:60px !important; }
    .push-triple-sm-left    { margin-left:  60px !important; }
    .push-triple-sm-ends    { margin-top:   60px !important; margin-bottom:60px !important; }
    .push-triple-sm-sides   { margin-right: 60px !important; margin-left:  60px !important; }

    .soft-sm          { padding:       20px !important; }
    .soft-sm-top      { padding-top:   20px !important; }
    .soft-sm-right    { padding-right: 20px !important; }
    .soft-sm-bottom   { padding-bottom:20px !important; }
    .soft-sm-left     { padding-left:  20px !important; }
    .soft-sm-ends     { padding-top:   20px !important; padding-bottom:20px !important; }
    .soft-sm-sides    { padding-right: 20px !important; padding-left:  20px !important; }

    .soft-half-sm          { padding:       10px !important; }
    .soft-half-sm-top      { padding-top:   10px !important; }
    .soft-half-sm-right    { padding-right: 10px !important; }
    .soft-half-sm-bottom   { padding-bottom:10px !important; }
    .soft-half-sm-left     { padding-left:  10px !important; }
    .soft-half-sm-ends     { padding-top:   10px !important; padding-bottom:10px !important; }
    .soft-half-sm-sides    { padding-right: 10px !important; padding-left:  10px !important; }

    .soft-double-sm          { padding:       40px !important; }
    .soft-double-sm-top      { padding-top:   40px !important; }
    .soft-double-sm-right    { padding-right: 40px !important; }
    .soft-double-sm-bottom   { padding-bottom:40px !important; }
    .soft-double-sm-left     { padding-left:  40px !important; }
    .soft-double-sm-ends     { padding-top:   40px !important; padding-bottom:40px !important; }
    .soft-double-sm-sides    { padding-right: 40px !important; padding-left:  40px !important; }

    .soft-triple-sm          { padding:       60px !important; }
    .soft-triple-sm-top      { padding-top:   60px !important; }
    .soft-triple-sm-right    { padding-right: 60px !important; }
    .soft-triple-sm-bottom   { padding-bottom:60px !important; }
    .soft-triple-sm-left     { padding-left:  60px !important; }
    .soft-triple-sm-ends     { padding-top:   60px !important; padding-bottom:60px !important; }
    .soft-triple-sm-sides    { padding-right: 60px !important; padding-left:  60px !important; }

    .hard-sm          { padding:       0 !important; }
    .hard-sm-top      { padding-top:   0 !important; }
    .hard-sm-right    { padding-right: 0 !important; }
    .hard-sm-bottom   { padding-bottom:0 !important; }
    .hard-sm-left     { padding-left:  0 !important; }
    .hard-sm-ends     { padding-top:   0 !important; padding-bottom:0 !important; }
    .hard-sm-sides    { padding-right: 0 !important; padding-left:  0 !important; }

}

@media (min-width:1025px) {

    .flush-md         { margin:       0 !important; }
    .flush-md-top     { margin-top:   0 !important; }
    .flush-md-right   { margin-right: 0 !important; }
    .flush-md-bottom  { margin-bottom:0 !important; }
    .flush-md-left    { margin-left:  0 !important; }
    .flush-md-ends    { margin-top:   0 !important; margin-bottom:0 !important; }
    .flush-md-sides   { margin-right: 0 !important; margin-left:  0 !important; }

    .push-md          { margin:       20px !important; }
    .push-md-top      { margin-top:   20px !important; }
    .push-md-right    { margin-right: 20px !important; }
    .push-md-bottom   { margin-bottom:20px !important; }
    .push-md-left     { margin-left:  20px !important; }
    .push-md-ends     { margin-top:   20px !important; margin-bottom:20px !important; }
    .push-md-sides    { margin-right: 20px !important; margin-left:  20px !important; }

    .push-half-md         { margin:       10px !important; }
    .push-half-md-top     { margin-top:   10px !important; }
    .push-half-md-right   { margin-right: 10px !important; }
    .push-half-md-bottom  { margin-bottom:10px !important; }
    .push-half-md-left    { margin-left:  10px !important; }
    .push-half-md-ends    { margin-top:   10px !important; margin-bottom:10px !important; }
    .push-half-md-sides   { margin-right: 10px !important; margin-left:  10px !important; }

    .push-double-md         { margin:       40px !important; }
    .push-double-md-top     { margin-top:   40px !important; }
    .push-double-md-right   { margin-right: 40px !important; }
    .push-double-md-bottom  { margin-bottom:40px !important; }
    .push-double-md-left    { margin-left:  40px !important; }
    .push-double-md-ends    { margin-top:   40px !important; margin-bottom:40px !important; }
    .push-double-md-sides   { margin-right: 40px !important; margin-left:  40px !important; }

    .push-triple-md         { margin:       60px !important; }
    .push-triple-md-top     { margin-top:   60px !important; }
    .push-triple-md-right   { margin-right: 60px !important; }
    .push-triple-md-bottom  { margin-bottom:60px !important; }
    .push-triple-md-left    { margin-left:  60px !important; }
    .push-triple-md-ends    { margin-top:   60px !important; margin-bottom:60px !important; }
    .push-triple-md-sides   { margin-right: 60px !important; margin-left:  60px !important; }

    .soft-md          { padding:       20px !important; }
    .soft-md-top      { padding-top:   20px !important; }
    .soft-md-right    { padding-right: 20px !important; }
    .soft-md-bottom   { padding-bottom:20px !important; }
    .soft-md-left     { padding-left:  20px !important; }
    .soft-md-ends     { padding-top:   20px !important; padding-bottom:20px !important; }
    .soft-md-sides    { padding-right: 20px !important; padding-left:  20px !important; }

    .soft-half-md          { padding:       10px !important; }
    .soft-half-md-top      { padding-top:   10px !important; }
    .soft-half-md-right    { padding-right: 10px !important; }
    .soft-half-md-bottom   { padding-bottom:10px !important; }
    .soft-half-md-left     { padding-left:  10px !important; }
    .soft-half-md-ends     { padding-top:   10px !important; padding-bottom:10px !important; }
    .soft-half-md-sides    { padding-right: 10px !important; padding-left:  10px !important; }

    .soft-double-md          { padding:       40px !important; }
    .soft-double-md-top      { padding-top:   40px !important; }
    .soft-double-md-right    { padding-right: 40px !important; }
    .soft-double-md-bottom   { padding-bottom:40px !important; }
    .soft-double-md-left     { padding-left:  40px !important; }
    .soft-double-md-ends     { padding-top:   40px !important; padding-bottom:40px !important; }
    .soft-double-md-sides    { padding-right: 40px !important; padding-left:  40px !important; }

    .soft-triple-md          { padding:       60px !important; }
    .soft-triple-md-top      { padding-top:   60px !important; }
    .soft-triple-md-right    { padding-right: 60px !important; }
    .soft-triple-md-bottom   { padding-bottom:60px !important; }
    .soft-triple-md-left     { padding-left:  60px !important; }
    .soft-triple-md-ends     { padding-top:   60px !important; padding-bottom:60px !important; }
    .soft-triple-md-sides    { padding-right: 60px !important; padding-left:  60px !important; }

    .hard-md          { padding:       0 !important; }
    .hard-md-top      { padding-top:   0 !important; }
    .hard-md-right    { padding-right: 0 !important; }
    .hard-md-bottom   { padding-bottom:0 !important; }
    .hard-md-left     { padding-left:  0 !important; }
    .hard-md-ends     { padding-top:   0 !important; padding-bottom:0 !important; }
    .hard-md-sides    { padding-right: 0 !important; padding-left:  0 !important; }

}

@media (min-width:1200px) {

    .flush-lg         { margin:       0 !important; }
    .flush-lg-top     { margin-top:   0 !important; }
    .flush-lg-right   { margin-right: 0 !important; }
    .flush-lg-bottom  { margin-bottom:0 !important; }
    .flush-lg-left    { margin-left:  0 !important; }
    .flush-lg-ends    { margin-top:   0 !important; margin-bottom:0 !important; }
    .flush-lg-sides   { margin-right: 0 !important; margin-left:  0 !important; }

    .push-lg          { margin:       20px !important; }
    .push-lg-top      { margin-top:   20px !important; }
    .push-lg-right    { margin-right: 20px !important; }
    .push-lg-bottom   { margin-bottom:20px !important; }
    .push-lg-left     { margin-left:  20px !important; }
    .push-lg-ends     { margin-top:   20px !important; margin-bottom:20px !important; }
    .push-lg-sides    { margin-right: 20px !important; margin-left:  20px !important; }

    .push-half-lg         { margin:       10px !important; }
    .push-half-lg-top     { margin-top:   10px !important; }
    .push-half-lg-right   { margin-right: 10px !important; }
    .push-half-lg-bottom  { margin-bottom:10px !important; }
    .push-half-lg-left    { margin-left:  10px !important; }
    .push-half-lg-ends    { margin-top:   10px !important; margin-bottom:10px !important; }
    .push-half-lg-sides   { margin-right: 10px !important; margin-left:  10px !important; }

    .push-double-lg         { margin:       40px !important; }
    .push-double-lg-top     { margin-top:   40px !important; }
    .push-double-lg-right   { margin-right: 40px !important; }
    .push-double-lg-bottom  { margin-bottom:40px !important; }
    .push-double-lg-left    { margin-left:  40px !important; }
    .push-double-lg-ends    { margin-top:   40px !important; margin-bottom:40px !important; }
    .push-double-lg-sides   { margin-right: 40px !important; margin-left:  40px !important; }

    .push-triple-lg         { margin:       60px !important; }
    .push-triple-lg-top     { margin-top:   60px !important; }
    .push-triple-lg-right   { margin-right: 60px !important; }
    .push-triple-lg-bottom  { margin-bottom:60px !important; }
    .push-triple-lg-left    { margin-left:  60px !important; }
    .push-triple-lg-ends    { margin-top:   60px !important; margin-bottom:60px !important; }
    .push-triple-lg-sides   { margin-right: 60px !important; margin-left:  60px !important; }

    .soft-lg          { padding:       20px !important; }
    .soft-lg-top      { padding-top:   20px !important; }
    .soft-lg-right    { padding-right: 20px !important; }
    .soft-lg-bottom   { padding-bottom:20px !important; }
    .soft-lg-left     { padding-left:  20px !important; }
    .soft-lg-ends     { padding-top:   20px !important; padding-bottom:20px !important; }
    .soft-lg-sides    { padding-right: 20px !important; padding-left:  20px !important; }

    .soft-half-lg          { padding:       10px !important; }
    .soft-half-lg-top      { padding-top:   10px !important; }
    .soft-half-lg-right    { padding-right: 10px !important; }
    .soft-half-lg-bottom   { padding-bottom:10px !important; }
    .soft-half-lg-left     { padding-left:  10px !important; }
    .soft-half-lg-ends     { padding-top:   10px !important; padding-bottom:10px !important; }
    .soft-half-lg-sides    { padding-right: 10px !important; padding-left:  10px !important; }

    .soft-double-lg          { padding:       40px !important; }
    .soft-double-lg-top      { padding-top:   40px !important; }
    .soft-double-lg-right    { padding-right: 40px !important; }
    .soft-double-lg-bottom   { padding-bottom:40px !important; }
    .soft-double-lg-left     { padding-left:  40px !important; }
    .soft-double-lg-ends     { padding-top:   40px !important; padding-bottom:40px !important; }
    .soft-double-lg-sides    { padding-right: 40px !important; padding-left:  40px !important; }

    .soft-triple-lg          { padding:       60px !important; }
    .soft-triple-lg-top      { padding-top:   60px !important; }
    .soft-triple-lg-right    { padding-right: 60px !important; }
    .soft-triple-lg-bottom   { padding-bottom:60px !important; }
    .soft-triple-lg-left     { padding-left:  60px !important; }
    .soft-triple-lg-ends     { padding-top:   60px !important; padding-bottom:60px !important; }
    .soft-triple-lg-sides    { padding-right: 60px !important; padding-left:  60px !important; }

    .hard-lg          { padding:       0 !important; }
    .hard-lg-top      { padding-top:   0 !important; }
    .hard-lg-right    { padding-right: 0 !important; }
    .hard-lg-bottom   { padding-bottom:0 !important; }
    .hard-lg-left     { padding-left:  0 !important; }
    .hard-lg-ends     { padding-top:   0 !important; padding-bottom:0 !important; }
    .hard-lg-sides    { padding-right: 0 !important; padding-left:  0 !important; }

}

/*******************************
 * No CSS Should be added below the above TRUMPS section.
 *
 *
 * Please add all additional CSS above the TRUMPS section above.
 */