@media screen and (min-width: 320px) and (max-width: 1023px) and (orientation: portrait) {}

/* ----------- iPhone 4 - 5----------- */

@media only screen and (min-device-width: 319px) {}




/* ----------- iPhone 6----------- */

@media only screen and (min-device-width: 375px) {}




/* ----------- iPhone 6 Plus----------- */

@media only screen and (min-device-width: 414px) {}




/* ----------- Tablets----------- */

@media only screen and (min-width: 992px) {

    body {
        color: #333;
        font-size: 2em;
        background-color: #fafafa;
        letter-spacing: 1px;
        font-weight: bold !important;
    }

    #cover .lang {
        right: 12%;
        bottom: 30%;
    }

    #cover .arrow {
        right: 12%;
        bottom: 12%;
    }

    #cover .clouds {
        margin-top: -6%;
    }

    .characters .male,
    .characters .female {
        width: 14.87rem;
        height: 14.5rem;
    }

    #scene0 .characters .male {
        margin-left: -20rem;
    }

    #scene1 .characters .male.ready,
    #scene1 .characters .female.ready {
        left: -2rem;
        -webkit-transform: translateX(13rem);
        transform: translateX(13rem);
    }

    #scene1 #bubbles .excited {
        width: 230px;
        height: 225px;
    }

    #scene1 #bubbles .joyful {
        width: 199px;
        height: 196px;
    }

    #scene1 #bubbles .responsible {
        width: 230px;
        height: 225px;
    }

    #scene1 #bubbles .surprised {
        width: 230px;
        height: 225px;
    }

    #scene1 #bubbles .expected {
        width: 230px;
        height: 225px;
    }

    #scene1 #bubbles .anxious {
        width: 230px;
        height: 225px;
    }

    #scene1 #bubbles .grateful {
        width: 208px;
        height: 203px;
    }

    #scene1 #bubbles .cherished {
        width: 214px;
        height: 209px;
    }

    #scene1 #bubbles .confused {
        width: 220px;
        height: 215px;
    }

    #scene1 #bubbles .nervous {
        width: 222px;
        height: 218px;
    }

    #scene1 #bubbles .heavy-hearted {
        width: 250px;
        height: 246px;
    }
}

@media only screen and (min-width: 1200px) {}



/* ----------- Labtops----------- */

@media only screen and (min-width: 1281px) {}



/* ----------- PC----------- */

@media only screen and (min-width: 1680px) {}



/* ----------- fullscreen----------- */
@media all and (display-mode: fullscreen) {
    .characters {
        bottom: 60px;
    }

    #scene2 #balloons .characters{
        bottom: 95px !important;
        left: 5.5rem !important;
    }

    #scene2 #balloons .characters2{
        bottom: 95px !important;
        left: -4.3rem !important;
    }

    #scene2 #balloons.next{
        bottom: 5%
    }

    #scene2 #luggages{
        bottom: 60px !important;
    }

    #scene2 #balloons .set1.togo.s5 {
        left: 6.2%;
    }

    #scene2 #balloons .set1.togo.s6 {
        left: 8.6%;
        -webkit-transform: scale(0.5) rotate(26deg) translate(25%, 33%);
        -moz-transform: scale(0.5) rotate(26deg) translate(25%, 33%);
        transform: scale(0.5) rotate(26deg) translate(25%, 33%);
    }

    #scene2 #balloons .set2.togo.s1 {
        left: 4.1%;
        -webkit-transform: scale(0.5) rotate(-16deg) translate(0%, -39%);
        -moz-transform: scale(0.5) rotate(-16deg) translate(0%, -39%);
        transform: scale(0.5) rotate(-16deg) translate(0%, -39%);
    }

    #scene2 #balloons .set2.togo.s2 {
        left: 6.6%;
        -webkit-transform: scale(0.5) rotate(-12deg) translate(-20%, -68%);
        -moz-transform: scale(0.5) rotate(-12deg) translate(-20%, -68%);
        transform: scale(0.5) rotate(-12deg) translate(-20%, -68%);
    }

    #scene2 #balloons .set2.togo.s3 {
        left: 5.3%;
        -webkit-transform: scale(0.5) rotate(-24deg) translate(0%, -70%);
        -moz-transform: scale(0.5) rotate(-24deg) translate(0%, -70%);
        transform: scale(0.5) rotate(-24deg) translate(0%, -70%);
    }

    #scene2 #balloons .set2.togo.s4 {
        left: 4.4%;
        -webkit-transform: scale(0.5) rotate(-32deg) translate(0%, -46%);
        -moz-transform: scale(0.5) rotate(-32deg) translate(0%, -46%);
        transform: scale(0.5) rotate(-32deg) translate(0%, -46%);
    }

    #scene2 #balloons .set2.togo.s5 {
        left: 3.2%;
        -webkit-transform: scale(0.5) rotate(12deg) translate(5%, -67%);
        -moz-transform: scale(0.5) rotate(12deg) translate(5%, -67%);
        transform: scale(0.5) rotate(12deg) translate(5%, -67%);
    }

    #scene2 #balloons .set2.togo.s6 {
        left: 2.8%;
        -webkit-transform: scale(0.5) rotate(26deg) translate(5%, -70%);
        -moz-transform: scale(0.5) rotate(26deg) translate(5%, -70%);
        transform: scale(0.5) rotate(26deg) translate(5%, -70%);
    }

    #scene2 #balloons .set2.togo.s7 {
        left: 2.4%;
        -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, -72%);
        -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, -72%);
        transform: scale(0.5) rotate(-21deg) translate(-20%, -72%);
    }

    #scene2 #balloons .set2.togo.s8 {
        left: 7.5%;
        -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, -102%);
        -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, -102%);
        transform: scale(0.5) rotate(-21deg) translate(-20%, -102%);
    }

    #scene2 #balloons .set2.togo.s10 {
        -webkit-transform: scale(0.5) rotate(11deg) translate(3%, -96%);
        -moz-transform: scale(0.5) rotate(11deg) translate(3%, -96%);
        transform: scale(0.5) rotate(11deg) translate(43 -96%);
    }

    #scene2 #balloons .set2.togo.s11 {
        left: -1%;
        -webkit-transform: scale(0.5) rotate(26deg) translate(-15%, -104%);
        -moz-transform: scale(0.5) rotate(26deg) translate(-15%, -104%);
        transform: scale(0.5) rotate(26deg) translate(-15%, -104%);
    }

    #scene2 #balloons .set2.togo.s12 {
        -webkit-transform: scale(0.5) rotate(-11deg) translate(-20%, -125%);
        -moz-transform: scale(0.5) rotate(-11deg) translate(-20%, -125%);
        transform: scale(0.5) rotate(-11deg) translate(-20%, -125%);
    }

    #scene2 #balloons .set2.togo.s13 {
        -webkit-transform: scale(0.5) rotate(-6deg) translate(-30%, -125%);
        -moz-transform: scale(0.5) rotate(-6deg) translate(-30%, -125%);
        transform: scale(0.5) rotate(-6deg) translate(-30%, -125%);
    }

    #scene2 #balloons .set2.togo.s14 {
        -webkit-transform: scale(0.5) rotate(7deg) translate(20%, -125%);
        -moz-transform: scale(0.5) rotate(7deg) translate(20%, -125%);
        transform: scale(0.5) rotate(7deg) translate(20%, -125%);
    }

    #scene2 #balloons .set2.togo.s15 {
        -webkit-transform: scale(0.5) rotate(26deg) translate(-15%, -135%);
        -moz-transform: scale(0.5) rotate(26deg) translate(-15%, -135%);
        transform: scale(0.5) rotate(26deg) translate(-15%, -135%);
    }

    #scene2 #balloons .set2.togo.s16 {

    }

    #scene2 #balloons .set2.togo.s17 {

    }


}
;