.content{
height: 100%;
width: 100%;
background-image:url('Assets/snowfall_BG.gif');
background-position: center center;

}
.content ~ div{display:none;}
.loader_overlay {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; background:rgba(255, 255, 255, .5); z-index:999}
.bg { 

background-image:url('Assets/Background/snowscene_makeaflake-800x600.svg');

background-size:cover;

background-repeat:no-repeat;

/* width:60%; */

height:100%;

position:relative;

}

.left {

float:left;

width:50%;

height:62%;

}

.right {

float:right;

width:50%;

height:50%;

}

.div1 {

width:100%;

height:100%;

}

.div2 {

width:30%;

height:100%;

float:left;

}

.div3 {

width:60%;

height:100%;

float:left;

}

.square {

width:110px;

height:80px;

}

#colorButtonPanel {
max-width: 100%;
position: relative;
min-height: 300px;
width: 200px;padding-top: 10px;
margin-right: -67px;
}

#colorButtonPanel .colorButton {
display: block;
}

#colorButtonPanel #img0 {

top: 0;

left: 70px;

}

#colorButtonPanel #img1 {

top: 0;

right: 70px;

}

#colorButtonPanel #img2 {

left: 40px;

top: 110px;

}

#colorButtonPanel #img3 {

right: 40px;

top: 110px;

}

#colorButtonPanel #img4 {

bottom: 0;

left: 0;

right: 0;

}

#colorButtonPanel #img5 {

}

.colorButton{

display: inline-block;
max-width: 130px;
padding: 0 20px;
margin-bottom:15px;

}

#img6, .luna_move {
width:140px;
/*height:130px;*/
margin-top:0;     top: 0;
position: relative;
}
#img6{max-width: 136px;}
#img7, .inkie_talk {
width:140px;
/*height:130px;*/
margin-top:0;
 position:relative; top:11px;
}
#img66 {

}
.left-bottom {text-align: left;bottom: 20px;float: left;left: 0px;position: absolute;width:auto;overflow: hidden;padding-bottom: 5px;}
.left-bottom .cover-wrapper {display: inline-block;vertical-align: bottom;}
.right-bottom {bottom: 20px;float: right;margin-left: 0;position: absolute;right: 0px;width: 40%;padding-bottom: 5px;z-index: 99;}
.right-bottom .cover-wrapper {display: inline;}
.right-bottom .cover-wrapper img {padding-right: 10px;}
.option {vertical-align: middle;width:auto;height:70px;margin-bottom:0;}

#boardCanvas {position: absolute;z-index: 1;}

#boardBackgroundCanvas { position: absolute;z-index: 0;}

#polygonLayer {position: absolute;z-index: 2;}

#boardCanvasHolder img{position: absolute;}
.inkie_talk {

    margin-left: -25px;

}
#displayCanvas {position: absolute;z-index: 1;background-color:rgba(255, 255, 255, 0); right: 0;}

#displayBackgroundCanvas {

position: absolute;

z-index: 0; right: 0;

}

#displayCanvasHolder {

width: 440px;

height: 440px;

float:right;

margin-right: 0;position: absolute;top: 20px;

right: 20px;display: none;

margin-top: 0;

}
.luna-move {

margin: 0 -11px;}
#displayCanvasHolder #image{

position:absolute;right: 50px;

top: -24px;

-moz-transition: all 0.3s;

-o-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

#boardCanvasHolder {

float:left;

margin-left: 110px;

margin-top:5px;

}

#showtriangle {

margin-left: -55px;

margin-top:95px;

}


center {

display: flex;

width: 100%;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100%;

padding: 0 10px;

}

#mydiv{

/* overflow: hidden; */

/* width: 800px; */

/* height: 600px; */

overflow: hidden;

max-width: 800px;

height: 600px;

width: 100%;

}
.triangle{background: url("Assets/rotatingstar_button_1.gif") no-repeat scroll 0 0;
width: 30px;
height: 30px;
position: absolute;
left: 0;
top: 130px;
z-index: 222;
display: inline-block;}
.game-window {
 background: url("Assets/snowfall_bg.png") repeat scroll 0 0;
border-radius: 18px;

font-size: 18px;

height: 100%;

overflow: hidden;
position: relative;

padding: 20px 0px 10px;

z-index: 1;

}
.demo{ display: none;width: 400px;
    height: 400px;background-repeat:no-repeat;     background-size: contain;  position: relative;}

.Knowledge_kids_svg{max-width: 445px; 
    position: absolute; 
    left: -21px;
    top: -101px;}
*, input, *::before, *::after {

box-sizing: border-box;

-webkit-box-sizing: border-box;

margin:0;

padding:0;

}

body{

/* padding:30px; */

}

.firstHeart {
position: absolute;
top: 50px;
left: 15px;
}

.firstButterFly {
position: absolute;
top: 125px;
left: 31px;
width: 50px;
height: 50px;
}

.firstFlw{
top: 20px;
left: 100px;
height: 50px;
width: 50px;
}

.firstCircle{
height: 40px;
width: 40px;
top: 100px;
left: 97px;
}

.firstStar{
top: 55px;
left: 40px;
height: 45px;
width: 45px;
}

.caryon1{
bottom: 50px;
left: 71px;
height: 35px;
width: 35px;
}

.caryon2{
bottom: 45px;
left: 95px;
height: 35px;
width: 35px;
}

.caryon3{
bottom: 30px;
left: 115px;
height: 35px;
width: 35px;
}

.caryon4{
bottom: 43px;
left: 135px;
height: 35px;
width: 35px;
}

.firstMoon{
top: 130px;
left: 153px;
width: 40px;
height: 40px;
}

.firstFlower{
top: 70px;
left: 187px;
height: 40px;
width: 40px;
}

.firstSphere {
position: absolute;
top: 25px;
left: 100px;
}

.active{

/* box-shadow: 1px 1px 10px 3px #59AAE9; */

}

.selected{
/*box-shadow: 1px 1px 10px 3px #59AAE9;*/
}

.disabled{
opacity: .5;
pointer-events: none;
}

/*****Undo Btn Hover*****/

/* .hvr-rotate { */

#btnUndo img:hover{
/*    -webkit-transform: rotate(-40deg) scale(1.1) ;
transform: rotate(-40deg) scale(1.1) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;*/
}

.hvr-rotate360 {
-webkit-transform: rotate(-360deg) ;
transform: rotate(-360deg)  ;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-sizing: unset!important;
box-sizing: unset!important;
border: 0px solid #fff!important;
outline:none;
}

#btnUndo1 img:hover{
-webkit-transform: rotate(-40deg) scale(1.1);
transform: rotate(-40deg) scale(1.1);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

#btnUndo1 img{
width:auto;
height:50px;
margin-bottom: 0;vertical-align: middle;
-webkit-box-sizing: unset!important;
box-sizing: unset!important;
border: 0px solid #fff!important;
outline:none;
}

#btnUndo img{
width:50px;
height:50px;
margin-bottom: 0;
-webkit-box-sizing: unset!important;
box-sizing: unset!important;
border: 0px solid #fff!important;vertical-align: middle;
outline:none;
}

#btnUndo1, #btnUndo{vertical-align: middle;}

#option3 {width: 54px;vertical-align: middle;}

#btnUndo , #btnUndo1{
-webkit-box-sizing: unset!important;
box-sizing: unset!important;
border: 0px solid #fff!important;
outline:none;
}



/*******Cutting flake Down********/

.animated {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}

100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}

@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(2000px);
}
}

.fadeOutDown {

-webkit-animation-name: fadeOutDown;

animation-name: fadeOutDown;

}

/************Loader*********************************/

/***************************************************************************************/

.preloader-wrap {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;  position: relative;
height: 100%;
/* width: 800px;
height: 600px;
position: fixed;
top: 0;
bottom: 0; */
z-index : 999;
}

.percentage {
z-index: 100;
/*border: 1px solid #ccc;*/
text-align:center;
color: #483329;
line-height: 34px;
font-size: 18px;
font-family: fantasy;
}

.loaders, .percentage{
/* height: 50px;   
height: 30px;
max-width: 350px;
	border: solid 5px #38261d; */
/**************************************************************/
/* border: double 10px transparent; */
/*background-image: linear-gradient(#AED9F4, #AED9F4), radial-gradient(circle at top left, #996B46,#FAB056);*/

/*background-origin: border-box;
background-clip: content-box, border-box;*/
z-index:-1;
/**************************************************************/
/*border-radius: 30px;
font-weight: 300;*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin : auto;
border-radius: 50px;
}
.mac_safari{cursor:default;}
.loaders{ background-image:url('Assets/loader-img.svg');
background-repeat: no-repeat;height: 20px;
/* background-size: 345px 26px; */
background-position: center bottom;
    border: 3px solid;
    width: 42%;}
.loaders:after, .percentage:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

.trackbar {
width: 100%;
height: 100%;
border-radius: 20px;
color: #4ac7e9; 
text-align: center;
line-height: 30px;
overflow: hidden;
position: relative;
opacity: 0.99;
/* border: 6px solid #000; */
}

.loadbar {
width: 0%;
height: 100%;
/* background: linear-gradient(#d5f1f6 50%, rgba(218, 229, 233, 0) 0) 0 0, radial-gradient(circle closest-side, #e4f8fa 80%, rgba(255,255,255,0) 0) 0 0, radial-gradient(circle closest-side, #FFFFFF 61%, rgba(255,255,255,0) 0) 55px 0 #0fb6e5;
background-repeat:repeat-x;
background-size: 25px 30px;
*/
background: #4ac7e9 url("Assets/loader-img.svg") no-repeat center center;
/* background:url('Assets/loader-img.svg'); */

/* Stripes Background Gradient */
box-shadow: 0px 0px 0px 0px #000;
position: absolute;
top: 0;
left: 0;
animation: flicker 5s infinite;
overflow: hidden;
}

.glow {
width: 0%;
height: 0%;
border-radius: 20px;
box-shadow: 0px 0px 60px 10px #4AC6E9 ;
position: absolute;
bottom: -5px;
animation: animation 5s infinite;
}

.loading_text{
background-image:url('Assets/Loading.svg');
position: absolute;
top: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
height: 100%; width: 100%; background-repeat:no-repeat;
background-position: center calc(100% - 64%);
}

@keyframes animation {
10% {
opacity: 0.9;
}
30% {
opacity: 0.86;
}
60% {
opacity: 0.8;
}
80% {
opacity: 0.75;
}

}

#polygonLayer{
cursor: url('Assets/scissors_closed.png') 40 13, auto;
}
img#img7 {
    max-width: 128px;margin-left: -12px;
    
}
img#img77 {
    max-width: 128px;margin-left: -12px;max-height: 152px;
    
}
.print{

background-image:url('Assets/print button/printer-button.svg');

background-position: left center;

background-size: contain;

min-height: 47px;

background-repeat: no-repeat;

width: 57px;

float: left;

margin-top: 110px;
margin-left:25px; position:relative;

}

.print:hover{

background-image:url('Assets/print button/printer-button-hover.svg');

}

.print.is-disabled {

opacity: .5;

pointer-events: none;

}

.color_palette{

float: left;

width: 100%;

height: 100%;

position: relative;
max-width: 260px;
max-height: 265px;


background-image: url(Assets/palette/palette-01.svg);

background-repeat: no-repeat;

margin:0 40px;

}

.color_palette .wrapper img:last-child{

opacity:0;
}
.color_palette .wrapper img#moon2{width: 40px;top: 130px;
height: 40px;
left: 153px;}
.inkie_move, .inkie_talk{   max-width: 150px;}
.luna_move, .luna_talk{  max-width: 160px;}

@media only screen and (min-device-width: 1025px) and (max-device-width: 1150px) {



}


/* iPad */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

.bg { width: 100%;}

#boardCanvasHolder{margin-top: 5px;}

#colorButtonPanel #img0 {top: 0;left: 30px;}

#colorButtonPanel{width: 100%;}

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

center{display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; height: 100%;}

.bg {width: 100%;}

.preloader-wrap { width: 94%;}
/*
.firstHeart { top: 75px;left: 27px;}

.firstButterFly {top: 30px;left: 40px;}
.firstStar{width: 44px;left: 8px;}
.firstSphere {top: 30px;right: 80px;left:auto;}
.firstCircle{left: 30px;}
.firstFlw {

top: 8px;
left: 83px;}
.firstMoon {top: 75px;right: 92px;left:auto;width: 30px;}
.firstFlower {
width: 46px;
top: 59px;
left: 147px;} */

.only4ipad{background-image:url('Assets/PrinterButton/btnPrint0001.png');background-position: left center;
background-size: contain;min-height: 65px;background-repeat: no-repeat;width: 65px;float: left;
margin-top: 55px;display:none!important;
}

.only4ipad:hover{background-image:url('Assets/PrinterButton/btnPrint0002.png');}

.only4ipad.is-disabled { opacity: .5;pointer-events: none;}

#colorButtonPanel #img0 {}

#colorButtonPanel{width: 100%;}


}



@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) {



.circle-outer{left: 192px;}

}



@media (min-width: 481px) and (max-width:799px){

center{display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; height: 100%;}

.bg { width: 100%;}
.color_palette{ max-width: 270px;
max-height: 270px;margin: 10px;overflow: hidden;}
.preloader-wrap { width: 94%;}
#boardCanvas {width: 200px;}
.firstHeart {}
.firstButterFly {}
.firstFlower {}
.firstCircle {}
.firstSphere {}
.firstStar {}
.firstMoon {}
.firstFlw {}
.caryon1 { }
.caryon2 { }
.caryon3 { }
.caryon4 { }

.only4ipad{ background-image:url('Assets/PrinterButton/btnPrint0001.png');background-position: left center;
background-size: contain;min-height: 65px;background-repeat: no-repeat;width: 65px;float: left;
margin-top: 55px;display:none!important;
}

.only4ipad:hover{ background-image:url('Assets/PrinterButton/btnPrint0002.png');}
.only4ipad.is-disabled { opacity: .5;pointer-events: none;}
#colorButtonPanel #img0 { top: 0;left: 30px;}
#colorButtonPanel{width: 100%;}
#colorButtonPanel #img3{right: 30px;}
#colorButtonPanel #img1{right: 30px;}
.option { width: auto; height: auto;margin-top:  0px;max-width: 130px;vertical-align: middle;}

#displayBackgroundCanvas{right: 0;}
.game-window{padding: 12px 0px;}
#displayCanvas{width: 330px !important;}
div.circle-outer{right: 0;left: auto;}
#div1{transform: scale(0.85);-webkit-transform: scale(0.85);top: -31px;right: -49px;}
#displayCanvas, #displayBackgroundCanvas{width: auto;height: auto;}
#displayCanvasHolder img{width: 100%;}
.right-bottom{bottom: 8px;z-index: 1}
.left-bottom {bottom: 14px;}

.left-bottom .cover-wrapper .print {width: 40px;min-height: auto!important;margin-top: 75px;}
.left-bottom .luna_talk, .luna_move{max-width: 111px;}
.left-bottom .inkie_talk, .inkie_move {max-width: 110px;}
#img6 {
    max-width: 107px;
}
.inkie_talk {
    margin-left: -19px;
}
img#img7{max-width:101px;top: 9px;}
img#img77{max-width:101px;top: 9px;}
.right-bottom .cover-wrapper img {height: 50px;  width: 55px;}
}



.right-bottom .cover-wrapper img {height:50px}
.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bounce.animated{position:relative; z-index:11;}