@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@font-face {
    font-family: 'BLACKJAR';
    src: url('fonts/BLACKJAR.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

:root {
     --color1: #000; --color2: #232323; --color3: #939393;
     --blue: #2a5566;
     --red: #880000;
     --yellow: #b47e00;
}
html { scroll-behavior: smooth; scroll-padding-top: 3rem; }
body { background:#fafafa; font-family: "Lato", sans-serif; color: var(--color3); font-size: 20px; }

h1, h2, h3, h4 { font-weight: 600; }
h1 { font-size:2.8em; text-transform:uppercase; margin-bottom: 2rem; }
h2 { font-size:2.1em; margin-bottom:1rem; }
h3 { font-size:1.2em; margin:2rem 0 1rem; }

a { color: var(--color1); text-decoration: none; transition: all 0.3s ease-out; }
a:hover { color: var(--color3); }
p { margin-bottom: 1rem; }
blockquote { background: #f9f9f9; padding: 1rem; margin-bottom: 1rem; font-size: 0.9em; }

/* Classes */
.nopadding { padding: 0!important; }
.nomargin { margin: 0!important; }
.pr { padding-right: 3rem; }
.mb-1 { margin-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.mb-3 { margin-bottom: 3rem!important; }
.mb-4 { margin-bottom: 4rem!important; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.small { font-size: 0.7em; }
.red { color: var(--red); }
.fluid { width: 100%; }
img.border { border:1px solid #d7d7d7!important; }
.only-xs { display: none; }
.alert { margin-bottom: 2rem; }

/* Top */
#top { display: flex; }
#top1, #top2, #top3 { flex: 1 1 auto; height:5px; }
#top1 { background: var(--blue); }
#top2 { background: var(--red); }
#top3 { background: var(--yellow); }

/* Header */
nav { background:#FFF ; padding: 0.5rem 0; }
nav .navbar-brand img { height: 50px; }
nav .navbar-brand:hover img { opacity:0.8; }
#nav_tickets { display: none; }
#nav_tickets a { display: block; border-radius: 5px; background: var(--yellow); font-size: 0.8em; text-align: center; color:#FFF; }
nav .nav-link { padding: 0.5rem 0.6rem!important; text-transform: uppercase; font-size: 0.9em; font-weight: 600; color: var(--color1); }
nav .nav-link:hover, .nav-link.active, .navbar-text a:hover { background: #FFF; color: var(--yellow)!important; }
nav #socials .nav-link { display: inline-block; padding: 0.5rem 0.6rem!important; }
.navbar-toggler { background:#FFF; color: var(--color1); font-size: 1.2em; font-weight: 600; border: 0; padding: 0.5rem 0 0.5rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { margin-right: 4px; }
.navbar-text { margin-top: -5px; padding: 0; color: var(--color1); }
#nav_exposer, #nav_visiter { display: inline; width: auto; border-radius: 10px; padding: 0.45rem 1.4rem; font-size: 1.1em; color: #FFF!important; text-transform: uppercase; letter-spacing: 0.6px; }
#nav_exposer { background: var(--red); border: 1px solid var(--red); color: #FFF; margin-right: 1rem; }
#nav_exposer:hover { background: #FFF; border-color: var(--red); color: var(--red)!important; }
#nav_visiter { background: var(--blue); border: 1px solid var(--blue); color: #FFF; }
#nav_visiter:hover { background: #FFF; border-color: var(--blue); color: var(--blue)!important; }
#nav_visiter.magic { margin-right: 6rem; }
#nav_exposer i, #nav_visiter i { margin-left: 0.5rem; }

/* Section */
.container { max-width: 1400px; }
section { position: relative; background: #FFF; border-radius: 10px; padding: 5rem; }
#exposer section, #visiter section { margin-bottom: 4rem; }
section h2 { font-family: "BLACKJAR"; }
section .cta { text-align: right; margin: 2rem 0 0; }
section .owl-carousel { margin: 2rem 0; }
section .box { background: #F0F0F0; border-radius: 10px; padding: 2rem; }
section .image { width: 100%; border-radius: 10px; border: 1px solid #d7d7d7 !important; margin-bottom: 0.5rem; }
.bg { position: relative; background-size: cover; background-position: center; padding: 3rem 0 4rem; border-radius: 0; }
.bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.bg > * { position: relative; z-index: 1; }
#exposer .bg h1, #visiter .bg h1 { color: #FFF; text-align: center; }
.nobg { padding: 5rem 0; }
section .bg { padding: 5rem; }
section .bg h1, section .bg h2, section .bg h3, section .bg p { color: #FFF; }
section a { text-decoration: underline; }
section a:hover { text-decoration: none; }
section .more { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); }
section .more_button { display: block; border-radius: 50%; width: 80px; height: 80px; line-height: 82px; text-align: center; cursor: pointer; transition:transform .8s ease-in-out; }
section .more i { font-size: 75px; color: #FFF; }
section .more_button:hover { transform: rotate(360deg); }
#exposer section, #visiter section { margin-bottom: 4rem; }
#exposer section h1, #visiter section h1 { padding: 2rem; margin-bottom: 0; }
section .more_detail { display: none; opacity: 0; padding-top: 2rem; }
section .more_detail.open { display: block; animation: fadeIn 1.2s ease forwards; }

/* Home */
#nav_home .nav-link:hover, #nav_home .nav-link.active, #nav_home .navbar-text a:hover { background: #FFF; color: var(--color1)!important; } 
#hero { position: relative;  width: 100%; height: 100vh; min-height: 100vh; padding: 0; overflow: hidden; border-radius: 0; }
#hero nav { z-index: 999; background: rgb(255 255 255 / 70%); }
#hero a { text-decoration: none; }
#video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#video_caption { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
#caption { position: absolute; left: 5%; top: 62%; transform: translateY(-50%); background: rgb(0 0 0 / 70%); padding: 2rem; }
#caption h1 { margin-bottom: 1rem; font-size: 2.4em; color: #FFF; font-weight: bold; text-align: _center; }
#caption p { margin-bottom: 0.3rem; font-size: 1.8em; color: #FFF; text-align: _center; }
#caption .btn { font-size: 0.6em; }
/*#timer { height: auto; }
#countdown { font-size: 2em!important; color: var(--red)!important; text-shadow: none!important; }*/
#baseline { position: absolute; left: 5%; top: 90%; transform: translateY(-50%); font-size: 2.1em; font-weight: bold; text-shadow: 2px 2px 2px #000; }
#baseline a { color: #FFF; }
#arrow { display: inline-block; width: 80px; height: 80px; border-radius:80px; background: rgb(0 0 0 / 70%); margin-left: 1rem; line-height: 80px; font-size: 1.4em; color: #FFF; text-align: center; text-shadow: none; animation: arrowMove 2s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; }

#home section { margin-bottom: 5rem; }
#home section h2, #exposer section h2, #visiter section h2 { font-family: "Lato", sans-serif; text-transform: uppercase; }
#home h3, #exposer h3, #visiter h3 { font-family: "BLACKJAR"; font-size:1.7em; margin: 0 0 2rem; }
#home section .box { background: #fff; }

/* Carousel */
.owl-carousel .item .title { margin: 0; text-align: center; font-size: 1.1em; font-weight: 600; }
.owl-carousel .item figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Pages */
.accordion-button:not(.collapsed) { background: #FFF; color: #000; font-weight: bold; }
.accordion-body { font-size: 0.8em; }
.partner { width: 12%; }

/* Buttons */
.btn { padding: 0.6rem 1rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; }
.btn i, .btn .ico { margin-right: 5px; }
.btn-primary { border-color: var(--color1); background: var(--color1); color: #FFF; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { border-color: var(--color1)!important; background: #FFF!important; color: var(--color1)!important; }
.btn-secondary { padding: 0.6rem; color: #FFF; }
.btn.disabled { background: #474747; border-color: #474747; }

/* Apps */
#apps_fixed { position: fixed; z-index: 999; right: 0; top:14vh; transition: opacity 0.3s ease; }
#apps_fixed.hidden { opacity: 0; pointer-events: none; }
#apps_fixed ul { list-style: none; padding: 0; }
#apps_fixed li { margin-bottom: 0.5rem; }
#apps_fixed a { display: block; padding: 0.6rem; background: #000; border-radius: 10px 0  0 10px; border: 1px solid; font-size: 0.8em; color: #FFF; text-align: center; }
#apps_fixed a.mate { background: orange; border-color: orange;  }
#apps_fixed a.mate:hover { color: #000; }
#apps_fixed a.jobs { background: #e62075; border-color: #e62075; }
#apps_fixed a.jobs:hover { background: #FFF; color: #e62075; }
#apps_fixed a.date { background: #46ad9a; border-color: #46ad9a; }
#apps_fixed a.date:hover { color: #000; }
#apps_fixed a.feed { background: #e23950; border-color: #e23950; }
#apps_fixed a.feed:hover { color: #000; }
#apps_fixed p { text-align: center; font-size: 0.9em; color: #FFF; }

#ticket_fixed { position: fixed; z-index: 999; right: 4vh; bottom:4vh; transition: opacity 0.3s ease; }
#ticket_fixed.hidden { opacity: 0; pointer-events: none; }

/* Footer */
footer { color:#FFF; font-size: 0.7em; }
footer { position: relative; background-image: url('../pictures/footer.jpg'); background-size: cover; background-position: center; border-top:10px solid #FFF; }
footer::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
footer > * { position: relative; z-index: 1; }
.footer_detail { padding: 2rem; }
.footer_detail b { font-family: "BLACKJAR"; font-size: 2.4em; }
.footer_detail a { color:#FFF; text-decoration: none; }
.footer_detail a:hover { color: var(--yellow); }
.footer_detail ul { list-style: none; padding: 0; margin: 0; }
.footer_detail ul li { margin-bottom: 0.4rem; }
.footer_detail ul li:last-child { margin: 0; }
.footer_detail ul li a { text-transform: uppercase; }
.footer_detail .logo { margin-bottom: 2rem; height: 90px; }
.footer_detail .logo:hover { opacity: 0.8; }
footer #socials { display: inline-block; margin-bottom: 1rem; }
#socials li { float: left; margin-right: 10px; }
#socials li:last-child { margin: 0; }
#socials li a { display: block; width: 40px; height: 40px; line-height: 40px; background: #FFF; border:1px solid #FFF; font-size: 1.3em; text-align: center; color: #000; transition: all 0.3s ease-out; }
#socials li a:hover { color: var(--yellow); }
#legal { border-top:1px solid #666; padding: 1rem; margin: 0; color: #FFF; }
#legal a { color: #FFF; text-decoration: none; }
#legal a:hover { color: var(--yellow); }

/* ######################################################################################################### */

/* Responsive nav */
@media (min-width: 1391px) and (max-width: 1640px) {

    /* Nav */
    nav .nav-link { font-size: 0.8em; padding: 0.5rem 0.4rem!important; }
    #nav_exposer, #nav_visiter { font-size: 0.6em; }
}

@media (min-width: 1161px) and (max-width: 1391px) {

    body { font-size: 19px; }

    /* Nav */
    nav .navbar-brand img { height: 40px; }
    nav .nav-link { font-size: 0.7em; padding: 0.5rem 0.3rem!important; }
    #nav_exposer, #nav_visiter { font-size: 0.6em; }
    #nav_exposer { margin-right: 0.2rem; }

    /* Hide */
    #apps_fixed { display: none; }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { display: none; }
}

@media (min-width: 992px) and (max-width: 1160px) {

    body { font-size: 19px; }

    /* Nav */
    nav .navbar-brand img { height: 40px; }
    nav .nav-link { font-size: 0.7em; padding: 0.5rem 0.3rem!important; }
    #nav_exposer, #nav_visiter { display: none; }
    nav #socials { text-align: center; }
    #nav_exposer, #nav_visiter { font-size: 0.6em; }

    /* Hide */
    #apps_fixed { display: none; }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { display: none; }
}

/* Mobile */
@media (max-width: 991px) {

    body { font-size: 18px; }
    h1 { font-size:1.9em; }
    h2 { font-size:1.5em; }

    /* Classes */
    .pr { padding-right: 0; }
    .only-xs { display: block; }
    .hidden-xs { display: none; }
    .mb-xs { margin-bottom: 2rem!important; }

    /* Nav */
    nav .navbar-brand { margin: 0; }
    nav .navbar-nav { padding: 0.5rem 0; }
    #nav_tickets { display: block; }
    nav .nav-link { padding: 0.3rem 0!important; font-size: 1.2em; text-align: center; }
    nav #socials { margin-bottom: 1rem; text-align: center; }
    #nav_exposer, #nav_visiter { display: block; margin:0 auto 1.2rem!important; width: 60%; }
    .navbar-text { display: inline-block; width: 100%; text-align: center; }

    /* Home */
    #hero { margin-bottom: 3rem!important; }
    #hero nav { background:#FFF }
    #caption { top: 50%; width: 90%; padding: 1.5rem; }
    #caption h1 { font-size: 1.4em; }
    #caption p { font-size: 0.9em; }
    #caption .btn { font-size: 0.9em; }
    #baseline { left: 0; top: 80%; width: 100%; font-size: 1.1em; text-align: center; }
    #arrow { width: 60px; height: 60px; border-radius:60px; margin-top: 1rem; line-height: 60px; font-size: 2em; }
    
    /* Section */
    .bg, .nobg { padding: 0.8rem 0 3rem!important; }
    section, section .bg { padding: 1rem 1rem 4rem!important; }
    #login, #newsletter { padding-bottom: 1rem!important; }
    section .owl-carousel .item { padding: 0; }
    .cta a { width: 100%; }
    #home .cta, #exposer .cta, #visiter .cta { margin-bottom: 0; }

    /* Pages */
    .partner { width:auto; }

    /* Footer */
    footer { font-size: 0.8em; }
    .footer_detail { padding: 1.5rem 0 0; text-align: center; }
    .footer_detail .logo { height: 60px; }
    .footer_detail p { margin-bottom: 0; }
    footer #socials { margin: 0; }
    .footer_detail ul li { margin: 0; }
    #legal { margin-top: 1.5rem; }

    /* Hide */
    #ticket_fixed { display: none; }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { display: none; }

}

/* Colors section */
section.blue { border: 5px solid var(--blue); color: var(--blue); }
section.blue a { color: var(--blue)!important; }
section.blue .box { color: var(--blue); }
section.blue .box .title { color: var(--blue); }
section.blue .btn { background: var(--blue)!important; border-color: var(--blue)!important; color: #FFF!important; }
section.blue .btn:hover { background: #FFF!important; border-color: var(--blue); color: var(--blue)!important; }
section.blue .more_button { background: var(--blue); }

section.blue .owl-carousel .owl-nav button.owl-next, section.blue .owl-carousel .owl-nav button.owl-prev { background: var(--blue)!important; border-color: var(--blue)!important; }
section.blue .owl-carousel .owl-nav button.owl-next:hover, section.blue .owl-carousel .owl-nav button.owl-prev:hover { background: #FFF!important; }
section.blue .owl-carousel .owl-nav button.owl-next:hover i, section.blue .owl-carousel .owl-nav button.owl-prev:hover i { border-color: var(--blue); color: var(--blue); }

section.red { border: 5px solid var(--red); color: var(--red); }
section.red a { color: var(--red)!important; }
section.red .box { color: var(--red); }
section.red .btn { background: var(--red)!important; border-color: var(--red)!important; color: #FFF!important; }
section.red .btn:hover { background: #FFF!important; border-color: var(--red); color: var(--red)!important; }
section.red .more_button { background: var(--red); }

section.red .owl-carousel .owl-nav button.owl-next, section.red .owl-carousel .owl-nav button.owl-prev { background: var(--red)!important; border-color: var(--red)!important; }
section.red .owl-carousel .owl-nav button.owl-next:hover, section.red .owl-carousel .owl-nav button.owl-prev:hover { background: #FFF!important; }
section.red .owl-carousel .owl-nav button.owl-next:hover i, section.red .owl-carousel .owl-nav button.owl-prev:hover i { border-color: var(--red); color: var(--red); }

section.yellow { border: 5px solid var(--yellow); color: var(--yellow); }
section.yellow a { color: var(--yellow)!important; }
section.yellow .box { color: var(--yellow); }
section.yellow .box .title { color: var(--yellow); }
section.yellow .btn { background: var(--yellow)!important; border-color: var(--yellow)!important; color: #FFF!important; }
section.yellow .btn:hover { background: #FFF!important; border-color: var(--yellow); color: var(--yellow)!important; }
section.yellow .more_button { background: var(--yellow); }

section.yellow .owl-carousel .owl-nav button.owl-next, section.yellow .owl-carousel .owl-nav button.owl-prev { background: var(--yellow)!important; border-color: var(--yellow)!important; }
section.yellow .owl-carousel .owl-nav button.owl-next:hover, section.yellow .owl-carousel .owl-nav button.owl-prev:hover { background: #FFF!important; }
section.yellow .owl-carousel .owl-nav button.owl-next:hover i, section.yellow .owl-carousel .owl-nav button.owl-prev:hover i { border-color: var(--yellow); color: var(--yellow); }

/* Owl carousel */
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    position: absolute; width: 80px; height: 80px;
    background: #000!important; border-radius: 50%; border: 6px solid #000!important; 
    line-height: 78px; text-align: center;
    transition:transform .8s ease-in-out; 
}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover { background: #FFF!important; }
.owl-carousel .owl-nav button.owl-next:hover i, .owl-carousel .owl-nav button.owl-prev:hover i { border-color: #000; color: #000; }
.owl-carousel .owl-nav button.owl-prev { left: -124px; top: 15%; }
.owl-carousel .owl-nav button.owl-next { right: -124px; top: 15%; }
.owl-carousel .owl-nav button.owl-next i, .owl-carousel .owl-nav button.owl-prev i { font-size: 2em; color: #FFF; }

/* Magic button */
.magic {
    background: rgb(255, 119, 0)!important; border-color: rgb(255, 119, 0)!important; padding: 0.5rem 1rem!important; font-size:1.2em; color: #FFF!important;
    padding: 0.5rem;
    /*box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.30);*/
    overflow: hidden;
    position: relative;
}
.magic:hover {
-webkit-transform: scale(1.1);
transform: scale(1.03);
color: #FFF!important;
}
.magic:before {
content: '';
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
    120deg,
    rgba(255,255,255, 0) 30%,
    rgba(255,255,255, .8),
    rgba(255,255,255, 0) 70%
);
top: 0;
left: -100px;
animation: shine 2s infinite linear; /* Animation */
opacity: 0.8;
}

/* Form */
.mb-form, .form-group { margin-bottom: 1rem; }
.mb-form label, .form-group label { margin-bottom: 0.4rem; }
.input-group-text { padding: 0 0.8rem!important; }
.form-control, .form-select { padding: 0.6rem 0.8rem!important; font-size: 1em!important; line-height: normal; }
#form_save { margin: 1rem 0 0; }

/* Keyframes */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes arrowMove {
    0%,
    15%,
    85%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }
}

@keyframes shine {
    0% {left: -100px}
    40% {left: 100%}
    100% {left: 100%}
}

/*
#timer { display : flex; justify-content: center; align-items : center; height: 48vh; margin-bottom: 11vh; text-align: center; }
#timer #countdown { font-size: 4em; font-weight: 600; color: var(--yellow); text-shadow: 2px 2px 2px #000; }
*/