.menu {
	position:							fixed;
	z-index:							789;
	overflow:							hidden;

	width:								50px;
	height:								50px;
	top:								-25px;
	left:								calc(50% - 25px);

	font-size:							0;

	transform:							rotate(765deg);
	transform-origin:					50% 50%;

	background-color:					#000;

	-webkit-transition:					height 1s cubic-bezier(0.165, 0.84, 0.44, 1), margin-top 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:							height 1s cubic-bezier(0.165, 0.84, 0.44, 1), margin-top 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu i {
	display:							block;
	position:							relative;

	width:								20px;
	height:								20px;
	left:								27px;
	top:								27px;

	color:								#fff;
	font-size:							14px;
	text-align:							center;

	transform:							rotate(-45deg);
	transform-origin:					50% 50%;

	-webkit-transition:					color 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:							color 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ac-menu-hide-resp {
	margin-top:							-80px;
}

.ac-menu-gotop {
	margin-top:							-50px;
}

.menu > .wrap-in {
}

.menu > .wrap-in > div {
	display:							inline-block;
	vertical-align:						top;

	width:								calc(50% - 95px);
}

.menu > .wrap-in > .left {
	margin-left:						30px;
	margin-right:						65px;
}

.menu > .wrap-in > .right {
	margin-left:						65px;
	margin-right:						30px;
}

.menu > .wrap-in > div > .wrap-in {
	display:							flex;
	justify-content:					space-between;

	width:								90%;
	margin-left:						5%;
	padding-top:						5px;
	padding-bottom:						5px;
}

.menu > .wrap-in > div > div > .element {
	opacity:							0;

	margin-top:							-50px;
	height:								40px;
	padding-left:						3px;
	padding-right:						3px;

	color:								#fff;
	font-family:						'futura', serif;
	font-size:							8px;
	letter-spacing:						2px;
	line-height:						40px;

	text-transform:						uppercase;

	cursor:								pointer;
}

.menu > .wrap-in > div > div > .element:active {
	color:								#000;

	background-color:					#fff;
}

.menu-btn-close {
	position:							fixed;
	z-index:							799;

	top:								-130px;
	left:								calc(50% - 50px);

	cursor:								pointer;
}

.menu-btn-close > .wrap-in {
	display:							flex;
	width:								100px;
	height:								100px;
	border-color:						#000;
	border-style:						solid;
	border-width:						2px;

	transform:							rotate(45deg);
	transform-origin:					50% 50%;

	background-color:					#fff;

	-webkit-box-shadow:					0px 0px 50px -10px rgba(255, 255, 255, 0.7);
	-moz-box-shadow:					0px 0px 50px -10px rgba(255, 255, 255, 0.7);
	box-shadow:							0px 0px 50px -10px rgba(255, 255, 255, 0.7);
}

.menu-btn-close > .wrap-in > .element {
	margin:								auto;
	padding-top:						30px;

	width:								30px;
	height:								30px;

	transform:							rotate(-45deg);
	transform-origin:					50% 50%;
}

.menu-btn-close > .wrap-in > .element > .btn {
	width:								30px;
	height:								30px;

	background-color:					#000000;

	-webkit-mask-image:					url('../img/menu/cross-close.svg');
	mask-image:							url('../img/menu/cross-close.svg');
	-webkit-mask-size:					16px 16px;
	mask-size:							16px 16px;
	-webkit-mask-position:				50%;
	mask-position:						50%;
	-webkit-mask-repeat:				no-repeat;
	mask-repeat:						no-repeat;

	-webkit-transition:					background-color 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:							background-color 0.80s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ac-menu-effect-on:hover {
	animation:							jump 1s cubic-bezier(0.36,0.1,0.43,0.85) infinite;
}

.ac-menu-effect-on:hover i {
	color:								#fdff60;
}

.ac-menu-btn-effect-show > .wrap-in:hover {
	animation:							jump-2 1s cubic-bezier(0.36,0.1,0.43,0.85) infinite;
}

.ac-menu-btn-effect-show > .wrap-in:hover .element > .btn {
	background-color:					#fdff60;
}

.ac-menu-open {
	animation:							menu-open 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
}

.ac-menu-btn-effect-show {
	animation:							menu-btn-show 3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
}



@media (max-width:							1175px) {
	.menu > .wrap-in > div {
		width:								calc(50% - 51px);
	}

	.menu > .wrap-in > .left {
		margin-left:						3px;
		margin-right:						48px;
	}

	.menu > .wrap-in > .right {
		margin-left:						48px;
		margin-right:						3px;
	}

	.menu > .wrap-in > div > .wrap-in {
		width:								100%;
		margin-left:						0;
	}
}

/* START JQUERY resp */

	.live-resp {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.live-resp i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.live-resp > .resp-01 {
		padding-top:						100px;
	}

	.live-resp > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.live-resp > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.live-resp > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.live-resp > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
	}

	.live-resp > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						25px;

		color:								#fff;
		font-size:							30px;
		line-height:						45px;
		text-align:							center;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open-resp {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}


/* END JQUERY resp */

.menu > .wrap-in > div > div > .active {
	color:								#fdff60;
}

@media (max-width:							900px) {

}

/* ----------- iPhone 4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						100px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						25px;

		font-size:							20px;
		line-height:						35px;
		text-align:							center;
	}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						70px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
		padding-top:						0;
		padding-bottom:						0;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						8px;

		font-size:							13px;
		line-height:						18px;
		text-align:							center;
	}
}

/* ----------- iPhone 5 ----------- */


@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						100px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						25px;

		font-size:							20px;
		line-height:						30px;
		text-align:							center;
	}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						70px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
		padding-top:						0;
		padding-bottom:						0;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						8px;

		font-size:							13px;
		line-height:						18px;
		text-align:							center;
	}
}

/* ----------- iPhone 6 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						100px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						25px;

		font-size:							20px;
		line-height:						30px;
		text-align:							center;
	}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						70px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
		padding-top:						0;
		padding-bottom:						0;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						8px;

		font-size:							13px;
		line-height:						18px;
		text-align:							center;
	}
}

/* ----------- iPhone 6+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						100px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						25px;

		font-size:							20px;
		line-height:						30px;
		text-align:							center;
	}
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
	.menu {
		width:								100px;
		height:								100px;
		top:								-50px;
		left:								calc(50% - 50px);
	}

	.menu i {
		top:								58px;
		left:								58px;

		font-size:							24px;
	}

	.ac-resp-02 {
		height:								100%;
	}

	.ac-menu-open {
		animation:							menu-open-resp 2.3s cubic-bezier(0.36,0.1,0.43,0.85) forwards;
	}

	.menu > .resp-01 {
		padding-top:						70px;
	}

	.menu > .wrap-in > .left {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > .right {
		margin-left:						0px;
		margin-right:						0px;
	}

	.menu > .wrap-in > div {
		display:							block;
		vertical-align:						top;

		width:								100%;
	}

	.menu > .wrap-in > div > .wrap-in {
		justify-content:					space-between;
		flex-direction:						column;

		width:								80%;
		margin-left:						10%;
		padding-top:						0;
		padding-bottom:						0;
	}

	.menu > .wrap-in > div > div > .element {
		height:								initial;
		margin-bottom:						8px;

		font-size:							13px;
		line-height:						18px;
		text-align:							center;
	}
}