/*
Theme Name: eComm
Author: Antoni Cornejo
Description: eComm store theme.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0
License: Copyright
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/


body{
	width:100vw;
	margin:0;

	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;

	position:relative;

	overflow-x:hidden;

}


main{
	width:98%;
	max-width:1500px;

	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;

	position:relative;
}

main > div{
	padding-left:2.5%;
	padding-right:2.5%;
}





/*region overlay*/


body > div.region-overlay{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	width:100vw;
	height:100vh;
	z-index:666;

	justify-content:space-around;
	align-items:center;
}

body > div.region-overlay > div.region-pick-overlay{
  background:white;

  padding:75px;

  padding-left:50px;
  padding-right:50px;

  max-width:1000px;

  width:90%;

  flex-direction:column;

  justify-content:flex-start;
}

body > div.region-overlay > div.region-pick-overlay > h1{
	color:black;
	max-width:90%;
}

body > div.region-overlay > div.region-pick-overlay a{
	cursor:pointer;
}

body > div.region-overlay > div.region-pick-overlay > a.back-button{
	display:none;
	color:blue;
	font-size:300%;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container{
	padding:15px;
	width:100%;

	flex-wrap:wrap;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container a{
	background:blue;
	color:white;
	padding:10px;
	padding-left:25px;
	padding-right:25px;
	margin-right:10px;

	text-decoration:none;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container > div.parent-regions{
	flex-wrap:wrap;
	width:100%;
	align-items:flex-start;
	justify-content:center;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container > div.parent-regions > a{
	margin-bottom:20px;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container > div.subregions-container{
	display:none;
	width:100%;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container > div.subregions-container > div.subregions{
	display:none;
	width:100%;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
}

body > div.region-overlay > div.region-pick-overlay > div.regions-container > div.subregions-container > div.subregions > a{
	margin-bottom:20px;
}


body > div.region-test-overlay{
	position:fixed;
	bottom:5%;
	right:5%;
	padding:25px;

	background:rgba(0,0,0,0.8);

	z-index:666;

	flex-direction:column;

	align-items:flex-start;
}

body > div.region-test-overlay > a{
	padding:5px;
	color:white;
}




/*loading overlay etc*/

body > div#overlay{
	position:fixed;
	width:100%;
	min-height:100%;
	background:rgba(0,0,0,0.5);
	z-index:666;
	top:0;
	left:0;

	/*display:flex;*/
	display:none;
}

body > div#overlay > div.container{
	height:350px;
	width:350px;

	background:white;
	border-radius:10px;
	border:1px solid black;
}

body > div#overlay > div.container > div.img-container{
	height:90%;
	width:90%;
}

body > div#overlay > div.container > div.img-container > img{
	object-fit:contain;
	animation: pulse 3.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}








div{
	display:flex;
	justify-content:space-around;
	align-items:center;

	box-sizing:border-box !important;
}

div > *{
	flex-shrink:0;
}

div > div{
	flex-shrink:0;
}





a.button-style{
	background:black;
	color:white;
	padding-top:2.5vh;
	padding-bottom:2.5vh;
	padding-left:5vw;
	padding-right:5vw;
	border:1px solid white;
}


.boxshadow{
	  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2),
             inset 0 -3px 3px rgba(255, 255, 255, 0.2);
}

.boxshadow-light {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), /* Smaller offset and lower opacity for bottom shadow */
             inset 0 -1px 1px rgba(255, 255, 255, 0.1); /* Smaller offset and lower opacity for top inset shadow */
}



.style-function-cta{
	transition: color 0.1s ease-in-out;
}

.style-function-cta:hover{
	color:orange !important;
}




div.img-container > img{
	width:100%;
	height:100%;
	object-fit:cover;
}



form{
	display:flex;
	flex-direction:column;
}

form > div{
	flex-direction:column;
}



header{
	width:100vw;
}


header > div.header-container{
	flex-direction:column;
	width:100%;
}

header > div.header-container > div{
	width:100%;
	justify-content:space-between;
	padding-left:3%;
	padding-right:3%;
	padding-top:10px;
	padding-bottom:10px;
}


header > div.header-container > div.top{
	background:darkblue;

}



header > div.header-container > div.top a{
color:white;
}

header > div.header-container > div.top i{
	color:white;
}



header > div.header-container > div.top > div.logo-container{
}



header > div.header-container > div.top > div.logo-container > a > img{
	width:350px;
	height:auto;
}





header > div.header-container > div.top > div.short-logo-container{
	/*display:flex;*/
	display:none;
}

header > div.header-container > div.top > div.short-logo-container > a > img{
	width:10vw;
	height:auto;
}






header > div.header-container > div.top > div.search{
	position:relative;
	width:40vw;
	height:50px;
	background:white;
	border-radius:10px;
	padding-right:10px;
}

header > div.header-container > div.top > div.search > input{
	height:100%;
	width:90%;
	background:none;
	border:none;

	padding-left:2.5%;
}

header > div.header-container > div.top > div.search > input:focus{
	outline:none;
}

.search-focus {
  animation: focus-glow 0.3s ease-in-out forwards;
}

@keyframes focus-glow {
  from { box-shadow: 0 0 0 2px rgba(0, 128, 255, 0); }
  to { box-shadow: 0 0 0 4px rgba(3, 158, 3, 1); }
}


header > div.header-container > div.top > div.search > button{
	width:10%;
	height:100%;
	background:none;
	border:none;
}

header > div.header-container > div.top > div.search > button > i{
	color:black;
}



header > div.header-container > div.top > div.search > div.suggestions-container{
	position:absolute;
	top:100%;
	min-width:100%;
	width:auto;
	height:auto;
	min-height:0;
	background:white;
	z-index:9999;
	border:1px solid black;

	flex-direction:column;
	align-items:flex-start;


	padding-left:2.5vw;
	padding-top:4vh;
}


header > div.header-container > div.top > div.search > div.suggestions-container:hover{
	display:flex !important;
}

header > div.header-container > div.top > div.search > div.suggestions-container a{
	margin-bottom:2vh;
	color:black;
	z-index:9999;

	text-decoration:none;

}

header > div.header-container > div.top > div.search > div.suggestions-container a:hover{
	color: darkorange;
	text-decoration:underline;
}

header > div.header-container > div.top > div.search.mobile{
	width:65vw;
}




header > div.header-container > div.top > div.right{
	position:relative;
}

header > div.header-container > div.top > div.right > div{
	margin-right:25px;
}



header > div.header-container > div.top > div.right > div.locale{
	/*position:relative;*/
	font-size:20px;
	padding:2.5%;
}


header > div.header-container > div.top > div.right > div.locale > i.flag-icon{
	border:1px solid black;
}

header > div.header-container > div.top > div.right > div.locale > a{
	margin-left:5px;
}

header > div.header-container > div.top > div.right > div.locale > i.fa-caret-up{
	margin-left:5px;
}

header > div.header-container > div.top > div.right > div.locale > div.submenu{
	position:absolute;
	top:100%;
	/*background:green;*/
	background:white;
	height:auto;

	padding:2.5%;

	/*display:flex;*/
	display:none;

	flex-direction:column;
	align-items:flex-start;
	z-index:3;
}

header > div.header-container > div.top > div.right > div.locale:hover > div.submenu{
	display:flex;
}



header > div.header-container > div.top > div.right > div.locale > div.submenu > div{
	margin-top:2.5vh;
	margin-left:5px;
	text-decoration:none;
}

header > div.header-container > div.top > div.right > div.locale > div.submenu > div a{
		text-decoration:none;
		margin-right:5px;
		color:black;
}

header > div.header-container > div.top > div.right > div.locale > div.submenu > div:last-child{
	margin-bottom:1.5vh;
}










header > div.header-container > div.top > div.right > div.account{

	padding:2.5%;

}


header > div.header-container > div.top > div.right > div.account > div.container{
	flex-direction:column;
	margin-right:5px;
}

header > div.header-container > div.top > div.right > div.account > div.container > a > i{
	font-size:20px;
}




header > div.header-container > div.top > div.right > div.account > div.submenu{
	/*display:flex*/
	display:none;

	position:absolute;
	top:100%;

	padding:2.5%;

	background:white;

	flex-direction:column;
	align-items:flex-start;

	z-index:3;
}


header > div.header-container > div.top > div.right > div.account > div.submenu > a{
	margin-right:10px;
	margin-left:10px;
	color:black;
}


header > div.header-container > div.top > div.right > div.account:hover > div.submenu{
	display:flex;
}



header > div.header-container > div.top > div.right > div.account > div.submenu > a{
	margin-top:2.5vh;
	margin-left:5px;
	text-decoration:none;

	white-space:nowrap;
}


header > div.header-container > div.top > div.right > div.account > div.submenu > a:last-child{
	margin-bottom:1.5vh;
}








header > div.header-container > div.top > div.right > div.cart{
	padding:2.5%;
}

header > div.header-container > div.top > div.right > div.cart > a.overlay{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-direction:row;
	text-decoration:none;
}

header > div.header-container > div.top > div.right  > div.cart > a.overlay > i {
	font-size:20px;
}

header > div.header-container > div.top > div.right  > div.cart > a.overlay > span.number{
	color:orange;
	font-weight:bold;
	font-size:27.5px;
	margin-left:5px;
}




header > div.header-container > div.top > div.mobile-container{
	/*display:flex;*/
	display:none;
	padding-right:3%;
}


header > div.header-container > div.top > div.mobile-container > div.mobile-search-button-container{
	margin-right:20px;
}

header > div.header-container > div.top > div.mobile-container > div.mobile-search-button-container > a{
	cursor:pointer;
}

header > div.header-container > div.top > div.mobile-container > div.mobile-search-button-container > a > i{
	font-size:20px;
}



header > div.header-container > div.top > div.mobile-container > div.menu-button-container{

}

header > div.header-container > div.top > div.mobile-container > div.menu-button-container > a{
	cursor:pointer;
}

header > div.header-container > div.top > div.mobile-container > div.menu-button-container > a > i{
	font-size:30px;
}


header > div.header-container > div.top > div.close-search-container{

	display:none;
	/*display:flex;*/

	margin-right:3%;
}

header > div.header-container > div.top > div.close-search-container > a{
	cursor:pointer;
}

header > div.header-container > div.top > div.close-search-container > a > i{
	font-size:30px;
}






header > div.header-container > div.bottom{
	background:blue;
}


header > div.header-container > div.bottom a {
	color:white;
	text-decoration:none;
  transition: color 0.3s ease-in-out;
}

header > div.header-container > div.bottom a:hover {
  color: #cccccc;
}








@media all and (max-width:1200px){
	header > div.header-container > div.top > div.logo-container > a > img{
		width:200px;
	}
}

@media all and (max-width:768px){

	header > div.header-container > div.top > div.logo-container > a > img{
		width:40vw;
	}

	header > div.header-container > div.top{
		background:blue;
	}
	header > div.header-container > div.top > div.right{
		display:none;
	}

	header > div.header-container > div.top > div.search{
		display:none;
	}


	header > div.header-container > div.top > div.mobile-container{
		display:flex;
	}

	header > div.header-container > div.top > div.search{
		width:25vw;
	}

	header > div.header-container > div.bottom{
		display:none;
	}
}

@media all and (max-width:320px){
}







header > div.mobile-menu-container{
	height:100vh;
	min-width:100vw;
	overflow:scroll;
	position:absolute;
	top:0;
	left:0;
	background:blue;
	z-index:999999;
	flex-direction:column;
	justify-content:flex-start;

	color:white;

	font-size:35px;

	/*display:flex;*/
	display:none;
}

header > div.mobile-menu-container > div{
	width:100%;
	padding-left:50px;
	padding-right:50px;
	padding-top:10px;
	padding-bottom:10px;

	justify-content:space-between;
}




header > div.mobile-menu-container > div.top{
	margin-bottom:50px;
	border-bottom:1px solid white;
	padding-top:20px;
	padding-bottom:20px;
}


@media all and (max-width:768px){
	header > div.mobile-menu-container > div.top{
		padding-left:15px !important;
		padding-right:15px !important;
	}
}

header > div.mobile-menu-container > div.top > div.img-container > img{
	width:200px;
	height:auto;
}


header > div.mobile-menu-container > div.top > a{
	cursor:pointer;
}

header > div.mobile-menu-container > div.top > a.close > i{
	font-size:35px;
	color:white;
}


header > div.mobile-menu-container > div.items-container{
	flex-direction:column;

}

header > div.mobile-menu-container > div.items-container > div.item{
	width:100%;
	flex-direction:column;

	border:1px solid white;

	justify-content:space-between;

	padding:15px;

	margin-bottom:30px;

	cursor:pointer;

}

header > div.mobile-menu-container > div.items-container > div.item div{
	width:100%;
}

header > div.mobile-menu-container > div.items-container > div.item > div.top{
	justify-content:space-between;
	z-index:11;
}




header > div.mobile-menu-container > div.items-container > div.item > div.top > a.overlay{
	width:100%;
	text-decoration:none;
	color:white;
}






header > div.mobile-menu-container > div.items-container > div.item > div.content{
	flex-direction:column;

	align-items:flex-start;

	/*display:flex;*/
	display:none;
}

header > div.mobile-menu-container > div.items-container > div.item > div.content > a{
	margin-bottom:20px;
	margin-left:45px;
	text-decoration:none;
	color:white;
}



header > div.mobile-menu-container > div.items-container > div.item.language > div.top > div.left{
	width:auto;
}

header > div.mobile-menu-container > div.items-container > div.item.language > div.top > div.left > a.label{
	margin-right:25px;
}






/* HOMEPAGE */



div.homepage-container{
	width:100%;
	overflow:hidden;

	flex-direction:column;

	padding-top:0;
}

div.homepage-container > div.top-slider-container{
	height:70vh;
	width:100%;
	justify-content:space-between;
	border:1px solid black;
	background:white;
}


@media all and (max-width:1000px){
	div.homepage-container > div.top-slider-container{
		height:auto;
		flex-direction:column;
	}
	div.homepage-container > div.top-slider-container > div.slider{
		height:75vh !important;
		width:100% !important;
	}
	div.homepage-container > div.top-slider-container > div.content{
		height:auto !important;
		width:100% !important;
		overflow:hidden;
		padding-top:2.5vh;
		padding-bottom:2.5vh;

		justify-content:space-between;
	}

		div.homepage-container > div.top-slider-container > div.content h1{
			margin-top:0;
		}

	div.homepage-container > div.top-slider-container > div.content > div.buttons-container{
		width:50% !important;
		justify-content:space-around;
	}
}


div.homepage-container > div.top-slider-container > div.slider{
	height:100%;
	width:75%;
	border:1px solid black;

	background:black;
}


div.homepage-container > div.top-slider-container > div.slider > div.slide{
	display:none;
	width:100%;
	height:100%;
	overflow:hidden;
}

div.homepage-container > div.top-slider-container > div.slider > div.slide.active{
	display:flex;
}

div.homepage-container > div.top-slider-container > div.slider > div.slide > img{
	height:100%;
	width:100%;
	object-fit:cover;
}



div.homepage-container > div.top-slider-container > div.content{
	width:25%;
	height:100%;

	flex-direction:column;
	justify-content:space-around;

	align-items:center;
}

div.homepage-container > div.top-slider-container > div.content > h1{
	text-align:center;
}

div.homepage-container > div.top-slider-container > div.content > div.buttons-container{
	width:100%;
	justify-content:space-around;
}

div.homepage-container > div.top-slider-container > div.content > div.buttons-container > a{
	padding-left:7.5%;
	padding-right:7.5%;
	padding-top:2.5%;
	padding-bottom:2.5%;
	border:1px solid black;

	font-weight:bolder;
	font-size:150%;

	background:blue;
	color:white;

	transition: color 0.3s ease-in-out;

	cursor:pointer;

}


div.homepage-container > div.top-slider-container > div.content > div.buttons-container > a:hover {
  color: #cccccc;
}

div.homepage-container > div.top-slider-container > div.content > div.buttons-container > a:active{
	border-color:#cccccc;
}



div.homepage-container > div.top-slider-container > div.content > div.buttons-container > a > i{
}







div.homepage-container > div.boxes-container{
	width:100%;
	margin-top:2.5vh;

  display: grid;
  place-items:center;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap:5px;
}

div.homepage-container > div.boxes-container > div.four-box:nth-child(4){
	display:none;
}


@media all and (max-width:1280px){
	div.homepage-container > div.boxes-container{
		grid-template-columns: repeat(2, 1fr);
	}

	div.homepage-container > div.boxes-container > div.four-box:nth-child(4){
		display:flex;
	}
}

@media all and (max-width:850px){
	div.homepage-container > div.boxes-container{
			grid-template-columns: repeat(1, 1fr);
	}
	div.homepage-container > div.boxes-container > div.four-box{
		width:700px;
		height:700px;
		display:none;
	}

		div.homepage-container > div.boxes-container > div.four-box:nth-child(4){
		display:flex;
	}
}


@media all and (max-width:715px){
	div.homepage-container > div.boxes-container > div.four-box{
		width:400px;
		height:400px;
	}

	div.homepage-container > div.boxes-container > div.four-box:nth-child(3){
		display:flex;
	}
	
}

@media all and (max-width:500px){
	div.homepage-container > div.boxes-container > div.four-box{
		width:98%;
	}

	div.homepage-container > div.boxes-container > div.four-box:nth-child(3){
		display:flex;
	}
	
}




div.homepage-container > div.display-container{
	width:100%; 

	flex-direction:column;

	padding-left:2.5%;
	padding-right:2.5%;
}

div.homepage-container > div.display-container > div.display{
	width:100%;

	height:75vh;

	background:white;

	margin-bottom:2.5vh;

	border:1px solid black;
}


div.homepage-container > div.display-container > div.display > div.img-container{
	width:75%;
	height:100%;
}

div.homepage-container > div.display-container > div.display > div.img-container > img{
	height:100%;
	width:100%;
	object-fit:cover;
}

div.homepage-container > div.display-container > div.display >  div.content{
	width:25%;
	height:100%;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
}

div.homepage-container > div.display-container > div.display >  div.content > *{
	width:80%;
	text-align:center;
}

div.homepage-container > div.display-container > div.display >  div.content > p{
	text-align:left;
	line-height:25px;
}

div.homepage-container > div.display-container > div.display >  div.content > a{
	color:white;
	cursor:pointer;
	padding-top:15px;
	padding-bottom:15px;
	background:blue;
	text-decoration:none;
}

@media all and (max-width:850px){
	div.homepage-container > div.display-container > div.display{
		height:auto;

		flex-direction:column;
	}

	div.homepage-container > div.display-container > div.display > div.img-container{
		height:80vh;
		width:100%;
	}

	div.homepage-container > div.display-container > div.display >  div.content{
		height:auto;
		width:100%;
		padding-bottom:15px;
	}
}









div.homepage-container > div.products-container{
	flex-direction:column;
	padding-left:2.5%;
	padding-right:2.5%;
	width:100%;
}



/* STYLE FUNCTIONS */




@media all and (max-width:768px){
	div.four-box{
		/*width:100vw;
		height:100vw;*/
	}
}

div.four-box{
	flex-direction:column;
	background:white;

	align-items:flex-start;

	height:400px;

	width:400px;


	margin-bottom:2.5vh;

	border:1px solid black;
}


div.four-box > h1.title{
	margin:0;
	margin-left:5%;

}
div.four-box > div.container{
	height:70%;
	width:100%;
}

div.four-box > div.container{
	flex-wrap:wrap;
}
div.four-box > div.container > div{
	width:45%;
	height:50%;

	position:relative;

	flex-direction:column;

	overflow:hidden;

	padding:1%;

}
div.four-box > div.container > div > a.overlay{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:3;

	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;

	text-decoration:none;

	padding:1%;
}

div.four-box > div.container > div > a.overlay > div.img-container{
	width:100%;
	height:80%;
	overflow:hidden;
}

div.four-box > div.container > div > a.overlay > div.img-container > img{
	height:100%;
	width:100%;
	object-fit:contain;

}

div.four-box > div.container > div > a.overlay > span.name{
	width:100%;
	height:15%;
	text-align:center;
	overflow:hidden;
	text-overflow:ellipsis;

	text-decoration:none;
	color:black;
}

div.four-box > a{
	text-decoration:none;
	color:blue;
	margin-left:5%;
}





div.products-horizontal{
	width:100%;

	padding:2.5%;
	padding-left:0;
	padding-right:0;

	flex-direction:column;

	justify-content:space-between;
	align-items:flex-start;

	margin-bottom:2.5vh;

	border:1px solid black;

	background:white;

}

div.products-horizontal > div.top{
	padding-left:2.5%;
}

div.products-horizontal > div.top > h3{
	margin-right:40px;
	font-size:125%;
}

div.products-horizontal > div.top > a{
	color:blue;
	text-decoration:none;
}

div.products-horizontal > div.bot{
	/*height:200px;*/

	width:100%;

	position:relative;

	justify-content:space-between;
	align-items:center;
}

div.products-horizontal > div.bot > div.container{
	/*height:100%;*/
	width:100%;

	justify-content:flex-start;
	overflow-x:scroll;
	overflow-y:hidden;
}

div.products-horizontal > div.bot > div.container > div.scroll-container{
	justify-content:flex-start;
	align-items:flex-start;

	padding-left:1%;
	padding-right:1%;
}



div.products-horizontal > div.bot > div.container > div.scroll-container >  div.product{
	margin-right:30px;

	width:200px;
	/*height:80%;*/
	
	overflow:hidden;

}

div.products-horizontal > div.bot > div.container > div.scroll-container >  div.product:last-child{
	margin-right:0;
}

div.products-horizontal > div.bot > div.container > div.scroll-container > div.product > a.overlay{
	height:100%;
	width:100%;

	text-decoration:none;

}

div.products-horizontal > div.bot > div.container > div.scroll-container > div.product > a.overlay > div.img-container{
	height:200px;
	width:100%;

	margin-bottom:15px;
}

div.products-horizontal > div.bot > div.container > div.scroll-container > div.product > a.overlay > div.img-container > img{
	width:100%;
	height:100%;
	object-fit:contain !important;
}





div.products-horizontal > div.bot > div.button{
	position:absolute;
	height:65px;
	width:65px;
	top:32.5%;
	z-index:3;
	background:white;
	border:1px solid black;

	border-radius:12.5%;

	opacity:0.25;

	cursor:pointer;
}

div.products-horizontal > div.bot > div.button:hover{
	opacity:1;
}


div.products-horizontal > div.bot > div.button.button-left{

	left:0.5%;
}

div.products-horizontal > div.bot > div.button.button-right{
	right:0.5%;
}


div.products-horizontal ::-webkit-scrollbar {
	background-color:transparent;
	scrollbar-width:thin;
	height:7.5px;
	width:7.5px;
}

div.products-horizontal ::-webkit-scrollbar-thumb {
  background-color:black;
  border-radius:5px;
}

div.products-horizontal ::-webkit-scrollbar-button {
  display: none;
}






div.products-horizontal-with-info > div.bot{
}


div.products-horizontal-with-info > div.bot > div.container > div.scroll-container > div.product > a.overlay{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
}



div.products-horizontal-with-info > div.bot > div.container > div.scroll-container > div.product > a.overlay > span.name{
	width:90%;
	height:35px;
	overflow:hidden;
	text-overflow:ellipsis;

	color:black;
}

div.products-horizontal-with-info > div.bot > div.container > div.scroll-container > div.product > a.overlay > div.row{
	height:75px;
	width:100%;
	justify-content:flex-start;
	padding-left:5px;
}

div.products-horizontal-with-info > div.bot > div.container > div.scroll-container > div.product > a.overlay > div.row > span.n_reviews{
	color:black;
	margin-left:10px;
}



div.words-boxes-container{
	width:100%;
	padding:2.5%;

	background:white;
	border:1px solid black;

	margin-bottom:2.5vh;

	flex-direction:column;
	align-items:flex-start;

}

div.words-boxes-container > h3.title{
	margin-left:2.5%;
}


div.words-boxes-container > div.container{
	flex-wrap:wrap;
	width:100%;
}

div.words-boxes-container > div.container > div{
	height:5vh;
	width:30%;
	border:1px solid black;
	background:white;

	margin-bottom:1.5vh;

	display:flex;

	background:blue;
}


div.words-boxes-container > div.container > div > a{
	text-decoration:none;
	color:white;
	width:100%;
	height:100%;
	display:flex;
	justify-content:space-around;
	align-items:center;
	background:blue;

	transition: background-color 0.6s ease;
}

div.words-boxes-container > div.container > div > a:hover{
	background:darkblue;
}

div.words-boxes-container > a.action{
	margin-left:2.5%;
	text-decoration:none;
	color:blue;

}


@media all and (max-width:1000px){
	div.words-boxes-container{
	}

	div.words-boxes-container > div.container > div:nth-child(odd){
		display:none;
	}

	div.words-boxes-container > div.container > div{
		width:75%;
	}
}

/***/






div.directory-container{

	align-items:flex-start;
	justify-content:flex-start;
	width:100%;

	padding-top:2%;
	padding-bottom:2%;
}

div.directory-container *{
	margin-right:5px;
	margin-left:5px;
}

div.directory-container a{
	text-decoration:none;
	color:black;

	transition: color 0.1s ease-in-out;
}

div.directory-container a:hover{
	color: #828282;
}




/* categories page*/

div.categories-container{
	width:100%;
  display: grid;
  place-items:center;
  grid-template-columns: repeat(3, 1fr); /* 3 items per row */
  grid-column-gap:5px;
}

div.categories-container > div{
	flex-direction:column;
	border:1px solid black;

	margin-bottom:30px;

	background:blue;
}


div.categories-container > div > a{

	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;

	text-decoration:none;
}


div.categories-container > div > a > span.name{
	margin-top:15px;
	margin-bottom:15px;
	color:white;
}


div.categories-container > div > a > div.img-container{
	width:300px;
	height:150px;
}

div.categories-container > div > a > div.img-container > img{
	height:100%;
	width:100%;
	object-fit:cover;
}


@media all and (max-width:1000px){
	div.categories-container{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media all and (max-width:768px){
	div.categories-container{
			grid-template-columns: repeat(1, 1fr);
		}
}

@media all and (max-width:320px){
	
}













/*PRODUCT PAGE*/

div.product-container{
	width:100%;
	flex-direction:column;
}

div.product-container > *{
	margin-bottom:2.5vh;
	margin-top:0;
}

div.product-container > div.product-display{
	width:100%;

	justify-content:flex-start;
	align-items:center !important;

	/*background:#d9d9d9;*/

	padding-left:2.5%;
	padding-right:2.5%;
}

div.product-container > div.product-display > div{
}

div.product-container > div.product-display > div.left{
	width:65%;

	justify-content:flex-start;
	align-items:center;

	padding:2.5%;
	padding-top:0;
	padding-left:0;

	overflow:hidden;
}

div.product-container > div.product-display > div.left > div.img-container{
	justify-content:space-around;
	align-items:center;
}


div.product-container > div.product-display > div.left > div.mobile-top-container{
	width:100%;
	justify-content:space-between;
	padding-left:2.5%;
	padding-right:2.5%;

	/*display:flex*/
	display:none;
}

div.product-container > div.product-display > div.left > div.mobile-top-container > h1.name{
	width:400px;
}






@media all and (max-width:1280px){
	div.product-container{
		/*padding-left:0;*/
		/*padding-right:0 !important;*/
	}

	div.product-container > div.product-display{
		justify-content:space-around;
	}


	div.product-container > div.product-display > div.left{
		width:55%;
		justify-content:space-between;
	}


	div.product-container > div.product-display > div.left > div.img-container{
		margin-left:150px;
	}

		div.product-container > div.product-display > div.left > div.img-container > img{
		width:100% !important;
	}


	div.product-container > div.product-display > div.left > div.thumbnails-container{
		padding-left:2.5px !important;
		padding-right:2.5px !important;

	}
	/*div.product-container > div.product-display > div.left > div.thumbnails-container > div.img-container{
		width:35px !important;
		height:42.5px !important;
	}*/

	div.product-container > div.product-display > div.right{
	}
}

@media all and (max-width:768px){
		div.product-container > div.product-display{
			flex-direction:column;
		}

		div.product-container > div.product-display > div.left{
			flex-direction:column;
			justify-content:flex-start;
			width:100%;
		}

		div.product-container > div.product-display > div.left > div:nth-child(2){
			order:1;
		}


		div.product-container > div.product-display > div.left > div.mobile-top-container{
			display:flex;
		}

		div.product-container > div.product-display > div.left > div.thumbnails-container{
			width:100%;
			flex-direction:row !important;
			justify-content:space-between !important;
			padding-top:1px !important;
			padding-bottom:1px !important;
		}
		div.product-container > div.product-display > div.left > div.thumbnails-container > div.img-container{
			margin-bottom:0 !important;
		}


		div.product-container > div.product-display > div.right{
			width:100% !important;
			padding-top:5%;
			padding-bottom:5%;
		}

		div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container{
		}
		div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container > div.option{
			
		}


		div.product-container > div.product-display > div.right > h3.name{
			display:none;
		}

		div.product-container > div.product-display > div.right > div.stars-rating{
			display:none;
		}

}

@media all and (max-width:320px){
	
}



div.product-container > div.product-display > div.left > div.img-container{
	position:relative;
	height:65vh;
	width:80%;
	margin-left:2.5%;
	margin-right:2.5%;
}

div.product-container > div.product-display > div.left > div.img-container > img{
	position:absolute;

	left:0;

	 top: 50%;
   transform: translateY(-50%);

	height:auto;
	min-height:50vh;
	max-height:100%;
	width:100%;
	object-fit:contain !important;

	visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.05s ease-in-out;
    display: flex;
}


div.product-container > div.product-display > div.left > div.img-container > img.gallery-image-show{
	visibility: visible !important;
  opacity: 1;
  z-index:665;
}



div.product-container > div.product-display > div.left > div.thumbnails-container{
	flex-direction:column;

	padding:2.5%;

	border:1px solid black;

	justify-content:flex-start;

	background:blue;
}

div.product-container > div.product-display > div.left > div.thumbnails-container > div.img-container{
	width:40px;
	height:55px;

	border-radius:15%;

	border:1px solid black;
	overflow:hidden;

	margin-bottom:10px;

	background:white;
}

div.product-container > div.product-display > div.left > div.thumbnails-container > div.img-container > img{
	width:100%;
	height:100%;
	object-fit:contain;
}






div.product-container > div.product-display > div.right{
	width:30%;
	background:white;

	flex-direction:column;

	justify-content:flex-start;

	height:auto;

	border:1px solid black;
	border-radius:1.5%;
}


div.product-container > div.product-display > div.right > *{
	margin-bottom:15px !important;
	margin-top: 0px !important;
	padding-bottom:0 !important;
	max-width:90%;
}

div.product-container > div.product-display > div.right > *:first-child{
	margin-top:15px !important;
}
div.product-container > div.product-display > div.right > *:last-child{
	margin-top:10px;
	margin-bottom:15px !important;
}






div.product-container > div.product-display > div.right > h3.name{
	font-size:145%;
	width:300px;
	text-align:center;
	text-overflow:ellipsis;
}

div.product-container > div.product-display > div.right > p.short-description{
	width:80%;
	font-size:100%;
	text-align:left;
	text-overflow:ellipsis;
	padding:2.5%;
}

div.product-container > div.product-display > div.right > span.price{
	font-size:145%;
	color:green;
	padding:2.5%;
}

div.product-container > div.product-display > div.right > span.price > span.price-whole{
	font-size:200%;
}

div.product-container > div.product-display > div.right > span.price > span.top{
}

div.product-container > div.product-display > div.right > span.price > span.top > span.price-fraction{
}

div.product-container > div.product-display > div.right > span.price > span.top > span.price-symbol{
}


div.product-container > div.product-display > div.right > div.stars-rating{
	height:50px;
}


.stars-rating {
  unicode-bidi: bidi-override;
  color: #ccc;
  font-size: 20px;
  width: 100px;
}

.stars-rating .star {
  color: #f8d64e; /* Change color to reflect filled stars */
  display: inline-block;
}

.stars-rating .star:before {
  content: '\2605';
}

.stars-rating .star.half:before {
  content: '\2605';
  width: 50%;
  overflow: hidden;
}

.stars-rating .star.empty:before {
  content: '\2606'; /* Unicode character for empty star */
}



div.product-container > div.product-display > div.right > div.stars-rating > span.review-count{
	margin-left:5px;
	font-size:80%;
	margin-top:2.5px;
}



div.product-container > div.product-display > div.right > div.variations{
	flex-direction:column;

	width:100%;

	margin-bottom:4vh;
}


div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container{
	width:100%;
}

div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute{
	width:100%;

	flex-direction:column;
}

div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > a.name{ 
	font-size:150%;
	font-weight:bold;
}


div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container{
	flex-wrap:wrap;
	width:100%;
	padding:2.5%;
}

div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container > div.option{
	border:1px solid black;

	margin-right:5px;

	flex-direction:column;

	background:white;

	cursor:pointer;
}


div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container > div.option > a{
}

div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container > div.option > div.img-container{
	height:50px;
	width:50px;

	overflow:hidden;
}

div.product-container > div.product-display > div.right > div.variations > div.visual-variations-container > div.attribute > div.options-container > div.option > div.img-container > img{
	height:100%;
	width:auto;
	object-fit:cover;
}



div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container{
	flex-direction:column;
	justify-content:space-around;
	width:100%;
}

div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container > div.attribute{
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
	width:100%;
	overflow:hidden;
}

div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container	 > div.attribute > a.name{ 
	font-size:150%;
	font-weight:bold;
}


div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container	 > div.attribute > div.options-container{ 
	width:100%;
	padding:2.5%;
}


div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container	 > div.attribute > div.options-container > div.option{ 
	flex-direction:column;
	padding:2%;
	padding-right:3.5%;
	padding-left:3.5%;

	background:white;

	border:1px solid black;

	margin-right:5px;

	cursor:pointer;

}


div.product-container > div.product-display > div.right > div.variations > div.regular-variations-container	 > div.attribute > div.options-container > div.option{ 
	flex-direction:column;
}




div.product-container > div.product-display > div.right > div.variations div.option.selected{
	border:2px solid orange !important;
}




div.product-container > div.product-display > div.right > div.quantity{
	width:100%;
	flex-direction:column;
	justify-content:space-between;

	margin-bottom:2.5vh;
}

div.product-container > div.product-display > div.right > div.quantity > a.name{
		font-size:150%;
	font-weight:bold;
}


div.product-container > div.product-display > div.right > div.quantity > select{
	font-size:115%;
	padding:1.5%;
	border-radius:12.5%;
	margin-top:7.5px;

	background:white;
}


div.product-container > div.product-display > div.right > div.button-container{
	margin-bottom:2.5vh;
	
}

div.product-container > div.product-display > div.right > div.button-container > a.action{
	background:blue;

	text-decoration:none;

	border:1px solid black;

	border-radius:5%;
}









div.product-container > div.description-container{

	margin-top:2.5vh;

	width:100%;
	padding:2.5%;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction:column;

	background:lightgrey;
}

div.product-container > div.description-container > p.description{

	width:100%;
	font-size:115%;


}

div.product-container > div.more-products-container{
	width:100%;
	flex-direction:column;
}










div.product-container > div.reviews-container{
	width:100%;
	padding:2%;

	flex-direction:column;

	margin-top:4vh;

	align-items:flex-start;

	background:lightgrey;
}

div.product-container > div.reviews-container > div.review{
	flex-direction:column;
	width:50%;
	border:1px solid black;
	margin-bottom:2.5vh;
}


@media all and (max-width:768px){

	div.product-container{

	}
	div.product-container > div.reviews-container > div.review{
		width:100%;
	}
}



div.product-container > div.reviews-container > div.review > div{
	width:100%;
}

div.product-container > div.reviews-container > div.review > div.top{
	border-bottom:1px solid black;
	justify-content:space-between;
	height:5vh;
	padding-left:2.5%;
	padding-right:2.5%;

}

div.product-container > div.reviews-container > div.review > div.top > div.star-rating{

}

div.product-container > div.reviews-container > div.review > div.top > div.star-rating > span.star{

}


div.product-container > div.reviews-container > div.review > div.bottom{
	width:100%;
	max-height:25vh;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:1%;

	align-items:flex-start;

	background:white;
}

div.product-container > div.reviews-container > div.review > div.bottom > p{
	width:100%;

}


div.review ::-webkit-scrollbar {
	background-color:transparent;
	scrollbar-width:thin;
	height:5px;
	width:5px;
}

div.review ::-webkit-scrollbar-thumb {
  background-color:orange;
  border-radius:5px;
}

div.review ::-webkit-scrollbar-button {
  display: none;
}





div.product-container > div.reviews-container > div.write-review{
	width:90%;
	border:1px solid black;
	margin-top:2.5vh;

	flex-direction:column;
	align-items:flex-start;
	padding:1%;
}


div.product-container > div.reviews-container > div.write-review > form{
	width:100%;
}



div.product-container > div.reviews-container > div.write-review input#review{
	height:15vh;
	width:90%;
	padding:1%;
}


div.product-container > div.reviews-container > div.write-review div.star-rating{
	flex-direction:row;
	justify-content:flex-start;
}

div.product-container > div.reviews-container > div.write-review div.star-rating > span{
	margin-right:5px;
	font-size:35px;
	color:white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

div.product-container > div.reviews-container > div.write-review div.star-rating > span.selected{
	color: #f8d64e !important;
}

div.product-container > div.reviews-container > div.write-review > a.action{
	padding:1%;
	padding-left:2.5%;
	padding-right:2.5%;
	background:blue;
	color:white;

	cursor:pointer;

	border-radius:5%;

}




/** SEARCH RESULTS **/

div.search-results-top-container{
	width:90%;
	justify-content:space-between;
	padding:2.5%;

	flex-wrap:wrap;
}


div.search-results-top-container > div.filters-select-container{

}

div.search-results-top-container > div.filters-select-container > select{
	padding:5%;

}

div.search-results-top-container > div.filters-select-container > select option{
}




div.search-results-container{
	width:90%;
	flex-direction:column;
	align-items:flex-start;
	padding:2.5%;
}

div.search-results-container > div.container{
	width:100%;
	margin-top:5vh;
}


div.search-results-container > div.categories-container{
	width:100%;
  display: grid;
  place-items:center;
  grid-template-columns: repeat(3, 1fr); /* 3 items per row */
  grid-column-gap:5px;
}

div.search-results-container > div.categories-container > div{
	border:1px solid black;

	margin-bottom:30px;

	background:blue;
}


div.search-results-container > div.categories-container > div > a{

	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;

	text-decoration:none;
}


div.search-results-container > div.categories-container > div > a > span.name{
	margin-top:15px;
	margin-bottom:15px;
	color:white;

	max-width:75vw;
}


div.search-results-container > div.categories-container > div > a > div.img-container{
	width:300px;
	height:150px;

	max-width:80vw;
	max-height:40vw;
}

div.search-results-container > div.categories-container > div > a > div.img-container > img{
	height:100%;
	width:100%;
	object-fit:cover;
}


@media all and (max-width:1000px){
	div.search-results-container > div.categories-container{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media all and (max-width:768px){
	div.search-results-container > div.categories-container{
			grid-template-columns: repeat(1, 1fr);
		}
}

@media all and (max-width:320px){
	
}


div.search-results-container > div.products-container{
	width:100%;
  display: grid;
  place-items:center;
  grid-template-columns: repeat(4, 1fr); /* 3 items per row */
  grid-column-gap:5px;
}


div.search-results-container > div.products-container > div{
	border:1px solid black;

	margin-bottom:30px;
}

div.search-results-container > div.products-container > div > a{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;

	text-decoration:none;

	padding-right:5px;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;

	overflow:hidden;
}

div.search-results-container > div.products-container > div > a > *{
	margin-bottom:15px;
	color:black;
}

div.search-results-container > div.products-container > div > a > div.img-container{
	margin-top:15px;
	width:200px;
	height:150px;

	max-width:45vw;
	max-height:33.75vw;
}

div.search-results-container > div.products-container > div > a > div.img-container > img{
	object-fit:contain;
}

div.search-results-container > div.products-container > div > a > span.name{
	width:175px;
	text-align:center;
	height:36px;
	text-overflow:ellipsis;
	overflow:hidden;

	max-width:40vw;
}

div.search-results-container > div.products-container > div > a > span.price{
	width:175px;
	text-align:center;
	height:36px;
	text-overflow:ellipsis;
	overflow:hidden;

	color:green;

	max-width:40vw;
}

div.search-results-container > div.products-container > div > a > span.action{
	width:200px;
	text-align:center;
	height:36px;
	text-overflow:ellipsis;
	overflow:hidden;

	margin-bottom:0;

	font-size:90%;

	color:blue;

	max-width:45vw;
}

@media all and (max-width:1000px){
	div.search-results-container > div.products-container{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media all and (max-width:768px){
	div.search-results-container{
		width:100%; /*dubte*/
	}

	div.search-results-container > div.products-container{
			grid-template-columns: repeat(2, 1fr);
		}
}

@media all and (max-width:320px){
	
}




div.search-results-container > div.tags-container{
	width:100%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

div.search-results-container > div.tags-container > div{
	border:1px solid black;
	margin-bottom:20px;

	border-radius:18.5px;

	padding-left:15px;
	padding-right:15px;
}

div.search-results-container > div.tags-container > div > a{
	display:flex;
	justify-content:space-around;
	align-items:center;	

	flex-direction:column;

	text-decoration:none;

	min-width:75px;
	height:55px;
	width:100%;

}

div.search-results-container > div.tags-container > div > a > span.name{
	text-align:center;
	color:black;
}


@media all and (max-width:768px){
	div.search-results-container > div.tags-container{
		align-items:flex-start;
		flex-direction:column;
	}
}


div.search-navigation  a{
	width:45px;
	height:45px;
	border:1px solid black;
	
	display:flex;
	justify-content:space-around;
	align-items:center;

	text-decoration:none;
	color:black;
}

div.search-navigation  a.current{
	background:blue;
	color:white;
}





/** CART **/

div#cart-container{
	width:100%;

	flex-direction:column;

}

div#cart-container > *{
	margin-bottom:4vh;
}


div#cart-container > div.top-container{
	width:100%;
	padding-left:2.5vw;
	padding-right:2.5vw;
	justify-content:space-between;
}

div#cart-container > div.top-container > a{
	cursor:pointer;
	text-decoration:none;
	color:blue;
}


div#cart-container > div.products-container{
	flex-direction:column;
	width:90%;
	border:1px solid black;
	border-radius:2.5%;
	padding:2.5%;
}

div#cart-container > div.products-container > div.product{
	width:100%;
	justify-content:space-between;
	flex-wrap:wrap;
}





div#cart-container > div.products-container > div.product.empty > div.top{
	width:100%;
	flex-wrap:wrap;
}

div#cart-container > div.products-container > div.product.empty > div.top > div.middle{
	width:80%;
	justify-content:space-between;
	flex-wrap:wrap;
}

div#cart-container a#cart_empty_action{
	padding:9px;
	padding-left:30px;
	padding-right:30px;
	background:blue;
	color:white;
	text-decoration:none;
}





div#cart-container > div.products-container > div.product > div.left{
	flex-wrap:wrap;
}


div#cart-container > div.products-container > div.product > div.left > div.img-container{
	width:150px;
	height:150px;
	margin-right:25px;
}

div#cart-container > div.products-container > div.product > div.left > div.img-container > img{
	width:100%;
	height:100%;
	object-fit:contain;
}


div#cart-container > div.products-container > div.product > div.left > div.content{
	flex-direction:column;
	align-items:flex-start;
	flex-wrap:wrap;
}

div#cart-container > div.products-container > div.product > div.left > div.content > div.top{
}

div#cart-container > div.products-container > div.product > div.left > div.content > div.top > h2{
	max-width:500px;
	text-overflow:ellipsis;
	overflow:hidden;
}

div#cart-container > div.products-container > div.product > div.left > div.content > div.top > h2.qty{
	color:orange;
	padding-left:10px;
}


div#cart-container > div.products-container > div.product > div.right{
	flex-direction:column;
	align-items:flex-end;
}


div#cart-container > div.products-container > div.product > div.right > a.price{
	font-size:125%;
}

div#cart-container > div.products-container > div.product > div.right > a.remove{
	text-decoration:none;
	color:grey;
	margin-top:5px;
}

div#cart-container > div.products-container > div.product > div.right > a.remove:hover{
	text-decoration:underline;
}



@media all and (max-width:1080px){
	div#cart-container > div.products-container > div.product > div.left > div.content > div.top > h2.name{
		max-width:250px;
	}

	div#cart-container > div.products-container > div.product > div.right > a.remove{
		font-size:75%;
	}
}

@media all and (max-width:768px){
	div#cart-container > div.products-container > div.product{
		margin-bottom:25px;
	}
	div#cart-container > div.products-container > div.product > div.left > div.img-container{
		width:75px;
		height:75px;
		margin-right:25px;
	}

	div#cart-container > div.products-container > div.product > div.left > div.content > div.top > h2.name{
		max-width:125px;
		font-size:100%;
	}

	div#cart-container > div.subtotal-container > div.container{
		width:100% !important;
	}
}



div#cart-container > div.subtotal-container{
	width:90%;
	justify-content:flex-end;
}

div#cart-container > div.subtotal-container > div.container{

	flex-direction:column;
	border:1px solid black;
	border-radius:2.5%;

	padding:2.5%;

	width:350px;
}

div#cart-container > div.subtotal-container > div.container > div.content{
	flex-direction:column;
	width:100%;
}

div#cart-container > div.subtotal-container > div.container > div.content > div.row{
	width:100%;
	justify-content:space-between;
	border-bottom:1px solid black;
}

div#cart-container > div.subtotal-container > div.container > div.content > div.row > h3{
	max-width:50%;
	text-overflow:ellipsis;
	overflow:hidden;
}

div#cart-container > div.subtotal-container > div.container > div.content > div.row > a{
	max-width:50%;
	text-overflow:ellipsis;
	overflow:hidden;
}


div#cart-container > div.subtotal-container > div.container > div.content > div.button-container{
	width:100%;
}

div#cart-container > div.subtotal-container > div.container > div.content > div.button-container > a.action{
	padding:9%;

	margin-top:2.5vh;

	background:darkblue;

	border-radius:50px/50%;

	text-decoration:none;
	color:white;

	font-size:125%;

}


/* CHECKOUT */


div.checkout-container{
	width:75%;
	padding-left:2.5%;
	padding-right:2.5%;
	margin-top:50px;
	align-items:flex-start;
	justify-content:space-between;
}


@media all and (max-width:1000px){
	div.checkout-container{
		width:100%;
		padding-left:0;
		padding-right:0;

		justify-content:space-around;

		
	}

	div.checkout-container > div.form-container{
		padding-left:1%;
		padding-right:1%;
	}
}


@media all and (max-width:900px){
	div.checkout-container{
		flex-direction:column;
		align-items:center;
	}

	div.checkout-container > div.form-container{
		order:2;

		width:80%;

		margin-right:0 !important;
	}

	div.checkout-container > div.right-container{
		position:static !important;

		margin-bottom:2.5vh;

		width:80%;
	
	}
}

div.checkout-container > div.form-container{


	padding-left:5%;
	padding-right:5%;


	border-radius:5%;
	border:1px solid black;

	overflow:hidden;

	margin-right:35px;
}

div.checkout-container > div.form-container > form#checkout-form{
	padding-right:15px;
	padding-left:15px;
}


div.checkout-container > div.form-container > form#checkout-form input.error{
	border-color:red !important;
	border:1px solid;
}

div.checkout-container > div.form-container > form#checkout-form select.error{
	border-color:red !important;
	border:1px solid;
}



div.checkout-container > div.form-container > form#checkout-form span.error{
	display:none;
	color:red;

}

div.checkout-container > div.form-container > form#checkout-form div.error{
	border:1px solid red;
}





div.checkout-container > div.form-container > form#checkout-form > div.options-container{
	width:100%;
	overflow:hidden;
	flex-direction:column;
	flex-wrap:wrap;

	align-items:flex-start;
	justify-content:flex-start;
}


div.checkout-container input[type="radio"]{
	height:25px;
	width:25px;
}


div.checkout-container > div.form-container > form#checkout-form > div.options-container > div.option{
	width:45%;
	padding:2.5%;
	justify-content:flex-start;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-container > div.option > input{
	margin-bottom:1vh;
	margin-right:5px;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-container > div.option-1 > div.cards-img-container{

}

div.checkout-container > div.form-container > form#checkout-form > div.options-container > div.option-1 > div.img-container > img{
	height:35px;
	width:auto;
	margin-right:5px;
	border:1px solid black;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-container > div.option-2 > div.img-container > img{
	height:35px;
	width:auto;

	border:1px solid black;
}


div.checkout-container > div.form-container > form#checkout-form > div.options-content-container{
	width:100%;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option{
	width:100%;
	flex-direction:column;

	padding-left:5px;
	padding-right:5px;
	
	/*display:flex*/
	display:none;
}


div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option.active{
	display:flex;
}


div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option > *{
	margin-bottom:7.5px;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option > p{
	width:85%;
}


div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1{
	align-items:flex-start;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 input{
	width:100%;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.half{
	width:100%;
	justify-content:space-between;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.half input{
	width:97.5%;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.half > div{
	width:50%;
	flex-direction:column;
	align-items:flex-start;
}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.half > div:last-child{

}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.half.expiration{

}

div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-1 > div.button-container > button{

	width:150px;
	height:50px;

	border-radius:30px;

	background:darkblue;
	color:white;
	text-decoration:none;
	border:white;

	margin-top:15px;
	margin-bottom:15px;

	cursor:pointer;
} 




div.checkout-container > div.form-container > form#checkout-form > div.options-content-container > div.option-2 > div#paypal-button{
	width:90% !important;
}



div.checkout-container > div.right-container{

	border:1px solid black;
	border-radius:5%;

	flex-direction:column;

	align-items:flex-start;

	position:sticky;
	top:0;

}

div.checkout-container > div.right-container > h3{
	margin-left:2.5%;
}

div.checkout-container > div.right-container > div.products-container{
	width:100%;
	overflow:hidden;

	flex-direction:column;
}

div.checkout-container > div.right-container > div.products-container > div.product{
	border-top:1px solid black;

	justify-content:space-between;

	padding:2.5%;

	width:100%;
}

div.checkout-container > div.right-container > div.products-container > div.product:last-child{
	border-bottom:1px solid black;
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left{
	margin-right:30px;
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.img-container{
	width:75px;
	margin-right:15px;
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.img-container > img{
	width:100%;
	height:auto;
	object-fit:cover;
}



div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content{
	flex-direction:column;
	align-items:flex-start;
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > div.top{
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > div.top > h2.name{
	margin-right:15px;
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;

	font-size:115%;
}

div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > div.top > h2.qty{
	color:orange;	

	font-size:115%;
}


div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > a.attributes{
	
}

div.checkout-container > div.right-container > div.products-container > div.product > div.right{
	padding-right:2.5vw;
}




@media all and (max-width:768px){
	div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > div.top > h2.name{
		width:100px;
	}

	div.checkout-container > div.form-container > form#checkout-form input{
		height:45px;
		margin-bottom:10px;
	}

	div.checkout-container > div.form-container > form#checkout-form div.half{
		flex-direction:column;
	}

	div.checkout-container > div.form-container > form#checkout-form div.half div{
		width:100% !important;
	}

	div.checkout-container > div.form-container > form#checkout-form select{
		height:45px;
		padding-left:5px;
		padding-right:5px;
		margin-bottom:10px;
	}

}



div.checkout-container > div.right-container > div.subtotal-container{
	width:100%;
}

div.checkout-container > div.right-container > div.subtotal-container > div.content{
	flex-direction:column;

	width:100%;
}

div.checkout-container > div.right-container > div.subtotal-container > div.content > div.row{
	padding:2.5%;

	width:100%;
	justify-content:space-between;
}

div.checkout-container > div.right-container > div.subtotal-container > div.content > div.row.total{
	border-top:1px solid black;
}

div.checkout-container > div.right-container > div.subtotal-container > div.content > div.row.total > a.price{
	color:green;
	font-size:115%;
}

@media all and (max-width:500px){

	div.checkout-container{
		padding-left:0 !important;
		align-items:flex-start;
		padding-right:5px;
	}

	div.checkout-container > div.form-container{
		width:98%;
		border-radius:0;
	}

	div.checkout-container > div.right-container{
		width:98%;
		border-radius:0;
	}



}

@media all and (max-width:420px){

	div.checkout-container{
		padding-left:0 !important;
		align-items:flex-start;
		padding-right:0;
	}

	div.checkout-container > div.form-container{
		width:100%;
		border-radius:0;
	}

	div.checkout-container > div.right-container{
		width:100%;
		border-radius:0;
	}

	div.checkout-container > div.right-container > div.products-container > div.product{
		flex-direction:column;
	}

	div.checkout-container > div.right-container > div.products-container > div.product > div.left{
		/*flex-direction:column;*/
		width:100%;
	}

	div.checkout-container > div.right-container > div.products-container > div.product > div.left > div.content > a.attributes{
		margin-bottom:15px;
	}

	div.checkout-container > div.right-container > div.products-container > div.product > div.right{
		width:100%;
		justify-content:flex-end;
	}

	div.checkout-container > div.right-container > div.subtotal-container > div.content > div.row{
		flex-wrap:wrap;
		padding-bottom:5px;
		border-bottom:1px solid grey;
	}

}




/** PAGES **/


a.go-back{
	text-decoration:none;
}

div.regular-page-navigation-container{
	width:100%;
	justify-content:space-between;
	margin-left:2.5%;
	margin-right:2.5%;
	margin-top:2.5vh;
}

div.regular-page-navigation-container > a.go-back{
	font-size:114%;
	cursor:pointer;
	color:blue;
}


div.regular-page-container{
	padding:5%;
	padding-top:0;
	padding-left:15%;
	padding-right:15%;

	flex-direction:column;

	width:100%;
	max-width:1500px;
}

div.regular-page-container > *{
	margin-bottom:3.5vh;
}

div.regular-page-container form{
	padding:15px;
	max-width:98%;
}

div.regular-page-container form input{
	max-width:100%;
	padding-top:5px;
}

div.regular-page-container form select{
	max-width:100%;
	padding-top:5px;
}

div.regular-page-container form textarea{
	max-width:100%;
	padding-left:5px;
	padding-top:5px;
}

div.regular-page-container h1{
	max-width:100%;
	color:darkblue;
}

div.regular-page-container h2{
	max-width:100%;
	color:blue;
}

div.regular-page-container h3{
	max-width:100%;
	color:blue;

	line-height:30px;
}

div.regular-page-container li{
	line-height:30px;
}

div.regular-page-container p{
	max-width:100%;
	line-height:30px;
}

div.regular-page-container .cta{
	margin-top:3.5vh;
	background:blue;
	color:white;
	padding:10px;
	padding-left:15px;
	padding-right:15px;

	border:none;

	text-decoration:none;

	cursor:pointer;
}

div.regular-page-container > div.title-container{
	margin-top:15px;
	margin-bottom:15px;
	padding-top:0;
	padding-bottom:0;
	width:100%;	
}

div.regular-page-container > div.title-container > h1.title{
	max-width:90%;
}




div.regular-page-container > div.subtitle-container{
	width:100%;
	justify-content:flex-start;
}

div.regular-page-container > div.subtitle-container > h3.title{
	
}

div.regular-page-container > div.subtitle-container > h3.action{
	color:blue;
	text-decoration:underline;
	font-size:150%;
	cursor:pointer;
}



div.regular-page-container > div.content-container{
	width:80%;
	align-items:flex-start;
	flex-direction:column;
}

div.regular-page-container > div.content-container ul li:first-child(){
	display:none;
}


div.regular-page-container > div.content-container a{
	color:blue;
	text-decoration:none;
}

div.regular-page-container a.action-redirect {
	margin-top:5vh;
	font-size:150%;
	padding:15px;
	background:blue;
	color:white !important;
	border:1px solid white;

	text-decoration:none;
}

div.regular-page-container > div.content-container a.action-redirect:hover{
	background:darkblue;
}

div.regular-page-container > div.content-container a.action-redirect:active{
	border:1px solid black;
}



div.page-container a.action-redirect {
	margin-top:5vh;
	font-size:150%;
	padding:15px;
	background:blue;
	color:white !important;
	border:1px solid white;

	text-decoration:none;
}

div.page-container > div.content-container a.action-redirect:hover{
	background:darkblue;
}

div.page-container > div.content-container a.action-redirect:active{
	border:1px solid black;
}






div.regular-page-container > div.options-container{
	flex-direction:column;
	border:1px solid black;

	max-width:100%;
}

div.regular-page-container > div.options-container > div.option{
	justify-content:space-between;
	width:750px;
	max-width:100%;
	padding:2.5%;

	border-bottom:1px solid black;
}

div.regular-page-container > div.options-container > div.option:last-child{
	border-bottom:none;
}




div.regular-page-container > div.options-container > div.option.see-order{
	justify-content:space-around;
}

div.regular-page-container > div.options-container > div.option.see-order img{
	width:75px;
	height:auto;
}

div.regular-page-container > div.options-container > div.option.see-order h2.name{
	width:300px;
	overflow:hidden;
	text-overflow:ellipsis;
}

div.regular-page-container > div.options-container > div.option.see-order h2.qty{
	margin-right:20px;
}

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

	div.regular-page-container{
		padding-left:15px;
		padding-right:15px;
	}

	div.regular-page-container > div.options-container > div.option.see-order{
		flex-direction:column;
	}
}



div.regular-page-container > div.options-container > div.option > form{
	width:100%;
	margin-top:15px;
}

div.regular-page-container > div.options-container > div.option > form input{
	width:75%;
	height:40px;
	margin-bottom:10px;
	margin-top:5px;
}

div.regular-page-container > div.options-container > div.option > form label{
	padding-right:25px;
	display:flex;
	justify-content:flex-start;
	width:75%;
	margin-top:10px;
	padding-left:25px;
}
div.regular-page-container > div.options-container > div.option > form select{
	width:75%;
	height:40px;
	margin-bottom:10px;
	margin-top:5px;
}

div.regular-page-container > div.options-container > div.option > form input#register_button{
	width:auto;
	padding-left:5%;
	padding-right:5%;
	padding-top:1.5%;
	padding-bottom:1.5%;
	background:blue;
	color:white;
	border:1px solid white;

	cursor:pointer;
	font-weight:bold;
	margin-top:15px;
}



@media all and (max-width:1000px){
	div.regular-page-container div.option.order{
		flex-direction:column;
		align-items:flex-start;
	}

	div.regular-page-container div.option.order > *{
		margin-bottom:10px;
	}
}	





/**THANK YOU**/
div.regular-page-container.thank-you{

}

div.regular-page-container.thank-you > h3{
	margin-top:0;	
}

div.regular-page-container.thank-you > a.cta{
	margin-top:3.5vh;
	background:blue;
	color:white;
	padding:10px;
	padding-left:15px;
	padding-right:15px;

	text-decoration:none;

	cursor:pointer;
}

/*customer-register*/


div.regular-page-container.customer-register .cta{
	margin-top:3.5vh;
	background:blue;
	color:white;
	padding:10px;
	padding-left:15px;
	padding-right:15px;
	
	border:none;

	text-decoration:none;
	outline:none;

	cursor:pointer;
}

div.regular-page-container.customer-register > div.subtitle-container{
	justify-content:space-around;
}

div.regular-page-container.customer-register > div.options-container{
	padding:15px;
	padding-bottom:0;
}

div.regular-page-container.customer-register form div{
	margin-bottom:15px;
}



div.regular-page-container.response-page-container > div.content-container{
	width:90%;
	justify-content:space-around;
	align-items:center;
}



/**RETURNS PAGE**/

div.page-container{
	width:100%;
	flex-direction:column;
 
	padding:2.5%;
}


div.page-container > div.top-img-container{
	width:100%;
	height:35vh;
}

div.page-container > div.top-img-container > img{
	width:100%;
	height:100%;
	object-fit:cover;
}

div.page-container > div.icons-container{

}

div.page-container > div.icons-container > div{

	flex-direction:column;
	padding:2.5%;

	margin-right:30px;
}

div.page-container > div.icons-container > div > div.img-container{


	width:125px;
	height:125px;

	margin-bottom:15px;
}

@media all and (max-width:768px){


	div.page-container > div.icons-container{
		flex-direction:column;
		width:100%;
	}

	div.page-container > div.icons-container > div{
		flex-direction:row;
		width:100%;
		justify-content:flex-start;
		padding-left:2.5%;

	}


	div.page-container > div.icons-container > div > div.img-container{
		width:80px;
		height:80px;

		margin-right:12.5vw;

	}
}

div.page-container > div.icons-container > div > div.img-container > img{
	width:100%;
	height:100%;
	object-fit:cover;
}

div.page-container > div.icons-container > div > a{
	margin-bottom:15px;
	max-width:125px;
	text-overflow:ellipsis;
	overflow:hidden;
}



div.page-container > div.item-container{
	width:80%;
	flex-direction:column;
	align-items:flex-start;
}

div.page-container > div.item-container > h3.title{

}

div.page-container > div.item-container > p{
	
}

div.page-container > div.item-container > p.first{
	
}

div.page-container > div.item-container > ul{

}

div.page-container > div.item-container > ul > li{
	margin-bottom:10px;
}


div.page-container > div.item-container > p.last{
	
}







div.contact-us-page-container{
	width:100%;
	padding:2.5%;

	flex-direction:column;
}

div.contact-us-page-container #submit_button{
	margin-top:2.5vh;
}






/** FOOTER **/


footer{
	width:100vw;

	display:flex;
	justify-content:space-around;
	align-items:center;

	flex-direction:column;


	margin-top:4vh;

	color:white;

	background:#074a00;



}


footer > div.footer-container{
	width:100%;

	max-width:1500px;

	padding:2.5%;

	padding-top:30px;


	flex-direction:column;

	align-items:flex-start;


	/*max-width:something px*/
}



footer > div.footer-container > div{
	margin-bottom:4vh;
}

footer > div.footer-container > div:last-child{
	margin-bottom:0;
}




footer > div.footer-container > div.company-container{
	width:100%;
	flex-wrap:wrap;

	justify-content:space-between;

}

footer > div.footer-container > div.company-container > div.left{
	max-width:98%;
}

footer > div.footer-container > div.company-container > div.left > div.logo-container{
	width:350px;
	height:auto;
	max-width:100%;
}

footer > div.footer-container > div.company-container > div.left > div.logo-container > img{
	width:100%;
	height:auto;
	object-fit:cover;
}



footer > div.footer-container > div.company-container > div.right{
	margin-right:15%;
	max-width:100%;
}

footer > div.footer-container > div.company-container > div.right > p.statement{
	font-size:150%;
	font-style:italic;
	max-width:100%;
}


footer > div.footer-container > div.columns-container{
	width:100%;
	justify-content:space-between;
	align-items:flex-start;
}

footer > div.footer-container > div.columns-container > div{
	width:24%;
	flex-direction:column;
}



@media all and (max-width:1000px){
	footer > div.footer-container > div.company-container{
		padding-left:1%;
	}

	footer > div.footer-container > div.columns-container{
		flex-wrap:wrap;
		justify-content:space-around;

	}

	footer > div.footer-container > div.columns-container > div{
		width:48%;
		margin-bottom:70px;
		align-items:center;
	}

	footer > div.footer-container > div.columns-container > div:last-child{
		margin-bottom:0;
	}

	footer > div.footer-container > div.columns-container > div > a{
		margin-bottom:35px !important;
	}


	footer > div.footer-container > div.sm-icons-container{
		padding-left:1%;
	}

	footer > div.footer-container > div.payment-icons-container{
		padding-left:1%;
	}

}


@media all and (max-width:768px){

	footer > div.footer-container > div.company-container{
		padding-left:10%;
	}

	footer > div.footer-container > div.company-container > div.left{
		margin-bottom:10px;
	}


	footer > div.footer-container > div.columns-container > div{
		width:80%;
	}

	footer > div.footer-container > div.sm-icons-container{
		padding-left:10%;
	}

	footer > div.footer-container > div.payment-icons-container{
		padding-left:10%;
	}
}

@media all and (max-width:768px){

	footer > div.footer-container > div.company-container{
		padding-left:10%;
	}
}

@media all and (max-width:500px){

	footer > div.footer-container > div.company-container{
		padding-left:10px;
		padding-right:10px;
	}
}



@media all and (max-width:320px){

}




footer > div.footer-container > div.columns-container > div > a.title{
	width:100%;

	padding-bottom:2%;
	border-bottom:1px solid white;
}

footer > div.footer-container > div.columns-container > div > a.title:hover{
	color:white !important;
}

footer > div.footer-container > div.columns-container > div > a{
	width:100%;

	color:white;
	text-decoration:none;

	transition: color 0.3s ease-in-out;

	margin-bottom:1vh;
}

footer > div.footer-container > div.columns-container > div > a:hover{
	 color: #cccccc;
}



footer > div.footer-container > div.sm-icons-container{

}

footer > div.footer-container > div.sm-icons-container > a{
	background:white;
	padding:7.5%;
	border-radius:50%;
	margin-right:15px;
	transition: color 0.3s ease-in-out;

	margin-bottom:1vh;
}


footer > div.footer-container > div.sm-icons-container > a:hover{
	 /*background: #cccccc;*/
}

footer > div.footer-container > div.sm-icons-container > a > i{
	color:black;
}



footer > div.footer-container > div.payment-icons-container{
	
}

footer > div.footer-container > div.payment-icons-container > div.img-container{
	height:40px;
	width:40px;
	margin-right:15px;

}

footer > div.footer-container > div.payment-icons-container > div.img-container > img{
	width:100%;
	height:auto;
	object-fit:cover;

	border:1px solid black;
}




footer > div.copyright-container{
	width:100vw;
	background:black;

	padding-top:10px;
	padding-bottom:10px;

	justify-content:space-around;
	align-items:center;

	flex-wrap:wrap;
}

footer > div.copyright-container > div.wrapper{
	max-width:1500px;
	width:100%;

	justify-content:space-between;
	flex-wrap:wrap;
	padding-top:10px;
	padding-bottom:10px;
	flex-wrap:wrap;
}

footer > div.copyright-container > div.wrapper > a.copyright{
	margin-left:2.5%;

	font-size:85%;

	max-width:100%;
}

footer > div.copyright-container > div.wrapper > div.links{
	margin-right:2.5%;
	padding-left:2.5%;
}

footer > div.copyright-container > div.wrapper > div.links > a{
	margin-right:15px;

	font-size:75%;

	color:grey;

	transition: color 0.3s ease-in-out;

	cursor:pointer;
}


footer > div.copyright-container > div.wrapper > div.links > a:hover{
	color:#d1d1d1;
}

@media all and (max-width:768px){

	footer > div.copyright-container > div.wrapper > a.copyright{
		padding-top:10px;
	}
	footer > div.copyright-container > div.wrapper > div.links{
		padding-top:10px;
	}
}