#nav,#nav ul {
    
     background-color:rgba(9, 39, 66, 0.65);
    text-align: center;
    vertical-align:middle;
    width:100%;

    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    /*padding: 5px;*/
    position: relative;
    width: 100%;
    background-color:rgba(9, 39, 66, 0.65);

}
#nav ul {
     background-color: rgba(76, 135, 190, 0.28);
        color:rgba(180, 229, 99, 0.86);
         font-size: 18px;
         -webkit-box-shadow:2px 0px 0px rgba(0,0,0, .5);
        text-shadow:0 2px 2px rgba(246, 66, 34, 0.75);

        width:100%;

    left: -9999px;
    opacity:0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    /*top: -9999px;*/

      -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;

   
}

#nav li {
    vertical-align:middle;
     text-transform: uppercase;
    /*display: block;*/
   
    color: #e5e8ed;
    /*font-weight: 600;*/
    font-size: 18px;
     width:100%;

    background-color: transparent;
    position: relative;
}
#nav > li {
    
   
    color: #e5e8ed;
    font-weight: 600;
    height:60px;
   

    font-size: 25px;
         -webkit-box-shadow:2px 0px 0px rgba(0,0,0, .5);
        text-shadow:0 2px 2px rgba(246, 66, 34, 0.75);


    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
        
    height:60px;
    width:100%;

    
    
    border-style: none;
    /*border-width: 1px 0px 0px 0px;*/
    color: #ffffff;
    display: block;
    font-size: 18px;
    padding: 18px; /*10px 8px 5px*/
    text-decoration: none;
    

    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: rgba(76, 135, 190, 0.30);
    border-color: #8899AA;
    color: #FFFFFF;
    width:100%;
    height:60px;

    
  

}
#nav li:hover ul.subs {
    left: 100%;
    opacity:1;
    top: 0;
   width:90%;

    background-color:rgba(9, 39, 66, 0.65);

    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;

    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
   
}

/* colors */
.colorScheme {
    list-style: none outside none;
    overflow: hidden;
    width: 120px;
}
.colorScheme a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px 5px;
    width: 30px;
}
.colorScheme .clr1 {
    background-color: #8899AA;
}
.colorScheme .clr2 {
    background-color: #aa889e;
}
.colorScheme .clr3 {
    background-color: #8f88aa;
}
.colorScheme .clr4 {
    background-color: #88aaaa;
}
.colorScheme .clr5 {
    background-color: #88aa8a;
}
.colorScheme .clr6 {
    background-color: #aaa188;
}

#clr1:target ~ #nav, #clr1:target ~ #nav ul {
    background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
    background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
    background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
    background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
    background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
    background-color: #aaa188;
}

#clr1:target ~ #nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
    background-color: #aa889e;
    border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
    background-color: #8f88aa;
    border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
    background-color: #88aaaa;
    border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
    background-color: #88aa8a;
    border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
    background-color: #aaa188;
    border-color: #aaa188;
}