header { transition: 0.3s;}

header.naviUp{transform: translateY(-100%);}

.navbar{
      margin-bottom: 0;    
	/*   background:webkit-linear-gradient(to bottom right, #0B2F3A, transparent 50%, #FCFCFC),
             linear-gradient(to top right, #EFF7F7, transparent 30%,  #EFF7F7 ) #5491c8; 
			 
	   background: o-linear-gradient(to bottom right, #0B2F3A, transparent 50%, #FCFCFC),
             linear-gradient(to top right, #EFF7F7, transparent 30%,  #EFF7F7 ) #5491c8;  
			 
	  background: moz-linear-gradient(to bottom right, #0B2F3A, transparent 50%, #FCFCFC),
             linear-gradient(to top right, #EFF7F7, transparent 30%,  #EFF7F7 ) #5491c8;   */
	   background:linear-gradient(to bottom right, #0B2F3A, transparent 50%, #FCFCFC),
             linear-gradient(to top right, #EFF7F7, transparent 30%,  #EFF7F7 ) #5491c8;  /* Standard */
	  background-size: 200% 200%;
	  animation: bggradient 8s linear infinite;
      animation-direction: alternate;
      z-index: 11;
      border-bottom: 2px ridge #BFE7FA;
	  font-size: 12px !important;
	  box-shadow: 0 0 14px 4px #fbfeff;
  }
    
	@keyframes bggradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}


.navbar ul li {
       margin-top: 16px;
	   margin-right: -8px;
}  

.navbar-default .navbar-nav li a {padding: 0.5em;}

.navbar-default .navbar-nav > li > a  {
    /*  color:  #2b6ca9 !important;
      font-family: 'Raleway', sans-serif; 
	   transform: skewX(-5deg);
	   text-shadow: 0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(124, 80, 33,.7);
	   */
	   color: silver;
		letter-spacing: 5px;
		text-transform: uppercase;
		font-size: 16px;
		font-family: 'Orbitron', sans-serif;
		text-shadow: 2px 2px 2px black;
		background-color: transparent;
} 

.navbar-default .navbar-nav li a:hover {
	 color: #f4511e !important;
	 border-radius: 8px;
	 transition: 0.3s;
}


span svg {visibility:hidden;}

.navbar li:hover span svg {visibility:visible;}

 .navbar li a span {
    transition: 0.5s;
    margin-right: 0px;
}

 .navbar li a:hover span {
    transition: 0.5s;
    margin-right: 8px;
	margin-left: -8px;
}

.navbar li a span {   
    position: relative;    
	margin-top: 12%;
  }



/**************SVG animated menu items****************/

path.one {
    transition: 0.4s;
    transform: translateX(-60%);
}

path.two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.navbar li:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.navbar li:hover path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.navbar li:hover path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #f4511e;
    }
    100% {
        fill: white;
    }
}

.navbar-default .navbar-nav > .active > a  {
      color: #f6a186 !important;
       background-color: transparent;
	   border-radius: 8px;
  } 
  
.navbar-default .navbar-nav > .active > a:hover { background-color: transparent;}
  
.navbar-default .navbar-nav li.active a span svg {visibility:hidden;}

.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #ffffff !important;
	  float:right;
	  margin-left: 50px;
	  
  }
 
  @media screen and (max-width: 600px) {
	  .navbar-toggle {
		   margin-left: 200px;
		    float:none;
	  }
  }
      @media screen and (max-width: 500px) {
	 .navbar-toggle {
		   margin-left: 150px;
	  }
  }
        @media screen and (max-width: 450px) {
	  .navbar-toggle {
		   margin-left: 50px;
	  }
  }
  
.navbar-default .navbar-toggle:focus, 
 .navbar-default .navbar-toggle:hover {
	 background: linear-gradient( -20deg, #CEF6F5,#CEF6F5, white,#CEF6F5);
	  background-size: 500% 200%;
	  animation: moblmenu 2s linear infinite;
      animation-direction: alternate;
}

@keyframes moblmenu {
    0% {background-position: 0%}
    100% {background-position: 100%}
}


.nav-up {top: -120px;}
  
 /*Mobile Navigation Menu Access Icon*/
 .icon-bar {		
	  
	  border-style: solid;
	  border-color: #FFB968;
	 text-shadow: 0 -1px 0 #fff;	  
  }



h2.brandname {
  color:#FFB968; 
  font-size:26px;
  font-family: 'Raleway', sans-serif;
  text-shadow: 0 -1.7px 0 #1E367C;
}  


/*---------------  LOGOS ------------------------ */
/*  Logo display on screens above 770px */
#logo {   
	width: 80px;
	height: auto;
	animation: chakra 5s linear;
	
	}

@keyframes chakra{
  from {
   opacity: 0; 
  }
  to {
   opacity: 1;
  }
}

/* ------------- ANIMATED LOGO TEXT ---------------*/
.logo-section {
	display: flex;
	flex-direction: column;
}

.textstroke {
	font-size: 62px;
	font-family: "Artifika", sans-serif;
	letter-spacing: 4px;
	fill: none;
	stroke: #0d2366;
	stroke-width: 2;
	stroke-dasharray: 100%;
	stroke-dashoffset: 100%;
	letter-spacing: 4px;
	fill: none;
	animation: textStrokeAnim 4000ms linear both;
	animation-iteration-count: 1;
	animation-iteration-count: 1;
}

@keyframes textStrokeAnim {
    0% {
        stroke-dasharray: 100%;
        stroke-dashoffset: 100%;
        fill: #0000;
    }
    95% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 90%;
        fill: #0000;
    }
    100% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 0%;
        fill: #f08d45;
        filter: drop-shadow(2px 2px 10px #0007);
    }
}

@media screen and (min-width:860px){
		#logo {
		margin: 6px 0 -2em 0;
		padding-bottom: 12px;
	}
}

@media screen and (min-width: 975px) {
	.textstroke {
		margin-bottom: -50px;
		margin-left: -60px;
	}
}


@media screen and (min-width: 1100px) {
	.textstroke {
		margin-left: 64px;
		margin-top: -50px;
		padding-bottom: 8px;
	}
}


@media screen and (max-width: 974px) {
	.textstroke {
	  margin-top: 0px;
	  margin-left: -12px;
		}
}

@media screen and (max-width: 850px) {
	.logo-section {
		margin-left: -1em;
	}
}

	/* Hide Jots Menu Item on screens below tablet */
@media screen and (max-width: 800px) {
	ul li.jotsMobile {display:none;}
}

	/*  
@media screen and (min-width:1031px){
	.navbar-default .navbar-nav {margin-top: -17px;}
}
*/
@media screen and (max-width:1030px) {
	.navbar-default .navbar-nav {margin:0;}
	
	.navbar-default .navbar-toggle .icon-bar{
		background-color: #ffb968;
	}
}

	
/*small-brand is logo display on screens below 770px*/	
@media screen and (min-width: 769px){   
	#logo {
		margin: 4px 0 -2em 0;
		padding-bottom: 12px;
		width: 80px;
	}
	
	.small-brand a img.mobilelogo,
    span.mobile-title {
		display:none;
	}

	.navbar-right {
	margin-top: 0;
	padding-bottom: 8px;
	}
}

	
/* Logo on small nav display */
@media screen and (max-width:768px) {
	.small-brand a img.mobilelogo {
		  margin: 2px 0 2px 1.5em;
	      width: 80px;
		  }
  span.mobile-title{
		font-size: 16px;
		font-family: "Artifika", sans-serif;
		letter-spacing: 4px;
		color: #ffb868;
		text-shadow: 1px 1px black;
  }
		 
   img.zoom, 
   h2.brandname, 
   img#logo, 
   .textstroke,
   itemprop {
		   display:none;
		}	
		  
  .navbar-default .navbar-nav {
	  padding-bottom: 1.5em;
	  }
	  
  .navbar-default .navbar-nav > li > a {
	  color: #ffffff;
  }		   
}

  
@media screen and (max-width:270px) {
	.small-brand a img.mobilelogo{
      margin-left: 1.5em;
	 width: 100px;
   }
}



/*END LOGO */