#advert-content {
    width : 1024px;
    height : 400px;
}

#advert-next,
#advert-prev {
    width : 50px;
    height : 400px;
}

#advert-nav-wrapper {
    width : 115px;
    padding : 5px 0px;
}

/**** start ****/

#advert-text-one {
    -webkit-transform: translate(500px, -120px);
       -moz-transform: translate(500px, -120px);
         -o-transform: translate(500px, -120px);
            transform: translate(500px, -120px);
}
#advert-text-two {
    -webkit-transform: translate(1020px, -40px);
       -moz-transform: translate(1020px, -40px);
         -o-transform: translate(1020px, -40px);
            transform: translate(1020px, -40px);
}
#advert-text-three {
    -webkit-transform: translate(-420px, -240px);
       -moz-transform: translate(-420px, -240px);
         -o-transform: translate(-420px, -240px);
            transform: translate(-420px, -240px);

}
#advert-text-four {
    -webkit-transform: translate(1020px, -440px);
       -moz-transform: translate(1020px, -440px);
         -o-transform: translate(1020px, -440px);
            transform: translate(1020px, -440px);
}

.advdert-start #iphone1 {
    -webkit-transform: translate(25px, -890px) scale(0.5, 0.5);
       -moz-transform: translate(25px, -890px) scale(0.5, 0.5);
         -o-transform: translate(25px, -890px) scale(0.5, 0.5);
            transform: translate(25px, -890px) scale(0.5, 0.5);
}
.advdert-start #iphone2 {
    -webkit-transform: translate(225px, -1630px) scale(0.5, 0.5);
       -moz-transform: translate(225px, -1630px) scale(0.5, 0.5);
         -o-transform: translate(225px, -1630px) scale(0.5, 0.5);
            transform: translate(225px, -1630px) scale(0.5, 0.5);
}
.advdert-start #iphone3 {
    -webkit-transform: translate(425px, -2370px) scale(0.5, 0.5);
       -moz-transform: translate(425px, -2370px) scale(0.5, 0.5);
         -o-transform: translate(425px, -2370px) scale(0.5, 0.5);
            transform: translate(425px, -2370px) scale(0.5, 0.5);
}
.advdert-start #iphone4 {
    -webkit-transform: translate(625px, -3110px) scale(0.5, 0.5);
       -moz-transform: translate(625px, -3110px) scale(0.5, 0.5);
         -o-transform: translate(625px, -3110px) scale(0.5, 0.5);
            transform: translate(625px, -3110px) scale(0.5, 0.5);
}

/**** phase1 ****/

.phase1 #advert-text-one {
    opacity : 1;
    -webkit-transform: translate(500px, 0px);
       -moz-transform: translate(500px, 0px);
         -o-transform: translate(500px, 0px);
            transform: translate(500px, 0px);
}

.phase1 #iphone1 {
    opacity : 1;
    -webkit-transform: translate(25px, -890px) scale(0.5, 0.5);
       -moz-transform: translate(25px, -890px) scale(0.5, 0.5);
         -o-transform: translate(25px, -890px) scale(0.5, 0.5);
            transform: translate(25px, -890px) scale(0.5, 0.5);
}
.phase1 #iphone2 {
    opacity : 1;
    -webkit-transform: translate(225px, -1570px) scale(0.5, 0.5);
       -moz-transform: translate(225px, -1570px) scale(0.5, 0.5);
         -o-transform: translate(225px, -1570px) scale(0.5, 0.5);
            transform: translate(225px, -1570px) scale(0.5, 0.5);
}
.phase1 #iphone3 {
    opacity : 1;
    -webkit-transform: translate(425px, -2250px) scale(0.5, 0.5);
       -moz-transform: translate(425px, -2250px) scale(0.5, 0.5);
         -o-transform: translate(425px, -2250px) scale(0.5, 0.5);
            transform: translate(425px, -2250px) scale(0.5, 0.5);
}
.phase1 #iphone4 {
    opacity : 1;
    -webkit-transform: translate(625px, -2930px) scale(0.5, 0.5);
       -moz-transform: translate(625px, -2930px) scale(0.5, 0.5);
         -o-transform: translate(625px, -2930px) scale(0.5, 0.5);
            transform: translate(625px, -2930px) scale(0.5, 0.5);
}

/**** phase2 ****/

.phase2 #advert-text-two {
    opacity : 1;
    -webkit-transform: translate(500px, -40px);
       -moz-transform: translate(500px, -40px);
         -o-transform: translate(500px, -40px);
            transform: translate(500px, -40px);
}

.phase2 #iphone1 {
    opacity : 1;
    z-index : 4;
    -webkit-transform: translate(155px, -890px) scale(0.7, 0.7);
       -moz-transform: translate(155px, -890px) scale(0.7, 0.7);
         -o-transform: translate(155px, -890px) scale(0.7, 0.7);
            transform: translate(155px, -890px) scale(0.7, 0.7);
}
.phase2 #iphone2 {
    opacity : 0;
    z-index : 1;
    -webkit-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
       -moz-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
         -o-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
            transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
}
.phase2 #iphone3 {
    opacity : 0;
    z-index : 2;
    -webkit-transform: translate(625px, -1950px) scale(0.5, 0.5) rotate(45deg);
       -moz-transform: translate(625px, -1950px) scale(0.5, 0.5) rotate(45deg);
         -o-transform: translate(625px, -1950px) scale(0.5, 0.5) rotate(45deg);
            transform: translate(625px, -1950px) scale(0.5, 0.5) rotate(45deg);
}
.phase2 #iphone4 {
    opacity : 0;
    z-index : 3;
    -webkit-transform: translate(825px, -2630px) scale(0.5, 0.5) rotate(45deg);
       -moz-transform: translate(825px, -2630px) scale(0.5, 0.5) rotate(45deg);
         -o-transform: translate(825px, -2630px) scale(0.5, 0.5) rotate(45deg);
            transform: translate(825px, -2630px) scale(0.5, 0.5) rotate(45deg);
}

/**** phase3 ****/

.phase3 #advert-text-three {
    opacity : 1;
    -webkit-transform: translate(100px, -240px);
       -moz-transform: translate(100px, -240px);
         -o-transform: translate(100px, -240px);
            transform: translate(100px, -240px);

}

.phase3 #iphone1 {
    opacity : 0;
    -webkit-transform: translate(-155px, -590px) scale(0.5, 0.5);
       -moz-transform: translate(-155px, -590px) scale(0.5, 0.5);
         -o-transform: translate(-155px, -590px) scale(0.5, 0.5);
            transform: translate(-155px, -590px) scale(0.5, 0.5);
}
.phase3 #iphone2 {
    opacity : 0;
    -webkit-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
       -moz-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
         -o-transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
            transform: translate(425px, -1270px) scale(0.5, 0.5) rotate(45deg);
}
.phase3 #iphone3 {
    opacity : 1;
    z-index : 4;
    -webkit-transform: translate(425px, -2370px) scale(0.7, 0.7);
       -moz-transform: translate(425px, -2370px) scale(0.7, 0.7);
         -o-transform: translate(425px, -2370px) scale(0.7, 0.7);
            transform: translate(425px, -2370px) scale(0.7, 0.7);
}
.phase3 #iphone4 {
    opacity : 1;
    z-index : 3;
    -webkit-transform: translate(625px, -3110px) scale(0.5, 0.5);
       -moz-transform: translate(625px, -3110px) scale(0.5, 0.5);
         -o-transform: translate(625px, -3110px) scale(0.5, 0.5);
            transform: translate(625px, -3110px) scale(0.5, 0.5);
}

/**** phase4 ****/

.phase4 #advert-text-four {
    opacity : 1;
    -webkit-transform: translate(550px, -440px);
       -moz-transform: translate(550px, -440px);
         -o-transform: translate(550px, -440px);
            transform: translate(550px, -440px);
}

.phase4 #iphone1 {
    opacity : 0;
    -webkit-transform: translate(-155px, -590px) scale(0.5, 0.5);
       -moz-transform: translate(-155px, -590px) scale(0.5, 0.5);
         -o-transform: translate(-155px, -590px) scale(0.5, 0.5);
            transform: translate(-155px, -590px) scale(0.5, 0.5);
}
.phase4 #iphone2 {
    opacity : 1;
    -webkit-transform: translate(125px, -1630px) scale(0.7, 0.7);
       -moz-transform: translate(125px, -1630px) scale(0.7, 0.7);
         -o-transform: translate(125px, -1630px) scale(0.7, 0.7);
            transform: translate(125px, -1630px) scale(0.7, 0.7);
}
.phase4 #iphone3 {
    opacity : 0;
    -webkit-transform: translate(425px, -1970px) scale(0.5, 0.5);
       -moz-transform: translate(425px, -1970px) scale(0.5, 0.5);
         -o-transform: translate(425px, -1970px) scale(0.5, 0.5);
            transform: translate(425px, -1970px) scale(0.5, 0.5);
}
.phase4 #iphone4 {
    opacity : 0;
    -webkit-transform: translate(625px, -2710px) scale(0.5, 0.5);
       -moz-transform: translate(625px, -2710px) scale(0.5, 0.5);
         -o-transform: translate(625px, -2710px) scale(0.5, 0.5);
            transform: translate(625px, -2710px) scale(0.5, 0.5);
}


/* support css */
.phase1 #advert-content {
    background : url('../image/ad/support/ad1-large.png');
    background-repeat : no-repeat;
    background-position : center center;
}
.phase2 #advert-content {
    background : url('../image/ad/support/ad2-large.png');
    background-repeat : no-repeat;
    background-position : center center;
}
.phase3 #advert-content {
    background : url('../image/ad/support/ad3-large.png');
    background-repeat : no-repeat;
    background-position : center center;
}
.phase4 #advert-content {
    background : url('../image/ad/support/ad4-large.png');
    background-repeat : no-repeat;
    background-position : center center;
}

.js.borderradius.boxshadow.opacity.cssanimations.cssgradients.csstransforms.csstransitions #advert-content {
    background : url('../image/background_digitalislogo_small.png');
    background-repeat : no-repeat;
    background-position : right 50px;
    background-color : #fff;
}