/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
body { line-height: 1;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/*RESET EXTRA*/
::-webkit-scrollbar { display: none;}

::-moz-selection { color: #e7dae0; background-color: #1a0053;}
::selection { color: #e7dae0;}
    
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

body { overflow-x: hidden; background-color: #e7dae0;}

/*FONT AND SIZE*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

body { font-size: 16px; font-family: 'Roboto Mono', monospace; font-weight: 300;}
body p, body li { line-height: 26px;}
strong {font-weight: 600;}

header, .word-type, .introduction-animation-step02, .word-hello, .modal-header h3, .subtitle  { font-family: 'Merriweather', serif; font-weight: 300;}
#legal-page main h1, h2 { font-family: 'Merriweather', serif; font-weight: 600;}

h1, h2 { font-size: 40px; line-height: 48px;}
#legal-page main h2 {font-size: 32px; line-height: 40px;}
#legal-page main h3 {font-size: 24px; line-height: 32px;}
.subtitle { display: block; font-size: 16px; line-height: 1; letter-spacing: 4px;}

@media only screen and (min-width: 992px) {
    h1, h2 { font-size: 66px; line-height: 74px;}
    #legal-page main h2 {font-size: 40px; line-height: 50px;}
    #legal-page main h3 {font-size: 28px; line-height: 36px;}
}

/*LINK*/
a {	position: relative; text-decoration: none; color: #069; transition: 0.3s;}
a:hover { filter: drop-shadow(0px 3px 6px rgb(54 4 199 / 1));}
a:after { content: ''; height: 2px; position: absolute; bottom: -1px; left: 0; width: 100%; background: #FF8888; transition: 0.3s;}
a:hover:after { width: 0%;}

a.btn { filter: none; font-weight: bold;}
a.btn:after { background: transparent;}

.external-link { display: inline-flex; align-items: center;}
.external-link span:last-child { margin-left:5px; font-size: 18px;}

.sr-only { position: absolute; left: -9000px; width: 0; overflow: hidden;}

*:focus-visible, [type=button]:focus-visible, [type=reset]:focus-visible, [type=submit]:focus-visible, button:focus-visible {
    outline: 3px dashed #1a0053;
    outline-offset: 3px;
}

/*TABLE*/
table { margin-top:1rem; width: 100%; border-collapse: collapse; border-spacing: 0;}
table, th, td { border:1px solid #1a0053;}
th { font-size: 14px; font-weight: bold; text-transform: uppercase;}
th, td { padding: 0.5rem;}
.table-responsive { overflow-x:auto;}


/*---SPECIFIC STYLES---*/
/*--------------------*/
.container { margin: 0 auto; padding: 0 30px; max-width: 1440px;}
.first-letter { float: left; margin-right: 0.5rem; padding: 0.5rem 0.25rem; font-size: 350%; line-height: 1;}

/*---HOME---*/
/*---------*/

/*---INTRODUCTION ANIMATION---*/
#introduction-animation { height: 50vh;}
.introduction-animation-step01  { position: absolute; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 50vh; 
    background: #a290c9; overflow: hidden;}

/*---INTRODUCTION SLOGAN---*/
#slogan { z-index: 1; position:absolute; width: 100%; height: 50vh; display: flex; align-items: center;}
#slogan .container { width: 100%;}
#slogan-wrapper { /*position:absolute; top: 50%; left: 0; transform: translateY(-50%);*/ width: 100%;}
#slogan-wrapper h1 { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; color: #1d0071;}
#slogan-wrapper h1 .line { position: relative; width: 100%;  overflow: hidden;}
#slogan-wrapper h1 .line span { position: absolute; top: 0; left: 0;}

@media only screen and (max-height: 428px) and (orientation: landscape) {
    #introduction-animation { height: 80vh;}
    .introduction-animation-step01  { height: 80vh;}
    #slogan { height: 80vh;}
}

@media only screen and (max-width: 767px) { #slogan-wrapper h1 .line { height: 30px; font-size: 20px; line-height: 24px;}}
@media only screen and (min-width: 768px) { #slogan-wrapper h1 .line { height: 40px; font-size: 30px; line-height: 34px;}}
@media only screen and (min-width: 1024px) { #slogan-wrapper h1 .line { height: 50px; font-size: 40px; line-height: 44px;}}
@media only screen and (min-width: 1024px) { #slogan-wrapper h1 .line { height: 60px; font-size: 46px; line-height: 48px;}}

/*belgium flag*/
#slogan-wrapper h1 .line:nth-child(3) strong:before { content: ""; position: absolute; bottom:-4px; left: 0; display: block; width: 33%; height: 4px; background-color: #000000 ;}
#slogan-wrapper h1 .line:nth-child(3) strong { position: relative; border-bottom:4px solid #FDDA24;}
#slogan-wrapper h1 .line:nth-child(3) strong:after { content: ""; position: absolute; bottom:-4px; right: 0; display: block; width: 33%; height: 4px; background-color: #EF3340;}

/*---BABELUTTE---*/
#babelutte { position: relative; color: black; background: url("img/babelutte-illlu-bg.svg") white center center no-repeat; background-size: cover; overflow: hidden;}
#babelutte .container {  z-index: 2; position: relative; padding-top: 6rem; padding-bottom: 6rem;}
#babelutte .container:after { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); height: 500px; width: 500px; background-color: white; border-radius: 50%;;}
.babelutte-content { z-index: 3; position: relative; text-align: center;}
.babelutte-content h2 { font-family: inherit; font-size: inherit; line-height: inherit;}
.babelutte-illu-title { margin: 2.5em 0 0.5rem; width: 100%; max-width: 600px; height: auto;}
.babelutte-logo-myfonts { width: 100%; max-width: 160px; height: auto;}

.btn.babelutte { margin-top:1.5rem; color: black; background-color: #F08800; border-color: #F08800;
    -webkit-box-shadow: 6px 10px 0 0 rgba(0,78,146,0.1);
    -moz-box-shadow: 6px 10px 0 0 rgba(0,78,146,0.1);
    box-shadow: 6px 10px 0 0 rgba(0,78,146,0.1);
}

/*---GAUFRE---*/
#gaufre { position: relative; color: #372255; background: url("img/gaufre-illu-stripes.svg") #EDCD63 center center no-repeat; background-size: cover; overflow: hidden;}
#gaufre .container {  z-index: 2; position: relative; padding-top: 6rem; padding-bottom: 6rem;}
#gaufre .container:after { content: ""; display: inline-block; position: absolute;   top: 50%; left: 50%; 
    transform: translate(-50%, -50%); height: 500px; width: 500px; background-color: #FCDF7F; border-radius: 50%;;}
.gaufre-content { z-index: 3; position: relative; text-align: center;}
.gaufre-content h2 { font-family: inherit; font-size: inherit; line-height: inherit;}
.gaufre-illu-title { margin: 2.5em 0 0.5rem; width: 100%; max-width: 600px; height: auto;}
.gaufre-logo-myfonts { width: 100%; max-width: 160px; height: auto;}

.btn.gaufre { margin-top:1.5rem; color: #fff; background-color: #372255; border-color: #372255;}

/*---ABOUT---*/
#about { position: relative; color: #1a0053; background-color: #e7dae0; overflow: hidden;}
#about .container {  z-index: 2; position: relative; padding-top: 6rem; padding-bottom: 6rem;}
#about .container div h2 span.subtitle { margin-bottom: 1rem; color: #1a0053;}
#about .container div h2 span { display: block;}
#about .container div h2 { color: #c7555a}
#about .container p { margin-top: 3rem;}
#about .about-illu { position: relative; text-align: center; background-image: url(img/about-illu-addiction.svg);}

.sticker { width: 100%; max-width: 200px; height: auto;}
.sticker2 { width: 100%; max-width: 350px; height: auto;}
.sticker3 { width: 100%; max-width: 250px; height: auto;}

@media only screen and (min-width: 768px) {
    #about .container { padding-top: 9rem; padding-bottom: 9rem;}
}

@media only screen and (max-width: 991px) {
    #about .about-illu { margin-top: 3rem;}
}

@media only screen and (min-width: 992px) {
	#about .container {display: flex; justify-content: center; gap:6%;}
	#about .container div { width:40%;}
}

/*---LEGAL PAGE---*/
/*---------------*/
#legal-page main { padding: 9rem 0 6rem 0; color: #1a0053; background-color: #e7dae0;}
#legal-page main .container { max-width: 800px;}

#legal-page main a {  font-weight: bold; color: #1a0053;}
#legal-page main a:after { background: #FF8888;}
#legal-page main a.external-link span:last-child { margin-left:5px; font-size: 18px;}

#legal-page main h1 { position: relative; width: 100%; height: 80px; overflow: hidden;}
#legal-page main h1 span { position: absolute; top: 0; left: 0;}
#legal-page main h2 { margin-top:3rem;}
#legal-page main h3 { margin-top:1.5rem;}
#legal-page main p { margin-top:1rem;}
#legal-page main ul { margin:1rem 1rem 0 1rem;}
#legal-page main ul li { padding-top:0.5rem;}
#legal-page main ul li:first-child { padding-top:0;}

/*---HEADER---*/
/*-----------*/
header { z-index: 2; position: absolute; top: 30px; width: 100%; color: #1d0071;}
header .container { display: flex; justify-content: space-between; align-items: center; }
header a { color: #1d0071;}
header a:after { bottom: -4px; background: #1d0071;}
#branding { text-align: center;}
#branding:after { bottom: -8px; width: 0%; background: #FF8888;}
#branding:hover:after { width: 100%;}
#branding span:first-child { display: block; font-weight: bold; letter-spacing: 1px;}
#branding span:last-child { margin-top:6px; font-size: 12px; letter-spacing: 4px;}

#legal-page header { color: #1a0053;}
#legal-page header a { color: #1a0053;}
#legal-page header a:after { background: #1a0053;}

/*---FOOTER---*/
/*-----------*/
#footer-main { position: relative; color:#3604c7; background-color: #FF8888; overflow: hidden;}
.word-hello { z-index: 1; position: absolute; top: 3rem; right: 30px; width: 100%; font-size: 25vw; text-align: right; color:#371414; visibility: hidden; writing-mode: vertical-rl; text-orientation: mixed;}
#footer-main .container { z-index: 2; position:relative;}
#footer-main a { color:#3604c7;}
#footer-main a:hover { color:#3604c7;}
#footer-main a:after { background: #3604c7;}
#footer-main .external-link span:last-child { color:#3604c7;}

/*footer content*/
#footer-main .footer-content { padding: 6rem 0;}
#footer-main .footer-content p.email-adress { margin-top: 3rem;}
#footer-main .footer-content p.email-adress a { font-size: 3rem; line-height: 4rem; word-break: break-all;}

/*footer main*/
#footer-main .footer-info { border-top:1px solid #3604c7; border-bottom:1px solid #3604c7;}
#footer-main .footer-info div { padding: 3rem 0 0 0;}
#footer-main .footer-info div:last-child  { padding: 3rem 0 3rem 0;}
#footer-main .footer-info div p { text-align: center;}

/*footer nav*/
#footer-main nav { padding: 3rem 0;}
#footer-main nav ul {padding: 0; text-align:center;}
#footer-main nav ul li { padding: 0 0 1rem 0; list-style: none;}
#footer-main nav ul li:last-child { padding: 0 0 0 0;}

@media only screen and (min-width: 768px) {
    .word-hello { writing-mode: horizontal-tb;}
    #footer-main .container { padding-top: 12rem;}
	#footer-main nav ul { display: flex; justify-content: center; align-items: center;  width:100%;}
	#footer-main nav ul li { padding: 0 10px 0 0;}
	#footer-main nav ul li:last-child { padding-right: 0;}
	#footer-main nav ul li:after { content:"|"; padding-left: 10px;}
	#footer-main nav ul li:last-child:after { content:""; padding-left: 0;}
}

@media only screen and (min-width: 992px) {
    #footer-main .footer-info { display: flex; align-items: stretch; border-top:1px solid #3604c7; border-bottom:1px solid #3604c7;}
    #footer-main .footer-info div { padding: 3rem 1rem; display: flex; justify-content: center; align-items: center; width:33.33%;}
    #footer-main .footer-info div:first-child { border-right: 1px solid #3604c7;}
    #footer-main .footer-info div:last-child { border-left: 1px solid #3604c7;}
}

@media only screen and (min-width: 1920px) {
    #footer-main .footer-content p.email-adress a { font-size: 5rem; line-height: 5rem;}
}

#legal-page #footer-main { color:#1a0053; background-color: #a290c9;}
#legal-page .word-hello { color:#16ffc8;}
#legal-page #footer-main a { color:#1a0053;}
#legal-page #footer-main a:hover { color:#1a0053;}
#legal-page #footer-main a:after { background: #1a0053;}
#legal-page #footer-main .external-link span:last-child { color:#1a0053;}

#legal-page #footer-main .footer-info { border-top:1px solid #1a0053; border-bottom:1px solid #1a0053;}

@media only screen and (min-width: 992px) {
    #legal-page #footer-main .footer-info { border-top:1px solid #1a0053; border-bottom:1px solid #1a0053;}
    #legal-page #footer-main .footer-info div:first-child { border-right: 1px solid #1a0053;}
    #legal-page #footer-main .footer-info div:last-child { border-left: 1px solid #1a0053;}
}

/*---COOKIES---*/
.btn 
{ padding: 1rem 2rem !important; border-radius: 25px !important; cursor: pointer;
transition: 0.3s; 
-webkit-box-shadow: 6px 10px 0 0px rgba(54,4,199,0.1);
-moz-box-shadow: 6px 10px 0 0px rgba(54,4,199,0.1);
box-shadow: 6px 10px 0 0px rgba(54,4,199,0.1);
}
.btn:hover {
text-decoration: underline;
-webkit-box-shadow: 0 0 20px 0px rgba(54,4,199,0.1);
-moz-box-shadow: 0 0 20px 0px rgba(54,4,199,0.1);
box-shadow: 0 0 20px 0px rgba(54,4,199,0.1);
}
.cookie-consent-modal .modal-content-wrap .modal-content { padding: 1rem; max-width: 700px; color: #371414; background-color: #fff; border: 1px solid #371414; border-radius: 25px; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);}
.cookie-consent-modal a { color:#3604c7 !important;}
.cookie-consent-modal a:after { background: #3604c7;}
.cookie-consent-modal .modal-content-wrap .modal-content .modal-body p:last-child { margin-top: 1rem;}
.cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-primary { color: #fff; background-color: #3604c7; border-color: #3604c7;}
.cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-primary:hover { color: #e7dae0; background-color: #3604c7; border-color: #3604c7;}
.cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-secondary { color: #3604c7; background-color: #fff; border-color: #3604c7;}
.cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons .btn.btn-secondary:hover { color: #3604c7; background-color: #fff; border-color: #3604c7;}

@media only screen and (min-width: 768px) {
    .cookie-consent-modal .modal-content-wrap .modal-content { padding: 3rem;}
}

/*---ANIMATION---*/
/*--------------*/

/*---ANNOUCEMENT---*/
.announcement  { z-index: 1;  width: 100%; overflow: hidden;}
.announcement ul { padding:1rem 0; display: flex; flex: auto; flex-direction: row; width: fit-content; -webkit-font-smoothing: antialiased; 
    background-color: white; border-top:1px solid #371414; border-bottom:1px solid #371414}
.announcement li { flex-shrink: 0; position:relative;  list-style-type: none; line-height: 1; font-smooth: always; color:#371414;}

.announcement.announcement-v1  li { padding: 0 20px;}
.announcement.announcement-v1  li:after { content: "➭"; position:absolute; top:8px; left:-10px; font-size: 30px; line-height: 0;}
.announcement.announcement-v2  li { padding: 0 20px;}
.announcement.announcement-v2  li:after { content: "➭"; position:absolute; top:8px; left:-10px; font-size: 30px; line-height: 0;}
.announcement.announcement-v3  ul {  background-color: #1a0053; border-top:1px solid #1a0053; border-bottom:1px solid #1a0053}
.announcement.announcement-v3  li { padding: 0 20px; color: #16ffc8;}
.announcement.announcement-v3  li:after { content: "☺"; position:absolute; top:8px; left:-10px; font-size: 30px; line-height: 0;}

/*---BG NOISE---*/
.bg-noise { z-index: 1; position: absolute; overflow: hidden; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.bg-noise-wrapper { position: relative; top: -100%; left: -100%; width: 300%; height: 300%; background: url(img/bg-noise-3.png);
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-animation: noise 5s infinite;
animation: noise 1s infinite;
-webkit-animation-timing-function: steps(10);
animation-timing-function: steps(10);
}

@-webkit-keyframes noise { over
0% {
    transform: translate(-10%,10%);
}
10% {
    transform: translate(-25%);
}
20% {
    transform: translate(-30%,10%);
}
30% {
    transform: translate(-30%,30%);
}
40% {
    transform: translate();
}
50% {
    transform: translate(-15%,10%);
}
60% {
    transform: translate(-20%,20%);
}
70% {
    transform: translate(-5%,20%);
}
80% {
    transform: translate(-25%,5%);
}
90% {
    transform: translate(-30%,25%);
}
100% {
    transform: translate(-10%,10%);
}
}