@import url(./nav_menu.css);
html, body{
    width: 100%;
    height: 100%;
    position: relative;
}
/* fix ie11 bug*/
svg:not(:root){
    /*overflow: auto;*/
}
main, header{
    /*解決開啟gpu加速後的閃爍及抖動*/
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
    -webkit-perspective:1000;
}
header{
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
      -o-transition: all 600ms ease;
         transition: all 600ms ease;
    width: 100%;
    height: 80px;
    background-color: #FFF;
    z-index: -1;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    position: absolute;
    -webkit-transform: translate(0px, 1280px);
    transform: translate(0px, 1280px);
    text-align: center;
}
.hidden{
    display: none !important;
}
header.fixed{
    bottom:auto;
    top:0;
    margin-top: 0;
}
header .container{
    position: relative;
    height: 100%;
    max-width: 980px;
    margin: 0 auto;
}
header a.logo{
    margin-top: 1.5em;
    display: inline-block;
}
header a.logo img{
    max-width: 135.6px;
}
.mini-photo>img{
    width: 80%;
    height: 6em;
}
.hidden{
    display: none !important;
}
#progress{
    -webkit-transition: width 0.7s ease;
    -moz-transition: width 0.7s ease;
      -o-transition: width 0.7s ease;
         transition: width 0.7s ease;
    position: absolute;
    bottom: 0;
    background-color: #00A1E9;
    height: 2px;
    width: 0;
}
.page-content{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    background-color: #FFF;
}
.page-content .section{
    height: 100%;
    z-index: 105;
    background-color: #FFF;
}
.page-content .section.fixed{
    margin-top: 80px; /*header高度*/
}
main .section{
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
main .section{
    background-color: #FFFFFF;
}
/* fullpage */
.container{
    position: relative;
    max-width: 980px;
    height: 100%;
    display: block;
    margin: 0 auto;
}
#homepageIntro.fixedHeight{
    height: 100% !important;
}
#homepageIntro.fixedHeight .fp-tableCell{
    height: 100% !important;
}
#homepageIntro .background-img{
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: url('../img/homepage_low.jpg') center center no-repeat;
    background-size: cover;
    z-index: 5;
}
#homepageIntro .background-img.animate{
    -webkit-animation: zoomInBackground 25000ms ease-out infinite;
    -moz-animation: zoomInBackground 25000ms ease-out infinite;
    animation: zoomInBackground 25000ms ease-out infinite;
}
#homepageIntro .background-img.animate.pause{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.zoomIn{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}
#homepageIntro .logo-container{
    position: fixed;
    z-index: 100;
    width: 60%;
    max-width: 700px;
    height: 214px;
    top: 46%;
    left: 50%;
    display: table;
    margin-top: -127px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
#homepageIntro .logo-container .logo{
    width: 100%;
    display: table-cell;
    padding-bottom: 1em;
    vertical-align: middle;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#homepageIntro .logo-container img{
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: 1px solid transparent;
}
/**
*    for parallax
*/
.layer{
    width: 100%;
    height: 100%;
}
.layer div,
.layer img{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
#lookAtUs{
    background: url('../img/unit_1_bg_low.jpg') center center no-repeat;
    background-size: cover;
}
#lookAtUs .girl{
    left: -115px;
    top: -85px;
    background: url(../img/unit_1_girl.png) center no-repeat;
    background-size: cover;
    width: 611px;
    height: 911px;
    -ms-animation: fly 10s .1s infinite ease-in-out;
    -webkit-animation: fly 10s .1s infinite ease-in-out;
    animation: fly 10s .1s infinite ease-in-out;
}
#lookAtUs .balloon1{
    position: absolute;
    right: 40px;
    bottom: 102px;
    background: url(../img/unit_1_airballoon_1.png) center no-repeat;
    background-size: cover;
    width: 104px;
    height: 129px;
    -webkit-animation: fly 14s .5s infinite ease-in-out;
    animation: fly 14s .5s infinite ease-in-out;
}
#lookAtUs .balloon2{
    position: absolute;
    right: -285px;
    top: 100px;
    background: url(../img/unit_1_airballoon_2.png) center no-repeat;
    background-size: cover;
    width: 187px;
    height: 234px;
    -webkit-animation: fly 16s 1s infinite ease-in-out;
    animation: fly 16s 1s infinite ease-in-out;
}
.arrow{
    width: 100%;
    height: 53px;
    overflow: hidden;
    position: relative;
    margin-top: .5em;
}
.arrow-layer{
    position: absolute;
    left: 0px;
    width: 310px;
    height: 53px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.arrow-layer div{
    float: left;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.arrow-layer div:first-child{
    margin-left: 100px;
    opacity: 1;
}
.arrow-layer div:last-child{
    margin-right: 105px;
    opacity: 0;
}
.text:hover .arrow-layer{
    left: -55px;
}
.text:hover .arrow-layer div:first-child{
    opacity: 0;
}
.text:hover .arrow-layer div:last-child{
    opacity: 1;
}
#lookAtUs .text{
    right: 1em;
    top: 35%;
    -webket-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#lookAtUs .arrow-layer{
    width: 315px;
}
#lookAtUs .arrow-layer div:first-child{
    margin-left: 105px;
}
#motivation{
    background: url('../img/unit_2_bg.jpg') center center no-repeat;
    background-size: cover;
}
#motivation .container{
    z-index: 105;
}
#motivation *{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#motivation .fake-circle{
    box-sizing: border-box;
    position: absolute;
    top: 80px;
    border: 1px solid white;
    border-radius: 100%;
    width: 175px;
    height: 175px;
    z-index: 102;
}
#motivation .fake-circle img{
    pointer-events: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
}
#motivation .fake-circle.active{
    opacity: 0;
}
#motivation .fake-circle.active img{
    display: none;
}
#motivation svg{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 101;
    bottom: 0;
}
.text{
    position: absolute;
    top: 80px;
    margin-top: 80px;
    -webkit-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22) 300ms;
    -moz-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22) 300ms;
      -o-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22) 300ms;
         transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22) 300ms;
    opacity: 1;
}
.text.outside-btm,
#lookAtUs .text.outside-btm{
    -webkit-transform: translate3d(0, 60%, 0);
    transform: translate3d(0, 60%, 0);
    opacity: 0;
}
.text.outside-top{
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 0;
}
#motivation .text:nth-child(1){
    left: 1em;
}
#motivation .text:nth-child(2){
    right: 1em;
    top: 35%;
}
#motivation .line{
    width: 35px;
    height: 2px;
    /*border: 1px solid #0096E0;*/
    background-color: #0096E0;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    bottom: 0;
    right: 0;
    -webkit-transition: all .5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -moz-transition: all .5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
      -o-transition: all .5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
         transition: all .5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
#motivation .text:hover .line:first-child{
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
#motivation .text:hover .line:nth-child(2){
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
#motivation .line:first-child{
    top: -67px;
}
#motivation .line:nth-child(2){
    top: -30px;
}
#wing{
    background: url('../img/unit_3_bg.jpg') center center no-repeat;
    background-size: cover;
}
#wing .guy{
    background: url(../img/unit_3_guy.png) center no-repeat;
    background-size: cover;
    width: 374px;
    height: 775px;
    position: absolute;
    bottom: 0px;
    -webkit-transform: translate3d(100px, 2%, 0);
    transform: translate3d(100px, 2%, 0);
    -webkit-animation: wing_guy 6s infinite ease-in-out;
    animation: wing_guy 6s infinite ease-in-out;
}
#wing .guy .light{
    overflow: hidden;
    position: relative;
    left: -20%;
    -webkit-animation: light 6s infinite cubic-bezier(0.77, 0, 0.175, 1);
    animation: light 6s infinite cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes light{
    0%{
        top: 28%;
        opacity: .9;
    }
    20%{
        top:30%;
        opacity: 0;
    }
    100%{
        top: 28%;
        opacity: .9;
    }
}
@keyframes light{
    0%{
        top: 28%;
        opacity: .9;
    }
    20%{
        top:30%;
        opacity: 0;
    }
    100%{
        top: 28%;
        opacity: .9;
    }
}
#wing .wing{
    position: absolute;
    width: 1046px;
    height: 632px;
    background: url(../img/unit_3_wing.png) center no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0px;
    -webkit-animation: wing 6s infinite ease-in-out;
    animation: wing 6s infinite ease-in-out;
    transform-origin: top left;
}
@-webkit-keyframes wing_guy{
    0%{
        -webkit-transform: translate3d(100px, 2%, 0);
    }
    60%{
        -webkit-transform: translate3d(100px, 4%, 0);
    }
    100%{
        -webkit-transform: translate3d(100px, 2%, 0);
    }
}
@keyframes wing_guy{
    0%{
        transform: translate3d(100px, 2%, 0);
    }
    60%{
        transform: translate3d(100px, 4%, 0);
    }
    100%{
        transform: translate3d(100px, 2%, 0);
    }
}
@-webkit-keyframes wing{
    0%{
        -webkit-transform: rotate(0deg) translate3d(415px, -39%, 0);
    }
    60%{
        -webkit-transform: rotate(3deg) translate3d(415px, -38%, 0);
    }
    100%{
        -webkit-transform: rotate(0deg) translate3d(415px, -39%, 0);
    }
}
@keyframes wing{
    0%{
        transform: rotate(0deg) translate3d(415px, -39%, 0);
    }
    60%{
        transform: rotate(3deg) translate3d(415px, -38%, 0);
    }
    100%{
        transform: rotate(0deg) translate3d(415px, -39%, 0);
    }
}
#yourApp{
    background: url('../img/unit_4_bg_low.jpg') center center no-repeat;
    background-size: cover;
}
#yourApp .text:nth-child(1){
    left: 1em;
}
#yourApp .text:nth-child(2){
    right: 1em;
    top: 35%;
}
#goIot{
    background: url('../img/unit_5_bg_low.jpg') center center no-repeat;
    background-size: cover;
}
#goIot .text{
}
#goIot .text:nth-child(1){
    right: 1em;
    top: 35%;
}
#otwo{
    background: url('../img/unit_6_bg_low.jpg') center center no-repeat;
    background-size: cover;
}
#otwo .text,
#wing .text{
    right: 1em;
    top: 35%;
}
#otwo .arrow,
#wing .arrow{
    margin-top: 1em;
}
#otwo .arrow-layer div:first-child{
    margin-left: 102px;
    opacity: 1;
}
#wing .arrow-layer div:first-child{
    margin-left: 108px;
    opacity: 1;
}
#otwo .arrow-layer div:last-child,
#wing .arrow-layer div:last-child{
    margin-right: 105px;
    opacity: 0;
}
#otwo .text:hover .arrow-layer,
#wing .text:hover .arrow-layer{
    left: -42px;
}
#otwo .text:hover .arrow-layer div:first-child,
#wing .text:hover .arrow-layer div:first-child{
    opacity: 0;
}
#otwo .text:hover .arrow-layer div:last-child,
#wing .text:hover .arrow-layer div:last-child{
    opacity: 1;
}
#gallery{
    /*background: url('../img/unit_7_bg.jpg') center top no-repeat;
    background-size: cover;*/
}
#gallery .fp-tableCell{
    position: relative;
}
#gallery svg{
    position: relative;
    top: 80px;
}
#gallery .gallery-bg{
    width: 100%;
    height: 100%;
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
    transform-origin: 0 0;
}
#gallery .gallery-bg img{
    width: 1920px;
    position: absolute;
    top: 0;
}
#gallery .container{
    max-width: 1920px;
    width: 1920px;
    height: auto;
    overflow: hidden;
}
#gallery .grid{
}
#gallery .grid-sizer{
    /*width: 5%;*/
}
#gallery .grid-item{
    box-sizing: border-box;
    width: 230px;
    margin-bottom: 10px;
}
#gallery .grid-item img{
    width: 100%;
    height: 100%;
}
#gallery .grid-item.grid-item-width2{
    width: 320px;
}
#gallery .grid-item.grid-item-width3{
    width: 480px;
}
#gallery .grid-item.grid-item-width4{
    width: 600px;
}
#gallery .grid-item.grid-lgitem-width{
    width: 530px;
}
#gallery .text{
    width: 276px;
    height: 826px;
    border: 3px solid #82C1EA;
    position: absolute;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
      -o-transition: background-color 0.4s ease;
         transition: background-color 0.4s ease;
     -ms-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     cursor: pointer;
}
#gallery .text:hover{
    border-color: #0097E0;
    background-color: #0097E0;
}
#gallery .text .text-pic{
    position: absolute;
    bottom: 1.5em;
    left: 1.8em;
    width: auto;
    height: auto;
}
#gallery .text .arrow{
    margin-top: 0;
    top: 17em;
    left: 1.2em;
    height: 83px;
}
#gallery .text .arrow .arrow-layer{
    width: 365px;
}
#gallery .text:hover .arrow .arrow-layer{
    left: -85px;
}
#letsMeet .fp-tableCell{
    position: relative;
}
#letsMeet .bg.ready{
    visibility: hidden;
}
#letsMeet .bg{
    background: url('../img/unit_8_bg_low.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#letsMeet .layer-bg{
    position: absolute !important;
    top: -5% !important;
    left: -5% !important;
    z-index: -1;
}
.girl{
    position: absolute;
}
#letsMeet .girl{
    height: 110%;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    min-height: 600px;
}
#letsMeet .text{
    cursor: pointer;
    z-index: 1;
    margin: 0;
    right: 0;
    border: 2px solid white;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 5px 0 #6E6E6E;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.1), inset 0 0 2px 2px rgba(0,0,0,.1);
    width: 420px;
    height: 420px;
    text-align: center;
    background: -moz-linear-gradient(top,  rgba(130,193,234,0.6) 0%, rgba(130,193,234,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(130,193,234,0.6) 0%,rgba(130,193,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(130,193,234,0.6) 0%,rgba(130,193,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#997db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    /*23,147,208*/
}
#letsMeet .text:hover{
    background: -moz-linear-gradient(top,  rgba(130,193,234,0.6) 0%, rgba(0,151,224,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(130,193,234,0.6) 0%,rgba(0,151,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(130,193,234,0.6) 0%,rgba(0,151,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#991793d0', endColorstr='#1793d0',GradientType=0 ); /* IE6-9 */
}
#letsMeet .text>img{
    margin-top: 30%;
}
#letsMeet .circle-wrapper{
    height: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%);
}
#letsMeet .arrow{
    height: 60px;
    margin-top: 1em;
}
#letsMeet .arrow-layer{
    width: 100%;
}
#letsMeet .arrow-layer div{
    float: left;
    -webkit-transition: all .4s;
    transition: all .4s;
}
#letsMeet .arrow-layer div:first-child{
    margin-left: 190px;
    opacity: 1;
}
#letsMeet .arrow-layer div:last-child{
    margin-right: 90px;
    opacity: 0;
}
#letsMeet .text:hover .arrow-layer div:first-child{
    opacity: 0;
}
#letsMeet .text:hover .arrow-layer div:last-child{
    opacity: 1;
}
main footer .wrapper{
    height: 174.4px;
    text-align: center;
    position: relative;
}
main footer .wrapper img{
    position: absolute;
    bottom: 2em;
    width: 205.6px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
@-webkit-keyframes fly{
    0%{
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        -ms-transform: translate3d(0, 5%, 0);
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
    100%{
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fly{
    0%{
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        -ms-transform: translate3d(0, 5%, 0);
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
    100%{
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes flyinIe{
    0%{
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        -ms-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
    100%{
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes flyinIeBalloon{
    0%{
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50%{
        -ms-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
    100%{
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@media all and (-ms-high-contrast:none){
    /* for ie 11 */
    #homepageIntro .logo-container{
        position: absolute;
    }
    #letsMeet .layer-bg{
        z-index: 0;
    }
    #lookAtUs .girl{
        -ms-animation: flyinIe 10s .1s infinite ease-in-out;
        animation: flyinIe 10s .1s infinite ease-in-out;
    }
    #lookAtUs .balloon1{
        -ms-animation: flyinIeBalloon 14s .5s infinite ease-in-out;
        animation: flyinIeBalloon 14s .5s infinite ease-in-out;
    }
    #lookAtUs .balloon2{
        -ms-animation: flyinIeBalloon 16s 1s infinite ease-in-out;
        animation: flyinIeBalloon 16s 1s infinite ease-in-out;
    }
}
@media screen and (max-device-width: 480px), screen and (max-device-width: 720px) and (-webkit-min-device-pixel-ratio: 2.0){
    main .section{
        -webkit-backface-visibility: visible;
        -moz-backface-visibility: visible;
        -ms-backface-visibility: visible;
        backface-visibility: visible;

        -webkit-perspective: none;
        -moz-perspective: none;
        -ms-perspective: none;
        perspective: none;
    }
    #fullpage img{
        width: 100%;
        height: auto;
    }
    #fullpage{
        height: auto !important;
    }
    .text{
        -webkit-transition: none;
        transition: none;
        margin-top: 0;
        top: 0;
    }
    .text.outside-btm{
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
    .text.outside-top{
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
    .arrow-layer{
        height: 100%;
        width: 100%;
        transition: none;
    }
    .arrow-layer div{
        transition: none;
    }
    .arrow-layer div:first-child{
        opacity: 1;
        margin-left: 41px;
    }
    .arrow-layer div:last-child{
        opacity: 0;
    }
    header{
        /**
        *  手機圖片版
        */
        /*-webkit-transition: none;
        -moz-transition: none;
          -o-transition: none;
             transition: none;
        -webkit-transform: none;
        transform: none;*/
        z-index: -1;
    }
    header.fixed{
        position: fixed;
        z-index: 1000;
    }
    #homepageIntro{
        height: 100%;
    }
    #homepageIntro .background-img{
        background: url('../img/min/homepage.jpg') center center no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #homepageIntro .logo-container{
        position: absolute;
        z-index: 100;
        width: 60%;
        max-width: 700px;
        height: 214px;
        top: 0;
        left: 0;
        display: table;
        bottom: 0;
        right: 0;
        margin: auto;
        -webkit-transform: none;
        transform: none;
    }
    #homepageIntro .logo-container .logo{
        opacity: 0;
    }
    #homepageIntro .logo-container .logo.zoomIn{
        opacity: 1;
    }
    #lookAtUs{
        background: url('../img/min/unit_1_bg.jpg') center center no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #lookAtUs .girl{
        left: -55px;
        top: -80px;
        width: 305.5px;
        height: 455.5px;
    }
    #lookAtUs .balloon1{
        width: 52px;
        height: 64.5px;
        right: 30px;
        bottom: 10%;
        top: 72%;
    }
    #lookAtUs .balloon2{
        width: 93.5px;
        height: 117px;
    }
    #lookAtUs .text{
        top: 40%;
    }
    #lookAtUs .text>img{
        width: 101.2px;
    }
    #lookAtUs .text:hover .arrow-layer{
        left: -20px;
    }
    #lookAtUs .arrow{
        height: 27px;
    }
    #lookAtUs .arrow-layer{
        width: 100%;
    }
    #lookAtUs .arrow-layer div:first-child{
        margin-left: 41px;
    }
    #lookAtUs .arrow-layer div:first-child img{
        width: 18.4px;
    }
    #lookAtUs .arrow-layer div:last-child{
        margin-right: 15px;
    }
    #lookAtUs .arrow-layer div:last-child img{
        width: 22px;
    }
    #motivation{
        background: url('../img/min/unit_2_bg.jpg') 45% no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #motivation .fake-circle img{
        width: 48px;
    }
    #motivation .text:first-child{
        top: 5em;
    }
    #motivation .text:first-child>img{
        width: 211.6px;
    }
    #motivation .text:nth-child(2){
        top: 40%;
    }
    #motivation .text:nth-child(2)>img{
        width: 97.6px;
    }
    #motivation .line{
        -webkit-transform: scale(.5, .5);
        transform: scale(.5);
    }
    #motivation .line:first-child{
        top: -30px;
    }
    #motivation .line:nth-child(2){
        top: -10px;
    }
    #motivation .text:hover .line:first-child{
        -webkit-transform: rotate(30deg) scale(.5);
        transform: rotate(30deg) scale(.5);
    }
    #motivation .text:hover .line:nth-child(2){
        -webkit-transform: rotate(-30deg) scale(.5);
        transform: rotate(-30deg) scale(.5);
    }
    #wing{
        background: url('../img/min/unit_3_bg.jpg') 45% no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #wing .guy{
        background-size: contain;
        width: 249px;
        height: 421px;
        -webkit-animation: wing_guy 6s infinite ease-in-out;
        animation: wing_guy 6s infinite ease-in-out;
    }
    #wing .guy .light{
        top: 15%;
        left: -10%;;
    }
    @keyframes light{
        0%{
            top: 16%;
            opacity: .9;
        }
        20%{
            top: 18%;
            opacity: 0;
        }
        100%{
            top: 16%;
            opacity: .9;
        }
    }
    #wing .wing{
        background-size: contain;
        width: 697px;
        height: 517px;
        -webkit-animation: wing 6s infinite ease-in-out;
        animation: wing 6s infinite ease-in-out;
    }
    @-webkit-keyframes wing_guy{
        0%{
            -webkit-transform: translate3d(0px, 2%, 0);
        }
        60%{
            -webkit-transform: translate3d(0px, 4%, 0);
        }
        100%{
            -webkit-transform: translate3d(0px, 2%, 0);
        }
    }
    @keyframes wing_guy{
        0%{
            transform: translate3d(0px, 2%, 0);
        }
        60%{
            transform: translate3d(0px, 4%, 0);
        }
        100%{
            transform: translate3d(0px, 2%, 0);
        }
    }
    @-webkit-keyframes wing{
        0%{
            -webkit-transform: rotate(0deg) translate3d(170px, -9%, 0);
        }
        60%{
            -webkit-transform: rotate(3deg) translate3d(170px, -8%, 0);
        }
        100%{
            -webkit-transform: rotate(0deg) translate3d(170px, -9%, 0);
        }
    }
    @keyframes wing{
        0%{
            transform: rotate(0deg) translate3d(170px, -9%, 0);
        }
        60%{
            transform: rotate(3deg) translate3d(170px, -8%, 0);
        }
        100%{
            transform: rotate(0deg) translate3d(170px, -9%, 0);
        }
    }
    #yourApp{
        background: url('../img/min/unit_4_bg.jpg') 45% no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #yourApp .text:first-child{
        top: 5em;
    }
    #yourApp .text:first-child>img{
        width: 139.6px
    }
    #yourApp .text:last-child{
        top: 40%;
    }
    #yourApp .text:nth-child(2)>img{
        width: 97.2px
    }
    #yourApp .text:hover .arrow-layer{
        left: -20px;
    }
    #yourApp .arrow{
        height: 27px;
    }
    #yourApp .arrow-layer div:first-child{

    }
    #yourApp .arrow-layer div:first-child img{
        width: 18.4px;
    }
    #yourApp .arrow-layer div:last-child{
        margin-right: 15px;
    }
    #yourApp .arrow-layer div:last-child img{
        width: 22px;
    }
    #goIot{
        background: url('../img/min/unit_5_bg.jpg') 45% no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #goIot .text:first-child{
        top: 40%;
    }
    #goIot .text>img{
        width: 98.8px;
    }
    #goIot .text:hover .arrow-layer{
        left: -20px;
    }
    #goIot .arrow{
        height: 27px;
    }
    #goIot .arrow-layer div:first-child{

    }
    #goIot .arrow-layer div:first-child img{
        width: 18.4px;
    }
    #goIot .arrow-layer div:last-child{
        margin-right: 15px;
    }
    #goIot .arrow-layer div:last-child img{
        width: 22px;
    }
    #otwo{
        background: url('../img/min/unit_6_bg.jpg') 45% no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0,0,0);
    }
    #otwo .arrow,
    #wing .arrow{
        margin-top: 10px;
        height: 21px;
    }
    #otwo .arrow-layer,
    #wing .arrow-layer{
        width: 100%;
    }
    #otwo .text:first-child,
    #wing .text:first-child{
        top: 40%;
    }
    #otwo .text>img,
    #wing .text>img{
        width: 94.8px;
    }
    #otwo .text:hover .arrow-layer,
    #wing .text:hover .arrow-layer{
        left: -17px;
    }
    #otwo .arrow-layer div:first-child,
    #wing .arrow-layer div:first-child{
        margin-left: 41px;
    }
    #otwo .arrow-layer div:last-child,
    #wing .arrow-layer div:last-child{
        margin-right: 20px;
    }
    #otwo .arrow-layer div:first-child img,
    #wing .arrow-layer div:first-child img{
        width: 13.6px;
    }
    #otwo .arrow-layer div:last-child img,
    #wing .arrow-layer div:last-child img{
        width: 17.2px;
    }
    #gallery{
    }
    #gallery svg{
        top: 0px;
    }
    #gallery .text .arrow .arrow-layer{
        width: 110%;
    }
    #gallery .text .arrow{
        left: 0;
    }
    #gallery .arrow-layer div:first-child{
        margin-left: 120px;
    }
    #gallery .arrow-layer div:last-child{
        margin-right: 0px;
    }
    #gallery .arrow-layer div:first-child>img{
        width: auto;
    }
    #letsMeet .layer{
        position: absolute;
        z-index: 99;
    }
    #letsMeet .girl{
        position: absolute;
        top: 0;
        height: 100%;
        min-height: 500px;
        -webkit-transform: translate(-13%, 0);
        transform: translate(-13%, 0);
    }
    #letsMeet .circle-wrapper{
        width: 100%;
        height: 100%;
        top: 55%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    #letsMeet .text{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 150px;
        left: 0;
        border-width: 1px;
        margin: auto;
    }
    #letsMeet .text>img{
        -webkit-transform: translate(0, 20%);
        transform: translate(0, 20%);
        width: 92.8px;
        margin-top: 20%;
    }
    #letsMeet .arrow{
        margin: 1em auto 0 auto;
        height: 21px;
    }
    #letsMeet .text:hover .arrow-layer{
        left: -22.5px;
    }
    #letsMeet .arrow-layer{
        width: 195px;
    }
    #letsMeet .arrow-layer div:first-child{
        margin-left: 95px
    }
    #letsMeet .arrow-layer div:first-child img{
        width: 18.4px;
    }
    #letsMeet .arrow-layer div:last-child{
        margin-right: 55px
    }
    #letsMeet .arrow-layer div:last-child img{
        width: 22px;
    }
    main footer .wrapper img{
        width: 128.5px;
    }
    main footer .wrapper{
        height: 109px;
    }
}
/* mac pro laptop */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5),
screen and (max-height: 768px){
    /*1366 * 768*/
    @-webkit-keyframes wing_guy{
        0%{
            -webkit-transform: translate3d(100px, 30%, 0);
        }
        60%{
            -webkit-transform: translate3d(100px, 32%, 0);
        }
        100%{
            -webkit-transform: translate3d(100px, 30%, 0);
        }
    }
    @keyframes wing_guy{
        0%{
            transform: translate3d(100px, 30%, 0);
        }
        60%{
            transform: translate3d(100px, 32%, 0);
        }
        100%{
            transform: translate3d(100px, 30%, 0);
        }
    }
    @-webkit-keyframes wing{
        0%{
            -webkit-transform: rotate(0deg) translate3d(405px, -5%, 0);
        }
        60%{
            -webkit-transform: rotate(3deg) translate3d(405px, -4%, 0);
        }
        100%{
            -webkit-transform: rotate(0deg) translate3d(405px, -5%, 0);
        }
    }
    @keyframes wing{
        0%{
            transform: rotate(0deg) translate3d(405px, -5%, 0);
        }
        60%{
            transform: rotate(3deg) translate3d(405px, -4%, 0);
        }
        100%{
            transform: rotate(0deg) translate3d(405px, -5%, 0);
        }
    }
}
/* iPhone 5 & 5S in portrait & landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    @-webkit-keyframes wing_guy{
        0%{
            -webkit-transform: translate3d(-50px, 13%, 0);
        }
        60%{
            -webkit-transform: translate3d(-50px, 15%, 0);
        }
        100%{
            -webkit-transform: translate3d(-50px, 13%, 0);
        }
    }
    @keyframes wing_guy{
        0%{
            -webkit-transform: translate3d(-50px, 13%, 0);
        }
        60%{
            -webkit-transform: translate3d(-50px, 15%, 0);
        }
        100%{
            -webkit-transform: translate3d(-50px, 13%, 0);
        }
    }
    @-webkit-keyframes wing{
        0%{
            -webkit-transform: rotate(0deg) translate3d(150px, -4%, 0);
        }
        60%{
            -webkit-transform: rotate(3deg) translate3d(150px, -3%, 0);
        }
        100%{
            -webkit-transform: rotate(0deg) translate3d(150px, -4%, 0);
        }
    }
    @keyframes wing{
        0%{
            -webkit-transform: rotate(0deg) translate3d(145px, 0%, 0);
        }
        60%{
            -webkit-transform: rotate(3deg) translate3d(145px, 1%, 0);
        }
        100%{
            -webkit-transform: rotate(0deg) translate3d(145px, 0%, 0);
        }
    }
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1){
    .text{
        -webkit-transition: none;
        transition: none;
    }
    .text.outside-btm{
        top: 40% !important;
        opacity: 1;
    }
    .text.outside-top{
        top: 5em !important;
        opacity: 1;
    }
    ul li.layer{
        position: absolute;
        top: 0;
    }
    #letsMeet .circle-wrapper{
        -webkit-transform: translate(-20%, -25%);
        transform: translate(-20%, -25%);
    }
}
@-webkit-keyframes zoomIn{
    0%{
        opacity: 0;
        -webkit-transform: scale(.3,.3);
        transform: scale(.3,.3)
    }

    50%{
        opacity: 1
    }
}

@keyframes zoomIn{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50%{
        opacity: 1
    }
}
@keyframes zoomInBackground{
    0%, 100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50%{
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1) rotate(0.02deg); /* fix ie shacking*/
    }
}
@-moz-keyframes zoomInBackground{
    0%, 100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50%{
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
}
@-webkit-keyframes zoomInBackground{
    0%, 100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50%{
        -webkit-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
}