|
|
Line 330: |
Line 330: |
| | | |
| /***************************************************** FOOTNOTES (Social Media Links) ******************************************/ | | /***************************************************** FOOTNOTES (Social Media Links) ******************************************/ |
− |
| |
− | .footnotes-menu {
| |
− | position:fixed;
| |
− | float:right;
| |
− | bottom: 5%;
| |
− | right: 5%;
| |
− | }
| |
− |
| |
− | .menu-toggler {
| |
− | position: absolute;
| |
− | display: block;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | right: 0;
| |
− | left: 0;
| |
− | margin: auto;
| |
− | width: 40px;
| |
− | height: 40px;
| |
− |
| |
− | opacity: 0;
| |
− | cursor: pointer;
| |
− | }
| |
− | .menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
| |
− | background: white;
| |
− | }
| |
− |
| |
− | .menu-toggler:checked + label {
| |
− | background: transparent;
| |
− | }
| |
− | .menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
| |
− | top: 10px;
| |
− | width: 40px;
| |
− | -webkit-transform-origin: 50% 50%;
| |
− | transform-origin: 50% 50%;
| |
− | }
| |
− | .menu-toggler:checked + label:before {
| |
− | -webkit-transform: rotate(45deg);
| |
− | transform: rotate(45deg);
| |
− | }
| |
− | .menu-toggler:checked + label:after {
| |
− | -webkit-transform: rotate(-45deg);
| |
− | transform: rotate(-45deg);
| |
− | }
| |
− |
| |
− | .menu-toggler:checked ~ ul .menu-item {
| |
− | opacity: 1;
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(1) {
| |
− | -webkit-transform: translateY(-90px);
| |
− | transform: translateY(-90px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(2) {
| |
− | -webkit-transform: translateY(-180px);
| |
− | transform: translateY(-180px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(3) {
| |
− | -webkit-transform: translateY(-270px);
| |
− | transform: translateY(-270px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(4) {
| |
− | -webkit-transform: translateY(-360px);
| |
− | transform: translateY(-360px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(5) {
| |
− | -webkit-transform: translateY(-450px);
| |
− | transform: translateY(-450px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item:nth-child(6) {
| |
− | -webkit-transform: translateY(-540px);
| |
− | transform: translateY(-540px);
| |
− | }
| |
− | .menu-toggler:checked ~ ul .menu-item a {
| |
− | pointer-events: auto;
| |
− | }
| |
− |
| |
− | .menu-toggler + label {
| |
− | width: 40px;
| |
− | height: 5px;
| |
− | display: block;
| |
− |
| |
− | border-radius: 2.5px;
| |
− | background: rgba(255, 255, 255, 0.7);
| |
− | -webkit-transition: top 0.5s, -webkit-transform 0.5s;
| |
− | transition: top 0.5s, -webkit-transform 0.5s;
| |
− | transition: transform 0.5s, top 0.5s;
| |
− | transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
| |
− | position: absolute;
| |
− | display: block;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | right: 0;
| |
− | left: 20px;
| |
− | margin: auto;
| |
− | }
| |
− | .menu-toggler + label:before, .menu-toggler + label:after {
| |
− | width: 40px;
| |
− | height: 5px;
| |
− | display: block;
| |
− |
| |
− | border-radius: 2.5px;
| |
− | background: rgba(255, 255, 255, 0.7);
| |
− | -webkit-transition: top 0.5s, -webkit-transform 0.5s;
| |
− | transition: top 0.5s, -webkit-transform 0.5s;
| |
− | transition: transform 0.5s, top 0.5s;
| |
− | transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
| |
− | content: "";
| |
− | position: absolute;
| |
− | left: 0;
| |
− | }
| |
− | .menu-toggler + label:before {
| |
− | top: 10px;
| |
− | }
| |
− | .menu-toggler + label:after {
| |
− | top: -10px;
| |
− | }
| |
− |
| |
− | .menu-item {
| |
− | position: absolute;
| |
− | display: block;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | right: 0;
| |
− | left: 0;
| |
− | margin: 0;
| |
− | width: 80px;
| |
− | height: 80px;
| |
− | display: block;
| |
− | opacity: 0;
| |
− | -webkit-transition: 0.5s;
| |
− | transition: 0.5s;
| |
− | }
| |
− |
| |
− | .menu-item a {
| |
− | display: block;
| |
− | width: inherit;
| |
− | height: inherit;
| |
− | line-height: 80px;
| |
− | color: rgba(255, 255, 255, 0.7);
| |
− | background: rgba(255, 255, 255, 0);
| |
− | border-radius: 40%;
| |
− | text-align: center;
| |
− | text-decoration: none;
| |
− | font-size: 15px;
| |
− | pointer-events: none;
| |
− | -webkit-transition: .2s;
| |
− | transition: .2s;
| |
− | }
| |
− | .menu-item a:hover {
| |
− | box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
| |
− | color: white;
| |
− | background: rgba(255, 255, 255, 0.0);
| |
− | font-size: 17px;
| |
− | }
| |
− |
| |
− | .menu-icon {
| |
− | height: 50px;
| |
− | width: 50px;
| |
− | margin: auto;
| |
− | padding: 15 10 10 10;
| |
− | }
| |
| | | |
| /***************************************************** CONTENT OF THE PAGE ****************************************************/ | | /***************************************************** CONTENT OF THE PAGE ****************************************************/ |