/* =============================================================================
   Navigation
   ========================================================================== */
   
/*-------------------------------*/
/*        No Touch device        */
/*-------------------------------*/

.cd-nav-trigger {
	display: 	none;
}
.no-touch #cd-vertical-nav {

	position:		fixed;
	right: 			0;
	padding: 		3% var(--pagemargin) 0 var(--pagemargin);

	z-index: 		5000;

	/*mix-blend-mode: difference;
	color:  white;*/
																															/*border: 			solid 1px #FC0107;*/
}

.no-touch #cd-vertical-nav li {
	display:  	inline-block;
	text-align: right;
																															/*border: 			solid 1px #0000FF;*/
}
.no-touch #cd-vertical-nav a {
	display: inline-block;
	/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
	content:	"";
	display:	table;
	clear: 		both;
}
.no-touch #cd-vertical-nav a span {
	/*
	float: right;
	display: inline-block;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	*/
}
.no-touch #cd-vertical-nav a:hover span {
	/*	
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	*/

	color: var(--color1);
}

.no-touch #cd-vertical-nav a:hover .cd-label {

}
/*.no-touch #cd-vertical-nav a.active .cd-dot {
	background-color: #EF4023;
}*/
.no-touch #cd-vertical-nav li.active .cd-label {
	color: var(--color3);

	/*mix-blend-mode: difference;*/
	/*color: 					white;*/
}


/*.no-touch #cd-vertical-nav li.active.dark .cd-label{
	color: var(--color3);
}
.no-touch #cd-vertical-nav li.active.light .cd-label{
	color: var(--color3);
}

*/



.no-touch #cd-vertical-nav .cd-dot {
	/*	
	position: relative;
	/* 
	we set a top value in order to align the dot with the label. 
	If you change label's font, you may need to change this top value

	top: 			8px;
	height:			15px;
	width: 			15px;
	border-radius: 	50%;
	background-color: var(--color3-1);
	-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
	-moz-transition: -moz-transform 0.2s, background-color 0.5s;
	transition: transform 0.2s, background-color 0.5s;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	*/
}
.no-touch #cd-vertical-nav .cd-label {
	
	position:			relative;
	margin-right:	20px;
	/*opacity:  0*/;
	
	/*
	color: 					white;
	padding:				.3em .5em;
	font-size: 			14px;
	font-size: 			0.875rem;
	*/

	

	
	
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: 		-moz-transform 0.2s, opacity 0.2s;
	transition: 				transform 0.2s, opacity 0.2s;
	/*opacity: 					0;*/
	
	-webkit-transform-origin:	100% 50%;
	-moz-transform-origin:		100% 50%;
	-ms-transform-origin:			100% 50%;
	-o-transform-origin:			100% 50%;
	transform-origin:					100% 50%;
}



/*-------------------------------*/
/*         Touch devices         */
/*-------------------------------*/

.touch .cd-nav-trigger {
	position:			fixed;
	display: 			block;
	right:				3vw;
	top: 					4vw;
	height: 			60px;
	width: 				60px;
	z-index: 			1004;
																			/*border: solid 1px #00F;*/
}
.touch .cd-nav-trigger span {
	position: 		absolute;
	height: 			6px;
	width: 				6px;
	background-color:	var(--color3-1);
	
	border-radius: 		50%;
	left: 				50%;
	top: 				50%;
	bottom: 			auto;
	right: 				auto;
	
	-webkit-transform:	translateX(-50%) translateY(-50%);
	-moz-transform: 	translateX(-50%) translateY(-50%);
	-ms-transform: 		translateX(-50%) translateY(-50%);
	-o-transform: 		translateX(-50%) translateY(-50%);
	transform: 			translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
	content: 			'';
	height: 			100%;
	width: 				100%;
	position: 			absolute;
	background-color: 	inherit;
	border-radius: 		inherit;
}
.touch .cd-nav-trigger span::before {
	top: 	-9px;
}
.touch .cd-nav-trigger span::after {
	bottom: -9px;
}
.touch #cd-vertical-nav {	
	top: 						-16px !important;	/* Bug: some where defined ?*/

	position: 					fixed;
	width: 						100vw;
	height: 					120%;
	overflow-y: 				scroll;
	background-color:			var(--color2);
	display: 					none;
	z-index: 					1003;
	
	-webkit-overflow-scrolling: touch;
	filter:						alpha(opacity=0);
	opacity: 					0; 
	-moz-opacity:				0;
														/*background-color: #0CF;*/
}
.touch #cd-vertical-nav .bg-mobile {
	width:				100%;
	height: 			100%;
	display: 			block;
	
	background-color: 	var(--color3);
}
.touch #cd-vertical-nav a {
	margin-left: 		0 !important;	/* Bug: some where defined ?*/
	border: solid 1px var(--color3);	/* Bug: in Animation wihtout boarder ?*/
	
	display:			block;
	float:				left;
	width:				100vw;
	/*padding-left: 	25px!important;*/
}
.touch #cd-vertical-nav a.first {
	margin-top: 		20vh;				
}
.touch #cd-vertical-nav .cd-label{
	position:			relative;
	display: 			block;
	width: 				100%;
	
	
	padding-bottom:     2vh;
	text-align: 		center;
													/*border:	solid 1px #0F0;*/
}
.touch #cd-vertical-nav a span:first-child {
	display: 		none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
	color:			var(--color1);



/* OPEN MENUE */
}
.touch #cd-vertical-nav.open {
	display: 		block;
	
	filter:			alpha(opacity=100);
	opacity: 		1; 
	-moz-opacity:	1;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
	background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
	background-color: var(--color1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
	background-color:	var(--color3-1);
	height:				5px;
	width: 				20px;
	border-radius: 		0;
	left: 				-8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
  	border-bottom: none;
}
@media only screen and (min-width: 768px) {
	.touch .cd-nav-trigger, .touch #cd-vertical-nav {
		bottom: 40px;
	}
}



/* OPEN: ANIMATE BUTTONS */
.touch #cd-vertical-nav.open ul li {
  	position:	relative;
  	opacity:	0;
}
.touch #cd-vertical-nav.open li {
	-webkit-animation: fadeInRight .6s ease forwards;
 			animation: fadeInRight .6s ease forwards;
	-webkit-animation-delay: .35s;
			animation-delay: .35s;
}
.touch #cd-vertical-nav.open li:nth-of-type(2) {
	-webkit-animation-delay: .45s;
			animation-delay: .45s;
}
.touch #cd-vertical-nav.open li:nth-of-type(3) {
	-webkit-animation-delay: .50s;
			animation-delay: .50s;
}
.touch #cd-vertical-nav.open li:nth-of-type(4) {
	-webkit-animation-delay: .55s;
			animation-delay: .55s;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity:0;
    left:	40%;
  }
  100% {
    opacity:1;
    left:	0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity:0;
    left:	40%;
  }
  100% {
    opacity:1;
    left:	0;
  }
}