/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* media queries for mobile */

/* breakpoint 480px */

@media only screen and (max-width: 30em) {
    main {
        padding: 0 2rem;
    }
    /*header */
    header {
        font-size: 1.4rem;
        gap: 0;
        margin-bottom: 5rem;
    }

    #header--logo {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    }
    
    #main-nav--signup {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }

    #main-nav {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;

        text-align: center;
        border-bottom: 2px solid #f2f2f2;
    }


    #main-nav a {
        border-top: none;
        padding-bottom: 1.3rem;
        -ms-flex-preferred-size: 45%;
            flex-basis: 45%;
    }

    #main-nav a:first-child {
        border-bottom: 2px solid #0065FC;
        color:#0065FC;
        font-weight: 700;
    }

    /*search bar */
    #search-bar--icon-lens,
    #search-bar--icon {
        font-size: 1.6rem;
        line-height: 1.5;
        text-align: center;
    }

    #search-bar--icon-lens {
        display: inline;
        color: #fff;
        background-color: #0065FC;
        border-radius: 1.5rem;
        width: 5rem;
        height: 5rem;
        vertical-align: middle;

        -webkit-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;
    }

    #search-bar--icon-lens:hover {
        background-color:#FFCB00;
        color: #9053C1;
    }


    #search-bar--btn {
        display: none;
    }

    /* activities */
    #activities-section--activities-single-images-bigger {
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    }
}


/* breakpoint 448px */
@media only screen and (max-width: 28em) {
    main {
        padding: 0;
    }

    #search-bar--container {
        margin-left: 2rem;
    }

    h2 {
        line-height: 1;
    }

    h1, 
    #title--subtitle,
    #filters--container,
    #accomodations--numbers,
    #activities-section--activities-title
     {
        padding: 0 2.5rem;
    }

    #accomodations-cards--container #accomodations-cards--list, 
    #accomodations-cards--container #accomodations-cards--popular {
        padding: 2.5rem;
        gap: 2rem;
        border-radius: 0;
    }

    #accomodations-cards--list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }

    #accomodations-cards--container #accomodations-cards--list {
        background-color: #fff;
    }

    #accomodations-cards--container figure img:not(.accomodations-cards--popular-images) {
        height: 12rem;
    }

    #accomodations-cards--popular {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
    }

    #accomodations-cards--popular--title-container {
        padding-top: 2rem;
        width: 100%;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    #activities-section {
        padding: 2.5rem;
        gap: 2.5rem;
    }

    .activities-section--activities-double-images {
        gap: 2.5rem;
    }

    #activities-section--activities-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column wrap;
                flex-flow: column wrap;
    }

    #activities-section--activities-title {
        margin-bottom: 2.5rem;
        padding-left: 0;
    }

    #activities-section--activities-responsive-double {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    #activities-section--activities-container img {
        height: 13rem;
    }

    /* footer */
    #footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column wrap;
                flex-flow: column wrap;
    }
}