/*
 * # BROWNIE FUDGE SUNDAE V2
 * ===========================


/* ## Basic Breakpoints
 * ====================

@media( min-width: 640px )  {}
@media( min-width: 1040px ) {}
@media( min-width: 1480px ) {}

/* ## Extra Breakpoints
 * ====================

@media( min-width: 400px )  {}
@media( min-width: 640px )  {}
@media( min-width: 800px )  {}
@media( min-width: 1040px ) {}
@media( min-width: 1200px ) {}
@media( min-width: 1480px ) {}
@media( min-width: 1600px ) {}
@media( min-width: 1940px ) {}





/*
 * Global Variable
 */

:root {
	--light: #FFFFFF;
	--neutral-1: #F2F3EB;
	--neutral-2: #E3E2D8;
	--neutral-3: #CCCCCC;
	--neutral-4: #7C7577;
	--dark: #231F20;
	--black: #000000;
	--teal: #18BA89;
	--orange: #FF9439;
	--pink: #FE4365;

	--container-width: 300px;
	--space-min : 10px;
	--space-100 : calc(var(--container-width)/6);
	--space-50 : calc(var(--space-100)/2);
	--space-25 : calc(var(--space-50)/2);
	--space-75 : calc(var(--space-50)*1.5);
	--space-150 : calc(var(--space-100)*1.5);
	--space-200 : calc(var(--space-100)*2);
}

@media( min-width: 640px )  {
	:root {
		--container-width: 600px;
		--space-100 : calc(var(--container-width)/12);
	}
}

@media( min-width: 1040px ) {
	:root {
		--container-width: 1000px;
	}
}

@media( min-width: 1480px ) {
	:root {
		--space-min : 15px;
		--container-width: 1440px;
	}
}





body, .body {
	position: relative;
	color: var(--dark);
	font-family: 'futura-pt', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.375;
	background-color: var(--light);
}



h1, h2, h3, h4, h5, h6,
p, small, label {
	margin: 0;
	display: inline;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}



/*
 *
 *	Typography
 *
 */

.h1, .h2, .h3, .h4 {
	font-family: 'futura-pt', 'Arial Black', Arial, sans-serif;
	line-height: 1.125;
	font-weight: 500;
}

.h1 { font-size: 3.6rem; }
.h2 { font-size: 3.0rem; }
.h3 { font-size: 2.4rem; }
.h4 { font-size: 2.0rem; }
.h5 { font-size: 1.6rem; }
.h6 { font-size: 1.4rem; }
.p 	{ font-size: 1.4rem; }
.small { font-size: 0.8rem; }
.label { font-size: 1.0rem; }

@media( min-width: 640px )  {
	.h1 { font-size: 4.0em; }
	.h2 { font-size: 3.2rem; }
	.h3 { font-size: 2.6rem; }
	.h4 { font-size: 2.2rem; }
	.h5 { font-size: 1.8rem; }
	.h6 { font-size: 1.4rem; }
	.p 	{ font-size: 1.4rem; }
	.small { font-size: 0.8rem; }
	.label { font-size: 1.0rem; }
}

@media( min-width: 1040px ) {
	.h1 { font-size: 5.4rem; }
	.h2 { font-size: 4.2rem; }
	.h3 { font-size: 3.4rem; }
	.h4 { font-size: 2.6rem; }
	.h5 { font-size: 2.0rem; }
	.h6 { font-size: 1.6rem; }
	.p 	{ font-size: 1.6rem; }
	.small { font-size: 1.0rem; }
	.label { font-size: 1.2rem; }
}

@media( min-width: 1480px ) {
	.h1 { font-size: 6.2rem; }
	.h2 { font-size: 4.8rem;  }
	.h3 { font-size: 3.8rem;  }
	.h4 { font-size: 3.0rem;  }
	.h5 { font-size: 2.4rem;  }
	.h6 { font-size: 1.8rem;  }
	.p 	{ font-size: 1.8rem;  }
	.small { font-size: 1.2rem; }
	.label { font-size: 1.4rem; }
}


a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
a * { pointer-events: none; }

strong, .strong { font-weight: 700; }
em, .em { font-style: italic; }

.cursive { font-family: 'marydale', Arial, cursive; font-weight: 700; }

hr {
	border-color: var(--dark);
}

/* -- Weights -- */
.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-700 { font-weight: 700; }

/* -- Line Height -- */
.line-height-small { line-height: 1.125 }
.line-height-medium { line-height: 1.375 }
.line-height-large { line-height: 1.625 }


/*
 *
 *	Buttons
 *
 */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	height: var(--space-75);
	padding: 0 var(--space-25);
	font-size: 1.4rem;
	line-height: var(--space-75);
	color: var(--light);
	background-color: var(--dark);
	box-shadow: none;
	border: none;
	border-radius: 4px;
	filter: brightness(1);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	/*background-color: rgb(255,255,255);*/
	background-image: linear-gradient(90deg, rgba(0,0,0,.075) 0%, rgba(0,0,0,.075) 49.9%, rgba(0,0,0,0) 49.9%, rgba(0,0,0,0) 100%);
	background-size: 200% 100%;
	background-position: 100% 50%;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background-position: 0% 50%; 
}

input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
button:focus,
.button:focus {
	outline: 0;
	/*box-shadow: inset 0px 2px 5px rgba(20,20,10,0.5);*/
}

.button .material-icons {
	display: inline-block;
	line-height: var(--space-75);
	vertical-align: bottom;
}

.button.button-icon {
	padding-right: calc( var(--space-25) + var(--space-75) );
	position: relative;
	z-index: 1;
}

.button.button-icon:after {
	content: '';
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
	bottom: 0;
	width: var(--space-75);
	background-color: var(--bg-c);
	background-image: var(--bg-i);
	background-repeat: no-repeat;
	background-position: center center;
}

.button img {
	pointer-events: none;
	width: 16px;
	display: inline-block;
	margin-bottom: -4px;
	margin-left: 3px;
}

@media( min-width: 640px )  {
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		height: var(--space-75);
		font-size: 1.4rem;
		line-height: var(--space-75);
	}
}
@media( min-width: 1040px ) {
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		height: var(--space-50);
		font-size: 1.6rem;
		line-height: var(--space-50);
	}

	.button .material-icons {
		line-height: var(--space-50);
	}

	.button.button-icon {
		padding-right: calc( var(--space-25) + var(--space-50) );
	}
	.button.button-icon:after {
		width: var(--space-50);
	}

}
@media( min-width: 1480px ) {
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		height: var(--space-50);
		font-size: 1.8rem;
		line-height: var(--space-50);
	}
}





/*
 *
 *	Forms
 *
 */

.input-field,
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	height: var(--space-75);
	padding: 0 var(--space-min);
	font-size: 1.4rem;
	color: var(--dark);
	/*background-color: var(--light);*/
	background-color: transparent;
	border: 0;
	border-bottom: solid 2px var(--neutral-3);
	border-radius: 0;
	/*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);*/
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}


.input-dark.input-dark {
	color: var(--light);
	border-color: var(--neutral-5);
}

textarea {
	min-height: var(--space-double);
}

.input-field:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	outline: 0;
	/*border-color: var(--neutral-2);*/
	border: 0;
	border-bottom: solid 2px;
	border-color: var(--pink);
}

select {
	cursor: pointer;
	background-repeat: no-repeat;
    background-position: 98% 50%;
    background-size: 10px 10px;
    background-image: url(../media/icon-select-arrow.svg);
}

@media( min-width: 640px )  {
	.input-field,
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="date"],
	textarea,
	select {
		height: var(--space-75);
	}
}
@media( min-width: 1040px ) {
	.input-field,
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="date"],
	textarea,
	select {
		height: var(--space-50);
		border-width: 2px;
		font-size: 1.5rem;

	}
	
	.input-field:focus,
	input[type="email"]:focus,
	input[type="number"]:focus,
	input[type="search"]:focus,
	input[type="text"]:focus,
	input[type="tel"]:focus,
	input[type="url"]:focus,
	input[type="password"]:focus,
	input[type="date"]:focus,
	textarea:focus,
	select:focus {
		border-width: 2px;
	}
}
@media( min-width: 1480px ) {
	.input-field,
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="date"],
	textarea,
	select {
		height: var(--space-50);
		font-size: 1.8rem;
	}
}

/*
 *	Form Row
 */

.form-row {}

.form-row .label { 
	display: inline-block;
	letter-spacing: 0.05rem;
	color: var(--neutral-3); 
}
.form-row:focus-within .label { 
	color: var(--pink); 
}

.form-row .label.required {
	width: 100%;
	background-repeat: no-repeat;
	background-position: 98% 50%;
	background-size: 7px 7px;
	background-image: url(../media/icon/icon-required.svg);
}

@media( min-width: 640px )  {
	.form-row:nth-child(2n+1) {
		padding-right: var(--space-min);
	}
	.form-row:nth-child(2n) {
		padding-left: var(--space-min);
	}
	.form-row .label.required {
		background-size: 8px 8px;
	}
}
@media( min-width: 1040px ) {
	.form-row .label.required {
		background-size: 9px 9px;
	}
}
@media( min-width: 1480px ) {
	.form-row .label.required {
		background-size: 11px 11px;
	}
}


/*
 *
 *	Fills
 *
 */

.fill-light {
	color: var(--dark);
	background-color: var(--light); }
.fill-neutral-1 {
	color: var(--dark);
	background-color: var(--neutral-1); }
.fill-neutral-2 {
	color: var(--dark);
	background-color: var(--neutral-2); }
.fill-neutral-3 {
	color: var(--light);
	background-color: var(--neutral-3); }
.fill-neutral-4 {
	color: var(--light);
	background-color: var(--neutral-4); }
.fill-dark {
	color: var(--light);
	background-color: var(--dark); }
.fill-black {
	color: var(--light);
	background-color: var(--black); }
.fill-teal {
	color: var(--light);
	background-color: var(--teal); }
.fill-orange {
	color: var(--light);
	background-color: var(--orange); }
.fill-pink {
	color: var(--light);
	background-color: var(--pink); }





/*
 *
 *	Text Color
 *
 */

.text-light { color: var(--light); }
.text-neutral-1 { color: var(--neutral-1); }
.text-neutral-2 { color: var(--neutral-2); }
.text-neutral-3 { color: var(--neutral-3); }
.text-neutral-4 { color: var(--neutral-4); }
.text-dark { color: var(--dark); }
.text-black { color: var(--black); }
.text-teal { color: var(--teal); }
.text-orange { color: var(--orange); }
.text-pink { color: var(--pink); }





/*
 *
 *	Vertical Spacing
 *
 */

.space-min { padding: var(--space-min); }
.space-min-top { padding-top: var(--space-min); }
.space-min-bottom { padding-bottom: var(--space-min); }
.space-min-left { padding-left: var(--space-min); }
.space-min-right { padding-right: var(--space-min); }
.space-min-top-bottom { padding-top: var(--space-min); padding-bottom: var(--space-min); }
.space-min-left-right { padding-left: var(--space-min); padding-right: var(--space-min); }

.space-100 { padding: var(--space-100); }
.space-100-top { padding-top: var(--space-100); }
.space-100-bottom { padding-bottom: var(--space-100); }
.space-100-left { padding-left: var(--space-100); }
.space-100-right { padding-right: var(--space-100); }
.space-100-top-bottom { padding-top: var(--space-100); padding-bottom: var(--space-100); }
.space-100-left-right { padding-left: var(--space-100); padding-right: var(--space-100); }

.space-50 { padding: var(--space-50); }
.space-50-top { padding-top: var(--space-50); }
.space-50-bottom { padding-bottom: var(--space-50); }
.space-50-left { padding-left: var(--space-50); }
.space-50-right { padding-right: var(--space-50); }
.space-50-top-bottom { padding-top: var(--space-50); padding-bottom: var(--space-50); }
.space-50-left-right { padding-left: var(--space-50); padding-right: var(--space-50); }

.space-25 { padding: var(--space-25); }
.space-25-top { padding-top: var(--space-25); }
.space-25-bottom { padding-bottom: var(--space-25); }
.space-25-left { padding-left: var(--space-25); }
.space-25-right { padding-right: var(--space-25); }
.space-25-top-bottom { padding-top: var(--space-25); padding-bottom: var(--space-25); }
.space-25-left-right { padding-left: var(--space-25); padding-right: var(--space-25); }

.space-75 { padding: var(--space-75); }
.space-75-top { padding-top: var(--space-75); }
.space-75-bottom { padding-bottom: var(--space-75); }
.space-75-left { padding-left: var(--space-75); }
.space-75-right { padding-right: var(--space-75); }
.space-75-top-bottom { padding-top: var(--space-75); padding-bottom: var(--space-75); }
.space-75-left-right { padding-left: var(--space-75); padding-right: var(--space-75); }

.space-150 { padding: var(--space-150); }
.space-150-top { padding-top: var(--space-150); }
.space-150-bottom { padding-bottom: var(--space-150); }
.space-150-left { padding-left: var(--space-150); }
.space-150-right { padding-right: var(--space-150); }
.space-150-top-bottom { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.space-150-left-right { padding-left: var(--space-150); padding-right: var(--space-150); }

.space-200 { padding: var(--space-200); }
.space-200-top { padding-top: var(--space-200); }
.space-200-bottom { padding-bottom: var(--space-200); }
.space-200-left { padding-left: var(--space-200); }
.space-200-right { padding-right: var(--space-200); }
.space-200-top-bottom { padding-top: var(--space-200); padding-bottom: var(--space-200); }
.space-200-left-right { padding-left: var(--space-200); padding-right: var(--space-200); }





/*
 * Opacity
 */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }





/*
 *
 *	Image Background
 *
 */

.image-bg {
	min-height: 200px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}





/*
 *
 *	Carousel
 *
 */

.carousel {
	width: 100%;
	position: relative;
	/*z-index: 1;*/
}

.carousel:before,
.carousel:after {
	pointer-events: none;
	content: '';
	display: inline-block;
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: calc((100vw - var(--container-width) ) / 2);
}

.carousel .carousel-list {
	position: relative;
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 0;
	-webkit-overflow-scrolling: touch;
	padding: 0 calc( (100vw - var(--container-width))/2 ) var(--space-50);
	scroll-snap-type: x mandatory;
}

.carousel:before {
	left: 0;
	/*background-image: linear-gradient( to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);*/
	background-image: var(--fade-left);
	opacity: 0.85;
}

.carousel:after {
	right: 0;
	/*background-image: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);*/
	background-image: var(--fade-right);
	opacity: 0.85;
}

.carousel .carousel-list .carousel-list-item {
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-right: 15px;
	white-space: normal;
	width: calc( 4 * var(--space-100) );
	scroll-snap-align: center;
}

/*.carousel .carousel-list .carousel-list-item * { pointer-events:  none; }*/

/* -- Base -- */
.carousel .carousel-controls {
	pointer-events: none;
}

.carousel .carousel-controls .prev,
.carousel .carousel-controls .next {
	pointer-events: all;
}

/* -- Carousel Controls -- */
.carousel .carousel-controls {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.carousel .carousel-controls .button {
	width: var(--space-100);
	height: var(--space-100);
	font-size: 0;
	line-height: 0;
	pointer-events: all;
	background-color: transparent;
	background-image: radial-gradient(circle, rgba(120,120,120,0.25) 0%, rgba(120,120,120,0) 33.333%);
	background-position: 50% 50%;
}

.carousel .carousel-controls .button:hover {
	/*background-position: 100% 50%;*/
}
.carousel .carousel-controls .button:active {
	/*background-position: 100% 50%;*/
}

.carousel .carousel-controls .button img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	width: 20px;
	transform: translate(-50%, -50%);
}

.carousel .carousel-controls .button * { pointer-events: none; }

.carousel .carousel-controls .prev {
	transform: translate(0%, -50%);
}

.carousel .carousel-controls .next {
	transform: translate(0%, -50%);
}

@media( min-width: 640px )  {
	.carousel:before,
	.carousel:after {
		width: calc(((100vw - var(--container-width) ) / 2) + var(--space-100));
	}

	.carousel .carousel-list {
		padding: 0 calc( ( ( 100vw - var(--container-width)) / 2 ) + var(--space-100) ) var(--space-50);
	}

	.carousel .carousel-list .carousel-list-item {
		width: calc( 5 * var(--space-100) );
		padding-right: 20px;
	}

}
@media( min-width: 1040px ) {
	.carousel .carousel-controls .button {
		width: var(--space-75);
		height: var(--space-75);
	}

	.carousel .carousel-list .carousel-list-item {
		width: calc( 3.333 * var(--space-100) );
	}
}
@media( min-width: 1480px ) {
	.carousel .carousel-controls .button {
		width: var(--space-75);
		height: var(--space-75);
	}

	.carousel .carousel-controls .button img {
		width: 24px;
	}
	
	.carousel .carousel-list .carousel-list-item {
		padding-right: 30px;
	}
}



/*
 * Underline
 */

.underline { font-size: 0; }
.underline span { 
	display: inline-block;
	width: calc( 100% - 15px );
	height: 2px; }

@media( min-width: 640px ) {
	.underline span {}
}

@media( min-width: 1040px ) {
	.underline span {
		width: calc( 100% - 20px );
	}
}

@media( min-width: 1380px ) {
	.underline span {
		height: 3px;
		width: calc( 100% - 30px );
	}
}