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

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

Author: Joline Falco

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

[Color codes]


[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%;
/*  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: Georgia, "Times New Roman", Times, serif !important;
   color: #6f6f6f !important;
   font-size: 1.5em !important;
  /*padding-top: 70px;*/
}

p { font-family: Georgia, "Times New Roman", Times, serif !important;
   color: #6f6f6f !important;}


h1 {
    padding-bottom: 3px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
    color: #000;
}


.h3, h3 {
  font-size: 2em;
  color: #000000!important;
  font-weight: 500 !important;
}

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

a {color:#6f6f6f}

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

.top-bar {background-color:#777777;height:35px}
.top-bar a {color:#ffffff}
.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: 60px; margin-top: 10px;}

.headerLogo {padding-top:5px;text-align:center}

/************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:229px;
	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 }




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


.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;}
.home-content {padding: 0;}
.home-text {width:80%;margin-left:10%}
.firstTime, .forgotPassword, .updateAccount {font-size: 20px !important;}
/***********
3. Nav
************/
.navbar-default {background-color: #ffffff !important; }
.navbar-toggle { float: left !important}


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


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

/***********
5. Footer
************/

.sub_ftr {
  position: absolute;
  bottom: 0;
  width: 80%;
  /* Set the fixed height of the footer here */
  height: 100px;
  border-top: 1px dotted #999999;
}

#contactINFO {border-top: 3px double #000000; padding-top: 15px; height: 300px;}

.contactFooter {margin-top: 0px; }

.contactFooterBlc {color: #000000; font-weight: bold; }

.branding {
	padding-top: 20px;
}

.rep { min-height: 160px;}

.shows { min-height: 200px;}
 
.MainMfr {padding-top: 20px;}

.thumbnail {
  margin-bottom: -10px !important;
  margin-top: 30px !important;
}
/***********
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:500px;
}
a.catName {font-size:26px;color:#000000}

.subCatCell {height:450px}

.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}


.main-container {
	padding-left: 15px;
    padding-right: 15px;
}

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

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


/***********
8. Media Queries
************/
@media (max-width: 768px) {
	.qtyInput {
		width: 35% !important;
	}

	.rep, .shows { 
		text-align: center;
	}
	#contactINFO {height: 350px}
       .cartBtn.btn.btn-default {width:50%;margin:20px 0 0 0;}
  	.logoIMG  {width: 80%; margin-left: 0;}
	.top-bar ul.top-nav-left {width:70%}
	.top-bar ul.top-nav-right {width:28%}
	.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 }

}

@media (max-width: 551px) {
	.not-mobile {display:none}
}

@media (min-width: 768px) {
	.main-container {
	     width: 600px; 
	}
}