body {
	font-family:'Helvetica Neue', sans-serif;
	font-weight:400;
}

h1, h2, h3 {
	font-family:'Passion One', sans-serif;
}

a.btn.nominations {background-color: #722A82; color:#FFF; font-size:20px; font-weight:500;}
a.btn.previousheroes {font-size:16px; color: #676767; font-weight:500;}

.tirebg {
	background:url(img/PurpleTireBG.jpg) top no-repeat;
	color:#FFF;
	padding:20px;
}

.herobg-1 {
	background:url(img/bg-hero-01.jpg) top no-repeat;
	color:#FFF;
	padding:20px;
}
.herobg-2 {
	background:url(img/bg-hero-02.jpg) top no-repeat;
	color:#FFF;
	padding:20px;
}
.herobg-3 {
	background:url(img/bg-hero-03.jpg) top no-repeat;
	color:#FFF;
	padding:20px;
}

.timeline-hdr {
	/* background: linear-gradient(90deg, #722A82 0%, #C34ADE 100%); */
	background-color: #782182;
}
.timeline-hdr h2{color:#FFF; }
.timeline-hdr h2 span {
	color:#F5C8FF;
}
.timeline-hdr .container {padding:20px 0;}
.timeline .container {padding-bottom:30px;}
.timeline div.p-3 {height:170px;}

.timeline {
	background-color:#202020;
}

.timeline .p-3 {
	background-color:#9D9D9D;
	border-radius:5px;
	padding-bottom:30px !important;
	margin:10px 0 10px 0;
}
.timeline .p-3 h3{ color:#FFF;}
.timeline .p-3.active {
	background-color:#FFF;
}
.timeline .p-3.active h3{ color:#722A82;}



.herobg {
	background:url(img/PurpleHeroesBG.jpg) top no-repeat;
	background-size:cover;
	color:#FFF;
	padding:20px 0 20px 0;
	overflow:hidden;
}

.btn.see-all-heroes {
	color:#FFF;
}

.w-33 {width:33%;
	margin-right:0 !important;}
.w-33.visible {display:block;}

@media (min-width: 768px) {
	.timeline .col-md-2 {width:20%;}
	.timeline .col-md-1 {width:8%; flex:0;}
	.timeline .p-3 {margin-top:-15px;}
}

.carousel-item {position: relative; z-index: 1;}
.carousel-item span.overlay {
	position: absolute; top: 0px; z-index: 3; 
	background-color:rgba(114,42,130,.65); 
	width:284px; 
	height:100%;
	margin:0 0.5em;
	border-radius: 0.375rem;
}
.carousel-item.active span.overlay {display:none; }
/* .carousel-item span.overlay {display:none;} */


#carouselControls {margin-top:60px;}
a.carousel-nav { display:inline-block; width: 56px; margin-right:10px;}
a.carousel-nav img {max-width:100%;}
h3.card-title { color: #722A82; }

/* BOOTSTRAP CAROUSEL - copied from https://codingyaar.com/bootstrap-carousel-multiple-items-increment-by-1/ */
.carousel-inner {
  padding: 1em;
}
.card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}
.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .carousel-item {
    margin-right: 5%;
    /* flex: 0 0 32%; */
	flex: 0 0 300px;
    display: block;
  }
  .carousel-inner {
    display: flex;
  }
  /* .offset-left { position:relative; left:100px;} */
 
 .hero-cards .row .col-md-3:first-child {
	margin-left:12.5%
	}
}
.card .img-wrapper {
    max-width: 100%;
    /*height: 13em; */
    display: flex;
    justify-content: center;
    align-items: center;
	padding-top:10px;
}
.card img {
    max-width: 260px;
	border-radius:4px;
	border:3px solid #000;
}
@media (max-width: 767px) {
  .card .img-wrapper {
    height: 17em;
  }
  .herobg .prev-heroes{
	  padding-left:30px;
	  padding-right:30px;
  }

}

footer p a {color:#722A82;}
span.text-body-secondary {color: #9D9D9D !important; font-size:14px;}

.nom-form-wrapper{
	background-color:#F0F0F0;
}

.heroes-list-hdr a {color:#FFF;}
.hero-cards {padding-top:40px; background-color:#F0F0F0}
.hero-cards .card {margin-bottom:20px;}
.hero-cards a {text-decoration:none; color:#000;}
.hero-cards p.card-text {display:none;}