.game-interactive .info-content{
    background: #00adff url(../img/games/game_2/bg.jpg) center 0 no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
}

.game-interactive .info-content .heading-1{
    color: #fff;
    margin: 0 0 36px;
}

.game-interactive .ps-right{
    text-align: center;
}

.icon-person{
    width:50px;
    height:50px;
    border: 4px solid #fff;
    background: #fff url(../img/games/game_2/person.png) 0 0 no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 16px 8px rgba(255, 255, 255, .35);
    -moz-box-shadow: 0 0 16px 8px rgba(255, 255, 255, .35);
    box-shadow: 0 0 16px 8px rgba(255, 255, 255, .35);
}

.gi-image-wrap{
    display: inline-block;
    position: relative;}

.game-interactive-1 .gi-image-wrap{
    width:381px;
    height:379px;}
.game-interactive-2 .gi-image-wrap{
    width:425px;
    height:520px;}
.game-interactive-3 .gi-image-wrap{
    width:400px;
    height:620px;}

.gi-image{
    display: inline-block;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.icon-person.active{
    position: absolute;
}

.cell-box,
.game-viewport{
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.game-viewport{
    position: absolute;}

.cell-box{
    position: relative;
    font-size:0;
    text-align: left;
    border:1px solid #fff;
}

.cell{
    position: relative;
    display: inline-block;
    width:108px;
    height:108px;
    -webkit-perspective: 200px;
    perspective: 200px;
}


.cell.fade:after,
.cell:before{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    /*opacity:0;*/
}

.cell.fade:before{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);}

.cell:after,
.cell:before{
    position: absolute;
    /*left:-1px;
    top:-1px;
    right:-1px;
    bottom:-1px;*/
    left:0;
    top:0;
    right:0;
    bottom:0;
    display: block;
    border:1px solid #fff;
    content:'';
    -webkit-transition: opacity .3s ease, transform .3s linear;
    -moz-transition: opacity .3s ease, transform .3s linear;
    -ms-transition: opacity .3s ease, transform .3s linear;
    -o-transition: opacity .3s ease, transform .3s linear;
    transition: opacity .3s ease, transform .3s linear;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*.cell:before{
    background: #000;
}*/

.cell:after{
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.icon-tutorial{
    position: absolute;
    left:0;
    top:0;
    margin:30px;
}

.game-interactive-1 .game-viewport{
    left:30px;
    top:30px;
    width:326px;
    height:326px;
}
.game-interactive-2 .game-viewport{
    left: 51px;
    top: 38px;
    width:326px;
    height:434px;
}
.game-interactive-3 .game-viewport{
    left: 35px;
    top: 39px;
    width:326px;
    height:540px;
}

.game-interactive-1 .animate .icon-tutorial{
    -webkit-animation: animation-tutorial-person-1 3s forwards linear;
    animation: animation-tutorial-person-1 3s forwards linear;
}

.game-interactive-1 .animate .gi-image-visible{
    -webkit-animation: animation-fadeOut .3s forwards ease 2.8s;
    animation: animation-fadeOut .3s forwards ease 2.8s;
}
.game-interactive-1 .animate .gi-image-hidden{
    -webkit-animation: animation-fadeIn .3s forwards ease 3.1s;
    animation: animation-fadeIn .3s forwards ease 3.1s;
}


.game-interactive-2 .animate .icon-tutorial{
    -webkit-animation: animation-tutorial-person-2 2.5s forwards linear;
    animation: animation-tutorial-person-2 2.5s forwards linear;
}

.game-interactive-2 .animate .gi-image-visible{
    -webkit-animation: animation-fadeOut .3s forwards ease 2.3s;
    animation: animation-fadeOut .3s forwards ease 2.3s;
}
.game-interactive-2 .animate .gi-image-hidden{
    -webkit-animation: animation-fadeIn .3s forwards ease 2.6s;
    animation: animation-fadeIn .3s forwards ease 2.6s;
}


.game-interactive-3 .animate .icon-tutorial{
    -webkit-animation: animation-tutorial-person-3 2.8s forwards linear;
    animation: animation-tutorial-person-3 2.8s forwards linear;
}

.game-interactive-3 .animate .gi-image-visible{
    -webkit-animation: animation-fadeOut .3s forwards ease 2.6s;
    animation: animation-fadeOut .3s forwards ease 2.6s;
}
.game-interactive-3 .animate .gi-image-hidden{
    -webkit-animation: animation-fadeIn .3s forwards ease 2.9s;
    animation: animation-fadeIn .3s forwards ease 2.9s;
}


@keyframes animation-tutorial-person-1 {
    0%{
        left:0;
        top:216px;
    }
    19%{
        left:0;
    }
    20%{
        left:108px;
    }
    39%{
        top:216px;
    }
    40%{
        top:108px;
    }
    59%{
        top:108px;
    }
    60%{
        top:0;
    }
    79%{
        left:108px;
    }
    80%{
        left:216px;
    }
    100%{
        left:216px;
        top:0;
    }
}


@keyframes animation-tutorial-person-2 {
    0%{
        left:0;
        top:0;
    }
    13%{
        top:0;
    }
    14%{
        top:108px;
    }
    27%{
        left:0;
    }
    28%{
        left:108px;
    }
    41%{
        left:108px;
    }
    42%{
        left:216px;
    }
    55%{
        top:108px;
    }
    56%{
        top:216px;
    }
    69%{
        top:216px;
    }
    70%{
        top:324px;
    }
    83%{
        left:216px;
    }
    84%{
        left:108px;
    }
    100%{
        left:108px;
        top:324px;
    }
}

@keyframes animation-tutorial-person-3 {
    0%{
        left:216px;
        top:432px;
    }
    8%{
        left:216px;
    }
    9%{
        left:108px;
    }
    17%{
        left:108px;
    }
    18%{
        left:0;
    }
    26%{
        top:432px;
    }
    27%{
        top:324px;
    }
    35%{
        top:324px;
    }
    36%{
        top:216px;
    }
    44%{
        left:0;
    }
    45%{
        left:108px;
    }
    53%{
        left:108px;
    }
    54%{
        left:216px;
    }
    62%{
        top:216px;
    }
    63%{
        top:108px;
    }
    71%{
        top:108px;
    }
    72%{
        top:0;
    }
    80%{
        left:216px;
    }
    81%{
        left:108px;
    }
    89%{
        left:108px;
    }
    90%{
        left:0;
    }
    100%{
        left:0;
        top:0;
    }
}

@keyframes animation-fadeOut{
    0%{
        opacity:1;
        visibility: visible;
    }
    100%{
        opacity:0;
        visibility: hidden;
    }
}

@keyframes animation-fadeIn{
    0%{
        opacity:0;
        visibility: hidden;
    }
    100%{
        opacity:1;
        visibility: visible;
    }
}

.active[data-game-cell]{
    cursor: pointer;
}

.cell{
    visibility: visible;
    opacity:1;
}

.game-interactive-1 .gi-image-hidden .cell:after{
    background-image: url(../img/games/game_2/gi_1_vc.png);
}
.game-interactive-2 .gi-image-hidden .cell:after{
    background-image: url(../img/games/game_2/gi_2_vc.png);
}
.game-interactive-3 .gi-image-hidden .cell:after{
    background-image: url(../img/games/game_2/gi_3_vc.png);
}

.cell-0:after{
    background-position: 0 0;
}
.cell-1:after{
    background-position: -108px 0;
}
.cell-2:after{
    background-position: -216px 0;
}
.cell-3:after{
    background-position: 0 -108px;
}
.cell-4:after{
    background-position: -108px -108px;
}
.cell-5:after{
    background-position: -216px -108px;
}
.cell-6:after{
    background-position: 0 -216px;
}
.cell-7:after{
    background-position: -108px -216px;
}
.cell-8:after{
    background-position: -216px -216px;
}
.cell-9:after{
    background-position: 0 -324px;
}
.cell-10:after{
    background-position: -108px -324px;
}
.cell-11:after{
    background-position: -216px -324px;
}
.cell-12:after{
    background-position: 0 -432px;
}
.cell-13:after{
    background-position: -108px -432px;
}
.cell-14:after{
    background-position: -216px -432px;
}

.progress{
    position: absolute;
    top: 24px;
    right: 22px;
    width: 32px;
    text-align: center;
    color: #fff;
    font: bold 14px/18px 'Open Sans';
}


@media all and (max-height: 640px) and (max-width: 1160px){
    .gi-image-wrap{
        -webkit-transform: scale(.8, .8) translateZ(0);
        -moz-transform: scale(.8, .8) translateZ(0);
        -ms-transform: scale(.8, .8) translateZ(0);
        -o-transform: scale(.8, .8) translateZ(0);
        transform: scale(.8, .8) translateZ(0);
    }
}