.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=tel],.iti input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width:500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{padding:5px 10px;outline:0}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0,0,0,.05)}.iti__country-name,.iti__dial-code,.iti__flag-box{vertical-align:middle}.iti__country-name,.iti__flag-box{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=tel],.iti--allow-dropdown input[type=text],.iti--separate-dial-code input,.iti--separate-dial-code input[type=tel],.iti--separate-dial-code input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:14px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cr{height:12px;background-position:-1115px 0}.iti__flag.iti__cu{height:10px;background-position:-1137px 0}.iti__flag.iti__cv{height:12px;background-position:-1159px 0}.iti__flag.iti__cw{height:14px;background-position:-1181px 0}.iti__flag.iti__cx{height:10px;background-position:-1203px 0}.iti__flag.iti__cy{height:14px;background-position:-1225px 0}.iti__flag.iti__cz{height:14px;background-position:-1247px 0}.iti__flag.iti__de{height:12px;background-position:-1269px 0}.iti__flag.iti__dg{height:10px;background-position:-1291px 0}.iti__flag.iti__dj{height:14px;background-position:-1313px 0}.iti__flag.iti__dk{height:15px;background-position:-1335px 0}.iti__flag.iti__dm{height:10px;background-position:-1357px 0}.iti__flag.iti__do{height:14px;background-position:-1379px 0}.iti__flag.iti__dz{height:14px;background-position:-1401px 0}.iti__flag.iti__ea{height:14px;background-position:-1423px 0}.iti__flag.iti__ec{height:14px;background-position:-1445px 0}.iti__flag.iti__ee{height:13px;background-position:-1467px 0}.iti__flag.iti__eg{height:14px;background-position:-1489px 0}.iti__flag.iti__eh{height:10px;background-position:-1511px 0}.iti__flag.iti__er{height:10px;background-position:-1533px 0}.iti__flag.iti__es{height:14px;background-position:-1555px 0}.iti__flag.iti__et{height:10px;background-position:-1577px 0}.iti__flag.iti__eu{height:14px;background-position:-1599px 0}.iti__flag.iti__fi{height:12px;background-position:-1621px 0}.iti__flag.iti__fj{height:10px;background-position:-1643px 0}.iti__flag.iti__fk{height:10px;background-position:-1665px 0}.iti__flag.iti__fm{height:11px;background-position:-1687px 0}.iti__flag.iti__fo{height:15px;background-position:-1709px 0}.iti__flag.iti__fr{height:14px;background-position:-1731px 0}.iti__flag.iti__ga{height:15px;background-position:-1753px 0}.iti__flag.iti__gb{height:10px;background-position:-1775px 0}.iti__flag.iti__gd{height:12px;background-position:-1797px 0}.iti__flag.iti__ge{height:14px;background-position:-1819px 0}.iti__flag.iti__gf{height:14px;background-position:-1841px 0}.iti__flag.iti__gg{height:14px;background-position:-1863px 0}.iti__flag.iti__gh{height:14px;background-position:-1885px 0}.iti__flag.iti__gi{height:10px;background-position:-1907px 0}.iti__flag.iti__gl{height:14px;background-position:-1929px 0}.iti__flag.iti__gm{height:14px;background-position:-1951px 0}.iti__flag.iti__gn{height:14px;background-position:-1973px 0}.iti__flag.iti__gp{height:14px;background-position:-1995px 0}.iti__flag.iti__gq{height:14px;background-position:-2017px 0}.iti__flag.iti__gr{height:14px;background-position:-2039px 0}.iti__flag.iti__gs{height:10px;background-position:-2061px 0}.iti__flag.iti__gt{height:13px;background-position:-2083px 0}.iti__flag.iti__gu{height:11px;background-position:-2105px 0}.iti__flag.iti__gw{height:10px;background-position:-2127px 0}.iti__flag.iti__gy{height:12px;background-position:-2149px 0}.iti__flag.iti__hk{height:14px;background-position:-2171px 0}.iti__flag.iti__hm{height:10px;background-position:-2193px 0}.iti__flag.iti__hn{height:10px;background-position:-2215px 0}.iti__flag.iti__hr{height:10px;background-position:-2237px 0}.iti__flag.iti__ht{height:12px;background-position:-2259px 0}.iti__flag.iti__hu{height:10px;background-position:-2281px 0}.iti__flag.iti__ic{height:14px;background-position:-2303px 0}.iti__flag.iti__id{height:14px;background-position:-2325px 0}.iti__flag.iti__ie{height:10px;background-position:-2347px 0}.iti__flag.iti__il{height:15px;background-position:-2369px 0}.iti__flag.iti__im{height:10px;background-position:-2391px 0}.iti__flag.iti__in{height:14px;background-position:-2413px 0}.iti__flag.iti__io{height:10px;background-position:-2435px 0}.iti__flag.iti__iq{height:14px;background-position:-2457px 0}.iti__flag.iti__ir{height:12px;background-position:-2479px 0}.iti__flag.iti__is{height:15px;background-position:-2501px 0}.iti__flag.iti__it{height:14px;background-position:-2523px 0}.iti__flag.iti__je{height:12px;background-position:-2545px 0}.iti__flag.iti__jm{height:10px;background-position:-2567px 0}.iti__flag.iti__jo{height:10px;background-position:-2589px 0}.iti__flag.iti__jp{height:14px;background-position:-2611px 0}.iti__flag.iti__ke{height:14px;background-position:-2633px 0}.iti__flag.iti__kg{height:12px;background-position:-2655px 0}.iti__flag.iti__kh{height:13px;background-position:-2677px 0}.iti__flag.iti__ki{height:10px;background-position:-2699px 0}.iti__flag.iti__km{height:12px;background-position:-2721px 0}.iti__flag.iti__kn{height:14px;background-position:-2743px 0}.iti__flag.iti__kp{height:10px;background-position:-2765px 0}.iti__flag.iti__kr{height:14px;background-position:-2787px 0}.iti__flag.iti__kw{height:10px;background-position:-2809px 0}.iti__flag.iti__ky{height:10px;background-position:-2831px 0}.iti__flag.iti__kz{height:10px;background-position:-2853px 0}.iti__flag.iti__la{height:14px;background-position:-2875px 0}.iti__flag.iti__lb{height:14px;background-position:-2897px 0}.iti__flag.iti__lc{height:10px;background-position:-2919px 0}.iti__flag.iti__li{height:12px;background-position:-2941px 0}.iti__flag.iti__lk{height:10px;background-position:-2963px 0}.iti__flag.iti__lr{height:11px;background-position:-2985px 0}.iti__flag.iti__ls{height:14px;background-position:-3007px 0}.iti__flag.iti__lt{height:12px;background-position:-3029px 0}.iti__flag.iti__lu{height:12px;background-position:-3051px 0}.iti__flag.iti__lv{height:10px;background-position:-3073px 0}.iti__flag.iti__ly{height:10px;background-position:-3095px 0}.iti__flag.iti__ma{height:14px;background-position:-3117px 0}.iti__flag.iti__mc{height:15px;background-position:-3139px 0}.iti__flag.iti__md{height:10px;background-position:-3160px 0}.iti__flag.iti__me{height:10px;background-position:-3182px 0}.iti__flag.iti__mf{height:14px;background-position:-3204px 0}.iti__flag.iti__mg{height:14px;background-position:-3226px 0}.iti__flag.iti__mh{height:11px;background-position:-3248px 0}.iti__flag.iti__mk{height:10px;background-position:-3270px 0}.iti__flag.iti__ml{height:14px;background-position:-3292px 0}.iti__flag.iti__mm{height:14px;background-position:-3314px 0}.iti__flag.iti__mn{height:10px;background-position:-3336px 0}.iti__flag.iti__mo{height:14px;background-position:-3358px 0}.iti__flag.iti__mp{height:10px;background-position:-3380px 0}.iti__flag.iti__mq{height:14px;background-position:-3402px 0}.iti__flag.iti__mr{height:14px;background-position:-3424px 0}.iti__flag.iti__ms{height:10px;background-position:-3446px 0}.iti__flag.iti__mt{height:14px;background-position:-3468px 0}.iti__flag.iti__mu{height:14px;background-position:-3490px 0}.iti__flag.iti__mv{height:14px;background-position:-3512px 0}.iti__flag.iti__mw{height:14px;background-position:-3534px 0}.iti__flag.iti__mx{height:12px;background-position:-3556px 0}.iti__flag.iti__my{height:10px;background-position:-3578px 0}.iti__flag.iti__mz{height:14px;background-position:-3600px 0}.iti__flag.iti__na{height:14px;background-position:-3622px 0}.iti__flag.iti__nc{height:10px;background-position:-3644px 0}.iti__flag.iti__ne{height:15px;background-position:-3666px 0}.iti__flag.iti__nf{height:10px;background-position:-3686px 0}.iti__flag.iti__ng{height:10px;background-position:-3708px 0}.iti__flag.iti__ni{height:12px;background-position:-3730px 0}.iti__flag.iti__nl{height:14px;background-position:-3752px 0}.iti__flag.iti__no{height:15px;background-position:-3774px 0}.iti__flag.iti__np{height:15px;background-position:-3796px 0}.iti__flag.iti__nr{height:10px;background-position:-3811px 0}.iti__flag.iti__nu{height:10px;background-position:-3833px 0}.iti__flag.iti__nz{height:10px;background-position:-3855px 0}.iti__flag.iti__om{height:10px;background-position:-3877px 0}.iti__flag.iti__pa{height:14px;background-position:-3899px 0}.iti__flag.iti__pe{height:14px;background-position:-3921px 0}.iti__flag.iti__pf{height:14px;background-position:-3943px 0}.iti__flag.iti__pg{height:15px;background-position:-3965px 0}.iti__flag.iti__ph{height:10px;background-position:-3987px 0}.iti__flag.iti__pk{height:14px;background-position:-4009px 0}.iti__flag.iti__pl{height:13px;background-position:-4031px 0}.iti__flag.iti__pm{height:14px;background-position:-4053px 0}.iti__flag.iti__pn{height:10px;background-position:-4075px 0}.iti__flag.iti__pr{height:14px;background-position:-4097px 0}.iti__flag.iti__ps{height:10px;background-position:-4119px 0}.iti__flag.iti__pt{height:14px;background-position:-4141px 0}.iti__flag.iti__pw{height:13px;background-position:-4163px 0}.iti__flag.iti__py{height:11px;background-position:-4185px 0}.iti__flag.iti__qa{height:8px;background-position:-4207px 0}.iti__flag.iti__re{height:14px;background-position:-4229px 0}.iti__flag.iti__ro{height:14px;background-position:-4251px 0}.iti__flag.iti__rs{height:14px;background-position:-4273px 0}.iti__flag.iti__ru{height:14px;background-position:-4295px 0}.iti__flag.iti__rw{height:14px;background-position:-4317px 0}.iti__flag.iti__sa{height:14px;background-position:-4339px 0}.iti__flag.iti__sb{height:10px;background-position:-4361px 0}.iti__flag.iti__sc{height:10px;background-position:-4383px 0}.iti__flag.iti__sd{height:10px;background-position:-4405px 0}.iti__flag.iti__se{height:13px;background-position:-4427px 0}.iti__flag.iti__sg{height:14px;background-position:-4449px 0}.iti__flag.iti__sh{height:10px;background-position:-4471px 0}.iti__flag.iti__si{height:10px;background-position:-4493px 0}.iti__flag.iti__sj{height:15px;background-position:-4515px 0}.iti__flag.iti__sk{height:14px;background-position:-4537px 0}.iti__flag.iti__sl{height:14px;background-position:-4559px 0}.iti__flag.iti__sm{height:15px;background-position:-4581px 0}.iti__flag.iti__sn{height:14px;background-position:-4603px 0}.iti__flag.iti__so{height:14px;background-position:-4625px 0}.iti__flag.iti__sr{height:14px;background-position:-4647px 0}.iti__flag.iti__ss{height:10px;background-position:-4669px 0}.iti__flag.iti__st{height:10px;background-position:-4691px 0}.iti__flag.iti__sv{height:12px;background-position:-4713px 0}.iti__flag.iti__sx{height:14px;background-position:-4735px 0}.iti__flag.iti__sy{height:14px;background-position:-4757px 0}.iti__flag.iti__sz{height:14px;background-position:-4779px 0}.iti__flag.iti__ta{height:10px;background-position:-4801px 0}.iti__flag.iti__tc{height:10px;background-position:-4823px 0}.iti__flag.iti__td{height:14px;background-position:-4845px 0}.iti__flag.iti__tf{height:14px;background-position:-4867px 0}.iti__flag.iti__tg{height:13px;background-position:-4889px 0}.iti__flag.iti__th{height:14px;background-position:-4911px 0}.iti__flag.iti__tj{height:10px;background-position:-4933px 0}.iti__flag.iti__tk{height:10px;background-position:-4955px 0}.iti__flag.iti__tl{height:10px;background-position:-4977px 0}.iti__flag.iti__tm{height:14px;background-position:-4999px 0}.iti__flag.iti__tn{height:14px;background-position:-5021px 0}.iti__flag.iti__to{height:10px;background-position:-5043px 0}.iti__flag.iti__tr{height:14px;background-position:-5065px 0}.iti__flag.iti__tt{height:12px;background-position:-5087px 0}.iti__flag.iti__tv{height:10px;background-position:-5109px 0}.iti__flag.iti__tw{height:14px;background-position:-5131px 0}.iti__flag.iti__tz{height:14px;background-position:-5153px 0}.iti__flag.iti__ua{height:14px;background-position:-5175px 0}.iti__flag.iti__ug{height:14px;background-position:-5197px 0}.iti__flag.iti__um{height:11px;background-position:-5219px 0}.iti__flag.iti__un{height:14px;background-position:-5241px 0}.iti__flag.iti__us{height:11px;background-position:-5263px 0}.iti__flag.iti__uy{height:14px;background-position:-5285px 0}.iti__flag.iti__uz{height:10px;background-position:-5307px 0}.iti__flag.iti__va{height:15px;background-position:-5329px 0}.iti__flag.iti__vc{height:14px;background-position:-5346px 0}.iti__flag.iti__ve{height:14px;background-position:-5368px 0}.iti__flag.iti__vg{height:10px;background-position:-5390px 0}.iti__flag.iti__vi{height:14px;background-position:-5412px 0}.iti__flag.iti__vn{height:14px;background-position:-5434px 0}.iti__flag.iti__vu{height:12px;background-position:-5456px 0}.iti__flag.iti__wf{height:14px;background-position:-5478px 0}.iti__flag.iti__ws{height:10px;background-position:-5500px 0}.iti__flag.iti__xk{height:15px;background-position:-5522px 0}.iti__flag.iti__ye{height:14px;background-position:-5544px 0}.iti__flag.iti__yt{height:14px;background-position:-5566px 0}.iti__flag.iti__za{height:14px;background-position:-5588px 0}.iti__flag.iti__zm{height:14px;background-position:-5610px 0}.iti__flag.iti__zw{height:10px;background-position:-5632px 0}.iti__flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(../js/plugins/intl-tel-input/img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti__flag{background-image:url(../js/plugins/intl-tel-input/img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
    background: #fff url('../js/plugins/slick/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('../js/plugins/slick/fonts/slick.eot');
    src: url('../js/plugins/slick/fonts/slick.eot?#iefix') format('embedded-opentype'), url('../js/plugins/slick/fonts/slick.woff') format('woff'), url('../js/plugins/slick/fonts/slick.ttf') format('truetype'), url('../js/plugins/slick/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus {
        color: transparent;
        outline: none;
        background: transparent;
    }

        .slick-prev:hover:before,
        .slick-prev:focus:before,
        .slick-next:hover:before,
        .slick-next:focus:before {
            opacity: 1;
        }

    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before {
        opacity: .25;
    }

    .slick-prev:before,
    .slick-next:before {
        font-family: 'slick';
        font-size: 20px;
        line-height: 1;
        opacity: .75;
        color: white;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '←';
}

[dir='rtl'] .slick-prev:before {
    content: '→';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '→';
}

[dir='rtl'] .slick-next:before {
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

            .slick-dots li button:hover,
            .slick-dots li button:focus {
                outline: none;
            }

                .slick-dots li button:hover:before,
                .slick-dots li button:focus:before {
                    opacity: 1;
                }

            .slick-dots li button:before {
                font-family: 'slick';
                font-size: 6px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                content: '•';
                text-align: center;
                opacity: .25;
                color: black;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            color: black;
        }
.slick-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: black;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease
}

    .slick-lightbox .slick-loading .slick-list {
        background-color: transparent
    }

    .slick-lightbox .slick-prev {
        left: 15px
    }

    .slick-lightbox .slick-next {
        right: 15px
    }

.slick-lightbox-hide {
    opacity: 0
}

    .slick-lightbox-hide.slick-lightbox-ie {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0)
    }

.slick-lightbox-hide-init {
    position: absolute;
    top: -9999px;
    opacity: 0
}

    .slick-lightbox-hide-init.slick-lightbox-ie {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0)
    }

.slick-lightbox-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slick-lightbox-slick-item {
    text-align: center;
    overflow: hidden
}

    .slick-lightbox-slick-item:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em
    }

.slick-caption-bottom .slick-lightbox-slick-item .slick-lightbox-slick-item .slick-lightbox-slick-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 20px
}

.slick-caption-dynamic .slick-lightbox-slick-item .slick-lightbox-slick-item .slick-lightbox-slick-caption {
    display: block;
    text-align: center
}

.slick-lightbox-slick-item-inner {
    display: inline-block;
    vertical-align: middle;
    max-width: 90%;
    max-height: 90%
}

.slick-lightbox-slick-img {
    margin: 0 auto;
    display: block;
    max-width: 90%;
    max-height: 90%
}

.slick-lightbox-slick-caption {
    margin: 10px 0 0;
    color: white
}

.slick-lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
    padding: 0;
    border: none
}

    .slick-lightbox-close:focus {
        outline: none
    }

    .slick-lightbox-close:before {
        font-family: "slick";
        font-size: 20px;
        line-height: 1;
        color: white;
        opacity: 0.85;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '×'
    }
/*#region globals*/

:root {
    --bs-border-color: #ccc;

    /* trilete.ro v2 palette (homepage redesign) */
    --brand: #08aadd;
    --brand-dark: #007fb8;
    --brand-deep: #07364b;
    --ink: #101418;
    --muted: #5f6872;
    --surface: #fff;
    --page: #f2f2f2;
    --line: #d8dde1;
    --shadow: 0 4px 12px rgba(0, 0, 0, .09);
    --content: 760px;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

a {
    color: #000;
    text-decoration: none;
}

    a:hover {
        color: #000;
        text-decoration: underline;
    }

    a.btn:hover {
        text-decoration: none;
    }

h1 {
    /* font-family: 'Arimo', sans-serif;*/
    font-weight: 800;
    font-style: normal;
    font-size: 1.6em;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
}

h2 {
    font-weight: 800;
    font-style: normal;
    font-size: 1.4em;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
}

h3 {
    font-weight: 800;
    font-style: normal;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
}

h4 {
    font-weight: 800;
    font-style: normal;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
}

    h1 a, h2 a, h3 a, h4 a {
        text-decoration: none;
    }

        h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
            text-decoration: underline;
        }

.field-validation-error {
    font-size: 0.9em;
    color: #ff0000;
}

.input-validation-error {
    border: 1px solid #FF0000 !important;
    box-shadow: 0px 0px 0px #FF0000;
}

.input-group:has(> .input-validation-error) { /* styles to apply to the li tag */
    border-radius: 0.375rem;
    border: 1px solid #FF0000 !important;
    box-shadow: 0px 0px 0px #FF0000;
}

.input-group .phone-no-input.input-validation-error {
    border: 1px solid #FF0000 !important;
    box-shadow: 0px 0px 0px #FF0000;
}


.input-group .input-validation-error {
    border: 0px !important;
    border-left: 0px solid #ccc !important;
}

label:has(> .field-validation-error) {
    color: red !important;
}

.input-validation-error.form-check-input[type=checkbox] {
    border-color: red !important;
}

input[type="button"], input[type="file"], input[type="submit"], input[type="reset"] {
    cursor: pointer;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn:active {
    outline: none !important;
    outline-offset: 0px !important;
}

.inline {
    display: inline-block;
}

.text-top {
    vertical-align: text-top;
}

.text-middle {
    vertical-align: middle;
}

.text-bottom {
    vertical-align: text-bottom;
}

.vertical-align-middle {
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.break-word {
    -ms-word-break: normal;
    word-break: normal;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.break-none {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: keep-all;
    word-break: keep-all;
    white-space: nowrap;
}

.break-all {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.navbar {
    padding: 0;
    text-align: center;
}

.image-container {
    width: 100%;
    height: 100%;
    padding-top: 52.35%;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

    .image-container:not(:has(img)) {
        background: url('../img/noimage.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .image-container.portrait:not(:has(img)) {
        padding-top: 140.35%;
    }

    .image-container.portrait:not(:has(img)) {
        padding-top: 52.35%;
    }

    .image-container:has(img) {
        /* max-height: 15%;*/
    }

    .image-container.portrait:has(img) {
        padding-top: 140.35%;
        /*  max-height: 37%;*/
    }

    .image-container.landscape:has(img) {
        padding-top: 52.35%;
        /*max-height: 37%;*/
    }


    .image-container .image {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .image-container .fill-container {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .image-container .fill-container img {
            /*flex-shrink: 0;*/
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
            object-fit: cover;
        }

@keyframes fadein {
    0% {
        opacity: 0.0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1.0;
    }
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 9999;
    height: 2rem;
    width: 2rem;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

    /* Transparent Overlay */
    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.4);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        /* hide "loading..." text */
        /*font: 0/0 a;*/
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1rem;
            height: 1rem;
            margin-top: -5.5rem;
            -webkit-animation: spinner 1500ms infinite linear;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5rem;
            -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5rem 0 0 0, rgba(0, 0, 0, 0.75) 1.1rem 1.1rem 0 0, rgba(0, 0, 0, 0.75) 0 1.5rem 0 0, rgba(0, 0, 0, 0.75) -1.1rem 1.1rem 0 0, rgba(0, 0, 0, 0.5) -1.5rem 0 0 0, rgba(0, 0, 0, 0.5) -1.1rem -1.1rem 0 0, rgba(0, 0, 0, 0.75) 0 -1.5rem 0 0, rgba(0, 0, 0, 0.75) 1.1rem -1.1rem 0 0;
            box-shadow: rgba(0, 0, 0, 0.75) 1.5rem 0 0 0, rgba(0, 0, 0, 0.75) 1.1rem 1.1rem 0 0, rgba(0, 0, 0, 0.75) 0 1.5rem 0 0, rgba(0, 0, 0, 0.75) -1.1rem 1.1rem 0 0, rgba(0, 0, 0, 0.75) -1.5rem 0 0 0, rgba(0, 0, 0, 0.75) -1.1rem -1.1rem 0 0, rgba(0, 0, 0, 0.75) 0 -1.5rem 0 0, rgba(0, 0, 0, 0.75) 1.1rem -1.1rem 0 0;
        }

    .loading span {
        color: #000;
        font-size: 17px;
        margin-top: 20px;
        position: relative;
        width: 100%;
        text-align: center;
        margin-left: -143px;
        width: 300px;
        background: transparent;
        display: block;
    }
/* end defaults Tech Tribe */

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.margin-auto {
    margin: 0 auto;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.breadcrumb {
    padding: 0px 0px !important;
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
}

    .breadcrumb li {
        /*   font-size: 110%;
        font-weight: 700;*/
        display: inline-block;
    }

    .breadcrumb a {
    }

    .breadcrumb > li + li:before {
        content: "/";
        padding: 0px 5px !important;
    }

.navbar-toggler-icon {
    color: inherit !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

    .navbar-toggler-icon:focus {
        outline: none;
    }

[aria-expanded='false'] .navbar-toggler-icon, [aria-expanded='false'] .search-toggler-icon {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition: background-image .2s linear;
    transition: background-image .2s linear;
}

[aria-expanded='true'] .navbar-toggler-icon, [aria-expanded='true'] .search-toggler-icon {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition: background-image .2s linear;
    transition: background-image .2s linear;
    background-image: url("../lib/svg/plus.svg?v_1");
}


.bigBox .bigboxicon {
    font-size: 30px;
    text-align: left;
    position: absolute;
    top: 120px;
    left: 6px;
    z-index: 0;
}

.bigBox .bigboxnumber {
    width: 100%;
    text-align: right;
    font-size: 25px;
}

#divSmallBoxes {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

.SmallBox {
    position: absolute;
    right: 5px;
    top: 20px;
    width: 420px;
    color: #fff;
    z-index: 9999;
    overflow: hidden;
    border: 1px solid transparent;
}

    .SmallBox:hover {
        border: 1px solid #fff;
        cursor: pointer;
    }

    .SmallBox .foto {
        font-size: 50px;
        position: absolute;
        left: 17px;
    }

    .SmallBox .textoFull {
        width: 93%;
        float: left;
        padding-left: 20px;
    }

    .SmallBox .textoFoto {
        width: 78%;
        margin: 3px 20px 3px 80px;
        float: left;
    }

.miniPic {
    position: absolute;
    bottom: 8px;
    right: 9px;
}

.miniIcono {
    height: 100%;
    font-size: 20px;
}

.SmallBox span {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -1px;
    display: block;
    margin: 4px 0;
}

.SmallBox p {
    font-size: 13px;
    margin-top: 2px;
}

@media screen and (max-width:450px) and (max-width:767px) {
    #divSmallBoxes {
        position: fixed;
        width: 90%;
        right: 0;
        top: 0;
    }

    .SmallBox {
        width: 95%;
    }

        .SmallBox:hover {
            box-shadow: 0 0 10px #888;
            cursor: pointer;
        }

        .SmallBox span {
            font-size: 16px;
        }

        .SmallBox p {
            font-size: 12px;
            margin-top: 2px;
        }

        .SmallBox .textoFull {
            width: 93%;
            float: left;
            padding-left: 20px;
        }

        .SmallBox .textoFoto {
            width: 55%;
            margin: 3px 20px 3px 80px;
            float: left;
        }

    .bigBox {
        position: fixed;
        right: 10px;
        bottom: 10px;
        background-color: #004d60;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        width: 88%;
        height: 150px;
        color: #fff;
        z-index: 99999;
    }

    .divMessageBox {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.6);
        z-index: 100000;
    }

    .MessageBoxContainer {
        top: 25%;
        color: #fff;
        position: relative;
        width: 100%;
        background-color: #232323;
    }

    .MessageBoxMiddle {
        position: relative;
        left: 0;
        width: 100%;
        padding: 3px;
    }

        .MessageBoxMiddle .MsgTitle {
            font-size: 22px;
        }

        .MessageBoxMiddle .pText {
            font-size: 13px;
        }

    .MessageBoxContainer input, .MessageBoxContainer select {
        width: 50%;
        padding: 5px;
    }

    .MessageBoxButtonSection {
        width: 100%;
        height: 30px;
    }

        .MessageBoxButtonSection button {
            float: right;
            margin-right: 5px;
            padding-left: 15px;
            padding-right: 15px;
        }
}


.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .animated.fast {
        -webkit-animation-duration: .4s;
        -moz-animation-duration: .4s;
        -ms-animation-duration: .4s;
        -o-animation-duration: .4s;
        animation-duration: .4s;
    }

/*#endregion globals*/

/*#region shop*/

html {
    font-size: 14px;
    line-height: 1.2em;
}

body {
    background-color: #f2f2f2;
    color: #000;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 16px;
    line-height: 1.4em;
    -webkit-font-smoothing: antialiased;
}

hr {
    opacity: 1;
    margin: 0;
}

a {
    text-decoration: underline;
    color: #000;
}

    a:hover {
        color: #000;
        text-decoration: none;
    }

.text-blue {
    color: var(--brand);
}

    .text-blue a {
        color: var(--brand);
    }

        .text-blue a:hover {
            color: var(--brand);
        }

.bg-blue {
    background-color: var(--brand);
}

.btn.bg-blue:hover {
    background-color: var(--brand);
    opacity: 0.7;
}

.text-dark {
    color: #182627;
}

    .text-dark a {
        color: #182627;
    }

        .text-dark a:hover {
            color: #182627;
        }

.bg-dark {
    background-color: #182627;
}

.text-white {
    color: #fff;
}

    .text-white a {
        color: #fff;
    }

        .text-white a:hover {
            color: #fff;
        }

.bg-white {
    background-color: #fff;
}

.contents {
    padding: 0 1rem;
    /* pages match the homepage column (user 2026-08-11): --content = 760px */
    max-width: var(--content);
    margin: 0px auto;
    overflow: hidden;
}

.contents-slider {
    width: 100%;
    max-width: 1920px;
    margin: 0px auto;
}

.pagination {
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin: 20px 0px;
}

    .pagination .pager-center li, .pagination .pager-left li, .pagination .pager-right li {
        display: inline-block;
        vertical-align: middle;
        margin: 2px;
    }

        .pagination .pager-center li a, .pagination .pager-left li a, .pagination .pager-right li a {
            display: inline-block;
            vertical-align: middle;
            /*  background-color: #000;
            color: #FFF;*/
            padding: 5px;
            text-decoration: none !important;
        }

        .pagination .pager-right li > a > span {
            content: ' ';
            width: 1em;
            height: 1em;
            display: inline-block;
            vertical-align: middle;
            content: "";
            background: no-repeat center center;
            background-size: 100% 100%;
            /*background-image: url(../img/icons/2arrows.svg?v_1);*/
        }

        .pagination .pager-left li > a > span {
            content: ' ';
            width: 1em;
            height: 1em;
            display: inline-block;
            vertical-align: middle;
            content: "";
            background: no-repeat center center;
            background-size: 100% 100%;
            /*background-image: url(../img/icons/2arrows.svg?v_1);*/
            /*   -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);*/
        }

    .pagination .page-item {
        display: inline-block;
        vertical-align: middle;
    }

    .pagination .pager-center > .active > a,
    .pagination .pager-center > .active > span,
    .pagination .pager-center > .active > a:hover,
    .pagination .pager-center > .active > span:hover,
    .pagination .pager-center > .active > a:focus,
    .pagination .pager-center > .active > span:focus {
        background-color: var(--brand);
        color: #fff;
    }

.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.btn-go {
}

.iti {
    width: 100%;
}


.text-hr-line {
    min-height: 1px;
    position: relative;
}

    .text-hr-line::before {
        left: 0;
        top: 52%;
        right: 0;
        height: 1px;
        content: "";
        position: absolute;
        background: #e5e5e5;
    }

    .text-hr-line > span {
        padding: 0 10px;
        background: #fff;
        position: relative;
        display: inline-block;
    }



.inline_error_mark {
    color: #CC0000;
    padding: 4px 0;
}

.modal-header.no-border {
    border-bottom: none;
}

.modal-footer.no-border {
    border-top: none;
}

.sticky-header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
}

    .sticky-header.fixed.absolute {
        position: absolute;
    }

.default-header, .mobile-header {
    text-align: center;
}

.logo {
    display: inline-block;
    height: auto;
    width: 100%;
}

    .logo .icon-logo {
        height: 50px;
        width: 100%;
        background: url("../img/logo.png") no-repeat center center;
        background-size: contain;
    }

/* site-header brand logo sizing (trilete.ro v2) - same .icon-logo background-image mechanism above,
   just capped/aligned to match the prototype's img-based .brand-logo since ours is a background-image div */
.site-header .brand-logo {
    display: block;
    width: min(100%, 205px);
    height: auto;
}

    .site-header .brand-logo .icon-logo {
        height: 50px;
        width: 100%;
        /* the base .logo rule centers the background; the v2 header logo sits flush left */
        background-position: left center;
    }

@media (max-width: 719px) {
    .site-header .brand-logo {
        width: auto;
        max-width: 100%;
    }

        .site-header .brand-logo .icon-logo {
            height: 46px;
            background-position: left center;
        }
}

.top-search-container {
    padding: 1rem 0;
}

    .top-search-container .menu-search-container .input-group input {
        min-width: 25rem;
    }

.main-menu-container {
    background-color: var(--brand);
    color: #fff;
}

    /* the menu lives inside the sticky header so it stays visible while the page scrolls;
       taller-than-viewport menus scroll internally (header top rows ~150px desktop) */
    .site-header .main-menu-container .main-menu.show,
    .site-header .main-menu-container .main-menu.collapsing {
        max-height: calc(100dvh - 165px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* thin header-toned scrollbar for the internal menu scroll; fully hidden while the
       Bootstrap collapse animation runs so no bar flashes mid-transition (user 2026-08-11) */
    .site-header .main-menu-container .main-menu.show {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .35) transparent;
    }

    .site-header .main-menu-container .main-menu.show::-webkit-scrollbar {
        width: 8px;
    }

    .site-header .main-menu-container .main-menu.show::-webkit-scrollbar-track {
        background: transparent;
    }

    .site-header .main-menu-container .main-menu.show::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .35);
        border-radius: 4px;
    }

    .site-header .main-menu-container .main-menu.collapsing {
        scrollbar-width: none;
    }

    .site-header .main-menu-container .main-menu.collapsing::-webkit-scrollbar {
        display: none;
    }

    .main-menu-container a {
        color: #fff;
    }

        .main-menu-container a:hover {
            text-decoration: none;
            opacity: 0.7;
        }

    .main-menu-container .dropdown-menu {
        background-color: var(--brand);
        color: #fff;
    }

.nav-item {
    padding-right: 1rem;
}

.submenu-toggle {
    cursor: pointer;
}

.submenu-list {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: var(--brand);
    color: #fff;
}

    .submenu-list .submenu-list-container {
        padding: 1rem 1rem 3rem 1rem;
    }

    .submenu-list h4 {
        margin-bottom: 1rem;
        font-size: 1em;
        /*  font-weight: 400;
            font-style: normal;*/
    }

    .submenu-list ul {
        padding: 0px;
    }

        .submenu-list ul li {
            list-style: none;
            list-style-position: outside;
        }

.submenu-link {
    color: #fff;
    display: block;
    font-size: 1em;
    line-height: 1.75em;
    font-weight: 400;
    padding: .2em 0;
    text-decoration: none;
}

    .submenu-link:hover {
    }

    .submenu-link.all-bottom-link {
        font-style: italic;
        font-size: 0.8em;
    }

[aria-expanded='true'] .closed {
    display: none;
}

[aria-expanded='false'] .closed {
    display: inline-block;
}

[aria-expanded='true'] .opened {
    display: inline-block;
}

[aria-expanded='false'] .opened {
    display: none;
}

.section-top {
    margin: 22px 0 1rem 0;
}

    .section-top .container {
        padding: 2rem 0rem 0rem 0rem;
    }


    /* v2 (user 2026-08-11): section bars become plain homepage-style headings - no
       full-width color band, heading styled like .featured-heading */
    .section-top h4 {
        margin: 0;
        padding: 6px 0;
        color: var(--ink);
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -.022em;
        font-weight: 800;
    }

    .section-top.dark-section,
    .section-top.blue-section,
    .section-top.white-section {
        background-color: transparent;
        color: var(--ink);
    }

        .section-top.dark-section h4,
        .section-top.blue-section h4,
        .section-top.white-section h4,
        .section-top.blue-section a {
            color: var(--ink);
        }

/* the thick color stripes that framed the old bands */
hr.blue,
hr.dark,
hr.white {
    display: none;
}

/* restyled headings must not pin over content while scrolling */
.sticky-header.fixed {
    position: static;
}

.dark-section {
    background-color: #182627;
}

    /* v2: section-top bands are plain headings - the old light-on-dark colors removed */

hr.white {
    border-bottom: 1rem solid #fff;
    border-top: none;
}

hr.white-light {
    border-bottom: 0.3rem solid #fff;
    border-top: none;
}

.white-border {
    border-color: #fff !important;
}

.white-light-border {
    border-color: #fff !important;
}


.white-section {
    background-color: #fff;
}

    .white-section.section-top, .white-section.section-top h4 {
        color: #182627;
    }

hr.dark {
    border-bottom: 1rem solid #182627;
    border-top: none;
}

hr.dark-light {
    border-bottom: 0.3rem solid #182627;
    border-top: none;
}

.dark-border {
    border-color: #182627!important;
}

.dark-light-border {
    border-color: #182627!important;
}

.blue-section {
    background-color: var(--brand);
}

    /* v2: section-top bands are plain headings - the old light-on-blue colors removed */

hr.blue {
    border-bottom: 1rem solid var(--brand);
    border-top: none;
}

hr.blue-light {
    border-bottom: 0.3rem solid var(--brand);
    border-top: none;
}

.blue-border {
    border-color: var(--brand) !important;
}

.blue-light-border {
    border-color: var(--brand) !important;
}

.section-newsletter {
    background-color: #5edaed;
    background: url('../img/bg-newsletter.webp') no-repeat center center;
    background-size: cover;
    border-top: 1rem solid #182627;
    border-bottom: 1rem solid #182627;
    padding: 6rem 2rem;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff;
}

    .section-newsletter h4 {
        font-weight: bold;
        font-size: 2rem;
    }

    .section-newsletter .btn {
        text-shadow: none;
    }

.page-list-item {
    margin: 0px auto;
    margin-bottom: 2rem;
}

.product-box-list {
}

/* the v2 cards replaced .product-box-item, whose 1.8rem margin-bottom carried the row rhythm —
   restore vertical spacing on wrapped desktop rows and stacked mobile columns for every v2-card
   list; scoped via :has so old-markup lists (blog) keep their own margins (user 2026-08-11) */
.product-box-list.row:has(.event-card, .artist-card) {
    row-gap: 20px;
}

    .product-box-list .product-box-item-container .product-box-item {
        margin-bottom: 1.8rem;
    }

.product-box-item-container {
    position: relative;
}

    .product-box-item-container .product-box-item {
        background-color: #fff;
        position: relative;
        /*margin-bottom: 1.8rem;*/
    }

        .product-box-item-container .product-box-item a {
            text-decoration: none;
        }

            .product-box-item-container .product-box-item a:hover {
                text-decoration: underline;
            }

        .product-box-item-container .product-box-item > a {
            height: 100%;
            display: block;
        }

        .product-box-item-container .product-box-item .product-box-image {
            height: 100%;
        }

        .product-box-item-container .product-box-item .product-box-infos {
            padding: 0.8rem;
        }

            .product-box-item-container .product-box-item .product-box-infos .product-box-offer {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                min-height: 1rem;
                position: absolute;
                right: 0.8rem;
                background-color: #fff;
                padding: 0.4rem 0.5rem;
                font-weight: bold;
                text-transform: uppercase;
                pointer-events: none;
                margin-top: -2.8rem;
                font-size: 1em;
                line-height: 1.2rem;
            }

                .product-box-item-container .product-box-item .product-box-infos .product-box-offer.left {
                    left: auto;
                    right: auto
                }

            .product-box-item-container .product-box-item .product-box-infos .product-box-logo {
                overflow: hidden;
                position: absolute;
                left: 0.5rem;
                margin-top: -5rem;
                background-color: #fff;
                padding: 0.2rem 0.5rem;
                font-weight: bold;
                text-transform: uppercase;
                pointer-events: none;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

                .product-box-item-container .product-box-item .product-box-infos .product-box-logo img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    overflow: hidden;
                }

            .product-box-item-container .product-box-item .product-box-infos .product-box-date {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                min-height: 1rem;
            }

            .product-box-item-container .product-box-item .product-box-infos .product-box-location {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                min-height: 1rem;
            }

            .product-box-item-container .product-box-item .product-box-infos .product-box-name {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 3.4em;
                font-weight: bold;
                padding-top: 0.5rem;
            }

                .product-box-item-container .product-box-item .product-box-infos .product-box-name a:hover {
                    text-decoration: none;
                }

        .product-box-item-container .product-box-item .product-box-infos-2 {
            padding: 0;
            position: relative;
            bottom: 5px;
        }

            .product-box-item-container .product-box-item .product-box-infos-2 .product-box-offer {
                -webkit-line-clamp: 2;
                max-height: 2.9rem;
                left: 0;
                right: auto;
                margin-top: -3.7rem;
                bottom: 1.7rem;
                width: auto;
                background-color: #ffffffde;
            }

            .product-box-item-container .product-box-item .product-box-infos-2 .product-box-call {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                min-height: 1rem;
                position: absolute;
                left: 0rem;
                margin-top: -1.6rem;
                background-color: #182627;
                padding: 0.2rem 0.5rem;
                font-weight: bold;
                text-transform: uppercase;
                pointer-events: none;
            }

.slick-slider {
}

    .slick-slider .product-box-item-container {
        position: initial;
        display: inline-block;
        margin: 0 1rem 0 0;
        /*width: 240px !important;*/
        height: 100%;
    }

        .slick-slider .product-box-item-container .product-box-item {
            height: 100%;
            margin-bottom: 0;
        }

    .slick-slider .slick-slide {
        margin: 0 0.9rem;
    }

        .slick-slider .slick-slide > div {
            height: 100%;
        }

.slick-track {
    display: flex !important;
}

.slick-slide {
    height: inherit !important;
}

.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    z-index: 999;
    top: 45%;
}

    .slick-prev:before, .slick-next:before {
        color: #ccc;
        font-size: 45px;
        text-shadow: 1px 1px 3px #ccc;
    }

    .slick-prev:before {
        text-shadow: -1px 1px 3px #ccc;
    }

.slick-prev {
    left: 0px;
}

.slick-next {
    right: 0;
}

.footer {
    color: #fff;
    background-color: var(--brand);
    padding: 2rem 0;
}

    .footer a {
        color: #fff;
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .footer .title {
        font-weight: 600;
        font-size: 1.2rem;
        margin: 5px 0px;
        margin-bottom: 0.5rem;
    }

    .footer ul {
        list-style: none;
        list-style-position: outside;
        padding: 0px;
    }

        .footer ul li {
            margin-bottom: 0.5rem;
        }

.event-top-contents {
    padding: 1rem 0;
}

    .event-top-contents .image-container:not(:has(img)) {
        background-size: contain;
        background-position: 50% 0%;
    }

    .event-top-contents h1 {
        /*        font-family: 'Arimo', sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 2rem;*/
        margin-bottom: 1rem;
    }

    .event-top-contents .infos {
        margin-bottom: 1rem;
    }

        .event-top-contents .infos .icon {
            font-size: 1.4rem;
            padding-right: 0.2rem;
            vertical-align: middle;
        }

        .event-top-contents .infos .location {
            margin-bottom: 0.5em;
            font-weight: bold;
        }

        .event-top-contents .infos .date {
            margin-bottom: 0.5em;
            font-weight: bold;
        }

.tickets-container {
    margin-bottom: 1rem;
}

    /* v2 (user 2026-08-11): plain contained heading row, no full-width dark band */
    .tickets-container .tickets-container-top {
        background-color: transparent;
        padding: 6px 0;
        color: var(--ink);
        margin-bottom: 1rem;
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -.02em;
        font-weight: 800;
    }

    .tickets-container .tickets-box {
        border: 2px solid var(--brand);
        padding: 1rem;
    }

    .tickets-container .infos-tickets {
        font-size: 0.8em;
        line-height: 1.2em;
    }

.input-group-prepend .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* Chrome, Safari, Edge, Opera */
input.qty-input::-webkit-outer-spin-button,
input.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number].qty-input {
    -moz-appearance: textfield;
}

.tickets-categories-items {
}

    .tickets-categories-items .ticket-category {
        padding: 1rem 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid #ddd;
    }

        .tickets-categories-items .ticket-category .ticket-category-name {
            text-align: left;
            vertical-align: middle;
            font-weight: bold;
        }

            .tickets-categories-items .ticket-category .ticket-category-name .ticket-category-name-infos {
                font-size: 0.8em;
                font-weight: normal;
            }

        .tickets-categories-items .ticket-category .ticket-category-price {
            text-align: center;
            vertical-align: middle;
        }

        .tickets-categories-items .ticket-category .ticket-category-quantity {
            text-align: right;
            vertical-align: middle;
        }

        .tickets-categories-items .ticket-category .btn-primary {
            background-color: var(--brand) !important;
            border-color: var(--brand) !important;
        }

        .tickets-categories-items .ticket-category input {
            border-color: var(--brand) !important;
            font-size: 0.8em;
            line-height: 1rem;
            padding-right: 0;
        }

.tickets-box .btn-buy {
    background-color: var(--brand);
}

    .tickets-box .btn-buy:hover {
        background-color: var(--brand);
    }

.page-top {
    overflow: hidden;
}

    .page-top .container {
        padding: 2rem 0rem 2rem 0rem;
    }

    .page-top h1.title {
        /* font-family: 'Arimo', sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 2rem;*/

        text-align: left;
    }

    .page-top h2.subtitle {
        font-weight: normal;
        font-size: 1em;
        text-align: left;
    }

    .page-top .description {
        font-weight: normal;
        overflow: hidden;
        text-align: left;
    }

        .page-top .description a {
        }

    .page-top .page-top-bg {
        background-color: rgba(0, 0, 0, 0.88);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        /* Add the blur effect */
        filter: blur(3px);
        -webkit-filter: blur(3px);
        pointer-events: none;
        transform: scale(1.1);
    }

.slide-read-more {
    overflow: hidden;
}

.slide-read-more-button {
    font-weight: bold;
    cursor: pointer;
    text-align: left;
  /*  margin-top: 8px;*/
    display: none;
}

.slide-read-less-button {
    font-weight: bold;
    cursor: pointer;
    text-align: left;
   /* margin-top: 8px;*/
    display: none;
}

/*#endregion shop*/

/*#region */
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    .text-sm-left {
        text-align: left !important;
    }
}


/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
    .text-md-left {
        text-align: left !important;
    }

    .tickets-categories-items .ticket-category .ticket-category-price {
        text-align: right;
        vertical-align: middle;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (max-width: 992px) {
    .top-search-container .navbar-toggler {
        border-color: #ced4da;
    }

    .top-search-container .btn-go {
        border-color: #ced4da;
    }

    .top-search-container .menu-search-container .input-group input {
        border-radius: 6px !important;
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
        min-width: auto;
    }

    .top-search-container .menu-search-container .input-group-append {
        display: none;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .main-menu {
        text-align: center;
    }

    .submenu-list {
        position: initial;
    }

    .main-menu-container .main-menu {
    }

        .main-menu-container .main-menu .order-2 {
            margin-bottom: 2rem;
        }

    .submenu-list h4 {
        margin-bottom: 0;
    }

    .submenu-list-container-items {
        margin-bottom: 1em;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {
}

/*#region trilete v2 header + footer (homepage redesign)*/

/* prototype's overflow guard, on body NOT html: any non-visible overflow on html stops body's
   overflow:hidden from propagating to the viewport, which kills the dialog/filter-sheet/Bootstrap
   scroll locks below (verified live 2026-08-11); on body the clip still reaches the viewport via
   the same propagation, so the mobile .event-art 100vw full-bleed can't cause sideways panning
   under classic scrollbars. clip, not hidden: no scroll container, sticky header stays safe */
body {
    overflow-x: clip;
}

body:has(dialog[open]) {
    overflow: hidden;
}

/* filter sheet scroll lock — it is not a <dialog>, so :has(dialog[open]) can't cover it */
body.filter-sheet-open {
    overflow: hidden;
}

/* the v2 newsletter panel renders on every page (shared _Newsletter partial): centered at
   the content width; the homepage grid overrides the block margins via its own gap */
.newsletter {
    /* unified panel width on every page (user 2026-08-11): the prototype's grid width =
       760px shell minus main's 14px side padding = 732px */
    max-width: calc(var(--content) - 28px);
    margin-inline: auto;
    margin-block: 30px;
}

.featured-grid > .newsletter {
    margin-block: 0;
}

/* auto inline margins disable grid stretch (the item shrinks to its 650px inner content);
   zero them so the panel fills the track, flush with the cards like the prototype. Desktop
   only: on mobile the panel is width:calc(100% - 24px) and NEEDS the auto margins to stay
   centered in the grid track (user bug report 2026-08-11) */
@media (min-width: 720px) {
    .featured-grid > .newsletter {
        margin-inline: 0;
    }
}

/* zero-results message (prototype .empty-state) */
.empty-state {
    margin: 24px 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: var(--surface);
    text-align: center;
    font-weight: 700;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 14px;
    background: var(--brand);
    box-shadow: 0 2px 9px rgba(0, 70, 105, .18);
}

.header-row {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    display: grid;
    align-items: center;
}

.header-top {
    grid-template-columns: minmax(142px, 1fr) 180px 48px;
    gap: 10px;
    margin-bottom: 13px;
}

.city-trigger {
    width: 180px;
    height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 14px 0 16px;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 12px;
    color: #fff;
    background: var(--brand-dark);
    text-align: left;
    font-weight: 700;
}

    .city-trigger__label {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .city-trigger svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.menu-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 12px;
    background: transparent;
}

    .menu-button span {
        display: block;
        width: 24px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
    }

.header-search {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
}

.search-control {
    position: relative;
}

    .search-control svg {
        position: absolute;
        left: 16px;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translateY(-50%);
        fill: none;
        stroke: #68737f;
        stroke-width: 2;
        pointer-events: none;
    }

    .search-control input {
        width: 100%;
        height: 58px;
        padding: 0 14px 0 49px;
        border: 1px solid #cdd2d6;
        border-radius: 12px;
        outline: none;
        color: var(--ink);
        background: #fff;
        font-size: 16px;
    }

        .search-control input:focus {
            border-color: var(--brand-dark);
            box-shadow: 0 0 0 3px rgba(0, 127, 184, .15);
        }

.filter-button {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cdd2d6;
    border-radius: 12px;
    color: var(--brand-dark);
    background: #fff;
    font-weight: 800;
}

    .filter-button svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

/* City chooser */
.city-dialog {
    width: min(92vw, 480px);
    /* fixed height (not max-height): filtering the list must never resize the
       dialog, or the search box jumps under the user's pointer/finger */
    height: min(78vh, 680px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

    .city-dialog::backdrop {
        background: rgba(0, 0, 0, .48);
        backdrop-filter: blur(1px);
    }

.city-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.city-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 12px;
}

    .city-dialog-header h2 {
        margin: 0;
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -.025em;
    }

.dialog-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #48525c;
    background: #eef2f4;
}

    .dialog-close svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

.city-search {
    position: relative;
    margin: 0 20px 13px;
}

    .city-search svg {
        position: absolute;
        left: 14px;
        top: 50%;
        width: 19px;
        height: 19px;
        transform: translateY(-50%);
        fill: none;
        stroke: #68737f;
        stroke-width: 2;
        pointer-events: none;
    }

    .city-search input {
        width: 100%;
        height: 46px;
        padding: 0 13px 0 43px;
        border: 1px solid #cfd5da;
        border-radius: 10px;
        outline: none;
        color: var(--ink);
        background: #fff;
    }

        .city-search input:focus {
            border-color: var(--brand-dark);
            box-shadow: 0 0 0 3px rgba(0, 127, 184, .13);
        }

.city-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 14px;
    overscroll-behavior: contain;
}

.city-option {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    text-decoration: none;
    font-weight: 700;
}

    .city-option:hover {
        background: #f1f8fb;
    }

    .city-option[aria-current] {
        color: var(--brand-dark);
        background: #e8f7fc;
    }

    .city-option svg {
        width: 20px;
        height: 20px;
        opacity: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .city-option[aria-current] svg {
        opacity: 1;
    }

.city-no-results {
    margin: 0;
    padding: 18px 14px 26px;
    color: var(--muted);
    text-align: center;
    font-size: 14px;
}

/* Filters */
.filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 14px;
    background: rgba(0, 0, 0, .48);
}

    .filter-backdrop.open {
        display: flex;
    }

.filter-sheet {
    width: min(100%, 520px);
    /* margin:auto - NOT align-items:center alone - is the overflow guard: a centred flex item
       taller than its container gets its top clipped and unreachable, which is exactly what the
       soft keyboard creates once the sheet holds a search box. The scroll lives on .filter-backdrop,
       deliberately NOT here: an overflow on the sheet would make it a clipping context and cut off
       the artist dropdown, which is absolutely positioned inside it */
    margin: auto;
    /* 18px top (was 12px) now that the bottom-sheet grab handle is gone - it used to supply the
       gap above the title */
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: #fff;
    /* same shadow as .city-dialog so both modals read as one idiom */
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.filter-sheet h2 {
    margin: 0 0 15px;
    font-size: 24px;
}

.filter-field {
    margin-bottom: 13px;
}

    .filter-field label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 800;
    }

    .filter-field select {
        width: 100%;
        height: 46px;
        padding: 0 12px;
        border: 1px solid #cbd2d7;
        border-radius: 9px;
        background: #fff;
    }

.apply-filters {
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--brand-dark);
    font-weight: 800;
}

/* bootstrap-select 1.5.0 on the three Filtre-sheet selects (typeFilter/artistFilter/venueFilter;
   #artistFilter and #venueFilter have live search - the searchbox rules below simply never match
   for #typeFilter).

   The plugin is Bootstrap-3-era, so under this app's Bootstrap 5.3.3 it renders a 220px transparent
   borderless 33.5px button. Everything below drags that trigger onto the same box a native
   .filter-field select would occupy. Every value is COPIED FROM the computed style of
   .filter-field select (height 46px, padding 0 12px, 1px #cbd2d7, radius 9px, #fff, #000, 16px), and
   it is kept as a SEPARATE rule set rather than merged into that selector so the native selects'
   own rule stays byte-identical.

   Specificity note: .filter-field .bootstrap-select.btn-group (0-3-0) is used deliberately, to beat
   the plugin's own .bootstrap-select:not([class*="span"]) and .bootstrap-select > .btn (both 0-2-0)
   without relying on stylesheet load order. */
.bootstrap-select .dropdown-menu.inner {
    /* the option list is a <ul class="dropdown-menu inner">, and Bootstrap 5 hides every
       .dropdown-menu until it carries .show - so without this the dropdown opens showing only the
       search box and no options at all */
    display: block;
    max-height: 320px;
    overflow-y: auto;
}

.filter-field .bootstrap-select.btn-group {
    width: 100%;
    /* the plugin ships .bootstrap-select.btn-group { margin-bottom: 10px }, which would push the
       Artist field 10px lower than the other two */
    margin-bottom: 0;
}

    .filter-field .bootstrap-select.btn-group > .btn {
        position: relative;
        width: 100%;
        height: 46px;
        padding: 0 12px;
        border: 1px solid #cbd2d7;
        border-radius: 9px;
        color: #000;
        text-align: left;
        font-size: 16px;
        /* longhands, NOT the `background` shorthand: the shorthand would reset background-image and
           wipe out the chevron below. The chevron is this app's own arrow - the same path, stroke
           width and round caps as .city-trigger svg in the header - drawn here as a data URI because
           a background-image cannot inherit currentColor, so the stroke is pinned to the field's own
           text colour (#000 -> %23000). 16px to match .city-trigger svg; the label is held clear of
           it by the right:34px on .filter-option above. */
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 16px;
    }

        /* the plugin absolutely positions the label (left:12px right:25px) with no top/bottom, so on a
           46px-tall button it would sit against the top edge instead of centred */
        .filter-field .bootstrap-select.btn-group > .btn .filter-option {
            top: 0;
            bottom: 0;
            right: 34px;
            display: flex;
            align-items: center;
        }

        /* Bootstrap 5 draws its own arrow as .dropdown-toggle::after - an 8x4 solid border triangle,
           which is the one mark that still looked nothing like the thin chevron the two native selects
           render. Suppressed in favour of the background chevron above. (It also sat in the normal
           flow, so with text-align:left it would have been flung to the LEFT edge anyway.) */
        .filter-field .bootstrap-select.btn-group > .btn::after {
            display: none;
        }

/* Open list. Left at the plugin's 2013 defaults it renders 22px-tall rows of underlined 14px links
   with a #428bca (Bootstrap 3 blue) highlight that hugs the text instead of the row, because Bootstrap
   5 leaves `li > a` as display:inline. Every value below is COPIED FROM this stylesheet's own
   .city-option / .city-search rules - the list the city chooser drops in this same header - so the two
   lists read as one component. No new colours are introduced.

   Child combinator on the panel is deliberate: `.dropdown-menu` also matches the nested
   <ul class="dropdown-menu inner">, and styling that would fight the plugin's own reset of it. */
.filter-field .bootstrap-select.btn-group > .dropdown-menu {
    padding: 8px;
    border: 1px solid #cbd2d7;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

    /* search box: .city-search input, minus the 43px left inset that rule reserves for its magnifier
       icon (this plugin renders no icon) */
    .filter-field .bootstrap-select.btn-group > .dropdown-menu .bootstrap-select-searchbox {
        padding: 0 0 8px;
    }

        .filter-field .bootstrap-select.btn-group > .dropdown-menu .bootstrap-select-searchbox input {
            width: 100%;
            height: 46px;
            padding: 0 13px;
            border: 1px solid #cfd5da;
            border-radius: 10px;
            outline: none;
            color: var(--ink);
            background: #fff;
            font-size: 16px;
        }

            .filter-field .bootstrap-select.btn-group > .dropdown-menu .bootstrap-select-searchbox input:focus {
                border-color: var(--brand-dark);
                box-shadow: 0 0 0 3px rgba(0, 127, 184, .13);
            }

    /* rows: .city-option's metrics. flex rather than that rule's 2-column grid because the plugin's
       tick is a <i class="glyphicon"> that renders nothing under Bootstrap 5, so there is no second
       column to reserve */
    .filter-field .bootstrap-select.btn-group .dropdown-menu.inner > li > a {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 9px;
        color: var(--ink);
        background: transparent;
        text-align: left;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
    }

        .filter-field .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover {
            background: #f1f8fb;
        }

        /* .selected is the current value; .active is the row the plugin marks while searching or
           arrow-navigating. Both get .city-option[aria-current]'s treatment. Specificity here (0-5-0)
           has to clear the plugin's own `.bootstrap-select .dropdown-menu > .selected > a` (0-3-0),
           which is what paints the Bootstrap 3 blue. */
        .filter-field .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a,
        .filter-field .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a {
            color: var(--brand-dark);
            background: #e8f7fc;
        }

    /* empty state: .city-no-results' treatment (its string stays the plugin's English one) */
    .filter-field .bootstrap-select.btn-group .dropdown-menu.inner > li.no-results {
        padding: 14px 12px 16px;
        color: var(--muted);
        text-align: center;
        font-size: 14px;
    }

/* Footer */
.site-footer {
    color: #dce8ee;
    background: var(--brand-deep);
}

.footer-main {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding: 38px 14px 30px;
    display: grid;
    grid-template-columns: 1.05fr .9fr 1.15fr;
    gap: 34px;
}

.footer-brand {
    margin: 0 0 12px;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
}

.footer-heading {
    margin: 0 0 13px;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.footer-copy,
.footer-company {
    margin: 0;
    color: #bcd0da;
    font-size: 13px;
    line-height: 1.6;
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .footer-list li + li {
        margin-top: 8px;
    }

    .footer-list a {
        color: #dce8ee;
        font-size: 13px;
        line-height: 1.4;
        text-decoration: none;
    }

        .footer-list a:hover {
            color: #fff;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

.footer-contact {
    margin-top: 18px;
}

    .footer-contact div + div {
        margin-top: 7px;
    }

    .footer-contact a {
        color: #fff;
        font-weight: 800;
        text-decoration: none;
    }

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

/* Legal badges (RO SAL/ODR notice) - not in the mockup, kept from the pre-existing footer for legal compliance */
.footer-legal-badges {
    max-width: var(--content);
    margin-inline: auto;
    padding: 0 14px 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

    .footer-legal-badges img {
        width: 140px;
        margin: 0;
    }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .13);
    background: #052c3e;
}

.footer-bottom-inner {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding: 15px 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #a9c0cb;
    font-size: 12px;
    line-height: 1.4;
}

    .footer-bottom a {
        color: #dce8ee;
        text-decoration: none;
    }

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 15px;
}

@media (max-width: 719px) {
    .site-header {
        padding: 9px 4px 10px;
    }

    .header-top {
        grid-template-columns: minmax(112px, 1fr) 148px 42px;
        gap: 8px;
        margin-bottom: 8px;
    }

    .city-trigger {
        width: 148px;
        height: 44px;
        grid-template-columns: minmax(0, 1fr) 14px;
        gap: 6px;
        padding: 0 10px 0 10px;
        border-radius: 10px;
        font-size: 14px;
    }

        .city-trigger svg {
            width: 14px;
            height: 14px;
        }

    .menu-button {
        width: 42px;
        height: 44px;
        border-radius: 10px;
    }

        .menu-button span {
            width: 22px;
        }

    .header-search {
        grid-template-columns: minmax(0, 1fr) 84px;
        gap: 8px;
    }

    .search-control svg {
        left: 13px;
        width: 17px;
        height: 17px;
    }

    .search-control input {
        height: 42px;
        padding: 0 10px 0 39px;
        border-radius: 9px;
        font-size: 15px;
    }

    .filter-button {
        height: 42px;
        gap: 5px;
        padding: 0 8px;
        border-radius: 9px;
        font-size: 14px;
    }

        .filter-button svg {
            width: 16px;
            height: 16px;
        }

    .footer-main {
        padding: 30px 18px 25px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .footer-brand {
        font-size: 23px;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .footer-legal-badges {
        padding: 0 18px 20px;
    }

    .footer-bottom-inner {
        padding: 16px 18px 19px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .footer-bottom-links {
        justify-content: flex-start;
    }

    .city-dialog {
        width: 100%;
        max-width: none;
        /* top-aligned fixed-height sheet (user decision 2026-08-11): the search
           box stays put while typing filters the list, and the on-screen
           keyboard no longer covers the sheet like it did bottom-anchored */
        height: min(82dvh, 720px);
        margin: 0 0 auto;
        border-radius: 0 0 20px 20px;
    }

    .city-dialog-header {
        padding: 18px 18px 11px;
    }

        .city-dialog-header h2 {
            font-size: 22px;
        }

    .city-search {
        margin-inline: 18px;
    }

    .city-options {
        padding-inline: 8px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
    }
}

/*#endregion trilete v2 header + footer (homepage redesign)*/

/*#region trilete v2 homepage (featured events + newsletter + artists)*/

.site-main {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding: 26px 14px 46px;
}

.featured-heading {
    margin: 0 0 16px;
    font-size: 27px;
    line-height: 1.14;
    letter-spacing: -.025em;
    font-weight: 800;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}

.featured-grid > .empty-state {
    grid-column: 1 / -1;
}

/* City page ("Urmează în {City}") - same typography as .featured-heading, uppercased in CSS so
   the DOM text stays natural-case ("Urmează în București") for screen readers/SEO (user decision
   2026-08-11); own class (not extending .featured-heading) to keep the two sections independent. */
.city-heading {
    margin: 0 0 16px;
    font-size: 27px;
    line-height: 1.14;
    letter-spacing: -.025em;
    font-weight: 800;
    text-transform: uppercase;
}

/* Inter-section rhythm inside the v2 column (user 2026-08-11: spacing was missing between the
   rail/newsletter and "Urmează în {City}") - same 34px the homepage uses via ".artists" below;
   sibling-scoped so a page whose first section is the list (city page 2+) doesn't gain a top gap. */
.site-main > section + section {
    margin-top: 34px;
}

/* City page upcoming-events list - own class (not .featured-grid) so the
   ".featured-grid > .newsletter" rail-only child rule above doesn't reach this grid, which never
   contains a newsletter panel (user decision 2026-08-11). */
.city-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}

.event-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dedede;
    color: inherit;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
}

    .event-card:hover {
        color: inherit;
        text-decoration: none;
    }

    /* the card is a <div> with inner links (image/title -> event, venue/city -> their pages) */
    .event-card .event-card-media {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    .event-card .event-location a,
    .event-card .event-title a {
        color: inherit;
        text-decoration: none;
    }

        .event-card .event-location a:hover,
        .event-card .event-title a:hover {
            color: inherit;
            text-decoration: underline;
        }

.event-art {
    position: relative;
    aspect-ratio: 1200 / 628;
    overflow: visible;
    /* placeholder for events without an image (was .image-container:not(:has(img)) pre-redesign) */
    background: #111 url('../img/noimage.jpg') center / cover no-repeat;
}

    .event-art.portrait {
        aspect-ratio: 727 / 1024;
    }

    .event-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #111;
    }

.date-badge {
    position: absolute;
    right: 12px;
    bottom: -10px;
    z-index: 2;
    max-width: calc(100% - 24px);
    height: 26px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-top: 2px solid #049ed1;
    border-bottom: 2px solid #049ed1;
    color: #049ed1;
    background: #eaf7fc;
    box-shadow: 3px 3px 0 rgba(4, 158, 209, .18);
    transform: rotate(3deg);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}

.event-body {
    min-width: 0;
    padding: 23px 16px 16px;
}

.event-location {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    /* desktop: nothing is clipped — a too-long venue+city spills onto the next row like the
       prototype; „, City + pin" wraps as one unit (user 2026-08-11) */
}

    .event-location .event-location-sep,
    .event-location .event-location-city {
        white-space: nowrap;
    }

/* mobile: a single row — only the VENUE flex-shrinks with an ellipsis, and the city is capped
   at ~12 characters („Drobeta-Turn…", the brief's own example) so venue and city always both
   fit (user 2026-08-11) */
@media (max-width: 719px) {
    .event-location {
        display: flex;
        align-items: baseline;
    }

        .event-location .event-location-venue {
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .event-location .event-location-sep,
        .event-location .event-location-city {
            flex: none;
        }

        .event-location .event-location-city a {
            display: inline-block;
            /* ~12 visible characters of Inter ("Drobeta-Turn…") — ch measures the "0" glyph,
               so 10ch ≈ 12 letters (measured live 2026-08-11) */
            max-width: 10ch;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: bottom;
        }
}

/* 3-per-row lists (Bootstrap lg = the .col-lg-4 grid actually renders 3 columns): venue on its
   own row, city beneath, each clipped to ONE line — fits the narrow card and keeps card
   heights uniform (user 2026-08-11) */
@media (min-width: 992px) {
    .product-box-list .event-location {
        display: block;
        min-height: calc(2 * 1.35em);
    }

        .product-box-list .event-location .event-location-sep {
            display: none;
        }

        .product-box-list .event-location .event-location-venue,
        .product-box-list .event-location .event-location-city {
            display: block;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
}

    .event-location svg {
        width: 14px;
        height: 14px;
        margin-left: 4px;
        vertical-align: -2px;
        fill: #cf2732;
    }

.event-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.018em;
    font-weight: 800;
    /* 3-line clamp with the same 3 lines always RESERVED: every card is pixel-identical in
       height in every list; overflow ends with a word-safe … (user 2026-08-11) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: calc(3 * 1.18 * 1em);
}

/* SEO + newsletter — no margin-top here: the mockup's in-grid 6px glued the panel to the
   content on every NON-grid page (details etc.); the base rule's margin-block 30px now
   applies there, while .featured-grid > .newsletter still zeroes margins in the homepage
   grid (user 2026-08-11) */
.newsletter {
    grid-column: 1 / -1;
    order: 99;
    position: relative;
    overflow: hidden;
    padding: 28px 26px 24px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(128deg, rgba(0, 43, 70, .98) 0%, rgba(0, 104, 148, .98) 58%, rgba(8, 170, 221, .96) 120%);
    box-shadow: 0 8px 24px rgba(0, 78, 113, .22);
}

    .newsletter::before,
    .newsletter::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 50%;
        pointer-events: none;
    }

    .newsletter::before {
        width: 230px;
        height: 230px;
        right: -95px;
        top: -125px;
    }

    .newsletter::after {
        width: 155px;
        height: 155px;
        right: 32px;
        bottom: -110px;
    }

.newsletter-inner {
    position: relative;
    z-index: 1;
}

.newsletter-kicker {
    margin: 0 0 8px;
    color: #9fe9ff;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.newsletter h1 {
    max-width: 650px;
    margin: 0;
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
}

.newsletter-description {
    max-width: 650px;
    margin: 11px 0 0;
    color: rgba(255, 255, 255, .93);
    font-size: 16px;
    line-height: 1.45;
}

.newsletter-prompt {
    margin: 19px 0 9px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

/* .newsletter-form is shared with the plain-white subscribe modal (_Newsletter.cshtml on other
   pages), so its input/button get a normal, self-sufficient look by default; .newsletter overrides
   them below to the prototype's white-on-dark-panel look for the homepage SEO block specifically. */
.newsletter-form {
    max-width: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

    .newsletter-form input,
    .newsletter-form button {
        height: 48px;
        border-radius: 10px;
    }

    .newsletter-form input {
        min-width: 0;
        padding: 0 15px;
        border: 1px solid #cdd2d6;
        outline: none;
        color: var(--ink);
        background: #fff;
    }

        .newsletter-form input:focus {
            border-color: var(--brand-dark);
            box-shadow: 0 0 0 3px rgba(0, 127, 184, .15);
        }

    .newsletter-form button {
        padding: 0 20px;
        border: 1px solid var(--brand-dark);
        color: #fff;
        background: var(--brand-dark);
        font-weight: 800;
    }

        .newsletter-form button:hover {
            background: var(--brand);
            border-color: var(--brand);
        }

    .newsletter .newsletter-form input {
        border-color: rgba(255, 255, 255, .45);
    }

        .newsletter .newsletter-form input:focus {
            border-color: #fff;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
        }

    .newsletter .newsletter-form button {
        border-color: #fff;
        color: var(--brand-dark);
        background: #fff;
    }

        .newsletter .newsletter-form button:hover {
            background: #eafaff;
            border-color: #fff;
        }

.newsletter-feedback {
    min-height: 18px;
    margin: 7px 0 0;
    color: #d5f7ff;
    font-size: 13px;
    font-weight: 700;
}

    /* success vs error must not be color-identical (site.js toggles these) */
    .newsletter-feedback.is-success {
        color: #b8f5c5;
    }

    .newsletter-feedback.is-error {
        color: #ffd2cd;
    }

.newsletter-legal {
    max-width: 650px;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    line-height: 1.45;
}

    .newsletter-legal a {
        color: #fff;
        text-underline-offset: 2px;
    }

        .newsletter-legal a:hover {
            color: #fff;
        }

/* _SubscribeNewsletterBox.cshtml's own inline result line - only ever visible inside the plain
   .modal-body context (the homepage reads these via a marker parse, see site.js); .newsletter-feedback
   above is what's shown on the homepage panel itself. */
.newsletter-form-message {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
}

.newsletter-form-message-success {
    color: #659265;
}

.newsletter-form-message-error {
    color: #c26565;
}

/* Artists */
.artists {
    margin-top: 34px;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

    .section-heading h2 {
        margin: 0;
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -.025em;
        font-weight: 800;
    }

    .section-heading a {
        flex: 0 0 auto;
        color: var(--brand-dark);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
    }

        .section-heading a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }

.artists-list {
    /* slider at every width (user 2026-08-11): 6 visible on desktop, the rest
       scroll horizontally with snap — the prototype's mobile mechanics promoted
       to the base so a 7th+ artist never wraps to a second row */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 6);
    gap: 12px;
    overflow-x: auto;
    padding: 1px 1px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

    .artists-list::-webkit-scrollbar {
        display: none;
    }

    .artists-list .artist-card {
        scroll-snap-align: start;
    }

.artists-slider {
    position: relative;
}

/* desktop-only slider arrows: the strip's scrollbar is hidden (prototype look), so a mouse
   user needs these to slide it; JS hides each at its end of the strip (user 2026-08-11) */
.artists-nav {
    display: none;
}

@media (min-width: 720px) {
    .artists-nav {
        display: grid;
        place-items: center;
        position: absolute;
        top: 44px; /* center of the avatar circle */
        transform: translateY(-50%);
        z-index: 2;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        box-shadow: var(--shadow);
        color: inherit;
        cursor: pointer;
    }

    .artists-nav[hidden] {
        display: none;
    }

    .artists-nav-prev {
        left: -14px;
    }

    .artists-nav-next {
        right: -14px;
    }
}

.artist-card {
    min-width: 0;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

    .artist-card:hover {
        color: inherit;
        text-decoration: none;
    }

    .artist-card img {
        display: block;
        width: 88px;
        height: 88px;
        margin: 0 auto 9px;
        border: 3px solid #fff;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
    }

    .artist-card span {
        display: block;
        overflow: hidden;
        color: #222;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Cart organiser disclosure (ShoppingCarts Index/Checkout) - muted info block, trilete v2 tokens */
.cart-organiser-disclosure {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f9fa;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

    .cart-organiser-disclosure p {
        margin: 0 0 8px;
    }

    .cart-organiser-disclosure p:last-child {
        margin-bottom: 0;
    }

/* Event commission notice (Events/Details, shown before the tickets box when any product carries
   an added fee) - same muted-info-block language as .cart-organiser-disclosure */
.commission-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f9fa;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

@media (max-width: 719px) {
    .site-main {
        max-width: none;
        padding: 14px 0 38px;
    }

    .featured-heading {
        display: none;
    }

    .featured-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* city page list - same 1-column collapse as .featured-grid, but no first-of-type/newsletter
       reordering below: this grid never contains a newsletter panel */
    .city-list-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* unlike .featured-heading (hidden on mobile, :3041), this heading stays visible - inset it
       like .artists (12px) so it doesn't sit flush against the viewport edge inside the
       zero-horizontal-padding mobile .site-main */
    .city-heading {
        padding-inline: 12px;
    }

    /* mobile inter-section rhythm: without this, the base 34px sibling rule (0,1,2) outweighs
       the (0,1,0) ".artists { margin-top: 31px }" mobile override further down */
    .site-main > section + section {
        margin-top: 31px;
    }

    .featured-grid > .event-card:first-of-type {
        order: 0;
    }

    .featured-grid > .event-card:not(:first-of-type) {
        order: 2;
    }

    .newsletter {
        order: 1;
        width: calc(100% - 24px);
        /* inline centering only — block margins come from the base rule on non-grid pages;
           the homepage grid zeroes them and spaces via its own gap */
        margin-inline: auto;
        padding: 22px 17px 19px;
        border-radius: 14px;
    }

    .event-card {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .event-art {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

        .event-art img {
            object-fit: cover;
        }

    .event-body {
        width: calc(100% - 24px);
        margin-inline: auto;
        padding: 24px 16px 17px;
        border: 1px solid #e2e2e2;
        border-top: 0;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    }

    .date-badge {
        right: 12px;
        height: 27px;
        padding: 0 14px;
        font-size: 14px;
    }

    .event-location {
        margin-bottom: 8px;
        font-size: 16px;
    }

    .event-title {
        font-size: 20px;
    }

    .newsletter-kicker {
        margin-bottom: 7px;
        font-size: 11px;
    }

    .newsletter h1 {
        font-size: 24px;
        line-height: 1.1;
    }

    .newsletter-description {
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.42;
    }

    .newsletter-prompt {
        margin: 16px 0 8px;
        font-size: 13px;
    }

    .newsletter-form {
        gap: 7px;
    }

        .newsletter-form input,
        .newsletter-form button {
            height: 44px;
            border-radius: 9px;
        }

        .newsletter-form input {
            padding: 0 12px;
            font-size: 14px;
        }

        .newsletter-form button {
            padding: 0 13px;
            font-size: 13px;
        }

    .newsletter-legal {
        font-size: 10.5px;
    }

    .artists {
        margin-top: 31px;
        padding-inline: 12px;
    }

    .section-heading {
        margin-bottom: 13px;
    }

        .section-heading h2 {
            font-size: 23px;
        }

    .artists-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 102px;
        gap: 12px;
        overflow-x: auto;
        padding: 1px 1px 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

        .artists-list::-webkit-scrollbar {
            display: none;
        }

    .artist-card {
        scroll-snap-align: start;
    }

        .artist-card img {
            width: 82px;
            height: 82px;
        }

        .artist-card span {
            font-size: 12.5px;
        }
}

/*#endregion trilete v2 homepage (featured events + newsletter + artists)*/

/*#endregion */