/* Navigation styling */

:root{

	--clr0:#b8b8b8;

	--clr1:#fff;

	--clr2:#7CB9E8;

	--clr3:red;

	--clr4:#007Af3;

	--clr5:#e8ab7c;

	--clr6:#8bb7d9;

	--clr7:#778899;

	--icon:70px;

}

.navigation_wrapper{

	position:fixed;

	z-index:99;

	bottom:0;

	width:100%;

		

}

.navigation_window{

	/*

	display:flex;

	justify-content:center;

	align-items:center;

	opacity:0.90;

	*/

	padding:32px 0 0 0;

	overflow-x:auto;

	overflow-y:hidden;

	border-left:5px solid transparent;

	border-right:5px solid transparent;

}

.navigation_window *{

	margin:0;

	padding:0;

	box-sizing:border-box;

}



.navigation_wrap *{

	margin:0;

	padding:0;

	box-sizing:border-box;

}	

.navigation_wrap{

	/*

	position:fixed;

	bottom: 0;

	*/

	display:flex;

	justify-content:center;

	align-items:center;

	background:var(--clr1);

	

}

.navigation_mobile{

	margin:5px auto 5px auto;

	position:relative;

	border-radius:10px;

	width:calc(7.3*var(--icon));

	height:var(--icon);

	background:var(--clr2);

	display:flex;

	justify-content:center;

	align-items:center;

	

}

.navigation_mobile ul{

	display:flex;

	width:calc(7*var(--icon));

}

.navigation_mobile ul li{

	position:relative;

	list-style:none;

	width:var(--icon);

	height:var(--icon);

	z-index:1;

}

.navigation_mobile ul li a{

	position:relative;

	display:flex;

	justify-content:center;

	align-items:center;

	flex-direction:column;

	width:100%;

	text-align:center;	

}

.navigation_mobile ul li a .icon{

	position:relative;

	display:block;

	line-height:75px;

	font-size:1.5em;

	transition:0.5s;

	color:var(--clr1);

}

.navigation_mobile ul li.active  a .icon{

	transform: translateY(-32px);

}

.navigation_mobile ul li a .text{

	position:absolute;

	color: var(--clr1);

	transition:0.5s;

	opacity:0;

	transform: translateY(20px);

	font-weight:400;

	font-size:0.6em;

	font-family: "Arial",sans-serif;

    font-variant: small-caps;

	font-style:normal;

	

}

.navigation_mobile ul li.active a .text{

	opacity:1;

	transform:translateY(18px);

    font-weight:600;

    letter-spacing: 1px;

	font-style:normal;

}



.indicator{

	position:absolute;

	top:-50%;

	width:var(--icon);

	height:var(--icon);

	background:var(--clr3);

	border-radius:50%;

	border:3px solid var(--clr1);

	transition:0.5s;

	box-shadow: 0 0 3px #000000;

	display:none;

}

/*

.indicator::before{

	content:'';

	position:absolute;

	top:38%;

	left:-23px;

	width:19px;

	height:20px;

	background:transparent;

	border-top-right-radius:20px;

	box-shadow:2px -8px 0 0 var(--clr1);

}

.indicator::after{

	

	content:'';

	position:absolute;

	top:38%;

	right:-23px;

	width:19px;

	height:20px;

	background:transparent;

	border-top-left-radius:20px;

	box-shadow:-2px -8px 0 0 var(--clr1);

}

*/



.navigation_mobile ul li:nth-child(1).active ~ .indicator{

	transform:translateX(calc(var(--icon)*0));

}

.navigation_mobile ul li:nth-child(2).active ~ .indicator{

	transform:translateX(calc(var(--icon)*1));

}

.navigation_mobile ul li:nth-child(3).active ~ .indicator{

	transform:translateX(calc(var(--icon)*2));

}

.navigation_mobile ul li:nth-child(4).active ~ .indicator{

	transform:translateX(calc(var(--icon)*3));

}

.navigation_mobile ul li:nth-child(5).active ~ .indicator{

	transform:translateX(calc(var(--icon)*4));

}

.navigation_mobile ul li:nth-child(6).active ~ .indicator{

	transform:translateX(calc(var(--icon)*5));

}

.navigation_mobile ul li:nth-child(7).active ~ .indicator{

	transform:translateX(calc(var(--icon)*6));

}

.navigation_mobile ul li:nth-child(8).active ~ .indicator{

	transform:translateX(calc(var(--icon)*7));

}