/* Icones */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* GLOBAL */
@font-face {
  font-family: MercoBold;
  src: url(../fonts/corporate-a-bold.otf);
}
@font-face {
  font-family: MercoLight;
  src: url(../fonts/corporate-a-light.ttf);
}

h1, h2, h3, h4, h5, h6{
    font-family:MercoBold;    
}

/* COLORS */
:root {
    --clr-darkgrey: #171717; /* rgba(23, 23, 23) */
    --clr-red: #CE0000; /* rgba(206, 0, 0) */
    --clr-light: #eeeeee; /* rgba(238, 238, 238) */

    --clr-darkblue:#1A1A2E; /* rgba(26, 26, 46) */
    --clr-gold:#C9A84C; /* rgba(201, 168, 76) */
}

/* BUTTONS */
.btn-primary{
    background-color:var(--clr-red);
    color:var(--clr-light);
    font-family:MercoBold;
    font-weight:600;
    border:1px solid var(--clr-light);
    text-transform: uppercase;
}
.btn-secondary{
    background-color: var(--clr-darkblue);
    color: var(--clr-light);
    font-family:MercoBold;
    font-weight:600;
    border:1px solid var(--clr-light);
    text-transform: uppercase;
}
.btn-primary:hover, .btn-secondary:hover{
    opacity:0.7;
    color:var(--clr-light);
}

/* OVERLAY */
.overlay-darkblue{
    background-color:rgba(26, 26, 46, 0.7);
}

/* TOP BARRE */
.top-barre{
    position:fixed;
    top:0;
    left:0;
    width:99%;
    background:rgba(26, 26, 46, .9);
    padding:0.5%;
    z-index:100;
}

.top-barre .logo img{
    max-width:75px;
    height:auto;
}

.top-barre .tile p{
    margin:0;
    line-height:75px;
    font-family:MercoBold;
    color:var(--clr-gold);
    font-size:3rem;
    animation: clignoter 2s ease-in-out infinite;
}

@keyframes clignoter {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.top-barre .navbar a{
    font-family:MercoLight;
    color:var(--clr-gold);
    font-size:1.1rem;
    text-transform: capitalize;
    font-weight:normal;
}
.top-barre .navbar a:hover{
    color:var(--clr-red);
    text-decoration:underline;
}
.top-barre .navbar .uk-navbar-nav{
    gap:20px;
}

/* HERO */
.hero .uk-slideshow-items{
    height:100vh;
    width:100%;
}
.hero .uk-slideshow-items > div > div{
    border: 1px solid var(--clr-gold);
}

.hero h2{
    color:var(--clr-light);
    font-size:3.5rem;
    margin-bottom:0;
}

.hero h3{
    margin-top:0;
    font-size:2.75rem;
}

.uk-position-top {
    top: 15%;
    left: 0;
    right: 0;
}

/* FOOTER */
.footer{
    display:none;
    position:fixed;
    bottom:45.4px;
    left:0;
    width:99%;
    background:rgba(34,34,34,.9);
    padding:1%;
    z-index:200;
}

.footer h3{
    margin-bottom:0;
    color:var(--clr-light);
    font-family:MercoLight;
    font-weight:bold;
    text-decoration: underline;
}

.footer .uk-navbar-nav{
    gap:10px;
}

.footer img{
    width:auto;
    height:50px;
}

.footer img.uk-club{
    max-width:125px;
    height:auto
}

/* COPYRIGHT */
.copyright{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:rgba(26, 26, 46, .9);
    padding:0.5%;
    z-index:300;
    border-top:1px solid var(--clr-gold);
}

.copyright a{
    color:var(--clr-light);
    font-family:MercoBold;
    font-weight:600;
}

/* MODAL STYLE */
.modal-style .uk-modal-body{
    background-color:rgba(26, 26, 46, 1);
    color:#ffffff;
}
.modal-style h2{
    font-family:MercoBold;
    color:var(--clr-gold);
}
.modal-style label{
    color:#ffffff;
}
.modal-style p span{
    font-family: MercoBold;
    font-weight:600;
    color:#CE0000;
}


@media screen and (min-width: 960px) and (max-width: 1200px){
    .footer img{
        width:auto;
        height:35px;
    }
    .footer img.uk-club{
        max-width:85px;
    }
}

@media (max-width: 960px){ 
    .top-barre{
        padding:1.5%;
    }
    .top-barre .logo img{
        max-width:50px;
        height:auto;
    }

    .top-barre .tile p{
        font-size:1.25rem;
        text-shadow: 1px 1px 1px #CE0000;
    }

    .hero h2{
        font-size:2.5rem;
    }

    .hero h3{
        font-size:1.75rem;
    }

    .footer h3{
        display: none;
    }

    .footer .uk-navbar-nav a{
        min-height: 24px;
    }

    .footer .partenaires img{
        width:auto;
        height:24px;
    }
    .footer .club img{
        width:auto;
        height:50px;
    }
    .footer img.uk-club{
        display: inline-block;
        width:40px !important;
        height:auto !important;
    }
}
