/* FROM BOOTSTRAP */
*,::after,::before {box-sizing: border-box;}
@-ms-viewport {width: device-width;}
article,footer,header,main,nav,section {display: block;}
[tabindex="-1"]:focus {outline: 0!important;}
h1,h2,h3,h4,h5,h6 {margin-top: 0; margin-bottom: .5em;}
dl,ol,ul {margin-top: 0; margin-bottom: 1rem;}
ol ol,ol ul,ul ol,ul ul {margin-bottom: 0;}
b,strong {font-weight: bolder;}
sub,sup {position: relative; font-size: 75%; line-height: 0; vertical-align: baseline;}
sub {bottom: -.25em;}
sup {top: -.5em;}
svg:not(:root) {overflow: hidden;}

/* FONT */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
body, h1, h2, h3, h4, p, a, button {font-family: 'Montserrat', sans-serif; font-weight: inherit;}
html, body, p, a, button {font-size: 14px;}
h2, h3, h4, p {color: #464648;}
h1, a {color: #E55573;}
a {text-decoration: none; background-color: transparent;}
a:hover {color: initial;}
footer, footer p {color: white;}
h1 {font-size: 2.5714rem; line-height: 1.15em; font-weight: 700;}
h2 {font-size: 1.7143rem; font-weight: 700;}
h3 {font-size: 1.2857rem; font-weight: 600;}
h4 {font-size: 1.1429rem; font-weight: 600; margin-top: 1rem;}
p {margin-top: 0; margin-bottom: 1rem;}

.right {text-align: right;}
.center {text-align: center;}
.clear {clear:both;}
.bold {font-weight: 700;}
.semi-bold {font-weight: 600;}
.inline {display: inline;}
.uppercase {text-transform: uppercase;}
.pink-link {color: #E55573; font-weight: 600;}
.partner {text-transform: uppercase; font-size: 0.8em;}
#burgerButton {color: #E55573;}
#legal-mentions {margin: 2em 0; font-size: 0.7857rem; text-align: justify;}
.learn-more {color: #E55573; font-weight: 600;}
.fixed-p {margin: 1rem;}
.nowrap {white-space: nowrap;}

/* COLORS */
.white {color: #FFFFFF;}
.dd_pink {color: #E55573;}
.grey {color: #464648;}
.blue_balls {color: #51879d;}
.red_balls {color: #e55573;}

.grey_frey {color: #3C4550}
.blue_night {color: #1F2F49}
.emerald {color: #00C2AB}

@media screen and (min-width: 1024px) {
h1 {font-size: 2.5vw;}
h2 {font-size: 1.875vw;}
h3 {margin-top: 2em;}
p.ingress {font-size: 1.14583vw;}
#legal-mentions {margin: 2em;}
}

/* GENERIC */
* {margin: 0; padding: 0;}
html {scroll-behavior: smooth; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar;}
body {margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left;}
div, img {max-width: 100%;}
img {vertical-align: middle; border-style: none;}
main {position: relative; top: 60px; display: inline-block;}
a.anchor {display: block; position: relative; top: -70px; visibility: hidden;}
.block {display: block;}
.full-width {width: 100%;}

/* NAME CLASS ON JSON AS FLEXSLIDER IF MORE THAN 3 ITEMS */
.fluxslider-nobuttons {
	margin: 0 auto 0 auto;
	padding: 0;
	opacity: 1;
	background: transparent;
	position: relative;
	zoom: 1;
	width: 90%;
}

/* 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%;}
a.reg-posit {position: absolute; bottom: 60px;}
button.reg-nav {background: #81C44E; color: white; display: inline-block; white-space: nowrap; border: 1px solid white; border-radius: 2rem; letter-spacing: .0625rem; cursor: pointer; -webkit-appearance: none; padding: 0.25em 1em; font-size: 15px; line-height: 1.5em;}
button.reg-nav:hover {background: #4b8e14;}
img#dd-logo {height: 48px; width: auto; margin-top: -8px;}
.topnav a.icon {float: right; display: block; font-size:1.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: 18px 21px; text-decoration: none; font-size: 15px;}
a.nav-link:hover {background-color: transparent; color: #E55573;}
.fa-bars {color: #3C4550;}
#header-links a {color: #3C4550; text-decoration: none; padding: 1rem;}

/* CONTENT */
.learn-more {display: block; cursor: pointer; text-align: center;}
.show-more {display: none; text-align: justify;}
#yt-button {display: block;	position: absolute;	top: 20.03vw; left: calc(50% - 7.33vw); cursor: pointer;}
#yt-button img {width: 14.66vw;}
#yt-claim {color: white; font-weight: 600; white-space: nowrap; text-align: center; position: absolute; left: calc(50% - 54px); padding-top: 0.5rem;}
#yt-layer {display: none; position: absolute; background: rgba(0,0,0,0.8); width: 100%; height: 100vh; text-align: center;}
#yt-layer iframe {margin-top: calc(50vh - 255px);}
#yt-layer-close {position: absolute; right: 25px; font-size: 3em; font-weight: 700; color: white; cursor: pointer; z-index: 2;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-top: 75px;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.pink-link-arrow, .pink-link-arrow a {color: #E55573; font-weight: 600; font-size: 0.786rem;}
.pink-link-arrow:after {background: url(img/svg/arrow.svg) 100% 100% no-repeat; width: 16px; height: 10px; content:""; background-size: contain; display: inline-block;}
a.green-button {display: block; background-color: #81C44E; width: 50vw; white-space: nowrap; text-align: center; border: none; color: white; border-radius: 2rem; cursor: pointer; -webkit-appearance: none; padding: 1em 1.5em; margin: 1.5em auto; font-size: 0.928rem; font-weight: 600;}
a.green-button:hover {text-decoration: none; background-color: #4b8e14;}
a.invert-green {background-color: transparent; border: 1px solid #81C44E; color: #81C44E;}
a.invert-green:hover {text-decoration: none; border: 1px solid #E55573; color: #E55573; background: transparent;}
#bullet-points a:hover, .slide-clickable:hover {text-decoration: none;}
#app-download {display: flex; justify-content: space-evenly; margin: 3em 0;}
#app-download img {height: 3em;}
.social-button {border-radius: 2em;	padding: 6px; padding-left: 32px; padding-right: 14px;}
.social-button a {color: white;} 
.facebook-share {background: #3b5998 url("img/facebook-f-white.png") 5px 50% no-repeat; background-size: 20px;}
.twitter-share {background: #1da1f2 url("img/twitter-logo-white.png") 5px 50% no-repeat; background-size: 20px;}


/* SEGMENTS */
.segment-mono:after {clear: both;}
.text-segment {margin: 1rem 6.93vw;}
.seg-carousel {padding: 60px 10px;}
.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);}
.social-bubble {padding: 1em; width: max-content; float: left; z-index: 1;}

#visual-2 {text-align: right;}
#bullet-points {display: inline-flex; flex-wrap: unset; padding: 1rem 0;}
.bullet-picto {height: 3em;  margin-bottom: 1em;}
.coach-bp {margin: 0 calc(10vw - 30px); padding: 1rem 0.25vw;}

#content-4 {margin-bottom: 5rem;}

#segment-5 {background: #EEF0F5;}

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;}

#segment-6 {background-color: white;}
#content-6 {margin: 3em 2em;}
#content-6 p, #content-6 li {text-align: justify;}

/* FOOTER */
footer {margin-top: 50px;}
footer a {color: white; display: block;}
footer img.white-logo {display: block; width: 120px; position: relative; top: 10vw; margin: 0% auto;}
.footer-container {background-color: #E55573; padding: 4rem 3rem; text-align: center;}
.footer-container p {display: inline;}
.footer-block {padding: 1em; text-decoration: underline;}

/* RESPONSIVE */

/* MOBILE ONLY */
@media screen and (max-width: 700px) {
.hider {display: none;}
.line-breaker {display: block;}
}

/* TABLET - DT */
@media screen and (min-width: 701px) {
.v-aligner {vertical-align: middle;}
.hider-big {display: none;}
.text-segment {text-align: center;}
#seg-1-pinklink {margin: 0; font-size: 1.5em;}
a.reg-posit {position: initial;}
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;}
.videoWrapper {margin-top: 0;}

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

footer a {display: inherit;}
}

/* TABLET-DESKTOP */
@media screen and (min-width: 1024px) {
.segment, .segment-mono {display: flex; text-align: center;}
.learn-more {display: none;}
.show-more {display: block;}
.seg-carousel {padding: 80px;}

img#meetic-logo {margin: 3px 0 0 2rem;}
nav {display: flex; height: inherit; text-align: center;}
nav a.nav-link {padding: 0 calc(2vw - 10px); align-self: center; white-space: nowrap;}
.nav-link:not(:first-child) {border: none;}
nav a:not(:last-child) {display: initial;}
button.reg-nav {margin: auto 1vw auto auto;}
.topnav a {padding: 15px;}
.topnav a.icon {display:none;}
.visual {flex: 6; align-self: center;}
.text-segment {flex: 4;}
.carousel-ingress {width: 75%; margin: auto;}

#segment-1 {display: flex;}
#segment-1-content {display: flex;}
#visual-1 {align-self: auto;}
#yt-button {top: calc(20vw - 60px);	left: 25vw;}
#yt-layer {display: none; position: absolute; background: rgba(0,0,0,0.8); width: 50vw; height: 100vh; border-bottom-right-radius: 5vw; text-align: center;}
#yt-layer iframe {margin-top: calc(50vh - 255px);}
#yt-layer-close {position: absolute; right: 25px; font-size: 3em; font-weight: 700; color: white;}

a.green-button {width: auto; margin: 1rem auto;	max-width: 250px;}
#content-1 {text-align: left;}
.bullet-picto {height: 4em;  margin-bottom: 1em;}

#segment-4 {flex-direction: row-reverse;}
#content-4, #content-5 {flex: 1; margin-right: 3rem;}
#visual-4 {text-align: left; flex: 1; min-height: 25vw; margin-bottom: 0;}
}

/* DESKTOP */
@media screen and (min-width: 1200px) {
button.reg-nav {margin: auto 30px auto auto;}
#seg-1-buttons {display: flex;}
.seg-1-offer {flex: auto; margin: 0.5rem;}
}

/* IMAGE SLIDE ANIMATION */
.animation-element {opacity: 0; position: relative;}

/*animation element sliding left*/
.animation-element.slide-left {opacity: 0; -moz-transition: all 1000ms linear; -webkit-transition: all 1000ms linear; -o-transition: all 1000ms linear; transition: all 1000ms linear; -moz-transform: translate3d(-100px, 0px, 0px); -webkit-transform: translate3d(-100px, 0px, 0px); -o-transform: translate(-100px, 0px); -ms-transform: translate(-100px, 0px); transform: translate3d(-100px, 0px, 0px);}
.animation-element.slide-left.in-view { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);}

/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {float: left; width: 47%; margin: 0% 1.5% 3% 1.5%; background: #F5F5F5; padding: 15px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); border: solid 1px #EAEAEA;}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);}
.animation-element.slide-left.testimonial:nth-of-type(odd) {width: 48.5%; margin: 0% 1.5% 3.0% 0%;}
.animation-element.slide-left.testimonial:nth-of-type(even) {width: 48.5%; margin: 0% 0% 3.0% 1.5%;}
.animation-element.slide-left.testimonial .header{float: left; width: 100%; margin-bottom: 10px;}
.animation-element.slide-left.testimonial .left{float: left; margin-right: 15px;}
.animation-element.slide-left.testimonial .right{float: left;}
.animation-element.slide-left.testimonial img {width: 65px; height: 65px; border-radius: 50%; box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);}
.animation-element.slide-left.testimonial h3 {margin: 0px 0px 5px 0px;}
.animation-element.slide-left.testimonial h4 {margin: 0px 0px 5px 0px;}
.animation-element.slide-left.testimonial .content {float: left; width:100%; margin-bottom: 10px;}
.animation-element.slide-left.testimonial i {color: #aaa; margin-right: 5px;}

/*media queries for small devices*/
@media screen and (max-width: 678px){ 
/*testimonials*/
.animation-element.slide-left.testimonial, .animation-element.slide-left.testimonial:nth-of-type(odd), .animation-element.slide-left.testimonial:nth-of-type(even){width: 100%; margin: 0px 0px 20px 0px;}
.animation-element.slide-left.testimonial .right, .animation-element.slide-left.testimonial .left, .animation-element.slide-left.testimonial .content, .animation-element.slide-left.testimonial .rating{text-align: center; float: none;}
.animation-element.slide-left.testimonial img{width: 85px; height: 85px; margin-bottom: 5px;}
}