/* ==========================================================================
   SVG Symbols
============================================================================= */
.symbol {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}
.logo {
  width: 1.3330078125em;
}
.separator {
  width: 10.5em;
}

/* ==========================================================================
   Menu button
============================================================================= */
.menu-button {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 1em;
	height: 1em;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
	vertical-align: middle;
	background-color: transparent;
}
.menu-button:focus {
	outline: none;
}
.menu-button span {
	display: block;
	position: absolute;
	top: 0.458em;
	left: 0;
	right: 0;
	height: 0.083em;
	background-color: currentColor;
	transition: background-color 0s 0.3s;
}
.menu-button span::before,
.menu-button span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 0.083em;
	background-color: currentColor;
	content: "";
	transition-duration: 0.3s, 0.3s;
	transition-delay: 0.3s, 0s;
}
.menu-button span::before {
	top: -0.333em;
	transition-property: top, transform, background-color;
}
.menu-button span::after {
	bottom: -0.333em;
	transition-property: bottom, transform, background-color;
}
.menu-button.active {
	background-color: transparent;
}
.menu-button.active span {
	background-color: transparent;
}
.menu-button.active span::before {
	top: 0;
	transform: rotate(45deg);
}
.menu-button.active span::after {
	bottom: 0;
	transform: rotate(-45deg);
}
.menu-button.active span::before,
.menu-button.active span::after {
	transition-delay: 0s, 0.3s;
}

/* ==========================================================================
   Scroll icon
============================================================================= */
.icon-scroll {
	display: inline-block;
	position: relative;
	width: 1.5em;
	height: 2.25em;
	border: 1px solid currentColor;
	border-radius: 1em;
}
.icon-scroll:before {
	position: absolute;
	content: '';
	left: 50%;
	width: 0.25em;
	height: 0.25em;
	background-color: currentColor;
	margin-left: -0.125em;
	top: 0.5em;
	border-radius: 50%;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-name: scroll;
}
@keyframes scroll {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(1em);
	}
}
/* Custom */
.w3-button{
	display: none;
	opacity: .3;
	cursor: pointer;
	transition: all ease-in .5s;
}
.w3-button:hover{
	opacity: 1;
	transition: all ease-in .5s;
}
.w3-display-right,
.w3-display-left {
	position: absolute;
	top: 50%;
	border: none;
	padding: .7em 1em;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
}
.w3-display-left{
	left: 1em;
}
.w3-display-right{
	right: 1em;
}