/*
    This is the stylesheet for the the following:
        + Privacy Statement
        + Terms of Service
        + Language Selector
        + Transcript
    The homepage has its stylesheet built in because it loads faster, and, if the user has
    javascript enabled (as will the vast majority), he will not see half of these pages.
    If a user does look at the Terms of Service, he will probably also look at the Privacy
    Statement.  So, having linked css reduces load times.
*/

html, body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    /*!
     * Web Fonts from Fontspring.com
     *
     * All OpenType features and all extended glyphs have been removed.
     * Fully installable fonts can be purchased at http://www.fontspring.com
     *
     * The fonts included in this stylesheet are subject to the End User License you purchased
     * from Fontspring. The fonts are protected under domestic and international trademark and
     * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
     * distributing this font software.
     *
     * (c) 2010-2017 Fontspring
     *
     *
     *
     *
     * The fonts included are copyrighted by the vendor listed below.
     *
     * Vendor:      cretype
     * License URL: https://www.fontspring.com/licenses/cretype/webfont
     *
     *
     */

    @font-face {
        font-family: 'geonsoftcn-medium';
        src: url('./geonsoftcn-medium-webfont.woff2') format('woff2'),
             url('./geonsoftcn-medium-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'geonsoftcn-light';
        src: url('./geonsoftcn-light-webfont.woff2') format('woff2'),
             url('./geonsoftcn-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    .addBackgroundImage, .addBackgroundImageBlurred, .cover {
        background-color: rgba(131,193,216,1);
        background-repeat: no-repeat;
    }

    @media screen and (max-width: 1999px) and (max-height: 1299px){
        .addBackgroundImage {
            background-image: url("./background-medium.jpg");
        }

        .addBackgroundImageBlurred, .cover {
            background-image: url('./background-small-blurred.jpg'); /* The Small Blurred Version looks the same as Medium but loads faster */
        }
    }

    @media screen and (min-width: 2000px), screen and (min-height: 1300px){
        .addBackgroundImage {
            background-image: url("./background.jpg");
        }

        .addBackgroundImageBlurred, .cover {
            background-image: url('./background-blurred.jpg');
        }
    }

    h1, h2, h3, header, section, aside, footer, p, nav, ul, li, div, table {
        display: block;
        padding: 0px;
        margin: 0px;
        border: 0px none;
        font-family: geonsoftcn-light, sans-serif;
        text-decoration: none;
        font-weight: normal;
        font-style: normal;
        color: rgba(27, 60, 82, 1);
    }
    tr, td {
        padding: 0px;
        margin: 0px;
    }

    a {
        font-family: geonsoftcn-medium, geonsoftcn-light, sans-serif;
    }

    header, footer {
        position: absolute;
        background: rgba(27, 60, 82, 0.9);
    	background: -webkit-linear-gradient(left, rgba(27, 60, 82, 1), rgba(37, 101, 137, 0.62)); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(right, rgba(27, 60, 82, 1), rgba(37, 101, 137, 0.62)); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(right, rgba(27, 60, 82, 1), rgba(37, 101, 137, 0.62)); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(to right, rgba(27, 60, 82, 1), rgba(37, 101, 137, 0.62)); /* Standard syntax */
        border-style: solid;
        border-color: rgb(27, 60, 82);
    }

    header {
        top: 0px;
    	left: 0px;
    	width: 100%;
        height: 6.1vh;
        border-width: 0vh 0vh .1vh 0vh;
    }

    .coverTextArea {
        display: block;
        position: relative;
        top: 6.2vh;
        bottom: 0vh;
        height: 93.8vh;
        overflow-y: scroll;
    }

    .coverTextArea p, .coverTextArea h2 {
        display: block;
        position: relative;
        font-size: 2em;
        max-width: 30em;
        margin: 0px auto;
        padding: 0.8vh;
        padding: 0.8ex 0.8vh;
        text-align: justify;
    }

    .coverTextArea h2 {
        font-size: 2.47em;
        max-width: 24.2915em;
        padding: 1.6vh 0.8vh 0vh 0.8vh;
        padding: 0.8ex 0.8vh 0vh 0.8vh;
    }

    p.legal {
        font-size:1.24em;
        max-width: 48.387em;
        text-transform: uppercase;
    }

    .coverTextArea p small {
        font-size: 62%;
    }

    .coverTextArea hr {
        position: relative;
        max-width: 60em;
    }

    h1.logo::before, h1.logo::after {
        position: relative;
        display: inline-block;
        content: "";
        background-image: url(data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3C%21--%20Creator%3A%20CorelDRAW%20X6%20--%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20version%3D%221.1%22%20shape-rendering%3D%22geometricPrecision%22%20text-rendering%3D%22geometricPrecision%22%20image-rendering%3D%22optimizeQuality%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%0D%0AviewBox%3D%220%200%20448%20448%22%0D%0A%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0D%0A%20%3Cg%20id%3D%22Layer_x0020_1%22%3E%0D%0A%20%20%3Cmetadata%20id%3D%22CorelCorpID_0Corel-Layer%22%2F%3E%0D%0A%20%20%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22nonzero%22%20d%3D%22M138%200l86%200%200%200%2086%200%206%200%204%204%2061%2061%2061%2061%205%205%200%206%200%2086%200%200%200%2086%200%206%20-4%204%20-61%2061%20-61%2061%20-5%205%20-6%200%20-86%200%200%200%20-86%200%20-6%200%20-4%20-4%20-61%20-61%20-61%20-61%20-5%20-5%200%20-6%200%20-86%200%200%200%20-86%200%20-6%204%20-4%2061%20-61%2061%20-61%205%20-5%206%200zm86%2031l0%200%20-80%200%20-57%2057%20-57%2057%200%2080%200%200%200%2080%2057%2057%2057%2057%2080%200%200%200%2080%200%2057%20-57%2057%20-57%200%20-80%200%200%200%20-80%20-57%20-57%20-57%20-57%20-80%200z%22%2F%3E%0D%0A%20%20%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22nonzero%22%20d%3D%22M120%20235c6%2C4%209%2C8%209%2C17%200%2C11%20-6%2C16%20-15%2C16%20-7%2C0%20-15%2C-3%20-22%2C-7%20-3%2C-2%20-5%2C-1%20-5%2C3l0%207c0%2C2%201%2C4%203%2C6%206%2C4%2016%2C7%2026%2C7%2019%2C0%2030%2C-12%2030%2C-31%200%2C-15%20-5%2C-23%20-15%2C-30l-19%20-13c-6%2C-4%20-9%2C-8%20-9%2C-16%200%2C-10%205%2C-14%2014%2C-14%206%2C0%2013%2C2%2019%2C6%203%2C2%205%2C1%205%2C-3l0%20-7c0%2C-2%20-1%2C-4%20-3%2C-6%20-6%2C-4%20-14%2C-6%20-23%2C-6%20-19%2C0%20-29%2C10%20-29%2C29%200%2C14%204%2C23%2015%2C30l19%2012zm55%20-54l0%2095c0%2C3%202%2C5%205%2C5l7%200c3%2C0%205%2C-2%205%2C-5l0%20-95%2019%200c3%2C0%205%2C-2%205%2C-5l0%20-6c0%2C-3%20-2%2C-5%20-5%2C-5l-54%200c-3%2C0%20-5%2C2%20-5%2C5l0%206c0%2C3%202%2C5%205%2C5l19%200zm80%20-17c-22%2C0%20-35%2C18%20-35%2C54l0%2011c0%2C36%2012%2C54%2035%2C54%2023%2C0%2035%2C-18%2035%2C-54l0%20-11c0%2C-36%20-13%2C-54%20-35%2C-54zm0%20104c-12%2C0%20-18%2C-12%20-18%2C-39l0%20-10c0%2C-27%206%2C-39%2018%2C-39%2012%2C0%2018%2C13%2018%2C39l0%2010c0%2C27%20-6%2C39%20-18%2C39zm106%20-62l0%20-6c0%2C-21%20-11%2C-33%20-28%2C-33l-27%200c-3%2C0%20-5%2C2%20-5%2C5l0%20106c0%2C3%202%2C5%205%2C5l7%200c3%2C0%205%2C-2%205%2C-5l0%20-37%2015%200c17%2C0%2028%2C-12%2028%2C-33zm-16%20-6l0%206c0%2C12%20-4%2C18%20-13%2C18l-14%200%200%20-43%2014%200c8%2C0%2013%2C6%2013%2C18z%22%2F%3E%0D%0A%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E);
        background-repeat: no-repeat;
        background-size: 4.7vh 4.7vh;
        width: 5.8vh;
        height: 4.7vh;
        top: .7vh;
    }
    h1.logo::before {
        background-position: left 0px top 0px;
    }
    h1.logo::after {
        background-position: right 0px top 0px;
        display: none;
    }

    h1 {
        position: relative;
        width: 100%;
        text-align: center;
        font-size: 4.7vh;
        color: #ffffff;
    }

    header h2 {
        position: relative;
        top: .9vh;
        width: 100%;
        text-align: center;
        font-size: 1.4vh;
        text-transform: uppercase;
        color: #ffffff;
    }
    header h3 {
        position: relative;
        top: .5vh;
        width: 100%;
        text-align: center;
        font-size: 2.4vh;
        text-transform: uppercase;
        color: #ffffff;
    }

    footer {
        bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 3.8vh;
        border-width: .1vh 0vh 0vh 0vh;
    }

    ul {
        font-size: 2.9vh;
    }
    li {
        display: inline-block;
        font-family: geonsoftcn-medium, sans-serif;
        font-size: 2.9vh;
        padding: 0vh .8vh;
    }
    footer li:first-child:after {
        position: relative;
        left: 1.0vh;
        color: #e6e6e6;
        content: "|";
    }

    footer a, header a {
        color: #e6e6e6;
        text-decoration: none;
    }

    footer a:hover, header a:hover, footer a:focus, header a:focus {
        color: #ffffff;
        text-decoration: underline;
    }

    footer a:active, header a:active {
        /*color: #A5D1EE;*/
        color: #cccccc;
    }

    footer a .globeIcon path, a .playIcon path, a .playIcon polygon, a .homeIcon path, a .homeIcon polygon, a .homeIcon circle {
        fill: #e6e6e6;
    }
    footer a:hover .globeIcon path, footer a:focus .globeIcon path, a:hover .playIcon path, a:hover .playIcon polygon, a:focus .playIcon path, a:focus .playIcon polygon, a:hover .homeIcon path, a:hover .homeIcon polygon, a:hover .homeIcon circle, a:focus .homeIcon path, a:focus .homeIcon polygon, a:focus .homeIcon circle {
        fill: #ffffff;
    }
    footer a:active .globeIcon path, a:active .playIcon path, a:active .playIcon polygon, a:active .homeIcon path, a:active .homeIcon polygon, a:active .homeIcon circle {
        fill: #cccccc;
    }

    #languageSelectorButton {
        position: absolute;
        right: 0px;
    }

    .globeIcon {
        position: relative;
        width: 2.9vh;
        height: 2.9vh;
        top: .4vh;
    }

    .homeIcon {
        position: fixed;
        width: 4.7vh;
        height: 4.7vh;
        top: 0vh;
        left: 0vh;
        margin: .8vh;
    }

    #quitButton, #closeButton {
        position: relative;
        top: -6.6vh;
        margin: 0vh .8vh;
        font-size: 3.6vh; /*h1 - h1/1.618^3*/
    }

    #backButton {
        position: fixed;
        top: 0vh;
        margin: 0vh 0.8vh;
        padding: 0vh;
        /*font-size: 3.6vh;*/
        font-size: 4.7vh;
    }
    #backButton a:hover, #backButton a:focus {
        text-decoration: none;
    }

    #languageSelector li {
        font-size: 2.9vh;
        font-size: calc(1rem + 2.9vh);
        padding: 0vh .8vh;
        padding: 0vh calc(.28rem + .8vh);
    }

    .main {
        position: relative;
        top: 22%;
        font-size: 2.9vh;
        font-size: calc(1rem + 2.9vh);
        width: 38%;
        left: 15%;
        text-align: center;
    }
    a {
        color: rgb(37, 101, 137);
        outline: none;
    }
    a:hover, a:focus {
        color: rgb(27, 60, 82);
    }
    a:active {
        color: rgb(10, 22, 31);

    }
    p {
        padding: 1.61ex 0ex 0ex;
    }

    a.button {
        position: relative;
        display: inline-block;
        height: 3.8vh;
        height: calc(1.31rem + 3.8vh);
        padding: .4vh 1.0vh;
        padding: calc(.14rem + .4vh) calc(.34rem + 1vh);
        background-color: rgba(27, 60, 82, 0.9);
        color: #e6e6e6;
        text-decoration: none;
        border-style: solid;
        border-width: .1vh;
        border-color: rgba(27, 60, 82, 1);
    }
    a.button:hover, a.button:focus {
        color: #ffffff;
    }
    a.button:active {
        color: #cccccc;
        background-color: rgba(27, 60, 82, 1);
    }

    .playIcon {
        position: relative;
        display: inline-block;
        height: 2.9vh;
        height: calc(1rem + 2.9vh);
        width: 2.9vh;
        width: calc(1rem + 2.9vh);
        top: .4vh;
        top: calc(.14rem + 0.4vh);
    }

    small {
        position: relative;
        top: -1.1vh;
        /*top: -1.45vh;
        top: calc(-.62em - 1.80vh);
        /*font-size: 62%;*/
        font-size: 100%;
    }
    p.small {
        font-size: 62%;
    }

    .cover {
        position: absolute;
    	display: block;
    	overflow: hidden;
    	top: 100%;
    	left: 0px;
    	height: 0%;
    	width: 100%;
    	margin: 0px;
    	transition: top 4s, height 4s, ease 1s;
        overflow: hidden;
    }

    /* using spans to open and close a .cover breaks printing */
    .opened {
        top: 0%;
        height: 100%;
    }
    .closed {
        top: 100%;
        height: 0%;
    }

    .content {
        position: relative;
        top: 12.0vh;
        font-size: 2.9vh;
        width: 38%;
        left: 31%;
        text-align: center;
    }

    .keypadNumeral path {
        fill: rgb(37, 101, 137);
    }
    a:hover .keypadNumeral path, a:focus .keypadNumeral path {
        fill: rgb(27, 60, 82);
    }
    a:active .keypadNumeral path {
        fill: rgb(10, 22, 31);
    }

    .keypadNumeral {
        width: 6.1vh;
        height: 6.1vh;
        margin: .8vh;
        width: calc(2.1rem + 6.1vh);
        height: calc(2.1rem + 6.1vh);
        margin: calc(.28rem + .8vh);
    }

    a:hover .keypadNumeral {
        cursor: pointer;
    }

    table {
        position: relative;
        top: 12.0vh;
        margin-left: auto;
        margin-right: auto;
        width: 23.1vh;
        width: calc(7.98rem + 23.1vh);
        border-collapse: collapse;
        border-spacing: 0px;
    }

    /* Background Aspect Ratios */
    @media screen and (min-aspect-ratio: 570/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 600vh 400vh;
            background-position: center bottom -255vh;
            background-color: rgba(131,193,216,1);
        }
    }
    @media screen and (max-aspect-ratio: 570/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 600vh 400vh;
            background-position: right -30vh bottom -255vh;
        }
    }
    @media screen and (max-aspect-ratio: 470/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 600vh 400vh;
            background-position: right -40vh bottom -255vh;
        }
    }
    @media screen and (max-aspect-ratio: 375/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 375vh 250vh;
            background-position: right -0vh bottom -135vh;
        }
    }
    @media screen and (max-aspect-ratio: 295/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 300vh 200vh;
            background-position: right -5vh bottom -90vh;
        }
    }
    @media screen and (max-aspect-ratio: 225/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 240vh 160vh;
            background-position: right -10vh bottom -53vh;
        }
    }
    @media screen and (max-aspect-ratio: 180/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 225vh 150vh;
            background-position: right -10vh bottom -45vh;
        }
    }
    @media screen and (max-aspect-ratio: 120/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: 180vh 120vh;
            background-position: right -10vh bottom -16vh;
        }
        .main {
            left: 10%;
            top: 16%;
        }
    }
    @media screen and (max-aspect-ratio: 106/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 120vh;
            background-position: right -15vh bottom -16vh;
        }

    }
    @media screen and (max-aspect-ratio: 88/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 120vh;
            background-position: right -18vh bottom -16vh;
        }
    }
    @media screen and (max-aspect-ratio: 78/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 120vh;
            background-position: right -22vh bottom -16vh;
        }
        .main {
            left: 8%;
            width: 50%;
        }
    }
    @media screen and (max-aspect-ratio: 70/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 120vh;
            background-position: right -26vh bottom -16vh;
        }
        .main {
            left: 5%;
        }
    }
    @media screen and (max-aspect-ratio: 65/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 110vh;
            background-position: right -22vh bottom -8vh;
        }
        .main {
            left: 2%;
        }
    }
    @media screen and (max-aspect-ratio: 63/100){
        .addBackgroundImage, .addBackgroundImageBlurred, .cover {
            background-size: auto 110vh;
            background-position: right -26vh bottom -8vh;
        }
        .main {
            width: 57%;
        }
    }

    @media screen and (max-height: 600px) and (max-width: 850px) {
        .main {
            left: 5%;
            top: 10%;
            width: 50%;
        }

    }

    @media screen and (min-height: 750px) and (max-width: 500px) {
        h1::before, h1::after {
            display: none;
        }
    }

    .hidden {
        display: none;
    }

    p.noscreen {
        display: none;
    }

    @media print and (min-height: 0px){
        body {
            color: #000000;
            background: #ffffff;
        }
        .cover, .addBackgroundImage, .addBackgroundImageBlurred, header, footer {
            background: #ffffff;
        }

        h1 {
            position: static;
            color: black;
            background: white;
        }
        header {
            position: static;
            height: auto;
            margin: 0px;
        }

        h1::before, h1::after {
            display: none; /* MS Edge Cannot Print Background Images */
        }

        .main {
            display: none;
        }
        #transcript {
            display: block;
            position: static;
            top: 0px;
            bottom: auto;
            height: auto;
            overflow-y: visible;
        }
        #transcript header {
            display: none;
        }

        .coverTextArea {
            display: block;
            position: static;
            height: auto;
            margin: 0vh 0vh 0vh 0vh;
            overflow-y: visible;
        }

        .coverTextArea p, .coverTextArea h2 {
            display: block;
            position: relative;
            font-size: 1.5em;
            max-width: 100%;
            margin: 0px auto;
            padding: 0.22em 0vh 0.22em 0vh;
            text-align: justify;
            color: #000000;
        }

        .coverTextArea p a, .coverTextArea p a:hover, .coverTextArea p a:active, .coverTextArea p a:visited, .coverTextArea p a:focus {
            color:#cccccc;
        }

        .coverTextArea h2 {
            font-size: 1.85em;
            padding: 0.44em 0vh 0vh 0vh;
        }

        p.legal {
            font-size: 0.93em;
            max-width: 100%;
            text-transform: uppercase;
        }

        .coverTextArea p small {
            font-size: 62%;
        }

        .coverTextArea hr {
            position: relative;
            width: 100%;
            max-width: 60em;
        }

        footer, #closeButton {
            display: none;
        }

        p.noprint {
            display: none;
        }
        p.noscreen {
            display: block;
        }

    }