body,
h1 {
    margin: 0
}

a,
body,
li {
    color: #333
}

h1 a,
nav a {
    text-decoration: none
}

.box,
.box-big,
.box.large,
li,
nav a,
nav.viewport>a {
    display: inline-block
}

.box,
.table,
table {
    vertical-align: top
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon/icomoon.eot);
    src: url(../fonts/icomoon/icomoon.eot?#iefix) format('embedded-opentype'), url(../fonts/icomoon/icomoon.ttf) format('truetype'), url(../fonts/icomoon/icomoon.woff) format('woff'), url(../fonts/icomoon/icomoon.svg#icomoon) format('svg');
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-twitter:before {
    content: "\e600"
}

.icon-google-plus:before {
    content: "\e601"
}

.icon-mobile:before {
    content: "\e602"
}

.icon-tablet:before {
    content: "\e603"
}

.icon-screen:before {
    content: "\e604"
}

.icon-mobile2:before {
    content: "\e605"
}

.icon-tablet2:before {
    content: "\e606"
}

.icon-tv:before {
    content: "\e607"
}

.icon-tag:before {
    content: "\e608"
}

.icon-search:before {
    content: "\e609"
}

.icon-redo:before {
    content: "\e60a"
}

.icon-download:before {
    content: "\e60b"
}

.icon-close:before {
    content: "\e60c"
}

.icon-checkmark:before {
    content: "\e60d"
}

.icon-share:before {
    content: "\e60e"
}

.icon-chrome:before {
    content: "\e60f"
}

.icon-firefox:before {
    content: "\e610"
}

.icon-IE:before {
    content: "\e611"
}

.icon-opera:before {
    content: "\e612"
}

.icon-safari:before {
    content: "\e613"
}

.icon-sort:before {
    content: "\e614"
}

.icon-reorder:before {
    content: "\e615"
}

.icon-android:before {
    content: "\e616"
}

.icon-list-ul:before {
    content: "\e617"
}

* {
    box-sizing: border-box
}

html {
    font-size: 100%
}

body {
    font-size: 1.2em;
    line-height: 1.7;
}

.viewport,
h1 {
    line-height: 1
}

.box h3,
.viewport,
h1 {
    text-shadow: none
}


caption,
h2,
h3 {
    margin: 30px 10px 10px;
    text-align: left;
    font-size: 1.1em;
    font-weight: 400
}

h2 {
    font-size: 1.5em
}

h3 {
    margin-bottom: 0;
    color: rgba(0, 0, 0, .6)
}

ul {
    margin: 0 0 14px;
    padding-left: 0
}

li {
    width: 100%;
    margin-bottom: 4px;
    list-style: none
}

.border {
    border-bottom: 1px solid rgba(0, 0, 0, .2)
}

[class^=css] {
    font-size: 1em
}

nav,
ul {
    margin-right: 8px;
    margin-left: 8px
}

p {
    padding: 2px 10px
}

.viewport {
    margin-top: 0
}

nav.viewport>a {
    padding: 1em;
    background-color: rgba(0, 0, 0, .05);
    font-size: 1em
}


a {
    border-radius: 0
}

h1 a {
    color: #fff
}

em,
nav a {
    color: #333
}

nav a {
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 3px 8px;
    font-size: .7em;
    background: rgba(0, 0, 0, .1)
}

em {
    font-style: normal
}

span {
    color: #c9000c
}

td span {
    color: #333
}

.box {
    margin-left: 1%;
    width: 23%;
    background: rgba(255, 255, 255, .3)
}

.box ul {
    padding: 0 1rem 1rem;
    margin: 0
}

.box h3 {
    padding: .6rem 1rem;
    margin: 0;
    background: rgba(51, 82, 113, .15)
}

.box-big,
.box.large {
    vertical-align: top;
    margin-left: .5%;
    width: 48%
}

.btn,
.info,
.viewport {
    padding: .5em;
    text-align: center;
    background-color: rgba(255, 255, 255, .4)
}

.btn {
    display: block;
    margin-top: 1em
}

.btn:focus,
.btn:hover {
    background: rgba(200, 200, 200, .3)
}

.csswidthem,
[id=viewportwidth] {
    font-size: 2em
}

[id=viewportwidthem] em {
    color: rgba(51, 51, 51, .5);
    font-size: 1.8em
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px
}

.table,
table {
    margin: 3rem auto 2rem;
    max-width: 99%;
    border-collapse: collapse
}

table {
    width: 99%;
    border: 1px solid #ccc
}

.table {
    display: table
}

caption {
    color: #333
}

tr>*+* {
    border-left: 1px solid #ccc
}

td,
th {
    padding: .3em .8em;
    border-bottom: 1px solid #ccc;
    text-align: left;
    vertical-align: bottom
}

.alternate {
    border: 0
}

.alternate tbody {
    border: 1px solid #ccc
}

.alternate thead tr>*+* {
    border-left: 0
}

.alternate tbody tr>*+* {
    border-left: 1px solid #ccc
}

.alternate-vert {
    border: 0;
    border-right: 1px solid #ccc
}

.alternate-vert tr>:first-child {
    border-bottom: 0
}

.alternate-vert tr>*+* {
    border-top: 1px solid #ccc
}

.striped tbody tr:nth-child(odd) {
    background: #eee;
    background: rgba(255, 255, 255, .05)
}

.striped-vert tr>:first-child {
    background: #eee;
    background: rgba(0, 0, 0, .05)
}

table tr td:first-child {
    font-weight: 700
}

table tr td:nth-child(4),
table tr td:nth-child(5) {
    width: 10%;
    background-color: rgba(222, 222, 117, .1)
}

table tr td:nth-child(6),
table tr td:nth-child(7),
table tr td:nth-child(8) {
    width: 5%
}

.icon-mobile2,
caption span {
    color: rgba(51, 82, 113, .8);
    display: inline-block;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    margin-right: .5em
}

tr:first-child th div {
    cursor: pointer;
    position: relative;
    padding-left: 1.4em;
    line-height: 1.2
}

tr:first-child th div:before {
    content: "\e614";
    font-family: icomoon;
    speak: none;
    position: absolute;
    bottom: 0;
    left: 4px
}

tr:first-child th:hover:before {
    color: rgba(51, 82, 113, .8)
}

@media (max-width:1024px) {
    .box {
        margin-left: .5%;
        width: 48%
    }

    .box-big,
    .box.large {
        display: block;
        margin-left: 0;
        width: auto
    }
}

@media (max-width:880px) {
    h1 {
        font-size: 1.8em
    }

    h2 {
        font-size: 1.1em
    }

    h3 {
        font-size: 1em
    }

    .box {
        display: block;
        margin-left: 0;
        width: auto
    }

    table span,
    table tr :nth-child(6),
    table tr :nth-child(7),
    table tr :nth-child(8) {
        display: none
    }
}

@media (max-width:580px) {

    table td,
    table th {
        width: auto !important
    }

    table thead {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
        height: 1px;
        width: 1px
    }

    table tr td:first-child {
        width: 30% !important;
        background-color: rgba(222, 222, 117, .1);
        vertical-align: top
    }

    table tr td:not(:first-child) {
        display: block !important;
        background-color: transparent !important
    }

    table tr td:nth-of-type(2)::before {
        content: "phys. width: "
    }

    table tr td:nth-of-type(3)::before {
        content: "phys. height: "
    }

    table tr td:nth-of-type(4)::before {
        content: "CSS width: "
    }

    table tr td:nth-of-type(5)::before {
        content: "CSS height: "
    }

    table tr td:nth-of-type(6)::before {
        content: "px ratio: "
    }

    table tr td:nth-of-type(7)::before {
        content: "ppi: "
    }

    table tr td:nth-of-type(8)::before {
        content: "CSS ppi: "
    }
}

@media screen and (max-width:400px) {
    @-ms-viewport {
        width: 320px
    }
}

@media (orientation:landscape) {
    .cssorient:after {
        content: "landscape"
    }
}

@media (orientation:portrait) {
    .cssorient:after {
        content: "portrait"
    }
}

@media (min-device-width:240px) {
    .cssdevwidth:after {
        content: "240px+"
    }

    .cssdevwidthem:after {
        content: "15em+"
    }
}

@media (min-device-width:320px) {
    .cssdevwidth:after {
        content: "320px+"
    }

    .cssdevwidthem:after {
        content: "20em+"
    }
}

@media (min-device-width:360px) {
    .cssdevwidth:after {
        content: "360px+"
    }

    .cssdevwidthem:after {
        content: "22.5em+"
    }
}

@media (min-device-width:375px) {
    .cssdevwidth:after {
        content: "375px+"
    }

    .cssdevwidthem:after {
        content: "23.4em+"
    }
}

@media (min-device-width:390px) {
    .cssdevwidth:after {
        content: "390px+"
    }

    .cssdevwidthem:after {
        content: "24.4em+"
    }
}

@media (min-device-width:412px) {
    .cssdevwidth:after {
        content: "412px+"
    }

    .cssdevwidthem:after {
        content: "25em+"
    }
}

@media (min-device-width:414px) {
    .cssdevwidth:after {
        content: "414px+"
    }

    .cssdevwidthem:after {
        content: "25.8em+"
    }
}

@media (min-device-width:480px) {
    .cssdevwidth:after {
        content: "480px+"
    }

    .cssdevwidthem:after {
        content: "30em+"
    }
}

@media (min-device-width:504px) {
    .cssdevwidth:after {
        content: "504px+"
    }

    .cssdevwidthem:after {
        content: "31.5em+"
    }
}

@media (min-device-width:540px) {
    .cssdevwidth:after {
        content: "540px+"
    }

    .cssdevwidthem:after {
        content: "33em+"
    }
}

@media (min-device-width:568px) {
    .cssdevwidth:after {
        content: "568px+"
    }

    .cssdevwidthem:after {
        content: "35em+"
    }
}

@media (min-device-width:576px) {
    .cssdevwidth:after {
        content: "576px+"
    }

    .cssdevwidthem:after {
        content: "36em+"
    }
}

@media (min-device-width:600px) {
    .cssdevwidth:after {
        content: "600px+"
    }

    .cssdevwidthem:after {
        content: "38em+"
    }
}

@media (min-device-width:640px) {
    .cssdevwidth:after {
        content: "640px+"
    }

    .cssdevwidthem:after {
        content: "40em+"
    }
}

@media (min-device-width:690px) {
    .cssdevwidth:after {
        content: "690px+"
    }

    .cssdevwidthem:after {
        content: "43em+"
    }
}

@media (min-device-width:720px) {
    .cssdevwidth:after {
        content: "720px+"
    }

    .cssdevwidthem:after {
        content: "45em+"
    }
}

@media (min-device-width:768px) {
    .cssdevwidth:after {
        content: "768px+"
    }

    .cssdevwidthem:after {
        content: "48em+"
    }
}

@media (min-device-width:800px) {
    .cssdevwidth:after {
        content: "800px+"
    }

    .cssdevwidthem:after {
        content: "50em+"
    }
}

@media (min-device-width:960px) {
    .cssdevwidth:after {
        content: "960px+"
    }

    .cssdevwidthem:after {
        content: "60em+"
    }
}

@media (min-device-width:980px) {
    .cssdevwidth:after {
        content: "980px+"
    }

    .cssdevwidthem:after {
        content: "61em+"
    }
}

@media (min-device-width:1024px) {
    .cssdevwidth:after {
        content: "1024px+"
    }

    .cssdevwidthem:after {
        content: "64em+"
    }
}

@media (min-device-width:1080px) {
    .cssdevwidth:after {
        content: "1080px+"
    }

    .cssdevwidthem:after {
        content: "67em+"
    }
}

@media (min-device-width:1280px) {
    .cssdevwidth:after {
        content: "1280px+"
    }

    .cssdevwidthem:after {
        content: "80em+"
    }
}

@media (min-device-width:1366px) {
    .cssdevwidth:after {
        content: "1366px+"
    }

    .cssdevwidthem:after {
        content: "85em+"
    }
}

@media (min-device-width:1600px) {
    .cssdevwidth:after {
        content: "1600px+"
    }

    .cssdevwidthem:after {
        content: "100em+"
    }
}

@media (min-device-width:1920px) {
    .cssdevwidth:after {
        content: "1920px+"
    }

    .cssdevwidthem:after {
        content: "120em+"
    }
}

@media (min-device-height:240px) {
    .cssdevheight:after {
        content: "240px+"
    }

    .cssdevheightem:after {
        content: "15em+"
    }
}

@media (min-device-height:320px) {
    .cssdevheight:after {
        content: "320px+"
    }

    .cssdevheightem:after {
        content: "20em+"
    }
}

@media (min-device-height:360px) {
    .cssdevheight:after {
        content: "360px+"
    }

    .cssdevheightem:after {
        content: "22.5em+"
    }
}

@media (min-device-height:375px) {
    .cssdevheight:after {
        content: "375px+"
    }

    .cssdevheightem:after {
        content: "23.4em+"
    }
}

@media (min-device-height:390px) {
    .cssdevheight:after {
        content: "390px+"
    }

    .cssdevheightem:after {
        content: "24.4em+"
    }
}

@media (min-device-height:480px) {
    .cssdevheight:after {
        content: "480px+"
    }

    .cssdevheightem:after {
        content: "30em+"
    }
}

@media (min-device-height:504px) {
    .cssdevheight:after {
        content: "504px+"
    }

    .cssdevheightem:after {
        content: "31.5em+"
    }
}

@media (min-device-height:540px) {
    .cssdevheight:after {
        content: "540px+"
    }

    .cssdevheightem:after {
        content: "33em+"
    }
}

@media (min-device-height:568px) {
    .cssdevheight:after {
        content: "568px+"
    }

    .cssdevheightem:after {
        content: "35em+"
    }
}

@media (min-device-height:576px) {
    .cssdevheight:after {
        content: "576px+"
    }

    .cssdevheightem:after {
        content: "36em+"
    }
}

@media (min-device-height:600px) {
    .cssdevheight:after {
        content: "600px+"
    }

    .cssdevheightem:after {
        content: "36em+"
    }
}

@media (min-device-height:640px) {
    .cssdevheight:after {
        content: "640px+"
    }

    .cssdevheightem:after {
        content: "40em+"
    }
}

@media (min-device-height:667px) {
    .cssdevheight:after {
        content: "667px+"
    }

    .cssdevheightem:after {
        content: "42em+"
    }
}

@media (min-device-height:690px) {
    .cssdevheight:after {
        content: "690px+"
    }

    .cssdevheightem:after {
        content: "43em+"
    }
}

@media (min-device-height:720px) {
    .cssdevheight:after {
        content: "720px+"
    }

    .cssdevheightem:after {
        content: "45em+"
    }
}

@media (min-device-height:732px) {
    .cssdevheight:after {
        content: "732px+"
    }

    .cssdevheightem:after {
        content: "45.75em+"
    }
}

@media (min-device-height:736px) {
    .cssdevheight:after {
        content: "736px+"
    }

    .cssdevheightem:after {
        content: "46em+"
    }
}

@media (min-device-height:768px) {
    .cssdevheight:after {
        content: "768px+"
    }

    .cssdevheightem:after {
        content: "48em+"
    }
}

@media (min-device-height:800px) {
    .cssdevheight:after {
        content: "800px+"
    }

    .cssdevheightem:after {
        content: "50em+"
    }
}

@media (min-device-height:960px) {
    .cssdevheight:after {
        content: "960px+"
    }

    .cssdevheightem:after {
        content: "60em+"
    }
}

@media (min-device-height:980px) {
    .cssdevheight:after {
        content: "980px+"
    }

    .cssdevheightem:after {
        content: "61em+"
    }
}

@media (min-device-height:1024px) {
    .cssdevheight:after {
        content: "1024px+"
    }

    .cssdevheightem:after {
        content: "64em+"
    }
}

@media (min-device-height:1080px) {
    .cssdevheight:after {
        content: "1080px+"
    }

    .cssdevheightem:after {
        content: "67em+"
    }
}

@media (min-device-height:1280px) {
    .cssdevheight:after {
        content: "1280px+"
    }

    .cssdevheightem:after {
        content: "80em+"
    }
}

@media (min-device-height:1366px) {
    .cssdevheight:after {
        content: "1366px+"
    }

    .cssdevheightem:after {
        content: "85em+"
    }
}

@media (min-device-height:1600px) {
    .cssdevheight:after {
        content: "1600px+"
    }

    .cssdevheightem:after {
        content: "100em+"
    }
}

@media (min-device-height:1920px) {
    .cssdevheight:after {
        content: "1920px+"
    }

    .cssdevheightem:after {
        content: "120em+"
    }
}

@media (-webkit-min-device-pixel-ratio:1),
(min-resolution:96dpi),
(min-resolution:1dppx) {
    .cssratio:after {
        content: "1+"
    }
}

@media (-webkit-device-pixel-ratio:1),
(resolution:96dpi),
(resolution:1dppx) {
    .cssratio:after {
        content: "1"
    }
}

@media (-webkit-min-device-pixel-ratio:1.3),
(-webkit-min-device-pixel-ratio:1.2916666666666667),
(min-resolution:124dpi),
(min-resolution:1.3dppx) {
    .cssratio:after {
        content: "1.3+"
    }
}

@media (-webkit-device-pixel-ratio:1.3),
(resolution:125dpi),
(resolution:1.3dppx) {
    .cssratio:after {
        content: "1.3"
    }
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
(min-resolution:1.5dppx) {
    .cssratio:after {
        content: "1.5+"
    }
}

@media (-webkit-device-pixel-ratio:1.5),
(resolution:144dpi),
(resolution:1.5dppx) {
    .cssratio:after {
        content: "1.5"
    }
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi),
(min-resolution:2dppx) {
    .cssratio:after {
        content: "2+"
    }
}

@media (-webkit-device-pixel-ratio:2),
(resolution:192dpi),
(resolution:2dppx) {
    .cssratio:after {
        content: "2"
    }
}

@media (-webkit-min-device-pixel-ratio:2.2),
(-webkit-min-device-pixel-ratio:2.1979166666666665),
(min-resolution:211dpi),
(min-resolution:2.2dppx) {
    .cssratio:after {
        content: "2.2+"
    }
}

@media (-webkit-min-device-pixel-ratio:2.4),
(-webkit-min-device-pixel-ratio:2.3958333333333335),
(min-resolution:230dpi),
(min-resolution:2.4dppx) {
    .cssratio:after {
        content: "2.4+"
    }
}

@media (-webkit-min-device-pixel-ratio:2.5),
(min-resolution:240dpi),
(min-resolution:2.5dppx) {
    .cssratio:after {
        content: "2.5+"
    }
}

@media (-webkit-device-pixel-ratio:2.5),
(resolution:240dpi),
(resolution:2.5dppx) {
    .cssratio:after {
        content: "2.5"
    }
}

@media (-webkit-min-device-pixel-ratio:3),
(min-resolution:288dpi),
(min-resolution:3dppx) {
    .cssratio:after {
        content: "3+"
    }
}

@media (-webkit-device-pixel-ratio:3),
(resolution:288dpi),
(resolution:3dppx) {
    .cssratio:after {
        content: "3"
    }
}

@media (-webkit-min-device-pixel-ratio:3.5),
(min-resolution:336dpi),
(min-resolution:3.5dppx) {
    .cssratio:after {
        content: "3.5+"
    }
}

@media (-webkit-device-pixel-ratio:3.5),
(resolution:336dpi),
(resolution:3.5dppx) {
    .cssratio:after {
        content: "3.5"
    }
}

@media (-webkit-min-device-pixel-ratio:4),
(min-resolution:384dpi),
(min-resolution:4dppx) {
    .cssratio:after {
        content: "4+"
    }
}

@media (-webkit-device-pixel-ratio:4),
(resolution:384dpi),
(resolution:4dppx) {
    .cssratio:after {
        content: "4"
    }
}

@media (-webkit-min-device-pixel-ratio:5),
(min-resolution:480dpi),
(min-resolution:5dppx) {
    .cssratio:after {
        content: "5+"
    }
}

@media (-webkit-device-pixel-ratio:5),
(resolution:480dpi),
(resolution:5dppx) {
    .cssratio:after {
        content: "5"
    }
}

@media (pointer),
(-webkit-pointer),
(-moz-pointer),
(-ms-pointer),
(-o-pointer) {
    .mediapointer span {
        display: none
    }
}

@media (hover),
(-webkit-hover),
(-moz-hover),
(-ms-hover),
(-o-hover) {
    .mediahover span {
        display: none
    }
}

@media (luminosity),
(-webkit-luminosity),
(-moz-luminosity),
(-ms-luminosity),
(-o-luminosity) {
    .medialum span {
        display: none
    }
}

@media (script),
(-webkit-script),
(-moz-script),
(-ms-script),
(-o-script) {
    .mediascript span {
        display: none
    }
}

.values {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.features li {
    color: #c9000c
}

.animsupport .features li::before,
.apng .features li::before,
.applicationcache .features li::before,
.audio .features li::before,
.battery .features li::before,
.beforeafter .features li::before,
.calcsupport .features li::before,
.canvas .features li::before,
.columnssupport .features li::before,
.cssfilters .features li::before,
.csshyphens .features li::before,
.cssvwunit .features li::before,
.draganddrop .features li::before,
.file .features li::before,
.flexsupport .features li::before,
.fontsupport .features li::before,
.fullscreen .features li::before,
.geolocation .features li::before,
.history .features li::before,
.indexeddb .features li::before,
.load .features li::before,
.notification .features li::before,
.object-fit .features li::before,
.overflowscrolling .features li::before,
.performance .features li::before,
.positionsticky .features li::before,
.reflections .features li::before,
.regions .features li::before,
.supportsupport .features li::before,
.svgsupport .features li::before,
.timing .features li::before,
.touch .features li::before,
.transforms3dsupport .features li::before,
.transformssupport .features li::before,
.transsupport .features li::before,
.unitrem .features li::before,
.vibration .features li::before,
.video .features li::before,
.webgl .features li::before,
.webp .features li::before,
.websockets .features li::before {
    content: "\2718";
    margin-right: 6px
}

.apng .features .img_apng::before,
.applicationcache .features .applicationcache::before,
.audio .features .audio::before,
.battery .features .battery::before,
.canvas .features .canvas::before,
.cssanimations .features .animsupport::before,
.csscalc .features .calcsupport::before,
.csscolumns .features .columnssupport::before,
.cssfilters .features .css_filters::before,
.csshyphens .features .css_hyphens::before,
.csspositionsticky .features .positionsticky::before,
.cssreflexions .features .reflexions::before,
.cssremunit .features .unitrem::before,
.csstransforms .features .transformssupport::before,
.csstransforms3d .features .transforms3dsupport::before,
.csstransitions .features .transsupport::before,
.cssvwunit .features .css_vwunit::before,
.draganddrop .features .draganddrop::before,
.filereader .features .file::before,
.flexbox .features .flexsupport::before,
.flexboxlegacy .features .flexsupport::before,
.fontface .features .fontsupport::before,
.fullscreen .features .fullscreen::before,
.generatedcontent .features .beforeafter::before,
.geolocation .features .geolocation::before,
.history .features .history::before,
.indexeddb .features .indexeddb::before,
.load .features .load::before,
.notification .features .notification::before,
.object-fit .features .css_objectfit::before,
.overflowscrolling .features .overflowscrolling::before,
.performance .features .performance::before,
.performance .features .timing::before,
.regions .features .regions::before,
.supported:before,
.supports .features .supportsupport::before,
.svg .features .svgsupport::before,
.touch .features .touch::before,
.vibrate .features .vibration::before,
.video .features .video::before,
.webgl .features .webgl::before,
.webp .features .img_webp::before,
.websockets .features .websockets::before {
    content: "\2714" !important;
    margin-right: 6px
}

.apng .features .img_apng,
.applicationcache .features .applicationcache,
.audio .features .audio,
.battery .features .battery,
.canvas .features .canvas,
.cssanimations .features .animsupport,
.csscalc .features .calcsupport,
.csscolumns .features .columnssupport,
.cssfilters .features .css_filters,
.csshyphens .features .css_hyphens,
.csspositionsticky .features .positionsticky,
.cssreflexions .features .reflexions,
.cssremunit .features .unitrem,
.csstransforms .features .transformssupport,
.csstransforms3d .features .transforms3dsupport,
.csstransitions .features .transsupport,
.cssvwunit .features .css_vwunit,
.draganddrop .features .draganddrop,
.filereader .features .file,
.flexbox .features .flexsupport,
.flexboxlegacy .features .flexsupport,
.fontface .features .fontsupport,
.fullscreen .features .fullscreen,
.generatedcontent .features .beforeafter,
.geolocation .features .geolocation,
.history .features .history,
.indexeddb .features .indexeddb,
.load .features .load,
.notification .features .notification,
.object-fit .features .css_objectfit,
.overflowscrolling .features .overflowscrolling,
.performance .features .performance,
.performance .features .timing,
.regions .features .regions,
.supports .features .supportsupport,
.svg .features .svgsupport,
.touch .features .touch,
.vibrate .features .vibration,
.video .features .video,
.webgl .features .webgl,
.webp .features .img_webp,
.websockets .features .websockets {
    color: #006400 !important;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1
}

.supported {
    color: #006400 !important;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1
}

@media (orientation:landscape) and (max-device-width:768px) {

    body,
    html {
        -webkit-text-size-adjust: 100%
    }
}