/* ####################################################################################### */

/* ------------- NAVIGATION ---------------- */

/* ####################################################################################### */

nav
  {
    width           : 100%;
    text-align      : center;
  }

nav ul
  {
    width           : 100%;
    list-style      : none;
    padding         : 0;
    margin          : 0;
    display         : inline-block;
    background      : #445;
  }

nav ul li
  {
    float           : left;
    width           : 25%;
    height          : 3em;
    line-height     : 3em;
    position        : relative;
    font-size       : 1em;
    color           : #fff;
    cursor          : default;
  }

nav ul li:hover
  {
    background      : #556;
    border-radius   : 5px;
  }

ul ul.drop-menu
  {
    position        : absolute;
    top             : 100%;
    left            : 0%;
    width           : 100%;
    padding         : 0;
    background      : transparent;
  }

ul ul.drop-menu li
  {
    width           : 100%;
    background      : #ff5722;
    color           : #222;
  }

nav a,
nav a:hover
  {
    display         : block;
	background      : #ff5722;
    color           : #222;
  }

nav a[href='index.html']
  {
	background      : #445;
    color           : #fff;
  }

nav a:hover
  {
	background      : #ff7b51;
  }

ul ul.drop-menu li:hover
  {
    background      : #ff7b51;
    border-radius   : 0px 0px 0px 0px;
  }

ul ul.drop-menu li:last-child
  {
    border-radius   : 0px 0px 5px 5px;
  }

ul ul.drop-menu li
  {
	display         : none;
  }

li:hover ul.drop-menu li
  {
    display         : block;
  }

li:hover ul.drop-menu.menuItem
  {
    perspective     : 1000px;
  }

li:hover ul.drop-menu.menuItem li
  {
    opacity: 0;
  }

li:hover ul.drop-menu.menuItem li:nth-child(1)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 0ms;
    transform-origin: top right;
    animation-fill-mode: forwards;
  }

li:hover ul.drop-menu.menuItem li:nth-child(2)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 200ms;
    transform-origin: top left;
    animation-fill-mode: forwards;
  }

li:hover ul.drop-menu.menuItem li:nth-child(3)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 400ms;
    transform-origin: top right;
    animation-fill-mode: forwards;
  }

li:hover ul.drop-menu.menuItem li:nth-child(4)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 600ms;
    transform-origin: top left;
    animation-fill-mode: forwards;
  }

li:hover ul.drop-menu.menuItem li:nth-child(5)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 800ms;
    transform-origin: top right;
    animation-fill-mode: forwards;
  }

li:hover ul.drop-menu.menuItem li:nth-child(6)
  {
    animation       : menuItems 600ms ease-in-out;
    animation-delay : 1000ms;
    transform-origin: bottom center;
    animation-fill-mode: forwards;
  }

@keyframes menuItems
  {
    0%
    {
    opacity         : 0;
    transform       : rotateY(90deg);
    }

    100%
    {
    opacity         : 1;
    transform       : rotateY(0deg);
    }
  }