/*
 * # 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
 *	=========
 *
 *	#FFFFFF : light
 *	#EDEDED : off-light
 *	#83837E : neutral
 *	#D9D8D6 : off-neutral
 *	#3D3935 : dark
 *	#847c74 : off-dark
 *	#96694C : copper
 *	#B0876F : off-copper
 *	#333829 : moss
 *	#676f58 : off-moss
 *	#070b0a : black
 *
 *
 */




:root {
	--light : #FFFFFF;
	--off-light : #EDEDED;
	--neutral : #83837E;
	--off-neutral : #D9D8D6;
	--dark : #3D3935;
	--off-dark : #847c74;
	--copper : #96694C;
	--off-copper : #B0876F;
	--moss : #333829;
	--off-moss : #676f58;
	--black : #070b0a;
}




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



a, a:hover, a:focus {
	text-decoration: none;
	color: inherit; }

sup { top: -0.375em; }


/*
 *
 *	Typography
 *
 */

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

h1, .h1 { font-size: 3.0rem; }
h2, .h2 { font-size: 2.5rem; }
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.0rem; }
	h2, .h2 { font-size: 3.3rem; }
	h3, .h3 { font-size: 2.3rem; }
	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: 1040px ) {
	h1, .h1 { font-size: 6.1rem; }
	h2, .h2 { font-size: 3.9rem; }
	h3, .h3 { font-size: 2.5rem; }
	h4, .h4 { font-size: 2.0rem; }
	p, .p 	{ font-size: 1.6rem; 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.7rem; }
	h2, .h2 { font-size: 5.0rem; }
	h3, .h3 { font-size: 2.8rem; }
	h4, .h4 { font-size: 2.1rem; }
	p, .p 	{ font-size: 1.6rem; line-height: 1.75; }
	small, .small { font-size: 1.2rem; }
	label, .label { font-size: 1.4rem; }
}

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



/*
 *
 *	Buttons
 *
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
	padding: 0 20px;
	height: 42px;
	min-width: 150px;
	font-size: 1rem;
	line-height: 40px;
	color: var(--copper);
	background-color: var(--light);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.25), inset 0 0 0 0 var(--copper), inset 0 0 0 0 var(--copper);
	border: 1px solid var(--off-neutral);
	border-radius: 26px;
	-webkit-transition: box-shadow 0.2s ease-out;
	-moz-transition: box-shadow 0.2s ease-out;
	transition: box-shadow 0.2s ease-out;
}

@media( min-width: 640px ) {
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		height: 52px;
		line-height: 50px;
	}
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25), inset 0 0 0 4px var(--copper), inset 0 0 0 0 var(--copper);
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
.button:focus {
    outline: 0;
    color: var(--light);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25), inset 0 0 0 0 var(--copper), inset 0 0 100px 26px var(--copper);
}

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

.button.button-copper,
button.button-copper,
input[type="submit"].button-copper,
input[type="reset"].button-copper,
input[type="button"].button-copper {
    color: var(--light);
    background-color: var(--copper);
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.35), inset 0 0 0 0 rgba(256, 256, 256, 1), inset 0 0 0 0 rgba(256, 256, 256, 1);
}

.button.button-copper:hover,
button.button-copper:hover,
input[type="submit"].button-copper:hover,
input[type="reset"].button-copper:hover,
input[type="button"].button-copper:hover {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(256, 256, 256, 1), inset 0 0 0 0 rgba(256, 256, 256, 1);
}

.button.button-copper:focus,
button.button-copper:focus,
input[type="submit"].button-copper:focus,
input[type="reset"].button-copper:focus,
input[type="button"].button-copper:focus {
    outline: 0;
    color: var(--copper);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 0 rgba(256, 256, 256, 1), inset 0 0 100px 26px rgba(256, 256, 256, 1);
}


/* -- Button Material Icons -- */

.button .material-icons {
	vertical-align: middle;
	font-size: 18px;
}

@media( min-width: 640px ) {
	.button .material-icons {
		font-size: 20px;
	}
}



/*
 *
 *	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: 10px 20px; /* The 6px vertically centers text on FF, ignored by Webkit */
	color: var(--dark);
	background-color: var(--light);
	box-shadow: inset 0 0 0 0 var(--copper);
	border: 1px solid var(--off-neutral);
	border-radius: 26px;
	-webkit-transition: box-shadow 0.2s ease-out;
	-moz-transition: box-shadow 0.2s ease-out;
	transition: box-shadow 0.2s 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,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: inset 0 0 0 4px var(--copper);
}

@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: 52px;
		padding: 10px 20px; /* The 6px vertically centers text on FF, ignored by Webkit */
	}
}

input[type="email"].input-error,
input[type="number"].input-error,
input[type="search"].input-error,
input[type="text"].input-error,
input[type="tel"].input-error,
input[type="url"].input-error,
input[type="password"].input-error,
input[type="date"].input-error,
textarea.input-error,
select.input-error {
	border-color: #e44e4e;
	box-shadow: inset 0 0 0 4px #e44e4e;
}




/*
 *
 *	Fills
 *
 */

.fill-light {
	color: var(--dark);
	background-color: var(--light); }
.fill-off-light {
	color: var(--dark);
	background-color: var(--off-light); }
.fill-neutral {
	color: var(--dark);
	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-copper {
	color: var(--light);
	background-color: var(--copper); }
.fill-off-copper {
	color: var(--light);
	background-color: var(--off-copper); }
.fill-moss {
	color: var(--light);
	background-color: var(--moss); }
.fill-off-moss {
	color: var(--light);
	background-color: var(--off-moss); }
.fill-black {
	color: var(--light);
	background-color: var(--black); }




/*
 *
 *	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-copper {
	color: var(--copper); }
.text-off-copper {
	color: var(--off-copper); }
.text-moss {
	color: var(--moss); }
.text-off-moss {
	color: var(--off-moss); }
.text-black {
	color: var(--black); }







/*
 *
 *	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: 180px 0; }
	.block-space-top { padding: 180px 0 0 0; }
	.block-space-bottom { padding: 0 0 180px 0; }
}

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






/*
 *
 *	Gradients
 *
 */

.gradient-moss-off-dark {
	background-image: -webkit-linear-gradient(top, var(--moss) 0%,var(--off-dark) 100%);
	background-image: -moz-linear-gradient(top, var(--moss) 0%, var(--off-dark) 100%);
	background-image: linear-gradient(to bottom, var(--moss) 0%,var(--off-dark) 100%);
}

.gradient-light-off-moss {
	background-image: -webkit-linear-gradient(top, var(--light) 0%,var(--off-moss) 100%);
	background-image: -moz-linear-gradient(top, var(--light) 0%, var(--off-moss) 100%);
	background-image: linear-gradient(to bottom, var(--light) 0%,var(--off-moss) 100%);
}

.gradient-off-moss-moss {
	background-image: -webkit-linear-gradient(top, var(--off-moss) 0%,var(--moss) 100%);
	background-image: -moz-linear-gradient(top, var(--off-moss) 0%, var(--moss) 100%);
	background-image: linear-gradient(to bottom, var(--off-moss) 0%,var(--moss) 100%);
}






/*
 *
 *	texture
 *
 */

.texture {
	position: relative;
}

.texture:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('/media/texture-paper.png');
	background-repeat: repeat;
	mix-blend-mode: multiply;
}

.texture > * {
	z-index: 2;
}





/*
 *
 *	Panorama Instructions
 *
 */

.panorama-instruction {
	position: relative;
}
.panorama-instruction:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url( "/media/icon-360.svg" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10rem;
	z-index: 1;
	pointer-events: none;
	transition: 0.1s opacity ease-in 0.2s, 0.5s background-color ease-in 0.2s;
}
@media ( min-width: 1040px ) {
	.panorama-instruction:before {
		visibility: hidden;
	}
}

.panorama-instruction.hide:before {
	opacity: 0;
	/*transition: 0.1s 6s opacity ease-in, 1s 5s background-color ease-in;*/
}