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



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;

}





body, html {

  height: 100%;

}



a {
    color: #539636;
    text-decoration: none;
}



img {

  max-width: 100%;

}



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



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;

}



.cd-scroll-down {

  position: absolute;

  left: 50%;

  right: auto;

  -webkit-transform: translateX(-50%);

  -moz-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  transform: translateX(-50%);

  bottom: 20px;

  width: 38px;

  height: 44px;

  background: url("../img/cd-arrow-bottom.svg") no-repeat center center;

}



/* No Touch devices */

.cd-nav-trigger {

  display: none;

}



#cd-vertical-nav ul{

    list-style: none;

    padding: 0;

}

#cd-vertical-nav {

  position: fixed;

  right: -78px;

  top: 50%;

  bottom: auto;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  z-index: 4;

}

#cd-vertical-nav li {

  text-align: right;

}

#cd-vertical-nav a {

  display: inline-block;

  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  width: 100%;

}

#cd-vertical-nav a:after {

  content: "";

  display: table;

  clear: both;

}

#cd-vertical-nav a span {

  float: right;

  display: inline-block;

  -webkit-transform: scale(0.6);

  -moz-transform: scale(0.6);

  -ms-transform: scale(0.6);

  -o-transform: scale(0.6);

  transform: scale(0.6);

}

#cd-vertical-nav a:hover span,

#cd-vertical-nav a.is-selected .cd-dot {

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

}

#cd-vertical-nav a:hover .cd-label {

  opacity: 1;

  left: -100%;

  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

  -moz-transition: -moz-transform 0.2s, opacity 0.2s;

  transition: transform 0.2s, opacity 0.2s;

}



#cd-vertical-nav .cd-dot {

  position: relative;

  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/

  top: 8px;

  right: calc(100% - 15px);

  height: 12px;

  width: 12px;

  border-radius: 50%;

  background-color: #995581;

  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;

  -moz-transition: -moz-transform 0.2s, background-color 0.5s;

  transition: transform 0.2s, background-color 0.5s;

  -webkit-transform-origin: 50% 50%;

  -moz-transform-origin: 50% 50%;

  -ms-transform-origin: 50% 50%;

  -o-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

}

#cd-vertical-nav .cd-label {

    position: relative;

  margin-right: 10px;

  padding: 4px 14px;

  color: white;

  background: rgba(0, 0, 0, 0.53);

  font-size: 10px;

  border-radius: 20px;

  text-transform: uppercase;

  font-weight: 600;

  opacity: 0;

  -webkit-transform-origin: 100% 50%;

  -moz-transform-origin: 100% 50%;

  -ms-transform-origin: 100% 50%;

  -o-transform-origin: 100% 50%;

  transform-origin: 100% 50%;

}





/* Touch devices */

.touch .cd-nav-trigger {

  display: block;

  z-index: 5;

  position: fixed;

  bottom: 30px;

  right: 5%;

  height: 44px;

  width: 44px;

  border-radius: 0.25em;

  background: rgba(255, 255, 255, 0.9);

}

.touch .cd-nav-trigger span {

  position: absolute;

  height: 4px;

  width: 4px;

  background-color: #3e3947;

  border-radius: 50%;

  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%);

}

.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {

  content: '';

  height: 100%;

  width: 100%;

  position: absolute;

  left: 0;

  background-color: inherit;

  border-radius: inherit;

}

.touch .cd-nav-trigger span::before {

  top: -9px;

}

.touch .cd-nav-trigger span::after {

  bottom: -9px;

}



.touch #cd-vertical-nav {

  position: fixed;

  z-index: 4;

  right: 5%;

  bottom: 30px;

  width: 90%;

  max-width: 400px;

  max-height: 90%;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;

  -webkit-transform-origin: right bottom;

  -moz-transform-origin: right bottom;

  -ms-transform-origin: right bottom;

  -o-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: scale(0);

  -moz-transform: scale(0);

  -ms-transform: scale(0);

  -o-transform: scale(0);

  transform: scale(0);

  -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;

  border-radius: 0.25em;

  background-color: rgba(255, 255, 255, 0.9);

}

.touch #cd-vertical-nav a {

  display: block;

  padding: 1em;

  border-bottom: 1px solid rgba(62, 57, 71, 0.1);

}

.touch #cd-vertical-nav a span:first-child {

  display: none;

}

.touch #cd-vertical-nav a.is-selected span:last-child {

  color: #d88683;

}

.touch #cd-vertical-nav.open {

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

}

.touch #cd-vertical-nav.open + .cd-nav-trigger {

  background-color: transparent;

}

.touch #cd-vertical-nav.open + .cd-nav-trigger span {

  background-color: rgba(62, 57, 71, 0);

}

.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {

  background-color: #3e3947;

  height: 3px;

  width: 20px;

  border-radius: 0;

  left: -8px;

}

.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

  top: 1px;

}

.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {

  -webkit-transform: rotate(135deg);

  -moz-transform: rotate(135deg);

  -ms-transform: rotate(135deg);

  -o-transform: rotate(135deg);

  transform: rotate(135deg);

  bottom: 0;

}

.touch #cd-vertical-nav li:last-child a {

  border-bottom: none;

}



@media only screen and (min-width: 768px) {

  .touch .cd-nav-trigger, .touch #cd-vertical-nav {

    bottom: 40px;

  }

}