:root {
    --bg-color: #F8F8F8;				/* Kolor tla */
    --zst-green-color: #009241; 		/* Zielony kolor szkoly */
    --grey-border-color: #D9D9D9; 		/* Szary kolor obramowan */
    --article-green-color: #046F34;		/* Zielony kolor artykulow */
    --article-grey-color: #959595;		/* Szary kolor artykulu */
    --article-additional-color: #1F1716;/* Kolor do dodatykowych informacji (czytaj wiecej, data) */
    --footer-color: #575757;			/* Kolor stopki */
}

/*ZIELONY KOLOR ODNOŚNIKÓW */
a, a:hover
{
	color: #009241; /* FOR IE */
	color: var(--zst-green-color);
}

body, html
{
	background-color: #F8F8F8; /* FOR IE */
	background-color: var(--bg-color);
}

/* ------------------ NAVBAR -------------------- */

.navbar-social-box{
	background-color: white;
	border-radius: 32px 0px 0px 0px;
	padding: 10px 24px 10px 24px;
}


/* kolor navbara */
.uk-navbar-container
{
	background-color: white!important;
}

/* srodkowa czesc navbara - odnosniki kolor po najechaniu */
.uk-navbar-center>.uk-navbar-nav>li>a:hover
{
	color: lightgrey;
}


/* szerokosc navbara */
.uk-navbar, .uk-navbar-center-left ul, .uk-navbar-center-right ul, .uk-navbar-nav>li>a{
	height: 42px;
}

/*poprawia odnosniki by pasowały do navbara */
.uk-navbar-nav>li>a
{
	display: inline;
	padding: 10px!important;
}

/* styl-tekstu navbara po bokach */
.uk-navbar-center-left ul a, .uk-navbar-center-right ul a{
	color: #1F1716; /*FOR IE*/
	color: var(--article-additional-color);
	font-size: 0.75rem;
	padding: 0 10px;
}

/* styl-tekstu navbara po srodku */
.uk-navbar-center>ul a{
	color: white;
}

/* kolor srodkowej czesci navbara */
.uk-navbar-center{
	background-color: #009241; /*FOR IE*/
	background-color: var(--zst-green-color);
	border-radius: 16px;
}

/*
.uk-navbar-left button{
	border: solid white 4px;
	border-radius: 15px 15px 0 0;
}
*/

.uk-navbar-left button{
	border: solid 2px;
	width: 35px;
	height: 35px;
}


/* Zapobiega blednemu wyswietlaniu sie rozwijanej listy w navbarze */
.uk-navbar-dropdown-nav{
	height: auto!important;
}

/* ------------------ BANNER -------------------- */

/*wysokosc bannera*/
#banner
{
	height: 725px;
	color: white;
}

#banner-content{
	font-size: 2.0625rem;
}


/* ------------------ CERTYFIKATY -------------------- */

/*wysokosc certyfikatow*/
#certyfikaty img{
	height: 80px;
	width: auto;
}

/*kolor obramowania i przesuniecie na banner*/
#certyfikaty{
	background-color: rgba(255,255,255,0.5);
}



/* --------------------------- ARTYKUŁY ---------------------- */

/* kolory dla pudełek */
.zst-white-box{
	background-color: white;
	border: 2px solid #D9D9D9; /* FOR IE */
	border: 2px solid var(--grey-border-color);
}

/* styl dla katgorii artykulu*/
.zst-category{
	width: 50px;
	height: 50px;
	margin-left: -25px; 
	margin-top: 20px; 
	position: absolute; 
	font-size: 30px; 
	color: #046F34; /* FOR IE */
	color: var(--article-green-color);
}

/* dodatkowe miejsce po lewej */
.zst-article{
	padding-left: 30px;
}

/* tytul */
.zst-title{
	font-size: 1.3125rem;
	color: #046F34; /*FOR IE*/
	color: var(--article-green-color);
    line-height: 1.2;
}

/* tekst artykulu */
.zst-article-text{
	color: #959595; /*FOR IE*/
	color: var(--article-grey-color);
	font-size: 0.875rem;
}

/* kolor dla dat i czytaj wiecej*/
.zst-article-additional
{
	color: var(--article-aditional-color);
}
.zst-article-additional img
{
	border: 1px solid #D9D9D9; /* FOR IE */
	border: 1px solid var(--grey-border-color);
}

.zst-green{
	color: #009241; /* FOR IE */
	color: var(--article-green-color);
}

.zst-article-tag
{
	font-style: italic;
	padding: 8px;
	font-size: 0.875rem;
	border: 1px solid #D9D9D9; /* FOR IE */
	border: 1px solid var(--grey-border-color);
}
.zst-hr-article{
	border: 2px solid var(--article-green-color);
	width: 80px;
	margin-bottom: 10px;
}

/* POPRAWNE SKALOWANIE OBRAZKÓW */
div#srodkowy-panel img{
	max-width: 100%;
	height: auto!important;
}

/* FIX DLA EDGE'A */
:only-child.uk-navbar-center, .uk-navbar-left, .uk-navbar-right{
	flex-wrap: nowrap;
}


/* --------------------------- STOPKA ---------------------- */

#footer{
	background-color: #575757; /*FOR IE*/
	background-color: var(--footer-color);
	color: white;
}



/* FIX NA INTERNET EXPLORER */
@media all and (-ms-high-contrast:none)
 {
 #ie-fix { height: 100% } /* IE10 */
 *::-ms-backdrop, #ie-fix { height: 100%} /* IE11 */
 }

@media only screen and (max-width: 1200px)
{
	/* logo tygla - wymiary */
	.uk-logo>img{
		width: 80px;
		margin-top: 25px;
	}
}

@media only screen and (max-width: 850px)
{
	/* skalowanie sie certyfikatów do ekranu */
	#certyfikaty{
		width: 90%;
	}
}


@media only screen and (max-width: 639px)
{
	/* logo tygla - wymiary */
	.uk-logo>img{
		width: 150px;
	}
	.uk-navbar, .uk-navbar-center-left ul, .uk-navbar-center-right ul{
	height: inherit;
	}

	/* kolor srodkowej czesci navbara */
	.uk-navbar-center{
	background-color: transparent;
	border-radius: 0px;
	}

	/* kolor navbara */
	.uk-navbar-container
	{
		background-color: #009241!important; /* FOR IE */
		background-color: var(--zst-green-color)!important;
	}

	#banner-content{
		font-size: 5.5vw;
	}
	#banner{
		height: 440px;
	}

	/* poprawia ułożenie boxów na mobile*/
	#lewy-panel, #prawy-panel{
		padding: 10px;
	}

}

.a11y-buttons .contrast-default {
  border-color: #D9D9D9;
  background-color: #F8F8F8;
  color: #959595;
  cursor: pointer;
}

.a11y-buttons .contrast-black {
  background-color: #222;
  color: white;
  cursor: pointer;
}

.a11y-buttons .contrast-yellow {
  border-color: yellow;
  color: yellow;
  background-color: #222;
  cursor: pointer;
}

.a11y-buttons .font {
  border-color: #D9D9D9;
  background-color: #F8F8F8;
  color: #1F1716;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
}

.a11y-buttons-nav .uk-button {
  width: 60px !important;
  padding: 0 5px !important;
}

.a11y-buttons-main .item {
  display: flex;
}

@media (min-width: 768px) {
  .a11y-buttons-main {
    display: flex;
  }

  .a11y-buttons-main .item + .item {
    margin-left: 5px;
  }
}