body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	background-color: #f3f3f3;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

main {flex: 1;}

@font-face {
  font-family: 'Roboto';
  font-weight: 100 900;
  src: url('../fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}

* {padding: 0; margin: 0;}
a {text-decoration: none;}
	
.container {margin: auto; max-width: 1366px;}

	.visually-hidden {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  margin: -1px;
	  padding: 0;
	  overflow: hidden;
	  clip: rect(0 0 0 0);
	  white-space: nowrap;
	  border: 0;
	}

	@keyframes blink {
	  0%, 100% { opacity: 1; }
	  50% { opacity: 0.5; }
	}

	.blinking {
	  animation: blink 3s linear infinite;
	}

/*** komponenty stránky ***/

.caption h2 {
	display: block;
	text-align: center;
	padding: 75px 25px 0 25px;
	margin: auto;
	font-size: 18px;
	font-weight: 700;
	color: #0a1e25;
}

.back-btn {display: block; width: max-content; margin: auto; padding: 15px 0; text-align: center;}
.back-btn a {
	display: block;
	width: max-content;
	height: 35px;
	margin: auto;
	padding: 5px;
	background: #e1e3e5;
	border-radius: 5px;
}
.back-btn svg {display: inline-block; padding: 5px; border-radius: 5px;}
.back-btn span {float: right; display: inline-block; line-height: 35px; font-weight: 600; color: #0a1e25; margin: 0 15px 0 0;}

.back-btn a:hover 			{background: #39464a;}
.back-btn a:hover > svg 	{fill: #fff;}
.back-btn a:hover > span 	{color: #fff;}

/*** footer ***/

#footer {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	padding: 25px 0 75px 0;
	margin: auto;
}

	#footer-socialmedia 	{display: block;}
	#footer-socialmedia a 	{display: inline-block; padding: 5px;}
	#footer-socialmedia img {display: block; max-width: 30px; height: auto; aspect-ratio: 1/1; opacity: 0.75;}
	#footer-socialmedia a:hover > img {opacity: 1;}

	#footer-copyright {display: block; color: #4f5555;}

@media screen and (max-width: 1366px) {
	.container{max-width: 1366px;}
}

@media screen and (max-width: 1024px) {
	.container{max-width: 1024px;}
}

@media screen and (max-width: 960px) {
	.container{max-width: 960px;}
}

@media screen and (max-width: 768px) {
	.container{max-width: 768px;}
}

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

@media screen and (max-width: 480px) {
	.container{max-width: 480px;}
}