:root{
	--blue: #19257A;
	--gray: #E6E5DB;
	/* --yellow:  #FFC80F; */
	--yellow:  #e8ab31;
	--black: #1f1f1f;
}

body{
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.4;
	background: var(--gray);
	color: var(--blue);
	-webkit-font-smoothing: antaliased;
	/* min-height: 100vh; */
	position: relative;
	margin: 0;
}
#page{
	min-height: 100vh;
  	margin: 0;
  	display: flex;
  	flex-direction: column;}


.site-main{flex-grow: 1;}

#primary-menu{
	list-style-type: none;
  	padding: 1em;
  	margin: 0;
}

/******************  index ******************/
.hero{padding: 1.75em 0;}

.blueBG{
	text-align: center;
	background: var(--blue);
	color: white;
}

.yellowBG{background: var(--yellow);}
.grayBG{background: var(--gray);}
.pattern{
	background-image: url('../images/bg2.jpg');
	background-position: center;
	background-size: cover;
}

#heroImg{
	width: 6.5vw;
	display: inline-block;
	margin: 10px 0 20px 0;
	animation: custom 3s ease 0s infinite alternate none;
	
	/* position: sticky;
	top: 100px;
	animation: rotate .25s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s); */
}

@keyframes custom {
	45%, 100% {
			transform: rotate(360deg);}
}


.hero h1{font-size: 2.5em;}
.hero h2{font-size: 2em; font-weight: 600;}
.hero h3{font-weight: 500; font-size: 1.3em;}
.hero .text{padding-bottom: .5em; margin: auto}

button a{text-decoration: none;}

/* .quote{ padding: 0 .5em; } */

.hero ul{list-style-type: none;}
.icon{width: 86px;}

blockquote{margin: 0 0 1em 0; font-weight: 500;}

.prodHomeTxt{font-size: 1.2em; font-weight: 600;}

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

/******************  main menu ******************/

#site-navigation{
	padding: .5em .75em;
	background: var(--blue);
	color: white;
	font-size: 1em;
	align-items: center;
}
/* #primary-menu > li{display: inline;} */
#primary-menu .menu-item{padding: 0 1em;}
#primary-menu {display: flex;}

#primary-menu a{ 
	text-decoration: none; 
	color: white;
	font-weight: 500; 
	border-bottom: 0px solid;
	/* transition: border-bottom .2s; */
	transition: opacity .2s;
}

header{min-height: 50px;}
/* #primary-menu .current-menu-item a{border-bottom: 3px solid var(--yellow); } */

/* #primary-menu a:hover{ border-bottom: 1.5px solid; padding-bottom: .15em; } */
#primary-menu a:hover{ opacity: .5;}
#primary-menu a:link{}
#primary-menu a:visited{}
#primary-menu a:active{}

#menuLogo{
	flex-grow: 5;
  	padding: 0 1em;
  	text-decoration: none;
  	color: white
}

#menuLogo h1{font-size: 1.5em; font-weight: 600;}

.search-meta{padding: 1em; } 
.search-meta a{ margin-right: 1.5em; width: 1.55em;}
.search-meta a:hover{opacity: .5; transition: opacity .2s;}
/***********************************************************/

/****************** secondary product menu ******************/

#category-menu a{ 
	text-decoration: none; 
	color: var(--blue);
	font-weight: 500; 
	border-bottom: 0px solid;
	/* transition: border-bottom .2s; */
	transition: opacity .2s;
	font-size: .95em;
	padding: 0 .25em;
}

#category-menu .current-menu-item a{ border-bottom: 3px solid var(--yellow); padding-bottom: .15em; font-weight: 600;}

/* #category-menu a:hover{ border-bottom: 1.5px solid; padding-bottom: .15em; } */
#category-menu a:hover{ opacity: .5; }
#category-menu .current-menu-item a:hover{opacity: 1;}

.menu-product-categories-container ul {display: flex;}
#category-menu{list-style-type: none;}
#category-menu li{margin: 1em 1.5em 1em 0; }

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

/************************ footer ************************/

footer{min-height: 50px;}

#footer-menu{ 
	display: flex; 
	list-style: none; 
	font-size: .8em; 
	background-color: var(--blue);
}

#footer-menu li a{text-decoration: none; transition: opacity .2s;}
#footer-menu li a:hover{opacity: .6;}
#footer-menu li{padding: 0 1em;}
#footer-menu a{color: white;}

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

.products{
	padding: 0;
  	margin: 0;
  	display: flex;
  	list-style: none;
  	flex-wrap: wrap;
}

li .product{width:25%;}

.products .product a {
	display:  block;
	padding: 1em;
	text-decoration: none;
	color: var(--blue);
}

.product img{
	display: block;
	width: 100%;
	height: auto !important;
	margin:  auto;
	background: red;
}

.product h2{
	font-size: 1.2em; 
	margin: .8em 0 0.5em 0;
	line-height: 1;
	font-weight: 600;
}

.productInfo{margin: 1em 0; text-align: center}

.product .price{font-size: 1.2em;}

/* .itemListWrapper{display: flex;} */
/* .menu-product-categories-container{background: #2E308F} */


.woocommerce-products-header h1{padding-left: .5em; font-size: 1.7em; font-weight: 600;}


/****************** product page *******************/

.entry-summary{
	padding: 2em 2em 0 3em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: flex-start;
	/* width: 40%; */
}
.woocommerce-product-gallery{width: 60%;}
.product_title, .price {margin: 0; margin-bottom: 1rem;}

.product_title{font-size: 1.5em;}
.woocommerce-product-details__short-description{font-size: .9em; padding: 1em 0;}

.cart{width: 100%;}

.cart .button{width: 100%;}

button{
	background-color: var(--yellow);
	color: var(--blue);
	padding: .75em 2em;
	border: none;
	font-size: .9em;
	cursor: pointer;
	border-radius: 200px;
}

.woocommerce-product-gallery__trigger{display: none;}

/* .cart .button:hover{background-color: #F2BE0F;} */
button:hover{background-color: #F2BE0F;}

.woocommerce-product-gallery-wrapper{margin: 0;}

.variations_form tr{font-size: .8em;}
.reset_variations{display: none;}
.woo-variation-swatches.wvs-show-label .variations td .woo-selected-variation-item-name, .woo-variation-swatches.wvs-show-label .variations th .woo-selected-variation-item-name{
	font-weight: 400; margin-left: .5em;}
.variations tbody tr td{
	padding-bottom: 1em;}

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item){
	border-radius: 0px;}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item){
	box-shadow: rgb(209, 209, 196) 0px 0px 0px 1px;}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover{
	box-shadow: #19257A 0px 0px 0px 1px;}


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

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message){
	background: none; border: none; }

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full{
	margin: 0; font-size: 1.2em; }

div.wpforms-container-full .wpforms-confirmation-container-full p, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) p{
	color: var(--blue);}

.notices{background-color: var(--yellow);}

#primary{margin: 1em 4em;}
li.product{width: 25%;}

.wp-element-button{ background-color: var(--yellow); color: var(--blue); border-radius: 2px;}
.wc-block-components-button__text{text-decoration-line: none; }


@media (max-width: 50em) {
	.menu-product-categories-container li {font-size: .9em;}
	.menu-product-categories-container ul {display: inline;}
	#primary{margin: 1em 1em;}
	.products{display: inline;}
	li.product{width: 100%;}
	#primary-menu {display: inline;}
	#primary-menu li {margin-bottom: 0.5em;}
	#footer-menu{display:inline; background: none;}
	#footer-menu li {background: var(--blue); padding: 1em .5em; }
	#top{flex-direction: column-reverse;}
	#heroImg{width: 13vw;}
}

.test{color: limegreen;}