/*  1#max-width: 479px  
 *
 * iPhone and other smartphones (portrait & landscape) 
=================================================== */





@media ( max-width: 867px ) {

  ul.menu,
  ul.menu ul,
  ul.menu li > div,
  ul.menu > li { 
    width: 100%;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }  
  ul.menu div.links h3 { padding: 10px; }
  ul.menu > li a { padding: 12px 10px; }
  ul.menu > li:last-child { }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; width: 320px;}
  ul.menu > li:nth-last-child(2) > ul ul { left: -200px; }
  ul.menu ul { top: 0px; left: 0px; }
  ul.menu ul ul { top: 0px; left: 0px; }
  ul.menu > li  { border-right: none; }
  ul.menu > li:last-child  { border-left: none;  }
 



/* iPad and other tablets  
============================================= */

@media (min-width:480px) and (max-width: 967px) {


  ul.menu,
  ul.menu ul,
  ul.menu li > div,
  ul.menu > li { 
    width: 100%;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }  
  ul.menu div.links h3 { padding: 10px; }
  ul.menu > li a { padding: 12px 10px; }
  ul.menu > li:last-child {  }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; width: 320px;}
  ul.menu > li:nth-last-child(2) > ul ul {  }
  ul.menu ul { top: 0px; left: 0px; }
  ul.menu ul ul { top: 0px; left: 0px; }
  ul.menu > li  { border-right: none; }
  ul.menu > li:last-child  { border-left: none; }
 






/*Landscape phone to portrait tablet 
============================================== */

@media (min-width:768px) and (max-width: 959px) {
 


  ul.menu { width: 100%; }
  ul.menu > li  { 
  width: 100%; 
  -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }
  ul.menu > li a { padding: 12px 13px; }
  .right{ float: right; padding: 0px; }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; }
  ul.menu ul > li a { padding: 12px 20px; }
  ul.menu > li:nth-last-child(2) > ul ul {  }
  ul.menu ul ul { top: 0; left: 100px; }
  ul.menu > li:nth-child(6) > ul ul {  }
  ul.menu > li:nth-child(6) > ul { right: 0; }
  ul.menu > li:nth-child(6) { border-right: none ;}
  ul.menu .right { padding-left:0px; }



}