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

.cd-nav-trigger {
	display: 	none;
}
.no-touch #cd-vertical-nav {
	position:			fixed;
	right: 				3vw;
	top: 				50%;
	bottom: 			auto;
	-webkit-transform:	translateY(-50%);
	-moz-transform: 	translateY(-50%);
	-ms-transform: 		translateY(-50%);
	-o-transform: 		translateY(-50%);
	transform: 			translateY(-50%);
	z-index: 			1;
	
														/*border: 			solid 1px #0F0;*/
}
.no-touch #cd-vertical-nav li {
	text-align: right;
}
.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);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
	opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
	background-color: var(--color2);
}
.no-touch #cd-vertical-nav a.is-selected .cd-label {
	color: var(--color2);
}
.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(--color4);
	-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:		10px;
	padding:			.3em .5em;
	
	/*
	color: 				white;
	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: 				3vw;
	height: 			60px;
	width: 				60px;
	z-index: 			1004;

	cursor: pointer;
																			/*border: solid 1px #00F;*/
}
.touch .cd-nav-trigger span {
	position: 			absolute;
	height: 			4px;
	width: 				36px;
	background-color:	var(--color1);
	
    /*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: 	-12px;
}
.touch .cd-nav-trigger span::after {
	bottom: -12px;
}

.touch #cd-vertical-nav {	
	top: 						-30px !important;	/* Bug: some where defined ?*/

	position: 					fixed;
	width: 						100vw;
	/*height: 					120%;*/
	height: 					0;
	overflow-y: 				scroll;
	/*display: 					none;*/
	z-index: 					1003;
	
	/*-webkit-overflow-scrolling: touch;
	filter:						alpha(opacity=0);
	opacity: 					0; 
	-moz-opacity:				0;*/

	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	transition: 0.8s;

}
.touch #cd-vertical-nav .bg-mobile {
	width:				100%;
	height: 			100%;
	display: 			block;
	
	background-color: 	var(--color1);	
}
.touch #cd-vertical-nav a {
	margin-left: 		0 !important;	/* Bug: some where defined ?*/
	/*border: solid 1px #29363F;	 Bug: in Animation wihtout boarder ?*/
	
	display:			block;
	float:				left;
	width:				100vw;
	/*padding-left: 	25px!important;*/
}
.touch #cd-vertical-nav a.first {
	margin-top: 		30vh;				
}
.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(--color2);



/* OPEN MENUE */
}
.touch #cd-vertical-nav.open {
	/*display: 		block;*/
	height: 		120%;

	/*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: #FFF !important;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
	background-color: #FFF !important;
	display: none;
}
.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 1s ease forwards;
 			animation: fadeInRight 1s ease forwards;
	-webkit-animation-delay: .15s;
			animation-delay: .15s;
}
.touch #cd-vertical-nav.open li:nth-of-type(2) {
	-webkit-animation-delay: .30s;
			animation-delay: .30s;
}
.touch #cd-vertical-nav.open li:nth-of-type(3) {
	-webkit-animation-delay: .45s;
			animation-delay: .45s;
}
.touch #cd-vertical-nav.open li:nth-of-type(4) {
	-webkit-animation-delay: .50s;
			animation-delay: .50s;
}
.touch #cd-vertical-nav.open li:nth-of-type(5) {
	-webkit-animation-delay: .65s;
			animation-delay: .65s;
}
/*@-webkit-keyframes fadeInRight {
  0% {
    opacity:0;
    top:	40%;
  }
  100% {
    opacity:1;
    left:	0;
  }
}

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



@-webkit-keyframes fadeInRight {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes fadeInRight {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}