* {
  margin: 0;
  padding: 0;
}
body{background:#efefef;margin:0;padding:0;color:#fff;font-family: Roboto, sans-serif;}
h1{font-weight:bold;}
h2{font-weight:normal;}
.mobile{display:none;}
.desktop{display:block;}
.g1-button{width:100%;
box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 16px 16px;
    height: 48px;
    position: relative;
    border-radius: 30px;
    border-color: #0000001f;
    border-width: 1px;
    border-style: solid;
    color: #000000;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-color: #efefef;
    box-shadow: 0;
    letter-spacing: 0.5px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    background-color: #26bc4d;
    border-color: #26bc4d;
    color: #ffffff;
    outline:none;
}
.g1-button.negative{background-color:#fff;color: #26bc4d;}


/* Conteneur principal */
.video-container {
    position: relative;
    width: 100vw;
    height: auto;
}

/* Vidéo pleine largeur */
.video-container video {
    width: 100%;
    height: auto;
}

/* Contenu par-dessus la vidéo */
.overlay-content {
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 2;
    position: absolute; 
  	text-align: center;
 	 width:35%;
    align-items: center;    
    flex-direction: column;
    display: flex;
    justify-content: center;
}
.overlay-content h1{font-size:3.5rem;font-weight:bold;}
.overlay-content h2{font-size:1.5rem;font-weight:normal;}
.overlay-content .button__container{margin-top:5%;}

/* Optionnel : assombrir légèrement la vidéo pour rendre le texte lisible 
.video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* filtre sombre
    z-index: 1;
} */

/* Bouton style simple 
.overlay-content button {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ff5722;
    color: white;
    border: none;
    cursor: pointer;
}*/

/*
.video-container {
  position: relative;
  height: 100vh; 

  /*width: 99vw;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;

}

.video-container video {
  position: absolute;
 width: 100%;
    height: 100%; 
    object-fit: cover;

  /*width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index : -1;
}
*/




.blackText{color:#000;}
.whiteText{color:#fff;}

header{height:auto;background:#fff;display: flex;flex-direction:row;}
header .headerLogo{width:auto;margin:0 0 0 50px}
header .headerLogo .logo{background:no-repeat url("Circus-Casino.png");width:150px;height:80px;background-size:contain;display:block}
header .headerButton{display: flex;flex-direction:row-reverse;width:100%;margin:20px 50px 0 0;gap: 0 2%;}
header .headerMenu{display: flex;flex-direction:row;width:50%;margin:20px 0 0 50px;gap: 0 5%;}
header .headerMenu a{color:#000;text-decoration:none;font-size: .875rem;font-weight: 500;;text-transform: uppercase;line-height: 3.5rem;}
header .headerMenu a:hover{color:#e02125;}

main{/*background:no-repeat url("Desktop.png") center top;background-size: cover;*/overflow:hidden;}

.ctaApp{display: flex;flex-direction: row;width: 200px;float: left;text-align:center;justify-content: center;}

.stepBox{width:65%;display: flex;flex-direction:row;justify-content:space-around;gap:0%;padding: 2%;text-align:center;margin:-10% auto 0;position:relative;z-index:1000;}
.stepBox .stepsArrow{width:4%;color:#e02125;display: flex;flex-direction:row;flex-wrap:wrap;align-items:center;font-size: 65px;padding: 0 1%;font-weight: 100;}
.stepBox .steps{width:30%;background:#fff;display: flex;text-align:center;flex-direction:row;flex-wrap:wrap;align-items:center;border: 1px solid #e02125;border-radius:20px;padding: 2%;-webkit-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);-moz-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);}
.stepBox .steps .nbre{font-size:38px;width:45px;border-radius:45px;border:1px solid #e02125;color:#000;background:#fff;text-align:center;margin:-20% 40% 0;-webkit-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);-moz-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5)}
.stepBox .steps a{text-decoration:none;text-align:center;}
.stepBox .steps h3.stepTitle,.stepBox .steps .stepTxt{display:contents}
.stepBox .steps h3.stepTitle a{font-size:35px;width:100%;color:#000;}
.stepBox .steps .stepTxt a{font-size:16px;width:100%;color: #000;}

.contentBox{width:96%;display: flex;flex-direction:row;justify-content:space-around;gap:0%;padding: 2%;text-align:center;margin:0 auto;position:relative;z-index:1000;}
.contentBox .box{width:25%;background:#f4f4f4;display: flex;text-align:center;flex-direction:row;flex-wrap:wrap;align-items:center;border: 1px solid #e02125;border-radius:20px;padding: 2%;-webkit-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);-moz-box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);box-shadow: -3px 3px 0px -1px rgba(0,0,0,0.5);}
.contentBox .box a{text-decoration:none;text-align:center;}
.contentBox .box h3.boxTitle,.contentBox .box .boxTxt{display:contents}
.contentBox .box h3.boxTitle a{font-size:30px;width:100%;color:#000;}
.contentBox .box .boxTxt a{font-size:14px;width:100%;color: #000;line-height:18px;}

.disclaimer p{font-size:0.7rem;color:#fff;padding:1%;}
.disclaimer p a{font-size:0.7rem;color:#fff;text-decoration:none;}

footer{container-type: inline-size;padding: 0px 16px;background-color: rgb(29, 29, 29);}

footer .LogoFooterContainer {
    padding: 0px;
    height: 96px;align-items: center;
    justify-content:flex-start;
    overflow: auto;
    display:flex;
	flex-direction: row;
}

footer .LogoFooterContainer img{height: 40px;margin-right:20px}
footer .LogoFooterContainer .terms{flex-direction: row;gap: 32px;font-size:11px;}
footer .LogoFooterContainer .terms a{color:#e02125;}

footer .terms__container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: inherit;
    gap: 24px;
    margin-top: 0px;
    margin-top: 24px;
    margin-bottom: 24px;
    justify-content: center;
}
footer .terms__container a{
	font-size: 16px;
    text-decoration: underline;
    color: rgb(255, 255, 255);
    opacity: 0.6;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
}
footer .age__container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: inherit;
    margin-top: 0px;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 24px;
    justify-content: center;
}
footer .age__container a{
	font-size: 16px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    opacity: 0.6;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
}
.FooterLegalImagesContainer {
    display:flex;
    min-width: 240px;
    flex: 1 1 0px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px 16px;
    flex-flow: wrap;
    gap: 24px;
    align-self: stretch;
    justify-content: space-around;
    margin-top: 0px;
    flex-basis: 100%;
    margin: 24px 0;
}
.payment__container {
    min-width: 240px;
    flex: 1 1 0px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px 16px;
    flex-flow: wrap;
    gap: 24px;
    align-self: stretch;
    justify-content: space-around;
    margin-top: 0px;
}
.WalletsWrapper {
    display: flex;
    width: 100%;
    margin: 0px auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

.partners__container{margin:0 auto;}

.animated-button{-webkit-transform:translate(0%,0%);transform:translate(0%,0%);overflow:hidden;-webkit-box-shadow:0 20px 50px rgba(0,0,0,0.5);box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.animated-button::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;-webkit-transition:.2s opacity ease-in-out;transition:.2s opacity ease-in-out}
.animated-button:hover::before{}
.animated-button span{position:absolute}
.animated-button span:nth-child(1){top:0;left:0;width:100%;height:3px;background:-webkit-gradient(linear,right top,left top,from(rgba(255,255,255,0)),to(#fff));background:linear-gradient(to left,rgba(255,255,255,0),#fff);-webkit-animation:2s animateTop linear infinite;animation:2s animateTop linear infinite}
@-webkit-keyframes animateTop {
0%{-webkit-transform:translateX(100%);transform:translateX(100%)}
100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
}
@keyframes animateTop {
0%{-webkit-transform:translateX(100%);transform:translateX(100%)}
100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
}
.animated-button span:nth-child(2){top:0;right:0;height:100%;width:3px;background:-webkit-gradient(linear,left bottom,left top,from(rgba(255,255,255,0)),to(#fff));background:linear-gradient(to top,rgba(255,255,255,0),#fff);-webkit-animation:2s animateRight linear -1s infinite;animation:2s animateRight linear -1s infinite}
@-webkit-keyframes animateRight {
0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
100%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
@keyframes animateRight {
0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
100%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
}
.animated-button span:nth-child(3){bottom:0;left:0;width:100%;height:3px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(#fff));background:linear-gradient(to right,rgba(255,255,255,0),#fff);-webkit-animation:2s animateBottom linear infinite;animation:2s animateBottom linear infinite}
@-webkit-keyframes animateBottom {
0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}
}
@keyframes animateBottom {
0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}
}
.animated-button span:nth-child(4){top:0;left:0;height:100%;width:3spx;background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(#fff));background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);-webkit-animation:2s animateLeft linear -1s infinite;animation:2s animateLeft linear -1s infinite}
@-webkit-keyframes animateLeft {
0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
100%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}
@keyframes animateLeft {
0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
100%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}


.videoHOR1{display:block}
.videoHOR2{display:none}
.videoSQR{display:none}
.videoVER{display:none}

@media (max-width: 1500px) {
    .videoHOR1{display:none}
    .videoHOR2{display:block}
    .videoSQR{display:none}
    .videoVER{display:none}
}
@media (max-width: 1080px) {
    .videoHOR1{display:none}
    .videoHOR2{display:none}
    .videoSQR{display:block}
    .videoVER{display:none}
    .overlay-content{top:25%;left:50%;width:80%}
}


@media (max-width: 767px) {
    
    .videoHOR1{display:none}
    .videoHOR2{display:none}
    .videoSQR{display:none}
    .videoVER{display:block}
    
    .g1-button{height: 2rem}
    
    .overlay-content{top:20%;left:50%;width:80%}
    .overlay-content h1{font-size:2rem;}
    
	.stepBox h2{font-size:1.5rem;text-align: center;font-weight: 400;padding: 5%;color:#000;margin: 0 0 10% 0;}
    
    .stepBox{flex-direction:column;padding:5%;width:70%;}
    .stepBox .steps{width:100%;margin: 0 0 10% 0;}
    .stepBox .steps .nbre{font-size:30px;width:40px;margin:-10% 40% 0;}
    .stepBox .steps .stepTitle a{font-size:25px;}
    .stepBox .stepsArrow{display:none;}
    .stepBox .button__container{margin-bottom:15%;}
    
    .contentBox{flex-direction:column;padding:10%;width:80%;}
    .contentBox .box{width:90%;margin: 0 0 15% 0;padding:5%}
    .contentBox .box h3.boxTitle a{font-size:25px;}

    header{flex-direction: column;align-items: center;justify-content: center;padding: 0 0 3% 0;}
    header .headerLogo{margin: 20px 0 0;width: auto;}
    header .headerButton{margin:0; width:100%;align-items: center;justify-content: center;}
    header .headerMenu{margin:0; width:100%;align-items: center;justify-content: center;line-height: 2.5rem;}
    
    .mobile{display:inline;}
    .desktop{display:none;}
    
    .disclaimer{text-align:center;}
    
    footer .top__container .wrapper img{width:100%}
	footer .top__container .wrapper p{width:100%;line-height:initial;margin:1rem 0 0 0}
    footer .bottom__container .age__container img{margin: -0.5rem 0.75rem 0;}
    
}