/* -----------------------------
-------------------------------- 
 
THE GRID 
 
--------------------------------
----------------------------- */

html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    scroll-behavior: smooth;
}

/* acts as a centering container */
article {
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 56rem) minmax(1rem, 1fr);
                                                    /* 896px */
}

/* acts as a main centered reading container */
main {
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 32rem) minmax(1rem, 1fr);
                                                    /* 512px */
}

/* acts as a creative grid */
section {
    display: grid;
    grid-template-columns: repeat(auto-fill, 4rem);
    row-gap: 4rem;
    grid-auto-flow: row;
}

article.autorow, 
section.autorow,
main.autorow {
    row-gap: 0;
    grid-auto-rows: 0.5rem;
}

article + div,
article + div + div,
main + div,
main + div + div {     
    display: block;
    margin-top: calc(var(--r) * 0.5rem);
}

article > img, 
section > img,
section > p > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main img {
    width: 100%;
    height: 100%;
    max-height: 12rem;
    object-fit: contain;
    margin-bottom: 4rem;
}

img.hero {
    min-height: 28rem;
    height: 28rem;
    opacity: 1;
    transition: 0.5s opacity linear 0.5s;
    object-position: right;
}

img[lazysrc] {
    opacity: 0;
}

.hero-img-carousel {
    position: relative;
    height: 28rem;
    overflow: hidden;
    margin-top: 4rem;
}

.hero-img-carousel img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    border-radius: 28rem;
}

.hero-img-carousel img:first-child { z-index: 2; }
.hero-img-carousel img:last-child  { z-index: 1; }

.hero-img-carousel[loaded] img:first-child {
    animation: blinkEntirely 10s var(--cryptee-cb) infinite;
}

@keyframes blinkEntirely {
    0%,40%   {opacity: 1;}
    50%,90%  {opacity: 0;}
    100%     {opacity: 1;}
}

main br { line-height: 2rem; }
main br.m { line-height: 8rem; }
main br.l { line-height: 12rem; }

hr { border: 1px solid #000; }
h2.balanced { margin-top: 0.5rem; }
h2.balanced.spaced { margin-bottom: 4rem; }

h1,h2,h3,h4 { word-break: break-word; }

/* EQUIVALENT OF H3 – SMALLER FOR SEO SEMANTIC PURPOSES */
.grid-hero h2, .grid-use-cases h2 {
    margin-top: 0.125rem;       /* 2px for josefine sans, to maintain vertical rhythm on grid */
    font-size: 1.325rem;        /* 16px for josefine sans, to maintain vertical rhythm on grid */
    line-height: 2rem;          /* 36px */
    letter-spacing: 0.125rem;   /*  2px */
}

/* GRID FOR QUARTERS */

.grid-quarter {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    column-gap: 8rem;
    row-gap: 8rem; 
}

.grid-quarter > * {
    grid-column: span 1;
}




/* GRID FOR THIRDS */

.grid-third, 
.grid-half { 
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.grid-third {
    column-gap: 4rem; 
}

.grid-third > * {
    grid-column: span 1;
}




/* GRID FOR HALFS */

.grid-half { 
    column-gap: 8rem; 
}

.grid-half > * {
    grid-column: span 1;
}





.quarter    { grid-column: span 2;  }
.third      { grid-column: span 4;  }
.twothird   { grid-column: span 9;  }
.full       { grid-column: span 14; }
.half       { grid-column: span 6;  }
.spacer     { grid-row:    span 8;  }

.grid-half  > .full,
.grid-third > .full, 
.grid-quarter > .full { 
    grid-column: 1 / -1; 
}

.grid-third > .twothird { grid-column: span 2; }
.grid-quarter > .half   { grid-column: span 2; }



article > *, 
section > *,
main > * {
    grid-column:    span var(--c, unset); /* -c : no. of columns element should occupy */
    grid-row:       span var(--r, unset); /* -r : no. of rows element should occupy */
}


/* -----------------------------
-------------------------------- 
 
NAVBAR & FOOTER
 
--------------------------------
----------------------------- */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--h, 8rem);
    margin-top: 0;
    padding-top: 0;

    display: grid;
    grid-template-columns: 4rem 4rem 8rem 8rem 1fr 8rem 8rem 4rem;
    grid-template-rows: 4rem;

    background-color: rgba(245, 245, 245, var(--o));
    border-bottom: 2px solid transparent;

    transition: 0.2s border ease;
    z-index: 99;
}

nav aside {
    grid-column: 1/2;
    grid-row: 1/-1;
    height: 24rem;
    background-color: rgba(10,10,10);
    display: grid;
    grid-template-rows: 1fr 4rem;
    transform: translateY(var(--y));
    filter: invert(0);
}

nav #logo {
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    width: 4rem;
}

nav #logo img {
    width: 2rem;
    height: 2rem;
    padding: 1rem 0;
    display: block;
    margin: auto;
    filter: invert(1);
}

nav h1 {
    width: auto;
    color: white; 
    font-size: 1.325rem;        /* 16px for josefine sans, to maintain vertical rhythm on grid */
    line-height: 2rem;          /* 36px */
    letter-spacing: 0.125rem;   /*  2px */
    writing-mode: vertical-lr;
    margin: 1.25rem 1.25rem 0 auto;       /* 2px for josefine sans, to maintain vertical rhythm on grid */
    padding: 0 0 0 0;
    float: right;
}

nav p {
    grid-row: 1/2;
    line-height: 2rem;
    padding-bottom: 2rem;
    margin-top: 0.125rem;
    min-width: 4.25rem;
    max-width: 8rem;
    flex-grow: 2;
    cursor: pointer;
    transform: translateY(var(--yo, 4rem));
}

nav b { 
    grid-row: 1/-1;
}

.nav-signup {
    position: relative;
    min-width: 5.5rem;
}

.nav-signup::after {
    content: "";
    background-color: var(--cryptee-green);
    display: block;
    height: 0.25rem;
    width: 4.25rem;
    position: absolute;
    right: 0;
    bottom: 1.75rem;
    border-radius: 0.25rem;
}

nav.sticky {
    border-bottom: 2px solid #000;
    transition: 0.2s border ease, 1s background-color ease;
}

nav.sticky.whitebg {
    background-color: rgba(255,255,255,1);
}

nav + article { padding-top: 21.5rem; }
nav + article:not(#hero) h2:first-child { text-align: center; }

nav + article#hero,
.use-cases-body article#hero { padding-top: 14rem;}

/* -----------------------------
-------------------------------- 
 
HERO / GRID DECORATIONS
 
--------------------------------
----------------------------- */

#hero {
    grid-template-columns: 4rem 1fr 4rem;
}

.grid-hero {
    grid-column: 2/-2;
    grid-template-rows: 6rem 40rem;
    grid-template-columns: 4rem 1fr;
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    grid-row: 2/3;
    grid-column: 1/-1;
}

#hero h2 {
    /* margin-top: 0.5rem; */
    grid-row: 1/2;
    grid-column: 2/-1;
    font-size: 2rem;
    line-height: 4rem;
}

.hero-product {
    margin-top: -0.5rem;
}

.hero-product > * {
    display: block;
}

.hero-product .h3 {
    font-weight: 700;
}

.product-no {
    width: 4rem;
    font-weight: 350;
    text-align: right;
    margin: 1.0625rem 0 0 auto;

}

.product-no.spaced {
    letter-spacing: 0.25rem;
}

#europe-section {
    background-color: #121212;
    padding: 8rem 0;
    margin: 8rem 0;
    color: #F5F5F5;
}

#europe-section img {
    height: 4rem;
    width: 4rem;
    margin-left: auto;
}

/* -----------------------------
-------------------------------- 
 
FOOTER 
 
--------------------------------
----------------------------- */



footer {
    /* acts as a centering container */
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(0, 896px) minmax(2rem, 1fr);
    background-color: black;
    padding: 4rem 0;
}

footer > * {
    grid-column:    span var(--c, unset); /* -c : no. of columns element should occupy */
    grid-row:       span var(--r, unset); /* -r : no. of rows element should occupy */
}



.grid-footer {
    display: grid;
    grid-template-columns: 12rem 8rem 12rem 12rem;
    grid-auto-rows: 12rem;
    grid-auto-flow: row;
    column-gap: 4rem; 
    row-gap: 4rem;
}

footer .column {
    height: 12rem;
}

footer .column:not(:first-of-type) {
    box-shadow: inset 0px 2px 0px var(--cryptee-4);
    grid-column: span 1;
    color: var(--cryptee-4);
}

footer .column p {
    margin-top: 0;
}

footer .column > p:first-of-type {
    margin: 1rem 0;
}





footer #footer-logo, 
footer #eu-flag {
    float: left;
    margin: 0 1rem 0 0;
}

footer #footer-logo img,
footer #eu-flag img {
    width: 3rem;
    height: 3rem;
    display: block;
}

footer #footer-logo + div,
footer #eu-flag + div {
    margin: 0.625rem 0 0 0;
}

footer .company-name, 
footer small {
    color: white;
}

footer .company-name { /* H3 EQUIVALENT */
    margin-top: 0.125rem;       /* 2px for josefine sans, to maintain vertical rhythm on grid */
    font-size: 1.325rem;        /* 16px for josefine sans, to maintain vertical rhythm on grid */
    line-height: 2rem;          /* 36px */
    letter-spacing: 0.125rem;   /*  2px */
}

footer .company-name {
    font-weight: 700;
}

footer small {
    margin-top: 0;
}



/* -----------------------------
-------------------------------- 
 
FEATURES / GRID
 
--------------------------------
----------------------------- */


.feature {
    box-shadow: inset 0px 2px 0px var(--cryptee-1);
}

.feature p:first-of-type {
    margin-top: 1rem; 
    color: var(--cryptee-0);
}

.feature small,
.feature p {
    color: var(--cryptee-2);
    transition: 0.3s color ease;
}

.feature small {
    text-transform: lowercase;
}

.feature p + small {
    margin-top: 0.5rem;
}

.feature.heavy p:first-of-type { 
    color: var(--cryptee-0);
}

.feature-no-line p:first-of-type{
    margin-top: 1rem;
}

.feature-no-line + img {
    object-fit: contain;
    max-height: 8rem;
    margin-top: 2rem;
}

.dm .feature {
    box-shadow: inset 0px 2px 0px white;
}

.dm .feature.heavy p:first-of-type { 
    color: var(--cryptee-4);
}

.feature i.md {
    font-size: 1.25rem;
    width: 1.25rem;
}

.feature i.lg {
    font-size: 1.5rem;
    width: 1.5rem;
}

/* -----------------------------
-------------------------------- 
 
MEDIA MENTIONS / GRID
 
--------------------------------
----------------------------- */

.media-logo {
    height: 2rem;
    object-fit: contain;
    object-position: left;
}

.media-logo.short { 
    height : 1.5rem;
}

.media-mention p {
    margin-top: -0.5rem;
}

.media-bar {
    background-color: var(--cryptee-0);
    grid-column-end: 15;
}

.dm .media-logo {
    filter: invert(1);
}

.media-logos {
    display: flex;
    flex-wrap: wrap;
}

.media-logos a {
    flex-grow: 1;
    height: 1.5rem;
    margin-bottom: 1.5rem;
}

.use-cases-body .media-logos a {
    height: 2rem;
}

.use-cases-body .media-logos a {
    min-width: 10rem;
    text-align: center;
    margin-bottom: 2rem;
}


@media (max-width: 671px) {
    .media-spacing {
        display: none;
    }
}

/* -----------------------------
-------------------------------- 
 
DOWNLOAD BUTTONS / GRID 
 
--------------------------------
----------------------------- */

.download-os {
    height: 8rem;
    outline: 2px solid var(--cryptee-0);
    position: relative;
}

.download-os i {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 3rem;
}

.download-os small {
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
}

.dm .download-os {
    outline: 2px solid white;
}

.index-download-section {
    background-color: #121212; 
    color: #F5F5F5;
    padding: 8rem 0;
    margin: 8rem 0 0 0;
}

.index-download-os {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 3rem;
}

.index-download-os a { 
    color: var(--cryptee-3);
}

.index-download-os i {
    float: left;
    font-size: 1.5rem;
    line-height: 2.25rem;
    height: 3rem;
    width: 2.5rem;
}

.index-download-os p {
    margin-top: 0;
    display: inline-block;
    line-height: 2.5rem;
    height: 2.5rem;
}

.index-download-button {
    width: 12rem !important;
    height: 8rem !important;
    margin-top: 0 !important;
    grid-template-columns: 1fr 1fr !important;
}

.index-download-button > * {
    color: #000;
    width: 8rem;
    height: 8rem;
    line-height: 8rem !important;
    box-sizing: border-box;
    border-radius: 8rem;
    text-align: center;
    padding: 0 !important;
}

.index-download-button p {
    background-color: #FFF;
    z-index: 2;
}

.index-download-button i {
    background-color: #F5F5F5;
    transform: translateX(-4rem);
    padding-left: 3rem !important;
    z-index: 1;
    transition-duration: 1s;
    transition-timing-function: var(--cryptee-cb);
    transition-property: transform, padding;
}

.download-description {
    margin-top: -0.5rem;
}


/* -----------------------------
-------------------------------- 
 
DOWNLOAD / SIGNUP BUTTONS 
 
--------------------------------
----------------------------- */

.index-hero-button {
    display: block;
    grid-column: span 1;
    height: 6rem;
    margin-top: 1rem;
    position: relative;
    color: var(--cryptee-4);
    background-color: var(--cryptee-0);
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 4rem;
}

.index-hero-button p,
.index-hero-button i {
    margin-top: 0 !important;
    line-height: 6rem;
}

.index-hero-button i { text-align: center; }
.index-hero-button p:first-child {
    padding-left: 2rem;
}

.dm .index-hero-button {
    background-color: white;
    color: black;
}

.index-hero-button.slim {
    height: 4rem;
}

.index-hero-button.slim p,
.index-hero-button.slim i {
    line-height: 4rem;
}



/* -----------------------------
-------------------------------- 
 
USE-CASES MORE 
 
--------------------------------
----------------------------- */

.use-cases-more {
    display: block;
    padding: 0.5rem 0 0.75rem 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    grid-column: 1 / -1;
}

.use-cases-more p:not(.right) { float: left; }

.use-cases-more p.right {
    float: right;
    margin-right: 0.5rem;
}

.use-cases-more i {
    margin-top: 0.625rem;
    float: right;
}

.use-cases-signup-section {
    padding: 8rem 0 0 0;
    background: linear-gradient(to bottom, #FFF 25%, var(--cryptee-4) 100%);
}


/* -----------------------------
-------------------------------- 
 
QUICK EXIT 
 
--------------------------------
----------------------------- */

#quick-exit {
    display: block;
    position: fixed;
    top: 24rem;
    left: 0;
    z-index: 100;
    width: 4rem;
    height: 20rem;
    writing-mode: vertical-lr;

    background-color: var(--cryptee-red);
    color: #FFF;
    text-align: center;
    cursor: pointer;

    transform: translateY(var(--y));
}

#quick-exit > span { 
    font-size: 1rem;
    line-height: 3.75rem;
    float: right;
    text-align: right;
    padding-bottom: 1.5rem;
}

nav.sticky + #quick-exit {
    transform: translateY(-20rem);
}

/* -----------------------------
-------------------------------- 
 
DISCLOSURE / SUMMARY ELEMENTS 
 
--------------------------------
----------------------------- */

details {
    box-shadow: inset 0px 2px 0px var(--cryptee-1);
}

details.indented {
    padding: 0 0.5rem;
}

details summary {
    line-height: 1.5rem;
    padding: calc(0.75rem + 2px) 0 calc(0.75rem - 2px) 0;
    list-style: none;
    position: relative;
}

summary::-webkit-details-marker { display: none; }

details summary::after, a.detail-list::after {
    content: "\EA6A";
    font-family: remixicon !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    font-style: normal;
    font-size: 1.25rem;
    line-height: calc(3rem + 2px);
    width: 1.25rem;
    right: 0;
    top: 0;

    transform: rotate(0);
    transition: 0.3s transform ease;
}

a.detail-list::after {
    line-height: 3rem;
    transform: rotate(-45deg);
}

details[open] summary::after {
    transform: rotate(45deg);
}

details[open] summary {
    color: var(--cryptee-2);
}

details.dark[open] summary {
    color: var(--cryptee-3);
}

details p {
    margin-top: -0.5rem;
    padding: 0 2rem 1rem 0;
}

.dm details, details.dark, a.detail-list.dark {
    box-shadow: inset 0px 2px 0px white;
}

a.detail-list, p.detail-list {
    position: relative;
    display: block;
    width: 100%;
    height: 3rem;
    padding: calc(0.75rem + 2px) 0 calc(0.75rem - 2px) 0;
    line-height: 1.5rem;
    box-sizing: border-box;
    font-weight: 350 !important;
    margin-top: 0;
    box-shadow: inset 0px 2px 0px var(--cryptee-1);
}


/* -----------------------------
-------------------------------- 
 
PRICING SECTION / FLEX 
 
--------------------------------
----------------------------- */
.index-pricing {
    text-align: right;
}

.index-pricing p { margin-top: 0; }

.index-pricing h2,
.index-pricing span {
    display: inline-block;
    font-weight: 500;
}

#pricing b.bar {
    background-color: var(--cryptee-0);
    margin: 0 !important;
    display: block;
    width: 100%;
    height: 2rem;
    border-radius: 8rem;
    margin-bottom: 0.75rem;
    grid-column: span 2/-1;
}

#pricing b.bar.xsmall { width: 2rem; }
#pricing b.bar.small  { width: calc(25% - 1rem); }
#pricing b.bar.medium { width: calc(50% - 2rem); }
#pricing b.bar.large  { width: 100%; }

#pricing  b.bar.xsmall    { background-color: #888888; }
#pricing  b.bar.small     { background-color: #585858; }
#pricing  b.bar.medium    { background-color: #363636; }
#pricing  b.bar.large     { background-color: #000000; }

.dm #pricing  b.bar.xsmall    { background-color: #363636; }
.dm #pricing  b.bar.small     { background-color: #585858; }
.dm #pricing  b.bar.medium    { background-color: #aaaaaa; }
.dm #pricing  b.bar.large     { background-color: #ffffff; }

/* -----------------------------
-------------------------------- 
 
INDEX SECURITY / WHY 
 
--------------------------------
----------------------------- */


#index-security {
    background-color: #000; 
    color: #FFF;
    padding: 8rem 0;
}

#index-security p  { margin-top: -0.5rem; }

/* -----------------------------
-------------------------------- 
 
TYPOGRAPHIC GRID DETAILS  
 
--------------------------------
----------------------------- */

.media-split {
    grid-template-columns: 12rem 1fr;
    column-gap: 4rem;
    row-gap: 4rem;
}

/* 
.two-thirds-split {
    grid-template-columns: 16rem 1fr;
    column-gap: 4rem;
    row-gap: 4rem;
} */

.long-paragraph {
    grid-template-columns: 7fr 6fr;
    column-gap: 4rem;
}

.long-paragraph p, .grid-hero p {
    text-align: justify;
    margin-top: -1rem;
}

.media-split h2 {
    margin-bottom: -1rem;
}

.index-why-section {
    row-gap: 0;
    padding: 4rem 0;
    margin: 8rem 0;
}

.index-use-cases-section {
    row-gap: 0;
    padding: 8rem 0 0 0;
}

.index-why-section details, .index-use-cases-section details {
    grid-column: 2/-1;
}

.index-why-section > div {
    margin-bottom: -6rem;
}

.index-use-cases-section > div {
    margin-bottom: -12rem;
}

.index-use-cases-section > div p {
    margin-top: 0.25rem;
}

.index-use-cases-section > a,
.index-use-cases-section > p {
    grid-column: 2/-1;
}

.use-cases-body .use-cases-hero {
    margin-top: -3rem;
}

/* -----------------------------
-------------------------------- 
 
ABOUT  
 
--------------------------------
----------------------------- */
#about-article { padding-top: 20rem; }

#about-grid {
    display: grid;
    grid-template-columns: minmax(4rem, 12rem) 4rem 4rem 24rem 1fr;
}

#about-grid h2 { 
    writing-mode: vertical-lr; 
    padding-top: 1.25rem;
}

#about-grid h2 + b { border-left: 2px solid #363636; }

#about-grid div p { margin-bottom: 1rem; }

#aside-who { border-top: 2px solid #363636; }

#who-grid {
    display: grid;
    border-top: 2px solid #363636;
    grid-template-columns: repeat(14, 4rem);
    padding-top: 2rem;
    row-gap: 0;
}

#who-grid h2 { 
    grid-column: span 4;
}

#who-grid p     { grid-column: span 6; }
#who-grid b.gap { grid-column: 1/-1; height: 8rem; }

#bio-grid {
    display: grid;
    grid-template-columns: 24rem 24rem;
    grid-auto-rows: 24rem;
    column-gap: 8rem;
    row-gap: 8rem;
}

.bio-photo      { grid-column: span 3; height: 20rem; width: 100%; object-fit: cover; }
.bio-photo.wide { grid-column: span 6; height: 16rem; }

#john-name { 
    padding-top: 4rem;
    position: relative;
}

#john-bio {
    margin: 4rem 0 0 -4rem;
    text-align: justify;
}

#john-j { 
    display: block;
    margin-left: auto;
    margin-right: -4rem;
}

#john-j + img { display: none; }

#john-name img {
    position: absolute;
    top: 4rem;
    right: 0;
    width: 4rem;
    height: 4rem;
}

.bio {
    display: grid;
    grid-template-columns: repeat(6, 4rem);
    grid-template-rows: 20rem;
}

.bio-letter     { grid-row: 1/-1;   }
.bio-letter.sm  { grid-column: 4/4; }
.bio-letter.md  { grid-column: 4/5; }
.bio-letter.lg  { grid-column: 4/6; }
.bio-letter.you { margin-top: 8rem; }

.bio-name { 
    writing-mode: vertical-lr; 
    grid-column: 6/7;
    grid-row: 1/-1;
}

.bio-name p { margin-top: 0.125rem; }

#about-estonia {
    background-image: url(../imgs/other-logos/ee.svg);
    background-repeat: repeat-x;
}

#about-estonia section {
    grid-template-columns: 28rem 1fr;
}

#about-estonia #estonia-hero {
    background-color: #F5F5F5;
    box-sizing: border-box;
    height: 20rem;
    padding: 4rem;
    margin-top: -4rem;
    position: relative;
}

#about-estonia #estonia-hero p:last-child {
    margin-top: 1rem;
    text-align: justify;
}

#about-estonia #estonia-hero:before {
    content: "";
    width: 20rem;
    height: 20rem;
    background-image: url(../imgs/other-logos/eu.svg);
    background-size: 20rem 20rem;
    
    position: absolute;
    top: -4rem;
    left: 4rem;
    filter: invert(1);
    opacity: 0.05;
}

#estonia-photos {
    grid-column: span 2;
    margin: 0 -8rem;
    display: grid;
    grid-template-columns: 6fr 3fr 3fr;
}

#estonia-photos img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

#estonia-photos small {
    grid-column: 1/-1;
    text-align: right;
    color: var(--cryptee-2);
}

#about-estonia #estonia-story {
    padding: 4rem;
    text-align: justify;
}

#about-estonia #estonia-story p {
    margin-bottom: 2rem;
}

#about-faq h2 {
    grid-column: 2/-1;
}

#about-faq #about-questions {
    grid-column: 1/-1;
    counter-reset: about-faq-counter;
}

#about-faq #about-questions p {
    text-transform: lowercase;
    margin-top: 0;
    text-align: justify;
}

#about-questions li {
    display: grid;
    grid-template-columns: 2rem 2rem 1fr 20rem;
    counter-increment: about-faq-counter;
    border-top: 2px solid #000;
    padding: 1rem 0 4rem 0;
}

#about-questions li::before {
    content: "0" counter(about-faq-counter);
    font-weight: 700;
    font-family: monospace;
}

#about-questions li > b {
    font-family: monospace;
    color: var(--cryptee-3);
}

.multilingual-answer { display: none; }



/* -----------------------------
-------------------------------- 
 
FREQUENTLY ASKED QUESTIONS (FAQ) 
 
--------------------------------
----------------------------- */

#faq-grid {
    grid-template-columns: 1fr; 
    row-gap: 0;  
}

#faq-grid > * {
    width: 100%;
    max-width: 32rem;
    margin: auto;
}

#faq-grid h2 { 
    margin-bottom: 4rem; 
    text-align: left !important;
    color: #646464 !important;
}

#faq-grid h2 span {
    display: block;
}

#faq-grid h2 span::first-letter {
    color: #000 !important;
}

#faq-grid summary { padding-right: 1.5rem; }
#faq-grid details p {
    margin: 1rem 0 1rem 0;
}

#faq-grid details { position: relative; }

#faq-grid details:target::before {
    border-right: solid 0.5rem var(--cryptee-green);
    position: absolute;
    content: "";
    left: -1rem;
    bottom: 0;
    top: 0;
}

#faq-grid h3 {
    margin-top: 4rem;
}

/* -----------------------------
-------------------------------- 
 
404 & OTHER ERRORS
 
--------------------------------
----------------------------- */

.fourohfour-logo {
    margin: auto;
    object-fit: cover;
    width:      3rem;
    height:     3rem;
}

.fourohfour-img {
    object-fit: cover;
    height:     49rem;
    max-height: 49rem;
    min-height: 49rem;
}


.goodbye-img {
    object-fit: cover;
    height:     65rem;
    max-height: 65rem;
    min-height: 65rem;
}

.cf-error-details * {
    font-size: 1rem !important;
    letter-spacing: inherit !important;
    font-weight: 350 !important;
    text-transform: lowercase !important;
    line-height: 1.5rem !important;
    color: var(--cryptee-2) !important;
}

#recaptcha_submit {
    text-transform: lowercase;
    font-weight: 700;
    cursor: pointer;
}

.fourohfour-logo.blink {
    animation: blinkOpacity 1s linear infinite;
}

/* -----------------------------
-------------------------------- 
 
ACKNOWLEDGEMENTS 
 
--------------------------------
----------------------------- */

.other-logo {
    filter: grayscale(1);
}




/* -----------------------------
-------------------------------- 
 
PRIVACY POLICY 
 
--------------------------------
----------------------------- */

.legal {
    font-family: serif;
}

.tags {
    text-align:left;
}

.tags li {
    padding: 4px 8px;
    margin-top: 4px;       /* 14px spacing to match vertical rhythm on grid*/ 
    display: inline-block;
    font-size: 0.75rem;         /* 12px */
    line-height: 1rem;          /* 16px */
    background-color: white;
}



/* -----------------------------
-------------------------------- 
 
PRESS KIT 
 
--------------------------------
----------------------------- */

.press-kit-image img {
    width: 100%;
}

.press-kit-image p span {
    line-height: 1.5rem;
}

.press-kit-image p i {
    line-height: 1rem;
}

.brand-card {
    padding: 2rem;
}

.brand-card img {
    width: 30%;
    margin: auto;
    display: block;
}







/* -----------------------------
-------------------------------- 
 
MEDIA QUERIES 
 
--------------------------------
----------------------------- */

@media (min-width : 1920px) {
    .grid-hero { grid-template-rows: 6rem 44rem;}
}

@media (max-width : 1152px) {
    #estonia-photos { margin: 0; }
}

@media (max-width : 960px) { 

    .grid-quarter {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }

    .grid-third > .twothird + b {
        display: none;
    }

    .long-paragraph {
        grid-template-columns: 2fr 1fr;
    }

    .grid-footer {
        grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr);
    }

    .bio-creatures {
        padding-top: 2rem;
        display: inline-block;
        text-decoration:none !important;
    }

    .mobile-os { order: -1; }

    .index-hero-button         { grid-template-columns: 1fr 4rem; }
    .index-hero-button .gray   { display: none; }

    #pricing b.bar.small  { width: 30%; }
    #pricing b.bar.medium { width: 60%; }

    .use-cases-hero img { object-position: center center !important; }

}


@media (max-width : 927px) { 
    
    .grid-third, .grid-half {
        column-gap: 4rem; 
    }
    
    .grid-quarter > .half,
    .grid-third > .twothird  { 
        grid-column: span 1; 
        margin-top: 0;
    }

    .index-download-os { 
        grid-column-start: 1;
        height: 9rem; 
        text-align: right;
    }

    .index-download-os i { opacity: 0; }

    .download-description { grid-column: 1/-1 !important;}

    #pricing .grid-third, 
    .index-use-cases-section { 
        grid-template-columns: 14rem 1fr; 
    }

    #pricing h2 + b { display: none; }
    #pricing b.bar { grid-column: span 1; }
    
    #about-grid { grid-template-columns: 1fr 4rem 2rem 20rem 1fr;}
    #bio-grid { 
        grid-template-columns: 1fr; 
        max-width: 24rem;
        margin: auto;
        row-gap: 4rem;
        grid-auto-rows: auto;
    }


    #who-grid { 
        grid-template-columns: 8rem 1fr; 
        margin: auto;
    }
    
    #aside-who { border: none; }

    #john-bio       { margin: 4rem 0 0 0; }
    #john-j         { margin-right: 4rem; }
    #john-j + img   { display: block; height: 4rem; float:right; margin-top: -4rem;}
    #john-name      { padding-top: 0; }
    #john-name img  { display: none; }

}

@media (max-width : 880px) {
    #europe-section br { display: none !important; }
    #europe-section p { max-width: 26rem; margin-top: -0.5rem; }
    .hidden-for-phablets { display: none !important; }
    
    .grid-hero { grid-template-rows: 4rem 36rem; }

    #hero h2 {
        margin-top: 0.5rem;
        font-size: 1.325rem;
        line-height: 2rem;
    }

    nav + article#hero, .use-cases-body article#hero {
        padding-top: 16rem;
    }
}

@media (max-width : 800px) {
    #about-questions li {
        grid-template-columns: 2rem 2rem 1fr; 
        padding: 1rem 0 3rem 0;
        row-gap: 1rem; 
    }

    #about-questions li:not(.multilingual-question) p { 
        grid-column: 2/-1; 
    }

    #about-questions li:not(.multilingual-question) b:first-child {
        display: none;
    }
    #about-questions p:nth-child(2) { font-weight: 700; }
    .multilingual-answer { display: block; }
    .multilingual-question::before { grid-column: 1/-1; }
    .multilingual-question p { grid-column: 2/-1;}
}

@media (max-width : 703px) { 
    
    nav { 
        height: 4rem;
        border-bottom: 2px solid #000;
        background-color: #FFF;
        grid-template-columns: 3rem 0.25rem 1fr 1fr 0 1fr 1fr 1rem;
    }

    nav p { transform: translateY(1rem) !important;}
    
    nav aside { 
        transform: translateY(-20rem) !important; 
        filter: invert(1);
        background-color: #000;
    }

    nav #logo { width: 3rem; }
    nav #logo img { 
        width: 1.5rem; 
        height: 1.5rem; 
        padding: 1.25rem 0;
    }

    nav + article#hero, 
    .use-cases-body article#hero {
        padding-top: 10rem;
    }

    nav + article { padding-top: 8rem; }


    #quick-exit {
        width: 100% !important;
        height: 4rem !important;
        writing-mode: initial !important;
        top: 4rem !important;
        transform: none !important;
    }

    #quick-exit > span {
        line-height: 4.25rem !important;
        padding: 0 0 0 1rem !important;
        float: left !important;
    }

    .grid-hero { 
        grid-column: 1/-1;
        grid-template-rows: 6rem 36rem;
    }

    #quick-exit ~ article .grid-hero {
        padding-top: 2rem;
    }

    .grid-hero h2 {
        text-align: center;
        padding: 0 2rem;
    }

    .hero-product {
        text-align: center;
    }
    .product-no { display: none; }

    #europe-section img { margin: auto; }
    #europe-section p { 
        text-align: justify; 
        margin: auto;
    }

    img.hero {
        object-position: 78% center;
        height: 18rem;
        min-height: 18rem;
    }

    .hero-img-carousel {
        height: 18rem !important;
    }

    .grid-quarter {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }

    .feature-no-line + img:not(.security-feature-img) {
        order: -1;
        max-height: 8rem;
        margin-top: 0;
    }

    .grid-hero {
        grid-template-columns: 0 1fr 0;
    }
    
    .media-split { grid-template-columns: 1fr; row-gap: 2rem; }
    .media-split .right { text-align: center; }
    .media-split h2 { margin-bottom: 2rem; text-align: center;}
    .hero-products { row-gap: 4rem; }

    .media-mention p {
        padding-bottom: 2rem;
        border-bottom: 1px solid #000;
    }

    .media-logos {
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .media-logos a     { text-align: center; }

    #pricing .grid-third { 
        grid-template-columns: 12rem 1fr; 
    }

    .index-use-cases-section { grid-template-columns: 1fr; }
    
    .index-use-cases-section > a, 
    .index-use-cases-section > p { grid-column: span 1; }
    
    .index-use-cases-section p, 
    .index-use-cases-section h2 { 
        text-align: left; 
    }

    .index-use-cases-section > div { margin-bottom: 4rem; }
    
    #estonia-photos { grid-template-columns: 1fr 1fr 1fr; }
    /* #estonia-photos img:nth-child(2) { display: none; } */
    #estonia-photos img { height: 28rem; }

}

@media (max-width: 607px) {
    .grid-third h2.right { text-align: left; }
    .grid-third .hero-img-carousel + h2 {
        margin-bottom: -1rem;
    }

    .index-download-section h2 {
        text-align: center !important;
    }

    .index-download-os { 
        height: 9rem; 
        text-align: center;
    }

    .index-download-os i { display: none; }
    .index-download-button { margin: auto; }

    .index-why-section, .index-use-cases-section { grid-template-columns: 1fr; }
    .index-why-section > div, .index-use-cases-section > div { margin-bottom: 3rem; }
    .index-why-section details, .index-use-cases-section details { grid-column: span 1; }
    .index-use-cases-section > div p.right { text-align: left; }
    #pricing .grid-third { grid-template-columns: 12rem 1fr; }
    #pricing section > h2 { grid-column: span 2; }
    #pricing b:not(.bar) { display: none; }
    #pricing b.bar { grid-column: span 1; }

    .index-pricing        { text-align: left; }
    .index-pricing .right { text-align: left; }
    #pricing b.bar        { transform: translateX(-4rem); }
    #pricing b.bar.small  { width: calc(30% + 4rem); }
    #pricing b.bar.medium { width: calc(60% + 4rem); }
    #pricing b.bar.large  { width: calc(100% + 4rem); }

    .use-cases-body .grid-half h2.right,
    .use-cases-signup-section h2 { 
        text-align: left; 
    }

}

@media (max-width : 544px) {
    
    nav + article#hero, 
    .use-cases-body article#hero {
        padding-top: 10rem !important;
    }

    #quick-exit ~ article .grid-hero {
        padding-top: 3rem;
    }

    .grid-half { 
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    } 
    
    .grid-quarter {
        column-gap: 2rem;
        row-gap: 2rem;
    }

    .hero-img-carousel img {
        border-radius: 0 !important;
    }

    img.hero {
        object-position: 60% center !important;
    }

    .long-paragraph > * {
        grid-column: span 4;
        text-align: left !important;
    }

    .long-paragraph > h2:last-child,
    .long-paragraph > div:last-child {
        order: -1;
    }

    .index-hero-button {
        grid-column: 1 / -1;
    }

    #pricing .grid-third  { 
        grid-template-columns: 1fr; 
        row-gap: 0;
    }

    #pricing section > h2 { 
        grid-column: span 1; 
        margin-bottom: 3rem;
    }

    #pricing .index-pricing p { 
        float: right; 
        text-align: right; 
        margin-top: 0.5rem;
    }

    #pricing b.bar { 
        transform: translateX(0); 
        margin-top: 0rem !important;
        margin-bottom: 4rem !important;
    }

    #pricing b.bar.small  { width: calc(25% - 1rem); }
    #pricing b.bar.medium { width: calc(50% - 2rem); }
    #pricing b.bar.large  { width: 100%; }

    #about-grid { grid-template-columns: 1fr minmax(16rem, 20rem) 1fr; }
    #about-grid div { grid-column: 2/3;}
    #about-grid h2 { writing-mode: initial; }
    #about-grid h2 + b { border: none; }

    #bio-grid { max-width: 20rem; }
    .bio-letter, #john-j, #john-j + img { display: none; }
    .bio-photo { max-width: 100%; height: 24rem; }
    .bio { grid-template-columns: 1fr 4rem; height: 24rem; }

    #about-estonia section { grid-template-columns: 20rem 1fr; }
    #about-estonia #estonia-hero,
    #about-estonia #estonia-story { padding : 2rem; }
    #about-estonia #estonia-hero:before {
        width: 16rem;
        height: 16rem;
        background-size: 16rem 16rem;
        top: -2rem;
        left: 2rem;
    }

    #estonia-photos { grid-template-columns: 1fr 1fr; }
    #estonia-photos img:nth-child(2) { display: none; }
    
    #about-faq h2 { margin-left: -2rem; } 

}

@media (max-width : 535px) {
    nav + article#hero, 
    .use-cases-body article#hero {
        padding-top: 8rem !important;
    }

    .grid-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width : 420px) {
    #europe-section span.hidden-for-small-screens {
        display: none !important;
    }

    .media-logos a:last-child {
        display: none !important;
    }

    #estonia-photos { grid-template-columns: 1fr; }
    #estonia-photos img:nth-child(1) { height: 18rem; object-position: 0 -6rem; }
    #estonia-photos img:nth-child(2) { display:block; height: 18rem; object-position: 0 -8rem; }
    #estonia-photos img:nth-child(3) { height: 18rem; object-position: 0 -6rem; }

    #europe-section, 
    .index-why-section
    {
        margin: 4rem 0;
    }

    .hero-img-carousel { margin-top: 0rem; }
    
    #pricing { padding-bottom: 4rem !important; }
}

@media (max-width: 374px) {
    .hidden-tiny { display: none; }
    nav { grid-template-columns: 4rem 1fr 1fr 1fr 1rem; }
    #logo { width: 4rem; }
    #bio-grid { row-gap: 2rem;}
    #john-bio { margin-top: 2rem; }

    #about-estonia section { grid-template-columns: 100% 1fr; }
    
    #about-estonia #estonia-hero,
    #about-estonia #estonia-story,
    #estonia-photos { max-width: 100%;}
    #estonia-photos img { object-position: center !important; }
    #about-estonia #estonia-hero,
    #about-estonia #estonia-story { padding : 1rem; }

    #about-estonia #estonia-hero:before {
        width: 18rem;
        height: 18rem;
        background-size: 18rem 18rem;
        top: -1rem;
        left: 1rem;
    }

    #about-faq section { grid-template-columns: 1rem 1fr 1rem; }
    #about-faq h2 { margin-left: -1rem; } 
}


/* -----------------------------
-------------------------------- 
 
IT'S A POINTER DEVICE,
ENABLE HOVERS 
 
--------------------------------
----------------------------- */

@media (-moz-touch-enabled: 0), (pointer:fine) { 

    .feature:hover small,
    .media-mention:hover small,
    .bio-creatures:hover {
        color: var(--cryptee-0);
    }

    .dm .feature:hover small,
    .dm .media-mention:hover small,
    .dm .bio-creatures:hover {
        color: white;
    }

    .index-download-button:hover i {
        padding-left: 0.75rem !important;
        transform: translateX(-2rem);
    }
    
    .index-download-button:active i {
        padding-left: 0rem !important;
        transition-duration: 0.3s;
        transform: translateX(0);
    }

    #quick-exit:hover {
        background-color: #e10000;
    }
}

@media (-moz-touch-enabled: 1), (pointer:coarse) { 
    .grid-footer {
        /* 10 */
        /* 18 */
        /* 22 */
        /* 16 */

        grid-auto-rows: 22rem;
    }

    footer p:not(.company-name) a {
        line-height: 3rem;
        display: block;
    }

    footer .column { 
        height: 22rem;
    }
}

@media (-moz-touch-enabled: 1), (pointer:coarse) and (max-width : 544px) {
    .grid-footer { display: block; }
    footer .column {  height: auto; }
    footer .column > p:first-of-type { padding-top: 1rem; }
    footer .column:not(:first-child) { margin-top: 4rem;}
}
/* -----------------------------
-------------------------------- 
 
dark mode 
 
--------------------------------
----------------------------- */

.dm body {
    background-color: black;
    color: var(--cryptee-4);
}

.dm hr {
    border-color: white;
}