/*  
Block styles css
*/

@font-face {
  font-family: reliquidas;
  src: url(fonts/Chango-Regular.ttf);
}

@font-face{
    font-family: reliquidas2;
    src: url(fonts/Lovely-Day-Personal-Use.ttf);
}


@font-face{
    font-family: ltdlf;
    src: url(fonts/Trajan-Regular.ttf);
}

@font-face {
  font-family: ltdlf2;
  src: url(fonts/Dirandra.ttf);
}

@font-face {
  font-family: ctqm;
  src: url(fonts/soloist1.ttf);
}

@font-face {
  font-family: ctqm1;
  src: url(fonts/abnes.ttf);
}

@font-face {
  font-family: ctqm2;
  src: url(fonts/intermed.ttf);
}


/*@font-face{
    font-family: sa;
    src: url(fonts/Trajan-Regular.ttf);
}

@font-face {
  font-family: sa2;
  src: url(fonts/Dirandra.ttf);*/


/*//// ////*/

#reliq1{
    margin: 0;
    padding: 0;
    font-family: ctqm1;
    background-color: black;
}

#photos{
    margin-top: 30px;
    width: 100vw;
}

#photos img{
    display: block;
    width: 100vw;
    margin-top: 9px;
}

/*////////////*/

#reliq { 
background-image: url(assets/img/relaciones_liquidas.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646; 
}

#CTQM {
    background-image: 
    url(assets/img/23_5_22_MilaBlois_206.jpg);
    /* background-attachment: fixed; */
    background-position: center -10vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    max-height: auto;
    min-height: auto;
}

#LTDLF { 
background-image: url(assets/img/23_5_22_MilaBlois_358.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646; 
}

#SA { 
background-image: url(assets/img/sin_aire.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646; 
}

#LRDLN { 
background-image: url(assets/img/lrdln_2.jpg);
/*background-position: center center;*/
background-position: center -10vw;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646; 
}


ul {
    list-style: none;
}
a:link{
    color: white;
    text-decoration:none;
}
a:visited{
    color: white;
    text-decoration:none;
}
a:hover{
    color: yellowgreen;
    text-decoration:none;
}
a:active{
    color: white;
    text-decoration:none;
}

li {
    color: white;
    transform-origin: 0 0;
    transform: rotate(90deg);
    margin-bottom:28%;
}
article{
    display:block;
    float: right;
    color: white;
}

article.ltdlf > p {font-family:ltdlf;}
article.rl > p {font-family:reliquidas;}
article.qtqm > p {font-family:ctqm;}

#nav{
    display: none;
  color: white;
  float: left;
}
#menu {
    float: left;
    display: none;
}

#div_ctq{
    display: flex;
    position: absolute;
    top: 20vw;
    transform: translate(4%, -50%);
    width: min-content;
}

#txt1{
    font-family: ctqm !important;
    font-size: 8vw;
    display: flex;
    color: #3333cc;
    text-shadow: 2px 1px 6px rgb(0 0 0 / 82%);
}
#txt2{
    font-size: 6vw;
    font-family: ctqm1 !important;
       transform: translate(-27vw, 23vw) rotate(90deg);
    flex-direction: column-reverse;
    justify-content: flex-start;
    color: #3333cc;
}

#div_ctq1{
  display: flex;
    position: absolute;
    transform: translate(9%,2vw);
}

#txt3{
    font-family: ctqm2 !important;
    font-size: 6vw;
    display: flex;
    color: #3333cc;
    text-shadow: 2px 1px 6px rgb(0 0 0 / 82%);
}

.nav1{
    display: block;
  color: white;
  float: left;
}
.menu1 {
    float: left;
    display: block;
}

.s_ltdf { margin-left: 1%;
    color: white;
    font-family:ltdlf2 ;
    font-size: 130%;
}

.s_rl {
    color: white;
    font-family: reliquidas2;
    font-size: 130%;
    z-index: 999999998;
}

.tit{
    font-size: 170%;
}

span {
    color: white;
    font-family:reliquidas ;
}

footer {
    margin-left: 5vw;
    float: left;
    display: block;
    width: 95%;
    max-width: 100%;
}

/*xdfadfasdafasdfasdfasdfasdfasdfasd*/
/*            //////////////////////////////////////////////////////////////////////-----*/



/*     xxxxxxxx       //////////////////////////////////////////////////////////////////////-----*/
 
#simple-chat-button--container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end
}

#vertical {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start; /* Alinea los elementos en la parte superior */
  flex-direction: row-reverse; /* Cambia el orden de los elementos */
}

            #simple-chat-button--button {
                display: block;
                position: relative;
                text-decoration: none;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
                -webkit-transform: scale(1);
                transform: scale(1);
/*              box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15);   <---ESTO NO VA*/
                background: url("assets/svg/icons8-youtube-24.svg") center/44px 44px no-repeat;
            }

            #simple-chat-button--button2 {
                display: block;
                position: relative;
                text-decoration: none;
                width: 44px;
                height: 44px;
                border-radius: 50%;
/*            box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15); <---ESTO NO VA*/
                background: url("assets/svg/icons8-instagram-24.svg") center/44px 44px no-repeat;
                z-index: -2;
            }
            #simple-chat-button--button3 {
                display: block;
                position: relative;
                text-decoration: none;
                width: 44px;
                height: 44px;
                border-radius: 50%;
/*        box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15); <---ESTO NO VA*/
                background: url("assets/svg/icons8-spotify-480.png") center/44px 44px no-repeat;
            }

             #simple-chat-button--button:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                -webkit-animation: scb-shockwave-animation 2s 5.3s ease-out infinite;
                animation: scb-shockwave-animation 2s 5.3s ease-out infinite;
                z-index: -1;
            }
          


            #simple-chat-button--button:hover {
                -webkit-transform: scale(1.06);
                transform: scale(1.06);
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
            }


        .ytb_img {
  display: block;
  width: 44px; /* Ancho de la imagen */
  height: 44px; /* Alto de la imagen */
  border-radius: 50%;
  background-size: cover;
  margin-left: 5px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(1);
}

.ytb_img2,
.ytb_img3,
.ytb_img4,
.ytb_img5,
.ytb_img6 {
  display: none;
  width: 44px; /* Ancho de la imagen */
  height: 44px; /* Alto de la imagen */
  border-radius: 50%;
  background-size: cover;
  margin-left: 5px;
/*  transition: all 0.2s ease-in-out;*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.ytb_img2:last-child,
.ytb_img3:last-child,
.ytb_img4:last-child,
.ytb_img5:last-child,
.ytb_img6:last-child {
  margin-right: 0; /* Cambia el margen derecho */
  margin-left: 10px; /* Agrega margen izquierdo */
}


.ytb_img::before {
  content: "";
  position: absolute;
  top: -3px; /* Ajusta la posición superior */
  bottom: -3px; /* Ajusta la posición inferior */
  left: -3px; /* Ajusta la posición izquierda */
  right: -3px; /* Ajusta la posición derecha */
  border-radius: 50%; /* El tamaño final será 3px más grande que el elemento padre */
  -webkit-animation: scb-shockwave-animation 2s 5.3s ease-out infinite;
  animation: scb-shockwave-animation 2s 5.3s ease-out infinite;
  z-index: -1;
}
          

.ytb_img:hover {
     -webkit-transform: scale(1.06);
     transform: scale(1.06);
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

@media only screen and (min-width: 768px) {
 .ytb_img2:hover,
.ytb_img3:hover,
.ytb_img4:hover,
.ytb_img5:hover,
.ytb_img6:hover {
    transition: transform 0.5s ease-in-out; 
   transform: scale(5) translate(-20%, -20%); 
}
}

.ytb_img {
  background-color: transparent; /* Fondo transparente */
  border: none; /* Sin borde */
  background-image: url("assets/svg/icons8-youtube-24.svg");
}

.ytb_img2 {
  background-image: url("assets/icons/icon_sa.jpg");
}

.ytb_img3 {
  background-image: url("assets/icons/icon_ctqm.jpg");
}

.ytb_img4 {
  background-image: url("assets/icons/icon_ltdlf.jpg");
}  

.ytb_img5 {
  background-image: url("assets/icons/icon_rl.jpg");
}  

.ytb_img6 {
  background-image: url("assets/icons/icon_lrdln.png");
}  


.ytb_img.fade-in,
.ytb_img2.fade-in,
.ytb_img3.fade-in,
.ytb_img4.fade-in,
.ytb_img5.fade-in,
.ytb_img6.fade-in {
  opacity: 1;
  visibility: visible;
}

.ytb_img.fade-in:hover,
.ytb_img2.fade-in:hover,
.ytb_img3.fade-in:hover,
.ytb_img4.fade-in:hover, 
.ytb_img5.fade-in:hover,
.ytb_img6.fade-in:hover {
  opacity: 1;
  visibility: visible;
}


/*     xxxxxxxx       //////////////////////////////////////////////////////////////////////-----*/


           /* #simple-chat-button--text {
                display: none;
                position: absolute;
                width: max-content;
                background-color: #fff;
                bottom: 15px;
                right: 70px;
                border-radius: 5px;
                padding: 5px 10px;
                color: #000;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: -0.03em;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                word-break: keep-all;
                line-height: 1em;
                text-overflow: ellipsis;
                vertical-align: middle;
                box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15); <---ESTO NO VA
            }*/
           

/*            //////////////////////////////////////////////////////////////////////-----*/

/*NUEVO CODIGOOOO*/





/*            //////////////////////////////////////////////////////////////////////-----*/

  @media only screen and (max-width: 1024px) {
                #simple-chat-button--container {
                    bottom: 40px;
                }
            }

            @media only screen and (max-width: 768px) {
                #simple-chat-button--container {
                    bottom: 40px;
                }
            }

@media only screen and (max-width: 650px){
#menu {
    float: left;
    display: block;}
#nav{
    display: block;
  color: white;
  float: left;}
nav {
    display: none;}

#CTQM { 
background-image: url(assets/img/23_5_22_MilaBlois_206.jpg);
/*background-attachment: fixed;*/
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
max-height: auto;
min-height: auto;
}

#div_ctq{
    display: flex;
    position: absolute;
    top: 25vw;
    transform: translate(4%, -50%);
    width: min-content;
}

#txt1{
    font-family: ctqm !important;
    font-size: 8vw;
    display: flex;
    color: #3333cc;
    text-shadow: 2px 1px 6px rgb(0 0 0 / 82%);
}
#txt2{
    font-size: 6vw;
    font-family: ctqm1 !important;
       transform: translate(-27vw, 23vw) rotate(90deg);
    flex-direction: column-reverse;
    justify-content: flex-start;
    color: #3333cc;
}

#div_ctq1{
 /*  display: flex;
    position: absolute;
    transform: translate(10%,135vw);*/

    display: flex;
    position: fixed;
    bottom: 0%;
    /* position: absolute; */
    /* transform: translate(10%,119vw); */
    margin-bottom: 10.3%;
}
#txt3{
    font-family: ctqm2 !important;
    font-size: 6vw;
    display: flex;
    color: #3333cc;
    text-shadow: 2px 1px 6px rgb(0 0 0 / 82%);
}
}


 @-webkit-keyframes scb-shockwave-animation {
                0% {
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    box-shadow: 0 0 2px rgba(0, 100, 0, .5), inset 0 0 1px rgba(0, 100, 0, .5);
                }
                95% {
                    box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
                }
                100% {
                    -webkit-transform: scale(1.2);
                    transform: scale(1.2);
                }
            }
            @keyframes scb-shockwave-animation {
                0% {
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    box-shadow: 0 0 2px rgba(0, 100, 0, .5), inset 0 0 1px rgba(0, 100, 0, .5);
                }
                95% {
                    box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
                }
                100% {
                    -webkit-transform: scale(1.2);
                    transform: scale(1.2);
                }
            }