@media screen and (max-width:1650px) {

    #mainCont {
        width: 94%;
        max-width: 1600px;
    }

    /* phone: */
    .phoneLocation, .phone {
       transform: rotateX(75deg) rotateY(4deg) rotateZ(-26deg) translateX(98%) translateY(11px) translateZ(-45px);
    }

}

@media screen and (max-width:1500px) {
    
    /* Main Screen: */
    #windowContainer {
        background-image: url('images/home_page_window_1200.png');
        background-position: 50% 0%;
        background-size: 100% 95%;  
    }

    /* Mug: */
    #mug {
        left: 10%;
    }
    
    /* Phone: */
    #phoneContainer {
        right: 10%;
    }

}

@media screen and (max-width:1300px) { 

    #rustButtonLeft {
        left: 30%;
    }

    #rustButtonRight {
        right: 30%;
    }
    
}

@media screen and (max-width:1200px) {

    /* Window: */
    #window {
        width: 88%;
    }

    #windowContainer {
        background-size: 108% 95%;  
    }
        
    /* Nav bar: */
    .navselection0 {
        width: 28% !important;
    }

    #navselection04 {
        width: 16%  !important
    }
    
    /* footer: */
    #footerLeft { 
        width: 25%;
    }

    #footerRight {
        width: 75%;
    }

}

@media screen and (max-width:1100px) {

    /* Mug: */
    #mug {
        left: 50px;
    }
    
    /* Phone: */
    #phoneContainer {
        right: 50px;
    }

    /* phone: */
    .phoneLocation, .phone {
       transform: rotateX(75deg) rotateY(4deg) rotateZ(-33deg) translateX(0%) translateY(-15px) translateZ(-45px);
    }

}

@media screen and (max-width:1000px) {  

}

@media screen and (max-width:950px) {
    
    /* Phone: */
    #phoneContainer {
        right: 20px;
    }

}

@media screen and (max-width:900px) {
    
    /* Phone: */
    #phoneContainer {
        right: 0;
    }

}

@media screen and (max-width:800px) {

    /* Mug: */
    #mug {
        width: 90px;
        height: 120px;
    }

    /* Phone:*/
    .phoneLocation, .phone {
    transform: rotateX(76deg) rotateY(6deg) rotateZ(-25deg) translateX(50%) translateY(-72px) translateZ(-54px);
    }
    
    /* Nav Bar: */
    article {
        padding-top: 50px;
        height: 660px;
    }
    nav {
        display: none;
    }

    /* Laptop: */
    #laptopContainerMain {
        width: 382px;
        height: 250px;
    }

    #laptopContainer {
        bottom: -35px;
        transform: translateX(-50%) scale(0.7);
    }

    #laptopScreen {
        height: 249px;
    }
    
    /* Main Screen: */
    #mainCont {
        width: 100%;
        height: 540px;
        border-radius: 0px; 
    }

    /* Window: */
    #window {
        width: 100%;
        height: 396px;
        top: -270px;
    }

    #windowContainer {
        height: 230px;
        top: 270px;
        background-image: url('images/home_page_window_800.png');
        background-position: 50% -50%;
        background-size: 100% 95%;  
    }

    /* footer: */
    #footerLeft, #footerRight {
        display: none;
    }
    
    #footerContMobile, #NavBarMobile {
        display: inline-block;
    }

    footer {
        height: 180px;
    }
    
    /* Backgrounds: */    
    .BGcontainer {
        top: -70px;
    }

    #deskContainer {
        height: 90px;
        background-image: url('images/home_page_desk_mobile.jpg');
        background-position: 50% 50%;
        background-size: 800px 100%;
    }

    #springBG {
        background-image: url('images/spring_tablet_BG.jpg');
    }

    #summerBG {
        background-image: url('images/summer_tablet_BG.jpg');
    }

    #fallBG {
        background-image: url('images/fall_tablet_BG.jpg');
    }

    #winterBG {
        background-image: url('images/winter_tablet_BG.jpg');
    }

}

@media screen and (max-width:700px) {

}

@media screen and (max-width:650px) {
    
    /* Phone: */
    #phoneContainer {
        right: 5px;
    }  

}

@media screen and (max-width:600px) {   
    
    /* Main Screen: */
    #windowContainer {
        background-image: url('images/home_page_window_400.png');
        background-size: 120% 95%;  
        background-position: 100% -50%
    }

    /* Laptop: */ 
    #laptopContainerMain {
        width: 300px;
        height: 198px;
    }

    #laptopContainer {
        bottom: -62px;
        transform: translateX(-50%) scale(0.55);
    }

}

@media screen and (max-width:550px) {

}

@media screen and (max-width:500px) {

    /* Mug: */  /* Phone: */
    #mug,  #phoneContainer {
        display: none;
    }

    .rustButtons {
        display: inline-block;
    }

}

@media screen and (max-width:450px) { 

    #rustButtonLeft {
        left: 12%;
    }

    #rustButtonRight {
        right: 12%;
    }
    
}

@media screen and (max-width:400px) {
    
    /* Main Screen: */ 
    #windowContainer {
        background-image: url('images/home_page_window_400.png');
        background-size: 140% 95%;;
    }

}

@media screen and (max-width:350px) {

}