/* --------------------------------------------------------------------------
	-DOT NAVIGATION STYLESHEET-

	Name: gold.dotted.navigation.css
	Project: Quadra
	Written By: Goldeyes Themes - https://themeforest.net/user/goldeyes
	Version: 1.0.0

	Animated dot navigation for Quadra Multi Concept HTML5 Theme
	Special for Quadra users.
-------------------------------------------------------------------------- */

/* Dot nav main */
	.dot-nav{position:fixed;z-index:1049;width:auto;right:0px;margin:0;height:auto;top:50%;-webkit-transform:translateY(-50%) translateZ(0);transform:translateY(-50%) translateZ(0);backface-visibility:hidden;}
/* Nav list */
	.dot-nav ul{width:50px;right:50px;color:white;line-height:normal;position:relative;height:auto;display:block;padding:0;margin:0;-webkit-transform:translate3d(0px,0,0) translateZ(0);transform:translate3d(0px,0,0) translateZ(0);-webkit-transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.2s;transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.2s;}
/* List and Dots */
	.dot-nav ul li{position:relative;display:block;height:auto;}
	.dot-nav ul li:before{content:'';display:block;width:6px;height:6px;border-radius:50%;border: 1px solid #8B693E;left:50%;top:50%;background-color:#8B693E;position:absolute;-webkit-transform:translate3d(-50%,-50%,0) translateZ(0);transform:translate3d(-50%,-50%,0) translateZ(0);-webkit-transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1),opacity 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.33s;transition:all 0.4s cubic-bezier(0.77, 0, 0.2, 1),opacity 0.4s cubic-bezier(0.77, 0, 0.2, 1) 0.33s;}
	/*.dot-nav ul li.active:before{width:15px;height:15px;}*/
/* Links and details */
	.dot-nav ul li a{width:100%;height:30px;opacity:0;box-shadow:0px -2px 6px 0px rgba(0,0,0,0.04);border:0!important;position:relative;padding:0 30px;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;white-space:nowrap;overflow:hidden;-webkit-transform:translateX(100%)translateZ(0);transform:translateX(100%)translateZ(0);transition:height 0.2s cubic-bezier(0.77, 0, 0.2, 1) 0.25s, opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1), transform 0s cubic-bezier(0.77, 0, 0.2, 1) 0.25s;}
/* Hover */
	.dot-nav ul li a:after{background-color:rgba(34,33,33,0.2);content:'';position:absolute;display:block;left:0;top:0;width:100%;height:100%;-webkit-transform:translateX(100%)translateZ(0);transform:translateX(100%)translateZ(0);z-index:0;-webkit-transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1);}
	.dot-nav ul.light-hover li a:after{background-color:rgba(34,33,33,0.07);}
	.dot-nav ul li a:hover:after,.dot-nav ul li a.active:after{-webkit-transform:translateX(0%)translateZ(0);transform:translateX(0%)translateZ(0);}
	.dot-nav ul li a>*{position:relative;z-index:1;}
/* Hover effects */
	.dot-nav:hover ul{width:300px;right:0px;}
/* Links with hover */
	.dot-nav:hover ul li a{height:60px;opacity:1;-webkit-transform:translateX(0%)translateZ(0);transform:translateX(0%)translateZ(0);}
	.dot-nav:hover ul li:before{opacity:0;-webkit-transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.15s;transition:all 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.15s;}
/* Dot navigation on mobile devices */
		@media only screen and (max-width:992px){
			.dot-nav ul{width:40px;right:20px;}
			.dot-nav:hover ul{width:220px;}
			.dot-nav:hover ul li a{height:50px;}
		}
		@media only screen and (max-height:400px){
			.dot-nav:hover ul li a{height:40px;}
		}
/* Slow animation with easing - for 13 elements */
	.dot-nav:hover ul li:nth-of-type(1) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.25s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.25s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.25s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.25s;}
	.dot-nav:hover ul li:nth-of-type(2) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.3s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.3s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.3s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.3s;}
	.dot-nav:hover ul li:nth-of-type(3) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.35s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.35s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.35s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.35s;}
	.dot-nav:hover ul li:nth-of-type(4) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.4s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.4s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.4s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.4s;}
	.dot-nav:hover ul li:nth-of-type(5) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.45s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.45s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.45s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.45s;}
	.dot-nav:hover ul li:nth-of-type(6) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.5s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.5s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.5s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.5s;}
	.dot-nav:hover ul li:nth-of-type(7) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.55s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.55s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.55s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.55s;}
	.dot-nav:hover ul li:nth-of-type(8) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.6s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.6s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.6s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.6s;}
	.dot-nav:hover ul li:nth-of-type(9) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.65s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.65s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.65s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.65s;}
	.dot-nav:hover ul li:nth-of-type(10) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.7s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.7s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.7s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.7s;}
	.dot-nav:hover ul li:nth-of-type(11) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.75s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.75s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.75s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.75s;}
	.dot-nav:hover ul li:nth-of-type(12) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.8s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.8s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.8s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.8s;}
	.dot-nav:hover ul li:nth-of-type(13) a{-webkit-transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.85s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.85s;transition:height 0.3s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.77, 0, 0.2, 1) 0.85s, transform 0.3s cubic-bezier(0.77, 0, 0.2, 1) 0.85s;}