/* first breakpoint is (full width of current .inner-wrapper - 1px) + (new padding *2) */
@media only screen and (max-width : 1289px) {
    .inner-wrapper {
        width: 100%; padding: 0 20px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    header .logo { width: 890px; }
    header .logo div { margin-left: 40px; }
    header h1 { font-size: 6rem; }
    header p { font-size: 7rem; }

}



@media only screen and (max-width : 1024px) {
    .slider_inner .slick-slide img { width: auto; height: 430px; /* slider has fixed height - images are left aligned and crop right */ }
    .slider_inner .slick-slide img { position: relative; left: 20%; transform: translate(-20%, 0); -webkit-transform: translate(-20%, 0); -moz-transform: translate(-20%, 0); -ms-transform: translate(-20%, 0);  }
    .slider_inner .slick-slide { overflow: hidden; } /* also reqd. for centering images */
    p { font-size: 2.5rem; }
    .col-wrapper .col div p { font-size: 1.8rem; }
    header .logo { width: 750px; }
    header .logo div { margin-left: 40px; }
    header h1 { font-size: 4.5rem; }
    header p { font-size: 5.5rem; }
    h3 { font-size: 3rem; }
}



@media only screen and (max-width : 767px) {
    p { font-size: 2.25rem; }
    .col-wrapper .col div p { font-size: 1.6rem; }
    header .logo { width: 630px; }
    header .logo div { margin-left: 20px; }
    header h1 { font-size: 4rem; }
    header p { font-size: 5rem; }
    section h2 { margin-bottom: 40px; }
    h3 { font-size: 2.6rem; }
    .col-wrapper .col { padding-left: 15px; padding-right: 15px; }
    #submit-contact { font-size: 2rem; }
}



@media only screen and (max-width : 650px) {
    .slick-slide .caption h2, .slick-slide .caption p, .inner-wrapper, header nav.sections ul { padding: 0 10px; }
    p { font-size: 2rem; }
    .col-wrapper .col div p { font-size: 1.5rem; }
    header .inner-wrapper { padding: 20px 0; }
    header .logo { width: 480px; }
    header .logo div { margin-left: 0; }
    header h1 { font-size: 2.75rem; }
    header p { font-size: 3.5rem; }
    header h1, header p { letter-spacing: normal; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2.2rem; }
}



@media only screen and (max-width : 549px) {
    .slider_inner .slick-slide img { height: 225px; }
    header .logo { width: 300px; }
    header .logo div { margin-left: 0; padding: 5px 0 5px 95px; }
    header h1,
    header p { font-size: 2.2rem; margin-left: -30px; }
    h1 { padding-top: 5px; }
    h2 { font-size: 1.9rem; }
    section h2 { margin-bottom: 30px; font-size: 2.5rem; }
    h2 span { padding-left: 10px; }
    h3 { font-size: 2rem; }
    p { font-size: 1.7rem; }
    section:not(.slider) { padding-top: 20px; padding-bottom: 30px; }
    footer { padding: 15px 0; height: 120px; }
    footer p { font-size: 1.4rem; }
    
    .col-wrapper .col { width: 100%; padding-bottom: 0; margin-bottom: 50px; }
    .col-wrapper .col:last-child { margin-bottom: 0; }
    .col-wrapper .col div p { min-height: 0; text-align: center; }
    #why .col-wrapper .col:nth-child(1n) .icon { height: 60px; top: -80px; }

}