|
|
| 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 ****************************************************/ |
