/* CSS for Mobile nav*/

/* Style the navigation menu */
.topnav {
  overflow: visible;
  background-color: #fffefe;
 
  box-shadow: 0px 15px 10px -15px #837050;  
  margin-left:-1em;
  margin-right:-1em;
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  z-index: 99;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  padding-left:10px;
  padding-right:10px;
}

/* display the hamburger menu when the menu button clicked and open class added */
.topnav #myLinks.open {
  display:  block;
}

/* Style navigation menu links */
.topnav a {
  padding: 14px 16px;
  text-decoration: none;
  display: flex;
  flex-shrink:0;
  color:#444;
  font-variant:small-caps;
  font-size:18px;
  font-family:'Roboto', sans-serif;
  letter-spacing:.05em;
 }

/* Style the border between menu links */
#myLinks > a:nth-child(1) {border-top:1px solid #55828b;} /*Home*/
#myLinks > a:nth-child(2) {border-top:1px solid #55828b;} /*Vis menu*/
#myLinks > a:nth-child(3) {border-top:1px solid #55828b;} /*Text Ed*/
#myLinks > a:nth-child(4) {border-top:1px solid #55828b; border-bottom:1px solid #55828b;} /*Contact*/
/* Style the hamburger menu */

.icon{
  background: #fffefe;
  display: block;
  position: absolute;
  
  cursor: pointer;
}
.menu-btn{
  padding: 14px 16px;
}
.menu-btn__burger{
  width: 30px;
  height: 4px;
  background-color:#55828b;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after{
  content: '';
  position: absolute;
  width: 30px;
  height: 4px;
  background-color:#55828b;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before{
  transform: translateY(-8px);
}
.menu-btn__burger::after{
  transform: translateY(8px);
}
.menu-btn.open .menu-btn__burger{
  transform: translateX(-30px) ;
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before{
  transform: rotate(45deg) translate(20px, -20px);
}
.menu-btn.open .menu-btn__burger::after{
  transform: rotate(-45deg) translate(20px, 20px);
}
.menu-btn:focus {outline:none;}

.topnav a.icon {
  background: #fffefe;
  display: block;
  position: absolute;
  right: 0;
  top:0;
}
.fa-bars{
	color:#55828b;
	font-size:25px !important;
}
/* Add a background color on mouse-over */
#myLinks a:hover {
  background-color: #55828b;
  color: #fff;
}
/* Style the active link (or home/logo) */
.active { 
padding:0px;
}
@media only screen and (max-width:469px) {
a.active > img {height:45px !important;}
.fa-bars {padding-top:0px !important;}
}
@media only screen and (max-width:430px){
a.active > img {height:40px !important;}
.fa-bars {padding-top:0px !important;}
.menu-btn{padding: 14px 7px;}
}

@media only screen and (max-width:380px) {
a.active > img {height:32px !important;}
.fa-bars {padding-top:0px !important;}
.menu-btn{padding: 14px 7px;}
}
/*end of mobile nav*/
/*CSS for desktop nav*/
@media only screen and (min-width:1200px){
.topnav a.icon {
	display:none;
	}
.topnav {
  overflow: visible;
  background-color: #fffefe;
  position: relative;
  box-shadow: 0px 15px 10px -15px #837050;  
  display:flex;
  flex-direction:row;
}
.topnav a {
  padding: 14px 16px;
 }
.topnav #myLinks {
  display: flex;
  flex-direction:row;
  margin-left:auto;
}

/* ensure menu is always a flexbox on desktop, even when open class added */
.topnav #myLinks.open {
  display: flex;
  flex-shrink:0;
}
#myLinks a:hover {
	text-decoration:underline;
  	background-color: #fffefe;
  	color: #55828b;	
}
/*Remove border between links*/
#myLinks > a:nth-child(1) {border-top:none;} /*Home*/
#myLinks > a:nth-child(2) {border-top:none;} /*Vis menu*/
#myLinks > a:nth-child(3) {border-top:none;} /*Text Ed*/
#myLinks > a:nth-child(4) {border-top:none; border-bottom:none;} /*Contact*/
/*end of desktop nav*/
}
/*css for extra large large tablets e.g. 12.9"*/
@media only screen
and (min-device-height: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Style the navigation menu */
.topnav {
  overflow: visible;
  background-color: #fffefe;
  display:block;
  box-shadow: 0px 15px 10px -15px #837050;  
  margin-left:-1em;
  margin-right:-1em;
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  z-index: 99;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  padding-left:10px;
  padding-right:10px;
}
/* display the hamburger menu when the menu button clicked and open class added */
.topnav #myLinks.open {
  display:  block;
}
/* Style the border between menu links */
#myLinks > a:nth-child(1) {border-top:1px solid #55828b;} /*Home*/
#myLinks > a:nth-child(2) {border-top:1px solid #55828b;} /*Vis menu*/
#myLinks > a:nth-child(3) {border-top:1px solid #55828b;} /*Text Ed*/
#myLinks > a:nth-child(4) {border-top:1px solid #55828b; border-bottom:1px solid #55828b;} /*Contact*/
/* Add a background color on mouse-over */
#myLinks a:hover {
  background-color: #55828b;
  color: #fff;
}
.topnav a.icon {
  background: #fffefe;
  display: block;
  position: absolute;
  right: 0;
  top:0;
}
}
/*end of css for extra large tablets*/