#nav-container{
	position: fixed;
	top: 10%;
	left: 85%;
    margin:-3em;
    font-size: 7px;
}

.toggle-icon {
	display: block;
	position: relative;
	width: 100%;
	margin: -2.2em auto 0 0.2em;
	-webkit-transition: margin 600ms;
	-moz-transition: margin 600ms;
	transition: margin 600ms;
	cursor: pointer;
}

.toggle-icon .bar {
	display: block;
	width: 3.8em;
	height: 0.2em;
	margin: 0.9em;
	border-right: 2.8em solid black;
	border-left: 0.6em solid black;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
	-moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
	transition-property: transform, margin, border-right-color, box-shadow;
	-webkit-transition-duration: 600ms;
	-moz-transition-duration: 600ms;
	transition-duration: 600ms;
}
	
.toggle-icon .bar:nth-of-type(1) {
		-webkit-transition: opacity 300ms;
		-moz-transition: opacity 300ms;
		transition: opacity 300ms;
}
	
.toggle-icon .bar:nth-of-type(2) {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
}

/*---------------------- AFTER BUTTON PUSHED --------------------*/

.pushed .toggle-icon {
	margin: -3.2em 0 0 0.7em;
}

.pushed .bar:nth-of-type(1) {
		opacity: 0;
}

.pushed .bar:nth-of-type(2) {
		margin-left: 1.4em;
		-webkit-transform: rotate(-137deg) translateY(-1.5em);
		-moz-transform: rotate(-137deg) translateY(-1.5em);
		-ms-transform: rotate(-137deg) translateY(-1.5em);
		-o-transform: rotate(-137deg) translateY(-1.5em);
		transform: rotate(-137deg) translateY(-1.5em);
}

.pushed .bar:nth-of-type(3) {
		margin-left: 0.5em;
		-webkit-transform: rotate(-42deg);
		-moz-transform: rotate(-42deg);
		-ms-transform: rotate(-42deg);
		-o-transform: rotate(-42deg);
		transform: rotate(-42deg);
}


.pushed .toggle-icon:hover .bar:nth-of-type(2) {
	border-right-color: #0C0C09;
	box-shadow: 0.4em 0 0.6em 0.1em #0C0C09;
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) {
	border-right-color: #0C0C09;
	box-shadow: 0.4em 0 0.6em 0.1em #0C0C09;
}

@media screen and (max-width: 1150px) {

	#nav-container{
		position: fixed;
		top: 6%;
		left: 92%;
		margin:0em;
		font-size: 7px;
	}

}

@media screen and (max-width: 600px) {

	#nav-container{
		position: fixed;
		top: 9%;
		left: 85%;
		margin:-3em;
		font-size: 7px;
	}

}