body {
    margin: 0;
    padding: 0;
}

noscript {
    width: 100%;
}

#noscript-notification {
    margin: 0 7.5vw;
    color: red;
    text-align: center;
    font-size: 2vh;
    border: 5px solid black;
    padding: 15px;
    font-family: Tahoma !important;
}

#logo {
    background-color: rgb(254, 254, 254);
}

#splash-wrapper {
    height: 100vh;
    width: 100%;
    background: radial-gradient(ellipse, #648eba 40%, #4674a4);
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 100001;
    top: 0;
}

.footer {
    bottom: 0;
}

.logo-container {
    position: absolute;
    width: 100%;
    height: 8vh;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    right: 0; /*For IE*/
}

.hv-logo-container {
    width: 10%;
    background-color: transparent;
    left: 0 !important;
    margin-left: 2%;
}

.bottom-hv-logo {
    width: 100%;
    position: relative;
    height: 100%;
    background: url("./splash/img/hv-logo.png") no-repeat center;
    background-size: contain;
}

.gpt-logo-embedded {
    position: absolute;
    width: 50%;
    height: 40%;
    top: 45%;
    left: 15%;
    background: url("./splash/img/gpt-logo.png") no-repeat center;
    background-size: 100%;
}

#gpt-loader-embedded {
    position: absolute;
    top: 50%;
    width: 20%;
    height: 2%;
    background: url("./splash/img/gpt-loader.svg") no-repeat center;
    background-size: contain;
}

.splash-button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
    background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
    background-color:#f6f6f6;
}

.splash-button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family: Arial;
    font-size: 1.5vh;
    font-weight:bold;
    padding: 1% 4%;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    width: 50%;
}

.splash-button:first-of-type {
    margin-right: 10px;
    width: 30%;
}

#gpt-loader {
    position: absolute;
    background: url("./splash/img/gpt-loader.svg") no-repeat center;
    background-size: contain;
}

.loader-ie {
    background: url("./splash/img/gpt-loader.gif") no-repeat center !important;
}

.gpt-logo {
    position: absolute;
    background: url("./splash/img/gpt-logo.png") no-repeat center;
    background-size: 100%;
}

#notification-container {
    bottom: 15vh;
    height: 10vh;
    /*width: 30vw;*/
    /*left: 5vw;*/
    /*padding-left: 20px;*/
    font-size: 1vw;
    color: #4A4A4A !important;
}

@media (orientation: landscape) {
    #logo {
        position: relative;
        height: 100vh;
        width: 50%;
        margin-left: 50%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .gpt-logo {
        width: 20%;
        height: 15%;
        top: 40%;
        left: 15%;
    }

    #gpt-loader {
        top: 57%;
        left: 15%;
        width: 20%;
        height: 2%;
    }

    #notification-container {
        position: absolute;
        bottom: 15vh;
        height: 10vh;
        width: 50vw;
        text-align: center;
        left: 0;
        font-size: 1vw;
    }

    .shadow {
        position: absolute;
        height: 100%;
        left: calc(50% - 5px);

        -webkit-box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.5);
        box-shadow: 5px 5px 18px 5px rgba(0,0,0,0.5);
    }

    .bar {
        width: 50% !important;
        right: 0 !important;
        background-color: transparent;
    }
}

@media (orientation: portrait) {
    #logo {
        position: relative;
        height: 50%;
        width: 100%;
        bottom: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        top: 50%;
    }

    .gpt-logo {
        width: 60%;
        height: 30%;
        top: 15%;
        left: 20%;
    }

    #notification-container {
        position: absolute;
        bottom: 53vh;
        height: 10vh;
        width: 100vw;
        left: 0;
        font-size: 3vw;
        text-align: center;
    }

    .hv-logo-container {
        width: 30%;
        background-color: transparent;
        bottom: unset !important;
        left: unset !important;
        top: 10% !important;
        right: 0;
    }

    .shadow {
        position: absolute;
        width: 100%;
        top: calc(50% - 3px);

        -webkit-box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.8);
        box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.8);
    }

    #gpt-loader {
        top: 38%;
        width: 20%;
        height: 2%;
    }

    #top {
        display: none;
    }

    .bar {
        width: 100% !important;
        right: 0 !important;
    }
}