/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 18, 2014, 9:24:11 AM
    Author     : Virus
*/
#wrapper_p {
        position:relative;margin:0 auto;
		display:block;
    }
    #frame {
       /*Change width and height for match with your site*/
        display:block;
		width:100%; 
        height:1001px;
        overflow: hidden;
        position: relative;
        border:1px solid black;
    }
    #frame img {
        position:absolute;
        border: 1px solid black;
        display: none;
        -ms-interpolation-mode: bicubic;
        image-rendering: optimizeQuality;
    }
	.canvas_1 {
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
	animation:zoom 6s ease;
	-moz-animation:zoom 6s ease; /* Firefox */
	-webkit-animation:zoom 6s ease; /* Safari and Chrome */
	-o-animation:zoom 6s ease; /* Opera */
	}
	.canvas_2_1 {
	-webkit-transform-origin: bottom right;
	-moz-transform-origin: bottom right;
	-ms-transform-origin: bottom right;
	-o-transform-origin: bottom right;
	transform-origin: bottom right;
	transform:scale(1.1);
	}
	.canvas_2 {
	animation:zoom1 6s ease;
	-moz-animation:zoom1 6s ease; /* Firefox */
	-webkit-animation:zoom1 6s ease; /* Safari and Chrome */
	-o-animation:zoom1 6s ease; /* Opera */
	}
	@keyframes zoom {
	from { transform:scale(1) }
	to { transform:scale(1.07) }
	}
	@-moz-keyframes zoom {
	from { -moz-transform:scale(1) }
	to { -moz-transform:scale(1.07) }
	}
	@-webkit-keyframes zoom {
	from { -webkit-transform:scale(1) }
	to { -webkit-transform:scale(1.07) }
	}
	@-o-keyframes zoom {
	from { -o-transform:scale(1) }
	to { -o-transform:scale(1.07) }
	}
	@keyframes zoom1 {
	from { transform:scale(1.1) }
	to { transform:scale(1) }
	}
	@-moz-keyframes zoom1 {
	from { -moz-transform:scale(1.1) }
	to { -moz-transform:scale(1) }
	}
	@-webkit-keyframes zoom1 {
	from { -webkit-transform:scale(1.1) }
	to { -webkit-transform:scale(1) }
	}
	@-o-keyframes zoom1 {
	from { -o-transform:scale(1.1) }
	to { -o-transform:scale(1) }
	}
    #frame_child{
        width:100%;
        position: absolute;
        bottom: 42px;
        margin-left: 5px;
        margin-right: 5px;
        z-index: 20;
    }
    #frame_child img{
	/*size for child img 16:9 */
        width: 100px;
        height: 56.25px;
        cursor: pointer;
        margin: 0 2px 0 2px;
        opacity: 0.3;
        border:#ffffff 1px solid;
    }
    #button_z{
        width:100%;
    }
    #par_next_z{
        width: 60px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 10;
        cursor: pointer;
    }
    .next_z{
        position: absolute;
        background: url(../../default_data/img/rs-universal.png)-64px -64px;
        width: 32px;
        height:32px;
        right:10px;
        top:45%;
        opacity: 0.5;
    }
    #par_next_z:hover .next_z{
        opacity: 1;
    }
    #par_prev_z{
        width: 60px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        cursor: pointer;
    }
    .prev_z{
        position: absolute;
        top: 45%;
        left: 10px;
        background: url(../../default_data/img/rs-universal.png) -64px -32px;
        width: 32px;
        height: 32px;
        opacity: 0.5;
    }
    #par_prev_z:hover .prev_z{
        opacity: 1;
    }