@charset "utf-8";
*{margin:0; padding:0}
body {font: 24px 'Montserrat', sans-serif; color:#ffffff; line-height: 28px;display:flex;height:100vh;}
img {border: none;}
#cadre{margin:auto;cursor: pointer; position:relative; width:726px; height:88px; overflow:hidden; background:#ffffff; border:solid 1px #207cf3;
/*margin: auto;*/
}

#bleu1, #bleu2, #rouge1, #rouge2{position:absolute; width:200%; height:700%;}
#rouge1, #rouge2{opacity:0}
#txt1-1 span, #txt1-2 span, #txt1-3 span, #txt1-4 span, #txt5{font-size: 18px;}

#bleu1{background: #207cf3;transform:rotate(36deg); top: -100px; left: -100px;}
#rouge1{background: #ff3b3d;transform:rotate(36deg); top: 310px; left: -300px;}
#rouge2{background: #ff3b3d;transform:rotate(36deg); top: 310px; left: -300px;}
#bleu2{background: #207cf3;transform:rotate(36deg); top: -100px; left: -100px; opacity:0}
#jaune1{position:absolute;width:100%;height:100%;background: #ffb200;}

#txt1-1, #txt1-2, #txt1-3, #txt1-4, #txt2, #txt3, #txt4, #txt5{
  position:absolute; width:90%; height:100%; text-align:center; opacity:0; margin:0 5%;}

#txt1-1, #txt1-2, #txt1-3, #txt1-4{top: 14px; font-weight: 600;}
#txt1-1 span, #txt1-2 span, #txt1-3 span, #txt1-4 span{font-family: 'Oswald', sans-serif; font-weight:600;}
#txt2{top: 18px; font-weight: 600;}
#txt3{top: 45px;}
#txt4{top: 11px;}
#txt4 img, #logo img{max-width: 100%;}
#txt5{top: 57px; font-weight:600; }
#logo{position:absolute; width:100%; height: 100%; text-align: center; left: -34%; top: 50px; opacity:0}
#lien{font-size: 18px; color:#207cf3; position:absolute;width:100%; height:100%; text-align:center; top: 110px; opacity:0; font-weight:700;}
#btn{position:relative; width:22%; right: -33.8%; text-align:center; top: 130px; opacity:0; padding: 14px; margin: 0 auto; background: #207cf3; font-weight: 700; border-radius: 40px;}