body{background:  linear-gradient(#343996,#4882C3);  color:#000; font-size:13px; font-family:asp-font;     background-repeat: no-repeat;}
@media only screen and (max-width: 767px) {
    body {

        background:  linear-gradient(#343996,#4882C3);
		 
    }
}
#container { display:block; }

@media only screen and (orientation:portrait){

  #container {

    margin-top: 647px;
    width: 184vw;
    position: absolute;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }
  .title-1 {margin-top:-19px !important;}

}

@media only screen and (orientation:landscape){

  #container {
     background:  linear-gradient(#343996,#4882C3);
     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(0deg);

     transform: rotate(0deg);

  }

}
/*gstlogo*/

.gstlogo {
  
    top:15px;
     text-align:center;
    width: 99%;
    position: relative;
    -webkit-animation-name: gstlogo; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: gstlogo;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gstlogo {
    0%   {left:0px; top:150px; font-size:36px;}
    100% {left:0px; top:15px; font-size:36px;}
}

/* Standard syntax */
@keyframes gstlogo {
    0%   {left:0px; top:150px; font-size:36px;}
    100% {left:0px; top:15px; font-size:36px;}
}

.gstlogo-1 {
  
    top:15px;
    margin-top: 0;
    position: relative;
     text-align:center;
  
    width: 99%;     
}

.gstlogo-1a {
  
    top:15px;
    width: 99%;
    margin-top: 200px;
    position: relative;
     text-align:center;
        -webkit-animation-name: gstlogoa; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: gstlogoa;
    animation-duration: 3s;

}
/* Chrome, Safari, Opera */
@-webkit-keyframes gstlogoa {
    0%   {left:0px; margin-top:4px;width: 99%; }
    100% {left:0px; margin-top: 200px;  }
}

/* Standard syntax */
@keyframes gstlogoa {
    0%   {left:0px; margin-top:4px;width: 99%;  }
    100% {left:0px; margin-top: 200px; }
}


.title-1a{text-align:center;
 font-family:Arial;
    top:15px;
    text-align:center;
    width: 99%;
    position: relative;
     font-size: 30px; text-align: center; font-weight: bold;   color:#ffffff;
     -webkit-animation-name: titlea; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: titlea;
    animation-duration: 1s;


 }

 /* Chrome, Safari, Opera */
@-webkit-keyframes titlea {
    0%   {left:0px; margin-top:4px; font-size: 18px;}
    100% {left:0px; margin-top: 4px;font-size: 30px;}
}

/* Standard syntax */
@keyframes titlea {
    0%   {left:0px; margin-top:4px; font-size: 18px;}
    100% {left:0px; margin-top: 4px;font-size: 30px;}
}


/*title*/

.title {
    font-family:Arial;
    top:15px;
    text-align:center;
    width: 99%;
    position: relative;
    -webkit-animation-name: title; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: title;
    animation-duration: 1s;
  font-size: 18px; text-align: center; font-weight: bold;   color:#ffffff;
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes title {
    0%   {left:0px; top:150px; font-size:10px;}
    100% {left:0px; top:2px; font-size:18px;}
}

/* Standard syntax */
@keyframes title {
    0%   {left:0px; top:150px; font-size:10px;}
    100% {left:0px; top:2 px; font-size:18px;}
}
.title-1{text-align:center;
 font-family:Arial;
    top:15px;
    text-align:center;
    width: 99%;
    position: relative;
     font-size: 18px; text-align: center; font-weight: bold;   color:#ffffff;


 }

/* end title*/
/*saplogo*/
.saplogo {
  
    top:-60px;
      text-align:right;
    width: 99%;
    position: relative;
    -webkit-animation-name: saplogo; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: saplogo;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes saplogo {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes saplogo {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.saplogo-1 {
  
    top:-60px;
      text-align:right;
    width: 99%;
    position: relative;
      
}
.saplogo-1a {
  
    top:4px;
      text-align:right;
    width: 99%;
    position: relative;
      
}
/* logo*/
.innovallogo img {
    position: absolute;
    z-index: 999;
    width: 150px;
    top:10;
    margin-top: 10px;
    left: 2%;
}

/*sapback*/
.sapback {
  
    top:0px;
      float: left;
      margin-left: 30px;
    width: 50%;
    position: relative;
    -webkit-animation-name: sapback; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: sapback;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sapback {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes sapback {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.sapback-1 {
  
    top:0px;
      float: left;
      margin-left: 30px;
    width: 50%;
    position: relative;
    
}

/*end sapback*/
/*gsnback*/
.gspback {
  
    top:0px;
      float: right;
    width: 45%;
    margin-right: -10px;
    position: relative;
    -webkit-animation-name: gspback; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: gspback;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gspback {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes gspback {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.gspback-1 {
  
    top:0px;
      float: right;
    width: 45%;
    margin-right: -10px;
    position: relative;
  
    
}
/*end gsnback*/
/*gsp*/
.gsp {
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -250px;
    margin-right: -25px;
    position: relative;
    -webkit-animation-name: gsp; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: gsp;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gsp{
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes gsp {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.gsp-1 {
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -250px;
    margin-right: -25px;
    position: relative;
    
}
/*end gsp*/
/*gstn*/
.gstn {
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -253px;
     margin-right: -280px;
    position: relative;
    -webkit-animation-name: gstn; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: gstn;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gstn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes gstn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.gstn-1 {
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -253px;
     margin-right: -280px;
    position: relative;
  
  
    
}
/*end gstn*/
/*.connectedgif {
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -253px;
     margin-left: : 600px;
    position: relative;

  
  
    
}*/
/*end gstn*/

/*sap*/
.saperp {
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -253px;
     margin-left: 50px;
    position: relative;
    -webkit-animation-name: saperp; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: saperp;
    animation-duration: 2s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes saperp {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes saperp {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.saperp-1 {
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -253px;
     margin-left: 50px;
    position: relative;
     
}
/*end sap*/
/*optigst*/
.optigst {
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -253px;
     margin-left: 310px;
    position: relative;
    -webkit-animation-name: optigst; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: optigst;
    animation-duration: 3s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes optigst {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes optigst {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
.optigst-1 {
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -253px;
     margin-left: 310px;
    position: relative;
  
    
}



/*end optigst*/
/*buttons*/
.buttons {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     
    position: relative;
    
}

/*end busstons*/
/*buttons*/
.extractbtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    
}


.billingbtnab  {
  
top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;

}

.billingbtn  {
  
top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: billingbtn  ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: billingbtn  ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes billingbtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes billingbtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}


.printbtn  {
  
top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: printbtn  ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: printbtn  ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes printbtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes printbtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}





.viewbtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;

-webkit-animation-name: viewbtn ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: viewbtn ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes viewbtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes viewbtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}





.validatebtn {
  
top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: validatebtn ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: validatebtn ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes validatebtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes validatebtn {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}


.verifybtn {
  
top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    
}

.connectbtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    
}
.viewreport {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    
}

.fetchvendordata {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: fetchvendordata ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: fetchvendordata ;
    animation-duration: 2s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fetchvendordata  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes fetchvendordata  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.reconcilebtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: reconcilebtn ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: reconcilebtn ;
    animation-duration: 2s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes reconcilebtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes reconcilebtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}


.vendoremailbtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: vendoremailbtn; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: vendoremailbtn ;
    animation-duration: 2s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes vendoremailbtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes vendoremailbtn  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}



.vendoremailbtn {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: vendoremail ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: vendoremail ;
    animation-duration: 2s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes vendoremail  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes vendoremail  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}


.install {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
        -webkit-animation-name: install ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: install ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes install  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes install  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}



.filereturns {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    -webkit-animation-name: filereturns ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: filereturns ;
    animation-duration: 1s;
    -webkit-animation-iteration-count:100;
    animation-iteration-count: 100;
    
}
/* Chrome, Safari, Opera */
@-webkit-keyframes filereturns  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes filereturns  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}






.savedata {
  
    top:40px;
      left: -75;


      text-align: center;
    width: 100%;
    margin-top: 40px;
     cursor: pointer;
    position: relative;
    
}

/*end busstons*/
/*optigst*/
.subtitle {
  
    top:10px;
      text-align: center;
    width: 100%;
    margin-top: 10px;
     
    position: relative;
    -webkit-animation-name: subtitle ; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: subtitle ;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes subtitle  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes subtitle  {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.subtitle-1 {
  
    top:40px;
      text-align: center;
    width: 100%;
    margin-top: 60px;
     
    position: relative;
    
}
/*end optigst*/
/*subtitle*/

.subtitletext {
  
  font-family:Arial;
    top:-80px;
    text-align:center;
    width: 99%;
    position: relative;
   
  font-size: 25px; text-align: center; font-weight: bold;   color:#ffffff;
      
}


/*end subtitle*/
/*subtitle*/

.buttontext {
  
  font-family:Arial;
    top:8px;
    left: -60;
    text-align:center;
    width: 99%;
    position: relative;
 
  font-size: 18px; text-align: center; font-weight: bold;   color:#ffffff;
  
}


/*end subtitle*/
/*loadgif*/
.loadgif {
  
    top:40px;
      left: -75;
        top:0px;
      float: left;
    width: 45%;
    margin-top: -350px;
     margin-left: 250px;
    position: relative;
    
}
.validloader{
  
    float: left;
    width: 45%;
    margin-top: -200px;
    margin-left: 650px;
    position: relative;
    
}
/*end loadgifs*/

.filesreturns{
top:0px;
      float: right;
    width: 45%;
    opacity: 0;
    margin-top: -200px;
     margin-right: -250px;
    position: relative;
    -webkit-animation-name: filesreturns; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: filesreturns;
    animation-duration: 4s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes filesreturns {
    0%   {opacity: 1;margin-top: -200px;margin-right: 350px; }
   80% {opacity: 1;margin-top: -200px;margin-right:  -250px; }
    100% {opacity: 0;margin-top: -200px;margin-right:  -250px;}
     
}

/* Standard syntax */
@keyframes filesreturns {
     0%   {opacity: 1;margin-top: -200px;margin-right: 350px; }
  80% {opacity: 1;margin-top: -200px;margin-right:  -250px; }
    100% {opacity: 0;margin-top: -200px;margin-right: -250px;}
}



.magnet{
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -200px;
     margin-left: 300px;
    position: relative;
    -webkit-animation-name: magnet; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 15; /* Chrome, Safari, Opera */
    animation-name: magnet;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes magnet {
    0%   {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: .25;}
     
}

/* Standard syntax */
@keyframes magnet {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.sapdocs{
  
    top:0px;
      float: left;
    width: 45%;
    margin-top: -200px;
     margin-left: 300px;
    position: relative;
    -webkit-animation-name: sapdocs; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 50; /* Chrome, Safari, Opera */
    animation-name: sapdocs;
    animation-duration: 1s;
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sapdocs {
    0%   {opacity: 0;size: 100;margin-top: -200px;margin-left: 150px; }
    50% {opacity: 1; }
    100% {opacity: 0;size: 100;margin-top: -200px;margin-left: 300px;}
     
}

/* Standard syntax */
@keyframes sapdocs {
   0%   {opacity: 0;size: 100;margin-top: -200px;margin-left: 150px; }
        50% {opacity: 1; }
    100% {opacity: 0;size: 100;margin-top: -200px;margin-left: 300px;}
}

.status{
  opacity: 0;
    float: left;
    margin-top: -200;
    margin-left: 50;
    width: 150px;
  
    
}


.sapdocsb{
  
    top:0px;
      float: right;
    width: 45%;
    margin-top: -200px;
     margin-right: 400px;
    position: relative;
    -webkit-animation-name: sapdocsb; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 4; /* Chrome, Safari, Opera */
    animation-name: sapdocsb;
   
  
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sapdocsb {
    0%   {opacity: 0;size: 100;margin-top: -200px;margin-right: -100px; }
    50% {opacity: 1; }
    100% {opacity: 0;size: 100;margin-top: -200px;margin-right: 400px;}
     
}

/* Standard syntax */
@keyframes sapdocsb {
   0%   {opacity: 0;margin-top: -200px;margin-right: -100px; }
        50% {opacity: 1; }
    100% {opacity: 0;margin-top: -200px;margin-right: 400px;}
}




.sapdocsa{
  
          float: right;
  
       margin-right: 500;
    margin-top: -200;
      position: relative;
    z-index: 0;
    opacity: 0;

    -webkit-animation-name: sapdocsa; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: sapdocsa;
    animation-duration: 4s;
  
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sapdocsa {
    0%   {opacity: 0;margin-top: -200px;margin-right:900px; }
    25% {opacity: 1; }
    50% {opacity: 0;margin-top: -200px;margin-right:500px;}
    75% {opacity: 1; }
    100% {opacity: 0;margin-top: -200px;margin-right:260px;}
}

/* Standard syntax */
@keyframes sapdocsa {
    0%   {opacity: 0;margin-top: -200px;margin-right:900px; }
    25% {opacity: 1; }
    50% {opacity: 0;margin-top: -200px;margin-right:500px;}
    65% {opacity: 0;margin-top: -200px;margin-right:500px;}
    75% {opacity: 1; }
     100% {opacity: 0;margin-top: -200px;margin-right:260px;}
}



.sapdocsab{
  
          float: right;
  
       margin-right: 500;
    margin-top: -200;
      position: relative;
    z-index: 0;
    opacity: 0;

    -webkit-animation-name: sapdocsab; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: sapdocsab;
    animation-duration: 4s;
  
}

/* Chrome, Safari, Opera */
@-webkit-keyframes sapdocsab {
    0%   {opacity: 0;margin-top: -200px;margin-right:260px; }
    25% {opacity: 1; }
  
    75% {opacity: 1; }
    100% {opacity: 0;margin-top: -200px;margin-right:900px;}
}

/* Standard syntax */
@keyframes sapdocsab {
    0%   {opacity: 0;margin-top: -200px;margin-right:260px; }
    25% {opacity: 1; }
    75% {opacity: 1; }
     100% {opacity: 0;margin-top: -200px;margin-right:900px;}
}





/*gstreport*/
.gstreport{
  
    top:0px;
        text-align: center;
    width:100%;
   
    position: relative;
    -webkit-animation-name: gstreport; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.5s;
  /* Chrome, Safari, Opera */
    animation-name: gstreport;
    animation-duration: 2s;
  
    
}


/* Chrome, Safari, Opera */
@-webkit-keyframes gstreport {
    0%   {opacity: 0;size: 100; }

    100% {opacity: 1;size: 100;}
     
}

/* Standard syntax */
@keyframes gstreport {
   0%   {opacity: 0;size: 100; }

    100% {opacity: 1;size: 100;}
}
/*end gst report*/



<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75) /* Black w/ opacity */
}

/* The Modal (background) */
.modaleway {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
 /* background-color: rgb(0,0,0); /* Fallback color */*/
  background-color: rgba(0, 0, 0, 0.25) /* Black w/ opacity */
}




/* Modal Content */
.modal-content {
  background-color: #39c1ff00;
  margin: auto;
  padding: 20px;
/*  border: 1px solid #888;*/
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>