* {
    padding: 0;
    margin: 0;
}

body {}

h1 {
    font-family: 'Indie Flower', cursive;
    font-size: 50px;
    color: #666;
}

.kite {
    width: 100px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.kite img {
    width: 100%;
}

.intro-head {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 10vh 0;
}

.full-width {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.left-house {
    width: 30vw;
    position: absolute;
    left: 0;
    top: 0vw;
}

.left-back-house1 {
    width: 20vw;
    position: absolute;
    left: 15vw;
    top: 15vw;
    z-index: -10;
}

.left-back-house2 {
    width: 15vw;
    position: absolute;
    left: 25vw;
    top: 25vw;
    z-index: -11;
}

.right-back-house1 {
    width: 20vw;
    position: absolute;
    right: 15vw;
    top: 15vw;
    z-index: -10;
}

.right-back-house2 {
    width: 15vw;
    position: absolute;
    right: 25vw;
    top: 25vw;
    z-index: -11;
}

.right-house {
    width: 30vw;
    position: absolute;
    right: 0;
    top: 0vw;
}

.left-balcony1 {
    width: 34%;
    position: absolute;
    left: 0;
    top: 16vw;
}

.right-balcony1 {
    width: 34%;
    position: absolute;
    right: 0;
    top: 16vw;
}

.left-balcony2 {
    width: 43%;
    position: absolute;
    left: 0;
    top: 45vw;
}

.right-balcony2 {
    width: 43%;
    position: absolute;
    right: 0;
    top: 45vw;
}

.left-balcony3 {
    width: 35%;
    position: absolute;
    left: 0;
    top: 90vw;
}

.right-balcony3 {
    width: 35%;
    position: absolute;
    right: 0;
    top: 90vw;
}

.kite-anim {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    animation: to-fro 1s infinite;
}

@keyframes to-fro {
    0% {
        transform: perspective(400px) rotateY(0deg)
    }
    50% {
        transform: perspective(400px) rotateY(20deg)
    }
    100% {
        transform: perspective(400px) rotateY(0deg)
    }
}

.kite-move-anim {
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    animation: side-side 1s infinite;
}

@keyframes side-side {
    0% {
        transform: translateX(0px)
    }
    50% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0px)
    }
}

.fish {
    position: absolute;
    top: 7.5vw;
    left: 4.5vw;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    animation: up-down 1s infinite;
}

@keyframes up-down {
    0% {
        top: 7vw;
    }
    50% {
        top: 7.25vw;
    }
    100% {
        top: 7vw;
    }
}

.taar1 {
    width: 50%;
    top: 62vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
}

.taar-anim {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    animation: wind-swing 5s infinite;
}

@keyframes wind-swing {
    0% {
        transform: perspective(400px) rotateX(0deg)
    }
    10% {
        transform: perspective(400px) rotateX(-8deg)
    }
    20% {
        transform: perspective(400px) rotateX(0deg)
    }
    30% {
        transform: perspective(400px) rotateX(-4deg)
    }
    40% {
        transform: perspective(400px) rotateX(0deg)
    }
    50% {
        transform: perspective(400px) rotateX(-2deg)
    }
    60% {
        transform: perspective(400px) rotateX(0deg)
    }
}

.taar2 {
    width: 50%;
    top: 93vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
}

.cat {
    width: 8%;
    position: absolute;
    left: 50%;
    top: -3.2vw;
}

.cat-tail {
    width: 3%;
    position: absolute;
    left: 49.5%;
    top: 1vw;
}

.tail-anim {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    animation: tail-swing 5s infinite;
}

@keyframes tail-swing {
    0% {
        transform: rotateZ(0deg)
    }
    50% {
        transform: rotateZ(-25deg)
    }
    100% {
        transform: rotateZ(0deg)
    }
}

.parallax {
    position: absolute;
}

.wall {
    width: 100%;
    height: 100vw;
    position: absolute;
    left: 0;
    top: 60vw;
}

.cycle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
}

.cycle-anim {
    -webkit-transition: -webkit-transform 5s;
    -moz-transition: -moz-transform 5s;
    transition: transform 5s;
    animation: pass 6s infinite;
}

@keyframes pass {
    0% {
        right: -100vw;
    }
    80% {
        right: 150vw;
    }
    100% {
        right: 150vw;
    }
}

.menu-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border:1px solid #000;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 50;
    cursor: pointer;
}

.menu-icon img {
    padding: 15px 0 0 15px;
    width: 30px;
}

.menu-holder {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 50;
    background: rgba(0, 0, 0, .6);
}

.menu-box {
    width: 500px;
    background: #fff;
    position: fixed;
    z-index: 51;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    border-radius: 5px;
    padding: 6vh 0;
    font-size: 20px;
    font-family: 'Indie Flower', cursive;
}

.menu-box a {
    display: block;
    text-align: center;
    padding: 20px 0;
    text-decoration: none;
    color: #444;
}

.menu-box a:hover {
    background: #f5f5f5;
}

.menu-close {
    padding: 5px 14px;
    position: absolute;
    right: 0px;
    top: 0px;
    color: red;
    cursor: pointer;
    font-weight: bold;
}

.clock {
    width: 12%;
    position: absolute;
    top: 31%;
    left: 57%;
}

.dial {
    width: 100%;
    z-index: 10;
    position: absolute;
}

.pendulum {
    width: 25%;
    top: 1.8vw;
    position: absolute;
    left: 40%;
    z-index: 0;
}

.pendu-anim {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
    animation: tick-tock 1s infinite;
}

@keyframes tick-tock {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

.parrot {
    width: 20%;
    position: absolute;
    top: 39%;
    left: 24%;
}

.cage-anim {
    -webkit-transition: -webkit-transform 5s;
    -moz-transition: -moz-transform 5s;
    transition: transform 5s;
    animation: tick-tock-parrot 5s infinite;
}

@keyframes tick-tock-parrot {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

@media only screen and (max-width:767px) {
    .menu-box {
        width: 80%;
    }
    .kite img {
        width: 35%;
    }
}