﻿@media screen and (max-width: 480px) {
    body {
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #frame {
        height: auto;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        background: white;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

    #mainsection {
        max-height: 400px;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

        #mainsection div {
            width: 230px;
            display: flex;
            flex-direction: column;
            align-content: center !important;
            justify-content: center;
        }

            #mainsection div div {
                zwidth: 200px;
                height: 333px;
                background: white;
            }

                #mainsection div div#Empty {
                    display: none;
                }

    #FreeGraphic, #Decorative, #GetRed, #Corporate, #LogoandSign, #Typo, #TheBrand, #Empty, #Contact {
    }

    #mainsection div div#FreeGraphic, #mainsection div div#Decorative,
    #mainsection div div#GetRed, #mainsection div div#Corporate, #mainsection div div#LogoandSign,
    #mainsection div div#Typo, #mainsection div div#TheBrand, #mainsection div div#Contact, #mainsection div div#GetRedMobile, #mainsection div div#LogoandSignMobile, #mainsection div div#TheBrandMobile {
        min-width: 230px;
        max-width: 230px;
        width: 100%;
        height: 230px;
        background-size: 230px 230px;
        background-position: center;
        background-repeat: no-repeat;
    }

        #mainsection div div#FreeGraphic:hover, #mainsection div div#Decorative:hover,
        #mainsection div div#GetRed:hover, #mainsection div div#Corporate:hover, #mainsection div div#LogoandSign:hover,
        #mainsection div div#Typo:hover, #mainsection div div#TheBrand:hover, #mainsection div div#Contact:hover, #mainsection div div#GetRedMobile:hover, #mainsection div div#LogoandSignMobile:hover, #mainsection div div#TheBrandMobile:hover {
            background-size: 230px 230px;
        }

    #mainsection div div#GetRed, #mainsection div div#LogoandSign, #mainsection div div#TheBrand {
        display: none;
    }

    #mainsection div div#GetRedMobile, #mainsection div div#LogoandSignMobile, #mainsection div div#TheBrandMobile, #mainsection div div#WhiteSpaceMobile {
        display: block;
    }

    div#footer {
        display: none;
    }

    div#WhiteSpaceMobile {
        height: 130px !important;
        min-width: 300px;
        max-width: 300px;
        width: 100%;
    }

    div#footermobileframe {
        min-width: 300px;
        max-width: 460px;
        width: 100%;
        height: 110px;
        position: fixed;
        bottom: 0px;
        background: white;
        align-content: center;
        text-align: center;
    }

    div#footermobile {
        position: fixed;
        bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        align-content: center;
        display: block;
        background-image: url('../img/home_button.png');
        background-position: center;
        background-repeat: no-repeat;
        min-height: 81px;
        height: 81px;
        min-width: 230px;
        width: 100%;
        background-size: 230px 81px;
    }

    div#theBrandFrame {
        min-width: 320px;
        max-width:100vw;
        width: 100%;
        min-height: 70vw;
        height:70vw;
        margin-left: auto;
        margin-right: auto;
        zbackground: lime;
    }

    div#divTopImagetheBrand {
        /*background: #DD1A22;*/
        min-width: 100vw !important;
        max-width: 100vw !important;
        width: 100% !important;
        height: 70vw;
        min-height: 50vw;
        background-image: url('../img/pages/TheBrand/brand_image.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        overflow: hidden;
        margin-top: 0px;
        margin-left: 0px;
    }



    div#divRedFrame {
        box-sizing: border-box;
        position: static;
        top: 0px;
        min-height: 30vw;
        height: 30vw;
        min-width: 320px;
        max-width: 100vw;
        width: 100%;
        /*display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;*/
    }

    div#divDownloadtheBrand {
        height: 10vw;
        background: none;
        max-width: 100vw;
        width: 100%;
        zmargin-top: -105px;
        zmargin-left: 40px;
        margin-left: 5%;
    }

        div#divDownloadtheBrand a {
            cursor: pointer;
            height: 20vw;
            text-align: center;
        }

            div#divDownloadtheBrand a img {
                height: 16px;
            }

    div#divcontactfootertheBrand {
        position: static;
        min-height: 20vw;
        min-width: 300px;
        max-width: 100vw;
        width: 100%;
        background-image: none;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 142px 50px;
        cursor: pointer;
    }

    div#divcontactfootertheBrandLogo {
        min-height: 20vw;
        width: 100%;
        background-image: url('../img/pages/TheBrand/home_button_brand.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 174px 61px;
        cursor: pointer;
    }

    /*CONTACTPAGE*/
    #bodycontact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 100vh;
    }

    div#contactcontainer {
        background: #DD1A22 !important;
        min-height: 100vw !important;
        width: 100vw;
    }

    div#contactcontainerinformation {
        justify-content: center;
        zpadding-top: 20px;
        min-height: 300px;
        height:100vw;
        min-width: 300px;
        max-width: 100vw;
    }

    div#contactcontainerinformationauthor {
        min-height: 30vw;
        background-image: url('../img/pages/contact/contact_image_background_author.png');
        background-position: top;
        background-size: 70px 70px;
        background-position-y:bottom;
        margin-top: 0px;
    }

    div#contactinformation {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        zmargin-top: -10px;
        
        min-height: 40vw;
        font-size: 13px;
    }

        div#contactinformation a {
            height: 30px;
            font-size:13px;
            background-position-y:top;
        }

            div#contactinformation a img {
                width: 30px;
                height: 30px;
            }


        div#contactfooter {
            /*position: fixed;
        bottom: 0px;*/
            min-height: 30vw;
            min-width: 300px;
            max-width: 100vw;
            width: 100%;
            cursor: pointer;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            background: #DD1A22;
            /*background-image: url('../img/pages/contact/home_button_brand.png');
        background-size: 142px 50px;
        background-repeat: no-repeat;
        background-position: bottom;*/
        }

        div#contactfooter a, div#contactfooter a img {
            display: block;
        }

            div#contactfooter a {
                width: 100%;
                min-height: 30vw;
                display: flex;
                flex-direction: row;
                align-content: center;
                align-items: flex-end;
                justify-content: center;
                bottom: 0px;
            }

            div#contactfooter a img {
                position: relative;
                zmargin-top: 70px;
                width: 159px;
                height: 56px;
                background-position-y: bottom;
            }


    
}
