/* roboto-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v32-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v32-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v32-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --btn-icon-width: 56px;
}

body { font-family: 'Roboto', sans-serif; background: url(../images/bg.png) 50% 0 no-repeat scroll #fff; }

.btn { --ec-btn-font-size: 1rem; --ec-btn-font-weight: 500; --ec-btn-padding-x: 1.25rem; --ec-btn-padding-y: .875rem; --ec-btn-border-width: 0; --ec-btn-border-radius: 100vw; text-transform: uppercase; }
.btn svg { width: 20px; }
.btn-primary { --ec-btn-bg: var(--ec-blue-900); }

.btn-icon { display: inline-flex; width: var(--btn-icon-width); aspect-ratio: 1 / 1; --ec-btn-padding-x: 5px; --ec-btn-padding-y: 5px; --ec-btn-border-radius: 100%; --ec-btn-color: var(--ec-yellow-500); }
.btn-icon svg { margin: auto; }
.btn-link { --ec-btn-font-size: 14px; --ec-btn-padding-x: 0; --ec-btn-padding-y: 0; text-decoration: none; text-transform: none; }
.btn-secondary { --ec-btn-bg: var(--ec-blue-400); --ec-btn-color: #fff; }
.btn-sm { --ec-btn-padding-x: 16px; --ec-btn-padding-y: 6px; --ec-btn-font-size: 14px; text-transform: none; }
.btn-remove { --ec-btn-bg: transparent; --ec-btn-hover-bg: var(--ec-red); --ec-btn-color: var(--ec-red); --ec-btn-hover-color: #fff; }
.btn-modify { --ec-btn-bg: var(--ec-blue-400); --ec-btn-hover-bg: var(--ec-blue-900); --ec-btn-color: #fff; --ec-btn-hover-color: var(--ec-yellow-500); }

.form-control {}

.header-primary { padding: 1.25rem 0; background-color: #fff; border-top: 5px solid var(--ec-yellow-500); box-shadow: 0 0 10px 0 rgba(var(--ec-blue-900-rgb), .2); }
.header-primary .navbar { --ec-navbar-brand-margin-end: 0; --ec-navbar-padding-y: 0; --ec-navbar-brand-padding-y: 0; --ec-navbar-nav-link-padding-x: .875rem; }
.header-primary .nav-link { --ec-nav-link-font-size: .875rem; --ec-nav-link-font-weight: 500; --ec-nav-link-color: var(--ec-blue-900);  --ec-nav-link-hover-color: var(--ec-blue-500); text-transform: uppercase; }
.header-primary .nav-link.active { --ec-navbar-active-color: var(--ec-blue-500); --ec-nav-link-font-weight: 700  }

.dropdown-item { --ec-dropdown-link-hover-bg: var(--ec-blue-500); --ec-dropdown-link-hover-color: #fff; }

.basket-widget {  }

.basket-widget {}
.basket-widget .btn { position: relative; }
.basket-widget .btn .qty { position: absolute; top: 0; right: 0; transform: translate(5px, -5px); display: flex; justify-content: center; align-items: center;
    border-radius: 100%; padding: 5px 5px; aspect-ratio: 1 / 1; width: 24px; font-weight: 700; font-size: 12px; line-height: 1; text-align: center; color: #000; background-color: var(--ec-yellow-500);  box-shadow: 0 0 10px 0 rgba(var(--ec-blue-900-rgb), .75)
}

.main-title { margin: 0 0 3rem 0; /*font-size: 2.5rem;*/ font-weight: 700; color: var(--ec-blue-500) }
.sub-title { margin: 0 0 .5rem 0; font-size: 1.25rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }

.hero .sub-title { letter-spacing: 4px; }
.hero .main-title { text-transform: uppercase; }
.hero img { max-width: 39.41vw; }

.search-box { --search-padding-y: 22px; }
.search-box .form-control { font-size: 16px; padding: 22px calc(var(--btn-icon-width) + 8px) 22px 24px; border-color: var(--ec-blue-500); border-radius: 100vw; }
.search-box .btn { position: absolute; z-index: 2; top: 50%; right: 0; transform: translate(-10px, -50%) }

.page-image { height: clamp(75px, 8.88vw, 150px); background: url(../images/bg-pageimage-01.jpg) 50% 0 no-repeat scroll var(--ec-blue-500); background-size: cover; }

.list-wrapper {}
.list-item {  }
.list-item { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.list-title { margin: 0 0 1.75rem 0; font-size: 1.75rem; font-weight: 700; }

.services .list-item {  --item-padding-x: 1.875rem; --item-padding-y: 1.875rem; transform: translateZ(0);
    overflow: hidden; background-color: #fff; padding: var(--item-padding-y) var(--item-padding-x); filter:drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3)); transition: all .15s ease-in-out;
}
.services .list-title { position: relative;  }
.services .list-title:before { content: ''; position: absolute; top: 0; left: calc((var(--item-padding-x) + 3px) * -1); transform: translateX(-50%); width: 40px; aspect-ratio: 1 / 1; background-color: var(--ec-blue-500); border-radius: 100%; }
.services .list-item:hover { filter:drop-shadow(0 0 12px rgba(var(--ec-blue-500-rgb), .5)); color: var(--ec-link-hover-color); }

.block-info { background: url(../images/bg-infobox.png) 50% 50% no-repeat scroll var(--ec-blue-400); }

.order-steps { display: grid; grid-template-columns: repeat(11, 1fr); grid-row-gap: 1.75rem; }
.order-step { position: relative; display: flex; align-items: flex-end; }
.order-step:before { content: ''; position: absolute; top: 0; right: 100%; transform: translate(-1.3vw, 15px); width: 36px; aspect-ratio: 1 / 1;
    background: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.6097 14.598c-0.33499 0.13106-0.64071 0.24897-0.94499 0.37041-0.13005 0.0519-0.26473 0.0985-0.38373 0.17002-0.22004 0.13224-0.38525 0.32065-0.27106 0.59044 0.11132 0.26271 0.36636 0.32039 0.60747 0.23344 0.93698-0.33819 1.87219-0.68329 2.79516-1.05757 0.36796-0.14928 0.4157-0.39065 0.22442-0.75507-0.25975-0.49471-0.69898-0.83822-1.06601-1.2421-0.24542-0.27005-0.49261-0.54094-0.7624-0.78577-0.21649-0.1965-0.49345-0.33802-0.75439-0.0993-0.26895 0.24609-0.12077 0.53065 0.0536 0.75633 0.21792 0.2821 0.47557 0.53351 0.69451 0.82903-1.05539-0.22501-2.05773-0.57147-3.00432-1.06804-3.11994-1.63688-5.46533-4.08694-7.35506-7.01569-0.95612-1.48179-1.74593-3.04353-2.30904-4.71718-0.0581-0.17272-0.11942-0.34561-0.19642-0.51041-0.0869-0.18604-0.2116-0.35277-0.45162-0.27847-0.2385 0.0739-0.24736 0.28471-0.22459 0.48653 0.0173 0.15257 0.0465 0.30741 0.0968 0.45196 1.86569 5.34954 4.99187 9.67987 10.0745 12.4173 0.85568 0.4609 1.77081 0.78205 2.71074 1.03144 0.14177 0.0375 0.30521 0.0309 0.46647 0.1927'/%3E%3C/svg%3E%0A") 50% 50% no-repeat scroll transparent;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; user-drag: none; -webkit-user-drag: none;
}
.order-step-num { flex: 0 0 auto; width: auto; max-width: 100%; font-size: 5.75rem; font-weight: 700; line-height: 1; color: var(--ec-light); -webkit-text-stroke: 2px var(--ec-blue-400); }
.order-step-text { font-weight: 700; padding: 0 0 .5rem 1rem; flex: 1 0 0%; width: 100%; max-width: 100%; }
.order-step:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
.order-step:nth-child(2) { grid-column: 2 / 6; grid-row: 2; }
.order-step:nth-child(3) { grid-column: 3 / 7; grid-row: 3; }
.order-step:nth-child(4) { grid-column: 6 / 10; grid-row: 1; }
.order-step:nth-child(5) { grid-column: 7 / 11; grid-row: 2; }
.order-step:nth-child(6) { grid-column: 8 / 12; grid-row: 3; }

.order-step:nth-child(1):before,
.order-step:nth-child(4):before { content: inherit; }

.block-steps { overflow: hidden; }
.block-steps .main-title { margin-bottom: 2rem; }

.block-header { width: 310px; position: relative; isolation: isolate; padding: 0 0 5rem 0; }
.block-header:before { content: ''; position: absolute; z-index: -1;bottom: 0; left: 0; width: 100%; height: calc(100% + 5rem); border-radius: 0 0 160px 160px; opacity: .3;
    background: #1458cf; background: linear-gradient(90deg, #1458cf 0%, #eaecf8 100%);
}

.content-text {}

.content-text :is(h1, h2, h3, h4) { font-weight: 700; color: var(--ec-blue-500) }

.content-text .btn-link { position: relative; }
.content-text .btn-link:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231058c8' class='bi bi-arrow-right-short' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
    display: inline-block; width: 20px; height: 20px; vertical-align: middle;
}

.social-box { }
.social-box a { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: 100vw; color: #fff; transition: background-color .15s ease-in-out, color .15s ease-in-out;  }
.social-box a svg { width: 26px; }
.social-box a:hover { color: var(--ec-yellow-500); }

.footer-primary { font-size: 14px; color: #fff; background: url(../images/bg-footer.png) 50% 50% no-repeat scroll #010e31; border-top: 5px solid var(--ec-yellow-500);  }
.footer-primary .nav-link { display: inline-block; --ec-nav-link-font-size: 14px; --ec-nav-link-padding-x: 0; --ec-nav-link-padding-y: 0; --ec-nav-link-color: #fff; --ec-nav-link-hover-color: var(--ec-yellow-500); }
.footer-primary .nav-link:hover { text-decoration: underline; }
.footer-primary .nav-footer {  }
.footer-bottom { font-size: 12px; background-color: #042a73; }
.footer-bottom a { color: var(--ec-yellow-500); text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

/*.footer-logo { margin-top: -2rem; }*/

.nav-footer {}
.nav-footer .nav-item { margin-bottom: .5rem; }

.table-data {--ec-table-bg: #fff; --ec-table-striped-bg: rgba(var(--ec-blue-900-rgb), .05); --ec-table-hover-bg: rgba(var(--ec-blue-400-rgb), .1); filter: drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3)); transform: translateZ(0);
    margin-bottom: 3rem;
}
.table-data>:not(caption)>*>* { vertical-align: middle; padding: .75rem .75rem; }


.table-data .t-lang { width: 170px;  }
.table-data .t-price { width: 200px; }
.table-data .t-price .gross { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.table-data .t-price .net { font-size: 14px; opacity: .75; }
.table-data .t-btn { width: 110px; }
.table-data .t-btn-remove { width: 64px; }

.table-data .btn-icon { --btn-icon-width: 40px; }
.table-data .form-qty { display: inline-block; width: 46px; flex: 0 0 46px; }
.table-data .btn-modify { --ec-btn-border-radius: .375rem; }

.table-basket {  }
.table-basket>thead>*>* { --ec-table-bg: var(--ec-blue-900); color: #fff; }
.table-basket>tfoot>*>* { --ec-table-bg: var(--ec-light);}

.table-summary tr:last-of-type>* { border-bottom-width: 0; }

.card { --ec-card-border-radius: 0; filter: drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3)); }

.company-box { background-color: #fff; filter: drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3)) }


.breadcrumb { --ec-breadcrumb-margin-bottom: 2rem; --ec-breadcrumb-padding-x: .75rem; --ec-breadcrumb-padding-y: .75rem;  --ec-breadcrumb-bg: var(--ec-light); --ec-breadcrumb-divider-color: var(--ec-blue-500); --ec-breadcrumb-item-active-color: var(--ec-blue-900);
    filter: drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3))
}
.breadcrumb a { color: var(--ec-blue-400) }
.breadcrumb-item.active { font-weight: 700; }

.list-group-radio .list-group-item.selected { position: relative; z-index: 2;
    border-color: var(--ec-blue-400);
 box-shadow: 0 0 0 2px var(--ec-blue-400);
}
.list-group-item+.list-group-item { border-top-width: 1px; margin-top: -1px; }

textarea.form-control { min-height: 100px; }

.filter-shadow { filter: drop-shadow(0 0 8px rgba(var(--ec-blue-500-rgb), .3)); }

@media (min-width: 576px) {
html { font-size: 14px; }
}
@media (min-width: 768px) {
html { font-size: 14px; }
}
@media (min-width: 992px) {
html { font-size: 14px; }
.main-title { font-size: 2.5rem; }
.hero .text { font-size: 1.25rem; }
}
@media (min-width: 1200px) {
html { font-size: 16px; }
.hero .text { padding-right: 17.4vw; }
.search-box-inner { width: 75%; }
}
@media (min-width: 1400px) {
html { font-size: 16px; }
.pt-xxl-6 { padding-top: 5rem!important; }
.py-xxl-6 { padding-top: 5rem!important;  padding-bottom: 5rem!important;}

.hero .main-title { font-size: 4rem; }
.hero .sub-title { margin-bottom: 2rem; }
.hero .search-box { margin-top: 3rem; }

}

@media (min-width: 768px) and (max-width: 991.98px) {

}
@media (min-width: 390px) and (max-width: 575.98px) {

}
@media (min-width: 576px) and (max-width: 767.98px) {

}
@media (min-width: 768px) and (max-width: 991.98px) {

}
@media (min-width: 992px) and  (max-width: 1199.98px) {
.header-primary .navbar-brand img { width: 200px; }
.block-header { width: 260px; margin-bottom: 4rem; }
.order-step-num { font-size: 4rem; }
.order-step-text { padding-left: 6px; }
.order-step:before { transform: translate(-10px,0) }
}

@media (max-width: 389.98px) {

}
@media (max-width: 575.98px) {
html { font-size: 13px; }

.block-info .list-item {  display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    gap: 0 1rem;
    grid-auto-flow: row;
    grid-template-areas:
"list-image list-title"
"list-image list-text";
}

.list-image { grid-area: list-image; }
.list-title { grid-area: list-title; }
.list-text { grid-area: list-text; }
.list-image img { max-width: 40px; }
.order-step { width: 100%!important; flex: 0 0 auto; }
}
@media (max-width: 767.98px) {
.block-header { padding-left: .5rem; padding-right: .5rem; }
.order-steps { display: flex; flex-wrap: wrap; margin: 0 calc(-.5 * var(--ec-gutter-x)); }
.order-step { width: 50%; flex: 0 0 auto; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(var(--ec-gutter-x) * .5); }
.order-step:before { content: inherit; }
.order-step-text { padding: 0 0!important; flex: 0 0 auto; max-width: inherit; width: auto; }

.table-data>tbody>tr { display: flex; flex-wrap: wrap; border-bottom-width: 1px; }
.table-data>:not(caption)>*>* { width: 100%!important; border-bottom-width: 0; padding: .5rem; }
.table-basket>thead { display: none; }

.table-basket>tbody>*>* { position: relative; padding-left: 30%; text-align: right!important; }
.table-basket>tbody>*>*:before { position: absolute; top: 0; left: 0; width: 28%; margin-right: 2%; height: 100%; padding: 5px; background-color: var(--ec-blue-900); color: #fff; font-weight: 700;
   display: flex; align-items: center; text-align: left;
}
.table-basket>tbody>*>*:nth-of-type(1):before { content: 'Megnevezés'; }
.table-basket>tbody>*>*:nth-of-type(2):before { content: 'Bruttó'; }
.table-basket>tbody>*>*:nth-of-type(3):before { content: 'Mennyiség'; }
.table-basket>tbody>*>*:nth-of-type(4):before { content: 'Összesen'; }
.table-basket>tbody>*>*:nth-of-type(5):before { content: 'Törlés'; }
.table-basket>tbody .input-group { display: inline-flex; width: auto; }
.table-basket>tfoot>tr { display: flex; flex-wrap: wrap; border-bottom-width: 1px; }
.table-basket>tfoot>*>.t-btn-remove { display: none; }
}
@media (max-width: 991.98px) {
:root { --btn-icon-width: 48px; }
.btn-icon svg { width: 16px; }

.main-title { margin: 0 0 2rem 0; }

.header-primary { padding: .75rem 0; }
.header-primary .navbar-brand img { width: 170px; }

.menu-toggler .btn-icon svg { width: 26px; }

.search-box .form-control { font-size: 14px; padding: 18px calc(var(--btn-icon-width) + 8px) 18px 18px }
.search-box .btn { transform: translate(-8px, -50%); }

.list-title { margin: 0 0 .75rem 0; font-size: 1.5rem }

.block-header { width: 255px; padding-bottom: 4rem; }
.order-step-num { font-size: 4rem; }
.order-step-text { padding-left: 6px; }
.order-step:before { transform: translate(-10px,0) }

/*.payment img { width: 180px; }*/

    .offcanvas-navigation.offcanvas-end { width: 80%; max-width: 400px; }
    .offcanvas-navigation { background-color: #fff; }
    .offcanvas-navigation .offcanvas-header { /*border-bottom: 1px solid var(--fd-gray-800);*/ }
    .offcanvas-navigation .offcanvas-header .btn-close { opacity: 1; }
    .offcanvas-navigation .offcanvas-footer { font-size: 12px; padding: var(--ec-offcanvas-padding-x) var(--ec-offcanvas-padding-y);  }
    .offcanvas-navigation .offcanvas-footer p { margin-bottom: 2px; }
    .offcanvas-navigation .offcanvas-footer .nav-link { --qss-nav-link-color: var(--ec-primary); --qss-nav-link-font-weight: 700; }
    .offcanvas-navigation .offcanvas-title img { max-width: 140px; }
    .offcanvas-navigation .collapse:not(.show) { display: block; }
    .offcanvas-navigation ul.nav { display: flex; flex-direction: column; --qss-nav-link-padding-x: 0; }
    .offcanvas-navigation ul .nav-link { font-size: 1rem; font-weight: 400; --qss-nav-link-color: var(--ec-body-color); }
    .offcanvas-navigation ul li.ms-auto { margin-left: 0!important; }
    .offcanvas-navigation .offcanvas-body .nav-link.active { background-color: var(--ec-primary); color: #fff; margin-right: calc(var(--ec-offcanvas-padding-x) * -1); margin-left: calc(var(--ec-offcanvas-padding-x) * -1); padding-right: var(--ec-offcanvas-padding-x); padding-left: var(--ec-offcanvas-padding-x); }
    .offcanvas-navigation .nav-link:focus-visible { outline: none!important; box-shadow: none!important; }
    .offcanvas-navigation .dropdown-menu { position: static; --qss-dropdown-padding-y: 5px; }
    .offcanvas-navigation .dropdown-menu li + li { border-top: 1px solid var(--ec-border-color-translucent); }
    .offcanvas-navigation .dropdown-item { font-size: 1rem; white-space: normal }
    .offcanvas-navigation .dropdown-item.active,
    .offcanvas-navigation .dropdown-item:active,
    .offcanvas-navigation .dropdown-item:focus,
    .offcanvas-navigation .dropdown-item:hover { color: #fff; background-color: var(--ec-primary); }
    .offcanvas-navigation .dropdown-menu .dropdown-menu { margin: var(--ec-offcanvas-padding-x); }
    .offcanvas-navigation .social-box { margin-top: 1rem; }

}
@media (max-width: 1199.98px) {

}
@media (max-width: 1399.98px) {
    .hero .main-title { margin-bottom: 1rem;}
    .hero .search-box { margin-top: 1.5rem; }
}