.section-app-canvas .app-left{
    background-image: url("../../images/mac/section_app_02.png?20150521");
    background-repeat: no-repeat;
    position: absolute;
    height: 30em;
    width: 60em;
    top:3em;
    left: 42%;
}
.section-app-canvas.animation .app-left{
    -webkit-animation: app-left-canvans  2s 1s ease both; 
    -moz-animation: app-left-canvans  2s 1s ease both; 
    -ms-animation: app-left-canvans  2s 1s ease both; 
}
.section-app-canvas .app-right{
    background-image: url("../../images/mac/section_app_01.png?20150521");
    background-repeat: no-repeat;
    height: 42em;
    width: 50em;
    left:48%;
    top:12em;
    position:absolute;  
}
.section-app-canvas.animation .app-right{
    -webkit-animation: app-right-canvans  1.5s 0.2s ease both;
    -moz-animation: app-right-canvans  1.5s 0.2s ease both;
    -ms-animation: app-right-canvans  1.5s 0.2s ease both;
}

.section-file-canvas .file-total{
     background-image: url("../../images/mac/file_total.png");
     background-repeat: no-repeat;
     background-position:0 8em;
     top: 7em;
     height: 40em;
     width: 50em;
     position: absolute;
}
.section-file-canvas.animation .file-total{
     -webkit-animation: file-total-canvans  3s 0.2s ease both; 
     -moz-animation: file-total-canvans  3s 0.2s ease both; 
     -ms-animation: file-total-canvans  3s 0.2s ease both; 
}

.section-file-canvas .img-line{
    background-image: url("../../images/mac/img_line.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    left: 15em; 
    top: 6em;
    position: absolute;
}
.section-file-canvas.animation .img-line{
    -webkit-animation: file-img-canvans  4s  0.3s ease both; 
    -moz-animation: file-img-canvans  4s  0.3s ease both; 
    -ms-animation: file-img-canvans  4s  0.3s ease both; 
}
.section-file-canvas .file-img{
    background-image: url("../../images/mac/file_img.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    left: 15em; 
    position: absolute;   
}
.section-file-canvas.animation .file-img{
    -webkit-animation: file-img-canvans  4s  0.5s ease both;
    -moz-animation: file-img-canvans  4s  0.5s ease both; 
    -ms-animation: file-img-canvans  4s  0.5s ease both;  
}

.section-file-canvas .vedio-line{
    background-image: url("../../images/mac/vedio_line.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    position: absolute;
    top: 8em;
    left: 27em; 
}
.section-file-canvas.animation .vedio-line{
    -webkit-animation: file-img-canvans  4s 0.8s ease both;
    -moz-animation: file-img-canvans  4s 0.8s ease both; 
    -ms-animation: file-img-canvans  4s 0.8s ease both;  
}

.section-file-canvas .file-vedio{
    background-image: url("../../images/mac/file_vedio.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    position: absolute;
    top: 2em;
    left: 27em;
}
.section-file-canvas.animation .file-vedio{
    -webkit-animation: file-img-canvans  4s 1s ease both; 
    -moz-animation: file-img-canvans  4s 1s ease both;
    -ms-animation: file-img-canvans  4s 1s ease both;
}
.section-file-canvas .document-line{
    background-image: url("../../images/mac/document_line.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    top: 12em;
    left: 29em;
    position: absolute;  
}
.section-file-canvas.animation .document-line{
    -webkit-animation: file-img-canvans  4s 1.3s ease both;
    -moz-animation: file-img-canvans  4s 1.3s ease both; 
    -ms-animation: file-img-canvans  4s 1.3s ease both;  
}
.section-file-canvas .file-document{
    background-image: url("../../images/mac/file_document.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    top: 8em;
    left: 33em;
    position: absolute;
}
.section-file-canvas.animation  .file-document{
    -webkit-animation: file-img-canvans  4s 1.5s ease both; 
    -moz-animation: file-img-canvans  4s 1.5s ease both; 
    -ms-animation: file-img-canvans  4s 1.5s ease both; 
}

.section-file-canvas .audio-line{
    background-image: url("../../images/mac/audio_line.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    top: 18em;
    left: 29em;
    position: absolute;
}
.section-file-canvas.animation .audio-line{
    -webkit-animation:file-img-canvans  4s 1.8s ease both;
    -moz-animation:file-img-canvans  4s 1.8s ease both; 
    -ms-animation:file-img-canvans  4s 1.8s ease both;  
}
.section-file-canvas .file-audio{
    background-image: url("../../images/mac/file_audio.png");
    background-repeat: no-repeat;
    background-position:0 8em;
    height: 20em;
    width: 10em;
    top: 18em;
    left: 32em;
    position: absolute;
}
.section-file-canvas.animation .file-audio{
    -webkit-animation:file-img-canvans  4s 2s ease both; 
    -moz-animation:file-img-canvans  4s 2s ease both;
    -ms-animation:file-img-canvans  4s 2s ease both;
}

.section-box-canvas .box-left{
    background-image: url("../../images/mac/section_box_01.png");
    width: 45em;
    background-repeat: no-repeat;
    height: 42em;
    position: absolute;
    left:38.7%;
    top:4.1em;
}
.section-box-canvas.animation .box-left{
    -webkit-animation: box-left-canvans  2s 0.5s ease both; 
    -moz-animation: box-left-canvans  2s 0.5s ease both;
    -ms-animation: box-left-canvans  2s 0.5s ease both;
}

.section-box-canvas .box-right{
    background-image: url("../../images/mac/section_box_02.png");
    background-repeat: no-repeat;
    height: 42em;
    width: 50em;
    left:47%;
    top:10em ;
    position:absolute;   
}
.section-box-canvas.animation .box-right{
    -webkit-animation: box-right-canvans  2s 0.3s ease both; 
    -moz-animation: box-right-canvans  2s 0.3s ease both; 
    -ms-animation: box-right-canvans  2s 0.3s ease both; 
}
.section-square-canvas .square-top{
    position: absolute;
    background: url("../../images/mac/section_square_01.png") no-repeat 50% 100%;
    height: 28em;
    width: 40em;
    left: 3em;
    bottom:17em; 

}
.section-square-canvas.animation .square-top{
    -webkit-animation: square-top-canvans  2s 0.8s ease both;
    -moz-animation: square-top-canvans  2s 0.8s ease both;
    -ms-animation: square-top-canvans  2s 0.8s ease both;
}
.section-square-canvas .square-bottom{
    background-image: url("../../images/mac/section_square_02.png");
    background-repeat: no-repeat;
    background-position:10em 20em;
    position: absolute;
    height: 50em;
    width: 50em;
}
.section-square-canvas.animation .square-bottom{
    -webkit-animation: square-bottom-canvans  2s 0.2s ease both;
    -moz-animation: square-bottom-canvans  2s 0.2s ease both;
    -ms-animation: square-bottom-canvans  2s 0.2s ease both;
}
.section-arrow-canvas .arrow_left{
    background-image: url("../../images/mac/section_arrow_02.png");
    width: 45em;
    background-repeat: no-repeat;
    height: 32em;
    top: 5em;
    left: 41%;
    position: absolute;
}

.section-arrow-canvas.animation .arrow_left{
   -webkit-animation: arrow-left-canvans  1.5s 0.2s ease both;
   -moz-animation: arrow-left-canvans  1.5s 0.2s ease both;
   -ms-animation: arrow-left-canvans  1.5s 0.2s ease both;
}

.section-arrow-canvas .arrow_right{
    background-image: url("../../images/mac/section_arrow_01.png");
    background-repeat: no-repeat;
    height: 32em;
    width: 50em;
    top: 12em;
    left: 55%;
    position:absolute;
}

.section-arrow-canvas.animation .arrow_right{
   -webkit-animation: arrow-right-canvans  1.5s 0.8s ease both;
   -moz-animation: arrow-right-canvans  1.5s 0.8s ease both;
   -ms-animation: arrow-right-canvans  1.5s 0.8s ease both;
}