.boobycam-banner{
    /*max-width:768px;*/
    max-width:816px;
    max-height: 80px;
    margin:0 auto;
    overflow:hidden;
    padding: 0.5em 1.5em;

    display: grid;
    align-items: center;
    justify-content:center;

    grid-column-gap:2.5em;
    grid-template-columns: 90px repeat(7, minmax(0, 1fr));
    width: 100%;

    font-family: "Inter", "Arial", Sans-Serif;
}


.boobycam-banner, .boobycam-banner *, .boobycam-banner ::after, .boobycam-banner ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.boobycam-banner img {    
    border-style: none;
    height: auto;
    max-width: 100%;
}

.boobycam-banner .boobycam-wrapper-profil{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.15em;
    text-decoration:none;
    margin:0;
	position:relative;
}
.boobycam-banner .boobycam-wrapper-profil .boobycam-conteneur-rainbow{
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius:100%;
    width:100%;
    aspect-ratio: 1 / 1;
 }
.boobycam-banner .boobycam-wrapper-profil img{
    width:90%;
    aspect-ratio: 1 / 1;
    border-radius:100%;
    object-fit:cover;
    object-position:center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
 }
.boobycam-banner .boobycam-wrapper-profil p{
    margin:0;
    font-size:0.5em;
    color:#FFF;
    text-align: center;
	white-space: nowrap;
 }
.boobycam-banner .boobycam-wrapper-profil:hover{
    opacity:0.8;
 }
 
.boobycam-banner .boobycam-wrapper-profil .voyant{
	display: block;
	height: 14px;
	width: 14px;
	background: #00F908;
	position: absolute;
	bottom: 23%;
	border-radius: 100%;
	right: 6%;
	border: 100%;
	animation-duration: 1.2s;
	animation-name: blink;
	animation-iteration-count: infinite;
	transition: none;
	z-index: 100;
	animation-timing-function: step-end;
	border: 2px solid #161834;
}

@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}

 @media screen and (max-width: 768px) {
    .boobycam-banner{
        max-height: none;
        grid-column-gap:1.5em;
        justify-content:flex-start;
        grid-template-columns: 70px repeat(7, minmax(0, 1fr));
        padding: 0.5em 1em;
    }
    .boobycam-banner .boobycam-wrapper-profil{
        gap:0.3em;
    }
 }
 @media screen and  (max-width: 668px) {   
    .boobycam-banner{        
        grid-template-columns: 70px repeat(6, minmax(0, 1fr));
    }   
    .boobycam-banner .boobycam-wrapper-banner:nth-child(7) ~  .boobycam-wrapper-banner{
       display: none
    }
 }
 @media screen and  (max-width: 568px) {     
    .boobycam-banner{        
        grid-template-columns: 70px repeat(5, minmax(0, 1fr));
    }   
    .boobycam-banner .boobycam-wrapper-banner:nth-child(6) ~  .boobycam-wrapper-banner{
       display: none
    }
    .boobycam-banner .boobycam-wrapper-profil p {
        font-size: 0.4em;
    }
 }
 @media screen and  (max-width: 368px) {      
    .boobycam-banner{        
        grid-template-columns: 70px repeat(4, minmax(0, 1fr));
    }   
    .boobycam-banner .boobycam-wrapper-banner:nth-child(5) ~  .boobycam-wrapper-banner{
       display: none
    }
 }
 @media screen and  (max-width: 320px) {      
    .boobycam-banner{        
        grid-template-columns: 70px repeat(3, minmax(0, 1fr));
    }   
    .boobycam-banner .boobycam-wrapper-banner:nth-child(4) ~  .boobycam-wrapper-banner{
       display: none
    }
 }







/*  ------------------
Banner Full Height 
------------------ */
.boobycam-banner.full-height{
    height: 60px;
    padding:0 ;
    grid-column-gap: 0;

    grid-template-columns: 3.75em repeat(7, minmax(0, 1fr));
 }
.boobycam-banner.full-height .boobycam-wrapper-banner ~ .boobycam-wrapper-banner{
   display: block;
    height: 100%;
}
.boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(8) ~  .boobycam-wrapper-banner{
   display: none
}

.boobycam-banner.full-height .boobycam-logo{
    text-decoration: none;
    padding: 0;
    text-align: center;
 }
.boobycam-banner.full-height .boobycam-logo img{
    width: 2.438em;
 }
.boobycam-banner.full-height .boobycam-logo span{
    font-size: 0.75em;
    color: #00FF19;
    font-weight: bold;
    display: block;
 }

 .boobycam-banner.full-height .boobycam-wrapper-profil .boobycam-conteneur{

    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius: 0;
    width: 100%;
    height: 100%;
 }

 .boobycam-banner.full-height .boobycam-wrapper-profil .boobycam-conteneur:after {
    display: block;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.5);
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    z-index: 80;
 }
 .boobycam-banner.full-height .boobycam-wrapper-profil img{
    width: 100%;
    height: 100%;
    aspect-ratio:auto; 
    border-radius: 0;
 }
 .boobycam-banner.full-height .boobycam-wrapper-profil p{
    position: absolute;
    z-index: 100;
    bottom: 3%;
    left: 0;
    right: 0;
    overflow: hidden;
    padding: 0 3px;
 }
 .boobycam-banner.full-height .boobycam-wrapper-profil .voyant{
    right: auto;
    left: 50%;
    bottom: 27%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0 3px;
    line-height: 1;
    border-radius: 4px;
    border: 0;
    font-size: .6em;
    color: #161834;
    font-weight: bold;
 }



 @media screen and (max-width: 748px) {
    .boobycam-banner.full-height{
        max-height: none;
        justify-content:flex-start;
        grid-template-columns: 3.75em  repeat(5, minmax(0, 1fr));
    }
    .boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(6) ~  .boobycam-wrapper-banner{
       display: none
    }
 }
 @media screen and  (max-width: 648px) {   
    .boobycam-banner.full-height{        
        grid-template-columns: 3.75em  repeat(4, minmax(0, 1fr));
    }   
    .boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(5) ~  .boobycam-wrapper-banner{
       display: none
    }
 }
 @media screen and  (max-width: 548px) {     
    .boobycam-banner.full-height{        
        grid-template-columns: 3.75em  repeat(3, minmax(0, 1fr));
    }   
    .boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(4) ~  .boobycam-wrapper-banner{
       display: none
    }
    .boobycam-banner.full-height .boobycam-wrapper-profil .voyant {
        font-size: 0.4em;
    }
 }
 @media screen and  (max-width: 408px) {      
    .boobycam-banner.full-height{        
        grid-template-columns: 3.75em  repeat(2, minmax(0, 1fr));
    }   
    .boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(3) ~  .boobycam-wrapper-banner{
       display: none
    }
 }
@media screen and  (max-width: 320px) {      
    .boobycam-banner.full-height{        
        grid-template-columns: 3.75em  repeat(1, minmax(0, 1fr));
    }  
    .boobycam-banner.full-height .boobycam-wrapper-banner:nth-child(2) ~  .boobycam-wrapper-banner{
       display: none
    }
}




 /* ------------------
 Single Cam Circle 
  ------------------ */
 .boobycam-single-circle {
   height: 40px;
   width: 40px;
   border-radius: 50%;
    display: block;
    text-decoration: none;
   
   position: relative;
    margin: 0 auto;   

    font-family: "Inter", "Arial", Sans-Serif;
 }

 .boobycam-single-circle img{

    border-style: none;
    height: auto;
    max-width: 100%;

    display: block;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 3;

    width: 100%;

    aspect-ratio: 1 / 1;
    border-radius: 100%;
    object-fit: cover;
    object-position: center center;

    border: 3px solid #f61a83;
 }

 .boobycam-single-circle:before,
 .boobycam-single-circle:after {
   content: '';
   display: block;
   position: absolute;
   top: 0; 
   right: 0; 
   bottom: 0; 
   left: 0;
   border: 1px solid #FFF;
   border-radius: 50%;
    z-index: 1;
 }


 .boobycam-single-circle:before {
   animation: ripple 2s linear infinite;
 }

 .boobycam-single-circle:after {
   animation: ripple 2s linear 1s infinite;
 }

 @keyframes ripple{
   0% { transform: scale(1); }
   50% { transform: scale(1.3); opacity:1; }
   100% { transform: scale(1.6); opacity:0; }
 }

 /* Text */
 .boobycam-single-circle .text {
    position: absolute;
    top: 91%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    padding: .4em .5em .15em ;
    background-color: #f61a83;
    border-radius: 0 0 3px 3px;
    line-height: 1em;
    font-size: 0.6em;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    z-index: 2;
 }


 /* ------------------
 Single Fake Cam  
  ------------------ */

/*Portrait*/
.portrait-cam{
    width: 100%;
    height: 100%;
}
.rect-cam{
    width: 100%;
    padding-bottom: 1em;
    margin: 0 auto;
    font-family: "Inter", "Arial", Sans-Serif, sans-serif;

    position: relative;
}

.portrait-cam .rect-cam{
    padding-bottom: 0;
    height: 100%;
}
.rect-cam, .rect-cam *, .rect-cam ::after, .rect-cam ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.boobycam-live-wrapper {
    width: 100%;
    height: 100%;
}
/*Landscape*/
.landscape-cam .boobycam-live-iframe-wrapper {
    width: 100%;
    aspect-ratio: 473 / 266;
}
/*Portrait*/
.portrait-cam .boobycam-live-iframe-wrapper {
    width: 100%;
    height: 100%;
}
.boobycam-live {
    display: block;
    width: 100%;
    height: 100%;
}
.portrait-cam .boobycam-live {    
    object-fit: cover;
    object-position: center;
}

.boobycam-live-logo {
    position: absolute;
    right: 0.3em;
    top: 0.8em;
    width: 35%;
    max-width: 9.438em;
    pointer-events: none;
    display: none;
}
.boobycam-live-name {
    font-size: 1em;
    position: absolute;
    left: 1em;
    bottom: 1em;
    right: 1em;
    pointer-events: none;
    padding: 0;
    text-align: center;
    color: #FFF;

    font-weight: 700;

    gap: 0.5em;
}

/*Landscape*/
.landscape-cam .boobycam-live-name {
    bottom: 0;
}

.boobycam-live-name .live {
    display: inline-block;
    text-transform: uppercase;  
    color: #00F908;
    white-space: nowrap;

    animation-duration: 1.2s;
    animation-name: blink;
    animation-iteration-count: infinite;
    transition: none;
    animation-timing-function: step-end;
}

.boobycam-live-name a.boobycam-ad-btn{
    margin-top: 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    padding: 0.5em 1em;
    font-weight: bold;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFA7D0 100%);
    border-radius: 3em;
    text-transform: uppercase;
    color: #F41880;
    font-size: 1em;
}


.boobycam-live-link {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


/* Loader pour la cam portrait */
.loader-cam {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    z-index: 2;
}

.loader-cam .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-cam 0.7s linear infinite;
}

@keyframes spin-cam {
    to {
        transform: rotate(360deg);
    }
}

/* Style de l'iframe cam */
.boobycam-live-iframe-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.boobycam-live-iframe-wrapper iframe.boobycam-live {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Scrolling */

.player-infos.has-blur-bg > * {
    position: relative;
    z-index: 2;
}

.swiper-slide.ad-slide .player-infos{
    z-index: 100000000000;
}

/* Styles spécifiques pour la pub cam dans le scrolling */
.swiper-slide.ad-slide .boobycam-cam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.swiper-slide.ad-slide .rect-cam {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide.ad-slide .boobycam-live-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide.ad-slide .boobycam-live-iframe-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Centrage horizontal de l'iframe paysage dans un conteneur portrait */
.swiper-slide.ad-slide .boobycam-live-iframe-wrapper iframe.boobycam-live {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 310%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

/* Logo */
.swiper-slide.ad-slide .boobycam-live-logo {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 120px;
    z-index: 10;
    pointer-events: none;
}

/* Nom du modèle */
.swiper-slide.ad-slide .boobycam-live-name {
    position: absolute;
    bottom: 60px;
    left: 10px;
    right: 10px;
    z-index: 10;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

/* Lien wrapper */
.swiper-slide.ad-slide .boobycam-live-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
}

.swiper-slide.ad-slide .wrapper-player.wrapper-scrolling {
    height: 100%;
}


div#pub-endday {
    height: 100%;
}

div#pub-endday .boobycam-live-iframe-wrapper iframe.boobycam-live {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 270%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}