/*
Theme Name:		Gummi Popz 2026
Theme URI:		
Author:			Ellsworth Media
Author URI:		http://www.ellsworthmedia.com
Version:		1.0
*/

	
:root{
	--PrimaryPink: rgba(255, 68, 125, 1);
	--PrimaryViolet: rgba(100, 110, 255, 1);
	--SecondaryPink: rgba(235, 148, 255, 1);
	--SecondaryBlue: rgba(3, 77, 161, 1);
	--SecondaryLightBlue: rgba(0, 212, 255, 1);
	--SecondaryYellow: rgba(250, 237, 0, 1);
	--Black: #000;
	--White: #fff;
}

@font-face {
	font-family: 'Pumped Up Kicks';
	src:
		url('fonts/pumpedupkicks-regular-webfont.woff2') format('woff2'),
		url('fonts/pumpedupkicks-regular-webfont.woff') format('woff'),
		url('fonts/pumpedupkicks-regular-webfont.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing: antialiased; }
html, body {padding: 0; margin: 0;}
body { 
	font-size:24px; color: var(--Black); background: var(--White); overflow-x:hidden; letter-spacing:0; font-weight:400; 
	font-family: "acumin-pro-condensed", sans-serif;
}
input, textarea { border-radius:0; }
input, textarea, select, label { font-family: "acumin-pro-condensed", sans-serif; outline:0; }
input:focus, input:hover { outline:0; }
::-webkit-input-placeholder { color:#D8D8D8; opacity:1; }
:-moz-placeholder { color:#D8D8D8; opacity:1; }
::-moz-placeholder { color:#D8D8D8; opacity:1; }
:-ms-input-placeholder { color:#D8D8D8; opacity:1; }

h1, h2, h3, h4, h5, h6 { padding:0; margin:0;  letter-spacing:0; outline:0; font-family: 'Pumped Up Kicks', sans-serif; }
h1 {font-size: 109px; font-weight: 500; color: var(--White); text-transform: lowercase;}
h2 {font-size: 58px; font-weight: 400; line-height:1; margin: 0; color: var(--SecondaryBlue); text-transform: lowercase;}
h3 {font-size: 50px; font-weight: 400; line-height:1.2; margin: 0; text-transform: lowercase;}
h1.eyebrow {font-size: 43px; font-weight: 400; color: var(--PrimaryPink);}

img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active, input[type=submit] { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { text-decoration:none; outline:0; }
:focus, :hover { text-decoration:none; outline:0; }
svg path { transition:all .3s ease-out; }
p { margin:0 0 25px 0; line-height:1.2; }

.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.no-animate { transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; }

strong { font-weight:600; }

.btn {
	display: inline-block;      
	padding: 0 20px; margin: 0 10px 0 0;           
	cursor: pointer;
	background: var(--SecondaryYellow); border: solid 1px var(--SecondaryYellow); border-radius: 65px; white-space: nowrap; 
	font-size: 24px; font-weight: 600; color: var(--SecondaryBlue); line-height: 51px; 
	font-family: 'Pumped Up Kicks', sans-serif;
	min-width: 192px; text-align: center; text-transform: lowercase; letter-spacing: 0.5px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
	.btn-inactive {background: var(--White); border-color: var(--White); cursor: default;}
	.btn:hover {background: var(--White); border-color: var(--White);}

.gradient {
	position: absolute; z-index: 5; width: 100%; height: 242px;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.social-media {display: flex; flex-wrap: wrap; align-items: center;}
	.social-media li {margin-right: 12px;}
	.social-media li a:hover {opacity: 0.5;}
		.social-media li img {width: 24px; height: auto;}


/*-----------------------------------------------------------------------------------*/
/* Structure
/*-----------------------------------------------------------------------------------*/

.container { margin:0 auto; width: 100%; padding-left: 60px; padding-right: 60px; max-width: 1480px; }
.container-flex { display: flex; flex-wrap: wrap; margin:0 auto; width: 100%; padding-left: 60px; padding-right: 60px; max-width: 1480px; }
.column-left {width: calc(50% - 35px); margin-right: 35px;}
.column-right {width: calc(50% - 35px); margin-left: 35px;}


/* responsive video */
.video-holder {
	position: relative; height: 0; max-height: 100vh;
	padding-bottom: 56.25%; /* 16:9 */
	
}
@media only screen and (min-width: 1600px) { .video-holder {padding-bottom: 52%;} }
@media only screen and (min-width: 1900px) { .video-holder {padding-bottom: 49%;} }

	.video-holder iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; overflow: hidden;}

.video-holder-sq {
  width: 100%;
  aspect-ratio: 1 / 1; /* Square */
  max-height: 600px;
  position: relative;
}
	.video-holder-sq iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; overflow: hidden;}


/*-----------------------------------------------------------------------------------*/
/* Header styling
/*-----------------------------------------------------------------------------------*/

#header { padding: 0; margin: 0; width:100%; background: rgba(100, 110, 255, 1); z-index: 1; position: relative;}

	#header .container { position: relative; height: 100px; }

	#header .logo { width: 253px; height: 164px; position: absolute; left: 60px; top: 10px; }
	
	#header nav { width: 100%; display:flex; align-items:center; justify-content: center; }
		#header nav ul { margin:0 auto; height: 100px; display:flex; align-items:center; justify-content: center; }
			#header nav ul li {margin:0 20px;}
				#header nav a {color:var(--White); font-family: 'Pumped Up Kicks', sans-serif; font-size: 32px;}
					#header nav a:hover {color: var(--White); border-bottom: solid 1px var(--White);}
	
	#header .btn-holder { height: 100px; position: absolute; right: 60px; top: 0; display:flex; align-items:center; justify-content: flex-end; }
		#header .btn { min-width: 158px; height: 51px;}

	#header .social-media li img {filter: brightness(0) invert(1);}


/* menu */
#menu { display: none; position: fixed; top: 0; left: 0; z-index:1000; width:100%; height:100vh; background: rgba(100, 110, 255, 1); }
	/* close button */
	#menu #menu-top {display: flex; justify-content: space-between; align-items:flex-start; padding-top: 10px; z-index: 1001; position: relative;}	
		#menu #menu-close {
			color: var(--White); font-size: 32px; font-weight: 700; letter-spacing: 1px; margin-top: 24px;
			transition:all 0.3s ease 0s; font-family: 'Pumped Up Kicks', sans-serif;
		}
			#menu #menu-close:hover {color: var(--White);}
			#menu #menu-close svg {transition:all 0.3s ease 0s;}
				#menu #menu-close:hover svg path {fill: var(--SecondaryYellow);}
	/* nav */
	#menu #menu-middle {height: 100vh; position: absolute; top: 0; z-index: 1000; left: 50%; transform: translateX(-50%);}	
		#menu #menu-middle ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 20px;}	
			#menu #menu-middle ul li {text-align: center; margin: 20px auto;}
				#menu #menu-middle ul li a {
					text-transform: lowercase; color: var(--White); font-family: 'Pumped Up Kicks', sans-serif; font-size: 54px; font-weight: 700; line-height: 1;
				}	
				#menu #menu-middle ul li a:hover {color: var(--SecondaryYellow);}
	
#menu #menu-middle ul li.btn {background: none; border: none; width: auto; max-width: 200px; margin: 0 auto; padding: 0; text-align: center; justify-content: center; display: flex;}
	#menu #menu-middle ul li.btn a {
		display: block;      
		padding: 0 20px; margin: 0 auto;           
		cursor: pointer;
		background: var(--SecondaryYellow); border: solid 1px var(--SecondaryYellow); border-radius: 65px; white-space: nowrap; 
		font-size: 24px; font-weight: 600; color: var(--SecondaryBlue); line-height: 51px; 
		width: 100%; text-align: center;
	}
	#menu #menu-middle ul li.btn:hover a {background: var(--White); border-color: var(--White);}

body.menu-open {overflow: hidden; height: 100vh; position: fixed; width: 100%;}
	

/*-----------------------------------------------------------------------------------*/
/* Footer styling
/*-----------------------------------------------------------------------------------*/

#footer {background: var(--White); color: var(--Black);}		

	#footer-top {justify-content: space-between; position: relative; padding-bottom: 50px;}
		
		#footer .logo {width: 264px; height: 172px; position: absolute; left: 60px; top: -40px;}
			
		#footer #nav-holder {
			margin-left: 319px; 
			padding: 25px 0; width: calc(100% - 319px); display: flex; justify-content: space-between; column-gap: 55px;
		}
			.footer-nav-item { min-width: 250px;}
				.footer-nav-item h3 {color: var(--PrimaryPink); font-size: 30px;}	
				.footer-nav-item a {color: var(--Black); font-size: 22px; font-weight: 700;}	
				.footer-nav-item a:hover {color: var(--PrimaryPink); text-decoration: underline; font-size: 22px; font-weight: 700;}	
				
	#footer-bottom {padding-bottom: 25px; align-items: flex-start;}
		#footer-bottom p {width: 50%; padding: 0; margin: 0; font-size: 14px; line-height: 1;}
		#footer-bottom nav {width: 50%; display: flex; justify-content: flex-end;}
			#footer-bottom nav ul {display: flex; justify-content: flex-end;}
				#footer-bottom nav ul li {line-height: 1; margin-left: 10px; font-size: 14px;}
					#footer-bottom nav ul li a {color: var(--Black); font-size: 14px;}
					#footer-bottom nav ul li a:hover {color: var(--PrimaryPink); text-decoration: underline;}

   
/*-----------------------------------------------------------------------------------*/
/* Shared Page styling
/*-----------------------------------------------------------------------------------*/

#page-hero {background: #00d4fe;}
	#page-hero .container-flex {min-height: 540px; align-items: center;}
		#page-hero .column-left {}
			#page-hero .column-left h1 {font-size: 82.54px; margin-bottom: 15px; color: rgba(255, 68, 125, 1);}
			#page-hero .column-left p {font-weight: 700; font-size: 24px;}
		#page-hero .column-right {}

#photo-hero {height: 500px; width: 100%; background-size: cover; background-position: center top; background-attachment: fixed;}

.main {padding: 70px 0;}
	.main .container {}
	.main h2 {}

.sticker-holder {margin: 25px auto;}
	.sticker-holder img {margin: auto;}

.main ol, .main ul {padding: 0 0 20px 0; margin: 0 0 0 25px;}
 	.main ol li, .main ul li {margin: 0 0 0 15px; padding: 0 0 0 10px;}
    .main ol li {list-style: decimal;}
    .main ul li {list-style: disc;}

.main a {color: var(--PrimaryPink);}
	.main a:hover {text-decoration: underline;}
	

/*-----------------------------------------------------------------------------------*/
/* Default
/*-----------------------------------------------------------------------------------*/

.page-template-default .main {margin: 0 auto; max-width: 1040px;}
	.page-template-default .main h1 {margin: 0 auto 20px auto; color: var(--PrimaryPink); text-align: center; font-size: 82px;}
	.page-template-default .main p {margin: 0 0 10px 0;}
	

/*-----------------------------------------------------------------------------------*/
/* Brands
/*-----------------------------------------------------------------------------------*/

body.home {background: var(--PrimaryPink);}

#page-hero .slider {position: relative; width: 100%; z-index: 1;}
	#page-hero .slider ul.slides { width: 100%; height: 550px;}
		#page-hero .slider ul.slides li {display:none; background-size: cover; position: relative;}

			#page-hero .slider ul.slides li .container-flex {align-items: center; height: 550px;}

				#page-hero .slider ul.slides li .container-flex .column-left {width: calc(36% - 10px); margin-right: 10px;}

					#page-hero .slider ul.slides li .slider-large h1,
					#page-hero .slider ul.slides li .slider-large h2 {font-size: 136px; line-height: 0.8; color: var(--PrimaryPink); margin: 10px 0 0 0;}
					#page-hero .slider ul.slides li .slider-large p {font-size: 42px; font-weight: 700; /*text-transform: uppercase;*/ margin: 0;}
	
					#page-hero .slider ul.slides li .slider-medium h1,
					#page-hero .slider ul.slides li .slider-medium h2 {font-size: 83px; line-height: 0.8; margin: 10px 0 0 0;}
					#page-hero .slider ul.slides li .slider-medium p {font-size: 36px; font-weight: 700; /*text-transform: uppercase;*/ margin: 0;}
					
					#page-hero .slider ul.slides li .slider-small h1,
					#page-hero .slider ul.slides li .slider-small h2 {font-size: 64px; line-height: 0.8; margin: 10px 0 0 0;}
					#page-hero .slider ul.slides li .slider-small p {font-size: 28px; font-weight: 700; /*text-transform: uppercase;*/ margin: 0;}

					#page-hero .slider ul.slides li .btn {margin-top: 15px;}

				#page-hero .slider ul.slides li .container-flex .column-right {width: calc(64% - 10px); margin-left: 10px;}

					#page-hero .slider ul.slides li .container-flex .column-right .image-holder {
						max-height: 550px; overflow: hidden; display: flex; justify-content: center; align-items: center;
					}

	/* nav */
	#page-hero .slider .flex-control-nav {
		position: absolute; z-index: 3000; bottom: 50px; left: 50%; transform:translateX(-50%);
		margin:0 auto; width: 100%; padding-left: 60px; padding-right: 60px; max-width: 1480px;
		display: flex; justify-content: flex-start;
	}
		#page-hero .slider .flex-control-nav li { display:inline-block; margin:0 7px 0 0; }
			#page-hero .slider .flex-control-nav li a { 
				background:var(--White); width:15px; height:15px; border-radius:50%; text-indent:-9999px; display:block; 
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
			}
		#page-hero .slider .flex-control-nav li .flex-active {background: var(--SecondaryYellow);}
	#page-hero .slider .flex-direction-nav { display:none; }


/* brands */
#brands {background: var(--PrimaryViolet); padding: 40px 0 80px 0;}
	.brands-grid {display: flex; flex-wrap: wrap; justify-content: center; width: calc(100% + 20px); margin: 0 -10px;}
		.brands-grid li {width: calc(25% - 20px); margin: 0 10px; text-align: center; background: #fff; border-radius: 54px; position: relative;}
		.brands-grid li.brand-available {}
		.brands-grid li.brand-coming-soon {padding: 20px;}
			.brands-grid li a {padding: 20px; display: block;}
				.brands-grid li .image-holder {height: 260px; display: flex; align-items: center; justify-content: center; padding: 0 10px;}
					.brands-grid li .image-holder img {object-fit: contain; height: 100%; width: 100%;}
				.brands-grid li .pixelated-image {padding: 20px 10px;}
					.brands-grid li .pixelated-image img {
						filter: blur(5px); /* Add a slight blur */
						image-rendering: pixelated; /* Ensure it looks like large blocks */
						width: 500px; /* Scale up for visible pixel blocks */
						height: auto;
					}
				.brands-grid li h3 {font-weight: 400; font-size: 42px; color: var(--Black); text-align: center; line-height: 1; padding: 0; }
				.brands-grid li a > p,
				.brands-grid li p {font-weight: 700; font-size: 18px; padding: 0 5px 10px 5px; color: var(--Black);} 
				.brands-grid li .btn {
					position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: block; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
				}

#social {
	padding: 60px 0; background: var(--PrimaryPink) url(images/bring-it-curve.png) center bottom / 100% auto no-repeat;
	min-height: 783px; position: relative; z-index: 2;
}
	#social h2 {margin: 0 0 30px 0;}	
	#social ul.social-grid {width: calc(100% - 20px); margin: 0 -10px; display: flex; flex-wrap: wrap; align-items: flex-start;}	
		#social ul.social-grid > li {
			width: calc(23% - 20px); margin: 0 10px; min-height: 536px; overflow: hidden;
			display: flex; justify-content: center; align-items: center;
		}
		#social ul.social-grid > li:last-of-type {background: none; display: block; width: calc(25% - 10px); margin-left: calc(6% - 10px); padding: 0 0 10px 10px;}
			#social ul.social-grid > li > a > img {border-radius: 54px; width: 100%; height: 100%; object-fit: cover;}
				#social ul.social-grid > li > a > img:hover {opacity: 0.8;}
			#social ul.social-grid > li h3 {font-weight: 400; color: var(--SecondaryBlue); line-height: 1; font-size: 48px;}
			#social ul.social-grid > li p {font-weight: 700; font-size: 24px; padding: 0; margin: 10px 5px 15px 5px;} 

		#social ul.social-grid .social-media {margin-bottom: 20px;}
			#social ul.social-grid .social-media li {height: 54px; width: 54px; overflow: hidden;}
				#social ul.social-grid .social-media li img {height: 100%; width: 100%; object-fit: contain;}
			

#bring-it {margin-top: 0; padding: 0 0 40px 0;}
	#bring-it .container-flex {align-items: center; position: relative; z-index: 3;}
		#bring-it .column-left {width: calc(460px); margin-top: -80px;}
		#bring-it .column-right {width: calc(100% - 460px - 70px);}
			#bring-it .column-right h2 {color: var(--White); font-size: 45px; margin: 60px 0 20px 0;}

#outro {background: var(--SecondaryLightBlue); position: relative; height: auto;}
	#outro img {width: 100%; position: relative; top: -30px; left: 0;}


/*-----------------------------------------------------------------------------------*/
/* Brand Lander
/*-----------------------------------------------------------------------------------*/

.page-template-brand #social {background: #fff; z-index: 0; padding: 0 0 60px 0; }

#product-video {padding: 60px 0 120px 0; background: url(images/brand-video-curve.png) center bottom / 100% auto no-repeat;}
	#product-video .column-left {width: 25%; margin: 0; padding-right: 30px;}
		#product-video .column-left h2 {font-size: 48px;}
		#product-video .column-left p {font-weight: 700; font-size: 24px;}
	#product-video .column-right {width: 75%; margin: 0;}


/*-----------------------------------------------------------------------------------*/
/* Subbrands
/*-----------------------------------------------------------------------------------*/

/* tabs */
#nutritional-facts {padding: 40px; display: flex; flex-wrap: wrap;}
	#nutritional-facts h2 {font-size: 58px; margin: 0 0 30px 0; }

	#nutritional-facts h3 {font-size: 32px; font-weight: bold; font-family: "acumin-pro-condensed", sans-serif; text-transform: none;}
	/*
	.tab-nav {display: flex; padding: 0; margin: 0 0 20px; border-bottom: 1px solid rgba(204, 204, 204, 1); font-weight: 700; font-size: 30px; text-transform: uppercase;}
		.tab-nav li {cursor: pointer; font-size: 30px; margin: 0 0 -1px 0; padding: 5px 15px;}
			.tab-nav li.active {border-bottom: 3px solid rgba(255, 68, 125, 1);}
	.tab-panel {display: none;}
	.tab-panel.active {display: block;}
	*/
	
	.ingredients ul {display: flex; flex-wrap: wrap;}
		.ingredients ul li {margin: 0 30px 0 0; max-width: 640px;}

/* product - whats inside */
#product-content {
	background: var(--SecondaryPink) url(images/bring-it-curve.png) center bottom / 100% auto no-repeat;
	position: relative; z-index: 2;
	padding: 60px; display: flex; flex-wrap: wrap; justify-content: center;
}
	#product-content h2 {text-align: center;}
	#product-content img {display: block; margin: 20px auto 50px auto;}

/* displays */
#displays {background: var(--SecondaryPink); padding: 30px 0 50px 0;}
	.displays-grid {display: flex; flex-wrap: wrap; justify-content: center; width: calc(100% - 30px); margin: 0 -15px;}
		.displays-grid li {width: calc(20% - 30px); margin: 0 15px;}
			.displays-grid li .image-holder {height: 180px; overflow: hidden; margin: 20px auto;}
				.displays-grid li .image-holder img {object-fit: contain; height: 100%; width: 100%;}
			.displays-grid li h3 {font-weight: 400; font-size: 36px; text-align: center; line-height: 1; color: var(--SecondaryBlue);}


/*-----------------------------------------------------------------------------------*/
/* About styling
/*-----------------------------------------------------------------------------------*/

.page-id-16 #photo-hero {
	height: 550px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: inherit;
}

#about-main .column-left {width: calc(45% - 35px);}
#about-main .column-right {width: calc(55% - 35px);}


/*-----------------------------------------------------------------------------------*/
/* FAQ
/*-----------------------------------------------------------------------------------*/

#faq-main {background: rgba(159, 210, 241, 1); padding: 70px 0;}
	#faq-main .container {justify-content: center; flex-wrap: wrap;}
		#faq-main h1 {color: var(--PrimaryPink); margin: 0 auto; width: 100%; text-align: center; font-size: 82px;}
		
		ul#faqs { background: #fff; border-radius: 54px; margin: 40px auto; padding: 20px 45px; width: 100%; max-width: 1130px;}
			li.faq-holder {display: flex; justify-content: flex-start; flex-wrap: wrap; border-bottom: 1px solid rgba(202, 202, 202, 1)}
			li.faq-holder:last-child {border-bottom: none;}
				li.faq-holder h3 {
					position: relative; text-transform: none;
					cursor: pointer;
					width: 100%; line-height: 30px; padding: 10px 50px 10px 0; margin: 15px 0;
					font-family: "acumin-pro-condensed", sans-serif; font-size: 24px; font-weight: 700;
				}
					li.faq-holder h3:hover {text-decoration: underline;}
				
				li.faq-holder h3 img {position: absolute; right: 0; top: 10px;}
				li.faq-holder h3.is-open img {transform: rotate(180deg);}
				li.faq-holder .faq-content {padding: 0 30px 20px 0; display: none;}
					li.faq-holder .faq-content a {color: var(--PrimaryPink);}
					li.faq-holder .faq-content a:hover {text-decoration: underline;}


/*-----------------------------------------------------------------------------------*/
/* Contact
/*-----------------------------------------------------------------------------------*/

.page-template-contact .main {background: var(--SecondaryPink);}
	.page-template-contact .main .container {position: relative; align-items: center; min-height: 610px;}
		.page-template-contact .main .column-left {width: calc(47% - 35px); z-index: 1; position: relative;}
			.page-template-contact .main .column-left h1 {font-size: 82px; margin-bottom: 20px;}
			.page-template-contact .main .column-left h2 {margin-bottom: 20px; font-size: 47px; max-width: 480px;}
			.page-template-contact .main .column-left p {font-weight: 700; max-width: 600px;}
			.page-template-contact .main .column-left a {text-decoration: underline; color: var(--Black);}
				.page-template-contact .main .column-left a:hover {text-decoration: underline; color: var(--SecondaryBlue);}
	
/* sticker */
.page-template-contact .sticker-holder {z-index: 0; position: absolute; margin: 0; right: 0; top: 60px; width: 100%;}
	.page-template-contact .sticker-holder img {/*width: 100%; height: 100%; object-fit: contain; display: block;*/float: right; max-width: 1000px;}


/*-----------------------------------------------------------------------------------*/
/* Promo
/*-----------------------------------------------------------------------------------*/

.page-template-promotion #page-hero {background: #fff;}
	.page-template-promotion #page-hero img {margin: auto;}

/* vote */
body .basic-question-title {font-family: 'Pumped Up Kicks', sans-serif;}
body .basic-vote-button {
	font-weight: 600; color: var(--SecondaryBlue); line-height: 51px; 
	font-family: 'Pumped Up Kicks', sans-serif;
	min-width: 192px; text-align: center; text-transform: lowercase; letter-spacing: 0.5px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
	body .basic-vote-button:hover {color: #fff !important; background: var(--SecondaryBlue) !important;}
body .basic-answer {border: 1px solid #ccc; border-radius: 12px; padding: 20px;}
	body .bootstrap-yop .basic-answer.col-md-6 {width: calc(50% - 20px); margin: 25px 10px;}
	body .basic-answer-content {padding: 15px 30px;}
		body .basic-answer-content label {margin: auto;}
body .basic-success {display: none !important;}
body .progress {margin: 0 30px;}
	body .progress .progress-bar {background-color: var(--PrimaryPink) !important;}



/* Remove default radio styling */
body .basic-answer input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	width: 18px;
	height: 18px;
	border: 1px solid rgba(255, 68, 125, 1);
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	outline: none;
	margin: 8px 8px 0 0;
	transition: opacity 0.25s ease-in-out;
}

/* Checked state = solid black */
body .basic-answer input[type="radio"]:checked {
	background-color: var(--PrimaryPink);
	border-color: var(--PrimaryPink);
}

/* Optional: focus state */
body .basic-answer input[type="radio"]:focus {border: 1px solid rgba(255, 68, 125, 0.2); }

body .basic-answer input[type="radio"]:hover {border: 1px solid rgba(255, 68, 125, 0.5); background-color: rgba(255, 68, 125, 0.5);}

body .basic-answer label span {transition: opacity 0.25s ease-in-out;}
body .basic-answer label:hover span {}

/* Checked state = pink fill + black ring */
body .basic-answer input[type="radio"]:checked {
	background-color: var(--PrimaryPink);
	border-color: var(--PrimaryPink);
}

/* Remove browser focus dotted outline */
body .basic-answer input[type="radio"]:focus,
body .basic-answer input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.basic-yop-poll-container .basic-answers-results .progress {margin-bottom: 30px !important;}