.header
{
    height: 5%;
    width: 100%;
   /* background-color: #00438a;*/
   background-color: #6C1077;
   position:relative;
   z-index: 1;
}
.bodyContent
{
    background-color: #4E004E;
    /*background-color: #0059b8;*/
    height: 90%;
    width: 100%;
    z-index: 0;
    position: relative;
    background: linear-gradient(to bottom,rgba(78,0,78,0.9), rgba(78,0,78,0.9)),url("../img/logo/logogrand.png");
    background-size: 100%;
    background-repeat: no-repeat;
    
}
@media only screen and (min-width: 993px) {
.body
{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #4E004E;
   /* background-color: #0059b8; */
}
}
@media only screen and (max-width: 992px) {
  .body
    {
        
        width: 100%;
        overflow-y: hidden;
        background-color: #4E004E;

    }
   .menu 
   {
     visibility: hidden;
   } 
}
@media only screen and (min-width: 993px) {
.allnomenu
{
  /*  padding-left: min(70px,5%); */
  padding-left: 5%;
}
}
@media only screen and (max-width: 992px) {
  .allnomenu
  {
    /*  padding-left: min(70px,5%); */
    /*padding-left: 5%;*/
  }
}
@media only screen and (min-width: 993px) {
  .footer
  {
      position :relative;
      height: 5%;
      width: 100%;
      background-color: #6C1077;
  }
}
@media only screen and (max-width: 992px) {
  .footer
  {
      position :relative;
      height: 5%;
      width: 100%;
      background-color: #6C1077;
      display:flow-root;
  }
}
.game
{
    height: 100%;
    width: 100%;
}
@media only screen and (min-width: 993px) {
  .playertwitch
  {
      height: 50%;
      width: 80%;
      position: relative;
      z-index: 1;
      display: inline;
      float: left;
  }
}
@media only screen and (max-width: 992px) {
  .playertwitch
  {
      height: 50%;
      width: 100%;
      position: relative;
      z-index: 1;
      display: inline;
      float: left;
  }
}
@media only screen and (min-width: 993px) {
  .letchat
  {
      height: 50%;
      width: 20%;
      position: relative;
      z-index: 1;
      display: inline;
      float: left;
  }
}
@media only screen and (max-width: 992px) {
  .letchat
  {
     height: 0px;
      width: 0px;
      visibility: hidden;
  }

} 
@media only screen and (min-width: 993px) {
  .lescartonloto
  {
      height: 100%;
      width: 90%;
      position: relative;
      float: left;
      padding-left: 1.5%;
  }
}
@media only screen and (max-width: 992px) {
  .lescartonloto
  {

      width: 100%;
      position: relative;
      float: left;
      padding-left: 1.5%;
  }
}
@media only screen and (min-width: 993px) {
  .dimensionCarton
  {
      height: 49%;
    /*display: inline-block;*/
      display: inline-flex;
      align-items: center;
      width:49%;
      margin-block: 2px;
      /*border: 1px solid black;*/
  }
}
@media only screen and (max-width: 992px) {
  .dimensionCarton
  {
      height: 25%;
    /*display: inline-block;*/
      /*display: inline-flex;*/
      align-items: center;
      /*width:49%;*/
      margin-block: 2px;
      /*border: 1px solid black;*/
  }
}
.taillecol
{
    width:11%;
    height: 33%;
    background-color :white;
    border: 1px dashed #6C1077;
}

.pionrond{
   border-radius: 100%; 
   /*background-color: white;*/
   height: 100%;
   width:  100%;
   color:black;
}
.pionrond:hover{

    border-radius: 100%; 
    background-color: #00438a;
    height: 100%;
    width:  100%;
    opacity: 0.5;
 }
 @media only screen and (min-width: 993px) {
    .dimTableCarton
    {
        width: 95%;
        height: 100%;
        border: 1px solid black;
    }
 }
 @media only screen and (max-width: 992px) {
  .dimTableCarton
  {
      width: 95%;
      height: 100%;
      border: 1px solid black;
      display:inline-table;
  }

 }
.pionrondAffiche{

    border-radius: 100%; 
    background-color: #023062 !important;
    height: 100%;
    width:  100%;
    opacity: 0.5;
    color:white;
    
 }
 @media only screen and (min-width: 993px) {
 .LesChiffresCartons
 {
    position:relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2vw;
 }
}
@media only screen and (max-width: 992px) {
  .LesChiffresCartons
 {
    position:relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 3vw;
 }
}
 @media only screen and (min-width: 993px) {
  .refreshCarton {
      position:relative;
      bottom:  35%;
      
      width: 5%;
      height: 15%; 
      text-align: center;
      color: #fff;
      
      border-radius: 80%;
      background-color: #00D0FE;
      background-image: linear-gradient(to top left,
                                        rgba(0, 0, 0, .2),
                                        rgba(0, 0, 0, .2) 30%,
                                        rgba(0, 0, 0, 0));
  }
}
@media only screen and (max-width: 992px) {
  .refreshCarton {
    float :right;
    top:1px;
    
    width: 5%;
    height: 15%; 
    text-align: center;
    color: #fff;
    
    border-radius: 80%;
    background-color: #00D0FE;
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    display: inline;
}


}  
.syncbouton
{ 
    color: white;
    width: 100% ;
    height: 100% ; 
    transition: transform .7s ease-in-out;
}
.syncbouton:hover {
    transform: rotate(360deg);
  }
.etoilebingo
{
    width: 100% ;
    height: 100% ; 
    float:right
}
@media only screen and (min-width: 993px) {
  .adbasdroite
  {
    float:right;
  } 
}
  @media only screen and (max-width: 992px) {
    .adbasdroite
    {
      display:none;
    }
  }
@media only screen and (min-width: 993px) {
  .btnbingo
  {
      width: 10% ;
      height: 30% ; 
      position:relative;
      top: 35%;
      background-color: Transparent;
      background-repeat:no-repeat;
      border: none;   
      transition: transform .7s ease-in-out;
  }
}
@media only screen and (max-width: 992px) {
  .btnbingo
  {
      width: 300px ;
      height: 300px ; 
      background-color: Transparent;
      background-repeat:no-repeat;
      border: none;   
      transition: transform .7s ease-in-out;
      float:right;
     /* left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
  }
}
.btnbingo:hover {
    transform: rotate(720deg);
  }
  @media only screen and (min-width: 993px) {
    .basecran
    {
        width: 100% ;
        height: 50% ; 
        position: relative;
        float: right;
    }
  }
  @media only screen and (max-width: 992px) {
    .basecran
    {
        width: 100% ;
        height: 50% ; 
        display:contents;
    }
  }
/*.BingoTxtbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: x-large;
  }*/
.footertext
{
    position: relative;
    color :white;
    top: 50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align:center;
    font-size: 1vw;
}
.modal {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .modal[open] {
    display: flex;
  }
  .model-inner {
    background-color: white;
    border-radius: 0.5em;
    max-width: 600px;
    padding: 2em;
    margin: auto;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid black;
  }
  #modal-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: black;
    opacity: 0.5;  
  }  
  .fb-login-button{
    /*bottom: 0%;
    left: 50%;
    position: absolute;*/
    /*transform: translate(-50%, -50%);*/
  }
  .compte{
    position: absolute;
    
    top:  50%;
    left: 50%;
    width : 450px;
    text-align: left;
    align-content: center;
    color:white;
    transform: translate(-50%, -50%);
  }
  .saisie{
    width: 100%;
  }
  .buttoncompte {
    background-color: #555555; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    position:absolute;
    left: 50%;
    transform: translate(-50%, 0px);

  }
  .logoBingo
  {
    
    left : 6%;
    top : 100%;
    width: 7%;
    height: 130%;
    min-width: 107px;
    min-height: 72px;
    max-width: 160px;
    max-height: 108px;
    z-index: 2;
  }

  .pointheader{
    position:relative;
    height: 100%;
    width: 20%;
    display: inline;
    float:right;
  }
  @media only screen and (min-width: 993px) {
  .taillelogo{
    position:relative;
    height: 100%;
    width: 80%;
    float :left;
    /*display: inline-flex;*/
  }
}
@media only screen and (max-width: 992px) {
  .taillelogo{
    position:relative;
    height: 100%;
    width: 20%;
    float :left;
    /*display: inline-flex;*/
  }
}
  .valeurpointheader
  {
    position:relative;
    height: 100%;
    width: 75%;
    font-size: 2vw;
    color: white;
    display: inline-block;
    text-align: right;
    vertical-align:middle;
  }
  .imagepoint
  {
    position:relative;
    height: 100%;
    width: 18%;
    display: inline-block;
  }
  @font-face {
    font-family: "FeelingGood";
    src: url("font/FeelingGood.woff");
    
  }
  .modalBingo
  {
    border-radius: 20px;
    color: white;
    background-color: #4E004E;
    font-family: "FeelingGood";
    position :relative;
    max-width : 100% !important;
    min-width : 450px !important;
    height: 300px;
  }
  .interieurmodal
  {
    
    /*width: 50%;*/
    
  }
  .modalgauche
  {
    position: absolute;
    top:30%;
    left: -10%;
    height: 150px;
    width: 150px;
  }
  .modaldroite
  {
    position: absolute;
    top:30%;
    right: -10%;
    height: 150px;
    width: 150px;
  }
  .modalhaut
  {
    position: absolute;
    top:-35%;
    left :50%;
    height : 200px;
    width: 250px;
    margin-left: -125px;
  }
  .modalbas
  {
    position: absolute;
    border-radius: 50px;
    color: white;
    background-color: #6C1077;
    height : 55px;
    width: 240px;
    bottom: -10%;
    left :50%;
    margin-left: -120px;
    font-size: 3vw;
    line-height :0px;

  }
.modaltext
{
  text-align: center;
  margin :75px;
}
.boutonmodal
  {
    position: relative;
    border-radius: 50px;
    color: white;
    background-color: #6C1077;
    height : 55px;
    width: 430px;
    left :50%;
    margin-left: -215px;
    font-size: 2vw;
    line-height :0px;
    font-family: "FeelingGood";
  }
  .hautmodalconnexionbtn
{
  border-bottom: 1px solid black;
  padding: 1rem 1rem;
}
@media only screen and (min-width: 993px) {
  .menusmartphone
  {
      display: none;
  }
  .boutonmenu
  {
    display: none;
  }
}
@media only screen and (max-width: 992px) {
  .menusmartphone
  {
      width: 60%;
      float:left;
  }
  .boutonmenu
  {
    float:left;
    position: relative;
    border-radius: 50px;
    color: white;
    background-color: #6C1077;
    height : 100%;
    width: 25%;
    
    font-size: 2vw;
    line-height :1;
    
  }
}