.leftE{
    border-top-left-radius: 50rem;
    border-bottom-left-radius: 50rem;
    padding-left:2%;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top:0.2rem;
    align-content: center;
    display: grid;
}.rightE{
    border-top-right-radius: 50rem;
    border-bottom-right-radius:50rem;
    text-align:right;
    padding-right:2%;
    padding-top: 5px;
    padding-bottom: 3px;
    align-content: center;
    margin-top:0.2rem;
    display: grid;
    /* background: #ff5599; */
    
}
.form-control-mp{
    border-radius: 5px;
    border: 1px grey solid;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 400px;
     
}
.ml-45{
    margin-left: 46%;
}
.var2{
    padding:10px;
    transition:1s;
    padding-bottom: 1.2rem !important;
    padding-top: 1rem !important;
    /* box-shadow:0 2rem 4rem #2c2a2a83; */
    background: #df356ef6;/*#fd42b2f2;*/
}
.var{
    box-shadow:0px 0px 0px;
    padding: 1px;
    transition: 1s;
    background:rgba(246, 55, 119, 0.37);
    
}
.varc{
    padding-bottom: .7rem !important;
    padding-top: .7rem !important;
    background-color: rgba(42, 42, 42, 0.459);
    box-shadow:1px 1px 1px #d6d0d0;
    transition: 1s;
}
.redes{
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.facebook{
    background: url(../Imagenes/facebook_icon_130940.png);
    background-size: 100% 100%;
    width: 60px;
     height: 60px;
}
.instagram{
    background: url(../Imagenes/instagran.png);
    background-size: 100% 100%;
    width: 60px;
    height: 60px;
}
.bordes-funciona-mp{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.mt-7{
    margin-top: 70px;
}
.pr{
    padding:0px;
}
.centrado{
    display:grid;
    justify-items:center;
}
.final{
    display:grid;justify-items: flex-end;
}
/*    Colores      */
.rosado{
    background-color: #fd4d82;
    
}
.rosado2{
    background: linear-gradient(to right,#ffffff00 2%,#ff729c50 6%,#fd4d82 15% ,#fd4d82 85%,#ff729c50 98%,#ffffff00 100%);
    
}
.rosadot{
    color:#eb367e;
    
}
.crema{
    background-color: #F7EFF2;
    
}
.tazul{
    color:#15336D
}
.azull{
    background:rgb(0, 110, 255);
}
.azulll{
    text-align: end;
    padding-right: 5px;
    background: linear-gradient(to right, rgba(1, 57, 136, 0.312),rgba(1, 57, 136, 0.512),rgba(1, 57, 136, 0.680),rgba(1, 57, 136, 0.774));
}
.rooss{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) -50%,rgba(207, 0, 104, 0.922));
   
}
.azull1{
    color:rgb(0, 40, 97);
}
.rosado-t{
    background-color: rgb(231, 26, 111);
    font-size: 24px;
}
.azul-moradito{
    background-color: rgba(22, 44, 93, 0.815);
    border-radius: 5px;
    
}
.fa{
    font-size:20pt
}.fb{
    font-size:18pt
}
.fc{
    font-size:14pt;
    
}
.fd{
    font-size:14pt
}
.fe{
    font-size:12pt
}
/* Defenicion de BackGround*/

.bg-principal{
    background-image: url(../Imagenes/bokeh-2594745_1920.jpg);
    /* background-image: url(../Imagenes/fondo.png); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
    /* height: 420px;  */
    
}
/* @media(max-width:720px){
    .bg-principal{
        background-size: 130% 100%;
    }
} */
.border-log{
    background: #f7eff236;
    border:2px transparent;
    border-radius: 5px;
}

.bg-costura1{
    background-image: url(../Imagenes/costura2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.costura{
    /* background-image: url(../Imagenes/costura1.png); */
    border:rgba(219, 210, 210, 0.692) 4px dashed;
    border-left: hidden;
    border-right: hidden;
    /* background-repeat: no-repeat;
    background-size: cover; */
}
.bg-categ{
    background-image:url(../Imagenes/z1.jpg);
    /* background-image:url(../Imagenes/z2.jpg);    
    background-image:url(../Imagenes/z3.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-attachment: fixed; */
}
@media(max-width:720px){
    .bg-categ{
        background-size: 130% 100%;
    }
}
.hv:hover{
    background-color:rgba(238, 81, 144, 0.411);
    cursor: pointer;
}
.hv{
    padding-top: 5px;
    padding-bottom: 5px;
    color:white;
}
#m:hover{
    border-radius: 6px;
}
#me:hover{
    border-radius: 6px;
}
#ma:hover{
    border-radius: 6px;
}
.none{
    text-decoration:none;
    color:black;
}
.none:hover{
    text-decoration:none;
    color:white;
}
/* tamaños de los inpust */
.tamanoInput{
    max-height: 20px;
}

/* Gradientes */

.gl-1{
    padding-bottom: 2px;
    padding-right: 30px;
    background: rgb(0,46,109);
    background: linear-gradient(to left, rgba(255, 255, 255, 0.075) 0%,rgba(22, 45, 93, 0.746) 40%, rgba(22, 44, 93, 0.815) 80%, rgba(22, 44, 93, 0.979) 100%);
}.gl-2{
    background: rgb(0,46,109);
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 20px;
    font-size: 17px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.075) 0%,rgba(22, 45, 93, 0.746) 40%, rgba(22, 44, 93, 0.815) 80%, rgba(22, 44, 93, 0.979) 100%);
}
.gr-1{
    padding-bottom: 2px;
    
    padding-right: 30px;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0%,rgba(22, 45, 93, 0.746) 40%, rgba(22, 44, 93, 0.815) 80%, rgba(22, 44, 93, 0.979) 100%);
}.gr-2{
    background: rgb(255,255,255);
    padding-top: 4px;
    padding-bottom: 2px;
    padding-right: 30px;
    font-size: 17px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0%,rgba(22, 45, 93, 0.746) 40%, rgba(22, 44, 93, 0.815) 80%, rgba(22, 45, 93, 0.979) 100%);
}.gr-2c{
    background: rgb(255,255,255);
    padding-top: 4px;
    padding-bottom: 2px;
    padding-right: 30px;
    font-size: 17px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0%,rgba(207, 0, 104, 0.924) 40%, rgba(179, 0, 95, 0.924) 80%, rgba(131, 1, 66, 0.952) 100%);
}
.fz-17{
    font-size: 17px;
}
.fz-22{
    font-size: 22px;
}
.footer-end{
    background: rgb(190,43,80);
    padding-top: 20px;
    padding-bottom: 10px;

}

.topnav {
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  
  
  .topnav a:hover {
      background-color:rgba(238, 81, 144, 0.726);
      cursor: pointer;
  }
  .box-m{
    background-color: rgba(45, 63, 102, 0.671);
    border-top-right-radius: 5px;
  }
  @media screen and (max-width:500px){
    .box-m{
        background-color: rgba(45, 63, 102, 0.671);
        border-top-right-radius: 5px;
      }
  }
  .topnav a.active {
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  @media screen and (max-width: 801px) {
    .topnav a {
        float: left;
    display: block;
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    font-size: 17px;
    }
}
  
  @media screen and (max-width: 800px) {
    .topnav a {
        max-width: 70%;
        padding:0px;
    }
    
    .topnav a:not(:first-child) {display: none;}

    
    .topnav a.icon {
      float: right;
      display: block;
      max-width: 20%;
    }
  }
  
  @media screen and (max-width: 800px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav a.icon {
        float: right;
        display: block;
        max-width: 20%;
      }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }    


.pareja{
    width: 70%;
    background-image: url(  ../Imagenes/parejas.png);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.pza{
    min-height: 50px
}
.pp{
    width:80%;
}
.esporadicos{
    position:relative;
    background:url(  ../Imagenes/encuentros1.png);
    background-size:100%;
    background-repeat: no-repeat;
}
.amistades{
    position:relative;
    background:url(../Imagenes/amigos.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
}
/* .esporadicos:before{
     content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background:linear-gradient(to left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
     rgba(212, 50, 1, 0.452)80%,
     rgba(212, 50, 1, 0.835)90%,
     rgba(207, 48, 0, 0.972)95%,
     rgb(207, 48, 0)99%,
     rgb(207, 48, 0)100%)
} */

.experimenta{
    background-image:url(  ../Imagenes/sw.png);
    background-size:100% 100%;
    background-repeat: no-repeat;

}
.sado{
    background-image:url( ../Imagenes/sw-3.png);
    background-size:100% 100%;
    background-repeat: no-repeat;
}
.medio-a{
    background-color: rgb(209, 241, 241);
}
.orange{
    background-color: rgb(207, 48, 0)
}
.sado-color{
    background-color:#490000;
}
@media(max-width:901px){
    .blanco{
        background-color: rgba(14, 96, 219, 0.774);
        color: white;
        
    }
    .medio-a{
        position:relative;
        background-image:url(../Imagenes/amigos.png);
        background-repeat: no-repeat;
        background-position: center; 
        background-attachment: fixed;
        background-size:cover;
    }
    .medio-a::before{
        content: '';
        position: absolute;
        filter: opacity(0.5);
        background: #d1f1f1;
        width: 100%;
        height: 100%;
    }
    .azull{
        position: relative;
        background-image: url(  ../Imagenes/parejas.png);
        background-repeat: no-repeat;
        background-position: center; 
        background-attachment: fixed;
        background-size:cover;
        color:white;
    }
    .azull::before{
        content: '';
        position: absolute;
        filter: opacity(0.5);
        background: #0073ffa3;
        width: 100%;
        height: 100%;
    }
    .blanco{
        position:relative;
        background-image:url(  ../Imagenes/sw.png);
        background-repeat: no-repeat;
        background-position: center; 
        background-attachment: fixed;
        background-size:cover;
    }
    .blanco::before{
        content: '';
        position: absolute;
        filter: opacity(0.5);
        background: #ffffffa3;
        width: 100%;
        height: 100%;
    }
    .orange{
        position:relative;
        background-image:url(  ../Imagenes/encuentros1.png);
        background-repeat: no-repeat;
        background-position: center; 
        background-attachment: fixed;
        background-size:cover;  
    }
    .orange::before{
        content: '';
        position: absolute;
        filter: opacity(0.5);
        background: rgba(207, 48, 0, 0.781);
        width: 100%;
        height: 100%;
    }
    .sado-color{
        position: relative;
        background-image:url( ../Imagenes/sw-3.png);
        background-repeat: no-repeat;
        background-position: center; 
        background-attachment: fixed;
        background-size:100% 100%;
    }
    .sado-color::before{
        content: '';
        position: absolute;
        filter: opacity(0.5);
        background: #490000;
        width: 100%;
        height: 100%;
    }
}
@media (max-width:901px){
    .pareja, .esporadicos, .amistades, .experimenta, .sado {
        background: transparent;
    }
    .pareja, .experimenta{
        margin-top: 20px;
    }
}
.mb-7{
    margin-bottom: 7rem;
}
@media(max-width:750px){
    .mb-7{
        margin-bottom: 2rem;
    }
}
.mb-7-2{
    margin-bottom: 7rem;
}
@media(max-width:750px){
    .mb-7-2{
        margin-bottom: .2rem;
    }
}
@media screen and (max-width:350px){
    .pp{
        width:95%;
    }
}
@media screen and (max-width:280px){
    .pp{
        width:100%;
    }
}

.animacion-jotan{
    animation: palpitar 1.5s infinite alternate;
     
   }
   @keyframes palpitar {
     to{
       transform: scale(0.9);
       font-size:scale(0.5);
     }
   }
   

/* width */
/* Contenedor del scrool */
::-webkit-scrollbar {
  width: 15px;
  
}

/* Track */
/* Fondo del scrool  */
::-webkit-scrollbar-track {
  background:rgba(179, 179, 179, 0.527); 
  
}
 
/* Handle */
/* barra que desliza dentro del scrool  */
::-webkit-scrollbar-thumb {
  background: rgb(216, 92, 123);
  
  border-radius: 10px;
}
strong{
  font-weight: normal;
}
/* Handle on hover */
/* hover de la barra  */
::-webkit-scrollbar-thumb:hover {
  background:  rgb(223, 78, 114)
}