@charset "utf-8";
/* CSS Document */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: sans-serif;
    font-size: 16px;
}
nav {
    background: #fcbd2c;
    padding: 0 15px;
}
a {
    color: black;
    text-decoration: none;
}

h1 {
    font-size: 58px;
    color: white;
}
.menu, .submenu {
    list-style-type: none;
}
.logo {
    font-size: 20px;
    padding: 7.5px 10px 7.5px 0;
}
.item {
    padding: 10px;
}
.item.button {
    padding: 9px 5px;
}
.item:not(.button) a:hover, .item a:hover::after {
    color: #333333;
}
/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.menu li a {
    display: block;
    padding: 15px 5px;
}
.menu li.subitem a {
    padding: 15px;
}
.toggle {
    order: 1;
    font-size: 20px;
}
.item.button {
    order: 2;
}
.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}
.active .item {
    display: block;
}
.button.secondary {
    /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}
/* Submenu up from mobile screens */
.submenu {
    display: none;
}
.submenu-active .submenu {
    display: block;
}
.has-submenu i {
    font-size: 12px;
}
.has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    color: black;
    padding-left: 5px;
}
.subitem a {
    padding: 10px 15px;
}
.submenu-active {
    background-color: #111;
    border-radius: 3px;
}

/* Tablet menu */
@media all and (min-width: 700px) {
.menu {
    justify-content: center;
}
.logo {
    flex: 1;
}
.item.button {
    width: auto;
    order: 1;
    display: block;
}
.toggle {
    flex: 1;
    text-align: right;
    order: 2;
}
/* Button up from tablet screen */
.menu li.button a {
    padding: 10px 15px;
    margin: 5px 0;
}
.button a {
    background: #0080ff;
    border: 1px royalblue solid;
}
.button.secondary {
    border: 0;
}
.button.secondary a {
    background: transparent;
    border: 1px #0080ff solid;
}
.button a:hover {
    text-decoration: none;
}
.button:not(.secondary) a:hover {
    background: royalblue;
    border-color: darkblue;
}
}

/* Desktop menu */
@media all and (min-width: 960px) {
.menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
}
.logo {
    order: 0;
}
.item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
}
.button {
    order: 2;
}
.submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
}
.toggle {
    display: none;
}
.submenu-active {
    border-radius: 0;
}
}


/* START FLEX STYHLES */

.alignTop {
	vertical-align:top !important;
}


#body-container {
	border: 1px solid #fafafa;
	height: auto;
	margin: 0 auto;
	max-width: 1200px;
}

.flex-container {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	
	
}

#top-container {
	min-height: 250px;
	background: #fafafa;
	border: 1px solid #999999;
}

#header-container {
	min-height: 100px;
	border: 1px solid #999999;
}

#bottom-container {
	padding-top: 35px;
    padding-bottom: 65px;
	background: #fafafa;
	border: 1px solid #999999;
}

#banner-container {
	min-height: 175px;
    width: 100%;
    max-width: 100%;
}



footer {
	background: #111111;
    background-size: cover;
	display: flex;
	flex-direction: row;
	color: white;
	min-height: 200px;
	align-items: center;
    justify-content: space-around;
    padding-left: 10%
    padding-right: 10%;
    
}

#footer a {
	color: white;
	margin-top: 10px
}

.footer-column p {
	margin-top: 25px;
}

#copyright {
	background: #000000;
	display: flex;
	flex-direction: row;
	color: #fafafa;
	justify-content: space-around;
	min-height: 20px;
	align-items: center;
	margin-bottom:15px;
	font-size:11px;
}

#copyright a {
	color: white;
	margin-top: 10px
}

.copyright-column p {
	margin-top: 5px;
}

.imgthumb:hover {
  transform: scale(2);
}


/* DIV TABLE */

.store-image {
	padding-top:20px;
	padding-left:10px;
}

.store-image img {
	width:150px;
}

div.resultsTable {
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.resultsTable .divTableCell, .divTable.resultsTable .divTableHead {
  border: 1px solid #CCCCCC;
  padding: 3px 2px 0px 5px;
}
.divTable.resultsTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.resultsTable .divTableRow:nth-child(even) {
  background: #EEEEEE;
}
.divTable.resultsTable .divTableHeading {
  background: #000000;
  background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
  background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
  background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
  border-bottom: 2px solid #444444;
}
.divTable.resultsTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}

.divTableHead a {
	color: #FFFFFF;
  text-decoration: none;
}

.divTable.resultsTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.resultsTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  border-top: 2px solid #444444;
}
.resultsTable .tableFootStyle {
  font-size: 14px;
}
.resultsTable .tableFootStyle .links {
	 text-align: right;
}
.resultsTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.resultsTable.outerTableFooter {
  border-top: none;
}
.resultsTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

.vendorImage {width:150px;}	
.productImage {width:50px;}	
.productImage:hover {transform: scale(2);}

.outOfStock {
	color:#ff0000 !important;
	font-weight: bold !important;	
}

.inStock {
	color:#399E47 !important;
	font-weight: bold !important;		
}

.preOrder {
	color:#338AF3 !important;
	font-weight: bold !important;		
}
	
.alignContent {
		vertical-align: middle;
}	
/* END DIV TABLE CSS */


/* START CONTROL STYLES */
.form-wrapper {
  padding: 25px;
  
  .option-wrapper {
    margin: 10px 0;
  }
  
  // hides the actual checkbox
  input[type="checkbox"] {
    display: none;
    
    // Label text
    + label {
      display: inline;
      position: relative;

      // Unchecked checkbox box border
      &::before {
        display: inline-block;
        width: 24px;
        height: 24px;
        content: ' ';
        border: 2px solid white;
        border-radius: 4px;
        vertical-align: middle;
        margin-right: 15px;
        cursor: pointer;
        z-index: 10;
      }
    }
    
    // Checked checkbox box border
    &:checked + label {
      &::before {
        border: 2px solid springgreen;
      }
      
      // Checkmark
      &::after {
        width: 6px;
        height: 16px;
        border: 3px solid springgreen;
        border-left: none;
        border-top: none;
        content: ' ';
        position: absolute;
        left: 10px;
        bottom: 1px;
        transform: rotatez(45deg);
        cursor: pointer;
        z-index: 20;
      }
    }
  }
  
  // Fake Button
  .btn-submit {
    width: 100px;
    padding: 10px;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    text-align: center;
    
    &:hover {
      cursor: pointer;
      border-color: springgreen;
      color: springgreen;
    }
  }
}

/* SEARCH FORM SECTION STYLES */

p {
    text-align: center;
}

    
input {
    height: 20px;
    width: 20px;
    
}	
    
 button {
     display: block;
     margin-bottom: 15px;
        
    }

#two-column-flex-wrapper {
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin: 45px auto;
    
        
    }
    
#button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
 		grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr)       
}

#grid-checklist {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
    width: 650px;
    padding: 5px 20px;
}
        
    }
    
.input-child {
    width: 150px;
    border: none;

    }

.input-child img {
	  width: 15px;
		height: 15px;
}

/* button css */
    
ul, li {
    list-style: none;
}
ul {
    display: flex;
}
.button-styles input[type="checkbox"] {
    display: none;
}
h4 {
    display: inline-block;
    margin: 0 0 0 10px;
		font-size: 16px;
}
label {
    padding: 2px;
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    width: 165px;
}
label img {
    height: 15px;
    width: 15px;
}
:checked + label {
    background-color: #cccccc;
    color: white;
}

/* search box sstyles */
    
    * {
    box-sizing: border-box;
}
    
#search-box-container {
        display: flex;
        justify-content: center;
    
    }
.searchBox input {
    border: 1px solid #ccc;
    font-size: 12px;
    height: 30px;
    padding: 4px 8px;
    position: absolute;
    width: 50px;
}
input:focus {
    outline: none;
}
button {
    text-align: center;
}
button:focus {
    outline: none;
}
    
button.btn-search, button.btn-reset {
    background: #0000ff;
    border: none;
    height: 30px;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    width: 30px;
}
.searchBox {
    float: left;
    height: 50px;
    margin: 0 8%;
    position: relative;
    width: 350px;
}
.searchBox.control input {
    border-radius: 15px;
    right: 0;
    transition: all .3s ease-in-out;
    width: 100%;
}
.searchBox.control input:focus {
    width: 100%;
}
.searchBox.control input:focus ~ button.btn-search {
    background: hotpink;
    color: #fff;
}
.searchBox.control input:focus ~ button.btn-reset {
    right: -22px;
}
.searchBox.control button {
    transition: all .3s ease-in-out;
}
.searchBox.control button.btn-search {
    background: #ccc;
    border-radius: 50%;
    height: 26px;
    right: 2px;
    top: 2px;
    transition: all .3s ease-in-out;
    width: 26px;
}
.searchBox.control button.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    right: 5px;
    top: 5px;
    width: 20px;
    z-index: -1;
}

.handytip {
	flex-basis: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: bold !important;
}

   
/* media query */
    
@media screen and (max-width: 992px) {
    #grid-checklist {
    
    grid-template-columns: repeat(2, 151px);
     grid-template-rows: auto;
    width: 300px;
    margin-left: 0px;
}
    #two-column-flex-wrapper {
    display: flex;
    flex-direction: column;
    width: auto;
}
}