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




body, h1 {
    font-family: 'futura-pt' !important;
}
/* end fonts */

.presave {
  background: #fff;
  color: #2937e8 !important;
  font-family: 'futura-pt';
  font-size:12px;
  padding: 9px 0
}

.presave a {
  color: #2937e8 !important;
}

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

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

.spotify_login {
  font-size: 18px;
    border-radius: 35px !important;
    margin: auto !important;
    padding: 1.5rem 4rem;
}

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

#halfway_home {
  text-align: center;
}


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

}

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

.col-lg-3  img {

	cursor: pointer;
}

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

.row {
	margin: 0;
}


.coverx {
	position: absolute !important;
    z-index: 10;
    opacity: 0 !important;
    top: 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;
							border: 5px solid #fff;
					}

					.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 .coverx,
					figure.effect-wtm:hover p.icon-links {
					    opacity: 1.0 !important;
					}

					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: 18px;
    border-radius: 35px !important;

    padding: 1.5rem 4rem;
  border-radius:35px !important;
  margin:auto !important
}

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

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

/* 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: 'futura-pt';
  font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal;
  color:#565151
}

.credits {
  margin-top:50px;
  font-family: 'futura-pt';
  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: 33%;
      float: left;
  }
}

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