html, body {
  width: 100%;
  height: 100%; }

* {
  box-sizing: border-box; }

body {
  margin: 0;
  overflow: hidden; }

.outer-wrapper {
  padding-top: 0px; }

@media (min-width: 901px) {
  nav {
    display: none; }

  #toggle_button {
    position: fixed;
    top: 20px;
    right: 14px; }

  .outer-wrapper {
    padding-left: 30px;
    padding-right: 30px; }

  div.content:not(:first-child) {
    padding: 60px 50px 60px 50px;
    margin-top: 15px; }

  div.content:first-child {
    margin-top: 15px; } }
@media (max-width: 900px) {
  #toggle_button_big {
    display: none; }

  /*nav
   * position: absolute
   * right: 25px
   * top: 50%
   * transform: translateY(-50%)
   * width: 200px
   * font-size: 28px
   * color: #bb0d0d */ }
.wrapper {
  position: relative; }

.outer-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0px solid #00ff00;
  transition: border-radius 1s, border 1s;
  /*background-color: #EEEEEE */ }

.transition-in {
  transition: opacity 1s, border-radius 1s, border 2s 1s; }

.transition-out {
  transition: opacity 1s, border-radius 1s, border 2s 1s; }

body {
  background-image: url("../images/bg_grass.jpg");
  background-size: cover; }

.perspective {
  perspective: 1500px;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.container {
  position: relative;
  overflow-y: scroll;
  width: 100%;
  min-height: 100%;
  z-index: 10;
  margin: 0;
  /*background-color: #ffffff */
  /*opacity: 1 */
  border: 0;
  border-radius: 0;
  transition: transform 0.8s, opacity 0.8s;
  transform: translateZ(0) translateX(0) rotateY(0deg); }

.container > div {
  opacity: 1;
  transition: opacity 0.8s; }

.show-small {
  overflow: hidden;
  position: absolute;
  height: 100%;
  transform-origin: 0% 50%; }

.rotate-left {
  transform: translateZ(-700px) translateX(-16%) rotateY(45deg); }

.rotate-left.container {
  height: 100%;
  overflow: hidden; }

.rotate-left .perspective {
  overflow-y: scroll; }

.rotated-container {
  /*opacity: 0.5 */
  /*box-shadow: 20px 15px 6px #333333 */ }

.rotated-container + ul.menu.main {
  opacity: 1; }

.rotated-container > div {
  opacity: 0.5; }

.rotated-outer-wrapper {
  /*border: 5px solid #00aa00 */ }

@media (min-width: 901px) {
  ul.menu.main {
    opacity: 0;
    transition: opacity 0.8s 0.4s; }

  .rounded-border, ul.menu.main {
    border-radius: 20px; } }

/*# sourceMappingURL=anim_menu.css.map */