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

    .menu{/* float:right;  */font-size:15px;  }
     
    .menu li{display: inline-block; padding:0 27px; vertical-align:middle; 
    position: relative;
    z-index:100;}
     
    .menu li a {
    text-decoration:none; 
  
   /* display:block;*/
    color:#fff;  text-transform:uppercase; letter-spacing:0.5px; line-height:40px; 
     
    -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:first-of-type { padding-left:0;}
.menu li.pedidos { padding:0 8px; background:#c32927; font-family: 'din-bold';}
/*.menu li:last-of-type  { padding-right:0;}*/
    
   /* .menu li a:hover, .menu li:hover > a, .menu li.current a:hover, .menu li.current:hover > a{color:#cb221d; opacity:1; border-bottom:solid 2px #6d9dff; padding-bottom:17px; }*/
	.menu li a.nobg:hover { color:#ececec; background:none;}
	.menu li:last-child a.nobg { padding-right:0;}
	.menu li:nth-of-type(4):hover > a, .menu li:nth-of-type(4):hover  {background:#8fb2bc; }
	.menu li a.current { color:#fff; border-bottom:solid 2px #6d9dff; padding-bottom:17px;}
.menu li li a.current { color:#6d9dff; border-bottom:none; padding-bottom:10px;}
.menu li.current li a { color:#fff;}
	
	    /* hide the second level menu */
    .menu ul {display: none; font-family:'DINPro-Regular', sans-serif;font-weight:normal;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40px; 
    left: 0px;
    background: #8fb2bc; padding:10px 0 ;
    }
	 .menu ul.uno { width:170px;}
	
     
    /* 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 27px; line-height:normal;
    display:block;
    color:#fff;
    background:#8fb2bc;}
     
    .menu ul li a:hover, .menu ul li:hover > a{
    color:#20667a; opacity:1; border-bottom:none; padding-bottom: 10px;
    }
	
	
	    /* change level 3 menu positions */
    .menu ul ul {left: 170px;
    top: 0px; padding:0; width:100%; 
    }
	.menu ul ul li a{ text-transform:none; padding:10px 20px; background:#7ca4ae;}
	
	    .mobile-menu{display:none;
    width:100%;
    padding:12px 0;
    color:#fff;
    text-transform:uppercase; /*font-weight:700;*/
    }
    .mobile-menu:hover{/*background:#ececec;*/
    /*color:#6d9dff;*/
    text-decoration:none;
    }
	.mobile-menu img { height:18px; vertical-align:bottom; padding-left:5px;}
	
@media screen and (max-width: 1110px){
	.menu li  {  padding:0 1.15%; }	
	.menu li.pedidos {  padding:0 1.5%; }
	.menu ul li a { padding-left:12px;}
}

@media screen and (max-width: 940px){
	.menu li  {  padding:0 1%; font-size:14px; letter-spacing:0; }	
	.menu li.pedidos {  padding:0 1%; }
}


@media screen and (max-width: 840px){
.menu li  {  padding:0 0.3%; }	
	.menu li.pedidos {  padding:0 0.7%; }
}




@media (max-width: 768px) {
     #nav { text-align:right; position:relative; }
    .menu{display:none; position:absolute; width:25%; margin:0; top:40px; right:1.5%; background:#20667a; border-bottom:solid 2px #fff; z-index:40;}
     
    .mobile-menu{display:block; font-size:15px;
    }
     
    #nav .menu li{display:block; padding:0;
    margin:0;}
     
   .menu li a {/*background:#f9f9f9;*/ padding:10px 28px 10px 20px ; line-height:normal; display:block;
    }
    .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:0px; padding-bottom:10px;}
     
	 .menu ul li a { padding:0 28px 11px 20px; }
	 .menu ul ul li a { padding:6px 28px 6px 20px; }
	 .menu li:last-child a.nobg { padding-right:20px;}
    }
	

@media screen and (max-width: 640px){
.menu { width:45%; }
}

@media screen and (max-width: 360px){
.menu { width:60%; }
}