@import url('var.css');

html, body {
	background-color: var(--c-white);
	font-family: var(--f-body);
	scroll-behavior: smooth !important;
}

.navbar svg {
	max-width: 12rem;
	min-width: 0;
}

.nav-link {
	font-size: 1.79rem;
	color: var(--c-black);
	text-transform: uppercase;
	transition: all .3s;
	background: none;
    border: none;
}

.nav-link:hover, .nav-link.active {
	color: var(--c-yellow);
}

nav.navbar {
	margin-bottom: 9rem;
}

#fge-logo,#body-logo {
	fill: var(--c-green);
}

.carousel.max-width {
	margin-bottom: 6rem;
}

.carousel-item {
/* 	min-height: 38rem; */
	background: var(--c-yellow);
	background-size: 100%;
    background-position: center center;
    position: relative;
}

.carousel-item a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	display: block;
}

.carousel-item img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top;
	opacity: 0;
}

/*
.carousel-item img[alt="Beach Goons"] {
	object-position: 50% -8rem;
}
*/


.carousel-indicators {
	bottom: -8rem;
}

.carousel-indicators li {
	height: 1.3rem;
	width: 1.3rem;
	border: 3px solid var(--c-orange);
	border-radius: 10rem;
}

.carousel-indicators li.active {
	background-color: var(--c-orange);
}

#artists {
	margin-top: 18.5rem;
}

h2 {
	font-size: 5.7rem;
	text-align: center;
	color: var(--c-orange);
	text-transform: uppercase;
}

.artist-wrap,.merch-wrap {
	display: flex;
	justify-content: space-between;
	list-style: none;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.artist-wrap li,.merch-wrap li {
	flex: 0 calc(100%/3);
	max-width: 45rem;
	margin: 0 auto 4rem;
}

.artist-wrap a {
	display: block;
	padding: 3rem;
	border: 3px solid #fff;
}

.merch-wrap a {
	display: block;
	padding: 0rem;
	border: 3px solid #fff;
}

.artist-wrap li:nth-child(odd) a,.merch-wrap li:nth-child(odd) a {
	background: var(--c-yellow);
}

.artist-wrap li:nth-child(even) a,.merch-wrap li:nth-child(even) a {
	background: var(--c-orange);
	border-left: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
}

.merch-wrap li:nth-child(even) a {
	background: none;
}

.artist-wrap img {
	display: block;
	margin: 0 auto;
	max-height: 27rem;
	max-width: 100%;
}

.merch-wrap img {
	display: block;
	margin: 0 auto;
/* 	max-height: 28rem; */
	max-width: 100%;
}

.artist-wrap strong,.merch-wrap strong {
	text-align: center;
	font-size: 2.7rem;
	color: var(--c-black);
	margin-top: 3rem;
	display: block;
}

.merch-wrap strong {
	font-family: var(--f-body);
	font-size: 1.28rem;
	padding: 0 4rem;
	margin-top: 2rem;
}

.merch-wrap strong span {
	margin-top: 1rem;
	font-size: 1.4rem;
	font-weight: bold;
	display: block;
}

#merch,#videos,#instagram {
	margin-top: 15rem;
}

.juicer-about,.referral {
	display: none !important;
}

a.btn {
	font-family: var(--f-bodyg);
	color: var(--c-white);
	font-weight: bold;
	font-size: 2.673rem;
	text-transform: uppercase;
	padding: 0rem 1rem;
	display: block; 
	background-color: var(--c-orange);
	width: 100%;
	max-width: 22rem;
	border-radius: 0;
	margin-top: 8rem;
}

.swiper-container.gallery-top {
	min-height: 57rem;
	margin-top: 2rem;
}

.swiper-slide {
	background-color: var(--c-yellow);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.gallery-top .swiper-slide {
	background-position: center center;
    background-size: cover;
    position: relative;
}

.gallery-top .swiper-slide a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	display: block;
}

.gallery-thumbs {
	min-height: 13rem;
	margin-top: 4rem;
}

.swiper-wrapper {
	
}

.gallery-thumbs .swiper-slide {
	border: 3px solid #fff;
}

.gallery-thumbs .swiper-slide:nth-child(even) {
	border-left: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
}

#contact {
	background-color: var(--c-yellow);
	padding: 2rem 2rem;
	margin-top: 14rem;
}

#submit {
	padding: 7rem 2rem;
	margin-top: 14rem;
}

#submit .yellow-wrap {
	background-color: var(--c-yellow);
}

.yellow-wrap .input-group {
	max-width: 33%;
}

@media(max-width: 768px) {
	.yellow-wrap .input-group {
		max-width: calc(100% - 1.5rem);
	}
}

#submit .btn-outline-secondary {
	width: 100%;
	max-width: 12.5rem;
	font-size: 1.02rem;
	text-transform: uppercase;
}

#submit .form-control {
	padding: 1.5rem;
}

#submit .input-group input, #contact .input-group button {
	border: none;
	color: #383838;
	font-family: var(--f-body);
}

#submit .input-group input {
	background-color: var(--c-white);
	border-radius: 0;
	font-size: 1.27rem;
}

#submit .input-group button {
	background-color: var(--c-orange);
	border-radius: 0;
}

#submit .input-group {
	margin: 1.5rem 0;
}

#contact img[alt="Logo"] {
	max-width: 14rem;
	width: 100%;
	display: block;
	margin: 0 auto;
}

#contact a p, #contact a {
	font-family: var(--f-body);
	font-size: 1rem;
	color: var(--c-black);
	text-decoration: none;
	text-align: center;
	margin-top: 1rem;
}

#contact h3 {
	font-size: 4rem;
	color: var(--c-white);
	text-transform: uppercase;
	text-align: center;
}

#contact .btn-outline-secondary,#submit .btn-outline-secondary {
	width: 100%;
	max-width: 12.5rem;
	font-size: 1.02rem;
	text-transform: uppercase;
}

#contact .form-control,#submit .form-control {
	padding: 1.5rem;
}

#contact .input-group input, #contact .input-group button,#submit .input-group input, #submit .input-group button {
	border: none;
	color: #383838;
	font-family: var(--f-body);
}

#contact .input-group input {
	background-color: var(--c-white);
	border-radius: 0;
	font-size: 1.27rem;
}

#contact .input-group button {
	background-color: var(--c-orange);
	border-radius: 0;
}

#social {
	list-style: none;
	padding: 0px 5rem;
    justify-content: center;
}

#social a {
	color: var(--c-orange);
	font-size: 1.5rem;
    border: 1px solid;
    border-radius: 10rem;
    height: 2.5rem;
    width: 2.5rem;
    display: block;
    line-height: 2.5rem;
    text-align: center;
    transition: all .3s;
    margin-right: 1rem;
}

#social a:hover {
	color: var(--c-black);
}

#videos {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#videos > h2, #videos > div {
	flex: 1 100%;
	max-width: 108rem;
	    margin-left: auto;
    margin-right: auto;
}

#videos > h2 {
	height: 6rem;
    width: 100%;
    max-width: 100%;
}

#main-img {
	background-color: var(--c-yellow);
	padding: 6.5rem;
}

#main-img img {
	width: 100%;
}

#artist {
	margin-top: -7rem;
}

#artist img {
	width: 100%;
}

#artist iframe {
	max-width: 30rem;
}

#artist-info {
	display: flex;
    text-align: left;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0rem 3rem;
    align-items: center;
    align-content: center;
}

#artist-info h2 {
	font-size: 2.488rem;
	color: var(--c-black);
	font-family: var(--f-body);
	text-transform: uppercase;
	text-align: left;
}

#artist-info h2 span {
	font-size: 4.147rem;
	color: var(--c-yellow);
	font-family: var(--f-body);
	text-transform: none;
	display: block;
}

#artist-social {
	list-style: none;
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 0;
}

#artist-social a {
	border: 1px solid var(--c-black);
	color: var(--c-black);
    border-radius: 10rem;
    font-size: 1.8rem;
    height: 3rem;
    width: 3rem;
    display: block;
    line-height: 3rem;
    text-align: center;
    margin-right: 1rem;
}


@media (max-width: 991px) {
	
	h2 {
		font-size: 4.7rem;
	}
	
	#artist-info h2 {
		width: 100%;
		text-align: center;
	}
	
	#artist-social {
		justify-content: center;
	}
	
	#main-img {
		padding: 0;
	}
	
	#artist {
		margin-top: 0rem;
	}
	
	#body-logo {
		max-width: 7rem;
	    transform: translateY(-1.8rem);
	    position: absolute;
	    top: 4rem;
	    left: 0;
	    right: 0;
	    transition: all 1s;
	}
	
	#body-logo.moveRight {
		left: calc(100% - 13rem);
	}
	
	#artist-info {
		margin: 2rem auto;
	}
	
	#artist iframe {
		max-width: 100%;
	}
	
	.navbar-toggler {
		font-size: 2.25rem;
		color: var(--c-orange);
	}
	
	.navbar-toggler svg {
		fill: var(--c-orange);
	}
	
	nav.navbar {
		margin-bottom: 7rem;
	}
	
	#social a {
		font-size: 2rem;
		height: 3rem;
		width: 3rem;
		line-height: 3rem;
	}
	
	#contact {
		margin-top: 5rem;
	}
	
	#contact h3 {
		font-size: 3rem;
		margin-top: 3rem;
	}
	
/*
	.carousel-item {
		min-height: 30vh;
	}
*/
	
	.carousel.max-width {
		margin-bottom: 0;
	}
	
	.carousel-indicators {
		bottom: -5rem;
	}
}

@media (max-width: 767px) {
	.swiper-container.gallery-top {
		min-height: 30rem;
		margin-top: 2rem;
	}
	
	.artist-wrap, .merch-wrap {
		margin-top: 2rem;
	}
	
	.swiper-container.gallery-thumbs {
		min-height: 7rem;
		margin-top: 1rem;
	}
	
	#merch, #videos, #instagram {
		margin-top: 6rem;
	}
	
	#artists {
		margin-top: 12rem;
	}
	
/*
	.carousel-item {
		min-height: 30vh;
	}
*/
}

@media (min-width: 1024px) {
	.navbar-nav {
		gap: 2rem;
	}
}