@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

body{
  font-family:'Quicksand'!important;
    
}
main-content{
  padding-top:130px;
}
#header{
  position: fixed;
  border-bottom:1px solid #ededed;
  background:#fff;
  z-index: 9;
  height:117px;
  transition: 0.4s;
  box-shadow:  1px 1px 1px 0px rgb(0,0,0, 0.2)
}

#header, #leftHeader, #rightHeader{
  display:flex;
  flex-direction: row;
  justify-content: space-between;  
  width:100%;
}
#leftHeader{
  max-width: 250px;
}
#rightHeader{
  justify-content: flex-end;
}
#mobileHeaderLinks{
  display: none;  
}

#headerLinks{
  padding:0 45px;
}
#logoPictureTag{
  padding-left:19px;  
}
#logoImg{
transition: 0.4s;
width:240px;
}

.navLinkTabs:after {
  display:block;
  content: '';
  border-bottom: solid 2px #245e36;  
  transform: scaleX(0);  
  transition: transform 0.1s ease-in-out;
  opacity: 0.6
}
.navLinkTabs:hover:after { 
  transform: scaleX(1);
  opacity: 1
}
.navLinkTabs:after{
  transform-origin:  0% 50%; 
}

#headerLinks a{
  color:#245e36;
  font-weight:500
}

#navLinkBox, #headerLinks{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
}

#navLinkBox{
  list-style-type: none;
  
}
#navLinkBox{
  font-size:18px;
  padding-left:0    
}

#footerFlex{
  display:flex;
  flex-direction: column;
  width: 100%;
    background-image:url(data/images/footer-bg.jpg);
background-repeat: no-repeat;  
background-size:1906px 680px;
background-position: center center;
}

#topFooter{
  display:flex;
  flex-direction: row;
  justify-content: flex-end; 
  height: 457px;  
  color:#fff;
  border-top: 10px solid #535353
}


#topFooter .footCol{
  width:100%;
  max-width: 350px;
  padding-top:30px;
  line-height: 1.66
}

#topFooter .footCol h2{
  margin:0
}

#houzz{
  padding-top:15px;
}
#topFooter .footCol:nth-child(1){
  width:195px;
}

#footContact{
  margin:15px 0;
  color:#fff
}
#footContact p{
  margin:0
}

#topFooter .footCol:nth-child(2) h2{
  padding-bottom:5px;   
}
#topFooter .footCol:nth-child(3){
  padding-right:125px;
}
.social{
  width:180px!important;
}
.showroom{
  padding-right:80px;
  font-size:14px;
}
.showroom address{
  font-style: normal;
}
.inspired{
  display:flex;
  flex-direction: column;  
}

.inspiredImgs{
  padding:10px 0 25px 0
}
.inspiredImgs:nth-child(1){
  padding-top:0
}

#topFooter .footCol h2{
  color:#fff;
  text-transform: uppercase;
  font-size:26px;
  margin-top:0
}



#bottomFooter{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width:100%;
  background-color: #43474d;
  height:77px;
}
#copyright{
  font-size: 11px;
  letter-spacing: 1px;
  color:#e2dcdc;
  padding-left:15px;
  opacity: 0.8  
}
#footerLinks{
  width:100%;
  max-width:600px;  
}

#copyright, #footerLinks{
  padding-bottom:12px;
}
#footerLinkBox{
  display:flex;
  flex-direction: row;
  justify-content: space-between;  
  list-style-type: none;
  max-width: 540px;
}

#footerLinkBox .footerLinkTabs a{
  opacity: 0.8;
  color:#e2dcdc;  
}

.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: 18px;
	height: 3.5px;
	background-color:#245e36;
	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% - 6px);
	transform-origin: 11px 1px;
}
.middle-bar {
	top: 50%;
}
.bottom-bar {
	top: calc(50% + 6px);
}

/* login responsiveness page*/
@media only screen and (max-width: 950px) {
  #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; 
  }
}
/* end of login responsiveness page*/

@media only screen and (max-width: 944px) {
  #logoImg{
    height:90px!important;
    width:184px!important;
  }
  main-content{
    padding:0;
  }
  #header{
    position: sticky;
    height:90px!important;
  }

  #headerLinks{
    display:none;
  }  

  #mobileHeaderLinks.show{
    display:flex;
    margin-top:-25px;
    width:100%;
    background:#fff;
  }
  
  #mobileNavLinkBox{
    list-style-type: none;
    padding-left:0;
    width:100%;
  }
  #mobileNavLinkBox .mobileNavLinkTabs a{
    color:#444;
    font-weight: 700;
    font-size: 13px;
    text-transform:uppercase
  }
  .mobileNavLinkTabs.first{
    border:none!important;
  }
  #mobileNavLinkBox .mobileNavLinkTabs{
    border-top:1px solid #ddd;
    padding:16px 0px 14px 19px;
    width:98%;    
  }
  
  .mobileNavLinkTabs.last{
    border-bottom:1px solid #ddd;
  }

  
  #mobileNavLinkBox .mobileNavLinkTabs:hover{
    background:#eee
  }
  
.hamburger {
		display: inline-block;
		cursor: pointer;
		padding: 20px;
	    right: 11px;
	    position: relative;
	}
}

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

  #bottomFooter{
    flex-direction: column;    
    align-items: flex-start;
    height:138px;
  }
    #copyright{
    padding:15px;
  }
  #bottomFooter #footerLinks{
    display:flex;
    justify-content: flex-end;    
    width:100%!important;
    max-width: 100%!important;
      
  }
  
  #bottomFooter #footerLinkBox .footerLinkTabs{
    margin:0 10px;
  }
  .footColHeader, .inspired h2 {
    margin-bottom: 15px!important;
    line-height:1
  }
  #topFooter{
    height:463px;
  }
  .social{
    width:130px!important;
    padding-top:35px;
  }
  .footCol{
    max-width:200px!important;
  }
   .inspired{
width:150px!important;
    
  }
  .inspired .inspiredImgs picture img{
    width:190px;
  }
  .showroom{
    padding-right:0
  }
  #topFooter .footCol:nth-child(3){
    padding-right:90px;
    }
}

@media only screen and (max-width:766px){
  #footerFlex{
    background-size:cover
  }
  #topFooter{
    flex-direction: column;
    height:100%;
    padding:0 45px;
  }
  .footCol{
    max-width: 100%!important;
  }
  .inspired{    
    padding:45px 0 0 0!important;
    width:100%!important;
  }
  
  .inspired .inspiredImgs img{
    width:250px!important;
  }
  #topFooter .social{
    display:flex;    
    flex-direction: column;
    align-items:  flex-end;
    width:100%!important;
  }
  
  #bottomFooter{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100%;
    margin-top:35px;
  }
  #bottomFooter #footerLinkBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left:0;    
  }
  #bottomFooter #footerLinkBox .footerLinkTabs{
    margin:5px 0; 
  }
  #bottomFooter #footerLinks{
    justify-content: center;
    line-height: 13px;
    padding-bottom:0
  }
}