/* -------------------------------- 

Primary style

-------------------------------- */




html * {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html,
body {
 /* you need to set this to assign to the main element a min height of 100% */
 height: 100%;
}

body {
 /*font-size: 100%;
 font-family: "Titillium Web", sans-serif;
 background-color: #f5f4e9;*/
 color: #4e6361;
}

a {
 color: #6cac70;
 text-decoration: none;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */


.cd-img-replace {
 /* replace text with a background-image */
 display: inline-block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
}

.overflow-hidden {
 overflow: hidden;
}

/* -------------------------------- 

Main components 

-------------------------------- */


.cd-main-content {
 /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
 min-height: 100%;
 position: relative;
/* background-color: #f5f4e9;*/
 background-color: #fff;
 z-index: 2;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -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.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(-250px);
 -moz-transform: translateX(-250px);
 -ms-transform: translateX(-250px);
 -o-transform: translateX(-250px);
 transform: translateX(-250px);
}

header {
 position: relative;
 height: 50px;
 width: 100%;
 background: #4e6361;
}
@media only screen and (min-width: 768px) {

header {
 height: 70px;
}
}

#cd-logo {
 display: block;
 float: left;
 margin: 12px 0 0 20px;
}

#cd-logo img {
 display: block;
}
@media only screen and (min-width: 768px) {

#cd-logo {
 margin: 22px 0 0 30px;
}
}

#cd-top-nav {
 position: absolute;
 top: 0;
 right: 120px;
 height: 100%;
 display: none;
}

#cd-top-nav ul {
 height: 100%;
 padding-top: 18px;
}

#cd-top-nav li {
 display: inline-block;
 margin-right: 1em;
}

#cd-top-nav a {
 display: inline-block;
 padding: .5em;
 color: #242e30;
 text-transform: uppercase;
 font-weight: 600;
}

#cd-top-nav a.current {
 background-color: #242e30;
}

.no-touch #cd-top-nav a:hover {
 color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 768px) {

#cd-top-nav {
 display: block;
}
}
@media only screen and (max-width: 1180px) {
#cd-menu-trigger {
 position: absolute;
 right: 0;
 top: 0;
 height: 100%;
 width: 50px;
 padding-left: 1.25em;
 height: 65px;
 z-index: 9999999;
}
}

#cd-menu-trigger .cd-menu-text {
 height: 100%;
 text-transform: uppercase;
 color: #222;
 font-weight: 600;
 display: none;
}

#cd-menu-trigger .cd-menu-icon {
 /* this span is the central line in the menu menu */
 display: inline-block;
 position: absolute;
 /*left: 50%;*/
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 width: 18px;
 height: 2px;
 background-color: #222;/* these are the upper and lower lines in the menu menu */
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

#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;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
}

#cd-menu-trigger .cd-menu-icon::before {
 bottom: 5px;
}

#cd-menu-trigger .cd-menu-icon::after {
 top: 5px;
}

#cd-menu-trigger.is-clicked .cd-menu-icon {
    background-color: rgba(255, 255, 255, 0);
    right: 269px;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

#cd-menu-trigger.is-clicked .cd-menu-icon::before,
#cd-menu-trigger.is-clicked .cd-menu-icon::after {
 background-color: #fff;
}

#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 (max-width: 1180px) {

    #cd-menu-trigger {
        /* width: 112px;
    padding-left: 1.25em;
    */
    width: 65px;
    padding-left: 0;
    height: 65px;
    }


#cd-menu-trigger .cd-menu-text {
 display: inline-block;
 display: none;
 line-height: 70px;
}

#cd-menu-trigger .cd-menu-icon {
 left: auto;
 right: 1.25em;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
}
}

#cd-lateral-nav {
 position: fixed;
 height: 100%;
 right: 0;
 top: 0;
 /* the secondary navigation is covered by the main element */
 z-index: 1;
 width: 250px;
 background-color: #242e30;
 background-color: #fff;
 overflow-y: auto;
 /* smooth the scrolling on touch devices - webkit browsers */
 -webkit-overflow-scrolling: touch;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -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;
 /* this creates the subtle slide in animation of the navigation */
 -webkit-transform: translateX(80px);
 -moz-transform: translateX(80px);
 -ms-transform: translateX(80px);
 -o-transform: translateX(80px);
 transform: translateX(80px);
}

#cd-lateral-nav .cd-navigation {
 /*margin: 10px 0 16px 15px;*/
 margin: 20px 10px 20px 20px;
 padding: 0;
}

#cd-lateral-nav .sub-menu {
 padding: 0 10px 20px 15px;
 display: none;
}

#cd-lateral-nav a {
 display: block;
 line-height: 2em;
 padding: 0 16px 0 32px;
 color: #d6dbdc;
}

#cd-lateral-nav .sub-menu li a {
 color: #676767;
}

#cd-lateral-nav a.current {
 background-color: #eee;
 color: red;
}2
.no-touch #cd-lateral-nav a:hover {
 color: green;
}
@media only screen and (min-width: 768px) {

    #cd-lateral-nav .cd-navigation {
     /*margin: 20px 0;*/
     margin: 20px 0 20px 14px;
    }
}
.cd-main-content div.mobile-overlay {
    width: 100%; height: 100vh; background: rgba(0,0,0,0.45);position: absolute; z-index:999999; -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; opacity: 0; pointer-events: none;
    -webkit-box-shadow: inset -41px -2px 17px -32px rgba(0,0,0,0.4);
-moz-box-shadow: inset -41px -2px 17px -32px rgba(0,0,0,0.2);
box-shadow: inset -41px -2px 17px -32px rgba(0,0,0,0.2);
}
#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);
 /*
 -webkit-box-shadow: -16px 9px 80px 1px rgba(0,0,0,0.63);
-moz-box-shadow: -16px 9px 80px 1px rgba(0,0,0,0.63);
box-shadow: -16px 9px 80px 1px rgba(0,0,0,0.63);
*/
/*z-index: 99;*/
}
.cd-main-content.lateral-menu-is-open div.mobile-overlay {
-moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 1;
    pointer-events: none;
}

/* style menu items which have a submenu  */


#cd-lateral-nav .menu-item-has-children > a {
 position: relative;
/ /*text-transform: uppercase;*/
 font-weight: 600;/* this is the right arrow to show that the item has a submenu  */
}


#cd-lateral-nav .menu-item-has-children > a::after {
 content: '';
 display: block;
 height: 11px;
 width: 8px;
 position: absolute;
 top: 50%;
 bottom: auto;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 right: 1em;
 background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-arrow-sec-exp-nav.svg") no-repeat center center;
 background-size: 8px 11px;
 -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 .menu-item-has-children > a.submenu-open::after {
 -webkit-transform: translateY(-50%) rotate(90deg);
 -moz-transform: translateY(-50%) rotate(90deg);
 -ms-transform: translateY(-50%) rotate(90deg);
 -o-transform: translateY(-50%) rotate(90deg);
 transform: translateY(-50%) rotate(90deg);
}

#cd-lateral-nav .socials {
 *zoom: 1;
 padding: 0 32px;
}

#cd-lateral-nav .socials:before,
#cd-lateral-nav .socials:after {
 content: " ";
 display: table;
}

#cd-lateral-nav .socials:after {
 clear: both;
}

#cd-lateral-nav .socials a {
 height: 32px;
 width: 32px;
 float: left;
 padding: 0;
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-socials.svg");
 background-repeat: no-repeat;
 background-size: 128px 64px;
 background-color: #FFF;
 margin-right: .5em;
 border-radius: 0.25em;
}

#cd-lateral-nav .socials a.cd-twitter {
 background-position: 0 0;
}

#cd-lateral-nav .socials a.cd-github {
 background-position: -32px 0;
}

#cd-lateral-nav .socials a.cd-facebook {
 background-position: -64px 0;
}

#cd-lateral-nav .socials a.cd-google {
 background-position: -96px 0;
}

.no-touch #cd-lateral-nav .socials a:hover {
 background-color: #4e6361;
}

.no-touch #cd-lateral-nav .socials a:hover.cd-twitter {
 background-position: 0 -32px;
}

.no-touch #cd-lateral-nav .socials a:hover.cd-github {
 background-position: -32px -32px;
}

.no-touch #cd-lateral-nav .socials a:hover.cd-facebook {
 background-position: -64px -32px;
}

.no-touch #cd-lateral-nav .socials a:hover.cd-google {
 background-position: -96px -32px;
}


/*  my css */

#cd-lateral-nav {
    z-index: 1;
 transition: z-index 0.5s step-end, opacity 0.5s linear;
}


#cd-lateral-nav ul li {
 list-style: none;
 padding: 0;
 margin: 0;
 /*border-bottom: 1px solid #333;*/
 
}

#cd-lateral-nav ul li a {
 display: block;
 line-height: 20px;
 font-size: 16px;
 padding: 8px 16px 8px 0;
 color: var(--main-website-color) !important;
}
#cd-lateral-nav ul li a:visited, #cd-lateral-nav ul li a:active  {
 color: var(--main-website-hover-color) !important;
}

#cd-lateral-nav .sub-menu {
/*padding: 0 10px 20px 0;*/
    padding: 0 10px 12px 17px;
display: none;
margin-left: 0;
}