*, :after, :before 	{ box-sizing: border-box; font-family: 'Roboto', sans-serif; font-weight: 500;}
body, html 			{ height: 100%; width: 100%;}
body 				{ background-color: #000; }
* 					{ text-decoration: none }
*,
*:before,
*:after {margin: 0;padding: 0;}

header div nav a,
a#logo,
header div nav a span,
h3 span,
.main-text,
div.social-media a,
div#buttons,
.content_1 h3,
.content_2 h3,
.content_3 h3
{ -o-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;-webkit-transition:.2s;transition:.2s;}



header 					{ display: block; position: fixed; top: 0; width: 100%; background: #000; z-index: 99;}
header div 				{ padding: 0 0% 0 0;}

/*
span.header-image  			{ border: solid red; float: left; width: 40%; max-width: 669px; border: solid red; position: absolute; display: block;}
*/

span.header-image 				{ display: block; float: left; width: 40%; max-width: 539px; padding: 0 0 0 12%;
								  transition: all .2s ease-in-out;}
span.header-image:hover 		{ cursor: pointer; transform: scale(1.05);}
span.header-image img 			{ width: 100%; max-width: 100%; height: auto; margin: 0 0 15px 0;}

/*
span.header-image img { width: 100%; height: auto;
  transition: 0.30s;
  -webkit-transition: 0.30s;
  -moz-transition: 0.30s;
  -ms-transition: 0.30s;
  -o-transition: 0.30s;


  display: block;
  margin-right: auto;
  margin-left: auto;
}

span.header-image img:hover {
  transition: 0.30s;
  -webkit-transition: 0.30s;
  -moz-transition: 0.30s;
  -ms-transition: 0.30s;
  -o-transition: 0.30s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
} 
*/

header div a#logo 		{ display: block; float: left; color: #878787; padding: 0 0 0 0%; margin: 0 2% 0 3%; position: absolute;
						  width: 5%; max-width: 121px; height: auto;
						  transition: all .2s ease-in-out;}
header div a#logo:hover 	 	{ transform: scale(1.05);}

header div a#logo img 	{ border: none; width: 130%; height: auto; position: relative; top: -200px; display: block!important;}

header div nav 			{ display: block; float: left;
						  padding: 28px 0 0 11% }
header div nav a 		{ display: inline-block; color: #fff; line-height: 1.4em; font-size: 1.6em;
						  margin: 0 25px 0 25px;}

header div nav a#scroll-to-bialystok span   		{ border-bottom: solid 8px #6fc10f;}
header div nav a#scroll-to-bialystok:hover span   	{ border-bottom: solid 16px #6fc10f;}

header div nav a#scroll-to-rzeszow span				{ border-bottom: solid 8px #0935ff;}
header div nav a#scroll-to-rzeszow:hover span		{ border-bottom: solid 16px #0935ff;}
header div nav a#scroll-to-lublin span				{ border-bottom: solid 8px #b70000;}
header div nav a#scroll-to-lublin:hover span		{ border-bottom: solid 16px #b70000;}

header div nav a.contrast 					{ color: #fff200; }
header div nav a span.contrast 				{ border-bottom: solid 8px #fff200!important;}



div#buttons 							{ position: fixed; top: 20px; right: 20px; z-index: 999; text-align: right; height: 32px;}

button 									{ cursor: pointer }

button.toggle-contrast 					{ background: transparent; padding: 2px 6px 2px 3px; border: none!important; margin: 0 0 0 7px;}
button.toggle-contrast img 				{ width: 100%; height: auto; cursor: pointer}


button.text-change 						{  background: transparent; padding: 2px 3px; border: none!important;
										   width: 55px;}
button.text-change img 					{  width: 98%; height: auto;}

button.decrease img 					{ width: 70%; }




body, p, h1, h3, h3 {
	margin: 0;
	padding: 0;
}

/* default */
.container {-webkit-align-items: center;align-items: center;display: -webkit-flex;display: -ms-flexbox;display: flex;-ms-flex-align: center;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0;padding: 15px;position: relative;width: 100%;}
.container--big 	{ height: 175vh;}
.container--full 	{ height: 100vh;}
.container--footer  { height: 10vh; padding: 5vh 0 5vh 0;}
.container--small 	{ height: 25vh;}
.container .content { width: 100%;}
/*==========*/
span.header-image img,
p.link-box a img,
button img,
.social-media img 				{ display: none; }
span.header-image img.see,
p.link-box a img.see,
button img.see,
.social-media img.see 			{ display: block; }
/* ====================== */

.content_0							{ margin: 0 auto;}
.content_0 div.main-text 			{ display: block; margin: 0 auto;  width: 80%; max-width: 750px; height: auto; /*padding: 90px 0 0 0!important;*/
									  position: relative; left: 25%; top: 65px;}
.content_0 div.main-text p 				{ line-height: 1.3em; font-size: 1.3em}
.content_0 div.main-text p#wk-text 		{ width: 72%; }
.content_0 div.main-text p#wk-text span	{ background: #fff; color: #000;
										  padding: 0px margin: 0 0 0 0;
									      line-height: 1.3em; font-size: 0.9em;
									      width: 72%;}

div.social-media 					{ text-align: center; padding: 0 0 6em 0;}
div.social-media a 					{ display: inline-block; margin: 0 2%;}
div.social-media a:hover 			{ transform: scale(1.1);}

div.social-media a img 					{ width: 98%; height: auto;}



/*
div.social-media-links 				{ clear: left;  padding: 30px 0 0 0; text-align: center; width: 100%;}
div.social-media-links a 			{ display: inline-block; color: #fff; line-height: 1.3em; font-size: 1.3em; padding: 2px 45px 2px 45px;}
div.social-media-links a.contrast 	{ color: #fff200;}
*/

/* ====================== */

.content_1 									{ }
.content_1 .show-block 						{ width: 25%; max-width: 439px; height: auto; max-height: 463px;}
.content_1 p.link-box 						{ width: 100%; max-width: 439px; height: auto; max-height: 463px; margin: 0!important;
											  position: relative;}

.content_1 p.link-box a 					{ display: block; overflow: hidden;
											  width: 100%; max-width: 439px; max-height: 463px;
											  transition: all .2s ease-in-out; transform: scale(0.92);}
.content_1 p.link-box a:hover 				{ transform: scale(1);}
.content_1 p.link-box a img 				{ width: 100%; max-width: 439px; position: relative;}

/* ====================== */


.content_2 									{ overflow: hidden;}
.content_2 .show-block 						{ width: 25%; max-width: 465px; height: auto; max-height: 462px;}
.content_2 p.link-box 						{ width: 100%; max-width: 465px; height: auto; max-height: 462px; margin: 0!important;
											  position: relative;}

.content_2 p.link-box a 					{ display: block; overflow: hidden;
											  width: 100%; max-width: 465px; max-height: 462px;
											  transition: all .2s ease-in-out;transform: scale(0.92);}
.content_2 p.link-box a:hover 				{ transform: scale(1);}
.content_2 p.link-box a img 				{ width: 100%; max-width: 465px; position: relative;}



/* ====================== */


.content_3 									{ }
.content_3 .show-block 						{ width: 25%; max-width: 435px; height: auto; max-height: 489px;}
.content_3 p.link-box 						{ width: 100%; max-width: 435px; height: auto; max-height: 489px; margin: 0!important;
											  position: relative;}

.content_3 p.link-box a 					{ display: block; overflow: hidden;
											  width: 100%; max-width: 435px; max-height: 489px;
											  transition: all .2s ease-in-out;transform: scale(0.92);}
.content_3 p.link-box a:hover 				{ transform: scale(1);}
.content_3 p.link-box a img 				{ width: 100%; max-width: 435px; position: relative;}







/* ====================== */


h1 						{ color: #fff; line-height: 1.2em; font-size: 2.4em; font-weight: 900;
						  text-transform: uppercase;
						  position: relative; top: -5px;}

h1 span 				{ vertical-align: top}
h1 em 					{ font-style: normal; line-height: 1.2em; font-size: 1.4em; font-weight: 900;vertical-align: top;}


h1 span 				{ }

h1 span.first-line 				{ vertical-align: bottom}
h1 span.first-line em  			{ position: relative; top: 0.13em;}



h1 span.second-line 				{ vertical-align: top;position: relative; right: 120px; top: 20px;
									  padding: 20px 0 0 67px;
									  background-image: url(../img/graphs/bg-h1.png); background-repeat: no-repeat; background-position: 0px 0px}
h1 span.second-line em  			{ position: relative; bottom: 0.13em;}


h2 						{ color: #fff; text-transform: uppercase;
						  line-height: 1.4em; font-size: 1.6em;
						  background-image: url(../img/graphs/bg-h2.png); background-repeat: no-repeat; background-position: 95px 5px;}

h2 span 				{ background: #fff; color: #000; padding: 2px 5px;}
p#intro  			 	{ margin: 14px 0 15px 0;}
p#intro span 			{ background: #fff; color: #000; line-height: 1.2em; font-size: 1.2em;}


.main-text p span			{ line-height: 1em; font-size: 0.7em }


@media screen and (max-width: 880px) {


h1 						{ line-height: 1.2em; font-size: 1.6em; position: relative; top: -15px;}
h1 em 					{}
h1 span 				{}

h1 span.first-line 		{}
h1 span.first-line em  	{}

h1 span.second-line 	{}
h1 span.second-line em  {}

/* ============= */

h2 						{ line-height: 1.4em; font-size: 1.2em; background-position: 75px 0px;}
h2 span 				{ padding: 1px 5px;}

/* ============= */

p#intro  			 	{ margin: 9px 0 9px 0;}
p#intro span 			{ line-height: 1.2em; font-size: 0.8em;}
.main-text p span			{ line-height: 0.6em!important; font-size: 0.6em!important; margin: 0!important; }


}

@media screen and (max-width: 680px) {




h1 						{ line-height: 1em; font-size: 1.2em; position: relative; top: -15px;}
h1 em 					{}
h1 span 				{}





h1 span.first-line 		{}
h1 span.first-line em  	{}

h1 span.second-line 				{ right: 90px; top: 20px; background-position: 0px 2px}



h1 span.second-line em  {}

/* ============= */

h2 						{ line-height: 1.4em; font-size: 1.2em; background-position: 75px 0px;}
h2 span 				{ padding: 1px 5px;}

/* ============= */

p#intro  			 	{ margin: 9px 0 9px 0;}
p#intro span 			{ line-height: 1.2em; font-size: 0.8em;}
.main-text p span			{ line-height: 0.6em!important; font-size: 0.6em!important; margin: 0!important; }


}



h3 						{ color: #fff; text-align: center; margin: 0 auto; padding: 0 0 0 0; width: 80%; max-width: 700px;
						  text-align: left;
						  position: relative; top: 150px;
						  font-size: 2.6em; line-height: 1.9em; }
h3 span 				{ font-weight: 900; }

@media screen and (max-width: 880px) {

.content_0 div.main-text 			{ top: 95px;}
h3 									{ width: 90%;
						  
						  			  position: relative; top: 150px;
						  			  font-size: 2.0em; line-height: 1.6em; }
h3 span 				{ }

}

@media screen and (max-width: 680px) {
	h3 			{font-size: 1.0em; line-height: 1.2em; }
}



h2,
p#intro,
.main-text p 	 {position: relative; left: 12px;}



h1.contrast,
h2.contrast								{ color: #fff200; font-weight: 900!important;}
h3.contrast								{ color: #000; }
h2.contrast span 						{ background: #fff200; color: #000; font-weight: 900!important;}


p#intro span.contrast,
.content_0 div.main-text p#wk-text span.contrast 		{ font-weight: 900; }


p#wk-text span,

p#intro span.contrast,
.content_0 div.main-text p#wk-text span.contrast,
.content_1 h3.contrast span,
.content_1 h3.contrast span.year,
.content_2 h3.contrast span,
.content_2 h3.contrast span.year,
.content_3 h3.contrast span,
.content_3 h3.contrast span.year 				{ background-color: #fff200;!important;}






.content_1 h3 span,
.content_2 h3 span,
.content_3 h3 span 				{ padding: 6px 10px 6px 10px; -webkit-box-shadow: 32px 33px 24px 1px rgba(0,0,0,0.41);
															  -moz-box-shadow: 32px 33px 24px 1px rgba(0,0,0,0.41);
															  box-shadow: 32px 33px 24px 1px rgba(0,0,0,0.41); }

.content_1 h3 span,
.content_1 h3 span.year 				{ background-color: #374d97;}
.content_2 h3 span,
.content_2 h3 span.year 				{ background-color: #e43251;}
.content_3 h3 span,
.content_3 h3 span.year 				{ background-color: #66b045;}


.content h3 span.year 		{ display: block; width: 154px; height: 65px; text-align: center; padding: 0 0 0 0; line-height: 1.6em;}







/* ====================== */


.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}
.parallax__container .parallax {
	/* can be put in a seperate class for better control */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* --------------------------- */
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
}



.bg0 {background-image: url("../img/graphs/body00.png");}
.bg1 {background-image: url("../img/graphs/body01.png");}
.bg2 {background-image: url("../img/graphs/body02.png");}
.bg3 {background-image: url("../img/graphs/body03.png");}









.arrow {
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
	bottom: -64px;
	bottom: -4rem;
	left: calc(50% - 19px);
	position: absolute;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: opacity 250ms ease-in-out;
	width: 38px;
}
.arrow--hide {
	opacity: 0;
}

/* ================================== */
div#photos-by 			{  text-align: right; color: #686868; line-height: 1em; font-size: 0.55em; width: 96%; margin: 0 auto; padding: 1em;
						   position: relative; bottom: 20px;}


div#logotypy 			{ width: 100%; margin: 0 auto; text-align: center;}

div#logotypy div 		{ position: relative; width: 100%!important;}

div#logotypy div img 			{ max-width: 100%;}











@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

.show-on-mobile--inline 		{ display: none;}

@media screen and (max-width: 480px) {
	.hide-on-mobile {
		display: none;
	}

	.show-on-mobile--inline {
		display: inline;
	}
}


@media screen and (max-width: 1400px) {
	header div nav 						{ padding: 28px 0 0 5% }
	header div nav a 					{ margin: 0 20px; }

	

}
@media screen and (max-width: 1100px) {
.content_0 div.main-text 			{ position: relative; left: 0; }
header div nav 						{ padding: 28px 0 0 3% }
header div nav a 		{ margin: 0 12px 0 12px; font-size: 1.2em;}

	.content_1 h3,
	.content_3 h3 			{ text-align: right; top: 50px;}
}

@media screen and (max-width: 980px) {
	header div nav 			{ display: block; float: left;padding: 28px 0 0 1%;}

}
@media screen and (max-width: 880px) {
	header div a#logo 		{ width: 8%;}
	header div a#logo img 	{ width: 118%;}
	div#buttons 			{  top: 5px; right: 5px;}	
}

@media screen and (max-width: 730px) {
	header div nav 			{ padding: 35px 0 0 0 }
	header div nav a		{ margin: 0 3px 0 3px; fon-size: 1em;}
	span.header-image 		{ width: 42%; position: relative; top: 6px;}
	header div a#logo 		{ width: 7%; }


.content_1,
.content_2,
.content_3									{ text-align: center; }
.content_1 .show-block,
.content_2 .show-block,
.content_3 .show-block 						{ width: 100%!important; height: auto; margin: 0 auto;}
.content_1 p.link-box,
.content_3 p.link-box 						{ width: 100%; height: auto; margin: 0!important; }

.content_1 h3,
.content_3 h3 								{ top: 5px; }


.content_2 h3 								{ top: 0px; }


}


@media screen and (max-width: 520px) {
	header div nav 				{ padding: 0 0 0 0; width: 100%; text-align: right;}


	}