
#menu {
  width: 100%;
  height: 40px;
  clear: both;  float: left;
}

ul#nav {
  float: left;
    width:100%;
  margin: 0;
  padding: 0;
  list-style: none; position:absolute; top:10px; left:230px; 
  
}
@media all and (max-width:1800px) and (min-width:1501px)  {
ul#nav {
  float: left;
    width: 100%;
  margin: 0;
  padding: 0;
  list-style: none; position:absolute; top:10px; left:180px; 
  
}
}
@media all and (max-width:1500px) and (min-width:1024px)  {
ul#nav {
  float: left;
    width: 100%;
  margin: 0;
  padding: 0;
  list-style: none; position:absolute; top:45px; left:0px; 
  
}
}
ul#nav li {
  display: inline; height:80px;  -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out; line-height:100px
}



ul#nav li a {
  float: left; 
  line-height: 50px;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0 20px; display:block; font-weight:500 ; letter-spacing:-1px
     
}
@media all and (max-width:1800px) and (min-width:1501px)  {

ul#nav li a {
  float: left; 
  line-height: 50px;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0 20px; display:block;  font-weight:500 ; letter-spacing:-1px
     
}
}
@media all and (max-width:1500px) and (min-width:1024px)  {

ul#nav li a {
  float: left; 
  line-height: 50px;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0 20px; display:block;  font-weight:500 ; letter-spacing:-1px
     
}
}
ul#nav li a.btitle{ font-size:18px;   line-height: 110px;

}
ul#nav li.on a {
  float: left;
 
  line-height: 50px;
  color: #00aac3;
  text-decoration: none;
 
  margin: 0;
  padding: 0 0px;  display:block;
}

/* APPLIES THE ACTIVE STATE */
ul#nav > .current > a, ul#nav > li:hover > a  {
  color: #00aac3;
  text-decoration: none; 
 
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;   margin-left:-230px;  -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;
  
}
@media all and (max-width:1800px) and (min-width:1501px)  {
ul#nav  ul {
  display: none;   margin-left:-180px;  -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;
  
}
}
@media all and (max-width:1500px) and (min-width:1024px)  {
ul#nav  ul {
  display: none;   margin-left:0px;  -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;
  
}
}
ul#nav  ul:hover{ -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;

    transition: all 0.3s ease-in;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */


ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 100%;
  position: absolute; top:105px; background: #b6bec5;    -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;

    transition: all 0.3s ease-in;

  

}
@media all and (max-width:1500px) and (min-width:1024px)  {
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 100%;
  position: absolute; top:90px; background: #b6bec5;    -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;

    transition: all 0.3s ease-in;

  

}
}
ul#nav li:hover > ul li a {
  float: left;
  color:#fff; 
  text-decoration: none; background: #b6bec5;font-size:14px
 
 
 
}
ul#nav li:hover > ul li a:hover {
  float: left;
   color: #fff;
  text-decoration: none; background: #a2acb3; font-size:14px
 
 
 
}

ul#nav li:hover > ul li.on a { float: left;
  line-height: 45px;
   color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0; 
 
 
}

ul#nav  ul.current {
  display: block;  position: absolute; top:105px; background: #b6bec5;  width:100%; margin-left:-230px; ; z-index:-9999
}

@media all and (max-width:1800px) and (min-width:1501px)  {
ul#nav  ul.current {
  display: block;  position: absolute; top:105px; background: #b6bec5;  width:100%;margin-left:-180px; 
}
}


@media all and (max-width:1500px) and (min-width:1024px)  {
ul#nav  ul.current {
  display: block;  position: absolute; top:90px; background: #b6bec5;  width:100%; margin-left:0px; 
}
}



ul#nav  ul.current li a.on{ color:#fff; background: #8f989f;
}
ul#nav  ul.current li.current  a{ color:#fff; background: #8f989f;
}

ul#nav  ul.current li a{ color:#fff; font-size:14px
}

ul#nav  ul li { float:left; height:50px; }


.ml_1{margin-left:230px!important}
.ml_2{margin-left:460px}
.ml_3{margin-left:530px!important}
.ml_4{margin-left:810px}
.ml_5{margin-left:800px}
.ml_6{margin-left:750px!important}

@media all and (max-width:1800px) and (min-width:1501px)  {
.ml_1{margin-left:340px}
.ml_2{margin-left:340px}
.ml_3{margin-left:430px}
.ml_4{margin-left:810px}
.ml_5{margin-left:600px}
.ml_6{margin-left:590px}
}
@media all and (max-width:1500px) and (min-width:1024px)  {
.ml_1{margin-left:10px!important}
.ml_2{margin-left:10px}
.ml_3{margin-left:300px!important}
.ml_4{margin-left:570px}
.ml_5{margin-left:300px}
.ml_6{margin-left:300px!important}
}