/** Shopify CDN: Minification failed

Line 38:0 All "@import" rules must come first
Line 39:0 All "@import" rules must come first
Line 40:0 All "@import" rules must come first
Line 41:0 All "@import" rules must come first
Line 42:0 All "@import" rules must come first
Line 43:0 All "@import" rules must come first
Line 44:0 All "@import" rules must come first
Line 45:0 All "@import" rules must come first
Line 46:0 All "@import" rules must come first
Line 47:0 All "@import" rules must come first
... and 128 more hidden warnings

**/
.page-width,
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@font-face {
    font-family: 'source_sans_prolight';
    src: url("//bloombaby.eu/cdn/shop/t/20/assets/sourcesanspro-light-webfont.woff2?v=145705809256949943341722880589") format('woff2'),
         url("//bloombaby.eu/cdn/shop/t/20/assets/sourcesanspro-light-webfont.woff?v=103701913339168211171722880589") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url("//bloombaby.eu/cdn/shop/t/20/assets/sourcesanspro-semibold-webfont.woff2?v=51395182221366220131722880589") format('woff2'),
         url("//bloombaby.eu/cdn/shop/t/20/assets/sourcesanspro-semibold-webfont.woff?v=9540659147175735221722880589") format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url("1DF92993C85812AF6.css");
@import url("5836E1293F8C8030E.css");
@import url("9360A4A6904D12B46.css");
@import url("18BD19B0B7977AEF9.css");
@import url("7C1D61311E70747A3.css");
@import url("12988ED15F40A98C0.css");
@import url("F3C7DB50B0EA7FB13.css");
@import url("F3FB5A52C16599A79.css");
@import url("47D1CEEEA4C777EF4.css");
@import url("671F0FEF9150E42AA.css");
@import url("AFA6EA64D09304473.css");
@import url("D266FDB2DAA3B2E59.css");
@import url("9EC328CD8F6646F6B.css");
@import url("F19E042AD8077E9A1.css");
@import url("7DE353A1DB86FFA91.css");
@import url("9F9E949FABB6812DC.css");
@import url("0872FEF03EB49905C.css");
@import url("C7A976A1E2522FD87.css");
@import url("2FCC422970DF0A1B6.css");
@import url("6CA7BA4C15BEEF199.css");
@import url("E85550E1C2B586EFA.css");
@import url("20FD84612FF86B709.css");
@import url("94AFAEC32B4D00817.css");
@import url("B5E13FDF5A54C538E.css");
@import url("9DD1ADB425CE7632F.css");
@import url("5907F34A59A7DBBB1.css");
@import url("3EA1E850E16E99700.css");
@import url("97876705643490C14.css");
@import url("9639FEA2107D078C9.css");
@import url("558023473EB74824F.css");
@import url("450DD45A26024C7AC.css");
@import url("F5B40AADDF4AA379E.css");
@import url("1165AF1A56117D330.css");
@import url("021D4D8196EE52DBB.css");
@import url("2116878BE60429745.css");
@import url("CE83D49B20BEBCDDB.css");


// Resets
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


// --- Sass Variables -------------------- //
// Text colors
$color-base: #4a4a4a;
$color-headline: #4a4a4a;
$color-link: #000000;
$color-accent: #f4633a;
$color-accent-dark: darken($color-accent, 12%);
$color-compliment: #f4633a;
$color-btn: #fff;
$color-placeholder: $color-base;
$color-footer: #000000;
$color-header: #F4633A;

// Background colors
$bg-header: #fff;
$bg-body: #fff;
$bg-light: #F6FCFB;
$bg-tan: #F9F5F2;
$bg-footer: #fde6de;
$bg-btn: #334455;

// Font families
$font-base: "Gotham A", "Gotham B";
$font-base-semi:  "Gotham A", "Gotham B";
$font-sec:  "Gotham A", "Gotham B";

// Font sizes
$font-size-base: 2.0rem;
$font-size-base-m: 1.6rem;

$headline-lg: 3.6rem;

// Text margins
$margin-text: .5rem 0 1.5rem 0;
$margin-text-m: .3rem 0 1rem 0;

// Letter spacing
$spacing-wider: .05rem;
$spacing-wide: .04rem;
$spacing-reg: .015rem;

// Border colors
$border-color: #E9E9E9;

// UI/inputs/forms
$padding-input: 1rem;

// Icons
$icon-size: 1.5rem;
$icon-arrow-size: 5rem;
$icon-social-size: 1.5rem;
$icon-search-size: 1.5rem;
$icon-dad-size: 2rem;
$icon-responsible-size: 2rem;
$icon-article-size: 2rem;

// Misc
$padding-window: 3.5rem;
$product-margins: 2rem;

// Z-indexes
$header-z: 9999;
$header-height: 7rem;
$header-height-mobile: 5rem;


$header-bar-height: 3rem;


$header-total: $header-height + $header-bar-height;
$header-total-mobile: $header-height-mobile + $header-bar-height;

// Mega Menu
$mega-width: 70rem;

// Wrapper widths
$wide: 90%;
$med: 82%;
$reg: 75%;
$small: 72.5%;
$narrow: 65%;
$slim: 50%;

// Screen widths
$breakpoint-xxl: 1440px;
$breakpoint-xl: 1385px;
$breakpoint-l: 920px;
$breakpoint-m: 782px;
$breakpoint-s: 680px;
$breakpoint-xs: 500px;

// Misc
$product-item-pad-bottom: 8rem;
$product-item-pad-bottom-mobile: 8rem;

$product-item-pad-sides: 12%;
$product-item-pad-sides-mobile: 2.5rem;

$min-win-height: 58rem;
$section-margin: 8rem;
$instagram-offset: 10rem;
$pag-dot: .7rem;
$customize-desc-height: 10.5rem;

$billboard-height: 40rem;

$customize-header-height: 58rem;
$customize-header-trigger-height: 6rem;

// --- Sass Mixins ----------------------- //
@mixin clearfix(){
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

@mixin prefix($property, $value){
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin breakpoint($point){
	@if $point == xl {
    @media (min-width: $breakpoint-xl) { @content; }
  }
	@else if $point == l {
    @media (min-width: $breakpoint-l) { @content; }
  }
  @else if $point == m {
    @media (min-width: $breakpoint-m) { @content; }
  }
  @else if $point == s {
    @media (min-width: $breakpoint-s) { @content; }
  }
  @else if $point == mobile-l {
	  @media (max-width: $breakpoint-l - 1) { @content; }
  }
  @else if $point == mobile-m {
	  @media (max-width: $breakpoint-m - 1) { @content; }
  }
  @else if $point == mobile-s {
	  @media (max-width: $breakpoint-s - 1) { @content; }
  }
}

@mixin center($axis, $size){
	@if $axis == v {
		height: $size;
		margin-top: - $size/2;
		top: 50%;
	}
	@else if $axis == h {
		width: $size;
		margin-left: - $size/2;
		left: 50%;
	}
}

@mixin fillScreen($offset: false, $min: false){
	@if $min == false {

	} @else {
		min-height: $min;
	}
	@if $offset == false {
		height: calc(100vh);
	}
	@else {
		height: calc(100vh - #{$offset});
	}
}

@mixin row($width) {
  font-size: 0;
  max-width: $width;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
	letter-spacing: -.31em;
	word-spacing: -.43em;
}

@mixin col($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
  width: percentage($col/$sum);
  font-size: 1rem;
  display: inline-block;
  vertical-align: $align;
  box-sizing: border-box;
  padding-left: if($first, 0, $gap);
  padding-right: if($last, 0, $gap);
  letter-spacing: normal;
  word-spacing: normal;
}

@mixin transition($speed){
	@include prefix('transition', all $speed ease-in-out);
}

@mixin transform($transforms) {
	@include prefix('transform', $transforms);
}

@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

@mixin align($axis, $clear-point: false){
	@if $clear-point == false {
		position: absolute;
		@if $axis == x {
			left: 50%;
			@include prefix('transform', translateX(-50%));
		}
		@else if $axis == y {
			top: 50%;
			@include prefix('transform', translateY(-50%));
		}
		@else if $axis == xy {
			left: 50%;
			top: 50%;
			@include prefix('transform', translate3d(-50%,-50%,0));
		}
	}
	@else if $clear-point == mobile {
		position: inherit;
		@if $axis == x {
			left: inherit;
			@include prefix('transform', translateX(0));
		}
		@else if $axis == y {
			top: inherit;
			@include prefix('transform', translateY(0));
		}
		@else if $axis == xy {
			left: inherit;
			top: inherit;
			@include prefix('transform', translate3d(0,0,0));
		}
	}
	@else if $clear-point == desktop {
		position: absolute;
		@if $axis == x {
			left: 50%;
			@include prefix('transform', translateX(-50%));
		}
		@else if $axis == y {
			top: 50%;
			@include prefix('transform', translateY(-50%));
		}
		@else if $axis == xy {
			left: 50%;
			top: 50%;
			@include prefix('transform', translate3d(-50%,-50%,0));
		}
	}
	@include breakpoint(m){
		@if $clear-point == mobile {
			position: absolute;
			@if $axis == x {
				left: 50%;
				@include prefix('transform', translateX(-50%));
			}
			@else if $axis == y {
				top: 50%;
				@include prefix('transform', translateY(-50%));
			}
			@else if $axis == xy {
				left: 50%;
				top: 50%;
				@include prefix('transform', translate3d(-50%,-50%,0));
			}
		}
		@else if $clear-point == desktop {
			position: inherit;
			@if $axis == x {
				left: inherit;
				@include prefix('transform', translateX(0));
			}
			@else if $axis == y {
				top: inherit;
				@include prefix('transform', translateY(0));
			}
			@else if $axis == xy {
				left: inherit;
				top: inherit;
				@include prefix('transform', translate3d(0,0,0));
			}
		}
	}
}

@mixin bg($pos: center center, $repeat: no-repeat, $size: cover){
	background-position: $pos;
	background-repeat: $repeat;
	background-size: $size;
}

@mixin priceline($color){
	display: inline-block;
	position: relative;
	&:after {
		content: '';
		width: 200px;
		height: 1px;
		background: $color;
		display: block;
		@include align(y);
		right: calc(-200px - 10px);
	}
}

// --- Sass Extends ---------------------- //
.transition {
	@include prefix('transition', all 0.25s ease-out);
}

.align-wrap {
	position: relative;
	@include prefix('transform-style', preserve-3d);
}

.last-cell {
	width: 16%;
	padding-left: 3%;
}

.label {
	display: inline-block;
	margin-bottom: .8rem;
	font-size: 1.4rem;
	letter-spacing: $spacing-wider;
	@extend .font-semi;
	@include breakpoint(m){
		font-size: 1.2rem;
	}
}

.selector-labels {
	font-size: 1.4rem;
}

.dark-header {
	a {
		color: #000;
	}
	svg {
		fill: #000;
	}
	.site-nav {
		li {
			a {
				color: #000;
			}
		}
	}
}

.light-header {
	a {
		color: #fff;
	}
	svg {
		fill: #fff;
	}
	.site-nav {
		li {
			a {
				color: #fff;
			}
		}
	}
}

.underlined {
	position: relative;
	&:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 1px;
		background: $color-accent;
		bottom: -2px;
	}
}

.lg-headline {
	font-size: $headline-lg;
	line-height: calc(#{$headline-lg} * 1.4);
}

.panel-trigger {
	&:after {
		@include transition(.2s);
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: transparent;
		margin-bottom: .3rem;
	}
	&.active {
		&:after {
			background-color: $color-accent;
		}
	}
}

.unvert-y {
	@include align(y,mobile);
	width: 100%;
}

.cart-img {
	padding-bottom: 2rem;
	img {
		display: block;
		width: 100%;
	}
	> div {
		h3 {
			margin: 0;
			font-size: 1.1rem;
		}
		span {
			//display: inline-block;
		}
		a {
			text-decoration: none;
		}
	}
	@include breakpoint(m){
		padding-bottom: 0;
		> div {
			bottom: 2.5rem;
			padding: 0;
		}
	}
}

.cart-detail {
	text-align: left;
	font-size: 1.4rem;
	.cart-header {
		span {
			font-size: 0;
		}
	}
	h3 {
		margin: 0 0 1rem 0;
		border-bottom: 1px solid #DFCDBF;
		padding-bottom: .5rem;
		font-size: 1.4rem;
		letter-spacing: $spacing-wide;
		color: darken($color-base, 10%);
		@extend .font-semi;
	}
	ul {
		margin: 0;
		li {
			list-style: none;
			margin: 0;
			font-family: $font-base;
			-webkit-font-smoothing: auto;
			&:last-child {
				margin: 0;
			}
		}
	}
	.remove-item {
		margin-top: auto;
	}
	a {
		text-decoration: none;
	}
	@include breakpoint(m){
		font-size: 1.2rem;
		h3 {
			font-size: 1.2rem;
		}
		ul {
			li {
				margin: 0 0 .2rem 0;
			}
		}
	}
}

.cart-qty {
	input {
		text-align: center;
		max-width: 3rem;
		padding: 1rem .5rem;
		display: block;
		margin: 0 0 1rem;
		@extend .font-semi;
	}
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	  -webkit-appearance: none;
	  -moz-appearance:textfield;
	  margin: 0;
	}
	.btn2 {
		margin-left: .2rem;
	}
	@include breakpoint(m){
		input {
			max-width: 4rem;
			margin-left: auto;
			margin-right: auto;
			padding: 1.2rem 0;
		}
	}
}

.bg-circle {
	&:after {
		content: '';
		display: block;
		width: 20rem;
		height: 20rem;
		background: #fff;
		@include prefix('border-radius', 50%);
		@include align(xy);
		z-index: -1;
	}
}

.bg-pattern {
	background-image: url("//bloombaby.eu/cdn/shop/t/20/assets/bg_instagram.png?v=80804319964782161791722880586");
	background-repeat: repeat;
	background-position: center center;
}

.font-semi {
	font-family: $font-base-semi;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.font-utopia {
	font-family: $font-sec;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// --- Global layout ---------------------- //
.shopify-preview-bar {
  max-width:700px !important;
  left:auto !important;
  height:33px;
  overflow:hidden;
  background:transparent !important;
  .shopify-preview-bar__title {
    display:none !important;
  }
  .shopify-preview-bar__section {
    margin:0 15px !important;
  }
}

* {
	@include prefix('box-sizing', 'border-box');
}

html {
	font-size: 62.5%;
}

body {
	font-size: $font-size-base-m;
	line-height: calc(#{$font-size-base-m} * 1.43);
	color: $color-base;
	letter-spacing: $spacing-reg;
	font-family: $font-base;
	&.no-scroll {
		overflow: hidden;
	}
	@include breakpoint(m){
		font-size: $font-size-base;
		line-height: calc(#{$font-size-base} * 1.43);
	}
}

@mixin wrapper($mobile-max-width: $med) {
  width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: $padding-window;
	padding-right: $padding-window;

  @include breakpoint(m) {
		max-width: $mobile-max-width;
		padding-left: 0;
		padding-right: 0;
  }
}

.wrapper {
	@include wrapper;

	&.wide-wrapper {
    @include wrapper($wide);
	}
	&.med-wrapper {
    @include wrapper($med);
	}
	&.reg-wrapper {
		@include wrapper($reg);
	}
	&.small-wrapper {
		@include wrapper($small);
	}
	&.narrow-wrapper {
		@include wrapper($wide);
	}
	&.slim-wrapper {
		@include wrapper($slim);
	}

}

.desktop-only {
	display: none;
	@include breakpoint(m){
		display: block;
	}
}

.mobile-only {
	display: block;
	@include breakpoint(m){
		display: none;
	}
}

// --- Typography ------------------------- //
h1,h2,h3,h4,h5,h6 {
	line-height: normal;
	margin: $margin-text-m;
	letter-spacing: $spacing-reg;
	
		color: $color-headline;
	
	@include breakpoint(m){
		margin: $margin-text;
	}
}

h1 {
	font-size: calc(#{$font-size-base-m} * 2);
	@include breakpoint(m){
		font-size: calc(#{$font-size-base} * 2);
	}
}

h2 {
	font-size: calc(#{$font-size-base-m} * 1.5);
	@include breakpoint(m){
		font-size: calc(#{$font-size-base} * 1.5);
	}
}

h3 {
	font-size: $font-size-base-m;
	@include breakpoint(m){
		font-size: $font-size-base;
	}
}

h4 {
	font-size: calc(#{$font-size-base-m} / 1.5);
	@include breakpoint(m){
		font-size: calc(#{$font-size-base} / 1.5);
	}
}

h5 {
	font-size: calc(#{$font-size-base-m} / 2);
	@include breakpoint(m){
		font-size: calc(#{$font-size-base} / 2);
	}
}

h6 {
	font-size: calc(#{$font-size-base-m} / 2.2);
	@include breakpoint(m){
		font-size: calc(#{$font-size-base} / 2.2);
	}
}

a {
	color: $color-link;
}

p {
	font-size: $font-size-base-m;
	margin: $margin-text-m;
	@include breakpoint(m){
		font-size: $font-size-base;
		margin: $margin-text;
	}
}

li {
	margin: $margin-text-m;
	@include breakpoint(m){
		margin: $margin-text;
	}
}

ul {
	margin: $margin-text-m;
	li {
		list-style: disc;
	}
	@include breakpoint(m){
		margin: $margin-text;
	}
}

ol {
	margin: $margin-text-m;
	li {
		list-style: decimal;
	}
	@include breakpoint(m){
		margin: $margin-text;
	}
}

bold,
strong,
b {
	font-weight: bold;
}

em {
	font-style: italic;
}

small {
	font-size: .8rem;
}

sup,
sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
  bottom: -0.5em;
}

blockquote {
	color: $color-compliment;
	@extend .font-utopia;
	font-weight: 700;
	font-style: italic;
	cite {
    display: block;
    &:before {
      content: "\2014 \0020";
    }
  }
  p {
	  @extend .lg-headline;
	  font-size: 2.9rem;
	  line-height: 3.2rem;
	  color: $color-compliment;
	  @extend .font-utopia;
	  font-weight: 700;
		font-style: italic;
  }
  @include breakpoint(m){
	  p {

	  }
  }
}

code,
pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
}

video {
	display: block;
	width: 100%;
	height: auto;
}

img {
	max-width: 100%;
}

// --- html forms/inputs ----------------- //
button {
	@include prefix('appearance', none);
	border: none;
	cursor: pointer;
	line-height: calc(1.4rem * 1.43);
	font-family: $font-base;
	&:focus {
		outline: none;
	}
}

input,
select,
textarea {
	@include prefix('appearance', none);
	@include prefix('border-radius', 0);
	font-size: 16px;
	background: none;
	border: none;
	outline: none;
	padding: $padding-input;
	color: $color-base;
	border: 1px solid $border-color;
	letter-spacing: $spacing-reg;
	font-family: $font-base;
	&[type="button"]{}
	&[type="checkbox"]{
		width: 1.5rem;
		height: 1.5rem;
		border: 1px solid $border-color;
		cursor: pointer;
		padding: 0;
		@include prefix('border-radius', 0);
		&:checked {
			background: $color-accent;
		}
	}
	&[type="email"]{}
	&[type="number"]{}
	&[type="number"]::-webkit-inner-spin-button,
	&[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
	  margin: 0;
	}
	&[type="submit"]{
		cursor: pointer;
	}
	&[type="text"]{}
	@include breakpoint(m){
		font-size: 1.1rem;
	}
}

input::-webkit-input-placeholder {
  color: $color-placeholder;
}
input::-moz-placeholder {
  color: $color-placeholder;
}
input:-ms-input-placeholder {
  color: $color-placeholder;
}
input:-moz-placeholder {
  color: $color-placeholder;
}
textarea::-webkit-input-placeholder {
  color: $color-placeholder;
}
textarea::-moz-placeholder {
  color: $color-placeholder;
}
textarea:-ms-input-placeholder {
  color: $color-placeholder;
}
textarea:-moz-placeholder {
  color: $color-placeholder;
}

textarea {
	max-width: 100%;
	overflow: auto;
}

select::-ms-expand {
  display: none;
}

label {
	@extend .label;
}

// --- Custom UI ------------------------- //
.field-wrap {
	margin-bottom: 1.5rem;
	@include clearfix();
	&.no-marg {
		margin-bottom: 0;
	}
	&.btn-wrap {
		margin-bottom: 0;
		margin-top: 3rem;
		.btn {
			margin: 0;
			border: none;
		}
		span {
			letter-spacing: $spacing-wider;
			font-size: 1rem;
		}
	}
	input,
	select,
	textarea {
		width: 100%;
		&:not(.btn){
			border: 1px solid $border-color;
		}
	}
	label {
		display: block;
		margin-bottom: .5rem;
	}
	.btn {
		width: inherit;
		margin: 2rem 0;
	}
	@include breakpoint(m){
		margin-bottom: 1rem;
		&.half {
			width: 49%;
			margin-right: 2%;
			float: left;
		}
		&.last {
			margin-right: 0;
		}
	}
}

.btn-wrap {
	margin: 2rem 0;
	@include breakpoint(m){
		margin: 3rem 0;
	}
}

.btn {
	display: inline-block;
	padding: 1rem 3rem;
	border: 1px solid $color-accent;
	background-color: transparent;
	color: $color-accent;
	text-decoration: none;
	@include prefix('border-radius', 25px);
	font-size: 1.2rem;
	letter-spacing: $spacing-wider;
	line-height: normal;
	cursor: pointer;
	&.solid {
		background-color: $color-accent;
		color: #fff;
	}
	&.lg-btn {
		padding: 1rem 4rem;
	}
	&.disabled {
		background-color: desaturate($color-accent, 100%);
		border-color: desaturate($color-accent, 100%);
		color: darken($color-base, 40%);
		@include prefix('opacity', .4);
		cursor: pointer;
		@include prefix('pointer-events', 'none');
	}
	@include breakpoint(m){
		padding: .5rem 2.2rem;
	}
}

.icon {
	svg {
		display: block;
		width: calc(#{$icon-size} * 1.1);
		height: calc(#{$icon-size} * 1.1);
	}
	&.icon-arrow {
		svg {
			width: calc(#{$icon-arrow-size} * 1.2);
			height: calc(#{$icon-arrow-size} * 1.2);
		}
	}
	&.icon-social {
		svg {
			width: calc(#{$icon-social-size} * 1.5);
			height: calc(#{$icon-social-size} * 1.5);
		}
	}
	&.icon-search {
		svg {
			width: $icon-search-size;
			height: $icon-search-size;
		}
	}
	&.icon-dad {
		svg {
			width: $icon-dad-size;
			height: $icon-dad-size;
		}
	}
	&.icon-responsible {
		svg {
			width: $icon-responsible-size;
			height: $icon-responsible-size;
		}
	}
	&.icon-article {
		svg {
			width: $icon-article-size;
			height: $icon-article-size;
		}
	}
	&.icon-close {
		cursor: pointer;
		svg {
			width: $icon-size;
			height: $icon-size;
		}
	}
	@include breakpoint(m){
		svg {
			/*width: $icon-size;
		  height: $icon-size;*/
		}
		&.icon-arrow {
			svg {
				width: $icon-arrow-size;
				height: $icon-arrow-size;
			}
		}
		&.icon-social {
			svg {
				width: $icon-social-size;
				height: $icon-social-size;
			}
		}
	}
}

// --- Social links ---------------------- //
.social-links {
	text-align: center;
	margin: 0;
	li {
		display: inline-block;
		margin: 0 1rem;
		vertical-align: middle;
	}
}

// --- Accordion ------------------------- //
.acc-trigger {
	cursor: pointer;
}

.acc-content {
	display: none;
}

// --- Custom Selects -------------------- //
.dummy-select {
}

// --- jQuery inview  -------------------- //
.animate-in {
	@extend .transition;
	@include prefix('opacity', 0);
	@include prefix('transform', 'translate3d(0,40px,0)');
	&.in-view {
		@include prefix('opacity', 1);
		@include prefix('transform', 'translate3d(0,0,0)');
	}
}

// --- jQuery slick / slideshows & carousels  -------------------- //
.slider-wrap, .slider-wrap-image-wraper {
	position: relative;
	.icon-arrow {
		position: absolute;
		top: 50%;
		z-index: 1;
		cursor: pointer;
		@include align(y);
		&.arrow-prev {
			left: 2rem;
		}
		&.arrow-next {
			right: 2rem;
		}
		svg {
			fill: #d1d1d1;
		}
	}
}
.slider-wrap-image-wraper .icon-arrow svg{
  fill: #fff;
  stroke: #000;
  stroke-width: 0.5px;
  height:2rem;
  width:2rem;
}
.slider-wrap-image-wraper .slick-dots{bottom:5px;}
.slider-wrap-image-wraper .slide-arrow{display:none;}
.slider-wrap-image-wraper .slick button{width:0.7rem;height:0.7rem;}
.slider-wrap-image-wraper .slick-dots li button{border:2px solid #000000;background-color:#fff;}
.slider-wrap-image-wraper .slick-dots li.slick-active button{background-color:#000000;}

.slider-wrap-image-wraper.slider-for-mobile .slick button{width:0.3rem;height:0.3rem;}

.slick {
	button {
		@include prefix('appearance', 'none');
		@include prefix('border-radius', 50%);
		background: none;
		border: none;
		padding: 0;
		background: #E5E5E5;
		width: $pag-dot;
		height: $pag-dot;
		text-indent: -9000px;
		cursor: pointer;
		@include prefix('box-sizing', 'content-box');
		&:focus {
			outline: none;
		}
	}
}

.slick-dots {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -4rem;
	text-align: center;
	margin: 0;
	li {
		vertical-align: middle;
		display: inline-block;
		margin: 0 1rem;
    button {
      background-color: lighten(#9B9B9B, 20%);
    }
		&.slick-active {
			button {
				position: relative;
				z-index: 999;
        background-color: #FFAD33;
			}
		}
	}
}

.slick-slide {
	img {
		&.mobile-only {
			display: block;
		}
		&.desktop-only {
			display: none;
		}
	}
	@include breakpoint(m){
		img {
			&.mobile-only {
				display: none;
			}
			&.desktop-only {
				display: block;
			}
		}
	}
}

// --- Global elements ------------------- //
.back-to-top {
	cursor: pointer;
}

// --- Header bar  ----------------------- //

#site-bar {
	text-align: center;
	height: $header-bar-height;
	width: 100%;
	color: $color-base;
	font-size: 1rem;
	background-color: #f4633a;
	position: fixed;
	top: 0;
	left: 0;
	z-index: $header-z;
	span {
		@include align(xy);
		width: 100%;
		@extend .font-semi;
		padding: 0 1rem;
		a {
			text-decoration: none;
			color: $color-base;
		}
	}
	@include breakpoint(m){
		font-size: 1.2rem;
	}
}


// --- Global Header --------------------- //
#site-header {
	@include clearfix();
	height: $header-height-mobile;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid $border-color;
	position: relative;
	position: fixed;
	z-index: $header-z;
	left: 0;
	
		top: $header-bar-height;
	
	> .wrapper {
		@extend .align-wrap;
		position: relative;
		height: 100%;
		padding: 0;
	}
	> li {
		> a {
			position: relative;
			&:after {
				content: '';
				display: block;
				width: 100%;
				background: #000;
				height: 0;
				bottom: 0;
				position: absolute;
			}
			&:hover {
				&:after {
					height: .1rem;
				}
			}
		}
	}
	li {
		list-style: none;
		float: left;
		&:last-child {
			/*margin-right: 0;*/
		}
	}
	a {
		color: $color-header;
		text-decoration: none;
	}
	.logo {
		@include align(xy);
		z-index: 2;
		font-size: 2.2rem;
		img {
			width: 100%;
			max-width: 90px;
			display: block;
		}
	}
	.icon {
		svg {
			fill: $color-base;
		}
	}
	@include breakpoint(m){
		font-size: 1.3rem;
		height: $header-height;
		li {
			display: block;
		}
		.logo {
			font-size: 4rem;
			img {
				max-width: 140px;
			}
		}
	}
}

// --- Site Nav -------------------------- //
.site-nav {
	@include align(y);
	margin: 0;
	text-align: center;
	left: 0;
	li {
		margin: 0 2.4rem 0 0;
		&.has-dropdown {
			> ul {
				display: none;
				margin: 0;
				padding: 3rem;
				position: absolute;
				top: 100%;
				background: #fff;
				width: 100%;
				@include center(h, $mega-width);
				border-style: solid;
				border-color: $border-color;
				border-left-width: 1px;
				border-right-width: 1px;
				border-bottom-width: 1px;
				li {
					a {
						color: $color-base;
					}
				}
			}
		}
	}
}

// --- Utility Header -------------------- //
.header-utilities {
	@include align(y);
	z-index: 2;
	right: 1.3rem;
	ul {
		@include clearfix();
		margin: 0;
		li {
			margin: 0 1.2rem 0 0;
			&.cart-link {
				position: relative;
				.cart-count {
					/*@include align(xy);*/
                  	position: absolute;
                    left: 2px;
                    top: -15px;
					font-size: .8rem;
					font-family: $font-base;
					margin-top: .2rem;
					width: 100%;
					text-align: center;
				}
			}
			.icon-search {
				position: relative;
				cursor: pointer;
				display: block;
			}
		}
	}
	@include breakpoint(m){
		right: 0;
		ul {
			li {
				margin: 0 2rem 0 0;
			}
		}
	}
}

#global-search {
	position: absolute;
	top: calc(100% + #{$padding-window});
	right: -2.5%;
	max-width: 60rem;
	width: 100%;
	form {
		width: 100%;
		position: relative;
		@include prefix('box-shadow', '1px 3px 5px rgba(0,0,0,.2)');
	}
	input::-webkit-input-placeholder {
	  color: lighten($color-base, 50%);
	}
	input::-moz-placeholder {
	  color: lighten($color-base, 50%);
	}
	input:-ms-input-placeholder {
	  color: lighten($color-base, 50%);
	}
	input:-moz-placeholder {
	  color: lighten($color-base, 50%);
	}
	input {
		&[type="search"]{
			background: #fff;
			border: none;
			padding: 2rem;
			width: 100%;
			font-size: 2.7rem;
			font-family: $font-sec;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  font-style: italic;
		}
	}
	button {
		display: none;
	}
}

.utility-trigger {
	cursor: pointer;
	@extend .transition;
	&.active {
		@extend .underlined;
		svg,
		span {
			fill: $color-accent!important;
			color: $color-accent;
		}
	}
	@include breakpoint(m){
		display: block;
	}
}

.utility-item {
	@extend .transition;
	@include prefix('transform', 'translateY(6px)');
	@include prefix('opacity', 0);
	visibility: hidden;
	&.show {
		@include prefix('transform', 'translateY(0)');
		@include prefix('opacity', 1);
		visibility: visible;
	}
}

.chat-trigger {
	cursor: pointer;
}

// --- Mega Menus ------------------------ //
.mega-panel {
	position: fixed;
	top: $header-total;
	z-index: $header-z;
	display: none;
	width: 100%;
	background: #fff;
	padding: 6rem 5%;
	@include prefix('box-shadow', '1px 1px 5px rgba(0,0,0,.2)');
	@include clearfix();
	ul {
		display: block;
		float: left;
		width: 68%;
		margin: 0 2% 0 0;
		text-align: left;
		li {
			list-style: none;
			display: inline-block;
			text-align: center;
			vertical-align: top;
			width: 17.6666%;
			margin: 0 1%;
			&:first-child {
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
			img {
				display: block;
				width: 100%;
				margin-bottom: .8rem;
			}
			h4 {
				font-size: 1rem;
				margin: 0;
				@extend .font-semi;
			}
			a {
				text-decoration: none;
			}
		}
	}
	.mega-msg {
		float: left;
		width: 30%;
		h3 {
			@include align(y);
			font-size: 3rem;
			@extend .font-utopia;
		}
	}
}

// --- Global Footer --------------------- //
#site-footer {
	background: $bg-footer;
	color: $color-footer;
	@include clearfix();
	padding-top: 4rem;
	padding-bottom: 10rem;
	a {
		color: $color-footer;
	}
	svg {
		fill: darken($color-footer, 30%);
	}
	ul {
		li {
			list-style: none;
			a {
				text-decoration: none;
			}
		}
	}
	.social-links {
		text-align: inherit;
		margin-top: 3rem;
		li {
			margin: 0 2rem 0 0;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	@include breakpoint(m){
		padding-bottom: 5rem;
		.social-links {
			margin-top: 2rem;
			li {
				margin: 0 1.5rem 0 0;
			}
		}
	}
}

.footer-col {
	> span {
		@extend .label;
		margin-bottom: 2rem;
		letter-spacing: $spacing-wider;
	}
	p {
		margin: 0;
		a {
			color: $color-accent;
		}
	}
	@include breakpoint(m){
		padding-right: 5%;
		float: left;
		width: 25%;
		font-size: 1.2rem;
		> span {
			font-size: 1.4rem;
		}
		p {
			font-size: 1.2rem;
			line-height: 1.6rem;
		}
	}
}

#footer-connect {
	form {
		position: relative;
		padding-bottom: 3rem;
		input::-webkit-input-placeholder {
		  color: #fff;
		}
		input::-moz-placeholder {
		  color: #fff;
		}
		input:-ms-input-placeholder {
		  color: #fff;
		}
		input:-moz-placeholder {
		  color: #fff;
		}
		input {
			&[type="email"]{
				background: lighten($bg-footer, 30%);
				border: none;
				width: 100%;
				padding: 1.2rem;
				font-size: 1.9rem;
				color: $color-footer;
			}
			&[type="submit"]{
				display: block;
				clear: both;
				margin-top: 1.5rem;
				font-size: 1.6rem;
			}
		}
		.success {
			position: absolute;
			bottom: 0;
			left: 0;
			display: none;
		}
	}
	@include breakpoint(m){
		width: 33%;
		padding-right: 8%;
		form {
			input {
				&[type="email"]{
					font-size: 1.2rem;
				}
				&[type="submit"]{
					font-size: 1.2rem;
				}
			}
		}
	}
}

#footer-information {
	width: 17%;
	ul {
		margin: 0;
		li {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
			line-height: 1.2rem;
			letter-spacing: $spacing-wider;
		}
	}
}

// --- Mini Cart ------------------------- //
#mini-cart {
	background: #fff;
	padding: 2.5rem;
	max-width: 60rem;
	height: calc(100vh - #{$header-total-mobile});
	overflow: auto;
	width: 100%;
	position: fixed;
	z-index: 9999999999;
	right: 0;
	border-left: 1px solid $border-color;
	border-bottom: 1px solid $border-color;
	
		top: $header-total-mobile;
	
	.cart-item {
		margin-bottom: 0;
	}
	.cart-header {
		display: none;
	}
	.cart-body {
		margin-bottom: 2rem;
		.c-col {
			height: auto!important;
			&.c-item {
				width: 20%;
				margin-right: 5%;
				margin-bottom: 6rem;
			}
			&.c-deets {
				width: 75%;
			}
			&.c-qty {
				width: 15%;
			}
			&.c-price {
				width: 15%;
				text-align: right;
			}
			&.c-remove {
				position: absolute;
				right: 0;
				svg {
					fill: lighten($color-base, 40%);
				}
			}
			&:not(.c-item){

			}
		}
		.cart-item {
			font-size: 1.2rem;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.c-deets {
			h3 {
				font-size: 1.4rem;
				line-height: 2rem;
				margin: 0;
				padding: 0;
				letter-spacing: $spacing-wider;
				@extend .font-semi;
			}
		}
		.c-qty {
			input {
				padding: 1rem .5rem;
				font-size: inherit;
			}
		}
	}
	.cart-footer {
		&.hide {
			display: none;
		}
		.btn-wrap {
			margin: 0;
		}
	}
	.view-cart {
		background-color: $color-compliment;
		border-color: $color-compliment;
	}
	#checkout-buttons {
		width: 100%;
		float: none;
		@include clearfix();
		> div {
			text-align: center;
			&.mini-cart-total {
				width: 100%;
				padding: 3rem 0;
				font-size: 1.8rem;
				@extend .font-semi;
				span {
					@extend .font-semi;
					&:first-child {
						color: #000;
						margin-right: 3%;
					}
				}
			}
			&.btn-wrap {
				width: 100%;
			}
		}
	}
	.empty-cart {
		margin-top: 0;
	}
	@include breakpoint(m){
		padding: 4rem 4rem 2.5rem;
		height: auto;
		min-height: 15rem;
		max-height: calc(100vh - #{$header-total});
		
			top: $header-total;
		
		.cart-item {
			margin-bottom: 6rem;
		}
		.cart-body {
			.c-col {
				&.c-item {
					width: 13%;
					margin-right: 0;
					margin-bottom: 0;
				}
				&.c-deets {
					width: 42%;
				}
				&.c-qty {
					margin-left: 0;
				}
				&.c-price {
					width: 15%;
					text-align: right;
				}
				&.c-remove {
					width: 15%;
					position: inherit;
					right: inherit;
					svg {
						fill: lighten($color-base, 40%);
					}
				}
				&:not(.c-item){
					padding-top: 2.5rem;
				}
			}
			.c-deets {
				h3 {
					font-size: 1rem;
					border-bottom: none;
				}
			}
			.c-qty {
				input {
					border: none;
					padding: 0;
				}
			}
		}
		.cart-footer {
			padding: 2rem 0 0;
		}
		#checkout-buttons {
			> div {
				float: left;
				width: 50%;
				&.mini-cart-total {
					width: 40%;
					padding: 0;
					font-size: $font-size-base-m;
				}
				&.btn-wrap {
					width: 60%;
				}
			}
		}
	}
}

// --- Mobile Menu ----------------------- //
#btn-mobile-menu {
	width: 2rem;
	cursor: pointer;
	@include align(y);
	left: 2.5rem;
	div {
		width: 100%;
		height: .2rem;
		background: #777;
		margin-bottom: .5rem;
		@include prefix('border-radius', '5px');
		@include transition(.2s);
		position: relative;
		&:last-child {
			margin-bottom: 0;
		}
	}
	&.open {
		div {
			&:nth-child(1){
				@include rotate(45);
				top: .7rem;
			}
			&:nth-child(2){
				opacity: 0;
			}
			&:nth-child(3){
				@include rotate(-45);
				bottom: .7rem;
			}
		}
	}
}

.mobile-account {
	@include align(y);
	left: calc(2.5rem + 3.5rem);
}

#mobile-menu {
	position: fixed;
	top: $header-total-mobile;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 5;
	overflow: auto;
	@include prefix('transition-timing-function', 'cubic-bezier(.9,.2,.2,.9)');
	@extend .transition;
	@include prefix('opacity', 0);
	@include prefix('pointer-events', 'none');
	&.show-menu {
		@include prefix('opacity', 1);
		@include prefix('pointer-events', 'inherit');
	}
	.mobile-inner {
		min-height: 70rem;
	}
	form {
		position: relative;
		input {
			&[type="search"]{
				width: 100%;
				padding-right: 4rem;
			}
		}
		input::-webkit-input-placeholder {
		  color: $border-color;
		}
		input::-moz-placeholder {
		  color: $border-color;
		}
		input:-ms-input-placeholder {
			color: $border-color;
		}
		input:-moz-placeholder {
		  color: $border-color;
		}
		button {
			background: none;
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			padding: 0;
			width: 3rem;
			svg {
				fill: $border-color;
			}
		}
	}
	ul {
		margin: 2.5rem 0;
		font-size: 2rem;
		padding: 0 2rem;
		li {
			margin: 0 0 2.5rem;
			list-style: none;
			a {
				text-decoration: none;
			}
		}
	}
	.upper-mobile-menu {
		padding: 2rem;
	}
	.lower-mobile-menu {
		background: $color-base;
		padding: 2rem 2rem 15rem;
		ul {
			padding: 0 2rem;
			li {
				font-size: 1.6rem;
				a {
					color: #fff;
				}
			}
		}
	}
}

.close-mobile {
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	@extend .transition;
	@include prefix('transform', 'rotate(45deg)');
	right: 2rem;
	top: 2rem;
	cursor: pointer;
	div {
		background: #fff;
		position: absolute;
		&:first-child {
			width: 100%;
			height: .1rem;
			top: 1.2rem;
			left: 0;
		}
		&:last-child {
			width: .1rem;
			height: 100%;
			top: 0;
			left: 1.2rem;
		}
	}
}

// --- Main Content ---------------------- //
.main-content {
	padding-top: $header-total-mobile;
	min-height: calc(100vh - #{$header-total-mobile});
	@include breakpoint(m){
		padding-top: $header-total;
		min-height: calc(100vh - #{$header-total});
	}
}

// --- Global layout ------------------- //
.media-block {
	background: $bg-tan;
	padding: 4rem 0;
	position: relative;
	> .wrapper {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	&.video {
		padding-top: 0;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 15%;
			background: #fff;
		}
	}
	&.pullquote {
		padding: 6rem 0 3rem;
		span,
		p,
		h1,h2,h3,h4,h5,h6 {
			display: inline-block;
			color: #000;
			letter-spacing: $spacing-wider;
			font-size: 1.2rem;
		}
		blockquote,
		blockquote p {
			text-align: center;
			@extend .lg-headline;
			font-size: 2.9rem;
			line-height: 3.2rem;
			position: relative;
			z-index: 1;
			color: $color-compliment;
			&:before {
				content: '';
				width: 27rem;
				height: 27rem;
				@include prefix('border-radius', '50%');
				background: #fff;
				@include align(xy);
				z-index: -1;
			}
		}
	}
	.video-wrapper {
		width: 100%;
		border: 6px solid #fff;
		position: relative;
		z-index: 1;
		margin-bottom: 1.5rem;
		@include prefix('box-shadow', '1px 1px 5px rgba(0,0,0,.2)');
	}
	blockquote,
	blockquote p {
		text-align: center;
		@extend .lg-headline;
		font-size: 2.9rem;
		line-height: 3.2rem;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			width: 27rem;
			height: 27rem;
			@include prefix('border-radius', '50%');
			background: #fff;
			@include align(xy);
			z-index: -1;
		}
	}
	@include breakpoint(m){
		padding: 8rem 0;
		min-height: 45rem;
		> .wrapper {
			padding: 0;
		}
		&.pullquote {
			padding: 16rem 0 6rem;
		}
		.video-wrapper {
			border: 12px solid #fff;
			margin-bottom: 3rem;
		}
	}
}

.global-promo {
	margin: 3rem 0;
	img {
		display: block;
		width: 100%;
		margin-bottom: 3rem;
	}
	.btn-wrap {
		text-align: center;
		.btn {
			background: $color-compliment;
			border-color: $color-compliment;
			width: 100%;
			max-width: 40rem;
		}
	}
	@include breakpoint(m){
		margin: 6rem 0;
		img {
			margin-bottom: 5rem;
		}
		.btn-wrap {
			.btn {
				padding: 1rem 5rem;
				width: inherit;
			}
		}
	}
}

.panel {
	@include prefix('opacity', 0);
	@include transition(.2s);
	@include prefix('transform', 'translate3d(0,-10px,0)');
	@include prefix('pointer-events', 'none');
	position: absolute;
	left: 0;
	top: 0;
	&.show {
		@include prefix('opacity', 1);
		@include prefix('transform', 'translate3d(0,0,0)');
		@include prefix('pointer-events', 'inherit');
	}
	.panel-inner {
		padding: 0 $padding-window;
	}
	@include breakpoint(m){
		.panel-inner {
			max-width: $wide;
			padding: 0;
			margin: 0 auto;
		}
	}
}

.panels-wrap {
	position: relative;
}

// --- Product Items --------------------- //
.product-item {
	position: relative;
	padding-bottom: $product-item-pad-bottom-mobile;
	padding-top: 3rem;
	@include transition(.15s);
	&:hover {
		@include prefix('box-shadow', '0 0 10px rgba(0,0,0,.1)');
		.product-item-details {
			.btn-wrap {
				.btn {
					background: $color-accent;
					color: #fff;
				}
			}
		}
	}
	> a {
		text-decoration: none;
		color: darken($color-base, 5%);
	}
	.product-item-image {
		position: relative;
		overflow: hidden;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 2% 1rem;
		img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0 auto;
			&.hover-img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				display: none;
				@include align(xy);
			}
		}
	}
	.product-item-details {
		padding: 0 $product-item-pad-sides-mobile;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 1.4rem;
		.product-item-title {
			@include clearfix();
			border-bottom: 1px solid #DFCDBF;
			padding-bottom: 1rem;
			> span {
				letter-spacing: $spacing-wider;
				display: inline-block;
				line-height: normal;
				@extend .font-semi;
			}
			.title {

			}
			.price {
				display: block;
			}
		}
		.btn-wrap {
			display: none;
		}
	}
	@include breakpoint(m){
		padding-bottom: $product-item-pad-bottom;
		.product-item-image {
			padding: 0 $product-item-pad-sides 1rem;
			img {
				max-height: 20rem;
				width: auto;
			}
		}
		.product-item-details {
			padding: 0 $product-item-pad-sides;
			.product-item-title {
				.title {
					float: left;
					max-width: 75%;
				}
				.price {
					float: right;
					max-width: 25%;
				}
			}
			.btn-wrap {
				clear: both;
				margin: 2rem 0 3rem;
				text-align: center;
				.btn {
					@include transition(.15s);
				}
			}
		}
	}
}

// --- Section header -------------------- //
.section-header {
	margin: 2rem 0 3rem;
	text-align: center;
	h1,
	h2 {
		@extend .lg-headline;
		@extend .font-utopia;
		font-style: italic;
		margin: 0;
	}
	p {
		margin-top: 1rem;
	}
	@include breakpoint(m){
		margin: 4rem 0 6rem;
		h1,
		h2 {

		}
	}
}

// --- Billboards ------------------------ //
.billboard {
	@extend .align-wrap;
	.wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}
}

.billboard-bg-img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	@include fillScreen($header-total-mobile, $min-win-height);
	@include breakpoint(m){
		@include fillScreen($header-total, $min-win-height);
	}
}

.billboard-bg-video-container {
	@include fillScreen($header-total, $min-win-height);
	position: relative;
	overflow: hidden;
}

.billboard-bg-video {
	position: absolute;
	/*min-width: 100%;
    min-height: 100%;*/
    width: 100%;
    height: auto;
    /*left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);*/
}

.billboard-img {
	.wrapper {
		position: absolute;
		left: 7.5%;
	}
	img {
		display: block;
		width: 100%;
	}
}

.billboard-text {
	padding: 3rem $padding-window 5rem;
	> .wrapper {
		padding: 0 $padding-window;
	}
	&.billboard-shop {
		display: block;
		background-color: rgba(255,255,255,.875);
		h1,
		h2 {
			margin: 0 0 2rem 0;
			font-size: 3.2rem;
			line-height: 3.2rem;
		}
		.rte {
			p {
				margin: 0;
			}
		}
	}
	h1,
	h2 {
		color: $color-compliment;
		margin: 0 0 2rem 0;
		padding-bottom: 2rem;
		border-bottom: 1px solid lighten($color-base, 40%);
		@extend .lg-headline;
		@extend .font-utopia;
	}
	p {
		color: darken($color-base, 20%);
		margin-bottom: 2rem;
	}
	@include breakpoint(m){
		padding: 0;
		position: absolute;
		bottom: 12%;
		right: 5%;
		max-width: 63rem;
		> .wrapper {
			padding: 0;
		}
	}
}

// --- Instagram feed -------------------- //
.instagram {
	@extend .bg-pattern;
	padding-top: 4rem;
	padding-bottom: 4rem;
	.section-header {
		h2 {
			color: $color-accent-dark;
			font-size: 3rem;
		}
	}
	@include breakpoint(m){
		/*margin-top: -$instagram-offset;*/
		padding-top: calc(#{$instagram-offset} + 4rem);
		padding-bottom: 8rem;
	}
}

#instafeed {
	@include clearfix();
	.ig-item {
		display: block;
		float: left;
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 2%;
		&:nth-child(4n+4){
			margin-right: 0;
		}
		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

// --- Featured Article ------------------ //
#featured-article {
	background: $bg-tan;
	padding-top: $padding-window;
	padding-bottom: calc(#{$padding-window} * 2);
	article {
		position: relative;
		background: $bg-tan;
		.icon {
			position: absolute;
			right: 3rem;
			top: 3rem;
			svg {
				fill: $color-accent;
			}
		}
		.pre-title {
			@extend .label;
		}
		.img-wrap {
			position: relative;
			margin-bottom: 2rem;
			img {
				display: block;
				width: 100%;
				height: auto;
			}
		}
		header {
			h1 {
				@extend .font-utopia;
				font-weight: 700;
			}
		}
	}
	@include breakpoint(m){
		margin: 3rem 0 0;
		padding: 0;
		article {
			padding: 4% 8%;
			@include clearfix();
			.img-wrap {
				float: left;
				width: 35%;
				margin-right: 6%;
				margin-bottom: 0;
			}
			.pre-title {
				font-size: 1.4rem;
              display:block;
			}
			header {
				float: left;
				width: 51%;
				position: relative;
				> div {
					/*@include align(y);*/
					padding-right: 20%;
				}
				h1 {
					font-size: 4rem;
				}
				.btn {
					margin-top: 2rem;
				}
			}
		}
	}
}

// --- Wysiwyg editors-------------------- //
.rte {
	h1,h2,h3,h4,h5,h6 {
		margin: $margin-text;
	}
	img {
		margin: 3rem 0;
		max-width: 100%;
	}
	blockquote {
		margin: 4rem 0;
	}
	ul,
	ol {
		padding-left: 2rem;
	}
	p {
		bold,
		strong {
			@extend .font-semi;
		}
	}
	@include breakpoint(m){
		blockquote {
			margin: 7rem 0;
		}
	}
}

// --- Home Page ------------------------- //
.template-index {
	.slider-wrap {
		.icon-arrow {
			top: calc(#{$min-win-height} / 2);
		}
		.billboard-text {
			background-color: rgba(255,255,255,.8);
			border-top: 5px solid lighten($color-accent, 20%);
			background: #fff;
			padding: 5rem $padding-window;
			h1,
			h2 {
				font-style: normal;
			}
		}
	}
	#home-article {
		background: transparent;
		article {
			background: $bg-tan;
		}
	}
	#featured-article {
		background: $bg-tan;
		margin-top: 4rem;
	}
	@include breakpoint(m){
		.slider-wrap {
			.billboard-text {
				@include align(y);
				right: 10%;
				bottom: inherit;
				max-width: 36rem;
				padding: 6rem 5rem;
			}
		}
		#featured-article {
			background: #fff;
		}
	}
}

#home-slider {
	.slick-dots {
		top: calc(#{$min-win-height} + 2rem);
		bottom: inherit;
		li {
			&.slick-active {
				button {
					&:before {
						content: '';
						display: block;
						width: $pag-dot;
						height: $pag-dot;
						background: #fff;
						@include align(xy);
						@include prefix('border-radius', 50%);
						border: 1px solid $color-accent-dark;
					}
					&:after {
						content: '';
						display: block;
						width: 1.8rem;
						height: 1.8rem;
						@include prefix('border-radius', 50%);
						background-color: rgba(247,205,146,1);
						@include align(xy);
						z-index: -2;
						opacity: .5;
						border: 1px solid $color-accent;
					}
				}
			}
		}
	}
	@include breakpoint(m){
		.slick-dots {
			top: inherit;
			bottom: 3rem;
		}
	}
}

#home-content {
	background-color: $bg-light;
	@include clearfix();
	position: relative;
	&:after {
		content: '';
		position: absolute;
		width: 100%;
		height: $section-margin;
		background: #fff;
		bottom: 0;
		left: 0;
		z-index: 0;
	}
	> .wrapper {
		padding: 0;
	}
	@include breakpoint(m){
		> .wrapper {
			padding: inherit;
		}
	}
}

#home-register-chat {
	@include breakpoint(m){
		@include clearfix();
		margin-bottom: $section-margin;
	}
}

#home-register-form {
	padding: 3rem $padding-window;
	background: #fff;
	span {
		@extend .label;
		font-size: 1.4rem;
		margin-bottom: 3rem;
	}
	.submit-wrap {
		clear: both;
		margin: 0;
	}
	form {
		input {
			&:not(.btn){
				border-top: none;
				border-left: none;
				border-right: none;
				padding: .2rem 0;
			}
		}
	}
	.field-wrap {
		margin-bottom: 2rem;
	}
	@include breakpoint(m){
		padding: 5rem 7rem 4rem;
		float: left;
		width: 65%;
		margin-right: 5%;
		form {
			input {
				font-size: 1.4rem;
			}
		}
	}
}

#home-chat {
	min-height: 25rem;
	@extend .align-wrap;
	@include breakpoint(m){
		float: right;
		width: 30%;
	}
}

#chat-circle {
	@include align(xy);
	text-align: center;
	width: 100%;
	@extend .bg-circle;
	padding: 0 $padding-window;
	h2 {
		color: $color-compliment;
		margin: 0 0 1rem 0;
		font-size: 2.9rem;
		line-height: 3.2rem;
		@extend .font-utopia;
		font-style: italic;
	}
	> span {
		text-align: center;
		font-size: 1.2rem;
		> * {
			display: inline-block;
			vertical-align: bottom;
		}
		a {
			color: $color-base;
			letter-spacing: $spacing-wider;
			@extend .font-semi;
		}
		.icon-chat {
			margin-right: .5rem;
			svg {
				fill: lighten($color-base, 40%);
			}
		}
	}
	@include breakpoint(m){
		h2 {

		}
	}
}

#home-features {
	clear: both;
	background: #fff;
	position: relative;
	z-index: 1;
	.home-feature-item {
		.hfi-pic {
			@include bg();
			min-height: 40rem;
			height: 50vh;
		}
		.hfi-text {
			padding: 15% 9%;
			position: relative;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 15%;
				width: .6rem;
				height: 33.33%;
				background: $color-compliment;
			}
			.icon {
				position: absolute;
				top: 2rem;
				right: 2rem;
				svg {
					fill: $color-accent;
				}
			}
			h3 {
				letter-spacing: $spacing-wider;
				font-size: 1.8rem;
				margin: 0 0 2rem 0;
				@extend .font-semi;
			}
			p {}
		}
	}
	@include breakpoint(m){
		@include clearfix();
		margin-top: $section-margin;
		width: 82%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10rem;
		.home-feature-item {
			@include clearfix();
			&:nth-child(even){
				.hfi-pic {
					float: left;
				}
				.hfi-text {
					float: right;
				}
			}
			&:nth-child(odd){
				.hfi-pic {
					float: right;
				}
				.hfi-text {
					float: left;
				}
			}
			.hfi-pic {
				width: 55%;
				min-height: 45rem;
			}
			.hfi-text {
				width: 45%;
				padding: 10% 9%;
				@include prefix('box-shadow', '1px 2px 7px rgba(0,0,0,.1)');
				.icon {
					top: 4rem;
				}
				h3 {

				}
				p {
					line-height: 2rem;
					margin: 0;
				}
			}
		}
	}
}

#home-collection {
	.collection-wrapper {
		margin-top: 0;
		.product-item {
			float: left;
			margin-bottom: 0;
			max-height: 48rem;
			padding-bottom: calc(#{$product-item-pad-bottom-mobile} + 4rem);
			.product-item-details {
				padding-left: 0;
				padding-right: 0;
				.product-item-title {
					font-size: 1.4rem;
					.title {

					}
					.price {

					}
				}
				.btn-wrap {
					display: block;
					text-align: center;
				}
			}
		}
	}
	.icon-arrow {
		display: block;
		top: calc(50% - (#{$product-item-pad-bottom}/2));
		&.arrow-prev {
			left: -1.5rem;
		}
		&.arrow-next {
			right: -1.5rem;
		}
		svg {
			fill: lighten($color-base, 30%);
		}
	}
	.slider-wrap {
		width: calc(100% - (#{$padding-window} * 2));
		margin: 0 auto;
	}
	.mobile-slick {
		@include clearfix();
	}
	@include breakpoint(m){
		margin: calc(#{$section-margin} / 2) 0 0;
		.collection-wrapper {
			padding: 0;
			max-width: $med;
			.product-item {
				margin-bottom: 5%;
				max-height: inherit;
				padding-bottom: calc(#{$product-item-pad-bottom} + 4rem);
				&:nth-child(2n+2){
					margin-right: 5%;
				}
				.product-item-details {
					padding: 0 12%;
					.product-item-title {
						.title {
							float: left;
						}
						.price {
							float: right;
						}
					}
				}
			}
		}
		.icon-arrow {
			display: none!important;
		}
		.slider-wrap {
			width: 100%;
			margin: 0;
		}
	}
}

// --- Collection Page ------------------- //
.template-collection {
	.media-block {
		background: transparent;
	}
	#featured-article {
		margin-top: 0;
	}
}

#collection-header {
	.billboard-text {
		padding: 4rem;
		h1, h2 {
			color: $color-base;
		}
		h3 {
			letter-spacing: $spacing-reg;
			@extend .font-semi;
			margin-top:4rem;
		}
	}
	.billboard-bg-img {
		@include fillScreen($header-total, 67rem);
	}
	&.section-header {
		margin-top: 8rem;
	}
}

.collection-wrapper {
	width: 100%;
	@include clearfix();
	.product-item,
	.collection-item {
		float: left;
		width: 50%;
		margin-bottom: 5%;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		&:nth-child(2n+2){
			margin-right: 0;
		}
		&.type-tile {
			border-top: 5px solid lighten($color-accent, 20%);
			padding-bottom: 3rem;
			height: auto!important;
			float: none;
			width: 100%;
			margin-right: 0;
			margin-bottom: 0;
			clear: both;
			.tile-inner {
				padding-left: calc(#{$product-item-pad-sides} / 1.5);
				padding-right: calc(#{$product-item-pad-sides} / 1.5);
				h2 {
					margin: 0 0 2rem 0;
					@extend .font-utopia;
					a {
						text-decoration: none;
						color: $color-base;
					}
				}
				.btn {
					font-size: 1.2rem;
				}
				.accessories-link {
					text-decoration: none;
					font-size: 1.3rem;
				}
			}
		}
	}
	.product-type-group {
		@include clearfix();
		clear: both;
		margin-bottom: 3rem;
		.product-item {
			&.type-tile {
				float: left;
				h2 {
					@extend .lg-headline;
				}
			}
		}
	}
	@include breakpoint(m){
		max-width: $wide;
		margin-top: 8rem;
		margin-bottom: 8rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: $padding-window;
		padding-right: $padding-window;
		.product-item,
		.collection-item {
			width: 30%;
			margin-right: 5%;
			margin-bottom: 5%;
			padding-left: 0;
			padding-right: 0;
			&:nth-child(2n+2){
				margin-right: 5%;
			}
			&:nth-child(3n+3){
				margin-right: 0;
			}
			&.type-tile {
				@include prefix('box-shadow', '0 0 10px rgba(0,0,0,.1)');
				width: 30%;
				margin-right: 5%;
				clear: none;
				.tile-inner {
					padding-left: $product-item-pad-sides;
					padding-right: $product-item-pad-sides;
					h2 {

					}
					.btn {
						font-size: 1.1rem;
					}
					.accessories-link {
						font-size: 1.2rem;
					}
				}
			}
		}
		.product-type-group {
			margin-bottom: 0;
			.product-item {
				&:nth-child(3n+3) {
					margin-right: 0;
				}
			}
		}
	}
}

#accessories {
	padding-top: calc(#{$header-total} + 2rem);
}

.pagination-custom {
	@include row($wide);
	font-size: 1.6rem;
	text-align: center;
	padding: 2rem 0;
	li {
		display: inline-block;
		margin: 0 1rem;
		list-style: none;
		letter-spacing: normal;
		a {
			display: block;
			letter-spacing: inherit;
		}
	}
}

// --- Customizer & Standard PDP common -- //
.trigger {
	cursor: pointer;
}

.detail-box {
	margin-bottom: 1rem;
	> span {
		@extend .label;
	}
	@include breakpoint(m){
		margin-bottom: 4rem;
	}
}

#swatch-box-mobile {
	margin-bottom: 0;
}

.color-swatches {
	@include clearfix();
	margin: 1rem 0;
	clear: both;
	.header {
		margin: 0;
		width: 100%;
		position: relative;
		h3 {
			margin: 0;
		}
		&.open {
			.icon {
				@include rotate(180);
			}
		}
		.remove {
			display:none;
			color: $color-accent;
			margin-left: 15px;
			cursor: pointer;
		}
		&.active {
			.remove {
				display:inline;
			}
		}
		.icon {
			@include align(y);
			right: 1.5rem;
			@include transition(.2s);
			@include prefix('transform-origin', '50% 25%');
			svg {
				fill: darken($border-color, 20%);
			}
		}
	}
	@include breakpoint(m){
		.header {
			padding: 0;
			border: none;
			width: inherit;
		}
	}
}

.color-name {
	display: block;
	clear: both;
	margin: 0;
}

.swatch-wrap {
	@include clearfix();
	margin: 0;
	// display: none;
	overflow: auto;
	padding: .5rem 0;
	@include breakpoint(m){
		display: block;
	}
}

.swatch {
	display: block!important;
	height: 3rem;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	margin: 0;
	float: left;
	width: 24%;
	margin: 0 1.33% 1.33% 0;
	border: 1px solid $border-color;
	&:nth-child(4n+4){
		margin-right: 0;
	}
	&.active {
		border-style: solid;
		border-color: #000;
		border-width: 1px;
		cursor: default;
	}
	@include breakpoint(m){
		width: 8rem;
		height: 2.4rem;
		margin: 0 .5rem .8rem 0;
		&:nth-child(4n+4) {
			margin-right: .5rem;
		}
	}
	&.swatch-img {
		width: 50%;
		height: 100px;
		background: transparent;
		margin: 0 -1px -1px 0;
		position: relative;
		display: flex !important;
		//align-items: center;
		overflow: hidden;

		@include breakpoint(m){
			//width: 40%;
			width: 118px;
		}

		&.active {
			z-index: 2;
			border-color: $color-accent;
		}

		img {
			display: block;
			position: relative;
			@include prefix('transform', 'translate3d(0, -53%, 0) scale(2)');
			@include prefix('pointer-events', 'none');
			//width: auto;
			//height: auto;
			//max-width: 90%;
			//max-height: 90%;
			//margin: 0 auto;
		}
	}
}





.coconut-white {
	background-color:#f0f0ea;
}


.frost-grey {
	background-color:#adbcc9;
}


.gala-green {
	background-color:#009900;
}


.mercury-coconut-white {
	background-color:#cccccc;
}


.mercury-rock-red {
	background-color:#ea3737;
}


.midnight-black {
	background-color:#000000;
}


.rose-gold {
	background-color:#fad4b7;
}


.snakeskin-black {
	background-color:#000000;
}


.solar-gold {
	background-color:#f0c339;
}


.cappuccino {
	background-color:#331e09;
}


.green {
	background-color:#6ecb4e;
}


.grey {
	background-color:#969995;
}


.lollipop-blue {
	background-color:#4fc0e2;
}


.lollipop-brown {
	background-color:#b79069;
}


.lollipop-grey {
	background-color:#c7c6c5;
}


.lollipop-pink {
	background-color:#f8a8c9;
}


.black {
	background-color:#000000;
}


.bermuda-blue {
	background-color:#05AEB6;
}


.gala-green {
	background-color:#6caf44;
}


.harvest-orange {
	background-color:#f05a28;
}


.rock-red {
	background-color:#ec2027;
}


.rosy-pink {
	background-color:#e17cb1;
}


.henna-brown {
	background-color:#7f553a;
}


.midnight-black {
	background-color:#000000;
}


.canary-yellow {
	background-color:#f8ef22;
}


.provence-purple {
	background-color:#5e2d87;
}


.navy-blue {
	background-color:#1F2D5D;
}


.lunar-silver {
	background-color:#b3b3b0;
}


.white {
	background-color:#FFFFFF;
}


.noir {
	background-color:#000000;
}


.mercury {
	background-color:#6d6e71;
}


.silver {
	background-color:#b8b8b8;
}


.rose-gold {
	background-color:#f0cb9c;
}


.gold {
	background-color:#cea941;
}


.cappuccino {
	background-color:#48230F;
}


.natural {
	background-color:#f1bd83;
}


.frost-grey {
	background-color:#818486;
}


.ebony {
	background-color:#000000;
}


.natural-wheat {
	background-color:#ebebe3;
}


.oak {
	background-color:#ae5c23;
}


.snakeskin-grey {
	background-color:#7d7777;
}


.sonar-gold {
	background-color:#ffb349;
}


.blossom-pink {
	background-color:#e17cb1;
}


.paradise-blue {
	background-color:#05AEB6;
}


.downtown-denim {
	background-color:#33363f;
}


.white-yellow {
	background-color:#f8ef22;
}


.black-green {
	background-color:#009900;
}


.black-orange {
	background-color:#f99e1e;
}


.black-yellow {
	background-color:#f8ef22;
}


.white-green {
	background-color:#009900;
}


.white-orange {
	background-color:#f99e1e;
}


.navy {
	background-color:#1F2D5D;
}


.cocomat {
	background-color:#000000;
}


.pocket-spring {
	background-color:#ebebe3;
}


.coconut-white-organic {
	background-color:#f0f0ea;
}


.frost-grey-organic {
	background-color:#787c7f;
}


.henna-brown-organic {
	background-color:#7f553a;
}


.navy-blue-organic {
	background-color:#1F2D5D;
}


.midnight-black {
	background-color:#000000;
}


.snakeskin-black {
	background-color:#000000;
}


.natural-sandstone {
	background-color:#f1bd83;
}


.henna-brown-leatherette {
	background-color:#312a28;
}


.oak-white {
	background-color:#ae5c23;
}


.frost-grey-coconut-white {
	background-color:#818486;
}


.natural-coconut-white {
	background-color:#f1bd83;
}


.lollipop-bermuda-blue {
	background-color:#4fc0e2;
}


.lollipop-henna-brown {
	background-color:#b79069;
}


.lollipop-frost-grey {
	background-color:#c7c6c5;
}


.lollipop-rosy-pink {
	background-color:#f8a8c9;
}


.natural-wheat-organic {
	background-color:#ebebe3;
}


.alma-mini {
	background-color:#000000;
}


.alma-papa {
	background-color:#000000;
}


.alma-max {
	background-color:#000000;
}


.luxo {
	background-color:#000000;
}


.titanium {
	background-color:#6d6e71;
}


.sandstone {
	background-color:#f1bd83;
}


.wooly {
	background-color:#f1e1cb;
}


.black-pink {
	background-color:#c73e8e;
}


.black-blue {
	background-color:#1992d0;
}


.bicycle {
	background-color:#db622a;
}


.alphabet {
	background-color:#000000;
}


.high-seas {
	background-color:#205372;
}


.cappuccino-coconut-white {
	background-color:#48230F;
}


.frost-grey_coconut-white {
	background-color:#818486;
}


.cappuccino_coconut-white {
	background-color:#48230F;
}


.natural_coconut-white {
	background-color:#f1bd83;
}


.unicorn {
	background-color:#f8a8c9;
}


.mermaid {
	background-color:#f8a8c9;
}


.toucan {
	background-color:#000000;
}


.breathe {
	background-color:#000000;
}


.marigold {
	background-color:#e9a916;
}


.riviera {
	background-color:#4d7cbc;
}


.rosewater {
	background-color:#f3dae1;
}


.persimmon {
	background-color:#f5786b;
}


.quilted-parsnip-organic-muslin {
	background-color:#eee3e1;
}


.quilted-bay-blue-organic-muslin {
	background-color:#a7b3c9;
}


.diesel-denim {
	background-color:#66646c;
}


.marble {
	background-color:#aaabaf;
}


.parsnip-organic-muslin {
	background-color:#eee3e1;
}


.bay-blue-organic-muslin {
	background-color:#a7b3c9;
}


.sting-ray-organic {
	background-color:#4084d5;
}


.rose-hip-organic {
	background-color:#d9c4c1;
}


.beach-house-grey {
	background-color:#b19686;
}


.beach-house-white {
	background-color:#f0f0ea;
}


.beach-house-white-coconut-white-organic {
	background-color:#f0f0ea;
}


.beach-house-white-frost-grey-organic {
	background-color:#adbcc9;
}


.beach-house-white-navy-blue-organic {
	background-color:#1F2D5D;
}


.cappuccino-coconut-white-organic {
	background-color:#f0f0ea;
}


.cappuccino-frost-grey-organic {
	background-color:#adbcc9;
}


.cappuccino-navy-blue-organic {
	background-color:#1F2D5D;
}


.natural-coconut-white-organic {
	background-color:#f0f0ea;
}


.natural-frost-grey-organic {
	background-color:#adbcc9;
}


.natural-navy-blue-organic {
	background-color:#1F2D5D;
}


.bay-blue-organic-quilted {
	background-color:#a7b3c9;
}


.alligator-organic {
	background-color:#97a6d2;
}


.pods-organic {
	background-color:#283e5c;
}


.rosehip-organic {
	background-color:#8b7b65;
}


.blowfish-organic-muslin {
	background-color:#19439D;
}


.starz-organic-muslin {
	background-color:#9fa0a0;
}


.alphabet-organic-muslin {
	background-color:#000000;
}


.leaves-organic-muslin {
	background-color:#efd5ce;
}


.grey {
	background-color:#adbcc9;
}


.blush {
	background-color:#fec7c7;
}


.merino-wooly {
	background-color:#f1e1cb;
}


.shibori-organic {
	background-color:#2d5d93;
}


.sea-life-organic {
	background-color:#92C0A8;
}


.mesa-organic {
	background-color:#D39772;
}


.flora-organic {
	background-color:#E7C0C0;
}


.denim-pods-organic {
	background-color:#283e5c;
}


.alphabet-black {
	background-color:#000000;
}


.mauve {
	background-color:#ebd1d0;
}


.slate-grey {
	background-color:#b0c0cc;
}


.coconut-white-cotton-seat-pods {
	background-color:#f0f0ea;
}


.midnight-black-cotton-seat-pods {
	background-color:#000000;
}


.blush-cotton-seat-pods {
	background-color:#fec7c7;
}


.traveler {
	background-color:#000000;
}


.plum-blossoms {
	background-color:#f2a0a1;
}


.tranquility-strokes {
	background-color:#c5f1e0;
}


.blossom {
	background-color:#eabebc;
}


.abstract {
	background-color:#9fd5d1;
}


.future-series-strokes {
	background-color:#7ba294;
}


.future-series-plum {
	background-color:#c96175;
}


.product-help {
	margin: 1rem 0;
	.help {
		@extend .label;
		font-size: 1.4rem;
		display: block;
		.icon {
			display: inline-block;
			vertical-align: bottom;
			margin-right: .3rem;
			margin-left: .6rem;
			cursor: pointer;
			svg {
				fill: lighten($color-base, 40%);
			}
		}
		.chat-text {
			font-weight: 400;
			text-decoration: underline;
			color: lighten($color-base, 40%);
			cursor: pointer;
		}
	}
	.help-meta {
		font-size: 1.4rem;
		color: lighten($color-base, 40%);
		letter-spacing: $spacing-reg;
	}
	@include breakpoint(m){
		margin: 4rem 0;
		.help-meta {
			font-size: 1.2rem;
		}
	}
}

.product-meta {
	border-top: none;
	padding: 2rem 0 1rem;
	> .wrapper {
		padding: 0;
	}
	@include breakpoint(m){
		border-top: 1px solid $border-color;
		padding: 8rem 0 2rem;
	}
}

#product-meta-controller {
	ul {
		font-size: 0;
		letter-spacing: 0;
		margin: 0;
		@include clearfix();
		li {
      $inactive-color: #606060;

      text-align: center;

			margin: 0;
			@extend .panel-trigger;
			display: block;
			float: left;
			cursor: pointer;
			@include transition(.2s);
			position: relative;
			min-width: 50vw;
			@extend .font-semi;

      text-transform: uppercase;
      font-weight: bold;

      color: $inactive-color;

			&:first-child {
				text-indent: 2.5rem;
			}
			&:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 1px;
				background: $border-color;
				left: 0;
				bottom: 0;
        z-index: 0;
			}
			&.active {
				color: $color-accent;
			}
			span {
				font-size: 1.1rem;
				letter-spacing: $spacing-wide;
			}
          margin-top:15px;
		}
	}
	@include breakpoint(m){
		ul {
			text-align: center;
			width: auto!important;
			li {
				display: inline-block;
				text-align: center;
				min-width: inherit;
				width: auto;
				float: none;
              	padding:0 15px;
				&:first-child {
					text-indent: 0;
				}
				span {
					font-size: 1.2rem;
				}
			}
		}
	}
}

.product-meta-panels {
	position: relative;
	// min-height: 35rem;
	.panel {
		padding: 2rem 0;
		width: 100%;
		// height: 100%;
		overflow: auto;
	}
	@include breakpoint(m){
		// min-height: 60rem;
		.panel {
			padding: 4rem 0;
		}
	}
}

.horizontal-wrapper {
	position: relative;
	overflow: hidden;
	&:after {
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 8rem;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&0+0,1+96 */
		background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
		right: 0;
		top: 0;
		@include prefix('pointer-events', 'none');
	}
	&:before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 20px;
		background: #fff;
		left: 0;
		bottom: 0;
		z-index: 0;
	}
}

// --- Customizer  ----------------------- //
.customize-header {
	> .wrapper {
		padding: 0;
	}
	.billboard-text {
		position: relative;
		padding: 0;
		width: 100%;
		right: 0;
		h1 {
			font-size: 3.3rem;
			line-height: 3.3rem;
			color: #000;
			font-style: normal;
		}
		.panel {
			top: calc(#{$customize-desc-height} - 4rem);
			height: $customize-desc-height;
			overflow-y: auto;
      overflow-x: initial;
			&.desktop-only {
				font-size: 0;
				color: #fff;
			}
		}
	}
	@include breakpoint(m){
		background: rgba(216,216,216,.25);
		padding-bottom: 4rem;
		@include fillScreen($header-total, 55rem);
		.billboard-text {
			width: 45%;
			bottom: 15%;
			overflow: inherit;
			position: absolute;
			.panel {
				&.desktop-only {
					font-size: $font-size-base;
					color: $color-base;
				}
			}
		}
	}
	@include breakpoint(xl){
		.billboard-text {
			h1 {
				font-size: 6rem;
				line-height: 6rem;
			}
			.panel {
				top: calc(#{$customize-desc-height} - 1rem);
			}
		}
	}
}

#collection-header-toggle {
	height: calc(#{$customize-header-trigger-height} - .4rem);
	&:before {
		bottom: -2.5rem;
	}
	ul {
		margin: 0;
		@include clearfix();
		border-bottom: 1px solid $border-color;
		left: 0;
		top: 0;
		min-width: 100vw;
		li {
			@include transition(.2s);
			@extend .panel-trigger;
			display: block;
			float: left;
			margin: 0;
			list-style: none;
			cursor: pointer;
			font-size: 1.4rem;
			line-height: 5.1rem;
			//min-width: 50vw;
			letter-spacing: $spacing-wider;
			padding-right:30px;
			padding-left:30px;
			&:last-child {
				margin-right: 0;
			}
			&.active {
				color: $color-accent;
			}
			@include breakpoint(m) {
				padding-right:0;
				padding-left:0;
			}
		}
	}
	@include breakpoint(m){
		height: auto;
		.inner-slide {
			padding: 0;
		}
		ul {
			position: inherit;
			left: inherit;
			top: inherit;
			border: none;
			height: auto;
			margin: calc(#{$customize-desc-height} + 3rem) 0 0 0;
			min-width: inherit;
			width: 100%!important;
			li {
				margin: 0 4rem 1rem 0;
				width: auto!important;
				min-width: inherit;
				line-height: inherit;
				font-size: 1.2rem;
				color: lighten($color-base, 30%);
				&:first-child {
					text-indent: 0;
				}
			}
		}
		&:before {
			display: none;
		}
		&:after {
			display: none;
		}
	}
}

.header-image-wrap {
	position: relative;
	height: calc(#{$customize-header-height} - #{$customize-header-trigger-height});
	background: rgba(216,216,216,.25);
	h1 {
		margin: 0;
		text-align: center;
		padding: 2rem;
		@extend .lg-headline;
		@extend .font-utopia;
		font-size: 3.5rem;
	}
	.panel {
		height: calc(#{$customize-header-height} - 13.8rem);
		width: 100%;
		top: inherit;
		bottom: 0;
		img {
			display: block;
			width: 100%;
			max-width: 32rem;
			height: auto;
			@include align(xy);
		}
	}
	&.crib-img {
		.panel {
			img {
				height: auto;
				width: 75%;
				max-width: 40rem;
			}
		}
	}
	@include breakpoint(m){
		width: 55%;
		height: 100%;
		float: left;
		background: none;
		.panel {
			height: 100%;
			img {
				top: inherit;
				@include prefix('transform', 'translate3d(-50%, 0, 0)');
				bottom: 10%;
				max-width: 40rem;
			}
		}
		&.crib-img {
			.panel {

			}
		}
	}
}

#mobile-collection-header-acc {
	.mobile-panel {
		padding: $padding-window;
		display: none;
	}
}

#configurator {
	padding: 2rem 0;
	@include breakpoint(m){
		padding: 5rem 0;
	}
}

.config-steps {
	overflow: hidden;
	position: relative;
	z-index: 2;
	margin-bottom: 4rem;

	.config-steps-heading {
		margin-bottom: 1em;
		display: flex;
		justify-content: space-between;

		@include breakpoint(mobile-l) {
			flex-direction: column;
		}

		@include breakpoint(mobile-m) {
			margin-top: 4rem;
		}
	}

	.config-steps-title {
		@extend .label;
		font-size: 1.2rem;

		@include breakpoint(mobile-m) {
			text-align: center;
			font-size: 1.6rem;
		}
	}

	.config-steps-types {
		display: flex;

		@include breakpoint(mobile-m) {
			justify-content: center;
		}
	}

	.config-steps-type {
		@extend .label;
		margin-left: 20px;
		@include breakpoint(m) {
			font-size: 0.9rem;
		}
		&:first-child {
			margin-left: 0;
		}
		&:before {
			content: "";
			float: left;
			width: 10px;
			height: 10px;
			margin-right: 5px;
			margin-top: 4px;
			vertical-align: middle;
			@include breakpoint(m) {
				margin-top: 5px;
			}
		}
	}

	.config-steps-type-required {
		color: #393939;
		&:before {
			background-color: #4A494A;
		}
	}

	.config-steps-type-optional {
		color: #CECECE;
		&:before {
			background-color: #D8D8D8;
		}
	}

	.config-steps-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.config-steps-item {
		border-bottom: 5px solid #d8d8d8;
		width: 31%;
		text-align: center;
		@extend .font-semi;
		font-size: 1rem;
		font-weight: bold;
		padding-bottom: 6px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		margin-bottom: 1rem;
		.config-steps-item-checkmark {
			display: none;
			position: absolute;
			top: 5px;
			left: 5px;
			color: #F68C17;
		}
		&.has-selection {
			.config-steps-item-checkmark {
				display: block;
			}
		}
	}

	.config-steps-item-required {
		border-color: #4A4A4A;
	}

	.config-steps-item-title {
		padding-top: 7px;
		line-height: 1.5em;
		width: 100%;
		letter-spacing: .12em;
	}

	.config-steps-item-img {
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
}

.inner-slide {
	overflow-x: auto;
	padding-bottom: 2rem;
	&:after {
		content: '';
		background: #fff;
		height: 15px;
		width: 100%;
		z-index: 4;
		bottom: 0;
		left: 0;
	}
}

#config-stage {
	position: relative;
	display: flex;
	align-items: center;
	@include breakpoint(mobile-m) {
		flex-direction: column;
	}
	.config-stage-left {
		min-height: 25rem;
		position: relative;
	}
	.config-stage-left-bottom {
		position: relative;
	}
	.config-stage-right {

	}
	.panel {
		width: 100%;
	}
	.panel.show {

	}
	@include breakpoint(mobile-m){
		.config-stage-center {
			order: 1;
			width: 100%;
		}
		.config-stage-left {
			order: 2;
			width: 100%;
		}
		.config-stage-right {
			order: 3;
			width: 100%;
		}
	}
	@include breakpoint(m){
		@include clearfix();
		// @include fillScreen($header-total, 55rem);
		// max-height: 55rem;
		.config-stage-left {
			width: 33.33%;
			padding-right: 5%;
		}
		.config-stage-left-bottom {
			height: 100%;
		}
		.config-stage-center {
			width: 33.33%;
		}
		.config-stage-right {
			width: 33.33%;
			padding-left: 5%;
			@include clearfix();
		}
		.panel {
			// height: 100%;
		}
	}
}

#config-preview, .configurator-v2__preview-image-view {
	position: relative;
	height: 40rem;
	@include breakpoint(m) {
		&.crib-img {
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	img {
		display: block;
		// height: 30rem;
		width: auto;
		margin: 0 auto;

		@include breakpoint(mobile-m) {
			max-height: 40rem;
		}
	}
	.overlay-img {
		left: 0;
		width: 100%;
		&:not(.composite){
			@include align(y);
		}
		&:nth-child(6){
			z-index: 6;
		}
		&:nth-child(5){
			z-index: 5;
          img{width:100% !important;height:100% !important;}
		}
		&:nth-child(4){
			z-index: 4;
          img{width:100% !important;height:100% !important;}
		}
		&:nth-child(3){
			z-index: 3;
          img{width:100% !important;height:100% !important;}
		}
		&:nth-child(2){
			z-index: 2;
          img{width:100% !important;}
		}
		&:nth-child(1){
			z-index: 1;
		}

    &.base-image {
      position: static;
      transform: none;
    }
	}
	@include breakpoint(m){
		width: 100%;
		height: 100%;
		img {
			// height: 50rem;
		}
	}
}

.composite {
	@include prefix('transform', 'translateY(-100%)');
	position: absolute;
}

#build-product {
	position: relative;
	@include breakpoint(mobile-m) {
		display: flex;
		flex-direction: column;
	}
	.btn-wrap {
		margin-top: 1.5rem;
		margin-bottom: 4rem;
		@include breakpoint(mobile-m) {
			order: -1;
			margin-top: 4rem;
			margin-bottom: 6rem;
		}
		.btn {
			width: 100%;
			max-width: 40rem;
			text-align: center;
			font-size: 1.4rem;
			@extend .font-semi;
			padding: 1.5rem 6rem;
			margin-top: 6rem;
			@include breakpoint(mobile-m) {
				display: block;
				margin: 0 auto;
			}
		}
	}
	h1 {
		font-size: 3.7rem;
		@extend .font-utopia;
		word-wrap: break-word;
	}
	.product-prices {
		@include priceline($color-accent);
		margin-bottom: 2rem;
		@extend .font-semi;
		color: #000;
	}
	.mobile-only {
		min-height: 6rem;
		.panel {
			background: #fff;
			z-index: 9;
		}
	}
	@include breakpoint(m){
		.unvert-y {
			padding-left: 16%;
			margin-top: 0;
		}
		.btn-wrap {
			.btn {
				font-size: inherit;
				width: auto;
				font-size: 1.2rem;
			}
		}
		.product-prices {
			margin-bottom: 0;
		}
	}
}

#config-product-meta {
	.product-meta-panels {
		// min-height: 30rem;
	}
	@include breakpoint(m){
		.product-meta-panels {
			// min-height: 60rem;
		}
	}
}

#in-the-box {
	.parts-wrap {
		text-align: center;
		.part {
			display: inline-block;
			max-width: 70%;
			padding: 0 1rem;
			margin-bottom: 2rem;
			img {
				display: block;
				width: auto;
				margin: 0 auto;
			}
		}
	}
}

#gallery {
	.slider-wrap {
		margin: 0 auto;
		.slick {
			img {
				display: block;
				width: 100%;
			}
		}
	}
}

#lifestyle-images {
	@include clearfix();
	.slick-slide {
		margin: 0 .5rem;
	}
	@include breakpoint(m){
		.slick-slide {
			margin: 0;
		}
	}
}



// --- Product Page ---------------------- //
#product-stage {
	@include breakpoint(m){
		min-height: 40rem;
		// height: 70vh;
		//@include fillScreen($header-total, 50rem);
	}

	form {
		display: flex;
		justify-content: space-between;
		align-items: center;

		@include breakpoint(mobile-m){
			flex-direction: column;
		}
	}
}

.product-upper {
	margin-top: 4rem;
	margin-bottom: 4rem;
	form {
		@include clearfix();
		position: relative;
		height: 100%;
	}
	.mobile-only {
		// text-align: center;
		h1 {
			margin: 0;
			padding: 2rem 0;
			@extend .lg-headline;
			@extend .font-utopia;
		}
	}
	#product-details {
		.rte {
			color: lighten($color-base, 10%);
			font-size: 1.2rem;
			height: 20rem;
			overflow: auto;
			p {
				color: lighten($color-base, 10%);
				font-size: 1.2rem;
			}
			h1,h2,h3,h4,h5,h6 {
				color: lighten($color-base, 10%);
			}
		}
	}
	#product-images {
		height: 100%;
		width: 100%;
		position: relative;
		img {
			width: auto;
			margin: 0 auto;
			max-height: 100%;
		}
	}
	#product-form {
		overflow: hidden;
		text-align: left;
		h1 {
			margin-bottom: $product-margins;
			@extend .lg-headline;
			@extend .font-utopia;
			word-break: break-word;
		}
		.product-prices {
			margin-bottom: 0;
			font-size: 1.8rem;
			color: #000;
			@include priceline($color-accent);
			@extend .font-semi;
		}
		.btn-wrap {
			.btn {
				width: 100%;
				max-width: 40rem;
				padding: 1.5rem 6rem;
				margin-top: 2rem;
			}

			@include breakpoint(mobile-m){
				margin-bottom: 4rem;
				margin-top: 2rem;
			}
		}
		form {
			margin-bottom: $product-margins;
			ul {
				li {
					list-style: none;
				}
			}
			.selector-wrapper {
				margin-bottom: $product-margins;
				.selection {
					@extend .selector-labels;
				}
			}
			.product-quantity {
				margin-bottom: $product-margins;
				label {
					@extend .selector-labels;
				}
			}
		}
	}
	@include breakpoint(mobile-m) {
		.product-stage-left {
			order: 2;
			width: 100%;
		}
		.product-stage-center {
			order: 1;
			width: 100%;
		}
		.product-stage-right {
			order: 3;
			width: 100%;
		}
	}
	@include breakpoint(m){
		.product-stage-left {
			width: 33.33%;
			padding-right: 5%;
			position: relative;
		}
		.product-stage-center {
			width: 33.33%;
			height: 100%;
		}
		.product-stage-right {
			width: 33.33%;
			padding-left: 5%;
			position: relative;
			@include clearfix();
		}
		#product-images {
		}
		#product-form {
			height: 100%;
			position: relative;
			.btn-wrap {
				.btn {
                  width: auto;
                  padding-left: 10px;
                  min-width: 210px;
                  padding-right: 10px;
				}
			}
		}
	}
}

#product-featured {
	margin-bottom: 2rem;
	width: 100%;
	max-height: 100%;

	img {
		display: block;
		width: 100%;
	}

	&.loading {
		background: url('spinner.gif') no-repeat center;
	}
}

.product-thumbs {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	@include breakpoint(mobile-m){
		margin-bottom: 4rem;
	}

	.product-thumbs-item {
		margin: 3px;
		width: 50px;
		height: 50px;
		border: 2px solid #969696;
		display: none;
		opacity: 1;
		@include transition(.2s);

		&:hover {
			opacity: .6;
		}

		&.active {
			border-color: #fa9e1c;
			cursor: default;

			&:hover {
				opacity: 1;
			}
		}

		img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			max-height: 100%;
		}
	}
  .product-thumb-video{
    margin: 3px;
    width: 50px;
    height: 50px;
    border: 2px solid #969696;
    opacity: 1;
    @include transition(.2s);

    &:hover {
      opacity: .6;
    }
    &.active {
      border-color: #fa9e1c;
      cursor: default;

      &:hover {
        opacity: 1;
      }
    }

    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.related-wrapper {
	@include row($wide);
	padding: 2rem 0 3rem;
	.product-item {
		@include col(1, 4, $gap: 1rem, $align: top);
	}
	@include breakpoint(m){
		padding: 4rem 0 6rem;
	}
}

.sizeguide-trigger {
	cursor: pointer;
}

// --- Standard Page --------------------- //
.template-page {
	@include breakpoint(m){
		.section-header {
			margin-top: 6rem;
		}
	}
}

.page-content {
	padding-bottom: 4rem;
	@include breakpoint(m){
		padding-bottom: 8rem;
	}
}

// --- Blog Page ------------------------- //
.template-blog {
	background: $bg-tan;
	.global-promo {
		background: #fff;
		padding: $padding-window 0;
	}
	@include breakpoint(m){
		background: #fff;
		.global-promo {
			padding: 0;
			.med-wrapper {
				max-width: 72.5%;
			}
		}
	}
}

.blog-wrapper {
	@include clearfix();
	margin: 4rem 0 2rem;
	@include breakpoint(m){
		margin: 8rem 0 4rem;
	}
}

.article {
	background: $bg-tan;
	margin-bottom: 6rem;
	a {
		text-decoration: none;
		color: $color-base;
	}
	.article-featured-image {
		margin-bottom: 2rem;
		img {
			display: block;
			width: 100%;
		}
	}
	.article-header {
		h2 {
			margin: 0 0 1rem 0;
			@extend .font-utopia;
			font-weight: 700;
		}
	}
	.rte {
		img {
			max-width: 100%;
		}
		p {

		}
	}
	@include breakpoint(m){
		padding: 0 9%;
		float: left;
		width: 49%;
		margin-right: 2%;
		margin-bottom: 2%;
		&:nth-child(even){
			margin-right: 0;
		}
		.article-header {
			h2 {
				font-size: 2.5rem;
			}
		}
	}
}

// --- Article Page ---------------------- //
.template-article {
	article {
		padding: 3rem 0;
		.pre-title {
			margin-bottom: 2rem;
		}
		header {
			h1 {
				font-style: normal;
				font-weight: 700;
			}
			.rte {
				margin-top: 3rem;
				padding: 0 5%;
			}
		}
	}
}

.article-nav {
	text-align: center;
	margin: 3rem 0;
	> span {
		display: inline-block;
		&.left {
			margin-right: 2rem;
			.icon {
				margin-right: 1rem;
			}
		}
		&.right {
			margin-left: 2rem;
			.icon {
				margin-left: 1rem;
			}
		}
		.icon {
			display: inline-block;
			vertical-align: middle;
		}
	}
	a {
		text-decoration: none;
		vertical-align: middle;
	}
	@include breakpoint(m){
		margin: 5rem 0;
	}
}

.preface {
	@extend .font-semi;
}

.article-product {
	margin: 5rem 0 3rem;
	.ap-img {
		text-align: center;
		margin-bottom: 3rem;
		img {
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.preface {
			margin-bottom: 2rem;
			&.mobile-only {
				display: inline-block;
			}
		}
	}
	.ap-details {
		> div {
			span {
				&.price {
					margin-bottom: 1.5rem;
					@include priceline($border-color);
					@extend .font-semi;
				}
			}
			h3 {
				margin: 0 0 1.5rem 0;
				font-size: 4rem;
				color: #000;
			}
			.btn-wrap {
				margin-bottom: 0;
			}
		}
	}
	@include breakpoint(m){
		border: 1px solid $border-color;
		margin: 10rem 0 5rem;
		@include clearfix();
		.ap-img {
			float: left;
			width: 30%;
			padding: 5%;
			border-right: 1px solid $border-color;
			margin-bottom: 0;
			.preface {
				&.desktop-only {
					display: inline-block;
				}
				&.mobile-only {
					display: none;
				}
			}
		}
		.ap-details {
			float: left;
			width: 70%;
			position: relative;
			border-top: 6px solid lighten($color-accent, 15%);
			> div {
				@include align(y);
				padding: 0 15%;
				span {
					display: inline-block;
					&.preface {
						font-size: 1.4rem;
						margin-bottom: 1.2rem;
						color: #000;
						letter-spacing: $spacing-wider;
					}
				}
			}
		}
	}
}

.pre-title {
	letter-spacing: $spacing-wide;
	display: inline-block;
	@extend .font-semi;
}

// --- Search Results Page --------------- //
.template-search {
	.section-header {
		margin-top: 7rem;
	}
	.collection-wrapper {
		max-width: $med;
	}
}

// --- Account Pages Global -------------- //
.account-wrap {
	min-height: calc(100vh - #{$header-total});
}

.account-content {
	padding-top: 8vh;
	margin-bottom: 5rem;
}

.account-note {
	margin: 1rem 0;
	color: #555;
	@include clearfix();
	font-size: 1rem;
	letter-spacing: $spacing-wide;
	a {
		text-decoration: underline;
		color: #555;
	}
	label {
		float: left;
		width: 85%;
		margin-top: 0;
	}
	input {
		float: left;
		margin-right: 1%;
	}
}

.account-detail-header {
	margin-bottom: 3rem;
	h1 {
		font-size: 1.8rem;
		@extend .font-utopia;
	}
	a {
		letter-spacing: $spacing-wide;
		font-size: 1rem;
		color: $color-base;
		&.return-link {
		}
	}
}

.customer-address-wrap {
	@include clearfix();
	margin-bottom: 4rem;
	.customer-address-block {
		margin-bottom: 1rem;
		float: left;
		max-width: 20rem;
		margin-right: 10%;
		font-size: 1.1rem;
		.default-address {
			margin-bottom: 1rem;
			min-height: 3.2rem;
		}
		p {
			margin: 0;
			font-size: 1.1rem;
		}
		ul {
			@include clearfix();
			margin: .8rem 0;
			li {
				display: block;
				float: left;
				letter-spacing: $spacing-wider;
				&:first-child {
					padding: 0 5% 0 0;
				}
				&:last-child {
					margin-right: 0;
					padding: 0 0 0 5%;
				}
			}
		}
	}
}

// --- Login Page ------------------------ //
.login-col {
	position: relative;
	height: 100%;
	display: block;
	&:nth-child(2){
		background: $bg-tan;
		.login-box {

		}
	}
	@include breakpoint(m){
		float: left;
		width: 50%;
		min-height: calc(100vh - #{$header-total});
	}
}

.login-box {
	width: 100%;
	padding: $padding-window;
	.field-wrap {
		input {
			&[type="text"],
			&[type="email"],
			&[type="password"] {
				border: none;
				border-bottom: 1px solid $border-color;
				padding: 1.5rem;
			}
		}
	}
	.login-box-header {
		text-align: center;
		margin-bottom: 3rem;
		h1 {
			font-size: 3.7rem;
			@extend .font-utopia;
		}
	}
	.errors {
		ul {
			li {
				list-style: none;
				letter-spacing: $spacing-wide;
			}
		}
	}
	@include breakpoint(m){
		padding: 0 25%;
		min-height: 36rem;
	}
}

#customer-login,
#recover-password {
	.login-box-header {
		h1 {
			color: $color-compliment;
		}
	}
	form {
		input {
			&:not([type="submit"]){
				border: 1px solid $border-color;
			}
		}
		.btn {
			background: $color-compliment;
			border-color: $color-compliment;
		}
	}
}

#customer-create-account {
	.login-box-header {
		h1 {
			color: $color-accent;
		}
	}
	form {
		input {
			&:not([type="submit"]){
				border: none;
				background: #fff;
			}
		}
	}
}

// --- Customer Account Page ------------- //
#account {
	.instagram {
		margin-top: 0;
	}
}

.customer-orders-wrap {
	clear: both;
}

// --- Customer Orders ------------------- //
.oc {
	display: block;
	float: left;
	width: 23%;
	padding: 2rem 0;
	text-align: center;
}

.order-table {
	&.single-order {
		.order-body {
			.order-item {
				&:last-child {
					border-bottom: 1px solid $border-color;
				}
			}
		}
	}
	.oc {
		&.order-num {
			width: 15%;
		}
		&.order-date {}
		&.order-payment {}
		&.order-fulfill {}
		&.order-total {
			@extend .last-cell;
		}
		&:first-child {
			text-align: left;
		}
		&:last-child {
			text-align: right;
		}
	}
	.ocf {
		border-bottom: 1px solid $border-color;
		padding: .5rem 0;
		font-weight: bold;
		@extend .label;
		@include clearfix();
		&:last-child {
			border-bottom: none;
		}
		span {
			float: right;
			font-weight: normal;
			@extend .last-cell;
		}
	}
	.order-header {
		border-bottom: 1px solid $border-color;
		@include clearfix();
		.oc {
			@extend .label;
			font-size: 1.2rem;
			margin-bottom: 0;
			color: #000;
			padding: .2rem 0;
		}
	}
	.order-body {
		.order-item {
			@include clearfix();
			border-bottom: 1px solid $border-color;
		}
	}
	.order-footer {
		@include clearfix();
	}
}

// --- Customer Addresses ---------------- //
#page-addresses {
	.instagram {
		margin-top: 0;
		padding-top: 4rem;
	}
}

#AddAddress,
.edit-address-wrap form {
	margin-bottom: 3rem;
	.btn-wrap {
		.btn {
			width: 100%;
		}
		span {
			vertical-align: middle;
		}
	}
	@include breakpoint(m){
		.btn-wrap {
			.btn {
				margin-right: 1.5rem;
				width: 50%;
			}
		}
	}
}

.edit-address-wrap {
	form {
		display: block;
		clear: both;
	}
}

// --- Cart Page ------------------------- //
.cart {
	> h1 {
		margin: 0 0 1.8rem 0;
	}
}

.template-cart {
	.main-content {
		min-height: calc(100vh - (#{$header-total} + 12rem));
	}
	> form {
		margin-top: 4rem;
	}
	@include breakpoint(m){
		.main-content {

		}
	}
}

.shipping-message {
	margin-top: 2rem;
	margin-bottom: 2rem;
	color: $color-accent;
	display: inline-block;
	@extend .font-semi;
	@include breakpoint(m){
		margin-top: 4rem;
		margin-bottom: 4rem;
	}
}

.empty-cart {
	max-width: 40rem;
	width: 100%;
	text-align: center;
	@include align(xy);
	margin-top: -$header-total;
	h2 {
		margin: 0 0 .8rem 0;
	}
	p {
		margin: 0;
	}
	a {
		margin-top: 2rem;
	}
	@include breakpoint(m){
		h2 {
			margin: 0 0 1.2rem 0;
		}
		a {
			margin-top: 4rem;
		}
	}
}

.c-col {
	float: left;
	width: 20%;
	text-align: center;
	letter-spacing: $spacing-wide;
	height: auto!important;
	@extend .font-semi;
	&.c-item {
		width: 20%;
		margin-right: 5%;
		margin-bottom: 12rem;
	}
	&.c-deets {
		width: 75%;
	}
	&.c-price {
		width: 75%;
		float: right;
		text-align: left;
		margin-bottom: 1rem;
	}
	&.c-qty {
		width: auto;
	}
	&.c-total {
		width: 28%;
	}
	&.c-remove {
		position: absolute;
		right: 0;
		@include clearfix();
		.cart-header {
			color: #fff;
		}
		.icon {
			float: right;
			svg {
				fill: lighten($color-base, 30%);
			}
		}
	}
	@include breakpoint(m){
		&.c-item {
			width: 10%;
			margin-bottom: 0;
			margin-right: 0;
		}
		&.c-deets {
			width: 33%;
		}
		&.c-price {
			width: 15%;
			text-align: center;
			float: left;
			margin-bottom: 0;
		}
		&.c-qty {
			width: 22%;
		}
		&.c-total {
			width: 14%;
		}
		&.c-remove {
			text-align: center;
			position: inherit;
			right: inherit;
			width: 6%;
		}
	}
}

.cart-header {
	margin-bottom: 2rem;
	letter-spacing: $spacing-wider;
	display: none;
	span {
		padding: 1.1rem 0 1rem;
		@extend .font-semi;
	}
	@include breakpoint(m){
		display: block;
		span {
			padding: 1.8rem 0 1.7rem;
		}
	}
}

.cart-body {
	.c-item {
		@extend .cart-img;
	}
	.c-deets {
		@extend .cart-detail;
	}
	.c-qty {
		@extend .cart-qty;
	}
	.c-total {
		position: relative;
		padding-top: 1rem;
		margin-left: 2rem;
	}
	@include breakpoint(m){
		.c-item {
			span {
				bottom: 3rem;
			}
		}
		.c-total {
			padding-top: 0;
			margin-left: 0;
		}
	}
}

.cart-item {
	@include clearfix();
	position: relative;
	font-size: 1.4rem;
	&:first-child {
		.cart-header {
			//display: block;
		}
	}
	.cart-inner {
		display: flex;
		flex-direction: column;
		height: calc(100% - 6.2rem);
	}
	@include breakpoint(m){
		margin-bottom: 6rem;
		font-size: 1.2rem;
		&:first-child {
			padding-top: 0;
			.cart-inner {
				height: calc(100% - 7.6rem);
			}
		}
		.cart-inner {
			height: 100%;
			padding-left: 10%;
		}
	}
}

.cart-footer {
	border-top: 1px solid $border-color;
	@include breakpoint(m){
		padding: 3.5rem 0;
		@include clearfix();
	}
}

#cart-menu {
	display: block;
	ul {
		margin: 1.2rem 0 0 0;
		@include clearfix();
		li {
			float: left;
			margin: 0 2rem 0 0;
			list-style: none;
			a {
				@extend .underlined;
			}
		}
	}
	@include breakpoint(m){
		float: left;
		margin-top: 2.3rem;
		ul {
			margin: 0;
		}
	}
}

#order-notes {
	margin: 4rem 0;
	textarea {
		width: 100%;
		border: none;
		background: #f1f1f1;
		padding: 2rem;
		margin-bottom: 1rem;
	}
	a {
		font-size: 1rem;
		letter-spacing: $spacing-wide;
		color: $color-base;
		display: inline-block;
		margin-top: 1rem;
	}
	@include breakpoint(m){
		float: left;
		width: 55%;
		margin-right: 5%;
		margin: 0 5% 0 0;
		a {
			margin-top: 0;
		}
	}
}

#checkout-buttons {
	text-align: center;
	letter-spacing: $spacing-wider;
	.total-price {
		text-align: center;
		clear: both;
		margin: 4rem 0;
	}
	.btn-wrap {
		button {
			margin: 0 .5rem;
		}
	}
	.update-cart {
		background: $color-compliment;
		border-color: $color-compliment;
	}
	@include breakpoint(m){
		float: right;
		width: 40%;
		.total-price {
			margin: 0;
		}
		span {
			margin-right: 20%;
			display: inline-block;
			clear: none;
		}
	}
}

.cart__additional_checkout {
	margin-top: 2rem;
}

.additional-checkout-button+.additional-checkout-button {
	margin: 0;
}

.additional-checkout-button {
	@include prefix('border-radius', '25px!important');
}

// --- Browser feature styles ------------ //
.supports-csstransforms3d {
	#mobile-menu {
		@include prefix('transform', 'translate3d(0,-10px,0)');
		&.show-menu {
			@include prefix('transform', 'translate3d(0,0,0)');
		}
	}
}

.supports-no-csstransforms3d {
	#mobile-menu {
		right: -100%;
		&.show-menu {
			right: 0;
		}
	}
}

// --- 404 page ------------------ //
.template-404 {
	.main-content {
		@include fillScreen();
		@extend .bg-pattern;
	}
}

.error-wrap {
	@include align(xy);
	max-width: 80rem;
	text-align: center;
	top: calc(50% + 10rem);
	.btn-wrap {
		margin-top: 8rem;
	}
}

.error-msg {
	position: relative;
	@extend .bg-circle;
	span {
		font-size: 1.4rem;
		@extend .font-semi;
	}
	h1 {
		@extend .lg-headline;
		@extend .font-utopia;
		font-style: italic;
		font-weight: 700;
		color: $color-compliment;
	}
}

#fsb_bar {
	top: $header-total-mobile !important;
	@include breakpoint(m) {
		top: $header-total !important;
	}
}
#site-header a{font-size:16px;}
body>pre{display:none;}
#site-header .cart-link.orange .icon svg {
    fill: #ff9900;
}
.header-utilities ul li.cart-link.orange .cart-count {
    color: #ff9900;
}
#product-form .btn{
  text-align: center;
}
.vimeo-videobox .fluid-width-video-wrapper{
  padding-top: 56.25% !important;
}
#site-header .icon.icon-bag svg{
  width: 20px;
  height: 20px;
}
.product-description.detail-box {
    margin-bottom: 0;
  margin-top:15px;
}
.home-top-banner {
  position: relative;
  margin-bottom: 40px;
  overflow: hidden;
  height: -webkit-calc(100vh - 100px);
  height: calc(100vh - 100px);
}
.home-top-banner img {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}
.home-top-banner a{text-decoration:none !important;}
.home-banner-overlay {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}
.home-banner-overlay h2 {
  font-size: 56px;
  margin: 0 0 40px;
  font-weight: bold;
  color: #000;
}
.home-banner-overlay p {
  font-weight: bold;
  font-size: 40px;
  display: block;
  color: #000;
  line-height: 1.3;
}
.img-with-text-section {
  display: table;
  width: 100%;
  margin-bottom: 40px;
  position:relative;
}
.imgbox {
  width: 60%;
  display: table-cell;
  vertical-align: middle;
}
.txtbox {
  width: 40%;
  vertical-align: middle;
  display: table-cell;
  padding: 0 5%;
}
.txtbox p{
  font-size: 40px;
  line-height: 1;
  margin: 0 0 25px;
  font-weight: normal;
  color:#f4633a
}
.txtbox a.btn{
  margin-left: auto;
  margin-right: auto;
}
.img-with-text-section.imgbox-left .txtbox {
    text-align: right;
}
.img-with-text-section.imgbox-center .imgbox, .img-with-text-section.imgbox-center-left .imgbox, .img-with-text-section.imgbox-center-right .imgbox{width:100%;}
.img-with-text-section.imgbox-center .txtbox{
  position:absolute;
  width:500px;
  top:30%;
  margin:0;
  padding:20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  text-align:center;
}
.img-with-text-section.imgbox-center-left .txtbox{
  position:absolute;
  width:500px;
  top:30%;
  margin:0;
  padding:20px;
  left: 0%;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.9);
}
.img-with-text-section.imgbox-center-right .txtbox{
  position:absolute;
  width:500px;
  top:30%;
  margin:0;
  padding:20px;
  right: 0%;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.9);
}
#site-header li span {
  display: block;
  margin-top: 5px;
}


@media (max-width: 1600px){
  .home-top-banner {
    height: auto;
  }
  .home-top-banner img{
    position: static;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@media (min-width: 782px) and (max-width: 1140px){
  #site-header .logo {
    max-width: 100px;
  }
  #site-header li {
    margin: 0 15px 0 0;
  }
  #site-header .wrapper.med-wrapper {
    max-width: 96%;
  }
  .home-banner-overlay h2 {
    font-size: 42px;
    margin-bottom: 30px;
  }
  .home-banner-overlay p {
    font-size: 28px;
  }
  .txtbox p {
    font-size: 30px;
  }
}

@media (max-width: 782px){
  .home-banner-overlay h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  .home-banner-overlay p {
    font-size: 18px;
  }
  .txtbox p {
    font-size: 24px;
  }
  .home-banner-overlay {
    left: 6%;
  }
  .img-with-text-section.imgbox-center .txtbox, .img-with-text-section.imgbox-center-left .txtbox, .img-with-text-section.imgbox-center-right .txtbox{
    position:relative;
    top:0;
    left:0;
    right:0;
    margin:0px;
    padding:0;
    width:100%;
    text-align:center;
  }
}

@media (max-width: 640px){
  .related-wrapper .product-item {
    width: 50%;
  }
  #home-collection .mobile-slick .product-item .product-item-image img {
    max-height: 20rem;
    width: auto;
  }
}

@media (max-width: 560px){
  .img-with-text-section{
    display: block;
    margin: 0;
  }
  .txtbox{
    display: block;
    width: 100%;
    margin-bottom: 30px;
    text-align: center !important;
  }
  .imgbox{
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .txtbox{margin-bottom:30px !important;}
  .img-with-text-section.imgbox-right {
    display: flex;
    flex-direction: column;
  }
  .img-with-text-section.imgbox-right .txtbox{
    order: 2;
  }
  .img-with-text-section.imgbox-right .imgbox{
    order: 1;
  }
  .home-banner-overlay h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .home-banner-overlay {
    top: 50%;
  }
  .home-banner-overlay p {
    font-size: 14px;
  }
}



// --- Configurator V2 ---------------------- //



@function vw($pixelSize, $viewportSize) {
  // Calculate viewport width units based on a pixel size
  // relative to certain viewport.
  @return ($pixelSize/$viewportSize) * 100vw;
}

@mixin min-width($width) {
  // Constrain styles based on min width
  @media (min-width: $width) {
    @content;
  }
}

@mixin max-width($width) {
  // Constrain styles based on max width
  @media (max-width: $width) {
    @content;
  }
}

@mixin mobile {
  @include max-width($breakpoint-m) {
    @content;
  }
}

@mixin desktop {
  @include min-width($breakpoint-m + 1) {
    @content;
  }
}

.mobile-hidden {
  @include mobile {
    display: none;
  }
}


.configurator-v2 {

  @include mobile {
    padding-bottom: 0px !important;
  }
}


body.configurator-v2-active {
  #chat-widget-container {
    @include mobile {
      display: none;
    }
  }
}

.configurator-v2__product-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1000;

  background-color: #fcfcfc;
  border-top: 1px solid #E5E5E5;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;

  @include desktop {
    display: none;
  }

  .configurator-v2__product-mobile-bar__pricing {
    font-weight: bold;
    color: black;
  }

  .configurator-v2__product-mobile-bar__pricing-label {
    font-size: 12px;
    opacity: 0.5;
    margin: 0;
  }

  .configurator-v2__product-mobile-bar__pricing-price {
    font-size: 16px;
    margin: 0;
  }

  .configurator-v2__product-mobile-bar__actions {
display:block;
    width:100%;
    text-align:center;
    margin-left:-50px;
  }

  .configurator-v2__product-mobile-bar__action {
    border-radius: 4px;
    text-transform: capitalize;

    cursor: pointer;

    font-size: 14px;
    font-weight: bold;

    padding: 14px 35px;

    background-color: #f1f1f1;
    color: rgba(0,0,0,0.6);

    transition: background-color 0.3s ease;

    &.enabled {
      background-color: #ff9901;
      color: white;
    }
  }

}

.configurator-v2__wrapper {

  @include desktop {
    @include wrapper($med);
  }

}

.configurator-v2__content {
  position: relative;

  @include desktop {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.configurator-v2__left {
  @include desktop {
    order: 1;
    width: 50%;
  }

  @include mobile {
    @include wrapper($med);
  }
}


.configurator-v2__right {
  @include desktop {
    order: 2;
    width: 50%;

    padding-left: 85px;
    padding-right: 50px;
  }
}


.configurator-v2__preview {
  position: relative;
  padding-bottom: 88%;

  @include mobile {
    padding-bottom: 400px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  @media (max-width: 480px) {
    padding-bottom: 100%;
  }
}

.configurator-v2__preview-selector {

  position: absolute;
  top: 0; right: 0;
  z-index: 10;

  // UX, avoid mangifier
  padding-bottom: 40px;
  padding-left: 40px;

  span {
    display: inline-block;
    padding: 5px 15px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    background-color: #ccc;
    cursor: pointer;

    @include desktop {
      &:hover {
        background-color: lighten(#ff9901, 10%);

      }
    }

    &.active, &.active:hover {
      cursor: default;
      background-color: #ff9901;
    }
  }
}

.configurator-v2__preview-3d {
  display: none;

  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;

  #Bloom3DViewer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
  }

  .loading, .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;

    svg {
      $size: 64px;
      width: $size;
      height: $size;
    }
    svg circle {
      stroke: #F4633A;
    }
  }
}

.configurator-v2__preview-image {
  position: absolute !important;
  top: 0; right: 0; left: 0; bottom: 0;

  @include desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .slick-slide {
    outline: none !important;
  }

  .slick-dots {
    li {
      line-height: 0;

      padding: 4.5px;
      cursor: pointer;
      margin: 0 !important;
      bottom: 0 !important;

      @include mobile {
        transform: translateY(-50%);
      }

      @include desktop {
        padding: 9px;
      }
    }

    button {
      width: 6px;
      height: 6px;
      border-radius: 100%;
      overflow: hidden;
      padding: 0;
      color: transparent;

      @include desktop {
        width: 9px;
        height: 9px;
      }
    }
  }
}


.configurator-v2__preview-image-arrow {
  position: absolute;
  top: 50%;

  cursor: pointer;

  opacity: 1;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.5;
  }

  svg {
    fill: #cecece;
  }

  &.arrow-prev {
    left: 0;
    transform: translate(-50%, -50%);
  }

  &.arrow-next {
    right: 0;
    transform: translate(50%, -50%);
  }

}


.configurator-v2__preview-image-views {
  @include desktop {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    max-height: 100%;
  }

  @include mobile {
    height: 100%;
    .slick-list, .slick-track {
      height: 100%;
    }


  }
}

.configurator-v2__preview-image-view.slick-slide {

  @include mobile {
    max-height: 100%;
    height: 100%;
  }

  .overlay-img {
    max-height: 100%;
    height: 100%;
  }

  img {
    max-height: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }

}

.configurator-v2__preview-image-view {

  img[src] {
    opacity: 1;
  }

  img[src=""] {
    opacity: 0;
  }

  @include mobile {
    position: relative !important;
  }

  .overlay-img.composite {
    //bottom: 0;
  }

  .overlay-img {
    &.not-composite {
      top: 0;
      transform:  none;
    }

    &.composite {
      top: 0;
      transform: none;
    }

    &.base-image {
      position: absolute;
    }
  }

  @include mobile {
    @media (min-width: 481px) {
      .overlay-img {
        img {
          width: 400px !important;
          height:auto !important;
        }
      }
      .overlay-img:nth-child(5) img{width: 400px !important;}
      .overlay-img:nth-child(4) img{width: 400px !important;}
      .overlay-img:nth-child(3) img{width: 400px !important;}
      .overlay-img:nth-child(2) img{width: 400px !important;}
    }
  }


  @include mobile {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 0 28px;

  }
}

.configurator-v2__top-mobile {
  @include desktop {
    display: none;
  }

  margin-bottom: 7px;
}

.configurator-v2__product-info {
  @include mobile {
    display: none;
  }
}

.configurator-v2__product-title {
  @include mobile {
    font-size: 16px;
    font-weight: bold;
    color: #000;

    text-align: center;

    margin-bottom: 3px;
  }
}

.configurator-v2__product-primary-row, .product-multi-variant-primary-row {
  display: flex;
  align-items: center;

  margin-bottom: 18px;
}

.configurator-v2__product-price {
  color: #4a4a4a;
  font-size: 24px;

  flex-grow: 1;

  margin: 0;
  margin-right: 10px;
}

.configurator-v2__product-actions, .product_multi-variant-actions {
  .btn {
    height: 47px;
    min-width: 180px;
    background-color: #f1f1f1;
    text-align: center;
    align-items: center;

    border-width: 0px;
    border-radius: 23.5px;

    font-size: 10px;
    font-weight: bold;
    color: rgba(#000, 0.6);
    text-transform: uppercase;

    transition: background-color 0.3s ease, opacity 0.3s ease;

    pointer-events: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;

    &.enabled {
      background-color: #F4633A !important;
      color: white;

      opacity: 1 !important;
      pointer-events: all;

      &:hover {
        opacity: 0.5 !important;
      }
    }
  }
}

.configurator-v2__product-secondary-row {
  display: flex;
  align-items: center;
}

.configurator-v2__product-questions {
  text-transform: uppercase;
  flex-grow: 1;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  margin-right: 10px;
  letter-spacing: 1px;

  .questions {
    color: rgba(#000, 0.7);
  }


  .chat-now {
    opacity: 0.4;
    color: #000;
    cursor: pointer;

    margin-left: 2px;

    .chat-now__text {
      text-decoration: underline;
    }

    .chat-now__icon {
      margin-right: 3px;
      svg {
        height: 15px;
        width: 15px;
        margin-bottom: -6px;
      }
    }
  }

  &:hover {
    .chat-now {
      opacity: 0.4 * 0.6;
    }
  }
}

.configurator-v2__product-reviews {
  flex-shrink: 1;
  font-size: 12px;
  color: rgba(#000, 0.8);

  display: flex;
  align-items: center;

  @include mobile {
    justify-content: center;
  }

  .reviews-stars {
    display: inline-block;
    margin: 0px 5px;

    .reviews-star {
      opacity: 0.5;

      &.filled {
        opacity: 1;
      }
    }
  }

  .reviews-text {
    display: inline-block;
  }
}

.configurator-v2__product-disclaimers {
  font-size: 12px;
  color: rgba(#000, 0.5);
  margin-top: 0px;
}

.configurator-v2__product-description {
  color: #4a4a4a;
  font-size: 16px;
  line-height: 1.44;
  margin-top: 9px;
}

.configurator-v2__builder-steps {
  margin-top: 9px;
  margin-bottom: 17px;
}


.configurator-v2__builder-step {
  border-bottom: 1px solid rgba(#000, 0.2);

  @include desktop {
    &:last-child {
      border-bottom: 0px;
    }
  }
}

.configurator-v2__builder-step__content {
  @include mobile {
    @include wrapper($med);
  }
}

.configurator-v2__builder-step__info {
  display: flex;
  align-items: center;
}

.configurator-v2__builder-step__title {
  flex-grow: 1;
  font-size: 18px;
  font-weight: bold;

  margin-top: 20px;
  margin-bottom: 17px;

  text-transform: capitalize;
  min-width: 60%;

  color: #000;

  @include mobile {
    margin-top: 15px;
    font-size: 16px;
  }
}

.configurator-v2__builder-step__title-aside {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  justify-content: flex-end;

  @include mobile {
    width: 40%;
  }
}

.configurator-v2__builder-step__selected-value {
  font-size: 15px;
  line-height: normal;
  font-weight: bold;
  margin: 0px 15px 0px 15px;
  text-transform: capitalize;
  flex-shrink: 1;
  text-align: right;

  color: rgba(#000, 0.7);

  @include mobile {
    font-size: 12px;
  }
}

@mixin configurator-v2__circular-control($size) {
  min-width: $size;
  width: $size;
  height: $size;
  border-radius: 100%;
  border: 2px solid transparent;

  &:after {
    // Secondary Border
    content: '';
    display: block;
    position: absolute;
    $offset: -4px;
    top: $offset; right: $offset; bottom: $offset; left: $offset;
    border: 2px solid transparent;

    border-radius: 100%;
  }
}

@mixin configurator-v2__circular-button($size, $hoverEffect:true) {
  @include configurator-v2__circular-control($size);

  border-color: #000;

  position: relative;

  cursor: pointer;

  @if ($hoverEffect) {
    &:hover {
      @include desktop {
        opacity: 0.5;
      }
    }
  }

  &:before {
    // Click area fix to improve UX
    content: '';
    display: block;
    position: absolute;
    $box-offset: -10px;
    top: $box-offset; right: $box-offset; bottom: $box-offset; left: $box-offset;

    border-radius: 15px;
  }

  .icon {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: (12/20) * $size;
    font-weight: bold;
  }
}

.configurator-v2__builder-step__help-button {
  @include configurator-v2__circular-button(20px, false);
  overflow: visible;

  .help-content {
    position: absolute;
    top: -13px;
    right: calc(100% + 18px);
    width: 276px;
    color: white;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 4px;
    padding: 20px;
    background-color: #ff9901;
    z-index: 5;

    @media (max-width: 400px) {
      width: calc(100vw - 100px);
    }

    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;

    &:before {
      content: '';
      display: inline-block;
      background-color: #ff9901;
      padding: 4px;
      transform: rotate(45deg);
      position: absolute;
      top: 18px;
      right: -2px;
    }
  }

  &:hover .help-content {
    opacity: 1;
    pointer-events: all;
  }
}

.configurator-v2__builder-step__options {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin-right: -16px;

  @include desktop {
    margin-bottom: 20px;
  }
}

.configurator-v2__builder-step__option {
  @include configurator-v2__circular-button(20px);
  margin: 0 16px 16px 0px;

  @include mobile {
    @include configurator-v2__circular-button(30px);
    margin: 0 17px 16px 0px;
  }
}

.configurator-v2__builder-step__option--select-color {

  border-color: transparent;

  &.white {
    border-color: #8D8D8D;
    border-width: 1px;
  }

  &.selected {
    border-color: #000;

    &.use-high-contrast-selector {
      border-color: #fff;
      border-width: 2px;

      &:after {
        border-color: #000;
      }
    }

  }

  @include desktop {
    &:hover {
      border-color: #000;

      &.use-high-contrast-selector {
        border-color: #fff;
        border-width: 2px;

        &:after {
          border-color: #000;
        }
      }

    }
  }

}

.configurator-v2__builder-step__option--remove,
.configurator-v2__builder-step__option--select {
  border-width: 1px;

  &.selected {
    border-width: 2px;
  }

}


.configurator-v2__builder-step__option--select {
  .icon {
    font-size: 10px;
  }
}


// --- Extended product meta (mobile only) ------------- //

.product-meta-panels--for-customizator {
  @include mobile {
    height: auto !important;

    .panel {
      position: static;
      transform: none;
      opacity: 1;
      pointer-events: all;
      padding: 0;
      margin: 20px 0 27px 0;

      &:first-child {
        margin-top: 0px !important;
      }
    }

    .parts-wrap .part {
      max-width: 100% !important;
      padding: 0 !important;
    }

    .rte {
      &, p {
        font-size: 14px;
        line-height: 22px;
      }

      p {
        @include mobile {
          margin-top: 1px;
          margin-bottom: 5px;
        }
      }

      img {
        @include mobile {
          margin-top: 12px;
          margin-bottom: 12px;
        }
      }
    }
  }
}

.product-meta__title {
  font-size: 24px;
  font-weight: bold;
  margin: 25px 0 25px 0;

  &:first-child {
    margin-top: 0px;
  }
}


/**
 * Bloom Upsells
 */


.bloom-upsells {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(#000, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2147483640;

  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}


.bloom-upsells__popup {
  padding: 20px 60px;

  @media (max-width: 1366px) {
    padding: 20px 30px;
  }

  @include mobile {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  background-color: white;

  border: 1px solid #e9e9e9;

  position: relative;

  transform: translateY(-10%);
  transition: transform 0.5s ease;
}

.bloom-upsells__loading-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(white, 0.9);
  z-index: 9;
}

.bloom-upsells__loading-overlay-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  svg {
    $size: 5rem;
    width: $size;
    height: $size;

    circle {
      stroke: #F4633A;
    }
  }
}

.bloom-upsells.loading {
  .bloom-upsells__loading-overlay {
    opacity: 1;
    pointer-events: all;
  }
}

.bloom-upsells.active {

  pointer-events: all;
  opacity: 1;

  .bloom-upsells__popup {
    transform: translateY(0%);
  }
}


.bloom-upsells__close-button {
  position: absolute;
  top: 0; right: 0;

  opacity: 1;
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 0.5;
  }

  .icon {
    display: inline-block;


    padding: 25px;
    svg {
      $size: 1.8rem;
      width: $size;
      height: $size;
    }
  }
}


.bloom-upsells__title {
  margin: 30px 0px 30px 0px;

  text-align: center;

  @media (max-width: 1366px) {
    margin: 20px 0px 0px 0px;
    padding: 0 3rem;
  }
}


.bloom-upsells__accessories {
  margin: 20px 0 40px 0;

  @media (max-width: 1366px) {
    margin: 10px 0 30px 0;
  }
}


.bloom-upsells__accessory {
  .configurator-v2__builder-step__options {
    margin-bottom: 10px;
  }

  @media (max-width: 1366px) {

    .configurator-v2__builder-step__title {
      margin: 15px 0;
    }

    .configurator-v2__builder-step__options {
      margin-bottom: 5px;
    }

  }
}


.bloom-upsells__primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 30px 0;
}


.bloom-upsells__price {
  font-size: 24px;
  color: #4a4a4a;
  margin: 0;
  margin-right: 15px;
}


.bloom-upsells__button {
  text-transform: uppercase;
  padding: 18px 58px 17px 58px;

  opacity: 1.0;
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 0.5;
  }
}


.bloom-upsells__secondary-actions {
  text-align: center;

  margin: 20px 0;

  .action {
    cursor: pointer;

    font-size: 12px;

    text-decoration: underline;
    opacity: 1.0;
    transition: opacity 0.3s ease;

    margin: 0 5px;

    &:hover {
      opacity: 0.5;
    }
  }
}


/**
 * AR Quick Look
 */

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}


/**
 * Lazyload
 */

.lazyload {
  opacity: 0;
}

.lazyloaded {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.product-swatch-title .swatch {
    background-color: transparent;
    font-size: 13px;
    line-height: 1;
    height: auto;
    width: auto;
    padding: 5px 10px;
}
.product-meta-panels{height:100% !important;}
.product-meta-panels .panel{display:none;position:relative !important;}
.product-meta-panels .panel.show{display:block;}

@media (min-width: 782px) {
  .site-nav.desktop-only{left:20%;}
  #site-header .logo{left:0;}
  /*.site-nav.desktop-only {
    position: inherit;
    top: inherit;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    float:right;
    margin-top:20px;
  }
  .header-utilities{
    position: inherit;
    top: inherit;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    float:right;
    margin-top:20px;
  }
  #site-header .logo{
    position: inherit;
    top: inherit;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    float:left;
    margin-top:20px;
    left:0px;
  }*/
}

.product-template-2{
/* 
   Swatches Styles
*/



.swatch { 
  margin:5px 0 !important; 
  display:inline-block !important;
  cursor: pointer;
  font-size: 12px;
  line-height: 28px;
  float: none !important;
  width: auto !important;
  border: 0px !important;
}
  
/* Label */
.swatch .header {
  margin: 0.5em 0;
  font-size: 14px;
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {
  /* Rounded corners */
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  /* To give width and height */
  float:left;
  /* Color swatches contain no text so they need to have a width. */
  min-width:90px !important; 
  height:30px !important;
  /* No extra spacing between them */
  margin:0;
  /* The border when the button is not selected */
  border:#ddd 1px solid;
  /* Background color */
  /*background-color:#ddd;*/
  /* Styling text */
  font-size:11px;
  text-align:center;
  line-height:30px;
  white-space:nowrap;
  text-transform:uppercase;
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */
.swatch input:checked + label {
  /*-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
  box-shadow:0px 1px 2px rgba(0,0,0,0.8);*/
  border-color:#f4633a;
} 
.swatch .swatch-element {
  float:left;
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  /* Spacing between buttons */
  margin:0px 10px 10px 0;
  /* To position the sold out graphic and tooltip */
  position:relative;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background:gray;
  color:#fff;
  bottom:100%;
  padding: 5px;
  display:block;
  position:absolute;
  width:120px;
  left:-3px;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
  font-size:12px;
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid gray 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
       -o-transform:translateY(0px);
          transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}
.selector-wrapper{display:none;}
select.hide{display:none;}

#product-form .btn.disabled {
opacity: 1;
background-color: green;
border-color: green;
color: white;
}
}

.productorig .selector-wrapper{display:grid;}
.productorig .swatch-wrap{order:1;}

@media (min-width: 782px)
{
  .product-template-2 .swatch {
    width: 100%;
    height: auto;
    margin:5px 0; 
  }
}
#product-form .btn.disabled, .configurator-v2__wrapper .btn.disabled {
opacity: 1;
background-color: green;
border-color: green;
color: white;
}

.prod-video-container{display:none;}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.selector-wrapper{display:grid;}
.selector-wrapper .swatch-wrap{order:1;}
@media (min-width:782px) and (max-width:1140px)
{
  #site-header .logo{
  @include align(y);
  }
  .chat-text{font-size:16px;}
}

#page-global *{font-size:0px;}
#page-global h1.selectLocation{text-align:center;font-size:22px;font-weight:bold;margin-top:15px;max-width:375px;margin:0 auto;border-bottom:1px solid #ddd;padding: 22px 0 30px;}
.countryList{list-style:none;margin:0px;padding:0px !important;margin-top:15px;}
.countryList li{
	display:inline-block;
	width:33.32%;
	padding-bottom: 15px;
}
.countryList li a{font-size:13px !important;cursor:pointer;
  line-height: 25px;
  display: block;
  position: relative;
  padding-left: 35px;
}
.countryList li a span{
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: contain;
  position: absolute;
  left: 0px;
}
.countryList li a span.flag-US{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-US.png?v=92402886611280851011722880587);}
.countryList li a span.flag-CA{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-CA.png?v=73598160009803159791722880586);}
.countryList li a span.flag-GB{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-GB.png?v=131982569011485495821722880586);}
.countryList li a span.flag-HK{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-HK.png?v=68125363894767551721722880587);}
.countryList li a span.flag-DK{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-DK.png?v=8796696341730062751722880586);}
.countryList li a span.flag-FI{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-FI.png?v=64130783688199374791722880586);}
.countryList li a span.flag-IT{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-IT.png?v=104585014227886379381722880587);}
.countryList li a span.flag-PT{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-PT.png?v=144879588772228061361722880587);}
.countryList li a span.flag-SM{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-SM.png?v=70774614010643557441722880587);}
.countryList li a span.flag-ES{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-ES.png?v=100575100222918028411722880586);}
.countryList li a span.flag-SE{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-SE.png?v=106429489070726864091722880587);}
.countryList li a span.flag-AD{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-AD.png?v=27486576587398057371722880586);}
.countryList li a span.flag-BG{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-BG.png?v=104414149170165754021722880586);}
.countryList li a span.flag-HR{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-HR.png?v=64646128358277261121722880587);}
.countryList li a span.flag-CY{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-CY.png?v=4928104251494767491722880586);}
.countryList li a span.flag-CZ{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-CZ.png?v=147766870246318309501722880586);}
.countryList li a span.flag-EE{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-EE.png?v=172139538406219950131722880586);}
.countryList li a span.flag-GR{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-GR.png?v=32416164842107034461722880587);}
.countryList li a span.flag-HU{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-HU.png?v=91675424931646443671722880587);}
.countryList li a span.flag-LV{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-LV.png?v=114908997324452093071722880587);}
.countryList li a span.flag-LT{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-LT.png?v=144782205505214281161722880587);}
.countryList li a span.flag-MT{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-MT.png?v=83022288056013573591722880587);}
.countryList li a span.flag-MC{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-MC.png?v=66009720779109804121722880587);}
.countryList li a span.flag-PL{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-PL.png?v=31603067459498589411722880587);}
.countryList li a span.flag-RO{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-RO.png?v=122309347848718942301722880587);}
.countryList li a span.flag-SK{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-SK.png?v=175049038885221834661722880587);}
.countryList li a span.flag-SI{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-SI.png?v=137233323412684625991722880587);}
.countryList li a span.flag-AL{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-AL.png?v=112706407312091106981722880586);}
.countryList li a span.flag-BY{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-BY.png?v=40472848278738352431722880586);}
.countryList li a span.flag-BA{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-BA.png?v=112624085124591166291722880586);}
.countryList li a span.flag-FO{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-FO.png?v=104440155815398667901722880586);}
.countryList li a span.flag-GI{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-GI.png?v=106943848599044856331722880586);}
.countryList li a span.flag-GL{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-GL.png?v=76781931665672384061722880586);}
.countryList li a span.flag-IE{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-IE.png?v=98135863534920165961722880587);}
.countryList li a span.flag-FR{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-FR.png?v=129278800520408148061722880586);}
.countryList li a span.flag-AU{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-AU.png?v=108211612388365988881722880586);}
.countryList li a span.flag-SG{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-SG.png?v=22426123100109698961722880587);}
.countryList li a span.flag-MY{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-MY.png?v=71682278385689063481722880587);}
.countryList li a span.flag-NL{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-NL.png?v=99180541865977743871722880587);}
.countryList li a span.flag-DE{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-DE.png?v=47662746007700252941722880586);}

.currency-picker__wrapper{margin-bottom:0px;}
.currency-picker{padding:5px 0px 5px 10px;
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  -ms-appearance: menulist-button;
  -o-appearance: menulist-button;
  appearance: menulist-button;
}
.currencyPicker:after{content:unset !important;}
.hideCurrencyPicker{display:none !important;}

.countryLink{
  width: 25px;
  height: 25px;
  background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/US-icon.png?v=92402886611280851011722880589);
  background-repeat: no-repeat;
  display: inline-block;
  background-size: contain;
}
.countryLink.CA-flag{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-CA.png?v=73598160009803159791722880586);}
.countryLink.MX-flag{background-image: url(//bloombaby.eu/cdn/shop/t/20/assets/flag-MX.png?v=126609895240206785271722880587);}

.countryFilter ul li a{
  color: #333;
  padding: 24px 20px 22px;
  display: inline-block;
  width: 100%;
  font-size:16px !important;
  text-decoration:none;
  font-weight:bold;
}
.countryFilter ul{
  margin: 0 auto;
    padding: 0;
    width: 375px;
}
.countryFilter ul li{
  margin:0px auto;
  padding:0px;
  color: #333;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 18px;
  border-bottom: 1px solid #ddd;
}

.data-drilldown{margin-top:20px;}
.data-drilldown h2{font-size:17px !important;line-height: 22px;font-weight:500;color:#000;border-bottom:1px solid #ccc;padding-bottom:5px;}

.mobileTab{display:none;}
#product-meta-controller ul li span, .mobileTab span{text-transform:lowercase;font-size: 1.5rem;}
.product-multy-variant-left, .product-multy-variant-right{width:50%}
.slider-wrap-image-wraper.slider-for-mobile{display:none;}
@media (max-width: 740px){
  .billboard-bg-video-container{min-height:auto;height:auto;}
  .billboard-bg-video{position:relative;}
  .product-multy-variant-left, .product-multy-variant-right{width:100%}
  .desktopTabs{display:none;}
  .mobileTab{display:block;border-bottom: 1px solid #e9e9e9;}
  .countryList li{width:49%;}
  
  #product-meta-controller ul{width:100% !important;}
  #product-meta-controller ul li{float:none;text-align:left;text-indent:0px;padding-left:20px;position:relative;}
  .mobileTab{padding:0 20px;position:relative;}
  #product-meta-controller ul li:first-child{text-indent:0px;}
  #product-meta-controller ul li span, .mobileTab span{width:100%;display:block;position:relative;font-size:18px;line-height:52px;text-transform:lowercase;}
  #product-meta-controller ul li span:after, .mobileTab span:after{
    content:"+";
    position:absolute;
    right: 20px;
    font-size: 18px;
    font-weight: normal;
  }
  .mobileTab.trigger.active span{
  color:#f4633a !important;
  }
  #product-meta-controller ul li.active span:after, .mobileTab.active span:after{
    content:"-";
  }
  .slider-wrap-image-wraper.slider-for-desktop{display:none;}
  .slider-wrap-image-wraper.slider-for-mobile{display:block;margin-top:20px;}
  .chat-text{font-size:14px;}
  .cart-footer{display:grid;margin-bottom:30px;}
  #checkout-buttons{order:1;}
  #order-notes{margin-bottom:0px;}
}

.defaultAddToCart.hideElement{display:none !important;}
.addItems.hideElement{display:none !important;}

.product-multy-variant-right .swatch{width:100% !important;height:auto;}
.product-multy-variant-right .swatch-element{width: 20px;
    height: 20px;
    border-radius: 100%;
}
.product-multy-variant-right .swatch-element label{
  min-width: 25px !important;
  height: 25px !important;
  border-radius: 100%;
  border:2px solid #000;
}
.product-multy-variant-right .swatch .tooltip{display:none;}
.product-multy-variant-right .swatch-element label.lblswatch:after{
  content: '';
    display: block;
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 2px solid transparent;
    border-radius: 100%;
}
.affirm-message{
  text-decoration:underline;
  font-size:1.6rem;
}
.affirm-as-low-as{font-size:1.4rem;margin-bottom:0px;}
.affirm-product-modal{font-size:1.4rem;margin-bottom:0px;text-decoration:underline;cursor:pointer;}
#checkout-buttons span{margin-right:0px !important;}
.cart_gift_mesage input{display:block;margin:10px 0 15px;width:100%;}
.cart_gift_mesage textarea{background-color:transparent !important;border:1px solid #e9e9e9 !important;padding: 1rem !important;}

.page-width.list-view-items{padding:0px;}
.list-view-item {
    margin-bottom: 22px;
  list-style: none;
}

.list-view-item:last-child {
    margin-bottom: 0
}

@media only screen and (min-width: 750px) {
    .list-view-item {
        border-bottom: 1px solid #e8e9eb;
        padding-bottom: 22px
    }
    .list-view-item:last-child {
        padding-bottom: 0;
        border-bottom: 0
    }
}

.list-view-item__link {
    display: table;
    table-layout: fixed;
    width: 100%
}

.list-view-item__image {
    max-height: 95px
}

.list-view-item__image-column {
    display: table-cell;
    vertical-align: middle;
    width: 130px
}

@media only screen and (max-width: 749px) {
    .list-view-item__image-column {
        width: 85px
    }
}

.list-view-item__image-wrapper {
    position: relative;
    margin-right: 35px
}

@media only screen and (max-width: 749px) {
    .list-view-item__image-wrapper {
        margin-right: 17.5px
    }
}

.list-view-item__title-column {
    display: table-cell;
    vertical-align: middle
}

.list-view-item__title {
    color: #504e4a;
    /*font-size: 1.125em;*/
    min-width: 100px
}

@media only screen and (max-width: 749px) {
    .list-view-item__title {
        /*font-size: 0.9375em*/
    }
}

.list-view-item__sold-out {
    /*font-size: 0.9375em*/
}

.list-view-item__on-sale {
    color: #9c8773;
    /*font-size: 0.9375em*/
}

@media only screen and (max-width: 749px) {
    .list-view-item__on-sale {
        display: none
    }
}

.list-view-item__vendor-column {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 20%
}

.list-view-item__vendor {
    /*font-size: 0.9375em;*/
    font-style: italic
}

@media only screen and (max-width: 749px) {
    .list-view-item__vendor {
        /*font-size: 0.875em*/
    }
}

.list-view-item__price-column {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 20%;
    /*font-size: 1.0625em*/
}

@media only screen and (max-width: 749px) {
    .list-view-item__price-column {
        /*font-size: 0.9375em*/
    }
}

.list-view-item__price-column .price__vendor,
.list-view-item__price-column .price-item__label {
    display: none
}

.list-view-item__price-column .price__regular,
.list-view-item__price-column .price__sale {
    flex-basis: 100%
}

.list-view-item__price {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.list-view-item__price--reg {
    color: #9c8773
}

@media only screen and (max-width: 749px) {
    .list-view-item__price--reg {
        display: block
    }
}

@media only screen and (max-width: 749px) {
    .list-view-item__price--sale {
        display: block
    }
}

@mixin visually-hidden() {
  // sass-lint:disable no-important
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.visually-hidden {
  @include visually-hidden();
}
.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.product-card {
  position: relative;

  &:hover,
  &:focus-within {
    .product-card__image-wrapper {
      opacity: 0.8;
    }

    .product-card__title {
      border-bottom-color: #504e4a;
    }
  }
}

.product-card__image-with-placeholder-wrapper {
  position: relative;
}

.product-card__title {
  border-bottom: 1px solid transparent;
  display: inline;
}


@media (max-width: 500px) {
	.configurator-v2__preview-image-view img[src] {
		width: 100%;
	}
}