@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
*{
	   font-family: 'Questrial', sans-serif;
}
.fa-phone-alt, .fa-sign-in-alt, .fa-shopping-cart{
	text-align: center;
	font-size:2em;
		padding-bottom:10px;
	cursor: pointer;
}

#coming-Soon{
	display: flex;
	justify-content: center;
	padding:15px;
	
}
#coming-Soon img{
	max-width: 950px;
	width:100%;

}
main-content{
	max-width: 1400px;
	width: 100%;
	margin:auto;
}

#catalogContentHolder{
	width:83%!important;
}
header{
	display:flex;
	flex-direction: column;	
}

#searchHolder{
	display: flex;
  align-items: center;
	position: relative;
	left:65px;
}
#searchbar input{
	padding-top:10px;
	padding-bottom:10px;
	border-radius: 5px;
	width:400px;
  border:1px solid #000;
	border-right:none;	
}
button[type="submit"]{
padding:10px;
 border:none;
	background:#fff;
	position: relative;
	right:10px;
	border:1px solid #000;
	border-left:none;
	border-radius:0 5px 5px 0	
}
#topHeader{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	margin: 2% auto;
	max-width: 1350px;
	width:100%		
}

#bottomHeader{
	display:flex;
	justify-content: space-between;
	margin: 0 auto;

}

.userCenter{
	display:flex;
	flex-direction: row;	
}

#navList{
	display:flex;
	justify-content: space-between;
	width: 100%;
}
#navList ul{
	display:flex;
	justify-content: space-between;
	padding-left:0		
		
}
#navList ul li{
display:inline-block;
padding:0 2.5rem;
	font-size:1.75rem
}

#navList a{
	color:#000;
	font-weight: 400
}

#navList a:hover{
	color:#0a5e23;
		
}

#cart{
	display:flex;
	flex-direction: column;	
	font-size: 16px;
	color:#000;
	padding-right:0;
}

span[counter-qty="Cart"]{
	position: relative;
  bottom:23px;
	right:15px;
	font-size:14px;
	font-weight: 200;
	z-index: 999;
	background:	#0a5e23;
	padding:3px 9px;
	border-radius: 6px;
	color:#fff;
}

#contactUs a{
	display:flex;
	flex-direction: column;
	color:#000
}

#contactUs a:hover{
	color:#0a5e23;
}
#contactUs,#login{
	display:flex;
	flex-direction: column;
	align-items: center;
	margin-right: 85px;
	font-size:16px;
	color:#000;
	cursor:pointer
}

#login:hover{
	color:#0a5e23;
}

#cart{	
	cursor: pointer
}

#cart:hover{
	color:#0a5e23;
}
#homeWrap{
	display:flex;
	flex-direction: row	
}
#homeCol{
	display:flex;
	flex-direction: column;
	align-items: center;	
  padding: 1rem
}


#homeCol img{

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

#homeCol a{
	font-size:1.5em;
	padding-top:10px;
}

#homeCol a:hover{
	color:#047233;
}
.homeColBtn{
border: 4px solid #0a5e23;
color: #000;
text-align: center;
font-size: 1.5rem;
padding: 15px 20px;
margin: 1rem auto 0;
max-width: max-content;
}

#infoPage{
	display:flex;
	flex-direction: row;
	justify-content: space-between;	
}

#leftInfoColumn{
  display: flex;
	flex-direction: column;
	margin: 0 auto;
}

#rightInfoColumn{
	display:flex;
	flex-direction: column;
	margin: 0 auto
}
#infoCol{
	display:flex;
	justify-content: space-between;
	margin: 0 auto;
	padding-top:25px;
	padding-bottom:25px;
}
.formBtn[data-button="submit"]{
	color: #000!important;
}
footer{
	background:#0a5e23;
	color:#fff;
	font-size:16px;
}

#backgroundFoot{
	display:flex;
	flex-direction: row;
	justify-content: space-between;	
	padding-top:35px;
	margin: 0 auto;
	max-width: 600px;
	width:100%;
}

#backgroundFoot h2{
	font-size:1.75em
}

.footerCol:nth-child(1){
	width: 421px;
}
.footerCol:nth-child(2){
	width: 191px;
}

.timeFrame{
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
  padding-left:15px;
}

.footerCol{
	padding:0 2%;	

}
.footerLinks{
	padding-left:0;
}

.footerLinks li{
	font-size:16px;
	list-style-type: none;
}

.footerLinks li a{
 font-size:1.5em;
 color:#fff;
}


#footPhone{
	display:flex;
	flex-direction: column;
}
#footPhone a{
	color:#fff
}

.newsletterBtn{
	font-size: 1.75em;  	
}
#hoursAddress{
	display:flex;
	flex-direction:row;	
}

#footAddress{
	padding-left:30px;
}

#footAddress p{
	margin: 0
}

#hours ul{
	list-style-type: none;
	padding-left:0
}

#hours li{
	display:flex;
	justify-content: space-between
}

.hamburger {
	display: none;
}
.hamburger.active .top-bar {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
}
.hamburger.active .middle-bar {
	opacity: 0;
}
.hamburger.active .bottom-bar {
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	top: 50%;
}
.top-bar ,
.middle-bar, 
.bottom-bar {
	width: 22px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	right: 50%;
	transition-delay: 0.1s,0.2s;
	transition-duration: 0.1s,0.1s;
	transition-timing-function: ease-in-out;
	left: calc(50% - 11px);
	border-radius: 5px;
}
.top-bar {
	top: calc(50% - 7px);
	transform-origin: 11px 1px;
}
.middle-bar {
	top: 50%;
}
.bottom-bar {
	top: calc(50% + 7px);
}

@media screen and (max-width:1408px){
	#topHeader{
		flex-direction: column;
		text-align:center;
	}
	
	.userCenter{
		padding-top:15px;
	}
	
	#searchHolder{
		position: relative;
		left:0;
		padding-bottom:12px;
			
	}
	.footerCol{ 
		width:100%;
		margin:0 auto;
	}
}
@media only screen and (max-width:1110px){
	#infoPage{
		flex-direction: column;
		align-items:center;
		padding-right:0	;
		text-align:center;			
	}
	#infoPage p{
		text-align: center;
	}
}
@media only screen and (max-width: 950px) {
    #infoPage { padding:50px 20px 50px 30px; color:#666; font-size:12px; font-weight:none; line-height:20px; text-align:left; min-height:450px; }
    
    #leftInfoColumn { float:left; max-width:400px; width: 100%; font-size:16px; line-height:25px; color:#999; }
        #contactInfoBox { min-height:200px; }
    #leftInfoColumn b { font-size:16px; text-transform:uppercase; }
    
    #rightInfoColumn { float:right; max-width:500px; width: 100%;}
    
    #dynamicAddress { border:1px solid #ccc; padding:5px; margin-top:20px; max-width:385px; height:270px; }
    #contactForm .buttonContainer { padding:5px 0; }
    
    #loginbodyWrapper {
        width: 100% !important;
    }
    #loginLoginSubLeft {
        max-width: 398px;
        margin-bottom: 20px;
    }
    #loginLoginSubRight {
        max-width: 348px;
        border-left: none !important;
    }
    #loginLoginSubRight, #loginLoginSubLeft {
        height: auto !important;
        float: none !important;
        width: 100% !important;
        padding: 0 0 0 2% !important;
        box-sizing: border-box !important;
    }
    .loginSubFormWrapper {
        width: 100% !important;
    }
    #loginSignInHeader {
       padding: 18px 15px !important; 
    }
}

@media only screen and (max-width: 837px){
	#backgroundFoot{
		flex-direction: column
	}
}

@media only screen and (max-width: 768px) {
	#navList{
		display:none;
	}
	#navList.show{
		display:block;		
	}
	#bottomHeader{
		flex-direction: column;
		width:100%;
	}
	
	#bottomHeader > #navList.show >ul{
		display:flex;
		flex-direction: column;
		align-content: flex-start;  
	}
	
.hamburger {
		display: inline-block;
		cursor: pointer;
		padding: 20px;
	    right: 11px;
	    position: relative;
	}
}