html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: currentColor
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: 700
}

small {
    font-size: 80%
}

img {
    border-style: none
}

svg:not(:root) {
    display: block;
    fill: currentColor;
    overflow: hidden
}

figure {
    margin: 0
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

/*[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}*/

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

/*[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}*/

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

button {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    color: currentColor;
    padding: 0
}

ul {
    padding: 0;
    margin: 0
}

li {
    list-style-type: none
}

[tabindex="-1"] {
    outline: 0
}

@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 400;
    src: url(../media/fonts/HelveticaNeue/regular.woff2) format("woff2"), url(../media/fonts/HelveticaNeue/regular.woff) format("woff")
}

@font-face {
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 700;
    src: url(../media/fonts/HelveticaNeue/bold.woff2) format("woff2"), url(../media/fonts/HelveticaNeue/bold.woff) format("woff")
}

@font-face {
    font-family: Bemio;
    font-style: normal;
    font-weight: 400;
    src: url(../media/fonts/Bemio/regular.woff2) format("woff2"), url(../media/fonts/Bemio/regular.woff) format("woff")
}

:root {
    font-size: 100%
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html *,
html :after,
html :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #e8e8e8;
    color: #004196;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}

.title {
    font-family: Bemio, 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-weight: 400
}

.wrapper,
.wrapper-narrow {
    padding-left: .625rem;
    padding-right: .625rem
}

.content {
    margin: 0 auto;
    max-width: 27.5rem;
    width: 100%
}

/*.keyboard a:focus {
    outline: .125em solid currentColor;
    outline-offset: .125em
}*/

dl dt {
    margin: .9375rem 0 0;
    position: relative;
    padding-left: 1.25rem
}

dl dt:last-child {
    margin-bottom: 0
}

dl dt:before {
    background-color: currentColor;
    border-radius: 50%;
    -webkit-box-shadow: .5rem 0 0 0 currentColor;
    box-shadow: .5rem 0 0 0 currentColor;
    content: '';
    display: block;
    height: .3125rem;
    width: .3125rem;
    position: absolute;
    left: 0;
    top: .625rem
}

dl dd {
    margin: 0 0 1rem;
    padding-left: 1.25rem
}

dl dd :first-child {
    margin-top: 0
}

dl dd ul li {
    margin: .9375rem 0 0;
    position: relative;
    padding-left: 1rem
}

dl dd ul li:last-child {
    margin-bottom: 0
}

dl dd ul li:before {
    background-color: currentColor;
    border-radius: 50%;
    content: '';
    display: block;
    height: .3125rem;
    width: .3125rem;
    position: absolute;
    left: 0;
    top: .625rem
}

.skip {
    position: relative;
}

.skip a {
    background-color: #004196;
    color: #fff;
    font-weight: 700;
    position: absolute;
    left: .375rem;
    text-decoration: none;
    text-transform: uppercase;
    top: .375rem;
    opacity: 0;
    padding: 0.5rem;
    font-size: .75rem;
    z-index: 1;
}

.skip a:focus {
    opacity: 1;
}

.footnote {
    background: #004196 url(../media/img/1x/footer-bg.jpg) no-repeat 50% bottom;
    line-height: 1.555555555555556;
    padding-top: 5rem
}

footer.wrapper {
    text-align: center;
    padding-bottom: .625rem;
    padding-top: 6.25rem
}

[lang=fr] footer.wrapper span[lang] {
    font-style: italic
}

.header-intro,
.header-site {
    background: #004196 url(../media/img/1x/intro-bg.jpg) no-repeat 50% 0
}

.lang-link {
    color: #fff;
    background-color: #3a4053;
    padding: 0.1rem;
    font-weight: 700;
    position: absolute;
    right: 0;
    text-decoration: none;
    text-transform: uppercase;
    top: .375rem;
    font-size: .75rem
}

.header-intro .lang-link {
    top: .5625rem;
    right: .625rem
}

.header-intro {
    position: relative
}

.header-intro [role=presentation] {
    min-height: 9.375rem;
    overflow: hidden;
    position: relative
}

.header-intro [role=presentation]:before {
    border-top: 2px solid #EC0B35;
    content: '';
    display: block;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: calc(100% - 1.25rem)
}

.header-intro .background {
    background: url(../media/img/1x/intro-globe-bg.png) no-repeat 50% bottom;
    background-size: auto 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: opacity .3s cubic-bezier(.23, 1, .32, 1) .3s;
    width: 100%
}

.header-intro .circle {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% - .875rem);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: transform .3s cubic-bezier(.23, 1, .32, 1) .3s;
    transition: transform .3s cubic-bezier(.23, 1, .32, 1) .3s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .3s
}

.header-intro .center {
    -webkit-animation-name: rotate-left;
    animation-name: rotate-left;
    background-image: url(../media/img/1x/center.png);
    height: 15.68rem;
    width: 15.68rem;
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.header-intro .inner {
    background-image: url(../media/img/1x/inner.png);
    height: 11.2rem;
    width: 11.2rem
}

.header-intro .outer {
    background-image: url(../media/img/1x/outer.png);
    height: 20.8rem;
    width: 20.8rem;
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.header-intro .earth {
    background: url(../media/img/1x/intro-globe.png) no-repeat 0 0;
    background-size: cover;
    display: block;
    height: 10rem;
    left: 50%;
    position: absolute;
    top: calc(100% - .875rem);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .2s;
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .2s;
    transition: transform .3s cubic-bezier(.23, 1, .32, 1) .2s;
    transition: transform .3s cubic-bezier(.23, 1, .32, 1) .2s, -webkit-transform .3s cubic-bezier(.23, 1, .32, 1) .2s;
    width: 10rem
}

.header-intro .show .circle,
.header-intro .show .earth {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.header-intro .show .background {
    opacity: 1
}

.header-intro .ready .circle {
    -webkit-animation: rotate-right 600s linear infinite;
    animation: rotate-right 600s linear infinite
}

.header-intro .ready .center {
    -webkit-animation-name: rotate-left;
    animation-name: rotate-left
}

.header-intro .ready .earth {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.header-intro .ready .background {
    opacity: 1
}

.header-intro .title-wrapper {
    bottom: -.75rem;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.header-intro .site-title {
    bottom: .1em;
    left: 50%;
    font-size: 1rem;
    max-width: 62.5rem;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    white-space: nowrap;
    z-index: 2
}

.header-intro .site-title>span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.header-intro .site-title>span>span {
    padding: 0 .64em
}

.header-intro .site-title>span:first-child>span {
    padding-top: .2em
}

.header-intro .site-title>span:last-child {
    margin-top: -.0888888889em
}

.header-intro .site-title>span:last-child>span {
    padding: 0 1em
}

.js .header-intro .site-title {
    opacity: 0
}

.js .header-intro .site-title.ready {
    opacity: 1
}

.js .header-intro .site-title.pre>span>span {
    width: 0;
    padding-left: 0;
    padding-right: 0
}

.js .header-intro .site-title.pre>span:first-child {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.js .header-intro .site-title.pre>span:first-child span span {
    opacity: 0
}

.js .header-intro .site-title.pre>span:last-child:after {
    border-top-width: 0;
    border-right-width: 0
}

.js .header-intro .site-title.show {
    opacity: 1
}

.js .header-intro .site-title.show>span>span {
    overflow: hidden;
    padding-left: .64em;
    padding-right: .64em
}

.js .header-intro .site-title.show>span:first-child {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.js .header-intro .site-title.show>span:first-child>span {
    padding-top: .2em;
    -webkit-transition: width .8s cubic-bezier(.165, .84, .44, 1) .3s, padding .8s cubic-bezier(.165, .84, .44, 1) .3s, color .8s linear .3s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: width .8s cubic-bezier(.165, .84, .44, 1) .3s, padding .8s cubic-bezier(.165, .84, .44, 1) .3s, color .8s linear .3s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: width .8s cubic-bezier(.165, .84, .44, 1) .3s, padding .8s cubic-bezier(.165, .84, .44, 1) .3s, color .8s linear .3s, transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s;
    transition: width .8s cubic-bezier(.165, .84, .44, 1) .3s, padding .8s cubic-bezier(.165, .84, .44, 1) .3s, color .8s linear .3s, transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 1.2s
}

.js .header-intro .site-title.show>span:first-child>span>span {
    -webkit-transition: opacity .2s linear 1.3s;
    transition: opacity .2s linear 1.3s;
    opacity: 1
}

.js .header-intro .site-title.show>span:last-child>span {
    -webkit-transition: width .6s cubic-bezier(.165, .84, .44, 1) 1.3s, padding .6s cubic-bezier(.165, .84, .44, 1) 1.3s;
    transition: width .6s cubic-bezier(.165, .84, .44, 1) 1.3s, padding .6s cubic-bezier(.165, .84, .44, 1) 1.3s;
    padding: 0 1em
}

.js .header-intro .site-title.show>span:last-child:after {
    -webkit-transition: border .2s linear 1.6s;
    transition: border .2s linear 1.6s;
    border-top-width: .4444444444em;
    border-right-width: .4444444444em
}

.header-site {
    padding: 0 .625rem;
    position: relative
}

.header-site:before {
    background: -webkit-gradient(linear, left bottom, left top, from(#004196), to(rgba(0, 65, 150, 0)));
    background: linear-gradient(to top, #004196, rgba(0, 65, 150, 0));
    bottom: 0;
    content: "";
    height: 3.75rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.header-site .content {
    border-top: 2px solid #EC0B35;
    height: 6.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    z-index: 2
}

.header-site .site-title {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    margin-bottom: -.6666666667em;
    text-decoration: none;
}

.header-site .menu {
    background-color: #004196;
    border-bottom: 2px solid #EC0B35;
    color: #fff;
    cursor: pointer;
    display: block;
    height: 1.875rem;
    /*outline: 0;*/
    -webkit-transition: -webkit-box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .3s ease;
    width: 1.875rem
}

/*.header-site .menu:-moz-focusring {
    outline: 0
}

.keyboard .header-site .menu:focus {
    -webkit-box-shadow: 0 0 0 3px currentColor;
    box-shadow: 0 0 0 3px currentColor
}*/

.header-site .menu[aria-expanded=true] {
    background-color: #EC0B35
}

.header-site .menu[aria-expanded=true] .icon-close {
    display: block
}

.header-site .menu[aria-expanded=false] .icon-menu {
    display: block
}

.header-site .menu svg {
    display: none;
    height: 1.25rem;
    margin: 0 auto;
    width: 1.25rem
}

.header-site .menu span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.header-site [role=navigation] {
    margin-bottom: -.5111111111em;
    margin-left: auto;
    position: relative
}

.header-site [role=navigation] ul {
    display: none;
    font-size: .8125rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 27.5rem;
    width: calc(100vw - 1.25rem)
}

@media (max-width:63.9375em) {
    .header-site [role=navigation] ul[aria-hidden=false] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: calc(100% - 2px);
        right: 0;
        background-color: #EC0B35;
        z-index: 2;
        padding: .625rem
    }
}

.header-site [role=navigation] a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 700;
    height: 100%;
    padding: .875em 1.25em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: background-color .3s ease, color .3s ease;
    transition: background-color .3s ease, color .3s ease;
    /*outline: 0*/
}

.keyboard .header-site [role=navigation] a:focus,
html:not(.keyboard) .header-site [role=navigation] a:hover {
    /*outline: 0;*/
    background-color: #fff;
    color: #004196
}

.header-site [role=navigation] [aria-current=page] {
    background-color: #e8e8e8;
    color: #004196
}

@-webkit-keyframes rotate-left {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes rotate-left {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@-webkit-keyframes rotate-right {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        transform: translate(-50%, -50%) rotate(-360deg)
    }
}

@keyframes rotate-right {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        transform: translate(-50%, -50%) rotate(-360deg)
    }
}

.intro {
    position: relative;
    padding-top: .75rem
}

.intro>svg {
    fill: #fcdb00;
    width: 100%;
    height: 2.625vw;
    position: absolute;
    bottom: calc(100% - 1px)
}

.intro-text {
    margin: 1em .625rem;
    text-align: center
}

.intro-text span {
    display: inline-block;
    background-color: #fff;
    text-align: center;
    padding: .5em 1em;
    width: 100%
}

.home main {
    background-color: #fcdb00
}

@-webkit-keyframes expand-rotate {
    0% {
        width: 0;
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0)
    }
    70% {
        width: calc(100% + .3333333333em);
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0)
    }
    100% {
        width: calc(100% + .3333333333em);
        -webkit-transform: translateX(-50%) rotate(-1.5deg);
        transform: translateX(-50%) rotate(-1.5deg)
    }
}

@keyframes expand-rotate {
    0% {
        width: 0;
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0)
    }
    70% {
        width: calc(100% + .3333333333em);
        -webkit-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0)
    }
    100% {
        width: calc(100% + .3333333333em);
        -webkit-transform: translateX(-50%) rotate(-1.5deg);
        transform: translateX(-50%) rotate(-1.5deg)
    }
}

@-webkit-keyframes pop {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pop {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

main .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #fcdb00
}

main .header .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-transform: uppercase;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0
}

main .header .title .icon {
    background-color: #67dabb;
    color: #004196;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 3.75rem;
    margin-right: .5rem;
    max-width: 3.75rem;
    width: 100%
}

main .header .title svg {
    width: 2.5rem;
    margin: auto
}

main .header .title span {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1
}

main .header .title span:first-line {
    font-size: 2em
}

main .article {
    margin-bottom: -3rem;
    position: relative;
    padding: 0
}

main .article .content {
    background-color: #fff
}

main .article-main {
    padding: 2rem 0 3rem;
    line-height: 1.5
}

main .article-main .example,
main .article-main .example-demo,
main .article-main>p,
main .article-main>ul {
    margin: 1em
}

main .article-main .example-demo:first-child,
main .article-main .example:first-child,
main .article-main>p:first-child,
main .article-main>ul:first-child {
    margin-top: 0
}

main .article-main .example-demo:last-child,
main .article-main .example:last-child,
main .article-main>p:last-child,
main .article-main>ul:last-child {
    margin-bottom: 0
}

main .article-main>ul li {
    margin: .9375rem 0 .8125rem;
    position: relative;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

main .article-main>ul li:last-child {
    margin-bottom: 0
}

main .article-main>ul li:before {
    background-color: currentColor;
    border-radius: 50%;
    -webkit-box-shadow: .5rem 0 0 0 currentColor;
    box-shadow: .5rem 0 0 0 currentColor;
    color: #67dabb;
    content: '';
    display: block;
    height: .3125rem;
    width: .3125rem;
    position: absolute;
    left: 0;
    top: .625rem
}

main .article-main .example {
    padding: .5em 1.5em
}

main .article-main .comparison-slider {
    margin: 1.25rem 0
}

main .article-intro {
    font-weight: 700
}

.blindness .layer {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transition: background .3s;
    transition: background .3s;
    width: 100%;
    z-index: 10
}

.blindness .layer.close {
    background-color: transparent
}

.blindness .layer.close .content {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    opacity: 0
}

.blindness .layer .content {
    background-color: #fff;
    border-left: 0;
    border-right: 0;
    border: 2px solid #EC0B35;
    margin: 0 auto;
    max-width: 27rem;
    padding: 1.25rem;
    -webkit-transition: opacity .3s, -webkit-transform .3s ease-out;
    transition: opacity .3s, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, opacity .3s;
    transition: transform .3s ease-out, opacity .3s, -webkit-transform .3s ease-out
}

.blindness .layer .content>:first-child {
    margin-top: 0
}

.blindness .layer .content>:last-child {
    margin-bottom: 0
}

.blindness .layer li {
    margin: .625rem 0
}

.blindness .layer li:last-child {
    margin-bottom: 0
}

.blindness .audio-player+p {
    margin-top: .25rem
}

.blindness figure.aside img {
    width: 100%
}

.blindness figure.aside figcaption {
    font-size: .75rem
}

.blindness .article-main>.highlight {
    margin: 2.5rem auto 0
}

.color-blindness {
    color: #3a4053
}

.color-blindness main .header {
    background-color: #d8d685
}

.color-blindness .header-intro,
.color-blindness .header-site {
    background: #3A4053 url(../media/img/1x/intro-bg-colorblind.jpg);
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi) {
    .color-blindness .header-intro,
    .color-blindness .header-site {
        background-image: url(../media/img/2x/intro-bg-colorblind.jpg)
    }
}

.color-blindness .header-intro [role=presentation]:before {
    border-top-color: #9f4c61
}

.color-blindness .header-site:before {
    background: -webkit-gradient(linear, left bottom, left top, from(#3a4053), to(rgba(58, 64, 83, 0)));
    background: linear-gradient(to top, #3a4053, rgba(58, 64, 83, 0))
}

.color-blindness .header-site .content {
    border-top-color: #9f4c61
}

.color-blindness .header-site .menu {
    background-color: #3a4053;
    border-bottom-color: #9f4c61
}

.color-blindness .header-site .menu[aria-expanded=true] {
    background-color: #9f4c61
}

@media (max-width:63.9375em) {
    .color-blindness .header-site [role=navigation] ul[aria-hidden=false] {
        background-color: #9f4c61
    }
}

/*.color-blindness .header-site [role=navigation] a {
    outline: 0
}*/

.keyboard .color-blindness .header-site [role=navigation] a:focus,
html:not(.keyboard) .color-blindness .header-site [role=navigation] a:hover {
    background: #D8D685;
    color: #3a4053
}

.color-blindness .header-site [role=navigation] [aria-current=page] {
    background: #D8D685;
    color: #3a4053
}

.color-blindness main .header .title .icon {
    background-color: #99c4b6
}

.color-blindness main .article-main>ul li:before {
    color: #99c4b6
}

.color-blindness .comparison-slider {
    background: #9f4c61;
    border-color: #9f4c61
}

.color-blindness .comparison-slider .track {
    background: #9f4c61
}

.color-blindness .comparison-slider .thumb {
    border-color: #9f4c61
}

.color-blindness .comparison-slider .thumb svg {
    fill: #9f4c61
}

.keyboard .color-blindness .comparison-slider input[type=range]:focus~.separator .thumb {
    -webkit-box-shadow: 0 0 0 .1875rem #9f4c61, 0 0 1.25rem rgba(0, 0, 0, .25);
    box-shadow: 0 0 0 .1875rem #9f4c61, 0 0 1.25rem rgba(0, 0, 0, .25)
}

.color-blindness .nav .title:before {
    background-color: #99c4b6
}

.color-blindness .nav .title:after {
    background-color: #9f4c61
}

.color-blindness .nav ul a {
    color: #99c4b6;
    /*outline: 0*/
}

.keyboard .color-blindness .nav ul a:focus svg:first-child path:nth-child(2),
html:not(.keyboard) .color-blindness .nav ul a:hover svg:first-child path:nth-child(2) {
    stroke: #99c4b6
}

.color-blindness .nav ul a svg:first-child path:nth-child(3) {
    fill: #99c4b6
}

.color-blindness .know {
    background-color: #9f4c61
}
.know p, .know ul, .know dl{
    padding-left: 10rem
}

.color-blindness .know .title {
    color: #9f4c61
}

.color-blindness .player {
    border-top-color: #9f4c61
}

.color-blindness .player .title {
    background-image: url(../media/dyn/1x/fr/atalan-colorblind.jpg)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi) {
    .color-blindness .player .title {
        background-image: url(../media/dyn/2x/fr/atalan-colorblind.jpg)
    }
}

[lang=en] .color-blindness .player .title {
    background-image: url(../media/dyn/1x/en/atalan-colorblind.jpg)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi) {
    [lang=en] .color-blindness .player .title {
        background-image: url(../media/dyn/2x/en/atalan-colorblind.jpg)
    }
}

.color-blindness .site-title {
    color: #d8d685
}

.color-blindness .site-title>span>span {
    background-color: #3a4053
}

.color-blindness .site-title>span:last-child>span {
    border-bottom-color: #9f4c61
}

.color-blindness .site-title>span:last-child:after {
    border-top: .4444444444em solid #3a4053;
    border-right: .4444444444em solid transparent;
    height: 0;
    width: 0
}

.color-blindness .article-main {
    overflow: hidden
}

.color-blindness .know .logo {
    display: block;
    margin: 1em auto
}

.comparison-slider {
    background: #EC0B35;
    border: .3125rem solid #EC0B35;
    margin: 2rem 0 1rem;
    position: relative
}

.comparison-slider img {
    display: block;
    width: 100%
}

.comparison-slider figcaption {
    bottom: .3125rem;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    position: absolute;
    white-space: nowrap
}

.comparison-slider figure {
    margin: 0;
    position: relative
}

.comparison-slider figure figcaption {
    right: .625rem
}

.comparison-slider figure+figure {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 50%
}

.comparison-slider figure+figure figcaption {
    left: .625rem
}

.comparison-slider figure+figure img {
    height: 100%;
    width: auto
}

.comparison-slider .separator {
    height: 100%;
    left: 0;
    margin-left: -.3125rem;
    position: absolute;
    top: 0;
    width: calc(100% + .3125rem)
}

.comparison-slider .track {
    background: #EC0B35;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: .3125rem
}

.comparison-slider .thumb {
    background: #fff;
    border: .3125rem solid #EC0B35;
    border-radius: 1rem;
    -webkit-box-shadow: 0 0 1.25rem rgba(0, 0, 0, .25);
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, .25);
    display: none;
    height: 2rem;
    left: 50%;
    margin: -1rem 0 0 -1.5rem;
    position: absolute;
    top: 50%;
    -webkit-transition: -webkit-box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .3s ease;
    width: 3rem
}

.js .comparison-slider .thumb {
    display: block
}

.comparison-slider .thumb span {
    display: block;
    height: 1rem;
    left: 50%;
    margin: -.5rem 0 0;
    position: absolute;
    top: 50%;
    width: 1rem
}

.comparison-slider .thumb span.prev {
    margin-left: -.875rem;
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

.comparison-slider .thumb span.next {
    margin-left: -.125rem
}

.comparison-slider .thumb svg {
    fill: #EC0B35
}

.comparison-slider input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    height: 100%;
    left: 0;
    margin: 0 -1.0625rem;
    /*outline: 0;*/
    position: absolute;
    top: 0;
    width: calc(100% + 2.375rem);
    z-index: 2
}

.keyboard .comparison-slider input[type=range]:focus~.separator .thumb {
    -webkit-box-shadow: 0 0 0 .1875rem #EC0B35, 0 0 1.25rem rgba(0, 0, 0, .25);
    box-shadow: 0 0 0 .1875rem #EC0B35, 0 0 1.25rem rgba(0, 0, 0, .25)
}

.comparison-slider input[type=range]::-webkit-slider-container {
    height: 100%
}

.comparison-slider input[type=range]::-webkit-slider-runnable-track {
    height: 100%
}

.comparison-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: 0 0;
    border: none;
    cursor: ew-resize;
    height: 100%;
    width: 3rem
}

.comparison-slider input[type=range]::-moz-focus-outer {
    border: 0
}

.comparison-slider input[type=range]::-moz-range-track {
    background: 0 0;
    height: 100%;
    /*outline: 0*/
}

.comparison-slider input[type=range]::-moz-range-thumb {
    background: 0 0;
    border: 0 none;
    cursor: ew-resize;
    height: 100%;
    /*outline: 0;*/
    width: 3rem
}

.comparison-slider input[type=range]::-ms-track {
    background: 0 0;
    border-color: transparent;
    color: transparent;
    height: 100%
}

.comparison-slider input[type=range]::-ms-thumb {
    background: 0 0;
    cursor: ew-resize;
    height: 100%;
    width: 3rem
}

.comparison-slider input[type=range]::-ms-fill-lower,
.comparison-slider input[type=range]::-ms-fill-upper {
    display: none
}

.comparison-slider input[type=range]::-ms-tooltip {
    display: none
}

.comparison-slider.big {
    border-width: .625rem 0
}

.comparison-slider.big .separator {
    margin-left: 0;
    width: calc(100% - .3125rem)
}

.comparison-slider.small {
    max-width: 28.75rem
}

.comparison-slider.small figcaption {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

input[type=radio] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

input[type=radio]+label {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

input[type=radio]+label:before {
    background-color: #fff;
    border-radius: .5rem;
    content: '';
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 1rem;
    margin-right: .5rem;
    width: 1rem
}

input[type=radio]+label span {
    line-height: 1
}

input[type=radio]+label:after {
    content: '';
    position: absolute;
    top: 0.18rem;
    left: 0.19rem;
    background: #004196;
    border-radius: .32rem;
    border: .32rem solid #004196;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    transition: opacity .3s ease;
    transition: opacity .3s ease;
    opacity: 0
}

input[type=radio]:checked+label:after {
    opacity: 1;
}

.keyboard input[type=radio]:focus+label:before {
    -webkit-box-shadow: 0 0 0 .125rem #004196;
    box-shadow: 0 0 0 .125rem #004196
}

.toggle input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.toggle input[type=checkbox]+label {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.toggle input[type=checkbox]+label:after,
.toggle input[type=checkbox]+label:before {
    content: ''
}

.toggle input[type=checkbox]+label:before {
    background: #b5b5b5;
    border-radius: 50%;
    border: .32rem solid #b5b5b5;
    color: #b5b5b5;
    display: block;
    height: .75rem;
    position: absolute;
    right: 18px;
    top: 2px;
    -webkit-transition: color .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
    transition: color .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
    transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
    transition: transform .3s ease, box-shadow .3s ease, color .3s ease, -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
    width: .75rem
}

.toggle input[type=checkbox]+label:after {
    background-color: #e8e8e8;
    border-radius: .5rem;
    border: 2px solid currentColor;
    color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 1rem;
    -webkit-transition: -webkit-box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .3s ease;
    width: 2rem
}

.toggle input[type=checkbox]+label span {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.toggle input[type=checkbox]:checked+label:before {
    background-color: #35af05;
    border-color: #35af05;
    color: #35af05;
    -webkit-transform: translateX(16px);
    transform: translateX(16px)
}

.keyboard .toggle input[type=checkbox]:focus+label:after {
    -webkit-box-shadow: 0 0 0 .125rem #004196;
    box-shadow: 0 0 0 .125rem #004196
}
.keyboard .toggle input[type=checkbox]:focus+label:before {
    border: 1px solid #004196;
}

.hearing .video {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 1.25rem 0;
    line-height: normal
}

.hearing form {
    background-color: #a2e9d7;
    background-clip: content-box
}

.hearing .fieldset {
    background-color: #67dabb;
    padding: 1rem;
    padding-right: 0;
    color: #004196;
    font-size: .875rem
}

.hearing .fieldset li {
    margin: .625rem 0
}

.hearing .toggle {
    display: block;
    font-size: .875rem;
    padding: 1rem
}

.hearing .toggle label span {
    line-height: 1
}

.hearing legend {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .3125rem
}

.hearing .video-wrapper {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    padding: .625rem 0
}

.highlight {
    background-color: #67dabb;
    border-radius: 3px;
    color: #004196;
    display: inline-block;
    font-weight: 700;
    line-height: 1.75;
    padding: 0 .625em;
    -webkit-transition: -webkit-box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .3s ease
}
/*
.highlight::-moz-focus-ring {
    outline: 0
}

.keyboard .highlight:focus {
    -webkit-box-shadow: 0 0 0 2px #67dabb;
    box-shadow: 0 0 0 2px #67dabb;
    outline: 0
}*/

.highlight abbr {
    text-decoration: none
}

button.highlight {
    cursor: pointer;
    /*outline: 0*/
}

button.highlight[disabled] {
    cursor: text
}
/*
button.highlight::-moz-focus-ring {
    outline: 0
}*/
/*
.keyboard button.highlight:focus {
    -webkit-box-shadow: 0 0 0 2px #67dabb;
    box-shadow: 0 0 0 2px #67dabb
}*/

.demo-wrap {
    display: inline-block;
    vertical-align: middle
}

.demo-wrap+span {
    vertical-align: middle
}

.demo {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0;
    overflow: hidden
}

.demo .icon {
    background-color: #004196;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: .375em;
    min-height: 1.75rem;
    padding: .25em;
    width: 1.75rem
}

.demo .icon svg {
    fill: #fff
}

.demo .icon .icon-power {
    height: 1rem;
    margin: .125rem;
    width: 1rem
}

.demo .icon .icon-audio {
    height: 1.25rem;
    width: 1.25rem
}

.demo .icon .icon-pause {
    height: .875rem;
    margin: .1875rem;
    width: .875rem
}

.demo[aria-pressed=true] .icon-audio {
    display: none
}

.demo[aria-pressed=false] .icon-pause {
    display: none
}

.nav {
    margin: 1.875rem .625rem -2.875rem
}

.js .nav.pre .title span,
.js .nav.pre .title:after {
    -webkit-transition: width .5s cubic-bezier(.165, .84, .44, 1);
    transition: width .5s cubic-bezier(.165, .84, .44, 1)
}

.js .nav.pre .title:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.js .nav.pre li {
    opacity: 0
}

.js .nav.show .title:before {
    -webkit-animation: .3s ease-out .4s forwards expand-rotate;
    animation: .3s ease-out .4s forwards expand-rotate
}

.js .nav.show .title span,
.js .nav.show .title:after {
    width: 100%
}

.js .nav.show .title span {
    padding-left: .6666666667em;
    padding-right: .6666666667em
}

.js .nav.show li {
    -webkit-animation: .6s cubic-bezier(.25, .46, .45, .94) 0s forwards pop;
    animation: .6s cubic-bezier(.25, .46, .45, .94) 0s forwards pop
}

.js .nav.show li:nth-child(1) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.js .nav.show li:nth-child(2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.js .nav.show li:nth-child(3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.js .nav.show li:nth-child(4) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.js .nav.show li:nth-child(5) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.nav .title {
    margin: 0;
    color: #fff;
    position: relative;
    font-size: 1.25rem;
    z-index: 1
}

.js .nav .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.js .nav .title span,
.js .nav .title:after,
.js .nav .title:before {
    overflow: hidden;
    width: 0
}

.js .nav .title span {
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0
}

.nav .title span {
    position: relative;
    z-index: 2;
    padding: .4666666667em .6666666667em .2666666667em;
    display: inline-block;
    text-transform: uppercase
}

.nav .title:after,
.nav .title:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    top: 0
}

.nav .title:before {
    background-color: rgba(0, 65, 150, .8);
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-1.5deg);
    transform: translateX(-50%) rotate(-1.5deg);
    width: calc(100% + .3333333333em)
}

.nav .title:after {
    background-color: #EC0B35;
    left: 0;
    width: 100%
}

.nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: -.625rem
}

.js .nav ul li {
    opacity: 0
}

.nav li {
    width: 50%;
    font-size: .75rem
}

.nav li:nth-child(odd) svg:first-child path:first-child {
    fill: #fff
}

.nav li:nth-child(even) svg:first-child path:first-child {
    fill: #f3f3f3
}

.nav li:nth-child(3) {
    width: 100%;
    margin: -7.8125vw 0
}

.nav li:nth-child(3) a {
    width: 50%;
    margin: 0 auto
}

.nav li a {
    color: #004196;
    display: block;
    position: relative;
    text-decoration: none;
    /*outline: 0*/
}
/*
.keyboard .nav li a:focus,
html:not(.keyboard) .nav li a:hover {
    outline: 0
}*/

.keyboard .nav li a:focus svg:first-child path:nth-child(2),
html:not(.keyboard) .nav li a:hover svg:first-child path:nth-child(2) {
    stroke: #67dabb;
    stroke-width: 3px
}

.nav li a svg {
    fill: #004196
}

.nav li a svg path {
    stroke: #fff;
    stroke-width: 0;
    -webkit-transition: stroke .3s ease;
    transition: stroke .3s ease
}

.nav li a svg:first-child {
    fill: #fff;
    width: 100%
}

@supports ((display:-webkit-box) or (display:flex)) {
    .nav li a svg:first-child {
        height: 100%
    }
}

.nav li a svg:first-child path:nth-child(3) {
    fill: #67dabb
}

.nav li a svg:first-child path:nth-child(4) {
    fill: #fff
}

.nav li a [class^=handicap-] {
    height: 15.625vw;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.nav li a .handicap-blindness,
.nav li a .handicap-color-blindness,
.nav li a .handicap-visually-impaired {
    padding-top: 22%
}

.nav li a .handicap-hearing {
    padding-top: 20%
}

.nav li a .handicap-movement {
    padding-top: 18%;
    padding-left: 3.6%
}

.nav li a>span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: Bemio, 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    height: 28.14814814814815%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    padding: 0 12%;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 54.074074074074076%;
    width: 100%
}

.key {
    background: #e8e8e8;
    border: 1px solid #666;
    border-radius: .125rem;
    display: inline-block;
    color: #666;
    height: 1.75rem;
    padding: .25rem .3125rem;
    vertical-align: middle
}

.key svg {
    display: block;
    fill: #666;
    height: 1.25rem
}

.key svg.icon-tab {
    width: 1.875rem
}

.key svg.icon-shift {
    width: 1.25rem
}

.key svg+span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.know {
    background: #EC0B35 url(../media/img/1x/know-bg.png) no-repeat -30px -16px;
    color: #fff;
    margin-top: 1.25rem;
    padding: 1.25rem 1rem 1.875rem
}

.know .title {
    background-color: #fff;
    color: #EC0B35;
    display: inline-block;
    font-size: 1.125rem;
    margin-left: -1.625rem;
    padding: .25rem 1.6666666667em 0;
    text-transform: uppercase
}

.know :last-child {
    margin-bottom: 0
}

.know .key {
    margin-top: -.25rem
}

.motor-disability .example-demo {
    position: relative
}

.motor-disability .cursor {
    background: url(../media/img/1x/cursor-win.png) no-repeat 0 0;
    background-size: cover;
    display: none;
    height: 1.25rem;
    position: fixed;
    pointer-events: none;
    width: .75rem;
    z-index: 20
}

.tremors .motor-disability .cursor.show {
    display: block
}

.mac .motor-disability .cursor {
    background-image: url(../media/img/1x/cursor-mac.png);
    height: 1.4375rem;
    width: .9375rem
}

.tremors * {
    cursor: none!important
}

.player {
    background-color: #fff;
    border-top: 2px solid #EC0B35;
    color: #000;
    margin: 0 auto;
    overflow: hidden;
    padding: 1.25rem 1rem
}

.player .title {
    background: url(../media/dyn/1x/fr/atalan.svg) no-repeat 0 0;
    background-size: contain;
    height: 1.9290123457rem;
    width: 6.25rem;
    margin: 0
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi) {
    .player .title {
        background-image: url(../media/dyn/2x/fr/atalan.svg)
    }
}

[lang=en] .player .title {
    background-image: url(../media/dyn/1x/en/atalan.svg)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi) {
    [lang=en] .player .title {
        background-image: url(../media/dyn/2x/en/atalan.svg)
    }
}

.player .title span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.player p {
    letter-spacing: .018em
}

.player p:first-child {
    margin-top: 1em
}

.site-title {
    color: #fcdb00;
    font-family: Bemio, 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    display: inline-block
}

.site-title>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.site-title>span>span {
    background-color: #004196;
    padding: 0 1em
}

.site-title>span:first-child {
    z-index: 1
}

.site-title>span:first-child span {
    padding-top: .3333333333em
}

.site-title>span:last-child {
    color: #fff;
    font-size: 1.8em;
    margin-top: -.1777777778em
}

.site-title>span:last-child>span {
    border-bottom: 2px solid #EC0B35;
    padding: .1818181818em .5454545455em 0
}

.site-title>span:last-child:after {
    border-top: .4444444444em solid #004196;
    border-right: .4444444444em solid transparent;
    height: 0;
    width: 0;
    content: '';
    position: absolute;
    right: 2.5555555556em;
    top: 100%;
    margin-top: -.125rem;
    z-index: 2
}

.text-slider {
    margin: 1em .625rem;
    max-width: 45rem
}

.text-slider-wrapper {
    overflow: hidden;
    -webkit-transition: height .5s ease .3s;
    transition: height .5s ease .3s
}

.text-slider-items {
    position: relative
}

.text-slider-items p {
    margin: 0;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none
}

.text-slider-items p.hide {
    opacity: 0
}

.text-slider-items p.show {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.text-slider-items p.off {
    -webkit-transition: none;
    transition: none
}

.text-slider-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: .875rem;
    width: 12.5rem
}

.text-slider-controls button {
    background-color: #004196;
    border-radius: 1rem;
    border: 0;
    color: #67dabb;
    cursor: pointer;
    height: 2rem;
    /*outline: 0 none;*/
    padding: 0;
    -webkit-transition: opacity .3s ease, -webkit-box-shadow .3s ease;
    transition: opacity .3s ease, -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease, opacity .3s ease;
    transition: box-shadow .3s ease, opacity .3s ease, -webkit-box-shadow .3s ease;
    width: 2rem
}

/*.text-slider-controls button:-moz-focusring {
    outline: 0
}*/

.text-slider-controls button svg {
    margin: 0 auto;
    width: 1rem
}

.text-slider-controls button span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.keyboard .text-slider-controls button:focus {
    -webkit-box-shadow: 0 0 0 3px currentColor;
    box-shadow: 0 0 0 3px currentColor
}

.text-slider-controls button:disabled {
    opacity: 0
}

.text-slider-controls [data-pressed] {
    background-color: #67dabb;
    color: #004196
}

.text-slider-controls [data-pressed]+button {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1
}

.text-slider-controls [data-pressed=true] {
    margin: 0 auto
}

.text-slider-controls [data-pressed=true] .icon-play {
    display: none
}

.text-slider-controls [data-pressed=false] .icon-pause {
    display: none
}

.text-slider-controls [data-control=previous] {
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

.tooltip {
    background: #EC0B35;
    border-radius: .125rem;
    color: #fff;
    font-size: .75rem;
    padding: .0625rem .8125rem;
    position: absolute
}

.tooltip[aria-hidden=true] {
    display: none
}

.tooltip:after {
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: .6875rem;
    border-bottom-color: #EC0B35;
    height: 0;
    width: 0;
    left: 1.125rem;
    position: absolute;
    top: -1.375rem
}

.video-wrapper {
    position: relative;
    width: 100%
}

.video-wrapper video {
    display: block;
    width: 100%
}

.video-wrapper ::cue {
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, .8)
}

.video-play-pause {
    cursor: pointer;
    height: 100%;
    left: 0;
    /*outline: 0;*/
    position: absolute;
    top: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    width: 100%
}

/*.video-play-pause:-moz-focusring {
    outline: 0
}*/

/*.keyboard .video-play-pause:focus>span {
    -webkit-box-shadow: 0 0 0 3px #EC0B35;
    box-shadow: 0 0 0 3px #EC0B35
}*/

.video-play-pause>span {
    background-color: #fff;
    border-radius: 2.5rem;
    border: 5px solid currentColor;
    color: #EC0B35;
    display: block;
    height: 5rem;
    left: 50%;
    padding: 1.25rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: -webkit-box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .3s ease;
    width: 5rem
}

.video-play-pause>span span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.video-play-pause svg {
    height: 1.875rem;
    width: 1.875rem
}

.video-play-pause[aria-pressed=true] {
    opacity: 0;
    /*outline: 0*/
}

.keyboard .video-play-pause[aria-pressed=true]:focus,
html:not(.keyboard) .video-play-pause[aria-pressed=true]:hover {
    opacity: 1
}

.video-play-pause[aria-pressed=true] .icon-play {
    display: none
}

.video-play-pause[aria-pressed=false] .icon-pause {
    display: none
}

.visually-impaired .example {
    background-color: #e8e8e8;
    color: #505050;
    line-height: 1.25;
    position: relative
}

.visually-impaired .example .label {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0
}

.visually-impaired .example .label span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.visually-impaired .example .label svg {
    height: 1.875rem;
    width: 1.875rem
}

.visually-impaired .example .icon-check {
    fill: green
}

.visually-impaired .example .icon-close {
    fill: #EC0B35
}

.visually-impaired .example.good.contrasted-1 {
    background-color: #9c9c9c;
    color: #202020
}

.visually-impaired .example.good.contrasted-2 {
    background-color: #222;
    color: silver
}

.visually-impaired .example.bad {
    line-height: 1.25rem
}

.visually-impaired .example.bad div {
    overflow: hidden
}

.visually-impaired .example.bad[style*="font-size: 1.25em"] {
    line-height: 1
}

.visually-impaired .example.bad[style*="font-size: 1.5em"] {
    line-height: .6
}

.visually-impaired .example.bad[style*="font-size: 1.75em"] {
    line-height: .5
}

.visually-impaired .example.bad[style*="width: 25%"] p {
    width: 200%
}

.visually-impaired .example.bad[style*="width: 50%"] p {
    width: 150%
}

.visually-impaired .example.bad[style*="width: 75%"] p {
    width: 125%
}

.visually-impaired .example.bad.contrasted-1 {
    background-color: #9c9c9c;
    color: #505050
}

.visually-impaired .example.bad.contrasted-2 {
    background-color: #222;
    color: #505050
}

.visually-impaired .vision {
    background-color: #67dabb;
    color: #004196;
    font-size: .875rem;
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 10
}

.vision-dmla .visually-impaired .vision {
    -webkit-filter: none;
    filter: none
}

.visually-impaired .fieldset {
    padding: 1rem
}

.visually-impaired .fieldset li {
    margin: .625rem 0
}

.visually-impaired .fieldset li:last-child {
    border-top: 1px solid #e8e8e8;
    padding-top: .625rem
}

.visually-impaired legend {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .3125rem
}

.visually-impaired .know .logo {
    display: block;
    margin: 1em auto
}

.visually-impaired .view {
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9
}

.visually-impaired .article-intro .highlight {
    margin: .125rem 0
}

.visually-impaired .player p span {
    color: #004196
}

.visually-impaired .player p span:first-child {
    color: #4071B1
}

.vision-dmla .view {
    background: url(../media/dyn/visually-impaired/macula.png) no-repeat 50% 50%;
    background-size: contain
}

.vision-retinitis .view {
    background: url(../media/dyn/visually-impaired/pigmentosa.png) no-repeat 50% 50%;
    background-size: contain
}

.vision-cataracts>.footnote,
.vision-cataracts>header,
.vision-cataracts>main .wrapper {
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.no-blur .cataracts {
    display: none
}

.no-blur .vision-cataracts {
    position: relative
}

.no-blur .vision-cataracts .view {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../media/dyn/visually-impaired/screenshot/fr/malvoyance-768.png) no-repeat 50% 0
}

@media (min-width:48em) {
    .wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
    .wrapper-narrow {
        padding-left: 4.5rem;
        padding-right: 4.5rem
    }
    .content {
        max-width: 45.5rem
    }
    footer.wrapper {
        padding-bottom: 1.5rem
    }
    .header-intro .lang-link {
        top: .6875rem;
        right: 1.5rem
    }
    .header-site [role=navigation] ul {
        max-width: 22.5rem
    }
    .header-intro [role=presentation] {
        min-height: 22.5rem
    }
    .header-intro [role=presentation]:before {
        border-top-width: 5px;
        width: calc(100% - 3rem)
    }
    .header-intro .center {
        height: 39.125rem;
        width: 39.125rem
    }
    .header-intro .inner {
        height: 28rem;
        width: 28rem
    }
    .header-intro .outer {
        height: 52rem;
        width: 52rem
    }
    .header-intro .earth {
        height: 25rem;
        width: 25rem
    }
    .header-intro .title-wrapper {
        bottom: -1.5rem
    }
    .header-intro .site-title {
        font-size: 2.25rem
    }
    .header-intro .site-title>span:last-child span {
        border-bottom-width: 5px
    }
    .header-intro .site-title>span:last-child:after {
        margin-top: -.375rem
    }
    .header-site .content {
        border-top-width: 5px
    }
    .intro {
        font-size: 1.625rem;
        position: relative
    }
    .intro-text {
        font-size: 1.125rem;
        margin: 0 1.5rem;
        position: relative
    }
    .intro-text span {
        border-bottom-width: 0;
        border-top-width: 0;
        border: 1.25rem solid #fcdb00;
        padding-right: 6.875rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 47.5rem;
        position: relative;
        text-align: left;
        z-index: 1
    }
    .intro-text span:after {
        background: url(../media/img/1x/question.png) no-repeat 0 0;
        background-size: cover;
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 6.25rem;
        height: 6.9396551724rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
    .intro-text:before {
        border-top: 5px solid #EC0B35;
        content: '';
        left: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: calc(100% - 3rem);
        z-index: 0
    }
    .blindness .layer .content {
        border-width: 5px
    }
    .nav {
        margin-left: auto;
        margin-right: auto;
        max-width: 45rem
    }
    .nav .title {
        max-width: 50%
    }
    .nav ul {
        margin-left: -1.25rem;
        width: calc(100% + 2.5rem)
    }
    .nav li {
        width: 20%
    }
    .nav li:nth-child(3) {
        width: 20%;
        margin: 0
    }
    .nav li:nth-child(3) a {
        width: 100%
    }
    .nav li a [class^=handicap-] {
        height: 3.375rem
    }
    .player {
        border-top-width: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 1.5rem 1.5rem
    }
    .player .title {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-right: 1.5rem
    }
    .player p:first-child {
        margin-top: .75rem
    }
    .text-slider {
        margin-left: auto;
        margin-right: auto
    }
    .text-slider-controls {
        padding-top: .625rem
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .footnote {
        background-image: url(../media/img/2x/footer-bg.jpg)
    }
}

@media only screen and (min-width:48em) and (min-width:100em) {
    .footnote {
        background-size: 100% auto
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .header-intro,
    .header-site {
        background-image: url(../media/img/2x/intro-bg.jpg)
    }
}

@media only screen and (min-width:48em) and (min-width:100em) {
    .header-intro,
    .header-site {
        background-size: 100% auto
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .header-intro .center {
        background-image: url(../media/img/2x/center.png)
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .header-intro .inner {
        background-image: url(../media/img/2x/inner.png)
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .header-intro .outer {
        background-image: url(../media/img/2x/outer.png)
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .header-intro .earth {
        background-image: url(../media/img/2x/intro-globe.png)
    }
}

@media only screen and (min-width:48em) and (-webkit-min-device-pixel-ratio:2),
only screen and (min-width:48em) and (min-resolution:192dpi) {
    .intro-text span:after {
        background-image: url(../media/img/2x/question.png)
    }
}

@media (min-width:64em) {
    .wrapper {
        padding-left: 3.125rem;
        padding-right: 3.125rem
    }
    .wrapper-narrow {
        padding-left: 9.375rem;
        padding-right: 9.375rem
    }
    .wrapper-narrow .content {
        max-width: 50rem
    }
    .content {
        max-width: 57.75rem
    }
    .header-intro .title-wrapper {
        bottom: -2.1875rem
    }
    .header-intro .site-title {
        font-size: 2.5rem
    }
    .header-intro [role=presentation]:before {
        width: calc(100% - 6.25rem)
    }
    .header-intro .lang-link {
        right: 3.125rem
    }
    .header-site {
        padding: 0 3.125rem
    }
    .header-site .menu {
        display: none
    }
    .header-site [role=navigation] {
        margin-bottom: 0
    }
    .header-site [role=navigation] ul {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        background-color: transparent;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 100%;
        position: static;
        width: 100%
    }
    /*.header-site [role=navigation] a {
        outline: 0
    }*/
    .keyboard .header-site [role=navigation] a:focus,
    html:not(.keyboard) .header-site [role=navigation] a:hover {
        background-color: #ffeb63;
        color: #004196;
        text-decoration: underline;
    }
    .header-site [role=navigation] [aria-current=page] {
        background-color: #fcdb00;
        text-decoration: underline;
    }
    .intro {
        font-size: 2rem
    }
    .intro-text {
        margin: 0 auto;
        max-width: 75rem
    }
    .intro-text span {
        max-width: 52.5rem
    }
    .intro-text:before {
        width: calc(100% - 6.25rem)
    }
    main .header {
        padding-bottom: 7.5rem
    }
    main .header .title .icon {
        height: 7.5rem;
        margin-right: 1rem;
        max-width: 7.5rem
    }
    main .header .title svg {
        height: 5rem;
        width: auto
    }
    main .header .title span {
        font-size: 1.5rem
    }
    main .article {
        margin-top: -7.5rem;
        padding-left: 3.125rem;
        padding-right: 3.125rem
    }
    main .article-main {
        position: relative;
        padding-left: 7.5rem;
        padding-right: 8rem
    }
    main .article-main .comparison-slider {
        margin: 2.5rem 0
    }
    .blindness .article-main li {
        position: relative
    }
    .blindness figure.aside {
        width: 31.25rem;
        margin: 0 auto
    }
    .color-blindness .know .title {
        display: table;
        margin-bottom: .625rem
    }
    .color-blindness .know p {
        float: left;
        width: calc(100% - 15.5rem)
    }
    .color-blindness .know .logo {
        float: right;
        margin-right: -3.5rem;
        margin-top: .5em
    }
    .comparison-slider.big {
        border-width: 2.5rem 0
    }
    .hearing form {
        padding: 2.5rem 0
    }
    .hearing .video {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin: 2.5rem 0;
        margin-left: -7.5rem;
        margin-right: -8rem
    }
    .hearing .video-tracks {
        width: 15.625rem;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }
    .hearing .video-wrapper {
        background-color: #EC0B35;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        padding: 2.5rem 0
    }
    .nav {
        max-width: 50rem
    }
    .nav .title {
        font-size: 1.5rem
    }
    .nav ul {
        margin-top: -.875rem;
        margin-left: -.625rem;
        width: calc(100% + 1.25rem)
    }
    .nav li {
        font-size: .8125rem
    }
    .nav li a [class^=handicap-] {
        height: 3.75rem
    }
    .nav li a svg:first-child {
        max-height: 13.5rem
    }
    .know {
        padding: 2.5rem;
        margin-top: 2.3125rem
    }
    .know:after {
        clear: both;
        content: "";
        display: table
    }
    .know .title {
        margin-bottom: 1.5rem;
        margin-top: 0;
        margin-left: -3.75rem;
        padding-left: 2.2222222222em;
        padding-right: 2.2222222222em
    }
    .player {
        padding: 1.875rem
    }
    .player .title {
        height: 3.125rem;
        width: 10.125rem;
        margin-right: 1.875rem
    }
    .player p:first-of-type {
        margin-top: 2.125rem
    }
    .site-title {
        font-size: 1.25rem
    }
    .text-slider {
        max-width: 50rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    .text-slider-controls {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 7rem
    }
    .visually-impaired .know .title {
        display: table;
        margin-bottom: .5rem
    }
    .visually-impaired .know p {
        float: left;
        width: calc(100% - 11.875rem)
    }
    .visually-impaired .know .logo {
        float: right;
        margin-right: -3.5rem;
        margin-top: .5em
    }
    .visually-impaired .know ul {
        clear: left
    }
    .no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/fr/malvoyance-1024.png)
    }
    [lang=en].no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/en/malvoyance-1024.png)
    }
}

@media (min-width:80em) {
    .content {
        max-width: 73.75rem
    }
    .footnote {
        padding: 5.75rem 3.125rem 0
    }
    footer.wrapper {
        padding-top: 4.5rem
    }
    main .header .title .icon {
        max-width: 15.625rem
    }
    main .article-main {
        padding-left: 15.625rem;
        padding-right: 20rem
    }
    main .article-main .comparison-slider {
        margin-right: -4.375rem
    }
    main .article-main .tooltip {
        width: 14.375rem;
        left: -15.625rem;
        top: -1rem
    }
    main .article-main .tooltip:after {
        border-color: transparent;
        border-style: solid;
        border-width: .6875rem;
        border-left-color: #EC0B35;
        height: 0;
        width: 0;
        left: auto;
        right: -1.375rem;
        top: 1.125rem
    }
    .blindness figure.aside {
        position: absolute;
        width: 20.625rem;
        left: calc(100% + 1.25rem);
        top: 0
    }
    .blindness .know .title {
        display: table
    }
    .blindness .know .video-wrapper,
    .blindness .know p {
        float: left;
        width: 50%
    }
    .blindness .know .video-wrapper {
        position: relative;
        left: 3.125rem;
        margin-top: -3.5rem
    }
    .hearing .video {
        margin-left: -15.625rem;
        margin-right: -4.375rem
    }
    .nav {
        margin-bottom: -4rem
    }
    .nav ul {
        margin-left: -6.25rem;
        width: calc(100% + 12.5rem)
    }
    .nav li {
        font-size: 1rem
    }
    .nav li a [class^=handicap-] {
        height: 4.5rem
    }
    .no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/fr/malvoyance-1280.png)
    }
    [lang=en].no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/en/malvoyance-1280.png)
    }
}

@media (min-width:80em) and (min-width:80.0625em) {
    .no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/fr/malvoyance-1680.png)
    }
    [lang=en].no-blur .vision-cataracts .view {
        background-image: url(../media/dyn/visually-impaired/screenshot/en/malvoyance-1680.png)
    }
}