@font-face{
font-family:"UTMavo";
src:url(utm-avo.ttf);
}
/* General menu styling */

#menu{  float:left; width:100%;margin-top: -10px;}


.nav {
position: relative;
margin: 0;
padding: 0;
    z-index: 11;
line-height: 22px;

}
/* The main navigation link containers */
.nav>li {
display: block;
float: left; /* Displaying them on the same line */
margin:0px 0px 0px 0px;
}
.nav>li>h2 {
margin-bottom:0px;
margin-top:0px;
}
/* The main navigation links */
.nav>li>a {
/* Layout */
display: block;
position: relative;
padding: 10px 25px;
/* Text */
color: #000000;
font-size: 17px;
font-family:"UTMavo";
text-decoration: none;
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;

-ms-transition: color .3s ease-in;

}

.nav>li>h2>a {
/* Layout */
display: block;
position: relative;
padding: 10px 25px;
font-weight:100;
/* Text */
color: #000000;
font-size: 16px;
font-family:"UTMavo";
text-decoration: none;
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;

-ms-transition: color .3s ease-in;

}
/* Changing the color on hover */
.nav>li>a:hover, .nav>li:hover>a {
color: #0fd0f9;
}
.nav>li>h2>a:hover, .nav>li:hover>h2>a {
color: #0fd0f9;
}

/* The links which contain dropdowns menu are wider, because they have a little arrow */

.nav>.dropdown>a {

padding: 10px 30px 10px 5px;

}

/* The arrow indicating the dropdown */

.dropdown>a::after {

content: "";

position: absolute;

top: 17px;

right: 10px;

width: 7px;

height: 7px;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

border-bottom: 1px solid #fff;

border-right: 1px solid #fff;

}

/* Changing the color of the arrow on hover */ 

.dropdown>a:hover::after, .dropdown:hover>a::after {

border-color: #0fd0f9;

}

/* The submenus */

.nav ul {

position: absolute;

margin: 0;
z-index:3;

padding: 0;

list-style: none;

display: block;

}

/* General layout settings for the link containers of the submenus */

.nav ul li {

position: absolute;

top: -9999px; /* Hiding them */

height: 0px;
    text-align: left;
display: block;

margin: 0;

padding: 0;

/* Making them to expand their height with a transition, for a slide effect */

-webkit-transition: height .2s ease-in;

-moz-transition: height .2s ease-in;

-o-transition: height .2s ease-in;

-ms-transition: height .2s ease-in;

}

.nav ul li  h3{margin-bottom:0px;margin-top:0px;}
/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */

.dropdown:hover>ul>li {

height: 30px;

position: relative;

top: auto;

}



/* The submenu links */

.nav ul li a {

/* Layout */

padding: 4px 20px;

width: 285px;

display: block;

position: relative;

/* Text */

font-size:13px;
color: #fff;

text-decoration: none;


/* Background & effects */

background:#FFF;

background:#0E88C8;

-webkit-transition: color .3s ease-in, background .3s ease-in;

-moz-transition: color .3s ease-in, background .3s ease-in;

-o-transition: color .3s ease-in, background .3s ease-in;

-ms-transition: color .3s ease-in, background .3s ease-in;

}

.nav ul li h3 a {

/* Layout */

padding: 4px 20px;

width: 119px;
text-align: left;
display: block;

position: relative;

/* Text */
font-weight:100;
font-size:13px;
color: #fff;

text-decoration: none;


/* Background & effects */

background:#FFF;

background:#0E88C8;

-webkit-transition: color .3s ease-in, background .3s ease-in;

-moz-transition: color .3s ease-in, background .3s ease-in;

-o-transition: color .3s ease-in, background .3s ease-in;

-ms-transition: color .3s ease-in, background .3s ease-in;

}

/* Changing the link's color and background on hover */

.nav ul li:hover>a, .nav ul li a:hover {

color: #0fd0f9;

background: rgba(0, 0, 0, .75);

}


.nav ul li:hover>h3>a, .nav ul li h3 a:hover {

color: #0fd0f9;

background: rgba(0, 0, 0, .75);

}

/* Making the level 2 (or higher) submenus to appear at the right of their parent */

.nav ul .dropdown:hover ul {

left: 160px;

top: 0px;

}

/* The submenu links have a different arrow which indicates another dropdown submenu */

.nav ul .dropdown a::after {

width: 6px;

height: 6px;

border-bottom: 0;

border-right: 1px solid #fff;

border-top: 1px solid #fff;

top: 12px;

}

/* Changing the color of the arrow on hover */

.nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {

border-right: 1px solid #0fd0f9;

border-top: 1px solid #0fd0f9;

}
.nav ul li ul li a{font-size:13px}