/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
 font-size: 28px;
 font-weight: bold;
 color: #fff;
}

.ribbon {
 --r: .8em;
 /* control the cutout */
 z-index: 9;
 position: absolute;
 border-inline: .5em solid #0000;
 padding: .5em .2em calc(var(--r) + .2em);
 clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - .5em) calc(100% - var(--r)), 50% 100%, .5em calc(100% - var(--r)), 0 100%);
 background:
  radial-gradient(50% .2em at top, #000a, #0000) border-box,
  #bd1550 padding-box;
 /* the color  */
 width: fit-content;
}





.asagiSabit {
 position: fixed;
 bottom: 5px;
 right: 5px;
 z-index: 999999999999;
}

.whatsappBlock a {
 display: inline-block;
 height: 30px;
 background: #65BC54;
 padding: 5px 10px;
 color: #fff !important;
 font-weight: bold;
}

.whatsappBlock a img {
 height: 100%;
 width: auto;
}

img {
 vertical-align: middle;
}





.categorie {
 width: 100%;
 height: 100%;
}

.brand {
 margin-top: 10px;
 width: 100%;
 height: 100%;
}

.label {
 width: 100%;
 height: 100%;
 border-radius: 45px;
 background: var(--mainbkcolor);
 color: var(--maintxcolor) !important;
}

.menu {
 margin-bottom: 10px;
 width: 100%;
 height: 100%;
}

.menu2 {
 background: var(--menufillcolor);
 margin-bottom: 10px;
 z-index: 99;
 width: 100%;
 height: 100%;
 margin-top: 5px;
}

.header {
 padding-bottom: 15px;
}

.pager {
 width: 100%;
 height: 100%;
 text-align: center;
}

.labcatse {
 width: 100%;
 height: 100%;
 background: var(--menubkcolor);
}



.content {
 height: 1000px;
}

.bannerimage {
 max-width: 100%;
}

.image .webix_template {
 position: relative;
 padding: unset;
 display: flex;
 align-items: center;
 justify-content: center;
 /*background: var(--mainbkcolor);*/
}

.zz {
 z-index: 99999999 !important;
}

.zom1 {
 display: flex;
 align-items: center;
 justify-content: left;
}

.zom {
 display: flex;
 align-items: center;
 justify-content: center;
}

.zomb {
 filter: drop-shadow(1px 2px 1px gray);
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--menubtcolor);
}

.zom0 {
 text-align: center;
 float: left;
 position: relative;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}


.f-1 {
 width: 100%;
}

.f-2 {
 width: 100%;

}



.spot-1 .fa {
 font-size: 35px;
 color: #deb42e;
}

.spot-1 {
 border-top: 1px solid #e5e5e5;
 text-align: center;
 padding: 15px 15px 15px 15px;
}

.spot-1 a {
 display: block;
 font-size: 1.125rem;
 margin-top: 0px;
 color: inherit;
 line-height: 4.1em;
}


.feature {
 padding: 2px 2px 2px 2px;
 margin-top: 5px;
 color: var(--maintxcolor);
 box-shadow: 1px 0px 2px #888888;
 background: var(--mainbkcolor);
 border-radius: 45px !important;
 font-size: large
}


.feature-1 .fa {
 font-size: 35px;
 color: var(--mainbkcolor);
}

/*
.feature-1 {
 background: whitesmoke; 
 border-top: 1px solid #e5e5e5;
}
*/

.feature-1 a {
 display: block;
 font-size: 1.125rem;
 margin-top: 0px;
 color: inherit;
 line-height: 4.1em;
}


.banner {
 margin-top: 10px;
 margin-bottom: 10px;
}


.disponibile {
 margin-top: 5px;
 display: flex;
 justify-content: center;
 border-radius: 7px;
 color: white;
 padding: 4px 9px 6px 9px;
 box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}




.flyout {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 width: 100%;
}

.flyout li:first-child {
 font-size: small;
}

.flyout li:not(:first-child) {
 font-size: smaller;
}




.avat.webix_list-x .webix_list_item {
 text-align: center;
 border-right: 0;
}

/*
.avat.webix_list-x{
 overflow-x: auto !important;
}
*/
.avatar {
 margin: 5px;
 display: inline-block;
 vertical-align: middle;
 position: relative;
 background: var(--mainbkcolor);
 color: var(--maintxcolor);
 border-radius: 50%;
 height: 60%;
 width: 80%;
}

.avatar__line {
 text-align: center;
 font-size: smaller;
 font-weight: bold;
 color: black;
 line-height: normal;
 white-space: break-spaces;
}

.avatar__letters {
 left: 50%;
 position: absolute;
 top: 50%;
 transform: translate(-50%, -50%);
 text-transform: uppercase;
}

.column10 {
 float: left;
 width: 10%;
}

.column20 {
 float: left;
 width: 20%;
}

.column15 {
 float: left;
 width: 15%;
}

.column30 {
 float: left;
 width: 30%;
}

.column40 {
 float: left;
 width: 40%;
}

.column70 {
 float: left;
 width: 70%;
 padding: 5px;
}


.row:after {
 content: "";
 display: table;
 clear: both;
}

@media screen and (max-width: 600px) {

 .column15,
 .column20,
 .column70,
 .column30 {
  width: 100%;
 }
}










.swiper {
 width: 100%;
 height: 100%;
}

.swiper-slide {
 text-align: center;
 font-size: 18px;
 background: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}