@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/josefinsans-bold.eot');
    src: url('fonts/josefinsans-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinsans-bold.woff2') format('woff2'),
         url('fonts/josefinsans-bold.woff') format('woff'),
         url('fonts/josefinsans-bold.ttf') format('truetype'),
         url('fonts/josefinsans-bold.svg#josefin_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/josefinsans-bolditalic.eot');
    src: url('fonts/josefinsans-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinsans-bolditalic.woff2') format('woff2'),
         url('fonts/josefinsans-bolditalic.woff') format('woff'),
         url('fonts/josefinsans-bolditalic.ttf') format('truetype'),
         url('fonts/josefinsans-bolditalic.svg#josefin_sansbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/josefinsans-italic.eot');
    src: url('fonts/josefinsans-italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinsans-italic.woff2') format('woff2'),
         url('fonts/josefinsans-italic.woff') format('woff'),
         url('fonts/josefinsans-italic.ttf') format('truetype'),
         url('fonts/josefinsans-italic.svg#josefin_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/josefinsans-regular.eot');
    src: url('fonts/josefinsans-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinsans-regular.woff2') format('woff2'),
         url('fonts/josefinsans-regular.woff') format('woff'),
         url('fonts/josefinsans-regular.ttf') format('truetype'),
         url('fonts/josefinsans-regular.svg#josefin_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;}


/**************** GENERAL *********************/
*, *::before, *::after {position:relative; box-sizing:border-box;}
body, html {height:100%; width:100%;line-height: 1;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
/*small,*/ strike, strong, /*sub, sup,*/ tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;/*TOTAL RESET*/
	vertical-align: baseline; 
}
:-moz-ui-invalid,
:invalid,
:-moz-submit-invalid {
    box-shadow: none;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body  {
text-rendering: optimizeLegibility;  font: 100%/1.5 }

body,input,button  {-webkit-font-smoothing: antialiased; }
h1 { font-size: 2em;       /* 2*16 = 32 */         }
h2 { font-size: 1.5em;     /* 1.5*16 = 24 */       }
h3 { font-size: 1.17em;    /* 1.17*16 = 18.72 */   }
h4 { font-size: 1em;       /* 1*16 = 16 */         }
h5 { font-size: 0.83em;    /* 0.83*16 = 13.28 */   }
h6 { font-size: 0.75em;    /* 0.75*16 = 12 */      }

p { text-indent: 2em;
	text-align: justify;
    margin: 0 0 1em;}
p+p { margin-top: -0.5em;}
h1+p,h1+p,h3+p,h4+p,h5+p,h6+p {margin-top: 1em;}
strong,b  {font-weight: bold;}
em,i {font-style: italic;}
code, pre {
	font-family: monospace, serif;
    font-size: 1em; }
blockquote {font-style: italic;}
 
blockquote:before { 
 content: "\201C";
 display: inline-block;
 padding-right: .4em;
}
p,h2,h3 {orphans: 3;widows: 3;}
h2,h3 {page-break-after: avoid;}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.ico {cursor:pointer;}

body {font-family:"Josefin Sans"; background-color:rgb(41, 41, 41);}


@keyframes processing {
	100% {opacity: 0; background-size: 100% 100%;}}

/********************** LAYOUT ***************************/
#app {
	display: flex;
	height: 100vh;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	flex-direction: column;
	min-width: 960px;
	z-index: 10000;
}
.lg-on #app {display: none;} /*Avoid display clash between app and lightGallery*/
header {
  flex: 0 0 auto;
}
#app > section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}
footer {
  flex: /*0 1 auto*/1;
	background-image: linear-gradient(90deg,rgb(0, 106, 150),rgb(77, 119, 26));
	padding: 10px;
	margin: 10px 0 0 0;
}
main {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	max-width: calc(100% - 310px);
}
content {
	background-color: white;
	flex: 1 1 auto;
	/*transition: all 0.3s;*/
	padding: 20px 50px 50px;
	transform-origin: top;
	max-width: calc(100% - 300px);
}
#content::before { /*white canvas visible before render*/
	position: absolute;
	/*content: "";*/
	background-color: white;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(100vw - 310px);
}
content::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	content: "";
	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s .3s, opacity .3s;
}
[data-loading] content::after {
	visibility: visible;
  	opacity: 1;
  	transition: opacity .3s;
}
aside {
	flex: 0 0 300px;
}
aside#right {
	background-color: #bed2ec;
	margin: 0 10px 0 0;
	background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.2),transparent 5px);
}
@media (max-width:1000px){
	#app > section {flex-direction: column;}
	#app > section > aside {
	flex: 0 1 auto;
	background-image: linear-gradient(90deg,rgb(0, 106, 150),rgb(77, 119, 26)) !important;
	text-align: center;
	padding: 10px 5px 5px 5px;
	box-shadow: none;}
	aside#right,footer {margin: 0;}
	main {max-width: 100%;}
	content {max-width: calc(100% + 10px) !important;}
}
@media (max-width:666px){aside {flex: 0 0 200px;}}

.rightless main {max-width: calc(100% - 10px);}
.rightless content {max-width: calc(100% - 300px);}
.rightless aside#right {flex: 0 0 0;}
.rightless aside#right * {display: none;}
.rightless #breadcrumbs .news::before, .rightless #breadcrumbs .news i {display: none;}
.rightless #breadcrumbs .news {width: 0 !important; font-size: 0;}
.rightless #breadcrumbs .news::after {
  background-image: linear-gradient(#575657,#545757);
  background-size: 100%;
  box-shadow: -1px 1px 1px rgba(188, 233, 135, 0.4) inset;
}
.rightless #right a.news {display: none;}

/***************** TOPSTRIP *************************/
header h1 {
	color: rgb(101, 117, 93);
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 2px 1px rgba(255, 255, 255, 0.1), 0 -1px 1px rgb(0, 0, 0);
	padding: 15px 15px 15px 15px;
	font-size: 2vw;
	height: 64px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	transition: all .6s;
	background-image: linear-gradient(rgba(17, 41, 53, 0.8) 50%,rgba(0, 0, 0, 0));
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% 0;
	z-index: 1;
	cursor: pointer;
}
header h1 a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
}
header h1 a:hover {
	color: white;
}
.flat header h1 {
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 2px 1px rgba(255, 255, 255, 0.1), 0 -1px 1px rgb(0, 0, 0);
	margin-bottom: -100px;
	color: rgb(255, 255, 255);
	padding: 0px 0 15px 100px;
	background-size: 100% 100%;
	height: 100px;
}
header h1 br {display: none;}
@media (max-width: 1400px) {header h1  {font-size: 28px;}}
@media (min-width: 1600px) {header h1  {font-size: 32px;}}
@media (max-width: 1000px) {header h1 > br {display: block;}
	header h1 {font-size: 27px; line-height: 1;}
}
/*
header h1 > .ico {
	position: absolute;
	height: 100%;
	width: 112px;
	left: 0;
	top: 0;
}
.flat header h1 > .ico {
	left: 0;
	top: 0;
	background-image: url(images/logo.svg);
	background-repeat: no-repeat;
	background-position: 17px 5px;
	background-size: 75px;
}
header h1 > .ico::before {
	padding: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	content: "";
	background-color: white;
	border-width: 35px;
	border-style: none solid;
	transform: skew(30deg) translateX(-50%);
	border-color: transparent rgb(194, 230, 50) transparent rgb(70, 176, 234);
	box-shadow: 0 0 5px black,0 0 15px black;
	opacity:1;
	transition:opacity 0.3s;
}
.flat header h1 > .ico::before {opacity:0;}*/

#progessBar {
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.1);
	height: 0;
	top: -16px;
	background-color: rgba(134, 170, 6, 0.3);
	transition: height .2s;
}

[data-loading ] #progessBar {height:8px;}

#progessBar::after {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(90deg,rgba(125, 195, 219, 0),rgb(125, 195, 219) 50%);
	transform: skew(30deg);
	transform-origin: bottom;
	background-size: 0 100%;
	background-repeat: no-repeat;
	background-position: left top;
	opacity: 1;

}
[data-loading ] #progessBar::after {
	ms-animation: processing 2s infinite;
	animation: processing 2s infinite}

/************************* USER ****************************/
#adminmenu {
	position: absolute;
	top: 0;
	right: 0;
	transition: all .6s;
}
.flat #adminmenu {top:15px;}
#adminmenu input[type=checkbox] {display: none;}
#adminform {
	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s .3s, opacity .3s;
	position: absolute;
	z-index: 100;
	right: 150px;
	top: 64px;
	padding: 0 15px 15px 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
	background-color: rgba(255, 255, 255, 0.7);
	background-image: linear-gradient(white,rgba(255, 255, 255, 0.0));
}
input:checked ~ #adminform {
	visibility: visible;
  	opacity: 1;
  	transition: opacity .3s, background-color .2s;}
#adminform::before,#adminform::after  {
	content: "";
	top: -16px;
	transform: skew(-30deg);
	transform-origin: bottom;
	position: absolute;
	width: 100%;
}

#adminform::before {
	background-color: white;
	box-shadow: 0 8px 0 #c2e632 inset;
	left: 0;
	height: 16px;
}
#adminform::after {
	background-image: linear-gradient(90deg,#46b0ea,#218be6);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-position: left top;
	height: 8px;
	left: 5px;
}

#adminform.processing {
	pointer-events: none;
	background-color: rgba(255, 255, 255, 0.4);
}
#adminform.processing::after {
    -ms-animation: processing 1s infinite ease-in-out; 
    animation: processing 1s infinite ease-in-out;
}
#adminform [type="text"], #adminform [type="password"] {
	border: none;
	border-bottom: 1px solid silver;
	padding: 5px;
	font-size: 16px;
	background-color: transparent;
	transition: all .2s;
}
#adminform.talking [required]:invalid {border-bottom: 1px solid #b90027;}
#adminmenu:not(.unlogged) input {pointer-events: none;}
#adminform .warning {
	color: #b90027;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 9px;
	height: 0px;
	display: flex;
	align-items: center;
	overflow: hidden;
	opacity: 0;
	transition: all .2s;
}
#adminform .warning::before {
	content: "";
	width: 9px;
	background-color: #b90027;
	transform: skew(30deg);
	display: inline-block;
	top: -1px;
	height: calc(100% + 1px);
	margin-right: 15px;
	transform-origin: top;
}
#adminform.talking [required]:invalid + .warning {opacity: 1; height: 15px;}

[type="submit"] + label {
	height: 30px;
	margin-top: -30px;
	cursor: pointer;
	display: none;
}
[type="submit"] + label::after {
	position: absolute;
	content: "âť—";
	right: -3px;
	top: -3px;
	background-color: #ff003f;
	display: flex;
	width: 20px;
	height: 20px;
	font-weight: bold;
	color: white;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.5);
	border-radius: 100%;
	transition: all 0.2s;
	transform: scale(0);
	opacity: 0;
}
[type="submit"] + label:hover::after {transform: scale(1);opacity: 1}
#adminform [required]:invalid ~ [type=submit]+label {display: block;}
 
#adminform hr  {height: 10px; opacity: 0;}
#adminform .button {
	display: block;
	width: 100%;
	padding: 5px 5px 5px 50px;
	text-transform: uppercase;
	background-image: linear-gradient(#3e3e3e,#2a2a2a);
	border: 1px solid transparent;
	border-bottom-color: #101010;
	border-top-color: #3f3f3f;
	font-weight: bold;
	color: #98aa06;
	text-shadow: 0 -1px 1px black;
	margin: 0 0;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	overflow: hidden;
	z-index: 0;
}
#adminform .button::before, #adminform .button::after {	position: absolute;
	left: 0;	content: ""; transition: all .2s;}
#adminform .button::before {
	width: 45px;
	top: 0;
	background-color: rgba(0, 0, 0, 0.3);
	height: 100%;
	border-right: 3px solid rgba(204, 255, 0, 0.4);
	transform: skew(30deg);
	transform-origin: bottom;
	z-index: -1;
}
#adminform .button:hover::after {opacity: 1;}
#adminform .button:hover::before {width: calc(100% + 20px);}
#adminform .button::after {
	height: 80%;
	width: 30px;
	top: 5%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.5;
}
#logoutbutton::after {background-image: url(images/farewell.svg);}
#adminbutton::after {background-image: url(images/settings.svg);}
#webdiskbutton::after {background-image: url(images/intranet.svg);}
#webmailbutton::after {background-image: url(images/webmail.svg);}
#adminform [type=submit] {text-align: center; padding: 5px; box-shadow: 0 0 0 30px rgba(0, 0, 0, 0) inset; transition: all .2s;}
#adminform [type=submit]:hover {color: white; box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.3) inset;}

#loggedInfo {
	padding: 5px;
	font-weight: bold;
	color: #617319;
}

#loginResult {
	padding: 5px 15px;
	margin-top: 15px;
	font-weight: bold;
	line-height: 15px;
	/*text-shadow: 0 0 2px white, 0 0 4px white, 0 0 8px white, 0px 1px white;*/
	transition: all .2s;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.6);
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0,0,0,0.50);
	border-style: none solid;
	border-width: 4px;
	color: transparent;
}
#loginResult:empty {margin: 0;padding: 0; box-shadow: none;}
#loginResult::before, #loginResult::after {
	position: absolute;
	content: "";
	height: 15px;
	width: 8px;
	transform: skew(-30deg);
	opacity: 1;
	transition: opacity .2s;
	box-shadow: 0 0 0 20px currentColor inset;
}
#loginResult:empty::before, #loginResult:empty::after {opacity: 0;}
#loginResult::before {
	top: 0;
	left: 0px;
	transform-origin: right top;;
}
#loginResult::after {
	bottom: 0;
	right: 0;
	transform-origin: left bottom;
}
#loginResult.success {color: #39440f}

#loginResult.fail {color: #b90027}

#usericon {
	position: absolute;
	top: 12px;
	right: 100px;
	height: 38px;
	width: 38px;
	cursor: pointer;
	z-index: 2;
}
#usericon[data-user] {height:30px; width:30px;}
#usericon::before {
	content: "";
	position: fixed;
	top: 0;
	right:0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.50);
	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s .3s, opacity .6s;
}
input:checked ~ #usericon::before {
	visibility: visible;
  	opacity: 1;
  	transition: opacity .6s;}

#usericon[data-user]::after {
	content: attr(data-user);
	color: white;
	position: absolute;
	top: 90%;
	left: 50%;
	text-align: center;
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
	opacity: 1;
	transition: opacity .2s;
}
#usericon[data-user]:hover::after, input:checked ~ #usericon::after {opacity: 0;}
#usericon i {
	position: absolute;
	bottom: 0;
	left: -2px;
	width: 100%;
	height: 50%;
	color: white;
	border-radius: 50% 50% 25% 25%;
	background-color: #292929;
	border: 2px solid currentColor;
	box-sizing: content-box;
	box-shadow: 0 0 5px black;
	top: 10px;
	transition: all .6s cubic-bezier(0.68, -1, 0.265, 2);
}
#usericon:hover i {
	background-color: #111;
	transform: translateY(5px);
}
#usericon i::before, #usericon i::after {
	content: "";
	position: absolute;
	background-color: inherit;
	border: inherit;
	transition: inherit;
}
#usericon i::before {
	top: 60%;
	width: 70%;
	left: 15%;
	height: 70%;
	border-top: none;
	border-radius: 30% 30% 100% 100%;
}
#usericon i::after {
	width: 60%;
	height: 120%;
	left: 20%;
	top: -100%;
	border-radius: 100%;
	box-shadow: inherit;
	transition: all 1s cubic-bezier(0.68, -1, 0.265, 2);
}
#usericon:hover i::after {transform: translateY(-3px);}

/********************* LANGSWITCH *****************************************/
#langswitch {
	position: absolute;
	top: 10px;
	right: 29px;
	width: 48px;
	background-color: rgba(15, 42, 69, 0.75);
	z-index: 1;
	color: rgb(255, 255, 255);
	padding: 0 0 14px;
	text-align: center;
	box-shadow: 0 0 0 1px rgb(255, 255, 255) inset, 0 0 5px 1px rgba(26, 39, 54, 0.42);
	cursor: pointer;
	background-image: url(images/cs.svg);
	height: 29px;
	transition: all .6s;
}
.flat #langswitch {top:25px;}
#langswitch.cs {background-image: url(images/cs.svg);}
#langswitch.en {background-image: url(images/en.svg);}
#langswitch::after {
	position: absolute;
	content: "";
	background-color: rgb(16, 110, 161);
	height: 75%;
	width: 75%;
	left: 54%;
	top: 60%;
	box-shadow: 0 0 0 1px rgb(255, 255, 255) inset, 0 0 2px 1px rgba(26, 39, 54, 0.42);
	transition:all 0.3s;
}
#langswitch:not([data-blocked]):hover::after {top:0; left:0; height:100%; width:100%;}
#langswitch.cs::after {background-image: url(images/en.svg);}
#langswitch.en::after {background-image: url(images/cs.svg);}
#langswitch::before {
    position: absolute;
    top: 0;
    left: -5%;
    content: "";
    width: 140%;
    height: 140%;
    background-color: rgba(0, 0, 0, 0);
}

/****************** HERO ****************************/
#hero {
	height: 600px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	background-color: white;
	transition: height .6s;
	overflow: hidden;
	margin-bottom: 30px;
}
.large #hero {	z-index: 1;
}
#hero::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.1);
	top: 0;
	z-index: 1;
	left: 0;
	position: absolute;
}
.headbg {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow:hidden;
	transition:all .6s;
}
.headbg::before, .headbg::after {
	position: absolute;
	content: "";
	}

.headbg::before {
	top: 0;
	bottom: 0;
	background-image: inherit;
	background-size: cover;
	background-position:top center;
	transition:all .6s;
}
.headbg:nth-of-type(1)::before {background-color: rgb(21, 65, 33);}
.headbg:nth-of-type(2)::before {background-color: rgb(13, 41, 54);}


.headbg::after {
	height: 250px;
	width: 200%;
	transition:all .6s;
}

.headbg:nth-of-type(1)::after {
	bottom:0;
	background-image: radial-gradient(ellipse at bottom left,rgb(0, 27, 29),rgba(0, 40, 74, 0) 75%);
	}

.large .headbg:nth-of-type(2)::after {
	top:0;
	right:0;
	background-image: radial-gradient(ellipse at top right,rgb(0, 27, 29),rgba(0, 40, 74, 0) 75%);
	}
.flat .headbg:nth-of-type(2):after {
	bottom:0;
	right:0;
	background-image: radial-gradient(ellipse at bottom right,rgb(0, 27, 29),rgba(0, 40, 74, 0) 75%);	
	}
/*.large #hero .ico {
	position: absolute;
	left: calc(50% - 60px);
	top: calc(50% - 60px);
	height: 120px;
	width: 120px;
	border: 2px solid rgb(255, 255, 255);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 100px;
	color: rgb(194, 230, 50);
	background-image: url(images/logo.svg),linear-gradient(45deg,rgba(3, 37, 59, 0.9),rgba(66, 113, 15, 0.9));
	background-size: 90%,100%;
	background-position: 90% 50%;
	background-repeat: no-repeat;
}*/
#hero .ico {
	position: absolute;
	height: 120px;
	width: 120px;
	transition: all 0.3s;
	z-index: 1;
}
.large  #hero .ico {
	left: calc(50% - 60px);
	top: calc(50% - 60px);}

.flat #hero .ico {
	left: -8px;
	top: -19px;
	transform: scale(0.7);
}
/*
#hero .ico::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 100%;
	transform: rotate(-60deg) scale(1.2,0.8);
	border: 3px solid white;
	background-image: linear-gradient(-60deg,rgba(194, 230, 50, 0.3),rgba(70, 176, 234, 0.3)),linear-gradient(-70deg,transparent,#021f1e 45%,#021927 55%,transparent);
	transition: all 0.3s;
}
.flat #hero .ico:before {opacity: 0;}
#hero .ico:hover::before {
	background-color: yellowgreen;
	box-shadow: 0 0 100px rgba(154, 205, 50, 0.5) inset;
}

#hero .ico::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	background-image: url(images/logo.svg);
	background-size: 90%;
	background-position: 90% 83%;
	background-repeat: no-repeat;
}*/
#hero .ico::after {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 750 1000' xml:space='preserve'%3E%3Cellipse fill='%23789904' transform='rotate(-68 374.5 499.8)' cx='374.5' cy='499.8' rx='515.5' ry='338.1'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M167.1 901.7C63.2 788.5 80.9 504 133.7 369.4c77.2-148.2 84.6-161.3 104.9 23.5 17.7 212.4-17.2 194.2 107.5 17.7 73.6-68.9 140.4-145.6 218.2-212.9 13.6-25.1 19.3-59 55.8-55.8 21.4 18.3-2.6 36-16.7 51.1-131.5 76.7-385.7 321-369.5 496.3 33.4-16.7 56.9-104.9 93.9-134.7 97.6-124.2 218.7-180.1 330.9-285 59-25.1 26.1 54.3-39.7 54.3-177.4 111.8-291.7 226.6-385.1 414-53.8 24-20.9 154.4-66.8 163.8z'/%3E%3Cpath d='M263.1 766.6c-38.6-30.3 174.8-206.2 207.7-230.2 33.9-21.9 237.5-176.9 248.4-116.4-22.4 40.2-44.4 35-80.4 35-143 71.5-278.7 169.1-364.8 306.9-4.6 3.6-4.6 3.6-10.9 4.7z'/%3E%3Cpath d='M162.9 951.8C124.3 920 363.8 713.9 391 694.5c26.1-16.2 193.1-119.5 193.1-59-74.6 186.3-219.2 228.6-387.8 305.8-10.5 9-19.8 10-33.4 10.5z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 8px #001c25);
}
.flat #hero .ico::after {
	transform: scale(0.75);
}
.large.collapsed #hero .ico {
	transform: scale(0.5);
}

/*************** hero, math **********************/
.large #hero {height: /*585px; EIGHT ITEMS*/461px;}
.large.collapsed #hero {height: 77px;}
.large .headbg {transform: skew(30deg);
         width:calc(50% + 169px);}
.large .headbg:nth-of-type(1) {left: -171px;}
.large .headbg:nth-of-type(2) {right: -171px;}
.large .headbg::before        {transform: skew(-30deg);
                        left: -169px;
                        right: -169px;}
                        
.flat #hero {height: 350px;}
.flat .headbg {transform: skew(30deg);}
.flat .headbg:nth-of-type(1) {left: -103px; width:calc(66% + 73px);}
.flat .headbg:nth-of-type(2) {right: -103px; width:calc(34% + 133px);}
.flat .headbg::before        {transform: skew(-30deg);
                        left: -101px;                        right: -101px;}


/*************** NAVTILES **********************/
#hero nav {
	width: 100%;
	position: absolute;
}
#hero nav:nth-of-type(1) {	bottom: /*75px*/14px; left:15px;}
#hero nav:nth-of-type(2) { right: 15px;}
.flat  #hero nav {bottom:75px;}
.large nav:nth-of-type(2) {top: 75px;}
.large.collapsed #hero nav:nth-of-type(1) {
	bottom: -494px;}

#hero > nav > h2 {
	height: 75px;
	width: 50%;
	position: absolute;
	display: flex;
	font-size: 40px;
	text-shadow: -1px -1px 1px rgb(4, 30, 42), -1px 0px 1px rgb(4, 30, 42),-1px 1px 1px rgb(4, 30, 42),0px -1px 1px rgb(4, 30, 42),0px 0px 1px rgb(4, 30, 42),0px 1px 1px rgb(4, 30, 42),1px 0px 1px rgb(4, 30, 42),1px 1px 1px rgb(4, 30, 42),0px 0px 5px rgb(4, 30, 42),0px 0px 10px rgb(4, 30, 42),0px 0px 15px rgb(4, 30, 42),0px 0px 20px rgb(4, 30, 42);
	white-space: nowrap;
	align-items: center;
	padding: 0 15px;
	transition:color .3s;
}
#hero > nav > h2 a {
	text-decoration: none;
	color: inherit;
}
.collapsed #hero > nav > h2 a {
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
}
#hero > nav:hover > h2 {color:white;}

#hero .functional-ecology h2 {
	left: -15px;
	color: rgb(194, 230, 50);
}

#hero .algology-centre h2 {
	justify-content: flex-end;
	right: -15px;
	color: rgb(125, 195, 222);
}

.flat nav h2 { bottom:-75px;}
.large nav h2 {top: -75px;}
.large.collapsed nav:first-of-type h2 {top: -197px;}

/************* navtiles: tiles **************************/
#hero > nav > a {
	border-color: rgb(255, 255, 255);
	border-style: solid;
	padding: 10px 15px;
	border-width: 0 2px;
	z-index: 1;
	transition: box-shadow 0.3s;
	font-size: 13px;
}

.large nav > a {
	width: 15vw;
	min-width: 150px;
	max-width: 275px;
	margin: 2px 15px;}
	
.flat nav > a {
	width: calc(16.7% - 35px);
	margin: 2px 15px;}

.large nav > a.break-large + a,
.large nav > a:first-of-type {width:calc(15vw + 25px); min-width:175px; max-width:300px;}

.flat nav > a.break-flat  + a,
.flat nav > a:first-of-type {width:calc(16.6% - 6px);}

#hero > nav > a::before {
	background-image:inherit;
	background-size:cover;
	background-position:center;
	opacity:1;
	transition:opacity .6s;
}

#hero > nav > a::after {
	box-shadow: 0 0 0 1px white inset;
	background-image: linear-gradient(rgba(4, 30, 42, 0.9),rgba(4, 30, 42, 0)), linear-gradient(rgba(0, 183, 255, 0.5),transparent), linear-gradient(rgba(0, 183, 255, 0.5),transparent);
	background-size: 100% 100%,100% 0, 100% 0;
	background-position: top;
	background-repeat: no-repeat;
	transition: background-size 0.3s;
}
#hero > nav > a:hover::after {background-size:100% 0,100% 200%, 100% 0;}
#hero > nav > a:active::after {background-size:100% 0,100% 200%,100% 200%;}

#hero nav span {
	font-size: 1.5vw;
	font-weight: bold;
	color: rgb(255, 255, 255);
	z-index: 1;
	text-shadow: -1px -1px 1px rgba(4, 30, 42, 1), -1px 0px 1px rgba(4, 30, 42, 1),-1px 1px 1px rgba(4, 30, 42, 1),0px -1px 1px rgba(4, 30, 42, 1),0px 0px 1px rgba(4, 30, 42, 1),0px 1px 1px rgba(4, 30, 42, 1),1px 0px 1px rgba(4, 30, 42, 1),1px 1px 1px rgba(4, 30, 42, 1),0px 0px 5px rgba(4, 30, 42, 1),0px 0px 15px rgba(4, 30, 42, 1);
	line-height:0.9;
}
@media (max-width: 1000px) {#hero nav span  {font-size: 15px;}}
@media (min-width: 1333px) {#hero nav span {font-size: 20px;}}


/************** navtiles: rhombos ******************************/
.rhombo {
	display: inline-block;
	overflow: hidden;
	background-size: 0;
}

.left-stack .rhombo {float: left;}
.right-stack .rhombo {float: right;}

.large .rhombo.break-large + .rhombo,
.flat  .rhombo.break-flat  + .rhombo,
[class*="-stack"] .rhombo:first-of-type {clear:both;}

.large .left-stack .rhombo.break-large + .rhombo,
.flat  .left-stack .rhombo.break-flat  + .rhombo,
.left-stack .rhombo:first-of-type {border-left-width: 0 !important;}
	
.large .right-stack .rhombo.break-large + .rhombo,
.flat  .right-stack .rhombo.break-flat  + .rhombo,
.right-stack .rhombo:first-of-type {border-right-width:0 !important;}

.rhombo::before, .rhombo::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	content: "";	
}

.left-stack .rhombo::before, .left-stack .rhombo::after {
	transform-origin: bottom;
	right: 0;
	left:auto;
}
.right-stack .rhombo::before, .right-stack .rhombo::after {
	transform-origin:top;
	right:auto;
	}

.large .rhombo.break-large + .rhombo::before,
.large .rhombo.break-large + .rhombo::after,
.flat  .rhombo.break-flat  + .rhombo::before,
.flat  .rhombo.break-flat  + .rhombo::after,
.rhombo:first-of-type::before,
.rhombo:first-of-type::after {width:100% !important;}

.rhombo > * {display: inline-block;}

/********** navtiles: rhombos, math ***************/
.rhombo::before, .rhombo::after, .rhombo > * {transform: skew(-30deg);}

.large .rhombo {height: 120px;	transform: skew(30deg);}
.large .left-stack .rhombo.break-large + .rhombo,
.large .left-stack .rhombo:first-of-type { padding-left: 70px !important; margin-left: -35px !important;}
.large .right-stack .rhombo.break-large + .rhombo,
.large .right-stack .rhombo:first-of-type { padding-right:70px !important; margin-right:-35px !important;}
.large .rhombo::before,
.large .rhombo::after {width: calc(100% + 70px);}

.flat .rhombo {height: 90px;	transform: skew(30deg);}
.flat .left-stack .rhombo.break-flat  + .rhombo,
.flat .left-stack .rhombo:first-of-type { padding-left: 52px !important; margin-left: -26px !important;}
.flat .right-stack .rhombo.break-flat  + .rhombo,
.flat .right-stack .rhombo:first-of-type { padding-right:52px !important; margin-right:-26px !important;}
.flat .rhombo::before,
.flat .rhombo::after {width: calc(100% + 52px);}


/***************** navtiles: cosmetics **************************/
.headbg:nth-of-type(1) {background-image:url(../../data/uploads/wallpapers/bg_func-eco.jpg);}
.headbg:nth-of-type(2) {background-image:url(../../data/uploads/wallpapers/bg_algo.jpg);}
.functional-ecology > a {box-shadow: 0 0 0 0 transparent, 25px 0 0 0 rgba(142, 186, 0, 0.5);}
.functional-ecology > a:hover {box-shadow:25px 0 0 0 white, 25px 0 0 0 rgba(142, 186, 0, 0.5);}
.algology-centre > a {box-shadow:0 0 0 0 transparent, -25px 0 0 0 rgba(0, 183, 255, 0.5);}
.algology-centre > a:hover {box-shadow: -25px 0 0 0 white, -25px 0 0 0 rgba(0, 183, 255, 0.5);}


/************************ searchBOX *************************************/
#search {
	float: left;
	width: 300px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	height: 50px;
	background-image: linear-gradient(90deg,black,transparent),radial-gradient(ellipse at left top, rgba(0, 0, 0, 0.2), transparent 75%), linear-gradient(90deg,rgba(0, 0, 0, 0.1),transparent);
	background-repeat: no-repeat;
	background-size: 100% 1px, 100% 100%, 100% 100%;
}
.search-words {
	height: 100%;
	width: 100%;
	background-color: transparent;
	border: none;
	padding: 0 30px 0px 66px;
	font-family: Josefin Sans;
	font-size: 18px;
	position: absolute;
	color: white;
	transition: all .3s;
}
.search-words:invalid {
	padding-left: 45px;
}
.search-submit {
	left: -80px;
	opacity: 0;
	transition: all .3s;
	position: absolute;
	height: 100%;
	width: 65px;
	background-color: white;
	transform: skew(30deg);
	border: none;
	border-right: 2px solid #c2e632;
	cursor: pointer;
}
.search-words:valid ~ .search-submit {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.5);
	left: -14px;
}
#search i {
	display: block;
	height: 24px;
	width: 24px;
	box-shadow: 0 0 0 3px inset;
	color: white;
	border-radius: 100%;
	transform: rotate(-30deg);
	margin: 7px;
	cursor: pointer;
	background-image: linear-gradient(90deg,transparent 10%,#41abd1,transparent);
	background-repeat: no-repeat;
	background-size: 0 100%;
	background-position: left top;
	transition: color .3s;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
}

#search .search-words:valid ~ i {color: rgb(194, 230, 50);}

#search .search-submit:hover ~ i {
	background-size: 500% 100%;
	transition:background-size .6s, color .3s;
	color: white;
}

#search i::before {
	position: absolute;
	content: attr(data-title);
	transform: rotate(30deg);
	white-space: nowrap;
	font-size: 20px;
	text-transform: uppercase;
	top: 62px;
	left: 20px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 2px 1px rgba(255, 255, 255, 0.1), 0 -1px 1px rgb(0, 0, 0);
	color: #65755d;
	visibility: visible;
	opacity: 1;
	transition: opacity .3s;
	font-style: normal;
}
#search .search-words:focus ~ i::before, #search .search-words:valid ~ i::before {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .3s, opacity .3s;}
#search i::after {
	content: "";
	height: calc(50% + 4px);
	width: 4px;
	left: calc(50% - 2px);
	position: absolute;
	top: 100%;
	box-shadow: inherit;
	border-radius: 100% 100% 0 0;
}

.ac_results {
	z-index: 10000;
	background-color: white;
	left: 64px !important;
	box-shadow: 0 10px 25px;
	padding: 0;
}
.ac_results::before, .searchResults::before {
	content: "";
	position: absolute;
	top: 0;
	left: -16px;
	width: 16px;
	height: 100%;
	background-image: linear-gradient(135deg, #C2E632,#499f41);
	transform: skewY(60deg);
	transform-origin: right;
}
.ac_results::after {
	content: attr(data-hint);
	border-top: 1px solid silver;
	display: block;
	padding: 5px 15px;
	font-size: 10px;
	font-weight: bold;
	color: #4a4a4a;
}
.ac_results li {
	transition: all .3s;
	cursor: pointer;
	padding: 0 15px;
}

.ac_results li:last-of-type {	padding-bottom: 10px;}
.ac_results li:first-of-type {	padding-top: 10px;}

.ac_results li:hover {
	background-color: #d0e8e9;
}
.ac_results li::after {
	display: inline-block;
	height: 16px;
	width: 16px;
	content: "";
	vertical-align: middle;
	margin-left: 4px;
	z-index: 1;
	background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
	background-position: 50% 0, 0 50%;
	background-repeat: no-repeat;
	color: #00aeff;
	opacity: 0;
	background-size: 200% 100%, 100% 200%;
	border-radius: 100%;
	transition: all .6s;
	transform: scale(0)
}

.ac_results li:hover::after {
	opacity: 1;
	background-size: 2px 100%, 100% 2px;
	transform: scale(1)
}
.ac_results strong {z-index: 0;}
.ac_results strong::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(87, 183, 215, 0.3);
	border-radius: 3px;
	box-shadow: 0 0 0 1px #95c7e7;
	z-index: -1;
}
.ac_results li:hover strong::before {background-color: white;}

.ac_results i {
	border-radius: 100%;
	color: #84C23A;
	height: 0;
	width: 0;
	border-style: solid;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	border-width: 8px 0 8px 16px;
	border-color: transparent transparent transparent currentColor;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: all .3s;
}
.ac_results i.visible {
	transform: scaleX(1);
	opacity: 1;
	border-radius: 0;
}
.ac_results i.visible::before {
	position: absolute;
	content: "";
	height: 24px;
	width: 100px;
	top: -12px;
	left: -100px;
}
.ac_results i.visible:hover {color:rgba(12,38,43,1.00)}
.searchResults {
    background-color: #fff;
    margin-left: -236px;
    z-index: 1;
    box-shadow: 2px 2px 15px RGBA(46, 56, 61, 0.8);
    margin-right: -40px;
    flex: 0 0 276px;
}

.search-entry {
	padding-bottom: 10px;
}
.search-entry:not(:first-of-type) {
	border-top: 1px solid silver;
}
.search-entry-title {
	padding: 5px 5px 5px 10px;
	box-shadow: inset 0 0 0 0 #AACDF5;
	transition: all 0.3s;
	font-size: 16px;
}
.search-entry:hover .search-entry-title {box-shadow: inset 0 45px 0 0 #AACDF5;}

.search-entry-title a {
	color: #1475AA;
	font-weight: bold;
	text-decoration: none;
	display: block;
	line-height: 14px;
}

.search-entry:hover .search-entry-title a {color: #19252B;}

.search-entry-date {display: none;}

.search-entry-excerpt {
	font-size: 12px;
	line-height: 12px;
	padding: 0 10px 5px 16px;
	box-shadow: inset 4px 0 0 0 #AACDF5;
	margin-left: 12px;
	margin-top: 5px;
	transition: all .3s;
}
.search-entry-excerpt b {
	background-color: #e0eef9;
	border-radius: 3px;
}
.search-entry-excerpt a {
	text-decoration: none;
	color: #5B5858;}

.search-entry:hover .search-entry-excerpt {	box-shadow: inset 0 0 0 0 #AACDF5;}
.search-entry:hover .search-entry-excerpt a {color:#151414;}
.searchHeader {
	padding: 5px;
	font-weight: bold;
	background-image: linear-gradient(#BEE432,#B8E033);
	color: white;
	text-shadow: 0 -1px 1px #094d18, 0 0 2px #24660b, 0 0 4px #24660b;
	cursor: pointer;
}
.searchHeader::before {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	cursor: auto;
}
.searchHeader i {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 48px;
	overflow: hidden;

}
.searchHeader i::before, .searchHeader i::after{
	position: absolute;	
	transition: all .3s;
	content: "";
	right: 0;
	top: 0;
}

.searchHeader i::before {
	height: 100%;
	width: 100%;
	background-image: linear-gradient(90deg,#12783b,#317d57);
	transform: skew(30deg);
	transform-origin: top;
	box-shadow: inset 0 0 0 0 #094F57;
}
.searchHeader i::after {
    width: 30px;
    height: 30px;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(#f3936d, #f3936d), linear-gradient(#f3936d, #f3936d);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3px 75%, 75% 3px, 3px 75%, 75% 3px ;
    transform: rotate(45deg);
}

.searchHeader:hover i::before {
	box-shadow: inset 0 0 0 30px #094f57;
}
.searchHeader:hover i::after {
    background-size: 3px 0, 0 3px, 3px 75%, 75% 3px ;
}

.emptySearch {
	padding: 100px 25px 0 25px;
	font-weight: bold;
	line-height: 14px;
	opacity: 0.5;
	background-image: url(images/blackhole.svg);
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: center 30%;
}
/************** BREADCRUMBS ****************************************/
#breadcrumbs {
	width: calc(100% - 340px);
	background-image: linear-gradient(90deg,#385665,rgb(84, 87, 87));
	padding-left: 65px;
	box-shadow: -1px 1px 1px rgba(188, 233, 135, 0.4) inset;
	font-size: 0;
	height: 50px;
	float: left;
	white-space: nowrap;
}
@media (max-width:1000px) {#breadcrumbs {width: calc(100% - 300px);}}
/*#breadcrumbs::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 30px;
	right: -30px;
	transform: skew(30deg);
	transform-origin: bottom;
	box-shadow: -1px 1px 1px rgba(188, 233, 135, 0.4) inset;
	background-color: #545757 ;
}*/
/*#breadcrumbs::after {
	content: "Aktuality";
	position: absolute;
	height: 100%;
	width: 106px;
	right: -30px;
	transform-origin: bottom;
	box-shadow: -1px 1px 1px 1px rgba(255, 255, 255, 0.4) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.4) inset;
	background-color: #a3dfff;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-weight: bold;
	background-image: linear-gradient(#adb0b3,#ece5be); 
}*/


/*
#breadcrumbs .home {
	height: calc(100% + 7px);
	position: absolute;
	width: 80px;
	left: 0;
	top: -7px;
	overflow: hidden;
}
#breadcrumbs .home::before {
	content: "";
	position: absolute;
	height: calc(100% - 7px);
	width: 80px;
	left: -15px;
	transform: skew(30deg);
	top: 7px;
	background-image: linear-gradient(120deg,#292929 30%,transparent 60%),linear-gradient(180deg,transparent,white), linear-gradient(120deg,#292929 30px,#3d5663);
	border-right: 2px solid white;
	background-size: 100% 100%,100% 0,100% 100%;
	background-repeat: no-repeat;
	background-position: left bottom,right bottom,right bottom;
	transition: background-size .1s;
}
#breadcrumbs .home:hover::before {background-size: 100% 100%,100% 100%,100% 100%;}
#breadcrumbs .home::after {
	background-image: url(images/home.svg),url(images/home-fill.svg);
	content: '';
	position: absolute;
	top: 0;
	left: 2px;
	width: 55px;
	height: 55px;
	z-index: 1;
	background-size: 100%,0;
	background-repeat: no-repeat;
	transition-delay: .05s;
}
#breadcrumbs .home:hover::after {background-size: 100%,100%;transition-delay: 0s}
*/

.home {
	width: 48px;
	position: absolute;
	left: -5px;
	bottom: -5px;
	top: -5px;
	z-index: 1;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.2),transparent),linear-gradient(rgba(221, 237, 93, 0.2),transparent),linear-gradient(rgb(35, 112, 82),rgb(32, 111, 98),rgb(27, 108, 111));
	border-radius: 5px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 0, 100% 3px, 100% 100%;
	transition: all 0.1s;
}
.home:hover {
	background-size: 100% 150%, 100% 3px, 100% 100%;
}
.home::before {
	height: 100%;
	width: 100%;
	top: 0;
	right: -5px;
	content: "";
	background-color: inherit;
	transform: skew(30deg);
	position: absolute;
	transform-origin: top;
	background-image: inherit;
	background-position: inherit;
	background-size: inherit;
	background-repeat: inherit;
	border-radius: 5px;
	/* box-shadow: -3px 0 0 0 white inset; */
	border-right: 3px solid white;
	transition: inherit;
}
.home::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: -3px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' viewBox='0 0 36 36' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='white'%3e%3cpath class='clr-i-outline clr-i-outline-path-1' d='M33.71,17.29l-15-15a1,1,0,0,0-1.41,0l-15,15a1,1,0,0,0,1.41,1.41L18,4.41,32.29,18.71a1,1,0,0,0,1.41-1.41Z'/%3e%3cpath class='clr-i-outline clr-i-outline-path-2' d='M28,32h-5V22H13V32H8V18L6,20V32a2,2,0,0,0,2,2h7V24h6V34h7a2,2,0,0,0,2-2V19.76l-2-2Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 71%;
}
.home:hover::after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' viewBox='0 0 36 36' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' width='32' height='32' stroke-width='1' stroke='%230B2320'  fill='%230B2320'%3e%3cpath class='clr-i-outline clr-i-outline-path-1' d='M33.71,17.29l-15-15a1,1,0,0,0-1.41,0l-15,15a1,1,0,0,0,1.41,1.41L18,4.41,32.29,18.71a1,1,0,0,0,1.41-1.41Z'/%3e%3cpath class='clr-i-outline clr-i-outline-path-2' d='M28,32h-5V22H13V32H8V18L6,20V32a2,2,0,0,0,2,2h7V24h6V34h7a2,2,0,0,0,2-2V19.76l-2-2Z'/%3e%3c/svg%3e");
}
#breadcrumbs .home:hover ~ .parent, #breadcrumbs .home:hover ~ .current {opacity: 0.5;}

#breadcrumbs .parent, #breadcrumbs .current {
	/*border-right: 2px solid white;*/
	transform: skew(30deg);
	padding: 0 20px;
	font-size: 24px;
	text-decoration: none;
	display: inline-flex;
	height: 100%;
	align-items: center;
	vertical-align: top;
	font-weight: bold;
}
#breadcrumbs .parent[href="clanky"], #breadcrumbs .parent[href="articles"], #breadcrumbs .parent[href="lide"], #breadcrumbs .parent[href="people"], #breadcrumbs .parent[href="projekty"], #breadcrumbs .parent[href="projects"] {
	pointer-events: none;
}

#breadcrumbs span {
	transform: skew(-30deg);
	display: block;
}
#breadcrumbs .parent {
	color: white;
	font-size: 14px;
	text-transform: uppercase;
	max-width: 170px;
	line-height: 0.9;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100% 0, 100% 100%;
	transition: all .1s;
	white-space: normal;
}
#breadcrumbs .parent:hover {background-size: 100% 100%, 100% 100%; color:rgba(0,0,0,.7);}
#breadcrumbs .parent {color: white;}
#breadcrumbs .parent[href*="algo-"] {
	background-image: linear-gradient(transparent,#71f0ff),linear-gradient(60deg,#006790,#249194);
}
#breadcrumbs .parent[href*="func-eco-"] {
	background-image: linear-gradient(transparent,#d0f274), linear-gradient(60deg,#1F7E1D,#629B2C);
}

#breadcrumbs .current {
	background-image: linear-gradient(rgba(255, 255, 255, 0.75),white 75%);
	color: #0d3f31;
	max-width: calc(100% - 184px);
	overflow: hidden;
}
#breadcrumbs .news {
	position: absolute;
	height: 100%;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	width: 80px;
	z-index: 1;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	color: #305b54;
	right: 0;
}
@media (max-width:1000px) {#breadcrumbs .news {display: none;}}

#breadcrumbs .news, #breadcrumbs .news::before, #breadcrumbs .news::after {
	background-color: #bed2ec;
	background-image: linear-gradient(white 50%,transparent),linear-gradient(#c0c5c7,transparent);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 0, 100% 100%;
	transition: background-size 0.1s;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
#breadcrumbs .news::before, #breadcrumbs .news::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 30px;
	z-index: -1;
	top: 0;
}
#breadcrumbs .news::before {
	transform: skew(/*-*/30deg);
	transform-origin: /*top*/bottom;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 1px 0 0 white inset, -1px 0 0 rgba(0, 0, 0, 0.2), -2px 0 0 rgba(0, 0, 0, 0.1), -3px 0 0 rgba(0, 0, 0, 0.05), -4px 0 0 rgba(0, 0, 0, 0.025), -5px 0 0 rgba(0, 0, 0, 0.0125);
}
#breadcrumbs .news::after {
	right: -30px;
	transform: skew(30deg);
	transform-origin: bottom;
	box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.5) inset;
}
#breadcrumbs .news:hover, #breadcrumbs .news:hover::before, #breadcrumbs .news:hover::after {
	background-size: 100% 100%,100% 100%;
}
#breadcrumbs .news i {
	position: absolute;
	top: 0;
	right: -30px;
	height: 100%;
	width: 70px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='88.1px' height='72.2px' viewBox='0 0 88.1 72.2' xml:space='preserve' fill='%230D3F31'%3e%3cpolygon points='59.7,26.4 26.8,26.4 26.8,45.6 70.8,45.6 '/%3e%3cpolygon points='45.9,2.5 26.8,2.5 26.8,21.6 56.9,21.6 '/%3e%3crect x='2.8' y='50.4' width='19.2' height='19.2'/%3e%3crect x='2.8' y='26.4' width='19.2' height='19.2'/%3e%3cpolygon points='73.5,50.4 26.8,50.4 26.8,69.5 84.5,69.5 84.5,69.4 '/%3e%3crect x='2.8' y='2.5' width='19.2' height='19.2'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: left 15px center;
	background-size: 50%;
	z-index: 1;
	opacity: 0.8;
}
[data-lang="cs"] #breadcrumbs .news {	width: 130px;}
[data-lang="en"] #breadcrumbs .news {	width: 85px;}

/****************** SIDENAV *****************************/
#sidemenu {
	margin-top: 30px;
}
#sidemenu > div {
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
	padding: 3px 0 40px 0;
	background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.2));
}

#sidemenu > div:last-of-type {
	/* background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.2) 85%,transparent); */
	/* border-bottom: 5px solid #016a94; */
	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.7) inset, 0 1px 0 0 rgba(255, 255, 255, 0.2),0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
#sidemenu label {
	padding: 0 30px 0 15px;
	display: inline-flex;
	height: 26px;
	align-items: center;
	top: -25px;
	position: absolute;
	z-index: 1;
	color: #98aa06;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0 -1px 1px black;
}
#sidemenu label::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	transform: skew(30deg);
	transform-origin: bottom;
	z-index: -1;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 1px 0 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.2) inset;
	background-color: #292929;
	/*background-image: linear-gradient(rgba(255, 255, 255, 0.1),transparent);*/
}
#sidemenu a {
	display: block;
	color: #c0c0c0;
	text-decoration: none;
	font-size: 16px;
	text-shadow: 0 -1px 1px black;
	padding: 3px 15px;
	transition: all 0.2s;
	background-color: rgba(0,0,0,0);
	line-height: 13px;
}
#sidemenu a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -12px;
	height: 100%;
	width: 12px;
	background-color: rgba(69,174,231,0);
	transform: skew(30deg);
	transform-origin: bottom;
	transition: all .3s;
}
#sidemenu a:hover {background-color: rgba(0,0,0,0.5); color: white;}
#sidemenu a:hover::before {left:0;background-color: rgba(69,174,231,1.00);}
#sidemenu a.special {color: #64d3eb;}

#sidemenu > div.single {padding:3px 0;}
#sidemenu > div.single a {top:-28px;}

#sidemenu a[target="_blank"]::after, header h1 a::after {
    content: "";
    display: inline-block;
    height: 13px;
    width: 13px;
    background-size: contain;
    vertical-align: top;
    transform: translate(4px, -4px) scale(1.2);
    opacity: 0.5;
    transition: all 0.3s;
}
#sidemenu a[target="_blank"]::after {
	transform: translate(4px, -4px) scale(1.2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' height='24px' fill='%2398aa06'%3E %3Cpath style=' ' d='M 5 3 C 3.898438 3 3 3.898438 3 5 L 3 19 C 3 20.101563 3.898438 21 5 21 L 19 21 C 20.101563 21 21 20.101563 21 19 L 21 13 L 19 11 L 19 19 L 5 19 L 5 5 L 13 5 L 11 3 Z M 14 3 L 16.65625 5.65625 L 9.15625 13.15625 L 10.84375 14.84375 L 18.34375 7.34375 L 21 10 L 21 3 Z '/%3E %3C/svg%3E");}
header h1 a::after {
	transform: translate(1px, -1px) scale(1.2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' height='24px' fill='rgb(101, 117, 93)'%3E %3Cpath style=' ' d='M 5 3 C 3.898438 3 3 3.898438 3 5 L 3 19 C 3 20.101563 3.898438 21 5 21 L 19 21 C 20.101563 21 21 20.101563 21 19 L 21 13 L 19 11 L 19 19 L 5 19 L 5 5 L 13 5 L 11 3 Z M 14 3 L 16.65625 5.65625 L 9.15625 13.15625 L 10.84375 14.84375 L 18.34375 7.34375 L 21 10 L 21 3 Z '/%3E %3C/svg%3E");}

#sidemenu a[target="_blank"]:hover::after {
    opacity: 1;
    transform: translate(6px,0) scale(1.5);

}
header h1 a:hover::after {
    opacity: 1;
    transform: translate(6px,0) scale(1.5);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' height='24px' fill='rgb(255, 255, 255)'%3E %3Cpath style=' ' d='M 5 3 C 3.898438 3 3 3.898438 3 5 L 3 19 C 3 20.101563 3.898438 21 5 21 L 19 21 C 20.101563 21 21 20.101563 21 19 L 21 13 L 19 11 L 19 19 L 5 19 L 5 5 L 13 5 L 11 3 Z M 14 3 L 16.65625 5.65625 L 9.15625 13.15625 L 10.84375 14.84375 L 18.34375 7.34375 L 21 10 L 21 3 Z '/%3E %3C/svg%3E");
}

/******************* BLOG **************************/
#right a.news {display: none;} 
@media (max-width:1000px) {
#sidemenu > div:last-of-type {
	padding-bottom: 70px;
}
#right a.news {
	position: absolute;
	display: block;
	top: -32px;
	left: 0;
	height: 32px;
	width: 130px;
	font-size: 18px;
	text-decoration: none;
	font-weight: bold;
	color: white;
	padding: 10px 0 0 20px;
	z-index: 1;
	text-align: left;
}
#right a.news::before {
	display: block;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: skew(30deg);
	transform-origin: bottom;
	background-image: linear-gradient(rgba(255, 255, 255, 0.6),transparent),linear-gradient(90deg,#006a96,#0a6c85);
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 0, 100% 100%;
	transition: background-size .1s;
}
#right a.news:hover::before {background-size: 100% 100%, 100% 100%;}

#right a.news::after {
	position: absolute;
	right: 1px;
	top: 9px;
	content: "";
	height: 100%;
	width: 44px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='88.1px' height='72.2px' viewBox='0 0 88.1 72.2' xml:space='preserve' fill='white'%3e%3cpolygon points='59.7,26.4 26.8,26.4 26.8,45.6 70.8,45.6 '/%3e%3cpolygon points='45.9,2.5 26.8,2.5 26.8,21.6 56.9,21.6 '/%3e%3crect x='2.8' y='50.4' width='19.2' height='19.2'/%3e%3crect x='2.8' y='26.4' width='19.2' height='19.2'/%3e%3cpolygon points='73.5,50.4 26.8,50.4 26.8,69.5 84.5,69.5 84.5,69.4 '/%3e%3crect x='2.8' y='2.5' width='19.2' height='19.2'/%3e%3c/svg%3e ");
	background-size: auto 80%;
	background-repeat: no-repeat;
}}

.blogitem {
	width: calc(100% - 10px);
	height: 100px;
	background-color: #48b993;
	margin: 5px;
	box-shadow: 0 1px 5px #332914;
	background-size: cover;
	background-position: center;
}
.blogitem[data-nothumb] {
	background-image: url(images/blogbg.svg);
	background-size: auto 90%;
	background-repeat: no-repeat;
	background-position: center right+3%;
}
.blogitem .bloglink {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image:linear-gradient(90deg,rgb(0, 106, 150),rgb(77, 119, 26));
	opacity: 0.5;
	box-shadow: inset 0 0 0px 0px rgba(255,255,255,0.00);
	transition: all .3s;
}
.blogitem .bloglink:hover {
	box-shadow: inset 0 0 100px 50px white;
}
@media (max-width:1000px) {
	.blogitem {
	width: calc(25% - 13px);
	box-shadow: 0 1px 5px rgba(7, 14, 18, 0.5);
	display: inline-block;
	vertical-align: top;
	text-align: left;
}}
.blogitem .datetime {
	position: absolute;
	right: -2px;
	top: -3px;
	padding: 2px 8px 2px 16px;
	overflow: hidden;
	z-index: 1;
	font-weight: bold;
	color: white;
	font-size: 12px;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
	border-right: 1px solid white;
}
.blogitem .datetime::before {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	background-color: #8fad19;
	height: 100%;
	width: 100%;
	transform: skew(30deg);
	transform-origin: top;
	z-index: -1;
	background-image: linear-gradient(-156deg,#c2e631,#498f19);
	box-shadow: 1px 0 0 1px white inset;
}
.blogitem .blogbody {
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	pointer-events: none;
}
.blogitem .blogbody h2 {
	line-height: 16px;
	padding: 7px 5px 10px 5px;
	color: white;
	transition: all .3s;
	font-size: 16px;
}
.blogitem .bloglink:hover ~ .blogbody h2 {color:#c2e632;}
.blogitem .linkedpages {
	overflow: hidden;
	max-height: 52px;
}
.blogitem .linkedpages a {
	display: inline-block;
	text-decoration: none;
	max-width: 50%;
	white-space: nowrap;
	margin: 0px -5px -2px;
	padding: 3px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 0;
	left: 7px;
	color: white;
	height: 22px;
	pointer-events: all;
	font-size: 12px;
	text-shadow: 0-1px 2px black;
}
.blogitem .linkedpages a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(100% - 12px);
	background-color: rgba(22, 48, 47, 0.8);
	transform: skew(30deg);
	z-index: -1;
	transform-origin: top;
	box-shadow: inset 0 0 0 1px, inset -1px 0 0 0, inset 1px 0 0 0;
	background-image: linear-gradient(#c2e631,#498f19);
	background-size: 0px 100%;
	background-repeat: no-repeat;
	transition: all .3s;
	color: rgba(255, 255, 255, 0.3);
}
.blogitem .linkedpages a:hover::before {background-size: 100% 100%;}

.pagurettes {display: inline;}

.pagurettes .short {
  background-size: 0;
  padding: 10px 25px 15px 100px;
  min-height: 100px;
  /*! border-top: 3px dotted silver; */
  color: #405661;
  font-size: 90%;
}
.pagurettes .short::after {
  position: absolute;
  top: -6px;
  left: 0;
  bottom: -6px;
  width: 75px;
  background-image: inherit;
  background-size: cover;
  background-color: #00837a;
  content: "";
  margin: 5px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: white;
	background-position: center;
}
.pagurettes .short[data-nothumb]::after {
	background-image: linear-gradient(45deg,rgba(0, 0, 255, 0.2),rgba(125, 152, 37, 0.4)),url(images/blogbg.svg);
	background-size: 100%,90%;
	background-repeat: no-repeat;
	background-position: center;
}
.pagurettes .short::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(ellipse at center bottom, #e1ecf2, rgba(255, 255, 255, 0) 75%), linear-gradient(90deg,#00837a,transparent);
  background-repeat: no-repeat;
  background-size: 100%,100% 1px;
}
.pagurettes .short .bloglink {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-image: linear-gradient(90deg,rgba(0, 147, 255, 0.2),transparent);
	background-size: 0 100%;
	background-repeat: no-repeat;
	transition: all .3s;
}
.pagurettes .short .bloglink:hover {
  background-size: 100% 100%;
}
.pagurettes .short .bloglink:hover ~ .blogbody h2 {
	color: #0e1626;
}
.pagurettes .short .datetime {
  opacity: 0.67;
  font-weight: bold;
}
.pagurettes .short:last-of-type {
  border-bottom: 5px solid #008ea4;
}
.pagurettes .short h2 {
  line-height: 0.9;
  padding: 8px 0;
  font-weight: bold;
  font-size: 17px;
}
/*.short .linkedpages a+a::before {
  content: "�";
  display: inline-flex;
  width: 20px;
  text-align: center;
  font-size: 32px;
  color: #8bbdd7;
  height: 18px;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
}*/
li.linkedpages {
	margin: 0px -14px;
	font-size: 90%;
}

.pagurettes .short .linkedpages a, li.linkedpages a{
  display: inline-block;
  text-decoration: none;
  color: #00837a;
  padding: 1px 5px;
  border: 1px solid #a0c9d2;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 0px 5px rgba(160, 201, 210, 0.5);
	z-index: 1;
	transition: all .3s;
	background-image: none !important;
}
.pagurettes .short .linkedpages a + a {margin-left: 2px;}
li.linkedpages a + a {margin-left: 6px !important;}
.pagurettes .short .linkedpages a:hover, li.linkedpages a:hover {
	color: white !important;
	background-color: #22A0C9;
	border-color: #2293B7;
}
li.linkedpages a {
	margin-bottom: 2px !important;
	opacity: 0.9;
	padding: 3px 5px !important;
}
/**************** FOOTER ***************************/
#links {
	width: 50%;
	padding: 10px 25px;
	float: left;
}
#links p  {
	padding: 0;
	display: inline;
	margin: 0;
	text-indent: 0;
}
#links h3 {
	font-size: 24px;
	color: rgb(189, 226, 48);
	margin-bottom: 15px;
}
#links a {
	color: white;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px #093141;
	display: inline-block;
	z-index: 0;
	padding-left: 25px;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#links a::before {
    content: "";
    display: inline-block;
    height: 15px;
    width: 15px;
    background-color: #98aa06;
    vertical-align: sub;
    margin: 0 5px;
    transform: skew(30deg);
    position: absolute;
    z-index: -1;
    left: 0;
    top: 2px;
    box-shadow: inset 0 0 0 white;
    transition: all .3s;
}
#links a:hover::before {
    width: 100%;
    background-color: rgba(2, 21, 35, 0.7);
    box-shadow: inset 15px 0 0 #98aa06;
}


#links .copyright {
  margin-top: 25px;
  color: white;
  padding: 0 11px;
  text-indent: 18px;
  z-index: 0;
  display:inline-block
}
#links .copyright a {
  display: inline;
  padding: 0 5px;
}
#links .copyright a::before {
  content:  none !important;
}
#links a[href*="get-simple"] {
	font-weight: normal;
	text-shadow: none;
	box-shadow: 0 1px #98aa06;
}
.copyright-sign {
  position: absolute;
  height: 24px;
  width: 24px;
  border: 2px solid;
  color: #98aa06;
  font-weight: bold;
  border-radius: 100%;
  left: 3px;
  top: -2px;
  text-indent: 0;
  font-style: normal;
}
#links .copyright::before {
  position: absolute;
  content: "";
  left: -4px;
  top: -10px;
  bottom: -10px;
  width: 33%;
  border-color: #98aa06;
  border-style: none none none solid;
  border-width: 1px;
  background-image: linear-gradient(90deg,#98aa06,transparent),linear-gradient(90deg,#98aa06,transparent),linear-gradient(90deg,rgba(54, 206, 77, 0.2),transparent);
  background-size: 100% 1px,100% 1px,50% 100%;
  background-repeat: no-repeat;
  background-position: top,bottom,left center;
  z-index: -1;
}
#links .copyright::after {
  position: absolute;
  content: "";
  right: -4px;
  top: -10px;
  bottom: -10px;
  width: 33%;
  border-color: #98aa06;
  border-style: none solid none none;
  border-width: 1px;
  background-image: linear-gradient(90deg,transparent,#98aa06),linear-gradient(90deg,transparent,#98aa06),linear-gradient(90deg,transparent,rgba(54, 206, 77, 0.2));
  background-size: 100% 1px,100% 1px,50% 100%;
  background-repeat: no-repeat;
  background-position: top,bottom,right center;
  z-index: -1;
}
.copyright-sign::after {
  position: absolute;
  content: "";
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
  border-color: #98aa06 transparent #98aa06 #98aa06;
  border-style: solid;
  border-radius: 100%;
  border-width: 2px;
}

#contact {
	height: 100%;
	float: right;
	width: calc(50% - 0px);
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 5px #164032;
	color: white;
	min-height: 380px;
	overflow: hidden;
}

#contact .contactText {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1;
	padding: 5px 20px 15px 20px;
	width: 50%;
	max-width: 260px;
}
#contact .contactText div {
	font-size: 14px;
	padding: 5px 0 15px 15px;
}
#contact .contactText div:first-of-type {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#contact .contactText div h3 {
	font-weight: bold;
	text-indent: -15px;
	margin-top: 5px;
	color: #98aa06;
}
#contact .contactText a[href*="mailto"] {
	font-size: 120%;
	text-decoration: none;
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 3px 9px;
	display: inline-block;
	transition: all 0.3s;
	white-space: nowrap;
	transform: scaleX(0.85);
	transform-origin: left;
}
#contact .contactText a[href*="mailto"]:hover {background-color:rgba(0,0,0,0.80)}

 a[href*="mailto"] .whirpool {
	font-size: 0;
	color: #98aa06;
}
 a[href*="mailto"] .whirpool::after {
	content: "@";
	padding: 0 3px;
	font-size: 17px;
}

#contact .contactIcons {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 50%;
	text-align: center;
	max-width: 260px;
	font-size: 0;
}
#contact .contactIcons a {
	display: inline-block;
	height: 50px;
	width: 50%;
	background-repeat: no-repeat;
	background-size: auto 60%;
	background-position: center;
	border-top: 1px solid transparent;
	transition: all 0.3s;
}
#contact .contactIcons a:hover {background-color: rgba(0,0,0,0.80); border-top: 1px solid rgba(255,255,255,0.30)}
#contact .contactIcons a[href*="mapy.cz"] {
	background-image: /*url(http://lh3.googleusercontent.com/5KH_BnaY-5cmwh-fsKFBbcyly0cAQWtZ5qlDrjdIQyt14EM8T0e50arUP_cf-CinHl98=w32);*/
		url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='283.5px' height='283.5px' viewBox='0 0 283.5 283.5' style='enable-background:new 0 0 283.5 283.5;' xml:space='preserve' %3e%3cstyle type='text/css'%3e .st0%7bfill:url(%23SVGID_1_);%7d .st1%7bfill:%23FEFFFE;%7d %3c/style%3e%3clinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='8.7775' y1='277.2195' x2='244.3993' y2='41.5977'%3e%3cstop offset='0' style='stop-color:%23479631'/%3e%3cstop offset='1' style='stop-color:%2374B83E'/%3e%3c/linearGradient%3e%3cpath class='st0' d='M229.4,283.5H23.8c-11.7,0-21.3-9.6-21.3-21.3V56.6c0-11.7,9.6-21.3,21.3-21.3h205.6c11.7,0,21.3,9.6,21.3,21.3 v205.6C250.6,273.9,241.1,283.5,229.4,283.5z'/%3e%3cpath class='st1' d='M132.4,151.5c5.1-4.9,10.2-9.6,14.6-14.9c3.2-3.9,7-7.3,10.3-11.1c3.8-4.4,7.2-9,11-13.3 c3-3.4,5.1-7.6,8.7-10.6c2.1-1.8,4.4-1.8,6.6,0.2c6.1,5.6,10.1,12.3,11.5,20.4c1.1,6.4,0.9,12.8,0.6,19.3c-1.3,23.5-2.9,47-3.7,70.5 c-0.1,3.3-0.7,6.6-1.8,9.7c-1.3,3.7-3.7,6.1-7.8,6.4c-4.2,0.3-7-1.8-8.9-5.3c-2-3.8-2.6-8.1-3.2-12.2c-1.5-10.7-1.1-21.5-1.1-32.3 c0-7.3,0.3-14.6,0.5-21.9c0-1.4,0-2.8,0-4.2c0-1,0.1-2.2-1-2.7c-1-0.4-1.6,0.7-2.2,1.3c-5.2,5.4-10.6,10.5-16.2,15.5 c-5.2,4.7-10.4,9.4-15.9,13.7c-8.2,6.4-12.7,5.3-17.2-4c-4.9-10.1-9.9-20.2-14.9-30.2c-0.7-1.3-1.2-3.6-2.9-3.3 c-1.6,0.3-1.3,2.6-1.5,4.1c-3.5,21-7.4,41.9-15.5,61.8c-2.9,7.2-6,14.3-10.1,20.9c-2,3.2-4.6,5.5-7.9,7.1 c-6.5,3.2-13.4,5.1-20.5,6.4c-2.5,0.5-3.1-0.2-2.1-2.7c3.2-7.9,6.6-15.7,9.9-23.5c5.7-13.6,10.5-27.5,14.2-41.8 c5.9-22.9,10.3-45.9,9.2-69.7c-0.2-4-0.4-7.9-0.6-11.9c-0.4-5.8,2-9.5,7.7-11.1c5.5-1.6,10.7-0.9,15.6,2.3c4,2.6,6.7,6.3,8.9,10.4 c4.9,8.8,8.7,18.2,12.8,27.4C123.7,131.7,128,141.5,132.4,151.5z'/%3e%3c/svg%3e");
	box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3) inset;
}
a[href*="/maps/"] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='283.46px' height='283.46px' viewBox='0 0 283.46 283.46' enable-background='new 0 0 283.46 283.46' xml:space='preserve'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23189C55' d='M2.53,258.02V56.57c0-11.71,9.5-21.21,21.21-21.21H225.2 L2.53,258.02z'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFDC34' d='M2.53,262.25v-4.23L225.2,35.35h4.23 c11.71,0,21.22,9.51,21.22,21.21v4.23L27.97,283.46h-4.23C12.03,283.46,2.53,273.96,2.53,262.25z'/%3e%3cpolygon fill-rule='evenodd' clip-rule='evenodd' fill='%235785C4' points='27.97,283.46 126.59,184.86 225.2,283.46 '/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFFFFF' d='M225.2,283.46L125.08,183.35l25.45-25.44l100.12,100.12v4.23 c0,11.71-9.51,21.21-21.22,21.21H225.2z'/%3e%3cpolygon fill-rule='evenodd' clip-rule='evenodd' fill='%23CCC9C9' points='250.64,258.02 152.03,159.41 250.64,60.8 '/%3e%3cpath fill='%23EFEFEF' d='M46.79,62.78C59.41,57,75.2,59.36,85.46,68.82c-3.21,3.27-6.5,6.46-9.8,9.65 c-10.25-10.18-29.52-5.35-34.32,8.11c-6.29,13.25,4.16,30.66,18.94,30.85c9.67,1.13,19.32-5.35,21.36-14.98 c-6.76,0.01-13.5-0.05-20.24,0.05c-0.19-4.16-0.22-8.33-0.13-12.5c11.28,0.29,22.84-0.65,33.96,0.46 c0.85,8.25,0.27,17.01-4.17,24.25c-6.96,12.95-23.39,18.61-37.29,15.34c-17.19-3.56-30.05-21.19-27.71-38.66 C27.25,79.06,35.58,67.89,46.79,62.78z'/%3e%3cpath fill='%23DD4C3E' d='M207.31,0.43h8.07c20.1,1.15,39.76,10.97,51.94,27.13c7.98,10.21,12.43,22.87,13.43,35.74v4.77 c-0.47,24.94-16.43,45.41-30.24,64.8c-15.51,21.92-29.85,45.81-33.82,72.82c-1.06,4.58,0.21,10.98-5.26,13.05 c-1.29-1-2.78-1.83-3.69-3.23c-1.62-15.1-5.39-30.02-11.84-43.81c-7.31-16.07-17.49-30.59-27.83-44.8 c-6.3-8.52-12.23-17.34-17.14-26.74c-7.72-14.09-10.59-30.74-7.43-46.55c2.59-12.48,9.12-24.05,18.16-32.99 C173.84,8.7,190.31,1.49,207.31,0.43z M205.74,44.35c-9.54,2.13-17.54,10.56-18.34,20.43c-1,9.19,4.38,18.52,12.62,22.57 c8.93,4.73,20.66,3.28,28.12-3.55c6.96-6.16,9.5-16.8,5.86-25.41C229.69,47.63,216.91,41.49,205.74,44.35z'/%3e%3cpath fill='%23812D28' d='M205.74,44.35c11.17-2.86,23.95,3.28,28.25,14.05c3.64,8.61,1.1,19.25-5.86,25.41 c-7.46,6.83-19.19,8.28-28.12,3.55c-8.24-4.06-13.62-13.38-12.62-22.57C188.2,54.91,196.2,46.48,205.74,44.35z'/%3e%3c/svg%3e");
}
#contact [s-map] {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: -260px;
}

.smap .hud {
	position: absolute;
	top: -5px;
	right: 260px;
}
.smap .zoom .label {
	text-shadow: none;
}
div#pinPoint {
	box-shadow: 0 0 0 3px #98aa06;
	border-radius: 100%;
	height: 2px;
	width: 2px;
	margin-left: -1px;
	margin-top: -1px;
	color: rgba(25, 41, 66, 1);
}
div#pinPoint::after {
    position: absolute;
    top: -7px;
    left: -7px;
    content: "";
    height: 0;
    width: 0;
    border-width: 8px;
    border-style: solid;
    border-color: currentColor transparent transparent;
}
div#pinPoint::before {
    position: absolute;
    height: 32px;
    width: 32px;
    background-color: white;
    content: "";
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 -3px 0 0 rgba(25, 41, 66, 1) inset, 0 0 0 1px rgba(25, 41, 66, 0.6) inset;
    top: -39px;
    left: -15px;
    border-radius: 3px;
    background-image: url(images/logo.svg),linear-gradient(transparent,rgba(25, 41, 66, 1)),linear-gradient(45deg,rgba(3, 37, 59, 0.9),rgba(66, 113, 15, 0.9));
    background-size: auto 90%, contain, contain;
    background-position: center top;
    background-repeat: no-repeat;
}




#iframe {
	position: fixed;
	bottom: 0;
	right: 0;
	height: 0;
	width: 0;
	z-index: -10000;
	box-shadow: 0 0 0 0px;
}

#pageEdit {
	position: absolute;
	right: 39px;
	height: 20px;
	bottom: 56px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: silver;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #202020;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1),0 1px 0 rgba(12, 11, 11, 0.8) inset;
	background-color: #212121;
	border-radius: 3px;
}



/********************CONTENT**************************/
content em, content i {
	opacity: 0.6;
	font-weight: bold;
	font-size: 95%;
}
content p > a:not(.fullLink):not([href^="mailto:"]), content li > a:not(.fullLink):not([href^="mailto:"]), .working a:not(.fullLink):not([href^="mailto:"]) {
	border-radius: 3px;
	padding: 0 3px;
	text-decoration: none;
	background-image: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)), linear-gradient(90deg,#BDE230,#BDE230), linear-gradient(90deg,#BDE230,#AFDE41), linear-gradient(90deg,#AFDE41,#A1DA53), linear-gradient(90deg,#A1DA53,#93D665), linear-gradient(90deg,#93D665,#85D277), linear-gradient(90deg,#85D277,#77CE89), linear-gradient(90deg,#77CE89,#69CA9B), linear-gradient(90deg,#69CA9B,#5BC6AD), linear-gradient(90deg,#5BC6AD,#4DC2BF), linear-gradient(90deg,#4DC2BF,#3FBED1), linear-gradient(90deg,#3FBED1,#31BAE3), linear-gradient(90deg,#31BAE3,#24B7F5);
	background-repeat: no-repeat;
	background-size: 100% 0, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px, 10% 1px;
	background-position: center top, left -5% bottom, left 5% bottom, left 15% bottom, left 25% bottom, left 35% bottom, left 45% bottom, right 45% bottom, right 35% bottom, right 25% bottom, right 15% bottom, right 5% bottom, right bottom;
	color: #004d86;
	font-weight: bold;
	margin: 0 -3px;
	font-size: 95%;
}
content p > a:not(.fullLink):not([href^="mailto:"]):hover, content li > a:not(.fullLink):not([href^="mailto:"]):hover, .working a:not(.fullLink):not([href^="mailto:"]):hover {color:black;transition: all .6s; background-size: 100% calc(100% - 1px), 10% 650%, 10% 600%, 10% 550%, 10% 500%, 10% 450%, 10% 400%, 10% 350%, 10% 300%, 10% 250%, 10% 200%, 10% 150%, 10% 100%;}

content hr {
	border: none;
	height: 26px;
	background-image: linear-gradient(#bed2ec,#bed2ec);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: center;
}
content .block {
	font-size: 90%;
}
content .columns + .columns {
	border-top: 1px solid #bed2ec;
	padding-top: 15px;
}
content > h2, content > p > h2, .doublet > div > h2, .doublet section > h2, .columns > h2 {
	border-top: 6px solid rgba(58, 86, 100, 0.5);
	color: #3a5664;
	margin-bottom: 12px;
	font-weight: bold;
	display: inline-block;
	line-height: 95%;
	padding-top: 3px;
}

content p + h2 {
	margin-top: 30px !important;
}

content .block h2 {
	line-height: 90%;
	margin: 15px 0;
	font-size: 140%;
}

content > h3, content > p > h3, content .ajaxable > h3, .doublet > div > h3, .doublet section > h3, .columns > h3, .person h3 {
	font-size: 18px;
	font-weight: bold;
	color: #4c575b;
	line-height: 20px;
	margin: 5px 0;
}

content > h2 + h3, content > p > h2 + h3, content .ajaxable > h2 + h3, .doublet > div > h2 + h3, .doublet section > h2 + h3, .columns > h2 + h3,
content > h3 + h3, content > p > h3 + h3, content .ajaxable > h3 + h3, .doublet > div > h3 + h3, .doublet section > h3 + h3, .columns > h3 + h3 {
	top: -10px;
}
content > ul,  content > p > ul, content .ajaxable > ul, .doublet > div > ul, .doublet section > ul, .person > div ul {
	margin-top: 15px !important;
}

.person h3+ul {top:-5px;}
.person ul:last-child {margin-bottom: 25px;}
.person aside a:not([href*="mailto:"])::before {
	content: " • ";
	color: #4a9857;
}

content li {
	padding-left: 15px;
	line-height: 100%;
}
content li + li {
	margin-top: 7px;
}

content > ul > li:not(:empty)::before,
content > p > ul > li:not(:empty)::before,
content .ajaxable > ul > li:not(:empty)::before,
.doublet > div > ul > li:not(:empty)::before,
.doublet section > ul > li:not(:empty)::before,
.columns ul li:not(:empty)::before,
.person > div li:not(:empty)::before
{
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	top: 1px;
	left: 2px;
	background-color: yellowgreen;
	height: calc(100% - 2px);
}

content .li-H > strong:only-child {
	left: -15px;
	color: #3a5664;
	line-height: 90%;
	display: inline-block;
	/*border-top: 1px solid #bec7d0;*/
	width: 100%;
	padding-top: 3px;
}

content > ul > li > strong:only-child, content > p > ul > li > strong:only-child, content .ajaxable > ul > li > strong:only-child, .doublet > div > ul > li > strong:only-child, .doublet section ul > li > strong:only-child, .columns  ul > li > strong:only-child, .person > div .li-H > strong:only-child   {background-color: white;}

content a.HASH {
	display: inline-block;
	background-color: #dee8f5;
	padding: 0 5px 0 15px;
	background-image: linear-gradient(white,white),linear-gradient(white,white),linear-gradient(white,white),linear-gradient(white,white);
	background-repeat: no-repeat;
	background-size: 13px 2px,13px 2px,2px 100%, 2px 100%;
	background-position: left calc((100 / 3) * 1% - 1px),left calc((200 / 3) * 1% + 1px), 3px top,8px top;
}
.fromOtherlang {
	background-color: #f6dbb2;
	border: 1px dashed #cba289;
	color: #804615;
	padding: 2px 10px;
	border-radius: 3px;
	margin-bottom: 15px;
}
.fullLink {
	margin: 15px 0;
	display: block;
	background-image: linear-gradient(45deg,#156e73,#35723f);
	text-decoration: none;
	color: white;
	line-height: 18px;
	padding: 5px 10px;
	border-radius: 3px;
	text-align: center;
}

/*
.doublet aside {
	background-color: #bed2ec;
	flex: 0 0 auto;
	max-width: 250px;
	overflow: hidden;
	margin: 0 25px 0 0;
	background-image: linear-gradient(transparent,white);
	padding: 10px 10px 25px 10px;
	border-right: 1px solid rgba(142, 154, 165, 0.5);
}

.doublet aside > img:first-child {
  width: calc(100% + 20px);
  max-width: 250px;
  margin: -10px 0 5px -10px;
}

@media screen and (min-width:1300px){
	.doublet {display: flex;}}
@media screen and (max-width:1300px){
.doublet aside {
	max-width: unset;
	margin: 0 0 25px 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5));
	padding: 10px 10px 0px 10px;
	display: flex;
	width: 100%;
	border: 1px solid #a2b2c3;
	}
.doublet aside > img:first-child {
	width: auto;
	max-width: 250px;
	margin: -10px 25px 0px -10px;

}
}


@media screen and (min-width:1420px){
.doublet > aside ~ *, .columns {
	column-count: 2;
	column-gap: 25px;
}}

.doublet > aside ~ * > * {
    margin: 0;
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid;           
    break-inside: avoid-column;         
    display:table;                     
}
*/
.doublet {
  display: table;
  width: 100%;
}
.doublet > * {
	display: table-cell;
	vertical-align: top;
	padding: 0 20px;
}
.doublet > aside {
	width: 250px;
	background-image: linear-gradient(#bed2ec,transparent),linear-gradient(#9caab1,transparent);
	background-size: 100%, 1px 100%;
	background-repeat: no-repeat;
	background-position: right;
	border-top: 6px solid #016a94 !important;
}
.doublet > aside > img {
	width: calc(100% + 40px);
	margin: 0 -20px 15px;
}
@media screen and (max-width:1350px) {
	.doublet > * {
	display: block;}
	
	.doublet > aside {
	width: 100%;
	left: 0;
	padding: 15px 15px 15px calc(33% + 15px);
	overflow: hidden;
	margin-bottom: 25px;
	border: 1px solid #abbdd5;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
	background-color: #e3edf9;}
	
	.doublet > aside::before {
	position: absolute;
	left: 0;
	width: 33%;
	bottom: 0;
	top: 0;
	content: "";
	background-image: linear-gradient(-135deg,#bed2ec,transparent);
	box-shadow: 1px 0 0 0 #75a7c2;}
	
	.doublet > aside > img {
	width: 33%;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;}
}
@media screen and (min-width:1500px){
.doublet > aside ~ *, .columns {
	column-count: 2;
	column-gap: 25px;
}}

.doublet > aside ~ * > * {
    margin: 0;
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid;           
    break-inside: avoid-column;         
    display:/*table*/block;                     
}


.bigTable {margin-bottom: 25px;}
.bigTable td {
  padding: 1px 3px;
  border-bottom: 1px solid #bed2ec;
}
.bigTable th {
  color: #4c5960;
  border-bottom: 10px solid white;
  padding: 1px 3px 3px 1px;
}
.bigTable td:first-of-type:not(:only-child), .bigTable th {
  font-weight: bold;
  text-align: left;
  line-height: 100%;
  box-shadow: inset 0 0 0 100px rgba(190, 210, 236, 0.2);
}
.bigTable tr:nth-of-type(2n+1) {
  background-color: rgba(190, 210, 236, 0.2);
}
.bigTable td > small:only-child {
	line-height: 14px;
	opacity: 1;
	display: block;
}

.timeTable {
	margin-top: 25px;
} 
@media screen and (min-width:1300px){.timeTable {display: table !important;}}
@media screen and (max-width:1300px){
	[data-switcher=".timeTable"]::after {
	content: "+";
	display: inline-flex;
	left: 10px;
	background-image: linear-gradient(45deg,#bed2ec,#99bde6);
	width: 20px;
	align-items: center;
	color: white;
	border-radius: 3px;
	transform: scale(1.5);
	height: 20px;
	justify-content: center;
	box-shadow: 0 0 0 1px #a2b2c3;
}
	[data-switcher=".timeTable"].opened::after {content: "-"}
.timeTable {
	position: absolute;
	z-index: 2;
	background-color: white;
	box-shadow: 0 0 0 26px white, 0 3px 10px 26px rgba(0, 0, 0, 0.5);
	left: 0;
	right: 0;
	display: none;
	}}


.timeTable td {
  height: 15px;
  vertical-align: middle;
}	
.timeTable span:not(:empty) {
	background-color: currentColor;
	display: block;
	width: 100%;
	height: 90%;
	overflow: hidden;
	transform: skew(-60deg) scaleX(1.1);
	font-size: 0;
}
span[style*="color:#A52A2A"] {
	background-color: #1685d4 !important;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0));
}
span[style*="color:#008000"] {
	background-color: #61ad0e !important;
	background-image: linear-gradient(rgba(255, 255, 0, 0.3),rgba(255, 255, 0, 0));
}
.timeTable th[scope="row"] {
	text-align: right;
	padding-right: 25px;
	font-weight: bold;
	color: #3a5664;
}
.timeTable th[colspan="16"] {
  background-image: linear-gradient(#bed2ec,#bed2ec);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: center;
}
.timeTable tr:not(:last-of-type) td::after {
	content: "";
	position: absolute;
	height: 50px;
	top: -25px;
	left: 0px;
}

.timeTable tr:not(:last-of-type) td:nth-of-type(2n+1)::after {background-color: #9caab1;width: 2px;}
.timeTable tr:not(:last-of-type) td:nth-of-type(2n)::after {background-color: rgba(156, 170, 177, 0.2);width: 1px;}

.timeTable th[scope="col"] em {
	display: block;
	font-style: normal;
	width: 36px;
	overflow: hidden;
	background-color: white;
	font-weight: bold;
	font-size: 13px;
	left: -16px;
	z-index: 1;
	top: -10px;
	height: 18px;
	text-align: center;
	border-radius: 3px;
	letter-spacing: -0.5px;
}
.timeTable th[scope="col"]:nth-of-type(2n) em {box-shadow: 0 0 0 2px #9caab1; z-index: 2;}

.timeTable th[scope="col"]:nth-of-type(2n+1) em {
    box-shadow: 0 0 0 1px rgba(156, 170, 177, 0.2);
    color: #9caab1;
}
.timeTable tr:last-of-type td[colspan] {
	padding-left: 20px;
}


.gallery {
  background-color: beige;
  margin: 40px -50px;
  font-size: 0;
  padding: 2px;
  text-align: center;
}
.gallery figure {
  padding: 0;
  overflow: hidden;
  display: inline-block;
  width: calc(100% / 3 - 4px);
  max-width: 200px;
  margin: 2px;
	cursor: zoom-in;
}
.gallery figure img {
  width: 100%;
  height: auto;
  transition: all 1s;
}
.gallery figure:hover img {transform: scale(1.1) translate(-5px)}
.gallery figcaption:not(:empty) {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  right: 0;
  font-size: 14px;
  padding: 5px 10px;
  line-height: 100%;
}


content .mainImg {
	height: 300px;
	background-size: 0;
	width: calc(100% + 100px);
	overflow: hidden;
	border-left: 1px solid #3f3f3f;
	margin: -15px 0 30px -50px;
}
content .mainImg.bottom {
	margin: 30px 0 -30px -50px;
}
.mainImg::before,.mainImg::after {
	content: "";
	position: absolute;
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: center;}

.mainImg::before {
    background-size: cover;
    filter: blur(2px);
    background-position: center;
    opacity: 1;
    box-shadow: inset 0 -50px 100px rgba(33, 33, 33, 0.7), inset 0 0 0 10000px rgba(41, 41, 41, 0.9);
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
}
.mainImg::after {
	background-size: contain;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	box-shadow: 0 -1px 0 0 rgba(0,0,0,0.25) inset,0 -2px 0 0 rgba(0,0,0,0.2) inset,0 -3px 0 0 rgba(0,0,0,0.15) inset,0 -4px 0 0 rgba(0,0,0,0.1) inset,0 -5px 0 0 rgba(0,0,0,0.05) inset;
}

/******************************PROJECT***********************************/
.project {
	margin: -5px -5px 25px -5px;
}
.project > label {
	font-weight: bold;
	line-height: 95%;
	display: block;
	color: #455651;
	cursor: pointer;
	transition: all 0.3s;
	margin-bottom: 15px;
	border: 1px solid silver;
	padding: 15px;
	margin: 5px 5px 0px 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	background-color: rgba(190, 210, 236, 0.5);
}
.project > input:checked ~ label {background-color: #1394b4;color: white; border-color: #1394b4;}

.project > label:hover {color:black; background-color: white;}
.project label code {
	font-size: 90%;
	padding-right: 9px;
	margin-right: 3px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2));
	background-repeat: no-repeat;
	background-position: right 10%;
	background-size: 3px 80%;
}
.project input[type=checkbox] {display: none;}
.project .timeAxis {
	display: flex;
	margin-bottom: -30px;
	flex: 0;
	transform: skew(30deg);
	z-index: 1;
}
.project .timeAxis div {
	background-color: silver;
	height: 16px;
	border: 1px solid white;
	flex: 1;
}
.project .timeAxis div.startingYear, .project .timeAxis div.endingYear {
	background-color: #85aa06;
}
.project .timeAxis div.startingYear::after, .project .timeAxis div.endingYear::after {
	position: absolute;
	content: attr(data-year);
	top: calc(100% + 2px);
	left: 50%;
	background-color: rgb(76, 76, 76);
	color: white;
	font-size: 12px;
	padding: 0 5px;
	transform: translateX(calc(-50% - 6px)) skew(-30deg);
	font-weight: bold;
}
.project .timeAxis div.startingYear::before, .project .timeAxis div.endingYear::before {
	position: absolute;
	top: calc(100% - 4px);
	border-width: 0 6px 6px 6px;
	border-style: solid;
	border-color: transparent transparent rgb(76, 76, 76) transparent;
	content: "";
	left: calc(50% - 5px);
	transform: skew(-30deg);
}

[data-overflow*="farFuture"] .endingYear,[data-overflow*="farPast"] .startingYear,[data-overflow*="farFarPast"] .endingYear {
	background-image: linear-gradient(90deg,white,white),linear-gradient(9deg,white,white),linear-gradient(90deg, white,white);
	background-repeat: no-repeat;
	background-size: 3px 100%;
	position: absolute;
	width: 30px;
}

[data-overflow*="farFuture"] .endingYear {
	background-position: 3px center,9px center,15px center;
	right: -15px;
	border-left-width: 3px !important;
}

[data-overflow*="farPast"] .startingYear,[data-overflow*="farFarPast"] .endingYear {
	left: -15px;
	width: 30px;
	border-right-width: 3px !important;
	z-index: 1;
}
[data-overflow*="farPast"] .startingYear {background-position: right 3px center,right 9px center,right 15px center;}
[data-overflow*="farFarPast"] .endingYear {background-position: calc(50% - 6px) center,center center,calc(50% + 6px) center;}

.project .timeAxis div.startingYear ~ div:not(.endingYear) {
	background-color: #1394b4;
}

.project .timeAxis div.startingYear ~ div.endingYear ~ div {
	background-color:silver;
}
.projectContent {
	padding: 0 20px;
	margin: 30px 5px;
	transition: all 0.3s;
	overflow: hidden;
	border: 1px solid transparent;
	max-height: 0;
}
.projectContent > div {transition: all 0.3s;}
.project > input:checked ~ .projectContent {border: 1px solid silver; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 25px 20px;max-height: 200vh;}
.project > input:not(:checked) ~ .projectContent > div:first-of-type {margin-top: -100%;}

.projectContent [data-title] {
	margin-left: 150px;
	border-left: 5px solid #85aa06;
	padding-left: 15px;
}
.projectContent [data-field="description"]:not(:empty) {
	padding-top: 15px;
}
.projectContent [data-title]:not(:empty)::before {
	content: attr(data-title);
	position: absolute;
	width: 150px;
	left: -150px;
	padding-right: 15px;
	font-weight: bold;
	white-space: nowrap;
	display: flex;
	justify-content: flex-end;
	color: #455658;
	font-size: 14px;
}
.project .articles {
	font-size: 80%;
	margin-top: 25px;
	line-height: 105%;
	color: #3a5664;
	text-align: justify;
	padding-right: 25px;
	max-height: 300px;
	overflow: auto;
}
.project .article {
	padding-bottom: 7px;
}
.project .article::before {
	display: none;
}

.person + .projects:not(:empty) {margin-top: 50px;}

@media screen and (max-width:1200px) and (min-width:1000px) {
	.projectContent [data-title] {
	margin-left: 0;
	padding-left: 8px;
	margin-bottom: 8px;
}
.projectContent [data-title]:not(:empty)::before {
	position: relative;
	width: unset;
	left: -15px;
	padding-right: 0;
	display: block;
	background-color: white;
}
}


/********************************************ARTICLE****************************************************/
.article {
	left: 12px;
	padding-bottom: 20px;
}
.article::before {
	content: "";
	position: absolute;
	width: 80px;
	left: -90px;
	top: -24px;
	bottom: 3px;
	background-color: #45657C;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: white;
	font-size: 32px;
	padding: 25px 5px;
	transform: scaleX(0.65);
	transform-origin: right;
}
.article:first-of-type::before,
.article:not([data-year="2020"]) + .article[data-year="2020"]::before,
.article:not([data-year="2019"]) + .article[data-year="2019"]::before,
.article:not([data-year="2018"]) + .article[data-year="2018"]::before,
.article:not([data-year="2017"]) + .article[data-year="2017"]::before,
.article:not([data-year="2016"]) + .article[data-year="2016"]::before,
.article:not([data-year="2015"]) + .article[data-year="2015"]::before,
.article:not([data-year="2014"]) + .article[data-year="2014"]::before,
.article:not([data-year="2013"]) + .article[data-year="2013"]::before {content: attr(data-year); box-shadow: 0 3px 0 white inset;}

.article[data-year="2020"]::before {background-color: orange;}
.article[data-year="2019"]::before {background-color: orangered;}
.article[data-year="2018"]::before {background-color: #0088B9;}
.article[data-year="2017"]::before {background-color: #03A86D;}
.article[data-year="2016"]::before {background-color: #048623;}
.article[data-year="2015"]::before {background-color: #5C9B13;}
.article[data-year="2014"]::before {background-color: #DC941E;}
.article[data-year="2013"]::before {background-color: #DB672B;}

.article > input[type="checkbox"] {display:none;}
.article > label {
	cursor: pointer;
	display: block;
	padding: 10px 15px 0 15px;
	position: static;
}
.article > input:checked ~ label {background-color: #1394b4; color: white;}
.article > input:checked ~ label::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 15px;
	content: "";
	box-shadow: 0 0 0 1px silver, 0 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.articleContent {
	transition: all 0.3s;
	overflow: hidden;
	border: 1px solid transparent;
	max-height: 0;
	padding: 0 15px;
	margin-top: -10px;
}
.articleContent > [data-field] {
	transition: all 0.3s;
	padding-left: 80px;
	display: block;
}
.articleContent > [data-field]:empty {display:none;}
.articleContent > [data-field]::before {
	content: attr(data-field);
	width: 70px;
	text-align: right;
	padding-right: 10px;
	font-weight: bold;
	margin-left: -80px;
	border-right: 3px solid #98aa06;
	position: absolute;
	height: 100%;
	text-transform: uppercase;
	font-size: 12px;
	color: #173f31;
}

.article > input:checked ~ .articleContent {
	max-height: 300px;
	padding: 15px 15px;
}
.article > input:not(:checked) ~ .articleContent > div:first-of-type {margin-top: -100%;}
.if-slider {
	background-image: linear-gradient(90deg,#d3d8a7,#8eb60b,#0082a5);
	height: 24px;
	overflow: hidden;
	margin: 0 -15px;
}
.if-slider def {
	position: absolute;
	height: 100%;
	width: 200%;
	margin-left: -100%;
	left: calc(10% + 12px - (0.24px * 10));
	font-weight: bold;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
.if-slider def::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	background-image: linear-gradient(white,white), linear-gradient(white,white),linear-gradient(white,white),linear-gradient(white,white);
	background-repeat: no-repeat;
	background-size: calc(50% - 12px) calc(50% - 1px);
	background-position: left top, left bottom, right top, right bottom;
}
.article > input:checked ~ label .if-slider def::before {	background-image: linear-gradient(#1394b4,#1394b4), linear-gradient(white,white),linear-gradient(#1394b4,#1394b4),linear-gradient(white,white);}
.if-slider def:not([data-ifak="NaN"])::after {
	content: attr(data-ifak);
	box-shadow: inset 0 0 0 1px;
	height: 100%;
	display: inline-flex;
	width: 24px;
	justify-content: center;
	align-items: center;
	letter-spacing: -1px;
	font-size: 13px;
}
.if-slider def[data-ifak="NaN"]::before {	background-size: 50% calc(50% - 1px); }


/*******************************************PEOPLE************************************************************/
.peop {
	margin: 15px -15px;
	border: 1px solid silver;
	padding: 15px 15px 25px 125px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	vertical-align: top;
	background-image: linear-gradient(45deg,white,transparent),url(../../data/uploads/pictures/avatar.png);
	background-size: 0;
}
.peop::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100px;
	content: "";
	background-color: #bed2ec;
	background-image: inherit;
	background-size: 100%, 90% auto;
	background-position: center 15%;
	background-repeat: no-repeat;
	box-shadow: -1px 0 0 0 silver inset, -2px 0 0 0 rgba(192, 192, 192, 0.5) inset, -3px 0 0 0 rgba(192, 192, 192, 0.25) inset;
}
.peop[data-image]::before {background-position: center center; background-size: cover;}
.peop > h3 {
	margin-bottom: 7px;
}
.peop > h3 > a:first-of-type {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
.peopContent > a {
	text-decoration: none;
	padding: 0 5px;
	margin: 1px;
	max-width: 300px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 3px;
	padding-left: 29px;
}
.peopContent > a::before {
	vertical-align: top;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	bottom: 0;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
}
.peopContent > a[href^="http"] {
	background-color: #DEE8F5;
	color: #155c99;
}
.peopContent > a[href^="mailto:"], .person aside a[href^="mailto:"] {
	background-color: #cef08c;
	color: #428554;
	padding: 0px 7px 0px 30px;
	border-radius: 3px;
	text-decoration: none;

}
.person aside a[href^="mailto:"] {
    box-shadow: 0 1px 2px 1px rgba(7, 28, 54, 0.2);
    left: -23px;
    padding: 2px 7px 2px 30px;
}
.peopContent > a[href^="mailto:"]::before {background-image: url(https://icongr.am/material/email.svg?color=ffffff&size=16);}
.person aside a[href^="mailto:"]::before {
	content: "";
	background-image: url(https://icongr.am/material/email.svg?color=ffffff&size=16);
	width: 30px;
	position: absolute;
	background-color: #428658;
	background-size: 93%;
	background-repeat: no-repeat;
	border-radius: 3px 0 0 3px;
	left: 0;
	background-position: center;
	display: inline-block;
	vertical-align: bottom;
	top: 0px;
	border-right: 5px solid #cef08c;
	bottom: 0;
}


.peopContent > a[href^="http"]::before {background-image: url(https://icongr.am/material/launch.svg?color=ffffff&size=16);}
.peop small {
	opacity: 0.5;
	font-size: 67%;
}
.peop .working {
	margin-top: 15px;
}
.peop .aseplink {
	white-space: nowrap;
}
.peop .aseplink[href*="http"]::before {
	content: "";
	position: absolute;
	width: 4px;
	background-color: #155c99;
	height: 16px;
	left: 4px;
	transform: skewY(-30deg);
	transform-origin: right;
	border-radius: 5px 0 0 0;
}
.peop .aseplink[href*="http"]::after {
	content: "𝗔𝗦𝗘𝗣";
	font-size: 12px;
	display: inline-flex;
	top: -6px;
	left: 8px;
	background-color: #a8c5ea;
	padding: 1px 4px 0px 20px;
	height: 16px;
	justify-content: flex-start;
	align-items: center;
	color: white;
	background-image: url(https://icongr.am/material/library.svg?color=ffffff&size=14),linear-gradient(#155c99,#155c99);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto auto, 17px;
	border-radius: 0 3px 3px 0;
	line-height: 0;
}

@media screen and (min-width:1500px) {
	.peop {	width: calc(50%); display: inline-block;}
	.peop:nth-of-type(2n) {	left: 50px;}
}

.blog .personCard {
  border: 1px solid #bcd0e8;
  padding: 15px 25px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  background-color: white;
}
.blog .personCard:first-of-type {
  margin-top: -15px;
}
.blog .personname > a:first-child {
  font-size: 18px;
  font-weight: bold;
  background-color: #5c91a7;
  display: block;
  margin: -16px -25px 20px -25px;
  padding: 7px 25px;
  color: white;
  text-decoration: none;
  background-image: linear-gradient(45deg,#4b9856,#259194);
}
.blog .personContact {
  text-align: right;
  opacity: 0.75;
}
.blog .date {
  margin-left: auto;
  display: inline-block;
  background-color: #379442;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 5px;
}


/*******************************************EXCERPT************************************************************/
.excerpt {
	background-color: #bed2ec;
	padding: 25px;
	max-width: 100%;
	overflow: hidden;
	margin-bottom: 15px;
	box-shadow: 0 5px 10px #0003;
	border-bottom: 5px solid #008ea4;
	background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.4),transparent);
	font-size: 90%;
	min-height: 146px;
}
.excerpt.green {
  background-image: linear-gradient(45deg,#addd69,#fefbe3 25%,#eae4e4 75%,#abe4ce);
  border-bottom-color: #468346;
}

.excerpt::before {
	position: absolute;
	left: 0;
	top: 110px;
	width: 110px;
	bottom: 0;
	content: "";
	background-image: linear-gradient(rgba(0, 128, 110, 0.3),transparent);
	box-shadow: 0 1px 0 0 white inset;
}
@media screen and (min-width:1500px) {
	.excerpt {
	width: calc(50% - 7px);
	display: inline-block;
	vertical-align: top;}
	.excerpt:nth-of-type(2n+1) {margin-right: 5px;}
	.excerpt:nth-of-type(2n) {margin-left: 5px;}
}
@media screen and (min-width:1200px) {
	.rightless .excerpt {
	width: calc(50% - 7px);
	display: inline-block;
	vertical-align: top;}
	.excerpt:nth-of-type(2n+1) {margin-right: 5px; margin-left: 0;}
	.excerpt:nth-of-type(2n) {margin-left: 5px; margin-right: 0;}
	.excerpt.full:nth-of-type(2n+1) + .pagurettes .excerpt:nth-of-type(2n+1) {margin-left: 5px; margin-right: 0;}
	.excerpt.full:nth-of-type(2n+1) + .pagurettes .excerpt:nth-of-type(2n) {margin-right: 5px; margin-left: 0;}
}
.excerptHeader {
	margin: -25px -25px 0 85px;
	background-color: #009bd8;
	min-height: 50px;
	padding: 7px 7px 7px 15px;
	background-image: linear-gradient(90deg,transparent,#00806e);
	background-position: right;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: all .3s;
	box-shadow: 0 0 0 0 #009bd8 inset;
}
.excerptHeader:hover {
	box-shadow: 0 0 200px #009bd8 inset;
	background-size: 0 100%;
}
.green .excerptHeader {
  background-color: #599c37;
  box-shadow: 0 0 0 0 #599c37 inset;
}
.green .excerptHeader:hover {
  box-shadow: 0 0 200px #599c37 inset;
}

.excerptThumb {
    position: absolute;
    left: 0;
    width: 110px;
    top: 0;
    background-size: cover;
    background-position: center;
    box-shadow: -1px 0 0 0 white inset;
    height: 110px;
    background-color: rgb(53, 134, 122);
    background-repeat: no-repeat;
}
.green .excerptThumb {
	background-color: #468346;
}
.excerptThumb[style*="logo.svg"] {
    background-size: contain;
    background-position: center top -5px;
}

.excerptThumb[data-nothumb] {
	background-image: url(images/blogbg.svg);
	background-size: 90% auto;
	background-repeat: no-repeat;
}

.excerpt .publishDetails {
	position: absolute;
	top: 115px;
	left: 0px;
	width: 110px;
	font-size: 0;
	border-color: rgba(255, 255, 255, 0.6);
	border-width: 1px;
	border-style: solid none;
}
aside .publishDetails {
	margin: 0px -19px -5px -35px;
}
@media screen and (max-width:1350px){
	aside .publishDetails {
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	margin-left: -30px;
}.news-H {
	top: 20px;
}}
.publishDetails span {
	background-color: rgb(0, 141, 161);
	border-color: rgba(255, 255, 255, 0.3);
	padding: 3px 5px;
	color: #bde230;
	font-size: 12px;
	border-width: 0;
	border-top-style: solid;
	border-bottom-style: solid;
	font-weight: bold;
	text-shadow: 0 0 2px #004d6a;
	width: calc(50% - 0px);
	display: inline-block;
}
.green .publishDetails span {
	background-color: #468346;
}
.publishDetails span:first-of-type {
	border-left-style: solid;
	overflow: hidden;
	vertical-align: top;
	text-overflow: ellipsis;
}
aside .publishDetails span:first-of-type{padding-left: 10px;}
.publishDetails span:last-of-type {
	border-right-style: solid;
	text-align: right;
}
aside .publishDetails span:last-of-type{padding-right: 10px;}
.publishDetails span + span::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -3px;
	background-color: white;
	width: 1px;
	transform: skew(30deg);
}

.excerptHeader > h3 {
	font-size: 20px;
	color: white;
	line-height: 1;
}
.excerptHeader > a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.excerptDetails {
	display: table;
	width: 100%;
	margin-top: 7px;
}
.excerptDetails > div {
	display: table-cell;
}
.excerptDetails .published {
	font-size: 0;
	vertical-align: bottom;
	text-align: right;
	white-space: nowrap;
}
.excerptDetails .linkedPages a {
	display: inline-block;
	color: #bddb3a;
	font-weight: bold;
	text-decoration: none;
	z-index: 1;
	transition: all .3s;
	background-image: linear-gradient(90deg,currentColor,currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: bottom center;
	padding-right: 5px;
}
.excerptDetails .linkedPages a:hover {background-size: 100% 1px; color: white}
.excerptDetails .published span {
	background-color: rgba(139, 165, 80, 0.4);
	border-color: rgba(255, 255, 255, 0.3);
	padding: 0 5px;
	color: #bde230;
	font-size: 12px;
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	font-weight: bold;
	text-shadow: 0 0 2px #004d6a;
}
.excerptDetails span:first-of-type {
	border-left-style: solid;
}
.excerptDetails span:last-of-type {
	border-right-style: solid;
}
.excerptDetails span + span::before  {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background-color: white;
	width: 1px;
	transform: skew(30deg);
}
.excerptDetails a + a {
	padding-left: 10px;
}
.excerptDetails a + a::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0px;
	background-color: white;
	width: 2px;
	transform: skew(30deg);
}
.excerpttext {
	padding: 7px 0 0 17px;
	margin: 0 0 0 84px;
	background-image: linear-gradient(white,transparent),linear-gradient(90deg,white,transparent);
	background-repeat: no-repeat;
	background-size: 1px 100%, 100% 1px;
	background-position: top left;
}
.excerpttext p {
	display: inline;
}

.excerpttext span + span {
	border-left: 2px solid #98a8bd;
	padding-left: 5px;
}
.excerpttext[data-overflew="1"]::after {
	content: "";
	display: inline-block;
	border-radius: 100%;
	height: 8px;
	width: 8px;
	background-color: currentColor;
	box-shadow: -10px 0 0 0, 10px 0 0 0;
	color: white;
	margin-left: 17px;
	top: 1px;
}
.green .excerpttext[data-overflew="1"]::after {
    color: #a1c663;
}

.excerptImages:not(:empty) {
	font-size: 0;
	margin: 15px -25px -10px;
	overflow-x: auto;
	white-space: nowrap;
	text-align: center;
	max-width: calc(100% + 50px);
	background-color: rgba(0, 0, 0, 0.2);
}
.excerptImages img {
	height: 50px;
}
.excerptImages img + img {
	border-left: 1px solid #bed2ec;
}
aside .nothumb {
	transform: scale(0.8);
}

/* TEMPORARY HIDE UNSUPPORTED FUNCTION */
#sidemenu .articles a + a + a, #sidemenu .clanky a + a + a {
	display: none;
}