.clthumbnail {
    text-align: -moz-center !important;
    text-align: center !important;
}
.clthumbnail img {
    width: 100px;
    animation-duration: .3s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
    border-radius: 10px;
}
.clthumbnail img:hover {
    animation: shake 0.62s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;            
}

.left-menu-puzzle-image {
	width: 125px;
	margin-top: 1.27em;
}

.puzzle_button_menu {
	margin-bottom: 1em;
}

#content {
}

.cltn1 { animation-delay: 0.00s; }
.cltn2 { animation-delay: 0.01s; }
.cltn3 { animation-delay: 0.07s; }
.cltn4 { animation-delay: 0.10s; }

.clGameMenu li {
    margin:1em;
}
.clClock {
    font-family: Century Gothic, Sans Serif;
    font-size: 2rem;
    color: rgba(68, 68, 68, 0.589);
}

.main-holder {
    height: 760px !important;
    overflow: initial !important;
}

#game-options {
	height: 100% !important;
	margin-top: 3em !important;
}





.hide {
	display: none;
}
.clear {
	clear: both;
}
.clMainTitle {
	font: Roboto Slab;
	color: darkblue;
	font-size: 2em;
}

div#puzzles-background {
	position: absolute;
	width: 557px;
	padding-top: 4em !important;
    /*border: 1px solid black;*/
	background: lavender !important; /* Old browsers */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffffe', endColorstr='#dbd8d1',GradientType=0 );*/ /* IE6-8 */
}
div#canvas-wrap-sizer { /* controls the size of the jigsaw canvas */
    /*margin: 2em auto 4em;*/
	clear: both;
	width: 100%;
    height: 100%;
}
	div#canvas-wrap-sizer > a {
		display: block;
		margin:0 auto;
		width:50%;
		line-height:3;
		text-align:center;
	}

/*== Jigsaw puzzle ==*/
div#canvas-wrap {
	position: relative;
	width: 100%;
    height: 100%;
}
canvas#buffer,
canvas#image-preview {
	position: absolute;
	top: -26px;
	left: 0;
}
canvas#canvas {
	z-index: 100;
	overflow: hidden;
}
	canvas#canvas.loading {
		/*background: url(../images/loader.gif) no-repeat center; */
	}
canvas#buffer {
	z-index: 70;
}
canvas#image-preview.show {
	left: 50%;
	-moz-opacity: 0.5;
	/*opacity: 0.5;*/
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	z-index: 40;
}

/*== Options bar ==*/
div#game-options {
	float: left;
	width: 100%;
	overflow: visible;
	position: relative;
	background-color: transparent;
	margin: 0;
	padding: 0;
	height: 104px;
	white-space: nowrap;
}
	div#game-options > img {
		width: 162px;
		margin: 0 auto;
	}
	div#game-options ul {
		margin: 0;
		padding: 0;
		clear: left;
		float: left;
		list-style: none;
		position: relative;
		left: 50%;
		text-align: center;
	}
		div#game-options ul li {
			position: relative;
			float: left;
			list-style: none;
			display: block;
			margin: 0;
			padding: 0;
			right: 50%;
			top: 0.5em;
		}
a.button[title="Preview"] {
	margin-right:0px;
}


/*== Clock ==*/
#clock {
	width: 50px;
    padding: 0.4em;
    position: absolute;
    left: 0;
}

/*== Select ==*/
#set-parts {
    height: 31px !important;
}

div#game-options div.styled-select {
	width: 100px;
	height: 29px;
	/*margin-right: 10px;*/
	overflow: hidden;
	/*background: url(../images/arrow.png) right no-repeat #f3f3f3; */
	border: 1px solid #dcdcdc;
	display: none;
}
	div#game-options div.styled-select select {
		outline: none;
		background: transparent;
		width: 125px;
		padding: 6px;
		border: none;
		height: 29px;
		-webkit-appearance: none;
		display: inline-block;
	}
	div#game-options div.styled-select select {
		color: #6e6e6e;
	}

/*== Create puzzle ==*/
#image-error {
	color: red;
	margin: 0 10px;
	display: none;
}
#dnd {
	display: none;
}

/*== Modal window ==*/
div#congrat {
	text-align: center;
}
div#help ul {
	margin-left: 10px;
}


/*== mobile ==*/
@media screen and (max-width: 960px) {
	#SHOW_EDGE, #SHOW_MIDDLE, #SHOW_ALL {
		display: none;
	}
}

/* media queries */
@media screen and (min-width: 479px) {
	div#game-options div.styled-select {
		display: inline-block;
	}
	a.button[title="Preview"] {
		margin-right:10px;
	}
}
/* media queries */
/*@media screen and (min-width: 650px) {
	div#game-options div.styled-select {
		display: inline-block;
	}
	a.button[title="Preview"] {
		margin-right:10px;
	}
}*/

.mobile {
    display: none;
}
/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */
   .hidden { display: none !important; visibility: hidden; }
   .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
   .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
   .invisible { visibility: hidden; }
   .clearfix:before, .clearfix:after { content: ""; display: table; }
   .clearfix:after { clear: both; }
   .clearfix { *zoom: 1; }
   .hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}
   .no-float {	float: none; }
   .max100 { max-width: 100%; }







@keyframes fadeAndScale {
    0% {
        opacity: 0;
        transform: scale(.5, .5);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5, 1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-3px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(4px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-6px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(6px, 0, 0);
    }
}