.rectangulo-post {
    position: relative; /* no esta en Style .css*/
     width: 100%; 
     height: auto; 
     border: 1px solid #C3BCBC;
     box-shadow: 2px 2px 5px #999;
     padding: 10px; /* 0px */
     margin: 10px auto; /* no esta en Style .css*/
     border-radius: 5px;
     background: white;
     word-wrap: break-word;
     /*se agrego de Style.cc*/
    /* display: flex;*/
     flex-wrap: wrap;
}
.rectangulo-post img{
}
.header{ /* .rectangulo-post  */
    position: relative;
     width: 100%; 
     height: auto; 
     padding: 2px;
     font-weight: bold;
    margin: 10px auto;
}
.header img{
    width: 40px; 
     height: 40px;
   margin: auto 10px;
}
.rectangulo-post .header-pub{
    position: absolute;
     width: 100%; 
     height: 60px; 
     padding: 2px;
     border-radius: 5px;
     font-weight: bold;
     color:white;
     background-image: linear-gradient(to bottom, rgba(38,38,38,1) 4%, rgba(0,212,255,0) 100%);
}
.header-pub img{
    width: 40px; 
     height: 40px;
    margin: 5px 5px;
}
.rectangulo-post .body{
     width: 100%; 
     height: auto; 
     border-radius: 15px;
     text-align: center;
}
.rectangulo-post .desc{
    position: relative;
     width: 100%;
     height: auto;
      padding: 15px 10px;
}
.rectangulo-post .pie{
     display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
     width: 100%;
     height: auto;
    top: auto;
    vertical-align: middle;
    padding: 10px;
   
}
.rectangulo-post .pie button{
    display:block;
    background-color: white;
    color:#5E5E5E;
    float: left;
    font-size:20px;
   
    border: none;
}

.rectangulo-alt {
     width: 100%; 
     height: auto; 
     border: 1px solid #C3BCBC;
     box-shadow: 2px 2px 5px #999;
     padding: 10px; /* presuntamente agregado */
     /*margin: 10px;*/
     border-radius: 15px;
     
     background: white;
}


/*struk */
	.rectangulo {
     width: 100%; 
     max-height: auto; 
     border: 1px solid #C3BCBC;
     box-shadow: 2px 2px 5px #999;
     padding: 5px;
    margin: 10px auto;
     border-radius: 15px;
     word-wrap: break-word;
     /*display: flex;*/
   /*text-align: center; 2/8/2022*/
     background: white;
}
.rectangulo-info {
width: 100%;
    border: 1px solid #C3BCBC;
    box-shadow: 2px 2px 5px #999;
    padding: 5px;
    margin: 10px auto;
    border-radius: 15px;
    word-wrap: break-word;
    display: flex;
    align-items: normal;
    text-align: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1.00);
}

.theme1 {
    background: rgba(255, 255, 255, 1.00);
    background-image: linear-gradient(to top left, rgb(14,192,226,0.40), rgb(146,210,24,0.40));
}

.theme2 {
    background: white;
    background-image: linear-gradient(to top left, rgb(14,192,226,0.40), rgb(176, 40, 145, 0.46));
}

.theme3 {
    background: rgb(255, 255, 255, 1.00);
    background-image: linear-gradient(to top left, rgb(14,192,226,0.40), rgb(0, 125, 251, 0.8));
}

.theme4 {
    background: rgb(255, 255, 255, 1.00);
    background-image: linear-gradient(to top left, rgb(174, 80, 255, 0.8), rgb(245, 40, 145, 0.8));
}

.portada-info { /*aparentemente obsoleto */ 
 height: 210px; 
 width:100%;
 border-radius:20px;
 border: 1px solid #C3BCBC;
 box-shadow: 2px 2px 5px #999; 
}

.portada-info-mini { /*aparentemente obsoleto */
 height: auto; 
 width:100%;
 border-radius:20px;
 border: 1px solid #C3BCBC;
 box-shadow: 2px 2px 5px #999;
 /*
 padding-left: 10px; padding-right: 10px;
 */
}

.portada-foto-type1 {
position: relative;
float: left;
/*top: 18px;*/
 /* bottom: 10px; */   
}

.portada-foto-type2 {
position: relative;
float: left;
top: 90px;    
}

.portada-desc-type1 {
width: 100%;
position: relative;
/*top: 20px;*/
float: left;
/*margin: 10px auto;*/    
}

.portada-desc-type2 {
position: relative;
top: 120px;
float: left;
margin: 10px auto;
}

.portada-item-cuadrado {
background: rgb(255,255,255,0.70);  
padding: 3px; 
border-radius:5px;
-webkit-text-fill-color: black;
}

.portada-item-circulo {
background: rgb(255,255,255,0.70);  
padding: 3px; 
border-radius:20px;
-webkit-text-fill-color: black;
}

.btn.buy,
.btn.close,
.btn.submit {
  display: flex;
  align-items: end;    
  border-radius: 10px;
  font-size: 12px;
  padding: 8px;
  margin: 2px;
  /*text-shadow: 0 1px 0 #032638;*/
  max-width: 100%;
  text-align: center;
  font-weight: bold;
  color: #636363;
  background: #F5F5F5;
 
  text-transform: uppercase;
}

/*style photo perfil*/
.eye{

  height:100%;
  width:100%;
  object-fit: cover;
  z-index: 1;
}

.heaven{
  /*
  position:absolute;
  height:300px;
  width:300px;
  z-index: -1;
  */
  
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    bottom: 15px;
    right: 8px;
    background: white;
    z-index: +1;

}

.caja-principal{
    position:block;
    width: auto;
    /*max-width: 300px;*/
    background: #EEEEEE;
    border-radius: 10px;
    padding: 5px 5px;
    /*margin: 10px;*/
}

.img-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 0.3em;
width: 100%; 
height: auto;

}
.img-grid img{
width: auto; 
height: 250px;
max-height: 250px;
line-height: 0;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
}

.vid-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
grid-gap: 0.5em;
width: 100%; 
height: auto;

}

/*clasificacion*/
.star {
  width: 120px;
  margin: 0;
  height: 40px;
}

.star label {
  font-size: 20px;
}

/* Recien citado
input[type="radio"] {
  display: none;
}
*/

.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.clasificacion input[type="radio"] {
  display: none;
}

.clasificacion label:hover,
label:hover ~ label {
  color: orange;
}

.clasificacion input[type="radio"]:checked ~ label {
  color: orange;
}
/*NUEVO CONTENEDOR PARA IMAGENES PROFILE*/
.thumbnail-profile-img .cont-profile-img {
  background-color: white;
  height: 120px;
  max-width: 100%;
}

.cont-profile-img > img {
  vertical-align: middle;
  width: 100%;
  height: 100%; /* 100% */
  object-fit: cover;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail-profile-img .cont-profile-vid {
  background-color: white;
  height: auto;
  max-width: 100%;
}

.one {
    position: relative;
    width: 100%;
    height: 250px;
     border-radius:20px;
 border: 1px solid #C3BCBC;
 box-shadow: 2px 2px 5px #999;
 margin-top: 10px;
    margin-bottom: 90px;
}
.one #items{
z-index: +1;
position: absolute;
top: 48px;
}

.one0 {
    width: 100%;
    padding: 10px 0 10px 0;
    overflow: hidden;
     border-radius:20px;
 border: 1px solid #C3BCBC;
 box-shadow: 2px 2px 5px #999;
 margin-top: 10px;
    margin-bottom: 5px;
    position: relative;
}
.one0 #items{
    display: flex;
    align-items: center;
    gap: 1.5rem;
z-index: +1;
position: relative;
/*top: 0.5rem;*/
padding: 1px 10px 0px 10px;
}

.video-background { /* class name used in javascript too */
    width: 100%; /* width needs to be set to 100% */
    height: 100%; /* height needs to be set to 100% */
    /* position: absolute; */
    left: 0;
    top: 0;
    z-index: 1;
}

.mute-video {
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute' viewBox='0 0 16 16'><path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'/></svg>");
    background-size:32px;
    border:0;
    width:32px;
    height:32px;
    text-indent:-999px;
}
.unmute-video {
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-up' viewBox='0 0 16 16'><path d='M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z'/><path d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z'/><path d='M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z'/></svg>");
    background-size:32px;
}

/*style photo perfil*/
/*
.eye{
  
  height:100%;
  width:100%;
  z-index: 1;
}


.caja-principal{
    position:block;
    width: auto;
    max-width: 300px;
    background: #EEEEEE;
    border-radius: 10px;
    padding: 5px 5px;
    margin: 10px;
}

/*clasificacion*/
/*
.star {
  width: 250px;
  margin: 0;
  height: 50px;
}

.star label {
  font-size: 20px;
}

input[type="radio"] {
  display: none;
}

label {
  color: grey;
}

.clasificacion {
    position:absolute;
  direction: rtl;
  unicode-bidi: bidi-override;
}

label:hover,
label:hover ~ label {
  color: orange;
}

input[type="radio"]:checked ~ label {
  color: orange;
}
.img-grid {
    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 1em;
 width: 100%; 
 height: auto;

}
.img-grid img{
 width: auto; 
 height: 250px;
 max-height: 250px;
 line-height: 0;
  overflow: hidden;
  cursor: pointer;
 border-radius:25px;
}
@media (max-width: 480px) {
.img-grid {
display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1em;
 width: 100%; 
 height: auto;

}
}

/*clasificacion...*/

label {
  color: grey;
}

.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/*
@media (max-width: 480px) {
.img-grid {
 width: 100px;   
}
} 
*/

/* PROGRESSBAR */

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');


:root {
  --line-border-fill: #3498db;
  --line-border-empty: #e0e0e0; /*retirado */
}
/* se borro 17/07/2022
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: inherit;
}
*/
html {
  box-sizing: border-box;
}
/*
body {
  background: #F3F4F6;
  font-family: "Rubik", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
*/
.container-progresssbar {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
}

.progress-container::before {
  content: "";
  background: var(--line-border-empty);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  /*max-width: 80%;*/
  width: 100%;
}

.progress {
  /*background: var(--line-border-fill);*/
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}

.circle {
  background: #fff;
  color: #6c6464;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line-border-fill);
  transition: .4s ease;
}

.circle.active {
  border-color: var(--line-border-fill);
 background-color: #a9dcff;
 color:white;
}
/*
.btn {
  background-color: var(--line-border-fill);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  border-radius: 6px;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}
*/
.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: var(--line-border-empty);
  cursor: not-allowed;
}

.option-radio input[type="radio"] ~ label {
  color: darkgrey;
  border: 2px solid darkgrey;
}
.option-radio input[type="radio"]:checked ~ label {
  color: orange;
  border: 2px solid orange;
}