/*########################################## * 
Click Menu Script * 
Created by WebDesign - sites-design.com  
* Copyright 2006 - 2017 WebDesign 
* Developer url : http://www.sites-design.com    
########################################### */ 
    
.t3-mainnav .navbar-inner {text-align: center; display: inline-block; width: 100%;} 
.nav-collapse.collapse {text-align: center;} 
ul.level1 {display: inline-block; width: auto; list-style: none; margin: 0 auto;} 
ul.level1 li {float: left;} 
ul.level1 li a {font-family: 'open_sanscondensed_light'; display: block; color: #fff; line-height: 20px;} 
ul.level1 li a:hover {color: #0082C2; text-decoration: none;} 
ul.level1 li.active a {color: #0082C2; text-decoration: none;} 

ul.level2 {
	list-style: none;
	width: auto;
	max-width: 700px;
    position: absolute;
    text-align: left;
    padding: 12px 0 10px 0;
    z-index: 100000000000;
    background: #07AE87;
    box-shadow: 1px 4px 3px #999;
    display: none; 
    height: auto;
	-webkit-animation-duration: 1.2s; 
    animation-duration: 1.2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	-webkit-animation-name: fadeInMenu; 
    animation-name: fadeInMenu; 
} 

@-webkit-keyframes fadeInMenu { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInMenu { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}  
ul.level1 li a:hover  + ul.level2, ul.level2:hover, ul.level2 li:hover {display: table !important;}  
ul.level2 li {display: block; min-width: 120px;} 
ul.level2 li img {margin: 0 10px 0 0; max-width:120px !important;} 
ul.level2 li p {font-family: "Pluto-Light"; font-size: 12px; color: #eee; line-height: 14px; margin: 5px 0 0 0;} 
ul.level2 li a, ul.level1 li.active ul.level2 li a {font-family: "Pluto-Regular"; font-size: 15px !important; padding: 0 !important; color: #fff;} 
ul.level2 li a:hover, ul.level1 li.active ul.level2 li a:hover {color: #0082C2; text-decoration: none;} 


@media (min-width: 1361px) {
  ul.level1 li a {padding: 10px 12px; font-size: 20px;}  
  ul.level2 {min-width: 320px; margin: 0 0 0 -120px;} 
  #categoria1 .level2 {margin: 0 auto 0 0; left: 0;} 
  #categoria19 .level2 {margin: 0 0 0 auto; right: 0;} 
  ul.level2 li {float: left; padding: 5px 1% 5px 2%; width: 46%; border-left: 1px solid #42B97D;}  
}  

@media (min-width: 1201px) and (max-width: 1360px) {
   ul.level1 li a {padding: 10px 9px; font-size: 19px;}  
   ul.level2 {min-width: 320px; margin: 0 0 0 -120px;} 
   #categoria1 .level2 {margin: 0 auto 0 0; left: 0;} 
   #categoria19 .level2, #categoria31 .level2 {margin: 0 0 0 auto; right: 0;} 
   ul.level2 li {float: left; padding: 5px 1% 5px 2%; width: 46%; border-left: 1px solid #42B97D;}  
}  

@media (min-width: 981px) and (max-width: 1200px) {
   ul.level1 li a {padding: 10px 6px; font-size: 16.5px;}  
   ul.level2 {min-width: 320px; margin: 0 0 0 -120px;} 
   #categoria1 .level2 {margin: 0 auto 0 0; left: 0;} 
   #categoria19 .level2, #categoria31 .level2 {margin: 0 0 0 auto; right: 0;} 
   ul.level2 li {float: left; padding: 5px 1% 5px 2%; width: 46%; border-left: 1px solid #42B97D;}  
} 
	
@media (min-width: 769px) and (max-width: 980px) {
   ul.level1 li a {padding: 10px 5px; font-size: 13px;}  
}  

@media (max-width: 768px) {
	.t3-mainnav .nav-collapse {box-shadow: 0 1px 4px #999; margin: -1px 0 0 !important;} 
    ul.level1 {width: 100%; padding: 10px 0 0;} 
	ul.level1 li {float: none;} 
	ul.level1 li a {font-family: "Pluto-Regular"; font-size: 16px !important; color: #07AE87; line-height: 20px; padding: 6px 0; border-bottom: 1px solid #eee;} 
	ul.level1 li a:hover  + ul.level2, ul.level2:hover, ul.level2 li:hover {display: none !important;}
	ul.level2 li a {color: #fff; font-size: 13px !important; border-bottom: 1px solid #057C62;} 
	
	.t3-mainnav .nav-collapse .nav {display: block !important;}  
	.nav-collapse .nav > li {float: left; width: 33.333%; text-align: center;} 
	.t3-mainnav .nav-collapse .nav > li > a {font-size: 0; padding: 10px 0 0 !important;} 
	.t3-mainnav .nav-collapse .nav > li > a:hover {background: none; -webkit-filter: grayscale(100%); filter: grayscale(100%);} 
}