/*
    Theme Name: TRI template 2025
    Theme URI: none
    Description: none
    Author: Lukas 1
    Author URI: https://www.tripito.cz
    Version: 1.0
    Tags: none
*/


/*
COLORS:

body:   #fff3db
odkazy: #18c6ef

*/

* { margin: 0; padding: 0; }
@-ms-viewport { width: device-width; }
html, body { height: 100%; }
body { font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.4em; color: #000000; background: #fff3db; }


@media screen and (max-width: 400px) {
    .zal0 { display: block; }
    .zal1, .zal2, .zal3 { display: none; }   
}

@media screen and (max-width: 660px) {
    #wrapper { width: 100%; }
    #sidebar, #h_sidebar, .tvuj { display: none !important; visibility: none; } .main-body { width: 100%; } .flex-container-1, .flex-container-2 { flex-direction: column; } .flex-items { width: 100%; }
    .koment-title span, .grid-title span { font-size: 18px; }
    .koment-title:before, .koment-title:after, .grid-title:before, .grid-title:after, .about:before, .about:after { width: 70px; }
    .grid-item-flex { width: 100%; }
    .zalozka .zalozka-img img { width: 45px; }
    .zalozka { line-height: 27px; width: 260px; padding: 10px 11px 4px 11px; font-size: 14px; }
    .stickyContent { line-height: 22px; font-size: 14px; padding: 6px 15px; }
}
@media screen and (min-width: 660px) {
    .koment-title span, .grid-title span { font-size: 22px; }
    .koment-title:before, .koment-title:after, .grid-title:before, .grid-title:after, .about:before, .about:after { width: 150px; }
    .grid-item-flex { width: 44%; }
    .zalozka .zalozka-img img { width: 65px; }
    .zalozka { line-height: 38px; width: 280px; padding: 10px 14px 4px 14px; font-size: 15px; }
    .stickyContent { line-height: 24px; font-size: 15px; padding: 10px 20px; }
}
@media screen and (min-width: 900px) {
    .flex-container-1 { flex-direction: row; }
    .flex-container-2 { flex-direction: row-reverse; }
    .flex-items { width: 47%; }
    #h_sidebar { display: block; }
    .zal1, .zal2 { display: inline; }
    .zal3 { display: block; }
    .zal0 { display: none; } 
}
@media screen and (min-width: 400px) and (max-width: 660px) {
    .zal1 { display: block; }
    .zal0, .zal2, .zal3 { display: none; } 
}
@media screen and (min-width: 660px) and (max-width: 900px) {
    #wrapper { width: 660px; }
    #sidebar, #h_sidebar { display: none important!; visibility: none; } .main-body { width: 100%; } .flex-container-1, .flex-container-2 { flex-direction: column; } .flex-items { width: 100%; }
    .zal1, .zal2 { display: block; }
    .zal0, .zal3 { display: none; } 
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
    #wrapper { width: 880px; }
    .main-body { width: 560px; }
    #sidebar { width: 260px; }
}
@media screen and (min-width: 1100px) and (max-width: 1280px) {
    #wrapper { width: 1020px; }
    .main-body { width: 700px; }
    #sidebar { width: 260px; }
}
@media screen and (min-width: 1280px) {
    #wrapper { width: 1240px }
    .main-body { width: 840px; }
    #sidebar { width: 340px; }
}


/* ---------- Fonts ---------- */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v34-latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/raleway-v34-latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/raleway-v34-latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/raleway-v34-latin-ext-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/kaushan-script-v18-latin-ext-regular.woff2') format('woff2');
}




#wrapper { height: auto !important; height: 100%; max-width: 1240px; overflow: hidden; position: relative; margin: 0 auto; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); background: #fff; }


h1 { font-size: 36px; line-height: 46px; margin: 20px 0 26px 0; }
h2 { font-size: 1.4rem; line-height: 1.4rem; }
h3, h4 { font-size: 1rem; line-height: 1rem; }

a, a:visited { color: #18c6ef; text-decoration: underline; }
a:hover { text-decoration: none; }

.center, .has-text-align-center {text-align: center;}
.bold {font-weight: bold;}
.left {float: left;}
.right {float: right;}



#header { display: block; position: relative; }
.header-inner { display: block; position: relative; margin: 50px 30px; text-align: center; }
.header-inner a.logo { font-weight: 700; font-size: 30px; text-decoration: none; color: #000; }
.header-inner .tvuj { font-family: 'Kaushan Script', cursive; font-size: 22px; margin: 0 18px 0 0; }

.about { text-align: center; margin: 12px 10px 12px 10px; }
.about span { display: inline-block; vertical-align: middle; margin: 0 10px; color: #000; font-weight: 700; font-size: 10px; letter-spacing: 2.5px; }
.about:before, .about:after { content: ''; display: inline-block; vertical-align: middle; height: 1px; background: #000; }  /* width in responsive */

.navigation { border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; display: block; overflow: hidden; padding: 15px 20px; margin: 35px 0 0 0; }
.intro { font-size: 15px; }
nav { text-align: center; }
nav ul { padding:0; margin:0; list-style: none; position: relative; }
nav ul li { margin: 0px; display: inline-block; }
nav a, nav a:visited { display: block; padding: 3px 15px; color: #fff; text-decoration:none; border-radius: 6px; margin: 10px 10px 0 0; font-size: 15px; font-weight: 500; background: #18c6ef; }
nav a:hover { background: #ccc; }


.container { display: block; position: relative; margin-top: 40px; padding: 0 20px; overflow: hidden; }
.main-body { float: left; }    /* width in responsive */
#sidebar { float: right; }    /* width in responsive */
.sb-intro { font-size: 15px; margin: 0 0 20px 0; }    /* width in responsive */
.sb-list { font-size: 15px; line-height: 26px; margin: 0 0 20px 40px; }
.sb-list ul { margin: 0 0 0 40px; }
.sb-list li { padding: 0 0 0 5px; }
#breadcrumbs { font-size: 13px; margin: 5px 0; color: #bbb; }
#breadcrumbs a { color: #bbb; }
.meta { margin: 10px 0 0 0; }
.meta-inner { margin: 0 auto; color: #bbb; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 8px 20px; max-width: 540px; font-size: 13px; text-align: center; }
.the-content { margin: 34px 0 0 0; font-size: 15px; line-height: 24px; padding: 0 0 26px 0; border-bottom: 1px solid #ddd; }
.the-content p { margin: 0 0 26px 0; }
.the-content ul { display: block; list-style-type: disc; padding-left: 80px; margin: 0 0 26px 0; }
.the-content ol { display: block; list-style-type: decimal; padding-left: 80px; margin: 0 0 26px 0; }
.the-content .wp-block-image { margin: 0 0 26px 0; }
.the-content img { margin: 0 0 0 0; }
.the-content .wp-block-image figcaption { margin: 5px 0 0 0; text-align: center; font-size: 13px; }
.the-content iframe { margin: 0 0 26px 0; }
.the-content table { width: 100%; border: 1px solid #bbb; margin: 0 0 26px 0; }
.the-content table .tr-1, .the-content table .td-1 { background: #ecfffc; }
.the-content table tr th, .the-content table tr td { padding: 0 5px; }

.strap-headline:after, .strap-headline-akcni:after { display: block; content: ""; border-bottom: .21429rem solid #01bba0; position: relative; width: 5rem; margin: 10px auto 0 auto; }
.the-content h2, .the-content h3 { font-weight: bold; margin: 48px 0 26px 0; }
.the-content h2 { font-size: 22px; }
.the-content h3 { font-size: 18px; }

.flex-container { display: flex; justify-content: space-around; align-items: center; margin: 0 0 80px 0; } 
.flex-container-1, .flex-container-2 { } /* flex-direction in responsive */
.flex-items { overflow: hidden; } /* width in responsive */
.flex-item-1 { text-align: center; }
.flex-item-2 { text-align: center; }
.flex-item-2 img { width: 100%; }
.flex-headline { font-size: 22px; font-weight: bold;}
.flex-headline:after { display: block; content: ""; border-bottom: .21429rem solid #18c6ef; position: relative; width: 5rem; margin: 10px auto 26px auto; }
.flex-teaser { margin: 0 0 26px 0; line-height: 30px; }

.post-grid { width: 100%; overflow: hidden; }
.grid-title { text-align: center; margin: 48px 0 48px 0;}
.grid-title span { display: inline-block; vertical-align: middle; margin: 0 10px; color: #000; font-weight: 700; letter-spacing: 1.5px; } /* font-size in responsive */ 
.grid-title:before, .grid-title:after { content: ''; display: inline-block; vertical-align: middle; height: 0.5px; background: #000; } /* width in responsive */

.grid-items-holder { display: flex; justify-content: space-around; flex-flow: wrap; }
.grid-item-flex { text-align: center; } /* width in responsive */
.grid-item { position: relative; overflow: hidden; display: inline-block; margin: 0 0 50px 0; background: #fff; }
.margin-0 { margin: 0; }
.post-sb { position: relative; overflow: hidden; display: inline-block; margin: 0 0 30px; background: #fff; width: 100%; text-align: center; }  
.grid-item h2, .post-sb h2 { font-size: 16px; line-height: 28px; bottom: 0; position: absolute; width: 96%; padding: 6px 2%; text-align: center; background: #00000060; color: #fff;}
a.grid-item, a.post-sb { text-decoration: none; }
a.grid-item:hover h2, a.post-sb:hover h2 { text-decoration: underline; }
.date-label { position: absolute; background: #fff; color: #000; padding: 0px 10px; font-size: 12px; left: 0; top: 15px; z-index: 10; }
.thumb-zoom { overflow: hidden; display: flex; }
.thumb-zoom img { max-width: 100%; height: auto; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; }
a.grid-item:hover .thumb-zoom img, a.post-sb:hover .thumb-zoom img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }

.thumb600 { margin: 0; padding: 0 0px; text-align: center; display: block; margin: 34px 0 0 0; }
.thumb600 img { max-width: 100%; height: auto; margin: 0; }
.autor { display: block; color: #bbb; font-size: 13px; line-height: 13px; }
.tags { text-align: center; font-size: 13px; color: #bbb; margin: 25px 0; }

.space55 { margin: 55px 0 0 0; }
.info404 { font-size: 15px; margin: 0 0 40px 0; }

.sb-teaser-1  { text-align: center;  margin: 50px 0 26px; }
.sb-teaser-1 span { display: inline-block; vertical-align: middle; margin: 0 7px; color: #000; font-weight: 700; letter-spacing: 1.0px; font-size: 18px; } /* font-size in responsive */ 
.sb-teaser-1:before, .sb-teaser-1:after { content: ''; display: inline-block; vertical-align: middle; height: 0.5px; background: #000; width: 33px; } /* width in responsive */



/* ---------- Komentare + Dalsi-prispevky ---------- */

// #koment { margin: 0 0 10px 0; padding: 0; }
#comments { margin: 0 0 10px 0; padding: 0; }
.koment-title, .h_koment-title { text-align: center; margin: 48px 0 48px 0;; }
.koment-title span, .h_koment-title span { display: inline-block; vertical-align: middle; margin: 0 10px; color: #000; font-weight: 700; letter-spacing: 1.5px; } /* font-size in responsive */
.koment-title:before, .koment-title:after { content: ''; display: inline-block; vertical-align: middle; height: 0.5px; background: #000; } /* width in responsive */
.koment-list { width: 100%; }
.koment-list img { border-radius: 50%; }
.comment-body { overflow: hidden; margin: 0 0 10px 0; }
ul.children li .comment-body { margin: 0 0 10px 0; }
.koment-content, .koment-list li ul.children { margin: 0 0 0 75px; }
.koment-content { margin: 0 0 0 75px; padding: 0 0 0 0px; border-left: 0px solid #01bba0; }
ul.children li .comment-body .koment-content { margin: 0 0 0 75px; padding: 0 0 0 0px; border-left: 0px solid #01bba0; }
// #koment p { font-size: 14px; margin: 0 0 26px 0; }
#comments p { font-size: 14px; margin: 0 0 26px 0; }
.comment-awaiting-moderation  { font-size: 0.9rem; background: #fff900; margin: 0 0 0 21px; padding: 2px 10px; }
.vcard, .sb-vcard { float:left; }
.comment-meta { margin: 0 0 16px 0; }
.koment-autor { font-size: 15px; font-weight: 600; }
.koment-seperator { font-size: 15px; margin: 0 6px; }
.koment-cas, .comment-edit-link { font-size: 12px; }
.odpovedet { float: right; margin: 5px 0 5px 25px; }
.odpovedet a.comment-reply-link { padding: 5px 17px; color: #fff; background: #18c6ef; font-size: 12px; text-decoration: none; }
.odpovedet a:hover.comment-reply-link { background: #18b3ef; text-decoration: none; }
#commentform { overflow: hidden; }
.koment-list li { overflow: hidden; } /* styly pro li elementy (parent i child) */
.koment-list > li { border-bottom: 1px solid #ddd; margin: 0 0 26px 0; } /* styly pro parent li only */
.koment-list > li:last-child { border-bottom: 0px; }
textarea, #vase-jmeno input[type=text], #vas-email input[type=text] { background: #fff; overflow: auto; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); border: 1px solid #ddd; border-radius: 3px; font-family: inherit; font-size: 14px; line-height: 24px; }
textarea { width: 96%; height: 100px; padding: 10px 15px; margin: 0 0 26px 0; }
.inputs { margin: 0 0 20px 0; overflow: hidden; }
#vase-jmeno, #vas-email { width: 48%; float: left; }
#vase-jmeno { margin: 0 3.5% 0 0; }
#vase-jmeno input[type=text], #vas-email input[type=text] { width: 90%; padding: 0 5%; }
.osobni-udaje { text-align: center; font-size: 13px; margin: 0 5px 20px 5px; }
.vloz-koment { }
.tlacitko-publikovat { line-height: 2.1rem; font-size: 14px; color: #fff; background: #18c6ef; border: 0px none; padding: 0 50px; }
.tlacitko-publikovat:hover { background: #18b3ef; cursor: pointer; }
.povinna-pole { font-size: 12px; margin: 26px 0 26px 0; color: #444; text-align: center; }
.dulezite { font-weight: bold; }
#comment-nav-below { border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; display: block; overflow: hidden; padding: 15px 0; }
#comment-nav-below a { padding: 5px 17px; color: #fff; background: #18c6ef; font-size: 13px; text-decoration: none; border-radius: 0; margin: 0; }
#comment-nav-below a:hover { background: #18b3ef; text-decoration: none; }
.more-comments { font-weight: 700; font-size: 18px; letter-spacing: 1px; margin: 10px 0 20px 0; }


#footer { margin: 50px 0 0 0; background: #ccc; padding: 20px; text-align: center; font-size: 12px; line-height: 20px; }
#footer-2 { border-bottom: 1px solid #000; margin: 20px 0 0 0; padding: 0 0 26px 0; }
#footer-3 { margin: 20px 0 15px 0; }
.footer-content { margin: 0 auto; padding: 0 0px; overflow: hidden; }
a.footerlink { color: #000; text-decoration: none; }
a.footerlink-2 { color: #000; text-decoration: none; font-size: 15px; margin: 0 40px; line-height: 50px; }
a.footerlink:hover, a.footerlink-2:hover { text-decoration: underline; }
.cookie { color: #000; font-size: 10px; text-align: center; position: relative; line-height: 19px; }
.cookie a.cookie-link { color: #000; text-decoration: none; }
.cookie a.cookie-link:hover { text-decoration: underline; }



.stickyBanner { bottom: 0; top: auto; -webkit-box-shadow: 0 0 10px rgba(20,59,85,.12); box-shadow: 0 0 10px rgba(20,59,85,.12); border-radius: 0; border-top: 1px solid #ecf2f5; background-color: #fff; border-top: 1px solid #e6e6e6; }
.stickyBanner { z-index: 90; position: fixed; left: 0; width: 100%; background-color: #fff; }
.zalozka { cursor: pointer; position: absolute; top: 0; left: 15px; background-color: #fff;
    -webkit-box-shadow: 0 0 10px rgba(20,59,85,.12);
    box-shadow: 0 0 10px rgba(20,59,85,.12);
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    gap: 10px;
    transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    border: 1px solid #e6e6e6;
    border-bottom: none;
    font-weight: 700; }
.zalozka .zalTitle { } 
.zalozka .mobileTitle:afterrrrr { margin-left: 4px; content: "\2304"; }



.zalozka:before {
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: -9px;
}

.zalozka .zalozka-img { float: left; padding: 0 15px 0 0; line-height: normal; }
.zalozka .zalozka-img img { }  /* width in responsive */ 

.stickyContent { display: flex; justify-content: space-between; font-weight: 600; } /* line-hieght, font-size, padding in responsive */
a.zajem { padding: 10px 30px; background-color: #20b359; border-radius: 90px; font-weight: 600; text-align: center; color: #fff; cursor: pointer; text-decoration: none; -webkit-box-shadow: 0 3px 12px rgba(0,87,131,.2); box-shadow: 0 3px 12px rgba(0,87,131,.2); line-height: 46px; margin: 0 0 0 20px; }
a.zajem:hover { text-decoration: none; background-color: #199148; }


.top-rounded { text-align: center; margin: 0 0 15px 0; }
.top-rounded-2 { text-align: center; margin: 30px 0 15px 0; font-weight: 500; }
.top-rounded span, .top-rounded-2 span { display: inline-block; border-radius: 50px; background-color: #e7f4eb; color: #209140; padding: 10px 20px; }
h1.sim-title-1 { font-size: 40px; line-height: 54px; text-align: center; color: #209140; font-weight: 800; margin: 0; }
.sim-title-2 { font-size: 40px; line-height: 54px; text-align: center; font-weight: 800; }

.sim-title-3 { font-size: 36px; line-height: 48px; text-align: center; font-weight: 700; margin: 50px 0 0 0; }
.sim-title-4 { font-size: 36px; line-height: 48px; text-align: center; font-weight: 700; }
.sim-title-5 { font-size: 16px; line-height: 40px; text-align: center; font-weight: normal; }

.sim-title-6 { font-size: 18px; line-height: 30px; text-align: center; font-weight: 700; margin: 60px 0 0 0;  }
.sim-title-7 { text-decoration: underline; }
.sim-title-8 { font-size: 15px; line-height: 30px; text-align: center; font-weight: normal; margin: 0 0 0 0; font-style: italic;  }

.sim-title-9 { font-size: 36px; line-height: 48px; text-align: center; font-weight: 700; color: #209140; margin: 70px 0 14px 0; }

.sim-title-10 { font-size: 16px; line-height: 30px; text-align: center; font-weight: normal; }
.sim-title-11 { font-size: 16px; line-height: 30px; text-align: center; font-weight: normal; }
.sim-title-12 { text-align: center; margin: 15px 0 15px 0; }
.sim-title-12 span { display: inline-block; border-radius: 50px; background-color: #e7f4eb; color: #209140; padding: 10px 20px; }

.ziskat-cont { text-align: center; margin: 35px 0 15px 0; }
.ziskat-kartu { display: inline-block; background-color: #fff; color: #209140; border: 1px solid rgba(230, 230, 230, 1); padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: 500; font-size: 17px; }                          s
.ziskat-kartu:hover { background-color: #e7f4eb; color: #209140; border: 1px solid #209140; }
.ziskat-arrow { font-size: 23px; padding: 0 10px 0 0; }

.sim-img { margin: 75px auto; max-width: 600px; }


.sim-title-15 { font-size: 36px; line-height: 48px; text-align: center; font-weight: 700; color: #000; margin: 15px 0 0 0; }
.sim-title-16 { font-size: 36px; line-height: 48px; text-align: center; font-weight: 700; color: #000; margin: 15px 0 0 0; }
.sim-title-17 { font-size: 16px; line-height: 30px; text-align: center; font-weight: normal; margin: 15px 0 0 0; }
#ziskat { padding: 15px 25px; margin: 80px 0 0 0; }
.contacts { margin: 20px 0; padding: 20px; background: #f8f8f8; }
.contact { margin: 0 0 12px 0; }
.contact-first { border-bottom: 1px solid rgba(230, 230, 230, 1); padding: 0 0 20px 0; }
.contact-img { text-align: center; margin: 45px 0 100px 0; }
.contact-content { }
.contact-content .headline { color: #209140; padding: 2px 0px; font-weight: 700; font-size: 18px; display: block; } 
.contact-content .sub-headline { display: inline-block; border-radius: 50px; background-color: #e7f4eb; color: #209140; padding: 10px 20px;     margin: 12px 0 0 0; font-weight: 600; } 
.karta-form { }
.karta-signup { margin: 0px 0 0 0; display: inline-block; }
.karta-input { padding: 10px 20px; margin: 12px 15px 0 0; text-align: center; font-size: 15px; border-radius: 5px; border: 1px solid black; }
.karta-button { padding: 10px 20px; border: 0px none; margin: 12px 0 0 0; cursor: pointer; background: #209140; color: #fff; font-size: 15px; border-radius: 5px; }
.karta-button:hover { background: #196d31; }
.green { color: #209140; }

.sim-title-18 { font-size: 16px; line-height: 30px; text-align: center; font-weight: normal; margin: 30px 0 0 0; }






.code-teaser { background: #fff; padding: 20px; border: 1px solid #aaa; border-radius: 0px; margin: 25px 0 30px 0; font-size: 15px; line-height: 24px; }
.code-container { background: #fff; padding: 20px; border: 1px solid #aaa; border-radius: 0px; margin: 30px 0 30px 0; }
.code-header { border-bottom: 1px dashed #aaa; padding: 0 0 18px 0; }
.code-header1 { border-bottom: 1px dashed #aaa; padding: 0 0 18px 0; margin: 0 0 18px 0; }
.code-header2 { padding: 0 0 18px 0; }
.code-header .title, .code-header1 .title, .code-header2 .title  { font-weight: bold; font-size: 18px; line-height: 22px; margin: 0 0 12px 0; }
.code-header .desc { font-size: 15px; line-height: 24px; }
.code-header1 .desc, .code-header2 .desc { font-size: 14px; line-height: 24px; }
.code-content { display: flex; align-items: center; margin: 20px 0 10px 0; }
.code-info { flex: 1; margin-bottom: 0 !important; font-weight: bold; font-size: 13px; line-height: 13px; }
#code-tlacitko { margin: 0 0 0 0; padding: 0 0px 0 0; min-width: 210px; }
.code-btn, .code-btn1 { display: flex; height: 40px; position: relative; border: 0; width: 100%; font-size: 17px; font-weight: bold; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border 0.2s ease-in-out; border: 1px solid #aaa; border-radius: 6px;  }
.code-btn { cursor: pointer; background: transparent; }
.code-btn1 { background: #beffdc; }
.code-btn::before { content: "";
    position: absolute;
    width: calc(100% - 40px);
    height: 100%;
    left: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: width .2s ease-out;
    z-index: 1;
    background: #df5140; }                

.code-btn:hover::before {
    width: calc(100% - 50px);
    background: #c42f1e; }
    
.code-btn::after {
    content: "";
    left: calc(100% - 40px);
    border-style: solid;
    border-width: 39px 0 0 17px;
    transition: left .2s ease-out;
    position: absolute;
    border-color: transparent;
    border-left-color: #df5140;
}
.code-btn:hover::after {
    left: calc(100% - 50px);
    border-left-color: #c42f1e;
} 
    
.code-btn .label {
    width: 100%;
    position: absolute;
    z-index: 1;
    text-align: center;
    color: #fff;
}

.code-btn .kod {
    text-align: right;
    padding-right: 15px;
    width: 100%;
    line-height: 40px;
    color: #000;
}
.code-btn1 .sim-kupon {
    text-align: center;
    width: 100%;
    line-height: 40px;
    color: #000;
}

#code-tlacitko-visible { margin: 0 0 0 0; padding: 0 0px 0 0; min-width: 210px; display: none; }
#code-reveal-info { display: none; font-size: 15px; margin: 18px 0 18px 0; }
.code-reveal-info-smaller { font-size: 14px; }
#code-reveal-info h3 { margin: 18px 0 18px 0; padding: 30px 0 0 0; border-top: 1px dashed #aaa; }
.kuryr { margin-top: 15px; }






#h_wrapper { display: flex; flex-direction: row; justify-content: center; overflow: hidden; margin: 0 auto; background: #fff; }

.h_container { display: block; min-width: 55%; border-right: 1px solid rgba(230, 230, 230, 1); border-left: 1px solid rgba(230, 230, 230, 1); }
.h_container_inner { max-width: 720px; margin: 0 auto; }
.h_main-body { width: 94%; padding: 50px 3%; }
 
#h_sidebar { min-height: 100vh; width: 400px; border-left: 0px solid rgba(230, 230, 230, 1); padding: 0 15px 0 25px; overflow: hidden; margin: 0; border: 0px solid red; } /* display in responsice */
#h_sidebar_inner { top: 0px; padding-top: 40px; border: 0px solid black; background: #fff; font-size: 13.5px; }

#h_footer { margin: 0px 0 0 0; background: #fff; padding: 90px 20px 20px 20px; text-align: center; font-size: 12px; line-height: 20px; }

#h-breadcrumbs { font-size: 13px; margin: 5px 0; color: #bbb; }
#h-breadcrumbs a { color: #bbb; text-decoration: none; }

.h_sb_title { vertical-align: middle; margin: 0 10px; color: #000; font-weight: 700; letter-spacing: 1.5px; font-size: 26px; text-align: center; }
.h_nejnovejsi { color: #bbb; font-size: 13px; margin: 25px 0; }
.koment-list li ul.h_children { margin: 0 0 0 30px; }
a.h_vlozit { font-size: 14px; color: #fff; color: #18c6ef; border: 1px solid #18c6ef; padding: 5px 30px; display: block; margin: 0 auto; text-align: center; text-decoration: none; width: 150px; }
.h_vlozit:hover { background: #18b3ef; color: #fff; text-decoration: none; }

html { 
  scroll-behavior: smooth; 
}
.h_odpovedet { float: right; margin: 5px 0 5px 25px; }
.h_odpovedet a.comment-reply-link { padding: 5px 17px; color: #18c6ef; border: 1px solid #18c6ef; font-size: 12px; text-decoration: none; }
.h_odpovedet a:hover.comment-reply-link { background: #18b3ef; color: #fff; text-decoration: none; }
.fotos { width: 100%; }
.fotos .foto-link {display: inline-block; width: 19.5%; text-align: center; }
.fotos .foto-link img { width: 97%; }
.fotos .foto-link:hover img { opacity: 0.5; }

.inContentOffer { margin: 30px 0; padding: 15px; line-height: 22px; font-size: 14.5px; background: #f2fffa; border: 1px solid rgba(230, 230, 230, 1); border-left: 5px solid #009d3f; }
.authorSection { float: left; }
.authorSection img { border-radius: 50%; }
.offerSection { margin: 0 0 0 75px; }
.offerMeta { color: #999; font-size: 13px; }
.offerTitle { font-weight: bold; margin: 8px 0; }
ul.offerList { padding-left: 50px; margin: 0 0 0px 0; }
.offerCall { margin: 12px 0; }
.offerCondition { color: #999; font-size: 13px; line-height: 20px; }






/* SEARCH FILTER */

#hotel-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    gap: 1rem;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

#date-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#date-range-display::placeholder {
  color: #000; /* or any color you want */
  font-size: 14px;
}

#date-filter .chevron, #date-filter .reset-cross {
  position: absolute;
  right: 15px;
  cursor: pointer;
  z-index: 2;
}

#date-filter .chevron {
  transition: transform 0.3s ease;
}

#date-filter .chevron.rotated {
  transform: rotate(180deg);
}

#date-filter input#date-range-display  {
  display: block;
  line-height: 24px;
  width: 160px;
  cursor: pointer;
  position: relative;
  padding: 6px 12px;
  transition: background-color 0.3s ease; /* Smooth background change */
  color: #000;
  background: #fff;
  border-radius: 7px;
  border: 1px solid #7c7c7c;
  font-size: 14px;
  font-weight: bold;
}

#date-filter input#date-range-test  {
  position: absolute;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  visibility: hidden;
  bottom: -10px;
}

#price-filter, #nights-filter, #operators-filter, #board-filter, #airport-filter {
  width: 120px;
}
#price-filter {
  width: 160px;
}

#price-filter, #nights-filter, #operators-filter, #board-filter, #airport-filter {
  cursor: pointer;
  position: relative;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #000;
  background: #fff;
  border-radius: 7px;
  border: 1px solid #7c7c7c;
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  transition: background-color 0.3s ease; /* Smooth background change */
}

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px #2684ff44;
  border-color: #2684ff;
}

#price-filter.active, #nights-filter.active, #operators-filter.active, #board-filter.active, #airport-filter.active, #date-filter input#date-range-display.active {
  background-color: #363f45; /* Change color when active */
  color: #fff;
}

.chevron {
    transition: transform 0.2s ease; /* Smooth rotation */
    font-size: 1.2rem;
    transform-origin: center;
}
.chevron svg {
  fill: #555;
}

button.reset-cross {
  background: #fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: #363f45;
  font-weight: 600;
  width: 17px;
  height: 17px;
  border-radius: 20px;
}

.confirm-section  {
  border-top: 1px solid #ddd;
  margin: 30px 0 0 0;
  padding: 15px 0 0 0;
}

.confirm-section  button.confirmation-button  {
  background: #363f45;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}
.confirm-section  button.confirmation-button:hover {
  background: #333;
}

/* Dropdown positioning */
#price-range, #nights-range, #operators-list, #board-list, #airport-list {
    display: none; /* Hide by default */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px); /* Slide-in effect */
    border: 1px solid #bbb;
    border-radius: 8px;
    box-shadow: 0 0 6px #e0e0e0;
    margin-top: 12px;
}

/* Visible state */
#price-range.visible, #nights-range.visible, #operators-list.visible, #board-list.visible, #airport-list.visible {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Slide down */
    position: absolute;
    z-index: 9999;
    background-color: white;
    width: 300px;
    padding: 10px 2%;
    border-radius: 8px;
}

/* Hidden by default */
.not-visible {
  display: none;
}

/* Make it visible when toggled */
.visible { 
}

/* Optional for mobile view */
@media (max-width: 600px) {
  #price-range.visible, #nights-range.visible, #operators-list.visible, #board-list.visible, #airport-list.visible {
    width: 96%;
  }
}


.list-element {
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  cursor: pointer;
  margin: 0 0 5px 0;
}
.list-element:hover {
  background: #ececec;
}
.list-checkbox {
  height: 22px;
    width: 22px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    margin: 1px 15px 0 0;
    border: 1px solid #ddd;
}
.list-checkbox input {
    position: absolute;
    opacity: 0;
    height: 22px;
    width: 22px;
    cursor: pointer;
}
.list-checkbox svg.checkmark {
  display: none;
  height: 28px;
  width: 28px;
  position: relative;
  top: -3px;
  left: -3px;
  fill: #192024;
}
.list-element.selected .list-checkbox svg.checkmark {
  display: inline-block;
}
.list-title {
  cursor: pointer;
}

.range-input-fields {
  display: flex;
  justify-content: space-between;
  margin: 25px 0 25px;
}
.range-input-fields input{
  display: flex;
  width: 110px;
  padding: 10px 0px;
  height: 100%;
  outline: none;
  font-size: 15px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.slider {
  height: 5px;
  position: relative;
  background: #ddd;
  border-radius: 5px;
}
.slider .progress {
  height: 100%;
  left: 0%;
  right: 0%;
  position: absolute;
  border-radius: 5px;
  background: #17a2b8;
}
#price-range .slider .progress, #nights-range .slider .progress {
  left: 0%;
  right: 0%;
}
.range-input {
  position: relative;
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.range-input input:hover {
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #17a2b8;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #17a2b8;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.sorting-filter {
}
.sorting-content {
  display: flex;
  position: relative;

}
.sorting-content:hover {
  cursor: pointer;
}
.sorting-label {
  margin: 0 12px 0 0;
}
.sorting-options {
  display: none; /* Hide by default */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px); /* Slide-in effect */
  border: 1px solid #bbb;
  border-radius: 8px;
  box-shadow: 0 0 6px #e0e0e0;
  position: absolute;
  top: 150%;
  right: 0; /* Align to right instead of center */
  z-index: 9999;
  background-color: white;
  width: 200px;
  padding: 10px;
}
.sorting-options.visible {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Slide down */
}
.sort-option {
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  cursor: pointer;
  margin: 0 0 5px 0;
}
.sort-option:hover {
  background: #ececec;
}


#filter-results {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 0 6px #e0e0e0;
  min-height: 60px;
}
#filter-results-2 {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 0 6px #e0e0e0;
  margin: 20px 0;
}
a.tour-card {
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  color: black;
}
a.tour-card:hover {
  background: #f8f9fa;
}
a.tour-card:hover .tour-operator-name {
  text-decoration: underline;
}
.tour-details {
}
.tour-operator-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex: 1;
}
.tour-operator {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tour-price {
  font-weight: 700;
  text-align: right;
}
.tour-link {
  color: white;
  /*background: #0070f6;*/
  background: linear-gradient(70deg, #00bce6, #2962ff 40%, #d500f9);
  border-radius: 50px;
  padding: 8px 30px;
  font-size: 14px;
  text-align: center;
}
.tour-link:hover {
  text-decoration: underline;
}
.tour-link::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
  top: 2px;
  margin-left: 2px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018l6-6-6-6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
}


.tour-details-dates {
}
.tour-details-date {
  font-weight: 700;
  margin: 0 10px 8px 0;
  display: inline-block;
}
.tour-details-nights, .tour-details-info, .tour-operator-name {
  font-size: 14px;
}
.tour-details-nights {
}

.tour-details-info {
}
.tour-operator-logo img {
  width: 78px;
  margin: 7px 0 0 0;
}


@media (max-width: 600px) {
  .tour-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .tour-details {
    order: 1;
    flex: 1 1 40%;
  }

  .tour-details-date {
    display: block;
  }
  .tour-details-divider {
    display: none;
  }
  .tour-details-nights, .tour-details-info, .tour-operator-name {
    font-size: 13px;
  }

  .tour-operator-price {
    order: 2;
    flex-direction: column;
    align-items: flex-end;
  }
  .tour-operator {
    order: 1;
    align-items: flex-end;
    margin: 8px 0 0 0;
  }
  .tour-link {
    order: 3;
    width: 100%;
  }
  .tour-operator-logo {
    order: 2;
    display: flex;
    margin: 6px 0 0 0;
  }
  .tour-operator-name {
    order: 1;
  }

  #date-filter, #date-filter input#date-range-display, #price-filter, #nights-filter, .custom-filter { width: 100%; }
  #operators-filter, #board-filter, #airport-filter { width: auto; }
}





#hh-wrapper { width: 100%; overflow: hidden; background: white; }
.hh-top { max-width: 1240px; margin: 0 auto; border: 0px solid red; padding: 20px 20px 20px 20px; text-align: center; }
#hh-breadcrumbs { font-size: 14px; color: #aaa; }
#hh-breadcrumbs a { color: #aaa; }
h1.hh-title { display: inline-block; margin: 20px 0 0 0; font-size: 40px; line-height: 56px; font-weight: 800; }
.hh-stars { font-size: 25px; position: relative; font-weight: 800; bottom: 16px; letter-spacing: 4px; }
.hh-intro { display: flex; justify-content: space-between; gap: 30px; align-items: center; max-width: 1240px; margin: 0 auto; border: 0px solid blue; padding: 20px 20px; }
.intro-text { width: 50%; font-size: 16px; line-height: 26px; }
.intro-text p:first-child { margin: 0 0 20px 0; }
.intro-nabidka { width: 45%; border: 1px solid #003a6b; border-radius: 8px; }
.intro-nabidka .top { color: #fff;
  padding: 4px 15px;
  font-size: 12px;
  font-weight: 700;
  background: #003a6b;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 5px 5px 0 0; }
#nabidka-details { display: flex; justify-content: space-between; padding: 10px 15px; }
nabidka-left { width: 55%; }
.nabidka-right { width: 40%; text-align: center; padding: 5px 0; display: flex; flex-direction: column; align-items: center;  }
.nabidka-left .nabidka-date { display: block; font-weight: 700; margin: 0 0 5px 0; }
.nabidka-left .nabidka-desc { display: block; font-size: 13px; line-height: 20px; }
.nabidka-left .capitalize {  text-transform: capitalize; }
.nabidka-left .nabidka-terminy { display: block; font-size: 13px; line-height: 20px; margin: 5px 0 0 0; font-weight: 700; }
.nabidka-left .nabidka-chevron { position: relative; top: 3px; }
.nabidka-left a.nabidka-chevron svg { fill: #18c6ef; }
.nabidka-right .nabidka-price { display: block; font-size: 24px; font-weight: 700; margin: 0 0 15px 0px; }
.nabidka-right a.nabidka-button { display: block; width: 90%; color: white; background: linear-gradient(70deg, #00bce6, #2962ff 40%, #d500f9); border-radius: 50px; padding: 5px 0px; margin-top: auto; font-size: 14px; text-decoration: none; }
.nabidka-right a.nabidka-button:hover { text-decoration: underline; }

.hh-nav { max-width: 1240px; margin: 0 auto; list-style-type: none; border-bottom: 1px solid #e0e0e0; } /* padding in responsive */
.hh-nav a li, .hh-nav li { display: inline-block; font-weight: 700; color: #000; } /* padding in responsive */
.hh-nav li.hh-nav-first { border-bottom: 4px solid #2962ff; }
.hh-nav li:hover { border-bottom: 4px solid #2962ff; }
.hh-content { max-width: 1240px; margin: 0 auto; padding: 5px 20px 20px 20px; }
h2.hh-content-title { padding: 18px 0; font-size: 18px; font-weight: 800; }
.hotel-info { max-width: 800px; margin: 46px auto; padding: 0; }
#recenze, #podobne-hotely, #dalsi-obrazky { margin: 36px 0; }
.recenze-meta { margin: 0 0 40px 0; }
.recenze-meta-inner { margin: 0 auto; color: #bbb; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 8px 20px; max-width: 540px; font-size: 13px; text-align: center; }
.hotel-info h2 { padding: 25px 0 40px 0; font-size: 26px; line-height: 26px; }
.hotel-info h3 { padding: 20px 0 26px 0; font-size: 20px; line-height: 20px; }
.hotel-info p { margin: 0 0 26px 0; font-size: 17px; line-height: 28px; }
.hotel-info figcaption { padding: 24px 0; font-weight: 700; }
.hotel-info img { display: block; width: 94%; border-radius: 8px; margin: 0 auto 30px auto; box-shadow: 0px 0px 10px 1px #cbcbcb; }
.hotel-info ul { list-style-type: disc; padding-left: 80px; margin: 0 0 26px 0; line-height: 28px; }
.hh-photos{ /* max-width: 1600px; */ margin: 0 auto; padding: 0px 0px; }
.holder-img-3-outer { padding: 0px 0px 25px 0px; margin: 0 auto; }
.holder-img-3 { padding: 10px 0px 10px 0px; }
.gallery-cell { text-align: center; }  /* width in responnsive */  
.recenze-foto-3 { width: 93%; margin: 15px 15px 15px 0; border-radius: 8px; height: auto; display: block; /* box-shadow: 0 15px rgb(0 0 0 / 30%); */ }
@media screen and (max-width: 649px) {
  .gallery-cell { width: 100%; }
  .hh-nav { padding: 0; }
  .hh-nav a li, .hh-nav li { padding: 5px 10px; font-size: 14px; } 
}
@media screen and (min-width: 650px) {
  .gallery-cell { width: 50%; }
  .hh-nav { padding: 0 20px; }
  .hh-nav a li, .hh-nav li { padding: 10px 30px; } 
}
@media screen and (min-width: 800px) {
  .gallery-cell { width: 22%; }
}
.flickity-hidden {
  opacity: 0;
}

.filter-results-header { display: flex; justify-content: space-between; font-size: 15px; margin: 18px 0; padding: 0 15px; }
.porovnej-ceny { }
#sorting-filter { }

#results-wrapper { position: relative; margin: 0 0 30px 0; }
#loading-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); text-align: center; font-weight: bold; z-index: 10; padding: 0 20px; line-height: 64px; }
.zadne-zajezdy { text-align: center; font-weight: bold; z-index: 10; padding: 20px 0; font-size: 14px; }
.load-more-container { }
#load-more-btn { display: none; margin: 0 auto;
cursor: pointer;
    padding: 6px 12px;
    color: #000;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #7c7c7c;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
}
#load-more-btn:hover { background-color: #363f45; color: #fff; }

@media screen and (max-width: 960px) {
  #hh-breadcrumbs { font-size: 12px; }
  .hh-intro { flex-direction: column; }
  .intro-text, .intro-nabidka { width: 100%; }
  .intro-nabidka { max-width: 560px; }
  h1.hh-title { font-size: 30px; line-height: 40px; }
  .hh-stars { font-size: 20px; position: relative; bottom: 10px; letter-spacing: 3px; }
}
#hh_footer { background: #fff; padding: 120px 20px 20px 20px; text-align: center; font-size: 12px; line-height: 20px; }
.h-footer-2 { border-bottom: 1px solid #cdcdcd; margin: 0px 0 26px 0; padding: 0 0 26px 0; }



/* HTML: <div class="loader"></div> */
.loader {
  width: 20px;
  margin: 20px auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #79c2eb;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}


.list-element.disabled {
    opacity: 0.4;
    pointer-events: none;
}