/*================================
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; }
button{
    display:inline-block; margin:20px 0 0 0; box-sizing:border-box; padding:0 30px;
    background-color:#ff6a00; background:linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    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;
}



/*============================================================
HEADER HERO
============================================================*/
.headerhero{ position:relative; display:block; height:500px; overflow:hidden; }
.headerhero .circle{ position:absolute; bottom:0; right:-100%; display:block; width:200%; height:auto; background-color:white; border-radius:100%; overflow:hidden; }
.headerhero .circle .dummy{ padding-top:100%; }
.headerhero .circle img{ position:absolute; bottom:0; left:0; width:50%; height:auto; pointer-events:none; display:none; }
.headerhero .circle .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#ff6a00; background:linear-gradient(90deg, #ee0979 0%, #ff6a00 50%); opacity:1; }
.headerhero .title{ position:absolute; z-index:+1; bottom:0; width:100%; }
.headerhero .title .logo{ position:relative; z-index:+1; display:inline-block; vertical-align:middle; width:100px; height:100px; }
.headerhero .title .logo img{ object-fit:cover; width:100%; height:100%; pointer-events:none; }
.headerhero .title .text{ display:inline-block; vertical-align:middle; width:calc(100% - 100px); height:auto; box-sizing:border-box; padding-left:40px; }
.headerhero .title .text h1{ display:block; margin:0; font-family:Montserrat; font-size:60px; font-weight:600; color:#ee0979; }
.headerhero .title .text h2{ display:block; margin:0; font-family:Montserrat; font-size:40px; font-weight:500; color:#ee0979; }
@media(max-width:1000px){
    .headerhero{ height:350px; }
    .headerhero .title .text h1{ font-size:40px; }
    .headerhero .title .text h2{ font-size:30px; }
}
@media(max-width:800px){
    .headerhero{ height:300px; }
    .headerhero .title .logo{  width:80px; height:80px; }
    .headerhero .title .text{ width:calc(100% - 80px); padding-left:20px; }
    .headerhero .title .text h1{ font-size:32px; }
    .headerhero .title .text h2{ font-size:20px; }
}
@media(max-width:650px){
    .headerhero{ height:250px; }
    .headerhero .circle{ bottom:50px; }
    .headerhero .title{ text-align:left; }
    .headerhero .title .logo{ width:80px; height:80px; margin-bottom:10px; }
    .headerhero .title .text{ width:100%; padding-left:0; }
    .headerhero .title .text h1{ text-align:left; }
    .headerhero .title .text h2{ text-align:left; }
}



/*============================================================
SUBTITLES
============================================================*/
section.subtitles{ margin:40px 0 0 0; }
section.subtitles h3{ display:block; margin:15px 0; font-family:Montserrat; line-height:25px; font-size:20px; font-weight:400; color:#ff6a00; }
@media(max-width:1000px){
    section.subtitles h3{ font-size:16px; font-weight:400; }
}



/*============================================================
DISCOVER
============================================================*/
section.discover{ margin:0; }



/*============================================================
BETTER WORLD
============================================================*/
section.betterworld{ margin:40px 0; padding:40px 0; background-color:rgb(240,242,246); }
section.betterworld .left{ position:relative; display:inline-block; vertical-align:middle; width:25%; box-sizing:border-box; }
section.betterworld .right{ display:inline-block; vertical-align:middle; width:75%; box-sizing:border-box; padding-left:40px; }
section.betterworld .circle{ position:relative; display:block; width:100%; height:auto; margin:auto; background-color:#501C80; background:linear-gradient(135deg, rgba(95,93,171,1) 0%, rgba(192,166,231,1) 100%); border-radius:100%; overflow:hidden; }
section.betterworld .circle .dummy{ padding-top:100%; }
section.betterworld .circle img{ position:absolute; bottom:0; left:0; width:90%; height:90%; object-fit:contain; pointer-events:none; }
section.betterworld .avatarcontainer{ position:relative; display:block; width:100%; height:300px; margin:auto; }
section.betterworld .avatarcontainer img{ object-fit:contain; width:100%; height:100%; pointer-events:none; }
section.betterworld h2{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:30px; font-weight:500; color:#501C80; }
section.betterworld h3{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:20px; font-weight:500; color:#501C80; }
section.betterworld p{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:16px; font-weight:300; color:#501C80; }
@media(max-width:1000px){
    section.betterworld{ text-align:center; }
    section.betterworld h2{ font-size:25px; }
    section.betterworld h3{ font-size:15px; }
    section.betterworld .left{ width:100%; }
    section.betterworld .right{ width:100%; padding-left:0; }
    section.betterworld .circle{ max-width:180px; margin-bottom:20px; }
}



/*============================================================
DEMARK
============================================================*/
section.demark{ margin:40px 0; }
section.demark h2{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:30px; font-weight:500; color:#501C80; }
section.demark h3{ display:block; margin:0 0 5px 0; font-family:Montserrat; font-size:16px; font-weight:500; color:#501C80; }
section.demark p{ display:block; margin:0; font-family:Montserrat; font-size:14px; font-weight:300; color:#501C80; }
section.demark .cell{ display:inline-block; vertical-align:top; width:50%; box-sizing:border-box; }
section.demark .cell .card{ display:block; margin:10px 20px 10px 0; box-sizing:border-box; padding:10px; background-color:rgb(240,242,246); border-radius:15px; }
section.demark .cell .card .square{ display:inline-block; vertical-align:middle; width:120px; height:80px; box-sizing:border-box; background-color:white; border-radius:8px; overflow:hidden; }
section.demark .cell .card .square img{ object-fit:cover; width:100%; height:100%; pointer-events:none; }
section.demark .cell .card .text{ display:inline-block; vertical-align:middle; width:calc(100% - 120px); box-sizing:border-box; padding-left:10px; }
@media(max-width:1000px){
    section.demark .cell{ width:100%; }
    section.demark .cell .card{ margin:10px 0; }
}



/*============================================================
BRAND
============================================================*/
section.brand{ margin:40px 0; padding:40px 0; background-color:rgb(240,242,246); }
section.brand h2{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:30px; font-weight:500; color:#501C80; }
section.brand h3{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:20px; font-weight:500; color:#501C80; }
section.brand p{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:16px; font-weight:300; color:#501C80; }
section.brand .cell{ display:inline-block; vertical-align:top; width:50%; box-sizing:border-box; }
section.brand .cell .card{ display:block; margin:20px 20px 20px 0; box-sizing:border-box; padding:20px 20px 10px 20px; }
section.brand .cell .card .image{ display:inline-block; vertical-align:middle; width:80px; box-sizing:border-box; }
section.brand .cell .card .text{ display:inline-block; vertical-align:middle; width:calc(100% - 80px); box-sizing:border-box; padding-left:20px; }
section.brand .circle{ position:relative; display:block; width:100%; height:auto; margin:0 auto 10px auto; background-color:#501C80; background:linear-gradient(135deg, rgba(95,93,171,1) 0%, rgba(192,166,231,1) 100%); border-radius:100%; }
section.brand .circle .dummy{ padding-top:100%; }
@media(max-width:1000px){
    section.brand{ text-align:center; }
    section.brand .cell .card .image{ width:80px; margin-bottom:5px; }
    section.brand .cell .card .text{ width:100%; padding-left:0; }
}



/*============================================================
SPIRIT
============================================================*/
section.spirit{ margin:40px 0; }
section.spirit h2{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:30px; font-weight:500; color:#501C80; }
section.spirit h3{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:20px; font-weight:500; color:#501C80; }
section.spirit h4{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:14px; font-weight:500; color:#501C80; }
section.spirit p{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:16px; font-weight:300; color:#501C80; }
section.spirit .cell{ display:inline-block; vertical-align:top; width:33.33%; box-sizing:border-box; }
section.spirit .cell .card{ display:block; margin:20px 20px 20px 0; box-sizing:border-box; padding:20px 20px 10px 20px; text-align:center; }
section.spirit .circle{ position:relative; display:block; width:80px; height:auto; margin:0 auto 10px auto; background-color:#501C80; background:linear-gradient(135deg, rgba(95,93,171,1) 0%, rgba(192,166,231,1) 100%); border-radius:100%; }
section.spirit .circle .dummy{ padding-top:100%; }
@media(max-width:1000px){
    section.spirit{ text-align:center; }
}



/*============================================================
FIRST OWNERS
============================================================*/
section.first{ margin:40px 0 100px 0; padding:40px 0; background-color:rgb(240,242,246); }
section.first h2{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:30px; font-weight:500; color:#501C80; }
section.first h3{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:20px; font-weight:500; color:#501C80; }
section.first h4{ display:block; margin:0 0 20px 0; font-family:Montserrat; font-size:14px; font-weight:500; color:#501C80; }
section.first p{ display:block; margin:0 0 10px 0; font-family:Montserrat; font-size:16px; font-weight:300; color:#501C80; }





/*=============================================
FOOTER
=============================================*/
footer{ position:sticky; top:100%; display:block; height:auto; padding:40px 20px; margin:0; margin-top:60px; background-color:white; border-top:1px solid #ee0979; 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:#ee0979; font-family:Montserrat; font-size:16px; font-weight:400; }
footer .footer-infos p a{ color:#ee0979; }
footer .footer-links{ text-align:center; margin-bottom:0; }
footer .footer-links a{ position:relative; display:inline; height:auto; margin:0 10px; color:#ee0979; font-family:Montserrat; font-size:16px; font-weight:400; white-space:nowrap; }