/******************************************************************************/
/*        							IMAGE BLOCK START         				  */
/******************************************************************************/

.image-block[data-image-block-design="inline"] .image-wrapper{
    position: relative;
    overflow: hidden;
}

.image-block[data-image-block-design="inline"] .image-wrapper img.section-image{
    position: absolute;
    width: 100%;
}

html.no-js .image-block[data-image-block-design="inline"] .image-wrapper img.section-image-fallback{
    position: absolute;
    width: 100%;
}

/******************************************************************************/
/*        							IMAGE BLOCK END         				  */
/******************************************************************************/

/******************************************************************************/
/*        						SLIDESHOW BLOCK START         				  */
/******************************************************************************/

.slideshow-block{
	/* Need flex-grow and overflow so product section slideshow displays correctly */
	flex-grow: 1;
	overflow: hidden;
}

/* Stacked Slideshow Start */
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-wrapper{
	height: auto !important;
	/* For regular slideshow padding-bottom is applied to avoid content reflow */
	padding-bottom: 0px !important;
}
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow{
	position: static !important;
	visibility: visible !important;
	/* Override swiper-wrapper display flex */
	display: block !important;
}
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-item{
	margin-bottom: 25px;
}
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-item:last-child{
	margin-bottom: 0px;
}
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-button-next,
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-button-prev,
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-thumbnail-navigation,
.slideshow-block[data-slideshow-block-type="stacked"] .slideshow-dots-wrapper{
	display: none;
}
/* Stacked Slideshow End */

/* Carousel Slideshow Start */
.slideshow-block[data-slideshow-block-type="carousel"] .slideshow-thumbnail-navigation{
	display: none;
}
/* Carousel Slideshow End */

/* Slideshow Start */
.slideshow-block[data-slideshow-block-type="slideshow"] .slideshow-button-next,
.slideshow-block[data-slideshow-block-type="slideshow"] .slideshow-button-prev,
.slideshow-block[data-slideshow-block-type="slideshow"] .slideshow-dots-wrapper{
	display: none;
}
/* Slideshow End */

.slideshow-block .slideshow-wrapper{
	/*
		Slideshow dots wrapper is absolutely positioned so need
		relative position on slideshow wrapper
	*/
	position: relative;
}

.slideshow-block .slideshow-wrapper .slideshow{
	/*
		Only show slideshow when JS has done it's job and slideshow is ready
		otherwise visitors will see a flash of other slide images on page load
	*/
	visibility: hidden;
}

html.no-js .slideshow-block .slideshow-wrapper .slideshow{
	visibility: visible;
}

.slideshow-block .slideshow-wrapper[data-apply-padding-bottom-trick-to-avoid-content-reflow="1"]{
	height: 0px;
	overflow: hidden;
}

.slideshow-block .slideshow-wrapper[data-apply-padding-bottom-trick-to-avoid-content-reflow="1"] .slideshow{
	position: absolute;
	width: 100%;
}

.slideshow-block .slideshow-wrapper .slideshow .slideshow-item .image-wrapper img.section-image{
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
}

.slideshow-block .slideshow-button-prev,
.slideshow-block .slideshow-button-next{
	position: absolute;
	top: 50%;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Shown when slideshow is ready */
	opacity: 0;
	transition: opacity .3s ease-in;
	visibility: hidden;
}

.slideshow-block .slideshow-button-prev:before,
.slideshow-block .slideshow-button-next:before{
	opacity: 0.35;
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transition: opacity 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
}

.slideshow-block .slideshow-button-prev:hover:before,
.slideshow-block .slideshow-button-next:hover:before{
	opacity: 0.75;
}

.slideshow-block .slideshow-button-prev:after,
.slideshow-block .slideshow-button-next:after{
	font-family: swiper-icons;
	font-size: inherit;
	text-transform: none !important;
	letter-spacing: 0;
	text-transform: none;
	font-variant: initial;
	line-height: 1;
	/* Using position relative to get above ':before' */
	position: relative;
}

.slideshow-block .slideshow-button-prev{
	left: 0px;
    right: auto;
}

.slideshow-block .slideshow-button-next{
	right: 0px;
	left: auto;
}

.slideshow-block .slideshow-button-prev:after{
	content: 'prev';
}

.slideshow-block .slideshow-button-next:after{
	content: 'next';
}

.slideshow-block .slideshow-dots-wrapper{
	position: absolute;
	top: auto;
	bottom: 0px;
	width: 100%;
	text-align: center;
	/* Appear above slideshow item */
	z-index: 1;
	opacity: 0;
	transition: opacity .3s ease-in;
	visibility: hidden;
}

.slideshow-block[data-slideshow-block-show-dots="no"] .slideshow-dots-wrapper{
	display: none;
}

.slideshow-block .slideshow-dots-wrapper .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	/*
		Need to override default swiper-pagination-bullet opacity.
		Using 0.8 instead of 1 since otherwise it doesn't look nice. 
	*/
	opacity: 0.8;
	/* Need to override default swiper-pagination-bullet background-color */
	background-color: transparent;
	border-style: solid;
	border-width: 1px;
}

.slideshow-block .slideshow-dots-wrapper .swiper-pagination-bullet-active{
	opacity: 1;
}

.slideshow-block .slideshow .slideshow-item .embed-code-wrapper{
	/*
		Need to set line height to 0px so that swiperjs sets correct
		slide height when contents is embed like YouTube video
	*/
	line-height: 0px;
}

.slideshow-block .slideshow-thumbnail-navigation{
	/* Shown when slideshow is ready */
	opacity: 0;
	transition: opacity .3s ease-in;
	visibility: hidden;
}

.slideshow-block[data-slideshow-block-thumbnails-layout="horizontal"] .slideshow-thumbnail-navigation{
	/* Set height to avoid content reflow which navigation thumbnails are loaded */
	height: 60px;
}

.slideshow-block[data-slideshow-block-thumbnails-layout="horizontal"] .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item{
	max-height: 50px;
}

.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item{
    display: inline-block;
    width: 50px;
    vertical-align: top;
    margin-right: 5px;
    transition: opacity 0.1s;
    opacity: 0.6;
    cursor: pointer;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: opacity .1s ease-in;
}

.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item:last-child{
    margin-right: 0px;
}

.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item img{
    cursor: pointer;
    width: 100%;
}

.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item.active,
.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item:hover{
    opacity: 1;
}

.slideshow-block .slideshow-thumbnail-navigation-item.embed-without-thumbnail .youtube{
    width: 40px;
}

.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item.embed-without-thumbnail .vimeo,
.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item.embed-without-thumbnail .soundcloud,
.slideshow-block .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item.embed-without-thumbnail .other{
    width: 35px;
}

/******************************************************************************/
/*        						SLIDESHOW BLOCK END         				  */
/******************************************************************************/

/******************************************************************************/
/*        						GRID BLOCK START         				  	  */
/******************************************************************************/

@media screen and (min-width: 768px) {
	.grid-block[data-grid-block-type="simple"] .grid-list{
		display: grid;
		padding: 0;
	}
}

@media screen and (max-width: 767px) {
	.grid-block[data-grid-block-type="simple"] .grid-list .grid-item{
		margin-bottom: 30px;
	}
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item{
	position: relative;
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-contents{
	/*
		Having position relative on inner wrapper allows image and meta to
		be grouped up separately from the grid item link.
		This means meta can be shown on hovering over image.
	*/
	position: relative;
	/*
		Need to specify height for items with media-not-provided
	*/
	height: 100%;
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-contents .grid-item-image-wrapper-outer{
	width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    line-height: 0;
}

.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="square"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 100%;
}
.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="standard"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 66.666%;
}
.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="standardVertical"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 150%;
}
.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="fourThree"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 75%;
}
.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="threeFourVertical"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 133.333%;
}
.grid-block[data-grid-block-type="simple"][data-grid-block-type-simple-aspect-ratio="widescreen"] .grid-list .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 56.25%;
}

.grid-block[data-grid-block-type="simple"][data-grid-block-number-of-columns="2"] .grid-list{
    grid-template-columns: repeat(2, 1fr);
}
.grid-block[data-grid-block-type="simple"][data-grid-block-number-of-columns="3"] .grid-list{
    grid-template-columns: repeat(3, 1fr);
}
.grid-block[data-grid-block-type="simple"][data-grid-block-number-of-columns="4"] .grid-list{
    grid-template-columns: repeat(4, 1fr);
}
.grid-block[data-grid-block-type="simple"][data-grid-block-number-of-columns="5"] .grid-list{
    grid-template-columns: repeat(5, 1fr);
}
.grid-block[data-grid-block-type="simple"][data-grid-block-number-of-columns="6"] .grid-list{
    grid-template-columns: repeat(6, 1fr);
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-inner img.section-image{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 1s ease,transform 1s ease;
}

html.no-js .grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-inner img.section-image{
	display: none;
}
html.no-js .grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-inner img.section-image-fallback{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .media-not-provided-thumbnail-wrapper{
	background-color: #DDDDDD;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-outer .media-not-provided-thumbnail-wrapper img.media-not-provided-thumbnail{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    display: block;
    height: 100%;
}

/* Image Second Hover Start */

.grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-inner img.section-image-second-hover{
	opacity: 0;
}
.grid-block[data-grid-block-type="simple"] .grid-list .grid-item:hover .grid-item-image-wrapper-inner img.section-image-second-hover{
	opacity: 1;
}

html.no-js .grid-block[data-grid-block-type="simple"] .grid-list .grid-item .grid-item-image-wrapper-inner img.section-image-second-hover{
	display: none;
}

/* Image Second Hover End */




.grid-block .grid-list .grid-item .grid-item-link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Grid link needs to be above grid contents, consider metaType hover */
	z-index: 1;
}

/******************************************************************************/
/*        						GRID BLOCK END         				  		  */
/******************************************************************************/

/******************************************************************************/
/*        						MEDIA QUERIES START         				  */
/******************************************************************************/

@media screen and (min-width: 768px) {

	/* Vertical thumbnails navigation start */

	.slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"]{
		display: flex;
		align-items: flex-start;
		overflow: hidden;
		user-select: none;
		margin: 0;
		flex-direction: row-reverse;
	}

	.slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"] .slideshow-thumbnail-navigation{
		width: auto;
		margin-right: 10px;
	    overflow-y: auto;
	    overflow-x: hidden;
	}

	.section-wrapper[section-key="product"][data-section-setting-number-of-columns="2"] .slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"] .slideshow-thumbnail-navigation,
	.section-wrapper[section-key="featured-product"][data-section-setting-number-of-columns="2"] .slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"] .slideshow-thumbnail-navigation{
		/*
			It's not ideal to set 80vh but for now it's an easy solution.
			Vertical thumbnail navigation only happens where slideshow is
			side-by-side with product name/description/buy now button.
			In this scenario the product details are likely always longer than
			slideshow and so it's not a noticable problem.
		*/
	    height: 80vh;
	}

	.slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"] .slideshow-thumbnail-navigation .slideshow-thumbnail-navigation-item{
		display: block;
		margin-bottom: 10px;
		/* Need margin right when scrollbar is shown */
		margin-right: 10px;
		margin-top: 0px;
	}

	.slideshow-block[data-slideshow-block-type="slideshow"][data-slideshow-block-thumbnails-layout="vertical"] .slideshow-wrapper{
		overflow: hidden;
		position: relative;
	    flex-grow: 1;
	    max-width: 100%;
	    /* Need to set any value for flex-basis so that SwiperJs has a width to work with */
	    /* https://css-tricks.com/flex-grow-is-weird/ */
	    flex-basis: 200px;
	}

	/* Vertical thumbnails navigation end */

}

@media screen and (max-width: 767px) {

	/*
		On small mobile devices only show prev/next button.
		Don't show thumbnail navigation or dots wrapper.
	*/
	.slideshow-block .slideshow-button-prev,
	.slideshow-block .slideshow-button-next{
		/* Override display none on element inline style */
		display: flex !important;
	}
	.slideshow-block .slideshow-thumbnail-navigation,
	.slideshow-block .slideshow-dots-wrapper{
		/* Override display none on element inline style */
		display: none !important;
	}

}

/******************************************************************************/
/*        						MEDIA QUERIES END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        						COLUMNS BLOCK START         				  */
/******************************************************************************/

.columns-block .columns-wrapper:not(.narrow-width){
    display: flex;
    -ms-justify-content: space-between;
    justify-content: space-between;
}

.section-wrapper[data-section-setting-image-position="right"] .columns-block .columns-wrapper:not(.narrow-width){
	flex-direction: row-reverse;
}

.columns-block .columns-wrapper:not(.narrow-width) .image-column{
    width: calc(50% - 5%);
    position: relative;
    max-width: initial !important;
}

.columns-block .columns-wrapper .image-column .image-column-contents[data-show]{
    /*
    	data-show attribute means lazy loading has finished, so override
    	fixed height on image-wrapper since image itself occupies height now
    */
    height: auto !important;
}

.columns-block .columns-wrapper:not(.narrow-width) .image-column .image-wrapper .section-image{
    width: 100%;
}

.columns-block .columns-wrapper:not(.narrow-width) .text-column{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-justify-content: center;
    justify-content: center;
    min-height: 100%;
    position: relative;
    width: calc(50% - 5%);
}

.section-wrapper[data-section-setting-image-position="right"] .columns-block .columns-wrapper:not(.narrow-width) .image-column,
.section-wrapper[data-section-setting-image-position="left"] .columns-block .columns-wrapper:not(.narrow-width) .text-column{
    margin-left: 10%;
}

.columns-block .columns-wrapper.narrow-width .text-column{
    margin-top: 10%;
}

.columns-block .columns-wrapper:not(.narrow-width) .text-column .text-column-contents{
    position: relative;
    width: 100%;
}

html.no-js .columns-block .columns-wrapper .image-column .image-wrapper .section-image{
    display: none;
}

html.no-js .columns-block .columns-wrapper .image-column .image-wrapper .section-image-fallback{
    width: 100%;
}

.columns-block .columns-wrapper .image-column .media-not-provided-thumbnail-wrapper{
    background-color: #DDDDDD;
    padding: 30px;
    position: relative;
}
.columns-block .columns-wrapper .image-column .media-not-provided-thumbnail-wrapper .media-not-provided-thumbnail{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
}

.section-wrapper[data-section-setting-text-align="left"] .columns-block .columns-wrapper .text-column .text-column-contents{
    text-align: left;
}

.section-wrapper[data-section-setting-text-align="center"] .columns-block .columns-wrapper .text-column .text-column-contents{
    text-align: center;
}

.section-wrapper[data-section-setting-text-align="right"] .columns-block .columns-wrapper .text-column .text-column-contents{
    text-align: right;
}

/******************************************************************************/
/*        						COLUMNS BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        					IMAGE COLLAGE BLOCK START         				  */
/******************************************************************************/

.image-collage-block .columns-wrapper:not(.narrow-width){
	display: flex;
}

.section-wrapper[data-section-setting-image-position="right"] .image-collage-block .columns-wrapper:not(.narrow-width){
	flex-direction: row-reverse;
}

.image-collage-block{
	position: relative;
}

.image-collage-block .columns-wrapper:not(.narrow-width) .image-column,
.image-collage-block .columns-wrapper:not(.narrow-width) .text-column{
	width: 50%;
}

.section-wrapper[data-section-setting-image-position="left"] .image-collage-block .columns-wrapper:not(.narrow-width) .image-column .image-column-contents{
	width: 140%;
}

.section-wrapper[data-section-setting-image-position="right"] .image-collage-block .columns-wrapper:not(.narrow-width) .image-column .image-column-contents{
	width: 140%;
	left: -40%;
	position: relative;
}

.image-collage-block .columns-wrapper .image-column .image-column-contents[data-show]{
    /*
    	data-show attribute means lazy loading has finished, so override
    	fixed height on image-wrapper since image itself occupies height now
    */
    height: auto !important;
}

.image-collage-block .image-column .image-wrapper img.section-image{
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
    height: auto;
    position: static;
}

.image-collage-block .columns-wrapper:not(.narrow-width) .text-column{
	display: flex;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
}

.image-collage-block .text-column{
	/* Need !important to override the align-items set above which has more specificity */
	-ms-flex-align: center !important;
    align-items: center !important;
}

.section-wrapper .image-collage-block .text-column{
	/*
		Text needs to always be above image (most apparent when image is on the right,
		but also in has no media case) increase z-index of text so it goes above it
	*/
	z-index: 2;
}

.section-wrapper[data-section-setting-image-position="left"] .image-collage-block .columns-wrapper:not(.narrow-width) .text-column .text-column-contents{
	width: 80%;
    margin-left: 20%;
}

.section-wrapper[data-section-setting-image-position="right"] .image-collage-block .columns-wrapper:not(.narrow-width) .text-column .text-column-contents{
	width: 80%;
    margin-right: 20%;
}

.image-collage-block .text-column .text-column-contents{
	padding: 10%;
}

.image-collage-block .media-not-provided-thumbnail-wrapper{
	background-color: #DDDDDD;
	padding: 30px;
	position: relative;
	/* Need to override inline height set on image-wrapper so use !important */
	height: 500px !important;
}

.image-collage-block .media-not-provided-thumbnail-wrapper .media-not-provided-thumbnail{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
}

/******************************************************************************/
/*        					IMAGE COLLAGE BLOCK END         				  */
/******************************************************************************/

/******************************************************************************/
/*        					SUBSCRIBE FORM BLOCK START         				  */
/******************************************************************************/

.subscribe-form-block form{
    position: relative;
}

.subscribe-form-block form .subscribe-form-field-wrapper{
	width: auto;
    min-width: 300px;
    display: inline-block;
    /*
    	Need margin bottom for mobile case where email input
    	and button are on two different levels
    */
    margin-bottom: 10px;
}

.subscribe-form-block form input[type="email"]{
    box-shadow: none;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 16px;
    /*
    	Since this is an input, it's OK to hardcode font size
    	needs to match hardcoded button font size
    */
    font-size: 16px !important;
    -webkit-transition: all 150ms;
    transition: all 150ms;
}

.subscribe-form-block form input[type="email"].is-invalid{
    background-image: none;
}

.subscribe-form-block form .submit-button{
    padding: 14.5px 16px;
    display: inline-block;
    /*
        Regardless of font size of custom style this button must always remain
        at 16px since it would otherwise break layout if large font sizes are used
    */
    font-size: 16px !important;
}

.subscribe-form-block form .submit-button .icon{
    position: relative;
    top: 4px;
}

.subscribe-form-block form .submit-button .spinner-border{
    position: relative;
    /*
    	left and top gets overriden by higher specificity of another style
    	so need to set !important
    */
    left: -1px !important;
    top: -2px !important;
}

.subscribe-form-block .thank-you-message{
	display: inline-block;
}

.subscribe-form-block .thank-you-message .icon{
	position: relative;
	top: 2px;
}

/* type 'mini' is used by footer newsletter */
.subscribe-form-block[data-type="mini"] form{
	/* Need inline-block for mobile so that footer newsletter is centered */
	display: inline-block;
}
.subscribe-form-block[data-type="mini"] form .subscribe-form-field-wrapper{
	margin-bottom: 0px;
	min-width: auto;
	max-width: 300px;
}
.subscribe-form-block[data-type="mini"] input[type="email"]{
	padding-left: 45px;
}
.subscribe-form-block[data-type="mini"] .submit-button,
.subscribe-form-block[data-type="mini"] .submit-button:hover,
.subscribe-form-block[data-type="mini"] .submit-button:focus,
.subscribe-form-block[data-type="mini"] .submit-button:disabled{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 46px;
    /* To override disabled state need to set !important */
    background-color: transparent !important;
    border: none;
    padding: 0px 12px;
    outline: none;
    box-shadow: none;
}
.subscribe-form-block[data-type="mini"] .submit-button svg.icon{
	width: 26px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	top: 0px;
}
.subscribe-form-block[data-type="mini"] .submit-button svg.icon path{
	fill: none !important;
	stroke-width: 3px;
	stroke: #999999;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}
.subscribe-form-block[data-type="mini"] .submit-button .spinner-border{
	color: #999999;
}

/******************************************************************************/
/*        					SUBSCRIBE FORM BLOCK END         				  */
/******************************************************************************/

/******************************************************************************/
/*        					PRODUCT LIST BLOCK START         				  */
/******************************************************************************/

.product-list-block .grid-block .grid-list .grid-item{
	opacity: 0;
    transform: translatey(-15px);
    transition: opacity 1s ease,transform 1s ease;
}

.product-list-block .grid-block .grid-list .grid-item[data-show],
html.no-js .product-list-block .grid-block .grid-list .grid-item{
	opacity: 1;
    transform: translatey(0);
}

.product-list-block .grid-block .grid-list .grid-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

.product-list-block .grid-block .grid-list .grid-item .name-price-separator{
	height: 1px;
	width: 24px;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 8px;
}

.product-list-block .grid-block .grid-list .grid-item[data-on-sale="1"] .price-wrapper .price-before-sale{
	text-decoration: line-through;
}

.product-list-block .grid-block .grid-list .grid-item[data-on-sale="1"] .price-wrapper .price,
.product-list-block .grid-block .grid-list .grid-item[data-on-sale="1"] .price-wrapper .price-before-sale{
	display: inline;
}

.product-list-block .grid-block .grid-list .grid-item .grid-item-image-wrapper-outer .grid-item-image-wrapper-inner img.section-image,
.product-list-block .grid-block .grid-list .grid-item .grid-item-image-wrapper-outer .grid-item-image-wrapper-inner .media-not-provided-thumbnail-wrapper,
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .grid-item-meta-wrapper-outer,
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item:hover .hover-background{
	border-radius: 3px;
}

.section-wrapper[data-section-setting-show-price="no"] .product-list-block .grid-block .grid-item .grid-item-meta-wrapper-outer .price-details-wrapper-outer{
	display: none;
}
.section-wrapper[data-section-setting-text-align="left"] .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .grid-item-meta-wrapper-outer{
    text-align: left;
}
.section-wrapper[data-section-setting-text-align="center"] .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .grid-item-meta-wrapper-outer{
    text-align: center;
}
.section-wrapper[data-section-setting-text-align="right"] .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .grid-item-meta-wrapper-outer{
    text-align: right;
}





/* Show meta on hover */
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .grid-item-meta-wrapper-outer{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	opacity: 0;
	-webkit-transition: 0.2s linear;
	transition: 0.2s linear;
	/* Center contents vertically and horizontally */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .grid-item-meta-wrapper-inner{
	-webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding-top: 8px;
    position: relative;
    z-index: 1;
    top: 5%;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item:hover .grid-item-meta-wrapper-outer{
	opacity: 1;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item:hover .hover-background{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item:hover .grid-item-meta-wrapper-inner{
	top: 0%;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .name{

}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .name .text{
	font-size: 1.13em;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .badge-on-sale{
	color: inherit;
}
.product-list-block .grid-block[data-grid-block-meta-type="hover"] .grid-list .grid-item .inherit-color{
	color: inherit;
}





/* Show meta standard */
.product-list-block .grid-block .grid-list .grid-item .grid-item-meta-wrapper-outer{
	margin-top: 10px;
}
.product-list-block .grid-block .grid-list .grid-item .name{
	margin-bottom: 0px;
}
.product-list-block .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .hover-background,
.product-list-block .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .name-price-separator{
	display: none;
}
.product-list-block .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item .price-wrapper{
	margin-top: 0.1em;
	margin-bottom: 0.25em;
}
.product-list-block .grid-block[data-grid-block-meta-type="standard"] .grid-list .grid-item[data-out-of-stock="1"] .price-wrapper .price{
	text-decoration: line-through;
}

/******************************************************************************/
/*        					PRODUCT LIST BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        					LIVE SEARCH BLOCK START         				  */
/******************************************************************************/

html.live-search-show #header.live-search-layout-minimal:not(.header-layout-branding-center) nav,
html.live-search-show #header.live-search-layout-minimal.header-layout-branding-center .header-title,
html.live-search-show #header.header-layout-branding-center-nav-center .header-title{
  pointer-events: none;
  opacity: 0;
}

html.live-search-show #header.live-search-layout-minimal .header-actions-action:not(.header-actions-action-search){
  pointer-events: none;
  opacity: 0;
}

/*
	Usually header-actions in this case has no width, but it needs
	to occupy 100% width to show live search
*/
html.live-search-show #header.header-layout-branding-center-nav-center .header-actions{
	width: 100%;
}

.live-search-block{
  display: flex;
  align-items: center;
  margin-right: 6px;
  margin-left: 6px;
}

.live-search-block .live-search-button-search{
  padding: 0;
  color: #4d5852;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

html.live-search-show .live-search-block .live-search-button-search{
  opacity: 0;
}

.live-search-block .live-search-dimmer{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7000;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-dimmer{
    opacity: 1;
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block .live-search-dimmer{
    opacity: 1;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-dimmer{
    pointer-events: none;
    opacity: 0;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-dimmer{
    pointer-events: none;
    opacity: 0;
  }
}

@media (max-width: 719px) {
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-dimmer{
    top: -100%;
    left: -100%;
    pointer-events: none;
    opacity: 0;
  }
}

@media (max-width: 959px) {
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-dimmer{
    top: -100%;
    left: -100%;
    pointer-events: none;
    opacity: 0;
  }
}

@media (min-width: 720px) {
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-dimmer{
    top: -100%;
    left: -100%;
    pointer-events: none;
    opacity: 0;
  }
}

@media (min-width: 960px) {
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-dimmer{
    top: -100%;
    left: -100%;
    pointer-events: none;
    opacity: 0;
  }
}

.live-search-block .live-search-form{
	position: absolute;
	top: 0;
	z-index: 7500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 9px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #ffffff;
	border-bottom: 1px solid #4d5852;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html.live-search-show .live-search-block .live-search-form{
  pointer-events: auto;
  opacity: 1;
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-form{
    position: fixed;
    left: 0;
    padding: 14px 18px 14px 15px;
    border-bottom: 0;
    transition: padding-left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (max-width: 959px) {

  #header.live-search-layout-minimal .live-search-block .live-search-form{
    position: fixed;
    left: 0;
    padding: 14px 18px 14px 15px;
    border-bottom: 0;
    transition: padding-left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /*
  	Don't allow announcement bar to hide the search form
  	by default, it has a z-index of 3, reduce to 1
  	You can reproduce problem by looking at announcement
  	bar in the builder when searching
  	https://secure.helpscout.net/conversation/1491041134/839481?folderId=610381
  */
  html.live-search-show #header .announcement-bar-dropzone{
  	z-index: 1;
  }

}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-block .live-search-form{
    width: 270px;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-form{
    width: 270px;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-alignment-left .live-search-form{
    left: 0;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block.live-search-alignment-left .live-search-form{
    left: 0;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-alignment-right .live-search-form{
    right: 0;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block.live-search-alignment-right .live-search-form{
    right: 0;
  }
}

@media (max-width: 719px) {
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-form{
    padding-left: 30px;
  }
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-form .live-search-input{
    opacity: 0;
  }
}

@media (max-width: 959px) {
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-form{
    padding-left: 30px;
  }
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-form .live-search-input{
    opacity: 0;
  }
}

@media (min-width: 720px) {
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-form{
    width: 160px;
    border-color: transparent;
  }
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-form .live-search-input{
    opacity: 0;
  }
  html:not(.live-search-show) #header:not(.live-search-layout-minimal) .live-search-block .live-search-form .live-search-form-button-close{
    opacity: 0;
    transform: translateX(-10px);
  }
}

@media (min-width: 960px) {
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-form{
    width: 160px;
    border-color: transparent;
  }
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-form .live-search-input{
    opacity: 0;
  }
  html:not(.live-search-show) #header.live-search-layout-minimal .live-search-block .live-search-form .live-search-form-button-close{
    opacity: 0;
    transform: translateX(-10px);
  }
}

.live-search-block .live-search-form-button-search{
	flex-grow: 0;
	flex-shrink: 0;
	order: 0;
	padding: 0;
	color: #4d5852;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.live-search-block .live-search-form svg.svg-icon path{
	/*
		The ls form icon colors are not editable by sellers.
		Would be too confusing to provide this option to them.
	*/
	fill: #444444 !important;
}

.live-search-block .live-search-form-button-search .svg-icon{
  width: 18px;
  height: 19px;
}

.live-search-block .live-search-form-button-close{
  flex-grow: 0;
  flex-shrink: 0;
  order: 2;
  padding: 0;
  color: #4d5852;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-form-button-close{
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-form-button-close{
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.live-search-block .live-search-form-button-close .svg-icon{
  width: 14px;
  height: 14px;
}

.live-search-block .live-search-input{
  font-style: normal;
  font-weight: 400;
  flex-grow: 1;
  order: 1;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 14px;
  background: none;
    border: 0;
    outline: none;
        vertical-align: baseline;
        margin: 0;
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-input{
    opacity: 1;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-input{
    opacity: 1;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  }
}

.live-search-block .live-search-input:-ms-input-placeholder{
  color: #747b77;
}

.live-search-block .live-search-input::placeholder{
  color: #747b77;
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-input{
    font-size: 16px;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block .live-search-input{
    font-size: 16px;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.live-search-block .live-search-results{
  position: fixed;
  z-index: 8000;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 450px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block  .live-search-results{
    bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    box-shadow: none;
    transition: none;
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block .live-search-results{
    bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    box-shadow: none;
    transition: none;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-results{
    margin-top: -1px;
    overflow-y: scroll;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-results{
    margin-top: -1px;
    overflow-y: scroll;
  }
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-results-hidden .live-search-results{
    pointer-events: none;
    opacity: 0;
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block.live-search-results-hidden .live-search-results{
    pointer-events: none;
    opacity: 0;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-results-hidden .live-search-results{
    pointer-events: none;
    opacity: 0;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block.live-search-results-hidden .live-search-results{
    pointer-events: none;
    opacity: 0;
  }
}

.live-search-block .live-search-results-products{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
  padding: 20px;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 719px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-results-products{
    flex-grow: 0;
    width: 100%;
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block .live-search-results-products{
    flex-grow: 0;
    width: 100%;
  }
}

.live-search-block .live-search-results-products-content-wrapper{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.live-search-block .live-search-results-products-content-placeholder{
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}

.live-search-block .live-search-results-products-content-placeholder:last-child{
  margin-bottom: 0;
}

.live-search-block .live-search-results-products-content-placeholder-image,
.live-search-block .live-search-results-products-content-placeholder-content-title,
.live-search-block .live-search-results-products-content-placeholder-content-price{
  width: 100%;
}

.live-search-block .live-search-results-products-content-placeholder-image::before,
.live-search-block .live-search-results-products-content-placeholder-content-title::before,
.live-search-block .live-search-results-products-content-placeholder-content-price::before{
  display: block;
  width: 100%;
  height: 10px;
  content: "";
}

.live-search-block .live-search-results-products-content-placeholder-image{
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.live-search-block .live-search-results-products-content-placeholder-image::before{
  height: 100%;
}

.live-search-block .live-search-results-products-content-placeholder-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.live-search-block .live-search-results-products-content-placeholder-content-title{
  max-width: 240px;
  margin-bottom: 7px;
}

.live-search-block .live-search-results-products-content-placeholder-content-price{
  max-width: 120px;
}

.live-search-block .live-search-results-products-content-placeholder-image::before,
.live-search-block .live-search-results-products-content-placeholder-content-title::before,
.live-search-block .live-search-results-products-content-placeholder-content-price::before{
  background-size: cover;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: placeholder-pulse;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes placeholder-pulse{
  from{
    background-color: #F2F2F2;
  }
  to{
    background-color: #E5E5E5;
  }
}

.live-search-block .live-search-results-footer{
  display: flex;
  width: 100%;
  padding: 20px;
  border-top: 1px solid #d4d4d4;
}

@media (max-width: 719px) {
  html:not(.live-search-layout-minimal) .live-search-block .live-search-results-footer{
    position: fixed;
    bottom: 0;
    padding: 10px;
    border-top: 0;
  }
}

@media (max-width: 959px) {
  html.live-search-layout-minimal .live-search-block .live-search-results-footer{
    position: fixed;
    bottom: 0;
    padding: 10px;
    border-top: 0;
  }
}

@media (max-width: 719px) {
  html:not(.live-search-layout-minimal) .live-search-block .live-search-results-placeholder .live-search-results-footer,
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-results-footer-hidden .live-search-results-footer{
    display: none;
  }
}

@media (max-width: 959px) {
  #header.live-search-layout-minimal .live-search-block .live-search-results-placeholder .live-search-results-footer,
  #header.live-search-layout-minimal .live-search-block.live-search-results-footer-hidden .live-search-results-footer{
    display: none;
  }
}

@media (min-width: 720px) {
  #header:not(.live-search-layout-minimal) .live-search-block .live-search-results-placeholder .live-search-results-footer,
  #header:not(.live-search-layout-minimal) .live-search-block.live-search-results-footer-hidden .live-search-results-footer{
    display: none;
  }
}

@media (min-width: 960px) {
  #header.live-search-layout-minimal .live-search-block .live-search-results-placeholder .live-search-results-footer,
  #header.live-search-layout-minimal .live-search-block.live-search-results-footer-hidden .live-search-results-footer{
    display: none;
  }
}

.live-search-block .live-search-results-footer-viewall{
  width: 100%;
  text-align: center;
}

.live-search-block .live-search-results-products-content{
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d4d4d4;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-search-block .live-search-results-products-content:first-child{
  border-top: 1px solid #d4d4d4;
}

@media (min-width: 720px) {
  .live-search-block .live-search-results-products-content:last-child{
    border-bottom: 0;
  }
}

.live-search-block .live-search-results-products-content:hover{
  background-color: rgba(212, 212, 212, 0.15);
}

.live-search-block .live-search-results-products-content-image{
	flex-shrink: 0;
    width: 50px;
    height: auto;
    margin-right: 15px;
}

.live-search-block .live-search-results-products-content-image img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.live-search-block .live-search-results-products-content-image .media-not-provided-thumbnail-wrapper{
	background-color: #DDDDDD;
	position: relative;
	width: 100%;
	height: 100%;
}

.live-search-block .live-search-results-products-content-image .media-not-provided-thumbnail-wrapper img.media-not-provided-thumbnail{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    display: block;
    height: 100%;
}

.live-search-block .live-search-results-products-content-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.live-search-block .live-search-results-products-content-content-url{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/******************************************************************************/
/*        					LIVE SEARCH BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        					NAV MOBILE START END         				  	  */
/******************************************************************************/

.nav-mobile-block{
  display: none;
}

@media only screen and (max-width: 1024px) and (pointer: coarse),
screen and (max-width: 799px){
    .nav-mobile-block{
        display: block;
    }
}

html.nav-mobile-show .nav-mobile-block{
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
    transform: translateX(0);
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1) background-color, 0s cubic-bezier(0.4, 0, 0.2, 1) opacity;
}
.nav-mobile-block{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    pointer-events: none;
    background-color: rgba(77, 96, 85, 0);
    content: "";
    opacity: 0;
    transform: translateX(-100%);
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1) background-color, 0s 0.35s cubic-bezier(0.4, 0, 0.2, 1) transform, 0s 0.35s cubic-bezier(0.4, 0, 0.2, 1) opacity;
}
html.nav-mobile-show .nav-mobile-block .nav-mobile-contents{
    transform: translateX(0);
}
.nav-mobile-block .nav-mobile-contents{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: 350px;
    background-color: #FFFFFF;
    transform: translateX(-100%);
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1) transform;
}

.nav-mobile-block ul.menu,
.nav-mobile-block ul.menu li{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-mobile-block ul.menu{
  padding-bottom: 0;
  padding-right: 0;
  margin-bottom: 20px;
  overflow: hidden;
  text-align: left;
  min-height: 1px;
  z-index: 1;
}
.nav-mobile-block .submenu{
  position: static;
  padding: 0 0 0 25px;
  opacity: 1;
  display: none;
}
.nav-mobile-block .is-expanded > .submenu{
  pointer-events: all;
}
.nav-mobile-block ul.menu .menu-item{
  font-size: 20px;
}
.nav-mobile-block ul.menu .menu-item,
.nav-mobile-block ul.menu .submenu-item{
  position: relative;
  line-height: 25px;
  margin: 7px 0 24px;
}
.nav-mobile-block ul.menu .menu-item:last-child,
.nav-mobile-block ul.menu .submenu-item:last-child{
  margin-bottom: 0;
}
.nav-mobile-block ul.menu .menu-item > a,
.nav-mobile-block ul.menu .submenu-item > a{
    display: block;
    opacity: 1;
    line-height: 25px;
}
.nav-mobile-block ul.menu .menu-item a,
.nav-mobile-block ul.menu .submenu-item a{
  padding: 5px 0;
  line-height: inherit;
  word-break: break-word;
  color: #444444;
}
.nav-mobile-block ul.menu .menu-item .dropdown-arrow,
.nav-mobile-block ul.menu .submenu-item .dropdown-arrow{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #444444;
  border: 0;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.nav-mobile-block ul.menu .dropdown-arrow:focus{
    background-color: #E7F4FD;
}
.nav-mobile-block ul.menu .menu-item .dropdown-arrow .icon-arrow,
.nav-mobile-block ul.menu .submenu-item .dropdown-arrow .icon-arrow{
  transition: transform 0.25s ease;
}
.nav-mobile-block ul.menu .menu-item.has-submenu > a,
.nav-mobile-block ul.menu .submenu-item.has-submenu > a{
  padding-right: 24px;
}
.nav-mobile-block ul.menu .menu-item.has-submenu > a::after,
.nav-mobile-block ul.menu .submenu-item.has-submenu > a::after{
  content: none;
}
.nav-mobile-block ul.menu .menu-item.has-submenu.is-expanded > .dropdown-arrow .icon-arrow,
.nav-mobile-block ul.menu .submenu-item.has-submenu.is-expanded > .dropdown-arrow .icon-arrow{
  transform: rotateX(180deg);
}
.nav-mobile-block ul.menu .submenu-item{
  margin: 0;
  font-size: 16px;
}
.nav-mobile-block ul.menu .submenu-item a{
  border-bottom: 1px solid #444444;
  padding: 12px 0;
  line-height: 20px;
}
.nav-mobile-block ul.menu .submenu-item .dropdown-arrow{
  top: 5px;
}
.nav-mobile-block ul.menu .submenu-item .submenu{
  border: 1px solid #444444;
  border-top: 0;
  padding: 0 20px;
  margin-bottom: 10px;
}
.nav-mobile-block ul.menu .submenu-item .submenu .submenu-item{
  font-size: 14px;
}
.nav-mobile-block ul.menu .submenu-item .submenu .submenu-item:last-child a{
  border-bottom: none;
}

.nav-mobile-block .nav-inner{
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 70px);
  padding: 0 45px;
}

.nav-mobile-block .nav-inner-wrapper{
  position: relative;
  margin: 0 auto 70px;
}

.nav-mobile-block .nav-mobile-close-button{
  position: absolute;
  right: 60px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.nav-mobile-block .nav-mobile-close-button svg.icon-close{
  display: block;
  width: 22px;
  height: 22px;
}
.nav-mobile-block .nav-mobile-close-button svg.icon-close path{
    fill: #444444;
}

/******************************************************************************/
/*        					NAV MOBILE BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        						CART BLOCK START         				  	  */
/******************************************************************************/

.cart-block{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  display: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

html.cart-is-showing .cart-block,
html.cart-is-hiding .cart-block{
	display: block;
}

html.cart-show .cart-block{
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
}

html.cart-show .cart-block .cart-container.cart-container-show{
  transform: translateX(0);
}

.cart-block .cart-container{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  height: 100%;
  padding: 0 0 20px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(100%);
}

.cart-block .cart-header{
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding: 18px 18px 16px;
  margin-right: 20px;
  font-size: 12px;
  color: #39423d;
  text-align: center;
  border-bottom: 1px solid #d4d4d4;
}

.cart-block .cart-header .cart-header-title{
	font-weight: 600;
}

.cart-block .cart-close-button{
  position: absolute;
  top: 50%;
  right: -3px;
  width: 26px;
  height: 26px;
  padding: 7px;
  color: #39423d;
  cursor: pointer;
  background: transparent;
  border: none;
  transform: translateY(-50%);
}

.cart-block .cart-close-button svg{
  display: block;
  width: 100%;
  height: 100%;
}

.cart-block .cart-body{
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.cart-block .cart-items-wrapper{
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  padding-right: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.cart-block .cart-items-wrapper .scroll-for-more-items-indicator{
	position: absolute;
	bottom: 10px;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.75);
	color: #FFFFFF;
	border-radius: 24px;
	padding: 7px 14px;
	font-size: 13px;
	-webkit-transform: translateX(-50%) translateY(100%) rotateZ(360deg);
	transform: translateX(-50%) translateY(100%) rotateZ(360deg);
	-webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0, 1);
	transition: all 0.3s cubic-bezier(0.3, 0, 0, 1);
	white-space: nowrap;
	z-index: 2;
	opacity: 0;
}

.cart-block .cart-items-wrapper .scroll-indicator-icon{
	position: relative;
	top: 2px;
}

.cart-block .cart-items-wrapper.is-scrollable .scroll-for-more-items-indicator{
	opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0) rotateZ(360deg);
    transform: translateX(-50%) translateY(0) rotateZ(360deg);
}

.cart-block .cart-item{
  display: flex;
  flex-shrink: 0;
  padding-top: 26px;
  padding-bottom: 27px;
  border-bottom: 1px solid #d4d4d4;
}

.cart-block .cart-item-inner{
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-block .cart-item.loading .cart-item-inner{
  pointer-events: none;
  opacity: 0.1;
}

.cart-block .cart-item-column{
  display: flex;
  flex-direction: column;
}

.cart-block .cart-item-column-image{
  flex-shrink: 0;
  width: 80px;
  margin-right: 20px;
}

.cart-block .cart-item-column-details{
  flex-grow: 1;
  margin-right: 10px;
}

.cart-block .cart-item-title,
.cart-block .cart-item-variant,
.cart-block .cart-item-quantity,
.cart-block .cart-item-remove{
  font-style: normal;
  font-weight: 400;
  margin-bottom: 3px;
}

.cart-block .cart-item-variant,
.cart-block .cart-item-quantity,
.cart-block .cart-item-remove{
  color: #747b77;
}

.cart-block .cart-item-variant,
.cart-block .cart-item-quantity{
  font-size: 13px;
}

.cart-block .cart-item-title a{
  color: #39423d;
}

.cart-block .cart-item-title a:hover{
  color: #313935;
}

.cart-block .cart-item-title,
.cart-block .cart-item-price{
  font-size: 14px;
}

.cart-block .cart-item-prices-wrapper{
  font-style: normal;
  font-weight: 400;
}

.cart-block .cart-item-price{
  display: block;
  margin-top: 10px;
  margin-bottom: 0;
}

.cart-block .cart-item-remove{
  font-size: 12px;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
}

.cart-block .cart-item-details-footer{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.cart-block .cart-footer{
  padding-right: 20px;
}

.cart-block .cart-button-wrapper{
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding-top: 21px;
  border-top: 1px solid #d4d4d4;
}

.cart-block .cart-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D4D4D4;
}

.cart-block .cart-meta-heading{
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  color: #39423d;
}

.cart-block .cart-meta-value{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #39423d;
}

.cart-block .cart-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 0 19px;
}

.cart-block .cart-total-heading{
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  color: #39423d;
}

.cart-block .cart-total-value{
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  color: #39423d;
}

.cart-block .cart-checkout-button{
	font-style: normal;
	font-weight: 400;
	position: relative;
	display: inline-block;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1) background-color, 0.15s cubic-bezier(0.4, 0, 0.2, 1) border-color;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.cart-block .cart-checkout-button:focus{
	outline: none;
}

.cart-block .cart-has-no-items-message{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #444444;
}

.cart-block .cross-sell-message-wrapper-outer{
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    background-color: #F7F7F7;
    padding: 20px;
}

.cart-block .cross-sell-message-wrapper-outer.set-max-height{
	/*
    	Should prevent cross sell promotion occupying too much height in block.
    	Otherwise checking out and cart items will be less prominent.
    */
    max-height: 150px;
    overflow-y: auto;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-single{
	text-align: center;
	font-style: italic;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-single-button-wrapper{
	text-align: center;
	margin-top: 10px;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-single-button-wrapper .btn{
	font-style: normal;
	font-weight: 400;
	position: relative;
	display: inline-block;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1) background-color, 0.15s cubic-bezier(0.4, 0, 0.2, 1) border-color;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	width: 100%;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-header{
	font-style: italic;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-contents{
	font-style: italic;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-contents ul{
	padding-left: 20px;
	margin-bottom: 0px;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-contents ul li{
	margin-bottom: 10px;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-contents ul li:last-child{
	margin-bottom: 0px;
}

.cart-block .cross-sell-message-wrapper-outer .cross-sell-message-multi-contents .btn{
	background-color: #FFFFFF;
	border-color: #DAE0E5;
}

/******************************************************************************/
/*        						CART BLOCK END         				  	  	  */
/******************************************************************************/

/******************************************************************************/
/*        				  REFERRAL BAR BLOCK START         				  	  */
/******************************************************************************/

.referral-bar-block .referral-message{
	padding-left: 10px;
	padding-right: 10px;
}

.referral-bar-block .referral-message .referral-bar-icon{
    width: 20px;
    height: 20px;
    position: relative;
    top: -2px;
    margin-right: 5px;
}

/******************************************************************************/
/*        				  REFERRAL BAR BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        				  LIGHTBOX BLOCK START         				  	  	  */
/******************************************************************************/

.lightbox-block{

}

.lightbox-block .caret-left-icon-small,
.lightbox-block .caret-right-icon-small{
	width: 13px;
    height: 24px;
    position: relative;
    display: block;
    box-sizing: content-box;
    line-height: 1;
}

.lightbox-block button.sl-prev:focus,
.lightbox-block button.sl-next:focus,
.lightbox-block button.sl-close:focus{
	outline: none;
}

.lightbox-block button.sl-prev svg *,
.lightbox-block button.sl-next svg *,
.lightbox-block button.sl-close svg *{
    stroke: currentColor;
}

.lightbox-block button.sl-close svg{
	width: 20px;
	height: 20px;
	position: relative;
}

.lightbox-block button.sl-close svg *{
	stroke-width: 4px;
}

/******************************************************************************/
/*        				  LIGHTBOX BLOCK END         				  	      */
/******************************************************************************/

/******************************************************************************/
/*        		       BLOG POST LIST BLOCK START         				  	  */
/******************************************************************************/

.blog-post-list-block[data-text-align="left"]{
	text-align: left;
}
.blog-post-list-block[data-text-align="center"]{
	text-align: center;
}
.blog-post-list-block[data-text-align="right"]{
	text-align: right;
}

.blog-post-list-block .blog-post-name a,
.blog-post-list-block .blog-post-name a:hover,
.blog-post-list-block .blog-post-name a:visited{
	color: inherit !important;
	text-decoration: none !important;
}

.blog-post-list-block[data-image-aspect-ratio="square"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 100%;
}
.blog-post-list-block[data-image-aspect-ratio="standard"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 66.666%;
}
.blog-post-list-block[data-image-aspect-ratio="standardVertical"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 150%;
}
.blog-post-list-block[data-image-aspect-ratio="fourThree"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 75%;
}
.blog-post-list-block[data-image-aspect-ratio="threeFourVertical"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 133.333%;
}
.blog-post-list-block[data-image-aspect-ratio="widescreen"] .blog-post-item .blog-post-image-wrapper-inner{
    padding-bottom: 56.25%;
}

.blog-post-list-block[data-show-excerpt="no"] .blog-post-excerpt,
.blog-post-list-block[data-show-read-more-link="no"] .blog-post-read-more-link{
	/* Applying '!important' to override inline-block specificity of blog-post-read-more-link */
	display: none !important;
}

.blog-post-list-block .blog-post-name{
	/*
		Override default margin-bottom on H1 tag
		Seller can customise spacing elsewhere
	*/
	margin-bottom: 0px;
}

.blog-post-list-block .blog-post-read-more-link{
	display: inline-block;
}

.blog-post-list-block[data-meta-delimiter="dot"] .blog-post-meta .blog-post-meta-delimiter:after{
	content: '\2022';
}
.blog-post-list-block[data-meta-delimiter="pipe"] .blog-post-meta .blog-post-meta-delimiter:after{
	content: '|';
}
.blog-post-list-block[data-meta-delimiter="dash"] .blog-post-meta .blog-post-meta-delimiter:after{
	content: '-';
}
.blog-post-list-block[data-meta-delimiter="space"] .blog-post-meta .blog-post-meta-delimiter:after{
	content: ' ';
}

.blog-post-list-block .blog-post-item .blog-post-image-wrapper-inner{
	display: block;
}

html.no-js .blog-post-list-block .blog-post-item img.section-image{
	display: none;
}

.blog-post-list-block[data-layout="sideBySide"] .media-not-provided-thumbnail-wrapper,
.blog-post-list-block[data-layout="alternatingSideBySide"] .media-not-provided-thumbnail-wrapper{
	background-color: #DDDDDD;
    height: 300px;
    position: relative;
}
.blog-post-list-block[data-layout="sideBySide"] .media-not-provided-thumbnail-wrapper img.media-not-provided-thumbnail,
.blog-post-list-block[data-layout="alternatingSideBySide"] .media-not-provided-thumbnail-wrapper img.media-not-provided-thumbnail{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
}
.blog-post-list-block[data-layout="grid"] .media-not-provided-thumbnail-wrapper{
	padding-top: 50px;
	padding-bottom: 50px;
}
.blog-post-list-block[data-layout="grid"] .media-not-provided-thumbnail-wrapper,
.blog-post-list-block[data-layout="singleColumn"] .media-not-provided-thumbnail-wrapper{
	display: none;
}

/* LAYOUT TYPE GRID START */

.blog-post-list-block[data-layout="grid"] .blog-post-item{
	position: relative;
	opacity: 0;
	transform: translatey(-15px);
	transition: opacity 1s ease,transform 1s ease;
}

@media screen and (max-width: 767px) {
	.section-wrapper[data-section-key="blog"] .blog-post-list-block[data-layout="grid"] .blog-post-item{
		margin-bottom: 30px;
	}
}

.blog-post-list-block[data-layout="grid"] .blog-post-item[data-show="true"],
html.no-js .blog-post-list-block[data-layout="grid"] .blog-post-item{
    opacity: 1;
    transform: translatey(0)
}

.blog-post-list-block[data-layout="grid"] .blog-post-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

.blog-post-list-block[data-layout="grid"] .blog-post-item .blog-post-image-wrapper-outer{
	width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    line-height: 0;
}

.blog-post-list-block[data-layout="grid"][data-grid-number-of-columns="2"]{
    grid-template-columns: repeat(2, 1fr);
}
.blog-post-list-block[data-layout="grid"][data-grid-number-of-columns="3"]{
    grid-template-columns: repeat(3, 1fr);
}
.blog-post-list-block[data-layout="grid"][data-grid-number-of-columns="4"]{
    grid-template-columns: repeat(4, 1fr);
}
.blog-post-list-block[data-layout="grid"][data-grid-number-of-columns="5"]{
    grid-template-columns: repeat(5, 1fr);
}
.blog-post-list-block[data-layout="grid"][data-grid-number-of-columns="6"]{
    grid-template-columns: repeat(6, 1fr);
}

.blog-post-list-block[data-layout="grid"] .blog-post-item .blog-post-image-wrapper-outer img.section-image{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 1s ease,transform 1s ease;
}

html.no-js .blog-post-list-block[data-layout="grid"] .blog-post-item .blog-post-image-wrapper-outer img.section-image{
	display: none;
}
html.no-js .blog-post-list-block[data-layout="grid"] .blog-post-item .blog-post-image-wrapper-outer img.section-image-fallback{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
}

/* LAYOUT TYPE GRID END */

/* LAYOUT TYPE SIDE BY SIDE START */

.blog-post-list-block[data-layout="sideBySide"] .blog-post-item{
    width: 100%;
    position: relative;
    display: block;
    opacity: 0;
    transform: translatey(-15px);
    transition: opacity 1s ease,transform 1s ease
}

.blog-post-list-block[data-layout="sideBySide"] .blog-post-item[data-show="true"],
html.no-js .blog-post-list-block[data-layout="sideBySide"] .blog-post-item{
    opacity: 1;
    transform: translatey(0)
}

.blog-post-list-block[data-layout="sideBySide"] .blog-post-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

@media screen and (min-width: 768px) {
    .blog-post-list-block[data-layout="sideBySide"] .blog-post-item{
        display:flex;
        align-items: center
    }
}

.blog-post-list-block[data-layout="sideBySide"] .blog-post-image-wrapper-inner{
	margin: 0;
	height: 0;
	overflow: hidden;
	position: relative;
	display: -moz-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.blog-post-list-block[data-layout="sideBySide"][data-image-placement="right"] .blog-post-image-wrapper-outer{
	order: 1;
}

.blog-post-list-block[data-layout="sideBySide"] img.section-image{
	/* Image needs to be able to occupy more than container */
	max-width: none;
}

/* LAYOUT TYPE SIDE BY SIDE END */

/* LAYOUT TYPE ALTERNATING SIDE BY SIDE START */

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item{
    width: 100%;
    position: relative;
    display: block;
    opacity: 0;
    transform: translatey(-15px);
    transition: opacity 1s ease,transform 1s ease
}

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item[data-show="true"],
html.no-js .blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item{
    opacity: 1;
    transform: translatey(0)
}

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

@media screen and (min-width: 768px) {
    .blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item{
        display:flex;
        align-items: center
    }
}

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-image-wrapper-inner{
	margin: 0;
	height: 0;
	overflow: hidden;
	position: relative;
	display: -moz-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.blog-post-list-block[data-layout="alternatingSideBySide"][data-image-placement="right"] .blog-post-image-wrapper-outer{
	order: 1;
}

.blog-post-list-block[data-layout="alternatingSideBySide"] img.section-image{
	/* Image needs to be able to occupy more than container */
	max-width: none;
}

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-item:nth-child(even){
    flex-direction: row-reverse;
}

.blog-post-list-block[data-layout="alternatingSideBySide"] .blog-post-text-wrapper{
	flex-grow: 1;
}

/* LAYOUT TYPE ALTERNATING SIDE BY SIDE END */

/* LAYOUT TYPE SINGLE COLUMN START */

.blog-post-list-block[data-layout="singleColumn"] .blog-post-item{
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 1s ease 0s, transform 1s ease 0s;
}

.blog-post-list-block[data-layout="singleColumn"] .blog-post-item[data-show="true"],
html.no-js .blog-post-list-block[data-layout="singleColumn"] .blog-post-item{
    opacity: 1;
    transform: translateY(0px);
}

.blog-post-list-block[data-layout="singleColumn"] .blog-post-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

.blog-post-list-block[data-layout="singleColumn"] .blog-post-image-wrapper-inner{
    margin: 0;
    height: 0;
    overflow: hidden;
    position: relative;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.blog-post-list-block[data-layout="singleColumn"] .blog-post-text-wrapper{
    margin-left: auto;
    margin-right: auto
}

/* LAYOUT TYPE SINGLE COLUMN END */

/******************************************************************************/
/*        		       BLOG POST LIST BLOCK END         				  	  */
/******************************************************************************/

/******************************************************************************/
/*        		       BLOG POST COMMENTS BLOCK END         				  */
/******************************************************************************/

.blog-post-comments-block{
	margin-top: 40px;
}

.blog-post-comments-block .comments-wrapper{
	margin-top: 25px;
}

.blog-post-comments-block .comments-wrapper .comment{
	margin-bottom: 30px;
	transition: all .2s ease-out;
	border-top: 1px solid rgba(0,0,0,.1);
}

.blog-post-comments-block .comments-wrapper .comment:first-child{
	border-top: none;
}

.blog-post-comments-block .comment .comment-header{
	padding-top: 15px;
	padding-bottom: 15px;
	min-height: 34px;
	position: relative;
	overflow: hidden;
}

.blog-post-comments-block .comment .comment-header .comment-user-info{

}

.blog-post-comments-block .comment .comment-header .comment-author{

}

.blog-post-comments-block .comment .comment-header .comment-date{
	display: inline-block;
}

.blog-post-comments-block .comment .comment-header .comment-actions{
    height: 34px;
    position: absolute;
    right: 0px;
    top: 15px;
    line-height: 34px;
}
.blog-post-comments-block .comment .comment-header .comment-actions .comment-action-button{
	transform: translatez(0);
	background-color: #a3a3a3;
	background-color: rgba(0,0,0,.2);
	cursor: pointer;
	position: relative;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-position: center center;
	opacity: 0;
	background-repeat: no-repeat;
	transition: all .12s ease-out;
	border: none;
	padding: 0px;
}
.blog-post-comments-block .comment .comment-core:hover .comment-action-button{
	opacity: 1;
}
/* Reply button should only be shown on first level and second level comments */
.blog-post-comments-block .comment .comment .comment .comment-reply-button{
	display: none;
}

.blog-post-comments-block .comment .comment-header .comment-actions .comment-reply-button{
	background-image: url('/images/themes/_core/blog-post-comment-reply.svg');
}
.blog-post-comments-block .comment .comment-header .comment-actions .comment-report-button{
	background-image: url('/images/themes/_core/blog-post-comment-report.svg');
}
.blog-post-comments-block .comment .comment-header .comment-actions .comment-delete-button{
	background-image: url('/images/themes/_core/blog-post-comment-delete.svg');
}

.blog-post-comments-block .comment .comment-content-read-more-link-wrapper{
	display: none;
}

.blog-post-comments-block .comment .reply-to-comment-form-wrapper{
	display: none;
	margin-left: 50px;
    margin-top: 30px;
}

.blog-post-comments-block .comment .comment-replies-wrapper{
	margin-left: 50px;
}

.blog-post-comments-block .load-more-comments-button .spinner-border{
    width: 10px;
    height: 10px;
    vertical-align: baseline;
    border-width: 2px;
    margin-right: 5px;
}

/******************************************************************************/
/*        		       BLOG POST COMMENTS BLOCK END         				  */
/******************************************************************************/


/******************************************************************************/
/*        				COLLECTION LIST BLOCK START         		 	      */
/******************************************************************************/

.section-wrapper[data-section-setting-text-align="left"] .collection-list-block{
	text-align: left;
}
.section-wrapper[data-section-setting-text-align="center"] .collection-list-block{
	text-align: center;
}
.section-wrapper[data-section-setting-text-align="right"] .collection-list-block{
	text-align: right;
}

@media screen and (min-width: 768px) {
	.collection-list-block{
		display: grid;
		padding: 0;
	}
}

@media screen and (max-width: 767px) {
	.collection-list-block .grid-item{
		margin-bottom: 30px;
	}
}

.collection-list-block .grid-item{
	position: relative;
	opacity: 0;
    transform: translatey(-15px);
    transition: opacity 1s ease,transform 1s ease;
}

.collection-list-block .grid-item[data-show],
html.no-js .collection-list-block .grid-item{
	opacity: 1;
    transform: translatey(0);
}

.collection-list-block .grid-item[data-media-not-provided="1"]{
	animation: core-animation-no-image-fade-in 1s ease forwards;
}

.collection-list-block .grid-item .grid-item-contents{
	/*
		Having position relative on inner wrapper allows image and meta to
		be grouped up separately from the grid item link.
		This means meta can be shown on hovering over image.
	*/
	position: relative;
	/*
		Need to specify height for items with media-not-provided
	*/
	height: 100%;
}

.collection-list-block .grid-item .grid-item-contents .grid-item-image-wrapper-outer{
	width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    line-height: 0;
}

.collection-list-block[data-image-aspect-ratio="square"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 100%;
}
.collection-list-block[data-image-aspect-ratio="standard"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 66.666%;
}
.collection-list-block[data-image-aspect-ratio="standardVertical"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 150%;
}
.collection-list-block[data-image-aspect-ratio="fourThree"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 75%;
}
.collection-list-block[data-image-aspect-ratio="threeFourVertical"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 133.333%;
}
.collection-list-block[data-image-aspect-ratio="widescreen"] .grid-item .grid-item-image-wrapper-inner{
    padding-bottom: 56.25%;
}

.collection-list-block[data-grid-number-of-columns="2"]{
    grid-template-columns: repeat(2, 1fr);
}
.collection-list-block[data-grid-number-of-columns="3"]{
    grid-template-columns: repeat(3, 1fr);
}
.collection-list-block[data-grid-number-of-columns="4"]{
    grid-template-columns: repeat(4, 1fr);
}
.collection-list-block[data-grid-number-of-columns="5"]{
    grid-template-columns: repeat(5, 1fr);
}
.collection-list-block[data-grid-number-of-columns="6"]{
    grid-template-columns: repeat(6, 1fr);
}

.collection-list-block .grid-item .grid-item-image-wrapper-inner img.section-image{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 1s ease,transform 1s ease;
}

html.no-js .collection-list-block .grid-item .grid-item-image-wrapper-inner img.section-image{
	display: none;
}
html.no-js .collection-list-block .grid-item .grid-item-image-wrapper-inner img.section-image-fallback{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
}

.collection-list-block .grid-item .media-not-provided-thumbnail-wrapper{
	background-color: #DDDDDD;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.collection-list-block .grid-item .grid-item-image-wrapper-outer .media-not-provided-thumbnail-wrapper img.media-not-provided-thumbnail{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    display: block;
    height: 100%;
}

.collection-list-block .grid-item .grid-item-link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Grid link needs to be above grid contents, consider metaType hover */
	z-index: 1;
}

.collection-list-block[data-meta-type="standard"] .grid-item .grid-item-meta-wrapper-outer{
	margin-top: 10px;
}

.collection-list-block .grid-item .grid-item-image-wrapper-outer .grid-item-image-wrapper-inner img.section-image,
.collection-list-block .grid-item .grid-item-image-wrapper-outer .grid-item-image-wrapper-inner .media-not-provided-thumbnail-wrapper,
.collection-list-block[data-grid-block-meta-type="overlay"] .grid-item .overlay-background{
	border-radius: 3px;
}




/* Meta type overlay */
.collection-list-block[data-meta-type="overlay"] .grid-item .grid-item-meta-wrapper-outer{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	/* Center contents vertically and horizontally */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.collection-list-block[data-meta-type="overlay"] .grid-item .grid-item-meta-wrapper-inner{
    position: relative;
    z-index: 1;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}
.collection-list-block[data-meta-type="overlay"] .grid-item .overlay-background{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.collection-list-block[data-meta-type="overlay"] .grid-item .inherit-color{
	color: inherit;
}

/******************************************************************************/
/*        				COLLECTION LIST BLOCK END         		 	      	  */
/******************************************************************************/