body {
  font-family: 'My_Nevis', sans-serif;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255, 0.95);
  overflow-x: hidden;
  transition: 0.4s;
}

.overlay-content {
  position: relative;
  top: 8%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 4px;
  text-decoration: none;
  font-size: 28px;
  color: #bd292f;
  display: block;
  transition: 0.2s;
}

@media (max-width: 500px) {
	.overlay a {
		font-size: 23px;
	}
}

@media (max-width: 385px) {
	.overlay a {
		font-size: 20px;
	}
}

.overlay div {
  padding: 6px;  
}

.overlay a:hover, .overlay a:focus {
  color: #000000;
}

#NYT {
	font-family: My_PublicSans_Bold;
}

#NYT:hover, #NYT:focus {
  color: #000000;
}

@media screen and (max-height: 325px) {
  .overlay a {
		font-size: 16px;
		padding: 2px;
  }

}

.overlay .closebtn {
  position: absolute;
  top: 16px;
  right: 36px;
  font-size: 80px;
}

.sider_top {
	border-top-style: solid;
	border-top-color: #bd292f;
}

.sider_bottom {
	border-bottom-style: solid;
	border-bottom-color: #bd292f;
}

.subnavik {
	border-left-style: solid;
	border-left-color: #bd292f;
}

#mobileNavik_buffer {
	height: 60px;
}

#mobile_navbar {
	
	position: fixed;
	z-index: 1000;
	top: 0;
	min-height: 60px;
	width: 100%;
	background-color: rgba(253, 253, 253, 0.95);
	border-bottom-style: solid;
    border-bottom-color: #bd292f;
    border-bottom-width: medium;
	box-shadow: 0px 10px 20px 0px black;
}

#brandy_name {

	text-align: center;
	line-height: 60px;
    max-height: 60px;
	color: #bd292f;
	font-size: 2.3em;

}

@media (max-width: 504px) {

	#brandy_name {

		font-size: 2em;

	}

}

@media (max-width: 479px) {

	#brandy_name {

		font-size: 1.75em;

	}

}

@media (max-width: 424px) {

	#brandy_name {

		font-size: 1.6em;

	}

}

@media (max-width: 399px) {

	#brandy_name {

		font-size: 1.2em;

	}

}

@media (max-width: 350px) {

	#brandy_name {

		font-size: 0.9em;

	}

}

#magic_button_parent {

	height: 60px;
	width: 60px;
	top: 0;
	right: 33px;
	line-height: 60px;
	text-align: center;
	position: absolute;
	cursor:pointer;
	z-index: 188;
}

#the_magic_button {

	display: inline-block;
	vertical-align: middle;

}

.mobile_menu_logo {
	position: absolute;
    left: 33px;
    height: 50px;
    width: 50px;
    top: 50%;
    bottom: 50%;
    transform: translate(0, -50%);
}

#magicboxy {

	height: 52px;
	width: 52px;
	top: 5px;
	right: 37px;
	position: absolute;
	transition: 0.3s;
}


.targetanim {
	transform: scale(2) rotate(45deg);
	opacity: 0;
    filter: brightness(5);
}

#bar1, #bar2, #bar3 {
  width: 35px;
  height: 5px;
  background-color: #bd292f;
  margin: 6px 0;
  transition: 0.3s;
}

/* Rotate first bar */
.change #bar1 {
  -webkit-transform: rotate(45deg) translate(-9px, 6px) ;
  transform: rotate(45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change #bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change #bar3 {
  -webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
  transform: rotate(-45deg) translate(-8px, -8px) ;
}

/* Chinese text fix */

#main_top_bar_mobile .cntext {
	font-weight: bold;
	white-space: nowrap;
}