body {
	background-color: #000;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color:#fff;
	padding:15px;
}

#socials {
	top:20px;
	right:10px;
	position: fixed;
	z-index: 10;
	display: block;
}

#socials ul {

}

#socials li {
	list-style-type: none;
}

#socials a {
	padding:10px;
	font-size:1.2rem;
	display: block;
}

#socials a:hover {
	opacity: 0.7;
}


#login_with_spotify h1 {
	margin-top: 100px;
    max-width: 490px;
    margin-left: 0;
    font-size: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
#corner-black, #corner-red {
	z-index: 102;
	position: fixed;

}

#corner-black img, #corner-red img {
	height:35px;
	width: 35px;
}
#corner-black {
	width:35px;
	top:0;
	left: 0;
	height:35px;
}

#corner-red {
	width:35px;
	bottom:0;
	right: 0;
	height:35px;
}

#border-left, #border-right, #border-top, #border-bottom {
	z-index: 100;
	position: fixed;
}

#border-left {
	background: #000;
	width:35px;
	top:0;
	left: 0;
	height: 100%;	
}

#border-right {
	background: #ed1b24;
	width:35px;
	top:0;
	right: 0;
	height: 100%;	
}

#border-top {
	background: #ed1b24;
	height:35px;
	top:0;
	left: 0;
	width: 100%;
	z-index: 101;

}

#border-bottom {
	background: #000;
	height:35px;
	bottom:0;
	left: 0;
	width: 100%;
	z-index: 99;
}



a {
	color:#fff;
	font-family: 'basic-sans', sans-serif;
}

a:hover {
	color:#fff;

}

#flames {
	z-index: 10;position: fixed;top: 20px;right: 20px;height: 100%;
}

.logo {
  width:500px;
  max-width:90%;
  height:auto;
  margin:0 auto 0 auto;
}

.buy_stream {
  position: fixed;
  bottom: 20px;
  left: 0;
  z-index: 10;
  width:100%;
}

@media (max-width:800px) {
	.logo {
	/*  display: none;*/
	}

	.buy_stream {
	  position: fixed;
	  bottom: 50px !important;
	  left: 5% !important;
	  z-index: 10;
	  width:90% !important;
	  max-width: 90%;
	  text-align:  center;
	}

	#socials {
		display: none;
	}

}

body, h1 {
    font-family: 'basic-sans', sans-serif;
}
/* end fonts */

.presave {
  background: #fff;
  color: #fff !important;
  font-family: 'basic-sans', sans-serif;
  font-size:12px;
  padding: 9px 0
}

.presave a {
  color: #fff !important;
}



h1 {
  margin-top:0;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  color:#fff !important
}

.spotify_login {
  font-size:12px;
  border-radius:0 !important;
  margin:auto !important;
}

.spotify_login:focus {
	background: #ed1b24;
}

.nine_hundred {
  max-width:900px;
  margin:auto !important;
  margin-bottom:10px !important
}

#halfway_home {
	text-align: left;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	width: 100%;
	height: 100%;
	z-index: 90;

}

.padding {
	    padding-top: 45px;
    padding-left: 60px;
}


.col-lg-3 {
	padding-right: 5px;
	padding-left: 5px;

}

.col-lg-3 div {
	background: #000;
}

.col-lg-3  img {

	cursor: pointer;
}

#cover img {
	width:300px;
	margin:auto;
}

.row {
	margin: 0;
}


					.entry-content img {
					    margin: 0;

					}
					.grid {
					    position: relative;
					    margin: 0;
					    padding: 0;
					    max-width: 1000px;
					    list-style: none;
					    text-align: center;

					}

					.grid strong , .grid a {
						color:#fff;
					}


					.grid figure {
					    position: relative;
					    float: left;
					    overflow: hidden;
					    margin: 0;
					    width: 100%;
					    max-width: 455px;

					    width: 100%;
					    background: #000;
					    text-align: center;
					    cursor: pointer;
					}

					.grid figure img {
					    position: relative;
					    display: block;
					    opacity: 0.6;
							width:100%;
							height:auto;

					}

					.grid figure figcaption {
					    padding: 2em;
					    color: #fff;
					    text-transform: uppercase;
					    -webkit-backface-visibility: hidden;
					    backface-visibility: hidden
					}

					.grid figure figcaption::before,
					.grid figure figcaption::after {
					    pointer-events: none
					}

					.grid figure figcaption,
					.grid figure figcaption>a {
					    position: absolute;
					    top: 0;
					    left: 0;
					    width: 100%;
					    height: 100%
					}

					.grid figure figcaption>a {
					    z-index: 1000;
					    text-indent: 200%;
					    white-space: nowrap;
					    font-size: 0;
					    opacity: 0
					}

					figure.effect-wtm figcaption {
					    top: 0;
					    bottom: auto;
					    padding: 1em;
					    height: 255px;
					    color: #3c4a50;
					    -webkit-transition: -webkit-transform .25s;
					    transition: transform .25s;
					    -webkit-transform: translate3d(0, 100%, 0);
					    transform: translate3d(0, 100%, 0)
					}

					figure.effect-wtm h2 {
					    float: left
					}

					figure.effect-wtm p.icon-links a {
					    color: #000;
					    bottom: 0
					}

					figure.effect-wtm:hover p.icon-links a:hover,
					figure.effect-wtm:hover p.icon-links a:focus {
					    color: #252d31
					}

					figure.effect-wtm:hover img {
					    opacity: .5
					}


					figure.effect-wtm p.description {
					    position: absolute;
					    top: 30%;
					    left: 0;
					    padding: 1em;
					    color: #fff;
					    text-transform: none;
					    font-size: 110%;
					    opacity: 1;
					    -webkit-transition: opacity .35s;
					    transition: opacity .35s;
					    -webkit-backface-visibility: hidden;
							width:100%;
							font-weight: bold;
					}

					figure.effect-wtm h2,
					figure.effect-wtm p.icon-links a {
					    -webkit-transition: -webkit-transform .35s;
					    transition: transform .35s;
					    -webkit-transform: translate3d(0, 200%, 0);
					    transform: translate3d(0, 200%, 0);
					    opacity: 0
					}

					figure.effect-wtm h2 {
					    display: inline-block
					}

					figure.effect-wtm:hover p.description,
					figure.effect-wtm:hover p.icon-links {
					    opacity: 1.0
					}

					figure.effect-wtm:hover figcaption,
					figure.effect-wtm:hover h2,
					figure.effect-wtm:hover p.icon-links a {
					    -webkit-transform: translate3d(0, 0, 0);
					    transform: translate3d(0, 0, 0);
					    opacity: 1;
					    bottom: 0
					}

					figure.effect-wtm:hover h2 {
					    -webkit-transition-delay: .05s;
					    transition-delay: .05s
					}

					figure.effect-wtm:hover p.icon-links a:nth-child(3) {
					    -webkit-transition-delay: .1s;
					    transition-delay: .1s
					}

					figure.effect-wtm:hover p.icon-links a:nth-child(2) {
					    -webkit-transition-delay: .15s;
					    transition-delay: .15s
					}

					figure.effect-wtm:hover p.icon-links a:first-child {
					    -webkit-transition-delay: .2s;
					    transition-delay: .2s
					}

					.mobile_description {
						display: none;
					}
/* follow buttons */
#open_in_spotify button {
  color: #fff !important;
  font-size:16px;
  margin:auto !important;
  font-family: 'phosphateinline', 'basic-sans', sans-serif;
}

#open_in_spotify button:hover {
  color: #ccc !important;
  font-size:16px;

  margin:auto !important;

}

#download_cover_art button {
  color: #fff !important;
  font-size:16px;
  background: #000 !important;
  border: #000 !important;
  margin:auto !important;
  font-family: 'phosphateinline', 'basic-sans', sans-serif;

}

#download_cover_art button:hover {
  color: #ed1b24 !important;
  font-size:16px;
  background: #000 !important;
  margin:auto !important;
  font-family: 'phosphateinline', 'basic-sans', sans-serif;
}


#share_button button {
  color: #fff !important;
  background: #3b5998;
  font-size:12px;
  margin:10px auto !important
}

#make_another button {
  color: #fff !important;
  background: #000;
  font-size:12px;
  border-radius:35px !important;
  margin:0 auto 10px auto !important
}

.footer_logos {
	height:30px;
	width: auto;
	margin-right:10px;
}

.footer_logos:hover {
	opacity: 0.7;
}

/* end buttons */

#halfway_home, #view_playlist {
  display: none
}
#halfway_home {
  margin-bottom: 200px;
}

#cover img {
  border:5px solid #fff;
}

.cover_text {
  font-size:75%;
}

.alert_text {
  font-family: 'libre_franklinlight';
  color:#565151
}

.credits {
  margin-top:50px;
  font-family: 'libre_franklinlight';
  font-size:80%;
  margin-bottom: 30px;
}

.credits img {
  width:75px;
  height: auto;
  margin: auto !important
}
.credits img:hover {
  opacity: 0.6;
}

@media (max-width:2910px) {
  .col-lg-3 {
      width: 20%;
      float: left;
  }
}

@media (max-width:910px) {
  .col-lg-3 {
      width: 50%;
      float: left;
      margin-bottom: 20px;
  }
}


@media (max-width:800px) {
  #border-bottom, #border-top {
  	height:15px;
  }

  #border-right, #border-left {
  	width:15px;
  }

  #corner-black, #corner-red, #corner-black img, #corner-red img{
  	width:15px;
  	height: 15px;
  	vertical-align: top !important;
  }
  body {
  	padding:15px;
  }

  .btn-primary {
  	font-size: 16px !important;
  	width:100%;
  	padding:12px 20px !important;
  }

  	.padding {
	    padding-top: 25px;
	    padding-left: 30px;
	    width: 90%;
	}
}

.btn-primary {
    color: #fff ;
    background-color: rgba(0,0,0,.8);
    border-color: #fff;
    font-size:16px;
	padding: 12px 40px;
	border-radius: 0;
	max-width: 150px;
	width: 100%;
}

.follow {
	font-size: 16px;
}

.btn-primary:hover {
    color: #4e4e4e;
    background-color: #fff;
    border-color: #4e4e4e;
}

#make_another button {
    color: #fff !important;
    background: #000;
    font-size: 12px;
    border-radius: 35px !important;
    margin: 0 auto 10px auto !important;
    border:#000 !important;
}

.mobilebg {
	text-align: center;
	background: transparent;
	margin-top:0;
	padding-top:10px;
	z-index: 910;
	position: relative;
}




	body {
	background-color: #000;
	
	
	color:#fff;
	padding:25px;
}


#mobile_img {
	top:0;
	left: 0;
	z-index: -1;
	width:100%;
	position: fixed;
	background:url('../img/hannah_bg.webp') no-repeat top center fixed;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;height:100%
	
}
#mobile_img img {
	width:100%;
	height: auto;
}


#enter_site {
		z-index: 1000;
		position: fixed;
		right:0;
		bottom: 0px;
		font-size:1.2rem;
		font-weight: 300;
		letter-spacing: 5px;
		background: #fff;
		width: 100%;
		text-align: center;
		padding:5px 0;
	}


#enter_site a {
	color:#4e4e4e;
	font-size:0.8rem;
}


#gradient_footer {
	background: rgb(0,0,0);
	background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	position: fixed;
	z-index: 900;
	bottom: 0;
	left: 0;
	width:100%;
	height: 50%;
}

#view_playlist h1, #halfway_home h1 {
	text-align: center;
}


@media (min-width:800px) {

	#view_playlist h1, #halfway_home h1 {
		text-align: right;
	}

	#mobile_img {
		display: none;
	}

	.mobilebg {
		text-align: left;
		background: transparent;
		margin-top:0;
	}






	body {
		background: transparent;
		/*background:url('../img/hannah_bg.webp') no-repeat top center fixed;*/
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding:15px;
	}

	#enter_site {
		z-index: 1000;
		position: fixed;
		right:20px;
		bottom: 20px;
		font-size:2rem;
		font-weight: 300;
		letter-spacing: 5px;
		background: transparent;
		text-align: right;
		width:auto;

	}

	#enter_site a {
		color:#fff;
		font-size:1rem;
	}

	#enter_site a:hover {
		text-decoration: none;
		opacity: 0.8;
	}

}


#border-top,
#border-right,
#border-bottom,
#border-left {
	background: #fff;
	z-index: 10000;
	position: fixed;
	display: block;
}
/*
#border-top {
	left:0;
	top:0;
	width:100%;
	height:30px;
}*/

h1, h2 {
	font-weight: 300;
	letter-spacing: 0px;
	margin-bottom: .0rem;

    font-weight: 300;
    line-height: 1;
    color: inherit;

}
h1 {
	font-size:4rem;
}

h2 {
	font-size: 2rem;
}

.delay-0-5s {
  animation-delay: 0.5s;
}

.delay-1-5s {
  animation-delay: 1.5s;
}