.hide { display: none;}
.show { display: block;} 
.m0{ margin: 0px;}
.mt40 { margin-top: 40px; }
.mb20 { margin-bottom: 20px; }
.mb40 { margin-bottom: 40px; }
.mb60 { margin-bottom: 60px; }
.mb80 { margin-bottom: 80px; }
.mt80 { margin-top: 80px;}
.mt100 { margin-top: 100px;} 
.grab {cursor: -webkit-grab; cursor: grab;}
.green{ color: #6da847;}
.white{ color: #fff!important;}
.orange{ color:#f2993e!important;}
.purplr{ color: #484980;}
.h100{ height: 100px; }
.h80{ height: 80px; }
.border-solid { border: solid #ccc 1px;}
.grab { cursor: grab;}
.bg-orange { background: #f2993e; }
.bg-gritsa { background: #8b85b2; }
.desc-h { font-size: 33px; line-height: 42px; text-align: justify;}
.uppercase { text-transform: uppercase;}
.f70 h1{ font-size: 65px!important;}
.f24 { font-size: 24px!important;}
.f30 { font-size: 30px!important;}
.f34 { font-size: 34px!important;}
.fixed { position: fixed;}
.dark{ color: #3c3c3c!important;}
.justifica { text-align: justify!important;}
.rounded { border-radius: 4px;}
.border { border: solid 3px #333; }
#top-sticky { margin-right: -120px; padding-top:2%; }
.auto-content {content-visibility: auto;}
.bold { font-weight: bold; }

.top-social-bookmark-b {
    float: right;
}

.book-table-popup {
    float: right;
    padding: 5px;
}

.top-social-bookmark-b ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.top-social-bookmark-b ul li {
    display: inline;
}

.top-social-bookmark-b ul li a {
    color: #6EAA49;
  
    display: inline-block;
    font-size: 14px;
    height: 39px;
    margin: 0 -2.5px;
    padding: 6px;
    text-align: center;
    width: 40px;
}

.top-social-bookmark-b ul li a:hover {
    background: #fff;
      color: #F3993D;
}

.top-social-bookmark-b ul li:last-child a {
    margin-right: -5px;
}



@media only screen and (min-width: 360px) and (max-width: 768px) {
	.only-movil {
		display: block !important;
	}

	.hide-movil {
		display: none !important;
	}  
    /* h1, h2, h3 { font-size: 22px;}  */


    .slider-area h1 span {
        font-weight: 700;
         font-size: 40px; 
    }

    .slider-area h2 span {
        font-weight: 500;
         font-size: 40px; 
    } 
    
    .desc-h {font-size: 18px; line-height: 22px; padding:20px;}

    .f70 h1{ font-size: 35px!important;}

    #top-sticky { margin-right: -120px; padding-top:1%; } 

}



.demo-link {
    position: relative;
    text-align: center;
    overflow: hidden;
    height: 100%;
    /* margin-bottom: 50px; */
    border-radius: 8px;
    border-top: solid 2px #ccc;
  }

  /* Efecto Hover en el enlace */
  .demo-link a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .demo-link a:hover::before {
    opacity: 0.7;
  }

  /* Estilos para la imagen */
  .demo-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease, transform 0.5s ease;
    backface-visibility: hidden;
    opacity: 1;
  }

  /* Estilos para el texto inferior */
  .demo-link p {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #000;
    color: #d0963e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin: 0;
    opacity: 1;
    transition: background 0.3s, color 0.3s, opacity 0.3s;
  }

  .demo-link a:hover p {
    background: #d0963e;
    color: #fff;
    opacity: 0.3;
  }

  /* Texto central */
  .demo-link .text {
    color: white;
    font-weight: 400;
    font-size: 18px;
    padding: 16px 32px;
    text-transform: uppercase;
  }

  /* Estilo de la capa de texto en el medio */
  .demo-link .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
    z-index: 9;
  }

  .demo-link:hover .middle {
    opacity: 1;
  }