/*Maaiz - multiple browser support pending*/

/*Maaiz - use CSS variables*/
img {
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: auto;                      /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}

html{
    font-family: Arial;
    font-size: 17px;
    color: #333333;
    font-weight: normal;
}


.rm_peel_wrapper_container .transition{
    transition-property: left,right !important;
}

.rm_peel_wrapper_container{
    pointer-events: none;
    transition-property: left,right !important;
}


#videoPlayer {
    /* width:300px; */
    /* height:250px; */
    background-color: black;
    position: relative;
}

.videoContainer {
    /*width: 160px;*/
    /*height: 600px;*/
    position: relative;
}
img { -ms-interpolation-mode: bicubic; }

#rm_peel_evt_holder{
    /*background-color: #ccc;*/
    overflow: hidden;
    pointer-events: all;
    height: 90px;
    width: 243px;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    position: absolute;
    right:0px;
    left:159px;
    /*opacity: .5;*/
    z-index: 11;
    cursor: pointer;
}
.rm_peel_wrapper_container{
    /*-webkit-backface-visibility: hidden;*/
    /*backface-visibility: hidden;*/
    -webkit-filter: blur(0);
    filter : blur(0);
    font-size:inherit;
    /*display: block;*/
    /*visibility: hidden;*/
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    -webkit-transform: scale(.8);
    transform: scale(.8);
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s linear;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 253px;
    /*min-width: 90px;*/
    height: 90px;


}


.rm_peel_wrapper_container_ie_160X600{
    zoom: 60%;
    right :-102px;
    bottom: -36px;
}

.rm_peel_wrapper_container_scale_160X600{
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -moz-transform: scale(.6);
}

#rm_peel_container {
    width: 253px;
    height: 90px;
    position: absolute;
    pointer-events: auto;
    left: 149px;
    top :-1px; /* because of peel image we are adding -1 */
}

#rm_peel_container > img{
    transform-origin: left top;
    transform: scale(.52);
    image-rendering: auto;
}

.rm_opacity_animation {
    transition: opacity 0.3s linear;
}

.rm-transform-class {
    transition: -webkit-transform .5s linear;
    transition: transform .5s linear;
    transition:transform .5s linear, -webkit-transform .5s linear;
}

.zeroTime {
    transition: -webkit-transform 0s linear;
    transition: transform 0s linear;
    transition:transform 0s linear, -webkit-transform 0s linear;
}
.rm_peelContent{
    width: 253px;
    height: 90px;
    position: absolute;
    left: 149px;
}

#peelContainer img {
    width: 100%;
    height: 100%;
    /*z-index: 10;*/
}

.rm_peel_element_animation{
    -webkit-animation-name: animationFrames;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin: center ;

    -moz-animation-name: animationFrames;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-transform-origin: center;

    animation-name: animationFrames;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: center;


    -o-animation-name: animationFrames;
    -o-animation-duration: .5s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    -o-transform-origin: center;


}
#rm_peelText { position: absolute; }

#rm_peelText{
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
    width: 100px;
    height: 26%;
    text-align: center;
    bottom: 29%;
    font-size: 8px;
    font-weight: bold;
    transition: opacity 0.5s linear;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;;
    -webkit-transform-origin : initial;;
    transform-origin : initial;
    line-height: normal;
    line-height: initial;

}

@keyframes animationFrames{
    0% {
        left: 150px;
    }
    50% {
        left: 152px;
    }
    100% {
        left: 150px;
    }
}

@-moz-keyframes animationFrames{
    0% {
        left: 150px;
    }
    50% {
        left: 152px;
    }
    100% {
        left: 150px;
    }
}

@-webkit-keyframes animationFrames {
    0% {
        left: 150px;
    }
    50% {
        left: 152px;
    }
    100% {
        left: 150px;
    }
}

@-o-keyframes animationFrames {
    0% {
        left: 150px;
    }
    50% {
        left: 152px;
    }
    100% {
        left: 150px;
    }
}

@-ms-keyframes animationFrames {
    0% {
        left: 150px;
    }
    50% {
        left: 152px;
    }
    100% {
        left: 150px;
    }
}
.rm_peeel_clientLogo{
    width: 200px;
    height: 65px;
    position: absolute;
    right: 0px;
}
.rm_peeel_clientLogo > img{
    width: 100%;
    height: 100%;
}


.rm_dynamic_peeel .rm-align-vertical-center{
     position: relative;
     top: 50%;
     transform : translateY(-50%) translateZ(100px);
 }


.rm_dynamic_peeel{
    width: 58%;
    height: 73%;
    position: absolute;
    right: 0px;
}

.rm_dynamic_peel_logo {
    width: 200px;
    margin-left: -53px;
    height: 65px;
    image-rendering:auto;
}

.rm_dynamic_peeel .transform-opacity{
    opacity: 0;
    -webkit-transition:  opacity 1s ;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition:opacity 1s;

}

.rm_dynamic_peeel .surface-style{
    max-width: 96%;
    max-height: 96%;
    text-align :center;
    line-height: 130%;
    position: relative;
    word-wrap: break-word;
    overflow: hidden;
}
.rm_muteButton, .rm_handButton {
    bottom: 9%;
    right: 0;
    position: absolute;
    width: 31px;
    height: 31px;
    /*left: 74px;*/

}
.rm_muteButton > img, .rm_handButton > img {
    width: 100%;
    height: 100%;
}
.rm_peel-replay{
    width: 87%;
    text-align: center;
    margin: 0 auto;
    height: 25px;
    right: 0px;
    bottom: 0px;
    position: absolute;
    background-color: #cccccc;
    font-weight: bolder;
    font-size: 14px;
}

.rm_peel_explore_now {
    position: absolute;
    right: 82px;
    top: 33px;
    -webkit-transform: translateX(50%) translateY(-50%);
    -ms-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);
    text-align: center;
    font-style: italic;
    font-weight: 900;
    font-size: 15px;
    line-height: 22px;
}

.rm_peel_cube {
    width: 87%;
    text-align: center;
    padding-left: 10px; /* Text doesn't look centered, because of the peel animation */
    margin: 0 auto;
    height: 25px;
    right: 0px;
    transition: -webkit-transform 2s;
    transition: transform 2s;
    transition: transform 2s, -webkit-transform 2s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
    position: absolute;
    bottom: 0px;
    -webkit-backface-visibility: hidden;
    font-weight: bolder;
}
.disableTransition {
    transition: none;
}

.rm_content_starting {
    border-top: 1px solid #b1b1b1;
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px); /* this will always be the top layer */
    /*transform-style: preserve-3d;*/
    height: 21px;
    background-color: #cccccc;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 87%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
    -webkit-backface-visibility: hidden;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    padding-top: 4px;
}

/* The two faces of the cube */
.rm_flipper,.rm_flop {
    border-top: 1px solid  #b7b7b7;
    height: 25px;
    background-color: #cccccc;
    top:0px;
    width: 100%;
    position: absolute;
    -webkit-transition:  opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.verticleAlign{
    position: relative;
    top: 50%;
    -webkit-transform : translateY(-50%);
    -ms-transform : translateY(-50%);
    transform : translateY(-50%);
}

.verticleAlignBranding{
    padding-left: 15px;
    white-space: nowrap;
}
/* Rotate the cube */
.hoverCube {
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg); /* Text bleed at 90º */
}

@-moz-document url-prefix() {
    .rm_peel_cube {
        -ms-perspective: 1000;
        perspective: 1000;
        overflow: hidden;
    }

    .hoverCube {
        transform: rotateX(0deg);
        transform-origin: bottom;
    }

    .rm_flipper {
        /* transform: rotateX(0deg) translateZ(20px); */
        transition: margin 1s; /* Animate the transform properties */
        /* transition-delay: 0.2s; */
    }

    .rm_flop {
        transform: rotateX(0deg) translateZ(20px);
        /* transform-origin: top; */
        /*transition: margin 1s; /* Animate the transform properties */
    }

    .hoverCube .rm_flipper {
        /* transform: rotateX(-90deg) translateZ(20px); */
        margin-top: 25px;
    }
    .hoverCube .rm_flop {
        /* transform: rotateX(0deg) translateZ(20px); */
    }
}

/*TODO: Remove this hack of IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .rm_peel_cube {
        -ms-perspective: 1000;
        -webkit-perspective: 1000;
        perspective: 1000;
        overflow: hidden;
    }

    .hoverCube {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: bottom;
        -ms-transform-origin: bottom;
        transform-origin: bottom;
    }

    .rm_flipper {
        /* transform: rotateX(0deg) translateZ(20px); */
        transition: margin 1s; /* Animate the transform properties */
        /* transition-delay: 0.2s; */
    }

    .rm_flop {
        /*margin-top: -27px;*/
        -webkit-transform: rotateX(0deg) translateZ(20px);
        transform: rotateX(0deg) translateZ(20px);
        /* transform-origin: top; */
        /* transition: margin 1s; /* Animate the transform properties */
    }

    .hoverCube .rm_flipper {
        /* transform: rotateX(-90deg) translateZ(20px); */
        margin-top: 25px;
    }
    .hoverCube .rm_flop {
        /* transform: rotateX(0deg) translateZ(20px); */
    }
}

.transition {
    transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
    transition:transform .3s linear, -webkit-transform .3s linear;
}

.rm-white-image-scale {
    width: 253px;
    height: 90px;
    position: absolute;
    left: 181px;
    top :0px;
}

.whiteAnimation {
    -webkit-animation-name: bgAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 6;
    -webkit-animation-direction: alternate;
    -webkit-transform-origin: bottom right;

    -ms-animation-name: bgAnim;
    -ms-animation-duration: 1s;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: 6;
    -ms-animation-direction: alternate;
    -ms-transform-origin: bottom right;

    -moz-animation-name: bgAnim;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 6;
    -moz-animation-direction: alternate;
    -moz-transform-origin: bottom right;

    animation-name: bgAnim;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 6;
    animation-direction: alternate;
    transform-origin: bottom right;
}

@-webkit-keyframes bgAnim {
    100% {
        -webkit-transform: scale(0.85) skewX(-7deg);
        transform: scale(0.85) skewX(-7deg);
        -moz-transform: scale(0.85) skewX(-7deg);
    }
}
@keyframes bgAnim {
    100% {
        -webkit-transform: scale(0.85) skewX(-7deg);
        transform: scale(0.85) skewX(-7deg);
        -moz-transform: scale(0.85) skewX(-7deg);
    }
}

.rm-closebutton-wrapper {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    position: absolute;
    right:4.5px;
    z-index: 1000;
    display: block;
}