/*
Theme Name: Targi Dlugowiecznosci '26
Theme URI: https://targidlugowiecznosci.pl/
Author: Tomasz Nowak
Version: 2.0
Text Domain: targidlugowiecznosci.pl
*/

html, body, div, p, span, h1, h2, h3, h4, h5, h6, img, dl, dt, dd, blockquote, pre, form, fieldset, label, input, table, th, td, a {margin:0; padding:0; border:0; vertical-align:baseline; color:var(--colorf); line-height: 1.45; }
:focus {outline:0;}
body {line-height:1.35;}
 
body {background:var(--color1); color: var(--colorf); font-family: GeneralSans, Arial, Helvetica, sans-serif; height: 100%; font-size: 18px; }

body { scrollbar-gutter: stable; }
:root {
  --color0: #000000;
  --colorf: #ffffff;
  --color1: #80a3ff;
  --color2: #ff9966;
  --color3: #99ff99;
  --color4: #111156;
}

html {scroll-behavior: smooth;}

input, textarea, select, button {background-color: var(--colorf); border-radius: 22px; font-family: GeneralSans, Arial, Helvetica, sans-serif; margin: 5px 0; color: var(--color4); font-size: 16px; padding: 10px 15px; border: 1px var(--colorf) solid;}
button {background: var(--colorf);  color: var(--color0); cursor: pointer;}
button:hover { background: var(--color4); border: 1px var(--color4) solid; }
input.radio, input.checkbox {background: var(--colorf); padding:2px;}
form label{font-weight:bold; display:block;}
.btn, input[type="submit"], input[type="button"] { line-height: 100%; border-radius: 22px; font-weight: 700; text-transform: uppercase; background-color: var(--colorf); border: 0; text-decoration: none; color: var(--color4); padding: 13px 15px; }
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {cursor: pointer; background: var(--color4); color: var(--colorf);  text-decoration: none;}


.btn  {	font-size: 24px;color: var(--color4);	background: rgba(255,255,255,0.7);	padding: 12px 25px;	font-weight: 600;	border-radius: 27px;	border: 2px var(--colorf) solid;display: inline-block;}
.btn * { color: var(--color4) !important;}
.btn:hover {background: var(--color4); color: var(--colorf); text-decoration: none; border: 2px var(--color4) solid;}

figure {border-radius: 6px; }
figure img {width: 100%;  display: block; border-radius: 6px;}

.after:after {clear: both; display: block; float: none; content: "."; padding: 0; height: 0; font-size: 1px; visibility: hidden;}
.wrap {width: calc(100% - 20px); max-width: 1340px; padding: 0 10px; position: relative; margin: 0 auto;}

header {background: var(--colorf); position: fixed; top: 0; right: 0; left: 0;  z-index: 10; transition: margin 0.4s;}
header .topmenu .wrap {}
header a#logo {font-size: 16px;	width: 220px;	display: block;	float: left;	padding: 23px 0 0 50px;	color: var(--color4);	font-weight: 600;	text-decoration: none;	position: relative;}
header a#logo svg {	display: inline-block;	z-index: 10;	height: 30px;	width: 40px;	position: absolute;	margin: -5px 0 0 0;	left: 0;}

.royalcheese {	cursor: pointer;	color: var(--color0);	font-size: 24px;	line-height: 100%;	display: none;	position: absolute;	right: 0px;	top: 0px;	width: 40px;	height: 30px;	padding: 20px 15px;	text-align: center;	transform: rotate(90deg);	letter-spacing: 1px;	font-weight: 500;}
.royalcheese.activ8 { color: var(--colorf); background: var(--color4);  }

nav.topmenu {	background: var(--colorf);	height: 70px;}
nav.topmenu ul {list-style: none; margin: 0; display: block; height: 30px; float: right; padding: 20px 0;}
nav.topmenu ul li { display: inline-block; height: 30px; margin: -3px 0 0 10px;}
nav.topmenu ul li a {	transition: transform 0.25s ease; display: inline-block;	border-radius: 15px; padding: 5px 15px;	color: var(--color4);	height: 20px;	line-height: 20px; transition: all 0.3s ease;	font-weight: 500;	 font-size: 15px;  text-decoration: none; border: 2px transparent solid;}
nav.topmenu ul li.current-menu-item a, nav.topmenu ul li.current-menu-item a:hover { color: var(--color4);  border: 2px var(--color4) solid;  }
nav.topmenu ul li a:hover { color: var(--color4); border: 2px var(--color4) solid;  }
nav.topmenu ul.mobile {	max-width: 320px;	width: 100%;	position: absolute;	z-index: 5;	right: 0;	top: 70px;	background: var(--color4);	height: unset;	padding: 20px;}
nav.topmenu ul.mobile .wrap {padding: 0; width: 100%;}
nav.topmenu ul.mobile li {display: block; padding: 0; height: auto;}
nav.topmenu ul.mobile li a {	display: block;	border-radius: 0;	border: 0;	color: var(--colorf);	opacity: 0.8;	padding: 15px 10px;	font-size: 16px;}
nav.topmenu ul.mobile li a:hover {border-radius: 0; border: 0; opacity: 1;  color: var(--colorf) !important;}
nav.topmenu ul.mobile li.current-menu-item a { opacity: 1; }

footer {padding: 30px 20px 20px;	 float: none; clear: both; font-size: 14px; font-weight: 500;} 
.homepage footer {margin-top: -85px;  z-index: 10;}
footer .col1 {width: 240px; float: left;}
footer .col2 {width: calc(100%  - 480px); float: left; text-align: center;}
footer .col3 {width: 90px; float: right; text-align: right;}
footer nav ul {display: block; margin: 0; padding: 0;}
footer nav ul li {display: inline-block; margin: 0; padding: 0;}
footer nav ul li a {color: var(--colorf); padding: 5px 10px; text-decoration: none;}
footer nav ul li a:hover { text-decoration: underline; color: var(--colorf); }

footer .socicons {display: inline-block; margin: -15px 0 0 0;}
footer .socicons img {width: 30px; margin: 5px; vertical-align: middle;}

.menu-menu-gorne-container {display: inline-block;float: right; }

.shadow0 { box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;}
.shadow1 {box-shadow: 0px 1px 28px -22px rgba(66, 68, 90, 1);}

.page-title {font-size: 48px; font-weight: 600; padding: 12vh 0 12vh 0; letter-spacing: 1.2px;}
.page-title span {font-weight: 700;}
.inner-lead {margin: 10px 0 20px 0; font-size: 18px; font-weight: 700;}

.more-btn {margin: 30px 0; text-align: center; }
.page {padding: 70px 0 70px; min-height: calc(100vh - 220px);}

.entry {font-size: 18px;}
.entry a {text-decoration: none; }
.entry a:hover {text-decoration: underline; }
.entry p {margin: 0 0 20px 0;}

#showroom { height: calc(100vh - 70px); overflow: hidden;  position: relative;  padding-top: 70px;}
#showroom video {background: #000; width: 100%; height: 100%;  object-fit: cover; object-position: center; transition: opacity 0.3s ease;}

.content-overflow { position: absolute;	top: 20vh;	left: 10%;	width: 80%;	text-align: center;}
.content-overflow img {	width: 100%;	max-width: 960px;	display: block;	margin: auto;}
.content-overflow p {width: 60%;max-width: 820px;display: block;margin: auto;	font-size: 21px;font-weight: 600;	color: var(--colorf); text-shadow: 1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0.8);margin: 30px auto 0;}
.content-overflow a.btn {margin: 0 20px; min-width: 300px;}

body.kontakt .entry ul {list-style: none; margin: 0; padding: 0;}
body.kontakt .entry ul li {width: calc(50% - 80px); float: left; padding: 0 0 0 40px; margin: 0; font-weight: 500;}

#photowall { position: fixed;  top: 0; left: 50%; transform: translateX(0); width: 110vh; height: 110vh; z-index: -1; pointer-events: none; background-size: cover; background-position-y: top; background-repeat: no-repeat; border-radius: 50%;}

body.o-nas .entry {	width: 620px;}
body.o-nas .entry *, body.o-nas h1 {color: var(--color4) !important;}
body.o-nas .entry p { font-size: 26px; font-weight: 600; margin: 0 0 30px; color: var(--color4) !important; }
body.o-nas footer *, body.o-nas footer a, body.o-nas footer a:hover { color: var(--color4) !important; }
body.o-nas .socicons img { filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(2400%)  hue-rotate(225deg) brightness(90%) contrast(105%);}

#sm-contact-form-wrapper{max-width: 1280px; margin:40px 0;}
.sm-form-field {width: calc(33.33% - 86px);padding: 0 40px;display: inline-block;}
.sm-form-field:nth-child(4),.sm-form-field:nth-child(5){width: calc(100% - 80px); clear: all; display: block;margin: 20px 0;}
.sm-form-field label{display:block;margin-bottom:5px; font-weight: 600;}
.sm-form-field input[type="text"],.sm-form-field input[type="email"],.sm-form-field input[type="tel"]{width:calc(100% - 22px);padding:10px;border:1px solid #ccc; height: 28px; border-radius: 24px;}
.sm-form-field input[type="checkbox"]{margin-right:5px}
.sm-form-field.reqs label {padding-left: 30px; position: relative;}
.sm-form-field.reqs label input {	position: absolute;	left: 8px;	top: 1px;}

.form-error{border-color:#ff0048!important; background: rgba(255,0,48,0.2) !important;}

#validation-error {	padding: 15px;	margin-bottom: 20px;	background-color: #ff0048;	border-radius: 4px;	color: var(--colorf) !important;	border-radius:24px;}
#validation-error p { color: var(--colorf) !important; margin: 0; text-align:center;}
#loading-state,#error-state,#success-message{padding:20px;border-radius:24px;text-align:center;}
#loading-state{}
#error-state{background-color:#f8d7da;border:1px solid #dc3545;color:#721c24}

#success-message { background-color: var(--colorf);	color: var(--color4) !important;	border-radius:24px;}
#success-message p { color: var(--color4) !important; margin: 0; text-align:center;}

body.dla-wystawcow .entry *:not([class*="btn"]), body.dla-wystawcow h1 {color: var(--color4) !important;}
body.dla-wystawcow input[type="text"],body.dla-wystawcow input[type="email"],body.dla-wystawcow input[type="tel"] { border: 2px var(--color4) solid; background: rgba(255,255,255,0.4); font-weight: 500;}
body.dla-wystawcow footer *, body.dla-wystawcow footer a { color: var(--color4) !important; }
body.dla-wystawcow .socicons img { filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(2400%)  hue-rotate(225deg) brightness(90%) contrast(105%);}

body.dla-odwiedzajacych .entry *, body.dla-odwiedzajacych h1 {color: var(--color4) !important;}
body.dla-odwiedzajacych footer *, body.dla-odwiedzajacych footer a { color: var(--color4) !important; }
body.dla-odwiedzajacych .socicons img { filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(2400%)  hue-rotate(225deg) brightness(90%) contrast(105%);}
body.dla-odwiedzajacych .entry-flow {width: calc(35% - 30px); float: left;}
body.dla-odwiedzajacych .faq-container {width: calc(65% - 30px); float: right;}
body.dla-odwiedzajacych .entry p {font-weight: 600;}
body.dla-odwiedzajacych .entry p em {font-weight: 500;}
body.dla-odwiedzajacych .entry .faq-container details {background: var(--color4); padding: 10px 20px; color: var(--colorf) !important; border-radius: 24px; margin: 0 0 20px 0; }
.faq-answer {	overflow: hidden;	padding: 10px 0 0 0;	font-style: italic;}
.faq-container details {cursor: pointer;}
.faq-container details summary { list-style: none;}
.faq-container details summary::-webkit-details-marker { display: none;}
body.dla-odwiedzajacych .entry p.tickets-line {text-align: center; margin: 0 0 80px 0;}
body.dla-odwiedzajacych .entry p.tickets-line .btn:hover {border: 2px var(--color4) solid; color: var(--colorf) !important; background: var(--color4); text-decoration: none;}
body.dla-odwiedzajacych .entry .faq-icon {position: absolute; right: 0; top: 0; display: block; width: 1em;	text-align: center;	float: right;	color: var(--colorf) !important;}
.faq-icon::before { content: '+'; display: inline-block;  width: 1em; text-align: center;}
.faq-item[open] .faq-icon::before { content: '−';}
body.dla-odwiedzajacych .entry .faq-question {	font-weight: 600;	color: var(--colorf) !important;	position: relative;	padding-right: 30px;}
body.dla-odwiedzajacych .entry .faq-answer * { font-weight: 500; color: var(--colorf) !important;}
.tickets-line a {margin: 0 20px;}

body.strefy-targow .entry *, body.strefy-targow h1 {color: var(--color4) !important;}
body.strefy-targow .socicons img { filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(2400%)  hue-rotate(225deg) brightness(90%) contrast(105%);}
body.strefy-targow footer *, body.strefy-targow footer a { color: var(--color4) !important; }
body.strefy-targow h1 {width: 480px; line-height: 1.35;}

.areas-list {margin: 0; padding: 0; list-style: none;}

.areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.areas-list .btn {
	margin: 10px 20px;
	font-size: 17px !important;
	line-height: 1.25;
	width: calc(33.33% - 110px);
	position: relative;
	height: 44px;
	border-radius: 32px;
	overflow: hidden;
	display: flex;
	justify-content: left;
	align-items: center;
	text-align: left;
	border: 2px var(--colorf) solid;
	background: rgba(255,255,255,0.5);
}


.areas-list .btn a {text-decoration: none;display: block;	padding: 10px 0;	width: 100%;}
.areas-list .btn:hover {opacity: 1; background: var(--color4); border: 2px var(--color4) solid;}
.areas-list .btn:hover * {color: var(--colorf) !important; text-decoration: none;}
.areas-list .btn span.no {display: none !important; font-size: 32px; position: absolute; display: inline-block; width: 40px; height: 40px;left: 10px; top: 10px; text-align: center; }

.prelegent-list { display: flex; flex-wrap: wrap; gap: 30px; list-style: none; padding: 0; margin: 0 0 40px; }
.prelegent-list li { flex: 1 1 calc(25% - 23px); min-width: 200px; text-align: center; cursor: pointer; margin: 0 0 30px 0;}
.prelegent-list li img { width: 260px; height: 260px; border-radius: 50%; object-fit: cover; display: block;  filter: grayscale(100%); }
.prelegent-list li h3 {	max-width: 320px; font-size: 18px; font-weight: 600; background: rgba(255,255,255,0.7);	border: 1px #fff solid;	padding: 10px 10px;	color: var(--color4);	border-radius: 24px;	width: 90%;	margin: -5px auto 0;}
.prelegent-list li figure {	width: 260px;	height: 260px;	border-radius: 50%;	margin: 0 auto 15px;}


body.strefa-bohatera .entry p {	font-weight: 600;}
.grecaptcha-badge {right: -320px !important; bottom: 0 !important; }

.desktopfirst {display: block;}
.mobilefirst {display: none;}
.homepage .metaballs-background {display: none;}

/* Dialog */

.dialog-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.dialog-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }
.page-dialog { position: fixed; top: 50%; margin: 0; left: 50%; transform: translate(-50%, -50%); border: none; border-radius: 8px; padding: 0; max-width: 1320px; width: 90%; max-height: 80vh; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 2; background:var(--color1); }
.dialog-content { padding: 20px; position: relative; }
.dialog-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 30px; cursor: pointer;  color: var(--color4); line-height: 1; padding: 0; width: 30px; height: 30px; }
.dialog-close:hover { color: #000; }
.dialog-title { margin: 0 0 20px 0; font-size: 24px; color: var(--colorf); text-transform: uppercase; }
.dialog-body { margin-bottom: 20px; overflow-y: auto; max-height: 50vh; color: var(--color1);}
.dialog-body * {color: var(--colorf);}
.dialog-body p { margin: 0 0 15px 0; font-weight: 500;}

body.strefy-targow .page-dialog {	background: var(--color3) !important;}
body.strefy-targow .dialog-body * {color: var(--color4);}
body.strefy-targow .dialog-body { margin-bottom: 20px; overflow-y: auto; max-height: 50vh; color: var(--color4);}
body.strefy-targow .dialog-title {color: var(--color4);}

.dialog-button-close:hover { }
li[data-linkid] { cursor: pointer; }
.dialog-footer {text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .pulse {transform: scale(1);  isolation: isolate;  position: relative;  z-index: 1;}
  .pulse:hover {animation: pulseZoom 0.4s infinite alternate;}
  .smallpulse:hover img {animation: pulseZoom2 0.4s infinite alternate;}
  @keyframes pulseZoom {from { transform: scale(1); } to { transform: scale(1.03); }}
  @keyframes pulseZoom2 { from { transform: scale(1); } to { transform: scale(1.03); }}
}

@media only screen and  (max-width: 1280px) { 
  nav.topmenu ul li {	margin: -3px 0 0 0px;}
  header a#logo {	font-size: 14px;	width: 196px;}
  nav.topmenu ul li a {	border-radius: 14px;padding: 4px 9px;	height: 18px;	line-height: 18px;font-size: 14px;}
  .prelegent-list li { flex: 1 1 calc(33.333% - 20px); } 
  .sm-form-field {	padding: 0 20px; width: calc(33.33% - 46px);}
  .tickets-line a {	margin: 0 10px 20px;}
  body.o-nas .entry {	width: 420px; }
  body.o-nas .entry p {	font-size: 22px; margin: 0 0 25px;  }    
  #photowall {left: 40%;	width: 100vh;	height: 100vh;}
}

@media only screen and (max-width: 1044px) { 
  header a#logo {	font-size: 16px;	width: 224px;}  
  nav.topmenu ul {display: none;}
  .royalcheese {display: block;}
  .prelegent-list li { flex: 1 1 calc(50% - 15px); } 
  footer .col1 {width: 195px;}
  footer .col2 {width: calc(100% - 290px);}
  .page {	padding: 70px 0 40px;  min-height: calc(100vh - 200px);}
  .page-title {	padding: 8vh 0 8vh 0; font-size: 40px; line-height: 1.2; }
  .sm-form-field {	padding: 0 10px;	width: calc(33.33% - 26px);}
   body.kontakt .entry ul li { float: none; clear: both; width: unset; padding: 0 0 20px 0;}
  .areas-list .btn { width: calc(50% - 130px); }
   body.dla-odwiedzajacych .entry-flow { width: 360px;}
   body.dla-odwiedzajacych .faq-container { width: calc(100% - 360px);}
  .content-overflow p {	width: calc(100% - 20px);	max-width: unset;	margin: 10px auto 0;}
  .content-overflow a.btn {	margin: 0 20px 20px;}
  .content-overflow img {	margin-bottom: 20px;}
  body.o-nas .page {	padding: 70px 10px 40px;	min-height: calc(100vh - 200px);	position: relative;}
  body.o-nas .entry {	width: auto; margin: 20px 0 0; }
  body.o-nas .entry p {	font-size: 22px; margin: 0 0 25px;}    
  #photowall {width: 480px;	height: auto;	position: static;	left: unset;	margin: 20px auto 0;	display: block;}
  body.o-nas h1 {	position: absolute;	top: 70px;}
  body.strefy-targow h1 {	width: auto;}
  
}

@media only screen and  (max-width: 800px) { 
  footer {padding: 10px 10px 0px;	margin: 0;}
  footer .col1, footer .col2, footer .col3 { width:100%; text-align: center; margin: 10px 0;}
  .page-title {	padding: 4vh 0 4vh 0; }
  .sm-form-field {padding: 0; width: 100%; display: block; margin: 0 0 20px 0;}
  .sm-form-field:nth-child(4), .sm-form-field:nth-child(5) {width: 100%; }
  .page { min-height: calc(100vh - 280px);}  
  body.dla-wystawcow .btn {	margin: 15px 0 0;}
  .areas-list .btn { width: calc(100% - 90px); margin: 10px 0; }
  .prelegent-list li { flex: 1 1 100%; }
  body.dla-odwiedzajacych .entry p.tickets-line {	text-align: center;	margin: 0 0 40px 0;}  
  body.dla-odwiedzajacych .entry-flow {	float: none;	clear: both;	width: 100%;	max-width: 380px;	margin: auto;}
  body.dla-odwiedzajacych .faq-container { float: none;	clear: both;	width: 100%;}
  .content-overflow { position: absolute;	top: 20vh;	right: 10px; left: 10px;	width: calc(100% - 20px);	text-align: center;}
  .homepage footer {	margin-top: -145px; }
}


@media only screen and  (max-width: 640px) {
  body.dla-odwiedzajacych .entry p.tickets-line a {width: calc(100% - 54px); margin: 0 0 20px 0;}
  #photowall {	margin: 110px auto 40px;	width: 90%;	border-width: 10px;}
}

@media only screen and  (max-width: 480px) { 
  .entry {	font-size: 16px;}
  .homepage .metaballs-background {display: block;}
  .mobilefirst {display: block;}
  .desktopfirst {display: none;}
  .btn {font-size: 18px;	padding: 10px 10px;	font-weight: 600;	border-radius: 22px;  width: 245px;}  
  .content-overflow a.btn {	margin: 0 auto 40px;	min-width: unset;	}
  h1.page-title {	width: unset;	line-height: 1.2;	font-size: 34px; padding: 6vh 0 5vh 0;}
  nav.topmenu ul.mobile {	max-width: 490px; left: 0; right: 0; }
  #showroom {	height: 200vh;}
  #showroom video {	height: calc(100vh - 70px);	position: absolute;}
  .content-overflow img {	margin: 100px 0 50px;}
  .content-overflow p {	width: calc(100% - 20px);	max-width: unset;	margin: 60vh auto 50px;	text-shadow: none;	font-weight: 500; font-size: 18px;}
  body.o-nas .entry {	margin: 30px 0 0;	font-size: 24px;	text-align: center;}
  .areas-list .btn {	width: 295px;	margin: 0 auto 10px;	padding: 10px 20px;	float: none;	font-size: 17px !important;}
  .areas-list .btn span.no {	font-size: 30px;	left: 5px;	top: 8px;	text-align: center;}
  body.dla-odwiedzajacych .entry p.tickets-line a {	margin: 20px 0 20px 0;	width: 245px;}
  body.dla-wystawcow .btn {	width: 260px;	margin: 30px auto;	display: block;}
  body.o-nas .page {padding: 70px 10px 80px;}
  body.o-nas .entry p {	font-size: 20px;	margin: 0 0 40px;}
  .prelegent-list li figure {	width: 86%;	height: auto;}  
  .prelegent-list li img {width: 100%;	height: 100%;}
  body.o-nas .entry p {	font-size: 18px;	margin: 0 0 40px;	font-weight: 500;	text-align: left;} 
  .dialog-title {	font-size: 19px;}
  .dialog-body p {	font-weight: 500;}
  
}

@media only screen and  (max-width: 400px) {
.homepage footer {	margin-top: -165px;}
}

@media only screen and  (max-width: 360px) { 
  header a#logo {	font-size: 14px;	width: 196px;}  
}