﻿#navbar {  overflow: hidden;  background-color: #fff;  padding: 10px 10px 10px 10px; z-index:1000; }

.topnav-right {  float: right; padding-top: 20px;} 

.topnav a {  float: left;  display: block;  color: #2E3640;  text-align: center;  padding: 5px 16px;  text-decoration: none;  font-size: 1.8rem; font-family: 'Comfortaa', cursive; font-weight: 300; 
							border-right:thin #939E49 solid;}
.topnav a:nth-child(4) {	border-right:none;}
.topnav a:nth-child(1) {	border-right:none;}

.topnav a:hover {  background-color: #DADADA;  color: black;} 
.xactive {  background-color: #DADADA;  color: white;}

.topnav .icon {  display: none;}

.topnav { // set animation
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease	
}


@media screen and (max-width: 800px) {
.topnav-right {  float: left;} 

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right;    display: block;  }
   .topnav.responsive a {    float: none;    display: block;    text-align: left;  }

}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {    position: absolute;    right: 0;    top: 0;  float:right; }
  .topnav.responsive a {    float: none;    display: block;    text-align: left;  }
  .topnav a {	border-right:none; }

}

.content {  padding: 16px;}
.sticky1 {  position: fixed;  top: 0;  width: 100%;  -webkit-box-shadow: 2px  5px 10px grey;	-moz-box-shadow: 2px 5px 10px grey;	box-shadow: 2px 5px 10px grey;}
.sticky1 + .content {  padding-top: 60px;}


