/*
 * Style the animation
 */

#menuContainer {
	position: relative;
	top: 0px;
	width: 100%;
	overflow: hidden;
}

/*
* Controls the menuarrow turn:
*/

.rotateArrow {
	transform: rotate(90deg);
}

/*
* Controls menu sliding in:
*/

.inView {
	right: 0;
	left: -100%;
	 -webkit-animation-name: inView;
	animation-name: inView;
}

.inView-1 {
	right: 0;
	left: -100%;
	 -webkit-animation-name: inView-1;
	animation-name: inView-1;
}

.inView-2 {
	right: 0;
	left: -100%;
	 -webkit-animation-name: inView-2;
	animation-name: inView-2;
}

.inView-3 {
	right: 0;
	left: -100%;
	 -webkit-animation-name: inView-3;
	animation-name: inView-3;
}

.firstTime {
	right: -100%;
}

.inView { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

.inView-1 { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

.inView-2 { 
    -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

.inView-3 { 
    -webkit-animation-duration: 4s; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}


@-webkit-keyframes inView { 
    0% { 
        -webkit-transform: translateX(-100%); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    }
}

@keyframes inView { 
    0% { 
        transform: translateX(-100%); 
    } 
    100% { 
        transform: translateX(0); 
    } 
}

@-webkit-keyframes inView-1 { 
    0% { 
        -webkit-transform: translateX(-100%); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    }
}

@keyframes inView-1 { 
    0% { 
        transform: translateX(-100%); 
    } 
    100% { 
        transform: translateX(0); 
    } 
}

@-webkit-keyframes inView-2 { 
    0% { 
        -webkit-transform: translateX(-100%); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    }
}

@keyframes inView-2 { 
    0% { 
        transform: translateX(-100%); 
    } 
    100% { 
        transform: translateX(0); 
    } 
}

@-webkit-keyframes inView-3 { 
    0% { 
        -webkit-transform: translateX(-100%); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    }
}

@keyframes inView-3 { 
    0% { 
        transform: translateX(-100%); 
    } 
    100% { 
        transform: translateX(0); 
    } 
}

/*
 * Controls menu sliding out
 */

.outOfView {
	right: 200%;
	-webkit-animation-name: outOfView;	
	animation-name: outOfView;
}

.outOfView-1 {
	right: 200%;
	-webkit-animation-name: outOfView-1;	
	animation-name: outOfView-1;
}

.outOfView-2 {
	right: 200%;
	-webkit-animation-name: outOfView-2;
	animation-name: outOfView-2;	
}

.outOfView-3 {
	right: 200%;
	-webkit-animation-name: outOfView-3;
	animation-name: outOfView-3;	
}

.outOfView { 
    -webkit-animation-duration: 4s; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

.outOfView-1 { 
    -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.outOfView-2 { 	
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.outOfView-3 { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

@-webkit-keyframes outOfView { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(-100%); 
    }
}

@keyframes outOfView { 
    0% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(-100%); 
    } 
}

@-webkit-keyframes outOfView-1 { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(-100%); 
    }
}

@keyframes outOfView-1 { 
    0% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(-100%); 
    } 
}

@-webkit-keyframes outOfView-2 { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(-100%); 
    }
}

@keyframes outOfView-2 { 
    0% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(-100%); 
    } 
}

@-webkit-keyframes outOfView-3 { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(-100%); 
    }
}

@keyframes outOfView-3 { 
    0% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(-100%); 
    } 
}

/*
 * Controls moving the initialContent to the right
 */

.rightOfView {
	 -webkit-animation-name: rightOfView;
	animation-name: rightOfView;
}

.backToView {
	 -webkit-animation-name: backToView;
	animation-name: backToView;
}

.backToView {
	-webkit-animation-duration: 4s; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
}

.rightOfView { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

@-webkit-keyframes rightOfView { 
    0% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(100%); 
    }
}

@keyframes rightOfView { 
    0% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(100%); 
    } 
}

@-webkit-keyframes backToView { 
    0% { 
        -webkit-transform: translateX(100%); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    }
}

@keyframes backToView { 
    0% { 
        transform: translateX(100%); 
    } 
    100% { 
        transform: translateX(0); 
    } 
}