:root {
    --colorAzulClaro: #71d1e5;
    --colorAzul: #43aabf;
    --colorRosaMexicano: #b80a58;
    --colorRosaMexicanoLigero: #e2629c;
    --colorRosaMexicanoSLigero: #f8e4ed;
    --colorRojo: #a7151c;
    --colorAzulSC: #e0f5f9;
    --colorVerde: #2b9816;
    --colorNaranja: #bcab1d;
}

@font-face {
    font-family: logo;
    src: url(../fonts/Sleety.otf);
}
@font-face {
    font-family: normal;
    src: url(../fonts/Lato-Regular.ttf);
}
@font-face {
    font-family: negra;
    src: url(../fonts/Lato-Bold.ttf);
}
*{
    padding:0;
    margin:0;
    font-family: normal;
}
body{
    background:#e7e7e7;
    padding:0;
    margin:0;
    font-family: normal;
}
.cabezaMenu{
    background:#FFF;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:60px;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    z-index: 999999999999999999999;
}
.logo{
    font-family: logo;
    font-size: 20px;
    background:#FFF;
    color:var(--colorAzulClaro);
    font-weight: bold;
    padding:5px;
}
.logo span{
    font-family: logo;
    font-size: 20px;
    background:#FFF;
    color:var(--colorRosaMexicano);
    font-weight: bold;
    padding:5px;
}

.logOutPX{
    position:absolute;
    top:15px;
    right:10px;
}

@media screen and (max-width: 450px) {
   
.logOutPX{
    position:absolute;
    top:05px;
    right:10px;
} 
    .logo{
        font-family: logo;
        font-size: 13px;
        background:#FFF;
        color:var(--colorAzulClaro);
        font-weight: bold;
        padding:5px;
    }
    .logo span{
        font-family: logo;
        font-size: 13px;
        background:#FFF;
        color:var(--colorRosaMexicano);
        font-weight: bold;
        padding:5px;
    }
    
    .cabezaMenu{
        background:#FFF;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:40px;
        -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
        z-index: 999999999999999999999;
    }
}
.btnLogout{
    text-decoration: none;
    color:var(--colorRojo);
}
.fondoInicio{
   
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height:calc(100vh - 60px);
    top:60px;
    position:relative;
}
.conteFondo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 60px);
}
.contenedorLogin{
    background:rgb(58,160,218,.7);
    position: absolute;
    width:250px;
    height:calc(100vh - 60px);
    left:80px;
}
.tituloLogin{
    font-weight: bold;
    color:var(--colorRosaMexicanoLigero);
    font-family: negra;
    margin:5px;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 22px;
}
.contenedorInputLogin{
    width:calc(100% - 15px);
    padding:5px;
    margin-bottom: 15px;
}
.inputLogin{
    width:calc(100% - 10px);
    background:#e7e7e7;
    border:none;
    border-bottom: 2px solid var(--colorRosaMexicano);
    padding:6px;
}
.inputLogin:focus{
    outline:none;
    background:#FFF;
}
.btnLogin{
    background:var(--colorRosaMexicano);
    border:none;
    padding:5px;
    padding-left: 15px;
    padding-right:15px;
    color:#FFF;
    width:calc(100% - 15px);
    text-align: center;
    transition:1s;
    cursor:pointer;
}
.btnLogin:hover{
    background:var(--colorRosaMexicanoLigero);
}
@media screen and (max-width: 450px) {
    .contenedorLogin{
        background:rgb(58,160,218,.7);
        position: absolute;
        width:100%;
        height:calc(100vh - 60px);
        left:0px;
    }
}
/* Panel general */
.contenedorGrl{
    top: 65px;
    position:relative;
}
.seccionMenu{
    width:300px;
    position:fixed;
    top:65px;
    left:10px;
}
.seccionPosts{
    width:calc(100% - 320px);
    position:relative;
    left:320px;
}

.nuevoPost{
    border-radius:5px;
    background:#FFF;
    padding:5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(100% - 25px);
}

.btnHistory{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.btnAlbum{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.btnTrip{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.btnVideo{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.btnLifeMark{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.btnLetter{
    border:2px solid var(--colorRosaMexicano);
    border-radius: 5px;
    color: var(--colorRosaMexicano);
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    cursor:pointer;
    font-family:negra;
    background:#FFF;
    display:inline-block;
    transition:1s;
    margin:5px;
}
.iconoEvento{
    height: 100px;
    width:auto;
    max-width: calc(100% - 70px);
    margin:25px;
    
}
#btnTipo{
    border:2px solid var(--colorAzulClaro);
    background: var(--colorAzulClaro);
    color:#FFF;
    transition:1s;
}
.tipoForm{
    display:none;
    padding:10px;
}
.inputTXChk{
    transform:scale(1.4);
    padding:5px;
    border:1px solid var(--colorAzulClaro);
    margin-left: 10px;
}
.fechaPP{
    display:inline-block;
    margin-bottom: 15px;
    margin-right: 5px;
}
.inputTXFec{
    width:120px;
    padding:5px;
    border:1px solid var(--colorAzulClaro);
}
.inputTXFec:focus{
    outline:none;
}
.btnPublish{
    background:var(--colorRosaMexicano);
    color:#FFF;
    padding:5px;
    padding-left: 15px;
    padding-right: 15px;
    font-family: negra;
    cursor:pointer;
    border:none;
    transition:1s;
    border-radius:5px;
}
.btnPublish:hover{
    background:var(--colorRosaMexicanoLigero);
}
.autorLeyendaP{
    color:#727586;
    font-size:12px;
    font-family:negra;
}

.paginacion{
    color:#FFF;
    background:var(--colorAzul);
    padding:4px;
    margin:2px;
    text-decoration:none;
    display:inline-block;
    margin-bottom: 10px;
    margin-top:10px;
}
.paginacionL{
    color:#FFF;
    display:none;
    padding:4px;
    margin:2px;
    text-decoration:none;
}
.inputTXArea{
    width:calc(100% - 10px);
    padding:5px;
    height:120px;
    border:1px solid var(--colorAzulClaro);
}
.inputTXArea:focus{
    outline:none;
}
.inputTXAreaComent{
    width:calc(100% - 20px);
    padding:5px;
    height:70px;
    border-radius:5px;
    border:1px solid var(--colorRosaMexicano);
}
.inputTXAreaComent:focus{
    outline:none;
}
.roa{
    color:var(--colorRosaMexicano);
    font-family: negra;
}
.autorConte{
    color:var(--colorAzul);
    font-family: negra;
    font-size: 15px;
}
.fechaConte{
    color:var(--colorRosaMexicano);
    font-family: negra;
    font-size: 11px;
    margin-top: -7px;
}
.aliDer{
    text-align: right;
    margin-top:10px;
}
.comentarioConte{
    background:#ddd;
    border-radius:5px;
    padding:5px;
    font-size:14px;
    margin-bottom: 5px;
    position:relative;
}

  .delComent{
      font-size:11px;
      font-family: negra;
      color:var(--colorRojo);
      position:absolute;
      cursor:pointer;
      top:1px;
      right:4px;
  }
.inputTX{
    width:calc(100% - 10px);
    padding:5px;
    margin-top: 15px;
    border:1px solid var(--colorAzulClaro);
}
.inputTX:focus{
    outline:none;
}

.upload-container {
        position: relative;
    }
    .upload-container input {
        border: 1px solid #92b0b3;
        background: #f1f1f1;
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        margin-top:15px;
        margin-bottom:15px;
        padding: 100px;
        text-align: center !important;
        width: calc(100% - 200px);
    }
    .upload-container input:hover {
        background: #ddd;
    }   
    .upload-container:before {
        position: absolute;
        bottom: 50px;
        left: calc(50% - 90px);
        content: " (or) Drag and Drop files here. ";
        color: #3f8188;
        font-weight: 900;
    }   
    .upload-btn {
        margin-left: 300px;
        padding: 7px 20px;
    }  
    .fechaPublicacionHistoria{
        color:var(--colorRosaMexicanoLigero);
    }
    .tituloPublicacion{
        color:var(--colorAzulClaro);
        font-family: negra;
        font-size:12px;
        line-height: 1.7;
    }
    .tituloPublicacionB{
        color:var(--colorAzul);
        font-family: negra;
        font-size:17px;
        line-height: 1.7;
        text-align: center;
    }
    .motivoViaje{
        color:var(--colorAzul);
        font-family: negra;
        font-size:12px;
        line-height: 1.7;
    }
    
    .motivoViaje span{
     color:var(--colorRosaMexicano);   
     font-family: negra;
    }
    .lugarPublicacion{
        color:#727586;
        font-family: negra;
        font-size:12px;
        line-height: 1.7;
        position:relative;
        padding-left: 20px;
    }
    .icoLoca{
        height:15px;
        width:auto;
        margin-right: 10px;
        top: 3px;
        left:0;
        position:absolute;
    }
    .videoContainer{
         position:relative;
         display:block;
         text-align: center;
         width:100%;
    }
    video {
    max-width: 100%;
    width: auto;
    height: 400px;
    
  }
    .descripcionPublicacion{
        color:#000;
        line-height: 1.7;
    }
    .icoImgPost{
        height:100px;
        width:auto;
        margin:10px;
    }
    .conteTituBusu{
        position:relative;
        padding-right:180px;
    }
    .tituloUsr{
        font-size: 20px;
        font-family:negra;
        color:var(--colorAzul);
        margin-bottom: 15px;
        margin-top:-25px;
    }
    .tituloUsr span{
        color:var(--colorRosaMexicano);
        font-family:negra;
    }
    .tituloUsrB{
        position: relative;
        font-size: 20px;
        font-family:negra;
        color:var(--colorAzul);
        margin-bottom: 0px;
        margin-top:15px;
        display:none;
    }
    .tituloUsrB span{
        color:var(--colorRosaMexicano);
        font-family:negra;
    }
    .filtroPub{
        background:var(--colorAzulSC);
        padding:15px;
        border-radius:5px;
        margin-left:5px;
        width:calc(100% - 55px);
        display:none;
        line-height: 1.9;
    }
    .linkBuscar{
        position:absolute;
        top:5px;
        right:25px;
        display:inline-block;
        background:var(--colorRosaMexicano);
        color:#FFF;
        cursor:pointer;
        padding:5px;
        padding-right: 15px;
        padding-left:15px;
        border-radius:5px;
    }
    .linkClearFilter{
        position:absolute;
        top:13px;
        font-size:12px;
        right:115px;
        color:var(--colorAzul);
        cursor:pointer;
    }
    h2{
        color:var(--colorAzul);
        font-family: negra;
        margin-bottom: 5px;
        line-height: 1.8;
    }
    h2 span{
        color:var(--colorRosaMexicano);
    }
    .verMasImg{
        height: 100px;
        width:100px;
        background:var(--colorAzulClaro);
        position:relative;
        display:inline-block;
        vertical-align: top;
        margin:10px;
    }
    .absVerMas{
        position:absolute;
        width:100%;
        height:100%;
        font-family: negra;
        color:var(--colorRosaMexicano);
        font-size:60px;
        top:calc(50% - 35px);
        left:calc(50% - 20px);
    }
    .linkCancel{
        color:var(--colorAzulClaro);
        text-decoration:underline;
        cursor:pointer;
    }
    .linkCancelB{
        color:var(--colorRosaMexicanoLigero);
        text-decoration:underline;
        cursor:pointer;
    }
    .menuEditarPublicacion{
        transform:rotate(90deg);
        position:absolute;
        top:3px;
        right:15px;
        height:20px;
        width:auto;
        cursor:pointer;
    }
    .menuPubli{
        background:var(--colorAzulSC);
        position:absolute;
        z-index: 99999999;
        padding:5px;
        top:21px;
        right:5px;
        display:none;
    }
    .modificaPubli{
        color:#000;
        text-decoration: none;
        cursor:pointer;
        line-height: 2.2;
        padding:5px;
        font-size:11px;
    }
    .separaMenuHr{
        height:1px;
        border:none;
        margin-top:3px;
        background:#b3dce5;
    }
    .eliminaPubli{
        color:#a7151c;
        text-decoration: none;
        cursor:pointer;
        line-height: 2.2;
        padding:5px;
        font-size:11px;
    }
    /* Modificar historia */
    
    .modificarConte{
        padding-top:20px;
        line-height: 1.9;
        width:calc(100% - 20px);
    }
    .tituloModificar{
        color:var(--colorAzul);
        font-family: negra;
        font-size: 17px;
        margin-bottom: 10px;
    }
    
  #sortable { list-style-type: none; margin: 0; padding: 0; width:100%; margin-top:15px; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 11px; cursor:move;
                 display:inline-block;
                 background:#FFF;
                 border-radius:5px;
  }
  .imgModifOrd{
      height:100px;
      width:auto;
  }
  .deleteImg{
      color:#a7151c;
      text-decoration: none;
  }
  .labelInstruccion{
      background:var(--colorAzul);
      padding:5px;
      font-size:10px;
      font-family: negra;
      line-height: 1.6;
      margin-top: 15px;
      margin-bottom: 15px;
      width:calc(100% - 20px);
  }
  .conteCambiosOps{
      margin-top: 45px;
  }
  .btnGuardar{
      padding:10px;
      color:#FFF;
      background:var(--colorVerde);
      cursor:pointer;
      border:none;
      font-family:negra;
      font-size:17px;
      border-radius: 5px;
      padding-left: 50px;
      width:calc(100% - 80px);
      text-align: left;
      position:relative;
      margin-bottom: 15px;
  }
  .btnAgregar{
      padding:10px;
      color:#FFF;
      background:var(--colorNaranja);
      cursor:pointer;
      border:none;
      font-family:negra;
      font-size:17px;
      border-radius: 5px;
      padding-left: 50px;
      width:calc(100% - 80px);
      text-align: left;
      position:relative;
      margin-bottom: 15px;
  }
  .btnRegresar{
      padding:10px;
      color:#FFF;
      background:var(--colorRojo);
      cursor:pointer;
      border:none;
      font-family:negra;
      font-size:17px;
      border-radius: 5px;
      padding-left: 50px;
      width:calc(100% - 80px);
      text-align: left;
      position:relative;
      margin-bottom: 15px;
  }
  .btnGrl{
      padding:10px;
      color:#FFF;
      background:var(--colorRosaMexicano);
      cursor:pointer;
      border:none;
      font-family:negra;
      font-size:17px;
      border-radius: 5px;
      padding-left: 50px;
      width:calc(100% - 80px);
      text-align: left;
      position:relative;
      margin-bottom: 15px;
  }
  .btnGrlB{
      padding:10px;
      color:#FFF;
      background:var(--colorAzulClaro);
      cursor:pointer;
      border:none;
      font-family:negra;
      font-size:17px;
      border-radius: 5px;
      padding-left: 50px;
      width:calc(100% - 80px);
      text-align: left;
      position:relative;
      margin-bottom: 15px;
  }
  .btnIco{
      position:absolute;
      height:30px;
      width: 30px;
      top:5px;
      left:5px;
  }
  #separaTot{
      margin-top: 25px;
      margin-bottom: 15px;
      position:relative;
  }
  .btnAgregarUsr{
      position:absolute;
      cursor:pointer;
      width:auto;
      display:inline-block;
      text-decoration: none;
      padding:15px;
      padding-top: 2px;
      padding-bottom: 2px;
      color:#FFF;
      top:2px;
      right:15px;
      background:var(--colorRosaMexicano);
  }
  .tblAdm{
      width:calc(100% - 15px);
  }
  thead{
      background:var(--colorAzul);
  }
  thead th{
      color:#FFF;
      font-weight: bold;
      text-align: left;
      padding:5px;
  }
  tbody td{
      padding:5px;
  }
  .trI1{
      background: var(--colorRosaMexicanoSLigero);
  }
  .trI2{
      background: #FFF;
  }
  .titSepa{
      margin-bottom: -12px;
      font-family: negra;
      font-size:12px;
  }
  .conteInt{
      text-align: right;
      padding:5px;
  }
  .imgInterac{
      height:24px;
      width:auto;
  }
  .conteConte{
      border:0px solid var(--colorAzul);
      padding:8px;
      padding-top: 1px;
      padding-bottom: 1px;
      margin-right: 5px;
      display:inline-block;
      position:relative;
      bottom:6px;
      text-align: center;
      color:var(--colorAzul);
  }
  .linkModal{
      
      color:var(--colorAzul);
      cursor:pointer;
  }
  .modal{
      position: fixed;
      top:0;
      left:0;
      background:rgb(0,0,0,.7);
      width:100%;
      height:100%;
      display:none;
      z-index: 99999999999999999999999999999;
  }
  .ventanaModal{
      background:#FFF;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
      padding:0;
      width:1200px;
      max-width: 90%;
      display:inline-block;
      height: auto;
      max-height: 80vh;
      overflow-y: auto;
  }
  .CerrarModal{
      color:#FFF;
      background:var(--colorRojo);
      font-family: negra;
      position:absolute;
      top:0;
      right:0;
      font-size:14px;
      text-decoration: none;
      padding:2px;
      padding-left:7px;
      padding-right: 7px;
      cursor:pointer;
  }
  .ConteEmojo{
      position:relative;
      padding:5px;
      padding-left: 40px;
      width:30px;
      height:30px;
      display:table-cell;
      vertical-align: middle;
      cursor:pointer;
      transition:1s;
  }
  #ConteEmojo{
      background:var(--colorAzulClaro);
  }
  .emoji{
      height:30px;
      width:30px;
      position:absolute;
      left:5px;
      top:5px;
  }
  .tituloModal{
      width:60px;
      display:inline-block;
      vertical-align: top;
      position:fixed;
  }
  .conteModal{
      width:calc(100% - 85px);
      display:inline-block;
      vertical-align: top;
      padding:5px;
      padding-right: 10px;
      line-height: 1.8;
      position:relative;
      left: 60px;
  }
@media screen and (max-width: 750px) {
    .tituloUsr{
        display:none;
    }
    .tituloUsrB{
        display:inline-block;
        
    }
    .seccionMenu{
        width:40px;
        position:fixed;
        top:65px;
        left:10px;
    }
    .seccionPosts{
        width:calc(100% - 60px);
        position:relative;
        left:60px;
    }
    .btnAQuitar{
        display:none;
    }
    #heightMM{
        height:20px;
        padding-left: 30px;
    }
}
.vsInvs{
    display:inline-block;
} 
@media screen and (max-width: 450px) {
    .vsInvs{
        display:block;
        width:100%;
        height:5px;
    }
}
  
/*Paginador automatico*/
#card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  height: auto;
  width: calc(100% - 25px);
  margin: 8px;
  border-radius: 5px;
  transition: all 200ms ease-in-out;
  display: inline-block;
  position:relative;
  background:#FFF;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card-actions {
  margin: 8px;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#loader {
  display: flex;
}

.skeleton-card {
  height: 55vh;
  width: calc(100% - 20px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  position: relative;
  background-color: #eaeaea;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  animation: load 1s infinite;
}

@keyframes load {
  100% {
    transform: translateX(100%);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .skeleton-card::after {
    animation: none;
  }
}