/* Common
-------------------------------------------------- */
.logo {
	height: 80px;
}
nav {
	height: 100%;
	margin-top: 24px;
}
nav ul {
	display:flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	height: 100%;
	align-items: start;
}
nav ul li {
	text-transform: uppercase;
	list-style: none;
	display: flex;
}
nav ul li a {
	color: #2E7F3E;
	font-weight: 500;
}
nav ul li a.active {
	color: #000000;
	text-decoration: underline;
}
nav ul li a:hover {
	color: #000000;
}

nav ul li:last-child a {
	color: #fb5f3d;
	font-size: 0.9em;
    display: block;
}
nav ul li:last-child a span{
	font-size: 0.6em;
	display: block;
	text-align: right;
}


h1 {
	color: #003188;
}
.hot {
	color:#fb5f3d;
	font-size: 1.4em;
	font-weight: 500;
}
.hottel {
	color:#fb5f3d;
	font-size: 3.2em;
	font-weight: 900;
	margin-top: 0.8em;
	display: block;
}
.hotemail {
	color:#fb5f3d;
	font-size: 2.4em;
	font-weight: 900;
	margin-bottom: 1.8em;
	display: block;
}
.coronavirus {
	display: block;
}
.corona-head {
	background: url('stop.png') center top no-repeat;
}
.reglam {
	background: #e7ecff;
	padding: 4.0em 0;
	font-size: 1.2em;
}
.gototop {
	font-size: 2.0em;
	font-weight: 700;
	position: fixed;
	bottom: 0;
	right: 0;
	display: block;
	height: 40px;
	width: 40px;
	text-align: center;
	color: #FFFFFF;
	background-color: #CCCCCC;
	z-index: 9;
	-webkit-animation: 0.2s linear all;
    animation: 0.2s linear all;		
}
.gototop:hover {
	text-decoration: none;
	background-color: rgb(183, 65, 14);
	color: #FFFFFF;
	-webkit-animation: 0.2s linear all;
    animation: 0.2s linear all;	
}

.doc-link {
    font-size: 0.8em;
    line-height: 1.4em;
    border: 2px solid #b6c6ff;
    border-radius: 8px;
    padding: 2.0em;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    min-height: 330px;
	font-weight: 700;
	color: #6e88f5;
	transition: color 0.3s ease;
	transition: background-color  0.3s ease;
}
.doc-link:hover {
	background: #FFFFFF;
	color: #000000;
	transition:  color 0.3s ease;
	transition:  background-color 0.3s ease;
	text-decoration: none;
}
.doc-link span {
	display: flex;
}
.doc-link i {
	font-size: 3.0em;
	position: absolute;
	bottom: 24px;
    right: 48px;
}
.attention {
	padding: 4.0em 0;
	font-size: 1.2em;
}
.att-body {
	background: url(attention.png) left center no-repeat;
	padding-left: 96px;
}
.corona-link {
	padding: 1em 0;
	background: url(corona-bg.jpg) top center no-repeat;
	background-size: cover;
	text-align: center;
	font-size: 4.0em;
	font-weight: 900;
}
.corona-link a {
	color: #FFFFFF;
	text-shadow: 0px 0px 4px #000000;;
}

.order {
	padding: 5.0em 0;
}

.footer {
	background: #daf5f8;
	padding: 4.0em;
}
.howto {
	background: #e7ecff;
	padding: 4.0em 0;
}
.display-4 {
	font-size: 1.6rem;	
}
.faq {
	padding: 4.0em 0;
	background: url(covid.jpg) bottom left no-repeat, url(covid.jpg) top right no-repeat;
}
.faq p {
	font-size: 2.0em;
}
.faq p a{
	display: block;
	width: 100%;
	color: #003188;
	border-top:1px dashed #CCC;
	padding-top: 15px;
}
.faq .card {
	background-color: transparent;
}
.faq .card.card-body {
	border: none;
}
.faq .card.card-body p {
	font-size: 1.2em;
}

.stage {
	padding: 1.0em 0 6.0em 0;
}
.stage h1 {
	font-weight: 900;
	color: #FFFFFF;
	font-size: 6em;
}
.stage p {
	font-size: 1.6em;
}
.stage.third p {
	margin-bottom:1.8rem;
}
.stage p a {
	color: #000000;
	text-decoration: underline;
}
.stage.third p a {
	text-decoration: none;
}
.stage.third p a:hover {
	text-decoration: underline;
}
.teacher .telework {
	background:#b6dbde;
}
.teacher .stage.telework {
	padding: 3.0em 0 4.0em 0;
}
.teacher .telework .container {
	background: url(attention.png) left center no-repeat;
	background-size: contain;
}
.teacher .stage.telework p {
	margin-bottom: 0;
	padding-left:46px;
}
.student .telework {
	background:#1dafcc;
}
.student .stage.telework {
	padding: 3.0em 0 4.0em 0;
}
.student .telework .container {
	background: url(attention.png) left center no-repeat;
	background-size: contain;
}
.student .stage.telework p {
	margin-bottom: 0;
	padding-left:46px;
}
.stage p a:hover {
	color: #003188;
}
.student .first {
	background: #c0eff5;
}

.student .second {
	background: #fccca8;
}

.student .third {
	background: #bfbef7;
}
.teacher .first {
	background: #f7bcbc;
}

.teacher .second {
	background: #cce5e4;
}

.teacher .third {
	background: #bfbef7;
}

.elib {
	padding: 1.0em 0 6.0em 0;
} 
.item-logo {
    border: 10px solid transparent;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    display: block;
}
.item-logo img {
	height: 160px;
	width: 160px;
}
.item-logo:hover {
	border: 10px solid #E1EEE0;
	text-decoration: none;
}
.rounded {
    border-radius: 50%!important;
}

.doc-link.pol {
	min-height: 156px;
	border: 2px solid #009688;
	color: #009688;
	background: #e3f7f5;
}
.doc-prikaz {
	color: #6e88f5;
}
.doc-prikaz i, .doc-prikaz span.who {
	color: #6e88f5;
	font-weight: 700;
}
.doc-prikaz span.title {
	display: block;
	font-size: 0.8em;
    padding-left: 24px;	
}



.link-inst {
	font-size:1.8em;
	color:#003188;
	display: block;
    margin-top: 0.8em;	
  }


  h1.h1-min {
	color: #003188; font-size: 2.5rem; font-weight: 500;
  }


/* Responsive
-------------------------------------------------------------------------------------*/



@media (max-width: 769px) { 
	nav ul {
		flex-direction: column;
		align-items: flex-start;
	}
	nav ul li {
		margin-bottom: 12px;
	}	
	.display-2 {
		font-size: 3.0em;
	}
	.hottel {
		font-size: 2.2em;
	}
	.doc-link {
		min-height: 400px;	
	}	
	.corona-link {
		font-size: 2.0em;
		padding: 2.0em 0;
	}	
	.teacher .telework .container, .student .telework .container {
		background: none;
		font-size:0.8em;
	}	
	h2 {
		font-size: 1.2rem;
	}
	.link-inst {
		font-size: 1.0em;
	}
	.stage h1.h1-min {
		font-size: 2.5rem;
	}
}
@media (max-width: 418px) { 
	nav ul {
		flex-direction: column;
		align-items: flex-start;
	}
	nav ul li {
		margin-bottom: 12px;
	}	
	.display-2 {
		font-size: 3.6em;
	}
	.doc-link {
		min-height: 230px;	
	}
	.doc-link.pol {
		min-height: 190px;
	}	
	.corona-link {
		font-size: 1.6em;
	}		
	.display-4 {
		font-size: 1.6rem;	
	}
	.stage h1 {
		font-size: 4em;
	}
	.display-2.teacher-h1 {
		font-size: 2.8em;
	}
	.hotemail {
		font-size: 1.8em;	
	}	
}
@media (max-width: 361px) { 
	.display-2 {
		font-size: 2.6em;
	}
	.hottel {
		font-size: 1.8em;
	}	
	.corona-link {
		font-size: 1.8em;
		padding: 2.0em 0;
	}		
}	
@media (max-width: 340px) { 
	.display-2 {
		font-size: 2.0em;
	}
	.hottel {
		font-size: 1.2em;
	}	
	.corona-link {
		font-size: 1.0em;
	}		
	.logo {
		height: 40px;
	}
	.coronavirus {
		height: 200px;
	}	
}