.turn-by-turn-icon{
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  top: .1em;
  left: .75em;
  color: white;
}

.diamond{
  transform: rotate(-45deg);
  transform-origin: 0 100%;

cursor: pointer;
cursor: hand;
/*
border: 1px solid #669;
*/
border: 0;
background-color: #669;
height: 1.2em;
width: 1.2em;
padding: 0;
position; relative;
margin-top: 8px;
margin-left: 5px;
float: left;
}

#map{
width: 100%;
margin-bottom: -8px;
}

#map-overlay .diamond{

	height: 2em;
	width: 2em;

margin-top: 5px;
}

#map-overlay{

	position: absolute;
	z-index: 10001;
	top: 4em;
	left: 2em;
}

.map-directions-link{

	background-color: white;
	padding: .2em;
}


.map-info-h1{

	font-size: 2em;
	float: left;
}

.map-info-icon{

	margin-left: 1em;
}

.map-store-img-wrapper{

	float; left;
	margin-right: .5em;
	margin-bottom: .5em;
}

.page-header{

	background-color: transparent;

will-change: transform;
}

.swiper-slide .background{

	opacity: .8;
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	-khtml-opacity: 0.80;

}


#count-contents-navbar, #count-contents-collapse{


	position: absolute;
	z-index: 2;
	top: 10px;
	right: 14px;
	background-color: #EC44DE;
	min-width: 14px;
	max-width: 16px;
	min-height: 14px;
	max-height: 16px;
	border-radius: 8px;
	border: 1px solid #777;
	line-height: 12px;
	font-size: 10px;
	font-weight: bold;
	color: #000;
	font-family: arial;
	text-align: center;
	padding-left: 1px;
	padding-right: 2px;
}


#count-contents-navbar{

	top: 10px;
	right: 6px;
}



/* product-list + product-sheet */



#loading-screen-overlay{

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #669;



	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=40);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.40;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.40;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.40;

}

.loading-screen-overlay-hidden{

	z-index: -2;

	visibility: hidden;
}


.loading-screen-overlay-visible{

	z-index: 998;

	visibility: visible;
}


#loading-spinner{

	color: #fff;
	font-size: 6em;
}

#loading-spinner-container{


	position: fixed;

	top: 47%;
	left: 47%;

	color: #fff;

}

.loading-spinner-container-hidden{

	z-index: -2;
	visibility: hidden;	
}

.loading-spinner-container-visible{

	z-index: 999;
	visibility: visible;	
}



#loading-spinner-container::after{

	content: "Loading...";

	position: relative;

	bottom: -3em;
	left: -50%;

}



.buynow-counts{

	font-size: .85em;
}

#nav-bar-toggle{

	position: absolute;
	left: 5px;
	top: 0;
	font-size: 1.5em;
	color: #666699;

	visibility: hidden;
}

#nav-bar-toggle:hover{

	cursor: pointer;
}


.search-products-icon, .search-products-icon-activated{

	position: absolute;
	left: 0;
	color: #777;
	cursor: pointer;

	transform: scale(1);

/*	transition-timing-function: linear;
*/
  -webkit-transition: all .3s; 
  -moz-transition: all .3s; 
  -ms-transition: all .3s; 
  -o-transition: all .3s; 
  transition: all .3s;  

}

.search-products-icon-activated, .search-products-icon:hover{

	transform: scale(2);
	color: #669;
}



#start-search-container, #search-prompt-container{

	position: absolute;

	z-index: 25;	

	border-radius: .3em;
	border: 1px solid #669;

	  -webkit-transition: all .5s; 
	  -moz-transition: all .5s; 
	  -ms-transition: all .5s; 
	  -o-transition: all .5s; 
	  transition: all .5s; 

	background: #fff;

}


#start-search-prompt-input, #search-prompt-input{



	border: none;



	  -webkit-transition: all .5s; 
	  -moz-transition: all .5s; 
	  -ms-transition: all .5s; 
	  -o-transition: all .5s; 
	  transition: all .5s; 



	margin-left: .3em;
	margin-right: .3em;

	background: #fff;

}



#start-search-prompt-submit, #search-prompt-submit{

	position: relative;
	right: .25em;
	top: 0;
	font-size: 1.25em;

	cursor: pointer;

	visibility: hidden;
}


.search-prompt-collapsed{

	width: 0px;
	height: 0px;
	visibility: hidden;


	max-height: 0px;
	max-width: 0px;


}

.search-prompt-expanded{

	width: auto;
	height: auto;
	visibility: visible;

	max-height: 100%;
	max-width: 100%;
}


.search-options{

	color: #bbb;
	line-height: 2.5em;
	white-space: nowrap;

	padding-right: 2em;
}


.search-options > label{

	font-weight: normal;
}



.highlighted{

	background-color: #FFFF00;
}

#filter-nav-bar{

	height: auto;
	padding-bottom: .5em;


	transition-timing-function: ease-in-out;

  -webkit-transition: max-height 2s; 
  -moz-transition: max-height 2s; 
  -ms-transition: max-height 2s; 
  -o-transition: max-height 2s; 
  transition: max-height 2s;  

}


.filter-nav-bar-opening, .filter-nav-bar-opened, .filter-nav-bar-closed{

	max-height: 900px;
}




	@media screen and (max-width: 1000px) {



		.navbar-default .navbar-nav > li > a:hover .badge{

			top: 10px;
		}


		#nav-bar-toggle{

			visibility: visible;
		}


		.filter-nav-bar-closed{

			max-height: 2em;
		}



.filter-nav-bar-opening, .filter-nav-bar-closed{

	overflow: hidden;
}

.filter-nav-bar-opened{

	overflow: visible;
}


		#filter-nav-bar{

			min-height: 2em;

/*			overflow: hidden;
*/
		}

		#filter-nav-bar > .container{

			padding-top: 1.5em;

		}



		#product-gallery{

			padding: 1em 0;
		}

		#categories-selector > .list-group-item.list-group-label{

			margin-bottom: 0;
			float: none;

		}

		#categories-selector > .list-group-item{

			float: left;
			padding: 5px 1em 0 0;


		}

		.list-group-item.style-2 a {

			padding: 0;
		}

	}





#filter-nav-bar .btn{

	text-transform: uppercase;
}



#filter-nav-bar .btn{

	margin-top: .75em;
}

#filter-nav-bar .dropdown-menu{
    max-height: 200px !important;
    overflow-y: auto !important;

	text-transform: uppercase;

}


.active-main-cat{


	font-size: 1.5em;
	font-weight: bold;
	color: #669;



}


.page-stats{

	color: #666699;

	clear: both;
}

.item-grid-row{

	display: flex; /* equal height of the children */
	flex-direction: row;
	flex-wrap: wrap;

}


#product-sheet .img-product::after{

	background-image: none;
}

.product-detail-titles, .reviews-titles{

	color: #444;
	font-size: .85em;
	font-weight: bold;
}
.product-details{

	float: left;
	margin: .25em 20px 0 0;
}

.fa.fa-ban{

	color: red;
}

.fa.fa-refresh, .fa.fa-leaf{

	color: green;
}
.fa.fa-rotate-left{

	color: blue;
}


.btn-lg{

	margin-bottom: 5px;
}



#product-gallery article div.available-sizes-selector{

	padding: 5px 0;
}

div.available-sizes-selector > .btn{

	background-color: #666699;
}




/* deal with product images that MIGHT overlap when hovered and scaled up */


#product-gallery article figure img{

	z-index: 0;
}


#product-gallery article figure:hover img{

	z-index: 1;
}


#product-gallery article a.add-to-cart{

	z-index: 2;
}

/* Available Sizes select box on product-sheet */


/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    .available-sizes > select {padding-right:18px}
}

label.available-sizes {position:relative; margin-bottom:20px; }
label.available-sizes:after {
    content:'<>';
    font:20px "Consolas", monospace;
    color:#22225d;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:2px solid #22225d;
    position:absolute;
    pointer-events:none;
}
label.available-sizes:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#e6e0e0;
    position:absolute;
    pointer-events:none;
    display:block;
}

.available-sizes > select {
    padding:4px 3em 4px 10px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #e6e0e0;
    color:#669;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* END Available Sizes */


#img1{
	background-size: cover;
	background-position: 66% 0%;
	background-repeat: no-repeat;
}


#delivery-header, #title-7, #title-6, #title-4, #title-3, #title-1{

	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
}


#title-1{
	background-position: 100% 0px;
}
#title-6{
	background-position: 50% 30%;
}

#delivery-header{

	background-position: 50% 40%;

}

#title-3, #title-4{

	background-position: 50% 60%;

}
#title-7{

	background-position: 25% 65%;
	height: 620px;

}



    @media screen and (max-width:1600px){


	#title-7{

		height: 520px;

	}


    }


    @media screen and (max-width:1200px){


	#title-7{

		height: 420px;

	}


    }



    @media screen and (max-width:1000px){

	#title-7{

		height: 380px;

	}


    }


    @media screen and (max-width:780px){

	#title-7{

		height: 320px;
	}


    }


    @media screen and (max-width:581px){

	 #title-6{

		background-size: auto 350px;
	}
	#title-7{

		background-size: auto 250px;
		height: 250px;

	}

    }






/*--  Forms --*/



#send-hvpt-label{


	padding-right: 1em;
}

/* START Send Message Form styles */


.form-error{

	-webkit-box-shadow: 0em 0em .6em 0em #852E37; /*css 3 shadows*/
	-moz-box-shadow: 0em 0em .6em 0em #852E37;
	box-shadow: 0em 0em .6em 0em #852E37;

}


.form-container{

	position: relative;
}


.form-shield{

	position: absolute;
	visibility: hidden;
	z-index: 9000;

//background: #000;
//opacity: .2;

	margin: 0px;
	padding: 0px;

	width: 100%;
	height: 100%

	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;

}

.form-prompt{

  position: fixed;

  z-index: 9001;
  visibility: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: white;

  width: 20em;
  text-align: center;


  border: .3em groove #214C8D;

  padding: 0em 0em 2em 0em;

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=80);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.80;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.80;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.80;

	-webkit-transition: visibility .25s linear;
	-moz-transition: visibility .25s linear;
	-o-transition: visibility .25s linear;
	-ms-transition: visibility .25s linear;
	transition: visibility .25s linear;


	-webkit-box-shadow: 4px 6px 8px 6px #777; /*css 3 shadows*/
	-moz-box-shadow: 4px 6px 8px 6px #777;
	box-shadow: 4px 6px 8px 6px #777;


}

.form-prompt-msg{

	margin: 0em 0em 1em 0em;
}



#mobile-test{

	position: absolute;
	z-index: -1;
	width: 0px;
	height: 0px;
	top: -4px;
	left: -4px;
}


/* Smartphones (portrait and landscape) --  --  --  --  -- - */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {



	#mobile-test{
	
		height: 1px;

	}
}


/* Button */

	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		border: 0;
		border-radius: 0;
		cursor: pointer;
		display: inline-block;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 700;
		height: 2.75em;
		line-height: 2.75em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		.button.icon {
			padding-left: 1.35em;
		}

			.button.icon:before {
				margin-right: 0.5em;
			}

		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		.button.small {
			font-size: 0.8em;
		}

		.button.big {
			font-size: 1.35em;
		}

		.button.disabled,
		.button:disabled {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			opacity: 0.25;
		}

	.button {
		background-color: transparent;
		color: #444 !important;
		box-shadow: inset 0 0 0 1px #444;
	}

		.button:hover {
			background-color: #f6f6f6;
		}

		.button:active {
			background-color: #e2e2e2;
		}

		.button.special {
			box-shadow: none;
			background-color: #444;
			color: #fff !important;
		}

			.button.special:hover {
				background-color: #515151;
			}

			.button.special:active {
				background-color: #373737;
			}

/* END Send Message Form styles */