.kbwrapper *{
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.kbwrapper{
    margin:0px;
    padding:0px;
    font-family: cf_dinlight;
    font-size: 11px;
    line-height: 2.5em;
}

.kbwrapper h1{
    font-family: cf_dinblack;
    font-style: italic;
    /* clear: both; */
    /* min-height: 34px; */
    padding-top: 10px;
}

.kbwrapper img{
    display:block;
}

.kbwrapper .smallFont{
    font-size: 1.1em;
    margin-top:30px;
    line-height: 1.2em;
}
.kbwrapper div[data-role="content"]{
    display:block;
    /* overflow:auto; */
}
.kbwrapper .spacer{
    margin-top:30px;
}

.kbwrapper.container{
    width: 728px;
    box-sizing: border-box;
    display: inline-block;
    color:#fff;
}
#mainContainer.kbwrapper {
     width:728px;
     height: 606px;
     display:block;
     position:relative;
     overflow: hidden;
     background-image: url(http://media.opap.gr/opap10/img/a/background.jpg);
}
#mainContainer.advanced{
    background-image: url(http://media.opap.gr/opap10/img/advanced/bg-advanced.jpg);
}
#mainContainer.advanced.en{
    background-image: url(http://media.opap.gr/opap10/img/advanced/bg-advanced-en.jpg);
}
a{
    color:#fff;
}
.kbwrapper .indent{
    margin-left: 110px;
    margin-right: 60px;
    margin-bottom: 40px;
    /* margin-top: 40px; */
}
.kbwrapper .indent.small{
    margin-left: 60px;
}
.kbwrapper .blue-bg p{
    font-size: 17px;
    line-height: 27px;=:\;
}
.kbwrapper .indent h1{
    margin-bottom: 0px;
    margin-top: 0px;
    overflow: visible;
}
.kbwrapper .button{
    position:absolute;
    display:block;
}
.kbwrapper #how-to-play{
    top: 466px;
    left: 287px;
}
.kbwrapper #learn-more{
    top: 390px;
    left: 20px;
}
.kbwrapper .hand-and-pen{
    position:absolute;
    top: 271px;
    z-index:0;
}
.kbwrapper .prev,.next,
.kbwrapper #howToCheck{
    position:absolute;
    width: 135px;
    height: 34px;
    bottom: 20px;
    cursor: pointer;
}
.kbwrapper #howToCheck{
    background-image: url(http://media.opap.gr/opap10/img/intro/btHowToCheck.png);
    right: 120px;
    width: 185px;
}
.kbwrapper #howToCheck.en{
    background-image: url(http://media.opap.gr/opap10/img/intro/btHowToCheck_en.png);
    width: 208px;
}
.kbwrapper .prev{
    background-image: url(http://media.opap.gr/opap10/img/a/prev.png);
    left: 140px;
}
.kbwrapper .next{
    background-image: url(http://media.opap.gr/opap10/img/a/next.png);
    right: 130px;
}
.kbwrapper .prev.en{
    background-image: url(http://media.opap.gr/opap10/img/a/prev-en.png);
}
.kbwrapper .next.en{
    background-image: url(http://media.opap.gr/opap10/img/a/next-en.png);
}
.kbwrapper .ribbonTitle{
    width:auto;
    margin: auto;
    margin-top: 20px;
}
.kbwrapper .steps{
    width: auto;
    margin: auto;
    margin-top: 15px;
    /* margin-bottom: 20px; */
}
.kbwrapper .table{
    position:relative;
    left: 210px;
    margin-top: 35px;
    display: inline-block;
}

.kbwrapper #step2 .table{
    left: 210px !important;
    margin-top: 0px !important;
    top: 0px !important;
}
.kbwrapper .tableBG{
    /* position:relative; */
}
.kbwrapper .table .checkmarks{
    position:absolute;
    z-index:1000;
    overflow:visible;

}
.kbwrapper .table .checkmark,
.kbwrapper #handAndPenOverlay .checkmark{
    background-color: rgba(0,0,0,0);
    cursor:pointer;
    /* background-color: rgba(0,0,0,.3); */
    position:absolute;
    top: 34px;
    left: 72px;
}

.kbwrapper .step .subtext{
    background-image: url(http://media.opap.gr/opap10/img/a/text2bg.png);
    width: 399px;
    height: 80px;
    padding: 14px;
    box-sizing: border-box;
    left: 210px;
    position: relative;
    font-weight: bold;
    top: 5px;
    display: inline-block;
    font-size: 1.35em;
    line-height:.95em;
}
.kbwrapper .step .text{
    width:80%;
    margin:auto;
    color:#fff;
    text-align:justify;
    top: 15px;
    position: relative;
}
.kbwrapper .step .text{
    width:80%;
    margin:auto;
    color:#fff;
    text-align:justify;
    top: 15px;
    position: relative;
    height: 80px;
    font-size: 1.45em;
    overflow: hidden;
    line-height: 1.2em;
}
.kbwrapper .step#step2 .text{
    position:absolute;
    width: 21%;
    margin:0px;
    text-align: left;
    top: 175px;
    left: 46px;
}
.kbwrapper #step1 #clickHere{
    position:absolute;
    top: -38px;
    left: -10px;
    pointer-events: none;
}

.kbwrapper #step1 #clickHereArrow{
    position:absolute;
    top: -38px;
    left: 272px;
    pointer-events: none;

    -webkit-animation: playarrow .5s infinite;
    -moz-animation: playarrow .5s infinite;
    -ms-animation: playarrow .5s infinite;
    -o-animation: playarrow .5s infinite;
    animation: playarrow .5s infinite;

    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
}


@-webkit-keyframes playarrow {
    from { top:    -38px; left: 272px; }
    to { top:    -33px; left: 267px; }
}

@-moz-keyframes playarrow {
    from { top:    -38px; left: 272px; }
    to { top:    -33px; left: 267px; }
}
@-ms-keyframes playarrow {
    from { top:    -38px; left: 272px; }
    to { top:    -33px; left: 267px; }
}
@-o-keyframes playarrow {
    from { top:    -38px; left: 272px; }
    to { top:    -33px; left: 267px; }
}
@keyframes playarrow {
    from { top:    -38px; left: 272px; }
    to { top:    -33px; left: 267px; }
}


.kbwrapper #step3 #footer-text{
    display: inline-block;
    color: #fff;
    top: 50px;
    position: relative;
    left: -184px;
    margin: 0px;
}
.kbwrapper #step5 #footer-text{
    display: inline-block;
    color: #fff;
    top: 13px;
    position: relative;
    left: 215px;
    margin: 0px;
    width: 390px;
}


.kbwrapper #thumbs-up{
    position:absolute;
    right: -220px;
    top: 230px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
.kbwrapper #thumbs-up.active{
    right: 0px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

.kbwrapper hr{
    margin-top:20px;
    margin-bottom:20px;
    border:0px;
    border-top: 1px solid rgba(255,255,25,.2);
}
.kbwrapper .blue-bg{
    background-image: url(http://media.opap.gr/opap10/img/intro/gnorise-middle.jpg);
    background-repeat:repeat-y;
    padding: 30px;
}


.kbwrapper .arrow{
    display: inline-block;
    height: 27px;
    max-width: 670px;
    margin-top: 0px;
}
.kbwrapper .arrow img{
    display: inline-block;
    margin:0px;
    vertical-align: top;
    float: left;
}
.kbwrapper .arrow span{
    display: table-cell;
    background-color:#fff;
    float: left;
    font-size: 1.5em;
    padding-top: 1px;
    height: 100%;
    box-sizing: border-box;
    padding-right: 10px;
    font-family: cf_dinblack;
    font-style: italic;
    color: #000;
}

.kbwrapper .number{
    background-image:url(http://media.opap.gr/opap10/img/intro/circle.png);
    background-repeat:no-repeat;
    box-sizing: border-box;
    width: 45px;
    height: 44px;
    color:#fff;
    font-family: cf_dinblack;
    font-size: 21px;
    padding-top: 8px;
    text-align: center;
    display: inline-block;
    float: left;
    /* margin-top: -9px; */
    margin-left: -56px;
    background-position: 1px 0px;
    clear: both;
}

.kbwrapper #faqpage .numberDivider{
    border:0px;
    padding:0px;
    margin:0px;
    margin-bottom: 10px;
}

.kbwrapper #faqpage .numberDivider .faq-q,
.kbwrapper #faqpage .numberDivider .number{
    cursor: pointer;
}

.kbwrapper #faqpage .numberDivider p{
    padding:0px;
    margin:0px;
}

.kbwrapper #faqpage .numberDivider table tr,
.kbwrapper #faqpage .numberDivider table td{
    margin:0px;
    padding:5px;
    background-color:transparent;
    background:none;
    color:#fff;
    text-align: left;
    font-weight:normal;
    padding-top: 0px;
    padding-bottom: 0px;
}
.kbwrapper #faqpage .numberDivider table{
    margin:0px;
    padding:0px;
    background-color:none;
}

.kbwrapper #faqpage .numberDivider.open {
    padding-bottom:10px;
}

.kbwrapper #faqpage .numberDivider .number{
    background-image:url(http://media.opap.gr/opap10/img/faq_closed.png);
    margin:0px;
    /*! float:none; */
}
.kbwrapper #faqpage .numberDivider.open .number{
    background-image:url(http://media.opap.gr/opap10/img/faq_open.png);
}

.kbwrapper #faqpage .numberDivider .number{
    background-image:url(http://media.opap.gr/opap10/img/faq_closed.png);
}


.kbwrapper #faqpage .numberDivider .faq-a{
    overflow:hidden;
    max-height:0px;
    margin:0px;
    padding:0px;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
}
.kbwrapper #faqpage .numberDivider.open .faq-a{
    max-height:1000px;
}

.kbwrapper .faq-q{
    font-weight:bold;
    cursor:pointer;
}

.kbwrapper .numberDivider{
    border-bottom:1px solid #4d95c5;
    padding-bottom: 10px;
    padding-top: 20px;
}
.kbwrapper .numberDivider p{
    padding-top:10px;
}

.kbwrapper ul.small-circle{

}
.kbwrapper ul.small-circle li{
    list-style:square url(http://media.opap.gr/opap10/img/intro/small-circle.png);
    list-style-position: outside;
    margin-top: 20px;
    font-size: 1.5em;
}

.kbwrapper thead tr{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eb2d2c+0,9b1e1d+100 *//* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eb2d2c+0,9b1e1d+100 */
    background: #eb2d2c;/* Old browsers */
    -moz-linear-gradient(180deg,  #eb2d2c 0%, #9b1e1d 100%);/* FF3.6+ */
    -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eb2d2c), color-stop(100%,#9b1e1d));/* Chrome,Safari4+ */
    -webkit-linear-gradient(180deg,  #eb2d2c 0%,#9b1e1d 100%);/* Chrome10+,Safari5.1+ */
    -o-linear-gradient(180deg,  #eb2d2c 0%,#9b1e1d 100%);/* Opera 11.10+ */
    -ms-linear-gradient(180deg,  #eb2d2c 0%,#9b1e1d 100%);/* IE10+ */
    background: linear-gradient(180deg,  #eb2d2c 0%,#9b1e1d 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb2d2c', endColorstr='#9b1e1d',GradientType=1 );/* IE6-9 fallback on horizontal gradient */
    height: 60px;
}

.kbwrapper tr th{
    font-size:15px;
    font-family: cf_dinblack;
    padding:5px;
    line-height:1em;   
    text-align:center;
}

.kbwrapper tr:nth-child(odd){
    background-color:#01335d;
    font-weight: bold;
}

.kbwrapper tr:nth-child(even){
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fed72a+0,fcb31d+100 */
    background: #fed72a;/* Old browsers */
    background: -moz-linear-gradient(top,  #fed72a 0%, #fcb31d 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed72a), color-stop(100%,#fcb31d));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fed72a 0%,#fcb31d 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fed72a 0%,#fcb31d 100%);/* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fed72a 0%,#fcb31d 100%);/* IE10+ */
    background: linear-gradient(to bottom,  #fed72a 0%,#fcb31d 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed72a', endColorstr='#fcb31d',GradientType=0 );/* IE6-9 */
    color:#000;
    font-weight: bold;
}

.kbwrapper tr td {
    font-size: 15px;
    padding: 20px;
    text-align: center;
}

.kbwrapper #faqpage .numberDivider table#faq-table1{
    margin-top:20px;
    margin-bottom:20px;
}



.kbwrapper #faqpage .numberDivider table#faq-table1 tr:first-child td{
    background-color:#fff;
    color: #0082d6;
    font-weight:bold;
    line-height:1.2em;
    font-size:1.1em
    
}

.kbwrapper #faqpage .numberDivider table#faq-table1 tr td{
    text-align: center;
    border: 1px solid RGBA(255, 255, 255, 0.33);
}

.kbwrapper #advanced-bonus{
    position:absolute;
    top: 0px;
    left:50px;
    z-index:1000;
}
.kbwrapper #congratulations{
    position:absolute;
    top: 25px;
    left: 5px;
    
}


.kbwrapper #step6 #congratulations{

    cursor: pointer;
}

.kbwrapper #step7 .aLink{
    position:absolute;;
    background-color: transparent;
    width:119px;
    height:20px;
    top:463px;
    left:420px;
    text-decoration: none;
    display:block;
}


.kbwrapper #handAndPenOverlay{
    display:block;
    position:absolute;
    top: 277px;
    left: 45px;
    width: 118px;
    height: 219px;
    /* background-color: rgba(0, 179, 255, 0.35); */
    z-index: 1000;
}
.kbwrapper #handAndPenOverlay.big{
    display:block;
    top: 215px;
    left: 363px;
    width: 118px;
    height: 216px;
    -webkit-transform: rotateZ(12deg) scaleX(1.2) scaleY(1.2);
    -moz-transform: rotateZ(12deg) scaleX(1.2) scaleY(1.2);
    -ms-transform: rotateZ(12deg) scaleX(1.2) scaleY(1.2);
    -o-transform: rotateZ(12deg) scaleX(1.2) scaleY(1.2);
    transform: rotateZ(12deg) scaleX(1.2) scaleY(1.2);
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    pointer-events: none;
}

.kbwrapper #handAndPenOverlay .checkmarks{
    position:absolute;
    left: 25px;
}

.kbwrapper #handAndPenOverlay .checkmark.resultRandomSeletion{
    left: 97px;
    top: 70px;
}
.kbwrapper #handAndPenOverlay.big .checkmark.resultRandomSeletion{
    left: 97px;
    top: 67px;
}

.kbwrapper #handAndPenOverlay #checks1{
    top: 46px;
}
.kbwrapper #handAndPenOverlay #checks2{
    top: 80px;
}
.kbwrapper #handAndPenOverlay.big #checks2{
    top: 76px;
}
.kbwrapper #handAndPenOverlay #checks3{
    top: 142px;
}
.kbwrapper #handAndPenOverlay #checks4{
    top: 170px;
}
.kbwrapper #handAndPenOverlay #checks5{
    top: 186px;
    left: 97px;
}

.kbwrapper #IEDots{
    display:none;
    position: absolute;
    top: 284px;
    left: 389px;
}

.kbwrapper .checkAnimation{
    background-image:url(http://media.opap.gr/opap10/animation/animation.png);
    width:83px;
    height:75px;
    background-repeat:no-repeat;
    display:none;
    position: absolute;
    top: 2px;
    left: 3px;
}

.kbwrapper .filledIn{
    background-color:#000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 3px;
    width:70%;
    height:70%;
}


.kbwrapper .checkAnimation.play {
    display:block;
    -webkit-animation: play .3s steps(14) forwards;
    -moz-animation: play .3s steps(14) forwards;
    -ms-animation: play .3s steps(14) forwards ;
    -o-animation: play .3s steps(14) forwards ;
    animation: play .3s steps(14) forwards;
}

@-webkit-keyframes play {
    from { background-position:    0px; }
    to { background-position: -1134px; }
}

@-moz-keyframes play {
    from { background-position:    0px; }
    to { background-position: -1134px; }
}
@-ms-keyframes play {
    from { background-position:    0px; }
    to { background-position: -1134px; }
}
@-o-keyframes play {
    from { background-position:    0px; }
    to { background-position: -1134px; }
}
@keyframes play {
    from { background-position:    0px; }
    to { background-position: -1134px; }
}

.kbwrapper #clock{
    position:absolute;
}

.kbwrapper .clockAnimation{
    position:absolute;
    background-image:url(http://media.opap.gr/opap10/animation/clock.png);
    display:block;
    -webkit-animation: playclock 29s steps(29) infinite;
    -moz-animation: playclock 29s steps(29) infinite;
    -ms-animation: playclock 29s steps(29) infinite ;
    -o-animation: playclock 29s steps(29) infinite ;
    animation: playclock 29s steps(29) infinite;
    height:128px;
    width:112px;
    top: -49px;
    left: -30px;
}

@-webkit-keyframes playclock {
    from { background-position:    0px; }
    to { background-position: -3306px; }
}

@-moz-keyframes playclock {
    from { background-position:    0px; }
    to { background-position: -3306px; }
}
@-ms-keyframes playclock {
    from { background-position:    0px; }
    to { background-position: -3306px; }
}
@-o-keyframes playclock {
    from { background-position:    0px; }
    to { background-position: -3306px; }
}
@keyframes playclock {
    from { background-position:    0px; }
    to { background-position: -3306px; }
}


.kbwrapper .tvAnimation{
    position:absolute;
    background-image:url(http://media.opap.gr/opap10/animation/topTv.png);
    display:block;
    -webkit-animation: playtv 13s steps(13) infinite;
    -moz-animation: playtv 13s steps(13) infinite;
    -ms-animation: playtv 13s steps(13) infinite ;
    -o-animation: playtv 13s steps(13) infinite ;
    animation: playtv 13s steps(13) infinite;
    height:169px;
    width:156px;
    top: 0px;
    right: 0px;
}

@-webkit-keyframes playtv {
    from { background-position:    0px; }
    to { background-position: -2028px; }
}

@-moz-keyframes playtv {
    from { background-position:    0px; }
    to { background-position: -2028px; }
}
@-ms-keyframes playtv {
    from { background-position:    0px; }
    to { background-position: -2028px; }
}
@-o-keyframes playtv {
    from { background-position:    0px; }
    to { background-position: -2028px; }
}
@keyframes playtv {
    from { background-position:    0px; }
    to { background-position: -2028px; }
}





/*********** ADVANCED **/



.kbwrapper .fg{
    top: 104px;
    position: absolute;
}