/* search google for (ex. background-size) cross browser support */


/* Big tablet to 1200px (widths smaller that the 1140px row) */
@media only screen and (max-width: 1200px) {
    
    .form {
        width: 90%;
        height: auto;
    }
}


/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
    
    body {
        font-size: 18px;
    }
    
    section {
        padding: 60px 0; 
    }
    
    .contact-form { 
        width: 80%;
        height: auto;
    }
    
    .section-desenhos {
        height: auto;
    }
    
    .author-text {
        text-align: center;
    }
    
    header {
        background-image: linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -o-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        
        background-size: cover;
        background-size: -moz-cover;
        background-size: -o-cover;
        background-size: -webkit-cover;
    
        background-position: center;
        background-position: -moz-center;
        background-position: -o-center;
        background-position: -webkit-center;
        
        background-attachment: fixed;
        background-attachment: -moz-fixed;
        background-attachment: -o-fixed;
        background-attachment: -webkit-fixed;
        
        height: 100vh;
        height: -moz-100vh;
        height: -o-100vh;
        height: -webkit-100vh;
        
        width: 100%;
        width: -moz-100%;
        width: -o-100%;
        width: -webkit--100%;
    }
}


/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
    
    .contact-form { 
        width: 83%;
        height: auto;
    }
    
    .input[type=submit] {
        width: 80%;
    }
    
    .produtos {
        height: auto;
        width: auto;
    }
    
    .joseph-text-box {
        font-size: 90%;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5; 
        margin: 0; 
    }
    
    .author-text {
        text-align: center;
    }
    
    header {
        background-image: linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -o-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        
        background-size: cover;
        background-size: -moz-cover;
        background-size: -o-cover;
        background-size: -webkit-cover;
    
        background-position: center;
        background-position: -moz-center;
        background-position: -o-center;
        background-position: -webkit-center;
        
        background-attachment: fixed;
        background-attachment: -moz-fixed;
        background-attachment: -o-fixed;
        background-attachment: -webkit-fixed;
        
        height: 100vh;
        height: -moz-100vh;
        height: -o-100vh;
        height: -webkit-100vh;
        
        width: 100%;
        width: -moz-100%;
        width: -o-100%;
        width: -webkit--100%;
    }
}
    


/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    
    section {
        padding: 25px 0;
    }
    
    .contact-form { 
        width: 83%; 
        height: auto;
    }
    
    .input[type=submit] {
        width: 80%;
    }
    
    .produtos {
        height: auto;
        width: auto;
    }
    
    .iluria {
        width: 250px;
        height: 250px;
    }
    
    .joseph-text-box {
        font-size: 85%;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.5; 
        margin: 0; 
    }
    
    .author-text {
        text-align: center;
    }
    
    header {
        background-image: linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -o-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0)), url("imgs/joseph_min.jpg");
        
        background-size: cover;
        background-size: -moz-cover;
        background-size: -o-cover;
        background-size: -webkit-cover;
    
        background-position: center;
        background-position: -moz-center;
        background-position: -o-center;
        background-position: -webkit-center;
        
        background-attachment: fixed;
        background-attachment: -moz-fixed;
        background-attachment: -o-fixed;
        background-attachment: -webkit-fixed;
        
        height: 100vh;
        height: -moz-100vh;
        height: -o-100vh;
        height: -webkit-100vh;
        
        width: 100%;
        width: -moz-100%;
        width: -o-100%;
        width: -webkit--100%;
    }
}