/******* clouds *******/

.cloud_01 {
    -webkit-animation: clouds_01 55s linear infinite;
    -moz-animation: clouds_01 55s linear infinite;
    -ms-animation: clouds_01 55s linear infinite;
    -o-animation: clouds_01 55s linear infinite;
    animation: clouds_01 55s linear infinite;
}

@-webkit-keyframes clouds_01 {
    100% {-webkit-transform: translateX(1563px);}
}

@keyframes clouds_01 {
    100% {
        -ms-transform: translateX(1563px);
        -o-transform: translateX(1563px);
        -moz-transform: translateX(1563px);
        transform: translateX(1563px);
    }
}

.cloud_02 {
    -webkit-animation: clouds_02 85s linear infinite;
    -moz-animation: clouds_02 85s linear infinite;
    -ms-animation: clouds_02 85s linear infinite;
    -o-animation: clouds_02 85s linear infinite;
    animation: clouds_02 85s linear infinite;
}

@-webkit-keyframes clouds_02 {
    100% {-webkit-transform: translateX(1413px);}
}

@keyframes clouds_02 {
    100% {
        -moz-transform: translateX(1413px);
        -ms-transform: translateX(1413px);
        -o-transform: translateX(1413px);
        transform: translateX(1413px);
    }
}

.cloud_03 {
    -webkit-animation: clouds_03 135s linear infinite;
    -moz-animation: clouds_03 135s linear infinite;
    -ms-animation: clouds_03 135s linear infinite;
    -o-animation: clouds_03 135s linear infinite;
    animation: clouds_03 135s linear infinite;
}

@-webkit-keyframes clouds_03 {
    100% {-webkit-transform: translateX(1876px);}
}

@keyframes clouds_03 {
    100% {
        -moz-transform: translateX(1876px);
        -ms-transform: translateX(1876px);
        -o-transform: translateX(1876px);
        transform: translateX(1876px);
    }
}

.cloud_04 {
    -webkit-animation: clouds_04 185s linear infinite;
    -moz-animation: clouds_04 185s linear infinite;
    -ms-animation: clouds_04 185s linear infinite;
    -o-animation: clouds_04 185s linear infinite;
    animation: clouds_04 185s linear infinite;
}

@-webkit-keyframes clouds_04 {
    100% {-webkit-transform: translateX(2451px);}
}

@keyframes clouds_04 {
    100% {
        -moz-transform: translateX(2451px);
        -ms-transform: translateX(2451px);
        -o-transform: translateX(2451px);
        transform: translateX(2451px);
    }
}


.cloud_05 {
    -webkit-animation: clouds_05 225s linear infinite;
    -moz-animation: clouds_05 225s linear infinite;
    -ms-animation: clouds_05 225s linear infinite;
    -o-animation: clouds_05 225s linear infinite;
    animation: clouds_05 225s linear infinite;
}

@-webkit-keyframes clouds_05 {
    100% {-webkit-transform: translateX(1255px);}
}

@keyframes clouds_05 {
    100% {
        -moz-transform: translateX(1255px);
        -ms-transform: translateX(1255px);
        -o-transform: translateX(1255px);
        transform: translateX(1255px);
    }
}

.cloud_06 {
    -webkit-animation: clouds_06 235s linear infinite;
    -moz-animation: clouds_06 235s linear infinite;
    -ms-animation: clouds_06 235s linear infinite;
    -o-animation: clouds_06 235s linear infinite;
    animation: clouds_06 235s linear infinite;
}

@-webkit-keyframes clouds_06 {
    100% {-webkit-transform: translateX(1074px);}
}


@keyframes clouds_06 {
    100% {
        -moz-transform: translateX(1074px);
        -ms-transform: translateX(1074px);
        -o-transform: translateX(1074px);
        transform: translateX(1074px);
    }
}

/******* /clouds *******/

/******* tips **********/
.iphone .note {
    opacity: 1;
    -webkit-transition: opacity .5s .4s, top .5s .4s;
    -moz-transition: opacity .5s .4s, top .5s .4s;
    -ms-transition: opacity .5s .4s, top .5s .4s;
    -o-transition: opacity .5s .4s, top .5s .4s;
    transition: opacity .5s, top .5s;
}

.iphone .note.hidden {
    opacity: 0;
}

.iphone .note-switch-views.hidden {
    top: 618px;
}

.iphone .note-bounce-menu.hidden {
    top: 760px;
}

.iphone .note-unique-id.hidden {
    top: 202px;
}

.iphone .note-access.hidden {
    top: 630px;
}

.iphone .note-search.hidden {
    top: 225px;
}

.iphone .note-nearby.hidden {
    top: 357px;
}

.iphone .note-introductions.hidden {
    top: 301px;
}

.iphone .note-perpetual.hidden {
    top: 476px;
}
/******* /tips **********/

/*************************************************************************/
/**************************** MENU NAVBAR ********************************/
/*************************************************************************/

/**** CIRCLES ****/
.iphone.finished .app-nav-bg {
    -webkit-animation: scale 0.6s;
    -moz-animation: scale 0.6s;
    -ms-animation: scale 0.6s;
    -o-animation: scale 0.6s;
    animation: scale 0.6s;
    height:236px;
    width: 236px;
}

.iphone.unfinished .app-nav-bg {
    -webkit-animation: unscale 0.6s forwards;
    -moz-animation: unscale 0.6s forwards;
    -ms-animation: unscale 0.6s forwards;
    -o-animation: unscale 0.6s forwards;
    animation: unscale 0.6s forwards;
    height:236px;
    width: 236px;
}

.iphone.finished .app-nav-bg > div {
    -webkit-animation: scale .6s .1s;
    -moz-animation: scale .6s .1s;
    -ms-animation: scale .6s .1s;
    -o-animation: scale .6s .1s;
    animation: scale .6s .1s;
    height: 155px;
    width: 155px;
}

.iphone.unfinished .app-nav-bg > div {
    -webkit-animation: unscale .6s forwards;
    -moz-animation: unscale .6s forwards;
    -ms-animation: unscale .6s forwards;
    -o-animation: unscale .6s forwards;
    animation: unscale .6s forwards;
    height: 155px;
    width: 155px;
}
/**** /CIRCLES ****/

/**** ADD BUTTON ****/
.iphone.finished .app-nav-btn-add {
    -webkit-animation: btnPlus .5s .3s forwards, unblurred .4s .5s;
    -moz-animation: btnPlus .5s .3s forwards, unblurred .4s .5s;
    -ms-animation: btnPlus .5s .3s forwards, unblurred .4s .5s;
    -o-animation: btnPlus .5s .3s forwards, unblurred .4s .5s;
    animation: btnPlus .5s .3s forwards, unblurred .4s .5s;
    width: 56px;
    height: 56px;
}

.iphone.unfinished .app-nav-btn-add {
    -webkit-animation: btnPlusReverse .5s, blurred .5s;
    -moz-animation: btnPlusReverse .5s, blurred .5s;
    -ms-animation: btnPlusReverse .5s, blurred .5s;
    -o-animation: btnPlusReverse .5s, blurred .5s;
    animation: btnPlusReverse .5s, blurred .5s;
}

@-webkit-keyframes btnPlus {
    0% { -webkit-transform: scale(0) translate(0, 0); }
    78% { -webkit-transform: scale(1) translate(-132px, 19px); }
    100% { -webkit-transform: scale(1) translate(-120px, 16px); }
}

@keyframes btnPlus {
    0% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
    78% {
        -moz-transform: scale(1) translate(-132px, 19px);
        -ms-transform: scale(1) translate(-132px, 19px);
        -o-transform: scale(1) translate(-132px, 19px);
        transform: scale(1) translate(-132px, 19px);
    }
    100% {
        -moz-transform: scale(1) translate(-120px, 16px);
        -ms-transform: scale(1) translate(-120px, 16px);
        -o-transform: scale(1) translate(-120px, 16px);
        transform: scale(1) translate(-120px, 16px);
    }
}

@-webkit-keyframes btnPlusReverse {
    0% { -webkit-transform: scale(1) translate(-120px, 16px); }
    22% { -webkit-transform: scale(1) translate(-132px, 19px); }
    100% { -webkit-transform: scale(0) translate(0, 0); }
}

@keyframes btnPlusReverse {
    0% {
        -moz-transform: scale(1) translate(-120px, 16px);
        -ms-transform: scale(1) translate(-120px, 16px);
        -o-transform: scale(1) translate(-120px, 16px);
        transform: scale(1) translate(-120px, 16px);
    }
    22% {
        -moz-transform: scale(1) translate(-132px, 19px);
        -ms-transform: scale(1) translate(-132px, 19px);
        -o-transform: scale(1) translate(-132px, 19px);
        transform: scale(1) translate(-132px, 19px);
    }
    100% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
}

/**** /ADD BUTTON ****/

/**** ME BUTTON ****/
.iphone.finished .app-nav-btn-me {
    -webkit-animation: btnMe .5s .4s forwards, unblurred .4s .5s;
    -moz-animation: btnMe .5s .4s forwards, unblurred .4s .5s;
    -ms-animation: btnMe .5s .4s forwards, unblurred .4s .5s;
    -o-animation: btnMe .5s .4s forwards, unblurred .4s .5s;
    animation: btnMe .5s .4s forwards, unblurred .4s .5s;
    width: 44px;
    height: 44px;
}

.iphone.unfinished .app-nav-btn-me {
    -webkit-animation: btnMeReverse .5s, blurred .4s;
    -moz-animation: btnMeReverse .5s, blurred .4s;
    -ms-animation: btnMeReverse .5s, blurred .4s;
    -o-animation: btnMeReverse .5s, blurred .4s;
    animation: btnMeReverse .5s, blurred .5s;
}

@-webkit-keyframes btnMe {
    0% { -webkit-transform: scale(0) translate(0, 0); }
    78% { -webkit-transform: scale(1) translate(-90px, -87px); }
    100% { -webkit-transform: scale(1) translate(-78px, -82px); }
}

@keyframes btnMe {
    0% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
    78% {
        -moz-transform: scale(1) translate(-90px, -87px);
        -ms-transform: scale(1) translate(-90px, -87px);
        -o-transform: scale(1) translate(-90px, -87px);
        transform: scale(1) translate(-90px, -87px);
    }
    100% {
        -moz-transform: scale(1) translate(-78px, -82px);
        -ms-transform: scale(1) translate(-78px, -82px);
        -o-transform: scale(1) translate(-78px, -82px);
        transform: scale(1) translate(-78px, -82px);
    }
}

@-webkit-keyframes btnMeReverse {
    0% { -webkit-transform: scale(1) translate(-78px, -82px); }
    22% { -webkit-transform: scale(1) translate(-90px, -87px); }
    100% { -webkit-transform: scale(0) translate(0, 0); }
}

@keyframes btnMeReverse {
    0% {
        -moz-transform: scale(1) translate(-78px, -82px);
        -ms-transform: scale(1) translate(-78px, -82px);
        -o-transform: scale(1) translate(-78px, -82px);
        transform: scale(1) translate(-78px, -82px);
    }
    22% {
        -moz-transform: scale(1) translate(-90px, -87px);
        -ms-transform: scale(1) translate(-90px, -87px);
        -o-transform: scale(1) translate(-90px, -87px);
        transform: scale(1) translate(-90px, -87px);
    }
    100% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
}
/**** /ME BUTTON ****/

/**** NOTIFY BUTTON ****/
.iphone.finished .app-nav-btn-notif {
    -webkit-animation: btnNotify .5s .5s forwards, unblurred .4s .5s;
    -moz-animation: btnNotify .5s .5s forwards, unblurred .4s .5s;
    -ms-animation: btnNotify .5s .5s forwards, unblurred .4s .5s;
    -o-animation: btnNotify .5s .5s forwards, unblurred .4s .5s;
    animation: btnNotify .5s .5s forwards, unblurred .4s .5s;
    width: 56px;
    height: 56px;
}

.iphone.unfinished .app-nav-btn-notif {
    -webkit-animation: btnNotifyReverse .5s, blurred .5s;
    -moz-animation: btnNotifyReverse .5s, blurred .5s;
    -ms-animation: btnNotifyReverse .5s, blurred .5s;
    -o-animation: btnNotifyReverse .5s, blurred .5s;
    animation: btnNotifyReverse .5s, blurred .5s;
}

@-webkit-keyframes btnNotify {
    0% { -webkit-transform: scale(0) translate(0, 0); }
    78% { -webkit-transform: scale(1) translate(20px, -130px); }
    100% { -webkit-transform: scale(1) translate(18px, -122px); }
}

@keyframes btnNotify {
    0% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
    78% {
        -moz-transform: scale(1) translate(20px, -130px);
        -ms-transform: scale(1) translate(20px, -130px);
        -o-transform: scale(1) translate(20px, -130px);
        transform: scale(1) translate(20px, -130px);
    }
    100% {
        -moz-transform: scale(1) translate(18px, -122px);
        -ms-transform: scale(1) translate(18px, -122px);
        -o-transform: scale(1) translate(18px, -122px);
        transform: scale(1) translate(18px, -122px);
    }
}

@-webkit-keyframes btnNotifyReverse {
    0% { -webkit-transform: scale(1) translate(18px, -122px); }
    22% { -webkit-transform: scale(1) translate(20px, -130px); }
    100% { -webkit-transform: scale(0) translate(0, 0); }
}

@keyframes btnNotifyReverse {
    0% {
        -moz-transform: scale(1) translate(18px, -122px);
        -ms-transform: scale(1) translate(18px, -122px);
        -o-transform: scale(1) translate(18px, -122px);
        transform: scale(1) translate(18px, -122px);
    }
    22% {
        -moz-transform: scale(1) translate(20px, -130px);
        -ms-transform: scale(1) translate(20px, -130px);
        -o-transform: scale(1) translate(20px, -130px);
        transform: scale(1) translate(20px, -130px);
    }
    100% {
        -moz-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        -o-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
    }
}
/**** /NOTIFY BUTTON ****/

/**** MOVE ANIMATION ****/
@-webkit-keyframes blurred {
    0% { -webkit-filter: none; }
    22% { -webkit-filter: none; }
    100% { -webkit-filter: blur(10px); }
}

@keyframes blurred {
    0% {
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }
    22% {
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }
    100% {
        -moz-filter: blur(10px);
        -ms-filter: blur(10px);
        -o-filter: blur(10px);
        filter: blur(10px);
    }
}

@-webkit-keyframes unblurred {
    0% { -webkit-filter: blur(10px); }
    78% { -webkit-filter: none; }
}

@keyframes unblurred {
    0% {
        -moz-filter: blur(10px);
        -ms-filter: blur(10px);
        -o-filter: blur(10px);
        filter: blur(10px);
    }
    78% {
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }
}

@-webkit-keyframes scale {
    from { -webkit-transform: scale(0); }
    to { -webkit-transform: scale(1); }
}

@keyframes scale {
    from {
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    to {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes unscale {
    from { -webkit-transform: scale(1); }
    to { -webkit-transform: scale(0); }
}

@keyframes unscale {
    from {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
}

/**** MOVE ANIMATION ****/

/** CIRCLES **/
.circle_1, .circle_2, .circle_3 {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.6);

    -webkit-animation: circle-unscale .8s forwards;
    -moz-animation: circle-unscale .8s forwards;
    -ms-animation: circle-unscale .8s forwards;
    -o-animation: circle-unscale .8s forwards;
    animation: circle-unscale .8s forwards;
}

.circle_1.transformed {
    -webkit-animation: circle-scale .8s forwards;
    -moz-animation: circle-scale .8s forwards;
    -ms-animation: circle-scale .8s forwards;
    -o-animation: circle-scale .8s forwards;
    animation: scale .8s forwards;
}

.circle_2.transformed {
    -webkit-animation: circle-scale .8s .1s forwards;
    -moz-animation: circle-scale .8s .1s forwards;
    -ms-animation: circle-scale .8s .1s forwards;
    -o-animation: circle-scale .8s .1s forwards;
    animation: circle-scale .8s .1s forwards;
}

.circle_3.transformed {
    -webkit-animation: circle-scale .8s .1s forwards;
    -moz-animation: circle-scale .8s .1s forwards;
    -ms-animation: circle-scale .8s .1s forwards;
    -o-animation: circle-scale .8s .1s forwards;
    animation: circle-scale .8s .1s forwards;
}

@-webkit-keyframes circle-scale {
    from { -webkit-transform: scale(.8); }
    to { -webkit-transform: scale(1); }
}

@keyframes circle-scale {
    from {
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
    }
    to {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes circle-unscale {
    from { -webkit-transform: scale(1); }
    to { -webkit-transform: scale(.8); }
}

@keyframes circle-unscale {
    from {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
    }
}

/*************************************************************************/
/**************************** MENU NAVBAR ********************************/
/*************************************************************************/