@font-face { font-family: 'Aclonica'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/aclonica/v22/K2FyfZJVlfNNSEBXGb7T.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 400; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXHx_Klwg.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 500; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXH9fKlwg.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 600; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXHGfWlwg.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 700; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4V0qWljRw-Pd815fNqc8T_wAFcX-c37MPiNYlWniJ2hJXHIPWlwg.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EL7E.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 500; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkW-EL7E.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 600; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkYODL7E.ttf) format('truetype'); } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 700; font-stretch: normal; font-display: swap; src: url(https://fonts.gstatic.com/s/cabin/v27/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkbqDL7E.ttf) format('truetype'); } .hd { color: #844384; font-weight: bold; } .parkinsons { color: #000088; font-weight: bold; } .motorNeurone { color: #008299; font-weight: bold; } .ms { color: #ae2304; font-weight: bold; } .ataxia { color: #00682f; font-weight: bold; } html, body { margin: 0 0 3em 0; padding: 0; font-family: cabin; background-color: #eee; } html > section, body > section { margin: 0 1em; } header { background-color: #ccc; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 2px 2px 2px rgba(0, 0, 0, 0.2); height: 75px; width: 100%; display: block; margin: 0; position: relative; z-index: 999; } header svg#logo { width: 90px; height: 90px; margin: -7px; animation-name: rot; animation-duration: 60s; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 50% 50%; } @keyframes rot { 0% { transform: rotate(0deg); } 30% { transform: rotate(120deg); } 60% { transform: rotate(240deg); } 100% { transform: rotate(360deg); } } header .Title span { font-size: 30px; color: #844384; line-height: 50px; vertical-align: middle; position: absolute; top: 0; bottom: 0; left: 100px; } header nav { position: absolute; bottom: 0; z-index: 2; } @media (max-width: 1360px) { header nav { font-size: 0.75rem; } } header nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; } header nav ul li:hover, header nav ul li:active { background-color: #844384; color: white; } header nav ul li a, header nav ul li a:visited { text-decoration: none; color: inherit; } header nav.menu { left: 100px; height: 1.2em; line-height: 1.2em; } header nav.menu ul { border-right: solid 1px white; } header nav.menu ul li { border-left: solid 1px white; overflow: visible; position: relative; } header nav.menu ul li > span, header nav.menu ul li > a { padding: 0 1em; } header nav.menu ul li > ul { display: none; border: none; z-index: 2; } header nav.menu ul li > ul > li { border-top: solid 1px #ddd; color: black; } header nav.menu ul li > ul > li:hover { background-color: #844384; color: white; } header nav.menu ul li:hover > ul, header nav.menu ul li > ul:hover { display: block; background-color: #ccc; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.2); margin: 0; padding: 0; width: 100%; } header nav.lang { right: 0px; bottom: 5px; line-height: 0px; } header nav.lang ul { flex-direction: column; } header nav.lang ul li { padding: 0 0.25em; } footer { position: fixed; bottom: 0; left: 0; right: 0; background-color: #ccc; box-shadow: 0 1px 2px rgba(0, 0, 0.2), 2px 2px 2px rgba(0, 0, 0, 0.2); display: flex; flex-direction: row; justify-content: space-evenly; padding: 0.5em 0 0.2em 0; } footer quote { font-family: Aclonica; } footer > div { vertical-align: middle; line-height: 16px; font-size: 16px; } footer > div > img { margin-right: 0.2em; vertical-align: middle; height: 16px; } footer > div > a, footer > div > a:visited { color: black; } html[name="home"] > body > header > nav > ul > li[name="home"] > span, html[name="help"] > body > header > nav > ul > li[name="help"] > span, html[name="volunteer"] > body > header > nav > ul > li[name="volunteer"] > span, html[name="contactus"] > body > header > nav > ul > li[name="contactus"] > span, html[name="diseases"] > body > header > nav > ul > li[name="diseases"] > span, html[name="who"] > body > header > nav > ul > li[name="who"] > span, html[name="how"] > body > header > nav > ul > li[name="how"] > span, html[name="helpus"] > body > header > nav > ul > li[name="helpus"] > span, html[name="news"] > body > header > nav > ul > li[name="news"] > span, html[name="home"] > body > header > nav > ul > li[name="home"] > a, html[name="help"] > body > header > nav > ul > li[name="help"] > a, html[name="volunteer"] > body > header > nav > ul > li[name="volunteer"] > a, html[name="contactus"] > body > header > nav > ul > li[name="contactus"] > a, html[name="diseases"] > body > header > nav > ul > li[name="diseases"] > a, html[name="who"] > body > header > nav > ul > li[name="who"] > a, html[name="how"] > body > header > nav > ul > li[name="how"] > a, html[name="helpus"] > body > header > nav > ul > li[name="helpus"] > a, html[name="news"] > body > header > nav > ul > li[name="news"] > a { border-bottom: solid 2px #844384; } html[lang='en-GB'] *[lang]:not([lang='en-GB']) { display: none; } html[lang='es'] *[lang]:not([lang='es']) { display: none; } .flag { display: inline-block; width: 32px; height: 26px; background: url('images/flags.png') no-repeat; } .flag.flag-gb { background-position: -256px -128px; } .flag.flag-es { background-position: 0 -128px; } quote::before { content: '“'; } quote::after { content: '”'; } quote::before, quote::after { font-family: sans-serif; font-size: 2em; vertical-align: bottom; height: 0.3em; line-height: 0.3em; margin: 0em; } gallery, .gallery { overflow-y: hidden; overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } gallery > *, .gallery > * { margin-right: 0.5em; } gallery img, .gallery img { height: 200px; } address a { text-decoration: none; font-variant: normal; color: inherit; font-style: normal; } .roman { font-family: 'Times New Roman', Times, serif; } ol > li::marker { font-family: monospace; } span.nobreak { white-space: pre; } #mainLogo g.thing > * > * { transition: transform 0.5s ease-in-out; } #mainLogo g.thing:hover > * > * { transform: scale(1.5) translate(-33px, -47px); } #mainLogo g.thing:hover .description { display: initial; opacity: 1; } #mainLogo .name { display: initial; } #mainLogo .description { display: initial; opacity: 0; transition: opacity 0.5s linear; }