:root {

--color-def: 		#424242; /* rgb 66,66,66 */

--font-default: 'Source Sans';
--font-title: 'CG Omega';

}


html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { background-color: #fff; position: relative; }
body, body * { font-family: var(--font-default);, sans-serif; transition: all .5s; font-size: 16px; line-height: 130%; font-weight: 400; color: var(--color-def); letter-spacing: 1px; }
ul { margin-block-start: unset; margin-block-end: unset; padding-inline-start: unset; }
p, a, ul, li { margin: 0px; padding: 0px; }
ul { list-style-position: inside; padding-left: 10px; }
ul li::marker { font-size: 10px; }
p { margin-bottom: 8px; }
a { text-decoration: none; margin: 0px; padding: 0px; color: unset; cursor: pointer; }
a:hover { color: unset; text-decoration: none; }


h2 { font-family: var(--font-title); font-size: 22px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }

.bg-light { background-color: #f5f5f5; }

/* HEADER */

header { position: absolute; z-index: 2; top: 40px; left: 0px; width: 100%; }
header figure { width: 150px; height: 142px; background-image: url(../images/saltnkisses-logo.png); background-position: center; background-repeat: no-repeat; background-size: 100%; }
header nav ul { list-style: none; display: flex; }
header nav ul li { padding-left: 15px; padding-right: 15px; }
header nav ul li a { font-family: var(--font-title); color: #fff; font-size: 20px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
header nav ul li a.active { color: var(--color-def); }
header nav svg { display: none; }
header .kereses { cursor: pointer; margin-left: 20px; }
header .kereses svg { fill: rgba(255, 255, 255, 1); }
header .kereses svg:hover { fill: rgba(66, 66, 66, 1); }

header .menu { display: none; }
header .menu svg { fill: rgba(255, 255, 255, 1); }

/* KERESÉS LAYER */

section.kereses { position: fixed; z-index: -1; opacity: 0; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); display: flex; justify-content: center; align-items: center; }
section.kereses.show { z-index: 10; opacity: 1; }
section.kereses form { width: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
section.kereses input { background: unset; border: unset; border-bottom: 1px solid #fff; width: 100%; color: #fff; font-size: 22px; text-align: center; }
section.kereses input:focus { box-shadow: unset !important; outline: unset !important; }
section.kereses label { color: #fff; text-transform: uppercase; font-size: 11px; margin-top: 10px; }
section.kereses svg { position: absolute; top: 40px; right: 40px; cursor: pointer; }

/* COVER */

section.cover { width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; z-index: 1; }
section.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0px; left: 0px; z-index: 1; }
section.cover video { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0px; left: 0px; z-index: 1; }
section.cover .content { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; }
section.cover .content h1 { font-family: var(--font-title); color: #fff; font-size: 50px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
section.cover .content h2 { color: #fff; }

/* ROVAT AJÁNLÓ */

.banner-height { height: 300px; }

/* - 6-os - */
section.rovat-ajanlo-6 img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1; }
section.rovat-ajanlo-6 h3 { position: absolute; z-index: 2; font-family: var(--font-title); color: #fff; font-size: 18px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
section.rovat-ajanlo-6 a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

/* - 5-os - */
section.rovat-ajanlo-5 img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1; }
section.rovat-ajanlo-5 h3 { position: absolute; z-index: 2; font-family: var(--font-title); color: #fff; font-size: 18px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
section.rovat-ajanlo-5 a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

/* CIKK AJÁNLÓ */

section.cikk-ajanlo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; position: relative; z-index: 1; }
section.cikk-ajanlo h3 { position: absolute; z-index: 2; font-family: var(--font-title); color: #fff; font-size: 18px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
section.cikk-ajanlo a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

/* MAILTO */

section.mailto { background-color: #e94739; }
section.mailto a { display: block; padding: 10px; width: 100%; text-align: center; text-transform: uppercase; font-size: 20px; color: #fff; border: 1px solid #fff; letter-spacing: 5px; }
section.mailto a:hover { background-color: #fff; color: #e94739; }

/* LEGFRISSEBB */

section.legfrissebb { background-color: #222222; }
section.legfrissebb h2 { color: #fff; }
section.legfrissebb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
section.legfrissebb h4 { font-family: var(--font-title); color: #fff; font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: 3px; margin-top: 10px; margin-bottom: 20px; }
section.legfrissebb p { color: #fff; font-size: 13px; line-height: 20px; }
section.legfrissebb .owl-carousel .owl-nav .owl-next svg, .owl-carousel .owl-nav .owl-prev svg { width: 16px; fill: #fff; }
section.legfrissebb .owl-carousel .owl-nav .owl-prev { position: absolute; left: -40px; }
section.legfrissebb .owl-carousel .owl-nav .owl-next { position: absolute; right: -40px; }
section.legfrissebb .owl-carousel .owl-stage-outer { z-index: 3; }
section.legfrissebb .owl-carousel .owl-nav { position: absolute; top: 50%; width: 100%; z-index: 1; }

/* SECTION **************************************** */

section.duplabox a { width: 100%; max-width: 480px; display: block; }
section.duplabox img { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
section.duplabox h2 { text-align: unset; }

/* CONTENT **************************************** */

section.tartalom .bevezeto { font-size: 22px; font-weight: 300; }
section.tartalom img { width: 100%; margin-top: 30px; margin-bottom: 30px; }
section.tartalom .meta * { color: #8f8f8f; text-transform: uppercase; margin-right: 10px; }

/* KERESÉS OLDAL **************************************** */

section.s-404 .container-fluid { background-color: #e94739; }
section.s-404 form { width: 500px; max-width: 100%;  }
section.s-404 input { padding: 10px; border-radius: 6px; border: 1px solid #fff; width: 100%; text-align: center; background: transparent; color: #fff; width: 100%; }
section.s-404 input:focus { box-shadow: unset !important; outline: unset !important; }
section.s-404 img { max-width: 100%; }

/* **************************************** */

/* PAGE STYLE */

body.p-404 header { position: relative !important; }
body.p-kereses header { position: relative !important; }

body.p-404 header .menu svg { fill: var(--color-def) !important; opacity: .5; }
body.p-kereses header .menu svg { fill: var(--color-def) !important; opacity: .5; }
body.p-404 header .menu svg:hover { fill: var(--color-def) !important; opacity: 1; }
body.p-kereses header .menu svg:hover { fill: var(--color-def) !important; opacity: 1; }

body.p-kereses header nav:not(.show) ul li a { color: var(--color-def) !important; opacity: .5; }
body.p-kereses header nav:not(.show) ul li a:hover { color: var(--color-def) !important; opacity: 1; }
body.p-kereses header .kereses svg { fill: var(--color-def) !important; opacity: .5; }
body.p-kereses header .kereses svg:hover { fill: var(--color-def) !important; opacity: 1; }

body.p-404 header nav:not(.show) ul li a { color: var(--color-def) !important; opacity: .5; }
body.p-404 header nav:not(.show) ul li a:hover { color: var(--color-def) !important; opacity: 1; }
body.p-404 header .kereses svg { fill: var(--color-def) !important; opacity: .5; }
body.p-404 header .kereses svg:hover { fill: var(--color-def) !important; opacity: 1; }

body.p-404 header figure { background-image: url(../images/saltnkisses-logo-black.png) !important; }
body.p-kereses header figure { background-image: url(../images/saltnkisses-logo-black.png) !important; }

body.p-404 h1 { font-family: var(--font-title); font-size: 50px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }
body.p-kereses header figure h1 { font-family: var(--font-title); font-size: 50px; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 3px; }

/* **************************************** */

/* FOOTER */

footer { background-color: #333333; }
footer h3 { font-family: var(--font-title); color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 700; letter-spacing: 3px; height: 60px; }
footer p { color: #fff; font-size: 13px; }
footer a { color: #fff; font-size: 13px; }
footer .lista a { text-transform: uppercase; }
footer a:hover { text-decoration: underline; }
footer img { width: 150px; margin-top: 15px; }

/* BANNER - GIANT */

section.banner-giant .goAdverticum img { max-width: 100%; height: auto !important; }



@media (max-width: 1200px) {

	.container { max-width: 100%; }
	.w-75 { width: 100% !important; }

	section.cover { width: 100%; aspect-ratio: unset; height: 100vh; }

	header { top: 20px; }
	header img { width: 100px; }
	header nav ul li a { font-size: 20px; }

}

@media (max-width: 992px) {

	section.cover .content h1 { font-size: 30px; }

	section.kereses form { width: 90%; }

	header .menu { display: block; }
	header nav ul li a { font-size: 24px; }
	header nav ul li { padding-top: 15px; padding-bottom: 15px; }
	header nav ul { flex-direction: column; }
	header nav { position: fixed; z-index: 10; opacity: 0; top: 0px; left: -100%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); display: flex; justify-content: center; align-items: center; }
	header nav.show { opacity: 1; left: 0px; }
	header nav svg { display: block; position: absolute; top: 40px; right: 40px; cursor: pointer; }

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

	.banner-full { height: 300px; }

	section.cover .content h1 { font-size: 20px; }

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

	h2 { font-size: 20px; }

	section.mailto a { font-size: 14px; letter-spacing: 4px; }

	section.legfrissebb .owl-carousel .owl-nav .owl-prev { left: -35px; }
	section.legfrissebb .owl-carousel .owl-nav .owl-next { right: -35px; }

}