Menu icon Foundation
Medium breakpoint slider and nav issues

Hi all

I'm new to this foundation framework build and i'm having a problem with the medium view points on my site.

I have a slider that I want to feature when viewing on a desktop and tablet, the problem I have is that when you view the tablet version it looks fine on landscape but when on portrait it seems to mess up a bit. Plus if you press the slider arows one to many times the slider won't work any more.

Also (when on medium view) my menu goes to stack version which is fine but it doesn't drop down showing the navigation.

I know this is a few problems which is more to do with my state of coding but i would really appreciate the support of the foundation community on this one.

I have supplied a link to the site in question below:

www.trebuchettest.co.uk

i have also supplied the html file and the css for the slider and top bar navigation.

If anyone can help that would be great

Hi all

I'm new to this foundation framework build and i'm having a problem with the medium view points on my site.

I have a slider that I want to feature when viewing on a desktop and tablet, the problem I have is that when you view the tablet version it looks fine on landscape but when on portrait it seems to mess up a bit. Plus if you press the slider arows one to many times the slider won't work any more.

Also (when on medium view) my menu goes to stack version which is fine but it doesn't drop down showing the navigation.

I know this is a few problems which is more to do with my state of coding but i would really appreciate the support of the foundation community on this one.

I have supplied a link to the site in question below:

www.trebuchettest.co.uk

i have also supplied the html file and the css for the slider and top bar navigation.

If anyone can help that would be great

            

         
         .hero {color:#fff;
height: 300px !important;
padding: 0px 35px 100px 0px;
 }

#hero-desc {margin-top: 80px;
position:absolute;
border-left:3px solid #E98300;
padding-left: 30px;
padding-right: 30px;

}

.image-slider{
position:absolute; z-index: -1;
height: inherit;

}
 
 /* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        top: 0;
        left: 0;
        background-color: #011434;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
        
        
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
            background-color: #011434;
        width: 70%;
        padding: 0.625rem 0.875rem;
 }
        
        
        
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px white;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent white transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
    
    
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: #E98300;
    text-indent: -9999px !important;
    z-index: 10; }
    
    
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
      
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: #E98300; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: #E98300; }
  .orbit-container .orbit-bullets-container {
    text-align: center;
    background-color: #011434; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;
    float: none;
    text-align: center;
    display: block;
    
     }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      background: #cccccc;
      float: none;
      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #E98300;
         }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }

            

         
         .hero {color:#fff;
height: 300px !important;
padding: 0px 35px 100px 0px;
 }

#hero-desc {margin-top: 80px;
position:absolute;
border-left:3px solid #E98300;
padding-left: 30px;
padding-right: 30px;

}

.image-slider{
position:absolute; z-index: -1;
height: inherit;

}
 
 /* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        top: 0;
        left: 0;
        background-color: #011434;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
        
        
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
            background-color: #011434;
        width: 70%;
        padding: 0.625rem 0.875rem;
 }
        
        
        
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px white;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent white transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
    
    
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: #E98300;
    text-indent: -9999px !important;
    z-index: 10; }
    
    
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
      
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: #E98300; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: #E98300; }
  .orbit-container .orbit-bullets-container {
    text-align: center;
    background-color: #011434; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;
    float: none;
    text-align: center;
    display: block;
    
     }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      background: #cccccc;
      float: none;
      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #E98300;
         }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }

         
     /* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: ; }
  
.contain-to-grid .top-bar {
margin-bottom: 0; }

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; 
}

.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; 

}

.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99;
}

.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 45px; 
}

/* mobile screen size items */

/* menu stack placement */
.top-bar .toggle-topbar.menu-icon {
right: 15px;
top: 30%;
margin-top: 30px;
padding-left: 40px; 
text-decoration: none;
}

/* menu stack font */
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: white;
position: relative; 
}


/* menu stack font after click */
.top-bar.expanded .toggle-topbar a {
color:#E98300; }


/* menu stack lines  */
.top-bar .toggle-topbar.menu-icon a::after {
content: "";
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
}
 
/* menu stack lines after click */
.top-bar.expanded .toggle-topbar a::after {
box-shadow: 0 10px 0 1px #E98300, 0 16px 0 1px #E98300, 0 22px 0 1px #E98300; 
}

/* menu stack expaneded when clicked */ 
.top-bar.expanded {
height: auto;
background: white; }



.top-bar.expanded .title-area {
background-color: #00112D; 
}

/* top bar mobile  */ 
.top-bar {
overflow: hidden;
height: 100px;
line-height: 45px;
position: relative;
}


.top-bar ul {
margin-bottom: 0;
list-style: none; 
}

.top-bar .row {
max-width: none; 
}

.top-bar form,
.top-bar input {
margin-bottom: 0; 
}

.top-bar input {
height: auto;
padding-bottom: .35rem;
font-size: 0.75rem; 
}


.top-bar .button, .top-bar button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem;
}

.top-bar .title-area {
position: relative;
margin: 0; 
}

.top-bar .name {
height: 100px;
margin: 0;
font-size: 16px;
}


.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; 
}

.top-bar .toggle-topbar a {
color: white;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 400;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; 
}



.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out; 
}

.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: ;
font-size: 16px;
font-weight: 700;
margin: 0; 
}

.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #002c5f;
clear: both;
height: 1px;
width: 100%; 
}




/* nav lead font*/
.top-bar-section ul li > a {
display: block;
width: 100%;
color:#002C5F;
padding: 15px 0 15px 0;
padding-left: 10px;
font-family: "Titillium Web", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
font-weight: 700;
text-transform: none;
text-decoration: none;
}


.top-bar-section ul li > a.button {
font-size: 0.8125rem;
padding-right: 10px;
padding-left: 15px;
background-color:#007AC9 ;
text-decoration: none;
color: white; }

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #E98300; }
        
        
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: red; }

.top-bar-section ul li > a.button.secondary {
background-color:#007AC9 ;
border-color: #ba6900;
color: white; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #ba6900; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: white; }

.top-bar-section ul li > a.button.success {
background-color: #e98300;
border-color: #E98300;
color: white; 
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white; 
}

.top-bar-section ul li > a.button.alert {
background-color: #E98300;
border-color: #E98300;
color: white; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white; 
}

.top-bar-section ul li > button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #002c5f;
border-color: #002c5f;
color: white;
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #00234c; 
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white; 
}

.top-bar-section ul li > button.secondary {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: white; 
}

.top-bar-section ul li > button.success {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white; 
}

.top-bar-section ul li > button.alert {
background-color: #E98300;
border-color: #9e0c0f;
color: white;
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #9e0c0f; 
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white; 
}
        
.top-bar-section ul li:hover:not(.has-form) > a {
background: #E98300;
color: white; 
}
    
    
    
.top-bar-section ul li.active > a {
background: #E98300;
color: white; 
}

.top-bar-section ul li.active > a:hover {
background: #E98300;
color: white; 
}

.top-bar-section .has-form {
padding: 15px; 
}

.top-bar-section .has-dropdown {
position: relative; 
}

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; 

}
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: static !important;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;
        position: absolute !important;
        width: 100%; }
      .top-bar-section .has-dropdown.moved > a:after {
        display: none; }
        
        
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px 15px;
         }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: normal; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: #E98300;
          text-decoration: none;
          line-height: 22.5px;
          display: block; }
      .top-bar-section .dropdown li.has-form {
        padding: 8px 15px; }
      .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
        top: auto; }
    .top-bar-section .dropdown label {
      padding: 8px 15px 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #E98300;
      font-weight: bold;
      font-size: 0.625rem; }

.js-generated {
  display: block; }
  
 

  
  

/* tablet  items */
@media only screen and (min-width: 64.063em) {

  .top-bar {
    background:  ;
    *zoom: 1;
    overflow: visible; }
    
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
      
    .top-bar:after {
      clear: both; }
      
    .top-bar .toggle-topbar {
      display: none; }

/* Desktop logo area */
.top-bar .title-area 
{ float: left;
background: ;
}

/* Desktop name area */
.top-bar .name h1 a 
{ width: auto; 
}
      
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
      
    .top-bar.expanded {
      background: #E98300; }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    transition: none 0 0;
    left: 0 !important; }
    
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      
      .top-bar-section ul li {
        float: left; }
        
        .top-bar-section ul li .js-generated {
          display: none; }
          
    .top-bar-section li.hover > a:not(.button) {
      background: #E98300;
      color: white; }
      
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 10px;
      line-height: 45px;
      background: white; }
      
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section li.active:not(.has-form) a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      color: white;
      background: #E98300; }
      
      .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(0,0,0,0.9) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
        
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); }
        
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block;
      position: static !important;
      height: auto;
      width: auto;
      overflow: visible;
      clip: auto;
      position: absolute !important; }
      
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -1px;
      right: 5px;
      line-height: 1.2; }
      
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px 15px;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
        
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
        
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #4e4e4e;
      clear: none;
      height: 45px;
      width: 0; }
      
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
      
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
      
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
        
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
      
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }

.no-js .top-bar-section ul li:hover > a {
background: #E98300;
color: white; }

.no-js .top-bar-section ul li:active > a {
background: #E98300;
color: white; 
}

.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; 
} 

} /* Desktop items */







/*
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  margin-bottom: 1.25rem;
  position: relative;
  padding: 0.875rem 1.5rem 0.875rem 0.875rem;
  font-size: 0.8125rem;
  transition: opacity 300ms ease-out;
  background-color: #002c5f;
  border-color: #002652;
  color: white; }
  .alert-box .close {
    font-size: 1.375rem;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -0.6875rem;
    right: 0.25rem;
    color: #333333;
    opacity: 0.3; }
    .alert-box .close:hover, .alert-box .close:focus {
      opacity: 0.5; }
  .alert-box.radius {
    border-radius: 3px; }
  .alert-box.round {
    border-radius: 1000px; }
  .alert-box.success {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.alert {
    background-color: #c60f13;
    border-color: #aa0d10;
    color: white; }
  .alert-box.secondary {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.warning {
    background-color: #f08a24;
    border-color: #de770f;
    color: white; }
  .alert-box.info {
    background-color: #a0d3e8;
    border-color: #74bfdd;
    color: #4f2d00; }
  .alert-box.alert-close {
    opacity: 0; }
 
 not needed */

/* Panels 
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2; }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.625rem; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #b1d5ff;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #e6f2ff; }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: #333333; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.625rem; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
    .panel.callout a:not(.button) {
      color: #002c5f; }
  .panel.radius {
    border-radius: 3px; }

.dropdown.button, button.dropdown {
  position: relative;
  padding-right: 3.5625rem; }
  .dropdown.button:before, button.dropdown:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 50%; }
  .dropdown.button:before, button.dropdown:before {
    border-width: 0.375rem;
    right: 1.40625rem;
    margin-top: -0.15625rem; }
  .dropdown.button:before, button.dropdown:before {
    border-color: white transparent transparent transparent; }
  .dropdown.button.tiny, button.dropdown.tiny {
    padding-right: 2.625rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-width: 0.375rem;
      right: 1.125rem;
      margin-top: -0.125rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.small, button.dropdown.small {
    padding-right: 3.0625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-width: 0.4375rem;
      right: 1.3125rem;
      margin-top: -0.15625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.large, button.dropdown.large {
    padding-right: 3.625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-width: 0.3125rem;
      right: 1.71875rem;
      margin-top: -0.15625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.secondary:before, button.dropdown.secondary:before {
    border-color: #333333 transparent transparent transparent; }
not needed */       

         
            

         

         
     /* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: ; }
  
.contain-to-grid .top-bar {
margin-bottom: 0; }

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; 
}

.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; 

}

.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99;
}

.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 45px; 
}

/* mobile screen size items */

/* menu stack placement */
.top-bar .toggle-topbar.menu-icon {
right: 15px;
top: 30%;
margin-top: 30px;
padding-left: 40px; 
text-decoration: none;
}

/* menu stack font */
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: white;
position: relative; 
}


/* menu stack font after click */
.top-bar.expanded .toggle-topbar a {
color:#E98300; }


/* menu stack lines  */
.top-bar .toggle-topbar.menu-icon a::after {
content: "";
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
}
 
/* menu stack lines after click */
.top-bar.expanded .toggle-topbar a::after {
box-shadow: 0 10px 0 1px #E98300, 0 16px 0 1px #E98300, 0 22px 0 1px #E98300; 
}

/* menu stack expaneded when clicked */ 
.top-bar.expanded {
height: auto;
background: white; }



.top-bar.expanded .title-area {
background-color: #00112D; 
}

/* top bar mobile  */ 
.top-bar {
overflow: hidden;
height: 100px;
line-height: 45px;
position: relative;
}


.top-bar ul {
margin-bottom: 0;
list-style: none; 
}

.top-bar .row {
max-width: none; 
}

.top-bar form,
.top-bar input {
margin-bottom: 0; 
}

.top-bar input {
height: auto;
padding-bottom: .35rem;
font-size: 0.75rem; 
}


.top-bar .button, .top-bar button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem;
}

.top-bar .title-area {
position: relative;
margin: 0; 
}

.top-bar .name {
height: 100px;
margin: 0;
font-size: 16px;
}


.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; 
}

.top-bar .toggle-topbar a {
color: white;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 400;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; 
}



.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out; 
}

.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: ;
font-size: 16px;
font-weight: 700;
margin: 0; 
}

.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #002c5f;
clear: both;
height: 1px;
width: 100%; 
}




/* nav lead font*/
.top-bar-section ul li > a {
display: block;
width: 100%;
color:#002C5F;
padding: 15px 0 15px 0;
padding-left: 10px;
font-family: "Titillium Web", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
font-weight: 700;
text-transform: none;
text-decoration: none;
}


.top-bar-section ul li > a.button {
font-size: 0.8125rem;
padding-right: 10px;
padding-left: 15px;
background-color:#007AC9 ;
text-decoration: none;
color: white; }

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #E98300; }
        
        
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: red; }

.top-bar-section ul li > a.button.secondary {
background-color:#007AC9 ;
border-color: #ba6900;
color: white; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #ba6900; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: white; }

.top-bar-section ul li > a.button.success {
background-color: #e98300;
border-color: #E98300;
color: white; 
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white; 
}

.top-bar-section ul li > a.button.alert {
background-color: #E98300;
border-color: #E98300;
color: white; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white; 
}

.top-bar-section ul li > button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #002c5f;
border-color: #002c5f;
color: white;
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #00234c; 
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white; 
}

.top-bar-section ul li > button.secondary {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: white; 
}

.top-bar-section ul li > button.success {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white; 
}

.top-bar-section ul li > button.alert {
background-color: #E98300;
border-color: #9e0c0f;
color: white;
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #9e0c0f; 
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white; 
}
        
.top-bar-section ul li:hover:not(.has-form) > a {
background: #E98300;
color: white; 
}
    
    
    
.top-bar-section ul li.active > a {
background: #E98300;
color: white; 
}

.top-bar-section ul li.active > a:hover {
background: #E98300;
color: white; 
}

.top-bar-section .has-form {
padding: 15px; 
}

.top-bar-section .has-dropdown {
position: relative; 
}

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; 

}
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: static !important;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;
        position: absolute !important;
        width: 100%; }
      .top-bar-section .has-dropdown.moved > a:after {
        display: none; }
        
        
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px 15px;
         }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: normal; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: #E98300;
          text-decoration: none;
          line-height: 22.5px;
          display: block; }
      .top-bar-section .dropdown li.has-form {
        padding: 8px 15px; }
      .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
        top: auto; }
    .top-bar-section .dropdown label {
      padding: 8px 15px 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #E98300;
      font-weight: bold;
      font-size: 0.625rem; }

.js-generated {
  display: block; }
  
 

  
  

/* tablet  items */
@media only screen and (min-width: 64.063em) {

  .top-bar {
    background:  ;
    *zoom: 1;
    overflow: visible; }
    
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
      
    .top-bar:after {
      clear: both; }
      
    .top-bar .toggle-topbar {
      display: none; }

/* Desktop logo area */
.top-bar .title-area 
{ float: left;
background: ;
}

/* Desktop name area */
.top-bar .name h1 a 
{ width: auto; 
}
      
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
      
    .top-bar.expanded {
      background: #E98300; }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    transition: none 0 0;
    left: 0 !important; }
    
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      
      .top-bar-section ul li {
        float: left; }
        
        .top-bar-section ul li .js-generated {
          display: none; }
          
    .top-bar-section li.hover > a:not(.button) {
      background: #E98300;
      color: white; }
      
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 10px;
      line-height: 45px;
      background: white; }
      
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section li.active:not(.has-form) a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      color: white;
      background: #E98300; }
      
      .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(0,0,0,0.9) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
        
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); }
        
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block;
      position: static !important;
      height: auto;
      width: auto;
      overflow: visible;
      clip: auto;
      position: absolute !important; }
      
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -1px;
      right: 5px;
      line-height: 1.2; }
      
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px 15px;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
        
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
        
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #4e4e4e;
      clear: none;
      height: 45px;
      width: 0; }
      
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
      
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
      
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
        
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
      
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }

.no-js .top-bar-section ul li:hover > a {
background: #E98300;
color: white; }

.no-js .top-bar-section ul li:active > a {
background: #E98300;
color: white; 
}

.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; 
} 

} /* Desktop items */







/*
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  margin-bottom: 1.25rem;
  position: relative;
  padding: 0.875rem 1.5rem 0.875rem 0.875rem;
  font-size: 0.8125rem;
  transition: opacity 300ms ease-out;
  background-color: #002c5f;
  border-color: #002652;
  color: white; }
  .alert-box .close {
    font-size: 1.375rem;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -0.6875rem;
    right: 0.25rem;
    color: #333333;
    opacity: 0.3; }
    .alert-box .close:hover, .alert-box .close:focus {
      opacity: 0.5; }
  .alert-box.radius {
    border-radius: 3px; }
  .alert-box.round {
    border-radius: 1000px; }
  .alert-box.success {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.alert {
    background-color: #c60f13;
    border-color: #aa0d10;
    color: white; }
  .alert-box.secondary {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.warning {
    background-color: #f08a24;
    border-color: #de770f;
    color: white; }
  .alert-box.info {
    background-color: #a0d3e8;
    border-color: #74bfdd;
    color: #4f2d00; }
  .alert-box.alert-close {
    opacity: 0; }
 
 not needed */

/* Panels 
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2; }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.625rem; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #b1d5ff;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #e6f2ff; }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: #333333; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.625rem; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
    .panel.callout a:not(.button) {
      color: #002c5f; }
  .panel.radius {
    border-radius: 3px; }

.dropdown.button, button.dropdown {
  position: relative;
  padding-right: 3.5625rem; }
  .dropdown.button:before, button.dropdown:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 50%; }
  .dropdown.button:before, button.dropdown:before {
    border-width: 0.375rem;
    right: 1.40625rem;
    margin-top: -0.15625rem; }
  .dropdown.button:before, button.dropdown:before {
    border-color: white transparent transparent transparent; }
  .dropdown.button.tiny, button.dropdown.tiny {
    padding-right: 2.625rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-width: 0.375rem;
      right: 1.125rem;
      margin-top: -0.125rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.small, button.dropdown.small {
    padding-right: 3.0625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-width: 0.4375rem;
      right: 1.3125rem;
      margin-top: -0.15625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.large, button.dropdown.large {
    padding-right: 3.625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-width: 0.3125rem;
      right: 1.71875rem;
      margin-top: -0.15625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.secondary:before, button.dropdown.secondary:before {
    border-color: #333333 transparent transparent transparent; }
not needed */       

         
            

         

Responsivemedium breakpointtopbarOrbitslider

Hi all

I'm new to this foundation framework build and i'm having a problem with the medium view points on my site.

I have a slider that I want to feature when viewing on a desktop and tablet, the problem I have is that when you view the tablet version it looks fine on landscape but when on portrait it seems to mess up a bit. Plus if you press the slider arows one to many times the slider won't work any more.

Also (when on medium view) my menu goes to stack version which is fine but it doesn't drop down showing the navigation.

I know this is a few problems which is more to do with my state of coding but i would really appreciate the support of the foundation community on this one.

I have supplied a link to the site in question below:

www.trebuchettest.co.uk

i have also supplied the html file and the css for the slider and top bar navigation.

If anyone can help that would be great

Hi all

I'm new to this foundation framework build and i'm having a problem with the medium view points on my site.

I have a slider that I want to feature when viewing on a desktop and tablet, the problem I have is that when you view the tablet version it looks fine on landscape but when on portrait it seems to mess up a bit. Plus if you press the slider arows one to many times the slider won't work any more.

Also (when on medium view) my menu goes to stack version which is fine but it doesn't drop down showing the navigation.

I know this is a few problems which is more to do with my state of coding but i would really appreciate the support of the foundation community on this one.

I have supplied a link to the site in question below:

www.trebuchettest.co.uk

i have also supplied the html file and the css for the slider and top bar navigation.

If anyone can help that would be great

            

         
         .hero {color:#fff;
height: 300px !important;
padding: 0px 35px 100px 0px;
 }

#hero-desc {margin-top: 80px;
position:absolute;
border-left:3px solid #E98300;
padding-left: 30px;
padding-right: 30px;

}

.image-slider{
position:absolute; z-index: -1;
height: inherit;

}
 
 /* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        top: 0;
        left: 0;
        background-color: #011434;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
        
        
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
            background-color: #011434;
        width: 70%;
        padding: 0.625rem 0.875rem;
 }
        
        
        
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px white;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent white transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
    
    
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: #E98300;
    text-indent: -9999px !important;
    z-index: 10; }
    
    
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
      
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: #E98300; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: #E98300; }
  .orbit-container .orbit-bullets-container {
    text-align: center;
    background-color: #011434; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;
    float: none;
    text-align: center;
    display: block;
    
     }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      background: #cccccc;
      float: none;
      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #E98300;
         }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }

            

         
         .hero {color:#fff;
height: 300px !important;
padding: 0px 35px 100px 0px;
 }

#hero-desc {margin-top: 80px;
position:absolute;
border-left:3px solid #E98300;
padding-left: 30px;
padding-right: 30px;

}

.image-slider{
position:absolute; z-index: -1;
height: inherit;

}
 
 /* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container.fade li {
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      -ms-transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .orbit-container .orbit-slides-container.fade li.animate-in {
        opacity: 1;
        z-index: 20;
        transition: opacity 500ms ease-in-out; }
      .orbit-container .orbit-slides-container.fade li.animate-out {
        z-index: 10;
        transition: opacity 500ms ease-in-out; }
    .orbit-container .orbit-slides-container.swipe-next li {
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-next li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-next li.animate-out {
        -ms-transform: translate(-100%, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container.swipe-prev li {
      -ms-transform: translate(-100%, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0); }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-in {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-duration: 500ms; }
      .orbit-container .orbit-slides-container.swipe-prev li.animate-out {
        -ms-transform: translate(100%, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        transition-duration: 500ms; }
    .orbit-container .orbit-slides-container li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -ms-transform: translate(100%, 0);
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0); }
      .orbit-container .orbit-slides-container li.active {
        opacity: 1;
        top: 0;
        left: 0;
        background-color: #011434;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
        
        
      .orbit-container .orbit-slides-container li .orbit-caption {
        position: absolute;
        bottom: 0;
            background-color: #011434;
        width: 70%;
        padding: 0.625rem 0.875rem;
 }
        
        
        
  .orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }
  .orbit-container .orbit-timer {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 6px;
    width: 100px;
    z-index: 10; }
    .orbit-container .orbit-timer .orbit-progress {
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      width: 0%;
      position: relative;
      right: 20px;
      top: 5px; }
    .orbit-container .orbit-timer > span {
      display: none;
      position: absolute;
      top: 0px;
      right: 0;
      width: 11px;
      height: 14px;
      border: solid 4px white;
      border-top: none;
      border-bottom: none; }
    .orbit-container .orbit-timer.paused > span {
      right: -4px;
      top: 0px;
      width: 11px;
      height: 14px;
      border: inset 8px;
      border-left-style: solid;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      border-color: transparent white transparent transparent; }
      .orbit-container .orbit-timer.paused > span.dark {
        border-color: transparent #333333 transparent transparent; }
  .orbit-container:hover .orbit-timer > span {
    display: block; }
    
    
  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: #E98300;
    text-indent: -9999px !important;
    z-index: 10; }
    
    
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
      
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: #E98300; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: #E98300; }
  .orbit-container .orbit-bullets-container {
    text-align: center;
    background-color: #011434; }
  .orbit-container .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;
    float: none;
    text-align: center;
    display: block;
    
     }
    .orbit-container .orbit-bullets li {
      display: inline-block;
      width: 0.5625rem;
      height: 0.5625rem;
      background: #cccccc;
      float: none;
      margin-right: 6px;
      border-radius: 1000px; }
      .orbit-container .orbit-bullets li.active {
        background: #E98300;
         }
      .orbit-container .orbit-bullets li:last-child {
        margin-right: 0; }

.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    transition: none !important; }
  .orbit-stack-on-small .orbit-timer {
    display: none; }
  .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
    display: none; }
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }

         
     /* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: ; }
  
.contain-to-grid .top-bar {
margin-bottom: 0; }

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; 
}

.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; 

}

.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99;
}

.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 45px; 
}

/* mobile screen size items */

/* menu stack placement */
.top-bar .toggle-topbar.menu-icon {
right: 15px;
top: 30%;
margin-top: 30px;
padding-left: 40px; 
text-decoration: none;
}

/* menu stack font */
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: white;
position: relative; 
}


/* menu stack font after click */
.top-bar.expanded .toggle-topbar a {
color:#E98300; }


/* menu stack lines  */
.top-bar .toggle-topbar.menu-icon a::after {
content: "";
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
}
 
/* menu stack lines after click */
.top-bar.expanded .toggle-topbar a::after {
box-shadow: 0 10px 0 1px #E98300, 0 16px 0 1px #E98300, 0 22px 0 1px #E98300; 
}

/* menu stack expaneded when clicked */ 
.top-bar.expanded {
height: auto;
background: white; }



.top-bar.expanded .title-area {
background-color: #00112D; 
}

/* top bar mobile  */ 
.top-bar {
overflow: hidden;
height: 100px;
line-height: 45px;
position: relative;
}


.top-bar ul {
margin-bottom: 0;
list-style: none; 
}

.top-bar .row {
max-width: none; 
}

.top-bar form,
.top-bar input {
margin-bottom: 0; 
}

.top-bar input {
height: auto;
padding-bottom: .35rem;
font-size: 0.75rem; 
}


.top-bar .button, .top-bar button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem;
}

.top-bar .title-area {
position: relative;
margin: 0; 
}

.top-bar .name {
height: 100px;
margin: 0;
font-size: 16px;
}


.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; 
}

.top-bar .toggle-topbar a {
color: white;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 400;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; 
}



.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out; 
}

.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: ;
font-size: 16px;
font-weight: 700;
margin: 0; 
}

.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #002c5f;
clear: both;
height: 1px;
width: 100%; 
}




/* nav lead font*/
.top-bar-section ul li > a {
display: block;
width: 100%;
color:#002C5F;
padding: 15px 0 15px 0;
padding-left: 10px;
font-family: "Titillium Web", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
font-weight: 700;
text-transform: none;
text-decoration: none;
}


.top-bar-section ul li > a.button {
font-size: 0.8125rem;
padding-right: 10px;
padding-left: 15px;
background-color:#007AC9 ;
text-decoration: none;
color: white; }

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #E98300; }
        
        
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: red; }

.top-bar-section ul li > a.button.secondary {
background-color:#007AC9 ;
border-color: #ba6900;
color: white; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #ba6900; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: white; }

.top-bar-section ul li > a.button.success {
background-color: #e98300;
border-color: #E98300;
color: white; 
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white; 
}

.top-bar-section ul li > a.button.alert {
background-color: #E98300;
border-color: #E98300;
color: white; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white; 
}

.top-bar-section ul li > button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #002c5f;
border-color: #002c5f;
color: white;
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #00234c; 
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white; 
}

.top-bar-section ul li > button.secondary {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: white; 
}

.top-bar-section ul li > button.success {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white; 
}

.top-bar-section ul li > button.alert {
background-color: #E98300;
border-color: #9e0c0f;
color: white;
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #9e0c0f; 
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white; 
}
        
.top-bar-section ul li:hover:not(.has-form) > a {
background: #E98300;
color: white; 
}
    
    
    
.top-bar-section ul li.active > a {
background: #E98300;
color: white; 
}

.top-bar-section ul li.active > a:hover {
background: #E98300;
color: white; 
}

.top-bar-section .has-form {
padding: 15px; 
}

.top-bar-section .has-dropdown {
position: relative; 
}

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; 

}
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: static !important;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;
        position: absolute !important;
        width: 100%; }
      .top-bar-section .has-dropdown.moved > a:after {
        display: none; }
        
        
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px 15px;
         }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: normal; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: #E98300;
          text-decoration: none;
          line-height: 22.5px;
          display: block; }
      .top-bar-section .dropdown li.has-form {
        padding: 8px 15px; }
      .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
        top: auto; }
    .top-bar-section .dropdown label {
      padding: 8px 15px 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #E98300;
      font-weight: bold;
      font-size: 0.625rem; }

.js-generated {
  display: block; }
  
 

  
  

/* tablet  items */
@media only screen and (min-width: 64.063em) {

  .top-bar {
    background:  ;
    *zoom: 1;
    overflow: visible; }
    
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
      
    .top-bar:after {
      clear: both; }
      
    .top-bar .toggle-topbar {
      display: none; }

/* Desktop logo area */
.top-bar .title-area 
{ float: left;
background: ;
}

/* Desktop name area */
.top-bar .name h1 a 
{ width: auto; 
}
      
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
      
    .top-bar.expanded {
      background: #E98300; }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    transition: none 0 0;
    left: 0 !important; }
    
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      
      .top-bar-section ul li {
        float: left; }
        
        .top-bar-section ul li .js-generated {
          display: none; }
          
    .top-bar-section li.hover > a:not(.button) {
      background: #E98300;
      color: white; }
      
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 10px;
      line-height: 45px;
      background: white; }
      
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section li.active:not(.has-form) a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      color: white;
      background: #E98300; }
      
      .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(0,0,0,0.9) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
        
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); }
        
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block;
      position: static !important;
      height: auto;
      width: auto;
      overflow: visible;
      clip: auto;
      position: absolute !important; }
      
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -1px;
      right: 5px;
      line-height: 1.2; }
      
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px 15px;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
        
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
        
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #4e4e4e;
      clear: none;
      height: 45px;
      width: 0; }
      
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
      
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
      
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
        
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
      
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }

.no-js .top-bar-section ul li:hover > a {
background: #E98300;
color: white; }

.no-js .top-bar-section ul li:active > a {
background: #E98300;
color: white; 
}

.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; 
} 

} /* Desktop items */







/*
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  margin-bottom: 1.25rem;
  position: relative;
  padding: 0.875rem 1.5rem 0.875rem 0.875rem;
  font-size: 0.8125rem;
  transition: opacity 300ms ease-out;
  background-color: #002c5f;
  border-color: #002652;
  color: white; }
  .alert-box .close {
    font-size: 1.375rem;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -0.6875rem;
    right: 0.25rem;
    color: #333333;
    opacity: 0.3; }
    .alert-box .close:hover, .alert-box .close:focus {
      opacity: 0.5; }
  .alert-box.radius {
    border-radius: 3px; }
  .alert-box.round {
    border-radius: 1000px; }
  .alert-box.success {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.alert {
    background-color: #c60f13;
    border-color: #aa0d10;
    color: white; }
  .alert-box.secondary {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.warning {
    background-color: #f08a24;
    border-color: #de770f;
    color: white; }
  .alert-box.info {
    background-color: #a0d3e8;
    border-color: #74bfdd;
    color: #4f2d00; }
  .alert-box.alert-close {
    opacity: 0; }
 
 not needed */

/* Panels 
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2; }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.625rem; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #b1d5ff;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #e6f2ff; }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: #333333; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.625rem; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
    .panel.callout a:not(.button) {
      color: #002c5f; }
  .panel.radius {
    border-radius: 3px; }

.dropdown.button, button.dropdown {
  position: relative;
  padding-right: 3.5625rem; }
  .dropdown.button:before, button.dropdown:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 50%; }
  .dropdown.button:before, button.dropdown:before {
    border-width: 0.375rem;
    right: 1.40625rem;
    margin-top: -0.15625rem; }
  .dropdown.button:before, button.dropdown:before {
    border-color: white transparent transparent transparent; }
  .dropdown.button.tiny, button.dropdown.tiny {
    padding-right: 2.625rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-width: 0.375rem;
      right: 1.125rem;
      margin-top: -0.125rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.small, button.dropdown.small {
    padding-right: 3.0625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-width: 0.4375rem;
      right: 1.3125rem;
      margin-top: -0.15625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.large, button.dropdown.large {
    padding-right: 3.625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-width: 0.3125rem;
      right: 1.71875rem;
      margin-top: -0.15625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.secondary:before, button.dropdown.secondary:before {
    border-color: #333333 transparent transparent transparent; }
not needed */       

         
            

         

         
     /* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: ; }
  
.contain-to-grid .top-bar {
margin-bottom: 0; }

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; 
}

.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; 

}

.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99;
}

.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 45px; 
}

/* mobile screen size items */

/* menu stack placement */
.top-bar .toggle-topbar.menu-icon {
right: 15px;
top: 30%;
margin-top: 30px;
padding-left: 40px; 
text-decoration: none;
}

/* menu stack font */
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: white;
position: relative; 
}


/* menu stack font after click */
.top-bar.expanded .toggle-topbar a {
color:#E98300; }


/* menu stack lines  */
.top-bar .toggle-topbar.menu-icon a::after {
content: "";
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
}
 
/* menu stack lines after click */
.top-bar.expanded .toggle-topbar a::after {
box-shadow: 0 10px 0 1px #E98300, 0 16px 0 1px #E98300, 0 22px 0 1px #E98300; 
}

/* menu stack expaneded when clicked */ 
.top-bar.expanded {
height: auto;
background: white; }



.top-bar.expanded .title-area {
background-color: #00112D; 
}

/* top bar mobile  */ 
.top-bar {
overflow: hidden;
height: 100px;
line-height: 45px;
position: relative;
}


.top-bar ul {
margin-bottom: 0;
list-style: none; 
}

.top-bar .row {
max-width: none; 
}

.top-bar form,
.top-bar input {
margin-bottom: 0; 
}

.top-bar input {
height: auto;
padding-bottom: .35rem;
font-size: 0.75rem; 
}


.top-bar .button, .top-bar button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem;
}

.top-bar .title-area {
position: relative;
margin: 0; 
}

.top-bar .name {
height: 100px;
margin: 0;
font-size: 16px;
}


.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; 
}

.top-bar .toggle-topbar a {
color: white;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 400;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; 
}



.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out; 
}

.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: ;
font-size: 16px;
font-weight: 700;
margin: 0; 
}

.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #002c5f;
clear: both;
height: 1px;
width: 100%; 
}




/* nav lead font*/
.top-bar-section ul li > a {
display: block;
width: 100%;
color:#002C5F;
padding: 15px 0 15px 0;
padding-left: 10px;
font-family: "Titillium Web", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
font-weight: 700;
text-transform: none;
text-decoration: none;
}


.top-bar-section ul li > a.button {
font-size: 0.8125rem;
padding-right: 10px;
padding-left: 15px;
background-color:#007AC9 ;
text-decoration: none;
color: white; }

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #E98300; }
        
        
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: red; }

.top-bar-section ul li > a.button.secondary {
background-color:#007AC9 ;
border-color: #ba6900;
color: white; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #ba6900; }

.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: white; }

.top-bar-section ul li > a.button.success {
background-color: #e98300;
border-color: #E98300;
color: white; 
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white; 
}

.top-bar-section ul li > a.button.alert {
background-color: #E98300;
border-color: #E98300;
color: white; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #E98300; 
}

.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white; 
}

.top-bar-section ul li > button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #002c5f;
border-color: #002c5f;
color: white;
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #00234c; 
}

.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white; 
}

.top-bar-section ul li > button.secondary {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: white; 
}

.top-bar-section ul li > button.success {
background-color: #e98300;
border-color: #ba6900;
color: white; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #ba6900; 
}

.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white; 
}

.top-bar-section ul li > button.alert {
background-color: #E98300;
border-color: #9e0c0f;
color: white;
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #9e0c0f; 
}

.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white; 
}
        
.top-bar-section ul li:hover:not(.has-form) > a {
background: #E98300;
color: white; 
}
    
    
    
.top-bar-section ul li.active > a {
background: #E98300;
color: white; 
}

.top-bar-section ul li.active > a:hover {
background: #E98300;
color: white; 
}

.top-bar-section .has-form {
padding: 15px; 
}

.top-bar-section .has-dropdown {
position: relative; 
}

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; 

}
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: static !important;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;
        position: absolute !important;
        width: 100%; }
      .top-bar-section .has-dropdown.moved > a:after {
        display: none; }
        
        
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px 15px;
         }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: normal; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: #E98300;
          text-decoration: none;
          line-height: 22.5px;
          display: block; }
      .top-bar-section .dropdown li.has-form {
        padding: 8px 15px; }
      .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
        top: auto; }
    .top-bar-section .dropdown label {
      padding: 8px 15px 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #E98300;
      font-weight: bold;
      font-size: 0.625rem; }

.js-generated {
  display: block; }
  
 

  
  

/* tablet  items */
@media only screen and (min-width: 64.063em) {

  .top-bar {
    background:  ;
    *zoom: 1;
    overflow: visible; }
    
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
      
    .top-bar:after {
      clear: both; }
      
    .top-bar .toggle-topbar {
      display: none; }

/* Desktop logo area */
.top-bar .title-area 
{ float: left;
background: ;
}

/* Desktop name area */
.top-bar .name h1 a 
{ width: auto; 
}
      
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
      
    .top-bar.expanded {
      background: #E98300; }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    transition: none 0 0;
    left: 0 !important; }
    
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      
      .top-bar-section ul li {
        float: left; }
        
        .top-bar-section ul li .js-generated {
          display: none; }
          
    .top-bar-section li.hover > a:not(.button) {
      background: #E98300;
      color: white; }
      
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 10px;
      line-height: 45px;
      background: white; }
      
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section li.active:not(.has-form) a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      color: white;
      background: #E98300; }
      
      .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #E98300; }
        
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(0,0,0,0.9) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
        
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block;
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); }
        
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block;
      position: static !important;
      height: auto;
      width: auto;
      overflow: visible;
      clip: auto;
      position: absolute !important; }
      
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -1px;
      right: 5px;
      line-height: 1.2; }
      
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px 15px;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
        color: white;
        background: #E98300; }
        
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
        
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
        
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #4e4e4e;
      clear: none;
      height: 45px;
      width: 0; }
      
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
      
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
      
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
        
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
      
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }

.no-js .top-bar-section ul li:hover > a {
background: #E98300;
color: white; }

.no-js .top-bar-section ul li:active > a {
background: #E98300;
color: white; 
}

.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; 
} 

} /* Desktop items */







/*
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  margin-bottom: 1.25rem;
  position: relative;
  padding: 0.875rem 1.5rem 0.875rem 0.875rem;
  font-size: 0.8125rem;
  transition: opacity 300ms ease-out;
  background-color: #002c5f;
  border-color: #002652;
  color: white; }
  .alert-box .close {
    font-size: 1.375rem;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -0.6875rem;
    right: 0.25rem;
    color: #333333;
    opacity: 0.3; }
    .alert-box .close:hover, .alert-box .close:focus {
      opacity: 0.5; }
  .alert-box.radius {
    border-radius: 3px; }
  .alert-box.round {
    border-radius: 1000px; }
  .alert-box.success {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.alert {
    background-color: #c60f13;
    border-color: #aa0d10;
    color: white; }
  .alert-box.secondary {
    background-color: #e98300;
    border-color: #c87100;
    color: white; }
  .alert-box.warning {
    background-color: #f08a24;
    border-color: #de770f;
    color: white; }
  .alert-box.info {
    background-color: #a0d3e8;
    border-color: #74bfdd;
    color: #4f2d00; }
  .alert-box.alert-close {
    opacity: 0; }
 
 not needed */

/* Panels 
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2; }
  .panel > :first-child {
    margin-top: 0; }
  .panel > :last-child {
    margin-bottom: 0; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p {
    color: #333333; }
  .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    line-height: 1;
    margin-bottom: 0.625rem; }
    .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
      line-height: 1.4; }
  .panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #b1d5ff;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #e6f2ff; }
    .panel.callout > :first-child {
      margin-top: 0; }
    .panel.callout > :last-child {
      margin-bottom: 0; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p {
      color: #333333; }
    .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
      line-height: 1;
      margin-bottom: 0.625rem; }
      .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
        line-height: 1.4; }
    .panel.callout a:not(.button) {
      color: #002c5f; }
  .panel.radius {
    border-radius: 3px; }

.dropdown.button, button.dropdown {
  position: relative;
  padding-right: 3.5625rem; }
  .dropdown.button:before, button.dropdown:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 50%; }
  .dropdown.button:before, button.dropdown:before {
    border-width: 0.375rem;
    right: 1.40625rem;
    margin-top: -0.15625rem; }
  .dropdown.button:before, button.dropdown:before {
    border-color: white transparent transparent transparent; }
  .dropdown.button.tiny, button.dropdown.tiny {
    padding-right: 2.625rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-width: 0.375rem;
      right: 1.125rem;
      margin-top: -0.125rem; }
    .dropdown.button.tiny:before, button.dropdown.tiny:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.small, button.dropdown.small {
    padding-right: 3.0625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-width: 0.4375rem;
      right: 1.3125rem;
      margin-top: -0.15625rem; }
    .dropdown.button.small:before, button.dropdown.small:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.large, button.dropdown.large {
    padding-right: 3.625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-width: 0.3125rem;
      right: 1.71875rem;
      margin-top: -0.15625rem; }
    .dropdown.button.large:before, button.dropdown.large:before {
      border-color: white transparent transparent transparent; }
  .dropdown.button.secondary:before, button.dropdown.secondary:before {
    border-color: #333333 transparent transparent transparent; }
not needed */       

         
            

         
Chris M over 5 years ago

Hey Chris,

I like the design of your site!

If you view the website on a desktop browser, and manually shrink the size of the window, you can see where the website works, and where it starts to fail. The Orbit slider works great at certain sizes, but when the screen gets to about 950px wide it starts to stop working right.

(You can check the width of the screen by opening developer tools in Chrome - hit F12 to bring this up, and the screen size is displayed as you shrink it down).

You can fix the Orbit by either inserting some media queries to adjust the behaviour of the various elements at different sizes - for example, reducing the size of the H1 element at the size is starts to break will stop the text underneath being pushed out the bottom. And the image is shrinking in such a way that it doesn't work at the smaller sizes. You could also get the Orbit to stack differently than it is currently.

An easy way to do it would be to hide the Orbit manually as soon as it starts to break, and show the alternative hero earlier - at the minute it's "show-for-small-only" but you could just get this to show earlier with a media query.

Honestly the best thing to do would be to re-code the Orbit / Hero so that it doesn't break so early, or stacks before it does break.

Regarding the navigation, your large navigation is being hidden and replaced with the menu icon at medium sizes, but it looks like the actual menu isn't revealed until the browser is recognized at small sizes. So you've got a whole screen section which is being served a menu icon, but no menu. So you need to find wherever's defining the screen size at which the menu is visible, and change it to match the size that the menu icon's visible, I can't see where that is at the moment though.

I hope this helps in some way!

Cheers,

Chris

Chris M over 5 years ago

Hey again,

I just noticed that there's quite a few problems with the markup of your site - for example the first container div has a class of "small-12 medium-12 large-12 columns", which is redundant - you only need to specify small-12 columns and the medium and large will inherit from there (only specify medium and large if they are different from small), a few of your divs are set up in this way, it would be a good idea to do another sweep of your code for issues like this, just to declutter your markup :)

Cheers,

Chris

Chris over 5 years ago

Hi Chris

Thanks for your replies I will look over these now. :)

Chris over 5 years ago

Hi Chris

I changes the nav menu to show at @media only screen and (min-width: 64.063em) so do I need to replicate the menu items to show at this size also?

Many thanks

Chris

Chris M over 5 years ago

Hey Chris,

Yes, the container which opens up when you click the menu icon will need to have the same visibility settings as the icon itself - so you won't need to do each individual item, just whichever container is still hidden at medium but revealed at small sizes.

Good luck!

Chris