/* -------------------------------- 
Modules - reusable parts of our design
-------------------------------- */
.cd-img-replace { display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap;}

.overflow-hidden {overflow: hidden;}

/* -------------------------------- 
Main components 
-------------------------------- */
.cd-main-content-menu {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform;
  -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
.cd-main-content-menu.lateral-menu-is-open {
  /* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
  -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px);
  -o-transform: translateX(260px); transform: translateX(260px);
}

.cd-main-content-menu.lateral-menu-is-open:before {
	content:''; position: fixed; top:0; left:0; background: rgba(0,0,0,0.3); width:100%; height:100%; z-index:9999; cursor:pointer;
}

.header {position: relative; height: 56px; width: auto; display:table; padding:0; margin:0; z-index:999;}
@media only screen and (min-width: 768px) {  
.cd-main-content-menu.lateral-menu-is-open {
	/* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
	-webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px);
	-o-transform: translateX(300px); transform: translateX(300px);
} 
.header {height: 56px; width: auto;}
}

#cd-menu-trigger {
  position: absolute; display:table; height: 56px; width: 56px; line-height:56px; cursor:pointer; z-index:999;
}
#cd-menu-trigger .cd-menu-text {
  height: 56px; line-height:56px; text-transform: uppercase; color: #ffffff; display: none;
  font-size:20px; font-weight:normal; padding:0 0 0 40px; position:relative;
}
#cd-menu-trigger .cd-menu-icon { 
  /* this span is the central line in the menu menu */
  display: inline-block; position: absolute; line-height:56px; height:56px; z-index:999999;
  left: 0; top: 50%; bottom: auto; right: auto; width: 24px; height: 3px; background-color: #ffffff;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after {
  content: ''; width: 100%; height: 100%; position: absolute; background-color: inherit; left: 0;
}
#cd-menu-trigger .cd-menu-icon::before { bottom: 9px;}
#cd-menu-trigger .cd-menu-icon::after { top: 9px;}
#cd-menu-trigger.is-clicked .cd-menu-icon { background-color: rgba(255, 255, 255, 0);}
#cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after {background-color: #ffffff;}
#cd-menu-trigger.is-clicked .cd-menu-icon::before {
  bottom: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
#cd-menu-trigger.is-clicked .cd-menu-icon::after {
  top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
@media only screen and (min-width: 768px) {
  #cd-menu-trigger {width: auto;}
  #cd-menu-trigger .cd-menu-text {display: inline-block; line-height: 56px; height:56px;}
  #cd-menu-trigger .cd-menu-icon {
    left: 0; line-height: 56px;
  }
}

#cd-lateral-nav {
  position: fixed; height: 100%; left: 0; top: 0; visibility: hidden; list-style:none;
  /* the secondary navigation is covered by the main element */
  z-index: 999; width: 260px; background-color: #048a3a !important; overflow-y: auto;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
  transition: transform .4s 0s, visibility 0s .4s;
  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px);
}
#cd-lateral-nav .cd-navigation { margin: 10px 0 16px; list-style:none; position:relative; padding:0; border-top: 1px #006027 solid;}
#cd-lateral-nav .sub-menu {padding: 0 0 10px 35px; display: none; list-style:none; overflow:hidden;}
#cd-lateral-nav .cd-navigation > li { display:table; position:relative; margin:0; padding:0; width:100%; border-bottom: 1px #006027 solid;}
#cd-lateral-nav .cd-navigation > li > a {display: block; width: 100%; line-height: 1.4; font-size:16px; padding: 12px 20px 8px 20px; color: #ffffff; text-decoration:none; margin:0; font-weight:normal;}
#cd-lateral-nav .cd-navigation > li > a.menuopen {padding: 12px 40px 8px 20px !important;}
#cd-lateral-nav .cd-navigation > li:hover > a {color: #9bff80;}
#cd-lateral-nav .cd-navigation > li > ul { position:relative; margin:0 !important; padding:0 !important; width:100%;}
#cd-lateral-nav .cd-navigation > li > ul > li { display:table; position:relative; margin:0 !important; padding:0 !important; width:100%; border-top: 1px #005321 solid; background: #007630;}
#cd-lateral-nav .cd-navigation > li > ul > li > a {display: block; width: 100%; line-height: 1.4; font-size:16px; padding: 12px 20px 8px 30px; color: #ffffff; text-decoration:none; position:relative; margin:0;}
#cd-lateral-nav .cd-navigation > li > ul > li > a.menuopen {padding: 12px 45px 8px 30px !important;}
#cd-lateral-nav .cd-navigation > li > ul > li:hover > a {color: #9bff80;}
#cd-lateral-nav .cd-navigation > li > ul > li > ul { position:relative; margin:0; padding:0 0 0 0; width:100%;}
#cd-lateral-nav .cd-navigation > li > ul > li > ul > li { display:table; position:relative; margin:0; padding:0; width:100%; border-top: 1px #003a17 solid; background: #006428;}
#cd-lateral-nav .cd-navigation > li > ul > li > ul > li > a {display: block; width: 100%; line-height: 1.4; font-size:16px; padding: 12px 20px 8px 40px !important; color: #ffffff; text-decoration:none; position:relative; margin:0;}
#cd-lateral-nav .cd-navigation > li > ul > li > ul > li:hover > a{color: #9bff80;}

@media only screen and (min-width: 768px) {
#cd-lateral-nav {
  position: fixed; height: 100%; left: 0; top: 0; visibility: hidden; list-style:none;
  /* the secondary navigation is covered by the main element */
  z-index: 999; width: 300px; background-color: #0e753b; overflow-y: auto;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
  transition: transform .4s 0s, visibility 0s .4s;
  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px);
}
  #cd-lateral-nav .cd-navigation {margin: 20px 0;}
}
#cd-lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0);
  -o-transform: translateX(0); transform: translateX(0); visibility: visible;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;
  /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling: touch;
}

/* style menu items which have a submenu  */
#cd-lateral-nav .item-has-children {position: relative;}

#cd-lateral-nav .item-has-children a {position: relative; display:block; width:100%;}

#cd-lateral-nav .item-has-children a.mais {
	width: auto; display: auto !important; position: absolute !important; top:5px; right:0; padding: 0; margin: 0; cursor:pointer; width:36px; height:36px; line-height:36px; text-align: center;
}
#cd-lateral-nav .item-has-children a:hover.mais { background: none !important;}

#cd-lateral-nav .item-has-children i {
	position: absolute; top:0; right:0; cursor:pointer; font-size:18px; width:36px; height:36px; line-height:36px;
	z-index:999; text-align:center; text-align: center;
	-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
	-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;
}
#cd-lateral-nav .item-has-children i.open-ic {
	position: absolute; top:-1px; right:0; cursor:pointer; font-size:18px; width:36px; height:36px; line-height:36px; 
	z-index:999; text-align:center;
	-webkit-transform: translateX(-50%) rotate(135deg); -moz-transform: translateX(-50%) rotate(135deg);
	-ms-transform: translateX(-50%) rotate(135deg); -o-transform: translateX(-50%) rotate(135deg);
	transform: translateX(-50%) rotate(135deg);
	-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;
	transition-property: transform; -webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s; transition-duration: 0.2s;
}

#cd-lateral-nav .item-has-children i .item-has-children i {
	position: absolute; top:-2px; right:0; cursor:pointer; font-size:18px; width:30px; height:30px; line-height:30px; 
	z-index:999; text-align:center;
	-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);
	-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;
}
#cd-lateral-nav .item-has-children i.open-ic .item-has-children i.open-ic {
	position: absolute; top:-2px; right:0; cursor:pointer; font-size:18px; width:30px; height:30px; line-height:30px; 
	z-index:999; text-align:center;
	-webkit-transform: translateX(-50%) rotate(135deg); -moz-transform: translateX(-50%) rotate(135deg);
	-ms-transform: translateX(-50%) rotate(135deg); -o-transform: translateX(-50%) rotate(135deg);
	transform: translateX(-50%) rotate(135deg);
	-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;
	transition-property: transform; -webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s; transition-duration: 0.2s;
}
