/*================================
GENERAL
================================*/
body{ display:block; margin:0; padding:0; background-color:white; }
.container{ display:block; width:100%; max-width:1000px; margin:auto; box-sizing:border-box; padding:0 20px; }

a{ font-style:none; text-decoration:none; }




/*============================================================
BACKGROUND
============================================================*/
.background{ position:fixed; display:block; width:100%; height:100%; }
.background .blur{ position:absolute; z-index:+1; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); -moz-backdrop-filter:blur(10px); }
.background img{ object-fit:cover; width:100%; height:100%; }



/*============================================================
HEADER
============================================================*/
.header{ position:relative; z-index:+1; display:block; width:100%; height:60px; background-color:rgba(255,255,255,0.5); backdrop-filter:blur(100px); -webkit-backdrop-filter:blur(100px); -moz-backdrop-filter:blur(100px); border-radius:0; box-shadow:none; overflow:hidden; }
.header img{ display:block; margin:5px auto; height:50px; }



/*============================================================
TITLE
============================================================*/
.title{ position:relative; z-index:+1; display:block; width:100%; padding:20px 0; }
.title .logo{ position:relative; z-index:+1; display:inline-block; vertical-align:middle; width:100px; height:100px; }
.title .logo img{ object-fit:cover; width:100%; height:100%; pointer-events:none; }
.title .text{ display:inline-block; vertical-align:middle; width:calc(100% - 100px); height:auto; box-sizing:border-box; padding-left:40px; }
.title .text h1{ display:block; margin:0; font-family:Montserrat; font-size:60px; font-weight:600; color:white; text-shadow:1px 1px 2px black; }
.title .text h2{ display:block; margin:0; font-family:Montserrat; font-size:40px; font-weight:500; color:white; text-shadow:1px 1px 2px black; }
@media(max-width:1000px){
    .title .text h1{ font-size:40px; }
    .title .text h2{ font-size:30px; }
}
@media(max-width:800px){
    .title{ text-align:center; }
    .title .logo{ width:80px; height:80px; margin-bottom:10px; }
    .title .text{ width:100%; padding-left:0; }
    .title .text h1{ font-size:32px; text-align:left; text-align:center; }
    .title .text h2{ font-size:20px; text-align:left; text-align:center; }
}



/*============================================================
ACCESS
============================================================*/
.access{ position:relative; z-index:+1; display:block; width:100%; padding:20px 0; }
.access .qrcode{ display:inline-block; vertical-align:middle; width:300px; height:300px; box-sizing:border-box; padding:20px; background-color:rgba(0,0,0,0.5); backdrop-filter:blur(100px); -webkit-backdrop-filter:blur(100px); -moz-backdrop-filter:blur(100px); border-radius:10px; box-shadow:none; }
.access .qrcode img{ width:100%; height:100%; object-fit:cover; border-radius:5px; pointer-events:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.access a{ display:inline-block; vertical-align:middle; width:auto; height:auto; margin:0; margin-left:40px; }
.access button{ position:relative; display:inline-block; vertical-align:middle; margin:0; box-sizing:border-box; padding:0 40px 0 30px; background-color:rgba(0,0,0,0.5); backdrop-filter:blur(100px); -webkit-backdrop-filter:blur(100px); -moz-backdrop-filter:blur(100px); border:none; border-radius:100px; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; line-height:40px; font-family:Montserrat; font-size:20px; font-weight:400; color:white; }
.access button:before{ content:""; position:absolute; top:10px; right:15px; display:block; width:10px; height:20px; clip-path:polygon(10% 100%, 0% 87%, 65% 50%, 0% 13%, 10% 0%, 100% 50%); background-color:white; }
@media(max-width:800px){
    .access{ text-align:center; padding:0; }
    .access .qrcode{ display:block; margin:auto; margin-bottom:20px; width:150px; height:150px; }
    .access a{ margin-left:0; }
}





/*=============================================
FOOTER
=============================================*/
footer{ position:sticky; top:100%; display:block; height:auto; padding:20px 20px; margin:0; margin-top:20px; background-color:rgba(255,255,255,0.5); backdrop-filter:blur(100px); -webkit-backdrop-filter:blur(100px); -moz-backdrop-filter:blur(100px); border-radius:0; box-shadow:none; text-align:left; }
footer .footer-infos{ text-align:center; margin-bottom:10px; }
footer .footer-infos p{ position:relative; display:block; height:auto; margin:0 auto 10px auto; color:#5e574d; font-family:Montserrat; font-size:16px; font-weight:400; }
footer .footer-infos p a{ color:#5e574d; }
footer .footer-links{ text-align:center; margin-bottom:0; }
footer .footer-links p{ position:relative; display:inline-block; vertical-align:middle; height:auto; margin:0 auto 10px auto; color:#5e574d; font-family:Montserrat; font-size:16px; font-weight:400; }
footer .footer-links a{ position:relative; display:inline; height:auto; margin:0 10px; color:#5e574d; font-family:Montserrat; font-size:16px; font-weight:400; white-space:nowrap; }
footer .footer-links img{ display:inline-block; vertical-align:middle; height:50px; margin:0 10px; border-radius:5px; }