/* WEB FONT */
@import url(https://fonts.googleapis.com/css?family=Signika:600|Varela+Round);

body { 
    margin:0px 50px;
}


.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  height: 50px;
  text-align:center;
  background-color: #00a087;
  box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.6);
}

/* The element at the top of the page right after the fixed navigation bar
   MUST have sufficient top margin (50px) or else it will be covered by the bar */


/* Example responsive navigation menu  
height: 50px; line-height: 50px;
*/
.fixed-nav-bar li, .fixed-nav-bar a { 
  height: 25px;
  line-height: 25px;
}

.left {
    
    float:left;
    /*display: inline-flex;*/
    /*display: inline-block;*/
    margin-left:10px;
    margin-top:5px;
    /*padding:7px;*/
}
.right{
    float:right;
    margin-right: 10px;
}
/*
  max-width: 960px;
added vertical align
  width: 90%;
*/
.menu {
  width: 90%;
  margin: 0 auto;

}
.menu a, .menu a:visited {
  color: #ffffff;
}

/* color was ebebeb */
.menu a:hover, .menu a:target {
  color: #89b6e2;
}

/* addded
  margin: 0 auto;
  vertical-align: middle;
  vertical-align: middle;
*/
.menu-items {
  display: inline-block;
  margin: 0 auto;
  line-height:25px;
  vertical-align: middle;

}


.menu-items li {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;

}
.menu-items a {
  text-decoration: none;
}  
/* 
  background-position: center left;
*/
.show, .hide {
  display: none;
  /*padding-left: 15px;*/
  background-color: transparent;
  background-repeat: no-repeat;
  /*background-position: center;*/
  background-position: right;
  color: #dde1e2;
}
/*
  background-image: url(D:\orion-tactical\web site\HTML ideas\fixed-navigation-bar-master\assets\down-arrow-icon.png);
*/
.show {
  background-position: center;
}
/*
  background-image: url(D:\orion-tactical\web site\HTML ideas\fixed-navigation-bar-master\assets\up-arrow-icon.png);
*/
.hide {
  background-position: center;
}


/* =========================================== Media 1000 px ==========================*/

@media only screen and (max-width: 1000px) {
  .menu { 
    position: relative;
    width: 100%;
  }

.fixed-nav-bar li, .fixed-nav-bar a { 
  height: 35px;
  line-height: 50px;
}
/*
  max-height: 300px;
new item class
vh = vertical height of the viewport
vw = vertical width
*/
  .scrolling ul {
  height: 50vh;
  max-height: 50vh;
  width: 40%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
  }

/*
  width = 100%;
  position:center;
new - margin:auto;
    margin-top: 50px;
*/
  .menu-items {
    display: none; 
    width: 30%;
	margin-top: 50px;
    background-color: #008378;

  }
/*
didn't have
    margin: auto;
    overflow: scroll;

*/
  .menu-items li {

    display: block;
    text-align: center;
    margin: auto;

  }


/*
    position: absolute;
    right: 15px; //this sets the position from the right otherwise it defaults hard left
*/
  .show, .hide {  
    position: absolute;
    top: 0;
    right: 15px;
	
  }

  .show {
    display: inline-block;
	
  }
  .hide {
    display: none;
  }
  #menu:target .show {
    display: none;
  }
  #menu:target .hide, #menu:target .menu-items {
    display: inline-block;
  }
}
/*
@media only screen and (max-width: 220px) {
  .sitename, .show, .hide {
    font-size: 14px;
  }
}
*/