:root {
    --white: #ffffff;
    --black: #000000;
    --dark: #219052;
    --light: #00c6a3;
    --header: #0d3a21;
    --footer: #071d10;
    --bs-body-color: var(--white);
    --bs-body-font-family: 'Roboto';
    --bs-body-font-size: 12pt;
    --bs-border-radius: 0;
    --bs-secondary-color: var(--light);
    --intro-left: 21px;
    --intro-size: 30pt;
    --intro-width: 230px;
    --intro-padding: 1rem 2rem;
    --intro-underline-left: 12px;
    --intro-underline-width: 235px;
}

.modal {
    --bs-modal-color: var(--black);
}

.btn.btn-primary,
.btn.btn-success {
    --bs-btn-font-family: 'DINPro';
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: 14pt;
    --bs-btn-border-radius: 0;
}

@media (min-width: 576px) {
    :root {
        --logo-offset: 30px;
        --intro-left: 24px;
        --intro-size: 36pt;
        --intro-width: 285px;
        --intro-padding: 1rem 2.5rem;
        --intro-underline-left: 12px;
        --intro-underline-width: 290px;
    }
}

@media (min-width: 768px) {
    :root {
        --logo-offset: 20px;
        --intro-left: 21px;
        --intro-size: 30pt;
        --intro-width: 235px;
        --intro-padding: 1rem 2rem;
        --intro-underline-left: 12px;
        --intro-underline-width: 240px;
    }
}

@media (min-width: 992px) {
    :root {
        --logo-offset: 26px;
        --intro-left: 27px;
        --intro-size: 40pt;
        --intro-width: 325px;
        --intro-padding: 1.25rem 3rem;
        --intro-underline-left: 12px;
        --intro-underline-width: 329px;
    }
}

@media (min-width: 1200px) {
    :root {
        --logo-offset: 29px;
        --intro-left: 33px;
        --intro-size: 48pt;
        --intro-width: 380px;
        --intro-padding: 1.5rem 3.5rem;
        --intro-underline-left: 12px;
        --intro-underline-width: 384px;
    }
}

@media (min-width: 1400px) {
    :root {
        --logo-offset: 40px;
        --intro-left: 36px;
        --intro-size: 52pt;
        --intro-width: 420px;
        --intro-padding: 1.75rem 4rem;
        --intro-underline-left: 12px;
        --intro-underline-width: 424px;
    }
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 900;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Light.eot');
    src: url('../fonts/DINPro-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPro-Light.otf') format('otf'),
         url('../fonts/DINPro-Light.ttf') format('truetype'),
         url('../fonts/DINPro-Light.svg#DINPro') format('svg');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Regular.eot');
    src: url('../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPro-Regular.otf') format('otf'),
         url('../fonts/DINPro-Regular.ttf') format('truetype'),
         url('../fonts/DINPro-Regular.svg#DINPro') format('svg');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Medium.eot');
    src: url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPro-Medium.otf') format('otf'),
         url('../fonts/DINPro-Medium.ttf') format('truetype'),
         url('../fonts/DINPro-Medium.svg#DINPro') format('svg');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Bold.eot');
    src: url('../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPro-Bold.otf') format('otf'),
         url('../fonts/DINPro-Bold.ttf') format('truetype'),
         url('../fonts/DINPro-Bold.svg#DINPro') format('svg');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Black.eot');
    src: url('../fonts/DINPro-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPro-Black.otf') format('otf'),
         url('../fonts/DINPro-Black.ttf') format('truetype'),
         url('../fonts/DINPro-Black.svg#DINPro') format('svg');
    font-style: normal;
    font-weight: 900;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'DINPro';
}

@media (min-width: 992px) {
    h1, .h1 {
        font-size: 32pt;
    }
    h2, .h2 {
        font-size: 26pt;
    }
    h3, .h3 {
        font-size: 14pt;
    }
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 40pt;
    }
    h2, .h2 {
        font-size: 32pt;
    }
    h3, .h3 {
        font-size: 14pt;
    }
}

.page-header {
    position: relative;
    padding-left: 51px;
    margin-bottom: 3rem;
}

.page-header::before,
.item-page .com-content-article__body h1::before {
    content: "";
    position: absolute;
    left: 6px;
    width: 25px;
    height: 60%;
    top: 23%;
    background: var(--dark);
    transform: skewX(-18deg);
}

.page-header > * {
    margin-bottom: 0;
}

.page-header > *,
.moduletable > h3 {
    text-transform: uppercase;
    font-weight: 900;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
    margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    color: var(--light);
}

a:hover,
a:focus {
    color: var(--dark);
}

a.icon {
    background: var(--white);
    color: var(--black);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.icon:hover,
a.icon:focus {
    background: var(--light);
}

.small {
    font-size: 80%;
}

.btn.btn-primary,
.btn.btn-success {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 6px;
}

.btn.btn-primary:hover,
.btn.btn-success:hover {
    background: transparent;
    border: none;
}

.btn.btn-primary::before,
.btn.btn-primary:hover::before,
.btn.btn-success::before,
.btn.btn-success:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: skew(-18deg);
    z-index: -1;
}

.btn.btn-primary::before,
.btn.btn-success::before {
    background: var(--dark);
    transition: background-color 0.25s ease;
}

.btn.btn-primary:hover::before,
.btn.btn-success:hover::before {
    background: var(--light);
}

legend {
    font-size: inherit;
    float: none;
}

* + .control-group,
.form-group {
    margin-top: 1.5rem;
}

.control-group,
.form-group {
    margin-bottom: 1.5rem;
}

.form-horizontal .control-label,
.control-label {
    padding-top: 0;
    margin-bottom: 0.5rem;
}

.form-control,
.form-control:focus {
    color: var(--black);
}

.form-check-input:checked {
    background-color: var(--dark);
    border-color: var(--dark);
}

.t3-mainbody {
    background-image: url('/images/template/bg_szolg.jpg');
    background-size: cover;
    padding: 40px 0;
}

@media (min-width: 992px) {
    .t3-mainbody {
        padding: 80px 0;
    }
}

.t3-content > .login,
.t3-content > .registration,
.t3-content > .reset > .form-horizontal,
.t3-content > .remind > .form-horizontal,
.t3-content > .contact .contact-form,
.foglalas.resourceservice .description,
.foglalas.cart .form-horizontal,
.foglalas.cart .checkout-login {
    max-width: 512px;
}

.home .t3-mainbody {
    background-image: url('/images/template/bg_main.jpg');
}

@media (min-width: 768px) {
    .home .item-page  {
        display: grid;
        grid-gap: var(--bs-gutter-x);
        grid-template-columns: repeat(2, 1fr);
    }
}

.home .page-header {
    padding-left: var(--intro-left);
    margin-bottom: 9rem;
}

.home .page-header::before {
    display: none;
}

.home .page-header h1 a,
.home .page-header h1 a:hover,
.home .page-header h1 a:focus {
    color: var(--white);
}

.home .page-header h1 a {
    display: block;
    padding: var(--intro-padding);
}

.home .page-header h1 {
    font-size: var(--intro-size);
    z-index: 1;
    position: relative;
    width: var(--intro-width);
}

.home .page-header h1::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: skew(-18deg);
    z-index: -1;
    background: var(--dark);
}

.home .page-header h1::after {
    content: "";
    position: absolute;
    top: 24px;
    right: -25px;
    width: 15px;
    height: 100%;
    transform: skew(-18deg);
    background: var(--white);
}

.home .page-header::after {
    content: "";
    position: absolute;
    left: var(--intro-underline-left);
    width: var(--intro-underline-width);
    margin-top: 15px;
    height: 70px;
    transform: skew(-18deg);
    background: linear-gradient(to bottom, #fff 12px, #fff0 12px), var(--light);
}


/****************************************************************
** Header **
****************************************************************/

.t3-header {
    background-image: linear-gradient(to right, var(--header), var(--black));
}

@media (min-width: 768px) {
    .t3-header {
        padding-bottom: 0;
    }
}

@media (max-width: 575px) {
    .t3-header > .container > .row {
        align-items: center;
    }
}

.t3-header .headtop {
    display: flex;
    justify-content: end;
}

@media (min-width: 576px) {
    .t3-header .moduletable.headphone .custom {
        margin-bottom: -100%;
        position: relative;
    }
}

.t3-header .moduletable.headphone .custom a {
    display: flex;
    align-items: center;
}

.t3-header .moduletable.headphone .custom a .icon {
    background: var(--light);
    color: var(--white);
    border-radius: 50%;
    margin-right: 0.5rem;
    height: 30px;
    width: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.t3-header .headright {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.t3-header .head-search a {
    color: var(--light);
    font-weight: 500;
}

.t3-header .logo-image {
    margin-bottom: calc(-1 * var(--logo-offset));
    position: relative;
}


/****************************************************************
** Menu **
****************************************************************/

.navbar {
    --bs-navbar-color: var(--white);
    --bs-navbar-hover-color: var(--white);
    --bs-navbar-active-color: var(--white);
    --bs-navbar-padding-y: 0;
}

.navbar-nav {
    --bs-nav-link-font-weight: 700;
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
}

@media (min-width: 1200px) {
    .navbar-nav {
        --bs-nav-link-font-size: 14pt;
        --bs-navbar-nav-link-padding-x: 1.5rem;
        --bs-nav-link-padding-y: 0.75rem;
    }
}

.nav-link {
    font-family: 'DINPro';
    text-transform: uppercase;
}

.navbar-nav > .nav-item > .nav-link {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease;
}

.navbar-nav > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    top: 0;
    background: linear-gradient(to top, #fff 4px, #fff0 4px), var(--light);
    transform: skew(-18deg);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: -1;
}

.navbar-nav > .nav-item > .nav-link:hover::before,
.navbar-nav > .nav-item > .nav-link:focus::before,
.navbar-nav > .nav-item.active > .nav-link::before {
    opacity: 1;
}

.dropdown-menu {
    --bs-dropdown-border-width: 0;
    --bs-dropdown-bg: transparent;
}

.dropdown-menu > .nav-item > .nav-link:hover,
.dropdown-menu > .nav-item > .nav-link:focus,
.dropdown-menu > .nav-item.active > .nav-link {
    color: var(--light);
}

.off-canvas-toggle.btn.btn-primary {
    margin-right: 8px;
}


/****************************************************************
** Footer **
****************************************************************/

.t3-footer {
    background-image: linear-gradient(to right, var(--black), var(--footer));
    color: var(--white);
}

.t3-footer .day .opening,
.t3-footer a {
    color: var(--light);
}

.t3-footer a:hover,
.t3-footer a:focus {
    color: var(--white);
}

.t3-footer .footerlogo img {
    width: 100px;
}

.t3-footer .t3-footnav {
    grid-row-gap: 2rem;
}

.t3-footer .t3-footnav > div:nth-child(4) {
    display: flex;
    flex-direction: column;
}

.t3-footer .mod-custom,
.t3-footer .mod-menu {
    font-size: 80%;
}

.moduletable.footermenu .nav {
    grid-gap: 0.5rem 1rem;
}

.moduletable.footermenu .nav .nav-item {
    width: 100%;
}

@media (min-width: 576px) {
    .moduletable.footermenu .nav .nav-item {
        width: auto;
    }
    .moduletable.footermenu .nav .nav-item + .nav-item {
        border-left: 1px solid var(--light);
        padding-left: 1rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .t3-footer .moduletable.footermenu .nav .nav-item + .nav-item {
        border-left: none;
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .t3-footer .t3-footnav > div:nth-child(4) {
        justify-content: space-between;
        align-items: flex-end;
    }
    .t3-footer .moduletable.footermenu .nav {
        justify-content: flex-end;
    }
}

.t3-footer .moduletable.footericons .icons {
    grid-gap: 1rem;
}

.t3-footer .moduletable.footericons a.icon {
    color: var(--black);
}

.t3-footer .moduletable.footericons a.icon:hover,
.t3-footer .moduletable.footericons a.icon:focus {
    background: var(--light);
}


/****************************************************************
** Sticky Footer **
****************************************************************/

.t3-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.t3-mainbody {
    flex-grow: 1;
}


/****************************************************************
** Logos **
****************************************************************/

.copyright .logos {
    display: grid;
    grid-row-gap: 30px;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    margin-bottom: 30px;
}

@media (min-width: 576px) {
    .copyright .logos {
        display: flex;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 766px) {
    .copyright .logos {
        grid-column-gap: 140px;
    }
}

.copyright .logos .dsp {
    max-height: 140px;
}

.copyright .logos .neum {
    max-height: 100px;
}


/****************************************************************
** Content **
****************************************************************/

.item-page .com-content-article__body h1 {
    text-transform: uppercase;
    font-weight: 900;
    position: relative;
}

.item-page .com-content-article__body h1::before {
    left: -45px;
}


/****************************************************************
** Contact **
****************************************************************/

.dl-horizontal dd {
    margin-left: 0;
}


/****************************************************************
** Foglalas **
****************************************************************/

.foglalas .services {
    display: grid;
    grid-gap: var(--bs-gutter-x);
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .foglalas .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .foglalas .services {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .foglalas .services {
        grid-template-columns: repeat(4, 1fr);
    }
}

.foglalas .services .service .service-top {
    background-color: var(--white);
    color: var(--black);
}

.foglalas .services .service .service-bottom {
    background-color: var(--black);
    color: var(--white);
}

.foglalas .service-title {
    text-transform: uppercase;
    font-weight: 900;
}

.foglalas .services .service .service-title::first-line {
    color: var(--light);
}

.foglalas .service-price {
    font-family: 'DINPro';
    font-weight: 900;
    font-size: 14pt;
}

.foglalas.resourceservice {
    background-color: var(--white);
    color: var(--black);
    padding: var(--bs-gutter-x);
}

.foglalas .timeslots {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px 30px;
    font-weight: 500;
}

.foglalas .timeslots .timeslot {
    position: relative;
    cursor: pointer;
}

.foglalas .timeslots .trash {
    position: absolute;
    left: 100%;
    top: 0;
}

.foglalas .timeslots .timeslot.incart {
    color: var(--dark);
}

.foglalas .timeslots .timeslot:hover {
    color: var(--light);
}

.datepicker .datepicker-switch,
.foglalas.resourceservice .selected-date {
    text-transform: uppercase;
    color: var(--dark);
    font-family: 'DINPro';
}

.datepicker .datepicker-switch,
.foglalas.resourceservice .selected-date span {
    font-weight: 900;
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker .dow {
    color: var(--dark);
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    background: none;
}

.datepicker-inline {
    width: auto;
}

.datepicker table tr td.day {
    padding: 6px 8px;
    font-weight: 500;
}

@media (min-width: 576px) {
    .datepicker table {
        border-collapse: separate;
        border-spacing: 20px 10px;
        margin-left: -10px;
    }
    .datepicker table tr td.day {
        padding: 8px 10px;
    }
}

.datepicker table tr td.day.disabled {
    font-weight: inherit;
}

.datepicker table tr td.active.active,
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    position: relative;
    z-index: 1;
}

.datepicker table tr td.active.active {
    color: var(--white);
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    background: none;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:hover {
    background: none;
}

.datepicker table tr td.active::before,
.datepicker table tr td.day.focused::before,
.datepicker table tr td.day:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: skew(-18deg);
    z-index: -1;
}

.datepicker table tr td.day.disabled:hover::before {
    display: none;
}

.datepicker table tr td.day.focused::before,
.datepicker table tr td.day:hover::before {
    background: var(--light);
    opacity: 0.3;
}

.datepicker table tr td.active::before,
.datepicker table tr td.active:hover::before {
    background: var(--light);
    opacity: 1;
}

.foglalas.cart .cart_elements {
    display: grid;
    grid-gap: var(--bs-gutter-x);
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 576px) {
    .foglalas.cart .cart_elements {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .foglalas.cart .cart_elements {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .foglalas.cart .cart_elements {
        grid-template-columns: repeat(4, 1fr);
    }
}

.foglalas.cart .cart_elements .cart_product {
    background-color: var(--white);
    color: var(--black);
}

.foglalas.cart .cart_total_price {
    color: var(--light);
    margin-bottom: 2rem;
}

.foglalas.cart .moduletable.footermenu {
    margin-left: 25px;
    margin-top: 10px;
}
