/*
Theme Name:   Ogrody Malowane Światłem
Theme URI:    https://ogrodymalowaneswiatlem.pl/
Description:  v.1
Author:       MATEIKO design
Author URI:   https://mateiko.eu
Template:		   twentytwentyone
Version:		  1.0.0
Text Domain:	 twentytwentyone-child
-------------------------------------------------------------- */

:root {
    --global--color-primary: #fff;
}

* {font-family: quasimoda, arial, sans-serif!important;}

html {
	scroll-behavior: smooth;
}
#page, main {
	overflow: hidden;
}

#mateiko {width:75px; height:27px; vertical-align:middle;}
#mateiko:hover {opacity: 0.7;}

h1 {font-size: 2.8em;}
h2 {font-size: 2.4em;}
h3 {font-size: 1.5em;}
h4 {font-size: 0.9em; font-weight: 800;}

h1,h2,h3, h1 a, h2 a, h3 a, .bilet h4 {
	font-family: capitolium-2, arial, serif!important;	
	font-weight: 700;
	font-style: normal;
	}

a {
	cursor: pointer;
	color: var(--wp--style--color--link, var(--global--color-primary));
	text-underline-offset: 3px;
	text-decoration:none!important;
}

a:hover {
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration: none!important;
}
a:focus {
	background-color: #ffffff50!important;
	text-decoration: none!important;
}

.site-header {
	position: absolute;
	z-index: 100;
	min-width: 100%;
	width:100%;
	padding-top: 25px!important;
	padding-bottom: 15px!important;
	justify-content: space-between!important;
}
.site-main {
	padding-top: 0!important;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {

	/* Only visible in Windows High Contrast mode */
	outline: 2px solid transparent;
	text-decoration: underline 1px dotted currentColor;
	text-decoration-skip-ink: none;
	background: rgba(255, 255, 255, 0.9);
}
.site-footer > .site-info {
	border-top: 0!important;
	padding-top: 0;
	padding-bottom: 0;
}
.site-footer > .site-info .powered-by {
	margin-right:auto;
}

.woocommerce-pagination {text-align: center;}
h2.woocommerce-loop-product__title {font-size: 1.1em!important;}
body {
	background: linear-gradient(to right,#8104c4 0%,#432f9e 50%,#007e97 100%);
}
.widget-area {
	margin-top: 50px!important;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border:3px solid #000; background:none;
}

#wpadminbar {
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif!important
}
#wpadminbar .ab-icon, #wpadminbar .ab-item::before, #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, .wp-admin-bar-arrow {
	font:normal 20px/1 dashicons!important;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background, select {
	border-style: solid!important;
}

.is-style-outline .wp-block-button__link[style*=radius]:focus,
.wp-block-button a.wp-block-button__link[style*=radius]:focus {
	outline-offset: 0;
	outline: 2px solid var(--button--color-background)!important;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width:100%!important;
	color:#00000050!important;
}


.woocommerce-tabs h2 {visibility: hidden; display: none;}
.woocommerce-terms-and-conditions-wrapper {margin-bottom: 0.5rem!important;}
#privacy_policy_field {margin-bottom: 2rem;}

.center, .atrakcja, .atrakcja-container, .atrakcja-box span {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	justify-content:center;
} 

/* header */

#menu-top-left {flex:1 1 60%; padding-left:40px;}
#menu-top-left a {margin:0 7px;}
#menu-top-left h2 {font-size: 2.3em; font-weight: 400; padding-top:43px;}
#menu-top-left img {max-width: 50px; max-height: 50px;}
#menu-top-left a:hover, aside img:hover {opacity:0.8;}

#menu-top-center {flex:1 1 30%}
#menu-top {flex:1 1 40%; display:flex!important;
	flex-direction: row;}
#menu-top div {margin:0 10px;}
#menu-top #menu-button {
	flex: 1 1 50%;
}
#menu-top #menu-menu {
	flex: 1 1 30%;
}
#menu-top #lang, #menu-button {
	display:flex;
	justify-content:center;
	align-items:center;
}
#menu-top #lang {
	flex: 1 1 20%;
}
#menu-top #lang a {
	padding:8px 16px;
}
#menu-button a {
	border-radius:25px;
	background-color:#59b7e3;
	border:2px solid #59b7e3;
	padding:4px 40px 4px!important;
}
#menu-button a:hover {
	background-color: transparent;
	border:2px solid #fff;
	color: #fff;
}

.primary-navigation .sub-menu {border: 0!important;}
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
	background: #59b7e3!important;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu li:hover {
	background: #93d6f6!important;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu::before, .sub-menu-toggle, .primary-navigation > div > .menu-wrapper > li > .sub-menu::after {
	display: none;
	visibility: hidden;
}


/* footer */

#footer-main {
	margin-bottom: 50px;
}

#footer-main, #footer-center p {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-direction: row;
}
#footer-left {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction: column;
}
#footer-right {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
}

#footer-left, #footer-center, #footer-right {
	flex: 1 1 100%;
}
#footer-center .organizatorzy img {
	flex: 1 1 50%;
	max-width: 160px;
}
#footer-center .partnerzy img {
	flex: 1 1 33%;
	max-width: 100px;
	margin-bottom: 10px;
}
#footer-left h4, #footer-left p {
	margin-bottom: 25px;
}
#footer-main img:hover {opacity:0.8;}

.topbutton {
	height:50px;
	width:50px;
	position:fixed;
	right:20px;
	bottom:20px;
	Z-index:100;
	display:none;
	transform: rotate(-90deg);
	background-color: #ffffff20;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tobilet {margin-top:0!important}
#footer-right .footer-logo {margin-top:-40px!important}


/* ATRAKCJE */

.atrakcja {
	flex-direction:column;
}

.atrakcja-box {
	padding: 15px 7px;
	border:3px solid #fff;
	border-radius:25px;
	margin-right:30px;
	max-width:500px;
	float:left;
	min-height: 275px;
	margin-top:50px;
}
.atrakcja-box h3 {
	padding-bottom:15px; 
	margin-top:-75px; 
	text-align:center;
}
.atrakcja-box span {
	position:relative; 
	width: 90px !important; 
	height: 90px !important; 
	background:#59b7e3; 
	padding:15px; 
	top:-55px; 
	left:-60px; 
	border-radius:50%; 
	font-size:2.5em; 
	user-select: none;
	-webkit-user-select: none;
}
.atrakcja-box p {
	font-size:0.75em;
	line-height: 1.5;
}

.atrakcja-container img {
	/*max-width: 500px;*/
	width:100%;
	text-align: center;
	margin-left:-40px;
}
  
.atrakcja-container {
	position: relative;
	margin-top:-70px!important; 
}
  
.mySlides {
	display: none;
  }

.atrakcja-nav{
	margin-right:30px;
	min-width:500px;
	max-width:500px;
	min-height: 75px;
	position: absolute;
	top: 350px;
	width: auto;
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
}
  
.prev, .next {
	cursor: pointer;
	width:50px;
	height:50px;
	padding: 10px 15px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 50%;
	background-color: #59b7e3;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
	transition: all .3s easy-in-out;
}
  
.prev:hover, .next:hover {
	background-color: #ffff;
	color: #59b7e3; 
}

.onas {
	min-height: 1130px;
	background-image: url(https://ogrodymalowaneswiatlem.pl/wp-content/uploads/onas-bg.png); 
	background-repeat:no-repeat;
	background-size:cover;
	background-position: top center;
}

.onas p, .onas h2 {padding:0 100px;}

/* GODZINY */

.godziny {
	min-height: 1080px;
	background-image: url(https://ogrodymalowaneswiatlem.pl/wp-content/uploads/godziny-bg.png); 
	background-repeat:no-repeat;
	background-size:cover;
	background-position: top center;
	margin-top: -210px;
}

.godziny h4 {font-size:1.25em; margin-bottom:0!important}
.godziny p {margin-top:0px!important}

/* BILET */

.bilet1-bg {position:absolute;
width:350px; z-index:-2; top:-150px; left:-150px}
.bilet2-bg {position:absolute;
width:350px; z-index:-2; top:-150px;}
.bilet3-bg {position:absolute;
width:350px; z-index:-2; top:-150px; right:-150px}

.bilet {
	position:relative;
	padding: 25px;
	border-radius:25px;
	border:3px solid #fff;
	box-shadow: 0 0 0.5em 0.25em rgba(241,6,248,1);
	background: linear-gradient(to right,#7000AA 0%,#3E06A5 100%);
}

.bilet h4 {font-size:2em; margin-top:0!important}
.bilet p {margin-bottom:0!important}

/* AKTUALNOSCI */

.aktualnosci{
	min-height: 779px;
	background-image: url(https://ogrodymalowaneswiatlem.pl/wp-content/uploads/aktualnosci-bg.png); 
	background-repeat:no-repeat;
	background-size: cover;
	background-position: top center;
}

.aktualnosci li:nth-of-type(1) h5 {
	font-size:1.5em;
}

.aktualnosci .aktualnosci-txt li:nth-of-type(1) .wp-block-post-date {font-size:1.8em; font-weight:700}

/* MAPA */

.mapa{
	min-height: 696px;
	background-image: url(https://ogrodymalowaneswiatlem.pl/wp-content/uploads/mapa-le.png); 
	background-repeat:no-repeat;
	background-size:20%;
	background-position: top left;
}

.mapa .mapa-dojazdu {
	margin-top:-90px;
}
.mapa-dojazdu, .mapa-atrakcji {
	background: radial-gradient(#352e7e 0%, #352e7e00 70%);
}
.mapa .mapa-ico img {margin-top:-5px;}

.mapa-google {display:flex!important;}
.mapa-google .wp-block-image {margin: 4px 15px 0 0!important;}

/* FAQ */

.faq{
	min-height: 1150px;
	background-image: url(https://ogrodymalowaneswiatlem.pl/wp-content/uploads/faq-bg.png); 
	background-repeat:no-repeat;
	background-size: 101%!important;
	background-position: top center;
}

.faq h4, .faq p {text-align:center;}
.faq h4 {
	border-bottom:1px solid #fff; 		padding-bottom:15px;
	font-size:1.35rem;
}

.faq button {
	background: transparent!important
}

.accordion {
	background-color: #ffffff20;
  color: #fff!important;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 1rem;
  transition: 0.4s;
	margin:0 auto;
	position:relative;
}

.active, .accordion:hover {
  background-color: none;
}
.active h3{
	color: #88DEFC;
}

.accordion:after {
	position:absolute;
	bottom:25px;
      right: 20px;
      width: 15px;
      height: 15px;
      transition: all 0.3s ease;
  content: '\276F';
  color: #fff;
  font-weight: bold;
  margin-left: 5px;
  transform: rotate(90deg);
}

.active:after {
  content: "\276F";
  transform: rotate(-90deg);
}

.panel {
  padding: 0 18px;
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

@media only screen and (max-width: 755px) {
	h3 {font-size: 1.25em;}

	.site-header {align-items:center!important; row-gap: 15px!important; padding-top: 15px!important;}
	.site-logo .custom-logo {max-width: 300px;}
	.site-branding {margin-right: 0px;}

	#menu-top-left h2 {padding-top: 0px;}
	#menu-top-left img {max-width: 40px; max-height: 40px;}
	#menu-top-left a {margin: 0 15px;}
	#menu-top-left {display:flex; align-items:center; justify-content:center; display:-webkit-flex; -webkit-align-items:center; -webkit-justify-content:center; padding-left:0;}
	#menu-top-left {flex:1 1 100%;}
	#menu-top {flex:1 1 100%;}
	#menu-top div {margin:0;}
	#menu-button a {padding:4px 25px 4px!important;}

	.godziny, .faq, .onas{background-size:contain;	background-position: top center;}
	.atrakcja-box {margin-left:20px; margin-right:20px;}
	.atrakcja-container img {max-width: 350px;}
	.atrakcja-box h3 {font-size: 1.25em!important;}
	.atrakcja {margin: 30px;}
	.atrakcja-nav {top: 430px;}
	
	.tobilet {margin-top:0; text-align:center}
	.aktualnosci li:nth-of-type(1) h4, 	.aktualnosci li:nth-of-type(1) .wp-block-post-date {font-size:1.4em;}	
	.bilet1-bg {top:-125px; left:0;}
	.bilet2-bg {top:-125px;}
	.bilet3-bg {top:-125px; right:0;}
	
	#faq-container {max-width:80%;}
	.mapa .mapa-dojazdu {margin-top:0;}
	.bilet {margin:35px 25px!important;}

	.onas p, .onas h2 {padding:0 25px;}
	.onas h2 {text-align: center!important;}
	.godziny{margin-top: 0;}
	.atrakcja-nav{
		min-width: 85%;
		max-width: 85%;
		margin-right:0;
	} 
	.primary-navigation > .primary-menu-container {background-color:#59b7e3!important}
	.primary-navigation-open .menu-button-container  {background-color:transparent!important}
	.primary-navigation, .menu-button-container {position: inherit;}
	.menu-button-container {padding-top: 0!important; padding-bottom: 0!important; height:48px;}

	#footer-main {
		flex-direction: column;
	}
	#footer-left {
		margin-bottom: 50px;
		justify-content:center;
		align-items:center;
	}
	
}

@media only screen and (min-width: 482px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 850px);
	}
}
@media only screen and (min-width: 822px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 850px);
	}
}
@media only screen and (min-width: 1921px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1275px);
		--global--font-size-base: 1.5rem;
	}
	.onas, .godziny, .aktualnosci {
		background-size:cover;
	} 
	.mapa{
		min-height: 1080px;
		background-size:20%;
	}
	.onas{
		min-height: 1530px;
	}
	.godziny{
		min-height: 1372px;
	}	
	.aktualnosci{
		min-height: 935px;
	}
	.faq{
		min-height: 1673px;
	}
	.faq h4 {
		font-size:1.8rem;
	}
}
@media only screen and (min-width: 3000px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1600px);
		--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 2500px);
		--global--font-size-base: 2rem;
	}
	.onas, .godziny, .aktualnosci {
		background-size:cover;
	} 
	.mapa{
		min-height: 1392px;
		background-size:20%;
	}
	.onas{
		min-height: 2040px;
	}
	.godziny{
		min-height: 1830px;
	}	
	.aktualnosci{
		min-height: 1245px;
	}
	.faq{
		min-height: 2200px;
	}
	.faq h4 {
		font-size:2.5rem;
	}
}