@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css);
html {
scrollbar-color: #F37121B3 #433D3D;
scrollbar-width: thin; }
::selection {
color: #fff;
background-color: #F37121;
}
body {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #fff;
position: relative;
} .alignright { float: right; }
.alignleft { float: left; }
.aligncenter img { max-width: 100%; padding: 6px; background: #fff; border: 1px solid #e0e0e0; display: block; margin: 5px auto; }
.alignright img { padding: 6px; background: #fff; border: 1px solid #e0e0e0; margin: 0 0 2px 20px; }
.alignleft img { padding: 6px; background: #fff; border: 1px solid #e0e0e0; margin: 0 20px 2px 0; } #navigation {
padding: 4rem 0 .5rem;
position: relative;
background: #fff;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 9999;
box-shadow: 0 0 .5rem 0 #00000040;
}
#navigation .navbar {
padding: 0;
background: #E6E5E5;
}
#navigation .navbar-brand { display: inline-block; }
#navigation .navbar-brand > span {
padding: 2rem 4rem;
background: #433D3D;
position: absolute;
top: -4rem; left: auto;
z-index: 100;
box-shadow: 0 0 .5rem 0 #000000;
}
#navigation .navbar-brand img {
width: 121px;
height: auto;
display: block;
}
#navigation .nav-link {
padding: .5rem 1.25rem;
color: #908D8D;
font-size: 18px;
font-weight: 400;
font-stretch: condensed;
line-height: 1;
font-family: 'Noto Sans', sans-serif;
position: relative;
}
@keyframes hoveranim {
from { transform: scale(0); }
to { transform: scale(1); }
}
#navigation .active .nav-link { font-weight: 600; } #navigation .nav-link:hover::before  {
content: '';
height: 3px;
margin-bottom: -6px;
position: absolute;
bottom: 0;
left: 1.25rem; right: 1.25rem;
background: #908D8D;
animation-name: hoveranim;
animation-duration: .5s;
animation-timing-function: ease;
}
#navigation .nav-link.active::after {
content: '';
height: 3px;
margin-bottom: -6px;
position: absolute;
bottom: 0;
left: 1.25rem; right: 1.25rem;
background: #908D8D40;
background: #F37121;
animation: none;
}
#navigation .navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
@keyframes logo-resize {
0% { width: 121px; }
100% { width: 70px; }
}
@keyframes logo-cont-resize {
0% { padding: 2rem 4rem; }
100% { padding: 0.75rem 2rem; }
} #navigation .navbar-brand span {
transform: scale(1);
transform-origin: top left;
transition: all .25s ease-in-out;
}
#navigation.scrolled .navbar-brand span {
transform: scale(.5);
transition: all .25s ease-in-out;
} #slider { visibility: hidden; }
#slider .slider-item {
min-height: 500px;
position: relative;
display: flex!important;
align-items: center;
background: #000000;
}
#slider .slider-item > img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
#slider .overlay,
#references .overlay {
background: #534A4A80;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10;
}
#slider .slick-dots { bottom: 2rem; }
#slider .slick-dots li {
width: 1.5rem;
height: .3rem;
}
#slider .slick-dots li button {
width: 100%;
height: 100%;
padding: 0;
display: block;
}
#slider .slick-dots li button::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .5;
background: #ffffff;
display: inline-block;
}
#slider .slick-dots li.slick-active button:before {
opacity: 1;
background: #ffffff;
}
#slider .texts {
height: 100%;
margin-top: 3rem;
text-align: center;
position: relative;
z-index: 20;
}
#slider .slider-item h1 {
padding: 0;
margin: 0;
color: #fff;
font-size: 56px;
font-weight: 300;
line-height: 1.1;
font-family: 'Noto Sans', sans-serif;
text-transform: uppercase;
}
#slider .slider-item h2 {
padding: 0;
margin: 0;
color: #fff;
font-size: 36px;
font-weight: 300;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
}
#slider .texts .details {
padding: .625rem 3rem;
margin: 2rem 0 0 0;
color: #fff;
font-size: 20px;
font-weight: 400;
font-family: 'Noto Sans', sans-serif;
text-decoration: none;
display: inline-block;
border: 2px solid #ffffff80;
border-radius: 1rem;
}
#slider::after {
content: '';
height: 1rem;
width: 100%;
margin-top: .5rem;
display: block;
background: #E6E5E5;
}
#slider.slick-dotted.slick-slider { margin-bottom: 2rem; } header {
height: 260px;
background: #000;
position: relative;
overflow: hidden;
}
header img {
width: 105%;
height: 105%;
margin-left: -5px;
margin-top: -5px;
filter: blur(2px);
object-fit: cover;
object-position: center center;
}
header::before {
content: '';
background: #534A4A80;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10;
} #contents {
padding: 2rem 0;
margin-top: .5rem;
border-top: 1rem solid #E6E5E5;
} .sidebar {
padding: 1rem 0;
background: #E6E5E5;
background: #f9f8f8;
}
.sidebar .sidemenu {
padding: 1rem 0;
position: -webkit-sticky;
position: sticky;
top: 160px;
}
.sidebar .sidemenu .sidemenu-item {
padding: .25rem 1rem;
margin: .25rem 0;
color: #908D8D;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
font-stretch: condensed;
font-family: 'Noto Sans', sans-serif;
text-decoration: none;
border-left: .5rem solid #F89D57;
}
.sidebar .sidemenu .sidemenu-item.active,
.sidebar .sidemenu .sidemenu-item:hover {
background: #D5D3D3;
}
.sidebar h2 {
padding: 0;
margin: 0 1rem;
color: #433D3D80;
font-size: 1.25rem;
font-weight: 500;
font-style: italic;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
text-align: right;
position: sticky;
top: 120px;
} .content { padding: 1rem 0; }
.content h1 {
padding: 0;
margin: 0 0 3rem 0;
color: #433D3D;
font-size: 4rem;
font-weight: 300;
line-height: 1.1;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
.content h2 {
padding: 0;
margin: 4rem 0 2rem 0;
color: #433D3D;
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
display: flex;
align-items: center;
}
.content h3 {
padding: 0;
margin: 1rem 0 2rem 0;
color: #433D3D;
font-size: 1.75rem;
font-weight: 400;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
.content h4 {
padding: 0;
margin: 1.5rem 0 1rem 0;
color: #433D3D;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
}
.content h1 {
& + h3 { margin-top: -2rem; }
}
.content p,
.content li,
.content blockquote {
padding: 0;
margin: 0 0 1em 0;
color: #433D3D;
font-size: 18px;
font-weight: 300;
line-height: 1.4;
font-family: 'Noto Sans', sans-serif;
text-align: justify;
hyphens: auto;
}
.content ul { list-style-type: square; }
.content li { margin: 0 0 .25rem; }
.content ul li::marker { color: #F37121; }
.content ol li:has(h4)::marker { font-weight: 700; }
.content .h2 {
height: 1.5rem;
margin-bottom: 2rem;
display: block;
background: #E5E4E4;
}
.content blockquote {
padding-left: 2rem;
font-style: italic;
border-left: 1rem solid #F3712180;
} #why > h1 {
padding: 0;
margin: 0 0 4rem 0;
color: #433D3D;
font-size: 4rem;
font-weight: 300;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
#why .why-item { margin-bottom: 30px; }
#why .why-item > div {
height: 100%;
padding: 3rem 2rem;
border-radius: 2rem;
background: #FEF0E6;
}
#why .why-item h1 {
padding: 0 0 0 40px;
margin: 0 0 1rem 0;
color: #F37121;
font-size: 22px;
font-weight: 700;
line-height: 1;
font-family: 'Noto Sans', sans-serif;
background-color: transparent;
background-position: left center;
background-repeat: no-repeat;
background-size: 24px auto;
}
#why .why-item.expert h1 { background-image: url(//www.creart.hu/wp-content/themes/creart/images/code-slash.svg); }
#why .why-item.trust h1 { background-image: url(//www.creart.hu/wp-content/themes/creart/images/hand-thumbs-up.svg); }
#why .why-item.efficiency h1 { background-image: url(//www.creart.hu/wp-content/themes/creart/images/rocket-takeoff.svg); }
#why .why-item p {
padding: 0;
margin: 0;
color: #F37121;
font-size: 15px;
font-weight: 400;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
text-align: justify;
hyphens: auto;
}
#why .why-item.text > div {
padding: 0 0 0 30px;
border-radius: 0;
background: none;
border-left: 1rem solid #E6E5E5;
display: flex;
align-items: center;
}
#why .why-item.text p {
padding: 0;
margin: 0;
color: #ACAAAA;
font-weight: 300;
} #references {
padding: 2rem 0;
margin-top: 4rem;
position: relative;
overflow: hidden;
background: #000000;
background: #000000 url(//www.creart.hu/wp-content/themes/creart/images/references_bg.webp) no-repeat center center;
background-size: cover;	
background-attachment: fixed;
}
#references .overlay { backdrop-filter: blur(15px); } #references .refs {
position: relative;
z-index: 99;
}
#references .text {
display: flex;
align-items: center;
}
#references .text h1 {
padding: 0;
margin: 0 0 2rem;
color: #fff;
font-size: 40px;
font-weight: 300;
line-height: 1;
font-family: 'Noto Sans', sans-serif;
hyphens: auto;
}
#references .text p {
padding: 0;
margin: 0;
color: #E6E5E5;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
}
#references .text a.btn { margin-top: 2rem; }
#references .ref-slider {
visibility: hidden;
}
#references .ref-slider .refs-item {
width: 100%;
height: 460px;
overflow: hidden;
border-radius: 2rem;
background: #00000080;
}
#references .slick-dots {
position: absolute;
bottom: -1.5rem;
}
#references .slick-dots li {
width: 5rem;
height: .25rem;
margin: 0 .5rem;
}
#references .slick-dots li button {
width: 100%;
height: 100%;
padding: 0;
display: block;
}
#references .slick-dots li button::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .5;
background: #ffffff;
display: inline-block;
}
#references .slick-dots li.slick-active button:before {
opacity: 1;
background: #ffffff;
}
#references .slick-dotted.slick-slider { margin-bottom: 2rem; } #references .description > div {
padding: 3rem 2rem;
height: 100%;
position: relative;
}
#references .description h1 {
padding: 0 0 .25rem;
margin: 0 0 .75rem 0;
color: #C0BFBF;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
border-bottom: 1px solid #C0BFBF;
}
#references .description ul {
padding-left: 1.25rem;
margin: 0;
list-style-type: square;
display: inline-block;
}
#references .description li {
padding: 0;
margin: 0 0 .20em 0;
color: #C0BFBF;
font-size: 16px;
font-weight: 400;
font-style: italic;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
}
#references .description .logo {
width: auto;
max-width: 100%;
max-height: 100px;
display: block;
position: absolute;
bottom: 3rem; left: 2rem; right: 2rem;
}
#references .screenshot {
padding-left: 0;
padding-right: 0;
}
#references .screenshot img {
width: 120%;
height: 460px;
margin-left: -6rem;
object-fit: contain;
object-position: left center;
}
#references .tosite {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
} .references-item .content {
position: relative;
transition: all .3s ease-in-out;
}
.references-item .content .tags { margin: 1.5rem 0; }
.references-item .content .tags .badge {
margin: .2rem .5rem .2rem 0;
color: #F3712180;
border: 1px solid #F3712180;
border-radius: 1rem;
}
.references-item .content .tags .badge:last-of-type { margin-right: 0; }
.references-item .content a {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: none;
border: none;
display: block;
}
.references-item .content:hover {
transform: scale(1.05);
}
.references-item .content .logo img {
max-height: 100px;
margin-right: 2rem;
display: block;
}
.btn {
--bs-btn-border-radius: 0;
font-family: 'Noto Sans', sans-serif;
}
.btn:hover, .btn:focus, .btn:active, .btn.active,
.btn:first-child:active, :not(.btn-check)+.btn:active,
.btn-primary:disabled {
background-color: #F3712180;
border-color: #F3712180;
}
.btn-primary {
color: #fff!important;
--bs-btn-bg: #F37121;
--bs-btn-border-color: #F37121;
}
.package {
padding: 1.25rem .75rem;
background: #f9f8f8;
border: 1px solid #E6E5E5;
border-radius: 0;
transition: all .3s ease-in-out;
} .package h1 {
padding: 0;
margin: 0 0 1rem;
color: #F37121;
font-size: 30px;
font-weight: 400;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
text-transform: uppercase;
}
.package h1::after {
content: 'csomagok';
padding: 0;
color: #433D3D80;
font-size: .65em;
font-weight: 500;
display: block;
border-top: 1px solid #433D3D40;
}
.package h2 {
padding: 0;
margin: .75rem 0;
color: #433D3D;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
text-align: center;
display: block;
}
.package h2::after {
content: '-tól';
font-size: .65em;
}
.package p {
padding: 0;
margin: 0;
color: #433D3D;
font-size: 15px;
font-weight: 300;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
.package ul {
padding: 0;
margin: 1rem 1rem 2rem 1rem;
}
.package li {
padding: 0;
margin: 0 0 .5em 0;
color: #433D3D;
font-size: 17px;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
list-style-type: none;
display: flex;
align-self: center;
}
.package li::before {
content: '';
width: 1rem;
height: 1rem;
margin-top: 2px;
margin-right: 1rem;
display: inline-block;
background: transparent;
background-size: contain;
background-repeat: no-repeat;
opacity: .6;
}
.package li.yes::before { background-image: url(//www.creart.hu/wp-content/themes/creart/images/tickmark.svg); }
.package li.no::before { background-image: url(//www.creart.hu/wp-content/themes/creart/images/circle.svg); }
.package li.no { color: #433D3D80; }
.package .btn { display: block; } .form-control:focus,
.form-check-input:focus {
color: #433D3D;
border-color: #F37121;
box-shadow: none;
}
.form-control::placeholder { color: #433D3D80; }
.content form *  { color: #433D3D; }
.form-check-input:checked, .wpcf7-list-item input[type="checkbox"]:checked {
background-color: #F37121;
border-color: #F37121;
} footer {
padding: 2rem 0 4rem;
margin: .5rem 0 0 0;
text-align: center;
background: #433D3D;
}
footer h1 {
padding: 0;
margin: 0 0 .5rem 0;
color: #C0BFBF;
font-size: 24px;
font-weight: 300;
line-height: 1.2;
font-family: 'Noto Sans', sans-serif;
text-align: center;
}
footer h1 > strong,  footer p > strong { font-weight: 700; }
footer p > strong { white-space: nowrap; }
footer p, footer a {
padding: .5rem 0 0 0;
margin: 0;
color: #C0BFBF;
font-size: 16px;
font-weight: 300;
line-height: 1.3;
font-family: 'Noto Sans', sans-serif;
text-align: center;
text-decoration: none;
}
footer p:first-of-type { border-top: 1px solid #C0BFBF; }
footer p > .separator {
padding: 0 1rem;
display: inline-block;
}
footer p > .separator { display: none; }
footer p > .br { display: block; }
footer .social { margin-top: .5rem; }
footer .social a {
margin: 0 0 0 1rem;
display: inline-block;
}
footer .social a:first-of-type { margin: 0; }
@media only screen and (max-width: 1200px) { #why .why-item.text > div {
padding: 0;
border-left: none;
} #references .text h1 { font-size: 36px; }
#references .text p { font-size: 18px; } }
@media only screen and (max-width: 992px) { #navigation {
padding-top: 0;
position: relative;
}
#navigation::before {
content: '';
position: absolute;
top: -2rem; right: 0; bottom: 0; left: 0;
background: #fff;
z-index: -1;
}
#navigation .navbar {
padding-top: .35rem;
padding-bottom: .35rem;
margin-top: 2rem;
}
#navigation .navbar-brand > span {
padding: 1rem 2rem;
top: -2rem;
}
#navigation .navbar-brand img { width: 64px; }
#navigation .navbar-collapse.collapse { margin-top: 4rem; }
#navigation .nav-item { border-bottom: 1px solid #908D8D40; }
#navigation .nav-item:last-of-type { border-bottom: none; }
#navigation .nav-item.active { border-bottom-width: 4px; }
#navigation .nav-link { padding: .5rem 0; }
#navigation .nav-link:hover::after,
#navigation .nav-link.active::after,
#navigation .nav-link:hover::before  { display: none; }
#navigation .nav-link.active { color: #F37121; }
#navigation .navbar-collapse.collapse::before {
content: '';
position: absolute;
top: 51px; right: 0; bottom: 0; left: 0;
background: #ffffff80;
z-index: 0;
} #references .slick-dots li {
width: 2rem;
height: .25rem;
} #why .why-item { margin-bottom: 30px; }
#why .why-item.text > div {
padding: 0 0 0 30px;	
border-left: 1rem solid #E6E5E5;
} #references .text h1 { font-size: 40px; }
#references .text p {
margin-bottom: 2rem;
font-size: 20px;
} .sidebar {
margin: 4rem 0 2rem;
position: sticky;
top: 0;
z-index: 99;
}
.sidebar:empty { display: none; }
.sidebar .sidemenu {
padding: .5rem 0;
border: 1px solid #908D8D40;
border-left: none;
}
.sidebar .sidemenu .sidemenu-item {
padding: .2rem 1rem;
margin: 2px 0;
font-size: 16px;
}
.sidebar h2 { text-align: left; } .content {
padding-left: calc(var(--bs-gutter-x)* .5);
padding-right: calc(var(--bs-gutter-x)* .5);
}
.content .h2 { display: none; } footer p > .separator { display: inline-block; }
footer p > .br { display: none; }
}
@media only screen and (max-width: 768px) { #references .description {
border-right: none;
}
#references .description .logo {
width: auto;
max-width: 40%;
height: 80px;
margin: 0 2rem 2rem 0;
position: relative;
bottom: auto; left: 0;
float: left;
}
#references .ref-slider { margin-top: 3rem; }
#references .ref-slider .refs-item { height: auto; }
#references .screenshot img {
width: 100%;
height: auto;
margin-left: 0;
max-height: 720px;
object-fit: cover;
object-position: left top;
} .references-item .content .logo img { margin: 0 auto 2rem auto; }
.references-item .content p { text-align: center; }
.references-item .content .tags { text-align: center; } footer p > .separator { display: none; }
footer p > .br { display: block; }
}
@media only screen and (max-width: 576px) { #slider .slider-item { min-height: 400px; }
#slider .slider-item h1 { font-size: 48px; }
#slider .slider-item h2 { font-size: 28px; }
#slider .texts .details { font-size: 16px; } #why .why-item.text > div {
padding: 0;
border-left: none;
}
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 380px) {
}
@import url(https://unpkg.com/lenis@1.3.4/dist/lenis.css);