@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;
}
body {
	font-family: "exo_2";
	font-size:1.7vh;
	background:rgba(21,44,62,1);
	padding:0.5vh 0;
	margin: 0 0 0 0;
}
h1 {
	font-weight:normal;
	font-size:3.5vh;
}
#platno {
	width:80vw;
	height:99vh;
	margin:0 auto;
	padding:0.5vh 0;
	background:rgba(210,210,170,1);
}
header {
	width:80vw;
	height:7vh;
	padding:0 0;
	font-size:1.8vh;
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-flow:row nowrap;
}
header > section:nth-of-type(1) {
	height:6vh;
	margin:0 auto;
}
header > section:nth-of-type(1) > img {
	height:100%;
	width:auto;

}
header section:nth-of-type(2) {
	width:68vw;
	height:7vh;
	padding:1.2vh 0;
	background: rgba(21,44,62,1);
	color:rgba(223,223,189,1);
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
}
header section:nth-of-type(2) > p {
	letter-spacing:0.2vw;
	word-spacing:0.5vw;
}
#platno > div {
	display:flex;
	justify-content: space-between;
	flex-flow:row nowrap;
	align-items:flex-start;
	margin:0 auto;
	padding:0.5vh 0.2%;
	height:83vh;
	width:80vw;
}
#platno > div > aside {
	position:relative;
	top:0;
	left:0;
	margin:0 auto;
	width:12vw;
	height:82vh;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-between;
	align-items:center;
}
#platno > div > aside > div:first-child {
	width:11vw;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
}
#platno > div > aside > div:last-child {
	width:12vw;
	height:82vh;
	position:absolute;
	top:0;
	left:0;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
}
#platno > div > aside > div#lavy {
	justify-content:flex-end;
}
#platno > div > aside > div#pravy {
	justify-content:flex-start;
}
#platno > div > aside a {
	display:block;
	color:rgba(223,223,189,1);
	text-decoration:none;
}
#platno > div > aside > div:last-child > section img {
	height:25vh;
}
#platno > div > aside > div:last-child > section {
	height:25vh;
	width:3vw;
	opacity:0.2;
}
#platno > div > aside > div:last-child > section:hover {
	opacity:1;
	transition:opacity 0.5s;
}
.prepinac {
	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%;
	flex:1 2 100%;
	z-index:100;
	border-top: 0.15rem solid rgba(223,223,189,0.95);
}
.prepinac: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;
}
#platno > div > div {
	width:54vw;
	height:82vh;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#platno > div > div > section {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
	width:54vw;
	height:82vh;
	margin:0 auto;
}
#platno > div > div > section > section {
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-between;
	align-items:center;
	overflow:hidden;
	width:16vw;
	height:76vh;
	box-shadow: 0.15625rem 0.15625rem 0.7rem rgba(21,44,62,1);
	background:rgba(218,217,183,1);
}
#platno > div > div > div {
	position:absolute;
	top:0;
	left:0;
	width:56.8vw;
	height:82vh;
	padding:3vh 2.8vw 3vh 0.9vw;
	overflow:auto;
}
#platno > div > div > div > section {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:center;
	width:100%;
	margin:0 auto;
}
#platno > div > div > div > section:nth-of-type(1) {
	width:calc(54vw / 2.5);
	height:25vh;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	box-shadow: 0.15625rem 0.15625rem 0.7rem rgba(21,44,62,1);
	background:rgba(218,217,183,1);
}
#platno > div > div > div > section:nth-of-type(1) > div {
	width:18.66vw;
	flex-grow:0;
	text-align:center;
}
#platno > div > div > div > section:nth-of-type(2) {
	/*padding:0 0.5vh;*/
	padding-top:15vh;
}
#platno > div > div > div > section:nth-of-type(2) > div {
	width: calc((100% / 5) - (100% / 37));
	margin:3rem 0;
}
#platno > div > section {
	position:absolute;
	top:72vh;
	left:24.4vw;
	padding:0.5vh 0.5vw;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
	background:rgba(21,44,62,0.3);
	height:15vh;
	width:14vw;
}
#platno > div > section > section {
	width:13.72vw;
	height:2.5vh;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
}
#platno > div > section > section > * {
	margin:0 5%;
}
#platno > div > section > section > div {
	width:2.9vw;
	height:2.3vh;
}
#platno > div > section > section > span {
	width:13.034vw;
	font-size:1.8vh;
	color:rgba(21,44,62,1);
}
.geology, .hydrogeology, .engineering, .enviro, .geotech {
	flex-grow:5;
	height:9vh;
	color:rgba(223,223,189,1);
	padding:0 2%;
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	text-align:center;
	font-size:1.9vh;
}
.meth {
	font-size:2.5vh;
	color:rgba(21,44,62,1);
	margin:2rem auto 0 auto;
}
.geology {
	background:rgba(90,80,70,1);
}
.hydrogeology {
	background:rgba(65,85,115,1)
}
.engineering {
	background:rgba(55,80,65,1);
}
.enviro {
	background:rgba(30,130,90,1);
}
.geotech {
	background:rgba(135,115,90,1)
}
.legend {
	height:auto;
	border:0.01rem solid rgba(223,223,189,1);
	padding:0;
	flex-grow:0;
}
footer {
	height:7vh;
	width:80vw;
	font-size:1.45vh;
}
footer > div {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	height:7vh;
	width:80vw;
}
footer > div > div {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around;
	align-items:center;
	height:7vh;
}
footer > div > div:nth-of-type(1) {
	flex:4 2 84%;
	background:rgba(21,44,62,1);
	color:rgba(223,223,189,1);
}
footer > div > div > div {
	height:7vh;
	display:flex;
	flex-flow:column nowrap;
	justify-content:space-around;
}
footer > div > div > div:nth-of-type(1) > section {
	padding:0 8%;
	height:3vh;
	width:18.5vw;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	font-size:2vh;
}
footer > div > div > div:nth-of-type(1) > section * {
	margin:0 3%;
}
footer > div > div:nth-of-type(2) {
	flex:1 2 15%;
}
footer > div > div:nth-of-type(2) > img {
	margin:0 auto;
	height:7vh;
	width:auto;
}
footer::after {
	display:block;
	color:rgba(21,44,62,1);
	width:80vw;
	font-size:1.2vh;
	text-align:center;
	content:"EchoFrame s.r.o. - Copyright \a9\20 All rights reserved";
}