:root {
    --main-bg-color-light: #f5f6fa
}

/****** ASM.cz/sk styly v2 by HAP (start 3/2024)

1. #v21 - global ( css reset, nastaveni body a html, globální třídy)
2. #v24 - homepage ( stylování sekcí na úvodce)

src ikon https://www.svgrepo.com/collection/lineking-icons/   https://www.svgrepo.com/collection/solar-outline-icons
******/

/* #v21 - global *********************************************************************************************************************************************************/
html, body { scroll-behavior: smooth; scroll-padding: 50px;}
/* konec #v21 - global *********************************************************************************************************************************************************/

/* #v24 - homepage *********************************************************************************************************************************************************/
#v24-homepage-container { width:100%; color: #222; font-size: 15px; container-type: inline-size; max-width:1300px;  margin-bottom: -25px /* fix odsazeni footeru */;}
#v24-homepage-container section { padding: 1em; }
#v24-homepage-container .v24-bg-white { background: white}
#v24-homepage-container .v24-p-all-2 { padding: 2em}
#v24-homepage-container .v24-p-top-2 { padding-top: 2em}
#v24-homepage-container .v24-p-top-4 { padding-top: 4em}
#v24-homepage-container .v24-p-y-4 { padding-top: 4em; padding-bottom: 4em}
#v24-homepage-container h1,
#v24-homepage-container h2,
#v24-homepage-container h3 { color: #16324a; font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif;  font-optical-sizing: auto; text-transform: uppercase;}
#v24-homepage-container h1 { font-size:33px}
#v24-homepage-container h2 { font-size:28px; font-weight: 700; }
#v24-homepage-container h3 { font-size:20px}
#v24-homepage-container .cta.btn { font-size: 15px; padding: .75em 2em; border: none; box-shadow: 0 5px 15px -10px #13415b;}
#v24-homepage-container .cta.btn-medium { background: #e40114; color: white;}
#v24-homepage-container .effect1 { position:relative; display: block; padding: 13px 0;}
#v24-homepage-container .effect1:before,
#v24-homepage-container .effect1:after { content: ''; position: absolute; width: 300px; height: 1px;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #50b1e3), to(transparent));
    background-image: -o-linear-gradient(left, transparent 0%, #50b1e3 50%, transparent 100%);
    background-image: linear-gradient(to right, transparent 0%, #50b1e3 50%, transparent 100%);
    left: 50%; background-repeat: no-repeat; background-size: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#v24-homepage-container .effect1:before { width: 300px; bottom: 3px;}
#v24-homepage-container .effect1:after { width: 200px; bottom: 0;}

.v24-frame-itemsFlexRow { display:flex;}
.v24-iconHolder {}
.v24-iconHolder svg { max-height: 100%; max-width: 100%;}

#v24-sec01 { margin-top: 69px;}
#v24-sec01 h1 { line-height: 1.35em; max-width: 80%; color: white}
#v24-sec01 p { color: white}
#v24-sec01 .v24-frame { background: #0077b3 url(/img/energy/energy-intro.webp) center center / cover; position: relative; border-radius: 1em;    overflow: hidden;}
#v24-sec01 .v24-frame .v24-frame-left { background: #778a9de0; padding: 3em; display: flex; flex-direction: column; align-items: baseline; justify-content: center; gap: 2em;}
#v24-sec01 .v24-frame .v24-frame-right  { background: #f6faff82; min-height: 250px; padding: 3em;}
#v24-sec01 .v24-curl { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: max-content !important;}
#v24-sec01 .v24-curl svg { width: 150px; fill: var(--main-bg-color-light); margin-bottom: -2px;}
#v24-sec01 .v24-parent-grid { height: 100%; display: grid; /*grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 1em; grid-row-gap: 1em;*/}
/*#v24-sec01 .div1 { grid-area: 1 / 1 / 2 / 2; background: #9dacbd}
#v24-sec01 .div2 { grid-area: 2 / 1 / 3 / 2; background: #9dacbd}
#v24-sec01 .div3 { grid-area: 1 / 2 / 3 / 3; background: #9dacbd}*/
#v24-sec01 .v24-parent-grid div { background-size: contain /*cover*/; background-position: center bottom; max-height: 355px; }
@container (max-width: 766.99px) {
    #v24-sec01 .v24-parent-grid   { display: flex; justify-content: center;}
    #v24-sec01 .v24-parent-grid  > div { width: 100%; height: 25vw;}
}
@container (max-width: 500px) {
    #v24-sec01 h1 { font-size:30px; line-height: 1.2em; max-width: 100%}
    #v24-homepage-container .cta.btn { margin: 0 auto;}
}
@container (min-width: 767px) {
    #v24-sec01 .v24-frame { display:flex; }
    #v24-sec01 .v24-frame > div { width: 50%;}
    #v24-sec01 .v24-frame img  { object-fit: contain; }
}

#v24-sec02 { position: relative; text-align:center; background: radial-gradient(circle at bottom, #75869933, transparent 70%)}
#v24-sec02 .v24-frame { margin: 2em 0 0}
#v24-sec02 .v24-frame-full p { max-width:730px; margin: 0 auto .5em }
#v24-sec02 .v24-subtitle { position: relative; color: #ea0000; font-weight: 600; text-transform: uppercase; letter-spacing: -.5px; font-size: 1.125em; padding: 0 0 1em}
#v24-sec02 .v24-subtitle:after { position: absolute; content: ""; display: block; width: 25%; height: 1px; border-bottom: 1px solid #9cd1ef; margin: 10px 0 0; left: 50%; bottom: .5em; transform: translateX(-50%);}
#v24-sec02 .v24-frame-itemsFlexRow { justify-content: space-around;gap: 1em; padding: 4em 0 0}
#v24-sec02 .v24-frame-itemsFlexRow > div { background: white; padding: 20px; border-radius: .75em; flex: 1 1 auto;}
#v24-sec02 .v24-iconHolder { width: 100%; max-width: 120px;  padding: 0 0 15px; margin: 0 auto 1em;}
#v24-sec02 .v24-iconHolder img { width: 100%}
@container (max-width: 1024px) {
    #v24-sec02 .v24-frame-itemsFlexRow { flex-wrap: wrap; justify-content: center;}
}
@container (max-width: 600px) {
    #v24-sec02 .v24-frame-itemsFlexRow { flex-direction: column; padding: 0}
    #v24-sec02 .v24-frame-itemsFlexRow > div  { display: flex; gap: 1em; align-items: center; justify-content: center;}
    #v24-sec02 .v24-iconHolder { max-width:20vw; padding:0; margin:0}
}

#v24-sec03 .v24-frame { justify-content: space-around; border-radius: 1em;}
#v24-sec03 .v24-frame-left { display: flex; flex-direction: column; max-width: 350px;}
#v24-sec03 .v24-frame-left ul { padding:0; display: flex; flex-wrap: wrap; }
#v24-sec03 .v24-frame-left li { padding: .5em 1em; position: relative}
#v24-sec03 .v24-frame-left li:before { position: absolute; content:""; display:block; height: 0; width: 0; left: -4px; top: 16px; border: 4px solid; border-color:	#56a4bd #56a4bd transparent transparent; transform: rotate(45deg) translateY(-50%);}
#v24-sec03 .v24-frame-left a.cta { width: max-content; }

@container (max-width: 1099.9px) {
    #v24-sec03 .v24-frame-left { text-align: center; padding-bottom: 4em}
    #v24-sec03 .v24-frame-left ul { max-width: 70%; justify-content: center; margin: 0 auto 10px; }
    #v24-sec03 .v24-frame-right > div { margin: 0 auto}
    #v24-sec03 .v24-frame-left a.cta { margin: auto; }

    #v24-sec03 .v24-frame { flex-wrap: wrap;}
    #v24-sec03 .v24-frame-left { flex-direction: column; max-width: 100%; margin-bottom: 2em}
    #v24-sec03 .v24-frame-right { width: 100%;}
}
@container (min-width: 1100px) { /* 800 banner rotátor + 280 levá část*/
    #v24-sec03 .v24-frame { display:flex; }
    #v24-sec03 .v24-frame-left ul { flex-direction: column;}
    #v24-sec03 .v24-frame-left a.cta { margin-top: auto; }
}
@container (max-width: 500px) {
    #v24-sec03 .v24-frame-left ul { max-width: 100%}
}

/* spojte se s námi */
#v24-sec04 { margin: 2em}
#v24-sec04 .v24-frame { display:flex; background: linear-gradient(126deg, #ff7600, #fe9e1b 60%, #db001200); padding:2px;}
#v24-sec04 .v24-frame-left { position: relative; padding: 2em; flex-grow: 1; }
#v24-sec04 .v24-frame-left * { color:white !important}
#v24-sec04 .v24-frame-right { width: 40%; display: flex; justify-content: center; align-items: center; padding: 2em; position: relative; z-index: 2; background: white; }
#v24-sec04 .v24-columnList > a { display: flex; align-items: center; gap: .75em }
#v24-sec04 .v24-frame-right span  { font-size: 1.3em; padding: 6px 0; white-space: nowrap}
#v24-sec04 .v24-columnList a svg { width: 2em; height: 1.75em}
@container (min-width: 800px) {
    #v24-sec04 .v24-frame-helper { position: relative; width: 200px; flex-shrink: 0; overflow: hidden;}
    #v24-sec04 .v24-frame-helper:before { position: absolute; content:"";  background: white; width: 100%; height:calc(100% + 2px); transform: skewX(-33deg);z-index: 1; transform-origin: bottom right; }
    #v24-sec04 .v24-frame-right { padding: 2em 4em 2em 0; border-radius: 0 1em 1em 0; max-width: 350px;}
    #v24-sec04 .v24-frame { border-radius:1em}
}
@container (max-width: 580px) {
    #v24-sec04 .v24-frame { flex-direction:column; }
    #v24-sec04 .v24-frame-right { width: 100%;}
}

#v24-sec05 { text-align: center;}
#v24-sec05 .v24-frame-full p { max-width: 660px; margin: 0 auto 10px}
#v24-sec05 .owl-stage { display: flex; align-items: end;}
#v24-sec05 .owl-carousel > div img { width: max-content; filter: grayscale(1); opacity: .4; transition: opacity .5s}
#v24-sec05 .owl-carousel .owl-item:hover img { opacity: .8}
#v24-sec05 .owl-item { height: 40px}
#v24-sec05 .owl-item > div { display:flex; flex-direction: column; align-items: center; height: 100%}


#v24-sec06 .v24-frame-row > div { padding: 2em; border-radius: 1em;}
#v24-sec06 h2 small { color: #e1314b; padding: 0 0 9px; display: block;}
#v24-sec06 h2 b { color: #432100;}
#v24-sec06 h2,
#v24-sec06 p,
#v24-sec06 .cta { position: relative; z-index: 2}
#v24-sec06 .v24-flexHelper { display:flex}
#v24-sec06 .v24-reason-1 { background: linear-gradient(40deg, #fe9e1b, #fdb5623b); margin-bottom:1.5em}
#v24-sec06 .v24-reason-2 { background: linear-gradient(40deg, #accdff, #eceef4); position: relative; margin-bottom:1.5em}
#v24-sec06 .v24-reason-3 { background: linear-gradient(40deg, #cdf2b3, #a6e4f2); position: relative; margin-bottom:1.5em}
#v24-sec06 .v24-reason-2 b { color: #0065ff}
#v24-sec06 .v24-reason-3 b { color: #2e8200}
#v24-sec06 .v24-imageHelper { max-height: 250px; margin: -50px 0 -30px; overflow: hidden; width: 424px;}
#v24-sec06 .v24-imageHelper img { height:100%}
@container (min-width: 800px) {
    #v24-sec06 .v24-frame-row { display:flex; gap:1.5em; }
    #v24-sec06 .v24-frame .v24-frame-60 { width: 55%}
    #v24-sec06 .v24-frame .v24-frame-40 { width: 45%}
    #v24-sec06 .v24-reason-2 p { max-width: 55%}
    #v24-sec06 .v24-reason-2 img { position: absolute; right: 0; bottom: 0; height: calc(100% + 1em); max-height:255px; z-index: 1; opacity: .6; border-radius: 1em;}
    #v24-sec06 .v24-reason-3 p { max-width: calc(100% - 130px)}
    #v24-sec06 .v24-reason-3 img { position: absolute; right: -2em; bottom: -2em; height: 174px; z-index: 1; }
}
@container (max-width: 799.9px) {
    #v24-sec06 .v24-frame-row > div { text-align:center}
    #v24-sec06 .v24-reason-1 .v24-imageHelper,
    #v24-sec06 .v24-reason-2 img,
    #v24-sec06 .v24-reason-3 img { display:none}
}


#v24-sec07 { text-align: center; background: url(/img-v2/homepage/bg2.webp) no-repeat center / cover;}
#v24-sec07 .v24-frame { margin: 0 0 4em }
#v24-sec07 .v24-frame-full { margin: 0 0 3em}
#v24-sec07 .v24-frame-full p { max-width:660px; margin: 0 auto .5em }
#v24-sec07 .owl-item { padding: 0 1.5em 1em}
#v24-sec07 .owl-item h5 { font-size:18px; font-weight:600;}
#v24-sec07 .v24-cite { font-style: italic;}


#v24-sec08 { text-align: center;}
#v24-sec08 .v24-frame-full { padding: 2em;}
#v24-sec08 .owl-stage { display: flex; align-items: center; gap: 25px;}
#v24-sec08 .owl-item { max-height: 55px}


#v24-sec09 .v24-frame { margin: 2em 0 0}
#v24-sec09 { background: radial-gradient(circle at bottom, #ebf2f9, transparent 60%);}
#v24-sec09 .v24-articleGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em;}
#v24-sec09 .v24-articleGrid .owl-stage { display: flex; gap: 1em;}
#v24-sec09 article { flex-basis: calc(33% - .5em); height: 100%; background: white; box-shadow: 0 7px 10px -10px #069; border-radius: .5em; overflow: hidden; transition: all .3s}
#v24-sec09 article:hover {  border-radius: .5em .5em 40% 0 / .5em .5em 10% 0;}
#v24-sec09 article header { height: 10em; background-size:cover; background-position: center center; opacity: .8 }
#v24-sec09 article:hover header { opacity: 1}
#v24-sec09 article > div { display:block; padding: 1em}
#v24-sec09 article h4 { color:#069; font-weight:500}
#v24-sec09 article p { color:#456; display: -webkit-box; -webkit-box-orient: vertical;	-webkit-line-clamp: 5;	overflow: hidden; text-overflow: ellipsis;}
#v24-sec09 article p *:not(a) { font-size: inherit !important; color:#456 !important; }
#v24-sec09 article a { text-decoration: underline; }
#v24-sec09 article time { font-size: .85em; color: #456; padding: 0 0 4px; display: block;
}
#v24-sec09 .v24-frame-full { text-align: center; padding: 2em}
@container (max-width: 900px) {
    #v24-sec09 article { flex-basis: calc(50% - 1em)}
}
@container (max-width: 600px) {
    #v24-sec09 article { flex-basis: calc(100% - 1em)}
}

#v24-sec10 { text-align: center; background: radial-gradient(ellipse at top, #fff, transparent 50%), radial-gradient(circle at bottom, #6d8caf52, transparent 70%);}
#v24-sec10 .v24-frame-full p { max-width:660px; margin: 0 auto .5em }
#v24-sec10 .v24-frame-full * { margin: 0 0 1em}
#v24-sec10 .v24-frame-itemsFlexRow { justify-content: center; padding: 2em 0; flex-wrap: wrap; gap:2em }
#v24-sec10 .v24-imgHolder { position: relative; width: min-content;  margin: 0 auto }
#v24-sec10 .v24-imgHolder img { max-width: 250px;}
#v24-sec10 .v24-subtitle { height: 2em}
@container (max-width: 1060px) {
    #v24-sec10 .v24-frame-itemsFlexRow { max-width:500px; margin: 0 auto}
}
/* konec #v24 - homepage *********************************************************************************************************************************************************/




/** * Owl Carousel v2.1.1 */
/* použití: homepage */
.owl-carousel,.owl-carousel .owl-item{ -webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{ display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{ position:relative;-ms-touch-action:pan-Y}
.owl-carousel .owl-stage:after{ content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{ position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{ min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{ display:block;max-width:100%; max-height: 100%; margin: 0 auto;-webkit-transform-style:preserve-3d}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{ cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loaded{ display:block}
.owl-carousel.owl-loading{ opacity:0;display:block}
.owl-carousel.owl-hidden{ opacity:0}
.owl-carousel.owl-refresh .owl-item{ display:none}
.owl-carousel.owl-drag .owl-item{ -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{ cursor:move;cursor:grab}
.no-js .owl-carousel{ display:block}
.owl-height { transition:height .5s ease-in-out}

/* owl-fix */
.owl-stage-outer { padding: 1em 0 0}
.owl-carousel .item { position: relative; z-index: 100; -webkit-backface-visibility: hidden;}
.owl-nav button { position: absolute; top: 0; height: 100%; border:none}
.owl-nav .caret-left,
.owl-nav .caret-right { width: 30px; height: 40px; display: block; background-repeat: no-repeat }
.owl-nav .caret-left {  margin: -2em 40px 0 5px; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath style='fill: %23a7c6d0' d='M160 220a11.963 11.963 0 0 1-8.485-3.515l-80-80a12 12 0 0 1 0-16.97l80-80a12 12 0 0 1 16.97 16.97L96.971 128l71.514 71.515A12 12 0 0 1 160 220Z'/%3E%3C/svg%3E" ); }
.owl-nav .caret-right { margin: -2em 5px 0 40px; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath style='fill: %23a7c6d0' d='M96 220a12 12 0 0 1-8.485-20.485L159.029 128 87.515 56.485a12 12 0 0 1 16.97-16.97l80 80a12 12 0 0 1 0 16.97l-80 80A11.963 11.963 0 0 1 96 220Z'/%3E%3C/svg%3E" ); }
.owl-nav .owl-prev { left: -2em; background: linear-gradient(to left, transparent, white 60%)}
.owl-nav .owl-next { right: -2em; background: linear-gradient(to right, transparent, white 60%)}
.v24-bg-light .owl-nav .owl-prev { background: linear-gradient(to left, transparent, var(--main-bg-color-light) 60%)}
.v24-bg-light .owl-nav .owl-next { background: linear-gradient(to right, transparent, var(--main-bg-color-light) 60%)}
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled { background: none; opacity: .25; cursor: initial}
.owl-dots { padding: 1em 0 0; opacity:.6}
.owl-dots:hover { opacity:1}
.owl-dot { border:none; background:none}
.owl-dot span { display:block; width: 10px; height: 10px; background: #a7c6d0; border-radius: 50%}