.topic,.more {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 250px;
    /*opacity: 0.9;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    /*transition: opacity 0.3s;  */
    padding: 15px;
    border-radius: 15px
}

.topic span {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    /*opacity: 0.7;*/
    bottom: 0;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
    left: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    transform: translateY(-20%); /* Cambiar el valor de translateY a 0% */
    transition: transform 0.3s, font-size 0.3s;
    width: 100%;
}

/*.topic:hover {opacity: 1;}*/
.topic:hover span {transform: translateY(-100px);font-size: 1.5em;}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {    
    background-color: var(--borderline);
    border-color:var(--borderline);
    border-radius: 50%;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    border-radius: 50% !important;
}
.pagination > li > a, .pagination > li > span, .pagination > li > a, .pagination > li > span {
    border-radius: 50% !important;
}



.slider {width: 50%;margin: 100px auto;}
.slick-slide {margin: 0px 20px;width:250px;}
.slick-slide img {width: 100%;}
.slick-prev:before,.slick-next:before {color: black;}
.slick-slide {transition: all ease-in-out .3s;opacity: .2;}
.slick-active {opacity: .5;}
.slick-current {opacity: 1;}
.slider-prod .topic{width:100% !important;background-size: contain !important;}
.slider-prod .topic span{padding: 5px !important;}
.slider-prod .topic:hover span {transform: translateY(-100px);font-size: 1em !important;}


    
.x_blue .x_panel {background-image: linear-gradient(to bottom right, #589FE5, #74DAC4);
    border-radius:15px;}
.x_orange .x_panel {background-image: linear-gradient(to bottom right, #F4C28E, #E67163);
    border-radius:15px;}
.x_violet .x_panel {background-image: linear-gradient(to bottom right, #D45BA1, #A784E0);
    border-radius:15px;}

.x_transparent .x_panel{
    background:transparent !important;
    border:0px;
}

.x_color .elements{background-color:#fff;border-radius:15px;}
.x_color .x_content{margin-top:10px; }
.x_color a h2{font-weight: bold;font-size:22px;color:#fff;}
.x_color .x_title{border:0px;}

.cirle-a{float:right;margin-right: 15px}
.x_color .cirle-a svg{position:absolute;top:-50px;width:50px;}

.cirle-b{margin-left: -30px}
.cirle-b svg{position:absolute;width:200px;bottom:-10px;left:-18px;overflow: hidden}
.cirle-b{border-bottom-left-radius: 15px;}
.x_color svg circle{ stroke-width: 160;opacity: 0.1;}
.x_hcolor{margin-bottom: 40px}
.x_hcolor svg circle{ stroke-width: 160;opacity: 0.1;}
.x_hcolor .cirle-a svg{position:absolute;top:-28px;width:50px;}
.x_hcolor .x_content{font-weight: bold;font-size:22px;color:#fff;}

.sitem{margin-bottom:15px;}
.btn-more{position: absolute;
    top: 100px;    
    /*left: 30%; */
    /*width:100px;*/
    transform: translateY(-50%);
    opacity: 0.3;
   /* height:50px;    */
    display: flex !important;
    align-items: center  !important;
    justify-content: center  !important;
    border-radius:15px  !important;
    color:#fff !important;
    font-size:15px;
    font-weight: bold  !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
  }