/* HEADER COMPONENTS */

.header-section, .subfooter-section {
		background-image:url("../images/bg-header.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position:left top;
		position: relative;
}

	
	@media only screen and (min-width: 40.063em) {
		.header-section .left-utilbox{
			margin-top:30px;}
		.header-section .right-utilbox{
			margin-top:30px;}
	}

	.left-utilbox input{
		height: 1.75rem;
		padding: 0.25rem;
		font-size:0.9rem;
		margin-bottom: 0.5rem;}

	.left-utilbox .button{
		height: 1.75rem;
		line-height: 1.75rem;
		font-size:0.9rem;
		margin-bottom: 0.5rem;}

	 .right-utilbox .button{
		font-size:0.9rem;
		padding: 0.25rem 1rem;
		margin-bottom: 0.5rem;}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

.fullwidth {
	max-width: 100%;}


.logo {
	padding: 0.4em;
}

/* hides parent links in top-nav submenus in mobile view */
li.parent-link.show-for-small-only {
	width: 100%; }

.top-bar-section .has-dropdown > a:after {
        content: "\25BC";
        display: block;
        border: none;
        margin-top: 0;
		right: 0.5rem;
        top: 0; }


/* SLICK SLIDER CUSTOMIZATIONS */
.slick-prev:before, .slick-next:before { 
    color:grey;}

.slick-slider {
	margin-left: 30px;
	margin-right: 30px;
	height: auto;
}

.slick-slide img {
    display: inline-block;
}

.rotlogo {
	padding-left: 2rem;
	padding-right: 2rem;}

input.pieces {
	width: 2.8rem;
	display: inline;}

input.piecesEdit {
	width: 2.8rem;
	display: inline;}

.reddisc {
	color: red;
	font-weight:bold;}

.band {
	background: none repeat scroll 0% 0% #BFEAB4;
	background-size: 100% 100%;
	position: relative;
	height: 0.2rem;
	}

label.disabled { 
	text-decoration: line-through;
	color: grey;}

/* BODY COMPONENTS */
.body-section {
		padding: 0.5rem;
}


.reveal-modal-bg {
position: fixed;
}

#loadingDiv{
	display:none;
	height: 50px;
	width: 50px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -25px 0 0 -25px;
	z-index:100000;
}

#loginModal{
	max-width: 50rem;}
	@media only screen and (max-width: 40em) {
		#loginModal {
			padding-top: 2.8rem;
			padding-left: 0.2rem;
			padding-right: 0.2rem;}
	}

	#loginModal .error{
		font-size: 70%;
	}

#popupModal, #popupModal2{
	max-width: 40rem;}

@media only screen and (max-width: 40em) {
.small-smaller {
  font-size: 0.8rem;
  line-height: inherit; }
  
.small-slimpadding {
	padding: 0.2rem !important;}
  }


.smaller {
  font-size: 80%;
  line-height: inherit; }

.label {
	white-space:normal;
	text-align: left;
}

.accordion.noindent {
	margin-left: 0;
}

.accordion-navigation > a {
	padding: 0.4rem !important;
}

.row.modalbody {
	padding-right: 2rem;}

.slimpadding {
	padding: 0.3rem !important;}

.slimtopborder {
	margin-top: 0.3rem !important;}

.nopadding {
	padding: 0 !important;}

@media only screen and (max-width: 40em) {
	.small-nopadding {
		padding: 0 !important;}
}

.noleftpadding {
	padding-left: 0 !important;}

.nobottommargin {
	margin-bottom: 0 !important;}

.nomargin {
	margin: 0 !important;}

.norightmargin {
	margin-right: 0 !important;}


.right-align {
    text-align: right;}

.togglebtns {
	display: inline !important;
	}

.togglebtns.pushed{
	background: grey;
	}


#prodconfig select,label,input {
	margin-bottom:0.4rem !important; }

#prodconfig #shaftpicholder, #grippicholder {
	margin-bottom:0.4rem !important; }

#PriceBox {
	margin-bottom:0 !important; }

#prodconfig {
	padding-bottom: 0 !important;}

.listitem {
	font-size: 60%;
	font-style: italic; }
	
.basketrow {
	padding-bottom: 0.5rem}

.selrow:hover {
		background: #F8F8F8 ;}


/* GLOGAL FOUNDATION OVERRIDES */

.row {
  max-width: 73.125em;
 }
.contain-to-grid .top-bar {
    max-width: 73.125em;
}


@media only screen and (max-width: 40em) {
    .reveal-modal, dialog {
      min-height: 0;
	  width: 95vw;
	  right:0px;
	  left:0px;
	  margin: auto;}}


.reveal-modal .button {
	  margin-bottom: 0;}

.top-bar-section ul li {
	background: none repeat scroll rgba(0, 0, 0, 0);}

.top-bar-section li:not(.has-form) a:not(.button) {
	background: none repeat scroll rgba(0, 0, 0, 0);}

.top-bar-section ul li > a {
	color: black;}

.panel.callout {
	background: none repeat scroll 0% 0% rgba(105, 233, 141, 0.41);
}


@media only screen and (min-width: 64.063em) {
	.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
		color: #FFFFFF;
		background: none repeat scroll 0% 0% rgba(77, 77, 77, 0.90) }}


.f-dropdown .divider {
  border-top: solid 1px #1a1a1a;
  clear: both;
  height: 1px;
  width: 100%;
}


.transparent {
	background: none repeat scroll rgba(0, 0, 0, 0);}

.grey-transparent {
	background: none repeat scroll rgba(27, 27, 27, 0.17);}

.bold {
	font-weight: bold;}

hr {
	margin: 0.2rem 0 0.2rem 0;}

/* UI blocks */

.prodtitle H1 {
	font-size: 1.75rem;
}
.prodbox {
	color: grey;
	background-color: white;
	border:1px solid transparent; 
	text-align: center;
	position: relative;
	cursor: Pointer;
	margin-left:0px !important;}

.prodbox:hover {
	border:1px solid grey; 
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	}	

.header_special,.header_saleout,.header_tips {
	border:1px solid transparent; 
	cursor: Pointer;
}

.header_special a,.header_saleout a,.header_tips a{
	color: black;
}

.header_special:hover,.header_saleout:hover,.header_tips:hover {
	border:1px solid grey; 
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	}	

.sectionheader H1 {
	font-size: 1.55rem;
}

.prodbox .pic { 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
   justify-content: center;
   webkit-align-content: stretch;
   ms-flex-line-pack: stretch;
   align-content: stretch;
   -webkit-box-align: center;
   -moz-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   margin: 0px;

/*  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;*/

/*  min-height: 10rem;*/

}

.prodname {
	color: grey;
	font-weight: bold;
	width:100% !important;}

.centerpic {
	max-width:100%;}

/* this is a hack for verticall center flexbox in IE11 */
@media only screen and (max-width: 40em) {
	.centerpic:before {
		min-height: 5rem;
	}
}

.centerpic:before {
	content:"";
	min-height: 10rem;
	display: inline-block;
	vertical-align: middle;
}

.prodbox .sticker {
	position:absolute;
	z-index:1;
	top:0.6rem; right:0.6rem;
	background-color: rgba(249, 251, 95, 0.6);
	font-size:0.75rem;
	color: black;
	border:1px solid #FF0000; 
	padding:0.5rem; 
	border-radius: 2rem; 
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.prodbox .sticker.green{
	background-color: rgba(160, 249, 51, 0.6);
}

.prodbox .sticker.red{
	background-color: rgba(249, 151, 95, 0.6);
}

.prodbox .sticker.trans{
	background-color: rgba(0, 0, 0, 0);
	border:0px solid #FF0000; 
}


.prodbox .sticker_tips {
	position:absolute;
	z-index:1;
	top:0.6rem; left:0.6rem;
	color: black;
	background-color: rgba(102, 204, 255,  0.6);
	font-size:0.75rem;
	border:1px solid #FF0000; 
	padding:0.5rem; 
	border-radius: 2rem; 
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.prodbox .sticker_tools {
	position:absolute;
	z-index:1;
	color: black;
	bottom:0.6rem; right:0.6rem;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}


.tabs .tab-title > a {
	padding: 0.6rem 0.7rem;}

.tabs .tab-title.active {
	border-left: 1px solid grey;
	border-top: 1px solid grey;
	border-right: 1px solid grey;
	margin-bottom: -1px !important; /* -1 margin to move tab down 1px */
}

.tabs {
	border-bottom: 1px solid grey;}

.lbl_note {
	font-size:0.80em;
	font-style: italic; }

.italic {
	font-style: italic; }

.grey {
	color: grey;}

.origprice {
	font-size:smaller;
	color:grey;
	text-decoration: line-through;
}

.noborder {
        border: none;}

.header_saleout{
	background-color:  rgba(217, 217, 217, 0.7);
	}

.header_special{
	margin-top: 1rem;
	background-color:  rgba(217, 217, 217, 0.7);
	}

.header_tips{
	margin-top: 1rem;
	background-color:  rgba(217, 217, 217, 0.7);
}

.price {
	color:black;
	font-size: 0.9rem;
	font-weight:bold;}

.stock {
	font-size: 1.1rem;
	font-style: italic;
	font-weight:bold;}

.instock {
	font-size: 0.7rem;
	font-style: italic;
	font-weight:bold;}

.main-content {
	border-style: solid;
	border-width: 1px;
	border-color: #dddddd;
}

/* FOOTER customization */

.footer-section {
	background: none repeat scroll 0% 0% #E0E0E0;
	background-size: 100% 100%;
	position: relative;
	padding: 0.3rem;
	margin: 0rem;
	}

