v?x01

@font-face {
    font-family: 'indieflower';
    src: url(../fonts/IndieFlower.ttf) format('truetype');
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'fjalla';
    src: url('..fonts/FjallaOne-Regular.ttf') format('truetype');
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'yanone';
    src: url('../fonts/YanoneKaffeesatz-Regular.ttf') format('truetype');
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'ico';
    src:url('../fonts/ico.eot?-vcwgg3');
    src:url('../fonts/ico.eot?#iefix-vcwgg3') format('embedded-opentype'),
        url('../fonts/ico.woff?-vcwgg3') format('woff'),
        url('../fonts/ico.ttf?-vcwgg3') format('truetype'),
        url('../fonts/ico.svg?-vcwgg3#ico') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="ico-"], [class*=" ico-"] {
    font-family: 'ico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ico-trophy:before {
    content: "\e023";
}
.ico-gears:before {
    content: "\e02b";
}
.ico-lightbulb:before {
    content: "\e030";
}
.ico-paintbrush:before {
    content: "\e036";
}
.ico-linegraph:before {
    content: "\e039";
}
.ico-hotairballoon:before {
    content: "\e044";
}
.ico-chat:before {
    content: "\e049";
}
.ico-heart:before {
    content: "\e04a";
}

@keyframes stretch {
    25% { transform: scaleY(1.3); }
    30% { transform: scaleY(0.6); }
    32% { transform: rotate(360deg); }
    58% { transform: rotate(0deg); }
    60% { transform: scaleY(0.6); }
    75% { transform: scaleY(1.3); }
    100%{ transform: scaleY(1); }
}

*::selection {
    background: #3ebd73;
    color: #fff;
    text-shadow: 0 0 2px #999;
}

*::-moz-selection {
    background: #3ebd73;
    color: #fff;
    text-shadow: 0 0 2px #999;
}
*, *::after, *::before {
    margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
body {
    min-height: 100%;
    min-width: 100%;
}
body > aside {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    background: #333;
    z-index: 9999;
    -webkit-box-shadow: 4px 0 10px 2px #000;
            box-shadow: 4px 0 10px 2px #000;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
}
body > section {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: 250px; /* Tamanho do ASIDE */
    background: #333;
    -webkit-perspective: 1000;
            perspective: 1000;
}
/* LOGO */
body aside > a {
    margin-top: 50px;
    display: block;
    width: 250px;
    padding: 25px 0;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: 'yanone';
    font-size: 2em;
    white-space: nowrap;
    overflow: hidden;
    //background: red; test
}

body aside > a > h2,
body aside > a > h2::after,
body aside > a > h2::before {
    display: inline-block;
    margin: 0 6px;
}

body aside > a > h2 {
    text-decoration: underline;
}

body aside > a > h2::after,
body aside > a > h2::before {
    color: #3ebd73;
    -webkit-transition: all 200ms ease-in;
       -moz-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
}
body aside > a > h2::before {
    content: "</";
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
}
body aside > a > h2::after {
    content: "!>";
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
}
body aside > a:hover > h2 {
    text-decoration: none;
    -webkit-transform: rotateX(3600deg);
            transform: rotateX(360deg);
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
}
body aside > a:hover > h2::after,
body aside > a:hover > h2::before {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
ul {
    list-style: none;
}
body > aside > nav {
    display: block;
    width: 250px; /* tamanho do aside */
    overflow: hidden;
    padding: 10px 0;
    margin-top: 50px;
    //background: red; test
}
body > aside > nav a {
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 8px 0;
    font-family: 'yanone';
    font-size: 1.8em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

body > aside > nav a p::before {
    font-family: 'ico';
    display: inline-block;
    color: #3ebd73;
    margin-right: 12px;
    -webkit-transition: all 250ms ease-in;
       -moz-transition: all 250ms ease-in;
         -o-transition: all 250ms ease-in;
            transition: all 250ms ease-in;
}

body > aside > nav li:nth-child(1) > a > p::before {
    content: '\e023';
}

body > aside > nav li:nth-child(2) > a > p::before {
    content: '\e044';
}

body > aside > nav li:nth-child(3) > a > p::before {
    content: '\e049';
}


body > aside > nav a:hover {
    background: #3ebd73;
    color: #333;
    box-shadow: 0 0 10px 4px rgba(0,0,0,0.6);
}

body > aside > nav a:hover p {
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

body > aside > nav a:hover p::before {
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.2);
    animation: stretch 1s;
    animation-delay: 0.2s;
}

.slowly {
    -webkit-transition: all 250ms ease-in;
       -moz-transition: all 250ms ease-in;
         -o-transition: all 250ms ease-in;
            transition: all 250ms ease-in;
}