@charset "utf-8";
/* CSS Document */

    .menu{ float:right;  font-size:15px;}
     
    .menu li{display: inline-block;
    position: relative;
    z-index:100;}
     
    .menu li a {
    text-decoration:none;
  padding:0px 12px;
    display:block;
    color:#3e3d40; text-transform:uppercase; line-height:76px; 
     
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    }

    
    .menu li a:hover, .menu li:hover > a, /*.menu li.current a:hover,*/ .menu li.current:hover > a{color:#cb221d; opacity:1;}
	.menu li a.nobg:hover { color:#ececec; background:none;}
	.menu li:last-child a.nobg { padding-right:0;}
	
	.menu li a.current { color:#cb221d;}
.menu li.current li.current a { color:#cb221d;}
.menu li.current li a { color:#3e3d40;}
	
	    /* hide the second level menu */
    .menu ul {display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 76px;
    left: 0px;
    background: #ececec; padding:10px 0 ;
    }
	 .menu ul.uno { width:150px;}
	
     
    /* display second level menu on hover */
    .menu li:hover > ul{ display: block;}
     
    .menu ul li {display:block;
    float: none;
    background:none;
    margin:0;
    padding:0;
    }
     
    .menu ul li a { padding:10px 20px 10px 20px; line-height:normal;
    display:block;
    color:#333;
    background:#ececec;}
     
    .menu ul li a:hover, .menu ul li:hover > a{
    color:#cf4213; opacity:1; 
    }
	
	
	    /* change level 3 menu positions */
    .menu ul ul {left: 150px;
    top: 0px;
    }
	.menu ul ul li a{ text-transform:none;}
	
	    .mobile-menu{display:none;
    width:100%;
    padding:12px 0;
    color:#3e3d40;
    text-transform:uppercase;
    }
    .mobile-menu:hover{/*background:#ececec;*/
    color:#cb221d;
    text-decoration:none;
    }
	.mobile-menu img { height:18px; vertical-align:bottom; padding-left:5px;}
	

@media screen and (max-width: 860px){
	.menu { font-size:14px;}
.menu li a {  padding:0px 9px; }	
}




@media (max-width: 820px) {
     #nav { width:20%; float:right; text-align:right; margin-top:60px;}
    .menu{display:none; position:absolute; width:25%; margin:0; top:140px; right:1.5%;}
     
    .mobile-menu{display:block; font-size:15px;
    }
     
    #nav .menu li{display:block;
    margin:0;}
     
   .menu li a {background:#fcfcfc; padding:10px 20px ; line-height:normal;
    }
    .menu li a.nobg:hover {  background:#ececec;}
	 
    /*level 2 and 3 - make same width as all items*/
    .menu ul {display:block;
    position:relative;
    top:0;
    left:0; 
    width:100%; padding:16px 0 3px 0;}
     .menu ul.uno, .menu ul.dos { width:100%;}
    .menu ul ul {left:0; padding-left:10px;}
     
	 .menu ul li a { padding:0 20px 11px 20px;}
	 .menu li:last-child a.nobg { padding-right:20px;}
    }
	
	
@media screen and (max-width: 580px){
#nav {  margin-top:32px;}
.menu{top:110px;}
}
	
@media (max-width: 568px) {
.menu { width:35%; }

}

@media (max-width: 480px) {
#nav {  margin-top:24px;}
.menu { width:45%; top:102px; }
}

@media (max-width: 420px) {
.mobile-menu{font-size:13px;}
#nav {  margin-top:15px;}
.menu{top:94px;}
}

@media (max-width: 400px) {
#nav {  margin-top:20px; width:21%;}
}