@font-face {
    font-family: pirulen;
    font-weight: 400;
    src: url('pirulen-regular.otf') format('opentype');
}
:root {
    --default-color-1: #000000;
    --default-color-2: #222424;
    --default-color-3: #ffffff;
    --default-font-1: 'Raleway', sans-serif;
    --default-font-2: 'pirulen', sans-serif;
    --default-filter-3: invert(100%) sepia(0%) saturate(0%) hue-rotate(134deg) brightness(99%) contrast(105%);
}

html {font-size: 100%}
html {height: 100%; min-height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
body {background-color: var(--default-color-3); width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; color: var(--default-color-2); font-family: var(--default-font-1); font-size: 17px; line-height: 1.5; font-weight: 400; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased}

h1 {margin-top: 1.5em; margin-bottom: 1rem; color: var(--default-color-2); font-family: var(--default-font-2); font-size: 28px; line-height: 1.2em; text-transform: none}
h4 {margin: 1.5em 0 .5em; color: var(--default-color-2); font-family: var(--default-font-2); font-size: 16px; line-height: 1.5; text-transform: none}

p {margin: 0 0 2rem; padding: 0}

.header {background-color: var(--default-color-3); width: 100%; height: 80px; padding: 0 24px; position: sticky; top: 0; z-index: 11; box-shadow: 0 10px 10px -3px rgba(0,0,0,0.04)}
	.header .logo {}
	.header .logo.jaecoo {
		display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
		background-color: var(--default-color-1); height: 100%; margin-right: -24px; margin-left: auto; padding: 0 24px
	}
	.header .logo.jaecoo img {-webkit-filter: var(--default-filter-3); filter: var(--default-filter-3)}

.video {width: 100%; height: calc(100vh - 80px); overflow: hidden; position: relative}
    .video video {
        position: absolute; top: 50%; left: 50%; height: auto; width: 100%; min-width: 100%; min-height: 100%;
        -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
        -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%
    }

.egyedi-tartalom.id1 .wrapper, .egyedi-tartalom.id5 .wrapper {max-width: 1200px; margin-left: auto; margin-right: auto; padding: 150px 20px 50px 20px}
    .egyedi-tartalom.id1 .wrapper picture.left-side {padding: 0; position: relative}
    .egyedi-tartalom.id1 .wrapper picture.left-side::before {content: ''; display: block; width: 100%; padding-top: 0}
        .egyedi-tartalom.id1 .wrapper picture.left-side img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%}
    .egyedi-tartalom.id1 .wrapper .right-side {padding: 0 0 0 2rem}
    .egyedi-tartalom.id1 .wrapper .right-side .btnLink {margin: 0.5rem 0 1.5em}

.egyedi-tartalom.full-width-bg {position: relative}
    .egyedi-tartalom.full-width-bg picture {display: block; width: 100%; min-height: var(--et-fwbg-mw, 565px)}
    .egyedi-tartalom.full-width-bg picture::before {content: ''; display: block; width: 100%; padding-top: 66.67%}
        .egyedi-tartalom.full-width-bg picture img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%}
    .egyedi-tartalom.full-width-bg .content {width: 100%; height: 100%; padding: 40px; position: absolute; top: 0; left: 0; z-index: 1}
        .egyedi-tartalom.full-width-bg .content-inner {background-color: rgba(0,0,0,0.6); max-width: 540px; margin-top: var(--mt-pc, 0); padding: 20px; border-radius: 5px}
            .egyedi-tartalom.full-width-bg .content-inner h2 {margin-bottom: 1rem; color: var(--default-color-3); font-family: var(--default-font-1); font-size: 48px; font-weight: 400; line-height: 1}
            .egyedi-tartalom.full-width-bg .content-inner p {margin-bottom: 0; color: var(--default-color-3)}
            .egyedi-tartalom.full-width-bg .content-inner .btnLink {background-color: transparent; margin: 1rem 0 0; border-color: var(--default-color-3)}

.egyedi-tartalom.picture-picture picture {display: block; width: 100%}
    .egyedi-tartalom.picture-picture picture img {width: 100%; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%}
.egyedi-tartalom.picture-picture h2 {margin: 0; padding-bottom: 50px; color: var(--default-color-2); font-family: var(--default-font-2); font-size: 48px; line-height: 1.5; text-align: center; text-transform: none}
.egyedi-tartalom.picture-picture h3 {margin: 1.5em 0 .5em; padding: 0; color: var(--default-color-2); font-family: var(--default-font-2); font-style: normal; font-weight: 700; font-size: 28px; line-height: 1.5; text-align: center}
.egyedi-tartalom.picture-picture p {margin: 0; padding: 0; text-align: center}

.footer {background-color: #30363a; background-image: url('../art/footer-arrow-bg.png'); background-size: contain; background-position: 0% 0%; background-attachment: scroll; background-repeat: no-repeat; padding: 85px 150px 100px; color: var(--default-color-3); text-align: center}
    .footer h4 {margin-top: 0; color: var(--default-color-3); font-size: 22px}
    .footer p:last-child {margin-bottom: 0}
    .footer a {color: var(--default-color-3); text-decoration: none}
    .footer .btnLink {background-color: var(--default-color-3); margin: 1rem 0 0; border-color: var(--default-color-3); color: var(--default-color-1)}

/* ajanlatkeres */
.ajanlatkeres {padding: 0 24px}
    .ajanlatkeres .wrapper {width: 100%; max-width: 800px; margin: 0 auto; padding: 90px 0 70px}
        .ajanlatkeres .wrapper h1 {margin: 0 0 40px; padding: 0; font-size: 32px; text-align: center}
        .ajanlatkeres .wrapper p {margin: 0 0 40px; padding: 0; text-align: center}

.success {margin: 0; padding: 0; text-align: center}
.danger {margin: 0; padding: 0; color: #f56c6c; font-weight: 600; text-align: center}

/* form elements */
form .form-group {margin-bottom: 20px}
    form .form-group small {margin-top: 5px; color: #808286; font-size: 0.75rem; font-style: italic}
    form .form-group .danger {width: 100%; margin-top: 5px; margin-bottom: 0; font-size: 0.875rem; text-align: left}
form .form-group.captcha {margin-right: auto; margin-left: auto}
    form .form-group.captcha input {width: 100px}
    form .form-group.captcha img {margin: 11px 0 0 15px}
    form .form-group.captcha .danger {text-align: center}
form .form-group.button {padding-top: 20px; text-align: center}

form label {width: 100%; margin-bottom: 5px; font-family: inherit; font-weight: 500; line-height: inherit; position: relative}
form label::after {content: " *"; margin-left: 3px; color: #f56c6c}
form .textarea label::after {display: none}
form input, form select, form textarea {
	background-color: var(--default-color-3); width: 100%; height: 50px; margin: 0; padding: 2px 15px 0; border: 1px solid #dadbdd; color: #606266; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
	outline: none; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 7px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s
}
form textarea {height: 100px; padding: 15px}
form select {background-color: var(--default-color-3); background-image: url('../art/icon-chevron-down.svg'); background-position: right 15px top 20px; background-repeat: no-repeat; background-size: 12px; padding-right: 35px; -webkit-appearance: none; -moz-appearance: none; appearance: none}
    form select option {background-color: var(--default-color-3); font-size: 0.875rem}

form button, .btnLink {
	background-color: var(--default-color-1); display: inline-block; width: 100%; max-width: 320px; min-height: 50px; padding: 1px 10px 0; border: 1px solid transparent; color: var(--default-color-3); font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
	text-transform: none; outline: none; cursor: pointer; position: relative; z-index: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 7px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); -moz-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transition: all 0.5s cubic-bezier(0.4,0,0.2,1)
}
.btnLink {max-width: 220px; padding-top: 13px}
form input:focus, form select:focus, form textarea:focus {background-color: var(--default-color-3); border-color: #1a7efb; color: #606266; outline: none}

@media (-moz-touch-enabled: 0), (hover: hover){
    .footer a:hover {color: var(--default-color-3); text-decoration: underline}
    form button:hover, .btnLink:hover {opacity: 0.8}
    .btnLink:hover {background-color: #0082d1!important; border-color: #0082d1!important; color: var(--default-color-3); text-decoration: none!important; opacity: 1}
}

/* General */
* {margin: 0; padding: 0}
*, *::after, *::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

/* flex */
.flex {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap}
.flex .col-sm-1, .flex .col-sm-2, .flex .col-sm-3, .flex .col-sm-4, .flex .col-sm-5, .flex .col-sm-6, .flex .col-sm-7, .flex .col-sm-8, .flex .col-sm-9, .flex .col-sm-10, .flex .col-sm-11, .flex .col-sm-12 {width: 100%; padding-right: 8px; padding-left: 8px}

.flex .col-sm-1 {-webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%}
.flex .col-sm-2 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%}
.flex .col-sm-3 {-webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%}
.flex .col-sm-4 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%}
.flex .col-sm-5 {-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%}
.flex .col-sm-6 {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
.flex .col-sm-7 {-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%}
.flex .col-sm-8 {-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%}
.flex .col-sm-9 {-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%}
.flex .col-sm-10 {-webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%}
.flex .col-sm-11 {-webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%}
.flex .col-sm-12 {-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}

.align-items-start {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
.align-items-end {-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end}
.align-items-center {-webkit-box-align: center; -ms-flex-align: center; align-items: center}
.align-items-stretch {-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch}

.align-self-start {-ms-flex-item-align: start; align-self: flex-start}
.align-self-end {-ms-flex-item-align: end; align-self: flex-end}
.align-self-center {-ms-flex-item-align: center; align-self: center}

.align-content-start {-ms-flex-line-pack: start; align-content: flex-start}
.align-content-end {-ms-flex-line-pack: end; align-content: flex-end}
.align-content-center {-ms-flex-line-pack: center; align-content: center}

.justify-content-start {-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start}
.justify-content-end {-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end}
.justify-content-center {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
.justify-content-between {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between}
.justify-content-around {-ms-flex-pack: distribute; justify-content: space-around}

.flex-column {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column}
.flex-row {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row}

@media (min-width: 993px) and (max-width: 1680px){
    .egyedi-tartalom.full-width-bg .content-inner {margin-top: var(--mt-pc-1680, 0)}
}
@media (max-width: 992px){
    .header {height: 60px; padding: 0 18px}
        .header .logo.jaecoo {margin-right: -18px; padding-right: 18px; padding-left: 18px}
            .header .logo img {width: auto; height: 15px}
    .video {height: calc(100vh - 60px)}
    .egyedi-tartalom.id1 .wrapper, .egyedi-tartalom.id5 .wrapper {max-width: 1200px; padding: 48px 40px}
        .egyedi-tartalom.id1 .wrapper picture.left-side {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
        .egyedi-tartalom.id1 .wrapper picture.left-side::before {padding-top: 56.25%}
        .egyedi-tartalom.id1 .wrapper .right-side {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0}
    .egyedi-tartalom.full-width-bg picture::before {padding-top: 56.96%}
    .egyedi-tartalom.full-width-bg .content {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
        .egyedi-tartalom.full-width-bg .content-inner h2 {font-size: 32px}
    .egyedi-tartalom.picture-picture h2 {font-size: 32px}
    .egyedi-tartalom.picture-picture h3 {margin-top: 1rem; font-size: 20px}

    .egyedi-tartalom.id5 .wrapper .col-sm-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 1.5rem}
    .egyedi-tartalom.id5 .wrapper .col-sm-6:last-child {margin-bottom: 0}

    .footer {padding-left: 18px; padding-right: 18px}
}
@media (max-width: 592px){
    h1, .ajanlatkeres .wrapper h1, .egyedi-tartalom.picture-picture h2 {font-size: 22px}
    .egyedi-tartalom.id1 .wrapper, .egyedi-tartalom.id5 .wrapper, .egyedi-tartalom.full-width-bg .content, .ajanlatkeres {padding-right: 18px; padding-left: 18px}
    form.flex .col-sm-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
    form .form-group.captcha {-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start}
        form .form-group.captcha .danger {text-align: left}
}