body, span{
  margin: 0px;
  padding: 0px;
}

#ad {
  position: relative;
  overflow: hidden;
  width: 298px;
  height: 598px;
  border: 1px solid #000;
  cursor: pointer;  
}


#anime-container{
  position: absolute;
  width : 300px;
  height : 600px;
  top:0px;
  left: 0px;
  margin : 0;
  padding : 0;; 
  /*overflow: hidden;*/
}

#visuel_1{
    position: absolute;
    width: 300px;
    height: 600px;
    left: -1px;
    top: -1px;
    opacity: 1;

}

#shape{
  position: absolute;
    width: 300px;
    height: 600px;
    left: -600px;
    top: -1px;
    opacity: 1;

}

#visuel_2{
    position: absolute;
    width: 300px;
    height: 600px;
    left: -1px;
    top: -1px;
    opacity: 0;

}

#logoWhite{
    position: absolute;
    right: 1px;
    top: -6px;
    width: 120px;
    opacity: 1;
    z-index: 5;
}

#logoRGB{
  position: absolute;
    left: 35px;
    top: 77px;
    width: 233px;
    height: auto;
    opacity: 0;
}

#fleche{
    position: absolute;
    left: 263px;
    top: 149px;
    width: 11px;
    height: 7px;
    opacity: 0;
}


#fondBlanc{
    position: absolute;
    width: 300px;
    height: 600px;
    left: 0px;
    top: 0px;
    background-color: #fff;
    opacity: 0;
}

#mask1{
  position: absolute;
  top:101px;
  left: 57px;
  opacity: 0;
  width:47px;
  height:21px;
  overflow: hidden;
  z-index: 3;
}

#carrer1{
  width:1px;
  height:21px;
  background-color: white;
}

#mask2{
  position: absolute;
  top:144px;
  left: 6px;
  opacity: 0;
  width:63px;
  height:21px;
  overflow: hidden;
  z-index: 3;
}

#carrer2{
  width:1px;
  height:21px;
  background-color: white;
}

#mask3{
  position: absolute;
  top:99px;
  left: 9px;
  opacity: 0;
  width:65px;
  height:37px;
  overflow: hidden;
  z-index: 3;
}

#carrer3{
  width:1px;
  height:37px;
  background-color: white;
}

#picto{
  position: absolute;
  top:99px;
  left:210px;
  z-index: 10;
 
}

#blockfin{
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
}

.ctabtn{
  width: 300px;
  height:600px;
  display:block;
  /*background-image: url('images/cta.png');*/
  position: absolute;
  top:0;
  left:0;
  z-index:500;
  opacity: 0;
}

.ctabtn #cta{
  position: absolute;
  top: 135px;
}

.ctabtn #cta2{
  position: absolute;
  top: 135px;
  opacity: 0;
}

.ctabtn #cta2 img{
  opacity: 0;
}

.ctabtn:hover #cta{
  opacity: 0 !important;
}

.ctabtn:hover #cta2{
  opacity: 1 !important  ;
}

.ctabtn:hover #cta img{
  opacity: 0 !important;
}

.ctabtn:hover #cta2 img{
  opacity: 1 !important  ;
}



/*What good are data & insights*/
#txt1{
  position: absolute;
    left: 10px;
    top: 71px;
    text-align: left;
    width: 100%;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 21px;
   /* letter-spacing: -0.025em;*/
    line-height: 23px;
    opacity: 0;

}

#txtbold1{
    font-weight: 700; 
    color: #260a47;
    letter-spacing: -0.04em;
}

/*if they don’t create customer delight?*/
#txt2{
    position: absolute;
    left: 10px;
    top: 121px;
    text-align: left;
    width: 100%;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 21px;
   /* letter-spacing: -0.025em;*/
    line-height: 23px;
    opacity: 0;
}

/*Automated CRM lets customers
create anything they can imagine.*/
#txt3{
    position: absolute;
    left: 9px;
    top: 100px;
    text-align: left;
    width: 100%;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
   /* letter-spacing: -0.025em;*/
    line-height: 21px;
    opacity: 0;
}

/*Automated*/
#txt3b{
    position: absolute;
    overflow: hidden;
    left: 59px;
    top: 100px;
    width:1px;   
    color: #ff2d56;
    font-weight: 700; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 18.5px;
    letter-spacing: -0.050em;
    line-height: 21px;    
}

/*imagine.*/
#txt3c{
    position: absolute;
    overflow: hidden;
    left: 9px;
    top: 142px;
    width:1px;    
    color: #ff2d56;
    font-weight: 700; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    letter-spacing: -0.03em;
    line-height: 21px;    
}

.target-text1{
}

.target-text2{
}

#txtbold3{
    font-weight: 700; 
    color: #ff2d56;
}

/*#automagination*/
#txt4{
    position: absolute;
    overflow: hidden;
    left: 15px;
    top: 95px;
    width:1px;          
    color: #ff2d56;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    font-size: 32px;
    letter-spacing: -0.038em;
}

#txtbold4{
    font-weight: 700; 
    color: #ff2d56;
}

/*Experience the Capgemini effect*/
#txt5{
    position: absolute;
    left: 15px;
    top: 131px;
    text-align: left;
    width: 100%;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
   /* letter-spacing: -0.025em;*/
    /*line-height: 21px;*/
    opacity: 0;
}

/*Experience the Capgemini effect*/
#txt6{
    position: absolute;
    left: 9px;
    top: 147px;
    text-align: left;
    color: #27b3d8;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    /*letter-spacing: -0.025em;*/
    line-height: 21px;
    opacity: 0;

}
/*Experience the Capgemini effect*/
#txt6b{
    
    position: absolute;
    overflow: hidden;
    left: 9px;
    top: 147px;
    /*text-align: left;*/
    width: 1px;

    height: 22px;
    color: #0070ad;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    /* letter-spacing: -0.025em;*/
    /*line-height: 21px;*/
    opacity: 1;
    /*background-color: red;*/
  
}

#mask{
    position: absolute;
    width: 0px;
    height: 30px;
    left: 6px;
    top: 146px;
    overflow: hidden;
}

#ctatxt1{
  position:inherit;
  top:174px; 
  width: 100%;
  color: #0070ad;
  text-align: center;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
}


#ctatxt2{
  position:inherit;
  top:174px; 
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
}