body
{
    background-color : #1d1d1b;
    margin           : 0;
    overflow         : hidden;
    font-family      : 'Raleway', sans-serif;
}

#fullscreenImage
{
    position     : relative;
    float        : right;
    margin-top   : -50px;
    margin-right : 10px;
    width        : 40px;
    height       : 40px;
}

#logoMerksplasTopLeft
{
    position : absolute;
    left     : 10px;
    top      : 10px;
    width    : 120px;
    height   : 120px;
}

#logoMerksplasTopLeft > img
{
    width  : 120px;
    height : 120px;
}

#fullscreenImage:hover
{
    box-shadow : 0 0 8px grey;
}

@media only screen and (min-width : 769px)
{
    #logoMerksplasTopLeft
    {
        opacity : 0;
    }

    #loadingOverlay
    {
        position         : absolute;
        width            : 100%;
        height           : 100%;
        background-color : white;
    }

    #loadingCenteredDiv
    {
        width            : 400px;
        height           : 600px;
        position         : absolute;
        left             : 50%;
        top              : 50%;
        margin           : -300px 0 0 -200px;
        background-color : #231F46;
        box-shadow       : 0 0 15px black;
        font-size        : 14px;
        font-weight      : 200;
        color            : white;
    }

    #loadingCenteredDiv > a > img
    {
        margin-top : 35px;
        width      : 400px;
        height     : 267px;
    }

    #browserNotSupportedTexts, #deviceNotSupportedTexts
    {
        display : none;
        margin  : 75px 40px 0 40px;
    }

    #browserNotSupportedTexts > p, #deviceNotSupportedTexts > p
    {
        text-align : center;
        margin     : 17px 0 0 0;
    }

    #loadingAppTexts
    {
        display : none;
    }

    #loadingAppTexts > p
    {
        text-align : center;
        margin     : 17px 40px 0 40px;
    }

    #loadingAppTexts > #loadingDots
    {
        text-align     : center;
        font-size      : 32px;
        margin-top     : 0px;
        padding-bottom : 5px;
    }
}

@media only screen and (max-width : 768px)
{
    #logoMerksplasTopLeft
    {
        opacity : 0;
    }

    #loadingCenteredDiv > a > img
    {
        width      : -moz-calc(100% - 10px);
        width      : -webkit-calc(100% - 10px);
        width      : -o-calc(100% - 10px);
        width      : calc(100% - 10px);
        margin-top : 30px;
    }

    #loadingOverlay
    {
        position         : absolute;
        width            : 100%;
        height           : 100%;
        background-color : #231F46;
        color            : white;
    }

    #browserNotSupportedTexts, #deviceNotSupportedTexts, #loadingAppTexts
    {
        display    : none;
        margin     : 0 20px;
        text-align : center;
    }

    #loadingAppTexts > #loadingDots
    {
        text-align : center;
        font-size  : 32px;
    }
}

.fadeOutAnimation
{
    pointer-events              : none;

    -webkit-animation           : fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation              : fadeout 0.5s; /* Firefox < 16 */
    -ms-animation               : fadeout 0.5s; /* Internet Explorer */
    -o-animation                : fadeout 0.5s; /* Opera < 12.1 */
    animation                   : fadeout 0.5s;

    -webkit-animation-fill-mode : forwards;
    -moz-animation-fill-mode    : forwards;
    -ms-animation-fill-mode     : forwards;
    -o-animation-fill-mode      : forwards;
    animation-fill-mode         : forwards;
}

@keyframes fadeout
{
    from
    {
        opacity : 1;
    }
    to
    {
        opacity : 0;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadeout
{
    from
    {
        opacity : 1;
    }
    to
    {
        opacity : 0;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout
{
    from
    {
        opacity : 1;
    }
    to
    {
        opacity : 0;
    }
}

/* Internet Explorer */
@-ms-keyframes fadeout
{
    from
    {
        opacity : 1;
    }
    to
    {
        opacity : 0;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadeout
{
    from
    {
        opacity : 1;
    }
    to
    {
        opacity : 0;
    }
}

.fadeInAnimation
{
    /*pointer-events              : none;*/

    -webkit-animation           : fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation              : fadein 0.5s; /* Firefox < 16 */
    -ms-animation               : fadein 0.5s; /* Internet Explorer */
    -o-animation                : fadein 0.5s; /* Opera < 12.1 */
    animation                   : fadein 0.5s;

    animation-direction: normal;
    animation-iteration-count: 1;

    -webkit-animation-fill-mode : forwards;
    -moz-animation-fill-mode    : forwards;
    -ms-animation-fill-mode     : forwards;
    -o-animation-fill-mode      : forwards;
    animation-fill-mode         : forwards;
}

@keyframes fadein
{
    from
    {
        opacity : 0;
        display : none;
    }
    to
    {
        opacity : 1;
        display : block;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein
{
    from
    {
        opacity : 0;
        display : none;
    }
    to
    {
        opacity : 1;
        display : block;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein
{
    from
    {
        opacity : 0;
        display : none;
    }
    to
    {
        opacity : 1;
        display : block;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein
{
    from
    {
        opacity : 0;
        display : none;
    }
    to
    {
        opacity : 1;
        display : block;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein
{
    from
    {
        opacity : 0;
        display : none;
    }
    to
    {
        opacity : 1;
        display : block;
    }
}