* {transition: ease all .3s;}
html {height: 100%;}
body {color: #333; padding-top: 80px;}
.navbar {display: -webkit-box;}
.navbar {background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); position: fixed; top: 0; width: 100%; z-index: 100;}
.navbar-brand img {height: auto; max-width: 200px;}
.navbar-brand img.d-md-none {max-width: 100px;}
.navbar-dark .navbar-nav .nav-link {color: #888; text-transform: uppercase; font-weight: 600; transition: ease all .3s;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: #555;}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {color: #1a69ac;}

.nav-login {list-style-type: none; margin: 0; padding: 0; width: auto; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.nav-login li {display: inline-block;}
.nav-login .nav-link {color: #888; text-transform: uppercase; font-weight: 600; padding: .5rem;}
.nav-login .nav-link.join {color: #f19727; position: relative;}
.nav-login .nav-link.join:after {content:""; width: calc(100% - 1rem); height: 3px; background: #f19727; position: absolute; bottom: 5px; left: .5rem; transition: ease all .3s;}
.nav-login .nav-link.join:hover {color: #faa640; border-color: #faa640;}
.nav-login .nav-link.join:hover:after {bottom: 2px;}

.dropdown-item:hover {background-color:#cce5fc;}
.dropdown-item:active {background-color:#bad0e5;}

.fa-bars {font-size: 44px; color: #1a69ac;}

.f-search {background: #1a69ac url(/fchlibs/grafx/search-rotate3rev.jpg) no-repeat 0 0; background-size: cover; padding: 30px 0;}
.f-search .container-fluid {padding-left: 30px; padding-right: 30px;} 
.f-search .form-inline .form-control {width: 83%;}
.f-search .overlay {background: rgba(20,50,80,.3); border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 30px); height: calc(100% - 30px); z-index: 0;}
.f-search {position: relative;}
.f-search button {width: 15%;}
.f-search button:before {content: ""; color: #fff; font-family: 'Fontawesome'; position: absolute; }
.f-search-form form {width: 100%;}
.form-inline {width: 90%!important;}
.f-search-form {  display: flex;
  flex-direction: column; /* NEW */
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;}


ul.product-list {list-style-type: none; margin: 0; padding: 0;}
ul.product-list a {display: inline-block; padding: 5px 0;}
  
.browse {text-align: center;}
.browse ul {list-style-type: none; margin: 0 auto; padding: 0;}
.browse .dropdown-toggle {color: rgba(255,255,255,.9); text-transform: uppercase; font-weight: 600; text-shadow: 0 2px 4px rgba(10,55,90,1);}
.browse .dropdown-toggle:hover {color: rgba(240,150,39,1);}

.f-count {color: #fff; font-size: 12px; margin: 0; transform: translateY(-50%); top: 50%; position: absolute; text-align: center;}

.breadcrumb {background: #eaf0f5; padding: .5rem 1rem; margin-bottom: 0;}
.breadcrumb li {color: #222; display: inline-block;}
.breadcrumb li:after {content: '>'; padding: 0 8px; color: #999;}
.breadcrumb li:last-child:after {content:''; padding-right: 0;}
.breadcrumb a {color: #888; font-weight: normal;}
.breadcrumb a:hover {color: #222;}

.commoditySearchLink a {margin-bottom: 3px;}

.find-links { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;list-style-type: none; margin: 0; padding: 0;}
.find-links li {margin-bottom: 5px;}
.find-links a {border-radius: 3px; font-size: 1.1rem; line-height: 1.2; padding: 5px; display: block;}
.find-links a:hover {background: rgba(20,50,80,.05);}

.modal-header {background: #1a69ac; color: #fff; position: relative;}
.modal-title {font-size: 1.5rem;}
.modal .close {color: #fff; font-size: 3rem; line-height: .3; margin: 0; text-shadow: none; position: absolute; top: calc(50% - 5px); right: 0; transform: translateY(-50%);}
.modal .close:hover {color: #fff; opacity: 1;}

.main-col {padding-top: 20px; width: calc(100% - 300px);}
.right-col {background: #f8f8f8; min-height: 300px; padding: 2rem; width: 300px;}

#wrap {max-width: 1300px; margin: 0 auto;}
#sidebar {background: #fff; min-height: 300px; padding: 30px 2rem 2rem; width: 350px; border-right: 1px solid #eee;}
#sidebar a img {width: 100%; height: auto;}
#interior {width: calc(100% - 350px); padding: 1rem 2rem 1rem;}

.fch-ad img {width: 100%; height: auto;margin-botton: 20px;}

.testimonial {background-color: #2460AF; font-size: 17px; font-style: oblique; font-weight: normal; color: #FFFFFF; line-height: 1.3em; margin-top: 40px; padding: 20px; position: relative;}
.testimonial span {color: #ADDEFF; display: block; font-size: 13px; line-height: 1.3em; font-style: normal; margin-top: 20px;}
.testimonial:before {content: "\f10d"; color: rgba(0,0,0,.15); font-family: 'Fontawesome'; font-size: 40px; position: absolute; top: 17px; left: 8px; z-index: 0;}
.testimonial:after {content: "\f10e"; color: rgba(0,0,0,.15); font-family: 'Fontawesome'; font-size: 40px; position: absolute; bottom: 12px; right: 15px; z-index: 0;}

.testimonial .quote {position: relative; z-index: 1;}

.member-ad {border: 1px solid #ddd; display: block; margin-top: 40px; padding: 15px 15px 5px;} 
.member-ad a {display: block;}
.member-ad img {width: 100%; height: auto;}
.member-ad span {font-size: 11px; color: #888; display: block; margin-top: 15px; text-align: center; width: 100%;}

.fw-feed-item-title {line-height: 1.3!important; margin-bottom: 5px!important;}

.jumbotron {background-color: transparent;}
.closeouts .inner {background: #f09627; color: #fff; padding: 40px; text-align: center;}

.btn {background: #f19627; border-color: #f19627; color: #fff;}
.btn:hover {background: #faa640; border-color: #faa640;}

.home h2 {margin: 20px 0;}

a:hover {text-decoration: none;}

input.lightblueTickerButton {font-family:Verdana, sans-serif;font-size:11px;color:#FFFFFF;background-color:#028DDA;padding:5px 6px 5px 6px;cursor:pointer;}
input.blueTickerButton {font-family:Verdana, sans-serif;font-size:11px;color:#FFFFFF;background-color:#254774;padding:5px 6px 5px 6px;cursor:pointer;}
input.redTickerButton {font-family:Verdana, sans-serif;font-size:11px;color:#FFFFFF;background-color:#B50000;padding:5px 6px 5px 6px;cursor:pointer;}
input.greenTickerButton {font-family:Verdana, sans-serif;font-size:11px;color:#FFFFFF;background-color:#00BC31;padding:5px 6px 5px 6px;cursor:pointer;}
input.greyTickerButton {font-family:Verdana, sans-serif;font-size:13px;color:#FFFFFF;background-color:#C2C2C2;padding:6px 6px 6px 6px;cursor:pointer;}

.f-search input {
    display: block;
    width: 83%;
    height: calc(1.5em + .75rem + 2px);
    margin-right: .4rem!important;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background: rgba(255,255,255,.8);
    background-clip: padding-box;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: .25rem;
    transition: ease background .3s; border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

input {border: none; color: #42515c; padding: 10px 13px; border-radius: 4px; background: rgba(255,255,255,.7); font-size: 20px; width: 75%; transition: ease all .3s;}
input:focus {background: rgba(255,255,255,.9);}
input[type="email"] {margin-right: 3px;}
input[type="submit"] {background: #f09627; color: #fff; text-transform: uppercase; font-weight: bold; width: 23%; padding: 10px;}
input[type="submit"]:hover {background: #faa640;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #4a5864;}
::-moz-placeholder { /* Firefox 19+ */ color: #4a5864;}
:-ms-input-placeholder { /* IE 10+ */ color: #4a5864;}
:-moz-placeholder { /* Firefox 18- */ color: #4a5864;} 

.banner-ad {padding: 30px 20px;}
.banner-ad a {display: inline-block; margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 2px 2px 7px rgba(0,0,0,.2);}
.banner-ad a:hover {box-shadow: 2px 2px 9px rgba(0,0,0,.3);}
.banner-ad img {max-width: 728px; height: auto; width: 100%;}
.search-form ul {list-style-type: none; margin: 0; padding: 0;}
.search-form input {border: 1px solid #e3e3e3; font-size: 16px; width: 100%; padding-left: 25px; margin-bottom: 10px;}
.search-form input:focus {border-color: #1a69ac;}
.search-form li {position: relative;}
.search-form li:before {content:""; color: #1a69ac; font-weight: bold; position: absolute; left: 7px; top: calc(50% - 5px); transform: translateY(-50%);}
.search-form li:nth-child(1):before {content:"1";}
.search-form li:nth-child(2):before {content:"2";}
.search-form li:nth-child(3):before {content:"3";}
.search-form li:nth-child(4):before {content:"4";}
.search-form li:nth-child(5):before {content:"5";}
.search-form li:nth-child(6):before {content:"6";}
.search-form li:nth-child(7):before {content:"7";}
.search-form input[type="button"] {background: #1a69ac; border: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 10px 13px;}
.search-form input[type="button"]:hover {background: #2e82ca;}
.search-form input[type="button"].reset {background: none; border: none; color: #aaa;}
.search-form input[type="button"].reset:hover {background: #eee;}

p.s-results {color: #aaa; font-size: 13px;}
#search-results {border-radius: 4px; overflow: hidden;}
#search-results thead {background: #888; color: #fff; position: sticky; top: 0;}
#search-results th {font-weight: normal;}
#search-results th, #search-results td {line-height: 1.2; padding: 10px 10px; box-sizing: border-box;}
#search-results td, #search-results a, #search-results a:hover {color: #777;}
/*#search-results tr:nth-child(even) {background: #f8f8f8; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}*/

#search-results tbody tr {border-bottom: 2px solid #eee; border-left: 4px solid #fff; border-right: 4px solid #fff;}
#search-results tbody tr:hover {border-left: 4px solid #faa640; border-right: 4px solid #faa640; cursor: pointer;}
#search-results tbody tr:hover {background: #f5f5f5;}
#search-results tbody tr:hover td, #search-results tbody tr:hover a {color: #333;}
#search-results th:last-child, #search-results td:last-child {text-align: right;} /* Qty */

.search-modal p {margin: 0; padding: 5px; border-bottom: 1px solid #eee;}
.search-modal p:last-of-type {border: none;}
.search-modal p span {display: inline-block; font-size: 14px; font-weight: bold; width: 200px;}
.search-modal .modal-header {background: #1a69ac; color: #fff;}
.search-modal .modal-footer {border: none;}
.search-modal .close {color: #fff; text-shadow: none; font-size: 2.5rem; line-height: .75;}

.seemore {display: block; padding: 15px; text-align: center; color: #888; font-size: 18px; width: 100%;}
.seemore:hover {color: #333; text-decoration: none; border-radius: 4px;}

.footer {background: #27353e; color: #a9b4bc; padding: 0;}
.footer-top {padding: 30px 15px;}
.footer-top div[class^='col-'] {border-right: 1px solid rgba(255,255,255,.2);}
.footer-top div[class^='col-']:last-child {border-right: none;}
.footer ul {list-style-type: none; margin: 0; padding: 0; display: inline-block;}
.footer .quicklinks ul {width: 32%;}
.footer-top li a {display: inline-block; padding: 5px 0; line-height: 1.2em;}
.footer a {color: #a9b4bc;}
.footer a:hover {color: #d5e1ea;}
.footer .assoc img {margin: 0 10px 10px 0;}

.arrow:after {content:"\f0da"; font-family: 'Fontawesome'; font-size: 15px; margin-left: 5px;}

.ft-login:after {content:""; border-right: 1px solid rgba(255,255,255,.3);  padding-right: 8px; margin-right: 8px;}
.copyright {background: #435565; color: #9eb3c5; padding: 20px 15px;}
.copyright div:last-child {display: flex; align-items: center; text-align: right;}
.copyright p {margin: 0; width: 100%;}
.copyright .social {padding: 0; margin: 0; list-style-type: none;}
.copyright .social li {display: inline-block;}
.copyright .social a {color: #9eb3c5; display: inline-block; position: relative;}
.copyright .social a:hover {color: #c1d7ea;}
.copyright .social a:before {content:""; font-family: 'Font Awesome 5 Brands'; font-size: 25px; margin-right: 15px;}
.copyright .social .in a:before {content:"\f0e1";}
.copyright .social .fb a:before {content:"\f39e";}
.copyright .social .yt a:before {content:"\f167";}
.copyright .social .tw a:before {content:"\f099";}
.copyright .social .ig a:before {content:"\f16d";}


/* HOMEPAGE FEED */

.carousel-caption {background: linear-gradient(0deg,rgba(0,0,0,.95) 0,transparent 100%); width: 100%; right: auto; left: 0; bottom: 0; padding: 65px 40px 40px;}
.carousel-control-next, .carousel-control-prev {z-index: 100;}

.feedbox {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 15px 0 5px; padding: 5px 0;}
.sidefeed {list-style-type: none; padding: 0; margin: 0;}
.sidefeed li {line-height: 1.2em; position: relative;}
.sidefeed li a:before {content:""; color: #faa640; font-family: 'Font Awesome 5 Pro'; font-size: 12px; font-weight: bold; position: absolute; left: 8px;}
.sidefeed li.feed-s a:before {content:"\f002";}
.sidefeed li.feed-c a:before {content:"\f02b";}
.sidefeed li.feed-n a:before {content:"\f1ea";}
.sidefeed li a {border-radius: 4px; color: #333333; display: block; padding: 7px 10px 7px 27px;}
.sidefeed li a:hover {background: rgba(0,0,0,.1); color: #333; text-decoration: none;}

/* FEEDWIND FEED */

.home .feedwind h2 {margin-bottom: 10px;}
.fw-feed-item-title {line-height: 1.3!important; margin-bottom: 5px!important;}
.feed-desktop {display: block;}
.feed-mobile {display: none;}

#fw-container {border: none!important;}
header .fw-feed-title {border: none; margin: 0;}
.slick-slide {box-sizing: border-box; padding: 8px;}
.slick-slide:first-child {padding-left: 16px;}
.slick-slide img {left: 0!important;}
.fw-feed-item {margin-bottom: 20px!important;}
.fw-feed-item:hover {box-shadow: 0 0 6px rgba(0,0,0,.2);}

.feedwind-single a.more {position: relative; top: -30px;}
.feedwind-single a.more:after {content: "\f105"; font-family: 'Fontawesome'; margin-left: 5px;}

/* Intro */
.intro {padding-bottom: 20px;}

/* VIDEOS & CLOSEOUTS */

.videos, .closeouts {padding-top: 0;}
.videos ul, .closeouts ul {width: 100%; list-style-type: none; padding: 0 15px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px;}


/* TYPOGRAPHY */
h1, .h1 {font-size: 2.0rem;color: #1a69ac;}
h2, .h2 {font-size: 1.6rem;}
h3 {font-size: 1.25rem;margin-bottom: 1rem;}
h4 {font-size: 1.0rem;}



/******* MEDA QUERIES ********/

@media (min-width: 1040px) {
	.navbar-expand-md .navbar-toggler {display: none;}
	.navbar-expand-md .navbar-collapse {display: -ms-flexbox !important;display: flex !important;-ms-flex-preferred-size: auto;flex-basis: auto;}
	.navbar-expand-md .navbar-nav {-ms-flex-direction: row;flex-direction: row;}
}

@media (min-width: 768px) { 
    .dropdown:hover>.dropdown-menu {display: block;margin-top: 0;}
}

@media (min-width: 576px) {
	.modal-dialog {max-width: 960px;}
}
 


@media (max-width: 1200px) {
	.container-fluid .container {max-width: 100%;}
}
@media (max-width: 1039px) {
	.navbar-expand-md .navbar-toggler {display: inherit;}
	.navbar-expand-md .navbar-nav {-ms-flex-direction: column;flex-direction: column;}
	.collapse:not(.show) {display: none!important;}
	
	.nav-login {position: absolute;right: 85px;top: 19px;transform: none;}
	.navbar {display: block;}
	.navbar-toggler {position: absolute; top: 12px; right: 10px;}
	.nav-login {right: 75px;}
}
@media (max-width: 991px) {

	
	.f-count {position: relative; top: 0; transform: none;}
	#wrap {margin: 0 -15px;}
	.main-col, .right-col, #interior, #sidebar  {width: 100%; display: block;}

	.fch-ad img {max-width: 400px; width: 100%;}
	.testimonial {max-width: 400px; width: 100%;}
	.member-ad {max-width: 400px; width: 100%;}

	.search-form ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px;}

	.videos ul, .closeouts ul {padding: 0 1.75%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}
	.footer-top div[class^='col-'] {border-right: none; padding-bottom: 30px;}
	.footer-top div[class^='col-']:last-child {padding-bottom: 10px;}

	#wrap {display: flex; flex-direction: column;}
    #wrap > #interior { order: 1; }
    #wrap > #sidebar { order: 2; }
}

@media (max-width: 830px) {
	.feed-desktop {display: none;}
	.feed-mobile {display: block;}
}

@media (max-width: 767px) {
	.nav-login {position: absolute; right: 85px; top: 19px; transform: none; }
	.summary {padding-top: 20px;}


    #search-results thead {display: none;}
    #search-results tr {display: block; padding-top: 15px; padding-bottom: 15px;}
	#search-results td {display: inline-block; width: 59%; padding: 5px 15px 5px 57px; position: relative;}
	#search-results td:nth-child(odd) {padding-left: 58px;}

	#search-results tr td:nth-child(even) {width: 40%;}

	#search-results th:last-child, #search-results td:last-child {text-align: left;} /* Qty */
	#search-results td:before {content:""; color: #999; display: inline-block; font-size: 10px; margin-right: 5px; text-transform: uppercase; position: absolute; left: 0; top: 10px;}
	#search-results td:nth-child(odd):before {left: 5px;}
	#search-results td:nth-child(1):before {content:"Supplier:";}
	#search-results td:nth-child(2):before {content:"Location:";}
	#search-results td:nth-child(3):before {content:"Type:"}
	#search-results td:nth-child(4):before {content:"Material:";}
	#search-results td:nth-child(5):before {content:"Finish:";}
	#search-results td:nth-child(6):before {content:"Size:";}
	#search-results td:nth-child(7):before {content:"Descrip:";}
	#search-results td:nth-child(8):before {content:"Quantity:";}
	.find-links { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
    .copyright div:last-child {display: block; text-align: left; padding-top: 15px;}
    
      .slick-slide {box-sizing: border-box; padding: 16px;}
/*  .slick-prev, .slick-next {background: #1a69ac!important;
    position: absolute;
    box-shadow: 0 3px 2px rgba(0,0,0,.4);
    border: none;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    height: 45px;
    width: 45px;
    z-index: 2;
    opacity: 1;
    transition: ease all .3s;}
  .slick-prev:hover, .slick-next:hover {background: #2a81ca!important;}
    .slick-prev {left: 0!important;}
    .slick-next {right: 0!important;}  

    */
    .slick-prev::before, .slick-next::after {font-size: 36px!important; text-shadow: 1px 1px 6px rgba(0,0,0,.5)!important; opacity: 1!important;}
    .slick-prev::before {content: "\f104"!important; position: absolute; left: 15px; top: calc(50% - 10px); transform: translateY(-50%);}
    .slick-next::after {content: "\f105"!important; position: absolute; right: 15px; top: calc(50% - 10px); transform: translateY(-50%);}
    
}

@media (max-width: 575px) {
	.find .browse .nav-link {padding: 0;}
	.nav-login {right: 82px; top: 24px;}
	.nav-login .nav-link {font-size: 13px;}
	.search-nav {padding: 0;}
	.search-nav .row div {border-right: none;}
	.f-search .form-inline .form-control {margin-right: 2%!important;}
}

@media (max-width: 480px) {
.nav-login {top: 5px;}
.nav-login li {display: block;}
.nav-login .nav-link.join {padding-top: 0px;}
.search-modal p {display: flex;}
.search-modal p span {width: 140px; margin-right: 20px;}
.f-search input {width: 82%;}
.testimonial, .member-ad {margin-top: 20px;}
.footer input[type="email"] {margin: 0 0 10px; width: 100%;}
.footer input[type="submit"] {width: 100%;}
.find-links { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}