/* =====  HOME NAVIGATION  ====== */
nav.cmn-tile-nav {
  display: none;
}
nav.cmn-tile-nav.open {
  display: block;
}
nav.cmn-tile-nav ul {
  list-style: none;
}
nav.cmn-tile-nav li {
  display: block;
  overflow: hidden;
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-shadow: -1px 1px rgba(0, 0, 0, 0.3);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
nav.cmn-tile-nav a {
  display: block;
  padding: 10px 4px;
  color: greenyellow;
  -webkit-transition: background 0.3s, -webkit-transform 0.3s;
  -moz-transition: background 0.3s, -moz-transform 0.3s;
  -o-transition: background 0.3s, -o-transform 0.3s;
  transition: background 0.3s, transform 0.3s;
  text-transform: uppercase;
  font-family: 'Goudy Bookletter 1911',Georgia,serif;
  font-size: .8em;       
}
nav.cmn-tile-nav a:after, nav.cmn-tile-nav a:before {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    top: 100%;
	-webkit-transition: border 0.3s, -webkit-transform 0.3s;
	-moz-transition: border 0.3s, -moz-transform 0.3s;
	-o-transition: border 0.3s, -o-transform 0.3s;
	transition: border 0.3s, transform 0.3s;
}
nav.cmn-tile-nav a:after {
    border-left: 60px solid transparent;
    right: 0px;
}
nav.cmn-tile-nav a:before {
    border-right: 60px solid transparent;
    left: 0px;
}
nav.cmn-tile-nav a:hover {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}

nav.cmn-tile-nav li.colour-2 {
  background-color: #be0a0a;
}
nav.cmn-tile-nav li.colour-2 a:after,nav.cmn-tile-nav li.colour-2 a:before{
   border-top: 5px solid #be0a0a;
}
nav.cmn-tile-nav li.colour-2 a {
  background-color: #be0a0a;
}
nav.cmn-tile-nav li.colour-2:hover, nav.cmn-tile-nav li.colour-2:hover a {
  background-color: #5d0507;
}
nav.cmn-tile-nav li.colour-2:hover a:after, nav.cmn-tile-nav li.colour-2:hover a:before{
  border-top: 5px solid #5d0507;
}
nav.cmn-tile-nav li.colour-3 {
  background-color: #a00000;
}
nav.cmn-tile-nav li.colour-3 a:after,nav.cmn-tile-nav li.colour-3 a:before{
   border-top: 5px solid #a00000;
}
nav.cmn-tile-nav li.colour-3 a {
  background-color: #a00000;
}
nav.cmn-tile-nav li.colour-3:hover, nav.cmn-tile-nav li.colour-3:hover a {
  background-color: #941212;
}
nav.cmn-tile-nav li.colour-3:hover a:after, nav.cmn-tile-nav li.colour-3:hover a:before{
  border-top: 5px solid #941212;
}

/* smoother transitions */
nav.cmn-tile-nav li,
nav.cmn-tile-nav a {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* media queries */

/*
@media all and (min-width: 30em) { 
  nav.cmn-tile-nav {display: block}
  nav.cmn-tile-nav li {width: 25%;float: left }
}   */

@media all and (min-width: 48em) {

  nav.cmn-tile-nav {display: block}    
  nav.cmn-tile-nav li {width: auto; float: left}
  nav.cmn-tile-nav a {text-align: center; padding: 15px 10px 15px 10px}
  nav.cmn-tile-nav a:hover {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@media all and (min-width: 48em) {
 
    nav.cmn-tile-nav li {overflow: visible;width: 16.66%}
    nav.cmn-tile-nav a {padding: 10px 0px 10px 0px}
    nav.cmn-tile-nav a:hover {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/* ============================================================
  NAVIGATION TOGGLE
============================================================ */
a.nav-toggle {
  display: inline-block;
  margin-bottom: 0px;
  padding: 5px;	
  background-color: #000;
  color: #fff;
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: center;
  font-size: 1.8em;  /*  neu  */
  line-height: 40px;   /*  neu  */
}

@media all and (min-width: 48em) {
  a.nav-toggle {
    display: none;
  }
}