/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}h1{font-size:2em;margin:0.67em0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1pxdottedButtonText;}fieldset{padding:0.35em0.75em0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}

@font-face{
  font-family: 'Century Gothic Reg';
  src: url('../font/century-gothic-reg.eot');
  src: url('../font/century-gothic-reg.eot?#iefix') format('embedded-opentype'),
  url('../font/century-gothic-reg.woff') format('woff'),
  url('../font/century-gothic-reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'Century Gothic Reg';
	src: url('../font/CenturyGothic-Bold.eot');
	src: url('../font/CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'),
		url('../font/CenturyGothic-Bold.woff2') format('woff2'),
		url('../font/CenturyGothic-Bold.woff') format('woff'),
		url('../font/CenturyGothic-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DIN Condensed';
	src: url('../font/DINCond-Bold.eot');
	src: url('../font/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
		url('../font/DINCond-Bold.woff2') format('woff2'),
		url('../font/DINCond-Bold.woff') format('woff'),
		url('../font/DINCond-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

html, body {
	font-family: 'Century Gothic', 'Century Gothic Reg', Arial, sans-serif;
	font-size: 16px;
}
#shadefinder-container {
	overflow: hidden;
}
#shadefinder-container input,
#shadefinder-container textarea,
#shadefinder-container button,
#shadefinder-container select,
#shadefinder-container a,
#shadefinder-container img,
#shadefinder-container h1,
#shadefinder-container h2,
#shadefinder-container h3,
#shadefinder-container span,
#shadefinder-container div,
#shadefinder-container section {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#shadefinder-container, 
#shadefinder-container .shadefinder-step {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}
#shadefinder-container #shadefinder-step-1 {
	z-index:1;
}
#shadefinder-container #shadefinder-step-2 {
	z-index:2;
}
#shadefinder-container #shadefinder-step-3 {
	z-index:3;
	background: #ffffff;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow: hidden;
}
#shadefinder-container .shadefinder-step {
	transition: all .5s ease-in-out;
}
#shadefinder-container .shadefinder-step.hide {
	z-index: -1 !important;
	opacity: 0 !important;
}
#shadefinder-step-1 {
	background: url('../images/bg.jpg') 50% 100% no-repeat #000000;
	background-size: cover;
	text-align: center;
	color: #ffffff;
	font-size: 1.75rem;
}
#shadefinder-step-1 h2 {
	font-family: 'Century Gothic', 'Century Gothic Reg',  Arial, sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-weight: 100;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: #fff;
	margin: 0;
	font-size: 1.4rem;
	padding: .75rem;
}
#shadefinder-step-1 h1 {
	font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif; /* 'DIN Condensed', Arial, sans-serif;*/
	margin:0;
	line-height: 1.1;
	margin-top: 30vh;
}
#shadefinder-step-1 p {
	font-weight: normal;
	font-size: 1.08rem;
	max-width: 24.56rem;
	margin: .75rem auto 2rem;
}
#shadefinder-step-1-button {
	border: 1px solid #ffffff;
	padding: 1rem 1.8rem;
	border-radius: 2rem;
	font-size: 1rem;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	transition: all .5s ease-in-out;
}
#shadefinder-step-1-button:hover,
#shadefinder-step-1-button:focus {
	background: #ffffff;
	color: #000000;
}

#shadefinder-step-2 {
	display: flex;
	flex-direction: column;
	background: #000000;
	vertical-align: middle;
}
#shadefinder-step-2 .shadefinder-cat {
	display: block;
	position: relative;
	vertical-align: middle;
	text-align: center;
	flex: 1;
	max-height: 25vh;
	transition: all .33s linear;
}
#shadefinder-step-2 .shadefinder-cat h1 {
	font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif;  /* 'DIN Condensed', Arial, sans-serif; */
	line-height: 1.2;
	margin:0;
	padding: 5rem 0;
	padding: 10.9vh 0;
	color: #000000;
	text-transform: uppercase;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all .33s linear;
	max-height: 25vh;
}
#shadefinder-step-2 .shadefinder-cat.extended {
	flex: 20;
	max-height: 100vh;
}
#shadefinder-step-2 .shadefinder-cat.collapsed {
	flex: 1;
}
#shadefinder-step-2 .shadefinder-cat.collapsed h1 {
	padding: .69rem 0;
	max-height: 100%;
}
@media screen and (min-width: 778px) {
#shadefinder-step-2 .shadefinder-cat.collapsed h1 {
	padding: 1.16rem 0;
}
#shadefinder-step-1 h1 {
	margin-top: 36vh;
}
}
#shadefinder-step-2 .shadefinder-cat.extended h1 {
	padding: .6rem 0 30vh;
	max-height: 3rem;
}
#shadefinder-step-2 #shadefinder-cat-1 h1 {
	background: #f5d9c6;
}
#shadefinder-step-2 #shadefinder-cat-2 h1 {
	background: #f1c2a1;
}
#shadefinder-step-2 #shadefinder-cat-3 h1 {
	background: #e4aa80;
}
#shadefinder-step-2 #shadefinder-cat-4 h1 {
	background: #935025;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-card {
	padding-top: 15vh;
	height: 32vh;
	max-width: 10rem;
	margin: 0 auto;
	position: relative;
	cursor: pointer;
}

#shadefinder-step-2 .shadefinder-cat-carrousel-card:after {
	content: '+';
	position: absolute;
	display: block;
	bottom:.5rem;
	right:.5rem;
	color: #000000;
	font-weight: bold;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-card.active h2 {
	text-decoration: underline;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-card.active:after {
	content: '-';
}

#shadefinder-step-2 .shadefinder-cat-carrousel-picture {
	/* display: none !important; */
	display: inline-block;
	cursor: pointer;
	position: relative;
	top: 2rem;
}
/*
#shadefinder-step-2 .shadefinder-cat-carrousel-picture.active {
	display: inline-block !important;
} */
#shadefinder-step-2 .slick-list {
	overflow: visible;
	position: relative;
}
#shadefinder-step-2 .shadefinder-cat-carrousel {
	max-height:0;
    overflow: hidden;
	position: relative;
	top: -20vh;
	transition: all .33s linear;
}
#shadefinder-step-2 .extended .shadefinder-cat-carrousel {
	z-index: 1;
    max-height: 50vh;
    margin-bottom: -10vh;
}
#shadefinder-step-2 .extended .slick-slide .shadefinder-cat-carrousel-item {
    margin: 0 .5rem;
}
#shadefinder-step-2 .extended .slick-list {
	z-index: 1;
	max-height: 100vh;
}
.slick-initialized .slick-slide,
#shadefinder-step-2 .shadefinder-cat-carrousel-item .slick-slide,
#shadefinder-step-2 .shadefinder-cat-carrousel-item .slick-slide div,
#shadefinder-step-2 .shadefinder-cat-carrousel-item .slick-slide img {
	outline: 0 !important;
	border: 0 !important;
}
.slick-initialized .slick-slide {
	min-height: 230px;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-item {
	opacity: 0;
	z-index: -1;
	transition: all .33s linear;
}
#shadefinder-step-2 .shadefinder-cat.extended .shadefinder-cat-carrousel-item {
	opacity: 1;
	z-index: 2;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-card h2 {
	font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif;  /*'DIN Condensed', Arial, sans-serif;*/
	line-height: 1.2;
	color: #000000;
	text-transform: uppercase;
	font-size: .92rem;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-item-text {
	color: #ffffff;
	font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif; /*'DIN Condensed', Arial, sans-serif;*/
	line-height: 1.2;
	text-transform: uppercase;
	font-size: .78rem;
	padding: .4rem 0;
	max-width: 143px;
	display: block;
	text-align: center;
}

#shadefinder-step-2 #shadefinder-cat-1 .shadefinder-cat-carrousel-card {
	background: #ffe1cc;
}
#shadefinder-step-2 #shadefinder-cat-2 .shadefinder-cat-carrousel-card {
	background: #f8caaa;
}
#shadefinder-step-2 #shadefinder-cat-3 .shadefinder-cat-carrousel-card {
	background: #f1b78d;
}
#shadefinder-step-2 #shadefinder-cat-4 .shadefinder-cat-carrousel-card {
	background: #a36034;
}

#shadefinder-step-2 .shadefinder-cat-carrousel-picture img {
	max-width: 143px;
}


#shadefinder-step-3 {
	background: #ffffff;
	font-size: 0;
}
#shadefinder-step-3-close {
    position: absolute;
    top: .9rem;
    right: 1.5rem;
}
.shadefinder-step-3-button {
	width: 80%;
	max-width: 8rem;
	font-size: 1.1rem;
	border: 1px solid #000000;
	padding: .5rem 1.2rem;
	border-radius: 2rem;
	font-size: .86rem;
	text-transform: uppercase;
	color: #ffffff;
	background: #000000;
	text-decoration: none;
	transition: all .5s ease-in-out;
	display: block;
	margin: 1rem 0;
	text-align: center;
}
.shadefinder-step-3-button:hover,
.shadefinder-step-3-button:focus {
	background: #ffffff;
	color: #000000;
}

#shadefinder-step-3-col-left {
	vertical-align: top;
	padding: 0;
}
#shadefinder-step-3-visuel {
	max-width: 107%;
}
#shadefinder-step-3-col-center {
	vertical-align: top;
}
#shadefinder-step-3-col-right {
	vertical-align: top;
}
.shadefinder-step-3-title {
	display: block;
	font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif; /*'DIN Condensed', Arial, sans-serif;*/
	line-height: 1.2;
	font-size: .88rem;
	text-transform: uppercase;
    padding: 1rem 0 0;
    min-height: 2.2rem;
}
.shadefinder-step-3-subtitle {
	margin: 0;
	font-size: .8rem;
	text-transform: uppercase;
	text-align: left;
}
#shadefinder-step-3-price {
	font-weight: bold;
}
#shadefinder-step-3-col-center .shadefinder-step-3-col-inner,
#shadefinder-step-3-col-right .shadefinder-step-3-col-inner {
	padding: 5vh 1rem;
}
#shadefinder-step-3-col-center .shadefinder-step-3-col-inner img,
#shadefinder-step-3-col-right .shadefinder-step-3-col-inner img {
	width: 150px;
	max-width: 100%;
}


#shadefinder-mobile-header,
#shadefinder-mobile-header-close {
	display: none;
}



#shadefinder-step-2 .shadefinder-cat {
	position: relative;
}
#shadefinder-step-2 .shadefinder-cat h1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 100%;
	max-width: 100%;
	padding: 5rem 0;
	padding: 10.9vh 0;
}
#shadefinder-step-2.hide .shadefinder-cat h1 {
	left: 100%;
	bottom: 100%;
	max-height: 0;
	max-width: 0;
	padding: 0;
}
#shadefinder-step-2.animation-end .shadefinder-cat h1 {
	position: relative;
}


#shadefinder-step-2 .shadefinder-cat-carrousel-picture:after {
	display: block;
	content: ' ';
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 1.7rem;
	right: 1rem;
	transition: all .5s linear .2s;
	max-width: 100%;
}
#shadefinder-step-2 .shadefinder-cat-carrousel-picture.animated:after {
	left: 101%;
	max-width: 0;
}
#shadefinder-step-2 #shadefinder-cat-1 .shadefinder-cat-carrousel-picture:after {
	background: #ffe1cc;
}
#shadefinder-step-2 #shadefinder-cat-2 .shadefinder-cat-carrousel-picture:after {
	background: #f8caaa;
}
#shadefinder-step-2 #shadefinder-cat-3 .shadefinder-cat-carrousel-picture:after {
	background: #f1b78d;
}
#shadefinder-step-2 #shadefinder-cat-4 .shadefinder-cat-carrousel-picture:after {
	background: #a36034;
}

.new-item {
    border: 1px solid #fff;
    display: inline-block;
    padding: 2px 4px;
    font-size: .65rem;
}
#shadefinder-step-3 .new-item {
	border-color: #000;
    font-size: .55rem;
	position: relative;
	top: -2px;
	left: 2px;
}


@media screen and (min-width:768px){
	#shadefinder-step-2 .shadefinder-cat {
		height: 25%;
	}
	#shadefinder-step-2.animation-end .shadefinder-cat {
		height: auto;
	}
	#shadefinder-step-2-inner {
		height: 100%;
	}
}

@media screen and (max-width:767px){
	#shadefinder-step-1 {
		background: url(../images/bg-mobile.jpg) 50% 100% no-repeat #000000;
		background-size: cover;
	}
	#shadefinder-step-1 h1 {
		margin-top: 30vh;
	}
	#shadefinder-step-1 p {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#shadefinder-container #shadefinder-step-2, 
	#shadefinder-container #shadefinder-step-3 {
		top: 3rem;
		height: calc(100vh - 3rem);
		overflow-y: auto;
		overflow-x: hidden;
	}
	#shadefinder-step-2 .shadefinder-cat {
		/*
		height: calc(25vh - (3rem / 4));
		max-height: calc(25vh - (3rem / 4));
		*/
		height: 25%;
		max-height: 25%;
		overflow: hidden;
	}
	
	#shadefinder-step-2 .shadefinder-cat.extended,
	#shadefinder-step-2 .shadefinder-cat.collapsed {
		height: auto;
	}
	#shadefinder-step-2 .shadefinder-cat h1 {
		padding: 3.5rem 0 1.5rem;
		padding: 9.5vh 0 1.5rem;
		font-size: 1.8rem;
		letter-spacing: -0.04rem;
		height: 100%;
		max-height: 15vh;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-card,
	#shadefinder-step-2 .shadefinder-cat-carrousel-picture img {
		max-width:15rem;
		width: 15rem;
		max-width:75vw;
		width: 75vw;
	}
	#shadefinder-step-2 .slick-initialized .slick-slide {
		min-height: 40vh;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-item-text {
		max-width:15rem;
		max-width:75vw;
		font-size: 1.45rem;
		letter-spacing: -0.025rem;
	}

	#shadefinder-step-2 .shadefinder-cat-carrousel-picture:after {
		bottom: 2.51rem;
	}
	
	#shadefinder-container #shadefinder-step-3 {
		top: calc(3rem + 20px);
		height: auto !important;
		bottom: 20px;
		position: fixed;
	}
	.shadefinder-step-3-button {
		width: auto;
		font-size: .76rem;
		padding: .5rem;
	}

	#shadefinder-mobile-header {
		display: block;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		background: #000000;
		height: 3rem;
		color: #ffffff;
	}
	#shadefinder-mobile-header span {
		color: #ffffff;
		font-family: 'Century Gothic Reg', 'Century Gothic', Arial, sans-serif; /*'DIN Condensed', Arial, sans-serif;*/
		line-height: 1.2;
		font-size: 1.5rem;
		text-transform: uppercase;
		padding: .6rem 0;
		display: block;
		width:100%;
		text-align: center;
	}
	
	#shadefinder-mobile-header-back {
		display: block;
		position: absolute;
		left: 1rem;
		top: 1.5rem;
		margin-top: -12px;
		z-index: 11;
	}
	#shadefinder-mobile-header-close {
		display: block;
		position: absolute;
		right: 1rem;
		top: 1.5rem;
		margin-top: -12px;
		z-index: 11;
	}
	#shadefinder-mobile-header.hide,
	#shadefinder-mobile-header-back.hide { /*,
	/* #shadefinder-mobile-header-close.hide { */
		display: none;
	}
	
	#shadefinder-step-3-close {
		display: none;
	}
	
	/*
	#shadefinder-step-2 .shadefinder-cat-carrousel-card {
		display: none!important;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-picture {
		display: block!important;
	}
	*/
	
	#shadefinder-step-3 {
		/* overflow-y: auto; */
		max-height: 90vh;
	}
	/*
	#shadefinder-step-3-col-right {
		text-align: center;
		overflow: visible;
		position: relative;
	}
	.shadefinder-step-3-button {
		margin: 2rem auto;
		z-index: 4;
		position: absolute;
		top: 14vh;
		right: 2rem;
		padding: .8rem 2rem;
	}
	#shadefinder-step-3-price {
		z-index: 4;
		position: absolute;
		top: 14vh;
		left: 1rem;
		margin: 2.8rem 0 1rem;
		color: #000000;
		font-size: 1rem;
	}
	#shadefinder-step-3-title {
		position: absolute;
		top: .65rem;
		left: 1rem;
        font-size: 1.6rem;
		line-height: 1;
		text-align: left;
		z-index: 4;
		max-width: 60%;
	}
	
	#shadefinder-step-3-product {
		position: absolute;
		max-width: 42%;
		top:-6rem;
		right: 0;
	}
	*/
	
	#shadefinder-step-3-col-left .shadefinder-step-3-col-inner {
		overflow: hidden;
	}
	/*
	#shadefinder-step-3-col-left .shadefinder-step-3-col-inner img {
		width: 90%;
		margin-top: -1vh
	}
	*/
	#shadefinder-step-3-col-center,
	#shadefinder-step-3-col-right {
		height: 34vh;
		width: 50%;
		display: inline-block;
	}	
	
	#shadefinder-step-2-inner {
		height: 100%;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-picture {
		top: 0;
		position: relative;
	}
	#shadefinder-step-2 .shadefinder-cat.extended {
		max-height: calc(100vh - 3rem);/* calc(100vh - (4.5rem * 3) - 3rem ); */
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-card {
		margin-bottom: .9rem !important;
		height: 34vh;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel {
		top: -6vh;
	}
	#shadefinder-step-2 .collapsed .shadefinder-cat-carrousel {
		display: none;
	}
	#shadefinder-step-2 .extended .shadefinder-cat-carrousel {
		overflow: visible;
		margin-bottom: 1rem;
	}
	#shadefinder-step-2 .shadefinder-cat.collapsed {
		max-height: 4.5rem;
	}
	#shadefinder-step-2 .shadefinder-cat.collapsed h1 {
		padding: 1.2rem 0;
		max-height: 2.2rem;
	}
	#shadefinder-step-2 .shadefinder-cat.extended h1 {
		padding: 1.5rem 0 9vh;
	}
	#shadefinder-step-2 .shadefinder-cat-carrousel-card h2 {
		font-size: 1.6rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.shadefinder-carrousel-scrollbar {
	display: none;
}

@media screen and (min-width:768px){
		
	#shadefinder-container #shadefinder-step-3 {
		z-index:3;
		background: #ffffff;
		top: 70px;
		left: 20px;
		right: 20px;
		bottom: 70px;
		width: calc(100% - 40px);
		height: calc(100% - 140px);
		overflow: hidden;
	}
	#shadefinder-step-3-col-left {
		width: 46%;
		font-size: 1rem;
		display:inline-block;
		overflow: hidden;
	}
	#shadefinder-step-3-col-center {
		width: 27%;
		font-size: 1rem;
		display:inline-block;
	}
	#shadefinder-step-3-col-right {
		width: 27%;
		font-size: 1rem;
		display:inline-block;
	}
	.shadefinder-carrousel-scrollbar {
		display: block;
		z-index: -1;
		opacity: 0;
		transition: opacity .35s linear .2s;
	}
	.extended .shadefinder-carrousel-scrollbar {
		z-index: 2;
		opacity: 1;
		transition: opacity .1s linear 0s;
	}
	.shadefinder-carrousel-scrollbar {
		width: 100%;
		height: .75rem;
		background: #404040;
		bottom: 10vh;
		position: absolute;
		left: 0;
		right: 0;
	}
	.shadefinder-carrousel-scrollbar span {
		display: block;
		position: absolute;
		top: 0;
		bottom:0;
		height: .75rem;
		background: #7C7C7C;
		cursor: w-resize;
		transition: left .25s linear, background .2s ease-in-out;
	}
	.shadefinder-carrousel-scrollbar span.scrolling {
		transition: left .02s linear, background .2s ease-in-out;
	}
	.shadefinder-carrousel-scrollbar span:hover {
		background: #9c9c9c;
	}
}

/*
@media screen and (min-width:777px){
	#shadefinder-container {
		max-width: 777px;
		max-height: 486px;
	}
}
/*
@media screen and (min-width:780px){
	html, body {
		font-size: 18px;
	}
}
@media screen and (min-width:980px){
	html, body {
		font-size: 20px;
	}
}
@media screen and (min-width:1230px){
	html, body {
		font-size: 22px;
	}
}
@media screen and (min-width:1520px){
	html, body {
		font-size: 24px;
	}
}
@media screen and (min-width:1760px){
	html, body {
		font-size: 26px;
	}
} */

/* iphone X */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { 
	#shadefinder-step-2 .shadefinder-cat h1 {
		padding-top: 6vh;
	}
	#shadefinder-step-1 h1 {
		margin-top: 35vh;
	}
}

@media screen and (max-width: 460px) {
	#shadefinder-step-3-visuel {
		max-height: 40vh;
	}
}
@media screen and (max-width: 380px) {
	#shadefinder-step-3-visuel {
		max-height: 30vh;
	}
}