/*-------------------------------------------------------------------->
	General Sticky Navigation Styles
<--------------------------------------------------------------------*/

#navigation {
  position: relative;
  background: #f5f5f5;
  bottom: 0;
  height: 65px;
  width: 100%;
  margin-top: 0px;
  z-index: 99;
  border-bottom: 1px solid #e4e4e4;
}

#navigation ul {
  /*display: table;*/
  display: block;
  margin: 0;
  width: 100%;
}
#navigation ul li {
  background: none;
  /*display: table-cell;*/
  display: inline-block;
  margin: 0;
  list-style: none;
}
#navigation.fixed ul li {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
#navigation ul li a {
  color: #4d4d4d;
  display: block;
  font-size: 15px;
  /*padding: 20px 12px;*/
  padding: 20px 35px 20px 12px;
  text-decoration: none;
  text-transform: uppercase;
}
#navigation ul li a:hover {
  color: #2A7433;
}


#navigation ul {
  margin: 0 0 0 5px;
  position: relative;
  /*display: table;*/
  display: block;
  margin: 0;
  width: 100%;
}
#navigation ul li {
  background: none;
  /*display: table-cell;*/
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
#navigation.fixed ul li {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

.nav-section-link  {
  color: #4d4d4d;
  display: block;
  font-size: 15px;
  padding: 34px 12px;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-section-link:hover {
  color: #2A7433;
}




/* Navigation - Button */
/* ================================================= */
#navigation ul li#nav-button {
  float: right;
  position: relative;
  top: 13px;
}
#navigation.fixed ul li#nav-button {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
#navigation ul li#nav-button a {
  background: #f89927;
  display: block;
  font-size: 18px;
  color: #fff;
  padding: 10px;
  text-transform: none;
}
#navigation ul li#nav-button a:hover {
  background: #f36f20;
}


/* Subnavigation */
/* ================================================= */
.touch-enabled .mobile-dropdown-toggler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.nav-section-list {
    position: relative;
}
.non-touch-enabled #navigation .nav-section-list:hover .nav-dropdown-list,
.touch-enabled #navigation .nav-section-list.expanded .nav-dropdown-list{
	display: block;
}
#navigation .nav-dropdown-list {
  background: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-top: none;
  padding: 0 0 1px 0;
  position: absolute;
  top: 100%;
  /* width: auto; */
  width: 200px;
  display: none;
  z-index: 1000;
}
#navigation .nav-dropdown-list li {
  display: block;
  position: relative;
    float: none;
}
#navigation .nav-dropdown-list a {
	color: #2A7433;
	font-size: 0.9em;
	padding: 5px 10px;
	text-transform: none !important;
	text-decoration:none;
	display: block;
	position: relative;
}

#navigation .nav-section-list a {
  position: relative;
}
#navigation .nav-section-list a:after {
  content: "";
  background: url('//www.esri.com/~/media/A539C93AB54847C89DDD51E0CC691BF2.png');
  /* background: url('../graphics/uc-nav-arrows.png'); */
  background-repeat: no-repeat;
  height: 15px;
  width: 15px;
  position: absolute;
  right: 12%;
}
#navigation .nav-dropdown-list a:after {
  background: none;
}

#navigation .nav-section-list:hover a:after,
#navigation .nav-section-list.active-item a:after {
  background-position: -15px 0;
  font-weight: bold;
}
#navigation .nav-dropdown-list a:hover {
  color: #000;
  background:#fff;
}
#navigation .nav-dropdown-list a:hover:after {
  background-position: -15px 0;
}

#navigation #myuc-link a:after {
  background-position: 0 -16px !important;
}
#navigation #myuc-link:hover a:after {
  background-position: -16px -16px !important;
}


/* Navigation - Home Logo */
#navigation #home {
  display: none;
  position: relative;
  top: -13px;
}
#navigation #home a {
  display: inline-block;
  height: 45px;
  padding: 0;
  text-indent: -9999px;
  width: 100px;
}
#navigation.fixed #home {
  display: table-cell;
  -webkit-animation-name: bounceInLeft;
  -moz-animation-name: bounceInLeft;
  -o-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

/* Navigation - Blue Button */
#navigation #nav-button,
#navigation #navButton {
  /*float: right;
  position: relative;*/
  position: absolute;
  top: 13px;
  right: 0;
}
#navigation.fixed #nav-button,
#navigation.fixed #navButton {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
#nav-button a,
#navButton a {
  background:#f89927;
  display: block;
  font-size: 18px;
  color: #fff !important;
  padding: 10px !important;
  text-transform: none;
}
#nav-button a:hover,
#navButton a:hover {
  background: #0f8cb5;
}
.fixed-element li {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

/* Navigation - When Sticky Header Active */
.sticky-wrapper {
  position: absolute;
  width: 100%;
}

.fixed {
  position: fixed !important;
  bottom: 100% !important;
  top: 0 !important;
  margin-top: 0 !important;
}


/* Navigation - Transitions */
.nav-top {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}
.nav-bottom {
  -webkit-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  animation-name: bounceInUp;
}






/*mobile fullsize */
@media screen and (max-width: 920px){
	#navigation .nav-section-list a:after {
  	right: 0;
	}
}


/*mobile fullsize */
@media screen and (min-width: 600px){
	#navigation .mobile-size{
		display:none;
	}
}


/*mobile phone */
@media screen and (max-width: 600px){



}


#navigation .navigation-cta a {
	background: #f89927;
	display: block;
	font-size: 14px;
	color: #fff;
	padding: 0 10px;
	text-transform: none;
	line-height: 40px;
	margin: 5px;
}
#navigation .navigation-cta a:hover {
  background: #0f8cb5;
}




.mobile-size div{
	line-height:50px;
}
.mobile-size .navigation-cta{
	float:right;
}





.current-mobile-navigation-label {
	padding-left: 30px;
	background: url('//webapps-cdn.esri.com/graphics/ui/arrow-open-right-50.png') 6px center no-repeat;
	background-size: 18px;
	cursor:pointer;
	min-width: 120px;
	padding-right: 120px;
	text-transform: capitalize;
}
.current-mobile-navigation-label.expanded{
	background: url('//webapps-cdn.esri.com/graphics/ui/arrow-open-down-50.png') 6px center no-repeat;
}
#nav-button a,
.navigation-cta a,
#navButton a {
	text-decoration:none;
}


/* Media Query - 800px */
/* ================================================= */
@media screen and (max-width: 800px){
	.nav-section-link {
		padding: 34px 12px;
	}
}




/* Media Query - 780px & 720px */
/* ================================================= */
@media screen and (max-width: 780px) {

  #navigation ul li a {
    font-size: 12px;
  }
  #navigation ul li#nav-button a {
    font-size: 15px !important;
  }

}

@media screen and (max-width: 720px){
	.nav-section-link {
		padding: 12px 8px;
		font-size: 13px;
	}
}


/* Media Query - 600px */
/* ================================================= */
@media screen and (max-width: 600px) {

  html,
  body {
    margin: 0;
    padding: 0;
    height: auto;
  }
  #navigation {
    height: 35px;
    position: relative;
  }
  #navigation.fixed {
    height: 35px;
  }
  #navigation ul li a {
    font-size: 14px;
    text-align: center;
  }
  #navigation.fixed ul li#home,
  #navigation ul li#nav-button {
    display: none;
  }
  #nav-scroll {
    display: none;
  }


  #navigation {
		display: block;
		height: 50px !important;
	}
	#navigation .full-size,
	#navigation #nav-button,
	#navigation #navButton {
		display:none;
	}
	#navigation.expanded .full-size{
		display:block;
	}
	#navigation .full-size ul li {
    float: none;
    display: block;
    width: 100%;
    background: #efefef;
    padding: 0;
    left: 0;
	}

	#navigation .nav-section-list{
		border-bottom:   1px solid #ccc;
	}
	#navigation .nav-section-list:hover{
		background: #ddd;

	}
	#navigation .nav-dropdown-list li:hover{
		background: #eee;
	}
	#navigation .nav-section-list a:after {
  	background: none !important;
	}

	#navigation .full-size ul {
		position: absolute;
		top: 51px;
		margin:0;
		text-align: center;
	}
	#navigation .full-size .nav-dropdown-list {
  	top: 0;
	}
	#navigation .full-size .nav-dropdown-list li {
  	background: #fcfcfc;
	}
	#navigation .nav-section-link {
		padding: 10px 5px;
		line-height:30px;

	}
	#navigation .nav-section-link:hover {
		text-decoration:underline;
		background:#ddd;
	}

	#navigation .full-size ul li ul {
		position: relative;
		display:none;
	}
	.touch-enabled #navigation .full-size ul li ul.expanded,
	.non-touch-enabled #navigation .full-size ul li:hover ul{
		display:block;
		padding: 0;
		margin: 0;
	}
    .touch-enabled #navigation .full-size ul li ul.expanded li,
    .non-touch-enabled #navigation .full-size ul li:hover ul li{
		display:block;
	}


	#navigation .nav-dropdown-list a:hover {
    background:rgba(0,0,0,.1);
	}
	#navigation .nav-dropdown-list {
		background: #FFF;
		border: none;
		width: auto;
	}
	#navigation .nav-dropdown-list li{
		background:none;
	}

	#navigation .nav-dropdown-list a {
		line-height: 40px;
		border-top: 1px solid #ccc;
		display: block;
		text-decoration: none;
	}


}