/* Giving the page the height of the screen*/
body { height: 100vh }

/* Set background */
#background {
    background-color: #24579c;
    height: 90vh;                                           /* Size of box */ 
    background-image: url(Images/home_background.jpg);      /* Use this image */ 
    background-size: auto 90vh;                             /* Size of image */ 
    background-position: right top;                         /* Lock position */
    }

/* Slogan & Statement*/
#slogan {
    height: 50vh; width: 85vw;      /* Size of slogan */       
    padding: 30vh 0px 0px 10vw;     /* Distance from slogan */
}

/* Design company-logos in footer */
#companies {
    width: 70%; height: 100%; margin: 2vh auto 2vh auto; /* Size and position of box */
    display: flex; justify-content: space-between;  /* Display company-logos with flex */
}
    
    .footerbox {margin: auto 0px auto 0px;} /* Level logo position */

    /* Edit size and position each company image */
    #savr { height: 5vh; }
    #sportway { height: 5vh;}
    #pocketlaw { height: 4vh;}
    #imagilabs { height: 5vh; }
    #mindmore { height: 5vh;}

/* Background when image-height does not cover the screen */
@media (max-height:470px) { #background {background-image: none;}}

/* Designing for mobile */
@media (max-width: 1024px) {

    /* Lock picture to the left*/
    #background { background-position: left top;}
     
    /* Position of h2 in slogan */
    #mobileslogan h2{
        text-align: center;
        padding: 5vh 10vw 0px 10vw;
}}