.nav-overlay{display:none;}

/***********************************************************************************/
/*** Header
/***********************************************************************************/
header{z-index:10000;}
header .wrapper{max-width: initial; padding-left:50px; padding-right: 50px; height:120px;}
header .wrapper{display:flex; align-items: center; }
header .wrapper .logo a{display:flex;}
header .wrapper .logo a img{display: flex; width: 100%; max-width: 330px;}
header .wrapper .logo, header .wrapper .donate{min-width: 320px;}
header .wrapper .donate{text-align: right;}


/***********************************************************************************/
/*** Menu principal / desktop
/***********************************************************************************/
header .menu-principal-container{flex:1; padding-left:20px; padding-right:20px;}



header .menu-principal-container ul li:before{display:none!important;}
.nav-overlay .overlay-inner{overflow:auto!important; height:100%!important;}

/****************************************************************/
/*** Overlay - Main nav
/****************************************************************/ 
@media screen and (max-width: 400px){ 
.nav-overlay .overlay-inner{ height: 100%; overflow:scroll;}
}
@media screen and (min-width: 401px){ 
.nav-overlay .overlay-inner{ height: 100%; overflow:hidden;}
}
.nav-overlay .overlay-inner .wrap-menu > div ul{padding:0 0 0 0; margin:0 0 0 0;} 
.nav-overlay .overlay-inner .wrap-menu > div ul li{list-style: none; margin:auto; text-align:left; display:block;}
.nav-overlay .overlay-inner ul li:before{display:none!important;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li{display:block; padding:0 0 0 0; margin:0 0 0 0;  position: initial; width:550px;} 
.nav-overlay .overlay-inner .wrap-menu > div > ul > li{ padding:0 80px;} 

.nav-overlay .overlay-inner .wrap-menu > div ul li a{
  text-decoration: none; 
  display:inline-block;  
  margin: 0 0 0 0; 
  padding: 0 0;   
  position: initial; 
  color:#0B141F;
  font-family: 'Roboto', sans-serif;
  font-size:32px;
  line-height:52px; 
  font-weight:700;
  letter-spacing:0.3px;
  opacity:1;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}   
.nav-overlay .overlay-inner .wrap-menu > div ul > li > a:hover, 
.nav-overlay .overlay-inner .wrap-menu > div ul > li > a:active, 
.nav-overlay .overlay-inner .wrap-menu > div ul > li > a:focus{color:#0B141F; }

 

.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul{padding:0 0 0 0; margin:0 0 0 0;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li{z-index:2; position:relative;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li:first-child > a{margin-top:0;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li > a{
  font-family: 'Open Sans', sans-serif;
  padding:0 60px;
  margin:8px 0 0 0;
  font-size:20px;
  font-weight: 700; 
  line-height:1.4;
  letter-spacing: 0.4px;  

  color:#0B141F;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.nav-overlay .overlay-inner .wrap-menu > div > ul > li.current_page_item > a,
.nav-overlay .overlay-inner .wrap-menu > div > ul > li > ul > li.current_page_item  > a,
.nav-overlay .overlay-inner .wrap-menu > div > ul > li.current-page-parent > a,
.nav-overlay .overlay-inner .wrap-menu > div > ul > li.current_page_parent > a,
.nav-overlay .overlay-inner .wrap-menu > div > ul > li.current_page_ancestor> a{ color: #7F8694;  }  

.nav-overlay .overlay-inner .wrap-menu > div > ul > li.current_menu_item > a,
.nav-overlay .overlay-inner .wrap-menu > div > ul > li > ul > li.current_menu_item  > a, 
.nav-overlay .overlay-inner .social{display:inline-block;}
.nav-overlay .overlay-inner .social a{margin-right:0; margin-bottom: 10px;} 
.nav-overlay .overlay-inner .wrap-menu > div ul li a:hover,
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li > a:hover{ color:#DF1A22;  }

.wrap-social{margin-top:40px;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li.t3-menu a{
 font-family: 'Lato', sans-serif;
 color: #61646c;
 font-weight: 400;
 font-size: 16px;
 line-height: 1.25rem;
 letter-spacing: 0;
 text-decoration: none; 
 margin-bottom: 0; 
 margin-top:0;
 display:flex;
 flex-direction:row;
 margin-bottom: 6px;
 margin-top:6px;
}

.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li.t3-menu a:hover{color:#DF1A22;}
.nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li.t3-menu.current-menu-item a{color:#0b141f;}








.nav-overlay .overlay-inner .wrap-menu > div ul > li .sub-menu{position:absolute; top:0; right:0; display:none;} 
.nav-overlay .overlay-inner .wrap-menu > div ul > li .sub-menu > li{width:400px;}


.nav-overlay .overlay-inner .sub-menu.secondary-menu-header{margin-top:25px!important; display:block!important; visibility: initial!important; opacity:1!important;}
.nav-overlay .overlay-inner .sub-menu.secondary-menu-header > li a{
  font-size: 12px!important;
  line-height: 16px!important;
  font-weight: 400!important;
  text-transform: uppercase!important;
  letter-spacing: 0.8px!important;
  text-decoration: none!important;
  color: #7F8694!important;
  font-weight: 600!important;
  font-family: 'Lato', sans-serif!important;
}




/**********************************************************************/
/*** Hamburger
/**********************************************************************/

.nav-overlay .wrap-toggle{ 
  height: 120px;
  right:70px;  
  top: 0;
  display: flex; 
  align-items: center;
  position: absolute;
  z-index:100;

}
.menu-toggle {
  width:26px;
  height: 26px;  
  position: relative;
  cursor: pointer; 
  transition: .25s ease-in-out;
  box-sizing: border-box;
  overflow:hidden;
}

.menu-toggle *{
  transition: .25s ease-in-out;
  box-sizing: border-box;
} 

.menu-toggle span {
  display: block;
  background: #fff;
  border-radius: 2px;
} 

.nav-overlay .menu-toggle span{background-color:#df1a22;}


.menu-toggle #hamburger {
  position: absolute;
  height: 100%;
  width: 100%;
}
.menu-toggle #hamburger span {
  width: 26px;
  height: 2px;
  position: relative;
  top: -1px;
  left:0;
  margin: 5px 0;
}
.menu-toggle #hamburger span:nth-child(2){ margin: 6px 0;}
.menu-toggle #hamburger span:nth-child(1){
  transition-delay: .5s;
}
.menu-toggle #hamburger span:nth-child(2) {
  transition-delay: .625s;
}
.menu-toggle #hamburger span:nth-child(3) {
  transition-delay: .75s;
}
.menu-toggle #cross {
  position: absolute;
  height: 100%;
  width: 100%;
  transform: rotate(45deg);
}
.menu-toggle #cross span:nth-child(1) {
  height: 0%;
  width: 2px;
  position: absolute;
  top:0;
  left: 12px;
  transition-delay: 0s;
}
.menu-toggle #cross span:nth-child(2) {
  width: 0%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 12px;
  transition-delay: .25s;
}

.menu-toggle.open #hamburger span {
  width: 0%;
}
.menu-toggle.open #hamburger span:nth-child(1) {
  transition-delay: 0s;
}
.menu-toggle.open #hamburger span:nth-child(2) {
  transition-delay: .125s;
}
.menu-toggle.open #hamburger span:nth-child(3) {
  transition-delay: .25s;
}
.menu-toggle.open #cross span:nth-child(1) {
  height: 100%;
  transition-delay: .625s;
}
.menu-toggle.open #cross span:nth-child(2) {
  width: 100%;
  transition-delay: .375s;
}
















.nav-overlay{
  position: fixed;  
  top: 0;
  left:0; 
  height: 100%;
  z-index: 1000000000;  
  overflow:hidden!important;
}   

.nav-overlay:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:auto;
  background-color:#fff;
  top:0;
  left:0;
  bottom:0;
  width:550px;
}




.overlay-inner{ height: 100%; width:100%; display:flex; align-items: center; padding-top:100px;}
.nav-overlay .wrapper{  position:relative; width:initial;   width:950px;}

.nav-overlay .wrap-toggle{position:fixed; top:0; left:0;  height:100px; display: flex; justify-content: flex-start; align-items: center; z-index:2;}
.nav-overlay .wrap-toggle .menu-toggle{background-color:#fff; position:relative; left:20px;}
.nav-overlay .menu-toggle span{background-color:#0B141F;} 
.nav-overlay .wrap-menu{position:relative; z-index:1; padding-bottom:40px; flex:1;}
.nav-overlay .menu-principal-container{ height:100%; z-index:2; position:relative; } 
.nav-overlay .menu-principal-container ul li:before{display:none!important;}
.nav-overlay .menu-principal-container ul{padding:0 0 0 0; margin:0 0 0 0;}
.nav-overlay .menu-principal-container ul li{padding:0 0 0 0; margin:0 0 0 0; position:relative;}
.nav-overlay .menu-principal-container ul li ul{padding:0 0 0 0; margin:0 0 0 0; }
.nav-overlay .menu-principal-container ul li ul li{padding:0 0 0 0; margin:0 0 0 0;}
.nav-overlay .menu-principal-container ul li{text-decoration: none;}
.nav-overlay .menu-principal-container ul li a{text-decoration: none;}
.nav-overlay .menu-principal-container > ul > li > a{
  font-size:34px; 
  line-height:1.2; 
  color:#fff; 
  font-weight: 700; 
  font-family: 'Poppins', sans-serif;
  padding:6px 0;
  display: flex;
  align-items: center;
  padding-right:26px;
  position:relative;
  display:inline-flex;
}



.nav-overlay .menu-principal-container > ul > li.current-menu-item > a,
.nav-overlay .menu-principal-container > ul > li.current-menu-ancestor > a,
.nav-overlay .menu-principal-container > ul > li.current_page_ancestor > a,
.nav-overlay .menu-principal-container > ul > li.current_page_parent > a{color:#40a044; font-weight:700;}
.nav-overlay .menu-principal-container > ul > li > ul{padding-bottom:30px; } 
.nav-overlay .menu-principal-container > ul > li > ul > li > a{color:#fff; font-weight:400; font-size:18px;line-height:1.5; padding:3px 0; display: flex; align-items: flex-start; padding-left:14px;}



.nav-overlay .wrap-footer{padding-bottom:40px; display:flex; flex-direction: column;   position:relative; z-index:2; padding-left:80px; width:550px;}
.nav-overlay .wrap-footer .donate{flex:1;}








@media screen and (max-width: 1600px){ 
  header .wrapper{padding-left:20px; padding-right: 20px;} 
  header .wrapper .logo, header .wrapper .donate{min-width:initial;}
  header .menu-principal-container > ul{justify-content: flex-start;}
  header .menu-principal-container { padding-left: 30px; padding-right:30px; }
  body:before{ width: 360px;  height: 297px;  background-position: top center; background-size: 100% auto; right: 0; top: -15px; }
  header .menu-principal-container > ul > li{margin-left:20px;}
  header .wrapper .logo a img{display: flex; width: 100%; max-width: 300px;}
}  

@media screen and (max-width: 1300px){ 
  header .wrapper{height:100px;}
  header .menu-principal-container{display:none;}
  header .wrapper .logo{flex:1;}
  body:before{  width: 389px; height: 297px; background-position: center; background-size: cover; right: 0; top: -20px; }
  header .wrap-toggle{display:initial;}
  header .wrapper .donate{display: flex; flex-direction: row; align-items: center;}

}
@media screen and (max-width:900px){
  .nav-overlay{background-color:#fff!important;}
  .nav-overlay,
  .nav-overlay .wrapper{width:100%;}
  .nav-overlay .overlay-inner .wrap-menu > div ul > li .sub-menu{position:initial;}
  .nav-overlay .overlay-inner .wrap-menu > div > ul > li{width:initial; padding:0 20px;}
  .nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li > a{padding:0 20px;}
  .nav-overlay .wrap-footer{width:100%;}
  .nav-overlay:before{display:none!important;}
  .nav-overlay .overlay-inner .wrap-menu > div ul > li .sub-menu > li{width:100%; text-align: left;}
  .nav-overlay .overlay-inner .wrap-menu > div ul > li > ul > li.t3-menu a{justify-content: flex-start;}
  .nav-overlay .wrap-footer{padding-left:20px; padding-right:20px;}
  .nav-overlay .wrap-toggle{background-color:#fff!important; right:0;}
}

@media screen and (max-width: 675px){
  .nav-overlay:before{max-width:400px;}
  header .wrapper .donate .cta{display:none;}
  body:before {
    width: 220px;
    height: 210px;
    background-position: left top;
    background-size: auto 100%;
    right: 0;
    top: -20px;
  }
}
@media screen and (max-width: 575px){ 
  header .wrapper{height:100px;}
  
  header .wrapper .logo{  top:4px;}
  body:before {
    width: 270px;
    height: 250px;
    background-position: left bottom;
    background-size: auto 100%;
    right: 0;
    top: 50px;
  }
  .nav-overlay .menu-principal-container > ul{display:flex; flex-wrap:wrap; justify-content: center; flex-direction: column}
  .nav-overlay .menu-principal-container > ul > li > ul > li{text-align: center;}
  .nav-overlay .menu-principal-container > ul > li > ul > li > a{ padding-left:0; justify-content: center; align-items: center;}

  .nav-overlay .menu-principal-container ul li{text-align: center;} 
  .nav-overlay .menu-principal-container > ul > li > a{padding-left:26px;}
  .nav-overlay .wrap-menu{padding-bottom:40px;}
} 

@media screen and (max-width:450px){ 
  .nav-overlay .wrap-toggle{ left:0;width:100%; justify-content:  flex-end;}
  .nav-overlay .wrap-toggle .menu-toggle{left:initial; right:20px;}
}