/* [sass, assets/scss, pure-drawer.scss] */
/**************
## Container ##
**************/
.pure-container {
  position: relative;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

/************
## Toggler ##
************/
.pure-toggle {
  left: -9999px;
  position: absolute;
  top: -9999px; }

.pure-toggle-label {
  /*cursor: pointer;
  display: block;
  position: fixed;
  top: 15px;
  left: 15px;*/
  /*z-index: 99;
  color: #5d819d;
  font-size: rem-calc(70);
  width: 56px;
  height: 56px;
  line-height: 44px;
  text-align: center;
  font-weight: 300;*/
  transition: all 400ms ease-in-out;
  /*border: 2px solid #5d819d;
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .pure-toggle-label:hover {
    border-color: #1fc08e;
    color: #1fc08e; }
  .pure-toggle-label:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */}

[data-position='right'] .pure-toggle-label {
  left: auto;
  right: 15px; }

[data-position='top'] .pure-toggle-label {
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0); }

/***********
## Drawer ##
***********/
.pure-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  background-color: #FFCB00;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 70%;
  }

[data-position='right'] .pure-drawer {
  left: auto;
  right: 0; }

[data-position='top'] .pure-drawer {
  min-height: auto;
  width: 100%; }

.pure-drawer.subOpen { background: #006E79;}
.pure-drawer ul { margin:0; padding:55px 0 0; width: 100%; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s;}
  .pure-drawer ul > a { position:absolute; right:0;}
  .pure-drawer ul li { list-style:none; padding:20px 30px; float:none!important; border-bottom: 1px solid rgba(0,0,0,0.1); text-align: left;}
    .pure-drawer ul li a, .pure-drawer ul li span { font-family: 'dinotregular'; letter-spacing:0.1em; color:#444; font-size:18px; line-height: 30px; text-align: left; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; cursor: pointer; display: block;}
  .pure-drawer ul li a::before { display: none;}
  .pure-drawer ul li a:hover, .pure-drawer ul li span:hover { color: #444;}
  .pure-drawer ul li i { float: left; margin-right: 20px; font-size: 1.5em;}
  .pure-drawer li a:hover , .pure-drawer li a:focus  { -webkit-transform: none; -moz-transform: none; transform: none;}
  .pure-drawer ul, ul h2 { display:block}
  .pure-drawer ul h2 { text-shadow:none; font-size:30px; font-weight:bold; color:#008EC1; margin-left:15px; line-height: 30px; margin-top: 10px;}
.pure-drawer .subCat { position: absolute; top: 0; right: 0; height: 100%; width: 100%; transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0); -moz-transform:translate3d(100%,0,0); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s;}
  .pure-drawer .subCat li { padding: 10px 20px;}
  .pure-drawer .subCat .btProd { position: absolute; top: 25px; right: 5%; font-weight: bold; width: 50px; z-index: 9999999999; color: #FFF}
  .pure-drawer .subCat i { display: block; text-align: center; margin: auto; font-size: 1.5em;}
  .pure-drawer > div > .subOpen { transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0); -moz-transform:translate3d(100%,0,0);}
  .pure-drawer .subCat.subOpen { transform:translate3d(-100%,0,0); -webkit-transform:translate3d(-100%,0,0); -moz-transform:translate3d(-100%,0,0);}
  .pure-drawer .subOpen a { color: #FFF;}
  .pure-drawer .subOpen a:hover, .pure-drawer.subOpen .subCat .btProd:hover { color: #FFCB00;}
  .pure-toggle-label span { float: left; font-family: 'PlutoSansLight'; color: #b92026; font-size: 13px; line-height: 16px; margin-top: 9px;}
  .pure-drawer > div { width: 100%; height: 100%; position: relative;}


/*********************
## Pusher Container ##
*********************/
.pure-pusher-container {
  position: relative;
  height: 100%;}

/***********
## Pusher ##
***********/
.pure-pusher {
  position: relative;
  height: 100%;
  overflow-y: scroll;
  left: 0;
  z-index: 2;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  background-color: #fff; }

/*******************
## Pusher Overlay ##
*******************/
.pure-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: opacity 0.5s 0.3s;
  transition: opacity 0.5s 0.3s; }

[data-position='left'] .pure-toggle:checked ~ .pure-pusher-container .pure-overlay {
  left: 0%; }

[data-position='right'] .pure-toggle:checked ~ .pure-pusher-container .pure-overlay {
  right: 100%; }

[data-position='top'] .pure-toggle:checked ~ .pure-pusher-container .pure-overlay {
  top: auto; }

.pure-toggle:checked ~ .pure-pusher-container .pure-overlay {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  -webkit-transition: opacity 0.5s 0.3s;
  transition: opacity 0.5s 0.3s; }

.pure-toggle .link:focus ~ .pure-pusher-container .pure-overlay {
  width: 0%;
  height: 0%;
  opacity: 0;
  z-index: 2;
  -webkit-transition: opacity 0.5s 0.3s;
  transition: opacity 0.5s 0.3s; }

.pure-toggle:checked ~ .pure-toggle-label {
  display: none;
}

/********************************
## Fallback for older browsers ##
********************************/
.no-csstransforms3d .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  left: 100%; }
  @media only screen and (min-width:40.063em) {
    .no-csstransforms3d .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      left: 300px; } }
  @media only screen and (min-width:64.063em) {
    .no-csstransforms3d .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      left: 300px; } }
.no-csstransforms3d [data-position='right'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  left: -100%; }
  @media only screen and (min-width:40.063em) {
    .no-csstransforms3d [data-position='right'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      left: -300px; } }
  @media only screen and (min-width:64.063em) {
    .no-csstransforms3d [data-position='right'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      left: -300px; } }
.no-csstransforms3d [data-position='top'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  top: auto; }
  @media only screen and (min-width:40.063em) {
    .no-csstransforms3d [data-position='top'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      top: 100%; } }
  @media only screen and (min-width:64.063em) {
    .no-csstransforms3d [data-position='top'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      top: auto; } }

/*******************************
## Effect 1 - Slide in on top ##
*******************************/
/* DRAWER */
[data-effect='pure-effect-1'] .pure-drawer {
  -webkit-transform: translate3d(-177%, 0, 0);
  transform: translate3d(-177%, 0, 0); }

[data-position='right'][data-effect='pure-effect-1'] .pure-drawer {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

[data-position='top'][data-effect='pure-effect-1'] .pure-drawer {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

[data-effect='pure-effect-1'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 16; }

/**********************
## Effect 2 - Reveal ##
**********************/
/* PUSHER */
[data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-2'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }

/***************************
## Effect 3 - Slide along ##
***************************/
/* DRAWER */
[data-effect='pure-effect-3'] .pure-drawer {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0); }

[data-position='right'][data-effect='pure-effect-3'] .pure-drawer {
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0); }

[data-position='top'][data-effect='pure-effect-3'] .pure-drawer {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0); }

[data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER */
[data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-3'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }

/*********************************
## Effect 4 - Reverse slide out ##
*********************************/
/* DRAWER */
[data-effect='pure-effect-4'] .pure-drawer {
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0); }

[data-position='right'][data-effect='pure-effect-4'] .pure-drawer {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0); }

[data-position='top'][data-effect='pure-effect-4'] .pure-drawer {
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0); }

[data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER */
[data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-4'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }

/*********************************
## Effect 5 - Scale Down Pusher ##
*********************************/
/* DRAWER */
[data-effect='pure-effect-5'] .pure-drawer {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

[data-position='right'][data-effect='pure-effect-5'] .pure-drawer {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

[data-position='top'][data-effect='pure-effect-5'] .pure-drawer {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

[data-effect='pure-effect-5'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER CONTAINER */
[data-effect='pure-effect-5'] .pure-pusher-container {
  -webkit-perspective: 1500px;
  perspective: 1500px; }

/* PUSHER */
/* Needed for Firefox */
[data-effect='pure-effect-5'] .pure-pusher-container .pure-pusher {
  z-index: 1; }

[data-effect='pure-effect-5'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 0, -100%);
  transform: translate3d(0, 0, -100%); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-5'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-5'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px); } }

/*************************
## Effect 6 - Scale Up ##
*************************/
/* CONTAINER */
[data-effect='pure-effect-6'] {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%; }

[data-position='right'][data-effect='pure-effect-6'] {
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%; }

[data-position='top'][data-effect='pure-effect-6'] {
  -webkit-perspective-origin: 50% 0;
  perspective-origin: 50% 0; }

/* DRAWER */
[data-effect='pure-effect-6'] .pure-drawer {
  -webkit-transform: translate3d(0, 0, -100%);
  transform: translate3d(0, 0, -100%); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px); } }

[data-position='right'][data-effect='pure-effect-6'] .pure-drawer {
  -webkit-transform: translate3d(100%, 0, -100%);
  transform: translate3d(100%, 0, -100%); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(300px, 0, -300px);
      transform: translate3d(300px, 0, -300px); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(300px, 0, -300px);
      transform: translate3d(300px, 0, -300px); } }

[data-position='top'][data-effect='pure-effect-6'] .pure-drawer {
  -webkit-transform: translate3d(0, 0, -$drawer-height-small);
  transform: translate3d(0, 0, -$drawer-height-small); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(0, 0, -100%);
      transform: translate3d(0, 0, -100%); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-6'] .pure-drawer {
      -webkit-transform: translate3d(0, 0, -$drawer-height-large);
      transform: translate3d(0, 0, -$drawer-height-large); } }

[data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER */
[data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-6'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }

/****************************************
## Effect 7 - Scale and Rotate Pusher ##
****************************************/
/* DRAWER */
[data-effect='pure-effect-7'] .pure-drawer {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

[data-position='right'][data-effect='pure-effect-7'] .pure-drawer {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

[data-position='top'][data-effect='pure-effect-7'] .pure-drawer {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

[data-effect='pure-effect-7'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER CONTAINER */
[data-effect='pure-effect-7'] .pure-pusher-container {
  -webkit-perspective: 1500px;
  perspective: 1500px; }

/* PUSHER */
[data-effect='pure-effect-7'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg); }

[data-position='right'][data-effect='pure-effect-7'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(20deg);
  transform: translate3d(100px, 0, -600px) rotateY(20deg); }

[data-position='top'][data-effect='pure-effect-7'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 0, -100px) rotateX(20deg);
  transform: translate3d(0, 0, -100px) rotateX(20deg); }

/**************************
## Effect 8 - Fall Down ##
**************************/
/* DRAWER */
[data-effect='pure-effect-8'] .pure-drawer {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

[data-position='top'][data-effect='pure-effect-8'] .pure-drawer {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

[data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER */
[data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-8'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }

/*********************
## Effect 9 - Push ##
*********************/
/* DRAWER */
[data-effect='pure-effect-9'] .pure-drawer {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

[data-position='right'][data-effect='pure-effect-9'] .pure-drawer {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

[data-position='top'][data-effect='pure-effect-9'] .pure-drawer {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

[data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-drawer {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* PUSHER */
[data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0); } }

[data-position='right'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='right'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='right'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0); } }

[data-position='top'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, auto, 0);
  transform: translate3d(0, auto, 0); }
  @media only screen and (min-width:40.063em) {
    [data-position='top'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0); } }
  @media only screen and (min-width:64.063em) {
    [data-position='top'][data-effect='pure-effect-9'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
      -webkit-transform: translate3d(0, auto, 0);
      transform: translate3d(0, auto, 0); } }