/*
Theme Name: Szkolenia Dobra Energia
Version: 1.0
Description:
Author: Paweł Król
Author URI: https://pkrol.gorlice.pl/
*/

/* globalne */

* {
	box-sizing: border-box;
	font-family: 'Asap', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Alegreya SC', serif;
}

h2 {
	margin: 40px 0px 30px 0px;
	font-family: 'Alegreya SC', serif;
	font-size: 3rem;
}

h3 {
	margin: 40px 0px 20px 0px;
	font-family: 'Alegreya SC', serif;
	font-size: 2.4rem;
}

h4 {
	margin: 20px 0px 10px 0px;
	font-family: 'Alegreya SC', serif;
}

h3.has-text-align-center::before {
	display: block;
	margin-bottom: 24px;
	height: 16px;
	content: url('grafika/h3.png');
}

h3.has-text-align-center::after {
	display: block;
	width: 100px;
	height: 2px;
	margin: 2px auto 0px auto;
	content: "";
	background-color: #99cc99;
}

.alignfull {
	width: 100vw;
	position: relative;
	left: calc((-1 * (100vw - 100%) / 2) - 9px);
}

.wp-block-group__inner-container { /* ustawić tutaj wszystkie szerokości kontenera boostrap */
	margin: auto;
	width: 1170px;
}

/*
Extra small devices Phones (<768px) 	Small devices Tablets (≥768px) 	Medium devices Desktops (≥992px) 	Large devices Desktops (≥1200px)
Container width 	None (auto) 			750px 								970px 								1170px
*/

main {
	
}

main .container {
	padding: 75px 0px;
}

.wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}

.wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.breadcrumb {
	background-color: unset;
	margin-bottom: 30px;
	padding: 0px;
}

main p {
	line-height: 2;
}

main ul {
	margin: 30px 0px;
}

main ul li {
	margin-bottom: 10px;
}

/* klasy wordpress gutenberg */

.wp-block-columns {
	margin-bottom: 0px !important;
	padding: 20px 0px 40px 0px;
}

.wp-block-separator {
	border-top: 2px solid rgba(0,0,0,.1);
}

.wp-block-quote {
	padding: 8px 0px 8px 20px;
	border-left: 3px ridge #007cc3;
}

.wp-block-group__inner-container {
	max-width: 100%;
}

/* nagłówek strona główna */

.klisza {
	padding: 4px 0px;
	background-color: black;
}

.klisza-zewnetrzna {
	height: 30px;
	padding-top: 2px;
	background-image: url("grafika/klisza.png");
	background-repeat: repeat-x;
	background-color: black;
}

.kafelek-klisza {
	padding: 4px 15px !important;
	background-color: black;
}

.kafelek-klisza img {
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.kafelek {
	height: 500px;
}

.kafelek img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

header {
	
}

.naglowek {
	position: absolute;
	font-weight: 10;
	color: white;
	z-index: 10;
}

.naglowek h2 {
	
}

.naglowek h3 {
	
}

.overlay {
	position: absolute;
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 2;
}

.motto {
	text-align: center;
}

.widget-kontakt-naglowek {
	padding: 20px;
}

.przycisk-start {
	display: block;
	margin: 20px auto 60px auto;
	padding: 20px 50px 20px 50px;
	color: white;
	background-color: rgba(0,0,0,.8);
	font-size: 3rem;
	text-align: center;
	border: none;
}

/* nagłówek podstrona */

.naglowek-podstrona {
	background-color: rgba(0,0,0,0.7);
	color: white;
}

.naglowek-podstrona h2 {
	font-size: 2.4rem;
}

.naglowek-podstrona h3 {
	font-size: 1.5rem;
}

/* slider */

.swiper-container {
	height: 100vh;
}

.swiper-container .swiper-slide img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* logo */

.logo {
	width: 100%;
	height: 250px;
	margin: 0px auto;
	padding: 20px;
}

.logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* nawigacja */

nav.nav-main {
	text-transform: uppercase;
	margin-bottom: 50px;
}

nav.nav-main .menu-item:first-child {
	display: none;
}

nav.nav-main-podstrona {
	background-color: #007cc3;
}

.menu-glowne-container ul {
	padding: 0;
}

.menu {
	text-align: center;
	margin: 0px;
}

.menu-item {
	display: inline-block;
}

.menu-item a {
	display: block;
	margin: 4px 0px 0px 0px;
	padding: 10px 22px;
	color: white;
	border-bottom: 4px solid transparent;
}

.menu-item a:hover {
	text-decoration: none;
	transition: 0.4s;
	color: white;
	border-color: white;
}

footer .menu-item {
	display: block;
	width: max-content;
	margin: auto;
}

/* stopka */

footer {
	width: 100%;
	background-color: #007cc3;
	color: white;
	padding: 16px 20px;
}

footer h4 {
	text-align: center;
}

/* widok dla telefonów */

@media (max-width: 991px) {
	
	.kafelek-klisza:nth-child(-n+3) {
		display: none;
	}
	
}

@media (max-width: 768px) {
	
	.menu {
		padding: 0px;
	}
	
	.menu-item {
		display: block;
	}
	
}