/* GENERIC */
* {margin: 0; padding: 0;}
body {width: 100%; background: url(img/background-1.svg) 0 60px/100% no-repeat, url(img/background-2a.svg) 0 300vw/100% no-repeat, url(img/background-3a.svg) 100% 900vw/100% no-repeat;}
div, img {max-width: 100%;}
main {position: relative; top: 60px; display: block; max-width: 100%; padding: 7.5vw; overflow: hidden;}
a.anchor {display: block; position: relative; top: -70px; visibility: hidden;}
.block {display: block; margin: 1rem auto;}
body.lom button#reg-1 {display: none;}
footer {background: #1F2F49; position: relative; top: 60px;}
ol, ul {text-align: left;}
#content-6 ol {list-style-type: none; counter-reset: item; margin: 0; padding: 0;}
#content-6 ol > li {display: table; counter-increment: item; margin-bottom: 0.6em; font-size: 0.875rem;}
#content-6 ol > li:before {content: counters(item, ".") ". ";}
#content-6 li ol > li {margin: 0;}
#content-6 li ol > li:before {content: counters(item, ".") " ";}

/* NAVIGATION */
header, button {background: white; color: #3C4550;}
header {position: fixed; top: 0; width: 100%; height: 60px; z-index: 5; box-shadow: 0 2px 5px rgba(69, 69, 69, 0.2)}
nav a.nav-link {padding: 16px 0px;}
nav a:not(:last-child) {display: none; width: 100%; font-weight: 600;}
a.reg-posit {position: absolute; bottom: 60px;}
button.reg-nav {display: inline-block; color: white; background-color: #ed147d; border: none; border-radius: 2rem; letter-spacing: .0625rem; cursor: pointer; -webkit-appearance: none; padding: 0.5em 2em;}
button.reg-nav:hover {background: #D41170;}
div.green_cta {display: inline-block; color: white; background-color: #39B900; text-transform: uppercase; border-radius: 2rem; letter-spacing: .0625rem; cursor: pointer; -webkit-appearance: none; padding: 1em 2em; font-weight: 600; margin: 1rem auto;}
div.green_cta:hover {background-color: #33A600;}
img#match-logo {height: 40px; width: auto; margin: 0 0 0 1rem;}
.topnav a.icon {float: right; display: block; font-size: 2em; margin-right: 0.5em;}
.nav-link:not(:first-child) {border-top: 2px dashed #ccc;}
.topnav .icon {display: none;}
.topnav.responsive {position: fixed; height: 100vh;}
.topnav.responsive .icon {position: absolute; right: 0; top: 0;}
.topnav.responsive nav {margin-top: 2rem;}
.topnav.responsive a {display: block; text-align: center;}
.topnav a {float: left; color: #3C4550; padding: 10px; text-decoration: none; font-size: 15px;}
a.nav-link:hover {background-color: transparent; color: #ed147d;}
.fa-bars {color: #3C4550;}
#header-links a {color: #3C4550; text-decoration: none; padding: 1rem;}

/* CONTENT */
.bp-number {float: left; margin: 1rem; line-height: 0; font-size: 2.5rem;}
a.learn-more {display: inline-block; color: #ED147D; cursor: pointer; text-align: center; margin: 0 0 1rem;}
span.show-more {display: none; text-align: justify;}
button.cta-button {display: inline-block; transition: background-color .3s ease-out; border: 0; border-radius: 50%; outline: none; font-size: 1.125rem; font-weight: 700; cursor: pointer; -webkit-appearance: none; width: 96px; height: 96px; border: 1px solid white; box-shadow: 0 0 0 2pt #1B75BC; font-size: 0.66rem; position: absolute; right: 0.5rem; top: 70px; z-index: 3;}
a.pink-button {display: block; background-color: #ED147D; max-width: max-content; border: none; color: white; text-transform: uppercase; border-radius: 2rem; cursor: pointer; -webkit-appearance: none; padding: 1em 1.5em; margin: 1.5em auto; font-size: 0.928rem; font-weight: 600;}
a.pink-button:hover {background: #ca116a; text-decoration: none;}
#bullet-points a:hover {text-decoration: none;}
.bp-step {flex: 1; max-width: 500px; background: white; box-shadow: 0 2px 5px rgba(107, 134, 177, 0.25); border-radius: 1em; margin: 1em auto; padding: 2em;}
.bp-content {text-align: justify;}
#gourmetsociety-logo {display: block; margin: auto;}
.text-content p {text-align: left;}
.text-content a {font-size: inherit;}
.green_cta_holder {display: block; margin: auto; width: max-content; max-width: 17em;}

/* SEGMENTS */
.segment {margin: 2em inherit;}
.segment:after, .segment-mono:after {clear: both;}
.text-segment {margin: 1em 3rem;}
.partner-logo {max-width: 150px; width: 30vw;}

#segment-1-content {display: flex;}
#content-1 {flex: 1; text-align: left; margin: 1em 0 0 1.5em;}
#visu-1 {width: 55vw; margin-bottom: 2rem;}
#logo-matchdining {width: 50vw; margin: 1rem 0 2rem;}
p.asterisk, p.asterisk a {text-align: center;}

#bullet-points {display: block; flex-wrap: unset; padding: 1rem 0;}
.bullet-picto {height: 3em; display: block; margin: 1em auto 1em;}
.too-long {display: inline-block;}

.segment-slider {border-radius: 15px; -webkit-box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16); -moz-box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16); box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);}
#content-6 {flex: 1;}
#visu-6 img {width: calc(50% - 3px); height: auto; padding-left: 2.5%;}

button.event-button {display: inline; border: none; border-radius: 2rem; letter-spacing: .0625rem; cursor: pointer; -webkit-appearance: none; padding: 0.25em 1em; margin: -7px 5px;}
a.link-more {font-weight: bold; text-align: right;}
a.white-link-more {color: white; font-weight: bold; text-decoration: underline; text-align: center;}
.bottom-link {margin: 1em auto; text-align: center; padding-bottom: 3em;}

/* FOOTER */
footer, footer a {font-size: 0.875rem;}
footer a {color: white; display: inline;}
footer img.white-logo {display: block; margin: 0 auto 1rem; padding: 1rem; max-width: 280px;}
.footer-container {padding: 4rem 3rem 10rem; text-align: center;}
.footer-container p {display: inline;}
.footer-block {padding: 1em; text-decoration: underline;}
.soc-icon {background: white; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 2.625rem; color: #1F2F49; margin-right: 0.5em; font-size: 1.75em;}

/* MOBILE ONLY */
@media screen and (max-width: 700px) {
.hider {display: none !important;}
div#mobile_fixed {background: white; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 6; box-shadow: 0px -3px 6px #00000029;}
.line-breaker {display: block;}
.visual-content {display: block; width: 75%; margin: 1em auto;}
#container-1 {text-align: center;}
#visu-1 {margin: 0.5em auto 1em;}
.footer-container {padding: 4rem 3rem 10rem;}
}

/* TABLET - DT */
@media screen and (min-width: 701px) {
body {background: url(img/background-1.svg) 0 60px/80% no-repeat;}
.flex-container {display: flex;}
.visual-content, .text-content {margin: 3rem calc(6.71875vw - 20px); flex: 1;}

.v-aligner {vertical-align: middle;}
.hider-big {display: none;}
.line-equalizer {line-height: 1.5em; min-height: 9em;}

#title-1 {margin: initial; margin-bottom: 1rem;}
#segment-1 {margin: 3rem 0 3rem 3rem}
#content-1 {margin: initial;}

a.reg-posit {position: initial; align-self: center;}
div#button-box-binder {float: right; position: relative; top: 10vh; right: 10vh; width: 50vw;}
.pink-link-arrow, .pink-link-arrow a {font-size: 1rem;}
.pink-link-arrow:after {background: url(img/svg/arrow.svg) 100% 100% no-repeat; width: 20px; height: 10px; content:""; background-size: contain; display: inline-block;}

#bullet-points {flex-wrap: nowrap;}
.coach-bp {width: 25vw; margin: 1em 3vw;}

.carousel-item {display: block;}
.carousel-item img {border-radius: 1rem 1rem 0 0;}
.segment-slider {max-width: 25vw; margin: 2vw; float: left;}

footer {margin-top: 3rem; font-size: 0.875rem;}
footer a {display: inherit;}
div.cookie_btn_wrap {display: none;}
}

/* TABLET-DESKTOP */
@media screen and (min-width: 1024px) {
body {background: url(img/background-1.svg) 0 60px/80% no-repeat, url(img/background-2.svg) 0 100%/100% no-repeat;}
main {margin: 0; padding: 1vw;}
.segment, .segment-mono {display: flex;}
.bp-step {margin: 1em;}

nav {float: right; display: flex; height: inherit;}
nav a.nav-link {padding: 0 calc(2vw - 10px); align-self: center;}
.nav-link:not(:first-child) {border: none;}
nav a:not(:last-child) {display: initial; width: auto;}
.topnav a {float: left; color: #3C4550; padding: 10px; text-decoration: none; font-size: 1rem;}
.topnav a.icon {display:none;}
a.pink-button {width: max-content;}

#segment-1-content {display: flex;}
#content-1 {flex: 5;}
#introducing {text-align: left;	font-size: 2rem;}
#logo-matchdining {width: 25vw;}

.bullet-picto {height: 4em;  margin-bottom: 1em;}
#bullet-points {display: flex; justify-content: space-between;}

#content-3 {flex: 1; margin-left: 3rem;}
#content-4 {flex: 1; margin-right: 3rem;}
#content-5 {flex: 1; margin-left: 3rem;}
#content-6 {max-height: calc(80vh - 60px); overflow-y: scroll; padding: 0 1em;}
#visu-6 img {width: auto;}

.footer-container {padding: 3rem;}
}

/* DESKTOP */
@media screen and (min-width: 1200px) {
button.reg-nav {margin: auto 30px auto auto;}
}
@media screen and (min-width: 1500px) {
.topnav a {font-size: 16px;}
.line-equalizer {line-height: 1.5em; min-height: 7.5em;}
.text-segment:not(#content-1) {align-self: center;}
}