body{
  position: relative;
  display: flex;
  min-height: 100vh;
  /* background-image: url(../img/background/background.jpg); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

body .background{

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content:url("../../../application/assets/img/app/pc0.jpg");
}


.pro{
position: absolute;
top: 33%;
left: 50%;
width: 400px;
height:99px;
background-image: url('../img/app/programme.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}


.poster{
  
  position: absolute;

  top: 36%;
  left: 61%;
  width: 421px;
  height: 132px;
background-image: url('../img/app/programme\ copy.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}



.live{
  position: absolute;
  top: 21%;
  left: 57%;
  width: 565px;
  height: 138px;
  background-image: url(../img/re.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


.acc{
  position: absolute;
  top: 36%;
  left: 61%;
  width: 421px;
  height: 132px;
  background-image: url(../img/acc.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  }


.poster1{
  position: absolute;
  top: 33%;
  left: 61%;
  width: 425px;
  height: 186px;
background-image: url(../img/1.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
  }
  
  
  .poster2{
    position: absolute;
    top: 73%;
    left: 60%;
    width: 400px;
    height: 99px;
    background-image: url(../img/1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }





@media (max-width: 992px) {

  body .background{
    content:url("../img/app/pc0.jpg");
}
.pro{
  top: 60%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
}

.poster{
  top: 56%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
}
.live{
  top: 46%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
}

.acc{
  top: 60%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
}

.poster1{
  top: 73%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
  }
  
  
  .poster2{
    
    top: 86%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
  }

}



.content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 
}



@media screen and (max-width: 992px){
.content{
  flex-direction: column;
      width: 100%;
}
body .background{
  content:url("../img/app/tele0.jpg");
}
.pro{
top: 60%;
left: 58%;
transform: translate(-57%);
width: 300px;
height: 75px;
}

.poster{
  top: 56%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
}
.live{
  top: 15%;
  left: 49%;
transform: translate(-57%);
width: 300px;
height: 75px;
}


.acc{
  top: 60%;
  left: 58%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
  }
  
  .poster1{
    top: 23%;
    left: 51%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
  }
  .poster2{
    top: 23%;
    left: 51%;
  transform: translate(-57%);
  width: 300px;
  height: 75px;
  }


}



/* =========================================== */
    
.glightbox-clean .gnext,.glightbox-clean .gprev{

  top: 50%;

  display: flex;

}
.listliks {

position: absolute;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

top: 20vh;
left: 57vw;
width: 300px;
}

.listliks {
    top: 10vw;
    left: 40vw;
}
.listliks li a img {
    width: 15vw;
}

.listliks {
    top: 10vw;
    left: 50vw;
}
.listliks li a img {
    width: 20vw;
}


.listliks {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  top: 20vh;
  left: 57vw;
  width: 200px;
}
.listliks {
  top: 25vh;
  left: 60vw;
}
.listliks li a img {
  width: 24vw;
}
/* web */ 
    
    
    
.listliks li {

flex: 0 0 calc(33.33% - 10px);

margin-bottom: 20px;

list-style: none;

}
.listliks li a {

display: block;

text-align: center;

width: 25vw;
}
.listliks li img {

width: 100%;

height: auto;

}
/* Responsive Styles */

@media (max-width: 992px) {

.listliks {

  position: absolute;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

top: 10vh;
left: 0vw;
width: 70vw;
}


                
            .listliks {
                top: 60vh;
                left: 8vw;
            }
            .listliks li a img {
                width: 55vw;
            }

                /* mobile */ 
                
                
                
.listliks li a {

width: 70vw;

}
.listliks li {

flex-basis: calc(50% - 10px);

}
}


@media (max-width: 480px) {

.listliks li {

flex-basis: 100%;

}


}