@charset "UTF-8";
/* CSS Document */
/*------------------------------------- Page Defaults -----------------------------------*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* Animate.css */
.os-animation { opacity: 0; } .os-animation.animated { opacity: 1; }

/* Body */
body {
	background: #FFF;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
img {width:100%;}
.clear {clear:both;}

a:link {
	text-decoration:none;
	color:inherit;
}
a:visited {
	text-decoration:none;
	color:inherit;
}
a:hover {
	text-decoration:none;
	color:inherit;
}
/*------------------------------------- Text Spans -----------------------------------*/
/* Good Dog */
.good-dog {
	font-family: gooddog-new, sans-serif;
	font-style: normal;
	font-weight: 400;
}
/* Meuso Slab */
.museo-slab-light {
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
}
.museo-slab-regular {
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 500;
}
.museo-slab-bold {
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 700;
}
/* Text Align & Character */
.uppercase {
	text-transform:uppercase;
}
.lowercase {
	text-transform:none;
}
.centred  {
	text-align: center;
}
/* Colors */
.white {
	color: #FFF;
}
.grey {
	color: #404041;
}
.beige {
	color: #f8f6dd;
}
.blue {
	color: #689ab8;
}
.red {
	color: #c05e56;
}
.yellow {
	color: #ecce63;
}
.green {
	color: #97a54f;
}
.orange {
	color: #e7945a;
}
/* -- Offset -- */
:target:before {
  content:"";
  display:block;
  height:auto; /* fixed header height*/
  padding:0px 0px 0px 0px;
  margin:0px 0 0 0; /* negative fixed header height */
}
/*----------------------------------- Navigation ----------------------------------------*/
/* Header */
header {
	height: auto;
	padding: 8px 0px 8px 0px;
	background: #f8f6dd;
}
header .inner {
	list-style: none;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
}
header .inner li {
	display: block;
	float: right;
	padding: 0px 10px 0px 0px;
	font-size: 1em;
	color: #c05e57;
}
header .inner li svg {
	display: inline-block;
	height: 15px;
	width: 15px;
	margin: 0px 8px -2px 0px;
	fill: #9ba855;
}
/* Main Nav */
#main {
	height: auto;
	padding: 0px;
	background: #c05e57;
	border-bottom: 3px solid #a64f49;
	border-top: 3px solid #a64f49;
}
#main .main-inner {
	position: relative;
	list-style: none;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
}
#main .main-inner #logo {
	position: absolute;
	z-index: 10;
	top: -33px;
	left: 0;
	width: 307px;
	height: 130px;
	background: url('../gfx/logo.png') no-repeat;
	background-size: contain;
}
#main .main-inner li {
	position: relative;
	display: block;
	float: right;
	padding: 30px 0px 30px 0px;
	margin: 0px 20px 0px 0px;
	font-size: 1.3em;
	color: #f8f6dd;
}
#main .main-inner li span {
	position: relative;
	z-index: 2;
}
#main .main-inner li:hover::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block;
	height: 30px;
	width: 60px;
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	transition: 0.2s all;
}
/*----------------------------------- Dropdowns ----------------------------------------*/
#main .main-inner .dropdown {
	position: relative;
}
#main .main-inner .dropdown ul {
	display: none;
	opacity: 0;
	visibility: hidden;
	/* Styles */
	position: absolute;
	z-index: 2;
	top: 81px;
	left: 50%;
	transform: translateX(-50%);
	list-style: none;
	padding: 30px;
	width: 300px;
	height: auto;
	background: url('../gfx/drop-down.png') no-repeat;
	background-size: contain;
	background-position: center;
}
#main .main-inner .dropdown:hover ul,
#main .main-inner .dropdown:focus ul {
	transition: 0.3s all;
	display: block;
	opacity: 1;
	visibility: visible;
}
#main .main-inner .dropdown ul li {
	position: relative;
	display: block;
	width: 100%;
	padding: 0px 0px 20px 0px;
	margin: 0px;
	text-align: center;
	font-size: 1em;
	color: #f8f6dd;
}
/*----------------------------------- Banners ----------------------------------------*/
.landing-small {
	position: relative;
	height: 500px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.landing-small .wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 1200px;
	height: auto;
}
.landing-small .wrapper p {
	font-size: 1.1em;
}
.landing-small .meet-the-characters {
	height: 350px;
	width: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: url('../gfx/meet-the-characters.png') no-repeat;
	background-size: contain;
}
.landing-small .activities {
	height: 350px;
	width: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: url('../gfx/activities.png') no-repeat;
	background-size: contain;
}
.landing-small .home-texture {
	height: auto;
	width: 900px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
/*----------------------------------- Content ----------------------------------------*/
/* Backgrounds */
.blue-bg {
	background: #689ab8;
	position: relative;
}
.beige-bg {
	background: #f8f6dd;
	position: relative;
}
.green-bg {
	background: #9ba855;
	position: relative;
}
.red-bg {
	background: #c05e57;
	position: relative;
}
.orange-bg {
	background: #c78d49;
	position: relative;
}
.light-orange-bg {
	background: #e7945a;
	position: relative;
}
.light-blue-bg {
	background: #79c4be;
	position: relative;
}
.dark-blue-bg {
	background: #4c83a3;
	position: relative;
}
.purple-bg {
	background: #826c90;
	position: relative;
}
.pink-bg {
	background: #f2dfdd;
	position: relative;
}
.dark-pink {
	background: #e2c7c4;
	position: relative;
}
/* Border Textures */
.beige-border-texture {
	position: absolute;
	z-index: 9;
	bottom: -20px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/beige.png') no-repeat;
	background-position: bottom;
	background-size: cover;
}
.blue-border-texture {
	position: absolute;
	z-index: 9;
	bottom: -20px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/blue.png') no-repeat;
	background-position: bottom;
	background-size: cover;
}
.red-border-texture {
	position: absolute;
	z-index: 10;
	top: -20px;
	left: 0px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/red.png') no-repeat;
	background-position: top;
	background-size: cover;
}
.blue-top-border-texture {
	position: absolute;
	z-index: 10;
	top: -20px;
	left: 0px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/blue-top.png') no-repeat;
	background-position: top;
	background-size: cover;
}
.pink-border-texture {
	position: absolute;
	z-index: 9;
	bottom: -20px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/pink.png') no-repeat;
	background-position: bottom;
	background-size: cover;
}
.pink-top-border-texture {
	position: absolute;
	z-index: 10;
	top: -20px;
	left: 0px;
	width: 100%;
	height: 20px;
	background: url('../gfx/border-textures/pink-top.png') no-repeat;
	background-position: top;
	background-size: cover;
}
/* Wrapper */
.wrapper {
	width: 1200px;
	height: auto;
	padding: 80px 0px 80px 0px;
	margin: 0 auto;
}
.wrapper h1 {
	font-size: 2.5em;
	line-height: 1.1em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
.wrapper h2 {
	font-size: 1.9em;
	line-height: 1.1em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
.wrapper p {
	font-size: 1.3em;
	line-height: 1.4em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
.wrapper a:hover,
.wrapper a:focus {
	text-decoration: underline;
}
.wrapper .spacer {
	height: 50px;
	width: 100%;
}
/* Section Icons */
.wrapper .section-icon {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 30px;
}
/* Buttons */
.wrapper .btn-contain,
.btn-contain {
	position: relative;
	height: 50px;
	width: 100%;
	margin: 20px 0px 0px 0px;
}
.wrapper .btn-contain .btn-red,
.wrapper .btn-contain .btn-white,
.btn-contain .btn-red {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	padding: 15px 20px 15px 20px;
	font-size: 1em;
	border-radius: 30px;
	/* Drop Shadow */
	-webkit-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
	white-space: nowrap;
}
.wrapper .col .btn-contain .btn-white,
.wrapper .col-3 .btn-contain .btn-white {
	text-align: center;
	max-width: 300px;
	width: 100%;
}
.wrapper .btn-contain .btn-red,
.btn-contain .btn-red {
	color: #f8f6dd;
	background: #c05e57;
}
.md-modal .btn-contain .btn-red {
	font-size: 1em;
}
.wrapper .btn-contain .btn-white {
	color: #ecce63;
	background: #FFF;
}
.wrapper .btn-contain .btn-red:hover,
.wrapper .btn-contain .btn-red:focus,
.wrapper .btn-contain .btn-white:hover,
.wrapper .btn-contain .btn-white:focus,
.btn-contain .btn-red:hover,
.btn-contain .btn-red:focus {
	background: rgba(0,0,0,0.2);
	transition: 0.3s all;
}
/* Button Icons */
.wrapper .btn-contain .btn-red svg,
.wrapper .btn-contain .btn-white svg,
.btn-contain .btn-red svg {
	display: inline-block;
	height: 20px;
	width: 20px;
	margin: 0px 10px -4px 0px;
}
.wrapper .btn-contain .btn-red svg {
	fill: #f8f6dd;
}
.wrapper .btn-contain .btn-white svg {
	fill: #ecce63;
}
/* Books */
.wrapper .col {
	position: relative;
	width: 50%;
	display: block;
	float: left;
	height: auto;
	margin: 0px;
	padding: 0px 20px 0px 20px;
}
.wrapper .col img {
	display: block;
	width: 70%;
	margin: 0 auto;
}
.wrapper .col .text-only {
	padding: 0px 50px 0px 50px;
}
/* The Story */
.wrapper #the-story {
	display: block;
	width: 600px;
	height: auto;
	margin: 0 auto;
	margin-bottom: -25px;
}
.wrapper #home-characters {
	position: relative;
	height: 275px;
	width: 100%;
}
/* Character Grid */
.wrapper #character-grid {
	list-style: none;
	padding: 30px 0px 30px 0px;
	margin: 0;
	height: auto;
	position: relative;
}
.wrapper #character-grid li {
	position: relative;
	z-index: 2;
	display: block;
	padding: 0px 30px 30px 30px;
	width: 25%;
	margin: 0;
	float: left;
}
.wrapper #character-grid .last {
	 margin-left: 12.5%;
}
.wrapper #character-grid li img {
	display: block;
	width: 100%;
	margin: 0px 0px 10px 0px;
}
.wrapper #character-grid li p {
	margin: 0;
	padding: 0;
}
.wrapper #character-grid .bg-texture {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 700px;
	height: auto;
}
/* The Creators */
.wrapper #creator-graphic {
	position: absolute;
	z-index: 10;
	display: block;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: auto;
}
.wrapper #the-creators {
	list-style: none;
	padding: 0px;
	margin: 0px;
	height: auto;
}
.wrapper #the-creators li {
	position: relative;
	padding: 0px 0px 0px 200px;
	height: auto;
	width: 100%;
	margin: 40px 0px 40px 0px;
}
.wrapper #the-creators li img {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 150px;
	width: 150px;
}
.wrapper #the-creators li p {
	font-size: 1.2em;
	line-height: 1.4em;
}
/* Buy Now */
.wrapper .col-3 {
	display: block;
	width: 33.3%;
	padding: 0px 20px 30px 20px;
	float: left; 
}
.wrapper .col-3 img {
	display: block;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 10px;
}
/* Activities */
.wrapper #activities {
    list-style: none;
    padding: 50px 0px 50px 0px;
    margin: 0 auto;
    width: 100%;
}
.wrapper #activities li {
    position: relative;
    display: block;
    padding: 30px;
    width: calc(50% - 20px);
    float: left;
    background: #FFF;
    border-radius: 3px;
    margin: 0;
    /* Drop Shadow */
	-webkit-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.15);
}
.wrapper #activities li:nth-of-type(odd) {
    margin: 0px 40px 40px 0px;
}
.wrapper #activities li h2 {
    position: relative;
    margin: 0;
    padding: 0;
}
.wrapper #activities .game {
    background: #c05e56;
}
/* ------------------- */
/* -- Character One -- */
/* ------------------- */
#animation-1-home {
	height: 500px;
	width: 500px;
	position: absolute;
	z-index: 10;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: url('../gfx/character3/burglar.png') no-repeat;
	background-size: contain;
}
#animation-1-home #animation-1-left-eye-home {
	position: absolute;
	top: 74px;
	left: 223px;
	width: 50px;
	height: 50px;
	background: url('../gfx/character3/right_eye.gif') no-repeat;
	background-size: contain;
}
#animation-1-home #animation-1-right-eye-home {
	position: absolute;
	top: 65px;
	right: 184px;
	width: 50px;
	height: 50px;
	background: url('../gfx/character3/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-1-home #animation-1-arm-home {
	position: absolute;
	height: 246px;
	width: 248px;
	top: 196px;
	left: 18px;
	background: url('../gfx/character3/arm.png') no-repeat;
	background-size: contain;
}
/* ------------------- */
/* -- Character Two -- */
/* ------------------- */
#animation-2-home {
	height: 500px;
	width: 500px;
	position: absolute;
	z-index: 11;
	left: calc(50% - 300px);
	bottom: 0;
	transform: translateX(-50%);
	background: url('../gfx/character5/burglar.png') no-repeat;
	background-size: contain;
}
#animation-2-home #animation-2-foot-home {
	position: absolute;
	height: 68px;
	width: 132px;
	bottom: 3px;
	right: 97px;
	background: url('../gfx/character5/foot.png') no-repeat;
	background-size: contain;
}
#animation-2-home #animation-2-cotton-swab-home {
	position: absolute;
	height: 222px;
	width: 145px;
	top: 28px;
	left: 42px;
	background: url('../gfx/character5/arm.png') no-repeat;
	background-size: contain;
}
#animation-2-home #animation-2-left-brow-home {
	position: absolute;
	height: 19px;
	width: 33px;
	top: 81px;
	left: 236px;
	background: url('../gfx/character5/left-eyebrow.png') no-repeat;
	background-size: contain;
}
#animation-2-home #animation-2-right-brow-home {
	position: absolute;
	height: 17px;
	width: 36px;
	top: 79px;
	right: 184px;
	background: url('../gfx/character5/right-eyebrow.png') no-repeat;
	background-size: contain;
}
/* Eyes */
#animation-2-home #animation-2-left-eye-home {
	position: absolute;
	top: 74px;
	left: 223px;
	width: 68px;
	height: 68px;
	background: url('../gfx/character5/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-2-home #animation-2-right-eye-home {
	position: absolute;
	top: 71px;
	right: 161px; 
	width: 68px;
	height: 68px;
	background: url('../gfx/character5/right_eye.gif') no-repeat;
	background-size: contain;
}
/* --------------------- */
/* -- Character Three -- */
/* --------------------- */
#animation-3-home {
	height: 500px;
	width: 500px;
	position: absolute;
	z-index: 9;
	left: calc(50% + 300px);
	bottom: 0;
	transform: translateX(-50%);
}
#animation-3-home #burglar-3-home { /* We need to hid the arm behind the burglar */
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	background: url('../gfx/character8/burglar.png') no-repeat;
	background-size: contain;
}
#animation-3-home #animation-3-yarn-home {
	display: block;
	position: absolute;
	z-index: 1;
	height: 190px;
	width: 95px;
	top: 186px;
	right: 90px;
	background: url('../gfx/character8/arm.png') no-repeat;
	background-size: contain;
}
#animation-3-left-eye-home {
	position: absolute;
	z-index: 3;
	top: 43px;
	left: 226px;
	width: 68px;
	height: 68px;
	background: url('../gfx/character8/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-3-right-eye-home {
	position: absolute;
	z-index: 3;
	top: 47px;
	right: 161px;
	width: 68px;
	height: 68px;
	background: url('../gfx/character8/right_eye.gif') no-repeat;
	background-size: contain;
}
/*----------------------------------- Form ----------------------------------------*/
.required-wrap {
	position:relative;
}
.required-wrap .astrix {
	position: absolute;
	font-size:0.8em;
	color: #c96c65;
	top: 0px;
	right: -15px;
}
#form {
	position: relative;
	z-index: 2;
	padding:0;
	margin:0;
}
#form .col {
	height:auto;
	width:47%;
	margin: 0px 1.5% 0px 1.5%;
	padding: 0;
	float:left;
}
#form p {
	text-align: center;
	font-size: 1.1em;
	color: #c96c65;
	padding: 10px 0px 20px 0px;
}
#q5 {
	height: 123px;
	margin: 0 auto;
}
#form .arrow {
	position:absolute;
	height:20px;
	width:20px;
	fill:rgba(0,0,0,0.4);
	padding:3px;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	top:17px;
	right:17px;
	pointer-events:none;
}
.bg-texture {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 300px;
	height: auto;
}
#recaptcha,
.g-recaptcha {
	position: absolute;
	z-index: 20;
}
/* ----- Inputs ---- */
#form input[type="radio"] {
	display:inline-block;
	margin:0px 5px -3px 5px;
}
#form input[type="text"],
#form input[type="email"],
#form input[type="phone"] {
	display: block;
	margin:0 auto;
	width: 100%;
	
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
	
	color: #a64f49;
	font-size: 1.2em;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	background: #FFF;
 	border:1px solid #e7945a;
	margin-top:15px;
	margin-bottom:15px;
	padding:15px 0px 15px 10px;
}
#form input[type="text"]:focus,
#form input[type="email"]:focus,
#form input[type="phone"]:focus,
#form select:focus,
#form textarea:focus {
    outline: none !important;
    border:1px solid #a64f49;
    box-shadow:none;
}
#form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	margin:0 auto;
	width: 100%;
	
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
	
	color: #e7945a;
	font-size: 1.2em;
	box-shadow: none;
	border-radius: 0;
	background: #FFF;
 	border:1px solid #e7945a;
	margin-top:15px;
	margin-bottom:15px;
	padding:16px 0px 15px 10px;
}
#form textarea {
	width: 100%;
	display: block;
    
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
	
  	color: #a64f49;
  	font-size: 1.25em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: none;
  	background: #FFF;
 	border:1px solid #e7945a;
	padding:15px 0px 15px 10px;
}
#form #submit-btn {
	width: 200px;
	margin: 0 auto;
	display: block;
    
	font-family: gooddog-new, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	
  	color:#FFF;
  	font-size: 1.2em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: 30px;
  	background:#c96c65;
  	border:none;
	padding:15px 0px 15px 10px; 
}
#form #submit-btn:hover {
	background: #a64f49;
	transition:0.2s ease;
	-webkit-transition:0.2s ease;
	-moz-transition:0.2s ease;
	-ms-transition:0.2s ease;
}
/* Placeholders */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
    color: #e7945a;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
    color: #e7945a;
   	opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
    color: #e7945a;
   	opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
    color: #e7945a;
}
/* Newsletter */
#news-letter form {
	margin: 20px 0px 30px 0px;
	position: relative;
}
#news-letter input[type="email"] {
	display:inline-block;
  	width: 100%;
	height:53px;
  	
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
	
  	color:rgba(0,0,0,0.4);
	border:none;
  	font-size: 1em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: 0;
  	background:rgba(255,255,255,1);
  	padding:15px 0px 15px 10px;
}
#news-letter input[type="email"]:focus {
    outline: none !important;
	color:rgba(0,0,0,0.6);
    box-shadow:none;
}
#news-letter input[type="submit"] {
	position:absolute;
	top:0px;
	right:0px;
	display:inline-block;
	height:53px;
  	
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 300;
	
  	color: #FFF;
	border:none;
  	font-size: 1em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: 0;
  	background: #e7945a;
	padding:10px 30px 10px 30px;
}
#news-letter input[type="submit"]:hover {
	background: #689ab8;
	transition:0.2s ease;
	-webkit-transition:0.2s ease;
	-moz-transition:0.2s ease;
	-ms-transition:0.2s ease;
}
/*----------------------------------- Unslider ----------------------------------------*/
/* Unslider */
.unslider{overflow:auto;margin:0;padding:0}
.unslider-wrap{position:relative}
.unslider-wrap.unslider-carousel>li{float:left}
.unslider-vertical>ul{height:100%}
.unslider-vertical li{float:none;width:100%}
.unslider-fade{position:relative}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}
/* Next // Previous */
.unslider-arrow {
	content: '';
	position:absolute;
	top: 50%;
	left: 50px;
	z-index:2;
	transform: translateY(-50%);
	height: 100px;
	width: 100px;
	background: url('../gfx/previous.png') no-repeat;
	background-size: contain;
	color: transparent;
}
.unslider-arrow:hover {
	color: transparent;
}
.unslider-arrow.next {
	left:auto;
	right:50px;
	background: url('../gfx/next.png') no-repeat;
	background-size: contain;
}
/* Slider */
.landing-slider,
.unslider {
	position: relative;
	height: 100vh;
	width: 100%;
}
.landing-slider li {
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
.landing-slider .character-bg {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 150px;
	width: 500px;
	height: 500px;
	transform: translateY(-50%);
	background: url('../gfx/character-textures/character-background.png') no-repeat;
	background-size: contain;
}
/*----------------------------------- Characters // Animations ----------------------------------------*/
/* Mobile Character Structure */
.character-container {
	position: relative;
	height: auto;
	width: 100%;
}
.character-container #animation-1-mobile,
.character-container #animation-2-mobile,
.character-container #animation-3-mobile,
.character-container #animation-4-mobile,
.character-container #animation-5-mobile,
.character-container #animation-6-mobile,
.character-container #animation-7-mobile,
.character-container #animation-8-mobile,
.character-container #animation-9-mobile,
.character-container #animation-10-mobile,
.character-container #animation-11-mobile {
	height: 500px;
	width: 500px;
	position: static;
	top: auto;
	left: auto;
	transform: translateX(0) translateY(0);
	margin: 0 auto;
}
/* Standard Landing */
.landing {
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
/* Inner Animation */
.animation-inner {
	height: 800px;
	width: 1200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
/* Inner Text */
.animation-inner .text {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: auto;
	width: 400px;
}
.character-container .text {
	display: block;
	padding: 50px 0px 0px 0px;
	margin: 0;
	width: 100%;
}
.animation-inner .text h1,
.character-container .text h1 {
	font-size: 2.3em;
	line-height: 1.1em;
	padding: 0;
	margin-bottom: 10px;
}
.animation-inner .text p,
.character-container .text p {
	font-size: 1.2em;
	line-height: 1.4em;
	padding: 0;
	margin-bottom: 10px;
}
.animation-inner .text .texture-1 {
	display: block;
	height: 150px;
	width: 200px;
	position: absolute;
	top: -150px;
	right: 0;
	background: url(../gfx/character-textures/text-texture-1.png) no-repeat;
	background-size: contain;
}
.animation-inner .text .texture-2 {
	display: block;
	height: 80px;
	width: 200px;
	position: absolute;
	bottom: -110px;
	left: 0;
	background: url(../gfx/character-textures/text-texture-2.png) no-repeat;
	background-size: contain;
}
/* ------------------- */
/* -- Character One -- */
/* ------------------- */
#animation-1,
#animation-1-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character1/burglar.png') no-repeat;
	background-size: contain;
}
#animation-1 #animation-1-left-eye,
#animation-1-mobile #animation-1-left-eye-mobile {
	position: absolute;
	top: 235px;
	left: 275px;
	width: 80px;
	height: 80px;
	/*background: url('../gfx/character1/left-eye.gif') no-repeat;*/
	background-image: url('../gfx/character1/left-Eye.gif');
	background-size: contain;
}
#animation-1 #animation-1-right-eye,
#animation-1-mobile #animation-1-right-eye-mobile {
	position: absolute;
	top: 236px;
	right: 390px;
	width: 80px;
	height: 80px;
	background: url('../gfx/character1/right-eye.gif') no-repeat;
	background-size: contain;
}
#animation-1 #animation-1-balloons,
#animation-1-mobile #animation-1-balloons-mobile {
	height: 352px;
	width: 262px;
	position: absolute;
	top: 50px;
	right: 365px;
	transform: rotate(45deg);
	background: url('../gfx/character1/balloons.png') no-repeat;
	background-size: contain;
}
#animation-1 .balloon-animation,
#animation-1-mobile .balloon-animation {
	transform-origin: bottom right;
	/* Animations */
	animation-name: balloon-animation;
	animation-direction: alternate;
	animation-duration: 3000ms;
    animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes balloon-animation {
    from {transform: rotate(45deg);}
    to {transform: rotate(50deg);}
}
@keyframes balloon-animation {
    from {transform: rotate(45deg);}
    to {transform: rotate(50deg);}
}
/* ------------------- */
/* -- Character Two -- */
/* ------------------- */
#animation-2,
#animation-2-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character2/burglar.png') no-repeat;
	background-size: contain;
}
#animation-2 #animation-2-left-eye,
#animation-2-mobile #animation-2-left-eye-mobile {
	position: absolute;
	top: 180px;
	left: 320px;
	width: 80px;
	height: 80px;
	background: url('../gfx/character2/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-2 #animation-2-right-eye,
#animation-2-mobile #animation-2-right-eye-mobile {
	position: absolute;
	top: 182px;
	right: 353px;
	width: 80px;
	height: 80px;
	background: url('../gfx/character2/right_eye.gif') no-repeat;
	background-size: contain;
}
#animation-2 #animation-2-clock,
#animation-2-mobile #animation-2-clock-mobile {
	height: 130px;
	width: 130px;
	position: absolute;
	top: 100px;
	right: 290px;
	background: url('../gfx/character2/clock.gif') no-repeat;
	background-size: contain;
}
#animation-2 #animation-2-spoon,
#animation-2-mobile #animation-2-spoon-mobile {
	height: 589px;
	width: 186px;
	position: absolute;
	top: 0px;
	right: 110px;
	background: url('../gfx/character2/spoon.png') no-repeat;
	background-size: contain;
}
#animation-2 .spoon-animation,
#animation-2-mobile .spoon-animation {
	transform-origin: bottom right;
	/* Animations */
	animation-name: spoon-animation;
	animation-direction: alternate;
	animation-duration: 2000ms;
    animation-iteration-count: infinite;
}
@keyframes spoon-animation {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(0px, 10px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(0px, 15px, 0px);
    }
}
/* --------------------- */
/* -- Character Three -- */
/* --------------------- */
#animation-3,
#animation-3-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character3/burglar.png') no-repeat;
	background-size: contain;
}
#animation-3 #animation-3-left-eye,
#animation-3-mobile #animation-3-left-eye-mobile {
	position: absolute;
	top: 120px;
	left: 360px;
	width: 80px;
	height: 80px;
	background: url('../gfx/character3/right_eye.gif') no-repeat;
	background-size: contain;
}
#animation-3 #animation-3-right-eye,
#animation-3-mobile #animation-3-right-eye-mobile {
	position: absolute;
	top: 105px;
	right: 297px;
	width: 80px;
	height: 80px;
	background: url('../gfx/character3/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-3 #animation-3-arm,
#animation-3-mobile #animation-3-arm-mobile {
	height: 396px;
	width: 400px;
	position: absolute;
	top: 313px;
	left: 27px;
	background: url('../gfx/character3/arm.png') no-repeat;
	background-size: contain;
}
#animation-1-home .arm-animation,
#animation-3 .arm-animation,
#animation-3-mobile .arm-animation {
	transform-origin: top right;
	/* Animations */
	animation-name: arm-animation;
	animation-direction: alternate;
	animation-duration: 2000ms;
    animation-iteration-count: infinite;
}
@keyframes arm-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(2deg);}
}
/* -------------------- */
/* -- Character Four -- */
/* -------------------- */
#animation-4,
#animation-4-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character4/burglar.png') no-repeat;
	background-size: contain;
}
#animation-4 #animation-4-left-eye,
#animation-4-mobile #animation-4-left-eye-mobile {
	position: absolute;
	top: 110px;
	left: 310px;
	width: 100px;
	height: 100px;
	background: url('../gfx/character4/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-4 #animation-4-right-eye,
#animation-4-mobile #animation-4-right-eye-mobile {
	position: absolute;
	top: 100px;
	right: 343px; 
	width: 100px;
	height: 100px;
	background: url('../gfx/character4/right_eye.gif') no-repeat;
	background-size: contain;
}
#animation-4 #animation-4-pen,
#animation-4-mobile #animation-4-pen-mobile {
	height: 588px;
	width: 178px;
	position: absolute;
	top: 150px;
	left: 130px;
	background: url('../gfx/character4/pencil.png') no-repeat;
	background-size: contain;
}
#animation-4 .pen-animation,
#animation-4-mobile .pen-animation {
	transform-origin: top;
	/* Animations */
	animation-name: pen-animation;
	animation-direction: alternate;
	animation-duration: 4000ms;
    animation-iteration-count: infinite;
}
@keyframes pen-animation {	
	0% {
        transform: translate3d(-3px, 0px, 0px) rotate(0deg);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translate3d(5px, 15px, 0px) rotate(-3deg);
		animation-timing-function: ease-in;
    }
}
#animation-4 #animation-4-key,
#animation-4-mobile #animation-4-key-mobile {
	height: 180px;
	width: 88px;
	position: absolute;
	top: 395px;
	left: 285px;
	background: url('../gfx/character4/key.png') no-repeat;
	background-size: contain;
}
#animation-4 .key-animation,
#animation-4-mobile .key-animation {
	transform-origin: top;
	/* Animations */
	animation-name: key-animation;
	animation-direction: alternate;
	animation-duration: 2000ms;
    animation-iteration-count: infinite;
}
@keyframes key-animation {
    from {transform: rotate(-5deg);}
    to {transform: rotate(5deg);}
}
/* -------------------- */
/* -- Character Five -- */
/* -------------------- */
#animation-5,
#animation-5-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character5/burglar.png') no-repeat;
	background-size: contain;
}
/* Foot */
#animation-5 #animation-5-foot,
#animation-5-mobile #animation-5-foot-mobile {
	height: 110px;
	width: 213px;
	position: absolute;
	bottom: 4px;
	right: 157px;
	background: url('../gfx/character5/foot.png') no-repeat;
	background-size: contain;
}
#animation-2-home .tapping-animation,
#animation-5 .tapping-animation,
#animation-5-mobile .tapping-animation {
	transform-origin: top;
	/* Animations */
	animation-name: tapping-animation;
	animation-direction: alternate;
	animation-duration: 1000ms;
    animation-iteration-count: infinite;
}
@keyframes tapping-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(3deg);}
}
/* Swab */
#animation-5 #animation-5-cotton-swab,
#animation-5-mobile #animation-5-cotton-swab-mobile {
	height: 359px;
	width: 234px;
	position: absolute;
	top: 45px;
	left: 68px;
	background: url('../gfx/character5/arm.png') no-repeat;
	background-size: contain;
}
#animation-2-home .cotton-swab-animation,
#animation-5 .cotton-swab-animation,
#animation-5-mobile .cotton-swab-animation {
	transform-origin: bottom right;
	/* Animations */
	animation-name: cotton-swab-animation;
	animation-direction: alternate;
	animation-duration: 1500ms;
    animation-iteration-count: infinite;
}
@keyframes cotton-swab-animation {
    from {transform: rotate(-5deg);}
    to {transform: rotate(5deg);}
}
/* Eyebrows */
#animation-5 #animation-5-left-brow,
#animation-5-mobile #animation-5-left-brow-mobile {
	height: 31px;
	width: 54px;
	position: absolute;
	top: 130px;
	left: 380px;
	background: url('../gfx/character5/left-eyebrow.png') no-repeat;
	background-size: contain;
}
#animation-5 #animation-5-right-brow,
#animation-5-mobile #animation-5-right-brow-mobile {
	height: 27px;
	width: 58px;
	position: absolute;
	top: 128px;
	right: 296px;
	background: url('../gfx/character5/right-eyebrow.png') no-repeat;
	background-size: contain;
}
#animation-2-home .left-brow-animation,
#animation-5 .left-brow-animation,
#animation-5-mobile .left-brow-animation {
	transform-origin: bottom right;
	/* Animations */
	animation-name: left-brow-animation;
	animation-direction: alternate;
	animation-duration: 2500ms;
    animation-iteration-count: infinite;
}
@keyframes left-brow-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(5deg);}
}
#animation-2-home .right-brow-animation,
#animation-5 .right-brow-animation,
#animation-5-mobile .right-brow-animation {
	transform-origin: bottom left;
	/* Animations */
	animation-name: right-brow-animation;
	animation-direction: alternate;
	animation-duration: 2500ms;
    animation-iteration-count: infinite;
}
@keyframes right-brow-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(-5deg);}
}
/* Eyes */
#animation-5 #animation-5-left-eye,
#animation-5-mobile #animation-5-left-eye-mobile {
	position: absolute;
	top: 120px;
	left: 360px;
	width: 110px;
	height: 110px;
	background: url('../gfx/character5/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-5 #animation-5-right-eye,
#animation-5-mobile #animation-5-right-eye-mobile {
	position: absolute;
	top: 115px;
	right: 260px; 
	width: 110px;
	height: 110px;
	background: url('../gfx/character5/right_eye.gif') no-repeat;
	background-size: contain;
}
/* ------------------- */
/* -- Character Six -- */
/* ------------------- */
#animation-6,
#animation-6-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character6/burglar.png') no-repeat;
	background-size: contain;
}
/* Foot */
#animation-6 #animation-6-head,
#animation-6-mobile #animation-6-head-mobile {
	height: 304px;
	width: 264px;
	position: absolute;
	top: 0px;
	left: 300px;
	background: url('../gfx/character6/head.png') no-repeat;
	background-size: contain;
}
#animation-6 .head-animation,
#animation-6-mobile .head-animation {
	transform-origin: bottom;
	/* Animations */
	animation-name: head-animation;
	animation-direction: alternate;
	animation-duration: 3000ms;
    animation-iteration-count: infinite;
}
@keyframes head-animation {
    from {transform: rotate(4deg);}
    to {transform: rotate(-6deg);}
}
/* Eyes */
#animation-6 #animation-6-head #animation-6-left-eye,
#animation-6-mobile #animation-6-head-mobile #animation-6-left-eye-mobile {
	position: absolute;
	top: 130px;
	left: 40px;
	width: 110px;
	height: 110px;
	background: url('../gfx/character6/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-6 #animation-6-head #animation-6-right-eye,
#animation-6-mobile #animation-6-head-mobile #animation-6-right-eye-mobile {
	position: absolute;
	top: 130px;
	right: 45px; 
	width: 110px;
	height: 110px;
	background: url('../gfx/character6/right_eye.gif') no-repeat;
	background-size: contain;
}
/* --------------------- */
/* -- Character Seven -- */
/* --------------------- */
#animation-7,
#animation-7-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character7/burglar.png') no-repeat;
	background-size: contain;
}
/* Legs */
#animation-7 #animation-7-legs,
#animation-7-mobile #animation-7-legs-mobile {
	height: 258px;
	width: 210px;
	position: absolute;
	bottom: 10px;
	left: 288px;
	background: url('../gfx/character7/legs.png') no-repeat;
	background-size: contain;
}
#animation-7 .leg-animation,
#animation-7-mobile .leg-animation {
	transform-origin: top;
	/* Animations */
	animation-name: leg-animation;
	animation-direction: alternate;
	animation-duration: 3000ms;
    animation-iteration-count: infinite;
}
@keyframes leg-animation {
    from {transform: rotate(4deg);}
    to {transform: rotate(-6deg);}
}
/* Eyes */
#animation-7 #animation-7-left-eye,
#animation-7-mobile #animation-7-left-eye-mobile {
	position: absolute;
	top: 225px;
	left: 335px;
	width: 100px;
	height: 100px;
	background: url('../gfx/character7/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-7 #animation-7-right-eye,
#animation-7-mobile #animation-7-right-eye-mobile {
	position: absolute;
	top: 225px;
	right: 315px;
	width: 100px;
	height: 100px;
	background: url('../gfx/character7/right_eye.gif') no-repeat;
	background-size: contain;
}
/* --------------------- */
/* -- Character Eight -- */
/* --------------------- */
#animation-8,
#animation-8-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
}
#animation-8 #burglar-8,
#animation-8-mobile #burglar-8-mobile { /* We need to hid the arm behind the burglar */
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	background: url('../gfx/character8/burglar.png') no-repeat;
	background-size: contain;
}
/* Legs */
#animation-8 #animation-8-yarn,
#animation-8-mobile #animation-8-yarn-mobile {
	height: 306px;
	width: 153px;
	display: block;
	position: absolute;
	z-index: 1;
	top: 300px;
	right: 145px;
	background: url('../gfx/character8/arm.png') no-repeat;
	background-size: contain;
}
#animation-3-home .yarn-animation,
#animation-8 .yarn-animation,
#animation-8-mobile .yarn-animation {
	transform-origin: top;
	/* Animations */
	animation-name: yarn-animation;
	animation-direction: alternate;
	animation-duration: 4000ms;
    animation-iteration-count: infinite;
}
@keyframes yarn-animation {
    from {transform: rotate(4deg);}
    to {transform: rotate(-6deg);}
}
/* Eyes */
#animation-8-left-eye,
#animation-8-left-eye-mobile {
	position: absolute;
	z-index: 3;
	top: 70px;
	left: 365px;
	width: 110px;
	height: 110px;
	background: url('../gfx/character8/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-8-right-eye,
#animation-8-right-eye-mobile {
	position: absolute;
	z-index: 3;
	top: 75px;
	right: 260px;
	width: 110px;
	height: 110px;
	background: url('../gfx/character8/right_eye.gif') no-repeat;
	background-size: contain;
}
/* --------------------- */
/* -- Character Nine -- */
/* --------------------- */
#animation-9,
#animation-9-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	background: url('../gfx/character9/burglar.png') no-repeat;
	background-size: contain;
}
/* Foot */
#animation-9 #animation-9-foot,
#animation-9-mobile #animation-9-foot-mobile {
	height: 283px;
	width: 231px;
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0px;
	left: 110px;
	background: url('../gfx/character9/foot.png') no-repeat;
	background-size: contain;
}
#animation-9 .foot-animation,
#animation-9-mobile .foot-animation {
	transform-origin: bottom right;
	/* Animations */
	animation-name: foot-animation;
	animation-direction: alternate;
	animation-duration: 3000ms;
    animation-iteration-count: infinite;
}
@keyframes foot-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(6deg);}
}
/* Lightning */
#animation-9 #animation-9-lightning1,
#animation-9-mobile #animation-9-lightning1-mobile {
	height: 154px;
	width: 38px;
	display: block;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 380px;
	background: url('../gfx/character9/lightning1.png') no-repeat;
	background-size: contain;
}
#animation-9 #animation-9-lightning2,
#animation-9-mobile #animation-9-lightning2-mobile {
	height: 114px;
	width: 48px;
	display: block;
	position: absolute;
	z-index: 1;
	top: 20px;
	right: 315px;
	background: url('../gfx/character9/lightning2.png') no-repeat;
	background-size: contain;
}
#animation-9 #animation-9-lightning3,
#animation-9-mobile #animation-9-lightning3-mobile {
	height: 110px;
	width: 96px;
	display: block;
	position: absolute;
	z-index: 1;
	top: 45px;
	right: 250px;
	background: url('../gfx/character9/lightning3.png') no-repeat;
	background-size: contain;
}
#animation-9 .lightning-1-animation,
#animation-9-mobile .lightning-1-animation {
	transform-origin: top;
	/* Animations */
	animation-name: lightning-1-animation;
	animation-direction: alternate;
	animation-duration: 2000ms;
    animation-iteration-count: infinite;
}

@keyframes lightning-1-animation {
    0% {
        transform: translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(0px, 10px, 0px);
    }
}
#animation-9 .lightning-2-animation,
#animation-9-mobile .lightning-2-animation {
	transform-origin: top;
	/* Animations */
	animation-name: lightning-2-animation;
	animation-direction: alternate;
	animation-duration: 2000ms;
    animation-iteration-count: infinite;
}

@keyframes lightning-2-animation {
    0% {
        transform: translate3d(0px, 10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(0px, -10px, 0px);
    }
}
/* ------------------- */
/* -- Character Ten -- */
/* ------------------- */
#animation-10,
#animation-10-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
}
#animation-10 #burglar-10,
#animation-10-mobile #burglar-10-mobile { /* We need to hid the arm behind the burglar */
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	background: url('../gfx/character10/burglar.png') no-repeat;
	background-size: contain;
}
/* Head */
#animation-10 #animation-10-head,
#animation-10-mobile #animation-10-head-mobile {
	height: 279px;
	width: 232px;
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 300px;
	background: url('../gfx/character10/head.png') no-repeat;
	background-size: contain;
}
#animation-10 .head-animation,
#animation-10-mobile .head-animation {
	transform-origin: bottom;
	/* Animations */
	animation-name: head-animation;
	animation-direction: alternate;
	animation-duration: 3000ms;
    animation-iteration-count: infinite;
}
/* Eyes */
#animation-10 #animation-10-head #animation-10-left-eye,
#animation-10-mobile #animation-10-head-mobile #animation-10-left-eye-mobile {
	position: absolute;
	top: 60px;
	left: 35px;
	width: 110px;
	height: 110px;
	background: url('../gfx/character10/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-10 #animation-10-head #animation-10-right-eye,
#animation-10-mobile #animation-10-head-mobile #animation-10-right-eye-mobile {
	position: absolute;
	top: 65px;
	right: 32px; 
	width: 110px;
	height: 110px;
	background: url('../gfx/character10/right_eye.gif') no-repeat;
	background-size: contain;
}
/* ---------------------- */
/* -- Character Eleven -- */
/* ---------------------- */
#animation-11,
#animation-11-mobile {
	height: 800px;
	width: 800px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);*/
}
#animation-11 #burglar-11,
#animation-11-mobile #burglar-11-mobile { /* We need to hid the arm behind the burglar */
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	background: url('../gfx/character11/burglar.png') no-repeat;
	background-size: contain;
}
/* Head */
#animation-11 #animation-11-left-ear,
#animation-11-mobile #animation-11-left-ear-mobile {
	height: 160px;
	width: 224px;
	position: absolute;
	z-index: 3;
	top: 65px;
	left: 265px;
	background: url('../gfx/character11/left-ear.png') no-repeat;
	background-size: contain;
}
#animation-11 #animation-11-right-ear,
#animation-11-mobile #animation-11-right-ear-mobile {
	height: 180px;
	width: 219px;
	position: absolute;
	z-index: 1;
	top: 50px;
	right: 30px;
	background: url('../gfx/character11/right-ear.png') no-repeat;
	background-size: contain;
}
#animation-11 .ear-animation,
#animation-11-mobile .ear-animation {
	transform-origin: bottom;
	/* Animations */
	animation-name: ear-animation;
	animation-direction: alternate;
	animation-duration: 2500ms;
    animation-iteration-count: infinite;
}
@keyframes ear-animation {
    from {transform: rotate(0deg);}
    to {transform: rotate(8deg);}
}
/* Eyes */
#animation-11-left-eye,
#animation-11-left-eye-mobile {
	position: absolute;
	z-index: 3;
	top: 105px;
	left: 475px;
	width: 160px;
	height: 160px;
	background: url('../gfx/character11/left_eye.gif') no-repeat;
	background-size: contain;
}
#animation-11-right-eye,
#animation-11-right-eye-mobile {
	position: absolute;
	z-index: 3;
	top: 100px;
	right: 90px;
	width: 160px;
	height: 160px;
	background: url('../gfx/character11/right_eye.gif') no-repeat;
	background-size: contain;
}
/* Jet Stream */
#animation-11 #animation-11-jet-stream,
#animation-11-mobile #animation-11-jet-stream-mobile { /* We need to hid the arm behind the burglar */
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	height: 100%;
	width: 100%;
	background: url('../gfx/character11/dog_trail.gif') no-repeat;
	background-size: contain;
}
/*----------------------------------- Footer ----------------------------------------*/
footer {
	position: relative;
	width: 100%;
	height: auto;
	background: #c96c65;
}
footer .wrapper {
	padding: 40px 0px 0px 0px;
	height: 378px;
}
footer .wrapper .col {
	position: relative;
	width: 33.3%;
	display: block;
	float: left;
	height: 100%;
	margin: 0px;
	padding: 0px 50px 0px 50px;
}
footer .wrapper .col #footer-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 100%;
	height: auto;
}
footer .wrapper .col p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 0;
	margin: 0;
	width: 80%;
}
footer .wrapper .col #footer-burglar,
footer .wrapper .col #footer-texture {
	display: block;
	width: 100%;
	height: auto;
}
/* Second Stage */
#second-stage {
	width: 100%;
	padding: 10px 0px 10px 0px;
	background: #a64f49;
}
#second-stage p {
	padding: 0;
	margin: 0;
}
#second-stage p .icon {
	display:inline-block;
	width:30px;
	height:30px;
	margin:0px 10px -9px 0px;
	fill: #f8f6dd;
}
#second-stage p a:link,
#second-stage p a:visited {
	color: inherit;
	text-decoration: none;
}
#second-stage p a:hover .icon,
#second-stage p a:focus .icon {
	fill: rgba(0,0,0,0.6);
	transition: 0.5s all;
}
/*----------------------------------- NeoKids Support ----------------------------------------*/
#support {
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	height: 260px;
	width: 260px;
	background: url('../gfx/support.png') no-repeat;
	background-size: contain;
}
#support #neo {
	position: absolute;
	bottom: 30px;
	left: 15px;
	height: 140px;
	width: 140px;
	background: url('../gfx/neo.png') no-repeat;
	background-size: contain;
}
#support p {
	position: absolute;
	bottom: 5px;
	left: 50px;
	font-size: 0.9em;
	width: 180px;
}
#support-mobile {
	padding-bottom: 20px;
}
/*------------------------------------- How many Sock Burglars can you count? -----------------------------------*/
#game {
	position: relative;
	height: 100vh;
	min-height: 800px;
	width: 100%;
	background: url('../gfx/game/game-bg.jpg') no-repeat;
	background-size: cover;
	background-position: center;
}
#game #overlay { /* Hide all inactive game sections */
	height: 100%;
	width: 100%;
	background: rgba(104,154,184,0.98);
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	/* Blur *
	-webkit-filter: blur(5px);
  	-moz-filter: blur(5px);
  	-o-filter: blur(5px);
  	-ms-filter: blur(5px);
  	filter: blur(5px);*/
}
#game .hidden { /* Hide all inactive game sections */
	display: none;
	visibility: hidden;
	opacity: 0;
}
#game h1 {
	font-size: 2.5em;
	line-height: 1.1em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
#game h2 {
	font-size: 1.9em;
	line-height: 1.1em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
#game p {
	font-size: 1.3em;
	line-height: 1.4em;
	padding: 0px 0px 10px 0px;
	margin: 0;
}
#game a:hover,
#game a:focus {
	text-decoration: underline;
}
/* Intro */
#game #intro {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	max-width: 800px;
	height: auto;
}
/* Instructions */
#game #instructions {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	max-width: 300px;
	height: auto;
}
#game #instructions #instructor {
	list-style: none;
	padding: 0;
	margin: 0;
}
#game #instructions #instructor #bubble-1,
#game #instructions #instructor #bubble-2,
#game #instructions #instructor #bubble-3 {
	position: absolute;
	display: block;
	background: white;
	border-radius: 50%;
	/* Shadow */
	-webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
	box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
}
#game #instructions #instructor #bubble-1 { /* Speeech Bubble */
	width: 200px;
	height: 200px;
	top: -100px;
	right: -200px;
	z-index: 4;
	/* Hide */
	opacity: 0;
}
#game #instructions #instructor .animate1 {
	/* Animation */
	animation: Bubble 0.5s linear;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
#game #instructions #instructor #bubble-1 p { /* Speeech Bubble */
	width: 75%;
	position: absolute;
	transform: translateX(-50%) translateY(-50%);
	top: calc(50% + 10px);
	left: 50%;
	font-size: 100%;
}
#game #instructions #instructor #bubble-2 { /* Speeech Bubble Leg 1 */
	width: 80px;
	height: 80px;
	top: -30px;
	right: -20px;
	z-index: 3;
	/* Hide */
	opacity: 0;
}
#game #instructions #instructor .animate2 {
	/* Animation */
	animation: Bubble 0.5s linear;
	animation-delay: 0.75s;
	animation-fill-mode: forwards;
}
#game #instructions #instructor #bubble-3 { /* Speeech Bubble Leg 2 */
	width: 50px;
	height: 50px;
	top: 10px;
	right: 40px;
	z-index: 2;
	/* Hide */
	opacity: 0;
}
#game #instructions #instructor .animate3 {
	/* Animation */
	animation: Bubble 0.5s linear;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}
#game #instructions #instructor #bubble-4 {
	display: block;
	width: 300px;
	height: 300px;
	background: url('../gfx/game/instructor.png') #f8f6dd no-repeat;
	background-size: contain;
	float: right;
	border-radius: 50%;
	/* Hide */
	opacity: 0;
}
#game #instructions #instructor .animate4 {
	/* Animation */
	animation: Bubble 0.5s linear;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
/* Timer */
#game #timer {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 130px;
	height: 130px;
	background: url('../gfx/game/SockBurglar_AlarmClockIcon.png') no-repeat;
	background-size: contain;
}
#game #timer #time {
	position: absolute;
	top: calc(50% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 0;
	margin: 0;
}
#game .animateTime {
	/* Animation */
	animation: Timer 0.75s linear;
	animation-delay: 0.25s;
	animation-fill-mode: forwards;
}
/* Skip */
#game #skip {
	position: absolute;
	z-index: 2;
	top: 35px;
	left: 210px;
	width: 100px;
}
#game #skip .btn-red {
	width: 170px;
	text-align: center;
}
/* Counter */
#game #counter {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	max-width: 1000px;
	height: auto;
}
#game #counter #options {
	list-style: none;
	padding: 0;
	margin: 40px 0px 0px 0px;
}
#game #counter #options li {
	display: inline-block;
	padding: 20px;
	width: 19%;
	margin: 0px 2.5% 0px 2.5%;
	background: #c05e57;
	border-radius: 40px;
	font-size: 1.4em;
	/* Shadow */
	-webkit-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
	box-shadow: 0px 0px 18px -7px rgba(0,0,0,0.55);
}
#game #counter #options li:hover,
#game #counter #options li:focus {
	background: #79c4be;
	transition: 0.2s all;
}
/* Results */
#game #results {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 80%;
	max-width: 800px;
	height: auto;
}
/* Animations */
@keyframes Bubble {
  	0% {
    	opacity: 0;
  	}
  	100% {
   		opacity: 1;
  	}
}
@keyframes Timer {
	from { transform: translateX(-50%) translateY(-50%); top: 50%; left: 50% }
    17%  { transform: translateX(-45%) translateY(-45%); top: 45%; left: 45% }
    20%  { transform: translateX(-40%) translateY(-40%); top: 40%; left: 40% }
    37%  { transform: translateX(-35%) translateY(-35%); top: 35%; left: 35% }
    40%  { transform: translateX(-30%) translateY(-30%); top: 30%; left: 30% }
    57%  { transform: translateX(-25%) translateY(-25%); top: 25%; left: 25% }
    60%  { transform: translateX(-20%) translateY(-20%); top: 20%; left: 20% }
    77%  { transform: translateX(-15%) translateY(-15%); top: 15%; left: 15% }
    80%  { transform: translateX(-10%) translateY(-10%); top: 10%; left: 10% }
    97%  { transform: translateX(-5%) translateY(-5%); top: 5%; left: 5% }
    to   { transform: translateX(0%) translateY(0%); top: 20px; left: 20px }
}
/* ------------------------- Menu -------------------------- */
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

html, 
body, 
.container, 
.content-wrap {
	width: 100%;
}
.menu-active {
	overflow: hidden; /* The cause of No Animate.css */
	height: 100%; /* The cause of No Animate.css */
}
.menu-wrap a {
	color: #f8f6dd;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
	color: #FFF;
}
.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.content {
	position: relative;
}
.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: opacity 0.3s, transform 0s 0.3s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
	position: absolute;
	z-index: 1000;
	padding: 0;
	width: 2.5em;
	height: 2.25em;
	border: none;
	text-indent: 2.5em;
	font-size: 1em;
	color: transparent;
	background: transparent;
	top: 5px;
	right: calc(5% - 20px);
}
.menu-button::before {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	background: linear-gradient(#f8f6dd 20%, transparent 20%, transparent 40%, #f8f6dd  40%, #f8f6dd  60%, transparent 60%, transparent 80%, #f8f6dd 80%);
	content: '';
}
.menu-button:hover::before {
	background: linear-gradient(#7B3A36 20%, transparent 20%, transparent 40%, #7B3A36  40%, #7B3A36  60%, transparent 60%, transparent 80%, #7B3A36 80%);
	transition: 0.2s all;
}
/* Close Button */
.close-button {
	width: 16px;
	height: 16px;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 16px;
	border: none;
	z-index: 1001;
	background: transparent;
	color: transparent;
}
.close-button::before,
.close-button::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #FFF;
}
.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
	position: absolute;
	z-index: 1001;
	width: 300px;
	height: 100%;
	font-size: 1.1em;
	-webkit-transform: translate3d(-300px,0,0);
	transform: translate3d(-300px,0,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.menu {
	background: #a64f49;
	width: calc(100% - 55px);
	height: 100%;
	padding: 2em 1em;
}
.icon-list {
	width: 280px;
	padding:20px 0px 0px 20px;
}
.icon-list a {
	position: relative;
	z-index: 2;
	display: block;
	padding: 0.8em 0.8em 0.8em 0.2em;
}
.icon-list .call {
	background: #7B3A36;
	margin:10px 0px 0px 0px;
	width:80%;
}
.icon-list .call .icon {
	display:inline-block;
	height:15px;
	width:15px;
	margin:0px 10px -1px 5px;
	fill: #f8f6dd;
}
.icon-list a span {
	margin-left: 10px;
	letter-spacing: 1px;
	font-size: 1.1em;
}
.icon-list .texture {
	width: 75%;
	height: auto;
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 15px;
	left: 20px;
}
/* Morph Shape */
.morph-shape {
	position: absolute;
	width: 55px;
	height: 100%;
	top: 0;
	right: 0;
	fill: #a64f49;
	z-index: 1000;
}
/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.show-menu .content-wrap {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
	-webkit-transform: translate3d(100px,0,0);
	transform: translate3d(100px,0,0);
}
.show-menu .content::before {
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/*-------------------------------- Modal // Codrops.com ---------------------------------*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}
.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}
.container {
	min-height: 100%;
}
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.md-show {
	visibility: visible;
}
.md-close {
	cursor: pointer;
}
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(192,94,86,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}
/* Content styles */
.md-content {
	color: #fff;
	background: #f8f6dd;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
	/* Drop Shadow */
	-webkit-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.55);
	box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.55);
}
.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2em;
	border-radius: 3px 3px 0 0;
	color: #f8f6dd;
	background: #c05e57;
}
.md-content > div {
	padding: 15px 40px 30px;
	margin: 0;
	font-size: 1.15em;
}
.md-content > div p {
	margin: 0;
	padding: 10px 0;
}
.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}
.md-content > div ul li {
	padding: 5px 0;
}
.md-content .btn-contain .btn {
	font-size: 0.8em;
}
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
/*------------------------------------- Media Queries -----------------------------------*/
/* -------------- */
/* -------------- */
/* --- Laptops -- */
/* -------------- */
/* -------------- */
@media (max-width: 1600px){ /* Large Laptops */
	/* Containers */
	header .inner,
	#main .main-inner,
	.landing-small .wrapper,
	.wrapper {
	width: 80%;
	}
	/* Animation Structure */
	.animation-inner {
	width: 80%;
	}
	.animation-inner .text {
	width: 400px;
	}
	/* Buttons */
	.wrapper .btn-contain .btn-red,
	.wrapper .btn-contain .btn-white,
	.btn-contain .btn-red {
	white-space: normal;
	}
}
@media (max-width: 1300px){ /* Small Laptops */
	/* Wrapper */
	.wrapper #character-grid .bg-texture {
	width: 500px;
	}
	/* Books */
	.wrapper .col .btn-red,
	.wrapper .col .btn-white {
	width: 80%;
	text-align: center;
	}
	.wrapper .col .text-only {
	padding:0;
	}
	/* Slider Structure */
	.landing-slider .character-bg {
	left: 75px;
	width: 350px;
	height: 350px;
	}
	.animation-inner .text {
	right: auto;
	width: 100%;
	padding: 0px 50px 0px 500px;
	}
	.animation-inner .text .texture-2 {
	left: 50%;
	}
	/* -- Characters --*/
	#animation-1,
	#animation-2,
	#animation-3,
	#animation-4,
	#animation-5,
	#animation-6,
	#animation-7,
	#animation-8,
	#animation-9,
	#animation-10,
	#animation-11 {
	height: 500px;
	width: 500px;
	top: 50%;
	transform: translateY(-50%);
	}
	/* -- Character One -- */
	#animation-1 #animation-1-left-eye,
	#animation-1-mobile #animation-1-left-eye-mobile {
	top: 147px;
	left: 171px;
	width: 50px;
	height: 50px;
	}
	#animation-1 #animation-1-right-eye,
	#animation-1-mobile #animation-1-right-eye-mobile {
	top: 146px;
	right: 242px;
	width: 50px;
	height: 50px;
	}
	#animation-1 #animation-1-balloons,
	#animation-1-mobile #animation-1-balloons-mobile {
	height: 218px;
	width: 162px;
	top: 31px;
	right: 226px;
	}
	/* -- Character Two -- */
	#animation-2 #animation-2-left-eye,
	#animation-2-mobile #animation-2-left-eye-mobile {
	top: 111px;
	left: 198px;
	width: 50px;
	height: 50px;
	}
	#animation-2 #animation-2-right-eye,
	#animation-2-mobile #animation-2-right-eye-mobile {
	top: 113px;
	right: 219px;
	width: 50px;
	height: 50px;
	}
	#animation-2 #animation-2-clock,
	#animation-2-mobile #animation-2-clock-mobile {
	height: 81px;
	width: 81px;
	top: 62px;
	right: 180px;
	}
	#animation-2 #animation-2-spoon,
	#animation-2-mobile #animation-2-spoon-mobile {
	height: 365px;
	width: 115px;
	top: 0px;
	right: 68px;
	}
	/* -- Character Three -- */
	#animation-3 #animation-3-left-eye,
	#animation-3-mobile #animation-3-left-eye-mobile {
	top: 74px;
	left: 223px;
	width: 50px;
	height: 50px;
	}
	#animation-3 #animation-3-right-eye,
	#animation-3-mobile #animation-3-right-eye-mobile {
	top: 65px;
	right: 184px;
	width: 50px;
	height: 50px;
	}
	#animation-3 #animation-3-arm,
	#animation-3-mobile #animation-3-arm-mobile {
	height: 246px;
	width: 248px;
	top: 196px;
	left: 18px;
	}
	/* -- Character Four -- */
	#animation-4 #animation-4-left-eye,
	#animation-4-mobile #animation-4-left-eye-mobile {
	top: 68px;
	left: 192px;
	width: 62px;
	height: 62px;
	}
	#animation-4 #animation-4-right-eye,
	#animation-4-mobile #animation-4-right-eye-mobile {
	top: 62px;
	right: 213px; 
	width: 62px;
	height: 62px;
	}
	#animation-4 #animation-4-pen,
	#animation-4-mobile #animation-4-pen-mobile {
	height: 365px;
	width: 110px;
	top: 93px;
	left: 81px;
	}
	#animation-4 #animation-4-key,
	#animation-4-mobile #animation-4-key-mobile {
	height: 112px;
	width: 55px;
	top: 245px;
	left: 177px;
	}
	/* -- Character Five -- */
	#animation-5 #animation-5-foot,
	#animation-5-mobile #animation-5-foot-mobile {
	height: 68px;
	width: 132px;
	bottom: 3px;
	right: 97px;
	}
	#animation-5 #animation-5-cotton-swab,
	#animation-5-mobile #animation-5-cotton-swab-mobile {
	height: 222px;
	width: 145px;
	top: 28px;
	left: 42px;
	}
	#animation-5 #animation-5-left-brow,
	#animation-5-mobile #animation-5-left-brow-mobile {
	height: 19px;
	width: 33px;
	top: 81px;
	left: 236px;
	}
	#animation-5 #animation-5-right-brow,
	#animation-5-mobile #animation-5-right-brow-mobile {
	height: 17px;
	width: 36px;
	top: 79px;
	right: 184px;
	}
	#animation-5 #animation-5-left-eye,
	#animation-5-mobile #animation-5-left-eye-mobile {
	top: 74px;
	left: 223px;
	width: 68px;
	height: 68px;
	}
	#animation-5 #animation-5-right-eye,
	#animation-5-mobile #animation-5-right-eye-mobile {
	top: 71px;
	right: 161px; 
	width: 68px;
	height: 68px;
	}
	/* -- Character Six -- */
	#animation-6 #animation-6-head,
	#animation-6-mobile #animation-6-head-mobile {
	height: 188px;
	width: 164px;
	left: 192px;
	}
	#animation-6 #animation-6-head #animation-6-left-eye,
	#animation-6-mobile #animation-6-head-mobile #animation-6-left-eye-mobile {
	top: 81px;
	left: 25px;
	width: 68px;
	height: 68px;
	}
	#animation-6 #animation-6-head #animation-6-right-eye,
	#animation-6-mobile #animation-6-head-mobile #animation-6-right-eye-mobile {
	top: 81px;
	right: 28px; 
	width: 68px;
	height: 68px;
	}
	/* -- Character Seven -- */
	/* Legs */
	#animation-7 #animation-7-legs,
	#animation-7-mobile #animation-7-legs-mobile {
	height: 160px;
	width: 130px;
	bottom: 6px;
	left: 179px;
	}
	/* Eyes */
	#animation-7 #animation-7-left-eye,
	#animation-7-mobile #animation-7-left-eye-mobile {
	top: 140px;
	left: 201px;
	width: 62px;
	height: 62px;
	}
	#animation-7 #animation-7-right-eye,
	#animation-7-mobile #animation-7-right-eye-mobile {
	top: 140px;
	right: 195px;
	width: 62px;
	height: 62px;
	}
	/* -- Character Eight -- */
	#animation-8 #animation-8-yarn,
	#animation-8-mobile #animation-8-yarn-mobile {
	height: 190px;
	width: 95px;
	top: 186px;
	right: 90px;
	}
	#animation-8-left-eye,
	#animation-8-left-eye-mobile {
	top: 43px;
	left: 226px;
	width: 68px;
	height: 68px;
	}
	#animation-8-right-eye,
	#animation-8-right-eye-mobile {
	top: 47px;
	right: 161px;
	width: 68px;
	height: 68px;
	}
	/* -- Character Nine -- */
	#animation-9 #animation-9-foot,
	#animation-9-mobile #animation-9-foot-mobile {
	height: 175px;
	width: 143px;
	left: 68px;
	}
	#animation-9 #animation-9-lightning1,
	#animation-9-mobile #animation-9-lightning1-mobile {
	height: 95px;
	width: 24px;
	right: 236px;
	}
	#animation-9 #animation-9-lightning2,
	#animation-9-mobile #animation-9-lightning2-mobile {
	height: 71px;
	width: 30px;
	top: 12px;
	right: 195px;
	}
	#animation-9 #animation-9-lightning3,
	#animation-9-mobile #animation-9-lightning3-mobile {
	height: 68px;
	width: 59px;
	top: 28px;
	right: 155px;
	}
	/* -- Character Ten -- */
	#animation-10 #animation-10-head,
	#animation-10-mobile #animation-10-head-mobile {
	height: 173px;
	width: 144px;
	left: 186px;
	}
	/* Eyes */
	#animation-10 #animation-10-head #animation-10-left-eye,
	#animation-10-mobile #animation-10-head-mobile #animation-10-left-eye-mobile {
	top: 37px;
	left: 22px;
	width: 68px;
	height: 68px;
	}
	#animation-10 #animation-10-head #animation-10-right-eye,
	#animation-10-mobile #animation-10-head-mobile #animation-10-right-eye-mobile {
	top: 40px;
	right: 20px; 
	width: 68px;
	height: 68px;
	}
	/* -- Character Eleven -- */
	#animation-11 #animation-11-left-ear,
	#animation-11-mobile #animation-11-left-ear-mobile {
	height: 99px;
	width: 139px;
	top: 40px;
	left: 164px;
	}
	#animation-11 #animation-11-right-ear,
	#animation-11-mobile #animation-11-right-ear-mobile {
	height: 112px;
	width: 136px;
	top: 31px;
	right: 17px;
	}
	#animation-11-left-eye,
	#animation-11-left-eye-mobile {
	top: 65px;
	left: 294px;
	width: 99px;
	height: 99px;
	}
	#animation-11-right-eye,
	#animation-11-right-eye-mobile {
	top: 62px;
	right: 56px;
	width: 99px;
	height: 99px;
	}
}
/* -------------- */
/* -------------- */
/* --- Tablets -- */
/* -------------- */
/* -------------- */
@media (min-width: 1025px){
	.menu-trigger {
	display:none;
	}
	.menu-button {
	display:none;
	}
	#support-mobile {
	display: none;
	}
}
@media (max-width: 1024px){ /* Standard Tablets */
	/* Navigation */
	.menu-trigger {
	display:inline;
	}
	#main {
	height: 60px;
	}
	#main .main-inner li {
	display: none;
	}
	/* Banners */
	.landing-small {
	height: 350px;
	overflow: hidden;
	}
	.landing-small .wrapper br,
	.wrapper br {
	display: none;
	}
	.landing-small .meet-the-characters {
	height: 300px;
	width: 100%;
	background-size: cover;	
	}
	.landing-small .home-texture {
	width: 800px;
	}
	/* Unslider */
	.unslider-arrow {
	left: 30px;
	height: 60px;
	width: 60px;
	}
	.unslider-arrow.next {
	right: 30px;
	}
	/* Backgrounds */
	.green-bg {
	width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
	}
	/* Wrapper */
	.wrapper #home-characters {
	height: 500px;
	}
    .wrapper #activities li .btn-red,
    .wrapper #activities li .btn-white {
    width: 80%;
    text-align: center;
    }
	/* Creators */
	.wrapper #creator-graphic {
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	padding-bottom: 10%;
	}
	/* NeoKids */
	#support-mobile {
	display: block;
	}
	#support{
	display: none;
	}
	/* Game */
	#game-trigger{
	display: none;
	opacity: 0;
	visibility: hidden;
	}
}
/* -------------- */
/* -------------- */
/* --- Phones --- */
/* -------------- */
/* -------------- */
@media (min-width: 769px){
	#mobile-characters {
	display: none;
	}
}
@media (max-width: 768px){ /* Large Phones */
	/* Navigation */
	header,
	header .inner {
	display: none;
	height: 0;
	padding: 0;
	}
	#main .main-inner #logo {
	top: 0;
	width: 246px;
	height: 96px;
	}
	/* Banner */
	.landing-small {
	height: auto;
	}
	.landing-small .wrapper {
	position: static;
	top: auto;
	left: auto;
	transform: translateX(0) translateY(0);
	width: 80%;
	}
	/* Wrapper */
	.wrapper #the-story {
	display: none;
	}
	.wrapper #home-characters {
	margin-bottom: 50px;
	}
	.wrapper #the-creators li {
	padding: 200px 0px 0px 0px;
	}
	.wrapper #the-creators li img {
	left: 50%;
	top: 0;
	transform: translateY(0) translateX(-50%);
	}
	.wrapper .col-3 {
	width: 100%;
	float: none;
	}
	.wrapper .btn-contain .btn-red,
	.wrapper .btn-contain .btn-white,
	#form #submit-btn {
	width: 100%;
	text-align: center;
	}
    .wrapper #activities li:nth-of-type(odd) {
    margin: auto;
    }
    .wrapper #activities li {
    width: 100%;
    margin: 20px 0px 20px 0px;
    float: none;
    }
	/* Form */
	#form .col {
	float: none;
	width: 100%;
	margin: 0px;
	}
	/* Books */
	.wrapper .col {
	width: 100%;
	float: none;
	height: auto;
	padding: 20px 0px 20px 0px;
	}
	/* Character Grid */
	.wrapper #character-grid li {
	padding: 0px 30px 30px 30px;
	width: 50%;
	}
	.wrapper #character-grid .last {
	 margin-left: 0;
	}
	.wrapper #character-grid .bg-texture {
	display: none;
	}
	/* Unslider */
	.unslider,
	.landing-slider {
	display: none;
	}
	#mobile-characters {
	display: block;
	}
	/* Footer */
	footer .wrapper {
	height: auto;
	padding: 40px 0px 40px 0px;
	}
	footer .wrapper .col {
	width: 100%;
	height: auto;
	float: none;
	}
	footer .wrapper .col #footer-texture,
	footer .wrapper .col #footer-burglar {
	display: none;
	}
	footer .wrapper .col #footer-logo,
	footer .wrapper .col p {
	position: static;
	top: auto;
	left: 0;
	transform: translateY(0%) translateX(0%);
	width: 100%;
	}
	footer .wrapper .col p {
	padding: 30px 0px 0px 0px;
	}
}
@media (min-width: 521px){
	/* Character Grid */
	.wrapper #character-grid li .btn {
	display: none;
	}
	.btn-off {
	display: block;
	}
}
@media (max-width: 520px){
	.btn-off {
	display: none;
	}
	/* News Letter */
	#news-letter input[type="submit"] {
	position: static;
	top: auto;
	right: auto;
	display: block;
	margin-top: 20px;
	width: 100%;
	}
	/* Character Grid */
	.wrapper #character-grid li {
	width: 100%;
	float: none;
	padding: 30px 0px 30px 0px;
	}
	.wrapper #character-grid li .btn {
	display: block;
	}
	/* Characters */
	#mobile-characters {
	overflow: hidden;
	width: 100%;
	}
	/* Characters */
	#animation-1-mobile,
	#animation-2-mobile,
	#animation-3-mobile,
	#animation-4-mobile,
	#animation-5-mobile,
	#animation-6-mobile,
	#animation-7-mobile,
	#animation-8-mobile,
	#animation-9-mobile,
	#animation-10-mobile,
	#animation-11-mobile {
	width: 350px;
	height: 350px;
	max-height: 350px;
	max-width: 350px;
	position: static;
	}
	/* -- Character One -- */
	#animation-1-mobile #animation-1-left-eye-mobile {
	top: 103px;
	left: 120px;
	width: 35px;
	height: 35px;
	}
	#animation-1-mobile #animation-1-right-eye-mobile {
	top: 102px;
	right: 169px;
	width: 35px;
	height: 35px;
	}
	#animation-1-mobile #animation-1-balloons-mobile {
	height: 153px;
	width: 113px;
	top: 22px;
	right: 160px;
	}
	/* -- Character Two -- */
	#animation-2-mobile #animation-2-left-eye-mobile {
	top: 78px;
	left: 139px;
	width: 35px;
	height: 35px;
	}
	#animation-2-mobile #animation-2-right-eye-mobile {
	top: 79px;
	right: 153px;
	width: 35px;
	height: 35px;
	}
	#animation-2-mobile #animation-2-clock-mobile {
	height: 57px;
	width: 57px;
	top: 43px;
	right: 126px;
	}
	#animation-2-mobile #animation-2-spoon-mobile {
	height: 255px;
	width: 56px;
	right: 70px;
	top: 40px;
	}
	/* -- Character Three -- */
	#animation-3-mobile #animation-3-left-eye-mobile {
	top: 52px;
	left: 156px;
	width: 35px;
	height: 35px;
	}
	#animation-3-mobile #animation-3-right-eye-mobile {
	top: 45px;
	right: 129px;
	width: 35px;
	height: 35px;
	}
	#animation-3-mobile #animation-3-arm-mobile {
	height: 172px;
	width: 174px;
	top: 137px;
	left: 13px;
	}
	/* -- Character Four -- */
	#animation-4-mobile #animation-4-left-eye-mobile {
	top: 48px;
	left: 134px;
	width: 43px;
	height: 43px;
	}
	#animation-4-mobile #animation-4-right-eye-mobile {
	top: 43px;
	right: 149px; 
	width: 43px;
	height: 43px;
	}
	#animation-4-mobile #animation-4-pen-mobile {
	height: 255px;
	width: 77px;
	top: 65px;
	left: 57px;
	}
	#animation-4-mobile #animation-4-key-mobile {
	height: 78px;
	width: 38px;
	top: 171px;
	left: 124px;
	}
	/* -- Character Five -- */
	#animation-5-mobile #animation-5-foot-mobile {
	height: 48px;
	width: 92px;
	bottom: 2px;
	right: 68px;
	}
	#animation-5-mobile #animation-5-cotton-swab-mobile {
	height: 155px;
	width: 101px;
	top: 20px;
	left: 29px;
	}
	#animation-5-mobile #animation-5-left-brow-mobile {
	height: 13px;
	width: 23px;
	top: 57px;
	left: 165px;
	}
	#animation-5-mobile #animation-5-right-brow-mobile {
	height: 12px;
	width: 25px;
	top: 55px;
	right: 129px;
	}
	#animation-5-mobile #animation-5-left-eye-mobile {
	top: 52px;
	left: 156px;
	width: 48px;
	height: 48px;
	}
	#animation-5-mobile #animation-5-right-eye-mobile {
	top: 50px;
	right: 113px; 
	width: 48px;
	height: 48px;
	}
	/* -- Character Six -- */
	#animation-6-mobile #animation-6-head-mobile {
	height: 132px;
	width: 115px;
	left: 134px;
	}
	#animation-6-mobile #animation-6-head-mobile #animation-6-left-eye-mobile {
	top: 57px;
	left: 17px;
	width: 48px;
	height: 48px;
	}
	#animation-6-mobile #animation-6-head-mobile #animation-6-right-eye-mobile {
	top: 57px;
	right: 20px; 
	width: 48px;
	height: 48px;
	}
	/* -- Character Seven -- */
	#animation-7-mobile #animation-7-legs-mobile {
	height: 112px;
	width: 91px;
	bottom: 4px;
	left: 125px;
	}
	#animation-7-mobile #animation-7-left-eye-mobile {
	top: 98px;
	left: 141px;
	width: 43px;
	height: 43px;
	}
	#animation-7-mobile #animation-7-right-eye-mobile {
	top: 98px;
	right: 136px;
	width: 43px;
	height: 43px;
	}
	/* -- Character Eight -- */
	#animation-8-mobile #animation-8-yarn-mobile {
	height: 133px;
	width: 66px;
	top: 130px;
	right: 63px;
	}
	#animation-8-left-eye-mobile {
	top: 30px;
	left: 158px;
	width: 48px;
	height: 48px;
	}
	#animation-8-right-eye-mobile {
	top: 33px;
	right: 113px;
	width: 48px;
	height: 48px;
	}
	/* -- Character Nine -- */
	#animation-9-mobile #animation-9-foot-mobile {
	height: 122px;
	width: 100px;
	left: 48px;
	}
	#animation-9-mobile #animation-9-lightning1-mobile {
	height: 66px;
	width: 17px;
	right: 165px;
	}
	#animation-9-mobile #animation-9-lightning2-mobile {
	height: 50px;
	width: 21px;
	top: 8px;
	right: 78px;
	}
	#animation-9-mobile #animation-9-lightning3-mobile {
	height: 48px;
	width: 41px;
	top: 20px;
	right: 108px;
	}
	/* -- Character Ten -- */
	#animation-10-mobile #animation-10-head-mobile {
	height: 121px;
	width: 101px;
	left: 130px;
	}
	#animation-10-mobile #animation-10-head-mobile #animation-10-left-eye-mobile {
	top: 26px;
	left: 15px;
	width: 48px;
	height:48px;
	}
	#animation-10-mobile #animation-10-head-mobile #animation-10-right-eye-mobile {
	top: 28px;
	right: 14px; 
	width: 48px;
	height: 48px;
	}
	/* -- Character Eleven -- */
	#animation-11-mobile #animation-11-left-ear-mobile {
	height: 69px;
	width: 97px;
	top: 28px;
	left: 115px;
	}
	#animation-11-mobile #animation-11-right-ear-mobile {
	height: 78px;
	width: 95px;
	top: 22px;
	right: 12px;
	}
	#animation-11-left-eye-mobile {
	top: 45px;
	left: 206px;
	width: 69px;
	height: 69px;
	}
	#animation-11-right-eye-mobile {
	top: 43px;
	right: 39px;
	width: 69px;
	height: 69px;
	}
}