/********************** Typo ************************* *
 *  1. Small (tablet portrait) > 640px
 *  2. Medium (tablet landscape) > 960px
 *  3. Large (laptop) > 1200px
 *  4. XLarge (desktop) > 1400px
 *  5. XXLarge (desktop) > 1600px
*****************************************************/


/******** 1. Small (tablet portrait) < 959px ********/

@media only screen and (max-width: 959px) {
    .stack-cards__item .uk-grid + .uk-grid-large {
        margin-top: 25px;
    }
    .hero-images-small {
        position: relative;
        height: 600px;
    }
    .hero-image1 {
        top: 14px;
        left: -81px;
    }
    .hero-image2 {
        top: -33px;
        left: 14%;
    }
    .hero-image3 {
        top: -50px;
        left: 46%;
    }
}

/******** 1. Small (tablet portrait) < 639px ********/

@media only screen and (max-width: 639px) {
    html {
        font-size: 16px;
    }
    .stack-cards__item .uk-grid-large > .uk-grid-margin {
        margin-top: 25px;
    }
    .stack-cards__item h2 {
        font-size: 20px;
    }
    .cta-block-content {
        padding: 30px 0;
    }
    .cta-block-content-inner {
        padding: 30px;
    }
}
/******** 1. Small (tablet portrait) < 639px ********/

@media only screen and (max-width: 439px) {
    .hero-images-small {
        height: 360px;
    }
    .hero-image2 {
        left: 4%;
    }
    .hero-image3 {
        left: 38%;
    }
    .hero-images-small {
        height: 420px;
    }
}

/******** 1. Small (tablet portrait) > 640px ********/

@media only screen and (min-width: 640px) {
    .uk-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    footer {
        padding: 100px 0 50px;
    }
    h1, .uk-h1 {
        font-size: 54px;
    }
    h2, .uk-h2 {
        font-size: 30px;
    }
    /* .uk-input,
    .uk-textarea,
    .uk-select,
    .uk-select:not([multiple]):not([size]) {
        font-size: 20px;
    } */
    .stack-cards {
        --stack-cards-gap: 60px;
    }
    .stack-cards__item {
        height: 0;
        padding-bottom: 60%;
    }
    .stack-cards__item > * {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px 30px 30px;
    }
    .stack-cards__item h2 {
        font-size: 26px;
    }
    .uk-form-label {
        font-size: 18px;
    }
    .content-block p {
        font-size: 32px;
    }
    .uk-modal-body {
        padding: 30px 40px 40px;
    }
    .tile-wrap {
        padding: 40px 60px;
    }
    .uk-text-small {
        font-size: 16px;
    }
    .main-grid:nth-child(2) .main-grid-child {
        order: -1;
    }
    .article-content p:not(.blockquote),
    .article-content li {
        font-size: 18px;
    }
    .team-modal p {
        font-size: 18px;
    }
    #hero {
        padding: 100px 0;
    }
    .stats-checkbox.stats-large {
        height: 140px;
        width: 140px;
    }
    
}
/******* 2. Medium (tablet landscape) > 960px *******/

@media only screen and (min-width: 720px) {
    .stack-cards__item {
        padding-bottom: 50%;
    }
}

/******* 2. Medium (tablet landscape) > 960px *******/

@media only screen and (min-width: 960px) {
    .uk-navbar-right,
    .uk-navbar-nav {
        gap: 20px;
    }
    .stack-cards__item > * {
        padding: 30px;
    }
    .stack-cards {
        --stack-cards-gap: 80px;
    }
    .stack-cards__item {
        padding-bottom: 40%;
    }
    .stack-cards__item h2 {
        font-size: 32px;
    }
    .tile-box:last-of-type {
        margin-bottom: 0;
    }
    .stats-box {
        margin-top: -150px;
    }
    .stats-card {
        height: 300px;
        margin-right: 19%;
    }
}

/************ 3. Large (laptop) > 1200px ************/

@media only screen and (min-width: 1200px) {
    .uk-grid + .uk-grid-large {
        margin-top: 40px;
    }
}

/*********** 4. XLarge (desktop) > 1400px ***********/

@media only screen and (min-width: 1400px) {}

/*********** 5. XXLarge (desktop) > 1600px ***********/

@media only screen and (min-width: 1600px) {}