/*

Item name: Full Screen Navigation

Author: http://codecanyon.net/user/marcoarib

License: http://codecanyon.net/licenses

*/



/* GENERAL CSS

=========================================*/

.full-screen-nav,

.full-screen-nav *,

.full-screen-nav *:focus{

	box-sizing: border-box;

	z-index: 10000;

	outline: none;

	-webkit-tap-highlight-color: transparent;

}

.full-screen-nav{

	position: fixed;

	width: 100%;

	height: 100%;

	padding: 50px;

	top: 0;

	left: 0;

	display: none;

	background-color: #f7941d;

	background-image: url(../images/featured-image_overlay.png); 

	background-repeat: no-repeat;

	background-size: cover;

	position: left;

}



/* CONTENT WRAPPER

=========================================*/

.full-screen-nav-content{

	width: 100%;

	height: 100%;

	padding: 10px;

	position: relative;

	color: #fff;

	display: block;

	overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



/* CLOSE BUTTON

=========================================*/

.full-screen-nav-close {

	width: 32px;

	height: 32px;

	display: block;

	position: fixed;

	right: 12px;

	top: 12px;

	cursor: pointer;

	-webkit-transition: all .2s linear;

	transition: all .2s linear;

}

.full-screen-nav-close:hover {

	-webkit-transform: scale(1.2, 1.2);

	transform: scale(1.2, 1.2);

}

.full-screen-nav-close:before, 

.full-screen-nav-close:after {

	position: absolute;

	left: 15px;

	content: ' ';

	height: 33px;

	width: 2px;

	background-color: #fff;

}

.full-screen-nav-close:before {

	-ms-transform: rotate(45deg);

	-webkit-transform: rotate(45deg);

	transform: rotate(45deg);

}

.full-screen-nav-close:after {

	-ms-transform: rotate(-45deg);

	-webkit-transform: rotate(-45deg);

	transform: rotate(-45deg);

}



/* NORMAL MENU

=========================================*/

.full-screen-nav-menu{

	width: 400px;

	margin: 0 0 0 -200px;

	padding: 0;

	left: 50%;

	position: absolute;

	list-style: none;

	text-align: center;

}

@media (max-width: 768px){

	.full-screen-nav-menu{

		width: 100%;

		margin: 0;

		left: auto;

		position: relative;

	}

}

.full-screen-nav-menu li a{

	padding: 5px;

	display: block;

	text-decoration: none;

	color: #fff;

	font-weight: 300;

	-webkit-transition: all .2s linear;

	transition: all .2s linear;

}

@media (max-width: 480px){

	.full-screen-nav-menu li a{

		font-size: 26px;

	}

}

.full-screen-nav-menu:hover li a{

	opacity: 0.7;

}

.full-screen-nav-menu li:hover a{

	color: #fff;

	opacity: 1 !important;

}



/* MENU OF GENERAL CONTENT

=========================================*/

.full-screen-nav-general{

	text-align: center;

}



/* ANIMATIONS

=========================================*/

.zoom{

	animation-name: zoom-in;

	animation-duration: .3s;

	animation-iteration-count: 1;

	animation-timing-function: ease;

	animation-fill-mode: forwards;



	-webkit-animation-name: zoom-in;

	-webkit-animation-duration: .3s;

	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: ease;

	-webkit-animation-fill-mode: forwards;



	-moz-animation-name: zoom-in;

	-moz-animation-duration: .3s;

	-moz-animation-iteration-count: 1;

	-moz-animation-timing-function: ease;

	-moz-animation-fill-mode: forwards;

}

@keyframes zoom-in{

	from{ 

		-webkit-transform: scale(0.6,0.6);

		transform: scale(0.6,0.6);

	}

	to{ 

		-webkit-transform: scale(1,1);

		transform: scale(1,1);

	}

}

@-webkit-keyframes zoom-in{

	from{ 

		-webkit-transform: scale(0.6,0.6);

		transform: scale(0.6,0.6);

	}

	to{ 

		-webkit-transform: scale(1,1);

		transform: scale(1,1);

	}

}



.slide{

	animation-name: slide;

	animation-duration: .3s;

	animation-iteration-count: 1;

	animation-timing-function: ease;

	animation-fill-mode: forwards;



	-webkit-animation-name: slide;

	-webkit-animation-duration: .3s;

	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: ease;

	-webkit-animation-fill-mode: forwards;



	-moz-animation-name: slide;

	-moz-animation-duration: .3s;

	-moz-animation-iteration-count: 1;

	-moz-animation-timing-function: ease;

	-moz-animation-fill-mode: forwards;

}

@keyframes slide{

	from{ 

		left: -200px;

	}

	to{ 

		left: 0;

	}

}

@-webkit-keyframes slide{

	from{ 

		left: -200px;

	}

	to{ 

		left: 0;

	}

}



.dropdown{

	animation-name: dropdown;

	animation-duration: .3s;

	animation-iteration-count: 1;

	animation-timing-function: ease;

	animation-fill-mode: forwards;



	-webkit-animation-name: dropdown;

	-webkit-animation-duration: .3s;

	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: ease;

	-webkit-animation-fill-mode: forwards;



	-moz-animation-name: dropdown;

	-moz-animation-duration: .3s;

	-moz-animation-iteration-count: 1;

	-moz-animation-timing-function: ease;

	-moz-animation-fill-mode: forwards;

}

@keyframes dropdown{

	from{ 

		top: -200px;

	}

	to{ 

		top: 0;

	}

}

@-webkit-keyframes dropdown{

	from{ 

		top: -200px;

	}

	to{ 

		top: 0;

	}

}