@charset "utf-8";
/* CSS Document */

.puzzle-wrap										{ height: auto; position: relative;}
.puzzle												{ list-style: none; padding: 0;}
.overlay											{ display: none; opacity: 0; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.75); z-index: 1; cursor: pointer; overflow: hidden;}
.overlay img										{ display: block; width: 50%; margin: 8% auto 0;}
.overlay p											{ text-align: center; color: #fff; font-family: Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 15px;}
.img												{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; text-decoration: none; outline: none; opacity: 1;}
.blocks												{ margin: 1px; float: left; background-repeat: no-repeat; z-index: 0; border: 2px solid #6F6969; cursor: move;

													  -webkit-border-radius: 15px;
													  -moz-border-radius: 15px;
													  -ms-border-radius: 15px;
													  -o-border-radius: 15px;
													  border-radius: 15px;

													  -webkit-box-sizing: border-box;
													  -moz-box-sizing: border-box;
													  -ms-box-sizing: border-box;
													  -o-box-sizing: border-box;
													  box-sizing: border-box;

													  -webkit-box-shadow: inset 0 0 3px #000;
													  -moz-box-shadow: inset 0 0 3px #000;
													  -ms-box-shadow: inset 0 0 3px #000;
													  -o-box-shadow: inset 0 0 3px #000;
													  box-shadow: inset 0 0 3px #000;

													  -webkit-transition: -webkit-transform 0.2s ease-out;
													  -moz-transition: -moz-transform 0.2s ease-out;
													  -ms-transition: -moz-transform 0.2s ease-out;
													  -o-transition: transform 0.2s ease-out;
													  transition: transform 0.2s ease-out;
													}
.show-image											{ display: block; width: 200px; height: 50px; margin: 20px auto 0; border: none; outline: none; cursor: pointer;  background-color: #069; color: #fff; font-family: Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 15px; font-weight: bold;

													  -webkit-border-radius: 5px;
													  -moz-border-radius: 5px;
													  -ms-border-radius: 5px;
													  -o-border-radius: 5px;
													  border-radius: 5px;

													}
.show-image:hover									{ background: #3687AF;}
.hover												{ border: 2px dashed #000;}
.finished											{ width: 60%; min-height: 250px; background: #fff; border: 1px solid #B3B3B3; border-radius: 10px; position:absolute; top: 50%; left: 50%; z-index: 1000; text-align: center; padding: 20px; box-sizing: border-box; -moz-box-sizing: border-box; font-family: sans-serif;}
.finished img                                       { max-height: 400px; width: auto;max-width: 100%;}
.finished h3										{ font-size: 40px; color: #3999E5; line-height: 100%; margin: 0 0 25px;}
.finished p											{ font-size: 23px; margin: 0;}
.play-again											{ width: 100%; height: 50px; color: #fff; font-size: 20px; font-weight: bold; margin-top: 15px;

													  -webkit-border-radius: 5px;
													  -moz-border-radius: 5px;
													  -ms-border-radius: 5px;
													  -o-border-radius: 5px;
													  border-radius: 5px;

													  -webkit-text-shadow: 0px -1px 0px #464646;
													  -moz-text-shadow: 0px -1px 0px #464646;
													  -ms-text-shadow: 0px -1px 0px #464646;
													  -o-text-shadow: 0px -1px 0px #464646;
													  text-shadow: 0px -1px 0px #464646;

													  -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
													  -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
													  -ms-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
													  -o-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
													  box-shadow: 0px 1px 2px rgba(0,0,0,.5);

													  background: #68c1b7; /* Old browsers */
													  background: -moz-linear-gradient(top,  #68c1b7 0%, #1d6a93 100%); /* FF3.6+ */
													  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68c1b7), color-stop(100%,#1d6a93)); /* Chrome,Safari4+ */
													  background: -webkit-linear-gradient(top,  #68c1b7 0%,#1d6a93 100%); /* Chrome10+,Safari5.1+ */
													  background: -o-linear-gradient(top,  #68c1b7 0%,#1d6a93 100%); /* Opera 11.10+ */
													  background: -ms-linear-gradient(top,  #68c1b7 0%,#1d6a93 100%); /* IE10+ */
													  background: linear-gradient(to bottom,  #68c1b7 0%,#1d6a93 100%); /* W3C */
													  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68c1b7', endColorstr='#1d6a93',GradientType=0 ); /* IE6-9 */
													}
.play-link											{ display: block; text-align:center; margin: 15px auto 0; padding: 10px 0; height: 25px;}
.clearfix:after										{ content: ""; display: block; height: 0; clear: both; visibility: hidden;}

@media screen and (max-width: 1024px) {
.finished											{ top: 30%;}
}