@charset "UTF-8";
/*komentar*/
@font-face {
	font-family: 'exo_2';
	src: url('../font/Exo_2/exo2-bold-webfont.eot');
	src: url('../font/Exo_2/exo2-bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/Exo_2/exo2-bold-webfont.woff2') format('woff2'),
	url('../font/Exo_2/exo2-bold-webfont.woff') format('woff'),
	url('../font/Exo_2/exo2-bold-webfont.ttf') format('truetype'),
	url('../font/Exo_2/exo2-bold-webfont.svg#exo_2bold') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'exo_2';
	src: url('../font/Exo_2/../exo2-bolditalic-webfont.eot');
	src: url('../font/Exo_2/exo2-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/Exo_2/exo2-bolditalic-webfont.woff2') format('woff2'),
	url('../font/Exo_2/exo2-bolditalic-webfont.woff') format('woff'),
	url('../font/Exo_2/exo2-bolditalic-webfont.ttf') format('truetype'),
	url('../font/Exo_2/exo2-bolditalic-webfont.svg#exo_2bold_italic') format('svg');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'exo_2';
	src: url('../font/Exo_2/exo2-italic-webfont.eot');
	src: url('../font/Exo_2/exo2-italic-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/Exo_2/exo2-italic-webfont.woff2') format('woff2'),
	url('../font/Exo_2/exo2-italic-webfont.woff') format('woff'),
	url('../font/Exo_2/exo2-italic-webfont.ttf') format('truetype'),
	url('../font/Exo_2/exo2-italic-webfont.svg#exo_2italic') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family:'exo_2';
	src: url('../font/Exo_2/exo2-regular-webfont.eot');
	src: url('../font/Exo_2/exo2-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/Exo_2/exo2-regular-webfont.woff2') format('woff2'),
	url('../font/Exo_2/exo2-regular-webfont.woff') format('woff'),
	url('../font/Exo_2/exo2-regular-webfont.ttf') format('truetype'),
	url('../font/Exo_2/exo2-regular-webfont.svg#exo_2regular') format('svg');
	font-weight:normal;
	font-style:normal;
}
* {
	box-sizing:border-box;
	padding:0;
	margin:0;
}
a {
	text-decoration:none;
	color:blue;
}
body {	font-family: "exo_2";
	font-size:1.7vh;
	padding:0.5vh 0;
	background:rgba(21,44,62,1);
}
#image {
	background: url(../obr/bg.png) fixed center;
	width:100vw;
	height:99vh;
}
#platno {
	width:80vw;
	height:99vh;
	margin:0 auto;
	padding:0.5vh 0;
	background:rgba(210,210,170,1);
}
header {
	width:80vw;
	height:13vh;
	padding:0 0.5vw;
	text-align:center;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-between;
	align-items: center;
}
header > div {
	width:79vw;
	font-size:1.6vh;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
header > div:first-child {
	height:7vh;
}
header > div:last-child {
	height:5vh;
}
header > div > section {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
header > div img {
	height:6vh;
	width:auto;
}
header > div > section:first-child {
	width:10vw;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
/*header > div:last-child > section:first-child a {
	width:4vw;
	height:3vh;
	display:block;
	padding:0.4vh 0;
}*/
header > div:first-child > section:last-child {
	padding:0 0.1vw;
	width:67vw;
	height:7vh;
	background:rgba(21,44,62,1);
	color:rgba(238,238,189,1);
	box-shadow:-0.15625rem 0.15625rem 0.7rem rgba(21,44,62,1);
}
header > div:last-child > section:last-child {
	width:67vw;
}
header > div:last-child > section:last-child {
	width:67vw;
	height:5vh;
	border-top:0.2vh solid rgba(21,44,62,1);
}
header > div:last-child > section:last-child > a {
	display:block;
	width:100%;
	height:4vh;
	color:rgba(21,44,62,1);
	border-left:0.06vw solid rgba(21,44,62,0.3);
}
header > div:last-child > section:last-child > a:hover {
	height:4.5vh;
	background:rgba(21,44,62,1);
	box-shadow:0px -0.1vh 0px 0px tomato;
	color:rgba(238,238,189,1);
	font-size:1.65vh;
	padding:0.25vh 0;
	transition: background 1s, color 0.5s;
}
header > div:last-child > section:last-child > a:hover +a {
	border-left:0.06vw solid transparent;
}
header > div:last-child > section:last-child > a:last-child {
	border-right:0.06vw solid rgba(21,44,62,0.3);
}
#platno > div {
	height:85vh;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
#platno > div > aside {
	width:11vw;
	height:85vh;
	padding-top:1vh;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	align-items:center;
}
#platno > div > aside > section:first-child {
	width:10vw;
	height:4vh;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
#platno > div > aside > section:last-child {
	width:10vw;
	height:76vh;
	margin-top:5vh;
	border:0.06vw dotted rgba(21,44,62,1);
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
#platno > div > aside:first-child > section a {
	width:9vw;
	height:3vh;
	display:block;
	padding:0.4vh 0;
	text-align:center;
}
#platno > div > aside:last-child > section a {
	width:4vw;
	height:3vh;
	display:block;
	padding:0.4vh 0;
	text-align:center;
}
#platno > div > div {
	width:55vw;
	height:85vh;
	/*padding:4vh 0;*/
	position:relative;
	overflow:hidden;
}
#platno > div > div > div {
	position:absolute;
	top:4vh;
	left:-1vw;
	text-align:justify;
	width:57.6vw;
	height:81vh;
	padding:0 1.5vw;
	overflow:auto;
	font-size:2.1vh;
	line-height:2rem;
	background:/*rgba(223,223,189,1);*/
}
#platno > div > div > div > article > p {
	margin:2vh auto;
}
#platno > div > div > div > article > p:first-letter {
	font-size:2.6vh;
}
#platno > div > div > div > article:after {
	display:block;
	width:50vw;
	font-size:1.2vh;
	padding:1vh 0;
	text-align:center;
	content:"EchoFrame s.r.o. - Copyright \a9\20 All rights reserved";
}
#platno > div > div > div > section {
	font-size:1.7vh;
	margin-bottom:15vh;
}
.button {
}
.switch {
	padding:0.2vh;
	background: linear-gradient(to bottom, rgba(21,44,62,1), rgba(25,60,68,1), rgba(30,75,66,1), rgba(34,91,67,1), rgba(39,107,69,1), rgba(43,123,70,1),rgba(48,139,71,1), rgba(52,155,73,1), rgba(57,170,75,1));
	text-align:center;
	font-size:1.7vh;
	margin:0 1%;
	color: rgba(223,223,189,1);
	flex:1 2 100%;
	z-index:100;
	border-top: 0.15rem solid rgba(223,223,189,0.95);
}
.switch:hover {
	border-top: 0.2vh solid rgba(255,33,55,1);
	box-shadow: -0.15625rem 0.15625rem 0.7rem rgba(21,44,62,0.7);
	color: rgba(223,223,189,1);
	transition: box-shadow 0.3s, border-top 1s;
}
#active {
	height:4.5vh;
	background:rgba(21,44,62,1);
	box-shadow:0px -0.1vh 0px 0px tomato;
	color:rgba(238,238,189,1);
	font-size:1.7vh;
	padding:0.25vh 0;
}
#active +a {
	border-left:0.06vw solid transparent;
}