/*------->>> TABLE OF CONTENTS <<<-------
	1. PRIMARY NAVIGATION STYLES [Main Menu Bar]
	2. FLEXNAV BASE STYLES [Mobile Menu]
	3. BREAD CRUMBS
	4. MEDIA QUERIES [Desktop Menu Lives Here]
	5. OLD IE STYLES [Don't Style]

/*------->>> 1. PRIMARY NAV STYLES <<<--------*/

.primary__nav {
  background: #30596d;
}

.primary__nav nav {
  margin: 0 auto;
  max-width: 1045px;
  max-width: 65.313rem;
}

/*------->>> 2. FLEXNAV BASE STYLES [Mobile Menu] <<<-------*/

.flexnav,
.flexnav ul {
  list-style: none;
}

.flexnav {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  margin: 0 auto;
  padding: 0;
  /* -webkit-transform-style:preserve-3d; */
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 6;
  background: #30596d;
}

.flexnav.opacity {
  opacity: 1;
}

.flexnav.flexnav--show {
  opacity: 1;
  max-height: 2000px;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.flexnav.one-page {
  max-width: 200px;
  position: fixed;
  top: 50px;
  right: 5%;
}

.flexnav li {
  overflow: hidden;
  position: relative;
  font-size: 100%;
}

.flexnav li a {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0.873rem 0;
  background: #30596d;
  font-family: 'Roboto',sans-serif;
  font-size: 0.938rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  z-index: 2;
}

.flexnav > li:first-of-type > a {
  padding-top: 61px;
}

/*.flexnav li:not(:last-of-type) a {
	border-bottom:1px solid rgba(1,36,64,0.5);	
}*/

/*- nested UL -*/

.flexnav li ul {
  margin: 0;
  width: 100%;
  background: #30596d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-width: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.flexnav li ul.open {
  max-height: 1500px;
  border-width: 1px;
}

.flexnav li ul li {
  position: relative;
  overflow: hidden;
  font-size: 100%;
}

.flexnav li ul.open li {
  overflow: visible;
}

.flexnav li ul li a {
  display: block;
  font-weight: 300;
}

/*.flexnav li ul li:not(:last-of-type) a {
	border-bottom:1px dotted rgba(1,36,64,0.5);	
}*/

/*- drop down arrows -*/

.flexnav .flexnav__touch {
  display: inline-block;
  width: 46px;
  height: 46px;
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  z-index: 999;
}

.flexnav > li:first-of-type .flexnav__touch {
  top: 47px;
}

.flexnav .flexnav__touch:after {
  display: inline-block;
  margin: 0 auto;
  content: "\f107";
  font-family: 'FontAwesome';
  font-size: 1.25rem;
  color: white;
  line-height: 46px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.flexnav .flexnav__touch.flexnav__touch--active:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.flexnav .flexnav__touch:hover {
  cursor: pointer;
}

.flexnav .flexnav__touch .flexnav__touch__icon {
  display: none;
}

/*- menu button [bars?] -*/

.flexnav__button {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  /* top:100%;
	left:0;
	width:110px; */
  height: 36px;
  background: #30596d;
  font-weight: 500;
  font-size: 1.25rem;
  text-transform: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
  /* padding:0.875rem 0 0.875rem 1.25rem; */
  padding: .5rem .75rem;
  -webkit-box-shadow: -0.707px 0.707px 4.9px 0.1px rgba(30, 30, 31, 0.21);
  box-shadow: -0.707px 0.707px 4.9px 0.1px rgba(30, 30, 31, 0.21);
  z-index: 7;
}

.flexnav__button.flexnav__button--active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.flexnav__button.one-page {
  position: fixed;
  top: 0;
  right: 5%;
  padding-right: 45px;
}

.flexnav__button .flexnav__button__container {
  position: relative;
  width: 13px;
  display: inline-block;
  /* height:47px;
	position:absolute;
	right:1.25rem;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);	 */
  text-align: center;
  z-index: 999;
}

.flexnav__button .flexnav__button__container .flexnav__button__icon {
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  background: #fff;
  -webkit-transition: background 0.2s;
  -o-transition: background 0.2s;
  transition: background 0.2s;
}

.flexnav__button .flexnav__button__container .flexnav__button__icon:before {
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: -5px;
  left: 0;
  content: "";
  background-color: #fff;
  -webkit-transition: top .3s .3s, -webkit-transform .3s 0s;
  transition: top .3s .3s, -webkit-transform .3s 0s;
  -o-transition: top .3s .3s, transform .3s 0s;
  transition: top .3s .3s, transform .3s 0s;
  transition: top .3s .3s, transform .3s 0s, -webkit-transform .3s 0s;
}

.flexnav__button .flexnav__button__container .flexnav__button__icon:after {
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -5px;
  content: "";
  background-color: #fff;
  -webkit-transition: bottom .3s .3s, -webkit-transform .3s 0s;
  transition: bottom .3s .3s, -webkit-transform .3s 0s;
  -o-transition: bottom .3s .3s, transform .3s 0s;
  transition: bottom .3s .3s, transform .3s 0s;
  transition: bottom .3s .3s, transform .3s 0s, -webkit-transform .3s 0s;
}

.flexnav__button.flexnav__button--active .flexnav__button__container .flexnav__button__icon {
  background: transparent;
}

.flexnav__button.flexnav__button--active .flexnav__button__container .flexnav__button__icon:before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flexnav__button.flexnav__button--active .flexnav__button__container .flexnav__button__icon:after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*------->>> 3. BREAD CRUMBS <<<-------*/

.bread_crumbs {
  margin: 1.25rem 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: #47484b;
}

a.bread_crumbs.bread_crumbs {
  font-weight: 300;
  color: #47484b;
}

a.bread_crumbs:last-child {
  font-weight: 500;
}

a.bread_crumbs.bread_crumbs:hover {
  color: #a00a2d;
}

/*------->>> MOBILE SECONDARY NAV <<<-------*/

.subnav__wrap {
  background-color: #ffffff;
}

.subnav__container {
  width: 100%;
  margin: 0 auto;
  padding: 0 .625rem;
  position: relative;
}

.subnav {
  overflow-x: scroll;
  margin-right: -.625rem;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.subnav__list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  height: 36px;
}

.subnav__list li {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  padding: 0 .75rem;
}

.subnav__list li:first-child {
  padding-left: 0;
}

.subnav__list a,
.subnav__list a:link,
.subnav__list a:visited {
  color: #3c7286;
}

.subnav__list ul {
  display: none;
}

.subnav__list a {
  font-size: .938rem;
  padding: 5px 0 4px;
  display: inline-block;
  white-space: nowrap;
}

.subnav__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  color: #30596d;
  font-size: 1.5rem;
}

.subnav__arrow--prev {
  left: 0;
  padding-right: 3.125rem;
  padding-left: .25rem;
  background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
  background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(80%, #ffffff));
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
}

.subnav__arrow--next {
  right: 0;
  padding-left: 3.125rem;
  padding-right: .25rem;
  text-align: right;
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, #ffffff));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
}

.subnav__arrow--active {
  opacity: 1;
  z-index: 1;
}

/*------->>> 4. MEDIA QUERIES <<<-------*/

@media all and (min-width: 48rem) {
  /*- 768px and up -*/

  .bread_crumbs {
    margin: 1.25rem 0 2.5rem;
  }

  .bio__bread .bread_crumbs {
    margin-bottom: 1.25rem;
  }

  .primary__content .bread_crumbs {
    font-size: 1rem;
    /* text-align:right; */
  }

  /* .flexnav > li {
		margin-left:0.438rem;
		margin-right:0.438rem;
	}
	.flexnav li > ul {
		width:175px;
	}
	.flexnav .flexnav__touch {
		right:-37px;
	} */
}

@media all and (min-width: 64rem) {
  /*- 1024px and up -*/

  .nav__arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0px;
    height: 0px;
    font-size: 0px;
    line-height: 0;
    -webkit-transform: translateX(-50%) translateY(10px);
    -ms-transform: translateX(-50%) translateY(10px);
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    -webkit-transition: left 0.2s linear, opacity 0.2s linear;
    -o-transition: left 0.2s linear, opacity 0.2s linear;
    transition: left 0.2s linear, opacity 0.2s linear;
    z-index: 10;
  }

  .nav__arrow--show {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0);
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    -webkit-transition: left 0.4s linear, opacity 0.4s linear;
    -o-transition: left 0.4s linear, opacity 0.4s linear;
    transition: left 0.4s linear, opacity 0.4s linear;
  }

  /*---> Primary Nav <---*/

  .primary__nav nav {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  /*---> Desktop Menu <---*/

  .flexnav {
    position: relative;
    max-height: none;
    overflow: visible;
    top: auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    background: transparent;
  }

  body.one-page {
    padding-top: 70px;
  }

  .flexnav.opacity {
    opacity: 1;
  }

  .flexnav.one-page {
    max-width: 1080px;
    top: 0;
    right: auto;
  }

  .flexnav li {
    list-style: none;
    display: block;
    overflow: visible;
    position: relative;
    background: none;
    text-align: center;
  }

  .flexnav > li {
    /* margin-left:0;
		margin-right:0;
		padding-left:0.188rem;
		padding-right:0.188rem; */
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }

  .flexnav > li > a {
    height: 100%;
    width: 100%;
    padding: 1rem 0;
    background: none;
    font-size: 0.813rem;
    border: none;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    color: #fff;
  }

  .flexnav > li:first-of-type > a {
    padding: 1rem 0;
  }

  /* .flexnav > li > a:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: $secondary-color;
		width: 0;
		height:100%;
		z-index:-1;
		transition: all 0.3s ease-in-out;
	} */

  /*	.flexnav li.active > a:before {
		width: 100%;  
	}*/

  /*- nested UL -*/

  .flexnav > li > div {
    top: auto;
    width: 100vw;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    right: 0;
    background: #ffffff;
    /* overflow: hidden; */
    -webkit-transition: max-height 0.3s ease-out 0.5s;
    -o-transition: max-height 0.3s ease-out 0.5s;
    transition: max-height 0.3s ease-out 0.5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    list-style: none;
    -webkit-box-shadow: 0px 1px 7px 0px rgba(168, 168, 168, 0.5);
    box-shadow: 0px 1px 7px 0px rgba(168, 168, 168, 0.5);
  }

  .flexnav > li > div.open {
    max-height: 300px;
    -webkit-transition: max-height 0.1s ease- 0;
    -o-transition: max-height 0.1s ease-out 0;
    -webkit-transition: max-height 0.1s ease-out 0;
    transition: max-height 0.1s ease-out 0;
    z-index: 10;
  }

  .flexnav > li.active > div.open {
    z-index: 1;
  }

  /* .flexnav li ul {
		display:none;
		background:transparent;	
		border:0;			
	} */

  .flexnav > li > div > ul {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    max-width: 65.313rem;
    margin: 0 auto;
    opacity: 0;
    background: none transparent;
  }

  .flexnav > li > div.open > ul {
    opacity: 1;
    max-height: 300px;
  }

  .flexnav li > ul {
    width: 150px;
    position: absolute;
    top: calc(100% + 0.875rem);
    left: -100%;
    right: -100%;
    margin: 0 auto;
    background: rgba(17, 59, 101, 0.9);
    -webkit-box-shadow: none;
    box-shadow: none;
    /* padding:0.5rem 0.25rem !important; */
  }

  .flexnav li > ul li {
    width: 100%;
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
  }

  .flexnav li ul li {
    /* margin-right: .75rem; */
  }

  .flexnav li ul li a {
    color: #3c7286;
    font-size: 0.938rem;
    background: transparent;
    font-weight: normal;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .flexnav li ul li a:hover,
  .flexnav li ul li a.active {
    color: #a00a2d;
  }

  .flexnav li > ul li a {
    padding: 0.313rem 0.438rem;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3c7286;
    border: 0;
    text-align: left;
    margin: 0 !important;
  }

  .flexnav li > ul li a:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #0294ce;
    width: 0;
    height: 100%;
    z-index: -1;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .flexnav li > ul li a.active,
  .flexnav li > ul li a:hover {
    color: #fff;
  }

  .flexnav li > ul li a.active:before {
    width: 100%;
  }

  .flexnav li ul.open {
    /* display:block; */
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }

  .flexnav li ul.open li {
    max-height: 100px;
    overflow: visible;
  }

  .flexnav li ul.open ul.open {
    margin-left: 100%;
    top: 0;
  }

  /*- bottom borders -*/

  .flexnav li:not(:last-of-type) a,
  .flexnav li ul li:not(:last-of-type) a {
    border-bottom: 0;
  }

  /*- drop down arrows -*/

  .no-touch .flexnav .flexnav__touch,
  .no-touch .flexnav__touch .flexnav__touch__icon,
  .no-touch .flexnav__touch:after {
    display: none;
  }

  .touch .flexnav .flexnav__touch {
    display: block;
  }

  .flexnav .flexnav__touch {
    /* top:-0.313rem;
		right:-35px; */
    top: 0;
    right: 0;
    width: 30px;
  }

  .flexnav > li:first-of-type .flexnav__touch {
    top: 0;
  }

  .flexnav .flexnav__touch:hover {
    cursor: pointer;
  }

  /*- menu button -*/

  .flexnav__button {
    display: none;
  }

  .flexnav > li {
    /* padding-left:0.75rem;
		padding-right:0.75rem;		 */
  }

  .flexnav > li a,
  .flexnav > li:first-of-type > a {
    /* font-size:1rem; */
    padding: 1rem 0.313rem;
  }

  .flexnav li > ul li a {
    font-size: 0.938rem;
  }
}

@media all and (min-width: 64.063rem) {
  /*- *1025px and up -*/

  /* .flexnav li:hover > a:before {
		width: 100%;  
	} */

  .flexnav li > ul li a:hover:before {
    width: 100%;
  }
}

@media all and (min-width: 1045px) {
  /*- 1045px and up -*/

  .flexnav > li a,
  .flexnav > li:first-of-type > a {
    font-size: 1rem;
  }

  .flexnav > li > div {
    margin: 0 auto;
  }

  .flexnav > li {
    /* padding-left:0.875rem;
		padding-right:0.875rem; */
  }

  .flexnav .flexnav__touch {
    right: -10px;
  }
}