@font-face {
    font-family: 'proxima_nova_altbold';
    src: url('../fonts/Proxima Nova Alt Bold-webfont.eot');
    src: url('../fonts/Proxima Nova Alt Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Alt Bold-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Alt Bold-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Alt Bold-webfont.svg#proxima_nova_altbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

.innovate .innovate-any{position: relative;text-align: center;margin: 200px auto 0;font-family: 'proxima_nova_altbold';width: 730px;height: 435px;}
.innovate .coll-btn{text-align: center;}
.innovate .coll-btn a {font-family: 'Oswald', sans-serif; padding: 10px 210px;display: inline-block;border-radius: 30px;color: #fff;font-size: 30px;}
.innovate .coll-btn a img{margin: -5px 0 0 12px;}
.innovate-any .styl{position: absolute;}
.innovate-any .inn-dtl{position: relative;z-index: 2;transition: transform 1s;}
.innovate-any .inn-dtl p{position: absolute;top: 50%;color: #fff;font-family: 'Oswald', sans-serif;font-size: 16px;text-transform: uppercase;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.innovate-any .styl.hover{z-index: 9}
.innovate-any .robotic {top: 19px;left: 2px;z-index: 10}
.robotic .inn-dtl {left: -118px;top: 26px;}
.animat{top: -136px;left: 104px;}
.animat .inn-dtl {left: -86px;top: 8px;}
.garpics {top: 31px;left: 287px;z-index: 7}
.garpics .inn-dtl{top: 5px}
.progrm {top: -216px;right: 137px;}
.progrm .inn-dtl{top: 8px;left: 80px;}
.sound {top: 84px;right: 27px;}
.sound .inn-dtl{right: -112px;top: 32px;}
.styl .inn-dtl .innovate-dtl {position: absolute;top: 0;right: -235px;transition: 0.5s all;-webkit-transition: 0.5s all;transform: rotateX(90deg);transition: transform .2s ease-in;}
.styl .inn-dtl:hover .innovate-dtl{transform: rotateX(0deg);transition: transform .6s ease-out;}
.styl .inn-dtl:after{position: absolute;content: "";left: 157px;top: 50%;width: 0;height: 1px;background: #01468e;transition: .3s ease-in;}
.styl .inn-dtl .innovate-dtl ul{margin: 0;background: url(../images/innovate-img/detail-img.png) no-repeat;text-align: left;width: 226px;height: 151px;    padding: 21px 0 0 22px;position: relative;
left: 75px;}

.robotic.styl .inn-dtl .innovate-dtl ul li{display: block;color: #252328;font-size: 13px;}
.styl .inn-dtl .innovate-dtl ul li{display: block;color: #252328;font-size: 18px;    font-family: 'Oswald', sans-serif;font-weight: 100;}
.styl .inn-dtl:hover:after{width: 76px;transition: .3s ease-out;}



/*Hover Efect*/

.styl .inn-dtl .hovr-eft{position: absolute;top: -17px;left: -16px;width: 174px;height: 181px;z-index: -1}
.styl .inn-dtl .hovr-eft .hover-bg{ transform: scale(.7);transition: transform .4s ease-in ;}
.styl .inn-dtl:hover .hovr-eft .hover-bg{ transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);transition: transform .2s ease-out;}
.mywow{opacity: 0}
.mywow.wow{opacity: 1}

/*Animation css*/

.animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}




@keyframes zoomIn{
  0%{
    opacity:0;transform:scale3d(.3,.3,.3)
    }
  100%
  {opacity:1}

}
@-webkit-keyframes zoomIn{
  0%{
    opacity:0;transform:scale3d(.3,.3,.3)
    }
  100%
  {opacity:1}

}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}



@keyframes zoomOut{
  0%{
    opacity:0;transform:scale3d(.3,.3,.3)
    }
  100%
  {opacity:1}

}
@-webkit-keyframes zoomOut{
  0%{
    opacity:0;transform:scale3d(.3,.3,.3)
    }
  100%
  {opacity:1}

}
.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

/*robotic animation*/

@keyframes robline{
  0%{
     clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,301px,272px,0px);
  }

}

@-webkit-keyframes robline{
  0%{
     clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,301px,272px,0px);
  }

}

.robotic-line {
  -webkit-animation-name: robline;
  animation-name: robline;position: absolute;background: url(../images/innovate-img/robotics-line.png) no-repeat;width: 201px;height: 272px;
}

/*animation animation*/

@keyframes anyline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,282px,426px,0px);
  }
}

@-webkit-keyframes anyline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,282px,426px,0px);
  }
}

.animat-line {
  -webkit-animation-name: anyline;
  animation-name: anyline;position: absolute;background: url(../images/innovate-img/animation-line.png) no-repeat;width: 182px;height: 426px;
}

/*animation animation*/

@keyframes grpline{
  0%{
    clip: rect(0px,0px,0px,0px)
    }
  100%{
   clip: rect(0px,100px,265px,0px);
  }
}

@-webkit-keyframes grpline{
  0%{
    clip: rect(0px,0px,0px,0px)
    }
  100%{
   clip: rect(0px,100px,265px,0px);
  }
}


.garpics-line {
  -webkit-animation-name: grpline;
  animation-name: grpline;position: absolute;background: url(../images/innovate-img/graphic-line.png) no-repeat;width: 34px;height: 265px;left: 55px;
}


/*Programming animation*/

@keyframes proline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,865px,506px,0px);
  }
}

@-webkit-keyframes proline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
    clip: rect(0px,865px,506px,0px);
  }
}


.progrm-line {
  -webkit-animation-name: proline;
  animation-name: proline;position: absolute;background: url(../images/innovate-img/programing-line.png) no-repeat;width: 165px;height: 506px;left: -18px;
}

/*Sound Prod animation*/

@keyframes soundline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
   clip: rect(0px,865px,206px,0px);
  }
}
@-webkit-keyframes soundline{
  0%{
    clip: rect(0px,0px,0px,0px);
    }
  100%{
   clip: rect(0px,865px,206px,0px);
  }
}


.sound-line {
  -webkit-animation-name: soundline;
  animation-name: soundline;position: absolute;background: url(../images/innovate-img/sound-line.png) no-repeat;width: 122px;height: 206px;right: 13px;
}

/*.innovate_bg{background: url(../imgs/innovate-img/innovate-bg-img.png) no-repeat;width: 627px;height: 432px;}*/

@keyframes bggg{
  0%{
    clip: rect(432px,627px,432px,0px);
    }
  100%{
    clip: rect(0px,627px,432px,0px);
  }
}
@-webkit-keyframes bggg{
  0%{
    clip: rect(432px,627px,432px,0px);
    }
  100%{
    clip: rect(0px,627px,432px,0px);
  }
}


.innovate_bg {
  -webkit-animation-name: bggg;
  animation-name: bggg;position: absolute;width: 627px;height: 432px;left: 50%;
top: 219px;
transform: translate(-50%, -50%);}



@keyframes bgcolor {
  0% {
    background-position: 100% 50%
  }
  50% {
    background-position: 0% 50%
  }
  100% {
    background-position: 100% 50%
  }
}

@-webkit-keyframes bgcolor {
  0% {
    background-position: 100% 50%
  }
  50% {
    background-position: 0% 50%
  }
  100% {
    background-position: 100% 50%
  }
}


.bg-color{
    background: linear-gradient(-45deg, #0083c3, #01478d, #0083c3, #01478d);
  background-size: 400% 400%;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-name: bgcolor;
  animation-name: bgcolor;
}


@keyframes playicon{
  0%{
    opacity:1;
    }
    50%{
    opacity:1;transform:scale3d(1.2,1.2,1.2);
    }
  100%
  {opacity:1}
}
@-webkit-keyframes playicon{
  0%{
    opacity:1;
    }
    50%{
    opacity:1;transform:scale3d(1.2,1.2,1.2);
    }
  100%
  {opacity:1}
}

.play-icon {
  -webkit-animation-name: playicon;
  animation-name: playicon;
}


/*media query*/ 

@media only screen and (max-width: 1600px){
.sound.styl .inn-dtl::after {right: 157px;left: auto;}
.sound.styl .inn-dtl .innovate-dtl {right: 302px;}
}


@media only screen and (max-width: 1440px){
/*.robotic-line{    background: url(../images/innovate-img/robotics-line-lap.png) no-repeat;}  
*/
    .innovate .innovate-any {
        position: relative;
        text-align: center;
        margin: 200px auto 0;
        font-family: 'proxima_nova_altbold';
        width: 730px;
        height: 435px;
    /*    transform: scale(.8);
        -webkit-transform: scale(.8);*/
        top: 44px;
    }
    
}