body {
	background-color: #000;
	/*background:url('../img/laforce.jpg') no-repeat top center fixed;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color:#fff;
	padding:15px;
}



#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: 'futura-pt', sans-serif;*/
	font-family: futura-pt, sans-serif;
}

a:hover {
	color:#fff;

}

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

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

@media (max-width:800px) {
	
}

body, h1 {

    font-family: futura-pt, sans-serif;
}
/* end fonts */

.presave {
  background: #fff;
  color: #fff !important;
  /*font-family: 'futura-pt', sans-serif;*/
  font-family: futura-pt, 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: futura-pt, 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: futura-pt, sans-serif;

}

#download_cover_art button:hover {
  color: #ed1b24 !important;
  font-size:16px;
  background: #000 !important;
  margin:auto !important;
  font-family: futura-pt, 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%;
	}
}