/* 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
*    - 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
*/

/* =====================================
   #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;
}

/* ----------------------------------
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 1px 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('https://www.wholesalecentral.com/images/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: #345e95; }
.wc-bg-light-blue { background-color: #4778b7; }
.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) { } */