| | |
| | | html,body { |
| | | height: 100%; |
| | | } |
| | | .nav { |
| | | width: 100%; |
| | | height: 90px; |
| | | line-height: 90px; |
| | | list-style: none; |
| | | color: #fff; |
| | | position: fixed; |
| | | text-align: center; |
| | | letter-spacing:3px; |
| | | /*.nav {*/ |
| | | /* width: 100%;*/ |
| | | /* height: 90px;*/ |
| | | /* line-height: 90px;*/ |
| | | /* list-style: none;*/ |
| | | /* color: #fff;*/ |
| | | /* position: fixed;*/ |
| | | /* text-align: center;*/ |
| | | /* letter-spacing:3px;*/ |
| | | |
| | | } |
| | | /*}*/ |
| | | .right { |
| | | float: right; |
| | | margin-right: 1%; |
| | |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | /* Effect 1: Brackets */ |
| | | .cl-effect-1 a::before, |
| | | .cl-effect-1 a::after { |
| | | display: inline-block; |
| | | 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; |
| | | } |
| | | |
| | | .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 { |
| | | opacity: 1; |
| | | -webkit-transform: translateX(0px); |
| | | -moz-transform: translateX(0px); |
| | | transform: translateX(0px); |
| | | } |
| | | /* Effect 1: Brackets 👆*/ |
| | | .sidebar ul { |
| | | font-size: 20px; |
| | | .nav ul { |
| | | font-size: 1.25em; |
| | | font-weight: 500; |
| | | padding-left: 5%; |
| | | |
| | | } |
| | | .sidebar a { |
| | | .nav a { |
| | | position: relative; |
| | | text-decoration: none; |
| | | /*color: #cbcbcb;*/ |
| | | margin-left: 0.625em; |
| | | font-weight: 500; |
| | | } |
| | | .nav a:hover { |
| | | color: #fff; |
| | | } |
| | | /* Effect 1: Brackets */ |
| | | .cl-effect-4 a { |
| | | padding: 0 0 0.625em; |
| | | } |
| | | |
| | | .sidebar a:hover { |
| | | color: rgb(255, 148, 111); |
| | | .cl-effect-4 a::after { |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 0.0625em; |
| | | background: #fff; |
| | | content: ''; |
| | | opacity: 0; |
| | | -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-4 a:hover::after, |
| | | .cl-effect-4 a:focus::after { |
| | | height: 0.3125em; |
| | | opacity: 1; |
| | | -webkit-transform: translateY(0px); |
| | | -moz-transform: translateY(0px); |
| | | transform: translateY(0px); |
| | | } |
| | | /* Effect 1: Brackets 👆*/ |
| | | /*.sidebar ul {*/ |
| | | /* font-size: 20px;*/ |
| | | /* font-weight: 500;*/ |
| | | /* padding-left: 5%;*/ |
| | | |
| | | /*}*/ |
| | | /*.sidebar a {*/ |
| | | /* text-decoration: none;*/ |
| | | /* !*color: #cbcbcb;*!*/ |
| | | /*}*/ |
| | | |
| | | /*.sidebar a:hover {*/ |
| | | /* color: rgb(255, 148, 111);*/ |
| | | /*}*/ |
| | | |
| | | |
| | | |
| | |
| | | } |
| | | .nav-select { |
| | | font-weight: 900; |
| | | color: rgb(255, 148, 111); |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | |
| | | |