function ExecuteScript(strId)
{
  switch (strId)
  {
      case "66YjVWTNM7x":
        Script1();
        break;
      case "5YA6JClDpwd":
        Script2();
        break;
      case "5tjLLVfzK13":
        Script3();
        break;
      case "611QuiY5pZ4":
        Script4();
        break;
      case "5uU0x3EK3jI":
        Script5();
        break;
      case "5eB4fvFHUkp":
        Script6();
        break;
      case "6ZJOarDtyr1":
        Script7();
        break;
      case "6QEDqlp3CwO":
        Script8();
        break;
      case "6lwzWVUr1AD":
        Script9();
        break;
      case "6pSFmn27C7g":
        Script10();
        break;
      case "5xWW4isN46K":
        Script11();
        break;
      case "5tKc0LdpWzw":
        Script12();
        break;
      case "6BxgxoKS7jl":
        Script13();
        break;
      case "6NOqSJZWAQb":
        Script14();
        break;
      case "6d8pKGpjMv8":
        Script15();
        break;
      case "6olnT3NeuYN":
        Script16();
        break;
      case "6FBeuPEqnJC":
        Script17();
        break;
      case "6Wq8FGfQ4US":
        Script18();
        break;
      case "6QYOnBFVokc":
        Script19();
        break;
  }
}

function Script1()
{
  var player = GetPlayer();

getActualPostionElement("card01");

var card03 = document.querySelector("[data-acc-text='card03']");
card03.setAttribute("id", "card03");
/*
As Storyline doesnot support all mouseEvents default we are adding that here
*/
var wrapper = document.querySelector("#wrapper");
//var rotateButton = document.querySelector("[data-acc-text='rotateButton']");

if (wrapper.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    wrapper.addEventListener("mousewheel", MouseWheelHandler, false);
    wrapper.addEventListener("mousedown", MouseDownHandler, false);
    wrapper.addEventListener("mouseup", MouseUpHandler, false);
    window.addEventListener("resize", ResizeHandler, false);
    // Firefox
    wrapper.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    wrapper.addEventListener("DOMMouseDown", MouseDownHandler, false);
    wrapper.addEventListener("DOMMouseUp", MouseUpHandler, false);
    window.addEventListener("resize", ResizeHandler, false);
}
// IE 6/7/8
else
{
    wrapper.attachEvent("onmousewheel", MouseWheelHandler);
    wrapper.attachEvent("onmousedown", MouseDownHandler);
    wrapper.attachEvent("onmouseup", MouseUpHandler);
    window.attachEvent("onresize", ResizeHandler);
}



/*
MouseDown and MouseWheelEvents
*/
function MouseWheelHandler(e)
{
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log("MouseWheelHandler delta: "+delta);

    if(delta>0){

    }else{

    }

    return false;
}


function MouseDownHandler(e)
{
    // cross-browser
    var e = window.event || e; // old IE support
console.log("MouseDownHandler: play");
//gsap.globalTimeline.timeScale(1);
   //rotationAnimation.play();
    return false;
}

function MouseUpHandler(e)
{
    var e = window.event || e; // old IE support

console.log("MouseUpHandler: pause");
 // gsap.killDelayedCallsTo(LoopAnimation);
// gsap.globalTimeline.timeScale(0);
   //rotationAnimation.play();
    return false;
}

function ResizeHandler(e)
{
    var e = window.event || e; // old IE support
    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    console.log("ResizeHandler: vw = "+viewportWidth+" | vh = "+viewportHeight);
    getActualPostionElement("card01");

}


function getActualPostionElement(_accName){
    var actualElement = document.querySelector("[data-acc-text='"+_accName+"']");
    var _xPosElement = getTranslateX(actualElement);
    var _yPosElement = getTranslateY(actualElement);
    console.log("getActualPostionElement x: "+_xPosElement+" | y: "+_yPosElement);
    player.SetVar("xPos",_xPosElement);
    player.SetVar("yPos",_yPosElement);
}

//2 functions to get translate X and Y from SVG elements
function getTranslateX(item) {
                var transArr = [];

                if (!window.getComputedStyle) return;
                var style     = getComputedStyle(item),
                    transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
                var mat       = transform.match(/^matrix3d\((.+)\)$/);
                if (mat) return parseFloat(mat[1].split(', ')[13]);

                mat = transform.match(/^matrix\((.+)\)$/);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
                //mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);
//console.log("getX: "+transArr);
                return transArr;
            }

function getTranslateY(item) {
                var transArr = [];

                if (!window.getComputedStyle) return;
                var style     = getComputedStyle(item),
                    transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
                var mat       = transform.match(/^matrix3d\((.+)\)$/);
                if (mat) return parseFloat(mat[1].split(', ')[13]);

                mat = transform.match(/^matrix\((.+)\)$/);
                //mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);
//console.log("getY: "+transArr);
                return transArr;
            }

}

function Script2()
{
  var cardFront = document.querySelector("[data-acc-text='card04']");
var cardBack = document.querySelector("[data-acc-text='backcard04']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script3()
{
  var cardFront = document.querySelector("[data-acc-text='card03']");
var cardBack = document.querySelector("[data-acc-text='backcard03']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script4()
{
  var cardFront = document.querySelector("[data-acc-text='card02']");
var cardBack = document.querySelector("[data-acc-text='backcard02']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script5()
{
  var cardFront = document.querySelector("[data-acc-text='card01']");
var cardBack = document.querySelector("[data-acc-text='backcard01']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script6()
{
  var cardFront = document.querySelector("[data-acc-text='card04']");
var cardBack = document.querySelector("[data-acc-text='backcard04']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script7()
{
  var cardFront = document.querySelector("[data-acc-text='card03']");
var cardBack = document.querySelector("[data-acc-text='backcard03']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script8()
{
  var cardFront = document.querySelector("[data-acc-text='card02']");
var cardBack = document.querySelector("[data-acc-text='backcard02']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script9()
{
  var cardFront = document.querySelector("[data-acc-text='card01']");
var cardBack = document.querySelector("[data-acc-text='backcard01']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script10()
{
  var player = GetPlayer();

getActualPostionElement("card01");

var card03 = document.querySelector("[data-acc-text='card03']");
card03.setAttribute("id", "card03");
/*
As Storyline doesnot support all mouseEvents default we are adding that here
*/
var wrapper = document.querySelector("#wrapper");
//var rotateButton = document.querySelector("[data-acc-text='rotateButton']");

if (wrapper.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    wrapper.addEventListener("mousewheel", MouseWheelHandler, false);
    wrapper.addEventListener("mousedown", MouseDownHandler, false);
    wrapper.addEventListener("mouseup", MouseUpHandler, false);
    window.addEventListener("resize", ResizeHandler, false);
    // Firefox
    wrapper.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    wrapper.addEventListener("DOMMouseDown", MouseDownHandler, false);
    wrapper.addEventListener("DOMMouseUp", MouseUpHandler, false);
    window.addEventListener("resize", ResizeHandler, false);
}
// IE 6/7/8
else
{
    wrapper.attachEvent("onmousewheel", MouseWheelHandler);
    wrapper.attachEvent("onmousedown", MouseDownHandler);
    wrapper.attachEvent("onmouseup", MouseUpHandler);
    window.attachEvent("onresize", ResizeHandler);
}



/*
MouseDown and MouseWheelEvents
*/
function MouseWheelHandler(e)
{
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log("MouseWheelHandler delta: "+delta);

    if(delta>0){

    }else{

    }

    return false;
}


function MouseDownHandler(e)
{
    // cross-browser
    var e = window.event || e; // old IE support
console.log("MouseDownHandler: play");
//gsap.globalTimeline.timeScale(1);
   //rotationAnimation.play();
    return false;
}

function MouseUpHandler(e)
{
    var e = window.event || e; // old IE support

console.log("MouseUpHandler: pause");
 // gsap.killDelayedCallsTo(LoopAnimation);
// gsap.globalTimeline.timeScale(0);
   //rotationAnimation.play();
    return false;
}

function ResizeHandler(e)
{
    var e = window.event || e; // old IE support
    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    console.log("ResizeHandler: vw = "+viewportWidth+" | vh = "+viewportHeight);
    getActualPostionElement("card01");

}


function getActualPostionElement(_accName){
    var actualElement = document.querySelector("[data-acc-text='"+_accName+"']");
    var _xPosElement = getTranslateX(actualElement);
    var _yPosElement = getTranslateY(actualElement);
    console.log("getActualPostionElement x: "+_xPosElement+" | y: "+_yPosElement);
    player.SetVar("xPos",_xPosElement);
    player.SetVar("yPos",_yPosElement);
}

//2 functions to get translate X and Y from SVG elements
function getTranslateX(item) {
                var transArr = [];

                if (!window.getComputedStyle) return;
                var style     = getComputedStyle(item),
                    transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
                var mat       = transform.match(/^matrix3d\((.+)\)$/);
                if (mat) return parseFloat(mat[1].split(', ')[13]);

                mat = transform.match(/^matrix\((.+)\)$/);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
                //mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);
//console.log("getX: "+transArr);
                return transArr;
            }

function getTranslateY(item) {
                var transArr = [];

                if (!window.getComputedStyle) return;
                var style     = getComputedStyle(item),
                    transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
                var mat       = transform.match(/^matrix3d\((.+)\)$/);
                if (mat) return parseFloat(mat[1].split(', ')[13]);

                mat = transform.match(/^matrix\((.+)\)$/);
                //mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);
//console.log("getY: "+transArr);
                return transArr;
            }

}

function Script11()
{
  var cardFront = document.querySelector("[data-acc-text='card04']");
var cardBack = document.querySelector("[data-acc-text='backcard04']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script12()
{
  var cardFront = document.querySelector("[data-acc-text='card03']");
var cardBack = document.querySelector("[data-acc-text='backcard03']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script13()
{
  var cardFront = document.querySelector("[data-acc-text='card02']");
var cardBack = document.querySelector("[data-acc-text='backcard02']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script14()
{
  var cardFront = document.querySelector("[data-acc-text='card01']");
var cardBack = document.querySelector("[data-acc-text='backcard01']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

function Script15()
{
  var cardFront = document.querySelector("[data-acc-text='card04']");
var cardBack = document.querySelector("[data-acc-text='backcard04']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script16()
{
  var cardFront = document.querySelector("[data-acc-text='card03']");
var cardBack = document.querySelector("[data-acc-text='backcard03']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script17()
{
  var cardFront = document.querySelector("[data-acc-text='card02']");
var cardBack = document.querySelector("[data-acc-text='backcard02']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script18()
{
  var cardFront = document.querySelector("[data-acc-text='card01']");
var cardBack = document.querySelector("[data-acc-text='backcard01']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']"); // shape that controls change
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125, 
x:1200
,onComplete:changeZ, onCompleteParams:[9,10]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = document.querySelector("[data-acc-text='tf5']");
var tf6 = document.querySelector("[data-acc-text='tf6']");
var view3 = document.querySelector("[data-acc-text='view3']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 0.75});
tl.to(view3, {autoAlpha:1, duration: 0.5});




}

function Script19()
{
  var cardFront = document.querySelector("[data-acc-text='card01']");
var cardBack = document.querySelector("[data-acc-text='backcard01']");
var changeCTRL =  document.querySelector("[data-acc-text='changeMan3']");
var shadow3 = document.querySelector("[data-acc-text='shadow3']");

gsap.set(cardFront, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});
gsap.set(cardBack, { css:{
perspectiveOrigin:'100% 0px 50%',
transformStyle:"preserve-3d",
transformOrigin:"center center",
transformPerspective: 2600
}});

gsap.to(cardFront, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});

gsap.to(shadow3, {duration:0.6125, css:{ scaleX:0.7, autoAlpha:0.25},ease:Power1.easeInOut});

gsap.to(cardBack, {duration:1.25, css:{
rotationY:"+=180"
},ease:Power1.easeInOut});
   
gsap.to(changeCTRL, {duration:0.6125,
x:1100
,onComplete:changeZ, onCompleteParams:[10,9]});

function changeZ(param1,param2){
gsap.set(cardFront, { css:{zIndex:param1}});
gsap.set(cardBack, { css:{zIndex:param2}});
gsap.to(shadow3, {duration:0.6125, css:{ scaleX:1,autoAlpha:0.75},ease:Power1.easeInOut});
}

var tf5 = $("[data-acc-text='tf5']");
var tf6 = $("[data-acc-text='tf6']");

var tl = gsap.timeline();
tl.to(tf5, {autoAlpha:1, duration: 0.5});
tl.to(tf6, {autoAlpha:1, duration: 2});




}

