@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext');

@media screen and (min-width: 0) {

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	html {
		scroll-behavior: smooth;
		overflow-x: hidden;
	}
	body {
		background-color: white;
		font-family: 'Lato', sans-serif;
		font-size: 16px;
		font-weight: 300;
		line-height: 1.25;
		color: #222;
		color: #151515;
		overflow-x: hidden;
		position: relative;
	}

	main {
		overflow: hidden;
	}

	h1, h2, h3 {
		font-size: inherit;
	}

	h3 {
		padding-top: 1.25em;
	}

	hr {
		border: none;
		border-top: 1px dashed red;
	}

	strong {
		color: red;
		font-weight: inherit;
	}

	ul {
		color: red;
		list-style-type: circle;
		margin-left: 1em;
	}
	li:not(:first-child) {
		margin-top: 0.5em;
	}
		li > span {
				color: #222;
		}

	/* BEGIN: SECTION LAYOUT */

	section {

		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 0 1.25em;
/* 		padding-top: 0.5em; */
	}
		section header {
/* 			border-top: 1px dashed red; */
			clear: both;
			padding-bottom: 1em;
			width: 100%;
		}
		section h3 > span {
			border-left: 1px solid red;
			border-right: 1px solid red;
			display: inline-block;
			font-weight: 300;
			font-family: 'Montserrat', sans-serif;
			margin-top: 1.25em;
			margin-bottom: 0.625em;
			text-transform: uppercase;
			padding: 0 1.25em;
		}
		section article {
			width: 100%;
		}
		section article {
			width: 100%;
		}
		section p {
			text-align: justify;
			padding-bottom: 1em;
/* 			clear: both; */
		}
		/*section p.signature {
			text-align: right;
		}*/
		section article div.contact-link {
			margin-top: 0.75em;
			margin-bottom: 1em;
			text-align: right;
		}
		section article div.contact-link > a {
			border-bottom: 1px dashed red;
			color: red;
			font-size: 0.875em;
			text-decoration: none;
			text-transform: uppercase;
		}

		article.hidden-text > div:nth-of-type(1) {
			cursor: pointer;
			position: relative;
		}
			article.hidden-text > div:nth-of-type(1) > div {
				background: no-repeat right 1.5em bottom 2.5em;
				background-size: 15%;
				bottom: 0;
/* 				filter: grayscale(50%); */
				opacity: 0.80;
				position: absolute;
				top: 0;
				transition: opacity 0.5s, filter 0.5s;
				width: 100%;
			}
			article.hidden-text > div:nth-of-type(1) > div:hover {
				filter: grayscale(0%);
				opacity: 1;
			}
			article.hidden-text > div:nth-of-type(1) > div.plus {
				background-image: url("images/plus.svg");
			}
			article.hidden-text > div:nth-of-type(1) > div.minus {
				background-image: url("images/minus.svg");
			}
			article.hidden-text > span {
				display: block;
				text-align: right;
			}
			article.hidden-text > span > span {
				border-bottom: 1px dashed red;
				color: red;
				cursor: pointer;
			}
			article.hidden-text > span > span:nth-of-type(2) {
				display: none;
			}
		article.hidden-text > div:nth-of-type(2) {
			max-height: 0;
			margin-top: 1.25em;
			transition: max-height 0.5s ease-in-out;
			overflow: hidden;
		}

		div.two-columns.center > div {
			align-items: center;
			display: flex;
			justify-content: center;

		}

	/* END: SECTION LAYOUT */

	/* BEGIN: SECTION HEADER */

		section > header {
			font-family: 'Montserrat', sans-serif;
/* 			padding-top: 6.25em; */
			padding-bottom: 2em;
			padding-top: 1.75em;
			text-transform: uppercase;
		}
			section > header > :first-child {
				border-bottom: 1px solid red;
			}
				section > header > :first-child > span {
					display: inline-block;
					font-size: 2.5em;
					font-weight: 100;
					margin-left: -0.0625em;
				}
			section > header > div {
				font-size: 0.875em;
				margin-top: 0.5625em;
			}
				section > header > div > span {
/* 					color: red; */
				}
				section > header > div > span > span {
					background-color: red;
					border-radius: 1.25em;
					display: inline-block;
					height: 1.125em;
					margin: 0 0.5em;
					margin-bottom: -0.125em;
					width: 1.125em;
				}

	/* END: SECTION HEADER */

	/* BEGIN: IMAGE */

		div.image {
			background: #b3b3b3 url("temporary/tit/tit.svg") no-repeat center;
			background-size: auto 70%;
			min-height: 10em;
			margin-bottom: 1em;
			width: 100%;

		}
	/* END: IMAGE */

	/* BEGIN: NAVIGATION */

	nav {
		bottom: 2.25em;
		display: flex;
		display: none;
		flex-direction: column;
		font-family: 'Montserrat', sans-serif;
		font-size: 0.875em;
		position: fixed;
		right: 1.25em;
		top: 2.25em;
		z-index: 10;
	}
		nav > * {
			text-align: right;
			text-transform: uppercase;
		}
			nav .link {
				align-items: center;
				cursor: pointer;
				display: flex;
				height: 2.25em;
			}
				nav a.link {
					color: inherit;
					outline: none;
					text-decoration: none;
				}
				nav a.link:visited {
					color: inherit;
				}
				nav .link > span.title {
					margin-right: 1em;
					margin-right: 0.35em;
					opacity: 0;
					transition: opacity 0.75s ease-out;
					width: 100%;
				}
				nav .link:hover > span.title,
				nav .link.current > span.title {
					opacity: 100;
				}
				nav .link > span.horizontal-stick {
					background-color: red;
					flex-grow: 0;
					flex-shrink: 0;
					height: 1px;
					margin-right: 0.5em;
					opacity: 0;
					transition: opacity 0.75s ease-out;
					width: 0.75em;
				}
				nav .link:hover > span.horizontal-stick,
				nav .link.current > span.horizontal-stick {
					opacity: 100;
				}
				nav .link > .vertical-stick {
					background-color: red;
					height: 2.25em;
					flex-grow: 0;
					flex-shrink: 0;
					margin-right: -0.625em;
					width: 1px;
				}
				.link > span.bullet {
					background-color: white;
					border: 1px solid;
					border-color: red;
					border-radius: 2em;
					flex-grow: 0;
					flex-shrink: 0;
					height: 1.25em;
					transition: background-color 0.75s ease-out;
					width: 1.25em;
				}
				.link:hover > span.bullet,
				.link.current > span.bullet {
					border-color: red;
					background-color: red;
				}
				nav .link > span.arrow {
					border: 0.6875em solid transparent;
					flex-grow: 0;
					flex-shrink: 0;
					height: 0;
					margin-left: -1.375em;
					width: 0;
				}

		#nav-top {
			opacity: 0;
			top: 2.5em;
			transition: opacity 0.75s ease-out;
			z-index: 11;
		}
			#nav-top > .link > span.vertical-stick {
				margin-top: -1em;
			}
			#nav-top > .link > span.arrow {
				border-bottom-color: red;
				margin-bottom: 4.625em;
			}

		#nav-middle {
			margin: auto 0;
		}
			#nav-middle > div {
				transform: rotate(90deg) translate(-5.75em,-4.75em);
				transform-origin: center;
			}
				#nav-middle > .link:nth-of-type(1) > span.vertical-stick {
				align-self: flex-end;
				height: 1em;
				height: 2.875em;
			}
			#nav-middle > .link:last-child > span.vertical-stick {
				align-self: flex-start;
				height: 1em;
			}

		#nav-bottom {
			opacity: 0;
			bottom: 2.5em;
			transition: opacity 0.75s ease-out;
		}
			#nav-bottom > .link > span.vertical-stick {
				margin-top: 1em;
			}
			#nav-bottom > .link > span.arrow {
				border-top-color: red;
				margin-top: 4.625em;
			}

	#nav-horizontal-button {
		background: #b3b3b3 url("images/menu.svg") no-repeat center;
		background-size: 54% auto;
		background-color: red;
		border-radius: 2.375em;
		cursor: pointer;
		display: inline-block;
		height: 2.375em;
		left: 1.25em;
		position: fixed;
		top: 1.25em;
		width: 2.375em;
		z-index: 8;
	}
	#nav-horizontal {
		background-color: red;
		border-radius: 0.5em;
		color: white;
		position: fixed;
		left: 4em;
		left: -10em;
		text-transform: uppercase;
		top: 4em;
		transition: left 0.15s ease-in-out;
		z-index: 8;
	}
	#nav-horizontal.visible {
		left: 4em;
	}

		#nav-horizontal > a {
			color: inherit;
			display: block;
			font-size: 0.875em;
			font-weight: 700;
			padding: 0.75em 1.25em;
/* 			padding-bottom: 1.5em; */
			text-decoration: none;
		}
		#nav-horizontal > a:first-child {
			padding-top: 1.25em;
		}
		#nav-horizontal > a:nth-of-type(6) {
/* 			display: none; */
			padding-bottom: 1.25em;
		}
		#nav-horizontal > a:last-child {
			display: none;
/* 			padding-bottom: 1.25em; */
		}
		#nav-horizontal > a.current > span,
		#nav-horizontal > a:hover > span {
			border-bottom: 1px solid white;
		}



	/* END: NAVIGATION */

	/* BEGIN: NEURON SECTION */


	#neuron {
/* 		border: 4px solid red; */
		align-items: center;
		align-content: center;
		display: flex;
		justify-content: center;
		min-height: 100vh;
		position: relative;
/* 		overflow: hidden; */
	}
	#neuron > header {
		width: auto;
		padding: 0;
	}
	#neuron > a {
		bottom: 1.5em;
		display: block;
		left: 1.5em;
		position: absolute;
/* 		width: 150px; */
	}
	#neuron > a > img {
		border: none;
/* 		width: 150px; */
		margin-bottom: 0;
	}

	div.presentation-img {
/* 		backface-visibility: visible; */
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 100%;
/* 		border: 1px solid black; */
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		will-change: transform;
		z-index: -1;
	}

	@keyframes presentation-img-1-anim {
		0% { transform: rotate(360deg) scale(1) translate(0,0) }
		50% { transform: rotate(180deg) scale(1.25) translate(-25vw,0) }
		100% { transform: rotate(0deg) scale(1) translate(0,0) }
	}
	@keyframes presentation-img-2-anim {
		0% { transform: rotate(0deg) scale(0.75) translate(15vw,0) }
		50% { transform: rotate(180deg) scale(1) translate(0,30vh) }
		100% { transform: rotate(360deg) scale(0.75) translate(15vw,0) }
	}

	.presentation-img.a {
		animation: presentation-img-1-anim 45s infinite linear;
		background-image: url("temporary/background/presentation-img-1-02.svg");
/* 		opacity: 0.15; */
	}

	.presentation-img.b {
		animation: presentation-img-2-anim 55s infinite linear;
		background-image: url("temporary/background/presentation-img-2-02.svg");
		background-position: left center;
/* 		opacity: 0.15; */
	}

	.presentation-img.c {
		animation: presentation-img-1-anim 30s infinite linear;
		background-image: url("temporary/background/presentation-img-3-02.svg");
		background-position: right center;
/* 		opacity: 0.15; */
	}

	/* END: NEURON SECTION */

	/* BEGIN: FORMS */

	form {
		font-weight: 300;
		margin-bottom: 1.25em;
		width: 100%;
	}
	input, textarea, button {
		width: 50%;
		background-color: transparent;
		border: 1px dashed red;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		font-weight: 400;
		padding: 1em;
		width: 100%;
	}
	input:focus, textarea:focus {
		border: 1px solid red;
		outline: none;
	}
	label {
		cursor: pointer;
	}
		label:hover > span {
			background-color: white;
			transition: background-color 0.75s ease-out;
		}
		label:hover > span {
			background-color: red;
			color: red;
		}
	label.checkbox:hover {
		color: red;
	}
		label.checkbox > span {
			background-color: white;
			border: 1px solid red;
			border-radius: 1.25em;
			display: inline-block;
			height: 1.25em;
			margin: 0 0.375em -0.25em 0;
			width: 1.25em;
		}
		label.checkbox.checked > span {
			background-color: red;
		}
	button {
		background-color: red;
		border: none;
		border-radius: 0.5em;
		color: white;
		cursor: pointer;
		font-weight: 700;
	}

		#job-form {
			display: grid;
			grid-gap: 1em;
			grid-template-columns: 6em 4.75em 4.75em 6em;
			grid-template-columns: auto 4.75em 4.75em auto;
/* 			grid-template-rows: 2em 1.25em 1.25em 1.25em 8em 3em; */
			grid-template-rows: 2em 1.25em 1.25em 1.25em 8em 3em 3em;
		}
			#job-form-email {
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 1;
			}
			#job-form-phone {
				grid-column-start: 3;
				grid-column-end: 5;
				grid-row-start: 1;
			}
			#job-form > label > input {
				display: none;
			}
			#job-form-work-a {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 2;
			}
			#job-form-work-b {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 3;
			}
			#job-form-work-c {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 4;
			}
			#job-form-message {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 5;
			}
			#job-form-cv {
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 6;
			}
			#job-form-cv {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 6;
			}
			#job-form-send {
				grid-column-start: 1;
				grid-column-end: 5;
				grid-row-start: 7;
			}

	#contact-form {
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 6em 4.75em 4.75em 6em;
		grid-template-columns: auto 4.75em 4.75em auto;
		grid-template-rows: 2em 10em auto 3em;
	}
		#contact-form-email {
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 1;
		}
		#contact-form-phone {
			grid-column-start: 3;
			grid-column-end: 5;
			grid-row-start: 1;
		}
		#contact-form-message {
			grid-column-start: 1;
			grid-column-end: 5;
			grid-row-start: 2;
		}
		#contact-form-confirmation {
			grid-column-start: 1;
			grid-column-end: 5;
			grid-row-start: 3;
		}

			#contact-form-confirmation > input {
				width: auto;
				margin-right: 0.5em;
			}

		#contact-form-send {
			grid-column-start: 1;
			grid-column-end: 5;
			grid-row-start: 4;
		}

	/* END: FORMS */


	#praca {
		padding-bottom: 4em;
	}
	#praca div.two-columns > div:last-child {
/* 		display: flex; */
/* 		flex-direction: column; */
	}
	#praca div.two-columns > div:last-child > article:last-child {
/* 		display: flex; */
/* 		justify-content: center; */
/* 		flex-direction: column; */
/* 		flex-grow: 2; */
/* 		margin-bottom: auto; */
/* 		padding: 1em; */
	}
	#praca div.two-columns > div:last-child > article:last-child > header > h3 {
/* 		padding-top: 0; */
	}
	#praca div > article:last-child > p {
			border: 1px dashed red;
			text-align: center;
			padding: 1.25em;
/* 			padding-bottom: 0; */
			margin-bottom: 1.25em;
	}
	#praca div.two-rows > article:last-child > p a {
		border-bottom: 1px dashed red;
		color: red;
		text-decoration: none;
	}

	div.img {
		border: 1px solid red;
		padding: 1.25em;
		margin-bottom: 1.25em;
	}
	img {
		border: 1px dashed red;
/* 		display: block; */
/* 		margin-bottom: 1.25em; */
/* 		border: 1px solid red; */
/* 		width: 50%; */
			width: 100%;
			margin-bottom: 1em;
/* 		float: left; */
/* 		margin-right: 1.25em; */
/* 		margin: 0 1.25em 0.375em 0; */
/* 		opacity: 0.9; */
/* 		padding: 1.25em; */
/* 		margin:  0 1.25em 1.25em 0; */
	}

	#contact-details {
		font-size: 1.125em;
	}
	#contact-details span {
		font-weight: 400;
	}

	#contact-form {
		margin-top: 2em;
	}
	#contact-details-2 {
		margin-top: 3em;
		font-size: 1.25em;
	}
	#contact-details-2 > span {
		font-weight: 400;
	}
	#contact-details-2 > span:first-child {
		font-weight: 300;
		font-family: 'Montserrat', sans-serif;
		font-size: 1.5em;
	}
}

#kontakt a {
	border-bottom: 1px dashed red;
	color: red;
	text-decoration: none;
}

@media screen and (min-width: 25em) {

	/* BEGIN: FORMS */

	#job-form {
		grid-template-rows: 2em 1.25em 1.25em 1.25em 8em 3em;
	}
	#job-form-cv {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 6;
	}
	#job-form-send {
		grid-column-start: 3;
		grid-column-end: 5;
		grid-row-start: 6;
	}
	#contact-form-send {
		grid-column-start: 3;
	}

	/* END: FORMS */


	/* BEGIN: WORDL MAP */

	#slady {
		align-items: center;
		justify-content: center;
		position: relative;
	}
		#slady > header {
			position: absolute;
			left: 1.25em;
			top: 0.75em;
		}
		#slady > svg {
				width: 120%;
				width: 80%;
/* 				width: 150%; */
				z-index: -1;
				margin-right: 7em;
		/* 		 margin-bottom: -20%; */
		/* 		 margin-left: -30%; */
				margin-top: -0em;
		}
		#list-of-countries {
			align-items: center;
			justify-content: center;
		/* 		border: 1px solid blue; */
			display: flex;
			font-size: 0.875em;
			height: 100%;
			left: 0;
			position: absolute;
			text-transform: uppercase;
			width: 33.33%
		}
			#list-of-countries > ul {
				color: inherit;
				list-style: none;
			}

				#list-of-countries > ul > li {
					animation-duration: 15s;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
				}

				#list-of-countries > ul > li > span {
					animation-duration: 15s;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
					border: 1px solid red;
					border-radius: 1.25em;
					color: #d8d8d8;
					display: inline-block;
					height: 1.125em;
					margin-right: 0.75em;
					margin-bottom: -0.1875em;
					width: 1.125em;
				}

				@keyframes country-poland-text {
					0.0% { color: inherit }
					7.14% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-poland-bullet {
					0.0% { background-color: transparent }
					7.14% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(1)  {
					animation-name: country-poland-text }
				#list-of-countries > ul > li:nth-of-type(1) > span {
					animation-name: country-poland-bullet }

				@keyframes country-ukraine-text {
					7.14% { color: inherit }
					14.29% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-ukraine-bullet {
					7.14% { background-color: transparent }
					14.29% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(2)  {
					animation-name: country-ukraine-text }
				#list-of-countries > ul > li:nth-of-type(2) > span {
					animation-name: country-ukraine-bullet }

				@keyframes country-china-text {
					14.29% { color: inherit }
					21.43% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-china-bullet {
					14.29% { background-color: transparent }
					21.43% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(3)  {
					animation-name: country-china-text }
				#list-of-countries > ul > li:nth-of-type(3) > span {
					animation-name: country-china-bullet }

				@keyframes country-australia-text {
					21.43% { color: inherit }
					28.57% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-australia-bullet {
					21.43% { background-color: transparent }
					28.57% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(4)  {
					animation-name: country-australia-text }
				#list-of-countries > ul > li:nth-of-type(4) > span {
					animation-name: country-australia-bullet }

				@keyframes country-zealand-text {
					28.57% { color: inherit }
					35.71% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-zealand-bullet {
					28.57% { background-color: transparent }
					35.71% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(5)  {
					animation-name: country-zealand-text }
				#list-of-countries > ul > li:nth-of-type(5) > span {
					animation-name: country-zealand-bullet }

				@keyframes country-tanzania-text {
					35.71% { color: inherit }
					42.86% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-tanzania-bullet {
					35.71% { background-color: transparent }
					42.86% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(6)  {
					animation-name: country-tanzania-text }
				#list-of-countries > ul > li:nth-of-type(6) > span {
					animation-name: country-tanzania-bullet }

				@keyframes country-spain-text {
					42.86% { color: inherit }
					50.00% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-spain-bullet {
					42.86% { background-color: transparent }
					50.00% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(7)  {
					animation-name: country-spain-text }
				#list-of-countries > ul > li:nth-of-type(7) > span {
					animation-name: country-spain-bullet }

				@keyframes country-italy-text {
					50.00% { color: inherit }
					57.14% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-italy-bullet {
					50.00% { background-color: transparent }
					57.14% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(8)  {
					animation-name: country-italy-text }
				#list-of-countries > ul > li:nth-of-type(8) > span {
					animation-name: country-italy-bullet }

				@keyframes country-czech-text {
					57.14% { color: inherit }
					64.29% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-czech-bullet {
					57.14% { background-color: transparent }
					64.29% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(9)  {
					animation-name: country-czech-text }
				#list-of-countries > ul > li:nth-of-type(9) > span {
					animation-name: country-czech-bullet }

				@keyframes country-germany-text {
					64.29% { color: inherit }
					71.43% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-germany-bullet {
					64.29% { background-color: transparent }
					71.43% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(10)  {
					animation-name: country-germany-text }
				#list-of-countries > ul > li:nth-of-type(10) > span {
					animation-name: country-germany-bullet }

				@keyframes country-uk-text {
					71.43% { color: inherit }
					78.57% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-uk-bullet {
					71.43% { background-color: transparent }
					78.57% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(11)  {
					animation-name: country-uk-text }
				#list-of-countries > ul > li:nth-of-type(11) > span {
					animation-name: country-uk-bullet }

				@keyframes country-sweden-text {
					78.57% { color: inherit }
					85.71% { color: red }
					85.71% { color: red }
					92.86% { color: inherit }
				}
				@keyframes country-sweden-bullet {
					78.57% { background-color: transparent }
					85.71% { background-color: red }
					85.71% { background-color: red }
					92.86% { background-color: transparent }
				}
				#list-of-countries > ul > li:nth-of-type(12)  {
					animation-name: country-sweden-text }
				#list-of-countries > ul > li:nth-of-type(12) > span {
					animation-name: country-sweden-bullet }

	@keyframes world-map-poland {
		0.0% { fill: #d8d8d8; }
		7.14% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-ukraine {
		7.14% { fill: #d8d8d8; }
		14.29% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-china {
		14.29% { fill: #d8d8d8; }
		21.43% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-australia {
		21.43% { fill: #d8d8d8; }
		28.57% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-zealand {
		28.57% { fill: #d8d8d8; }
		35.71% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-tanzania {
		35.71% { fill: #d8d8d8; }
		42.86% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-spain {
		42.86% { fill: #d8d8d8; }
		50.00% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-italy {
		50.00% { fill: #d8d8d8; }
		57.14% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-czech {
		57.14% { fill: #d8d8d8; }
		64.29% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-germany {
		64.29% { fill: #d8d8d8; }
		71.43% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-uk {
		71.43% { fill: #d8d8d8; }
		78.57% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}
	@keyframes world-map-sweden {
		78.57% { fill: #d8d8d8; }
		85.71% { fill:  #ff0000; }
		85.71% { fill:  #ff0000; }
		92.86% { fill: #d8d8d8; }
	}


	path.world-map-country {
		animation-duration: 15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	#poland { animation-name: world-map-poland }
	#ukraine { animation-name: world-map-ukraine }
	#china { animation-name: world-map-china }
	#australia { animation-name: world-map-australia }
	#zealand { animation-name: world-map-zealand }
	#tanzania { animation-name: world-map-tanzania }
	#spain { animation-name: world-map-spain }
	#italy { animation-name: world-map-italy }
	#czech { animation-name: world-map-czech }
	#germany { animation-name: world-map-germany }
	#uk { animation-name: world-map-uk }
	#sweden { animation-name: world-map-sweden }

	/* END: WORDL MAP */

	#kontakt {
		background: #fff url("images/kontakt-01-1.png") no-repeat right bottom;
		background-size: 60%;
		position: relative;
	}

	#kontakt > span {
		display: block;
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		overflow: hidden;
	}

	#kontakt div.presentation-img {
		bottom: 0;
		right: 0;
	}

	#kontakt a {
		border-bottom: 1px dashed red;
		color: red;
		text-decoration: none;
	}

	#kontakt > div > div:last-child > article {
		display: flex;
		height: 17.5em;
	}
}

@media screen and (min-width: 35em) {

	ul#mision-ul-float {
/* 		float: left; */
/* 		width: calc(50% - 1.25em); */
	}
	ul#mision-ul-float+ul {
/* 		overflow: auto; */
/* 		padding-left: 1.25em; */
	}

}

@media screen and (min-width: 45em) {

	/* BEGIN: SECTION LAYOUT */

	section {
		min-height: 100vh;
		padding-right: 9.75em;
		padding-right: 13.375em;
	}

	/* END: SECTION LAYOUT */

	/* BEGIN: SECTION HEADER */

	section > header {
		align-items: center;
		display: flex;
	}
		section > header > :first-child {
			border-bottom: none;
			border-right: 1px solid red;
			padding-right: 1.25em;
			margin-right: 1.25em;
		}
		section > header > div {
			margin-top: 0;
		}
			section > header > div > span {
/* 				display: block; */
			}

	/* END: SECTION HEADER */

	/* BEGIN: NAVIGATION */

	nav {
		display: flex;
	}

	#nav-horizontal-button {
		display: none;
	}

	#nav-horizontal {
		background-color: transparent;
		color: inherit;
		display: flex;
		left: 1.25em;
		padding: 0.25em 1.25em;
		position: absolute;
		text-transform: uppercase;
		top: 1.25em;
		z-index: 8;
	}
		#nav-horizontal > span,
		#nav-horizontal > a {
			border-left: 1px solid red;
			color: inherit;
			color: #151515;
			display: inline-block;
			font-size: 0.875em;
			font-size: 1em;
			font-weight: inherit;
/* 			font-weight: 400; */
			padding: 0.375em 1.25em;
			text-decoration: none;
		}
		#nav-horizontal > a:last-child {
/* 			border-right:  1px solid red; */
			padding-bottom: 0.375em;
		}
		#nav-horizontal > a:first-child {
			display: none;
		}
		#nav-horizontal > a:not(:last-child):hover > span {
			border-bottom: 1px solid red;
		}

	@keyframes nav-horizontal-1 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 6.375em; }
		33.333% { padding-bottom: 0.375em; }
		44.444% { padding-bottom: 0.375em; }
		55.556% { padding-bottom: 0.375em; }
		66.667% { padding-bottom: 0.375em; }
		77.778% { padding-bottom: 0.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}
	@keyframes nav-horizontal-2 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 0.375em; }
		33.333% { padding-bottom: 8.375em; }
		44.444% { padding-bottom: 0.375em; }
		55.556% { padding-bottom: 0.375em; }
		66.667% { padding-bottom: 0.375em; }
		77.778% { padding-bottom: 0.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}
	@keyframes nav-horizontal-3 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 0.375em; }
		33.333% { padding-bottom: 0.375em; }
		44.444% { padding-bottom: 10.375em; }
		55.556% { padding-bottom: 0.375em; }
		66.667% { padding-bottom: 0.375em; }
		77.778% { padding-bottom: 0.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}
	@keyframes nav-horizontal-4 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 0.375em; }
		33.333% { padding-bottom: 0.375em; }
		44.444% { padding-bottom: 0.375em; }
		55.556% { padding-bottom: 8.375em; }
		66.667% { padding-bottom: 0.375em; }
		77.778% { padding-bottom: 0.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}
	@keyframes nav-horizontal-5 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 0.375em; }
		33.333% { padding-bottom: 0.375em; }
		44.444% { padding-bottom: 0.375em; }
		55.556% { padding-bottom: 0.375em; }
		66.667% { padding-bottom: 6.375em; }
		77.778% { padding-bottom: 0.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}
	@keyframes nav-horizontal-6 {
		11.111% { padding-bottom: 0.375em; }
		22.222% { padding-bottom: 0.375em; }
		33.333% { padding-bottom: 0.375em; }
		44.444% { padding-bottom: 0.375em; }
		55.556% { padding-bottom: 0.375em; }
		66.667% { padding-bottom: 0.375em; }
		77.778% { padding-bottom: 4.375em; }
		88.889% { padding-bottom: 0.375em; }
		100% { padding-bottom: 0.375em; }
	}


	#nav-horizontal > a {
		animation-duration: 5.75s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
/* 		animation-timing-function: linear; */
	}

	#nav-horizontal > a:nth-of-type(2) {
		animation-name: nav-horizontal-1;
/* 		animation-delay: 0.1s; */
	}
	#nav-horizontal > a:nth-of-type(3) {
		animation-name: nav-horizontal-2;
/* 		animation-delay: 0.2s; */
	}
	#nav-horizontal > a:nth-of-type(4) {
		animation-name: nav-horizontal-3;
/* 		animdation-delay: 0.3s; */
	}
	#nav-horizontal > a:nth-of-type(5) {
		animation-name: nav-horizontal-4;
/* 		animation-delay: 0.4s; */
	}
	#nav-horizontal > a:nth-of-type(6) {
		animation-name: nav-horizontal-5;
		padding-bottom: 0.375em;
/* 		animation-delay: 0.5s; */
	}
	#nav-horizontal > a:nth-of-type(7) {
		animation-name: nav-horizontal-6;
		display: inline-block;
/* 		padding-bottom: 0.75em; */
/* 		animation-delay: 0.6s; */
	}

/* 	NAV HORIZONTAL */

	/* END: NAVIGATION */


	#neuron > a {
		bottom: 2.75em;
		left: 3em;
/* 		width: 175px; */
	}
	#neuron > a > img {
/* 		width: 175px; */
	}

	#kontakt {
		background-size: 50%;
		background-position: 50% bottom;
	}

}

@media screen and (min-width: 50em) {

	/* BEGIN: SECTION HEADER */

	section > header > :first-child > span {
		font-size: 2.875em;
	}
	/* END: SECTION HEADER */

	#neuron > a {
		bottom: 2.75em;
		left: 3em;
/* 		width: 200px; */
	}
	#neuron > a > img {
/* 		width: 200px; */
	}
}

@media screen and (min-width: 60em) {

	/* BEGIN: SECTION LAYOUT & FORMS */

	#kontakt {
		background-size: 50%;
		background-position: 70% bottom;
	}

	#kontakt div > div:last-child > article {
/* 		min-height: 18.5em; */
	}

/* 	#praca div.two-columns, */
	#kontakt div.two-columns {
		display: flex;
	}
/* 		#praca div.two-columns > div, */
		#kontakt div.two-columns > div {
			width: calc(50% - 0.75em);
		}
/* 		#praca div.two-columns > div:first-child, */
		#kontakt div.two-columns > div:first-child {
			margin-right: 1.5em;
		}



	/* END: SECTION LAYOUT & FORMS */

	nav {
		font-size: 1em;
	}
	#neuron > header > :first-child > span {
		font-size: 3.75em;
	}
	#neuron > header > div {
		font-size: 1em;
	}

	#neuron > a {
		bottom: 2.75em;
		left: 3em;
/* 		width: 255px; */
	}
	#neuron > a > img {
/* 		width: 210px; */
	}

}

@media screen and (min-width: 60em) {

	/* BEGIN: SECTION LAYOUT */

	div.three-rows {
		--width: calc(50% - 1.5em / 2);
		display: grid;
		grid-template-columns: var(--width) var(--width);
		grid-column-gap: 1.5em;
	}

	/* END: SECTION LAYOUT */

}

@media screen and (min-width: 80em) {

	/* BEGIN: SECTION LAYOUT */

	div.two-rows {
		--width: calc(50% - 1.5em / 2);
		display: grid;
		grid-template-columns: var(--width) var(--width);
		grid-column-gap: 1.5em;
	}

	div.three-rows {
		--width: calc(33.333333% - 3em / 3);
		display: grid;
		grid-template-columns: var(--width) var(--width) var(--width);
		grid-template-rows: auto auto auto auto;
		grid-column-gap: 1.5em;
	}


	div.three-rows > article:last-child {
		grid-row-start: 4;
		grid-column-start: 1;
		grid-column-end: 3;
/* 		grid-column-end: 4; */
	}
	div.three-rows > article:last-child > img {
		float: left;
		width: calc(50% - 0.875em);
		margin-right: 1.5em;
	}

	#praca > div.two-rows > article:last-child {
		display: flex;
		flex-direction: column;
	}
	#praca > div.two-rows > article:last-child > p {
/* 		align-items:center; */
/* 		align-content:center; */
		justify-content: center;
		display: flex;
		flex-direction: column;
		height: 100%;
	}


	/* END: SECTION LAYOUT */

}

@media screen and (min-width:90em) {

/* 	#praca div.two-columns > div > *, */
	#kontakt div.two-columns > div > * {
		width: 70%;
	}

}

	/* BEGIN: MESSAGES */



.message {
	margin: 1em;
	position: fixed;
	transform: scale( 0, 0 );
	transition: transform 0.375s ease-in-out;
	z-index: 2;
}

.message.form {
	align-items: center;
	bottom: 0;
	display: grid;
	justify-items: center;
	left: 0;
	right: 0;
	top: 0;
	transform-origin: center;
}

.message.show {
	transform: scale( 1, 1 );
}

	.message > .window {
		background-color: #FF0000;
		border-radius: 0.5em;
		color: white;
		font-weight: 700;
		width: 18em;
		padding: 1em;
		text-align: right;
	}

		.message > .window > .content {
			text-align: left;
			margin-bottom: 1em;
		}

		.message > .window > .content > a {
/* 			font-weight: 800; */
			text-decoration: underline;
			color: white;
		}

		.message > .window > button {
			border: 0;
			background-color: white;
			color: #FF0000;
			display: inline-block;
			font-family: inherit;
			font-size: inherit;
/* 			font-weight: 800; */
			padding: 0.5em;
		}

#cookies-message {
	bottom: 0;
	right: 0;
	transform-origin: right bottom;
	z-index: 20;
}

	#form-message.correct > .window {
		background-color: var( --color-red-oposition );
	}

		#form-message.correct > .window > button {
			background-color: var( --orange );
		}

#form-message-when {
	transform: scale( 0, 0 );
}

#form-message-when.show {
	transform: scale( 1, 1 );
}

	#form-message-when .window > button {
		background-color: var( --green );
	}

		#form-message-when .window > .content {
			display: grid;
			grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
			grid-template-columns: auto auto;
		}

			#form-message-when .window > .content > ul {
				list-style: none;
			}

			#form-message-when .window > .content > ul > li {
				align-items: center;
				border: 2px solid white;
				cursor: pointer;
				display: flex;
				margin: 9px;
				margin-right: 0;
				padding: 4px 8px;
				transition: background-color 0.25s ease-in-out;
			}

			#form-message-when .window > .content > ul > li.marked {
				background-color: var( --green );
			}

			#form-message-when-day .window > .content > ul > li {
				margin-left: 0;
			}

			#form-message-when-hour {
				display: grid;
				grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
			}

				#form-message-when-hour > li {
					display: inline-block;
					justify-content: center;
					width: 46px;
				}


	/* END MESSAGES */


/* BEGIN: LUXMED LOGO */

.logo-header > img {
/* 	height: 2.5em; */
}

#logo-luxmed {
	margin-left: -1em;
}

#logo-luxmed > img {
/* 	height: 2.5em; */
	width: 120px;
	margin-left: 0.875em;
/* 	margin-bottom: -1em; */
}

#logo-haristo {
	margin-left: 8.5em;
	margin-bottom: 1.1875em;
}

#logo-haristo > img {
	height: 2.675em;
}

@media screen and (min-width: 45em) {

	#logo-luxmed > img {
		width: 150px;
	}

	#logo-haristo {
		margin-left: 11.25em;
		margin-bottom: 1.5em;
	}

	#logo-haristo > img {
/* 		margin-bottom: 2em; */
		height: 3.25em;
	}

}

@media screen and (min-width: 60em) {

	#logo-luxmed > img {
/* 		height: 3.375em; */
		width: 160px;
	}

	#logo-haristo {
		margin-left: 12.75em;
	}

	#logo-haristo > img {
		height: 3.75em;
	}

}
