@font-face {
    font-family: 'Comic Note';
    src: url('../fonts/ComicNoteSmooth.eot');
    src: url('../fonts/ComicNoteSmooth.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ComicNoteSmooth.woff2') format('woff2'),
        url('../fonts/ComicNoteSmooth.woff') format('woff'),
        url('../fonts/ComicNoteSmooth.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
.table {
   display: table!important;
	 width: 100%;
}
.table-cell {
   display: table-cell!important;
	 vertical-align: middle!important;
	 text-align:center;
}
.striped_background {
	background: #F7A748;
	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #F7A748;
	background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #F7A748;
  background: linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #F7A748;
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;
}

body.swap_puzzle_loaded .striped_background {
	/*background animation*/
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-delay:0s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: MOVE-BG;
	animation-duration: 1.2s;
	animation-delay:0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;	
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000;
}

body.swap_puzzle_started .striped_background {
	/* disable background animation when player start game	*/
	/*
	-webkit-animation: MOVE-BG 120.6s forwards;
   animation: MOVE-BG 120.6s forwards;
	 */
}
@keyframes MOVE-BG {
	from   {background-position: 0px 0px;}
  to {background-position: 50px 0px;}
}


.puzzle_wrapper {
   padding: 0;
	 margin: 0;	 
}

.puzzle_container {   
	 padding:15px;
	 padding-bottom:30px;
	 padding-top:25px;	 	
	font-family: 'Comic Note';
	font-size:22px;	
	display:block;
	border-radius: 14px;-moz-border-radius: 14px;-webkit-border-radius: 14px;
	position:relative;
}
@media (max-width: 480px) {
		.puzzle_container {   
			padding:10px;
			padding-bottom:20px;
			padding-top:10px;	 	
			font-size:18px;
			margin-left:-10px;
		}
}
.puzzle_container::before {
	content: "";
	position:absolute;
	top:6px;
	left:6px;
	bottom:6px;
	right:6px;
	display:block;
		border-radius: 11px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	 border: 2px dashed rgba(255,255,255,0.75);
	 z-index: 50;
}

div.puzzle_container h3 {
	background:none!important;
	background-color:transparent!important;
}

@media (max-width: 480px) {
		.puzzle_container::before {
				display:none;			
		}
}
#canvas-container {
	box-sizing: content-box;
   position: relative;
   max-width: 480px;
   min-width: 100px;	 
   margin: 0 auto;
	 border: 4px solid #FFFFFF;
	 opacity: 0;
	 /*border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
	clear:both;
	z-index:999;
	background:#FFFFFF;
		  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
body.swap_puzzle_loaded #canvas-container, body.swap_puzzle_loaded #puzzle_header {
	 opacity: 1;
	 -webkit-transition: opacity 2.15s ease-in-out;
   -moz-transition: opacity 2.15s ease-in-out;
   -ms-transition: opacity 2.15s ease-in-out;
   -o-transition: opacity 2.15s ease-in-out;
   transition: opacity 2.15s ease-in-out;
}
#myCanvas {
   width: 100%;
   height: auto;
	 margin:0px;
	 padding:0px;
	 display:none;
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline:none;
}
body.swap_puzzle_loaded  #myCanvas {
	display:block;
}



/* ------------------------------------------------------------------------------------------- */
/* --------------------------------- ombre sur elements... ----------------------------------- */
/* ------------------------------------------------------------------------------------------- */
#PuzzlePreviewConteiner img, #level_conteiner, #moves_left_conteiner,#canvas-container , .button  {
  -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.14);
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.14);
}


/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------- titre ----------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
#titre {
	display:none;
	text-align:center;
	padding:0px;
	padding-bottom:24px;
	font-size:26px;
	letter-spacing:1px;
	line-height:24px;
	 -webkit-text-shadow: 0 0 3px 2px rgba(0,0,0,0.24);
  text-shadow: 3px 2px rgba(0,0,0,0.24);
	color:#FFFFFF;
}
@media (max-width: 480px) {
	#titre {
		padding-bottom:20px;
		font-size:20px;
		letter-spacing:1px;
		line-height:16px;
	}
}
body.swap_puzzle_loaded  #titre {
	display:block;
}
/* ------------------------------------------------------------------------------------------- */
/* ----------------------- header avec niveau, mouvements restants --------------------------- */
/* ------------------------------------------------------------------------------------------- */
#puzzle_header {
		padding:0px;
		margin:0px;
		position:relative;
		opacity:0;
		color:#FFFFFF;
		max-width:520px;
		margin-left:auto;
		margin-right:auto;
		padding-right:10px;
		padding-left:10px;
		padding-bottom:15px;
		box-sizing: border-box;
}

#puzzle_header div.left {
	width:35%;
	box-sizing: border-box;
}
#puzzle_header div.right {
	width:65%;
	padding:0px;
	box-sizing: border-box;
}
#level_conteiner, #moves_left_conteiner {
	padding:6px;
	padding-left:10px;
	padding-right:10px;
	display:inline-block;
	border: 4px solid #FFFFFF;
	letter-spacing:1.5px;
}

#level_conteiner {
	transform: rotate(-4deg);
	background:#00AFB5;
	margin-top:5px;
}
span#level_label, span#moves_left_label {
	letter-spacing:3px;
}

#moves_left_conteiner  {
	margin-left:0;
	transform: rotate(4deg);
	background:#E5446B;
}
 span#moves_left_label {
	letter-spacing:2px;
	font-size:26px;
}

@media (max-width: 480px) {
	#level_conteiner, #moves_left_conteiner {
			padding:4px;
			padding-left:6px;
			padding-right:6px;
			border: 3px solid #FFFFFF;
			letter-spacing:1px;
		}
	span#level_label, span#moves_left_label {
		letter-spacing:1px;
		font-size:24px;
	}
}

#moves_left_conteiner.warning {
	background:#FF0000;
	animation: none; 
  -webkit-animation: none;
  -moz-animation: none;
 -o-animation: none;
  -ms-animation: none;
}
#moves_left_conteiner.warning.anim {
	background:#FF0000;
	animation: WarningAnim linear 0.6s;
  animation-iteration-count: infinite;
  -webkit-animation: WarningAnim linear 0.6s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: WarningAnim linear 0.6s;
  -moz-animation-iteration-count: infinite;
 -o-animation: WarningAnim linear 0.6s;
  -o-animation-iteration-count: infinite;
  -ms-animation: WarningAnim linear 0.6s;
  -ms-animation-iteration-count: infinite;
}

@keyframes WarningAnim {
  0% {
    transform: rotate(4deg) scaleX(1) scaleY(1);
  }
  50% {
    transform: rotate(4deg) scaleX(0.85) scaleY(0.85);
  }
	100% {
    transform: rotate(4deg) scaleX(1) scaleY(1);
  }
}

/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------- image preview --------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
#PuzzlePreviewConteiner img {
	width:129px;
	height:129px;
	display:none;
	padding:0px;
	margin-left:auto;
	margin-right:10px;
	margin-top:-5px;
	transform: rotate(-5deg);
	background:#FFFFFF;
	border: 5px solid #FFFFFF;
}
body.swap_puzzle_loaded #PuzzlePreviewConteiner img {
	display:block;
}

@media (max-width: 480px) {
		#PuzzlePreviewConteiner img {
				width:90px;
				height:90px;
				border: 3px solid #FFFFFF;
		}
}



/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------ loading ---------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
.loading {
    background-image: url("../images/loader_124x124.gif");
    background-repeat: no-repeat;
    background-position: center center;
		min-height:250px;
		min-width:124px;
		display:block;
}
body.swap_puzzle_loaded .loading {
	display:none;
}


/* ------------------------------------------------------------------------------------------- */
/* ------------------------ display panel (game over, level completed) ---------------------- */
/* ------------------------------------------------------------------------------------------- */
div#display_panel_wrapper {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin: 0;
  padding: 0;
  display: block;
	z-index:1010;
	overflow:hidden;
	pointer-events:none;
}
body.game_over div#display_panel_wrapper, body.game_completed div#display_panel_wrapper, body.level_completed div#display_panel_wrapper {
	pointer-events:auto;
}
div#display_panel_conteiner {
	position:absolute;
	z-index:1020;
	width:100%;
	height:100%;
	top:-100%;
	-ms-transform: rotate(-90deg) scale(0.5,0.5);
	-webkit-transform: rotate(-90deg) scale(0.5,0.5);
	transform: rotate(-90deg) scale(0.5,0.5);
	bottom:0px;
	left:0px;
	right:0px;
	margin: 0;
  padding: 0;
  display: block;
}
body.game_over div#display_panel_conteiner, body.game_completed div#display_panel_conteiner, body.level_completed div#display_panel_conteiner {
		top:0px;
		-ms-transform: rotate(0deg) scale(1,1);
		-webkit-transform: rotate(0deg) scale(1,1);
		transform: rotate(0deg) scale(1,1);
   -webkit-transition: all 0.75s 0.5s linear;
   -ms-transition: all 0.75s 0.5s linear;
   transition: all 0.75s 0.5s linear;
}
body.game_over div#display_panel_conteiner {
	background-color:rgba(255,0,0,0.75);
}
body.level_completed div#display_panel_conteiner, body.game_completed div#display_panel_conteiner {
	background-color:rgba(0,175,181,0.6);
}
div#display_panel_content_conteiner {
	display: table;
	vertical-align:middle;
	width:100%;
	height:100%;
}
div#display_panel_content {
display: table-cell;
	vertical-align:middle;
	text-align:center;
	width:100%;
	height:100%;
	cursor: default;
	padding:10px;
}
div#display_panel_content h3 {
	color:#FFFFFF;
	font-size:36px;
	line-height:28px;
	font-weight:normal;
	-webkit-text-shadow: 0 0 3px 2px rgba(0,0,0,0.24);
  text-shadow: 3px 2px rgba(0,0,0,0.24);
	letter-spacing:3px;
}
@media (max-width: 480px) {
		div#display_panel_content h3 {
				font-size:32px;
				line-height:26px;
				letter-spacing:2px;
		}
}



/* ------------------------------------------------------------------------------------------- */
/* ----------------------------------------- buttons ----------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
.button {
padding-top:8px;
padding-bottom:6px;
padding-left:14px;padding-right:14px;
font-size:25px;
display:inline-block;
color:#FFFFFF;
background-color:#F7A748;
cursor: default;
margin-left:auto;margin-right:auto;
margin-top:15px;
border: 3px solid #FFFFFF;
letter-spacing:2px;
}

@media (max-width: 480px) {
		.button {
			padding-left:10px;padding-right:10px;
			font-size:22px;
			margin-top:10px;
			border: 2px solid #FFFFFF;
			letter-spacing:1px;
		}
}

.button.blue {
	background-color:#00AFB5;
}

.button_animation {
  animation: animationFrames linear 3s 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 3s 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 3s 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 3s 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 3s 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  3% {
    transform:  rotate(-3deg) scaleX(0.70) scaleY(0.70) ;
  }
  6% {
    transform:  rotate(-3deg) scaleX(0.70) scaleY(0.70) ;
  }
  9% {
    transform:  rotate(3deg) scaleX(1) scaleY(1) ;
  }
  12% {
    transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  15% {
    transform:  rotate(3deg) scaleX(1) scaleY(1) ;
  }
 18% {
    transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  21% {
    transform:  rotate(3deg) scaleX(1) scaleY(1) ;
  }
  24% {
    transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
 27% {
    transform:  rotate(3deg) scaleX(1) scaleY(1) ;
  }
  30% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}




/* ------------------------------------------------------------------------------------------- */
/* ---------------------------------------------- IE8 ---------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
div.browser_to_old {
	display:none;
}
div.ie8 div.puzzle_wrapper {
	display:none!important;
}
div.ie8 div.browser_to_old {
	display:block;
	color:#FFFFFF;
	background-color:#FF0000;
	font-weight:bold;
	padding:10px;
}