| | |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | .nav ul { |
| | | font-size: 1.25em; |
| | | font-weight: 500; |
| | | padding-left: 5%; |
| | | } |
| | | .nav a { |
| | | position: relative; |
| | | text-decoration: none; |
| | | margin-left: 0.625em; |
| | | font-weight: 500; |
| | | } |
| | | .nav a:hover { |
| | | color: #fff; |
| | | } |
| | | /* Effect 1: Brackets */ |
| | | .cl-effect-1 a::before, |
| | | .cl-effect-1 a::after { |
| | | display: inline-block; |
| | | .cl-effect-4 a { |
| | | padding: 0 0 0.625em; |
| | | } |
| | | |
| | | .cl-effect-4 a::after { |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 0.0625em; |
| | | background: #fff; |
| | | content: ''; |
| | | opacity: 0; |
| | | -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; |
| | | -moz-transition: -moz-transform 0.3s, opacity 0.2s; |
| | | transition: transform 0.3s, opacity 0.2s; |
| | | -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; |
| | | -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; |
| | | transition: height 0.3s, opacity 0.3s, transform 0.3s; |
| | | -webkit-transform: translateY(-0.625em); |
| | | -moz-transform: translateY(-0.625em); |
| | | transform: translateY(-0.625em); |
| | | } |
| | | |
| | | .cl-effect-1 a::before { |
| | | margin-right: 10px; |
| | | content: '['; |
| | | -webkit-transform: translateX(20px); |
| | | -moz-transform: translateX(20px); |
| | | transform: translateX(20px); |
| | | } |
| | | |
| | | .cl-effect-1 a::after { |
| | | margin-left: 10px; |
| | | content: ']'; |
| | | -webkit-transform: translateX(-20px); |
| | | -moz-transform: translateX(-20px); |
| | | transform: translateX(-20px); |
| | | } |
| | | |
| | | .cl-effect-1 a:hover::before, |
| | | .cl-effect-1 a:hover::after, |
| | | .cl-effect-1 a:focus::before, |
| | | .cl-effect-1 a:focus::after { |
| | | .cl-effect-4 a:hover::after, |
| | | .cl-effect-4 a:focus::after { |
| | | height: 0.3125em; |
| | | opacity: 1; |
| | | -webkit-transform: translateX(0px); |
| | | -moz-transform: translateX(0px); |
| | | transform: translateX(0px); |
| | | -webkit-transform: translateY(0px); |
| | | -moz-transform: translateY(0px); |
| | | transform: translateY(0px); |
| | | } |
| | | /* Effect 1: Brackets 👆*/ |
| | | .sidebar ul { |
| | |
| | | } |
| | | .nav-select { |
| | | font-weight: 900; |
| | | color: rgb(255, 148, 111); |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | |
| | | |