#cms-gutenberg {display: none}

.wrap {
	width: 100%;
	position: relative;
	box-sizing: border-box;	
	padding: 150px 150px;
}
.wrap.no-bottom {padding-bottom: 0}

.iwrap {
	width: 100%;
	position: relative;
	margin: 0 auto;
}
.iwrap-small {max-width: 1200px}

.bc-ecru {background-color: #F9F7F3}

.bc-darkecru {background-color: #efebe4}

.bc-red {
	background-color: #f04b4b;
	color: #f8f7f3;
}
.bc-red a {color: #f8f7f3}

.has-niebieski-color {color: #1a5c9c}
.has-zielony-color {color: #54a76f}
/*.has-pomarancz-color {color: #eda85d}*/
.has-pomaranczowy-color {color: #eda85d}
.has-czerwony-color {color: #f04b4b}
.has-rozowy-color {color: #eba7c4}

strong {font-weight: 800}

em {font-style: italic}

h1, h2 {
	font-family: 'Baloo 2', cursive;
	font-size: 48px;
	line-height: 64px;
	font-weight: 600;
	margin-bottom: 50px;
}

.wrap-orange h2, .wrap-orange h3 {color: #eda85d}
.wrap-red h2, .wrap-red h3 {color: #f04b4b}
.wrap-pink h2, .wrap-pink h3 {color: #eba7c4}
.wrap-blue h2, .wrap-blue h3 {color: #1a5c9c}
.wrap-green h2, .wrap-green h3 {color: #54a76f}

h3 {
	font-family: 'Baloo 2', cursive;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	margin-bottom: 20px;
}

.box-link {
	display: inline-block;
	padding: 17px 40px;
	border-radius: 25px;
	color: #F9F7F3;
	letter-spacing: 2px;
	word-spacing: 2px;
	font-weight: 900;
	font-size: 15px;
	line-height: 17px;
	margin-top: 50px;
	transition: background 0.15s;
	background: #f04b4b
}
.box-link:hover {background: #A8A39A !important}
.wrap-orange .box-link {background: #eda85d}
.wrap-red .box-link {background: #f04b4b}
.wrap-pink .box-link {background: #eba7c4}
.wrap-blue .box-link {background: #1a5c9c}

.opacity-hover a {transition: opacity 0.15s;}
.opacity-hover a:hover {opacity: 0.6}

.blue-hover a {
	color: #1a5c9c;
	transition: color 0.15s;
}
.blue-hover a:hover {color: #454545}

#footer-waves {
	display: block;
	width: 100%;
	margin-bottom: -2px;
}

#footer-waves img {
	display: block;
	width: 100%;
}

#footer {
	padding-top: 0px;
	padding-bottom: 100px;
}

#footer ul {
	list-style: none;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 2px;
	word-spacing: 2px;
	margin-bottom: -15px;
}

#footer li {
	margin-bottom: 15px;
	line-height: 24px;
}

body.home #footer h3 {color: #f04b4b}
body.page-template-strona-kontakt #footer h3 {color: #eba7c4}
body.page-template-strona-poznaj_nas #footer h3 {color: #eda85d}
body.single-bloomzespol #footer h3 {color: #eda85d}
body.page-template-strona-konsultacje #footer h3 {color: #54a76f}
body.page-template-strona-zajecia #footer h3 {color: #1a5c9c}
body.single-bloomoferta #footer h3 {color: #54a76f}
body.single-bloomoferta.zajecia-grupowe #footer h3 {color: #1a5c9c}
body.page-template-strona-cennik #footer h3 {color: #eda85d}

#footer .iwrap {
	display: flex;
	flex-wrap: wrap;
}

#footer .iwrap > figure {
	width: 35%;
	box-sizing: border-box;
	padding-right: 100px;
}

#footer .iwrap > figure > img {
	display: block;
	width: 100%;
	max-width: 200px;
}

#footer .iwrap > nav {
	width: 30%;
	box-sizing: border-box;
	padding-right: 50px;
	text-align: left;
}

#footer .iwrap > div {
	width: 35%;
	box-sizing: border-box;
	text-align: left;
	position: relative;
}

#footer .socials {
	position: absolute;
	bottom: -10px;
	left: -10px;
}

#copyright {
	padding-top: 20px;
	color: #f8f7f3;
}
body.home #copyright {background-color: #f04b4b}
body.page-template-strona-kontakt #copyright {background-color: #eba7c4}
body.page-template-strona-poznaj_nas #copyright {background-color: #eda85d}
body.single-bloomzespol #copyright {background-color: #eda85d}
body.page-template-strona-konsultacje #copyright {background-color: #54a76f}
body.page-template-strona-zajecia #copyright {background-color: #1a5c9c}
body.single-bloomoferta #copyright {background-color: #54a76f}
body.single-bloomoferta.zajecia-grupowe #copyright {background-color: #1a5c9c}
body.page-template-strona-cennik #copyright {background-color: #eda85d}

#copyright > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#copyright span {display: block}

#copyright a {color: #f8f7f3}

#scroll-top {
	position: fixed;
	z-index: 90;
	bottom: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-image: url('../img/scroll-top.png');
	background-size: 100%;
	display: none;
	transition: background-color 0.15s;
}
#scroll-top:hover {background-color: #A8A39A !important}
body.home #scroll-top {background-color: #f04b4b}
body.page-template-strona-kontakt #scroll-top {background-color: #eba7c4}
body.page-template-strona-poznaj_nas #scroll-top {background-color: #eda85d}
body.single-bloomzespol #scroll-top {background-color: #eda85d}
body.page-template-strona-konsultacje #scroll-top {background-color: #54a76f}
body.page-template-strona-zajecia #scroll-top {background-color: #1a5c9c}
body.single-bloomoferta #scroll-top {background-color: #54a76f}
body.single-bloomoferta.zajecia-grupowe #scroll-top {background-color: #1a5c9c}
body.page-template-strona-cennik #scroll-top {background-color: #eda85d}

.wp-block-spacer {height: 30px !important}

#ciasteczka-info {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 200;
	padding: 32px 50px;
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	line-height: 16px;
	color: #F9F7F3;
}
body.home #ciasteczka-info {background: #f04b4b}

#ciasteczka-info a {color: #F9F7F3}

#ciasteczka-info > div {
	position: relative;
	display: inline-block;
}

#ciasteczka-akcept {
	position: absolute;
	display: table;
	top: -15px;
	right: -25px;
	padding: 5px;
	font-size: 14px;
}

.socials a {
	width: 30px;
	display: inline-block;
	margin: 0 10px;
}

.socials a img {
	display: block;
	width: 100%;
}

#menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 120px;
	box-sizing: border-box;
}

#menu-home-link {
	display: block;
	height: 90px;
	position: absolute;
	top: 10px;
	left: 50px;
}

#menu-home-link img {
	display: block;
	height: 100%;
}

#menu .socials {
	position: absolute;
	top: 45px;
	right: 180px;
}

#hamburger {
	opacity: 1 !important;
	display: block;
	width: 120px;
	height: 120px;	
	position: absolute;
	top: 0;
	right: 0;
}
body.home #hamburger {background: #f04b4b}
body.page-template-strona-kontakt #hamburger {background: #eba7c4}
body.page-template-strona-poznaj_nas #hamburger {background-color: #eda85d}
body.single-bloomzespol #hamburger {background-color: #eda85d}
body.page-template-strona-konsultacje #hamburger {background-color: #54a76f}
body.page-template-strona-zajecia #hamburger {background-color: #1a5c9c}
body.single-bloomoferta #hamburger {background-color: #54a76f}
body.single-bloomoferta.zajecia-grupowe #hamburger {background-color: #1a5c9c}
body.page-template-strona-cennik #hamburger {background-color: #eda85d}

#hamburger span {
	display: block;
	width: 60px;
	height: 7px;
	background: #F9F7F3;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transition: all 0.25s;
}
#hamburger span:first-of-type {top: 30px}
#hamburger span:last-of-type {bottom: 30px}

#hamburger:hover span:first-of-type {top: 0}
#hamburger:hover span:last-of-type {bottom: 0}

#hamburger.clicked span:first-of-type {
	top: 0 !important;
	transform: rotate(45deg);
}
#hamburger.clicked span:last-of-type {
	bottom: 0 !important;
	transform: rotate(-45deg);
}

#menu-under {
	display: block;
	width: 100%;
	height: 120px;
}

#menu-cont {
	position: fixed;
	z-index: 99;
	top: calc(var(--vh, 1vh) * -100);
	left: 0;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100 - 119px);
	display: flex;
	flex-wrap: wrap;
}

#menu-cont > figure {
	width: 60%;
	height: 100%;
	background-image: url(../img/menu-bg.jpg);
	background-size: cover;
	background-position: center;
}

#menu-cont > nav {
	width: 40%;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
body.home #menu-cont > nav {background: #f04b4b}
body.page-template-strona-kontakt #menu-cont > nav {background: #eba7c4}
body.page-template-strona-poznaj_nas #menu-cont > nav {background-color: #eda85d}
body.single-bloomzespol #menu-cont > nav {background-color: #eda85d}
body.page-template-strona-konsultacje #menu-cont > nav {background-color: #54a76f}
body.page-template-strona-zajecia #menu-cont > nav {background-color: #1a5c9c}
body.single-bloomoferta #menu-cont > nav {background-color: #54a76f}
body.single-bloomoferta.zajecia-grupowe #menu-cont > nav {background-color: #1a5c9c}
body.page-template-strona-cennik #menu-cont > nav {background-color: #eda85d}

#menu-menu {
	padding-left: 100px;
	padding-right: 50px;
	text-align: left;
	list-style: none;
	margin-bottom: -30px;
}

#menu-menu li {
	padding-left: 25px;
	margin-bottom: 20px;
	background-image: url(../img/menu-dot.svg);
	background-size: 8px;
	background-position: 0px 11px;
	background-repeat: no-repeat;
	position: relative;
}

#menu-menu li > span {
	display: block;
	position: absolute;
	bottom: -5px;
	left: -100px;
	width: calc(100% + 100px);
	height: 2px;
	background: #F9F7F3;
}

#menu-menu a {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
	color: #F9F7F3;
	text-transform: uppercase;
	letter-spacing: 2px;
	word-spacing: 2px;
}

#menu-kontakt {
	list-style: none;
	position: absolute;
	bottom: 50px;
	left: 100px;
	text-align: left;
	color: #F9F7F3;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 1px;
	word-spacing: 1px;
	margin-bottom: -15px
}

#menu-kontakt ul {list-style: none}

#menu-kontakt li {
	margin-bottom: 15px;
	position: relative;
}

#menu-kontakt a {color: #F9F7F3}



/*GRID: 1440px */
@media all and (max-width: 1440px) {
	
.wrap {padding: 100px 100px}

.iwrap-small {max-width: 1000px}	
	
h1, h2 {
	font-size: 38px;
	line-height: 44px;
	margin-bottom: 40px;
}

h3 {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 20px;
}

.box-link {margin-top: 40px}

#scroll-top {
	width: 60px;
	height: 60px;
}

.socials a {
    width: 26px;
    margin: 0 8px;
}

#footer .socials {left: -8px}

#menu, #menu-under {height: 90px}

#menu-home-link {
	height: 70px;
	top: 8px;
}

#menu .socials {
	top: 32px;
	right: 130px;
}

#hamburger {
	width: 90px;
	height: 90px;	
}

#hamburger span {
	width: 50px;
	height: 6px;
}
#hamburger span:first-of-type {top: 25px}
#hamburger span:last-of-type {bottom: 25px}

#menu-cont {height: calc(var(--vh, 1vh) * 100 - 89px)}

#menu-menu a {
    font-size: 24px;
    line-height: 28px;
}

#menu-kontakt {bottom: 50px}
	
	
}



/*GRID: 1280px */
@media all and (max-width: 1280px) {
	
#menu-menu li {margin-bottom: 15px}	

#menu-menu a {
    font-size: 24px;
    line-height: 28px;
}

#menu-kontakt {bottom: 30px}
	
}



/*GRID: 1024px */
@media all and (max-width: 1024px) {
	
.wrap {padding: 100px 50px}	
	
h1, h2 {
	font-size: 32px;
	line-height: 38px;
	margin-bottom: 30px;
}

h3 {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 10px;
}

.box-link {
    padding: 15px 30px;
    border-radius: 23px;
    font-size: 14px;
    line-height: 16px;
    margin-top: 30px;
}

#footer .iwrap > figure {
	width: 30%;
	padding-right: 50px;
}

#footer .iwrap > figure > img {max-width: 140px}

#footer .iwrap > nav {
    width: 30%;
    padding-right: 30px;
}

#footer .iwrap > div {width: 40%}

#footer ul {
    letter-spacing: 1px;
    word-spacing: 1px;
    margin-bottom: -10px;
}

#footer li {
	margin-bottom: 10px;
	line-height: 20px;
}

#menu, #menu-under {height: 70px}

#menu-home-link {
    height: 50px;
    top: 10px;
}

#menu .socials {
    top: 22px;
    right: 100px;
}

#hamburger {
    width: 70px;
    height: 70px;
}

#hamburger span {
    width: 40px;
    height: 5px;
}

#hamburger span:first-of-type {top: 20px}
#hamburger span:last-of-type {bottom: 20px}

#menu-cont {height: calc(var(--vh, 1vh) * 100 - 69px)}

#menu-menu {
    padding-left: 50px;
    padding-right: 25px;
}

#menu-menu li {
    padding-left: 20px;
    margin-bottom: 15px;
    background-size: 6px;
    background-position: 0px 10px;
}

#menu-menu li > span {
    left: -50px;
    width: calc(100% + 50px);
}

#menu-menu a {
    font-size: 20px;
    line-height: 24px;
}

#menu-cont > figure {width: 50%}

#menu-cont > nav {width: 50%}

#menu-kontakt {
    bottom: 2vh;
    left: 50px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: -10px;
}

#menu-kontakt li {margin-bottom: 5px}
	
}



/*GRID: 768px */
@media all and (max-width: 768px) {
	
body.home #scroll-top {background-color: #f04b4b !important}	
	
.wrap-orange .box-link {background: #eda85d !important}
.wrap-red .box-link {background: #f04b4b !important}
.wrap-pink .box-link {background: #eba7c4 !important}
.wrap-blue .box-link {background: #1a5c9c !important}

.opacity-hover a {opacity: 1 !important}
.blue-hover a {color: #1a5c9c !important}

#hamburger span:first-of-type {top: 20px !important}
#hamburger span:last-of-type {bottom: 20px !important}
	
.socials a {
    width: 22px;
    margin: 0 7px;
}	
	
#footer .iwrap > figure {
    width: 100%;
    padding-right: 0;
	margin-bottom: 50px;
}	

#footer .iwrap > figure > img {
    max-width: 150px;
	position: relative;
	margin: 0 auto;
}

#footer .iwrap > nav {
    width: 50%;
    padding-right: 50px;
}

#footer .iwrap > div {width: 50%}

#footer .socials {left: -7px}

#menu-cont > figure {
    width: 100%;
	height: 45%;
}

#menu-cont > nav {
    width: 100%;
	height: 55%;
}

#menu-cont > nav {
	justify-content: center;
	align-items: flex-start;
}

#menu-menu {
    padding-left: 0;
    padding-right: 0;
	padding-top: 50px;
	margin-bottom: 0;
}

#menu-menu li {margin-bottom: 15px}

#menu-menu li > span {left: -25px}

#menu-kontakt {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: center;
    bottom: 20px;
    left: 0;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: -10px;
}

body.body-horizontal #menu, body.body-horizontal #menu-under {height: 70px}

body.body-horizontal #menu-home-link {
    height: 50px;
    top: 8px;
}	
	
body.body-horizontal #menu .socials {display: none}	

body.body-horizontal #menu-cont {height: calc(var(--vh, 1vh) * 100 - 69px)}

body.body-horizontal #menu-cont > figure {display: none}

body.body-horizontal #menu-cont > nav {height: 100%}

body.body-horizontal #menu-kontakt {display: none}

body.body-horizontal #menu-menu {margin-bottom: -10px}

body.body-horizontal #menu-menu li {margin-bottom: 10px}

body.body-horizontal #menu-menu li > span {bottom: -2px}
	
}


/*GRID: 568px */
@media all and (max-width: 568px) {	
	
.wrap {padding: 50px 20px}	

.wp-block-spacer {height: 20px !important}

#scroll-top {
    width: 50px;
    height: 50px;
}

#footer {padding-bottom: 50px}

#footer .iwrap > nav {
    width: 100%;
    padding-right: 0;
	margin-bottom: 20px;
	text-align: center;
}

#footer .iwrap > div {width: 100%}

#footer .iwrap > div h3, #footer .iwrap > div ul {display: none}

#footer .socials {
	position: relative;
	text-align: center;
	left: 0;
}

#copyright > div {
	display: block;
	text-align: center;
}	
	
#menu .socials {display: none}	

#ciasteczka-info {
    padding: 20px 30px;
}
	
}




/*GRID: 440px */
@media all and (max-width: 440px) {
	
.wrap {padding: 40px 15px}

h1, h2 {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 15px;
}

.box-link {
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 15px;
    margin-top: 20px;
}

#scroll-top {
    width: 40px;
    height: 40px;
}

#menu, #menu-under {height: 50px}

#menu-home-link {
    height: 40px;
    top: 4px;
}

#hamburger {
    width: 50px;
    height: 50px;
}

#hamburger span {
	width: 30px;
	height: 4px;
}
#hamburger span:first-of-type {top: 15px !important}
#hamburger span:last-of-type {bottom: 15px !important}

#menu-menu {padding-top: 0}

#menu-cont {height: calc(var(--vh, 1vh) * 100 - 49px)}

#menu-cont > figure {display: none}

#menu-cont > nav {
	height: 100%;
	align-items: center;
}

#menu-kontakt {bottom: 20px}
	
}