@font-face
{
    font-family: "default";
    src: url("default.ttf");
}
.parallax
{
	overflow-x: hidden;
	overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
}
.parallax__group
{
    position: relative;
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.parallax__layer
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.parallax__layer--base
{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}
.parallax__layer--back
{
    -webkit-transform: translateZ(-300px) scale(2.00);
    transform: translateZ(-300px) scale(2.00);
    z-index: 3;
}
.parallax__layer--deep
{
    -webkit-transform: translateZ(-600px) scale(3.00);
    transform: translateZ(-600px) scale(3.00);
    z-index: 2;
}
body, html
{
    overflow: hidden;
    background-size: 100vw 100vh;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    font-family: "default";
}
*
{
    margin:0;
    padding:0;
}
.parallax
{
    font-size: 100%;
}
#group
{
    z-index: 2;
    width: 100vw;
}
#group .parallax__layer--deep
{
    background-size: 100vw;
    background-image: url("bcg0.jpg");
    background-repeat: no-repeat;
    top: calc((-720 / 1280 * 90vw));
}
#group .image_footer
{
    background-size: 100vw;
    background-repeat: no-repeat;
    height: calc(720 / 1280 * 290vw);
    top: calc((-720 / 1280 * 175vw));
    position: relative;
    background-image:
    linear-gradient(180deg, rgb(40, 156, 184, 0) 80%, rgb(12, 44, 64)),
    linear-gradient(125deg, rgb(40, 156, 184, 0) 75%, rgb(12, 44, 64)),
    linear-gradient(235deg, rgb(40, 156, 184, 0) 75%, rgb(12, 44, 64)),
    url("bcg2.png");
}
#group .background_image
{
    background-image: url("bcg1.png");
    background-size: 75vw;
    background-repeat: no-repeat;
    top: calc((-720 / 1280 * 30vw));
    height: calc(720 / 1280 * 220vw);
    position: relative;
    width: 75%;
    margin: auto;
}
#group .content
{
    background: linear-gradient(180deg, rgb(12, 44, 64), rgb(7, 30, 44), rgb(12, 44, 64));
    height: auto;
    width: 100vw;
    line-height: 1;
    position: relative;
    top: calc((-720 / 1280 * 175vw));
    min-height: 200vh;
}
.row
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.column
{
    flex: 33%;
    max-width: 33%;
    height: auto;
}
.navbutton
{
    text-align: center;
    color: white;
    font-size: 3vw;
    line-height: 5vw;
    flex: 25%;
    max-width: 25%;
    height: 5vw;
}
#left, #right
{
    display: inline;
    vertical-align: middle;
    width: 5vw;
    height: auto;
    margin: initial;
    margin-top: -0.5vw; /* vertical align fine-tuning */
}
.navbar
{
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none;
}
a
{
    text-decoration: none;
}
a p
{
    -webkit-transition: opacity 1.0s ease-in-out;
	transition: opacity 1.0s ease-in-out;
    color: #FFFFFF;
    text-decoration: none;
    opacity: 50%;
}
a:hover p
{
    opacity: 100%;
}
img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#group .image
{
    margin: auto;
    width: auto;
    height: auto;
    margin: 2vw;
}
.frame
{
    padding: 2vw;
    color:black;
    box-shadow: 0 1vw 3vw 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    background-color: white;
}
.container
{
    text-align: center;
    padding: 1vw;
    color: white;
    font-size: min(2.5vw, 28px);
}
.footer
{
    background-size: 100vw;
    background-repeat: no-repeat;
    height: calc(1055 / 1920 * 100vw);
    background-image:
    linear-gradient(180deg, rgb(12, 44, 64) 0%, rgb(12, 44, 64, 0), rgb(0, 0, 0)),
    linear-gradient(180deg, rgb(12, 44, 64) 10%, rgb(12, 44, 64, 0)),
    url("lower.jpg");
    position: relative;
    top: calc((-720 / 1280 * 175vw));
}
#logo-image
{
    -webkit-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
    background-image: url("lg.png");
    background-repeat: no-repeat;
    background-size: 40vw;
    height: calc(450 / 1920 * 90vw);
    width: 100%;
    position: absolute;
    bottom: 2vw;
    background-position: center;
    margin: auto;
}
@media only screen and (max-width: 600px)
{
    .column
    {
        flex: 100%;
        max-width: 100%;
    }
    #group .image_footer
    {
        top: calc((-720 / 1280 * 110vw));
    }
    #group .background_image
    {
        top: calc((-720 / 1280 * 5vw));
        background-image: url("bcg1.png");
        background-size: 100vw;
        background-repeat: no-repeat;
        height: calc(720 / 1280 * 220vw);
        position: relative;
        width: 100%;
    }
    #group .content
    {
        top: calc((-720 / 1280 * 110vw));
    }
    #group .footer
    {
        top: calc((-720 / 1280 * 110vw));
    }
    #group .parallax__layer--deep
    {
        top: calc((-720 / 1280 * 40vw));
    }
    body
    {
        -webkit-text-size-adjust: none;
    }
    #group .container
    {
        padding-top: 5vw;
        font-size: 5vw;
    }
    .navbutton
    {
        text-align: center;
        color: white;
        font-size: 7vw;
        line-height: 10vw;
        flex: 100%;
        max-width: 100%;
        height: 10vw;
    }

    #group .image
    {
        margin: 10vw;
        margin-bottom: 0;
    }

    #left, #right
    {
        width: 6vw;
    }

    #logo-image
    {
        background-size: 50vw;
        height: calc(450 / 1920 * 90vw);
        bottom: 0;
    }

    .navbar
    {
        padding-top: 5vw;
    }

    a .container p
    {
        opacity: 100%;
    }
}