/* http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms */

#site-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;

  height: 5000px; /* Temp: Simulates a tall page. */
}
#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  padding: 1% 0; /* Temp: Just spacing. */
}
.show-nav #site-canvas {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);

  transform: translate3d(300px, 0, 0);
  -webkit-transform: translate3d(300px, 0, 0);
}
#site-menu {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  background: #428bca;
  padding: 15px;
}


.ease { -webkit-transition: 300ms ease all; transition: 300ms ease all; }
.linear { -webkit-transition: 300ms linear all; transition: 300ms linear all; }
.ease-in { -webkit-transition: 300ms ease-in all; transition: 300ms ease-in all; }
.ease-out { -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; }
.ease-in-out { -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; }
.bounce { -webkit-transition: all 300ms cubic-bezier(0.32,1.25,0.375,1.15); transition: all 300ms cubic-bezier(0.32,1.25,0.375,1.15); }
.snappy { -webkit-transition: all 300ms cubic-bezier(.694, .0482, .335, 1); transition: all 300ms cubic-bezier(.694, .0482, .335, 1); }
.out-of-orbit { -webkit-transition: all 300ms cubic-bezier(1,0,.61,.15); transition: all 300ms cubic-bezier(1,0,.61,.15); }
.fat-kid-down-slide { -webkit-transition: all 300ms cubic-bezier(.2,1,.47,0); transition: all 300ms cubic-bezier(.2,1,.47,0); }
.none { -webkit-transition: none; -webkit-transition: none; }


.boring #site-menu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.boring .show-nav #site-menu {
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;

  -webkit-transform: translateX(300px);
  transform: translateX(300px);

  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.boring .show-nav #site-canvas {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


.extra-pop #site-canvas {
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}
.extra-pop #site-menu * {
  -webkit-transition: all 750ms cubic-bezier(0.32,1.25,0.375,1.15);
  transition: all 750ms cubic-bezier(0.32,1.25,0.375,1.15);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.extra-pop .show-nav #site-menu * {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}



/* Just styles */
body {
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  background-color: #333;
  color: #fff;
}
#hearts {
  text-align: center;
}
#hearts a {
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  color: #FF5A5A;
  display: inline-block;
  padding: 10px;
}
#hearts a:hover i {
  -webkit-transform: scale(1.5);
}
#hearts a:hover {
  color: #0EB69B;
}
#hearts i, #hearts span {
  display: block;
  text-align: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 400ms cubic-bezier(0.32,1.25,0.375,1.15);
  transition: all 400ms cubic-bezier(0.32,1.25,0.375,1.15);
}





body.content-full-mode #main-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #E5E5E5;
z-index: 9999999999999;
}

#main-content {
position: relative;
}

.toggle-full-mode {
position: absolute;
font-size: 17px;
color: #F8399C;
top: 0;
right: 5px;
-webkit-transition: all 250ms cubic-bezier(.694, .0482, .335, 1);
-moz-transition: all 250ms cubic-bezier(.694, .0482, .335, 1);
-ms-transition: all 250ms cubic-bezier(.694, .0482, .335, 1);
-o-transition: all 250ms cubic-bezier(.694, .0482, .335, 1);
transition: all 250ms cubic-bezier(.694, .0482, .335, 1);
-webkit-transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
-moz-transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
-ms-transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
-o-transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
transition-timing-function: cubic-bezier(.694, .0482, .335, 1);
background: #fff;
border-radius: 100%;
display: block;
width: 25px;
text-align: center;
top: 5px;
}


body.content-full-mode .toggle-full-mode {
position: fixed;
font-size: 27px;
right: 10px;
width: 50px;
height: 50px;
line-height: 50px;
}