/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  color: #3c3c3b;
  font-family: 'Exo 2', sans-serif;
}
.bg-light{
	background: #FFF !important;
}
.bg-dark{
	background:#3c3c3b !important;
}
.bg-dark a{
	color:#FFF;
	text-decoration: none;
	transition: all 0.5s;
}
.bg-dark a:hover{
	color:#e30613;
}
.btn-primary{
	background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(203,7,103,1) 100%);
	border-color:rgba(227,6,19,1);
	text-transform: uppercase;
	font-weight: bold;
	font-size:1.15em;
}
.btn-primary::after{
	font-family: "Font Awesome 5 Free"; font-weight: 900;
	content:"\f105";
	padding-left:0.25em;
}
.btn-primary:hover{
	border-color:rgba(227,6,19,1);
}
.btn-big{
	font-size:1.5em;
	margin:2em auto 0;
}
.badge{
	font-size:0.85em;
}
.bg-primary{
	background: rgb(227,6,19);
	background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(203,7,103,1) 100%);
	text-transform: uppercase;
}
h1{
	text-transform: uppercase;
	font-weight: bold;
	font-size:2.5em;
	line-height: 1em;
}
.element-space-padding{
	padding:3em 0;
}

/* NAVBAR
-------------------------------------------------- */

.navbar{
	font-size:1.5em;
	font-weight: bold;
	text-transform: uppercase;
	background:#3c3c3b;
}
.sub-nav{
	background: rgb(227,6,19);
	background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(203,7,103,1) 100%);
	padding:0.5em 0;
	font-size:0.75em;
}
.sub-nav .sub-item{
	display: inline-block;
	padding-left:0.5em;
}
.sub-nav a{
	color:#FFF;
	text-decoration: none;
}
.navbar-brand{
	padding:1em 0;
}
.navbar-brand img{
	width:60%;
}
.navbar-nav{
	margin-left:auto;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .dropdown-item:hover{
	color:#A2A2A2 !important;
}
.navbar-light .navbar-nav .nav-link.active{
	color:#e30613 !important;
}
.navbar-light .navbar-nav .nav-link{
	color:#FFF !important;
}
.navbar-light .navbar-toggler{
	border:2px solid #3c3c3b;
}
.navbar i.fa-dropdown{
	float:right;
}
.navbar .fa-angle-right:before{
	content:"\f105";
}
.dropdown-menu {
	border:none;
	font-size:1em;
	background:none;
}
.dropdown-item{
	padding:0.3em 0 !important;
	font-weight:600 !important;
	color:#FFF;
}
.dropdown-item:hover{
	background:none;
}
.navbar-light .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 100%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 9rem;
  z-index: 10;
}
.carousel-gradient{
background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index:1;
}

.carousel .badge{
	margin-bottom: 0.5em;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-position: center;
  background-size: cover;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}
.carousel h1{
	margin:0;
	line-height: 1em;
}
.carousel h2{
	margin-bottom:0.75em;
}
.carousel h2 span{
	font-weight:bold;
}
.carousel h1, .carousel h2{
	text-shadow: 0 0 5px #000;
}

/* FEATURES BAR CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.features-bar{
	background: #3c3c3b;
	padding:3em 0;
	color:#FFF;
	text-align: center;
	line-height: 1.3em;
}
.features-bar .feature-icon{
	background: rgb(227,6,19);
	background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(203,7,103,1) 100%);
    width: 125px;
    height: 125px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
	padding-top:0.2em;
}
.features-bar h1{
	margin-bottom: 1em;
}
.features-bar h2{
	text-transform: uppercase;
	font-weight: bold;
	margin:0.75em auto 0.1em;
	font-size:1.25em;
}

/* FEATURES ITEMS BAR CONTENT
-------------------------------------------------- */

.featured-items{
	text-align: center;
	margin:2em auto;
}
.featured-items h1{
	margin-bottom: 1em;
}

/* FEATURED POSTS STYLING
-------------------------------------------------- */
.winner-posts{
	background: #ccc;
	text-align: center;
	color:#3c3c3b;
}
.winner-posts a{
	text-decoration: none;
}
.winner-posts h1{
	color:#3c3c3b;
}
.winner-posts .card{
	color:#3c3c3b;
	border:none;
}
.winner .card h5{
	font-weight: bold;
}


/* SHOP ITEM STYLING
-------------------------------------------------- */

.shop-wrapper{
	background:#ccc;
	text-align: center;
	padding: 2em 0;
}
.shop-wrapper h1{
	margin-bottom:1em;
}
.shop-item{
	box-shadow: 0 0 0.75em 0.25em #AFAFAF;
	border:none;
	position: relative;
	z-index: 1;
	margin-bottom: 1em;
}
.shop-item h5{
	text-transform: uppercase;
	font-weight: bold;
	font-size:1.75em;
	margin-bottom:0;
}
.shop-item .card-text{
	font-size:1.25em;
}
.shop-item .badge{
	position: absolute;
	z-index: 2;
	top:10px;
	left:10px;
}

/* WOO LOTTERY
-------------------------------------------------- */
.shop-timer-wrapper{
	width:100%;
	margin:0.5em 0;
}
.shop-timer-container{
	margin:auto;
	justify-content: center;
	clear:unset;
	display: flex;
	width:unset;
	max-width:240px;
}
.shop-timer-section{
	display:block;
	position: relative;
	width:22.5%;
	float:left;
	font-size:75%;
	text-align:center;
}
.shop-timer-display{
	background:linear-gradient(180deg, rgba(227,6,19,1) 0%, rgba(203,7,103,1) 100%);
	font-size:2.25em;
	display:inline-block;
	width:40px;
	height:40px;
	border-radius: 5px;
	font-weight: bold;
	color:#FFF;
}
.shop-timer-section:nth-child(n+2):before {
	display: block;
	position: absolute;
	content:':';
	font-size:2em;
	left:-2px;
}

/* SINGLE ITEM PAGE
-------------------------------------------------- */
.single-item-wrapper{
	padding: 2em 0;
}
.single-item-wrapper h1{
	font-size:3em;
	text-align: center;
	margin-top:0.5em;
}
.single-item-wrapper h2{
	font-size:2em;
	text-align: center;
	margin-top:0;
	color:rgba(227,6,19,1);
}
.single-item-wrapper h5{
	text-transform: uppercase;
	font-size:1em;
	font-weight: bold;
	text-align: center;
}
.single-item-wrapper .badge{
	font-size:1.25em;
	margin: 0 auto 0.75em;
	display: table;
}
.single-item-wrapper ul{
	padding-left:1rem;
}
.single-item-wrapper .shop-timer-wrapper{
	margin:2em 0;
}
.single-item-wrapper .shop-timer-container{
	margin:0 auto;
	font-size:1.5em;
	max-width:300px;
}
.single-item-wrapper .shop-timer-display{
	width:55px;
	height:55px;
}


/* PAGINATION
-------------------------------------------------- */
.page-navigation{
	margin-bottom:2em;
}

/* FOOTER
-------------------------------------------------- */

footer{
	background:#3c3c3b;
	color:#FFF;
	padding:2em 0;
}
footer .foot-logo{
	width:30%;
}
footer h5{
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.1em;
}
footer p.small-print{
	font-size:0.75em;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
 	.navbar{
  		font-size:1.2em;
	}
	.navbar i.fa-dropdown{
		padding:6px 0 0 3px;
	}
	.sub-nav{
		font-size:1em;
	}
	.dropdown-menu{
		background:#646463;
		padding:0.5em;
		width:275px;
		margin-top:0;
	}
	.dropdown-item{
		font-size:0.75em;
	}
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
	.single-item-wrapper h1, .single-item-wrapper h2, .single-item-wrapper h5{
		text-align: left;
	}
	.single-item-wrapper h1{
		margin-top:0;
	}
	.single-item-wrapper .badge{
		margin: 0 0 0.75em;
	}
	.single-item-wrapper .shop-timer-container{
		margin:0;
	}
}

@media (min-width: 1200px) {
	.navbar-brand img{
		width:75%;
	}
 	.navbar{
  		font-size:1.5em;
	}
	.dropdown-menu{
		width:350px;
	}
}