/* Global overrides  */
html, body, #container { height: 100%; margin: 0; padding: 0; }
body { color: #79acc9; background: #1c6a97 url('../img/cages.svg'); background-color: #1c6a97; background-attachment: fixed; background-size: 100% auto; transition: background-position 0s; -webkit-transition:  background-position 0s; font-family: 'Lato', sans-serif; }
a { cursor: pointer; }

/* Main body */
#content { max-width: 960px; margin: auto; padding: 0 5vh; }
	@media only screen and (min-width: 769px) { padding: 0; }

/* call to action */
.cta { margin-bottom: 5vh; }
.cta p { font-size: 32px; text-align: justify; }
.buy-button { font-family: 'Luckiest Guy'; text-decoration: none; color: #7aabc7; background-color: #3481ad; border-radius: 19px; border: 2px solid #054567; border-bottom-width: 13px; text-align: center; width: 100%; max-width: 960px; box-sizing: border-box; height: 166px; display: inline-flex; align-items: center; justify-content: space-around; font-size: 60px; line-height: 60px; padding-top: 11px; }
.buy-button:hover { background-color: #f0de8d; color: #ef7072; border-color: #9A8F5C; }
.cta-cnr { box-sizing: border-box; width: 100%; justify-content: center; display: flex; padding: 3vw 5vh; }
.cta-button { transition: transform 0.2s; -webkit-transition: transform 0.2s; }
.cta-button:hover { transform: scale(1.07) !important; }
.cta-images .imgcnr { border-radius: 1vw; overflow:hidden; z-index: 0; transition: width 0.2s, z-index 0.2s, margin-left 0.2s; -webkit-transition:  width 0.2s, z-index 0.2s, margin-left 0.2s; }
.cta-images img { width: 100%; margin-bottom: 5vh; }
	@media only screen and (min-width: 769px) {
		.ctacnr { display: flex; justify-content: space-between; margin: 0 0 5vh; }
		.cta { width: 66%; margin: 0; }
		.cta-button img { position: relative; top: 5px; }
		.cta-images { width: 30%; display: flex; justify-content: space-between; flex-direction: column; }
		.cta-images img { margin-bottom: 0; }
	}

.space { height: 5vw; }

.line { height: 1vw; }

.mobile-only {
	display: none;
}

.round-image:hover {
    width: 110%;
    overflow:hidden;

    position: relative;
    z-index: 10;

    margin-left: -5%;

}

.round-image-big {
    border-radius: 2vw;
    overflow:hidden;
}

.auto-size {
	height: auto;
	display: block;
}

.equal {
  display: flex;
  display: -webkit-flex;
}


.three-quarters-mobile {
	width: 75%;
}

.two-thirds-mobile {
	width: 66%;
}

.half-mobile {
	width: 55%;
}

.third-mobile {
	width: 33%;
}

.fourth-mobile {
	width: 25%;
}

.three-quarters {
	width: 75%;
}

.two-thirds {
	width: 66%;
}

.half {
	width: 50%;
}

.third {
	width: 33%;
}

.fourth {
	width: 25%;
}

.dark {
	background-color: #17628d;
}

.darker {
	background-color: #064d76;
}

.yellow {
	color: #efde8e;
}

.red {
	color: #ef7171;
}

.space {
	height: 3vw;
}

.important-text {
	font-family: 'Luckiest Guy', cursive;
}

.left {
	float: left;
}

.right {
	float: right;
}

.full-image {
	width: 96.5%;
	padding-bottom: 56.25%;
	margin: 0;

	background-image: url('../img/key_art_background.jpg');
	background-size: 100%;

	position: relative;

	overflow: hidden;
}

#center {
	width: 646px;
	height: 190px;
	background-color: rgba(0,0,0,0);

	position:relative;
	bottom:250;
	left:0;
}

#koth {

	width: 75vw;
	height: auto;

	position: absolute;
	top: 1vw;

	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;

}

#cta {

	width: 50vw;
	height: auto;

	position: absolute;
	bottom: 1vw;

	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;

}

#foreground {
	width: 100vw;
	height: auto;

	position: absolute;
	bottom: -1vw;
}

#midground {

	width: 100vw;
	height: auto;

	position: absolute;
	bottom: -3vw;

}



.video-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#dont-pet-fat-cat {
	padding-bottom: 180vw;
	overflow-bottom: hidden;
	overflow-left: hidden;
	overflow-right: hidden;
	margin: 0;
	margin-bottom: -1vw;

	position: absolute;

}

#shadow {
	width: 140vw;
	height: auto;

	position: absolute;
	top: 1vw;

	left: -10vw;
	right: -10vw;
}

.character {
	height: 15vw;

	margin-bottom: 5vw;
	position: absolute;
}

.sprite-holder {
	position: relative;
}

.sprite {
	height: 20vw;
	margin-right: 3vw;

	transition: height 0.2s, margin-top 0.2s;
	-webkit-transition:  height 0.2s, margin-top 0.2s;

	margin-top: -5vw;
	/* shoutout to @kabi */
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.sprite:hover {
	height: 25vw;
	margin-top: -7.5vw;

}

.character-name {
	font-size: 6vw;
	transition: font-size 0.2s,;
	-webkit-transition:  font-size 0.2s;

}

.character-name:hover {
	font-size: 6.3vw;
}

.character-description {
	font-size: 2vw;

	transition: font-size 0.2s;
	-webkit-transition:  font-size 0.2s;
}

#character-list {
/*	background-image: url(../img/shadow_none.svg);*/
	background-size: auto 100%;
	background-position: center;
	position: relative;
	padding-bottom: 165vw;
	overflow: hidden;
}

#read-more {
	font-size: 3vw;
	text-align: center;
	transition: font-size 0.2s, color 0.2s, margin-top 0.2s;
	-webkit-transition:  font-size 0.2s, color 0.2s, margin-top 0.2s;
	color: #79acc9;
	padding: 1vw;
	margin: 0;
	margin-top: -1vw;
}
#read-more:hover {
/*	margin-top: 0;*/
	font-size: 3.5vw;
	color: #efde8e;

}

#birthday {
	top: 0vw; left: 2vw;
}

#kiara {
	top: 20vw; left: 30vw;
}

#snapback {
	top: 40vw; left: 5vw;
}

#cole {
	top: 60vw; left: 35vw;
}

#captain-hat {
	top: 80vw; left: 10vw;
}

#dark-birthday {
	top: 100vw; left: 35vw;
}

#fat-cat {
	top: 120vw; left: 15vw;
}

#washing-machine {
	top: 140vw; left: 45vw;
}

#footer-icon-holder {
	display: block;

	width: 100%;
	max-width: 960px;
	margin: auto;

}

.full { width: 100%; }

/* footer */
.footer { max-width: 960px; margin: 0 auto; padding-bottom: 5vh;}
.social { display: flex; justify-content: space-around; margin-bottom: 5vh; }
.social a { width: 15%; }
.social a:hover { transform: scale(1.2); }
.social img { width: 100%; }
.press { text-align: center; }
.press a { color: white; text-decoration: none; }
.press a:hover { text-decoration: underline; }

/*for people watching on laptops*/
@media only screen and (max-width: 960px) {

	#call-to-action-description {
		font-size: 3.3vw;
	}

}

@media only screen and (max-width: 700px) {

	.equal {
		display: block;
	}

	#call-to-action-description {
		font-size: 4.5vw;
	}

	.round-image-big, .round-image {
	    border-radius: 0vw;
	    overflow:hidden;
	}

	.mobile-only {
		display: block;
	}

	.half, .two-thirds, .third {
		width: 100%;
	}

	#birthday {
		top: 5vw; left: 2vw;
	}

	#kiara {
		top: 45vw; left: 10vw;
	}

	#snapback {
		top: 85vw; left: 2vw;
	}

	#cole {
		top: 125vw; left: 10vw;
	}

	#captain-hat {
		top: 165vw; left: 2vw;
	}

	#dark-birthday {
		top: 205vw; left: 10vw;
	}

	#fat-cat {
		top: 245vw; left: 2vw;
	}

	#washing-machine {
		top: 285vw; left: 10vw;
	}

	.character-description {
		font-size: 3vw;
	}

	.sprite {
		height: 35vw;
		margin-right: 3vw;
		margin-top: -15vw;
	}


	#character-list {
		padding-bottom: 320vw;
	}

	#extra-shadow {
		position: absolute;
		width: 100vw;
		height: 200vw;
		left: 0;
		bottom: -20vw;
	}


}