@media screen and (min-width: 520px) {
	a {
		color: #4bb1cf;
		text-decoration: none;
	}

	body {
		overflow: hidden;
		cursor: default;
	}

	ul {
	   padding: 20px;
	}

  table {
    margin: 10px;  
  	min-width: 350px;
  }
  
	[title] {
	  border-bottom: 1px dashed white;
	  cursor: help;
	}

  .st-panel h1.title {
    padding: 0px;
    margin: 0.83em 0;
  }


	/* stavovy radek */
	.status-bar {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 0;
		width:100%;
	}
	.status-bar:before {
		content: '© Stanislav Škubal';
		position: absolute;
		color: #eeeeee;
		width:100%;
		background-color: rgba(30,30,30,.7);
		padding: 8px 0;
		bottom: 0;
		font-size: 0.9em;
		text-indent: 8px;
	}
	.status-bar:after {
		content: 'aktualizováno: 22. července 2025';
		position: absolute;
		color: rgb(238,238,238);
		padding: 8px 0;
		bottom: 0;
    right: 8px;
		font-size: 0.7em;
	}
	
	/* --- navigation --- */
	.st-link {
		position: relative;
		color: transparent;
		z-index: 10;
		padding-left: 0;
		border-radius: 50%;
		opacity: 1;
		margin: -32px;
		width: 64px;
		height: 64px;
    background-color: rgba(255,255,255,0.7);
  }	
	.st-control,
	.st-link {
		overflow: hidden;
		position: fixed;
		bottom: 0px;
		cursor: pointer;
	}

	.st-control {
		display: block;
		opacity: 0;
		z-index: 1000;
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		margin: -45px;
		width: 90px;
		height: 90px;
	}

	.st-control, .st-link {
		position: absolute;
	}
	
	/* welcome */
	#st-control-welcome:checked,
	#st-control-welcome:checked ~ #link-welcome {
		left: 10%;
		right: 90%;
		top: 10%;
		bottom: 10%;
	}
	#st-control-welcome:checked ~ #st-control-me-personally,
	#st-control-welcome:checked ~ #link-me-personally {
		left: 50%;
		right: 50%;
		top: 80%;
		bottom: 20%;
	}
	#st-control-welcome:checked ~ #st-control-working-hard,
	#st-control-welcome:checked ~ #link-working-hard {
		left: 20%;
		right: 80%;
		top: 50%;
		bottom: 90%;
	}
	#st-control-welcome:checked ~ #st-control-portfolio,
	#st-control-welcome:checked ~ #link-portfolio {
		left: 80%;
		right: 20%;
		top: 50%;
		bottom: 50%;
	}
	#st-control-welcome:checked ~ #st-control-contact,
	#st-control-welcome:checked ~ #link-contact {
		left: 50%;
		right: 50%;
		top: 20%;
		bottom: 80%;
	}
	/* me-personally */
	#st-control-me-personally:checked ~ #st-control-welcome,
	#st-control-me-personally:checked ~ #link-welcome {
		left: 30%;
		right: 70%;
		top: 10%;
		bottom: 90%;
	}
	#st-control-me-personally:checked,
	#st-control-me-personally:checked ~ #link-me-personally {
		left: 50%;
		right: 50%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-me-personally:checked ~ #st-control-working-hard,
	#st-control-me-personally:checked ~ #link-working-hard {
		left: 10%;
		right: 90%;
		top: 10%;	
		bottom: 90%;
	}
	#st-control-me-personally:checked ~ #st-control-portfolio,
	#st-control-me-personally:checked ~ #link-portfolio {
		left: 90%;
		right: 10%;
		top: 10%;
		bottom: 90%;
	}
	#st-control-me-personally:checked ~ #st-control-contact,
	#st-control-me-personally:checked ~ #link-contact {
		left: 70%;
		right: 30%;
		top: 10%;
		bottom: 90%;
	}
	/* working-hard */
	#st-control-working-hard:checked ~ #st-control-welcome,
	#st-control-working-hard:checked ~ #link-welcome {
		left: 80%;
		right: 20%;
		top: 10%;
		bottom: 90%;
	}
	#st-control-working-hard:checked ~ #st-control-me-personally,
	#st-control-working-hard:checked ~ #link-me-personally {
		left: 90%;
		right: 10%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-working-hard:checked,
	#st-control-working-hard:checked ~ #link-working-hard {
		left: 10%;
		right: 90%;
		top: 50%;
		bottom: 50%;
	}
	#st-control-working-hard:checked ~ #st-control-portfolio,
	#st-control-working-hard:checked ~ #link-portfolio {
		left: 80%;
		right: 20%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-working-hard:checked ~ #st-control-contact,
	#st-control-working-hard:checked ~ #link-contact {
		left: 90%;
		right: 10%;
		top: 10%;
		bottom: 90%;
	}
	/* portfolio */
	#st-control-portfolio:checked ~ #st-control-welcome,
	#st-control-portfolio:checked ~ #link-welcome {
		left: 20%;
		right: 80%;
		top: 10%;
		bottom: 90%;
	}
	#st-control-portfolio:checked ~ #st-control-me-personally,
	#st-control-portfolio:checked ~ #link-me-personally {
		left: 10%;
		right: 90%;
		top: 90%;
		bottom: 10%;	
	}
	#st-control-portfolio:checked ~ #st-control-working-hard,
	#st-control-portfolio:checked ~ #link-working-hard {
		left: 20%;
		right: 80%;
		top: 90%;
		bottom: 10%;	
	}
	#st-control-portfolio:checked,
	#st-control-portfolio:checked ~ #link-portfolio {
		left: 90%;
		right: 10%;
		top: 50%;
		bottom: 50%;
	}
	#st-control-portfolio:checked ~ #st-control-contact,
	#st-control-portfolio:checked ~ #link-contact {
		left: 10%;
		right: 90%;
		top: 10%;
		bottom: 90%;
	}
	/* contact */
	#st-control-contact:checked ~ #st-control-welcome,
	#st-control-contact:checked ~ #link-welcome {
		left: 30%;
		right: 70%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-contact:checked ~ #st-control-me-personally,
	#st-control-contact:checked ~ #link-me-personally {
		left: 70%;
		right: 30%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-contact:checked ~ #st-control-working-hard,
	#st-control-contact:checked ~ #link-working-hard {
		left: 10%;
		right: 90%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-contact:checked ~ #st-control-portfolio,
	#st-control-contact:checked ~ #link-portfolio {
		left: 90%;
		right: 10%;
		top: 90%;
		bottom: 10%;
	}
	#st-control-contact:checked,
	#st-control-contact:checked ~ #link-contact {
		left: 50%;
		right: 50%;
		top: 10%;
		bottom: 90%;
	}

	.st-control:checked {
		display: none;
	}
	#st-control-welcome:checked ~ #link-welcome,
	#st-control-me-personally:checked ~ #link-me-personally,
	#st-control-working-hard:checked ~ #link-working-hard,
	#st-control-portfolio:checked ~ #link-portfolio,
	#st-control-contact:checked ~ #link-contact {
		opacity: 0;
		width: 0;
		height: 0;
	}

	#link-me-personally:before,
	#link-working-hard:before,
	#link-portfolio:before,
	#link-contact:before {
		background-image: url('../img/arrow.png');
	}

	/* vychozi skryti ikonek na sipkach */
	.st-link:before {
		opacity: 1;
	}
	.st-link:after {
		opacity: 0;
	}
		
	/* vodorovna rotace s vymenou obrazku */   
	#st-control-me-personally ~ #link-me-personally:before,
	#st-control-me-personally ~ #link-me-personally:after,
	#st-control-working-hard ~ #link-working-hard:before,
	#st-control-working-hard ~ #link-working-hard:after,
	#st-control-portfolio ~ #link-portfolio:before,
	#st-control-portfolio ~ #link-portfolio:after,
	#st-control-contact ~ #link-contact:before,
	#st-control-contact ~ #link-contact:after {
		-webkit-transform:translate(0px, 0);
		-moz-transform:translate(0px, 0);
		-ms-transform:translate(0px, 0);
		-o-transform:translate(0px, 0);
		transform:translate(0px, 0);
	}
	#st-control-me-personally:hover ~ #link-me-personally:before,
	#st-control-me-personally:hover ~ #link-me-personally:after,
	#st-control-working-hard:hover ~ #link-working-hard:before,
	#st-control-working-hard:hover ~ #link-working-hard:after,
	#st-control-portfolio:hover ~ #link-portfolio:before,
	#st-control-portfolio:hover ~ #link-portfolio:after,
	#st-control-contact:hover ~ #link-contact:before,
	#st-control-contact:hover ~ #link-contact:after {
		-webkit-transform:rotateY(180deg);
		-moz-transform:rotateY(180deg);
		-ms-transform:rotateY(180deg);
		-o-transform:rotateY(180deg);
		transform:rotateY(180deg);
	}
	#st-control-me-personally ~ #link-me-personally:before,
	#st-control-working-hard ~ #link-working-hard:before,
	#st-control-portfolio ~ #link-portfolio:before,
	#st-control-contact ~ #link-contact:before {
		opacity: 1;
    transition: opacity 0.4s step-start 0.4s;
	}
	#st-control-me-personally ~ #link-me-personally:after,
	#st-control-working-hard ~ #link-working-hard:after,
	#st-control-portfolio ~ #link-portfolio:after,
	#st-control-contact ~ #link-contact:after {
		opacity: 0;
    transition: opacity 0.4s step-start 0.4s;
	}

	#st-control-me-personally:hover ~ #link-me-personally:before,
	#st-control-working-hard:hover ~ #link-working-hard:before,
	#st-control-portfolio:hover ~ #link-portfolio:before,
	#st-control-contact:hover ~ #link-contact:before {
		opacity: 0;
    transition: opacity 0.4s step-start 0.4s;
	}
	#st-control-me-personally:hover ~ #link-me-personally:after,
	#st-control-working-hard:hover ~ #link-working-hard:after,
	#st-control-portfolio:hover ~ #link-portfolio:after,
	#st-control-contact:hover ~ #link-contact:after {
		opacity: 1;
    transition: opacity 0.4s step-start 0.4s;
	}

	#link-welcome:after {
		background-image: none;
	}
	#link-me-personally:after {
		background-image: url('../img/me-personally.png');
	}
	#link-working-hard:after {
		background-image: url('../img/working-hard.png');
	}
	#link-portfolio:after {
		background-image: url('../img/portfolio.png');
	}
	#link-contact:after {
		background-image: url('../img/contact.png');
	}

	/* rotace sipek pri presunech */
	#link-welcome:after,
	#link-welcome {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);	
	}
	#link-me-personally,
	#st-control-welcome:checked ~ #link-me-personally {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);	
	}
	#link-me-personally:hover,
	#st-control-welcome:checked ~ #link-me-personally:hover {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);	
	}
	#link-working-hard,
	#st-control-welcome:checked ~ #link-working-hard {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);	
	}
	#link-portfolio,
	#st-control-welcome:checked ~ #link-portfolio {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);	
	}
	#link-contact,
	#st-control-welcome:checked ~ #link-contact {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);	
	}
	#st-control-me-personally:checked ~ #link-welcome {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);	
	}
	#st-control-me-personally:checked ~ #link-working-hard {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);	
	}
	#st-control-me-personally:checked ~ #link-portfolio {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);	
	}
	#st-control-me-personally:checked ~ #link-contact {
		-webkit-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);	
	}
	#st-control-working-hard:checked ~ #link-welcome {
		-webkit-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);	
	}
	#st-control-working-hard:checked ~ #link-me-personally {
		-webkit-transform: rotate(495deg);
		-moz-transform: rotate(495deg);
		-ms-transform: rotate(495deg);
		-o-transform: rotate(495deg);
		transform: rotate(495deg);	
	}
	#st-control-working-hard:checked ~ #link-portfolio {
		-webkit-transform: rotate(-270deg);
		-moz-transform: rotate(-270deg);
		-ms-transform: rotate(-270deg);
		-o-transform: rotate(-270deg);
		transform: rotate(-270deg);	
	}
	#st-control-working-hard:checked ~ #link-contact {
		-webkit-transform: rotate(405deg);
		-moz-transform: rotate(405deg);
		-ms-transform: rotate(405deg);
		-o-transform: rotate(405deg);
		transform: rotate(405deg);	
	}
	#st-control-portfolio:checked ~ #link-welcome {
		-webkit-transform: rotate(720deg);
		-moz-transform: rotate(720deg);
		-ms-transform: rotate(720deg);
		-o-transform: rotate(720deg);
		transform: rotate(720deg);	
	}
	#st-control-portfolio:checked ~ #link-me-personally {
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		transform: rotate(-135deg);	
	}
	#st-control-portfolio:checked ~ #link-working-hard {
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);	
	}
	#st-control-portfolio:checked ~ #link-contact {
		-webkit-transform: rotate(-405deg);
		-moz-transform: rotate(-405deg);
		-ms-transform: rotate(-405deg);
		-o-transform: rotate(-405deg);
		transform: rotate(-405deg);	
	}
	#st-control-contact:checked ~ #link-welcome {
		-webkit-transform: rotate(-720deg);
		-moz-transform: rotate(-720deg);
		-ms-transform: rotate(-720deg);
		-o-transform: rotate(-720deg);
		transform: rotate(-720deg);	
	}
	#st-control-contact:checked ~ #link-me-personally {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);	
	}
	#st-control-contact:checked ~ #link-working-hard {
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		transform: rotate(-135deg);	
	}
	#st-control-contact:checked ~ #link-portfolio {
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);	
	}

	/* aktualizace stavoveho radku */
	/* v css by nemel byvat obsah... ale co, vsak je to moje stranka :-) */
	#st-control-welcome:hover  ~ .status-bar:before {
		content: 'Úvodní obrazovka s rozcestníkem';
	}
	#st-control-me-personally:hover ~ .status-bar:before {
		content: 'Osobní charakteristika a mimopracovní zájmy';
	}
	#st-control-working-hard:hover ~ .status-bar:before {
		content: 'Profesní pohled, programátorské schopnosti';
	}
	#st-control-portfolio:hover ~ .status-bar:before {
		content: 'Mé pracovní zkušenosti a projekty, na nichž jsem se podílel';
	}
	#st-control-contact:hover ~ .status-bar:before {
		content: 'Spojte se se mnou';
	}

	/* --- !navigation --- */
	
	
	.st-body {
		position: absolute;
	    width: 100%;
		height: 100%;
	    top: 0;
	    left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		overflow: auto;
		margin-top: 0;
	}
	
	.st-container {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	.st-scroll {
		left: 10%;
		right: auto;
	}

	.st-panel {
		overflow: hidden;
	}

	.st-panel > .container {
		position: relative;
		overflow: hidden;
		text-align: center;
		color: #eeeeee;
		z-index: 2;
		-webkit-backface-visibility: hidden;
		height: 70%;
		left: 5%;
		top: 5%;
		width: 90%;
		padding: 0 8px 0 2px;	
	}

	.st-scroll {
		position: relative;
		height: 100%;
		width: 90%;
		top: 0;
		left: 0;
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		-ms-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;

		/* Let's enforce some hardware acceleration */
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
	}

	#st-control-welcome:checked ~ .st-body {
		background-color: #68cdcd;
	}
	#st-control-me-personally:checked ~ .st-body {
		background-color: #f4d679;
	}
	#st-control-working-hard:checked ~ .st-body {
		background-color: #64cb83;
	}
	#st-control-portfolio:checked ~ .st-body {
		background-color: #d190c5;
	}
	#st-control-contact:checked ~ .st-body {
		background-color: #e1bcbc;
	}

	/* --- pages --- */

	.st-scroll {
		width: 100%;
		left: 0;
	}

	#me-personally {
		/* nic zvlastniho nevyzaduje */
	}

	#working-hard {
		left: -100%;
		position: relative;
		top: -200%;	
	}

	#portfolio {
		right: -100%;
		position: relative;
		top: -300%;	
	}

	#contact {
		position: relative;
		top: -500%;	
	}


	#st-control-welcome:checked ~ .st-body > .st-container > .st-scroll {
		-webkit-transform: translate(0%,0%);
		-moz-transform: translate(0%,0%);
		-o-transform: translate(0%,0%);
		-ms-transform: translate(0%,0%);
		transform: translate(0%,0%);
	}
	#st-control-me-personally:checked ~ .st-body > .st-container > .st-scroll {
		-webkit-transform: translate(0%,-100%);
		-moz-transform: translate(0%,-100%);
		-o-transform: translate(0%,-100%);
		-ms-transform: translate(0%,-100%);
		transform: translate(0%,-100%);
		transform: translate(0%,-100%);
	}
	#st-control-working-hard:checked ~ .st-body > .st-container > .st-scroll {
		-webkit-transform: translate(100%,0%);
		-moz-transform: translate(100%,0%);
		-o-transform: translate(100%,0%);
		-ms-transform: translate(100%,0%);
		transform: translate(100%,0%);
	}
	#st-control-portfolio:checked ~ .st-body > .st-container > .st-scroll {
		-webkit-transform: translate(-100%,0%);
		-moz-transform: translate(-100%,0%);
		-o-transform: translate(-100%,0%);
		-ms-transform: translate(-100%,0%);
		transform: translate(-100%,0%);
	}
	#st-control-contact:checked ~ .st-body > .st-container > .st-scroll {
		-webkit-transform: translate(0%,100%);
		-moz-transform: translate(0%,100%);
		-o-transform: translate(0%,100%);
		-ms-transform: translate(0%,100%);
		transform: translate(0%,100%);
	}


	/* Content elements */

	.st-panel {
		padding-left: 0;
	}

	.st-panel header {
		color: #eeeeee;
		text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
		font-weight: 900;
		width: 100%;
		text-align: center;
		padding: 1px 0;
		-webkit-backface-visibility: hidden;
		min-height: 70px;
	}
	#welcome .title:before {
		background-image: url('../img/welcome.png');
	}
	#me-personally .title:before {
		background-image: url('../img/me-personally.png');
	}
	#working-hard .title:before {
		background-image: url('../img/working-hard.png');
	}
	#portfolio .title:before {
		background-image: url('../img/portfolio.png');
	}
	#contact .title:before {
		background-image: url('../img/contact.png');
	}

	#st-control-welcome:checked ~ .st-body > .st-container > .st-scroll #welcome header,
	#st-control-me-personally:checked ~ .st-body > .st-container > .st-scroll #me-personally header,
	#st-control-working-hard:checked ~ .st-body > .st-container > .st-scroll #working-hard header,
	#st-control-portfolio:checked ~ .st-body > .st-container > .st-scroll #portfolio header,
	#st-control-contact:checked ~ .st-body > .st-container > .st-scroll #contact header {
		-webkit-animation: moveDown 0.8s ease-in-out 0.4s backwards;
		-moz-animation: moveDown 0.8s ease-in-out 0.4s backwards;
		-o-animation: moveDown 0.8s ease-in-out 0.4s backwards;
		-ms-animation: moveDown 0.8s ease-in-out 0.4s backwards;
		animation: moveDown 0.8s ease-in-out 0.4s backwards;
	}
	
	@-webkit-keyframes moveDown{
		0% { 
			-webkit-transform: translateY(-40px); 
			opacity: 0;
		}
		100% { 
			-webkit-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-moz-keyframes moveDown{
		0% { 
			-moz-transform: translateY(-40px); 
			opacity: 0;
		}
		100% { 
			-moz-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-o-keyframes moveDown{
		0% { 
			-o-transform: translateY(-40px); 
			opacity: 0;
		}
		100% { 
			-o-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-ms-keyframes moveDown{
		0% { 
			-ms-transform: translateY(-40px); 
			opacity: 0;
		}
		100% { 
			-ms-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@keyframes moveDown{
		0% { 
			transform: translateY(-40px); 
			opacity: 0;
		}
		100% { 
			transform: translateY(0px);  
			opacity: 1;
		}
	}

	#st-control-welcome:checked ~ .st-body > .st-container > .st-scroll #welcome .container,
	#st-control-me-personally:checked ~ .st-body > .st-container > .st-scroll #me-personally .container,
	#st-control-working-hard:checked ~ .st-body > .st-container > .st-scroll #working-hard .container,
	#st-control-portfolio:checked ~ .st-body > .st-container > .st-scroll #portfolio .container,
	#st-control-contact:checked ~ .st-body > .st-container >.st-scroll #contact .container {
		-webkit-animation: moveUp 1s ease-in-out 0.2s backwards;
		-moz-animation: moveUp 1s ease-in-out 0.2s backwards;
		-o-animation: moveUp 1s ease-in-out 0.2s backwards;
		-ms-animation: moveUp 1s ease-in-out 0.2s backwards;
		animation: moveUp 1s ease-in-out 0.2s backwards;
	}

	@-webkit-keyframes moveUp{
		0% { 
			-webkit-transform: translateY(40px); 
			opacity: 0;
		}
		100% { 
			-webkit-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-moz-keyframes moveUp{
		0% { 
			-moz-transform: translateY(40px); 
			opacity: 0;
		}
		100% { 
			-moz-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-o-keyframes moveUp{
		0% { 
			-o-transform: translateY(40px); 
			opacity: 0;
		}
		100% { 
			-o-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@-ms-keyframes moveUp{
		0% { 
			-ms-transform: translateY(40px); 
			opacity: 0;
		}
		100% { 
			-ms-transform: translateY(0px);  
			opacity: 1;
		}
	}

	@keyframes moveUp{
		0% { 
			transform: translateY(40px); 
			opacity: 0;
		}
		100% { 
			transform: translateY(0px);  
			opacity: 1;
		}
	}
	
	/* ---specials--- */
	.st-panel {
		height: 100%;
	}
	
	
	.st-tabs {
		position: relative;
		list-style-type: none;
		padding: 0;
		margin: 0;
		height: 99%;
	}
	.st-tabs > li {
		padding-bottom: 5px;
	}
	.st-tabs > li > h2 {
		width: 220px;
		border-radius: 20px 0 0 20px;
		border: 2px solid transparent;
		border-right: none; 
		margin: 0;
		padding: 8px 0;
		text-indent: 10px;
		height: 30px;
		text-align: left;
		background-color: rgba(100,100,50,0.5);
		width: 218px;
		font-size: 17px;
		padding: 0;
		line-height: 29px;
	}
	.st-tabs > li > section {
		display: none;
		position: absolute;
		left: 220px;
		right: 0;
		top: 0;
		height: 100%;
		border: 2px solid transparent;
	}

	.st-tabs > li:last-child > h2,
	.st-tabs > li:hover > h2,
	.st-tabs > li:last-child > h2 + section,
	.st-tabs > li:hover > h2 + section {
		background-color: rgba(30,30,30,.7);
		z-index: 2;

	}
	.st-tabs > li:last-child > h2,
	.st-tabs > li:hover > h2 {
		z-index: 3;
		width: 218px;
	}
	.st-tabs > li:hover ~ li:last-child > h2 {
		background: rgba(100,100,50,0.5);
		z-index: 1;
	}

	.st-tabs > li:last-child > h2 + section,
	.st-tabs > li:hover > h2 + section {
		display: block;
		height: 100%;
		overflow: auto;	
	}
	.st-tabs > li:last-child > h2 {
		z-index: 3;
	}
	.st-tabs > li:hover > h2 + section {
		display: block;	
	}
	.st-tabs > li:hover ~ li:last-child > h2 + section {
		display: none;
	}
	.st-tabs > li h2 {
		position: relative;
		top: 39px;
	}
	.st-tabs > li:last-child > h2 {
		position: absolute;
		top: 0px;
	}
	
	.st-tabs > li .skill-wrapper {
			opacity: 0;
			width: 0;
	}
	.st-tabs > li .skill-wrapper {
			opacity: 1;
			width: 100%;
	}
	.st-tabs > li:hover .skill-wrapper {
		-webkit-animation: skills 1s ease-in-out;
		-moz-animation: skills 1s ease-in-out;
		-o-animation: skills 1s ease-in-out;
		-ms-animation: skills 1s ease-in-out;
		animation: skills 1s ease-in-out;
	}
	
	@-webkit-keyframes skills{
		0% {
			opacity: 0;
			width: 0;
		}
		100% {
			opacity: 1;
			width: 100%;
		}
	}	
	@-moz-keyframes skills{
		0% {
			opacity: 0;
			width: 0;
		}
		100% {
			opacity: 1;
			width: 100%;
		}
	}	
	@-o-keyframes skills{
		0% {
			opacity: 0;
			width: 0;
		}
		100% {
			opacity: 1;
			width: 100%;
		}
	}	
	@-ms-keyframes skills{
		0% {
			opacity: 0;
			width: 0;
		}
		100% {
			opacity: 1;
			width: 100%;
		}
	}	
	@keyframes skills{
		0% {
			opacity: 0;
			width: 0;
		}
		100% {
			opacity: 1;
			width: 100%;
		}
	}
	
	/* --- special page content --*/
	figure {
		float: left;
		margin: 14px 40px;
	}
	
	#welcome > .container {
		padding: 8px;
		width:100%;
	    height: auto;
    	background-color: rgba(30,30,30,.8);
   	    opacity: 1;
	}

	#logo {
		position: absolute;
		margin: -160px 0 0 -160px;
	}
	
	/* --- !special page content --*/
}

@media screen and (min-width: 960px) {
	#st-nav {
		background-color: rgba(255,255,255,0.4);
		width: 10px;
		height: 10px;
		border-radius: 5px;
		position: absolute;
		top: 10px;
		right: 18px;
		z-index: 2;
		display: block;
	}
	
	#st-nav:before,
	#st-nav:after {
		border-radius: 2px;
		content: '';
		background-color: rgba(255,255,255,0.2);
		position: relative;
		z-index: 1;
		display: block;
	}

	#st-nav:before {
		width: 34px;
		height: 12px;
		top: -1px;
		left: -12px;
	}

	#st-nav:after {
		height: 34px;
		width: 12px;
		top: -24px;
		left: -1px;
	}

	#st-control-me-personally:checked ~ #st-nav {
		top: 44px;
		right: 33px;
	}
	#st-control-me-personally:checked ~ #st-nav:before {
		top: -13px;
		left: -12px;
	}
	#st-control-me-personally:checked ~ #st-nav:after {
		top: -36px;
		left: -1px;
	}
	#st-control-working-hard:checked ~ #st-nav {
		top: 34px;
		right: 44px;
	}
	#st-control-working-hard:checked ~ #st-nav:before {
		top: -1px;
		left: 0px;
	}
	#st-control-working-hard:checked ~ #st-nav:after {
		top: -24px;
		left: 11px;
	}
	#st-control-portfolio:checked ~ #st-nav {
		top: 34px;
		right: 21px;
	}
	#st-control-portfolio:checked ~ #st-nav:before {
		top: -1px;
		left: -23px;
	}
	#st-control-portfolio:checked ~ #st-nav:after {
		top: -24px;
		left: -12px;
	}
	#st-control-contact:checked ~ #st-nav {
		top: 24px;
		right: 33px;
	}
	#st-control-contact:checked ~ #st-nav:before {
		top: 10px;
		left: -12px;
	}
	#st-control-contact:checked ~ #st-nav:after {
		top: -12px;
		left: -1px;
	}

/* --- transitions --- */


	/* presun, zmena velikosti a rotace sipek */
	#link-me-personally,
	#link-working-hard,
	#link-portfolio,
	#link-contact {
		-webkit-transition: all 0.8s ease-in-out, width 0.8s step-start, height 0.8s step-start;
		-moz-transition: all 0.8s ease-in-out, width 0.8s step-start, height 0.8s step-start;
		-o-transition: all 0.8s ease-in-out, width 0.8s step-start, height 0.8s step-start;
		-ms-transition: all 0.8s ease-in-out, width 0.8s step-start, height 0.8s step-start;
		transition: all 0.8s ease-in-out, width 0.8s step-start, height 0.8s step-start;
	}
	#link-welcome {
		-webkit-transition: all 1.2s ease-in-out, width 0.8s step-start, height 0.8s step-start, -webkit-transform 1.6s ease-out;
		-moz-transition: all 1.2s ease-in-out, width 0.8s step-start, height 0.8s step-start, -moz-transform 1.6s ease-out;
		-o-transition: all 1.2s ease-in-out, width 0.8s step-start, height 0.8s step-start, -o-transform 1.6s ease-out;
		-ms-transition: all 1.2s ease-in-out, width 0.8s step-start, height 0.8s step-start, -ms-transform 1.6s ease-out;
		transition: all 1.2s ease-in-out, width 0.8s step-start, height 0.8s step-start, transform 1.6s ease-out;
	}
	
	
	/* vymena sipky ze ikonku betem rotace */
	#link-me-personally:before,
	#link-working-hard:before,
	#link-portfolio:before,
	#link-contact:before {
		-webkit-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-moz-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-o-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-ms-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
	}
	#link-me-personally:after,
	#link-working-hard:after,
	#link-portfolio:after,
	#link-contact:after {
		-webkit-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-moz-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-o-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		-ms-transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
		transition: all 0.8s ease-in-out, opacity 0s step-start 0.4s;
	}
	
	/* roztaceni sipky na rozcestniku resime samostatne */
	#st-control-me-personally:checked ~ #link-welcome:before,
	#st-control-working-hard:checked ~ #link-welcome:before,
	#st-control-portfolio:checked ~ #link-welcome:before,
	#st-control-contact:checked ~ #link-welcome:before {
		-webkit-transition: -webkit-transform 2s ease-out;
		-moz-transition: -moz-transform 2s ease-out;
		-o-transition: -o-transform 2s ease-out;
		-ms-transition: -ms-transform 2s ease-out;
		transition: transform 2s ease-out;
	}
	
	/* skryvani sipek na aktivni obrazovku */
	/* napred se zpruhledni a az pak se zmensi presune */
	#st-control-welcome:checked ~ #link-welcome,
	#st-control-me-personally:checked ~ #link-me-personally,
	#st-control-working-hard:checked ~ #link-working-hard,
	#st-control-portfolio:checked ~ #link-portfolio,
	#st-control-contact:checked ~ #link-contact {
		-webkit-transition: all 0s step-start 1s, opacity 1s ease-in;
		-moz-transition: all 0s step-start 1s, opacity 1s ease-in;
		-o-transition: all 0s step-start 1s, opacity 1s ease-in;
		-ms-transition: all 0s step-start 1s, opacity 1s ease-in;
		transition: all 0s step-start 1s, opacity 1s ease-in;
	}

	/* pokud je misto aktivni sipky ikonka, tak zpozdime jejich vymenu */	
	#st-control-me-personally:checked ~ #link-me-personally:before,
	#st-control-working-hard:checked ~ #link-working-hard:before,
	#st-control-portfolio:checked ~ #link-portfolio:before,
	#st-control-contact:checked ~ #link-contact:before,
	#st-control-me-personally:checked ~ #link-me-personally:after,
	#st-control-working-hard:checked ~ #link-working-hard:after,
	#st-control-portfolio:checked ~ #link-portfolio:after,
	#st-control-contact:checked ~ #link-contact:after {
		-webkit-transition: opacity 0s step-start 0.8s;
		-moz-transition: opacity 0s step-start 0.8s;
		-o-transition: opacity 0s step-start 0.8s;
		-ms-transition: opacity 0s step-start 0.8s;
		transition: opacity 0s step-start 0.8s;
	}
	
	/* barevne prechody oblastni "mimo" pri zmene obrazovky */
	.st-control:checked ~ .st-body {
		-webkit-transition: background-color 1s ease-in;
		-moz-transition: background-color 1s ease-in;
		-o-transition: background-color 1s ease-in;
		-ms-transition: background-color 1s ease-in;
		transition: background-color 1s ease-in;
	}

	/* znazorneni polohy */
	#st-nav,
	#st-nav:before,
	#st-nav:after,
	.st-control:checked ~ #st-nav,
	.st-control:checked ~ #st-nav:before,
	.st-control:checked ~ #st-nav:after {
		-webkit-transition: all 1s ease-in;
		-moz-transition: all 1s ease-in;
		-o-transition: all 1s ease-in;
		-ms-transition: all 1s ease-in;
		transition: all 1s ease-in;
	}
}