/*
	        J  Y   Y  X   X   FFFFF  rrrr     a     m m    eee   w   w   ooo   rrrr   k   k
	       J   Y Y    X X     F      r   r   a a   m m m  e   e  w w w  o   o  r   r  k  k
	      J    Y      X       FFF    rrrr   a   a  m m m  eeee   w w w  o   o  rrrr   kkk
	 J   J    Y     X X       F      r   r  aaaaa  m   m  e      w w w  o   o  r   r  k  k
	 JJJ     Y    X   X       F      r   r  a   a  m   m   eeee   w w    ooo   r   r  k   k
	
	Version v2 
	Date    19-6-2022
	This code is Copyright (C) by Julian
*/


body{margin: 0;}

/* Container and Grid system*/
@media only screen and (max-width: 580px){
	/* = = = = = SM = = = = = */
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container{ width: 96%; }

	.hide-sm{display: none;}

	.col-sm, .col-sm-12, .col-md, .col-md-12, .col-lg, .col-lg-12, .col-xl, .col-xl-12,
	.col-sm, .col-sm-11, .col-md, .col-md-11, .col-lg, .col-lg-11, .col-xl, .col-xl-11,
	.col-sm, .col-sm-10, .col-md, .col-md-10, .col-lg, .col-lg-10, .col-xl, .col-xl-10,
	.col-sm, .col-sm-9, .col-md, .col-md-9, .col-lg, .col-lg-9, .col-xl, .col-xl-9,

	.col-sm, .col-sm-8, .col-md, .col-md-8, .col-lg, .col-lg-8, .col-xl, .col-xl-8,
	.col-sm, .col-sm-7, .col-md, .col-md-7, .col-lg, .col-lg-7, .col-xl, .col-xl-7,
	.col-sm, .col-sm-6, .col-md, .col-md-6, .col-lg, .col-lg-6, .col-xl, .col-xl-6,
	.col-sm, .col-sm-5, .col-md, .col-md-5, .col-lg, .col-lg-5, .col-xl, .col-xl-5,

	.col-sm, .col-sm-4, .col-md, .col-md-4, .col-lg, .col-lg-4, .col-xl, .col-xl-4
	.col-sm, .col-sm-3, .col-md, .col-md-3, .col-lg, .col-lg-3, .col-xl, .col-xl-3,
	.col-sm, .col-sm-2, .col-md, .col-md-2, .col-lg, .col-lg-2, .col-xl, .col-xl-2,
	.col-sm, .col-sm-1, .col-md, .col-md-1, .col-lg, .col-lg-1, .col-xl, .col-xl-1 { flex: 0 0 100%; max-width: 100%; }
}

@media only screen and (min-width: 580px){
	/* = = = = = MD = = = = = */
	.container-sm{ width: 540px; }
	.container-md,
	.container-lg,
	.container-xl,
	.container{ width: 96%;  }

	.hide-md{display: none;}

	.col-md, .col-md-12, .col-lg, .col-lg-12, .col-xl, .col-xl-12,
	.col-md, .col-md-11, .col-lg, .col-lg-11, .col-xl, .col-xl-11,
	.col-md, .col-md-10, .col-lg, .col-lg-10, .col-xl, .col-xl-10,
	.col-md, .col-md-9, .col-lg, .col-lg-9, .col-xl, .col-xl-9,

	.col-md, .col-md-8, .col-lg, .col-lg-8, .col-xl, .col-xl-8,
	.col-md, .col-md-7, .col-lg, .col-lg-7, .col-xl, .col-xl-7,
	.col-md, .col-md-6, .col-lg, .col-lg-6, .col-xl, .col-xl-6,
	.col-md, .col-md-5, .col-lg, .col-lg-5, .col-xl, .col-xl-5,
	
	.col-md, .col-md-4, .col-lg, .col-lg-4, .col-xl, .col-xl-4,
	.col-md, .col-md-3, .col-lg, .col-lg-3, .col-xl, .col-xl-3,
	.col-md, .col-md-2, .col-lg, .col-lg-2, .col-xl, .col-xl-2,
	.col-md, .col-md-1, .col-lg, .col-lg-1, .col-xl, .col-xl-1 { flex: 0 0 100%; max-width: 100%; }


	.col-sm, .col-sm-11{ flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
	.col-sm, .col-sm-10{ flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
	.col-sm, .col-sm-9{ flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
	
	.col-sm, .col-sm-8{ flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
	.col-sm, .col-sm-7{ flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
	.col-sm, .col-sm-6{ flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
	.col-sm, .col-sm-5{ flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
	
	.col-sm, .col-sm-4{ flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
	.col-sm, .col-sm-3{ flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
	.col-sm, .col-sm-2{ flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
	.col-sm, .col-sm-1{ flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
	
}

@media only screen and (min-width: 740px){
	/* = = = = = LG = = = = = */
	.container-sm,
	.container-md{ width: 700px; }
	.container-lg,
	.container-xl,
	.container{ width: 96%; }

	.hide-lg{display: none;}

	.col-lg, .col-lg-12, .col-xl, .col-xl-12,
	.col-lg, .col-lg-11, .col-xl, .col-xl-11,
	.col-lg, .col-lg-10, .col-xl, .col-xl-10,
	.col-lg, .col-lg-9, .col-xl, .col-xl-9,

	.col-lg, .col-lg-8, .col-xl, .col-xl-8,
	.col-lg, .col-lg-7, .col-xl, .col-xl-7,
	.col-lg, .col-lg-6, .col-xl, .col-xl-6,
	.col-lg, .col-lg-5, .col-xl, .col-xl-5,
	
	.col-lg, .col-lg-4, .col-xl, .col-xl-4,
	.col-lg, .col-lg-3, .col-xl, .col-xl-3,
	.col-lg, .col-lg-2, .col-xl, .col-xl-2,
	.col-lg, .col-lg-1, .col-xl, .col-xl-1 { flex: 0 0 100%; max-width: 100%; }


	.col-sm, .col-sm-11,.col-md, .col-md-11{ flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
	.col-sm, .col-sm-10,.col-md, .col-md-10{ flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
	.col-sm, .col-sm-9, .col-md, .col-md-9 { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
	
	.col-sm, .col-sm-8, .col-md, .col-md-8 { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
	.col-sm, .col-sm-7, .col-md, .col-md-7 { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
	.col-sm, .col-sm-6, .col-md, .col-md-6 { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
	.col-sm, .col-sm-5, .col-md, .col-md-5 { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
	
	.col-sm, .col-sm-4, .col-md, .col-md-4 { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
	.col-sm, .col-sm-3, .col-md, .col-md-3 { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
	.col-sm, .col-sm-2, .col-md, .col-md-2 { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
	.col-sm, .col-sm-1, .col-md, .col-md-1 { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
}

@media only screen and (min-width: 960px){
	/* = = = = = XL = = = = = */
	.container-sm,
	.container-md,
	.container-lg{ width: 920px; }
	.container-xl,
	.container{ width: 96%; }

	.hide-xl{display: none;}

	.col-xl, .col-xl-12,
	.col-xl, .col-xl-11,
	.col-xl, .col-xl-10,
	.col-xl, .col-xl-9,

	.col-xl, .col-xl-8,
	.col-xl, .col-xl-7,
	.col-xl, .col-xl-6,
	.col-xl, .col-xl-5,
	
	.col-xl, .col-xl-4,
	.col-xl, .col-xl-3,
	.col-xl, .col-xl-2,
	.col-xl, .col-xl-1 { flex: 0 0 100%; max-width: 100%; }

	.col-sm, .col-sm-11,.col-md, .col-md-11, .col-lg, .col-lg-11, { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
	.col-sm, .col-sm-10,.col-md, .col-md-10, .col-lg, .col-lg-10, { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
	.col-sm, .col-sm-9, .col-md, .col-md-9 , .col-lg, .col-lg-9, { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }
	
	.col-sm, .col-sm-8, .col-md, .col-md-8,.col-lg, .col-lg-8 { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
	.col-sm, .col-sm-7, .col-md, .col-md-7,.col-lg, .col-lg-7 { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
	.col-sm, .col-sm-6, .col-md, .col-md-6,.col-lg, .col-lg-6 { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
	.col-sm, .col-sm-5, .col-md, .col-md-5,.col-lg, .col-lg-5 { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }
	
	.col-sm, .col-sm-4, .col-md, .col-md-4,.col-lg, .col-lg-4 { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
	.col-sm, .col-sm-3, .col-md, .col-md-3,.col-lg, .col-lg-3 { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
	.col-sm, .col-sm-2, .col-md, .col-md-2,.col-lg, .col-lg-2 { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
	.col-sm, .col-sm-1, .col-md, .col-md-1,.col-lg, .col-lg-1 { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
}

@media only screen and (min-width: 1200px){
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl{ width: 1160px; }

	.col-sm, .col-md, .col-lg, .col-xl, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
	.col-sm, .col-sm-11, .col-md, .col-md-11, .col-lg, .col-lg-11, .col-xl, .col-xl-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
	.col-sm, .col-sm-10, .col-md, .col-md-10, .col-lg, .col-lg-10, .col-xl, .col-xl-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
	.col-sm, .col-sm-9, .col-md, .col-md-9, .col-lg, .col-lg-9, .col-xl, .col-xl-9 { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }

	.col-sm, .col-sm-8, .col-md, .col-md-8, .col-lg, .col-lg-8, .col-xl, .col-xl-8 { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
	.col-sm, .col-sm-7, .col-md, .col-md-7, .col-lg, .col-lg-7, .col-xl, .col-xl-7 { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
	.col-sm, .col-sm-6, .col-md, .col-md-6, .col-lg, .col-lg-6, .col-xl, .col-xl-6 { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
	.col-sm, .col-sm-5, .col-md, .col-md-5, .col-lg, .col-lg-5, .col-xl, .col-xl-5 { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }

	.col-sm, .col-sm-4, .col-md, .col-md-4, .col-lg, .col-lg-4, .col-xl, .col-xl-4 { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
	.col-sm, .col-sm-3, .col-md, .col-md-3, .col-lg, .col-lg-3, .col-xl, .col-xl-3 { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
	.col-sm, .col-sm-2, .col-md, .col-md-2, .col-lg, .col-lg-2, .col-xl, .col-xl-2 { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
	.col-sm, .col-sm-1, .col-md, .col-md-1, .col-lg, .col-lg-1, .col-xl, .col-xl-1 { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }
}

.container-fluid { width: auto; }
div[class^="container"] {
		margin: auto;  
		position: relative; 
		padding: 10px 2%;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
.col-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
.col-9 { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); }

.col-8 { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); }
.col-7 { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); }
.col-6 { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); }
.col-5 { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); }

.col-4 { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); }
.col-3 { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); }
.col-2 { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); }
.col-1 { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); }

.col { flex:auto;}

.row{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;

	text-align: center;
}



/* = = = = = Text align = = = = = */

.text-left { text-align: left; }
.text-center{ text-align: center; }
.text-right { text-align: right; }


/* = = = = = Cards = = = = = */

.card {
	border: 2px solid rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 5px;
	margin: 10px 0;
	width: 95%;
}


.card-header {
	border-bottom: 1px solid rgba(0,0,0, 0.2);
	padding: 12px 4px;
}

.card-body{
	padding: 4px;
}

.card-footer {
	border-top: 1px solid rgba(0,0,0, 0.2);
	padding: 12px 4px;
}

.card a{
	margin-top: 16px;
	margin-bottom: 16px; 
}



/* = = = = = Navbar = = = = = */

nav{
	display: flex;
	justify-content: space-between;
	top: 0;
	padding: 0;
	
	width: 100%;
	z-index: 5;

	background-color: #fff;
}

nav.fixtop{ position: fixed; }
nav.sticky{
	position: sticky;
	overflow: hidden;
}

nav ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;

	overflow: hidden;
	list-style: none;
}

nav ul li {

}

nav ul a {
	display: block; 
	padding: 16px 16px;

	text-decoration: none;
	font-size: 20px;
	color: #000;
	text-align: left;
}

nav ul .active {
	background-color: #beb;
	color: #000;
}

nav ul .icon {
	display: none;
	margin-bottom: auto;
}

nav ul a:hover{
	background-color: #eee;
	color: black;
}


@media screen and (max-width: 960px) {
	nav ul[class="nav"] li:not(.fix-nav){ display: none; }
	nav ul li.icon { display: block; }

	nav ul.responsive{
		display: flex;
		flex-direction: column; 
		align-items: flex-start;		
	}
	nav ul.responsive .icon {
		position: block;
		right: 0;
		top: 0;
	}
	nav ul.responsive li {
		display: block;
		text-align: left;
	}
}



/* = = = = = Slideshow container = = = = = */
.slideshow-container {
	position: relative;
	margin: auto;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the button */
.prev {
	left: 0;
	border-radius: 0 4px 4px 0;
}

.next {
	right: 0;
	border-radius: 4px 0 0 4px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 0px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
	position: absolute;
	font-size: 12px;
	font-weight: bold; 
	color: #000;
	background-color: #fff4;
	padding: 8px 12px;
	top: 0;
	border-radius: 0 0 4px 0;
}

/* The dots/bullets/indicators */
.slideshow-container .dot {
	cursor: pointer;
	display: inline-block;
	height: 8px;
	width: 25px;
	border: 2px solid #0af;
	margin: 0;
	background-color: #0af;
	border-radius: 2px;
	transition: background-color 0.6s ease;
}

.slideshow-container .active, .slideshow-container .dot:hover {
	background-color: #08c;
	border: 2px solid #0af;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
	.prev, .next,.text {font-size: 12px}
}


/* = = = = = = = = = Scroll bar = = = = = = = = = */
/* tiknis */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555; 
}