.filter-nav-trigger {
  position: fixed;
  bottom: 25px;
  left: 25px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 12;
  background: transparent;
  border: 2px solid #FFF;
  text-align: center;
  z-index: 12;
}
a.filter-nav-trigger:hover,
a.filter-nav-trigger:focus {
  position: fixed;
}

#filter-nav a:before {
  width: 0;
}
#filter-nav {
  z-index: 11;
  position: relative;
}


.filter-nav-trigger span {
  line-height: 40px;
  color: #FFF;
  font-size: 20px;
}

.filter-nav-trigger:before {
  content: none;
}

#filter-nav ul {
  /* mobile first */
  list-style: none;
  position: fixed;
  width: 90%;
  max-width: 240px;
  left: 25px;
  bottom: 3px;
  background: rgba(39, 38, 43, 0.8);
  visibility: hidden;
  /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
  overflow: hidden;
  z-index: 9;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#filter-nav ul li {
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-left: 60px;
}
#filter-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
#filter-nav ul.is-visible li:nth-child(1) {
  /* list items animation */
  -webkit-animation: cd-slide-in 0.2s;
  -moz-animation: cd-slide-in 0.2s;
  animation: cd-slide-in 0.2s;
}
#filter-nav ul.is-visible li:nth-child(2) {
  -webkit-animation: cd-slide-in 0.3s;
  -moz-animation: cd-slide-in 0.3s;
  animation: cd-slide-in 0.3s;
}
#filter-nav ul.is-visible li:nth-child(3) {
  -webkit-animation: cd-slide-in 0.4s;
  -moz-animation: cd-slide-in 0.4s;
  animation: cd-slide-in 0.4s;
}
#filter-nav ul.is-visible li:nth-child(4) {
  -webkit-animation: cd-slide-in 0.5s;
  -moz-animation: cd-slide-in 0.5s;
  animation: cd-slide-in 0.5s;
}
#filter-nav ul.is-visible li:nth-child(5) {
  -webkit-animation: cd-slide-in 0.6s;
  -moz-animation: cd-slide-in 0.6s;
  animation: cd-slide-in 0.6s;
}
#filter-nav li a {
    display: block;
    padding: 2px;
}
@media only screen and (max-width: 1170px) {
#filter-nav ul li {
  padding-left: 17px !important;
}
#filter-nav li a {
  padding: 10px 0 10px 0;
  color: rgba(255, 255, 255, 0.6);
}
#filter-main-nav li:before{
  font-size: 11px;
  line-height: 20px;
}
  li.filter-title {
    line-height: 40px;
  }
}

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

  #filter-main-nav li:before{
    font-size: 11px;
    line-height: 20px;
  }
  #filter-nav li a {
    opacity: 1;
    padding: 10px 40px 10px 0;
    font-size: 18px;
    color: rgba(255,255,255,0.6);
  }
  #filter-nav li:hover a {
    color: #00bd9b;
  }
  #filter-nav.is-fixed ul {
    /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
    position: fixed;
    width: 90%;
    max-width: 400px;
    bottom: 20px;
    top: auto;
    background: white;
    visibility: hidden;
    box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  #filter-nav.is-fixed ul li {
    display: block;
  }
  #filter-nav.is-fixed ul li a {
    padding: 1.6em;
    margin-left: 0;
    border-bottom: 1px solid #eff2f6;
  }
  #filter-nav ul.has-transitions {
    /* this class is used to bring back transitions when the navigation moves at the bottom right */
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  #filter-nav ul.is-visible {
    /* this class is used to bring back the navigation animation - as on touch devices */
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
    transition: transform 0.3s, visibility 0s 0s;
    padding-left: 0; 
  }
  #filter-nav ul.is-hidden {
    /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
}


/* -------------------------- */
/* Jam 3 */
/* -------------------------- */
.intro-effect-jam3:not(.notrans) header {
  -webkit-transition-property: all;
  transition-property: all;
}


.intro-effect-jam3:not(.notrans) .header p {
  -webkit-transition-property: color, opacity, -webkit-transform;
  transition-property: color, opacity, transform;
}

.intro-effect-jam3:not(.notrans) .content > div {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
}

.intro-effect-jam3:not(.notrans) header,
.intro-effect-jam3:not(.notrans) .header h1,
.intro-effect-jam3:not(.notrans) .codrops-top a,
.intro-effect-jam3:not(.notrans) .codrops-demos a,
.intro-effect-jam3:not(.notrans) .content > div {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.intro-effect-jam3:not(.notrans) .header p,
.intro-effect-jam3:not(.notrans) .header p.subline,
.intro-effect-jam3:not(.notrans) .content > div {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.intro-effect-jam3.modify:not(.notrans) .header p,
.intro-effect-jam3.modify:not(.notrans) .header p.subline,
.intro-effect-jam3.modify:not(.notrans) .content > div {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.intro-effect-jam3 header {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #514753;
}

.intro-effect-jam3.modify header {
  height: 100px !important;
  min-height: inherit;
}

.intro-effect-jam3.modify .header h1 {
  color: #FFF;
  font-size: 45px;
}

.intro-effect-jam3 .header p {
  color: #514753;
  opacity: 1;
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
}

.intro-effect-jam3.modify .header p {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.intro-effect-jam3 .header,
.intro-effect-jam3 .content {
  background: #fff;
}

.homepage .intro-effect-jam3.modify .title,
.homepage .intro-effect-jam3 .title {
  display: none;
  color: #FFF;
  text-align: left; 
  width: auto;
  max-width: 100%;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  }

.homepage .intro-effect-jam3.modify .title {
  left: 0;
  -webkit-transform: translateX(0%) translateY(-50%); 
  transform: translateX(0%) translateY(-50%);
}


.intro-effect-jam3.modify .top {
  z-index: 13;
}


/* New effects */

/* Push */

body.homepage.index-home.st-effect-3 #container,
body.homepage.index-home.st-effect-3 .st-menu.st-effect-1 {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

body.homepage.index-home.st-effect-3.menu-open #container {
    -webkit-transform: translate(-265px, 0);
    transform: translate(-265px, 0);
}
body.homepage.index-home.st-effect-3.menu-open .st-menu.st-effect-1 {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.st-effect-3 a#trigger-menu {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

/* Since WP*/
.st-effect-3 .st-effect-1.st-menu {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.st-effect-3 .st-effect-1.st-menu::after {
    display: none;
}

/* Reveal */

.st-effect-2.menu-open div#container {
  transform: translate(-265px, 0px);
  -webkit-transform: translate(-265px, 0px);
}
.st-effect-2 div#container {
  z-index: 10;
  position: relative;
  -webkit-transition-duration: 1.2s;
  transition-duration: 1.2s;
}
.st-effect-2 .st-container.st-menu-open,
.st-effect-2 .st-container {
  z-index: 1;
}
.st-effect-2 .st-effect-1.st-menu {
  transform: initial;
  z-index: 1;
}

/* Rotate Pusher */

.st-effect-6.menu-open div#container {
  -webkit-transform: translate3d(-202px, 0px, 0px) rotateY(-25deg);
  transform: translate3d(-202px, 0px, 0px) rotateY(-25deg);
}
.st-effect-6 div#container {
  -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
  transform: translate3d(0px, 0px, 0px) rotateY(0deg);
}
.st-effect-6 div#container {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.st-effect-6 .st-effect-1.st-menu {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.st-effect-6.menu-open .st-effect-1.st-menu {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.st-effect-2 div#container.modify {
  z-index: 9;
}
li.filter-title {
  font-size: 25px;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 5px;
}
#filter-main-nav li:before {
  content: "\f111";
  font-family: 'FontAwesome';
  display: block;
  font-size: 14px;
  position: absolute;
  left: 15px;
  line-height: 45px;
}
#filter-main-nav li.filter-title:before {
  content: "";
}
#filter-main-nav li:hover:before {
  color: #00bd9b;
}
.gallery-open div#filter-nav {
  display: none;
}