*{margin:0; padding:0; outline:none; border:0;}
body, html{height:100%;}

body{font-family: 'open_sanslight';}


@font-face {
    font-family: 'Harabara';
    src: url('fonts/Harabara.eot');
    src: url('fonts/Harabara.eot') format('embedded-opentype'),
         url('fonts/Harabara.woff2') format('woff2'),
         url('fonts/Harabara.woff') format('woff'),
         url('fonts/Harabara.ttf') format('truetype'),
         url('fonts/Harabara.svg#Harabara') format('svg');
}

@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans-light-webfont.eot');
    src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/opensans-semibold-webfont.eot');
    src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-semibold-webfont.woff') format('woff'),
         url('fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans-bold-webfont.eot');
    src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-bold-webfont.woff') format('woff'),
         url('fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

        /* Pure CSS */
        .pure-button { margin: 5px 0; text-decoration: none !important; }
        .button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

#puzzle-containment{display:flex; flex-direction:column; align-items:center;}
#puzzle-containment h2{ color:#fff; font-size:50px; font-family: 'Harabara'; letter-spacing:4px; text-shadow:-2px -4px 0 rgba(0,0,0,0.3);}
#puzzle-containment h3{ color:#fff; font-weight:normal;}
#puzzle-containment h3 strong{font-size:25px; font-family: 'open_sanssemibold';}
#puzzle-containment h4{ color:#fff; font-weight:normal; font-size:19px; font-family: 'open_sanssemibold'; margin-bottom:15px;}
.pure-g{display:flex; flex-direction:column; align-items:center; justify-content:space-around;}
.pure-u-1.fixed{ width:500px; margin:0 auto; overflow:hidden;}
.pure-u-1.fixed img{width:100%;}
.pure-u-1.tiles{width:100%;}
        /* required snapPuzzle styles */
        .snappuzzle-wrap { position: relative; display: block;  overflow:hidden; top:10%; border-radius:10px;}
        .snappuzzle-pile { position: relative; }
        .snappuzzle-piece { cursor: move; }
        .snappuzzle-slot { position: absolute; background: #fff; opacity: .5; }
        .snappuzzle-slot-hover { background: #eee; }
		
		.snappuzzle-piece:focus{ box-shadow:0 0 15px rgba(0,0,0,0.5);}