/*
  element-anim.css 
  contient tous les éléments de l'animation
*/

.anim{
    position:absolute;
}

.classicText{
    font-family:'VAG Round Light', Arial;
    display: block;
}

#cactusLivre{
    top: 345px;
    width: 350px;
}

#titleAnim{
    color:white;
    font-size:30px;
    left:349px;
    top: 110px;
    letter-spacing:4px;
}

#introText{
    top: 170px;
    width: 525px;
    left: 130px;
    letter-spacing: 5px;
    line-height: 28px;
    opacity:0;
}

#logo-badgy{
    width:95px;
    top: 497px;
    left: 355px;
    opacity:0;
}

#lampe{
    top: 176px;
    width: 516px;
    left: 664px;
}

#box{
    top: 328px;
    width: 528px;
    left: 257px;
}

#printer{
    top: 433px;
    width: 300px;
    left: 609px;
    opacity: 0;
}

#fil{
    top: 618px;
    width: 200px;
    left: 518px;
}


.textNormal{
    font-size:20px;
    letter-spacing: 4px;
}

.alignText{
    display: inline-block;
}

.bull{
    background-color: #d00014;
    color: white;
    width: 22px;
    height: 25px;
    background: red;
    border-radius: 24px;
    display: inline-block;
    font-size: 20px;
    margin-right: 5px;
    text-align: center;
    vertical-align: top;
    padding-left: 3px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .bull{
        padding-left:5px;
        width:20px;
    }
}

#phrase1{
    top:252px;
    left:154px;
}

#phrase2{
    top: 282px;
    left: 154px;
}

#phrase3{
    top: 312px;
    left: 154px;
    opacity:0;
}

#phrase4{
    top: 170px;
    left: 131px;
    opacity: 0;
    font-size:23px;
}

#phrase41{
    top: 170px;
    left: 131px;
    opacity: 0;
    font-size:23px;
}

#phrase5{
    top: 180px;
    left:131px;
    opacity: 0;
    font-size:23px;
    letter-spacing: 4px;
    text-align: left;
}

#phrase5 .alignText{
    width:315px;
}

#phrase6{
    top: 180px;
    left:131px;
    opacity: 0;
    font-size:23px;
    letter-spacing: 4px;
}


#phrase8{
    top: 180px;
    left:131px;
    font-size:23px;
    opacity: 0;
    letter-spacing: 4px;
}

.check-anim{
    width: 31px;
    position: relative;
    top: 8px;
    margin-right: 5px;
}

#cdrom{
    width: 150px;
    top: 399px;
    left: 527px;
    opacity:0;
}

#cartes{
    width: 150px;
    top: 366px;
    left: 660px;
    opacity:0;
}

#laptop{
    width: 469px;
    top: 310px;
    left:-500px;
    opacity: 1;
}

#fil-brancher{
    width: 179px;
    left: 516px;
    top: 537px;
    opacity: 0;
}

.carte{
    width:139px;
    opacity: 0;
}

#carte1{
    width: 116px;
    top: 395px;
    left: 316px;
}
#carte2{
    top: 359px;
    left: 432px;
    transform: rotate(2deg);
}
#carte3{
    top: 361px;
    left: 566px;
}
#carte4{
    left: 310px;
    top: 438px;
}
#carte5{
    left: 436px;
    top: 439px;
}
#carte6{
    top: 443px;
    left: 564px;
}
#carte7{
    top: 521px;
    left: 309px;
}
#carte8{
    top: 520px;
    left: 439px;
}
#carte9{
    top: 520px;
    left: 565px;
}

#souris{
    width: 45px;
    top: 536px;
    left: 608px;
    opacity:0;
}

#interface{
    width: 200px;
    top: 375px;
    left: 504px;
    opacity:0;
}

#btn-print{
    width: 150px;
    top: 520px;
    left: 532px;
    opacity: 0;
}

#toggle{
    width: 203px;
    top: 406px;
    left: 503px;
    opacity: 0;
}

#toggle-btn{
    width: 205px;
    top: 408px;
    left: 464px;
    opacity: 0;
}

#chrono{
    width: 200px;
    top: 269px;
    left: 327px;
    opacity: 0;
}

#aiguille{
    width: 170px;
    top: 301px;
    left: 347px;
    transform: rotate(184deg);
    transform-origin: 86px 78px;
    opacity:0;
}

#discover-solutions{
    top: 775px;
    left: 400px;
    opacity: 0;
}

#bypass{
    top: 25px;
    right: 10px;
    width: 70px; height: 70px;
    padding: 0;

    background: url(../images/arrow-anim.svg) center center no-repeat rgba(56, 56, 58, .7);
    background-size: 22px 12px;
    border-radius: 50%;

    text-indent: -999em; 
}
#bypass:hover { background-color: #38383a; }

#scrollDown{
    top: 105px;
    right: 10px;
    width: 70px;
    height: 70px;
    padding: 0;
    background: url(../images/arrow-down.svg) center center no-repeat rgba(56, 56, 58, .7);
    background-size: 22px 21px;
    border-radius: 50%;
    text-indent: -999em;
    opacity:0;
}