body {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: rgb(84, 84, 84);
	width: 100%;
	max-width: 960px;
	margin: auto;
}

a, a:hover {
	color: rgb(68, 146, 37);
}

aside {
	color: rgb(84, 84, 84);
	font-size: 1.2em;
}

h1 { margin-top: 0.25em; }

aside h4 {
	margin-bottom: 0.25em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Alegreya Sans",Helvetica,Arial,sans-serif;
	font-weight: 700;
	line-height: 1.2;
	color: rgb(47, 164, 231);
	text-transform: none;
}

.align-top {
	vertical-align:text-top;
}

.composer {
	font-style: italic;
	color: rgb(47, 164, 231);
}

form { 
	padding: 0;
}

.navbar {
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	text-transform: lowercase;
	/*get rid of space between navbar and page content*/
	margin-bottom: 0;
}

.sharethis-inline-share-buttons{
	padding-top: 1em;
}

.footer {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	color: rgb(255,255,255);
	line-height: normal;
	background-image: -webkit-linear-gradient(rgb(29, 156, 229), rgb(47, 164, 231) 40%, rgb(84, 180, 235));
	background-image: -moz-linear-gradient(rgb(29, 156, 229), rgb(47, 164, 231) 40%, rgb(84, 180, 235));
	background-image: -ms-linear-gradient(rgb(29, 156, 229), rgb(47, 164, 231) 40%, rgb(84, 180, 235));
	background-image: -o-linear-gradient(rgb(29, 156, 229), rgb(47, 164, 231) 40%, rgb(84, 180, 235));
	background-image: linear-gradient(rgb(29, 156, 229), rgb(47, 164, 231) 40%, rgb(84, 180, 235));
	background-repeat: no-repeat;
	min-height: 25px;
	position: relative;
	margin-top: 10px;
	text-align: center;
	padding: 0.5em 0.25em 0;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-ms-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

.footer a { color: rgb(255,255,255); }

.footer p { padding: 0.25em 0; margin: 0; }

.shows, .shows-highlight {
	border-bottom: 1px solid rgb(47, 164, 231);
	padding: 10px 0;
	margin-top: 0;
}

.shows-highlight {
	background-color: rgba(47, 164, 231, 0.1);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
	color: rgb(255, 255, 255);
	background-color: rgb(2, 28, 53);
	background-color: rgb(2, 28, 53);
}

.nav > li.active {
	padding: 15px 15px 10px 15px;
	line-height: 20px;
	color: rgb(3,67,100);
}

.dropdown-toggle .active {
	color: rgb(3,67,100);
}

ul.dropdown-menu li.active {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: rgb(255,255,255);
	background-color: rgb(3,67,100);
	white-space: nowrap;
}

.btn-round {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

/*for cdbaby, spotify and itunes players*/

.player { margin: auto; padding: 10px 0 0 0; }

.button-holder {
	display: block;
	position: absolute;
	font-size: 3em;
	text-align: center;
	top: 0.1em;
	left: 0;
	width: 100%;
}

.back-button,
.back-button-inactive {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	padding-right: 1%;
	margin-left: 4%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	background: rgba(255,255,255,0.1);
	color: rgba(68,146,37,0.5);
	z-index: 0;
}

.back-button-inactive { color: rgba(255,255,255,0.5); }

.forward-button,
.forward-button-inactive {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	padding-left: 1%;
	margin-right: 4%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	background: rgba(255,255,255,0.1);
	color: rgba(68,146,37,0.5);
}

.forward-button-inactive { color: rgba(255,255,255,0.5); }

.back-button:hover,
.forward-button:hover,
.back-button-inactive:hover,
.forward-button-inactive:hover {
	background: rgba(255,255,255,0.75);
	color: rgb(68,146,37);
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

.back-button-inactive:hover,
.forward-button-inactive:hover {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.5);
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

.buy-button, .buy-button-left, .show-button {
	display: block;
	float: right;
	clear: both;
	min-width: 115px;
	text-align: left;
	padding: 0.25em 0.5em;
	margin: 0 0 0.5em 0;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-ms-border-radius: 16px;
	-o-border-radius: 16px;
	border-radius: 16px;
	background-color: rgb(68,146,37);
	color: rgb(255,255,255);
}

.buy-button-left {
	width: 130px;
	margin: -10px 0px;
	float:none;
}

.show-button {
	margin: 0.5em 0;
	float:none;
	width: 130px;
	text-align:center;
}

.show-button:hover {
	color: rgb(255,255,255);
	background-color: rgb(88,191,48);
	text-decoration:none;
}

.buy-buttons {
	margin: 0 0 2em 0;
}

.buy-buttons h4{
	text-align: left;
	margin: 0 0 1em 0px;
}

.buy-button img, .buy-button-left img { margin: 0 0.75em 0 0; }

.buy-button:hover, .buy-button-left:hover {
	background-color: rgb(88,191,48);
	color: rgb(255,255,255);
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
}

.buy-button:active, .buy-button-left:active { background-color: rgb(88,191,48); }

.song-arrow {
	color: rgb(255,255,255);
	background-color: rgb(68,146,37);
	padding: 0.25em;
	font-size: 0.45em;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	margin: 0 0.25em 0 0;
}

.song-arrow:hover { background-color: rgb(88,191,48); }

p.signup-error { margin-bottom: 0; padding-bottom: 0; }

ul.signup-error {
	color: rgb(153, 51, 0);
	font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
	font-weight: 700;
	margin-top: 0;
	padding-left: 1em;
	padding-top: 0;
}

.fieldset-border {
	border: 2px solid rgb(0, 153, 204);
	-border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	border-border-radius: 30px;
	padding: 0.5em;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
}

.signup-error {
	color: rgb(153, 51, 0);
	font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
	font-weight: 700;
}

.signup-success {
	color: rgb(87, 130, 0);
	font-family: "Alegreya", Arial, Helvetica, sans-serif;
	font-weight: 700;
}

#signupmessage li { font-family: "Alegreya", Arial, Helvetica, sans-serif; }

.songs { padding: 0 15px 0 0; }

.song-theme { font-style: italic; font-weight: 700; }


/*animation styles*/

.hero { position: relative; font-size: 22px; }

/*teach*/

.teach {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 0.2em;
	color: rgb(255,255,255);
	display: block;
	position: absolute;
	top: 25%;
	left: 5%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 1s ease-in-out forwards, fade-out 1s ease-in-out 5s forwards;
	-moz-animation: fade-in 1s ease-in-out forwards, fade-out 1s ease-in-out 5s forwards;
	-ms-animation: fade-in 1s ease-in-out forwards, fade-out 1s ease-in-out 5s forwards;
	-o-animation: fade-in 1s ease-in-out forwards, fade-out 1s ease-in-out 5s forwards;
	animation: fade-in 1s ease-in-out forwards, fade-out 1s ease-in-out 5s forwards;
}

.teach1 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 1s ease-in-out 1s forwards, fade-out 1s ease-in-out 5s forwards;
	-moz-animation: fade-in 1s ease-in-out 1s forwards, fade-out 1s ease-in-out 5s forwards;
	-ms-animation: fade-in 1s ease-in-out 1s forwards, fade-out 1s ease-in-out 5s forwards;
	-o-animation: fade-in 1s ease-in-out 1s forwards, fade-out 1s ease-in-out 5s forwards;
	animation: fade-in 1s ease-in-out 1s forwards, fade-out 1s ease-in-out 5s forwards;
}

.teach2 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 1s ease-in-out 2s forwards, fade-out 1s ease-in-out 5s forwards;
	-moz-animation: fade-in 1s ease-in-out 2s forwards, fade-out 1s ease-in-out 5s forwards;
	-ms-animation: fade-in 1s ease-in-out 2s forwards, fade-out 1s ease-in-out 5s forwards;
	-o-animation: fade-in 1s ease-in-out 2s forwards, fade-out 1s ease-in-out 5s forwards;
	animation: fade-in 1s ease-in-out 2s forwards, fade-out 1s ease-in-out 5s forwards;
}

/*despair*/

.animation-despair {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: block;
	position: absolute;
	top: 1%;
	left: 30%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: despair-fade-in 2s ease-in 5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: despair-fade-in 2s ease-in 5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: despair-fade-in 2s ease-in 5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: despair-fade-in 2s ease-in 5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: despair-fade-in 2s ease-in 5s forwards, fade-out 1s ease-in-out 28s forwards;
}

.animation-despair span {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 1s ease-in 6.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 1s ease-in 6.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 1s ease-in 6.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 1s ease-in 6.8s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 1s ease-in 6.8s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes despair-fade-in {
    from {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	font-size: 2em;
	top: -5%;
	color: rgb(0,135,201);
}

		to {
	opacity: 1;
	font-size: 0.75em;
	top: 1%;
	color: rgb(0,0,0);
}

}

/*loneliness*/
.animation-loneliness {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgb(98,188,234);
	font-size: 0.75em;
	display: block;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 6%;
	left: 50%;
	-webkit-animation: slide-in 2s ease-in-out 6s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: slide-in 2s ease-in-out 6s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: slide-in 2s ease-in-out 6s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: slide-in 2s ease-in-out 6s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: slide-in 2s ease-in-out 6s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes slide-in {
	from {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

	to {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

}

/*seduction*/
.animation-seduction {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 400;
	color: rgb(129,193,235);
	display: block;
	position: absolute;
	top: 10%;
	left: 15%;
	-webkit-animation: fade-in-out 2.5s ease-in 8s backwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in-out 2.5s ease-in 8s backwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in-out 2.5s ease-in 8s backwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in-out 2.5s ease-in 8s backwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in-out 2.5s ease-in 8s backwards, fade-out 1s ease-in-out 28s forwards;
}

.animation-seduction span {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 3em;
	-webkit-animation: seduce 1.5s ease-out forwards 8s, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: seduce 1.5s ease-out forwards 8s, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: seduce 1.5s ease-out forwards 8s, fade-out 1s ease-in-out 28s forwards;
	-o-animation: seduce 1.5s ease-out forwards 8s, fade-out 1s ease-in-out 28s forwards;
	animation: seduce 1.5s ease-out forwards 8s, fade-out 1s ease-in-out 28s forwards;
}

@keyframes fade-in-out {
	0% {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	letter-spacing: 2em;
}

	30% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

	100% { letter-spacing: 0.5em; }

}

@keyframes seduce {
	10% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
	letter-spacing: 3em;
}

	100% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
	letter-spacing: 0.2em;
}

}

/*ecstasy*/
.animation-ecstasy {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-align: center;
	display: block;
	position: absolute;
	vertical-align: middle;
	top: 18%;
	left: 25%;
	color: rgb(7,90,133);
}

.animation-ecstasy span {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

.ecstasy-e {
	-webkit-animation: ecstasy 2.2s ease-in-out 8.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 8.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 8.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 8.7s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 8.7s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-c {
	-webkit-animation: ecstasy 2.2s ease-in-out 9s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 9s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 9s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 9s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 9s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-s1 {
	-webkit-animation: ecstasy 2.2s ease-in-out 9.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 9.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 9.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 9.3s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 9.3s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-t {
	-webkit-animation: ecstasy 2.2s ease-in-out 9.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 9.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 9.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 9.6s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 9.6s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-a {
	-webkit-animation: ecstasy 2.2s ease-in-out 9.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 9.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 9.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 9.9s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 9.9s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-s2 {
	-webkit-animation: ecstasy 2.2s ease-in-out 10.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 10.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 10.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 10.2s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 10.2s forwards, fade-out 1s ease-in-out 28s forwards;
}

.ecstasy-y {
	-webkit-animation: ecstasy 2.2s ease-in-out 10.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: ecstasy 2.2s ease-in-out 10.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: ecstasy 2.2s ease-in-out 10.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: ecstasy 2.2s ease-in-out 10.5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: ecstasy 2.2s ease-in-out 10.5s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes ecstasy {
	0% {
	font-size: 1em;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

	10% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

	50% { font-size: 2em; }

	100% {
	font-size: 1em;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

}

/*infatuation*/
.animation-infatuation {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-style: italic;
	color: rgb(1,109,158);
	text-align: center;
	display: block;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 27%;
	left: 27%;
	-webkit-animation: fade-in 1s ease-in 11.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 1s ease-in 11.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 1s ease-in 11.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 1s ease-in 11.7s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 1s ease-in 11.7s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes fade-in {
	from {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

	to {
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
}

}

.infat-i {
	-webkit-animation: infatuation 4s linear 12.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 4s linear 12.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 4s linear 12.9s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 4s linear 12.9s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 4s linear 12.9s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-n {
	-webkit-animation: infatuation 2.5s linear 12.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 2.5s linear 12.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 2.5s linear 12.7s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 2.5s linear 12.7s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 2.5s linear 12.7s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-f {
	-webkit-animation: infatuation 3s linear 13s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 3s linear 13s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 3s linear 13s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 3s linear 13s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 3s linear 13s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-a {
	-webkit-animation: infatuation 2.5s linear 12.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 2.5s linear 12.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 2.5s linear 12.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 2.5s linear 12.8s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 2.5s linear 12.8s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-t {
	-webkit-animation: infatuation 3s linear 13.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 3s linear 13.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 3s linear 13.3s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 3s linear 13.3s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 3s linear 13.3s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-u {
	-webkit-animation: infatuation 2.5s linear 13.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 2.5s linear 13.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 2.5s linear 13.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 2.5s linear 13.2s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 2.5s linear 13.2s forwards, fade-out 1s ease-in-out 28s forwards;
}

.infat-u {
	-webkit-animation: infatuation 3s linear 13.1s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: infatuation 3s linear 13.1s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: infatuation 3s linear 13.1s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: infatuation 3s linear 13.1s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: infatuation 3s linear 13.1s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes infatuation {
0%,
50%,
100% { color: rgb(1,109,158); }

25%,
75% { color: rgb(255,255,255); }

60%,
80% { color: rgb(52,142,52); }

}

/*love*/
.animation-love {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	color: rgb(3,67,100);
	letter-spacing: 0.2em;
	display: block;
	text-align: center;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 37%;
	left: 30%;
	-webkit-animation: love 1.5s ease-in-out 15.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: love 1.5s ease-in-out 15.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: love 1.5s ease-in-out 15.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: love 1.5s ease-in-out 15.5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: love 1.5s ease-in-out 15.5s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes love {
	0% {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	font-size: 10em;
	letter-spacing: 1em;
	left: 10%;
}

50% {
	-webkit-opacity: 0.2;
	-moz-opacity: 0.2;
	-ms-opacity: 0.2;
	-o-opacity: 0.2;
	opacity: 0.2;
}

75% {
	-webkit-opacity: 0.4;
	-moz-opacity: 0.4;
	-ms-opacity: 0.4;
	-o-opacity: 0.4;
	opacity: 0.4;
}

90% {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	-o-opacity: 0.7;
	opacity: 0.7;
}

100% {
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
	font-size: 1em;
	letter-spacing: 0.1em;
	left: 30%;
}

}

/*doubt*/
.animation-doubt {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	color: rgb(83,83,83);
	display: block;
	text-align: center;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 47%;
	left: 31%;
	-webkit-animation: doubt 1.8s linear 17.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: doubt 1.8s linear 17.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: doubt 1.8s linear 17.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: doubt 1.8s linear 17.5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: doubt 1.8s linear 17.5s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes doubt {
0%,
30%,
41%,
85% {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

12%,
35%,
50%,
90% {
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	-ms-opacity: 0.5;
	-o-opacity: 0.5;
	opacity: 0.5;
}

100% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

}

/*deception*/
.animation-deception {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	font-style: italic;
	letter-spacing: 0.2em;
	color: rgb(0,0,0);
	display: block;
	text-align: center;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 57%;
	left: 27%;
	-webkit-animation: fade-in 1s ease-in-out 18.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 1s ease-in-out 18.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 1s ease-in-out 18.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 1s ease-in-out 18.5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 1s ease-in-out 18.5s forwards, fade-out 1s ease-in-out 28s forwards;
}

.animation-deception span {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 1s ease-in-out 19.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 1s ease-in-out 19.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 1s ease-in-out 19.5s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 1s ease-in-out 19.5s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 1s ease-in-out 19.5s forwards, fade-out 1s ease-in-out 28s forwards;
}

/*loss*/

.animation-loss span {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.5em;
	display: block;
	position: absolute;
	top: 65%;
	left: 30%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

.loss-l {
	-webkit-animation: fade-and-fall 3s ease-in 20s forwards;
	-moz-animation: fade-and-fall 3s ease-in 20s forwards;
	-ms-animation: fade-and-fall 3s ease-in 20s forwards;
	-o-animation: fade-and-fall 3s ease-in 20s forwards;
	animation: fade-and-fall 3s ease-in 20s forwards;
}

.loss-o {
	-webkit-animation: fade-and-fall 3s ease-in 20.5s forwards;
	-moz-animation: fade-and-fall 3s ease-in 20.5s forwards;
	-ms-animation: fade-and-fall 3s ease-in 20.5s forwards;
	-o-animation: fade-and-fall 3s ease-in 20.5s forwards;
	animation: fade-and-fall 3s ease-in 20.5s forwards;
}

.loss-s1 {
	-webkit-animation: fade-and-fall 3s ease-in 21s forwards;
	-moz-animation: fade-and-fall 3s ease-in 21s forwards;
	-ms-animation: fade-and-fall 3s ease-in 21s forwards;
	-o-animation: fade-and-fall 3s ease-in 21s forwards;
	animation: fade-and-fall 3s ease-in 21s forwards;
}

.loss-s2 {
	-webkit-animation: fade-and-fall 3s ease-in 21.5s forwards;
	-moz-animation: fade-and-fall 3s ease-in 21.5s forwards;
	-ms-animation: fade-and-fall 3s ease-in 21.5s forwards;
	-o-animation: fade-and-fall 3s ease-in 21.5s forwards;
	animation: fade-and-fall 3s ease-in 21.5s forwards;
}

@keyframes fade-and-fall {
10%,
20% {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

100% {
	top: 100%;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

}

/*consolation*/
.animation-consolation {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgb(0,136,192);
	display: block;
	text-align: center;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 73%;
	left: 28.5%;
	-webkit-animation: fade-in 3s ease-in-out 23s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 3s ease-in-out 23s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 3s ease-in-out 23s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 3s ease-in-out 23s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 3s ease-in-out 23s forwards, fade-out 1s ease-in-out 28s forwards;
}

/*aloneness*/

.animation-alone {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgb(3,67,100);
	display: block;
	text-align: center;
	position: absolute;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
	top: 85%;
	left: 28%;
}

.alone-a {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 26s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 26s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 26s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 26s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 26s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-l {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 26.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 26.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 26.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 26.2s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 26.2s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-o {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 26.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 26.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 26.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 26.4s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 26.4s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-n {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 26.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 26.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 26.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 26.6s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 26.6s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-e {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 26.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 26.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 26.8s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 26.8s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 26.8s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-n2 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 27s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 27s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 27s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 27s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 27s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-e2 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 27.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 27.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 27.2s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 27.2s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 27.2s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-s1 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 27.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 27.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 27.4s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 27.4s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 27.4s forwards, fade-out 1s ease-in-out 28s forwards;
}

.alone-s2 {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-animation: fade-in 0.5s ease-in 27.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-moz-animation: fade-in 0.5s ease-in 27.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-ms-animation: fade-in 0.5s ease-in 27.6s forwards, fade-out 1s ease-in-out 28s forwards;
	-o-animation: fade-in 0.5s ease-in 27.6s forwards, fade-out 1s ease-in-out 28s forwards;
	animation: fade-in 0.5s ease-in 27.6s forwards, fade-out 1s ease-in-out 28s forwards;
}

@keyframes fade-out {
	from {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

to {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
}

}

.stuck {
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.stuck-img {
	-webkit-animation: fade-in 1s ease-in 29s forwards;
	-moz-animation: fade-in 1s ease-in 29s forwards;
	-ms-animation: fade-in 1s ease-in 29s forwards;
	-o-animation: fade-in 1s ease-in 29s forwards;
	animation: fade-in 1s ease-in 29s forwards;
}

.animation-stuck {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 900;
	color: rgb(46,148,199);
	display: block;
	text-align: right;
	position: absolute;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	right: 5%;
	top: 6%;
	-webkit-animation: fade-in 1s ease-in 28s forwards;
	-moz-animation: fade-in 1s ease-in 28s forwards;
	-ms-animation: fade-in 1s ease-in 28s forwards;
	-o-animation: fade-in 1s ease-in 28s forwards;
	animation: fade-in 1s ease-in 28s forwards;
}

.animation-stuck p { padding: 0; margin: 0; }

.CD-title {
	font-family: "Alegreya", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	line-height: 1em;
	font-weight: 700;
	color: rgb(1,114,160);
}

#audio-button {
	position: absolute;
	left: 3%;
	bottom: 3%;
	font-size: 48px;
	padding: 0;
}

/*styles for spotify embedded player*/

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: auto;
	height: auto;
	overflow: hidden;
	max-width: 100%;
}

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

/*MEDIA QUERIES*/

@media (min-width: 768px) {
  .navbar {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}

}
@media only screen and (min-width:625px) and (max-width : 768px) {
	.hero { font-size: 1em; }

	.teach { left: 5%; top: 20%; }

	.jack-name, .CD-title { right: 5%; }

	.animation-stuck { right: 5%; }

	.text-right { text-align: left; padding-left: 0.5em; }
	
	.buy-button { float:left; }

	h1 { font-size: 2em; }

	#audio-button { left: 5%; bottom: 0px; font-size: 32px; }

}

/* Small Devices, Tablets */
@media only screen and (min-width:481px) and (max-width : 624px) {
	.hero { font-size: 0.8em; }

	.teach { left: 10%; top: 15%; }

	.jack-name, .CD-title { right: 5%; }

	.animation-stuck { right: 5%; }

	.text-right { text-align: left; padding-left: 0.5em; }
	
	.buy-button { float:left; }

	h1 { font-size: 1.5em; }

	#audio-button { left: 5%; bottom: 0px; font-size: 32px; }

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width:321px) and (max-width : 480px) {
	.hero { font-size: 0.7em; }

	.teach { left: 10%; top: 15%; }

	.jack-name, .CD-title { right: 5%; }

	.animation-stuck { right: 8%; }

	.text-right { text-align: left; padding-left: 0.5em; }
	
	.buy-button { float:left; }

	h1 { font-size: 1.25em; }

	#audio-button { left: 5%; bottom: 0px; font-size: 32px; }

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	.hero { font-size: 0.65em; }

	.teach { left: 10%; top: 15%; }

	.jack-name, .CD-title { right: 10%; }

	.animation-stuck { right: 8%; }

	.text-right { text-align: left; padding-left: 0.5em; }
	
	.buy-button { float:left; }

	h1 { font-size: 1.2em; }

	#audio-button { left: 8%; bottom: 0px; font-size: 32px; }
	
	.buy-button-left { width: 100%; text-align:center; }

}

/*restrict width to 970px*/

@media (min-width: 1200px) {
  .container { width: 940px; width: 960px; }

}

/*media queries to resize spotify player*/
@media(min-width: 494px) and (max-width: 991px) {
  .spotify { width: 450px; }

}

@media(min-width: 200px) and (max-width: 493px) {
  .spotify { width: 250px; height: 450px; }

}
/*
@media(min-width: 200px) and (max-width: 750px) {
	.text-right {
		text-align:left;
		padding-left: 0.5em;
		}
	h1 {font-size: 2em;}
	}


@media(min-width: 500px) and (max-width: 750px) {
  .hero {
    font-size: 1em;
  }
}

@media(min-width: 300px) and (max-width: 499px) {
  .hero {
    font-size: 8px;
  }
  h1 {font-size: 1.25em;}
}

@media(min-width: 200px) and (max-width: 299px) {
  .hero {
    font-size: 9px;
  }
}

@media(min-width: 400px) and (max-width: 499px) {
	.audio-off-button {
  		font-size: 32px;
		left: 6.5%;
		bottom: 0.5%;
	}
}

@media(min-width: 200px) and (max-width: 399px) {
	.audio-off-button {
  		font-size: 32px;
		left: 6.5%;
		bottom: 0.5%;
	}
}
/*this ensures image fits in hero container on home page when window width<768px*/
@media (min-width: 200px) {
  .stuck { padding: 0 15px; padding: 0; }

}