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


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

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

/* ## 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: 1380px ) {}
@media( min-width: 1600px ) {}
@media( min-width: 1940px ) {}

/*
 *
 *	## Colors
 *	=========
 *
 *	-- Highlight Colors --
 *
 *	#4AB2DB : blue
 *	#49CCBF : teal
 *	#8CE6A7 : green
 *	#EE314F : red
 *
 *	-- Basic Colors --
 *
 *	#FFFFFF : light
 *	#E5E5E4 : off-light
 *	#99A3A6 : neutral
 *	#C6C6C6 : off-neutral
 *	#292A29 : dark
 *	#3D3F3D : off-dark
 *	#1D2225 : black
 *
 */




:root {
	--blue : #4AB2DB;
	--teal : #49CCBF;
	--green : #8CE6A7;
	--red : #EE314F;
	--light : #FFFFFF;
	--off-light : #E5E5E4;
	--neutral : #99A3A6;
	--off-neutral : #C6C6C6;
	--dark : #292A29;
	--off-dark : #3D3F3D;
	--black : #1D2225;
}




body, .body {
	position: relative;
	color: var(--off-dark);
	font-family: 'proxima-nova', 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;
}

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

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

section, .section {
	position: relative;
	z-index: 1;
}




/*
 *
 *	Typography
 *
 */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: 'proxima-nova', 'Arial Black', Arial, sans-serif;
	line-height: 1.25;
}

h1, .h1 { font-size: 3.0rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 2.0rem; }
h4, .h4 { font-size: 1.6rem; }
p, .p 	{ font-size: 1.2rem; line-height: 1.375; }
small, .small { font-size: 0.8rem; }
label, .label { font-size: 1.0rem; text-transform: uppercase; }

@media( min-width: 640px )  {
	h1, .h1 { font-size: 4.4rem; }
	h2, .h2 { font-size: 3.2rem; }
	h3, .h3 { font-size: 2.4rem; }
	h4, .h4 { font-size: 1.8rem; }
	p, .p 	{ font-size: 1.4rem; line-height: 1.5; }
	small, .small { font-size: 1.0rem; }
	label, .label { font-size: 1.2rem; }
}

@media( min-width: 1040px ) {
	h1, .h1 { font-size: 5.6rem; }
	h2, .h2 { font-size: 4.0rem; }
	h3, .h3 { font-size: 2.8rem; }
	h4, .h4 { font-size: 2.0rem; }
	p, .p 	{ font-size: 1.4rem; line-height: 1.5; }
	small, .small { font-size: 1.0rem; }
	label, .label { font-size: 1.2rem; }
}

@media( min-width: 1380px ) {
	h1, .h1 { font-size: 6.4rem; }
	h2, .h2 { font-size: 4.6rem; }
	h3, .h3 { font-size: 3.2rem; }
	h4, .h4 { font-size: 2.4rem; }
	p, .p 	{ font-size: 1.6rem; line-height: 1.75; }
	small, .small { font-size: 1.2rem; }
	label, .label { font-size: 1.4rem; }
}




/*
 *
 *	Buttons
 *
 */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	padding: 0 15px;
	height: 42px;
	font-size: 1rem;
	line-height: 42px;
	color: var(--off-light);
	background-color: var(--dark);
	border: 1px solid rgba(180,180,180,0.1);
	border-radius: 4px;
	transition: box-shadow .25s ease-out;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 1px 6px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, .4);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3), 0px 1px 6px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, .4);
}

input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
button:focus,
.button:focus {
    outline: 0;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px rgba(0, 0, 0, 0.25), inset 0px 0px 0px 0px rgba(255, 255, 255, .4);
}

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

.button-large {
	height: 42px;
	line-height: 42px;
}

.button-link {
	display: inline-block;
	padding: 0 7px;
	height: 25px;
	font-size: 1rem;
	line-height: 23px;
	text-transform: uppercase;
	color: var(--teal);
	background-color: var(--dark);
	border: 1px solid rgba(180,180,180,0.1);
	border-radius: 4px;
	text-decoration: none;
}

@media( min-width: 640px )  {
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		height: 48px;
		font-size: 1.2rem;
		line-height: 48px;
	}

	.button-large {
		height: 48px;
		line-height: 48px;
	}

	.button-link {
		height: 30px;
		font-size: 1.2rem;
		line-height: 28px;
	}

}




/*
 *
 *	Forms
 *
 */

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: 42px;
	padding: 11px 15px; /* The 6px vertically centers text on FF, ignored by Webkit */
	color: var(--dark);
	background-color: var(--light);
	border: 0;
	border-radius: 4px;
	box-shadow: inset 0 0 1px 1px var(--neutral), inset 0 0 0 0 rgba(180,180,180,0.1);
	transition: box-shadow .25s ease-out;
}

textarea {
	min-height: 65px;
}

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;
	box-shadow: inset 0 0 1px 3px var(--neutral), inset 0 0 50px 30px rgba(180,180,180,0.1);
}

@media( min-width: 640px )  {
	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: 48px;
		padding: 6px 12px; /* -- The 6px vertically centers text on FF, ignored by Webkit  -- */
	}
}

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







/*
 *
 *	Fills
 *
 */

.fill-light {
	color: var(--dark);
	background-color: var(--light); }
.fill-off-light {
	color: var(--neutral);
	background-color: var(--off-light); }
.fill-neutral {
	color: var(--light);
	background-color: var(--neutral); }
.fill-off-neutral {
	color: var(--dark);
	background-color: var(--off-neutral); }
.fill-dark {
	color: var(--light);
	background-color: var(--dark); }
.fill-off-dark {
	color: var(--light);
	background-color: var(--off-dark); }
.fill-black {
	color: var(--light);
	background-color: var(--black); }
.fill-blue {
	color: var(--light);
	background-color: var(--blue); }
.fill-teal {
	color: var(--light);
	background-color: var(--teal); }
.fill-green {
	color: var(--light);
	background-color: var(--green); }
.fill-red {
	color: var(--light);
	background-color: var(--red); }





/*
 *
 *	Text Color
 *
 */

.text-light {
	color: var(--light); }
.text-off-light {
	color: var(--off-light); }
.text-neutral {
	color: var(--neutral); }
.text-off-neutral {
	color: var(--off-neutral); }
.text-dark {
	color: var(--dark); }
.text-off-dark {
	color: var(--off-dark); }
.text-black {
	color: var(--black); }
.text-blue {
	color: var(--blue); }
.text-teal {
	color: var(--teal); }
.text-green {
	color: var(--green); }
.text-red {
	color: var(--red); }





/*
 *
 *	Gradient
 *
 */

.gradient-blue-green {
	background: var(--teal);
	background: -moz-linear-gradient(left, var(--blue) 0%, var(--teal) 50%, var(--green) 100%);
	background: -webkit-linear-gradient(left, var(--blue) 0%,var(--teal) 50%,var(--green) 100%);
	background: linear-gradient(to right, var(--blue) 0%,var(--teal) 50%,var(--green) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--blue)', endColorstr='var(--green)',GradientType=1 );
}





/*
 *
 *	Vertical Section Block Spacing
 *
 */

.block-space-top-bottom { padding: 40px 0; }
.block-space-top { padding: 40px 0 0 0; }
.block-space-bottom { padding: 0 0 40px 0; }

@media( min-width: 640px )  {
	.block-space-top-bottom { padding: 80px 0; }
	.block-space-top { padding: 80px 0 0 0; }
	.block-space-bottom { padding: 0 0 80px 0; }
}

@media( min-width: 1040px ) {
	.block-space-top-bottom { padding: 100px 0; }
	.block-space-top { padding: 100px 0 0 0; }
	.block-space-bottom { padding: 0 0 100px 0; }
}

@media( min-width: 1380px ) {
	.block-space-top-bottom { padding: 120px 0; }
	.block-space-top { padding: 120px 0 0 0; }
	.block-space-bottom { padding: 0 0 120px 0; }
}





/*
 *
 *	Underline
 *
 */

.underline {
	display: block;
	width: 75px;
	height: 2px;
	margin-top: 1px;
	font-size: 0;
	line-height: 0;
}

@media( min-width: 640px )  {
	.underline {
		width: 100px;
		height: 3px;
		margin-top: 3px;
	}
}

@media( min-width: 1040px ) {
	.underline {
		width: 150px;
	}
}

@media( min-width: 1380px ) {
	.underline {
		width: 175px;
		height: 4px;
		margin-top: 5px;
	}
}






/*
 *
 *	Gradient Band
 *
 */


.gradient-band:after {
	z-index: 1;
	content: '';
	display: block;
	position: absolute;
	top: 3%;
	left: 0;
	right: 0;
	bottom: 3%;
	width: 100%;
	height: auto;
	opacity: 0.9;

	-webkit-transform: translateY(0%) skewY(-45deg);
	-moz-transform: translateY(0%) skewY(-45deg);
	transform: translateY(0%) skewY(-45deg);

	-webkit-animation: 10s floatBand cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	-moz-animation: 10s floatBand cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	animation: 10s floatBand cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

	background: var(--teal);
	background: -moz-linear-gradient(left, var(--blue), var(--teal), var(--green), var(--teal));
	background: -webkit-linear-gradient(left, var(--blue), var(--teal),var(--green), var(--teal));
	background: linear-gradient(to right, var(--blue), var(--teal), var(--green), var(--teal));
	background-size: 200% 100%;
}

@keyframes floatBand {
	0%, 100% {
		-webkit-transform: translateY(-3%) skewY(-45deg);
		-moz-transform: translateY(-3%) skewY(-45deg);
		transform: translateY(-3%) skewY(-45deg);
		background-position: 0% 50%;
	}
	50% {
		-webkit-transform: translateY(3%) skewY(-45deg);
		-moz-transform: translateY(3%) skewY(-45deg);
		transform: translateY(3%) skewY(-45deg);
		background-position: 100% 100%;
	}
}