:root {

--color-default: #20292f;

--color-green: #7a8c8c;
--color-gray: #cccccc;
--color-lightgray: #f3f3f3;

--font-title-pri: 'MonteCarlo';
--font-title-sec: 'Playfair Display';

}


:focus { outline: none !important; box-shadow: unset !important; border: unset !important; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: unset !important; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: unset !important; }
::-ms-input-placeholder { /* Microsoft Edge */ color: unset !important; }

small, .small { font-size: 0.75em !important; }
strong, .strong, b, .bold { font-weight: 700 !important; }

body, html { height: 100%; }
body, body * { font-family: 'Open Sans'; font-weight: 500; color: var(--color-default); font-size: 18px; line-height: 28px; }


main { width: 100%; background-color: #fff; margin-top: 80px; }

small { font-weight: 300; }

.dropdown-menu:empty{ display:none; } 

a { text-decoration: none; }
a:hover { color: var(--color-default); text-decoration: underline; }

.btn { color: #ffffff!important; border-radius: 60px; border: 2px solid var(--color-green); letter-spacing: 1px; font-size: 16px; font-family: 'Playfair Display'; font-weight: 600!important; text-transform: uppercase!important; background-color: var(--color-green); padding: 12px 25px 10px 25px; transition: all .5s; }
.btn:hover { color: var(--color-green) !important; background-color: #ffffff; }
.btn:hover i { }


.color-green { color: var(--color-green); }
.bg-green { background-color: var(--color-green); }
.bg-gray { background-color: var(--color-gray); }
.bg-white { background-color: #fff; }

.sitename { height: 100%; }
.sitename p { font-family: var(--font-title-sec); font-size: 14px; line-height: 16px; margin: 0px; text-transform: uppercase; }
.sitename img { height: 70%; }

.top { position: fixed; top: 0; z-index: 1020; }

.header { height: 80px; transition: all .5s; background-color: #fff; }
.header a:hover { text-decoration: none !important; }
.header.scrolled { height: 60px; }
header .nav a { font-size: 13px; font-weight: 600; text-transform: uppercase; }
.header i[menu], .header i[close] { font-size: 30px; }

.bx-cart { font-size: 20px; }
.bx-menu { font-size: 25px; }

[data-link] { cursor: pointer; }


.full-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }



.box-1 h2 { font-family: var(--font-title-pri); font-size: 60px; line-height: 60px; color: #fff; width: 70%; }
.box-1 h1 { font-family: var(--font-title-sec); font-size: 40px; line-height: 50px; font-weight: 400; text-transform: uppercase; width: 70%; }

section.box-2 { min-height: 50vh; }

.box-2 h2 { font-family: var(--font-title-pri); font-size: 60px; line-height: 60px; width: 70%; }
.box-2 h3 { font-family: var(--font-title-sec); font-size: 40px; line-height: 50px; font-weight: 400; text-transform: uppercase; width: 70%; }
.box-2 h5 { font-family: var(--font-title-sec); font-size: 20px; line-height: 30px; width: 70%; }


section.content { padding-top: 20px; }

section.content h1 { font-family: var(--font-title-pri); font-size: 80px; line-height: 80px; }
section.content h3 { font-family: var(--font-title-pri); font-size: 50px; line-height: 50px; }
section.content h5 { font-family: var(--font-title-sec); font-size: 20px; line-height: 30px; }


section.formak p, section.formak small { color: #fff; margin: 0px; }
section.formak p { font-weight: 600; }
section.formak .galeria { background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
section.formak img { width: 100%; height: auto; }
section.formak .fades { background-color: rgba(0, 0, 0, .4); }









section.box-ajtofront h2 { font-family: var(--font-title-sec); font-size: 70px; line-height: 70px; width: 70%; }





section.carousels h2 { font-family: var(--font-title-sec); font-size: 70px; line-height: 70px; width: 70%; }
section.carousels h3 { font-family: var(--font-title-pri); font-size: 50px; line-height: 50px; width: 70%; }
section.carousels .carousel { width: 400px; height: 400px; margin: 40px; }
section.carousels .carousel .carousel-border { width: 100%; height: 100%; border: 4px solid #2e2e2e; position: absolute; top: -20px; left: -20px; z-index: 1; }





section.box-group { padding-top: 40px; padding-bottom: 40px; background-color: var(--color-lightgray); }
section.box-group div.border { border: 4px solid #2e2e2e !important; background-color: #fff; }
section.box-group .image-gap { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1 / 1; position: relative; margin-bottom: 20px; }
section.box-group img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
section.box-group img.border { border: 8px solid #fff !important; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
section.box-group h5 { font-family: var(--font-title-sec); font-size: 30px; line-height: 40px; }












.hibasak .image-gap { width: 300px; height: fit-content; position: relative; }
.hibasak .image-gap img { width: 100%; height: auto; }
.hibasak div.border { border: 4px solid #fff !important; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; }
.hibasak h5 { font-family: var(--font-title-sec); font-size: 40px; line-height: 40px; }
.hibasak h2 { font-family: var(--font-title-pri); font-size: 50px; line-height: 60px; }
.hibasak h3 { font-family: var(--font-title-sec); font-size: 30px; line-height: 36px; }






section.teljes-koncepciok { height: calc( 100vh - 80px ); }
section.teljes-koncepciok .image { background-size: cover; background-repeat: no-repeat; background-position: center; }
section.teljes-koncepciok h1 { font-family: var(--font-title-pri); font-size: 80px; line-height: 80px; }
section.teljes-koncepciok h5 { font-family: var(--font-title-sec); font-size: 20px; line-height: 30px; }

section.teljes-koncepciok .video { max-width: 100%; height: auto; position: relative; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; right: -30%; }
section.teljes-koncepciok .video a { display: inline-flex; justify-content: center; align-items: center; height: 100%; }
section.teljes-koncepciok .video img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
section.teljes-koncepciok .video i { position: absolute; font-size: 100px; color: #fff; }







.galeria .video { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; border: 5px solid #fff; width: 100%; height: auto; padding-top: 56.25%; overflow: hidden; position: relative; }
.galeria .video a { display: inline-flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }
.galeria .video img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
.galeria .video i { position: relative; font-size: 100px; color: #fff; z-index: 2; }











.galerialist img { width: 100%; height: 100%; object-fit: cover; object-position: center; }










footer a { font-size: 14px; }










@media (max-width: 992px) {

.header { height: 50px !important; }
main { margin-top: 50px; }

section.box-1 { height: 100vh; }
section.box-2 { height: 100vh; }

header .menu { position: absolute; background-color: #fff; top: 50px; box-shadow: 0 1rem 1rem rgba(0,0,0,.15) !important; height: fit-content !important; transition: all .5s; }
header .nav a { font-size: 16px !important; }

}


@media (max-width: 1100px) {

.box-1 h2 { width: 100%; padding-left: 15px; padding-right: 15px; }
.box-1 h1 { width: 100%; padding-left: 15px; padding-right: 15px; }

.box-2 h2 {  width: 100%; padding-left: 15px; padding-right: 15px; }
.box-2 h3 { width: 100%; padding-left: 15px; padding-right: 15px; }
.box-2 h5 { width: 100%; padding-left: 15px; padding-right: 15px; }

section.teljes-koncepciok .video { max-width: 80%; right: unset; }

.sitename p { font-size: 12px; line-height: 12px; width: 100px; }

header .nav a { font-size: 11px; }

}


@media (max-width: 550px) {

.sitename p { font-size: 11px; line-height: 13px; }

h1 { font-size: 55px !important; line-height: 58px !important; }
h2 { font-size: 50px !important; line-height: 50px !important; }
h3 { font-size: 40px !important; line-height: 40px !important; }
h5 { font-size: 30px !important; line-height: 36px !important; }

.index h1 { font-size: 30px !important; line-height: 36px !important; }
.index h2 { font-size: 50px !important; line-height: 50px !important; }
.index h3 { font-size: 40px !important; line-height: 40px !important; }
.index h5 { font-size: 30px !important; line-height: 36px !important; }

section.carousels h2 { font-size: 40px; line-height: 40px; }
section.carousels h3 { font-size: 30px; line-height: 40px; }
section.carousels .carousel { width: 100%; height: auto; }

section.teljes-koncepciok { height: 70vh; }
section.teljes-koncepciok h5 { font-size: 20px !important; line-height: 26px !important; }



.hibasak h2 { font-size: 40px !important; line-height: 46px !important; }
.hibasak h3 { font-size: 20px !important; line-height: 26px !important; }





.sitename img { height: 70%; }


}








/* SHOP */

.loader-container { position: fixed; top: 0px; left: 0px; z-index: 99999999999; background-color: rgba(0, 0, 0, .7); width: 100%; height: 100%; display: none; align-items: center; justify-content: center; }
.loader-container i { color: #fff; font-size: 36px; }
.loader-container.active i { display: flex; }

.dropdown-menu:empty{ display:none; } 

.tooltip { font-size: 10px; font-weight: 300; }