/* MAIN STYLE SHEET - WHOLESALECENTRAL.COM */


/* TABLE OF CONTENTS
*  ------------------------------------
*  BASE TAG STYLES - DO NOT CHANGE!!!
*    - Universal
*    - Font Styles
*    - Link Colors
*  CLASSES and IDS
*    - Font Sizes and Weights
*    - Header Styles
*    - New Header Styles - January 2018
*    - Footer
*    - Footer NEW
*    - Horizontal Banners
*    - Navigation Menus
*    - Custom Styles for Slicknav
*    - Trade Show Search Pages
*    - Product Search Directory
*    - Home Page Magazine section
*    - Home Page Popular Items
*    - Home Page Featured Stores
*    - Home Page Calls to Action
*    - Home Page Supplier Categories
*    - Category Search Results TOP 5 and Listings
*    - Tips
*    - Hide / Show Section
*    - Accent Element
*    - Telephone Links
*    - Colors
*    - Helpers
*    - Media Blocks
*  MEDIA QUERIES
*    - Supplier Sign Up Page Banner
*/


/* =====================================
   #BASE TAG STYLES - DO NOT CHANGE!!!
======================================== */

* {
    box-sizing: border-box;
}


/* Font Styles
   Set font size to 62.5% so: .9em = 9px, 1em = 10px etc.
-------------------------------------------------- */

html {
    font-size: 62.5%;
    /* 3 */
    /* -ms-text-size-adjust: 62.5%;
   -webkit-text-size-adjust: 62.5%; */
}

body {
    font-size: 1.5rem;
    line-height: 1.4em;
    font-weight: 400;
    font-family: 'Open Sans', Tahoma, Verdana, sans-serif;
    /* 1 */
    color: #222;
}


/* Link colors
-------------------------------------------------- */

a:link {
    color: #0d54a5;
    text-decoration: none;
}

a:visited {
    color: #0d54a5;
}

a:hover {
    color: #005ce6;
    text-decoration: underline;
}

a:active {
    color: #0d54a5;
}


/* ====================================
   #CLASSES and IDS
======================================= */


/* -----------------------------------------
FONT SIZES AND WEIGHTS
-------------------------------------------- */

.text9 {
    font-size: 9px;
    font-size: .9rem;
}

.text10 {
    font-size: 10px;
    font-size: 1rem;
}

.text12 {
    font-size: 12px;
    font-size: 1.2rem;
}

.text14 {
    font-size: 14px;
    font-size: 1.4rem;
}

.text16 {
    font-size: 16px;
    font-size: 1.6rem;
}

.text18 {
    font-size: 18px;
    font-size: 1.8rem;
}

.text21 {
    font-size: 21px;
    font-size: 2.1rem;
}

.text24 {
    font-size: 24px;
    font-size: 2.4rem;
}

.weight400 {
    font-weight: 400;
}

.weight400ital {
    font-weight: 400;
    font-style: italic;
}

.weight600 {
    font-weight: 600;
}

.weight700 {
    font-weight: 700;
}

.weight800 {
    font-weight: 800;
}


/* ------------------------------------------
HEADER STYLES
-------------------------------------------- */

.h1-top {
    font-size: 1.3rem;
    line-height: 1.2;
    color: #222;
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 4px;
}


/* GENERAL PAGE HEADER STYLES
----------------------------- */

.page-head {
    margin-top: 16px;
    margin-bottom: 10px;
    text-align: center;
}

.page-head h2 {
    padding: 0 0 6px 0;
    font-weight: 700;
    font-size: 1.6em;
}

.page-head h3 {
    padding: 0 0 6px 0;
    font-weight: 400;
    font-size: 1em;
}

.section-head {
    margin: 10px 0 4px 0;
    padding: 6px;
    background-color: #dae3ef;
    border: 1px solid #d1d1d1;
    font-weight: 700;
}


/* --------------------------------------
NEW HEADER STYLES - January 2018
-------------------------------------- */


/* Head Section 1 
------------------------ */

.head-section-1 {
    padding: 18px 0 12px 0;
}

.head-section-1 .u-spacer {
    display: none;
}

.head-nav-mobile {
    vertical-align: middle;
    display: none;
}

.head-logo {
    display: inline-block;
    vertical-align: middle;
    width: 21%;
}

.head-calls-to-action {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: 79%;
}

.head-calls-to-action a {
    border-radius: 5px;
    padding: 3px 15px;
    font-weight: 600;
    color: #2b4e7c;
    background-color: #eed66a;
    font-size: 1.6rem;
}

.head-calls-to-action a:hover {
    text-decoration: none;
    background: #fde37c;
}

.head-buyer-sign-up {
    margin-right: 15px;
}


/* MEDIA QUERIES - header section 1 */

@media (max-width: 800px) {
    .head-section-1 .u-spacer {
        display: inline-block;
        width: 15%;
        vertical-align: middle;
    }
    .head-nav-mobile {
        display: inline-block;
        width: 15%;
    }
    #hamburger-stack {
        font-size: 2.4rem;
    }
    .head-logo {
        width: 70%;
        text-align: center;
    }
    .head-calls-to-action {
        display: none;
    }
}


/* Head Section 2 
------------------------ */

.head-nav-desktop {
    padding: 10px 0;
}

.head-nav-desktop li {
    display: inline-block;
    padding-right: 18px;
}

.head-nav-desktop li a {
    color: #fff;
    font-size: 1.6rem;
}

.head-login {
    cursor: pointer;
    text-align: right;
    color: #fff;
}

.head-login .login {
    display: inline-block;
    padding: 10px 0px;
}

.head-login .login a {
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
}

.head-login .nav-drop {
    display: none;
    position: absolute;
    width: 80px;
    background: #4778b7;
    text-align: center;
    top: 41px;
    right: 0;
    -moz-box-shadow: 3px 4px 3px -2px #24436c;
    -webkit-box-shadow: 3px 4px 3px -2px #24436c;
    box-shadow: 3px 4px 3px -2px #24436c;
}

.head-login .nav-drop a {
    text-decoration: none;
    color: #fff;
    font-size: 1.4rem;
}

.head-login .login:hover>.nav-drop {
    display: block;
    z-index: 200;
}

.head-login .login .nav-drop li:hover {
    background-color: #345e95;
}

.head-calls-to-action-mobile {
    display: none;
}


/* MEDIA QUERIES - header section 2 */

@media (max-width: 800px) {
    .head-nav-desktop {
        display: none;
    }
    .head-login {
        display: none;
    }
    #mobile-menu {
        padding-bottom: 0px;
        background: #fff;
    }
    .nav-collapse li {
        background-color: #4778b7;
        margin-bottom: 1px;
        padding: 12px 12px;
    }
    .nav-collapse li:hover {
        background-color: #345e95;
    }
    .nav-collapse li a {
        color: #fff;
        display: block;
        text-decoration: none;
    }
    /*  Calls to action mobile 
    -------------------------- */
    .head-calls-to-action-mobile {
        display: inline-block;
        padding: 13px 0 13px 0;
        text-align: center;
    }
    .head-calls-to-action-mobile a {
        border-radius: 5px;
        padding: 3px 15px;
        font-weight: 600;
        color: #2b4e7c;
        background-color: #eed66a;
        font-size: 1.6rem;
    }
    .head-calls-to-action-mobile a:hover {
        text-decoration: none;
        background: #fde37c;
    }
    .head-calls-to-action-mobile p {
        display: inline-block;
    }
    .head-calls-to-action-mobile .maintext {
        font-weight: 600;
        margin-right: 2px;
    }
    .head-buyer-sign-up-mobile {
        margin-right: 15px;
    }
}

@media (max-width: 550px) {
    .head-calls-to-action-mobile {
        padding: 5px 0;
    }
    .head-buyer-sign-up-mobile {
        display: inline-block;
        width: 49%;
        margin-right: 5px;
    }
    .head-supplier-sign-up-mobile {
        display: inline-block;
        width: 49%;
    }
    .head-calls-to-action-mobile p {
        display: block;
    }
    .head-calls-to-action-mobile .subtext {
        font-size: 12px;
        margin-top: -4px;
    }
    .head-calls-to-action-mobile-spacer {
        display: none;
    }
}


/* Head Section 3 & 4
------------------------ */

.head-section-3,
.head-section-4 {
    font-size: 1.3rem;
    padding: 4px 0;
    border-bottom: 1px solid #d1d1d1;
}

.head-section-3 li:first-child,
.head-section-4 li:first-child {
    font-weight: 600;
    color: #333;
}

.head-section-3 li,
.head-section-4 li {
    display: inline-block;
    margin-right: 10px;
}

.head-section-3 a,
.head-section-4 a {
    color: #444;
}


/* MEDIA QUERIES - header section 3 & 4 */

@media (max-width: 800px) {
    .head-section-3,
    .head-section-4 {
        display: none;
    }
}


/* Header Headline 
------------------------ */

.head-pagehead {
    padding: 13px 0 5px 0;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
}


/* Top Banners
------------------------ */

.top-banners-block {
    padding: 10px 0 10px 0;
}

.top-banners-block img {
    margin: 0 auto;
}

#top-banner-slider img {}

@media (max-width: 400px) {
    #top-banner-slider img {
        max-width: 92%;
    }
}


/* Top Slider
 ------------------------ */

.top-banners-block #top-banner-slider {
    visibility: hidden;
}

.top-banners-block #top-banner-slider.slick-initialized {
    visibility: visible;
    max-width: 97%;
}

.top-banners-block .slick-prev::before {
    font-family: FontAwesome;
    content: '\f053';
    color: #d1d1d1;
    /* display: none; */
}

.top-banners-block .slick-next::before {
    font-family: FontAwesome;
    content: '\f054';
    color: #d1d1d1;
}


/* Bottom Banners
------------------------ */

.bot-banners-block {
    padding: 10px 0 10px 0;
}

.bot-banners-block img {
    margin: 0 auto;
}

#bot-banner-slider img {}

@media (max-width: 500px) {
    #bot-banner-slider img {
        max-width: 92%;
    }
}


/* Bottom Slider
 ------------------------ */

.bot-banners-block #bot-banner-slider {
    visibility: hidden;
}

.bot-banners-block #bot-banner-slider.slick-initialized {
    visibility: visible;
    max-width: 97%;
    width: 260p;
}

.bot-banners-block .slick-prev::before {
    font-family: FontAwesome;
    content: '\f053';
    color: #d1d1d1;
    /* display: none; */
}

.bot-banners-block .slick-next::before {
    font-family: FontAwesome;
    content: '\f054';
    color: #d1d1d1;
}


/* ---------------------------------
FOOTER STYLES
--------------------------------- */

.footer-content {
    padding: 20px 20px;
    border: 1px solid #b5b5b5;
    margin-bottom: 8px;
    background-color: #eee;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.footer-right-dashed {
    border-right: #b5b5b5 1px dashed;
}

.footer-text-padding-right {
    padding-right: 40px;
}

.footer-content h2 {
    font-size: 1.5rem;
    line-height: 1.4em;
    font-weight: bold;
    margin: 0;
}

/* ---------------------------------
FOOTER NEW STYLES
--------------------------------- */
.footerFullWidth {
   padding: 40px 0 40px 0;
   color: #ffffff;
   margin-bottom: 0;
}
        
.footerFullWidth a { color: #ffffff; }
.footerFullWidth h2 { margin-bottom: 10px; }
.footerFullWidth p { line-height: 2.25rem; }
.footerFullWidth ul { line-height: 2.7rem; }
.footerFullWidthMargin { margin-bottom: 15px; }
.footerSocialMedia { margin-top: 10px; }
        
@media (max-width: 800px) {
   .footerFullWidth h2 { margin-top: 10px; }
}

/* ----------------------------------
HORIZONTAL BANNERS
----------------------------------- */

/* To use this style, apply class="horizontal-banners" to the UL containing the banners.
Then add an inline style to each LI defining the width and margin for the LI.
The first LI has margin:0 0 0 0. The remaining LIs have a margin: 0 0 0 1%.
The width of each LI = [100 - (sum of left margins)] / total number of units %
*/

.horizontal-banners {
    list-style: none;
    margin: 0;
    padding: 0;
}

.horizontal-banners li {
    float: left;
    padding: 0;
    margin: 0;
}

.horizontal-banners li:last-child {
    float: right;
}


/* ------------------------------------
NAVIGATION MENU STYLES
-------------------------------------- */

.nav-table {
    /* apply to nav element */
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: table;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.nav-table-row {
    /* apply to UL element */
    display: table-row;
    margin: 0;
    padding: 0;
}

.nav-table-row>li {
    list-style: none;
    display: table-cell;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
}

.nav-table-row li:hover {
    background: #ddd;
}

.nav-table-row li:first-child {
    border-left: none;
}

.nav-table-row li:last-child {
    border-right: none;
}

.nav-table-row li a {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: .9em;
    font-weight: 700;
    padding: 2px 4px;
}

.dropdown {
    /* apply to LI containing the UL dropdown element */
    position: relative;
}

.drop-nav {
    /* apply to UL dropdown element */
    position: absolute;
    display: none;
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.drop-nav li {
    border-bottom: 1px solid #ccc;
}

.dropdown:hover>.drop-nav {
    display: block;
    z-index: 900;
}

.member-nav-table {
    /* apply to nav element */
    width: 100%;
    background: #ffeb90;
    border: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: table;
}

.member-nav-table-row {
    /* apply to UL element */
    display: table-row;
    margin: 0;
    padding: 0;
}

.member-nav-table-row>li {
    list-style: none;
    display: table-cell;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
}

.member-nav-table-row li:hover {
    background: #ddd;
}

.member-nav-table-row li:first-child {
    border-left: none;
}

.member-nav-table-row li:last-child {
    border-right: none;
}

.member-nav-table-row li a {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: .8em;
    padding: 2px 4px;
}


/* ---------------------------------------
CUSTOMIZATIONS FOR SLICKNAV
--------------------------------------- */

.slicknav_menu {
    display: none;
}

#menu {
    display: none;
}

@media (max-width: 550px) {
    .js #menu {
        display: none;
    }
    .js .slicknav_menu {
        display: block;
    }
}


/* ------------------------------------
TRADE SHOW DIRECTORY PAGES
------------------------------------ */


/* TRADE SHOW SEARCH FORM
----–––––––––––––––––––––- */

.ts-search-form {
    max-width: 440px;
    margin: 6px auto 6px auto;
    background-color: #f7f5f5;
    border: 1px solid #e5e5e5;
    overflow: auto;
    padding: 10px;
    text-align: center;
}

.ts-search-form h2 {
    text-align: center;
    margin: 0;
    padding: 0 0 6px 0;
    font-weight: 600;
    font-size: 1.1em;
}

.ts-search-form label {
    font-size: .92em;
    padding: 0px 0 2px 0;
    display: inline-block;
    min-height: 25px;
}

.ts-search-form input {
    padding: 5px;
    min-height: 25px;
    margin-top: 6px;
}

.ts-search-form input:focus,
.ts-search-form textarea:focus {
    box-shadow: 0 0 5px rgba(0, 84, 165, .35);
    transition: all 0.3s;
}

.ts-search-form select {
    display: inline-block;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    height: 25px;
    overflow: hidden;
    margin-top: 6px;
    width: 170px;
    background-color: #fff;
}

.ts-search-form button {
    cursor: pointer;
}

.ts-search-form input[type="text"] {
    border: 1px solid #D1D1D1;
}

.ts-search-form input[type="submit"] {
    width: auto;
    margin-top: 10px;
    cursor: pointer;
}


/* Removes awkward default styles on some inputs for iOS */

input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* TRADE SHOW SEARCH PAGE
–––––––––––––––––––––––– */

.ts-links {
    width: 98%;
    margin-top: 6px;
    padding: 0 8px;
}

.ts-links h3 {
    margin: 10px 0 4px 0;
    padding: 6px;
    background-color: #dae3ef;
    border: 1px solid #d1d1d1;
    font-weight: 700;
}

.ts-links ul li {
    padding: 2px 0;
    border-bottom: 1px dotted #ccc;
}

.ts-featured-shows {
    width: 98%;
    margin-top: 6px;
    padding: 0 8px;
}

.ts-featured-shows h3 {
    margin: 10px 0 4px 0;
    padding: 6px;
    background-color: #dae3ef;
    border: 1px solid #d1d1d1;
    font-weight: 700;
}


/* Smaller than mobile */

@media (max-width: 550px) {
    .ts-links h3 {
        margin: 16px 0 6px 0;
        font-weight: 700;
    }
    .ts-links ul li {
        padding: 6px 0;
    }
}


/* TRADE SHOW RESULTS PAGE
-------------------------- */

.ts-results-wrapper {
    max-width: 600px;
    margin: auto;
}

.ts-matches {
    font-weight: 600;
}


/* see media-block-04 section for highlight style */


/* TRADE SHOW DETAIL PAGE
------------------------- */

.ts-detail {
    padding: 20px 0;
}

.ts-detail p a {
    font-weight: 600;
}

.ts-detail h1,
.ts-detail h2,
.ts-detail h3 {
    word-wrap: break-word;
    padding: 0 0 .3em 0;
    line-height: 1.1em;
}

.ts-detail h1,
.ts-detail h2 {
    color: #444;
}

.ts-detail h1 {
    font-size: 1.4em;
    font-weight: 700;
}

.ts-detail h2 {
    font-size: 1.2em;
    font-weight: 700;
}

.ts-detail h3 {
    font-size: 1em;
    font-weight: 600;
}

.ts-detail-header {
    padding-bottom: 8px;
}

.ts-detail-description p {
    padding-bottom: 8px;
}

.ts-detail-headcount {
    margin-bottom: 12px;
}

.ts-detail-categories {
    padding: 6px 0 10px 0;
    border-top: dotted 1px #444;
}

.ts-detail-categories ul {
    list-style: disc inside;
}

.ts-detail-contact {
    background-color: #f7f5f5;
    border: 1px solid #d1d1d1;
}

.ts-detail-contact h3 {
    padding: 8px 10px;
    background-color: #dae3ef;
}

.ts-detail-contact-info {
    padding: 8px 10px;
}


/* ---------------------------------------
PRODUCT SEARCH DIRECTORY STYLES
--------------------------------------- */

.prod-dir-box {
    /* container element surrounding prod directory */
    border-top: 5px solid #c3d8ff;
    border-bottom: 3px solid #c3d8ff;
    border-right: 1px dotted #999999;
}

.prod-dir-heading {
    background-color: #c3d8ff;
    padding: 3px 8px 4px 8px;
    margin: 0;
}

.prod-dir-box p {
    padding: 0 3px 5px 6px;
    border-bottom: 1px dashed #ccc;
}

.prod-dir-box p a {
    text-decoration: none;
    display: block;
    width: 96%;
    color: #333333;
    font-size: .9em;
}

.prod-dir-box p a:hover {
    background-color: #ffea9b;
    color: #003399;
}


/* -----------------------------------
HOME PAGE MAGAZINE SECTION
------------------------------------ */

.box-gray {
    border: 2px solid #bdbdbd;
    border-radius: 4px;
    padding: 0 12px 24px;
    margin-bottom: 20px;
    font-size: .9em;
}

.box-gray .mag {
    float: left;
    width: 150px;
    margin: 0 15px 25px 0px;
}

.box-gray ul {
    margin-left: 24px;
}

.box-gray li {
    padding-left: 2em;
    text-indent: 0em;
}


/* -----------------------------------
HOME PAGE POPULAR ITEMS STYLES
------------------------------------ */

.pop-items {
    font-weight: 600;
    font-size: 0.9em;
}


/* ----------------------------------
HOME PAGE FEATURED STORE STYLES
------------------------------------ */

.featured-stores-heading {
    color: #666666;
    border-bottom: thin #333333 dotted;
    margin-bottom: 0;
    padding-bottom: 4px;
}

.featured-store {
    text-align: center;
    line-height: 16px;
    font-size: 0.85em;
}

.featured-store a {
    font-weight: 600;
}

.featured-store img {
    border-right: 3px #c5c5c5 solid;
    border-bottom: 2px #c5c5c5 solid;
    -webkit-border-radius: 4px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 4px;
    -moz-border-radius-topleft: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    max-width: 100%;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
}

.featured-store p {
    margin: 0 0 3px 0;
    padding: 0;
}

.featured-stores-heading {
    color: #666666;
    border-bottom: thin #333333 dotted;
    margin-bottom: 0;
    padding-bottom: 4px;
}


/* ----------------------------------
HOME PAGE CALLS TO ACTION STYLES
---------------------------------- */

.call-to-action-block {
    border: 4px solid #c3d8ff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 2px;
}

.call-to-action-block h1 {
    margin: 0;
    font-size: 1em;
    font-weight: 700;
}

.call-to-action-block p {
    float: left;
    max-width: 75%;
    font-size: .85em;
    line-height: 1.5em;
}

.call-to-action-block p strong {
    font-weight: 600;
}

.call-to-action-block img {
    float: right;
    margin-top: 8px;
    padding-left: 3px;
}


/* -----------------------------------
HOME PAGE SUPPLIER CATEGORIES
------------------------------------ */

.categories li {
    border-bottom: 1px dotted #d0d0d0;
    line-height: 1.7em;
    padding: 2px 3px;
    font-size: 0.9em;
    font-weight: 600;
}

.categories li a:hover {
    background-color: #dae3ef;
    text-decoration: none;
}

.sub-cat {
    line-height: 1.5em;
    font-size: .9em;
    padding: 0px 4px;
    margin-top: 0.2em;
    margin-bottom: 0;
    font-weight: 500;
}

.sub-cat a {
    text-decoration: none;
    border-bottom: none;
}

.sub-cat li a:hover {
    background-color: #dae3ef;
    text-decoration: none
}


/* ----------------------------------------
CATEGORY SEARCH RESULTS TOP5 AND LISTINGS
----------------------------------------- */

.listings p,
.top-5-listings p {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ccc;
}

.top-5-listings p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-style: none;
}

.member-since {
    display: block;
    font-size: 13px;
    margin-top: 10px;
}

.member-since a {
    display: inline-block;
    margin-left: 16px;
}


/* -----------------------------------
TIPS
----------------------------------- */

.tips h2 {
    font-weight: 600;
    color: #666;
    margin: 17px 0 4px 0;
}

.tips p {
    color: #666;
    margin-bottom: 10px;
}

.tips .circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    text-align: center;
    background: #ff9900;
    margin-right: 10px;
}

.tips ol,
.tips ul {
    line-height: 20px;
    list-style-position: outside;
    margin-bottom: 16px;
    margin-top: 10px;
    padding-left: 28px;
    color: #666;
    width: 90%;
}

.tips ul {
    list-style-type: disc;
}

.tips ul ul {
    list-style-type: circle;
}

.tips ol ul {
    list-style-type: circle;
}

.tips ul li {
    margin-bottom: 5px;
}

.tips ol li {
    margin-bottom: 5px;
}


/* ------------------------------------
HIDE / SHOW SECTION STYLES
------------------------------------- */

.fa {
    color: white;
}

.acc_trigger {
    padding: 0 5px;
    margin: 0 0 5px 0;
    line-height: 32px;
    width: 100%;
    font-weight: normal;
    float: left;
    background-color: #615f5f;
}

.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: inline;
}

.active {
    background-position: left bottom;
}

.acc_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    width: 100%;
    clear: both;
}

.acc_container .block {
    padding: 20px;
}

.acc_container .block p {
    padding: 5px 0;
    margin: 5px 0;
}


/* ----------------------------------
ACCENT ELEMENTS
---------------------------------- */


/* GOLD SECTION HEAD */

.gold-section-head {
    border: 1px solid #b5b5b5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #003399;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 4px 4px 4px 8px;
}


/* ARROW */

ul.list-arrow {
    list-style-image: url('../png/arrow_right.png');
    list-style-position: inside;
}

.bg-gold {
    background-color: #ffe673;
}

.bg-light-gray {
    background-color: #eee;
}

.bg-light-blue {
    background-color: #ecf6fc;
}

.bg-med-blue {
    background-color: #c3d8ff;
}

.border-light-gray {
    border-color: #b5b5b5;
}


/* --------------------------------------------------
TELEPHONE LINKS
-------------------------------------------------- */


/* Disable telephone link on desktop */

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover,
a[href^="tel"]:active {
    text-decoration: none;
    color: #4c4c4c;
    pointer-events: none;
    cursor: default;
}


/* Enable telephone link on devices under 550px, and increase line-height */

@media (max-width: 550px) {
    a[href^="tel"]:link,
    a[href^="tel"]:visited,
    a[href^="tel"]:hover,
    a[href^="tel"]:active {
        color: #0e5ea9;
        pointer-events: auto;
        cursor: pointer;
    }
}


/* ----------------------------------
HELPERS
----------------------------------- */

.remove-bottom-margin {
    margin-bottom: 0;
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ----------------------------------
MEDIA BLOCKS
----------------------------------- */


/* media-block-01 (no image)
----------------------------*/

.media-block-01 h4 {
    margin: 0;
    padding: 0;
    font-weight: 700;
}

.media-block-01 p {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: dashed 1px #ccc;
    margin-top: 0;
}

.media-block-01 p:last-child {
    border: none;
}


/* media-block-02 (image) Headline font-weight 700
------------------------- */

.media-block-02 .block {
    padding: 10px 0 10px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.media-block-02 .block img {
    float: right;
    margin: 0 0 4px 10px;
}

.media-block-02 .block:last-child {
    border: none;
}

.media-block-02 .block h4 {
    font-weight: 700;
}

.media-block-02 .block p {
    margin: 0;
    padding: 0;
}

.media-block-02 .ts-highlight {
    padding: 10px;
    background-color: #f0f5ff;
}


/* media-block-04 (image) Headline font-weight 600
------------------------ */

.media-block-04 .block {
    padding: 10px 0 10px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.media-block-04 .block img {
    /* border: 1px solid #d1d1d1; */
    float: right;
    margin: 0 0 4px 10px;
}

.media-block-04 .block:last-child {
    border: none;
}

.media-block-04 .block h4 {
    font-weight: 600;
}

.media-block-04 .block p {
    margin: 0;
    padding: 0;
}

.media-block-04 .ts-highlight {
    padding: 10px;
    background-color: #f0f5ff;
}


/* BACKGROUND COLORS */

.bg-dk-blue {
    background-color: #0E5EA9;
}

.bg-md-blue {
    background-color: #B6CEE5;
}

.bg-lt-blue {
    background-color: #DAE3EF;
}

.bg-black {
    background-color: #000;
}

.bg-dk-gray {
    background-color: #222;
}

.bg-dk-gray {
    background-color: #353535;
}

.bg-md-gray {
    background-color: #DDD;
}

.bg-lt-gray {
    background-color: #F7F5F5;
}

.wc-bg-dark-blue {
    background-color: #050e40;
}

.wc-bg-light-blue {
    background-color: #0e1850;
}

.wc-bg-light-grey {
    background-color: #f4f4f4;
}


/* BORDER COLORS */

.bord-dk-blue {
    border-color: #0E5EA9;
    1px solid;
}

.bord-lt-blue {
    border-color: #DAE3EF;
    1px solid;
}

.bord-black {
    border-color: #000;
    1px solid;
}

.bord-dk-gray {
    border-color: #222;
    1px solid;
}

.bord-md-gray {
    border: #DDD 1px solid;
}


/* FONT COLORS */

.lt-blue {
    color: #DAE3EF;
}

.md-blue {
    color: #C3D8FF;
}

.dk-blue {
    color: #0E5EA9;
}

.lt-gold {
    color: #FFEA9B;
}

.dk-gold {
    color: #FCC036;
}

.dk-gray {
    color: #4C4C4C;
}

.md-gray {
    color: #DDD;
}

.white {
    color: #FFF;
}

.black {
    color: #000;
}

.simple-footer {
    font-size: 1.2rem;
    color: #999;
    padding: 20px 0;
}

.headline-separator {
    font-size: 3.3rem;
    line-height: 1.2em;
    margin: 20px auto 12px auto;
    padding: 20px 0;
    font-weight: 700;
    text-align: center;
}


/* UTILITIES
----------------------------------*/

.full-wrapper {
    width: 100%;
}

.round-image {
    border-radius: 50%;
}

.center-element {
    margin-left: auto;
    margin-right: auto;
}


/* Smaller than mobile */

@media (max-width: 550px) {
    .mobile-center {
        text-align: center;
    }
}


/* HERO
---------------------------------*/

.hero {
    width: 100%;
    padding: 16px 0 34px 0;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
}

.hero h1 {
    font-size: 33px;
    font-size: 3.3rem;
    line-height: 1.3em;
    font-weight: 700;
    padding: 20px 0 10px 0;
}

.hero h2 {
    font-size: 23px;
    font-size: 2.3rem;
    line-height: 1.4em;
    font-weight: 700;
}

.hero p {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.6em;
    font-weight: 400;
    padding: 20px 0 6px 0;
}


/* LANDING PAGE
--------------------------------------------*/

.landing h1 {
    font-size: 33px;
    font-size: 3.3rem;
    line-height: 1.2em;
    font-weight: 700;
    padding-top: 20px;
    color: #0054A5;
}

.landing h2 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: 600;
    padding-top: 10px;
    color: #0054A5;
}

.landing h3 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 700;
    padding-top: 12px;
    color: #444;
}


/* Smaller than mobile */

@media (max-width: 550px) {
    .landing h3 {
        padding-top: 4px;
    }
}

.landing p {
    color: #444;
    font-size: 1.6rem;
    line-height: 1.4em;
    font-weight: 400;
    padding-top: 8px;
}

.landing-smallprint {
    font-size: 1.2rem;
    line-height: 1.5em;
    color: #999;
    padding: 20px 0 0 0;
}


/* ––––––––––––––––––––––––––––––––––––
Forms
---–––––––––––––––––––––––––––––––––– */

.landing-form {
    background-color: #f7f5f5;
    border: 1px solid #e5e5e5;
    margin: 24px auto 0 auto;
    overflow: auto;
    padding: 15px;
    font-size: 1.6rem;
}

.landing-form fieldset {
    border: none;
    margin-bottom: 10px;
}

.landing-form legend {
    display: block;
    font-weight: 600;
    color: #0054A5;
    padding-bottom: 10px;
    padding-top: 10px;
}

.landing-form label {
    font-size: 1.6rem;
    padding: 8px 0 4px 0;
    display: inline-block;
}

.landing-form .form-label {
    text-align: right;
}


/* Smaller than mobile */

@media (max-width: 550px) {
    .landing-form .form-label {
        text-align: left;
    }
}

.landing-form option {
    padding: 5px;
}

.landing-form input:not([type=submit]),
.landing-form select {
    padding: 5px;
    min-height: 35px;
    margin-bottom: 12px;
    width: 90%;
    font-size: 1.6rem;
    color: #555;
}


/* Smaller than mobile */

@media (max-width: 550px) {
    .landing-form input,
    .landing-form select {
        width: 100%;
    }
}

.landing-form input:focus,
.landing-form textarea:focus {
    box-shadow: 0 0 5px rgba(0, 84, 165, .35);
    transition: all 0.3s;
}

.landing-form textarea {
    padding: 5px;
    width: 100%;
    min-height: 70px;
    resize: vertical;
    border: 1px solid #D1D1D1;
}

.landing-form h4 {
    margin-top: 0;
    margin-bottom: 8px;
}

.landing-form button {
    cursor: pointer;
}


/* Input type attributes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.landing-form input[type="color"],
.landing-form input[type="file"],
.landing-form input[type="image"],
.landing-form input[type="range"] {
    width: auto;
    border: none;
    display: inline;
}

.landing-form input[type="color"] {
    width: 27px;
}

.landing-form input[type="date"],
.landing-form input[type="datetime"],
.landing-form input[type="datetime-local"],
.landing-form input[type="email"],
.landing-form input[type="month"],
.landing-form input[type="number"],
.landing-form input[type="password"],
.landing-form input[type="search"],
.landing-form input[type="tel"],
.landing-form input[type="text"],
.landing-form input[type="time"],
.landing-form input[type="url"],
.landing-form input[type="week"] {
    border: 1px solid #D1D1D1;
}

.landing-form input[type="submit"],
.landing-form input[type="reset"],
.landing-form input[type="button"] {
    /* from button class */
    display: inline-block;
    zoom: 1;
    vertical-align: bottom;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    margin: 2px;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    /* end from button class */
}


/* float radio button labels next to the field */

.landing-form input[type="radio"],
.landing-form label.radio,
.landing-form input[type="checkbox"],
.landing-form label.checkbox {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.landing-form input[type="radio"],
.landing-form input[type="checkbox"] {
    margin: 0 3px 0 0;
}


/* Removes awkward default styles on some inputs for iOS */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* =====================================
   #MEDIA QUERIES
====================================== */


/* Smaller than mobile
------------------------------------ */

@media (max-width: 550px) {
    .mobile-hide {
        display: none;
    }
    /* FOOTER STYLES */
    .footer-right-dashed {
        border-right: none;
    }
    .footer-text-padding-right {
        padding-right: 0px;
    }
}


/* Larger than phablet (also point when grid becomes active)
-------------------------------------------------- */

@media (min-width: 551px) {
    .mobile-only {
        display: none;
    }
}


/* Smaller than tablet  @media (max-width: 750px) { } */


/* Smaller than desktop  @media (max-width: 1000px) { } */


/* Larger than Desktop HD   @media (min-width: 1200px) { } */


/* =====================================
   #SUPPLIER SIGN UP PAGE BANNER
====================================== */
@font-face {
    font-family: 'PlusJakartaSansItalicVariable';
    src: url('../ttf/plusjakartasans-italic-variablefont_wght.ttf');
    font-style: normal;
}
@font-face {
    font-family: 'PlusJakartaSansVariable';
    src: url('../ttf/plusjakartasans-variablefont_wght.ttf') format('truetype');
    font-style: normal;
}

.supplierSignupBanner{
    margin:5px 0 -18px 0;
    padding: 16px 16px 40px 16px; 
    font-family: PlusJakartaSansVariable;
}
    .supplierSignUpBannerLogo{
    width:72px; 
    height:32px;
}

.supplierSignupBannerHeadline{
    margin-top:5px;
    font-size:24px;
    line-height: 30px;
}

.supplierSignupBannerSubHeadline{
    margin-top:-15px;
    font-size:14px;
    line-height:18px;
}

.supplierSignUpBannerCTA{
    padding:10px 0; 
    margin:16px 0 -45px 0;

}

@media (min-width:1000px) {
    .supplierSignupBanner{
        margin:53px 0 33px 0;
        padding: 12px 24px 48px 24px; 
        font-family: PlusJakartaSansVariable;
    }
    .supplierSignUpBannerLogo{
        position:absolute;
        top: 286px;
        width: 136px;
        height: 52px;
        left:13px;
    }

    .supplierSignupBannerHeadline{
        font-size:40px;
        line-height: 50px;
    }

    .supplierSignupBannerSubHeadline{
        margin:-5px 0 3px 0;
        font-size:16px;
    }
    .supplierSignUpBannerCTA{
       float:right;
       padding:15px 39px 16px 38px;
       margin:16px 0 -25px 0;
    }
}