/* This is the key frames used for the animations, the fade in and the swing in for the sub menu's. */

@keyframes fadein { from { opacity:0; } to { opacity:1; }}
@-moz-keyframes fadein { from { opacity:0; } to { opacity:1; }}
@-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; }}
@-o-keyframes fadein { from { opacity:0; } to { opacity:1; }}


@-webkit-keyframes flipInX {
    0% {  -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0; }
    100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flipInX {
    0% { -moz-transform: perspective(400px) rotateX(-90deg); opacity: 0; }    
    100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-o-keyframes flipInX {
    0% { -o-transform: perspective(400px) rotateX(-90deg);  opacity: 0; }
    100% {  -o-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@keyframes flipInX {
    0% { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateX(0deg); opacity: 1;}
}

@-webkit-keyframes flipInY {
    0% {  -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@-moz-keyframes flipInY {
    0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; }    
    100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@-o-keyframes flipInY {
    0% { -o-transform: perspective(400px) rotateY(90deg);  opacity: 0; }
    100% {  -o-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@keyframes flipInY {
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1;}
}


body { background-image: url('../bg.png'); } /* This is my background */	

/* This is the main container, the total wrapper of the menu */	
#container { 
	width: 1200px;
	height: 100px;
	margin: 40px auto;
	}

/* We remove all default margins, borders and padding that may be applied by the browser */	
.menu,.menu ul,.menu li,.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
/* The first UL, we define the width of our menu */
.menu {
/*     width: 1200px; */
}
 
/* The first List Items, these are the main menu items that you see */
.menu li {
    position: relative;
    list-style: none;
    float: left;
}

/* The sub menu has to be hidden until you hover to activate it. */
.menu ul { display: none;  position: absolute;}

/* The first list items anchor classes */
.menu li a {
    display: block;
	width: 95px;
    height: 65px;
    padding: 26px 12px;
    margin: 0px 10px;
    text-decoration: none;
	text-align: center;
    word-wrap: none;

    font-weight: bold;
    font-size: 28px;
 
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

/* These are the colours for each menu item, change the colours or add more as you wish */
.block-1 {background-color: #E94A3B;}
.block-2 {background-color: #504164;}
.block-3 {background-color: #2b82bc;}
.block-4 {background-color: #8CBF26;}
.block-5 {background-color: #A05000;}
.block-6 {background-color: #F09609;}
.block-7 {background-color: #CF1758;}
.block-8 {background-color: #52B043;}

.drop {  margin-left: 2px; }
/* The text below the icon gets styled here */
span.subtext {font-size: 14px; display: block; font-family: 'Lato', sans-serif; padding-top: 10px;  }
 
/* This activates the background colour when you hover. */
.menu li:hover > a {background-color: #292929; }
 
/* Our animation for our second level dropdown */
.menu li:hover > ul {   
    display: block; 
    top:110px; 
    left: 20px;
    border-top: 5px solid transparent;

	 animation: flipInX 0.5s; 
	-moz-animation: flipInX 0.5s; /* Firefox */
    -webkit-animation: flipInX 0.5s; /* Safari and Chrome */
    -o-animation: flipInX 0.5s; /* Opera */ 
    
    /* Ends the animation at the '100%' mark */
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;

    /* Sets where the origin of the flip is from, the percentages are the X and then Y axis */
    -webkit-transform-origin: 50% 0%;
    transform-origin:50% 0%; 
    -moz-transform-origin: 50% 0%;
    -o-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
	}
	
/* Each list item setting for the 2nd level menu items */
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
}

/* Each list item setting for the 3rd level menu items */ 
.menu li:hover > ul li {
    height: auto;
    overflow: visible;
    padding: 0;
    right: 0px;
}

/* The second level element and its settings */
.menu ul li a {
    width: 100px;
    height: 70px;

    padding: 15px 0px 4px 0px;
    margin: 5px 0px 0px 0px;
	text-align: center;
    font-size: 1    8px;
 
    border: none;
}

/* The third level element and its settings */
.menu ul li ul li a {
    padding: 10px 12px 3px 0px;
    margin: 0px 0px 5px 10px;
    width: 50px;
    height: 50px;
    border-left: 10px solid transparent;
    font-size: 13px;

}

/* The 3rd level menu, appears to the right of the hovered element */
.menu li ul li:hover > ul {    
    width: 700px;
    min-height: 70px;
    display: inline;
    
	left:98px; 
	top: 14px;

    animation: flipInY 0.5s; 
    -moz-animation: flipInY 0.5s; /* Firefox */
    -webkit-animation: flipInY 0.5s; /* Safari and Chrome */
    -o-animation: flipInY 0.5s; /* Opera */ 

    /* Ends the animation at the '100%' mark */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;

    /* Sets where the origin of the flip is from, the percentages are the X and then Y axis */
    transform-origin:0% 50%;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
	}