@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;800&display=swap');

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

Author:

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

[Color codes]
Logo
Red: #e23325
Green: #5ec3ae
Text:
Footer BG:

[Typography]

Body copy:
Headers:
Display:


******************************************/

/***********
1.) Body / Typography
************/

html {
  position: relative;
  height: 100%;
  min-height: 100vh;
}

body {
  /* Margin bottom by footer height */
  /*margin-bottom: 60px;*/
  font-family: 'Roboto Slab', serif;
  color: #666666;
  /*padding-top: 70px;*/
	background-color: #fff !important;
  height: 100%;
  min-height: 100vh;
	width:100% !important;
}

.wrapper {
	background-color: #fff !important;
}

.inner-wrapper { max-width: 1200px; margin: 0 auto;}


h1 {font-size: 28px; font-family: 'Roboto Slab', serif;font-weight: 400;color: #e23325;}
h2 {font-size: 24px; font-family: 'Roboto Slab', serif;font-weight: 400;color: #e23325;}
h3 {font-size: 20px; font-family: 'Roboto Slab', serif;font-weight: 400;color: #7a7a7a;}
h4 {font-size: 16px; font-family: 'Roboto Slab', serif;font-weight: 400;color: #7a7a7a;}
h5 {font-size: 14px; font-family: 'Roboto Slab', serif;font-weight: 400;color: #7a7a7a;}

p {margin-bottom: 16px; }

a:link, a:visited {color:#e23325;}

a:hover {color:#bbbbbb}
/***********
2. Header
************/

.dropdown-toggle, i, .caret {color: #e74e95}

section.container.wrapper {
	padding:30px 60px 0 60px;
}
	#logoContainer {text-align: center; max-width: 100%;}
	#logoContainer img {padding: 10px 0; width: 400px; max-width: 400px; }

/***********
3. Nav
************/

#top-bar { background-color: #5ec3ae; color:#ffffff }
#top-bar .navbar-right li i, 
#top-bar .navbar-right li, 
#top-bar .navbar-right span, 
#top-bar .navbar-right li a:link, 
#top-bar .navbar-right li a:visited 
	{color:#ffffff}
	#top-bar-inner { max-width: 1200px; margin: 0 auto; text-align: center; padding: 0;}
	#top-bar-inner p { font-size: 13px; color: #fff; text-align: center; margin-bottom: 0; }

#bs-example-navbar-collapse-1 {
	/*width:95%;*/
	margin:auto;
}

/*#bs-example-navbar-collapse-1 .nav.navbar-nav { margin-left:25% }*/

.navbar-header {margin:auto}

#memNav {
	margin-left:0;
	border-top: 1px solid #e2ded2;
	border-bottom: 1px solid #e2ded2;
}

/*.accountName { margin-top:12px }*/

#catNav {
	position:relative;
	top:30px;
	font-weight:bold;
	font-size:12pt;
	text-transform:uppercase;
	padding-left:18%;
}

#mainNav {margin-top:30px}
#mainNav ul { margin:auto;/*margin-left:30%*/ }


#mainNav ul li {
	/*text-transform:uppercase;*/
	font-size:15px;
	color:#818285 !important;
}

.navbar-default {
	border:none;
	/*border-bottom:2px solid #6D6E70;*/
	background-color: #111111 !important;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;/*#121212;*/
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.navbar-nav {
    float: right;
    margin: 0;
}

#currCatWrapper, #ProductsDisplay {float:left;padding-left:0;padding-right:0}
#currCatWrapper {text-align:left}

.subcat-container { width:220px;/*width:900px;*/padding:2%; }

.subcatDrop.row { /*width:30%;*/ padding:1%; float:left; }

#subcatWrapper { text-align:center; }

.subcatCols.col-lg-4.col-md-4.col-sm-6.col-xs-12.col-columns {display:block; text-align:center;}

.subcatCols img {margin:auto;}

.col-columns a.category {text-transform:capitalize;}

ul.dropdown-menu { width:auto; left: 0 !important; overflow: visible; }



/*
	.subcat-container { width:700px;padding:2%;columns:3 }
	ul#Balloons.dropdown-menu {margin-left:-30vw;}
	.subcatDrop { width:100%;padding:1%;float:left; 
	#subcatWrapper { text-align:center }
	.subcatCols .col-columns {display:block; text-align:center}
	.subcatCols img {margin:auto}
	.col-columns a.category {text-transform:capitalize }
	.subcatAccess.row {width:100%;padding-left:2%}
	ul#accessSub.dropdown-menu { width:90% }
*/



.btn-default, .btn-danger, .btn-success { 
	height: 40px;
	font-size: 14px;
	line-height:40px;
	color:#ffffff;
	display: block;
	margin:auto;
	padding:0 10px;
	font-weight:500;
	max-width:250px;
	border-radius:18px;
	border:none;
	text-align:center;
	position:relative;
}

.btn-default { 
	background:#e23325 !important; /*#818285,d5e1dc;*/ 
	color:#fff !important;
	/*border:2px solid #818285;*/
	border-radius:0px;
	transition: background 0.2s ease-in-out;
}

a.btn-default { 
	background:#818285;
	padding-top: 9px;
	color:#fff !important; /* RP had to add for ViewCart.tpl */
}

.btn.btn-default.search {background:#ffffff;height:32px;border:none}

.btn-default:hover {
    color: #019147;
    background-color: #bca57e;
    border-color: #bca57e;
}

.accountName {
	color: #818285; /* fff */
	margin-top: 7px;
}

#updateCart, #notFirst, #checkoutBtn, #viewCart { float:left;margin:.05%;margin-left:2% }

#CartOuter {margin:auto}

.cartBtn {float:left;margin-left:2%;width:150px}

#cartCheckout, #cartEdit { width:150px}
/*#cartEdit {margin-left:15%}*/
.cartItems td img {max-height:75px}

/*input[type=checkbox] {height:20px;width:20px}*/
/***********
4. Slideshow - Media
************/

#carousel-example-generic {width:75%;margin-left:12%}

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

.sub_ftr {
  vertical-align:bottom;
  width: 100%;
  /* Set the fixed height of the footer here */
  min-height: 300px;
  background-color: #f4f2ef;
}

#ftrLogo {padding-top:40px;text-align:center}
#ftrLogo #footerLogo {
	width:75%;
	text-align: center; 
	margin: 0 auto;
}

#footerSocial {
	text-align:center;
	margin: 0 auto;
	float:left;
	overflow:hidden;
	position:relative;
}

#footerSocial ul { 
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}


#footerSocial ul li {
	/*text-transform:uppercase;*/
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
	padding: 0 5px;
}

	#footer-bottom p {
		/*color: #fff;*/
		font-size: 12px;
	}

#ftrNav, #ftrCatNav {padding-top:40px}

/*footer h2, footer h3, footer h4 { color: #fff; }*/

/*footer a { color: #fff !important; text-decoration: none; }*/

/*footer a:hover { color: #fff; text-decoration: underline; }*/

ul.sm-icons {
    padding-left: 0;
    white-space: nowrap;
	justify-content: center;
}
.sm-icons li {
    list-style-type: none;
}
.widget-title { text-transform: uppercase; font-size: 16px; margin: 40px 0 20px; text-align: left;}

.branding {
	width: 100%; 
	margin: 0 auto;
}

.branding p {
	margin-bottom: 0;
}

.rep {
	min-height: 160px;
}

.shows {
	min-height: 200px;
}


/***********
6. OmegaNet Specific
************/

#loginLeft, #loginRight {float:left;width:50%;padding:0 10px;}

.loginInput {
	padding:8px;
	width:100%
}


/*tr.itemList:nth-child(even) {
    background-color: #eee;
}*/
.cat_item { height:600px}
.cat_content_bottom {
	padding-bottom: 20px;
}

.catCell {
	text-align: center;height: auto;height:400px /* This will probably need to be a number when images added */
}

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

h3.firstTime, h3.forgotPassword {font-size:18px}

#pageLoad { display: none; }

p.desc { text-align: justify; }

.AltImgThumb {
	width: 150px;
	padding: 0 1em 1em 0;
}

#cartText td, table.Cart th, table.Cart td { 
	border: 1px solid #aaa; 
	/*width: 25%;*/
}
#CartOuter {width: 80%;margin-left:10%}

h2.currentCat {
    font-size: 20px;
}

h3.reg { color: #333; text-align: center; }

#regContainer p.media {
	font-weight: bold;
	letter-spacing: 1px;
}

#regContainer p.media a {
	text-decoration: underline;
}

form#CATFORM { display: none; }

.currentCat {display:none; }

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

.editItemCheckout:hover, .go:hover, .addtocart:hover, .continueShopping:hover, .previous:hover, .submitChanges:hover {
    background-color: #bca57e !important;
}

.btn-default:hover {
    color: #333333;
    background-color: #bca57e !important;
    color: #fff !important;
}

#top-bar-l { text-align: left; }

#top-bar-r { text-align: right; margin-top: 15px; }

#top-bar-l a {
    color: #fff;
    display: block;
    padding: 18px 32px;
    position: relative;
    letter-spacing: 3px;
    text-decoration: none;
font: normal 11.5px Roboto Slab, serif;
    text-transform: uppercase;
    top: 0;
}
#top-bar-l a:hover {
    color: #bca57e;
}
.social i {
	font-size: 16px;
	font-weight: normal;
	color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin-right: 20px;
}

.social i:hover {
    color: #bca57e;
}


#breadcrumb {text-align:center;font-size:1.75em; }

#subCatLink {height:350px}
#subCatLink a {text-align:center;font-size:1.5em; }

.art-guide-block {float:left;height:400px}
.art-guide-number {font-weight:bold;color:#e23325;font-size:30px}
.writer-guide-block {float:left;height:500px}
p.guidelines-intro {text-align:center;font-size:20px;font-weight:bold}



/***********
8. Media Queries
************/

/*** Added this to try to center "sub" drop-down links ***/

@media (max-width: 768px) {
section.container.wrapper {
	padding:30px 10px 0 10px;
	min-height:300px;
}

	.qtyInput {
		width: 35% !important;
	}

	.rep, .shows {
		text-align: center;
	}
	.writer-guide-block {float:left;height:400px}

	.currentCat {display:block }
	#catNav {display:none }
	/*.btn {width:100%}*/ /* RP - 8-7-20 - in case messing something else up */
	#checkoutBtn {width:100%}
	footer.sub_ftr {height:1000px}
	#ftrLogo #footerSocial{margin-left:0; }
	#footerSocial li {width:33%;display:inline-block;float:left}

	#footerSocial li a:hover { background-color: transparent; }

	#footer-right ul.sm-icons {
    justify-content: center;}

	#footer-bottom p {
		text-align: center;
		margin-bottom: .5em;
	}

	#mainNav {
    margin-top: 0px;
	}

	#mainNav ul {margin-left:0;}
	nav#mainNav ul li a {text-align:center;}

	#top-bar ul.navbar-nav li {
    display: inline-block;
    text-align: center;
    /* float: right; */
	}

	#carousel-example-generic {width:100%;margin-left:0}

	.navbar {
     min-height: 0px; 
     margin-bottom: 0px; 
    border: 1px solid transparent;
	}

	.navbar-nav { float: none; }

	#top-bar-l { text-align: center; margin-top: -15px; }

	#top-bar-r { text-align: center; margin-top: 0; padding-bottom: 10px; }

	.cartBtn {float:left;margin-left:1%}

}


@media (max-width: 991px) {

	#footer-bottom {
		/*background-color: #000;*/
		padding: 15px 0;
		font-size: 12px;
		line-height: 1;
		/*position: absolute;*/
		position: relative;
		bottom: 0;
		width: 100%;
	}
	.detail-pop-alt-img-sub-div { float: left; }
	.detail-pop-alt-img { width: 100%; }
	#productsDisplay {width:100%}

}

@media (min-width: 768px) {
	html, body {width:100%}
	#outerWrapper {width:100%}
	.main-container {
	}

	.container { width: 100% !important; }

	.navbar-brand {width:100%;margin:auto;height:75px}
	#logoContainer {text-align: center;height:240px; max-width: 100%;}
	#logoContainer img {padding: 35px 0 10px 0; max-width: 800px; }
	#sidebarWrapper {margin-top:15px}
	#sidebarWrapper li, #ftrNav li, #ftrContact {
		margin:0;
		line-height:30px;
		font-family:'Playfair Display', 'Times New Roman', serif;
		font-style:italic;
		letter-spacing:1.5px;
	}
	#ftrNav li, #ftrContact {line-height:25px}
	#contactPage td {text-align:center;font-size:24px;line-height:38px}
	#breadcrumb {text-align:center;font-size:1.75em;}
	#mainNav { 
		margin: 0 auto;
		margin-top:30px
		float:left;
		width:100%;
		position:relative;

	}
	#mainNav.navbar.navbar-default {background-color:#111111}
	#mainNav ul { 
		clear:left;
		float:left;
		list-style:none;
		margin:0;
		padding:0;
		position:relative;
		left:50%;
		text-align:center;
	}

	#mainNav ul li {
		font: normal 13px Roboto Slab, serif;
		font-family: 'Roboto Slab';
		display:block;
		float:left;
		list-style:none;
		margin:0;
		padding:0;
		position:relative;
		right:50%;
		color:#818285 !important;
	}

	#catDropdown {display:none}

	ul.dropdown-menu { 
		width:auto; 
		left: 0 !important; 
		float: none !important;
	}

	ul.dropdown-menu li { 
		width:auto; 
		right: 0 !important; 
		float: none !important;
	}

	#mainNav ul li ul.dropdown-menu {width:200px}
	#mainNav ul li a { 
		color: #ffffff !important; 
/*		padding: 18px 28px;
*/		position: relative;
		font-weight: 600;
		font-size:20px;
		letter-spacing: 3px;
		text-decoration: none;
		transition: all .125s ease-in-out;
		-webkit-transition: all .125s ease-in-out;
	}

	#mainNav ul li a:hover { color: #ffffff !important; background-color:#e23325;   }

	ul.nav.navbar-nav li ul.dropdown-menu li {background-color:#111111}

	#top-bar-inner { max-width: 100%; margin: 0 auto; text-align: center; padding: 0;}
	#top-bar-inner p { font-size: 13px; color: #fff; text-align: center; margin-bottom: 0; }
	.navbar-nav>li>a {
 		padding-top: 10px;
		padding-bottom: 10px;
	}

	.navbar {
		border-radius: 0;
		min-height: auto;
		margin-top: 15px;
		
	}

	#footer-bottom {
		background-color: #f4f2ef;
		padding: 15px 0;
		font-size: 12px;
		line-height: 1;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
	}

}

@media (max-width: 767px) {
	#outerWrapper {width:100%;margin-left:5px}
	#logoContainer {max-width:90%}
	#logoContainer img {width:100%}

	ul.dropdown-menu li a.sublink { 
		width: 100vw;
		width: 100% !important;
		text-align: center !important;
		margin: 0 auto;
	}

	.subcat-container, .subcatDrop, col-columns {
		text-align: center !important;
		margin: 0 auto;
	}
	#catDropdown {display:block; width:100%}

	#currCatWrapper {display:none}
	#CartOuter {width:100%;margin-left:0}
}