/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result-page of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* WEBFONTS */

@font-face {
    font-family: 'Miller-Light';
    src: url('../webfonts/MillerDisplayLanc-Light.woff2') format('woff2'),
         url('../webfonts/MillerDisplayLanc-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Miller-Roman';
    src: url('../webfonts/MillerDisplayLanc-Roman.woff2') format('woff2'),
         url('../webfonts/MillerDisplayLanc-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../webfonts/Gotham-Bold.woff2') format('woff2'),
         url('../webfonts/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../webfonts/Gotham-Medium.woff2') format('woff2'),
         url('../webfonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../webfonts/Gotham-Book.woff2') format('woff2'),
         url('../webfonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../webfonts/Gotham-Light.woff2') format('woff2'),
         url('../webfonts/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../webfonts/Gotham-ExtraLight.woff2') format('woff2'),
         url('../webfonts/Gotham-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a,
a:focus,
a:active,
a:hover,
button[type=submit],
button[type=submit]:focus,
button[type=submit]:active,
button[type=submit]:hover {
	text-decoration:none;
	outline:none;
	outline:0;
}

body {
	font-family: 'Gotham';
	color: #000;
	background: #fff;
	display: flex;
	justify-content: center;
}

h1 {
	font-family: 'Miller-Light';
	font-size: 20px;
	line-height: 125%;
}

h2 {
	font-family: 'Miller-Roman';
	font-size: 20px;
	line-height: 125%;
}

p {
	font-size: 16px;
	line-height: 125%;
}

.cta {
	padding: .9375rem 1.375rem;
	background: #000;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
}

.cta:hover {
	background: #d51b51;
	color: #fff;
}

.wrapper {
	width: 100%;
	max-width: 950px;
	min-height: 100vh;
	background: rgba(0,0,0,0.05);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.step1-container .content,
.step2-container .content,
.step3-container .content,
.result-page .content{
	width: 100%;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.step1-container .logo,
.step2-container .logo,
.step3-container .logo,
.result-page .logo {
	max-width: 120px;
}

.step1-container h1,
.step2-container h1,
.step3-container h1,
.result-page h1 {
	margin: 20px 0;
	font-size: 25px;
	line-height: 100%;
}

.step1-container h1 span,
.step2-container h1 span,
.step3-container h1 span,
.result-page h1 span {
	font-size: 16px;
}

.step1-container p,
.step2-container p,
.step3-container p {
	font-size: 16px;
	margin: 0;
}

/* HOME */

.home {
	flex-grow: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home .content {
	width: 100%;
	flex: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.home .logo {
	width: 110px;
}

.home h1 {
	margin: 20px 0 10px 0;
}

.home p {
	font-size: 16px;
}

.home p.tips {
	font-size: 10px;
	margin: 0;
}

.home .cta {
	margin: 10px 0 15px 0;
}

.home .slider {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.home .slider .box {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.home .slider .box img {
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
	object-fit: cover;
}

.home .slider .box .visu {
	flex: 1;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.home .slider .box .visu::before {
    width: 100%;
    padding-bottom: 100%;
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.home .slider .box .visu .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	display: flex;
}

.home .slider .box .visu .shadow {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
	background: url("../img/bg-shadow-slider-home.png") no-repeat center center;
	background-size: cover;
}

.home .slider .box .copy {
	width: 100%;
	position: relative;
	z-index: 2;
	color: #fff;
	font-weight: 300;
	font-size: 13px;
	line-height: 125%;
}

.home .slider .box .copy::before {
    width: 100%;
    padding-bottom: 100%;
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.home .slider .box .copy .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.home .slider .box.beige-rose .copy {
	background: #ceaa92;
}

.home .slider .box.beige-dore .copy {
	background: #BE926D;
}

.home .slider .box.ambre .copy {
	background: #7d4b32;
}

.home .slider .box.beige-cristallin .copy {
	background: #D9BD98;
}

.home .slider .box.beige-cuivre .copy {
	background: #C7A381;
}

.home .slider .box .copy:after {
 	content: " ";
 	position: absolute;
  	left: 50%;
	transform: translateX(-50%);
    top: -10px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: none;
}

.home .slider .box.beige-rose .copy:after{
	border-bottom: 10px solid #ceaa92;
}

.home .slider .box.beige-dore .copy:after{
	border-bottom: 10px solid #BE926D;
}

.home .slider .box.ambre .copy:after{
	border-bottom: 10px solid #7d4b32;
}

.home .slider .box.beige-cristallin .copy:after{
	border-bottom: 10px solid #D9BD98;
}

.home .slider .box.beige-cuivre .copy:after{
	border-bottom: 10px solid #C7A381;
}

.home .slider .box .copy.top:after {
	top:inherit;
    bottom: -10px;
    border-bottom: none;
}

.home .slider .box.beige-rose .copy.top:after{
	border-top: 10px solid #ceaa92;
}

.home .slider .box.beige-dore .copy.top:after{
	border-top: 10px solid #BE926D;
}

.home .slider .box.ambre .copy.top:after{
	border-top: 10px solid #7d4b32;
}

.home .slider .box.beige-cristallin .copy.top:after{
	border-top: 10px solid #D9BD98;
}

.home .slider .box.beige-cuivre .copy.top:after{
	border-top: 10px solid #C7A381;
}

/* STEP PROGRESS */

.step-progress {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.step-progress .step {
	width: calc(100% / 3 - 2px);
}

.step-progress .step .bar {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	font-weight: 300;
	font-size: 12px;
	line-height: 110%;
	background: #D3AD8C;
	height: 10px;
	padding: 0 10px;
}

.step-progress .step .bar.skin1 {
	background: #E8B59E;
}

.step-progress .step .bar.skin2 {
	background: #DD9769;
}

.step-progress .step .bar.skin3 {
	background: #B46744;
}

.step-progress .step .bar.skin4 {
	background: #7E3D2F;
}

.step-progress .step .bar.skin5 {
	background: #46241D;
}

.step-progress .step .bar.skin6 {
	background: #281611;
}

.step-progress .step .bar.tint1 {
	background: #F2B59E;
}

.step-progress .step .bar.tint2 {
	background: #DD9769;
}

.step-progress .step .bar.tint3 {
	background: #B46744;
}


.step-progress .step .bar span {
	opacity: 0;
}

.step-progress .step.active .bar,
.step-progress .step.completed .bar{
	height: 30px;
}

.step-progress .step.active .bar span,
.step-progress .step.completed .bar span{
	opacity: 1;
}

.result-page a.cta-back,
.step-progress a.cta-back {
	padding: 7px 15px;
	background: #000;
	display: inline-block;
	font-size: 11px;
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
}

.result-page a.cta-back{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5000;
}

/* STEP 1 */

.step1-container {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.step1-container .choice {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.step1-container .choice ul {
	width: 100%;
	flex-grow: 1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}

.step1-container .choice ul li {
	width: calc(100% / 2);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	position: relative;
	background: #fff;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}

.step1-container .choice ul li i {
	position: absolute;
	top:10px;
	right: 10px;
	z-index: 2;
}

.step1-container .choice ul li:hover i {
	opacity: 0;
}

.step1-container .choice ul li span{
	width: 100%;
	height: 100%;
	display: inline-flex;
	flex-grow: 1;
	padding: 15px;
	justify-content: flex-start;
	align-items: flex-end;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	font-size: 12px;
	line-height: 125%;
	text-transform: uppercase;
	transition: all 0.1s linear;
}


.step1-container .choice ul li span:hover {
	width: calc(100% - 16px);
	height: calc(100% - 16px);
}

.step1-container .choice ul li.skin1 span {
	background: #E8B59E;
}

.step1-container .choice ul li.skin2 span {
	background: #DD9769;
}

.step1-container .choice ul li.skin3 span {
	background: #B46744;
}

.step1-container .choice ul li.skin4 span {
	background: #7E3D2F;
}

.step1-container .choice ul li.skin5 span {
	background: #46241D;
}

.step1-container .choice ul li.skin6 span {
	background: #281611;
}


/* STEP2 */

.step2-container {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.step2-container .choice {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.step2-container .choice ul {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}

.step2-container .choice ul li {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	position: relative;
	background: #fff;
	color: #fff;
	cursor: pointer;
}

.step2-container .choice ul li i {
	position: absolute;
	top:50%;
	right: 20px;
	transform: translateY(-50%);
	z-index: 2;
	font-size: 40px;
}

.step2-container .choice ul li div{
	width: 100%;
	height: 100%;
	display: inline-flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 20px 60px 20px 20px;
	justify-content: flex-end;
	align-items: flex-start;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	font-size: 14px;
	line-height: 125%;
	transition: all 0.1s linear;
}

.step2-container .choice ul li div:hover {
	width: calc(100% - 16px);
	height: calc(100% - 16px);
}

.step2-container .choice ul li.tint1 div {
	background: #E8B59E;
}

.step2-container .choice ul li.tint2 div {
	background: #DD9769;
}

.step2-container .choice ul li.tint3 div {
	background: #B46744;
}

.step2-container .choice ul li span{
	display: inline-block;
	font-size: 14px;
	line-height: 125%;
}

/* STEP3 */

.step3-container {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.step3-container .choice {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.step3-container .choice ul {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}

.step3-container .choice ul li {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #fff;
	cursor: pointer;
	transition: all 0.1s linear;
	min-height: 200px;
}

/*
.step3-container .choice ul li:hover {
	width: calc(100%/3 - 16px);
	height: calc(100% - 16px);
}
*/

.step3-container .choice ul li .visu {
	width: 70%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.step3-container .choice ul li .visu img {
	position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.step3-container .choice ul li .copy {
	width: 30%;
	padding: 15px;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	font-weight: 300;
	line-height: 125%;
	flex: 1;
}

.step3-container .choice ul li .copy strong{
	font-weight: bold;
}

.step3-container .choice ul li .copy i {
	font-size: 30px;
}

/*Step 3 Products Colors*/
.step3-container .choice ul li.beige-rose .copy {
	background: #ceaa92;
}

.step3-container .choice ul li.ambre .copy {
	background: #7d4b32;
}

.step3-container .choice ul li.beige-cristallin .copy {
	background: #dabe99;
}

.step3-container .choice ul li.beige-ivoire .copy {
	background: #cfab87;
}
.step3-container .choice ul li.beige-porcelaine .copy {
	background: #CAAE86;
}

/* result-page */

.result-page {
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.result-page .content {
	padding: 20px;
	color: #fff;
}

.result-page h1 {
	margin: 20px 0 0 0;
	text-transform: uppercase;
}

.result-page h1 span {
	text-transform: none;
}

.result-page .content.beige-rose {
	background: #ceaa92;
}

.result-page .box {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.result-page .desc {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.result-page .desc img {
	max-width: 120px;
	margin: 0 30px 0 0;
}

.result-page .desc h2 {
	margin: 0 0 10px 0;
}

.result-page .desc p {
	font-size: 16px;
	margin: 0;
}

.result-page .desc a.cta {
	margin: 20px 0 0 0;
}

.result-page .visu img {
	width: 100%;
}

.result-page .cta-reload {
	margin: 20px auto;
	align-self: center;
}
.divide1,
.divide4,
.divide5,
.divide3,
.divide2{
	width: calc(100%/1)!important;
}
	
@media (min-width: 375px) {
	
	.home .content {
		padding: 30px;
	}
	
}

@media (min-width: 414px) {
	
	h1 {
		font-size: 25px;
	}
	
	.home .logo {
		width: 120px;
	}
	
	.home p {
		font-size: 18px;
	}

	.home p.tips {
		font-size: 11px;
	}
	
}


@media (min-width: 768px) {
	
	h1 {
		font-size: 35px;
	}
	
	h2 {
		font-size: 25px;
	}
	
	.step1-container .logo,
	.step2-container .logo,
	.step3-container .logo,
	.result-page .logo {
		max-width: 120px;
	}

	.step1-container h1,
	.step2-container h1,
	.step3-container h1,
	.result-page h1 {
		margin: 20px 0;
		font-size: 40px;
	}

	.step1-container h1 span,
	.step2-container h1 span,
	.step3-container h1 span,
	.result-page h1 span {
		font-size: 25px;
	}

	.step1-container p,
	.step2-container p,
	.step3-container p {
		font-size: 20px;
	}
	
	.home .content {
		padding: 40px;
	}

	.home .logo {
		width: 190px;
	}

	.home h1 {
		margin: 30px 0 20px 0;
	}

	.home p {
		font-size: 20px;
	}

	.home p.tips {
		font-size: 12px;
	}

	.home .cta {
		margin: 30px 0 15px 0;
	}
	
	.home .slider .box .copy {
		font-size: 18px;
	}
	
	.home .slider .box .copy:after {
		top: -15px;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
	}

	.home .slider .box.beige-rose .copy:after{
		border-bottom: 15px solid #ceaa92;
	}

	.home .slider .box.beige-dore .copy:after{
		border-bottom: 15px solid #BE926D;
	}

	.home .slider .box.ambre .copy:after{
		border-bottom: 15px solid #7d4b32;
	}

	.home .slider .box.beige-cristallin .copy:after{
		border-bottom: 15px solid #D9BD98;
	}

	.home .slider .box.beige-cuivre .copy:after{
		border-bottom: 15px solid #C7A381;
	}

	.home .slider .box .copy.top:after {
		top:inherit;
		bottom: -15px;
		border-bottom: none;
	}

	.home .slider .box.beige-rose .copy.top:after{
		border-top: 15px solid #ceaa92;
	}

	.home .slider .box.beige-dore .copy.top:after{
		border-top: 15px solid #BE926D;
	}

	.home .slider .box.ambre .copy.top:after{
		border-top: 15px solid #7d4b32;
	}

	.home .slider .box.beige-cristallin .copy.top:after{
		border-top: 15px solid #D9BD98;
	}

	.home .slider .box.beige-cuivre .copy.top:after{
		border-top: 15px solid #C7A381;
	}
	
	.step1-container .choice ul li {
		font-size: 18px;
	}

	.step1-container .choice ul li i {
		top:15px;
		right: 15px;
	}

	.step1-container .choice ul li span{
		padding: 30px;
		font-size: 18px;
	}

	.step2-container .choice ul li i {
		right: 30px;
		font-size: 60px;
	}

	.step2-container .choice ul li div{
		padding: 30px;
		font-size: 18px;
	}

	.step2-container .choice ul li span{
		font-size: 18px;
		margin: 0 150px 0 0;
	}
	
	.step3-container .choice {
		flex-grow: 1;
	}
	
	.step3-container .choice ul {
		flex-direction: row;
	}
	
	.step3-container .choice ul li {
		width: calc(100% / 3);
		flex-direction: column;
	}


	.step3-container .choice ul li .visu {
		width: 100%;
		flex-grow: 1;
		min-height: 350px;
		order: 1;
	}
	
	.step3-container .choice ul li .visu img {
		position: absolute;
		top:0;
		left: 50%;
		transform: translateX(-50%);
		width: 120%;
	}

	.step3-container .choice ul li .copy {
		width: 100%;
		padding: 25px;
		font-size: 20px;
		flex:none;
		order:2;
	}	
	
	.step3-container .choice ul li.divide1 {
		flex-direction: row-reverse;
	}
	
	.step3-container .choice ul li.divide1 .visu {
		width: 55%;
		flex-grow: 1;
		min-height: 350px;
		order: 1;
	}
	.step3-container .choice ul li.divide1 .visu img {
		position: absolute;
		top:0;
		left: 0;
		transform: none;
		width: 100%;
	}
	.step3-container .choice ul li.divide1 .copy {
		width: 45%;
	}
	.step3-container .choice ul li.divide2 .visu img {
		width: 105%;
	}
	.step3-container .choice ul li.divide3 .visu img {
		width: 120%;
	}
	.step3-container .choice ul li.divide4 .visu img {
		width: 135%;
	}
	.step3-container .choice ul li.divide5 .visu img {
		width: 175%;
	}

	.result-page .content {
		padding: 30px;
		position: relative;
	}

	.result-page h1 {
		margin: 20px 0 0 0;
	}

	.result-page .box {
		flex-direction: row;
		justify-content: space-between;
	}

	.result-page .desc {
		width: 50%;
		padding: 40px;
	}

	.result-page .desc img {
		max-width: 120px;
		margin: 0 30px 0 0;
	}

	.result-page .desc h2 {
		margin: 0 0 20px 0;
	}

	.result-page .desc p {
		font-size: 18px;
		margin: 0;
	}

	.result-page .desc a.cta {
		margin: 30px 0 0 0;
	}
	
	.result-page .visu {
		width: 50%;
	}
	.result-page .cta-reload {
		margin: 50px auto;
	}
	.divide1{
		width: calc(100%/1)!important;
	}	
	.divide2{
		width: calc(100%/2)!important;
	}
	.divide3{
		width: calc(100%/3)!important;
	}
	.divide4{
		width: calc(100%/4)!important;
	}
	.divide5{
		width: calc(100%/5)!important;
	}
	
}

@media (min-width: 950px) {
	
	.wrapper {
		min-height: 840px;
	}

}

@media (max-width: 950px) {
	
	.wrapper.step3 {
		min-height: 0;
	}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

/*Products visibility step 3*/
.yes-2, .yes-3, .yes-4, .yes-5{
	display: inline-flex;
}

.no,
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/*//////////////////////////
ALL COLORS
///////////////////////////*/
.beige-ivoire{
	background: #cfab87
;}
.beige-rose{
	background: #ceaa92
;}
.beige-porcelaine{
	background: #CAAE86
;}
.beige-opale{
	background: #e1cfb9
;}
.beige-albatre{
	background: #CDAF8D
;}
.beige-aurore{
	background: #d0b48d
;}
.beige-cristallin{
	background: #dabe99
;}
.beige-jasmin{
	background: #cdb390
;}
.beige-lin{
	background: #d1b38f
;}
.lys-rose{
	background: #CFAC8C
;}
.beige-vanille{
	background: #D9B990
;}
.beige-cendre{
	background: #C3A17B
;}
.beige-nature{
	background: #C1A07F
;}
.beige-diaphane{
	background: #C6A07B
;}
.beige-cuivre{
	background: #C7A079
;}
.beige-chataigne{
	background: #C7A079
;}
.beige-dore{
	background: #BE926D
;}
.sable-beige{
	background: #AB7954
;}
.beige-peche{
	background: #dda477
;}
.beige-ideal{
	background: #dca56c
;}
.beige-cannelle{
	background: #c89b71
;}
.chataigne{
	background: #c59b6b
;}
.caramel{
	background: #c49770
;}
.beige-noisette{
	background: #AE7E58
;}
.beige-ambre{
	background: #ca9d73
;}
.sable{
	background: #e7a479
;}
.cookie{
	background: #a6744f
;}
.acajou{
	background: #a67451
;}
.bronze{
	background: #a87756
;}
.praline{
	background: #89553d
;}
.ambre{
	background: #7d4b32
;}
.brun{
	background: #6b3f24
;}
.muscade{
	background: #875437
;}
.sienne{
	background: #7E4B30
;}
.cacao{
	background: #7c4d39
;}
.santal{
	background: #61412a
;}
.moka{
	background: #492d21
;}
.cafe{
	background: #533229
;}
.ebene{
	background: #3a281e
;}
.brownie{
	background: #613c2c
;}