/* COLOR */

body {
    background: #FFFFFF url(../images/bg_repeat.gif) repeat-x;
}

/* BACKGROUND */

.main {
    background: url(../images/background.jpg) no-repeat top center;
    height: 728px;
    min-width: 1000px;
    transition: all 1s ease-out;
}

.content_popup {
    background: #FFF url(../images/header.jpg) no-repeat;
}

/* POSITION */

.content {
    top: 590px;
    margin: 0 auto;
    width: 1000px;
    height: 280px;
}

.content .box {
    width: 672px;
    height: 390px;
    left: 79px;
    top: -395px;
    padding: 16px 26px;
}

.content .box-form {
    left: -31px;
    top: 37px;
    width: 917px;
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height 1s ease-out;
    background: url(../images/formBG.png) no-repeat;
}
.landing #registration {
    width: 424px;
}
.content #optinDiv {
    text-align: center;
    position: absolute;
    top: 67px;
    left: 494px;
}

.landing #componentRegistration_email_div input{
    width: 323px;
    margin-right: 0%;
}

.landing #componentRegistration_phone_div label{
    width: 84px;
}

.landing #componentRegistration_phone_div input{
    width: 80px;
}

.landing #componentRegistration_birthday_div{
    width: 240px;
    float: right;
}
.landing #componentRegistration_birthday_div label{
    margin-left: 0%;
}
.custom .civility,
.custom .lastname,
.custom .no-value
{
    margin-top: 5px;
    display: inline;
}

/*#blockValid*/
/*{*/
    /*background: url(../images/blokValid.png) no-repeat;*/
    /*left: -7px;*/
    /*width: 490px;*/
/*}*/
div#componentRegistration_birthday_div label {
    width: 56px;
    margin-left: 10px;
}
/* EXIT */

.exit .title, .exit .text .gold a {
    color: #DB3676;
}

/* SMALL BUTTON */

.content #optinDiv {
    width: 425px;
}

.content .optinCampaignButtonImg {
    width: 100%;
    float: left;
    margin-top: 10px;
}

.content .optinSponsors, .content .optinSponsors a, .content .optinCampaignDecline, .content .optinCampaignDecline a, .address .optinSponsors, .address .optinSponsors a, .address .optinCampaignDecline, .address .optinCampaignDecline a {
    color: #111111;
    font-size: 10px;
}



.content .optinCampaignDecline, .content .optinSponsors {
    display: block;
    margin-top: 10px;
    text-align: justify;
}

.content .optinSponsors {
    margin-top: -15px;
}

.display-form .box-form,
.box-form.display {
    height: 260px;
    padding: 56px 10px 10px 19px;
}

#scratch {
    opacity: 0;
}
#scratch.display {
    position: absolute;
    top: 96px;
    left: 239px;
    opacity: 1;
    transition: opacity 500ms linear;
}

.replay {
    z-index: -1;
    opacity: 0;
    cursor: pointer;
    padding: 20px;
    top: 260px;
    left: 616px;
}
.replay.display {
    opacity : 1;
    z-index: 999;
    -webkit-animation: bounce .4s linear;
    animation: bounce .4s linear;
}
.replay.display.multiBounce {
    -webkit-animation: bounce3 2.8s 3s linear;
    animation: bounce3 2.8s 3s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.finalbtn.display,
.losttxt.display,
.finaltxt.display,
.tick1off.display,
.tick1on.display,
.tick2on.display,
.tick2off.display,
.tick3off.display
{
    -webkit-animation: bounce3 3s linear;
    animation: bounce3 3s linear;
}

canvas {
    cursor: url(../images/pieceGrattage.png) 25 25, default;
}
.cursorPiece {
    position: absolute;
    top: 49px;
    left: -110px;
    width: 710px;
    height: 373px;
    cursor: url(../images/pieceGrattage.png) 25 25, default;
}
#scratch ul {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 342px;
}

#scratch li {
float: left;
width: 114px;
padding: 42px 0;
text-align: center;
font-weight: bold;
}

#scratch li span {
    font-size: 12px;
    font-weight: normal;
}

.box .txt1 {
    position: absolute;
    top: 78px;
    left: 634px;
    opacity: 0;
}
.box .txt2 {
    position: absolute;
    top: 114px;
    left: 634px;
    opacity: 0;
}

.box .losttxt {
    position: absolute;
    top: 133px;
    left: 656px;
    opacity: 0;
}

.box .custom {
    position: absolute;
    top: 98px;
    left: 628px;
    font-size: 16px;
    font-weight: normal;
}
.landing .box .text {
    position: absolute;
    top: 110px;
    left: 634px;
    width: 160px;
    color: #ffffff;
}

.box .tick1on {
    position: absolute;
    top: 270px;
    left: 636px;
    opacity: 0;
}

.box .tick1off {
    position: absolute;
    top: 261px;
    left: 638px;
    opacity: 0;
}
.box .tick2off {
    position: absolute;
    top: 300px;
    left: 630px;
    opacity: 0;
    cursor: pointer;
}

.box .tick2on {
    position: absolute;
    top: 300px;
    left: 636px;
    opacity: 0;
}
.box .tick3off {
    position: absolute;
    top: 335px;
    left: 630px;
    opacity: 0;
    cursor: pointer;
}
.box .replay {
    position: absolute;
    top: 260px;
    left: 616px;
}
.box .arrow{
    position: absolute;
    top: 316px;
    left: 695px;
    opacity: 0;
}
.box .finaltxt{
    position: absolute;
    top: 82px;
    left: 632px;
    opacity: 0;
}
.box .finalbtn{
    position: absolute;
    top: 267px;
    left: 632px;
    opacity: 0;
}
.arrow.display {
    transform-origin: -100px 50px;
    -webkit-animation: turnArrow .2s forwards ease-out;
    animation: turnArrow .2s forwards ease-out;
}

.box .txt1.display,
.box .txt2.display,
.box .tick1on.display,
.box .tick2off.display,
.box .tick1off.display,
.box .tick2on.display,
.box .tick3off.display,
.box .finaltxt.display,
.box .losttxt.display,
.box .finalbtn.display,
.pieceright.display  {
    opacity: 1;
}

.red1 {
    position: absolute;
    top: 131px;
    left: 240px;
    opacity: 0;
    transform: scale(3);
    transition: all .5s ease-out;
}
.red2 {
    position: absolute;
    top: 245px;
    left: 355px;
    opacity: 0;
    transform: scale(3);
    transition: all .5s ease-out;
}

.red1.display,
.red2.display {
    transform: scale(1);
    opacity: 1;
    transition: all .5s ease-out;
    z-index: 9999;
}
.footer {
    padding-right: 152px;
}
.footer .plein2kdo {
    position: absolute;
    right: 250px;
    top: 12px;
}
#scratch ul {
    opacity: 0;
}
#scratch ul.display {
    opacity: 1;
}
.pieceright {
    position: absolute;
    top: 389px;
    left: 536px;
    opacity: 0;
}

.civilityname {
    position: absolute;
    top: -167px;
    font-size: 26px;
    left: -38px;
    color: #ffffff;
}

.no-transition * {
    transition: none;
}

form ul {
    display: none;
}

.display-form .box-form {
    overflow: visible;
}
.display-form form ul {
    display: block;
}