@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

@font-face {
	font-family: 'Lemonade Stand';
	src: url('../../inc/fonts/Lemonade Stand D.otf');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family: 'Lemon Yellow Sun';
	src: url('../../inc/fonts/DK Lemon Yellow Sun.otf');
	font-weight:normal;
	font-style:normal;
}


/******************************************
[Table of contents]

Author: Joline Falco, Gary Ivey

1. Body / Typography
2. Header
3. Nav
4. Slideshow - Media
5. Footer
6. OmegaNet Specific
7. Misc
8. Media Queries

[Color codes]
Green: #6a7944
Aqua BG: #95cfcb
Light Blue BG: #bce2e9
Darker Blue (Headings): #00ABC2
Pantone 3282: #008578

[Typography]

Body copy:    ;
Headers:      ;

******************************************/
/************ADA Compliance*******************/
.sr-only {
position: absolute; left: -10000px;
}
.skip-link {
color: black; background-color: white; padding: 12px; border: 2px solid black; border-radius: 5px; z-index: 999;
}
.skip-link:focus-visible {
left: 0px;
}

/***********
1.) Body / Typography
************/
/*Sticky Footer*/
html {
  position: relative;
  min-height: 100%;
	width:100%;
/*  background-image:url(../img/main_bg.jpg);
   background-repeat: repeat;*/
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 100px;
  background-color: transparent !important;
  font-family: 'Montserrat', sans serif !important;
   color: #00adc6 !important;
   font-size: 1.5em !important;
  /*padding-top: 70px;*/
  width:100%;
}

p { font-family: 'Montserrat', sans serif !important;
   color: #00adc6 !important;}

h1, h2, h3, h4 {font-family: 'Lemonade Stand', fantasy;color: #00adc6;}
h1 {
    padding-bottom: 3px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 34px;
    font-weight: 600;
    
}
h2 {
	font-family: 'Lemonade Stand', fantasy; font-size:30px;
}

.h3, h3 {
  	font-size: 24;
    	font-weight: 500 !important;
}

 h4 { 
     font-size: 20px !important;
    text-transform: uppercase !important;    
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

a:link, a:visited {color:#00ABC2}
a:hover {color:##00adc6}

.btn.btn-default {background-color:#00adc6;color:#ffffff}

.desktop-only {display:block}
.mobile-only {display:none}

/***********
2. Header
************/
header { background-color: #bce2e9; width: 100%; min-height: 300px; /*box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);*/}

.top-bar {background-color:#6a7944;height:35px}
.top-bar a:link {color:#ffffff;text-decoration:none}
.top-bar a:hover {color:#ffffff;text-decoration:underline}
.top-bar ul.top-nav-left {display:inline;float:left;list-style:none;width:50%;padding:5px 2%}
.top-bar ul.top-nav-right {float:right;text-align:right;list-style:none;width:50%;padding:5px 2%;}
.top-bar ul>li {display:inline}
.top-bar ul>li>a {padding:3px 2%}

.logo {margin: 0 auto; text-align: center; width: 100%;}
.logoIMG  {width: 100%; max-width: 454px; /*margin-left: 0;60px;*/ margin-top: 10px;}
#headerLogo {text-align:center;font-family:'Lemonade Stand',fantasy;color:#ffffff;font-size:180px;}
#headerLogo.headerLogo a:link, #headerLogo.headerLogo a:visited {font-family:'Lemonade Stand',fantasy;color:#ffffff;font-size:180px;text-decoration:none}
#headerLogo.headerLogo a:hover {text-decoration:none;border-bottom:5px solid #ffffff}
/*img.headerLogo {padding:0 20%;text-align:center;height:200px}*/
#cartLink {float:right}
/*.navbar-form .input-group */
input.form-control.search-input {width:auto;display:none}

main#main-content {width:100%;}/*80%;margin-left:10%}*/

/*************Mega-Menu**********/
.TopCatName {position:relative}

.SubCatName {display:none}

/*.TopCatName:hover+.SubCatName, .SubCatName:hover {display:block}*/

/*.TopCatName:focus+.SubCatName, .SubCatName:focus {display:block;}*/

.TopCatName:hover ul {width:100vh;}

.TopCatName:hover+.SubCatName, .SubCatName:hover {
	position:fixed;
	top:205px;
	left:0;
	right:0;
	width:100vw;
	z-index:100;
	background-color:#eeeeee;
/*	border:1px solid #000000;*/
	display:inline-block;
	list-style:none;
	padding:20px 0;
/*	float:left;*/
/*	margin-right:2%;*/
}

.TopCatName:nth-child(2) {left:-1000px}
	
.TopCatName:hover+.SubCatName ul>li, .SubCatName ul>li, .SubCatName:hover ul>li {
	width:auto;
	display:inline-block;
	list-style:none;
	float:left;
	margin-right:1%;
	text-align:center;
}
.TopCatName:hover+.SubCatName ul>li img, .SubCatName:hover ul>li img {
	max-width:200px;height:200;max-height:200px;opacity:1;transition: 0.5s;
}
.TopCatName:link, .TopCatName:visited {color:#222222}
.TopCatName:hover.SubCatName:hover ul>li>a { color:#000000 }

div.collapse.navbar-collapse {text-align:center}
nav.navbar.navbar-default ul#publicMenu {width:75%;/*margin-left:30%;*/}
nav.navbar.navbar-default ul#publicMenu li {text-align:center;}
nav.navbar.navbar-default ul#publicMenu li:first-child {margin-left:27%}
ul#publicMenu,ul.nav.navbar-nav {font-size:20px}

nav.navbar {margin-top:50px;}

nav.navbar ul, div.navbar-collapse {text-align:center}
/*div.navbar-collapse ul.nav.navbar {margin:0 25%}*/
li.searchbar {width:25%}
li.searchbar i.fa.fa-search {color:#00adc6;float:left;margin-top:20px;}
/*Toggle Menu https://codeconvey.com/onclick-search-box-open/ */
.togglesearch form.navbar-form {padding:0 15px }
.togglesearch{
  background: #E8E8E4;
  position: absolute;
  top: 64px;
  /*right: 8%;*/
  left:8%;
  z-index:100;
  width: 350px;
  height: 60px;
  line-height: 60px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  border-top:4px solid #00adc6; /*#D80B15;*/
  display: none;
}

.togglesearch:before{
  content: "";
  position: absolute;
  top: -37px;
  /*right: 13px;*/
  left:20px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid transparent;
  border-bottom: 14px solid #00adc6; /*#D80B15;*/
}

.togglesearch input[type="text"]{
  width: 200px;
  padding: 5px 10px;
  margin-left: 23px;
  border: 1px solid #00adc6; /*#D80B15;*/
  outline: none;
}

.togglesearch input[type="button"]{
  width: 80px;
  padding: 5px 0;
  background: #00adc6; /*#D80B15;*/
  color: #fff;
  margin-left: -6px;
  border: 1px solid #00adc6; /*#D80B15;*/
  outline: none;
  cursor: pointer;
}

/************Home Page*****************/

/*
Light Blue BG: #bce2e9
Darker Blue (Headings): #00ABC2
Pantone 3282: #008578
*/
#homePageBoxes {
	width:100%;
	height:300px;
	padding:0;
	margin:0;
	float:left;
	text-align:center;
	font-family: 'Lemonade Stand', fantasy;
	font-size: 30px;
	color:#bce2e9;
}

.homePageBox {
	width:29%;
	height:225px;
	float:left;
	background-color:#bce2e9;
	position:relative;
	top:20px;
	left:0;
	margin:0 2%;
	padding-top: 50px;
	color:#008578;
	font-weight:500;
	font-size:60px;
	outline: 13px solid #bce2e9;
	border: 3px solid #ffffff;
/*	border: 3px solid #00ABC2;*/
}
a.homePageBoxButton {
	text-transform:uppercase;
	font-family: 'Lemonade Stand', fantasy;
	color: #ffffff; /*#00ABC2;*/
	width:80%;
}

main h2 {line-height:50px;letter-spacing:2px}


/*********************SHOPPING CART*********************************************/
table#CartOuter {width:80%;margin:auto;}/*float:right}*/
#updateCart, #notFirst, #checkoutBtn, #viewCart { float:left;margin:.05%;margin-left:2% }
#checkoutBtn { width:100px}
table#EditCart {width:100% }
table#Cart { width:100%;border:1px solid #6f6f6f;font-size:1.25vw;font-weight:bold}
table#Cart th, table#Cart td {padding:5px;}
table#Cart th {text-align:center}
table#Cart tr.cartTotal { color:#6f6f6f; font-weight:bold }
tr.cartHeader th, tr.cartItems td { color:#6f6f6f}
tr.cartItems td img {max-height:75px}
.cartBtn.btn.btn-default {
	margin:20px 0 0 4%;
	width:20%;
	display:inline;
	float:left} /*, .cartForm*/
input#editCartSubmit { margin-top:20px }
a#cartNotFirst {display:block;padding:5px;margin-top:40px}
#cart {padding-top: 0px; padding-bottom: 0px; text-align: right;}


/*******************END SHOPPING CART********************************************/

/**********
ByList
***********/
.BodyBg {width:80%;margin-left:10%}
.BodyBg:nth-child(even) {background-color:#dddddd}
.byList-item-container, .byListItem {width:100%}
.byList-item-container:nth-child(even) {background-color:#dddddd}

.left-container {
  float:left;
  text-align: left;
  width:20%;
}
.right-container {
  float:left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%; /*40%;*/
}
div#byList-sku, div#byList-price, div#byList-qty, div#byList-min  {float:left;width:45%;margin:10px 0}
.space-between {
  display: flex;
  justify-content: space-between;
  text-align: left;
}
#byList-item {text-align:center}
#byList-img img {max-height:100px}



.wrapper {padding-top: 3%; padding-bottom: 3%;}

.col-columns {min-height: 250px !important;}

.homeimg {width: 80%; /*float:left;*/ margin: 10px;}

#main-content {padding-left: 2%; padding-right: 2%; padding-top: 2%;}
#main-contentHOME {width: 100%;}

.headerLogin { margin-top: 20px;}

#loginWrapper {width:80%;margin-left:10%}
#narrow-image.login-bottom {width:30%}
.login-bottom {width:34%;float:left;padding:20px 2%}
.login-bottom img {width:100%}
.home-content {padding: 0;}
.home-text {width:80%;margin-left:10%}
.firstTime, .forgotPassword, .updateAccount {font-size: 20px !important;}
/***********
3. Nav
************/
.navbar-default {background-color: transparent !important; }
.navbar-default .navbar-nav>li {text-transform:uppercase}
.navbar-default .navbar-nav>li>a:link, .navbar-default .navbar-nav>li>a:visited {color:#00ABC2}
.navbar-default .navbar-nav>li>a:hover {color:#00ABC2;text-decoration:underline}
.navbar-toggle { /*float: left !important*/}


.navbar {
	margin-bottom: 0 !important;
	border-top: none; 3px double #000000 !important;
	border-bottom: none; 3px double #000000 !important;
 	border-radius: 0 !important;
}

/*.navbar-default.navbar-collapse {border: 1px solid #e7e7e7}*/


/***********
4. Slideshow - Media
************/

.carousel-control.left, .carousel-control.right {background-image: linear-gradient (to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.5) 0)}

/***********
5. Footer
************/
footer {  background-color:#bce2e9;color:white }
footer div.socialLink {width:50%;float:left}
div#Instagram.socialLink img {float:right}

.sub_ftr {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 100px;
  border-top: 1px solid #e7e7e7;
}
.footerLinks {padding:0 4%}
.footerLinks h4 {margin-left:5%}
.footerLinks ul li {
	list-style-type: none;
	margin-left: -5%;
	text-transform:uppercase;
	font-weight:bold;
}
.footerLinks ul li a:link, .footerLinks ul li a:visited {color:#00ABC2}
.footerLogo {max-width:400px;margin:0 auto;}

#contactINFO {border-top: 1px solid #e7e7e7; padding-top: 15px; height: 300px;}

.contactFooter {margin-top: 0px; }

.contactFooterBlc {color: #00ABC2; font-weight: bold; margin-left:5%}

.branding {
	padding-top: 20px;
}

.rep { min-height: 160px;}

.shows { min-height: 200px;}
 
.MainMfr {padding-top: 20px;width:80%;margin-left:10% !important}
#MainTitle {text-align:center}
.thumbnail {
  margin-bottom: -10px !important;
  margin-top: 30px !important;
}
.catalogCover-wrapper {width:100%}
.catalogCover {/*width:20%;margin-left:20%;*/float:left;text-align:center}
/***********
6. OmegaNet Specific
************/

/*tr.itemList:nth-child(even) {
    background-color: #eee;
}*/


#ShowItemPopupBody {
/*  background-image: url(/images/main_bg.jpg) !important;
  background-repeat: repeat !important;*/
}

.catCell {
	text-align: center;margin-bottom:40px; height:300px;
}
.catCell img {max-height:300px;}
a.catName {font-size:26px;color:#000000}
div.catImg {max-width:200px;margin:0 auto;text-align:center}
div.catImg img {width:100%}

.subcatLinks {height:400px}
.subcatLinks img {width:100%;}
#show-cat-wrapper {width:80%;margin-left:10%}

.subCatCell {height:450px}

table.currcat {margin:0 auto;max-height:200px;text-align:center}
table.currcat img {width:100%;max-height:200px;margin:0 auto}

.cat_content_bottom {
	padding-bottom: 20px;
}

.cat_item { height: 500px;}

div.group-wrapper {height:675px;}/*padding:15px 15px;*/
.group_item {margin:0}/* 15px}*/
.imgBoxStd, .imgBox {
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid #adadad;
        width:100%;
        max-width:25vw;
        height:400px;
        max-height:40vh;
        text-align:center;
        vertical-align:
        middle;padding:1%;
        margin-bottom:15px
}
.imgBoxStd {width:100%;height:400px;max-height:50vh}
.imgBox img, .imgBoxStd img {max-width:100%;max-height:37vh}

.groupedItem.row {margin:0 10px;padding:2px 2px 0 2px}
.groupedItem:nth-child(odd) {background-color:#ededed}

.showGroupCol1, .showGroupCol2, .showGroupCol3 {float:left;height:40px;font-size:10px;line-height:12px}

.showGroupCol1 {width:20%;text-align:left}
.showGroupCol2 {width:53%;text-align:left}
.showGroupCol3 {width:27%;text-align:right}

.item {color:#008578}
.main-container {
	padding-left: 15px;
    padding-right: 15px;
}

.catpic {width: 90%;}
.category {font-size: 1.5em; font-weight: bold;}
.catName {font-size: 12px;}

/**********
ByList
***********/
.BodyBg {width:80%;margin-left:10%}
#byList-body.BodyBg:nth-child(even) {background:#eeeeee}

#byList-container {width:100%}

div.byList-item-container {border-bottom:1px solid #aaaaaa;}
.byList-item-container, .byListItem {width:100%;height:250px}

.left-container {
  float:left;
  text-align: center;
  width:20%;
}

.left-container .byList-img img {height:125px;}
.right-container {
  float:left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%; /*40%;*/
        padding-top:50px;
}
div.byList-sku, div.byList-price, div.byList-qty, div.byList-min  {float:left;margin:5px 0}/*width:45%;*/
.space-between {
  display: flex;
  justify-content: space-between;
  text-align: left;
}
div.byList-item {font-weight:bold;padding:10px}
div.byList-img {padding:10px}
div.byList-img img {width:auto}



/***********
7. Misc
************/


/***********
8. Media Queries
************/
@media (min-width: 768px) {
	.main-container { width: 600px; }
	ul.nav.navbar-nav {margin:0 auto;float:none;}
}

@media (max-width: 1300px) {
	header {height:225px;min-height:200px}
	#headerLogo.headerLogo {
		height:175px;
		padding:0;
		position:relative;
	}
	#headerLogo.headerLogo a {
		font-size:150px !important;
		margin:0 auto;
		position:absolute;
		top:0;
		left:27%;
		/*right:50%;*/
		padding:0;
		word-wrap:none;
	}
	nav.navbar.navbar-default {margin-top:0;}
	nav.navbar.navbar-default ul#publicMenu {/*margin-left:25%*/width:100%;z-index:1000}
}

@media (max-width: 991px) {
	header {height:225px;min-height:200px}
	.headerLogo {height:100px;min-height:80px}
	#headerLogo.headerLogo a {font-size:100px;margin:0;left:15%}
	.navbar-collapse {padding-left:0;padding-right:0;}
	nav.navbar {margin-top:0}
	.nav.navbar.navbar-default ul#publicMenu {width:100% !important;margin-left: 0 !important; margin-right: 0}
	ul.nav.navbar-nav {font-size:17px}
	li.searchbar, li.cartLink {width:7%}
}


@media (max-width: 768px) {
	header, div.navbar-header {height:100px;min-height:80px;width:100%}
	div.headerLogo {width:80%;float:right}
	#headerLogo.headerLogo a {font-size:60px !important}
	.navbar-default .navbar-toggle .icon-bar {position:relative;z-index:1000}
	nav.navbar {width:20%;margin-top:0;position:relative;z-index:9999}
	div.navbar-collapse {width:100%;height:300px;position:relative;top:-100px}
	ul.nav.navbar-nav {margin-top:-25px;width:100%}
	ul.nav.navbar-nav li {width:100%;position:relative;top:20px;z-index:1000;background-color:#ffffff}
	li.searchbar.desktop-only {display:none}
	li.searchbar.mobile-only {height:45px}
	li.searchbar.mobile-only .navbar-form {border:none}
	li.searchbar.mobile-only div#searchInput {width:70%;margin-left:5%;float:left}
	li.searchbar.mobile-only button {float:left}
	.carousel img {position:relative;z-index:0}
	#narrow-image.login-bottom, .login-bottom {width:100%}
	div.input-group-btn button {background-color:#00adc6;font-size:20px;color:#ffffff }
	.desktop-only {display:none}
	.mobile-only {display:block}
	.qtyInput {width: 35% !important;}
	.top-bar {height:70px}
	.top-bar ul.top-nav-left, .top-bar ul.top-nav-right {width:50%;text-align:center;font-size:130%}
	button.navbar-toggle {background-color:#00adc6;}
	nav.navbar {width:100%}
	.navbar-default .navbar-toggle .icon-bar {background-color:#ffffff}
	ul.nav.navbar-nav {position:relative;z-index:1000;}
	ul.nav.navbar-nav li {background-color:#ffffff;width:100%}
	.rep, .shows { 	text-align: center;}
	#contactINFO {height: 320px}
       .cartBtn.btn.btn-default {width:50%;margin:20px 0 0 0;}
  	.logoIMG  {width: 80%; /*margin-left: 0;*/}
	.headerLogo {height:70px}
	.footerLogo {width:40%}
	.navbar-nav ul>li>a.SubCatName:hover {width:40%}
	.TopCatName:hover+.SubCatName {display:none;left:0;border:none}
	.TopCatName:hover+.SubCatName ul {width:90%;margin-left:0}
	.TopCatName:hover+.SubCatName ul>li {display:block;float:none;border-bottom:1px solid #000000}
	.TopCatName:hover+.SubCatName ul>li img, .SubCatName:hover ul>li img { display:none }
	.catCell {height:500px;text-align:center}
	.catCell img {margin:0 auto}
        .byList-item-container .left-container, .byList-item-container .right-container {width:100%}

}
@media (max-width: 600px) {
	header {min-height:100px}
	#headerLogo.headerLogo a {font-size:20px;left:5%}
	nav.navbar {width:100%;margin-top:0}
	div.headerLogo {width:80%;float:right}
}