/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */


html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
* {box-sizing: border-box;}


/* -------------------------------------------------------------------------- */

/*	1. Document Setup
/* -------------------------------------------------------------------------- */


html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: #fff;
	box-sizing: border-box;
	color: #333;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: -0.015em;
	text-align: left;
}

/* -------------------------------------------------------------------------- */

/*	2. Element Base
/* ---------------------------------------------*---------------------------- */
main {
	display: block;
}
a { text-decoration:none;
	color: #5e4089;
	font-weight: 600;
	font-size: 2rem;
}
/* Media ------------------------------------- */

figure {
	display: block;
	margin: 0;
}

iframe {
	display: block;
	max-width: 100%;
}

video {
	display: block;
}

svg,
img,
embed,
object {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Sections ---------------------------------- */

section {
	padding: 0 2em;
	/* margin: 2em; */
}

.section-inner {
	padding: 0 1rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 100rem;
	width: calc(100% - 4rem);
}

.section-inner.max-percentage {
	width: 100%;
}
/* text ---------------------------------- */
h1 { color: #5e4089; font-size: 5rem; font-weight: 600; line-height: 1; margin: 0.1em 0 0 0; text-align: center; }
h2 {  color: #3d4d51; font-size: 2rem; font-weight: 500; line-height: 1.2; margin:0.5em 0 1em 0; }
h3 { color: #fff; font-size: 2.2rem; font-weight: 600; line-height: 1.2; margin: 10px 0; }
p { line-height: 1.6; margin-bottom: 0.5em; }
.textRight {text-align: right;}

/* -------------------------------------------------------------------------- */

/*	3. contenu
/* ---------------------------------------------*---------------------------- */
/* header ---------------------------------- */
#site-header {
	padding: 2em; 0 
	border: 1px solid red;
}

#talkto { margin-top: 2em; }
#champagne p {margin: 1em 0; }
#champagne h2, #video h2 { margin-bottom: 0.25em; }
.bottle { margin: 0 auto; }
#video {margin-top: 2rem; align-items: stretch; }
.logo { margin: 0 auto;}
.item { }

/* Form… ---------------------------------- */

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #e8eee9;
  margin: 0 0 5px;
  padding: 10px;
  color: #3d4d51;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #3d4d51;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 200px;
  border: none;
  background: #ae6348;
  color: #fff;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #3d4d51;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #3d4d51;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

.gap-bottom  { margin-bottom: 2rem; }
.website { text-align: center; margin-bottom: 2rem; }
.website a { color: #c6a67a; font-size: 2.5rem; }
a:hover { color: #fff; background-color: #5e4089  }

/* footer ---------------------------------- */
#site-footer { position: absolute; bottom:0; width: 100%; text-align: left;  }
.bkggreen { background-color: #3d4d51; }
.bkgred { background-color: #ae6348; }
.bkgpurple {  background-color: #5e4089; }
.footer-inner { padding:  0.5em; border-top: 1px solid #c6a67a; margin: 0 auto; }

@media ( min-width: 769px ) {
	/* SECTIONS */

	body {
	}
	#site-header {
		padding: 1em 0 0; 0 
	}

	section {
		/* padding: 2rem 0; */
	}
	.section-inner {
		width: calc(100% - 8rem);
	}
	.picture-box {max-width: 25rem; }
	.text-box  {max-width: 35rem; }
	h1 { line-height: 1.2; font-size: 9.4rem; text-align: left; }
	.text-box { opacity:0; transition: 0.5s all ease-in-out; padding: 0.5rem;}
	.cta-box:hover .text-box  {  opacity:1;  }
	.footer-inner { padding:  0.5em; border-top: 1px solid #c6a67a; max-width: 96rem; margin: 0 auto;
	}
	#slickQuiz { height : 31em;}
	#champagne p {margin: 4em 0 2em 0; }

}