@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');

body{
  font-family: 'Open Sans Condensed'!important;
}
header{
  display:flex;
  flex-direction: column;
  align-items: center;
  background:#acacac;
  color:#fff;
}

#topHeader{
  display:flex;
  flex-direction: row;
  max-width:1800px;
  font-weight: bold;
  width:100%;
}

#topHeader i.fas{
  padding-right:10px;
}

#hoursLocation #address{
  padding-left: 15px;
}

#hoursLocation{
  display:flex;
  flex-direction: row;
}

#hoursLocation #hours, #hoursLocation #address{
  display:flex;
  flex-direction: row;
  align-items: center;
}
#hoursLocation #address{
  margin-left:15px;
}

#middleHeader{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  max-width:1200px;
  width:100%;
}

#leftMiddleHeader{
  display:flex;
  max-width:550px;
  width:100%;
}

#leftMiddleHeader img{
  width:100%;
}
#centerMiddleHeader{
  display:flex;
  flex-direction: row;
  align-items: center;
  font-size:15px;
  color:#4f4f4f;
}

#centerMiddleHeader a{
  color:#4f4f4f
}

#centerMiddleHeader i.fa, #centerMiddleHeader i.fas{
font-size:25px;
color:#4f4f4f;
cursor: pointer
}

#userCenter, #userCenterIcons{
  display:flex;
  flex-direction: row;
}

#wishList, #cart, .user{
  display:flex;
  flex-direction: column;
  text-align:center;  
}

.userSettings{
  padding: 0 25px;
}

#centerMiddleHeader #searchbar{
  display:flex;  
}

#centerMiddleHeader #searchbar button{
  background:none;
  border:none;
}

#centerMiddleHeader #searchbar input{
  background:none;
  border:none;
  border-bottom:1px solid #4f4f4f;
  color:#4f4f4f;
}

#centerMiddleHeader #searchbar input::placeholder{
  color:#4f4f4f;
}
#rightMiddleHeader{
  display:flex;
  flex-direction: column;  
  align-items: center;
  position: relative;
  top:0px;  
}

#linePhone{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  width:100%;
}

#linecard{
  background:#fff;
  padding: 5px 25px;
  font-size:16px;
  border:2px solid #ad1728;
  border-radius: 18px;
  color:#ad1728;
}

#linecard:hover{
  background:#ad1728;
  color:#fff;
}

#rightMiddleHeader #phoneNumber{
  color:#3e3e3e;
  font-weight:bold;
  font-size:26px;
  text-align:center;
}
span.redText{
  font-size:15px;
  color:#b10115;
  text-transform: uppercase;
}
#bottomHeader{
  display:flex;
  flex-direction: row;
  justify-content: center;
  width:100%;
  background-color:#b10115;
}


#desktopNav{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type:none;
  padding-left:0;
}

#mobileNav{
  display:none;
}

.desktopNavTab a{
    color:#fff;
  font-weight:bold;
   font-size:18px;
  padding:13px 25px
}
.dropBox{
  display:none;
}

.dropMenuTab:hover > .dropBox{
  display:flex;
  flex-direction: column;
  position: absolute;
  z-index: 9999;
  background:#fff;
  list-style-type:none;
  padding-left:0;
}

.dropBox li a{
    color: #b10115;
  padding:5px;  
}

.dropBox li a:hover{
    color:#fff;
}
.dropBox li:hover{
background:#b10115;

}
.dropBox li{

  padding: 10px 26px;
}
.dropBox li:nth-child(1){
  
}
#heroImage{
  display:flex;
  justify-content: center;
  margin:0 auto;
}

#heroImage img{
    width:100%;
  height:100%;
}

#leftSideBar{
  display:flex;
  flex-direction: column;
  float: left;  
}

#leftSideBarHeader{
  text-transform: uppercase;
  border-bottom:3px solid #b10115;
  color:#b10115; 
  font-size:20px;  
}

#leftSideBarHeader h2{
   margin:0;
  
}
#leftSideBarBody{
  padding:0;
  list-style-type: none;  
}

#leftSideBar li{
  font-weight:bold;
  padding:10px 0;

  
}
#leftSideBar a{
  color:#b10115;
  font-size:18px;
  width:100%;  
}

.centerWrap{
  width:100%;
  max-width:1200px;
  margin: 0 auto;
}

#catGallery{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding-left:35px;
}

.fourImageRow{
  display:flex;
  flex-direction: row;  
  flex-wrap: wrap;
  justify-content: center
    
}

.fourImageRow img{
  width:150px;
}

.catBox{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin:15px;
}

.catBox img{
  margin-bottom:15px;
  width:180px;
}

.catBox a{
  color:#b20008;
  font-size:18px;
  font-weight:bold;
  flex-wrap: wrap;
}

#subscribe{
  background-image:url('data/images/home_images/milling-cutter.jpg?v1');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:350px;
  font-size:35px;
  color:#fff;
}


#mailingForm {
  display:flex;
  flex-direction: row;
  align-items:center;
}


#mailingForm #subscribeButton{
  background:#b10115;
  border:none;
  font-size:22px;
  font-weight:bold;
  font-family:'Open Sans Condensed';
  color:#fff;
  text-transform: uppercase;
  height:35px;
  padding:0 15px
}

#mailingForm input{
  display:flex;
  width:550px;
  height:30px;
}

#infoHomeSection{
  display:flex;
  flex-direction: row;
  text-align: center;
  font-size:15px;
  padding-top:65px;
  width:100%;
}


.infoCol{
  display:flex;
  flex-direction: column;
  font-size:20px;
  padding:0 20px
}


.infoCol h2{
  margin:0;
  font-size:20px;
  padding-top:20px;
}
.infoCol .fa  {
  margin: 0 auto;
  background:#b10115;
  width:55px;
  border-radius:50%;  
  font-size:35px;
  color:#fff;
  padding-top:10px;
  padding-bottom:10px;
    text-align: center;
}

.infoCol p{
  text-align: center;
  font-size:15px;
  
}
#aboutHeader{
  display:flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width:1200px;
  padding-top:65px;
  margin:0 auto;
}

#redLine{
  width:100%;
  color:#b10115;
}

#aboutHeader h2{
  font-size:45px;
  margin:0
}

#mainAboutSection{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width:1400px;  
  margin-bottom:65px;
  margin: 0 auto;
}
#mainAboutSection p{
  margin:5px 0;    
  font-size:18px;
}


.aboutTwoCol{
  display:flex;
  flex-direction: row;
  align-items: flex-start;  
}

.aboutCol{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  margin:10px;
  font-size:16px;
  width:650px;
}

.aboutCol i.fa, .aboutCol i.fas{
  background-color:#b10115;
  color:#fff;
  padding:15px;
  border-radius:35px;
}
.aboutText{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left:15px;  
  max-width:708px;
  width:100%
}

.aboutText h2{
  margin:0;
}

.aboutText p{
  font-size:18px;
}

span.bold{
  font-weight:bold;
}

#promoImages{
  display:flex;
  justify-content: space-between;  
  width:100%;
  padding-bottom:15px;
}

footer{
  display:flex;
  flex-direction: column;
  width:100%;
  background:#acacac;  
}

#topFooter{
  display:flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1400px;
  margin:0 auto;
  width: 100%;

}

#topFooter p{
  color:#fff; 
  font-size:18px;
}


#topFooter span.grey{
  color:#464646;
}

#bottomFooter{
  display:flex;
  justify-content: space-between;
  width:100%;
  max-width: 1300px;
  margin:0 auto;
  color:#fff;
  font-size:18px;
  padding:15px 0;
}

#bottomFooter a{
  color:#fff;

}
.footerCol{
  display:flex;
  flex-direction: column;
  max-width: 260px;
  width:100%;
  margin-right:65px;
}

.footerCol h2{
  color:#fff;
  text-transform: uppercase;
}

.footerCol a{
  color:#fff;  
}

.footerCol:nth-child(4){
  width:600px;
}
#footerLinkList{
  font-size:15px;
  width:100%;
  padding-left:0;
  list-style-type: none;
}

#footerLinkList li:nth-child(1){
  border:none;
}
#footerLinkList li{
  margin-bottom:15px;
  margin-top:15px;
  padding-top:15px;
    border-top: 1px solid #9c9c9c;
 width:100%;
}

.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);
}

#featuredItems h2{
  text-transform: uppercase;
color: #b10115;
font-size: 30px;
margin-bottom:35px;
border-bottom:3px solid #b10115;
width:300px;
/*! margin:0 auto; */
}


#featuredItems {
  max-width: 1162px;
  width:100%;
  /*! text-align: center; */
}

#featuredItems .dataBoxBorder{
  border:none;
}

#featuredItems .dataPrice{
  font-weight: 300
}

#featuredItems .dataBoxText{
  display:flex;
  flex-direction: column-reverse;
}

.arrowFormat{
  background: url(data/images/home_images/slideshow-arrows.png) no-repeat scroll left center!important;
height: 40px;
width: 40px;
cursor: pointer;
opacity: .75;  
}

.arrowRight{
    background: url(data/images/home_images/slideshow-arrows.png) no-repeat scroll right center!important;
  float: right;
}

#socialMedia {
  display:flex;
  justify-content: space-between;
  max-width: 150px;
  padding:15px 0;
}
#socialMedia .fab{
  font-size:25px;
}
@media screen and (max-width:1162px){
  .catBox img{
    width:150px;
  }
  #promoImages{
    display:flex;
    justify-content: center;
    padding-bottom:15px;
  }  
  
  #promoImages img{
    max-width: 562px;
    width:100%;
  }
  #leftPromoImg{
    
    padding-right:10px;
  }
}

@media only screen and (max-width:1066px){
  #middleHeader{
    flex-direction: column;
    align-items: center;
  }
  
  #linePhone{
    flex-direction: column-reverse;
    padding-bottom:35px;
  }
    #topHeader{    
    justify-content: center;
  }
  
}
@media only screen and (max-width: 950px) {
  #featuredItems h2{
    margin:0 auto;
    text-align: center;
  }
  #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; 
  }
  #desktopNav{
    display: none;
  }
  #mobileNav.show{
    display:flex;
    flex-direction: column;
    align-items:  flex-start;
    list-style-type: none;
    width:100%;
  }
  
  .mobiledropBox.show{
    display:flex;
    flex-direction: column;
    list-style-type: none;
    
  }
  #mobileNavList{
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left:23px;
    width:100%;

  }
  
  #mobileNavList a{
    color:#fff;
    font-weight: bold;
    font-size:25px;
   
  }
  
  .mobiledropBox{
    display:none;
  }
  
  .mobiledropBox2{
    display: none;    
  }
  
  .mobiledropBox2.show{
    display:block;
    list-style-type:none;
  }
  .mobileNavTab{
    color: #fff;
  font-weight: bold;
  font-size: 25px;
  cursor: pointer;
  }

.hamburger {
		display: flex;  
    justify-content: flex-end;  
		cursor: pointer;
		padding: 20px;

	    position: relative;
	}  
  
  #bottomHeader{
    flex-direction:column
  }
  
  #centerWrap{
    display:flex;
    align-items: center;
    flex-direction: column;
  }
  
  #leftSideBar{
    text-align: center;
  }
  
  #subscribe{
    width:100%;
  }
  #infoHomeSection{
    flex-direction: column;
  }
  
  #mainAboutSection{
    max-width:850px;
    width:100%;
    text-align: center;
  }
  
  #mainAboutSection p{
    text-align: center;
  }
  
  .aboutTwoCol, .aboutCol{
    flex-direction: column;
    align-items: center;
    width:100%;
        max-width:500px;
    margin:0 auto;
  }
  
  .aboutCol{
    display:flex;
    justify-content: center;
    text-align: center;
    width:100%;
    max-width:500px;
  }
  .aboutCol p{
    text-align: center;
    width:100%;
    max-width:500px;
  }
}

@media only screen and (max-width: 768px) {
  .centerWrap{
    display:flex;
    flex-direction: column
  }
  #leftSideBarHeader h2{
    padding:20px 0;
  }
  #catGallery{
    padding:0
  }
  
  #topFooter{
    flex-direction: column;
    align-items: center;
    text-align: center;  
  }
  .footerCol{
    margin:0
  }
  
  .footerCol p{
    text-align: center;
  }
  .footerCol h2{
    font-size:29px;
  }
  #footerLinkList{
    margin-top:0;
    font-size:25px;
  }
  #socialMedia{
    flex-direction: row;
    width:100%;
    margin:0 auto;
  }
  .fourImageRow{
    flex-direction: column;
  }
  
  #promoImages{
    flex-direction: column;
    align-items:center;
  }
  
  #rightPromoImg{
    padding-top:15px;
  }
}

@media screen and (max-width:682px){
  #leftPromoImg{
    padding:0
  }
  #aboutHeader h2{
    text-align: center;
  } 
    #aboutHeader{
    width:100%;
    max-width:500px;
  }
  #mainAboutSection{
    max-width:500px;
  }
  #mailingForm input{
    width:100%;
  }
}

@media screen and (max-width:468px){
  #aboutHomeSection{
    width:100%;
    max-width: 350px;
    margin:0 auto;
  }
  #centerMiddleHeader{
    margin-top:45px;
  }
  #userCenter{
    flex-direction: column;
    align-items: center;
    padding-top:65px 0;
  }
  
  #userCenter #searchbar{
    padding:35px 0 ;
  }
  .centerWrap{
    display:flex;
    flex-direction: column;
  }
}
@media screen and (max-width:334px){
  #aboutHomeSection{
    max-width: 250px;
  }
}