.cd-section{ position:relative; z-index:1;} #cd-vertical-nav { position: fixed; z-index: 1500; left: 10px; top: 50%; bottom: auto; margin-top:-90px; /* -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); */ z-index: 1; } #cd-vertical-nav li { text-align: left; } #cd-vertical-nav a { display: inline-block; padding:10px 0; } #cd-vertical-nav a:after { content: ""; display: table; clear: both; } #cd-vertical-nav a span { float: left; 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); */ } #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); */ } #cd-vertical-nav a:hover .cd-label { opacity: 1; } #cd-vertical-nav a:hover .cd-dot, #cd-vertical-nav a.is-selected .cd-dot { background-color: #FFF; border-color:#3d73b3; } #cd-vertical-nav a:hover .cd-line { background-color:#3d73b3; } #cd-vertical-nav a.is-selected .cd-line { width:50px; background-color:#3d73b3; } #cd-vertical-nav a:hover .cd-label, #cd-vertical-nav a.is-selected .cd-label { color: #3d73b3; } #cd-vertical-nav .cd-dot { position: relative; top: 8px; height: 12px; width: 12px; border-radius: 50%; background-color: #808080; border:solid 3px #808080; -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; } #cd-vertical-nav .cd-line{ width:30px; height:1px; top:13px; left:5px; background-color:#808080; position:relative; display:inline-block; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; } #cd-vertical-nav .cd-label { position: relative; margin-left: 5px; margin-right: 10px; padding: .4em .5em; color: #808080; font-size: 16px; -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: 1; } #cd-vertical-nav .cd-label, #cd-vertical-nav .cd-line{ display:none; } @media (min-width: 768px) { #cd-vertical-nav { margin-top:-120px; } #cd-vertical-nav { left: 20px; } #cd-vertical-nav .cd-label, #cd-vertical-nav .cd-line{ display:inline-block; } } @media (min-width: 992px) { #cd-vertical-nav { left: 40px; } } @media (min-width: 1200px) { #cd-vertical-nav { left: 70px; } } @media (min-width: 1400px) { #cd-vertical-nav { left: 100px; } } /* .touch #cd-vertical-nav { position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border-radius: 0.25em; background-color: rgba(255, 255, 255, 0.9); } .touch #cd-vertical-nav a { display: block; padding: 1em; border-bottom: 1px solid rgba(62, 57, 71, 0.1); } .touch #cd-vertical-nav a span:first-child { display: none; } .touch #cd-vertical-nav a.is-selected span:last-child { color: #d88683; } .touch #cd-vertical-nav.open { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .touch #cd-vertical-nav.open + .cd-nav-trigger { background-color: transparent; } .touch #cd-vertical-nav.open + .cd-nav-trigger span { background-color: rgba(62, 57, 71, 0); } .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { background-color: #3e3947; height: 3px; 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; } } */