@charset "UTF-8";
@font-face {
    font-family: 'AniversRegular';
    src: url('../assets/fonts/aniversregular-webfont.woff2') format('woff2'),
         url('../assets/fonts/aniversregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AniversBold';
    src: url('../assets/fonts/aniversbold-webfont.woff2') format('woff2'),
         url('../assets/fonts/aniversbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'NexaSlabBook';
    src: url('../assets/fonts/nexaslabbook-webfont.woff2') format('woff2'),
         url('../assets/fonts/nexaslabbook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NexaSlabBold';
    src: url('../assets/fonts/nexaslabbold-webfont.woff2') format('woff2'),
         url('../assets/fonts/nexaslabbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'NexaSlabHeavy';
    src: url('../assets/fonts/nexaslabheavy-webfont.woff2') format('woff2'),
         url('../assets/fonts/nexaslabheavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



body,div,dl,span,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,select,p,blockquote,th,td, img, a{position:relative;margin:0;padding:0;border: none;list-style-type:none;font-weight: normal;outline: none;}
p{font-family: 'NexaSlabBook';padding:10px;font-size: 14px;}
#canvas, #canvasDiv, #canvasDiv2, canvas{-webkit-tap-highlight-color: rgba(0,0,0,0);}
/*  *{-webkit-tap-highlight-color: rgba(0,0,0,0);}*/

#coloriages{margin: 0px auto;width:970px;height:600px;overflow: hidden;}
#coloriagesbg{position:absolute;width: inherit;}
#maincontainer{position: relative;width: inherit;height: inherit;}
.cover{background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center center;}



/* splash */
#splash{height:100%;width:100%;}
#titleimg{display:block;padding-top:40px;margin:0px auto;}

#splashleft{float: left;margin-left: 210px;margin-top:50px;width:410px;}
#splahtitle{display:block;color:#fff;font-family: "NexaSlabHeavy";font-size: 29px;padding-bottom: 10px;}
.btsplash{display:block;width:220px;height:36px;border-radius: 25px;margin-bottom: 6px;padding-left: 60px;padding-top: 20px;font-family: "NexaSlabHeavy";font-size: 18px;}
.btsplash:hover{opacity: 0.8;cursor: pointer;}
#btn1{background: #ffffff url("../assets/img/bticon1.png") no-repeat 4px center; }
#btn2{background: #ffffff url("../assets/img/bticon2.png") no-repeat 4px center; }
#btn3{background: #ffffff url("../assets/img/bticon3.png") no-repeat 4px center; }

/*#splashright{float:left;margin-top: 20px;position: relative;width:298px;height:345px;overflow: hidden;}
#splashimg{position: absolute;top:0px;left:0px;height:345px;}
#cadre{position: absolute;top:0px;left:0px;display: block;}*/



/*
#splashrr{position: absolute;top:0px;left:620px;top:185px;width:298px;height:345px;z-index: 1;}
.mask{height: 345px;left: 0;position: absolute;top: 0;width: 100%;z-index: 15;}
.serie-img{clip-path: url("#hexagon")-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);clip-path: url(#hexagon);height: 340px;margin: 0;position: absolute;width: 104%;left:-2%;top:1%;z-index: 1;}
*/
/*
#splashrr{position: absolute;top:0px;width:298px;height:345px;z-index: 1;}
#masksvg{position: absolute;top:0px;left:620px;top:185px;}
#splashrr img {position: absolute;top:0;left:0;}
.element {width: 298px;height: 340px;overflow: hidden;color: #FFF;-webkit-mask-image: url(../assets/img/msk.png);mask-image: url(../assets/img/msk.png);}
*/


#splashrr{position: absolute;}
#csplash{position: absolute;left:620px;top:185px;width: 298px;height: 340px;}
#bgmsk{position: absolute;top: 0px;left: 0px;width: inherit;height: inherit;width:970px;height:600px;}
#border{position: absolute;left:620px;top:185px;display: block;}


#splashfooter{position:absolute;right:310px;top:475px;color: #fff;font-family: "AniversRegular";text-align: right;font-size: 18px;width:500px;}

#cursorcolorcont{position: absolute;top:0px;left:0px;width:48px;height:35px;display: none;pointer-events: none;}
#cursorbg{position:absolute;top:-1px;left:-1px;width:48px;height:35px;}
#cursorcolor{position: absolute;top:0px;left:0px;width:48px;height:35px;}
#cursorcolorbg{width:48px;height:35px;-webkit-mask-box-image: url(../assets/img/cursor.png);background-color: transparent;}


#game{height:100%;width:100%;display:none;}
#gameleft{float:left;height: 100%;width:250px;text-align: center;}
#bthome{display:inline-block;padding-top:30px;}
#thumb{display:inline-block;padding-top:50px;}
#btsave{display:inline-block;padding-top:12px;}
#btprint{display:inline-block;padding-top:12px;}
#btmore{display:inline-block;padding-top:12px;}
#bthome:hover, #thumb:hover, #btsave:hover, #btprint:hover, #btmore:hover{opacity: 0.8;cursor: pointer;}

#gamecenter{float:left;height: 100%;width:570px;background-color: #eee;}
#gametitle{display:block;color:#000;font-family: "NexaSlabHeavy";font-size: 22px;padding:20px 0px 0px 20px;}
#tab{position: absolute;bottom: 0px;width:570px;height:521px;opacity: 0;}
#canvasDiv{position: relative;}
#canvasDiv2{position: absolute;top:0px;left:0px;}
#cross{position: absolute;top:0px;left:0px;display: none;}
#colornames{position: absolute;bottom: 0px;width:570px;height:521px;background-color: transparent;}
.inter, .colid{text-align:center;position: absolute;display: block;font-family: "NexaSlabBold";cursor: default;}
.inter:hover{cursor: pointer;}
.colname{display: none;background-color: #d5d8d7;padding: 4px;color: #000;font-family: "NexaSlabBook";}
#originaltab{position: absolute;bottom: 0px;width:570px;height:521px;display:none;}
#gameright{float:left;height: 100%;width:150px;background-color: #eee;text-align: center;}
#btup{display:block;padding-top: 25px;margin:0px auto;opacity: 0;}
#btdown{display:block;padding-top: 10px;margin:0px auto 10px auto;opacity: 0;}
#colorpalette{height:475px;border: 0px solid red;overflow: auto;}
.btcolor{border:5px solid #eee;display:inline-block;margin:5px 5px;height:31px;width:45px;border-radius: 45px;cursor:pointer;font-family: "NexaSlabBold";color:#fff;padding-top: 14px;}
.btcolorselected{border:5px solid #fff;display:inline-block;margin:5px 5px;height:31px;width:45px;border-radius: 45px;font-family: "NexaSlabBold";color:#fff;padding-top: 14px;}
.btcolor:hover{border:5px solid #fff;}
#colorname{display:none;padding:8px 5px 4px 5px;border-radius: 12px;background-color: #f27e36;color:#fff;font-family: "NexaSlabBold";font-size: 14px;width: 130px;margin:0px auto;}

.btncopyright{position:absolute;bottom: 0px;left:0px;width:50px;height:50px;}
.btnclosemoreinfo, .btnclosecopyright{background: url("../assets/img/close.png") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);height: 32px;position: absolute;left: 776px;top: 300px;width: 32px;}
.btnclosemoreinfo:hover, .btnclosecopyright:hover{background-position: 0 -32px;cursor: pointer;}
.btncopyright:hover{opacity: 0.8;cursor: pointer;}
#copyright, #moreinfo{position:absolute;top:0px;left:0px;height:100%;width:100%;display:none;background-color: rgba(255, 255, 255, 0);}
#copyrightwrapper, #moreinfowrapper{position: relative;width: 570px;height:310px;top:290px;left:250px;overflow: auto;background-color: #D7D9D9;}
#copyrightwrapper2, #moreinfowrapper2{padding: 40px 40px 40px 20px;}