@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
	margin:0;	
}

body{
	font-family: "jost"
}

#logo{
	display:flex;
	align-items: center;
	padding-top:20px;
	padding-bottom:10px;
	padding-left:20px;
  width:86px;
}
#familyOwnedLogo{
  display: flex;
	justify-content: center;
  position: relative;
	top:10px;
	left:55px;
}
#logo img{
	width:210px;
}

#searchbar button[type="submit"]{
	background-color:#e0e0e0;
	font-size:24px;
	color:#173384;
	padding:12px 20px;
	border-radius:0 25px 25px 0;
border:none
}
#searchbar{
	display: flex;
position: relative;
	right:30px;
	top:10px;
}
#searchbar input{
	font-size:16px;
  padding:14px;
	border-radius:  25px 0 0 25px;
  border:1px solid #e6e6e6;
	width:200px;
}

#mobileSearch{
	display: none;
}
#topHeader{	
	background:#e7eded;
	display:flex;
	justify-content: center;
	padding-bottom: 5px;
}
.stateCol{
	padding: 10px 130px;
	text-align:center;
	font-size:14px;
}
.stateCol .fa-phone{
	color:#173384;
	transform: rotate(5deg) scaleX(-1);
}
.stateName{
	color:#173384;
	font-weight: 700;
	text-transform:uppercase;
	padding-bottom:5px;
}
.stateNumber a{
	text-decoration: none;
	color:#173384;
}

#middleHeader{
	display:flex;
	justify-content: space-between;
	align-items:center;		
  margin:0 auto;
  max-width: 1400px;
	width:100%;
	padding-bottom:15px;
}

#bottomHeader{
	background: #173384;
	display:flex;
  justify-content: center;
	height:90px;	
	width: 100%
}

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

#navList ul{
	display:flex;
	justify-content: space-between;
	margin:50px;
	padding-right:80px;
	padding-left:35px;
	padding-bottom:5px;
	width:100%;
	max-width: 1577px; 
	list-style-type: none;
}

#navList li{
	display:flex;

}
#navList li a{
	display:flex;
	align-items: center;	
	color:#fff;	
	text-transform:uppercase;
	text-decoration: none;
	font-size:16px;
	letter-spacing: 2px	;
  padding-top:10px;
	padding-bottom:10px;
	padding-left:20px;	
}

#navList li:hover{	
	border-bottom: 3px solid #fff;
}

.mobileNumbers{
	display: none!important;
}

#becomeaPro{
	background:#000;
	padding: 10px 47px;
	width: 208px;
	display:flex;
	align-items: center;
	font-size:16px;
	text-transform: uppercase;	
}

#becomeaPro a{
	color:#fff;
	letter-spacing: 1.5px;
}
.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: 43%;
	
}
.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: 55%;
  left:30px;

}
.top-bar ,
.middle-bar, 
.bottom-bar {
	width: 62px;
	height:10px;

	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% - 17px);
	transform-origin: 11px 1px;
}
.middle-bar {
	top: 50%;
}
.bottom-bar {
	top: calc(50% + 17px);
}

#topFooter{
    display:flex;
    justify-content: center;
    align-items: center;
    height:166px;  
    background-color:#173384;
  }
  
  #topFooter a{
    font-size:30px;
    text-decoration:none;
    color:#fff;
  
  }
 
#middleFooter{
	display:flex;
	align-items: center;
	padding-top:14px;
	padding-bottom:10px;

}
  #blogLink{
    font-weight: bold;
    text-transform: uppercase;
    border-bottom:1px solid #fff
  }
  
#blogSentence .fa-arrow-circle-right{
	font-size:39px;
	color:#fff;
border-radius: 50%;
padding: 7px 12px;
text-align: center;
margin-left: 20px;
}
  
  #middleFooter #navList{
    display:flex;
    justify-content: center;
  }
  
  #middleFooter #navList a{
    color:#000;
    text-decoration: none;
    padding: 36px 20px;
    text-transform: uppercase;
		font-size:16px;
  }
  
  #bottomFooter{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background:#26241f;		
		width:100%;
	  font-size:20px;
		padding-top:60px;
  }  

#footFlexCol{
  display:flex;
  flex-direction: column;
		align-items: center;  
	width:100%;

}

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

#whiteLine{
	margin-top:35px;
  border-top:1px solid rgb(255,255,255,0.5);
	max-width: 1300px;
	width:100%;
}
#copyright{
  display:flex;
  flex-direction: row;
  color: #fff;
  padding-top:35px;
  padding-left:135px;
	padding-bottom:25px!important;
	margin: 0 auto;
	width:100%;
  max-width: 1300px;
}
#termsAndConditions{
  display:flex;
   flex-direction: row;
  justify-content: flex-end;  
max-width:770px;
  width:100%;
}
#termsAndConditions a{
  display:flex;
  padding:0 22px
}
#copyright{
	padding-bottom:15px;
}
#copyright a{
	color:#fff;
	font-size:16px;
}
span.address{
  color:#767676;  
}
  .footCol {
    display:flex;
    flex-direction: column;
    padding-left: 35px;
    padding-right:66px;
		padding-bottom:10px;
    color:#fff;
		line-height: 26px;
  }
  .footCol h2{
    text-transform: uppercase;
    font-size:20px;
  }
  .footCol a{
    color:#fff;
    text-decoration: none;
  }
 
.footCol:nth-child(3){
	padding-left:7px;  
}
#logoButton{
	padding:0 25px;
	width:245px;
		text-align:center;
}

#logoButton img{
	padding-bottom:15px;
}
   #logoButton a{
    background:#173384;
    font-size:18px;
		text-transform: uppercase; 
    padding:15px 30px;
        transition:0.4s;
  }
  
  .footCol:nth-child(1) a:hover{
    background:#000;
    transition:0.4s;
  }
  
  .footCol:nth-child(2) a, .footCol:nth-child(3) a{
    padding: 8px 0
  }
.footCol:nth-child(2){
width:230px;
}
.footCol:nth-child(1){
	line-height: 1.5
}
  #locationsContact{
    display:flex;
    flex-direction: column;
    font-size:16px;	
  }
  
  #locationsContact .footCol{
    width:100%;
  }
#locationsContact .footCol:nth-child(2){
	padding-top:20px;
}

#socialMedia{
	letter-spacing: 6px;
	padding-top:15px;
	font-size: 23px;
}

@media screen and (max-width:1186px){
	.mobileNumbers{
	display: flex!important;
		flex-direction: column;
		align-items:center;
	font-size:20px;
		color:#fff
}

	#familyOwnedLogo{
		left: 0
	}
	#logo{
		margin-top:30px;
		padding:0;
		justify-content: center;
		width:100%;
	}
	#searchHolder{
		display: none;		
	}
	
	#mobileSearch{
		display: flex;
		position: relative;
       
	}
	#mobileSearch #searchHolder{
		display:flex;
		width:100%;
		padding-top:20px;
	}
	
	#mobileSearch #searchbar{
				position: relative;
		right:0;
	 left:0;
		top:0;  
	}
	#mobileSearch #searchHolder input{
		margin: 0 auto;		
		max-width: 1000px;
		width:100%;
	}
	#middleHeader{
flex-direction: column;
		justify-content: center;
	}
	
	#bottomHeader{
		flex-direction: column;
    align-items: center;
		height:100%;
	}
	#navList ul{
		flex-direction: column;
		align-items:center;
	margin:0px;
	padding:0px;
	width:100%;
	max-width: 1577px; 
	list-style-type: none;
}
	#navList li a{
	font-size:16px;
	letter-spacing: 2px	;
	padding: 15px 0px;
	font-size: 14px;
}
	
	#navList a:hover{
		border:none;
	}
	
	#becomeaPro{
		padding:30px 0;
		width:100%;
	}
	
	#becomeaPro a{
	 margin-left:46px;
	}	
}

@media screen and (max-width:1068px){
	#footFlexRow{
		flex-direction: column;
    align-items: center;
		text-align: center;
	}
			#middleFooter #navList{
		flex-direction: column;		
	}
	
	#middleFooter #navList a{
		padding:10px;
	}
	#footFlexCol{
		flex-direction: column;
	}
	
.footCol:nth-child(2){
	padding: 0;
	 width:100%;
	}
	.footCol:nth-child(3){
	padding:0px;
  margin-top:20px;
}
	.footCol{
		padding-top:20px;
	}
	
	#logoButton{
		padding:0;
    width: 100%;    
	}
	#locationsContact .footCol{
		padding:0;
		margin-top:10px;
	}
	#copyright{
		flex-direction: column;
    align-items: center;
		padding:0;
	}
	#termsAndConditions{
		flex-direction: column;
		    align-items: center;
    margin-top:40px;
	}
	
	#termsAndConditions a{
		margin-top:15px;
	}
	
	
}


@media only screen and (max-width: 768px) {
	#navList{
		display:none;
	}
	
	#navList.show{
		display:flex;
	}


.hamburger {
		display: inline-block;
		cursor: pointer;
		padding: 50px;
	    right: 11px;
	    position: relative;
	}
}