@charset "utf-8";



/*
================================================================================================
BASE
================================================================================================
*/	
	
	
*:focus {
    outline: none;
}	
	
html,body {
	padding:0;
	margin: 0;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
}

html.noscroll,
body.noscroll {
	overflow: hidden;
}


body {
	--container-width: 1200px;
	
	--color-main:#1b68ff;
	
	--bg-color: #fff;
	--bg-color-alt: #eee;
	--bg-color-1: #f8f8f8;
	--bg-color-2: #f5f5f5;
	--bg-color-3: #f4f4f4;
	--bg-default: #e0e1e2;
	--bg-default-hover: #cacbcd;
	
	--color-border:#dededf;
	
	--color-text: #000;
	--color-text-1: #030029;
	--color-text-2: #74738c;
	--color-text-3: #b4b3c0;
	
	--color-blue:#1b68ff;
	--color-blue-alt:#145ae5;
	
	--color-red:#a92c2c;
	--color-red-alt:#982626;
	
	--color-green:#a2c31c;
	--color-green-alt:#89a614;
	
	--color-yellow:#d09f21;
	--color-yellow-alt:#fbc332;
	
}

	
body {
	font-family: Volkart,sans-serif;
	font-weight: 400;
	font-size:1rem;
	background-color:var(--bg-color);
	line-height: 1.75;
	color:var(--color-text-2);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;

}

html,body {
	background-color:var(--bg-color);
}

.container {
	width:var(--container-width);
	margin:0 auto;
	overflow: hidden;
}

.container.container-full {
	width:100%;
}

/* LG */
@media (min-width: 1601px) { 
	.container.container-full-xl {	width:100%; }
}

/* LG */
@media (max-width: 1600px) { 
	.container.container-full-lg {	width:100%; }
}

/* MD */
@media (max-width: 1200px) { 
	.container.container-full-md {	width:100%; }
}

/* SM */
@media (max-width: 992px) { 
	.container.container-full-sm {	width:100%; }
}

/* XS */
@media (max-width: 768px) {
	.container.container-full-xs {	width:100%; }
}



#app {
	position: relative;
	transition: all 0.4s ease;
	z-index:100;
}

#app-backdrop {
	z-index:50;
	background-color:#000;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 50vh;
	display:none;
	background-image: url("../img/jo/app-backdrop.jpg");
	background-size:cover;
	background-position: top center;
	opacity:0;
}

#app.push.left {
	margin-left:100px;
}
#app.push.right {
	margin-right:100px;
}
#app.push.top {
	margin-top:100px;
}
#app.push.bottom {
	margin-top:-100px;
}
#app.scale-down {
	transform: scale(0.9,0.9);
}
#app.blur {
	-webkit-filter: blur(3px);
	filter: blur(3px);	
}
	
.content-left {
	float: left;
	width:225px;
	padding:0 50px 0 0;
}

	.content-left:after {
		content:" ";
	}

.content-center {
	float: left;
	width:calc(100% - 275px);
}


p {
	margin:0 0 30px;
	padding: 0;
}


#loading {
	transition: all 0.5s ease;
	background-color: var(--bg-color);
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}


#loading > * {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);

}

#loading .spin-icon {
  position: absolute;
  height: 40px;
  width: 40px;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-top: 2px solid rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0);
  border-bottom: 2px solid rgba(255,255,255,0);
  border-right: 2px solid rgba(255,255,255,0);
  border-radius: 50%;
  -webkit-animation: rotation 0.5s infinite linear;
          animation: rotation 0.5s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* Breakpoint */
@media (max-width: 1200px)
{
	
	body, html {
		height: auto;
		overflow: hidden;
	}
	
	#app {
		height: auto;
		overflow-x: hidden;
		overflow-y: hidden;
		
	}
	
	body {
		--container-width: 100%;
	}
	
	.container {
		width:calc(100% - 40px);
		padding:0;
	}	
	
	.content-left {
		float:none;
		width:100%;
		padding:0;
	}
	
	.content-center {
		float:none;
		width:100%;
	}
	
}


/*
=======================================
RESET
=======================================
*/
a {
	text-decoration: none;
	color:var(--color-main);
}

a.inherit {
	color:inherit;
}

ul {
	padding:0;
	margin: 0;
}

ul li {
	list-style: none;
	padding:0;
	margin: 0;
}



	
/*
================================================================================================
HEADER
================================================================================================
*/	

header {
	position: fixed;
	top:0;
	left: 0;
	width:100%;
	background-color:transparent;
	border-bottom:solid 1px transparent;
	display:flex;
	align-items: center;
	z-index:50;
	height: 100px;
	transition: all 0.2s ease;
}

	header.no-ani {
		transition: all 0s ease;
	}
	
	/*header.in {
		background-color:#fff;
		border-bottom:solid 1px rgba(0,0,0,0.1);
		height: 60px;
	}*/

	/* Header Components
	__________________________________________________________*/
	
	header .container {
		display:flex;
		align-items: center;
	}
	
	header .logo {
		margin:0 auto;
	}

	header img {
		margin:0 auto;
	}
	
		header.in .logo {
			background-image: url("../img/logo.png");
		}

		header .logo:hover {
			cursor:pointer;
		}
	
	header ul.navigation {
		padding:0;
		margin: 0 0 0 50px;
		vertical-align: middle;
		margin-left: auto;
	}
	
	header ul.navigation li {
		float:left;
		list-style: none;
		padding:0;
		margin: 0;
	}

		header ul.navigation li a {
			display:block;
			padding:10px 20px;
			text-decoration: none;
			font-size:0.95rem;
			color:#fff;
			font-weight: 500;
			transition: all 0.3s ease-in-out;
		}
	
			header.in ul.navigation li a {
				color:var(--color-text-1);
			}

			header.in ul.navigation li a:hover {
				color:var(--color-text-2);
			}

			header ul.navigation li.active a {
				text-decoration: underline;
			}

			header.in ul.navigation li.active a {
				color:var(--color-main);
				text-decoration: none;
			}

	header .header-responsive {
		display:none;
		margin-left:auto;
	}


/* Breakpoint XL */
@media (max-width: 1200px)
{
	header {
		/*background-color:#fff;
		border-bottom:solid 1px rgba(0,0,0,0.1);*/
		height: 40px!important;
	}
	
	header .container {
		padding:0;	
	}
	
	header.out {
		/*transform: translateY(-100%);*/
	}
	
		/* Header Components
		__________________________________________________________*/

		header .header-responsive {
			display:block;
		}

		header .header-desktop {
			display:none;
		}
	
		header .logo {
			background-image: url("../img/logo.alt.png");
			height: 25px;
		}
	
		header ul.navigation {
			display:none;
		}
	

		header .responsive-navigation-trigger {
			color:#fff;
			font-size:20px;
		}
	
		header.in .responsive-navigation-trigger {
			color:var(--color-text-1);
		}

}

	




/*
=======================================
ITEMS
=======================================
*/

/*ul.items {
	overflow: hidden;
}

	ul.items > li {
		float:left;
		width:33%;
		font-size: 0.9rem;
		margin-bottom:20px;
		position: relative;
	}

		ul.items > li .item {
			margin:10px;
			position: relative;
		}

			ul.items > li .img {
				object-fit: cover;
				object-position: center;
				width: 100%;
				height: 240px;
				border-radius: 6px;
			}

			ul.items > li .actions {
				position: absolute;
				z-index:1;
				top:5px;
				right:5px;
				line-height: 1;
				text-align: right;
				width:100%;
				display:none;
			}

				ul.items > li:hover .actions {
					display:block;
				}

				ul.items > li .actions > li {
					display:inline-block;
					border:solid 1px var(--color-border);
					background-color:var(--bg-color-1);
					color:var(--color-text-1);
					text-align: center;
					line-height: 22px;
					width:22px;
					height: 22px;
					border-radius:4px;
					margin-left:2px;
					font-size:14px;
				}

					ul.items > li .actions > li:hover {
						color:var(--color-text-2);
						cursor:pointer;
					}

			ul.items > li .infos {
				position: relative;
				margin-top:10px;
			}

				ul.items > li .infos .infos-left {
					float:left;
					width:75%;
				}

				ul.items > li .infos .infos-right {
					float:right;
					width:25%;
				}

				ul.items > li .profile {
					object-fit: cover;
					object-position: center;
					position: absolute;
					border-radius:50%;
					border:solid 3px var(--bg-color-1);
					width:45px;
					height: 45px;
					left:8px;
					top:-55px;
				}

				ul.items > li .title {
					font-size: 1.2rem;
					font-weight: 700;
					margin-bottom:3px;
					line-height: 1.2;
					color:var(--color-text-1);
				}

				ul.items > li .sub {
					margin-bottom:3px;
					color:var(--color-text-2);
				}

				ul.items > li .location {
					font-size: 0.8rem;
					color:var(--color-text-3);
				}

				ul.items > li .icons {
					text-align: right;
				}

					ul.items > li .icons > li {
						display:inline-block;
						color:var(--color-text-1);
						text-align: center;
						line-height: 22px;
						border-radius:4px;
						margin-left:3px;
						font-size:11px;
					}*/


/* Breakpoint */
@media (max-width: 1200px)
{
	ul.items > li {
		width:50%;
	}
	
		ul.items > li .img {
			height: 300px;
		}

	
}

/* Breakpoint */
@media (max-width: 920px)
{
	ul.items > li {
		width:100%;
	}
	
		ul.items > li .img {
			height: 300px;
		}
}



.social-icons {
	display:flex;
	gap:15px;
	margin-top:10px;
}


.social-icons a img {
	height: 20px;
	filter: invert(100%) sepia(3%) saturate(0%) hue-rotate(289deg) brightness(104%) contrast(100%);
	transition: all 0.3s ease;
}
.social-icons a:hover img {
	filter: invert(73%) sepia(19%) saturate(4712%) hue-rotate(346deg) brightness(91%) contrast(93%);
}