.clear {clear: both;}

/***** Start of primary nav ******/

nav.mobile {display: none;}

nav.primary {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 5%;
}
nav.primary ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
nav.primary ul li {
  display: inline-block;
  position: relative;
  transition: 0.3s;
  height: 100%;
}
nav.primary ul li a {
  font-size: 13px;
  padding: 4.25em .75vw 0;
  margin: 0 .1vw;
  font-weight: 500;
  text-align: center;
  display: block;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
  transition: 0.2s ease-in;
  font-family: 'Roboto Condensed', sans-serif!important;
}
nav.primary ul li a:hover {transition: 0.2s ease-in; color: #ffb74b;}

nav.primary ul li a.home{background: url(../siteart/invicon/home.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.about{background: url(../siteart/invicon/about.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.service{background: url(../siteart/invicon/service.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.showroom{background: url("../siteart/invicon/showroom.png") no-repeat center 32px; background-position: top;}
nav.primary ul li a.lawn{background: url(../siteart/invicon/lawn.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.inventory{background: url(../siteart/invicon/inventory.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.auctions{background: url(../siteart/invicon/auctions.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.store{background: url(../siteart/invicon/shop.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.commission{background: url("../siteart/invicon/commission.png") no-repeat center 32px; background-position: top;}
nav.primary ul li a.nordstrom{background: url(../siteart/invicon/gavel.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.contact{background: url(../siteart/invicon/contact.png) no-repeat center 32px; background-position: top;}

nav.primary ul li a.home,
nav.primary ul li a.about,
nav.primary ul li a.service,
nav.primary ul li a.showroom,
nav.primary ul li a.lawn,
nav.primary ul li a.inventory,
nav.primary ul li a.auctions,
nav.primary ul li a.store,
nav.primary ul li a.commission,
nav.primary ul li a.nordstrom,
nav.primary ul li a.contact{
	transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
nav.primary ul li a.home:hover{background: url(../siteart/invicon/home_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.about:hover{background: url(../siteart/invicon/about_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.service:hover{background: url(../siteart/invicon/service_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.showroom:hover{background: url("../siteart/invicon/showroom_on.png") no-repeat center 32px; background-position: top;}
nav.primary ul li a.lawn:hover{background: url(../siteart/invicon/lawn_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.inventory:hover{background: url(../siteart/invicon/inventory_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.auctions:hover{background: url(../siteart/invicon/auctions_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.store:hover{background: url(../siteart/invicon/shop_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.commission:hover{background: url(../siteart/invicon/commission_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.nordstrom:hover{background: url(../siteart/invicon/gavel_on.png) no-repeat center 32px; background-position: top;}
nav.primary ul li a.contact:hover{background: url(../siteart/invicon/contact_on.png) no-repeat center 32px; background-position: top;}

nav.primary ul ul li a i {color: #ddd; position: absolute; z-index: 333; right: 20px; padding: 0;}

.open-arrow {
  transform: rotate(-180deg);
  transition: all 0.05s ease-in;
}
li > a i {
  transition: transform 0.2s linear;
}
.active-mobile > a i {
  transform: rotate(180deg) !important;
}

/* Appearance of the sub-level links */
nav.primary ul li li {margin: 0;}
nav.primary .primary-sub-menu li a {
  color: #fff;
  display: block;
  font-weight: 500;
  font-size: 14px;
  padding: 15px 25px!important;
  margin: 0;
  text-transform: uppercase;
  text-align: left;
  border: none;
  font-family: 'Roboto Condensed', sans-serif!important;
}
nav.primary ul li li a:hover {
  color: #000;
  background: #ffb74b;
}
nav.primary .primary-sub-sub-menu li a {
  background: #f4f4f4!important;
  margin-bottom: 0!important;
  color: #000!important;
  font-size: 13px; 
  font-family: 'Roboto Condensed', sans-serif!important;
}
nav.primary .primary-sub-sub-sub-menu li a {
  background: #f4f4f4!important;
  margin-bottom: 0!important;
  color: #fff!important;
  font-size: 13px; 
}
nav.primary .primary-sub-sub-menu li a:hover, nav.primary .primary-sub-sub-sub-menu li a:hover {
  color: #fff!important;
  background: #c90217!important;
}
nav.primary ul ul {
  display: none;
  position: absolute;
  justify-content: center;
  z-index: 5;
  width: 275px;
  background: #000;
  webkit-box-shadow: 0px 2px 8px rgb(0 0 0 / 20%);
  -moz-box-shadow: 0px 2px 8px rgb(0 0 0 / 20%);
  box-shadow: 0px 2px 8px rgb(0 0 0 / 20%);
}
nav.primary ul ul ul {
  position: absolute;
  left: 100%;
  z-index: 5;
  top: 0;
  justify-content: center;
}
nav.primary ul li:hover > ul {
  display: block;
  line-height: 18px;
  z-index: 100;
  white-space: nowrap;
  position: absolute;
}
nav.primary ul ul li {
  float: none;
  width: auto;
  position: relative;
  margin: 0;
  display: block;
  font-size: 12px;
}

/******** End of primary Nav ***************/

@media screen and (max-width: 1200px) {
  nav.primary {display: none;}
  .mobile-display {width: 100%; display: block;}
  .mobile-menu-nav-icon {display: flex; justify-content: flex-end;}
  .mobile-menu-nav-icon a {font-size: 32px!important; color: #000!important;}
  .mobile-menu-nav-icon a:hover {color: #333!important;}
	
/*==============================
	Mobile Nav Styles
================================*/
  #menu-button {
    display: inline-block;
	box-sizing: border-box;
  }		
  nav.mobile {
    display: block;
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #000;
    z-index: 9999;
    overflow: auto;
  }
  .mobile.open {
    -webkit-box-shadow: 6px 0px 13px -5px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 6px 0px 13px -5px rgba(0, 0, 0, 0.35);
    box-shadow: 6px 0px 13px -5px rgba(0, 0, 0, 0.35);
  }
  /* MENU HEADER STYLES */
  nav.mobile .mobile_top {
    position: relative;
    display: flex;
    font-size: 18px;
	padding-bottom: 60px;
  }
  /* MENU CLOSE 'X' BUTTON */
  nav.mobile .menu-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 3px 8px 3px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-decoration: none;
  }
  nav.mobile .menu-toggle:hover {
    color: #fff;
	background: #c90217;
  }
  /* MENU LIST STYLE */
  nav.mobile ul {
    list-style: none;
    font-weight: 300;
    margin: 0;
    padding: 0;
  }
  nav.mobile ul li {
    border-bottom: 1px solid #999;
    position: relative;
  }
  nav.mobile ul ul li {
    position: relative;
  }
  /* FIRST LEVEL */
  nav.mobile ul li a {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    font-size: 14px;
	font-weight: 600;
	cursor: pointer;
    width: 100%;
    padding: 15px 25px;
    color: #fff;
    text-decoration: none;
    text-align: left;
    box-sizing: border-box;
	text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
  }
  nav.mobile ul li a:hover {
	color: #000;
	background: #ffb74b;
  }
  /* SECOND LEVEL */ 
  nav.mobile ul li li:last-child, nav.mobile ul li li li:last-child {
    border: none;
  }
  nav.mobile ul li li a {
    background: #333;
    position: relative;
    display: block;
	font-size: 14px;
	font-weight: 500;
    padding: 12px 30px;
    color: #fff;
    text-decoration: none;
	text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
  }
  nav.mobile ul li li a:hover {
    background: #ffb74b;
	color: #000;
  }
  /* THIRD LEVEL */
  nav.mobile ul li li li:last-child {
    border: none;
  }
  nav.mobile ul li li li a {
    background: #222;
    position: relative;
    display: block;
    padding: 7px 10px 7px 35px;
    color: #ddd;
    text-decoration: none;
	text-transform: capitalize;
	font-family: 'Roboto Condensed', sans-serif;
  }
  nav.mobile ul li li li li a {
    background: #111;
    position: relative;
    display: block;
    padding: 7px 10px 7px 35px;
    color: #ddd;
    text-decoration: none;
	text-transform: capitalize;
  }
  nav.mobile ul li li li a:hover, nav.mobile ul li li li li a:hover {
    background: #000;
	color: #fff;
  }
	
  .mobile .social-container {padding: 25px; text-align: left;}
  .mobile .social-container i {font-size: 22px; color: #fff;}
  .mobile .social-container a {
    margin-right: 25px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
  }
  .mobile .social-container a i:hover {opacity: 0.75; transition: all 0.3s ease-in-out;}
	
  .nav-footer {
    color: #555;
    position: relative;
    text-align: center;
    font-size: 13px;
    line-height: 16px;
    padding: 10px;
	font-weight: 500;
  }
  .has-sub-menu a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* FONT AWESOME ICONS */
  nav.mobile ul li a .fa {
    width: 25px;
    font-weight: 100;
    padding: 8px 3px;
    margin: 0 6px 0 0;
    text-align: center;
    background: #292929;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  }
}