@font-face {
    font-family: BG;
    src: url('../fonts/BrandonGrotesque-Regular.otf');
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: BG;
    word-break: normal;
    word-wrap: break-word;
    font-size: large;
}

a {
	color: #777;
	text-decoration: none;
}


#left {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#logo {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
}

#navBtn {
	position: absolute;
	top: 24px;
	right: 0px;
	margin-right: 12px;
	z-index: 1;
	transition: 1.0s;
	display: inline-block;
   cursor: pointer;
   opacity: 0.7;
}

/* The side navigation menu */
#right {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10; /* Stay on top */
    top: 0;
    right: 0;
    opacity: 0.7;
    background-color: #fff;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 1.0s; /* 0.5 second transition effect to slide in the sidenav */
}

#navLnk {
	padding: 0px 36px 12px 36px;
}

#navLnk * {
	text-decoration: none;
   font-size: x-large;
   color: #999;
   display: block;
}

#txtArea {
	padding: 36px;
}

#gallery img {
	z-index: 5000;
	position: fixed;
	top: 0px;
	left: 0px;
}

.arrow-left, .arrow-right {
	position: fixed;
	z-index: 9999;
	cursor: pointer;
	color: #777;
	display: none;
}

.arrow-left {
	left: 12px;
	bottom: 12px;
}

.arrow-right {
	right: 12px;
	bottom: 12px;
}

.hidden, #gallery img {
	display: none;
}

.frmt {
	white-space: pre-line;
}


#right .focus, #right a:hover{
	color: #000;
}


.bar1, .bar2, .bar3 {
    width: 24px;
    height: 3px;
    background-color: #777;
    margin: 6px 0;
    transition: 0.4s;
}

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

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

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


.display {
	margin-top: 140px;
}

#legalTxt {
	color: #777;
	font-size: x-small;
	display: none;
	width: 50%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 5;
	opacity: 1.0;
	background-color: #fff;
	padding: 36px;
	margin-bottom: 48px;
	overflow-x: hidden;
	overflow-y: auto;
}

#legalTxt h2, #legalTxt h3 {
	margin-top: 12px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 450px) {

#navLnk {
	padding: 0px 8px 12px 8px;
}

#txtArea {
	padding: 8px;
}

#legalTxt {
	padding: 8px;
}

}