@media only screen and (max-width : 900px) {
    
    .box-container {flex-direction: column;}
    .white-box {width: 70%; height: 150px; margin-bottom: 20px;}
    .text-box {width: 70%;}
    footer {height: 1100px;}
    .form-columns {flex-direction: column; justify-content: center;}
    .form-col {width: 100%; justify-content: center; align-items: center;}
    .footer-text-color{text-align: center; margin-top: 20px;}
    
}

@media only screen and (max-width : 600px) {
    
    .logo-left{border-top: 180px solid white; border-right: 180px solid transparent;}
    .logo-inside{width: 100px; height: 67px; margin: 10px 0 0 10px; background-image: url(../images/suitehome-logo-mobile.png);}
    
}

@media only screen and (max-width : 500px) {
    
    .white-box {width: 85%; height: 150px; margin-bottom: 20px;}
    h1 {font-size: 1.8em; width: 80%;}
    h2 {font-size: 2.5em; font-weight: bolder;} 
    
}

@media only screen and (max-width : 400px) {
    
    .white-box {width: 70%; height: 200px; margin-bottom: 20px;}
    h3 {font-size: .8em; width: 90%; margin: 0 auto;}   
    
}

/* ---- DEVICES ---- */


@media only screen and (max-device-width : 900px) {
    
    .box-container {flex-direction: column;}
    .white-box {width: 70%; height: 150px; margin-bottom: 20px;}
    .text-box {width: 70%;}
    footer {height: 1100px;}
    .form-columns {flex-direction: column; justify-content: center;}
    .form-col {width: 100%; justify-content: center; align-items: center;}
    .footer-text-color{text-align: center; margin-top: 20px;}  
    
}

@media only screen and (max-device-width : 600px) {
    
    .logo-left{border-top: 180px solid white; border-right: 180px solid transparent;}
    .logo-inside{width: 100px; height: 67px; margin: 10px 0 0 10px; background-image: url(../images/suitehome-logo-mobile.png);}
    
}

@media only screen and (max-device-width : 500px) {
    
    .white-box {width: 85%; height: 150px; margin-bottom: 20px;}
    h1 {font-size: 1.8em; width: 80%;}
    h2 {font-size: 2.5em; font-weight: bolder;}
    
}

@media only screen and (max-device-width : 400px) {
    
    .white-box {width: 70%; height: 200px; margin-bottom: 20px;}
    h3 {font-size: .8em; width: 90%; margin: 0 auto;}
    
}

/* ---- MENU RESPONSIVENESS --- */