/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* colors */
:root {
    --ipv-orange-100: #ff8300;
    --ipv-yellow-100: #feb306;
    --ipv-sunshine-100: #ffe70b;
    --ipv-blue-100: #023047;
    --ipv-dkteal-100: #0E5F76;
    --ipv-teal-100: #00c2d2;
    --ipv-teal-50: #7ee7ff;
    --ipv-teal-20: #DAF8FF;
    --ipv-gray-0: #e1e1e0;
    --ipv-gray-10: #f2f1f0;
    --ipv-gray-20: #d9d8d8;
    --ipv-gray-90: #050315;
    --ipv-green-80: #94BC48;
    --ipv-green-100: #00845D;
    --ipv-red-100: #EF4F23;
}


html {
    /*background: white linear-gradient(white, var(--ipv-teal-20));*/
    background: var(--ipv-gray-0);
    font-size: calc(0.025 * 100vw);
    margin: 0 auto;
}
body {
    /*background: white linear-gradient(white, var(--ipv-teal-20));*/
    background: var(--ipv-gray-0);
    display: grid;
    font-family: "Source Sans 3", sans-serif;
    height: 100vh;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    letter-spacing: -0.04rem;
    line-height: 1.16;
    margin: 0 0 1rem;
}

h1 {
    font-size: 2.23rem;
}
h2 {
    color: var(--ipv-blue-100);
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 0.6rem;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
}
p {
    font-size: 0.5rem;
    margin-bottom: 0.5rem;
}
label {
    font-weight: 600;
}

/* elements */

a, a:visited, a:hover, a:active  {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover {
    cursor: pointer;
}
a * + * {
    margin-left: 0.5rem;
}


.clearfix.clear {
    clear: both;
}
.hidden {
    display: none;
    visibility: hidden;
}

/* page architecture */
.panel {
    display: none;
    height: 100%;
    margin: 0;
    width: 100%;
}
.panel.active {
    display: flex;
    -webkit-transition: fade 300ms;
    -moz-transition: fade 300ms;
    -ms-transition: fade 300ms;
    -o-transition: fade 300ms;
    transition: fade 300ms;
}
.logo-container {
    display: none;
    visibility: hidden;
    width: 7rem;
}
.img-container img,
.logo-container img {
    max-width: 100%;
}
[class*="column-"] {
    display: inline-block;
    height: calc(100vh - 3rem);
    padding: 1.5rem;
    position: relative;
    vertical-align: top;
}
[class*="column-"] + [class*="column-"] {
    /*margin-left: 0;*/
}
.column-16 {
    width: calc(16% - 1.5rem);
}
.column-25 {
    width: calc(25% - 1.5rem);
}
.column-33 {
    width: calc(33% - 1.5rem);
}
.column-40 {
    width: calc(40% - 1.5rem);
}
.column-50 {
    width: calc(50% - 1.5rem);
}
.column-67 {
    width: calc(67% - 1.5rem);
}
.column-100 {
    width: calc(100% - 1.5rem);
}
[class*="column-"].nopad {
    padding-left: 0;
}
[class*="column-"].dark {
    background-color: var(--ipv-blue-100);
    color: white;
}
.center {
    text-align: center;
}

.svg-container {
    max-width: calc(100vw - 4rem);
}
.svg-container .arc {
    display: none;
}

/* dialog */

.dialog {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: calc(60vw - 4rem);
    background: #fff;
    border: 1px solid #424140;
    box-shadow: 0 2px 4px #828180;
    z-index: 999;
}
.dialog.hidden {
    display: none;
}
.dialog-topbar {
    padding: 0.33rem 0.5rem;
}
.dialog-topbar:hover {
    cursor: pointer;
}
.dialog .fa-close {
    float: right;
    display: inline-block;
    font-size: 0.6rem;
}
.dialog-content {
    padding: 0.5rem;
}
.dialog-content img {
    max-width: 100%;
}
.dialog-mask {
    background: var(--ipv-gray-0);
    height: 100vh;
    opacity: 0.6;
    position: absolute;
    width: 100vw;
    z-index: 10;
}
.security{
    background: var(--ipv-orange-100);
    color: #000;
    fill: var(--ipv-orange-100);
}
.identity{
    background: var(--ipv-sunshine-100);
    color: #000;
    fill: var(--ipv-sunshine-100);
}
.biometrics{
    background: var(--ipv-yellow-100);
    color: #000;
    fill: var(--ipv-yellow-100);
}
.quality{
    background: var(--ipv-teal-50);
    color: #000;
    fill: var(--ipv-teal-50);
}
.privacy{
    background: var(--ipv-blue-100);
    color: #fff;
    fill: var(--ipv-blue-100);
}
.usability{
    background: var(--ipv-green-100);
    color: #fff;
    fill: var(--ipv-green-100);
}
#center-isoc:hover {
    cursor: pointer;
    opacity: 0.7;
}


/*  vertical screens */
@media (orientation: portrait) {
    html {
        font-size: calc(0.025 * 100vh);
    }
    .panel.active {
        display: block;
    }
    .title-panel, .landing-panel {
        background-size: 112%;
        background-position: bottom center;
    }
    [class *= "column-"] {
        display: block;
        height: unset;
        padding: 1rem 1.5rem;
        width: calc(100% - 3rem);
    }
    [class*="column-"].nopad {
        padding-left: 1.5rem;
        /*padding-top: 0;*/
    }
    .column-16 { height: calc(12vh - 2rem); } /* less space for icons */
    .column-33 { height: calc(24vh - 2rem); } /* less space for question text */
    .column-40 { height: calc(45vh - 2rem); } /* more space for touchable response area */
    .column-50 { height: calc(64vh - 2rem); } /* more space for touchable response area */
    .column-100 { height: calc(100vh - 2rem); }
    .column-100.dark h2 {
        margin: 0 0 2rem;
    }
    .svg-container {
        max-width: 100vw;
        padding: 1rem 0;
        width: 100vw;
    }

    [class*="column-"].vertical-collapse {
        height: unset;
    }
    .form-control {
        max-width: 80vw;
    }
    .dialog {
        width: calc(100vw - 4rem);
    }
}