/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/
.iphone { width: 16.06em; height: 30.6em; border-radius: 1.875em; margin: 2em; position: relative; display: inline-block; background: #fff; }
.iphone__item { width: 16.06em; height: 1em; position: absolute; bottom: -2em; color: #158f76; text-align: center; }
.iphone__power-btn { width: 2.188em; height: .188em; background: #e0e0e0; position: absolute; right: 2.5em; top: -0.188em; }
.iphone__left-btn { width: .188em; height: 1.250em; top: 3.250em; left: -0.188em; position: absolute; background: #e0e0e0; }
.iphone__left-btn:before { content: ''; width: .188em; height: .875em; position: absolute; top: 3em; background: #e0e0e0; }
.iphone__left-btn:after { content: ''; width: .188em; height: .875em; position: absolute; top: 5.5em; background: #e0e0e0; }
.iphone__details { width: .438em; height: .438em; border-radius: 100%; position: relative; top: 1.313em; left: 8em; background: #7c7c7c; }
.iphone__details:before { content: ''; width: 2.5em; height: .25em; border-radius: .25em; position: absolute; top: 1em; left: -1em; background: #7c7c7c; }
.iphone__home-btn { width: 2.25em; height: 2.25em; border-radius: 100%; position: absolute; bottom: 1em; right: 6.75em; background: #f7f7f7; }
.iphone__home-btn:before { content: ''; width: .813em; height: .813em; border: .15em solid #a8a8a8; border-radius: .2em; position: absolute; top: .6em; left: .57em; }
.iphone__screen { overflow: hidden; }
.iphone__content { position: relative;  width: 100%; height: 100%; }
/**
* Navigation Defaults
*/
.nav { position: fixed; z-index: 100; opacity: 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
.nav--active .nav { opacity: 1; background-color: #333; }
.nav__list { margin: 0; padding: 8px; }
.nav__item { list-style-type: none; text-align: left; }
.nav__link { font-size: 1.3em; text-transform: uppercase; text-decoration: none; color: #FFFFFF; opacity: 1; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
/* Default navigation icon */
.nav__trigger { display: block; position: absolute; width: 30px; height: 25px; right: 8px; top: 8px; z-index: 200; }
.nav--active .nav__trigger { opacity: 0.5; }
.nav__icon { display: inline-block; position: relative; width: 30px; height: 3px; background-color: #FFFFFF; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
.nav__icon:before, .nav__icon:after { content: ''; display: block; width: 30px; height: 3px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
.nav__icon:before { margin-top: -8px; }
.nav__icon:after { margin-top: 8px; }

.nav--active  .nav ul li {
	margin-left:10px; 
	-webkit-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
.nav--active  .nav li:nth-of-type(1){transition-delay: 0.0s;}
.nav--active  .nav li:nth-of-type(2){transition-delay: 0.06s;}
.nav--active  .nav li:nth-of-type(3){transition-delay: 0.12s;}
.nav--active  .nav li:nth-of-type(4){transition-delay: 0.18s;}
.nav--active  .nav li:nth-of-type(5){transition-delay: 0.24s;}
.nav--active  .nav li:nth-of-type(6){transition-delay: 0.30s;}
.nav--active  .nav li:nth-of-type(7){transition-delay: 0.36s;}
.nav--active  .nav li:nth-of-type(8){transition-delay: 0.42s;}
.nav--active  .nav li:nth-of-type(9){transition-delay: 0.48s;}
.nav--active  .nav li:nth-of-type(10){transition-delay: 0.54s;}


/* Don't nest if you don't have to. */
/**
* Style #1
*/
.style-1 .nav { -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 100%; height: 100%; }
.style-1 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; }
.style-1 .nav--active .nav__link { opacity: 1; }
.style-1 .nav--active .nav { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); }
.style-1 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); }
.style-1 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.style-1 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
/**
* Style #2
*/
.style-2 { -webkit-perspective: 1000px; perspective: 1000px; }
.style-2 .nav { width: 100%; height: 100%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.style-2 .nav--active .nav { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
.style-2 .iphone__content { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
.style-2 .nav--active .iphone__content { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.style-2 .navi__icon { background: rgba(0, 0, 0, 0); }
.style-2 .navi__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.style-2 .navi__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.style-2 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.style-2 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.style-2 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
/**
* Style #3
*/
.style-3 .nav { width: 100%; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); }
.style-3 .nav--active .nav { -webkit-transform: translateX(20%); transform: translateX(20%); }
.style-3 .iphone__content { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
.style-3 .iphone__screen { background-color: #333; }
.style-3 .nav--active .iphone__content { -webkit-transform: scale(0.9) translateX(-90%); transform: scale(0.9) translateX(-90%); }
.style-3 .nav__icon { background: rgba(0, 0, 0, 0); }
.style-3 .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.style-3 .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.style-3 .nav--active .nav__icon { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
/**
* Style #4
*/
.style-4 .nav { width: 100%; height: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.style-4 .nav--active .nav { -webkit-transform: translateY(0); transform: translateY(0); }
.style-4 .nav--active .nav__icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.style-4 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; }
.style-4 .nav--active .nav__link { opacity: 1; }
/**
* Style #5
*/
.style-5 .nav { -webkit-transform: translate(100%, -100%) scale(0.5); transform: translate(100%, -100%) scale(0.5); border-radius: 100%; }
.style-5 .nav--active .nav { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); border-radius: 0; width: 100%; height: 100%; }
.style-5 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; }
.style-5 .nav--active .nav__link { opacity: 1; }
.style-5 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); }
.style-5 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.style-5 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
/**
* Style #6
*/
.style-6 .nav { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); width: 100%; height: 100%; }
.style-6 .nav--active .nav { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
.style-6 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; }
.style-6 .nav--active .nav__link { opacity: 1; }
.style-6 .nav__icon { background: rgba(0, 0, 0, 0); }
.style-6 .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.style-6 .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.style-6 .nav--active .nav__icon { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
/**
* Style #7
*/
.style-7 .nav { width: 100%; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); }
.style-7 .nav--active .nav { -webkit-transform: translateX(20%); transform: translateX(20%); }
.style-7 .iphone__content { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
.style-7 .nav--active .iphone__content { -webkit-transform: scale(1) translateX(-80%); transform: scale(1) translateX(-80%); }
.style-7 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); }
.style-7 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.style-7 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }