@import url("https://use.typekit.net/syk1clw.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
@import url('unsemantic-grid-responsive.css');

:root {
  --darkbordo: #541F34;
  --cream: #FEE8CE;
  --skyblue: #A5D2F5;
  --bordo: #A62649;
  --animate-delay: 0.4s;
}


/* --- reset styles --- */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th,figcaption { /*font-size: 14px;*/ font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }

*, a, a img { outline: none !important; }
a img { border: none; outline: none; }

a { color: var(--stonegray); transition: all 0.2s ease-in-out; }
a:hover { color: var(--black); }

.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.selfclear { zoom:1; }
.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
.section-separator { display: none; }
.center { text-align: center; }

body {
	font-family: protipo, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 21px;
	color: var(--cream);
	background: var(--darkbordo);
}
p { margin-bottom: 1em; }
.grid-container {
	padding-left: 30px;
	padding-right: 30px;
	position: relative;
}
header { padding: 50px 0 0 0; position: relative;  }
header figure { position: relative; margin: 0 -30px; min-height: calc(90vw); padding-bottom: 40px; }
header figure h2 { position: relative; z-index: 10; }
.cover, .cork, .cork2, .grape1, .grape2, .grape3 { width: 100%; height: auto; position: absolute; z-index: 20; left: 0; top: 100px; }
.cork, .cork2, .grape1, .grape2, .grape3 { z-index: 5; animation: float 3s ease-in-out infinite; }
.cork { animation-delay: 0.5s; }
.cork2 { animation-delay: 0.2s; }
.grape1 { animation-delay: 0.1s; }
.grape2 { animation-delay: 1s; }
.grape3 { animation-delay: 0.5s; }
.stamp { position: absolute; z-index: 20; bottom: 0; left: calc(50% - 50px); }
header video { width: 100%; height: auto; position: absolute; z-index: 0; left: 0; top: 100px; }

header nav { position: absolute; right: 30px; top: 0; z-index: 100; }
nav ul, nav li { list-style: none; margin: 0; padding: 0; display: inline-block; }
nav li a { display: inline-block; padding: 0 0 5px 0; margin: 5px; text-decoration: none;  border-bottom: 2px solid var(--cream); font-size: 1em; transition: all ease-in-out 0.2s;
 }
nav li a:hover { padding-bottom: 0px; }

h1, h2, h3, h4 {
	margin-top: 3em;
	margin-bottom: 1em;
}
h1 {
	margin-bottom: 50px;
	margin-top: 0;
}
h2 {
	margin-top: 0;
	font-size: 8vw;
	padding: 30px;
	line-height: 100%;
	font-weight: 500;
	text-align: left;
}
h3, h4 {
	font-size: 21px;
	line-height: 130%;
	font-weight: 500;
	color: var(--skyblue);
}
h4 { color: var(--cream); }
h5 { font-weight: 500; font-size: 18px; margin-bottom: 0; position: relative; }
header figure {
	position: relative;
	text-align: center;
}
.cta a {
	display: inline-block;
	padding: 1em 2em;
	border: 2px solid var(--skyblue);
	border-radius: 100px;
	color: var(--skyblue);
	font-family: protipo-wide, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0.5em 0;
}
.cta a:hover {
	background: var(--skyblue);
	color: var(--darkbordo);
}
hr {
	height: 0px;
	border: none;
	border-top: 1px solid var(--bordo);
	margin: 4em 0;
}
#faq > div {
	border: 2px solid var(--skyblue);
	border-radius: 10px;
	margin-bottom: 2em;
	
	transition: all 0.2s ease-in-out;
}
#faq > div:hover, #faq > div.acc_active {
	background: var(--skyblue);
	color: var(--darkbordo);
}
#faq > div > div { padding: 2em; padding-top: 0; }
#faq li { margin-bottom: 0.5em; }
.acc_section h5 {
	padding: 2em;
	padding-right: calc(2em + 40px);
	cursor: pointer;
	color: var(--skyblue);
	font-weight: 400;
	transition: all 0.2s ease-in-out;
}
.acc_section h5::before {
	content: "+";
	font-weight: 400;
	font-size: 24px;
	color: var(--skyblue);
	position: absolute;
	right: 2em;
	transition: all 0.2s ease-in-out;
}
.acc_active h5::before, #faq > div:hover h5::before {
	content: "-";
	color: var(--darkbordo) !important;
}

.acc_active h5, #faq > div:hover h5 { color: var(--darkbordo); }
#faq > div:hover h5 { color: var(--darkbordo); }
footer {
	padding: 100px 30px 30px 30px;
	background: url("../graphics/separator.svg") no-repeat 50% 0;
	background-size: calc(100% - 60px) auto;
	text-align: center;
	margin-top: 4em;
}
footer p { margin-top: 4em; }
footer img { display: inline-block; margin: 10px; }


@media (min-width: 550px) {
	body { font-size: 20px; line-height: 30px; }
	.grid-container, footer { max-width: 800px; margin: auto; }
	header { padding-top: 100px; }
	header figure  { width: 800px;  min-height: 700px; padding-bottom: 0; margin-top: 100px; }
	h1 img { transform: scale(1.3); }
	header .stamp { width: 150px; height: auto; left: calc(50% - 75px); }
	h2 {
		font-size: 3em;
		top: -50px;
	}
	h3 { font-size: 2em; margin-top: 2em;  }
	h4 { font-size: 1.5em; }
	h5 { font-size: 1.1em; }
	footer { margin-top: 3em; }
	footer p { margin-top: 3em; }
	footer img { transform: scale(1.3); }
}


@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}