@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body {
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FBFBFB;
    margin: 0px;
    padding: 0px;
}

h1 {
    color: #2F5E6F
}

.Buttons {
    background-color: #2F5E6F;
    text-align: center;
    color: #FBFBFB;
    text-decoration: none;
    padding: 10px;
    text-transform: uppercase;
    font-size: 22px
}


#outer {
width:100%
}

#inner {
    margin-left: auto;
    margin-right: auto;
}

div {
font-family:'Open Sans', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#WhatStage{width:100%;float:left;display:none}

a {
    text-decoration: none;
    color: #2F5E6F
}


#ProfilImage {
    width: 33%;
    float: left;
    text-align: center
}

    #ProfilImage img {
        width: 80%
    }

#Knapper {
    width: 33%;
    float: left;
}

#Address {
    width: 33%;
    float: left;
}






@media (min-width: 1281px) {
    #WhatStage {
        background-color:red
    }

    #inner {
        width: 1000px;
        margin-top: 200px;
    }
}


@media (min-width: 1025px) and (max-width: 1280px) {
    #WhatStage {
        background-color: pink
    }

    #inner {
        width: 800px;
        margin-top: 200px;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {

    #WhatStage {
        background-color: dodgerblue
    }
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    #WhatStage {
        background-color: green
    }

    #inner {
        width: 100%;
        margin-top: 100px;
    }

    #ProfilImage {
        width: 50%;
        float: left;
        text-align: center
    }

    #Address {
        width: 50%;
        float: left;
    }

    #Knapper {
        width: 50%;
        float: left;
        padding-top:45px
    }


}


@media (min-width: 481px) and (max-width: 767px) {

    #WhatStage {
        background-color: yellow
    }

    #inner {
        width: 100%;
        margin-top: 50px;
    }

    #ProfilImage {
        width: 50%;
        float: left;
        text-align: center
    }

    #Address {
        width: 50%;
        float: left;
    }

    #Knapper {
        width: 100%;
        float: left;
        text-align:center;padding-top:45px
    }
}


@media (min-width: 320px) and (max-width: 480px) {

    #WhatStage {
        background-color: purple
    }

    #inner {
        width: 100%;
        margin-top: 50px;
    }

    #ProfilImage {
        width: 50%;
        float: left;
        text-align: center
    }

    #Address {
        width: 50%;
        float: left;
    }

    #Knapper {
        width: 100%;
        float: left;
        text-align: center;
        padding-top: 45px
    }
}