@charset "UTF-8";

/*Style for jQuery Rain Menu*/
#outer-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#inner-wrap {
  position: relative;
  width: 100%;
}

@media all and (max-width : 767px) and (min-width : 480px) {
  #nav {
    position: absolute;
    top: 0;
  }
  .js-ready #nav {
    height: 100%;
    width: 35%;
    background: #848281;
  }
  .js-ready #nav {
    left: -35%;
  }
  .js-ready #inner-wrap {
    left: 0;
  }
  .js-nav #inner-wrap {
    left: 35%;
  }

  .csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(35%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(35%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(35%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(35%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(35%, 0, 0) scale3d(1, 1, 1);
  }
}

@media all and (max-width : 479px){
  #nav {
    position: absolute;
    top: 0;
  }
  .js-ready #nav {
    height: 100%;
    width: 60%;
    background: #848281;
  }
  .js-ready #nav {
    left: -60%;
  }
  .js-ready #inner-wrap {
    left: 0;
  }
  .js-nav #inner-wrap {
    left: 60%;
  }
  
  .csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(60%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(60%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(60%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(60%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(60%, 0, 0) scale3d(1, 1, 1);
  }
}
