/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/* css */

html, body{
    background-color: rgb(241,239,216);
}

.wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.logo_wrapper{
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.logo{
    font-size: 0;
    color: rgba(0,0,0,0);
    text-indent: -2000%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -90px;
    left: -90px;
}
.logo span{
    display: block;
    background-color: rgb(206,215,62);
    width: 20px;
    position: absolute;
}
.logo .l1{
    height: 20px;
    left: 80px;
    top: 80px;
}
.logo .l1:before, .logo .l1:after{
    content: '';
    position: absolute;
    top: -40px;
    left: -60px;
    height: 100%;
    width: 140px;
    background-color: inherit;
}
.logo .l1:after{
    top: 40px;
}
.logo .l2{
    height: 140px;
    left: 40px;
    top: 20px;
}
.logo .l2:after{
    content: '';
    position: absolute;
    top: 0;
    left: 80px;
    height: 100%;
    width: 100%;
    background-color: inherit;
}
.logo .l3{
    width: 40px;
    height: 20px;
    left: 0;
    top: 80px;
}
.logo .l3:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 140px;
    background-color: inherit;
}
.logo .l4{
    height: 40px;
    left: 80px;
    top: 0;
}
.logo .l4:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 140px;
    left: 0;
    background-color: inherit;
}

.logo .l5{
    top: 60px;
    left: 60px;
    width: 60px;
    height: 60px;
    background: none;
}
.logo .l5:before, .logo .l5:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgb(206,215,62);
    -webkit-animation: eye_blink 8s infinite linear;
    animation: eye_blink 8s infinite linear;
}
.logo .l5:after{
    top: auto;
    bottom: 0;
}
@-webkit-keyframes eye_blink {
    0% { height: 0; }
    4% { height: 0; }
    4.5% { height: 30px; }
    5% { height: 0; }
    40% { height: 0; }
    40.5% { height: 30px; }
    41% { height: 0; }
    80% { height: 0; }
    80.5% { height: 30px; }
    81% { height: 0; }
    82% { height: 0; }
    82.5% { height: 30px; }
    83% { height: 0; }
    100% { height: 0; }
}
@keyframes eye_blink {
    0% { height: 0; }
    4% { height: 0; }
    4.5% { height: 30px; }
    5% { height: 0; }
    40% { height: 0; }
    40.5% { height: 30px; }
    41% { height: 0; }
    80% { height: 0; }
    80.5% { height: 30px; }
    81% { height: 0; }
    82% { height: 0; }
    82.5% { height: 30px; }
    83% { height: 0; }
    100% { height: 0; }
}

.logo .circle_wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0;
    width: 0;
    background-color: rgb(237,92,45);
    overflow: hidden;
    border-radius: 50%;
    transition: width 100ms ease-in-out, height 100ms ease-in-out, margin 100ms ease-in-out;
    -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, margin 100ms ease-in-out;
}
.logo .circle{
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -90px;
}
.logo .circle span{
    background-color: rgb(241,239,216);
}
.logo .circle .l5{
    background: none;
}
.logo .circle .l5:before, .logo .circle .l5:after{
    background-color: rgb(241,239,216);
    -webkit-animation: none;
    animation: none;
}
.logo_wrapper:hover .circle_wrapper, .logo_wrapper.active .circle_wrapper{
    width: 320px;
    height: 320px;
    margin: -160px 0 0 -160px;
}

.bg{
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity 160ms ease-in-out;
    -webkit-transition: opacity 160ms ease-in-out;
}
.logo_wrapper:hover + .bg, .logo_wrapper.active + .bg{
    opacity: 1;
}
.bg .circle{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 2px dashed rgb(237,92,45);
    outline: 1px solid rgba(0,0,0,0);
    border-radius: 50%;
    -webkit-animation: border 16s infinite linear;
    animation: border 16s infinite linear;
    transition: width 100ms ease-in-out, height 100ms ease-in-out, margin 100ms ease-in-out;
    -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, margin 100ms ease-in-out;
}
.logo_wrapper:hover + .bg .circle, .logo_wrapper.active + .bg .circle{
    width: 360px;
    height: 360px;
    margin: -182px 0 0 -182px;
}
@-webkit-keyframes border {
    0% { -webkit-transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); }
}
@keyframes border {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

/* birds */

.birds{
    z-index: 60;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: .6;
    -webkit-animation: birds 40s infinite linear;
    animation: birds 40s infinite linear;
}
@-webkit-keyframes birds {
    0% { -webkit-transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); }
}
@keyframes birds {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}
.birds>div{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    margin-left: -5px;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
}
.birds>div>div{
    width: 100%;
    height: 2px;
    background-color: rgb(237,92,45);
}
.birds>div>div:before{
    background-color: inherit;
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    right: 4px;
    top: 1px;
    -webkit-animation: flap 1s infinite linear;
    animation: flap 1s infinite linear;
}
@-webkit-keyframes flap {
    0% { height: 4px; }
    25% { margin-top: 0; height: 0; }
    50% { margin-top: -4px; height: 4px; }
    75% { margin-top: 0; height: 0; }
    100% { height: 4px; }
}
@keyframes flap {
    0% { height: 4px; }
    25% { margin-top: 0; height: 0; }
    50% { margin-top: -4px; height: 4px; }
    75% { margin-top: 0; height: 0; }
    100% { height: 4px; }
}

.birds>.n1{
    height: 240px;
}
.birds>.n2{
    height: 230px;
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}
.birds>.n2>div:before{
    animation-delay: -100ms;
    -webkit-animation-delay: -100ms;
}
.birds>.n3{
    height: 235px;
    -webkit-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
}
.birds>.n3>div:before{
    animation-delay: -300ms;
    -webkit-animation-delay: -300ms;
}
.birds>.n4{
    height: 225px;
    -webkit-transform: rotateZ(-17deg);
    transform: rotateZ(-17deg);
}
.birds>.n4>div:before{
    animation-delay: -400ms;
    -webkit-animation-delay: -400ms;
}
.birds>.n5{
    height: 245px;
    -webkit-transform: rotateZ(-25deg);
    transform: rotateZ(-25deg);
}
.birds>.n5>div:before{
    animation-delay: -600ms;
    -webkit-animation-delay: -600ms;
}
.birds>.n6{
    height: 220px;
    -webkit-transform: rotateZ(-150deg);
    transform: rotateZ(-150deg);
}
.birds>.n7{
    height: 225px;
    -webkit-transform: rotateZ(-155deg);
    transform: rotateZ(-155deg);
}
.birds>.n7>div:before{
    animation-delay: -300ms;
    -webkit-animation-delay: -300ms;
}

/* clouds */

.cloud{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
}
.cloud>div{
    background-color: rgb(206,215,62);
}
.cloud>div, .cloud>div:before, .cloud>div:after{
    outline: 1px solid rgba(0,0,0,0);
}

.cloud_1{
    z-index: 10;
    width: 40px;
    height: 185px;
    margin: 0 0 0 -20px;
    -webkit-animation: cloud_1 40s infinite linear reverse;
    animation: cloud_1 40s infinite linear reverse;
}
.cloud_1>div{
    height: 10px;
    width: 40px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
}
.cloud_1>div:after, .cloud_1>div:before{
    background-color: inherit;
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    height: 10px;
    width: 20px;
    border-radius: 5px;
}
.cloud_1>div:before{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    bottom: 0;
    left: -5px;
}
@-webkit-keyframes cloud_1 {
    0% { -webkit-transform: rotateZ(120deg); }
    100% { -webkit-transform: rotateZ(480deg); }
}
@keyframes cloud_1 {
    0% { transform: rotateZ(120deg); }
    100% { transform: rotateZ(480deg); }
}

.cloud_2{
    z-index: 40;
    width: 100px;
    height: 240px;
    margin: 0 0 0 -50px;
    -webkit-animation: cloud_2 24s infinite linear reverse;
    animation: cloud_2 24s infinite linear reverse;
}
.cloud_2>div{
    height: 30px;
    width: 100px;
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
}
.cloud_2>div:after, .cloud_2>div:before{
    background-color: inherit;
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    height: 30px;
    width: 60px;
    border-radius: 20px;
}
.cloud_2>div:before{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    bottom: 0;
    left: -15px;
}
@-webkit-keyframes cloud_2 {
    0% { -webkit-transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); }
}
@keyframes cloud_2 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

.cloud_3{
    z-index: 40;
    width: 140px;
    height: 320px;
    margin: 0 0 0 -70px;
    -webkit-animation: cloud_3 16s infinite linear reverse;
    animation: cloud_3 16s infinite linear reverse;
}
.cloud_3>div{
    height: 40px;
    width: 140px;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
}
.cloud_3>div:after, .cloud_3>div:before{
    background-color: inherit;
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    height: 40px;
    width: 90px;
    border-radius: 20px;
}
.cloud_3>div:before{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    bottom: 0;
    left: -15px;
}
@-webkit-keyframes cloud_3 {
    0% { -webkit-transform: rotateZ(-120deg); }
    100% { -webkit-transform: rotateZ(240deg); }
}
@keyframes cloud_3 {
    0% { transform: rotateZ(-120deg); }
    100% { transform: rotateZ(240deg); }
}

/* mountains */

.earth{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation: earth 80s infinite linear reverse;
    animation: earth 80s infinite linear reverse;
}
.earth.foreground{
    z-index: 20;
}
.earth.background{
    z-index: 5;
}
@-webkit-keyframes earth {
    0% { -webkit-transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); }
}
@keyframes earth {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

.mountain{
    outline: 1px solid rgba(0,0,0,0);
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: height 240ms ease-in-out;
    -webkit-transition: height 240ms ease-in-out;
}
.mountain>div{
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
}
.logo_wrapper:hover + .bg .mountain>div, .logo_wrapper.active + .bg .mountain>div{
    opacity: 1;
}

.mountain_1>div{
    border-bottom: 60px solid rgb(237,92,45);
    border-left: 60px solid rgba(237,92,45,0);
    border-right: 60px solid rgba(237,92,45,0);
    margin: 0 0 0 -60px;
}
.logo_wrapper:hover + .bg .mountain_1, .logo_wrapper.active + .bg .mountain_1{
    height: 200px;
}

.mountain_2{
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.mountain_2>div{
    border-bottom: 120px solid rgb(237,92,45);
    border-left: 120px solid rgba(237,92,45,0);
    border-right: 120px solid rgba(237,92,45,0);
    margin: 0 0 0 -120px;
}
.logo_wrapper:hover + .bg .mountain_2, .logo_wrapper.active + .bg .mountain_2{
    height: 220px;
}

/* forest */

.forests{
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.forest{
    outline: 1px solid rgba(0,0,0,0);
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: height 240ms ease-in-out;
    -webkit-transition: height 240ms ease-in-out;
}
.forest>div{
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
}
.forest.leaf>div{
    background-color: rgb(237,92,45);
}
.logo_wrapper:hover + .bg .forest>div, .logo_wrapper.active + .bg .forest>div{
    opacity: 1;
}

.forest_1>div{
    border-bottom: 80px solid rgb(237,92,45);
    border-left: 20px solid rgba(237,92,45,0);
    border-right: 20px solid rgba(237,92,45,0);
    margin: 0 0 0 -20px;
}
.logo_wrapper:hover + .bg .forest_1, .logo_wrapper.active + .bg .forest_1{
    height: 220px;
}

.forest_2{
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}
.forest_2>div, .forest_3>div{
    border-bottom: 80px solid rgb(237,92,45);
    border-left: 20px solid rgba(237,92,45,0);
    border-right: 20px solid rgba(237,92,45,0);
    margin: 0 0 0 -20px;
}
.logo_wrapper:hover + .bg .forest_2, .logo_wrapper:hover + .bg .forest_3,
.logo_wrapper.active + .bg .forest_2, .logo_wrapper.active + .bg .forest_3{
    height: 205px;
}

.forest_3{
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
}

.forest_4{
    -webkit-transform: rotateZ(-3deg);
    transform: rotateZ(-3deg);
}
.forest_4>div, .forest_5>div{
    border-bottom: 80px solid rgb(237,92,45);
    border-left: 20px solid rgba(237,92,45,0);
    border-right: 20px solid rgba(237,92,45,0);
    margin: 0 0 0 -20px;
}
.logo_wrapper:hover + .bg .forest_4, .logo_wrapper:hover + .bg .forest_5,
.logo_wrapper.active + .bg .forest_4, .logo_wrapper.active + .bg .forest_5{
    height: 200px;
}
.logo_wrapper:hover + .bg .forest_4>div, .logo_wrapper.active + .bg .forest_4>div,
.logo_wrapper:hover + .bg .forest_5>div, .logo_wrapper.active + .bg .forest_5>div,
.logo_wrapper:hover + .bg .forest_6>div, .logo_wrapper.active + .bg .forest_6>div,
.logo_wrapper:hover + .bg .forest_7>div, .logo_wrapper.active + .bg .forest_7>div,
.logo_wrapper:hover + .bg .forest_8>div, .logo_wrapper.active + .bg .forest_8>div,
.logo_wrapper:hover + .bg .forest_11>div, .logo_wrapper.active + .bg .forest_11>div{
    opacity: .6;
}

.forest_5{
    -webkit-transform: rotateZ(3deg);
    transform: rotateZ(3deg);
}

.forest_6{
    -webkit-transform: rotateZ(-8deg);
    transform: rotateZ(-8deg);
}
.forest_6>div, .forest_7>div{
    border-bottom: 80px solid rgb(237,92,45);
    border-left: 20px solid rgba(237,92,45,0);
    border-right: 20px solid rgba(237,92,45,0);
    margin: 0 0 0 -20px;
}
.logo_wrapper:hover + .bg .forest_6, .logo_wrapper:hover + .bg .forest_7,
.logo_wrapper.active + .bg .forest_6, .logo_wrapper.active + .bg .forest_7{
    height: 190px;
}

.forest_7{
    -webkit-transform: rotateZ(8deg);
    transform: rotateZ(8deg);
}

.forest_8{
    -webkit-transform: rotateZ(-15deg);
    transform: rotateZ(-15deg);
}
.forest_8>div{
    border-bottom: 80px solid rgb(237,92,45);
    border-left: 20px solid rgba(237,92,45,0);
    border-right: 20px solid rgba(237,92,45,0);
    margin: 0 0 0 -20px;
}
.logo_wrapper:hover + .bg .forest_8, .logo_wrapper.active + .bg .forest_8{
    height: 180px;
}

.forest_9{
    -webkit-transform: rotateZ(-20deg);
    transform: rotateZ(-20deg);
}
.forest_9>div, .forest_10>div{
    width: 4px;
    height: 40px;
    margin: 0 0 0 -2px;
}
.forest_9>div:after, .forest_10>div:after{
    position: absolute;
    content: '';
    width: 20px;
    height: 40px;
    left: -8px;
    top: -20px;
    background-color: inherit;
    border-radius: 10px;
}
.logo_wrapper:hover + .bg .forest_9, .logo_wrapper.active + .bg .forest_9{
    height: 190px;
}

.forest_10{
    -webkit-transform: rotateZ(15deg);
    transform: rotateZ(15deg);
}
.forest_10>div{
    height: 50px;
}
.forest_10>div:after{
    height: 50px;
}
.logo_wrapper:hover + .bg .forest_10, .logo_wrapper.active + .bg .forest_10{
    height: 200px;
}

.forest_11{
    -webkit-transform: rotateZ(18deg);
    transform: rotateZ(18deg);
}
.forest_11>div{
    width: 2px;
    height: 20px;
    margin: 0 0 0 -1px;
}
.forest_11>div:after{
    position: absolute;
    content: '';
    width: 10px;
    height: 20px;
    left: -4px;
    top: -5px;
    background-color: inherit;
    border-radius: 5px;
}
.logo_wrapper:hover + .bg .forest_11, .logo_wrapper.active + .bg .forest_11{
    height: 180px;
}

/* monsters */

.monsters{
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotateZ(40deg);
    transform: rotateZ(40deg);
}

.monster{
    outline: 1px solid rgba(0,0,0,0);
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: height 240ms ease-in-out;
    -webkit-transition: height 240ms ease-in-out;
}
.monster>div{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(237,92,45);
    opacity: 0;
}
.monster>div>.eyes>.eye{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgb(241,239,216);
}
.monster>div>.eyes>.eye.right{
    right: 0;
    left: auto;
}
.logo_wrapper:hover + .bg .monster>div, .logo_wrapper.active + .bg .monster>div{
    opacity: 1;
}

.monster.big_monster{
    width: 60px;
    height: 0;
    margin: 0 0 0 -30px;
}
.monster.big_monster>div{
    width: 60px;
    height: 120px;
    border-radius: 30px;
}
.monster.big_monster>div>.eyes{
    position: absolute;
    top: 30px;
    right: 6px;
    width: 48px;
}
.monster.big_monster>div>.eyes>.eye{
    width: 8px;
    height: 8px;
    -webkit-animation: big_monster_eyes 3243ms infinite linear;
    animation: big_monster_eyes 3243ms infinite linear;
}
.logo_wrapper:hover + .bg .big_monster, .logo_wrapper.active + .bg .big_monster{
    height: 220px;
}
@-webkit-keyframes big_monster_eyes {
    0% { height: 8px; top: 0; }
    2% { height: 0; top: 4px; }
    4% { height: 8px; top: 0; }
    100% { height: 8px; top: 0; }
}
@keyframes big_monster_eyes {
    0% { height: 8px; top: 0; }
    2% { height: 0; top: 4px; }
    4% { height: 8px; top: 0; }
    100% { height: 8px; top: 0; }
}

.monster.small_monster{
    width: 20px;
    height: 0;
    margin: 0 0 0 -10px;
    -webkit-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg);
}
.monster.small_monster>div{
    width: 20px;
    height: 60px;
    border-radius: 10px;
}
.monster.small_monster>div>.eyes{
    position: absolute;
    top: 10px;
    right: 2px;
    width: 16px;
}
.monster.small_monster>div>.eyes>.eye{
    width: 4px;
    height: 4px;
    -webkit-animation: small_monster_eyes 2412ms infinite linear;
    animation: small_monster_eyes 2412ms infinite linear;
}
.logo_wrapper:hover + .bg .small_monster, .logo_wrapper.active + .bg .small_monster{
    height: 180px;
}
@-webkit-keyframes small_monster_eyes {
    0% { height: 4px; top: 0; }
    2% { height: 0; top: 2px; }
    4% { height: 4px; top: 0; }
    16% { height: 4px; top: 0; }
    18% { height: 0; top: 2px; }
    20% { height: 4px; top: 0; }
    100% { height: 4px; top: 0; }
}
@keyframes small_monster_eyes {
    0% { height: 4px; top: 0; }
    2% { height: 0; top: 2px; }
    4% { height: 4px; top: 0; }
    16% { height: 4px; top: 0; }
    18% { height: 0; top: 2px; }
    20% { height: 4px; top: 0; }
    100% { height: 4px; top: 0; }
}

/* house */

.village{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotateZ(140deg);
    transform: rotateZ(140deg);
}

.village .house{
    outline: 1px solid rgba(0,0,0,0);
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: height 240ms ease-in-out;
    -webkit-transition: height 240ms ease-in-out;
}
.village .house>div{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: rgb(237,92,45);
    height: 70px;
    width: 28px;
    margin: 0 0 0 -14px;
}
.village .house>div:after{
    content: '';
    width: 20px;
    height: 20px;
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    position: absolute;
    top: -10px;
    left: 4px;
    background-color: rgb(237,92,45);
}
.village .house>div:before{
    content: '';
    width: 32px;
    height: 4px;
    background-color: rgb(237,92,45);
    position: absolute;
    top: 0;
    left: -2px;
}
.logo_wrapper:hover + .bg .house>div, .logo_wrapper.active + .bg .house>div{
    opacity: 1;
}

.logo_wrapper:hover + .bg .house_1, .logo_wrapper.active + .bg .house_1{
    height: 190px;
}

.village .house_2{
    transform: rotateZ(-8deg);
    -webkit-transform: rotateZ(-8deg);
}
.logo_wrapper:hover + .bg .house_2, .logo_wrapper.active + .bg .house_2,
.logo_wrapper:hover + .bg .house_3, .logo_wrapper.active + .bg .house_3{
    height: 175px;
}

.logo_wrapper:hover + .bg .house_4, .logo_wrapper.active + .bg .house_4,
.logo_wrapper:hover + .bg .house_5, .logo_wrapper.active + .bg .house_5{
    height: 170px;
}

.village .house_3{
    transform: rotateZ(8deg);
    -webkit-transform: rotateZ(8deg);
}

.village .house_4>div:after, .village .house_5>div:after{
    display: none;
}
.village .house_4{
    transform: rotateZ(-17deg);
    -webkit-transform: rotateZ(-17deg);
}

.village .house_5{
    transform: rotateZ(17deg);
    -webkit-transform: rotateZ(17deg);
}

.village .flag{
    position: absolute;
    top: -40px;
    left: 13px;
    width: 2px;
    height: 40px;
    background-color: inherit;
}
.village .flag:before{
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 10px;
    height: 10px;
    background-color: inherit;
}
.village .flag:after{
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    border-top: 5px solid rgb(237,92,45);
    border-bottom: 5px solid rgb(237,92,45);
    border-left: 5px solid rgba(0,0,0,0);
}

/* sky */

.sky{
    position: absolute;
    top:50%;
    left: 50%;
    width: 0;
    height: 0;
}

.moon{
    z-index: 10;
    outline: 1px solid rgba(0,0,0,0);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    height: 400px;
    margin: 0 0 0 -20px;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    -webkit-animation: earth 400s infinite linear reverse;
    animation: earth 400s infinite linear reverse;
}
.moon>div{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(0,122,111);
}

.skyline{
    outline: 1px solid rgba(0,0,0,0);
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 348px;
    height: 600px;
    margin: -300px 0 0 -174px;
    background-color: rgb(206,215,62);
    opacity: .2;
    -webkit-animation: earth 200s infinite linear reverse;
    animation: earth 200s infinite linear reverse;
}
.skyline:before, .skyline:after{
    position: absolute;
    top: 0;
    left: 0;
    background-color: inherit;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: rotateZ(-60deg);
    -webkit-transform: rotateZ(-60deg);
}
.skyline:after{
    transform: rotateZ(60deg);
    -webkit-transform: rotateZ(60deg);
}

/* ocean */

.ocean{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotateZ(-120deg);
    -webkit-transform: rotateZ(-120deg);
}
.ocean>.wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    margin: 0 0 0 -10px;
    opacity: 0;
    height: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: height 240ms ease-in-out;
    -webkit-transition: height 240ms ease-in-out;
}
.ocean>.wave>div{
    content: '';
    border-bottom: 20px solid rgb(0,122,111);
    border-right: 20px solid rgba(0,0,0,0);
    border-left: 20px solid rgba(0,0,0,0);
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: -10px;
}

.logo_wrapper:hover + .bg .ocean>.wave, .logo_wrapper.active + .bg .ocean>.wave{
    opacity: 1;
    height: 170px;
}

.ocean>.n1>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 900ms;
    -webkit-animation-delay: 900ms;
}

.ocean>.n2{
    transform: rotateZ(5deg);
    -webkit-transform: rotateZ(5deg);
}
.ocean>.n2>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1000ms;
    -webkit-animation-delay: 1000ms;
}

.ocean>.n3{
    transform: rotateZ(-5deg);
    -webkit-transform: rotateZ(-5deg);
}
.ocean>.n3>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 800ms;
    -webkit-animation-delay: 800ms;
}

.ocean>.n4{
    transform: rotateZ(10deg);
    -webkit-transform: rotateZ(10deg);
}
.ocean>.n4>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1100ms;
    -webkit-animation-delay: 1100ms;
}

.ocean>.n5{
    transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
}
.ocean>.n5>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 700ms;
    -webkit-animation-delay: 700ms;
}

.ocean>.n6{
    transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
}
.ocean>.n6>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1200ms;
    -webkit-animation-delay: 1200ms;
}

.ocean>.n7{
    transform: rotateZ(-15deg);
    -webkit-transform: rotateZ(-15deg);
}
.ocean>.n7>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 600ms;
    -webkit-animation-delay: 600ms;
}

.ocean>.n8{
    transform: rotateZ(20deg);
    -webkit-transform: rotateZ(20deg);
}
.ocean>.n8>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1300ms;
    -webkit-animation-delay: 1300ms;
}

.ocean>.n9{
    transform: rotateZ(-20deg);
    -webkit-transform: rotateZ(-20deg);
}
.ocean>.n9>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 500ms;
    -webkit-animation-delay: 500ms;
}

.ocean>.n10{
    transform: rotateZ(25deg);
    -webkit-transform: rotateZ(25deg);
}
.ocean>.n10>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1400ms;
    -webkit-animation-delay: 1400ms;
}

.ocean>.n11{
    transform: rotateZ(-25deg);
    -webkit-transform: rotateZ(-25deg);
}
.ocean>.n11>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 400ms;
    -webkit-animation-delay: 400ms;
}

.ocean>.n12{
    transform: rotateZ(30deg);
    -webkit-transform: rotateZ(30deg);
}
.ocean>.n12>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1500ms;
    -webkit-animation-delay: 1500ms;
}

.ocean>.n13{
    transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
}
.ocean>.n13>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 300ms;
    -webkit-animation-delay: 300ms;
}

.ocean>.n14{
    transform: rotateZ(35deg);
    -webkit-transform: rotateZ(35deg);
}
.ocean>.n14>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1600ms;
    -webkit-animation-delay: 1600ms;
}

.ocean>.n15{
    transform: rotateZ(-35deg);
    -webkit-transform: rotateZ(-35deg);
}
.ocean>.n15>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 200ms;
    -webkit-animation-delay: 200ms;
}

.ocean>.n16{
    transform: rotateZ(40deg);
    -webkit-transform: rotateZ(40deg);
}
.ocean>.n16>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1700ms;
    -webkit-animation-delay: 1700ms;
}

.ocean>.n17{
    transform: rotateZ(-40deg);
    -webkit-transform: rotateZ(-40deg);
}
.ocean>.n17>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 100ms;
    -webkit-animation-delay: 100ms;
}

.ocean>.n18{
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}
.ocean>.n18>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1800ms;
    -webkit-animation-delay: 1800ms;
}

.ocean>.n19{
    transform: rotateZ(-45deg);
    -webkit-transform: rotateZ(-45deg);
}
.ocean>.n19>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
}

.ocean>.n20{
    transform: rotateZ(50deg);
    -webkit-transform: rotateZ(50deg);
}
.ocean>.n20>div{
    -webkit-animation: wave 2s infinite linear;
    animation: wave 2s infinite linear;
    animation-delay: 1900ms;
    -webkit-animation-delay: 1900ms;
}
@-webkit-keyframes wave { 0% { top: 0; } 5% { top: -5px; } 10% { top: 0; } 50% { top: 0; } 55% { top: -5px; } 60% { top: 0; } 100% { top: 0; } }
@keyframes wave { 0% { top: 0; } 5% { top: -5px; } 10% { top: 0; } 50% { top: 0; } 55% { top: -5px; } 60% { top: 0; } 100% { top: 0; } }

/* fish */

.ocean>.fish{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 190px;
    margin: 0 0 0 -50px;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    opacity: .8;
}
.ocean>.fish>div{
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
}
.ocean>.fish>div>div{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -3px;
    width: 6px;
    height: 3px;
    background: rgb(0,122,111);
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
}
.ocean>.fish>div>div:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: -2px;
    top: 0;
    border-left: 1px solid rgb(0,122,111);
    border-top: 1px solid rgb(0,122,111);
    border-bottom: 1px solid rgba(0,0,0,0);
    border-right: 1px solid rgba(0,0,0,0);
    -webkit-transform: skew(-45deg);
    transform: skew(-45deg);
}
.ocean>.fish>div>div:before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -1px;
    top: -2px;
    border-left: 1px solid rgb(0,122,111);
    border-bottom: 1px solid rgb(0,122,111);
    border-top: 1px solid rgba(0,0,0,0);
    border-right: 1px solid rgba(0,0,0,0);
    -webkit-transform: skew(-45deg);
    transform: skew(-45deg);
}

.ocean>.fish.n1{
    transform: rotateZ(-25deg);
    -webkit-transform: rotateZ(-25deg);
}
.ocean>.fish>div{
    -webkit-animation: fish 8s infinite cubic-bezier(0.100, 0.600, 0.900, 0.400);
    animation: fish 8s infinite cubic-bezier(0.100, 0.600, 0.900, 0.400);
}
@-webkit-keyframes fish {
    0% { -webkit-transform: rotateZ(-90deg); }
    10% { -webkit-transform: rotateZ(90deg); }
    100% { -webkit-transform: rotateZ(270deg); }
}
@keyframes fish {
    0% { transform: rotateZ(-90deg); }
    10% { transform: rotateZ(90deg); }
    100% { transform: rotateZ(270deg); }
}
.ocean>.fish.n2{
    transform: rotateZ(25deg) scale(-1, 1);
    -webkit-transform: rotateZ(25deg) scale(-1, 1);
}

.ocean>.fish.n2>div{
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
}