.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {margin: 0; padding: 0; font-family: 'Roboto Condensed', sans-serif; z-index: 99999;}

.dropdowns a {text-decoration: none;}

.toggleMenu {
    display:  none;
}
.nav {
    list-style: none;
     *zoom: 1;
    
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav a {
    padding: 7px 15px;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("../images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    right: -9999px;
     column-count:2;
    column-width:1px;
    width:400px;
    background: #e0fbf9;
    display:none;
}
.nav > li.hover > ul {
    right: 0;
    display:block;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    position: relative;
    z-index:100;
    padding:10px;
}
.nav li li li a {
    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("../images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}

/* colors */
/* ------ */
/* togle menu button for narrow screens */
.toggleMenu {
    background: #0c5751;
    color: #fff;
}

/* general navigation background colors */
.nav {
    float: right;
}

/* general navigation link font color */
.nav a {
    color:#888;
}

/* first level items borders */
.nav > li {
	
}
 .nav li a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #ccc;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.nav li a:hover:after { 
  width: 100%; 
  left: 0; 
}


/* navigation hover colors */
.nav a {
	background-color: #fff;  
}
.nav a:hover {
	background-color: #fff;
}

/* second level navigation colors */
.nav li li a {
    background: #e0fbf9;
    border-bottom: 1px dashed #ccc;
}
.nav li li a:hover{
    background: #f3fcfb;
    color: #0c5751;
}

/* third level navigation colors */
.nav li li li a {
    background:#f3fcfb;
    border-bottom: 1px solid #c0c0c0;
}

/* ---------------- */
/*      layout      */
/* -----------------*/

/* main div */
.dropdowns {
	width:auto;
}

/* small screens menu button */
a.toggleMenu {
	padding: 8px 0;
	width:100%;
	text-align: center;
}

/* second and third level menus */
.nav ul {
	width:9em;
}

/* general paddings and other stuff */
.nav a {
	padding: 5px 15px;
}

/* parents that have submenus */
.nav > li > .parent {
	padding-right: 25px;
	background-position: 90% 50%;
}

/* small screen adjustments*/
@media screen and (max-width: 768px) {
    .nav {
    float: none;
}
    
	.nav ul {
		width: 100%;
	}
    .nav a {
        background: #e0fbf9;
        color: #0c5751;
         border-bottom:1px dashed #ccc;
        font-size:0.9em;
        padding: 5px 10px;
    }
    .nav a:after {    
  background: none;
  bottom: 0;
  content: "";
  display: block;
  height: 0px;
  left: 0;
  position: absolute;
  background: none;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.nav a:hover:after { 
  width: 100%; 
  left: 0; 
}
    .nav li ul {
        column-count:2;
        column-width:1px;
        background: #f3fcfb;
            width:100%;
    }
    .nav li li  {
        background: #f3fcfb;
        
    }
}