html{
overflow-x:hidden !important;
}
body {
font-family: 'Noto Sans Display', sans-serif;
}
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #3e93f2;
    overflow: hidden;
	z-index: -1;
}

.background span {
    width: 40vmin;
    height: 40vmin;
    border-radius: 40vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 18;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #1e71ee;
    top: 10%;
    left: 49%;
    animation-duration: 34s;
    animation-delay: -317s;
    transform-origin: 14vw 0vh;
    box-shadow: 80vmin 0 10.507212200585148vmin currentColor;
}
.background span:nth-child(1) {
    color: #6da3f3;
    top: 21%;
    left: 31%;
    animation-duration: 15s;
    animation-delay: -17s;
    transform-origin: -16vw 20vh;
    box-shadow: -80vmin 0 10.529365218212448vmin currentColor;
}
.background span:nth-child(2) {
    color: #3882ef;
    top: 8%;
    left: 92%;
    animation-duration: 244s;
    animation-delay: -60s;
    transform-origin: 23vw 5vh;
    box-shadow: -80vmin 0 10.849891866226224vmin currentColor;
}
.background span:nth-child(3) {
    color: #1e71ee;
    top: 5%;
    left: 52%;
    animation-duration: 157s;
    animation-delay: -35s;
    transform-origin: -8vw 7vh;
    box-shadow: -80vmin 0 10.553556440771498vmin currentColor;
}
.background span:nth-child(4) {
    color: #3882ef;
    top: 32%;
    left: 95%;
    animation-duration: 65s;
    animation-delay: -251s;
    transform-origin: -24vw -20vh;
    box-shadow: 80vmin 0 10.356313407750495vmin currentColor;
}
.background span:nth-child(5) {
    color: #1e71ee;
    top: 97%;
    left: 32%;
    animation-duration: 184s;
    animation-delay: -100s;
    transform-origin: -9vw 22vh;
    box-shadow: -80vmin 0 10.69400692505683vmin currentColor;
}
.background span:nth-child(6) {
    color: #6da3f3;
    top: 39%;
    left: 24%;
    animation-duration: 95s;
    animation-delay: -25s;
    transform-origin: 7vw -7vh;
    box-shadow: 80vmin 0 10.048341003052212vmin currentColor;
}
.background span:nth-child(7) {
    color: #1e71ee;
    top: 52%;
    left: 8%;
    animation-duration: 35s;
    animation-delay: -60s;
    transform-origin: 9vw 19vh;
    box-shadow: 80vmin 0 10.18687745190556vmin currentColor;
}
.background span:nth-child(8) {
    color: #3882ef;
    top: 24%;
    left: 98%;
    animation-duration: 34s;
    animation-delay: -224s;
    transform-origin: -23vw -14vh;
    box-shadow: 80vmin 0 10.768058064309772vmin currentColor;
}
.background span:nth-child(9) {
    color: #3882ef;
    top: 17%;
    left: 66%;
    animation-duration: 267s;
    animation-delay: -176s;
    transform-origin: -16vw 15vh;
    box-shadow: 80vmin 0 10.173638020567562vmin currentColor;
}
.background span:nth-child(10) {
    color: #1e71ee;
    top: 75%;
    left: 7%;
    animation-duration: 10s;
    animation-delay: -147s;
    transform-origin: 23vw -9vh;
    box-shadow: 80vmin 0 10.996732255254665vmin currentColor;
}
.background span:nth-child(11) {
    color: #1e71ee;
    top: 34%;
    left: 34%;
    animation-duration: 278s;
    animation-delay: -30s;
    transform-origin: 1vw -1vh;
    box-shadow: 80vmin 0 10.982590090847776vmin currentColor;
}
.background span:nth-child(12) {
    color: #3882ef;
    top: 5%;
    left: 53%;
    animation-duration: 286s;
    animation-delay: -7s;
    transform-origin: -16vw 18vh;
    box-shadow: 80vmin 0 10.850883844554163vmin currentColor;
}
.background span:nth-child(13) {
    color: #3882ef;
    top: 29%;
    left: 28%;
    animation-duration: 254s;
    animation-delay: -311s;
    transform-origin: 23vw 8vh;
    box-shadow: 80vmin 0 10.421325452640179vmin currentColor;
}
.background span:nth-child(14) {
    color: #6da3f3;
    top: 81%;
    left: 72%;
    animation-duration: 30s;
    animation-delay: -280s;
    transform-origin: 18vw 18vh;
    box-shadow: -80vmin 0 10.543594336028905vmin currentColor;
}
.background span:nth-child(15) {
    color: #1e71ee;
    top: 35%;
    left: 63%;
    animation-duration: 166s;
    animation-delay: -240s;
    transform-origin: -14vw -23vh;
    box-shadow: 80vmin 0 10.506995103639195vmin currentColor;
}
.background span:nth-child(16) {
    color: #6da3f3;
    top: 59%;
    left: 33%;
    animation-duration: 178s;
    animation-delay: -154s;
    transform-origin: -15vw 14vh;
    box-shadow: -80vmin 0 10.084414433865266vmin currentColor;
}
.background span:nth-child(17) {
    color: #3882ef;
    top: 59%;
    left: 21%;
    animation-duration: 30s;
    animation-delay: -232s;
    transform-origin: -19vw 12vh;
    box-shadow: -80vmin 0 10.957384731926318vmin currentColor;
}
.background span:nth-child(18) {
    color: #1e71ee;
    top: 18%;
    left: 77%;
    animation-duration: 258s;
    animation-delay: -236s;
    transform-origin: 8vw 11vh;
    box-shadow: -80vmin 0 10.938596122846466vmin currentColor;
}
.background span:nth-child(19) {
    color: #1e71ee;
    top: 66%;
    left: 49%;
    animation-duration: 76s;
    animation-delay: -197s;
    transform-origin: 0vw 5vh;
    box-shadow: -80vmin 0 10.209050797952523vmin currentColor;
}
.background span:nth-child(20) {
    color: #1e71ee;
    top: 89%;
    left: 19%;
    animation-duration: 274s;
    animation-delay: -264s;
    transform-origin: 13vw 5vh;
    box-shadow: -80vmin 0 10.586758538165542vmin currentColor;
}
.background span:nth-child(21) {
    color: #6da3f3;
    top: 84%;
    left: 43%;
    animation-duration: 208s;
    animation-delay: -280s;
    transform-origin: 23vw 21vh;
    box-shadow: 80vmin 0 10.682262706602803vmin currentColor;
}
.background span:nth-child(22) {
    color: #3882ef;
    top: 77%;
    left: 29%;
    animation-duration: 182s;
    animation-delay: -138s;
    transform-origin: 18vw -13vh;
    box-shadow: -80vmin 0 10.154308789085668vmin currentColor;
}
.background span:nth-child(23) {
    color: #3882ef;
    top: 55%;
    left: 43%;
    animation-duration: 90s;
    animation-delay: -196s;
    transform-origin: 7vw 0vh;
    box-shadow: -80vmin 0 10.695056078979697vmin currentColor;
}
.background span:nth-child(24) {
    color: #6da3f3;
    top: 93%;
    left: 19%;
    animation-duration: 215s;
    animation-delay: -150s;
    transform-origin: -24vw -12vh;
    box-shadow: 80vmin 0 10.321028789677783vmin currentColor;
}
.background span:nth-child(25) {
    color: #3882ef;
    top: 16%;
    left: 11%;
    animation-duration: 223s;
    animation-delay: -262s;
    transform-origin: -3vw -17vh;
    box-shadow: -80vmin 0 10.837629798341192vmin currentColor;
}
.background span:nth-child(26) {
    color: #6da3f3;
    top: 18%;
    left: 58%;
    animation-duration: 213s;
    animation-delay: -191s;
    transform-origin: 6vw -13vh;
    box-shadow: 80vmin 0 10.814707379156516vmin currentColor;
}
.background span:nth-child(27) {
    color: #1e71ee;
    top: 56%;
    left: 3%;
    animation-duration: 290s;
    animation-delay: -280s;
    transform-origin: 22vw 1vh;
    box-shadow: -80vmin 0 10.531319149647919vmin currentColor;
}
.background span:nth-child(28) {
    color: #3882ef;
    top: 65%;
    left: 50%;
    animation-duration: 276s;
    animation-delay: -12s;
    transform-origin: -18vw 10vh;
    box-shadow: -80vmin 0 10.636858683102133vmin currentColor;
}
.background span:nth-child(29) {
    color: #1e71ee;
    top: 28%;
    left: 72%;
    animation-duration: 135s;
    animation-delay: -215s;
    transform-origin: 23vw -18vh;
    box-shadow: -80vmin 0 10.595081120950303vmin currentColor;
}
.background span:nth-child(30) {
    color: #1e71ee;
    top: 55%;
    left: 17%;
    animation-duration: 237s;
    animation-delay: -1s;
    transform-origin: -4vw 0vh;
    box-shadow: 80vmin 0 10.297529348638754vmin currentColor;
}
.background span:nth-child(31) {
    color: #6da3f3;
    top: 78%;
    left: 15%;
    animation-duration: 152s;
    animation-delay: -45s;
    transform-origin: 8vw -2vh;
    box-shadow: -80vmin 0 10.295658902175935vmin currentColor;
}
.background span:nth-child(32) {
    color: #1e71ee;
    top: 45%;
    left: 50%;
    animation-duration: 319s;
    animation-delay: -49s;
    transform-origin: -14vw -23vh;
    box-shadow: -80vmin 0 10.254198397779826vmin currentColor;
}
.background span:nth-child(33) {
    color: #3882ef;
    top: 91%;
    left: 4%;
    animation-duration: 251s;
    animation-delay: -5s;
    transform-origin: -5vw -11vh;
    box-shadow: 80vmin 0 10.57334787955831vmin currentColor;
}
.background span:nth-child(34) {
    color: #1e71ee;
    top: 91%;
    left: 28%;
    animation-duration: 218s;
    animation-delay: -297s;
    transform-origin: 11vw 7vh;
    box-shadow: -80vmin 0 10.553369431993216vmin currentColor;
}
.background span:nth-child(35) {
    color: #6da3f3;
    top: 66%;
    left: 50%;
    animation-duration: 111s;
    animation-delay: -75s;
    transform-origin: 25vw -13vh;
    box-shadow: 80vmin 0 10.433740441816694vmin currentColor;
}
.background span:nth-child(36) {
    color: #3882ef;
    top: 99%;
    left: 10%;
    animation-duration: 53s;
    animation-delay: -120s;
    transform-origin: 24vw 24vh;
    box-shadow: 80vmin 0 10.160278667265473vmin currentColor;
}
.background span:nth-child(37) {
    color: #6da3f3;
    top: 79%;
    left: 1%;
    animation-duration: 178s;
    animation-delay: -100s;
    transform-origin: -13vw -8vh;
    box-shadow: -80vmin 0 10.946251350514599vmin currentColor;
}
.background span:nth-child(38) {
    color: #1e71ee;
    top: 70%;
    left: 20%;
    animation-duration: 95s;
    animation-delay: -175s;
    transform-origin: -9vw -20vh;
    box-shadow: -80vmin 0 10.948316311082896vmin currentColor;
}
.background span:nth-child(39) {
    color: #1e71ee;
    top: 54%;
    left: 42%;
    animation-duration: 200s;
    animation-delay: -46s;
    transform-origin: -6vw -10vh;
    box-shadow: -80vmin 0 10.529923063671932vmin currentColor;
}
.background span:nth-child(40) {
    color: #3882ef;
    top: 17%;
    left: 15%;
    animation-duration: 109s;
    animation-delay: -246s;
    transform-origin: 24vw 23vh;
    box-shadow: 80vmin 0 10.9948165321702vmin currentColor;
}
.background span:nth-child(41) {
    color: #6da3f3;
    top: 38%;
    left: 55%;
    animation-duration: 321s;
    animation-delay: -168s;
    transform-origin: -2vw 18vh;
    box-shadow: -80vmin 0 10.998518346934572vmin currentColor;
}
.background span:nth-child(42) {
    color: #6da3f3;
    top: 20%;
    left: 78%;
    animation-duration: 286s;
    animation-delay: -53s;
    transform-origin: 6vw -1vh;
    box-shadow: 80vmin 0 10.808805909507953vmin currentColor;
}

.logo {
max-width: 350px;
}
.h1, h1 {
font-size: 1.8rem;
font-weight: 400;
}

h4, .h4 {
font-size: 1.8rem;
font-weight: 300;
}
.card {
background: none;
border: 0;
}
.profil {
max-width: 450px;
border: 3px solid #000;
margin: 30px 0;
}
.profil2 {
border: 3px solid #000;
margin: 30px 0;
}
.border-dark {
border: 2px solid #000 !important;
}
.text-dark {
color: #000 !important;
}
.btn-light {
font-size: 2.2rem;
margin: 0 auto;
width: 100%;
cursor: pointer !important;
max-width: 500px;
font-family: 'Bakbak One', Verdana, "sans-serif";
font-weight: bold;
}
.btn-light:hover {
background-color: #000;
color: #fff;
}
.rounded-pill {
border-radius: 2rem !important;
}
.font-size {
font-size: 2.5rem;
}
.text-warning {
text-shadow: 2px 2px 0px #000000;
}
.h1 {
font-family: 'Genos', sans-serif;
font-weight: 900;
font-size: 6rem;
text-shadow: 3px 3px 0px #ffffff;
margin-bottom: 30px;
line-height: 1;
}
h2, .h2 {
font-size: 1.75rem;
font-weight: 800 !important;
}

h3, .h3 {
font-size: 1.75rem;
font-weight: 500 !important;
}
.h5, h5 {
font-size: 1.8rem;
font-weight: 700;
}
.h6, h6 {
font-size: 1.3rem;
font-weight: 600;
}
.bg-warning {
border: 2px solid #000;
}
li {
font-size: 18px;
text-align: left;
font-weight: 300;
}
.bg-light {
background-color: #f8f9fa26 !important;
}
#form .form-control {
border-color: #cdcdcd;
height: 50px;
margin-left: -2px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
font-size: 16px;
}
.form-icon {
background-color: #efefef;
border: 1px solid #cdcdcd;
color: #000;
padding: 14px 14px 14px 18px;
font-size: 20px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
width: 30px;
}
.form-check-input:checked {
background-color: #000;
border-color: #fff;
}
#signup_cgu {
color: #000 !important;
}
label {
font-size: 13px;
}
.form-group {
max-width: 450px;
margin: 0 auto 20px;
}
.tab {
display: none;
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
background: #2dd7ed;
}
.step.finish {
background-color: #2dd7ed;
}
u {
color: #fff;
}
.col {
max-width: 800px;
}
.profil {
max-width: 430px;
}
.profil2 {
max-width: 650px;
}
.profil3 {
max-width: 520px;
margin: 20px 0;
}
/* Media Queries */
@media (max-width: 1680px){
.container {
padding: 0 !important;
}
.logo {
max-width: 150px;
}
.profil {
max-width: 220px;
margin: 5px 0;
}
.h1, h1 {
font-size: 1.2rem;
font-weight: 400;
}
h2, .h2 {
font-size: 1.3rem;
}
h3, .h3 {
font-size: 1.2rem;
letter-spacing: -1px;
}
h4, .h4 {
font-size: 1.1rem;
}
.h5, h5 {
font-size: 1.25rem;
}
.h6, h6 {
font-size: 1rem;
}
.lead {
font-size: .8rem;
}
.btn-light {
	font-size: 1.5rem;
	max-width: 350px;
}
.font-size {
font-size: 1.5rem;
font-weight: 800;
}
.h1 {
font-family: 'Genos', sans-serif;
font-weight: 900;
font-size: 3rem;
text-shadow: 3px 3px 0px #ffffff;
line-height: .9;
margin-bottom: 10px;
}
.profil2 {
max-width: 300px;
margin: 10px 0;
}
.profil3 {
max-width: 200px;
margin: 10px 0;
}
li {
font-size: .8rem;
}
p, .regles {
font-size: .8rem;
}
.text-warning {
text-shadow: none;
}
.form-group {
margin: 0 auto 10px;
	}



}

@media (max-width: 374px){
h2, .h2, h3, .h3 {
font-size: .9rem;
}
.btn-light {
font-size: 1.2rem;
}
.profil {
max-width: 180px;
margin: 5px 0;
}
.font-size {
font-size: 1.3rem;
}
.h1 {
font-size: 2.5rem;
}
li {
font-size: .7rem;
}
p, .regles {
font-size: .7rem;
}
.profil3 {
max-width: 200px;
}
}
















