/* Big tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1400px) 
{
    .row {padding: 0 5%;}
    .short-copy {width: 100%;}
}

/* Small tablet to big tablet: from 768 to 1023px */
@media only screen and (max-width: 1050px) 
{  
    .row {padding: 0 5%; }
     body {font-size: 100%;}
    .col {width: 100%; margin: 0 0 5% 0;}
    .text {font-size: 500%;}
    
    .overlay {width: 100%; height: 100%; }
    .overlay { visibility: hidden}
    .overlay_visible {width: 100%; height: 100%;}
    
    .img {width: 100%;}
    .short-copy {width: 100%;}
}



/* Small phones to small tablets: from 481-767px */
@media only screen and (max-width: 767px) 
{
    .header {height: 18vh;}
     body {font-size: 100%;}
    .col {width: 100%; margin: 0 0 5% 0;}
    .row {padding: 0 10%; }

    .text {font-size: 200%;}

    .overlay { visibility: hidden}
    .overlay_visible {width: 100%; height: 100%;}
    
    .img {width: 100%;}
    .short-copy {width: 100%;}

}



/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) 
    
{   .header {height: 18vh;}
     body {font-size: 100%;}
    .col {width: 100%; margin: 0 0 5% 0;}
    .row {padding: 0 10%;}
    .main-nav {display: none;}
    
    .text {font-size: 200%;}
    .footer-link {font-size: 250%;}


    .overlay { visibility: hidden}
    .overlay_visible {width: 100%; height: 100%;}
    .img {width: 100%;}


}