
/* ONLY SMALL SCREENS */
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
    body {
        border-top-width: 0px;
    }

    header h1 {
        margin-top: 40px;
        /*margin-left: -35px;*/
    }

    header h1 a {
        width: 260px;
        height: 52px;
    }

    .lang-selector li {
        line-height: 2.125rem;
        padding: 0;
    }

    .top-slider {
        height: 180px;
    }

    .slider-caption {
    }

    .program,
    .program .scrollable {
        height: auto;
    }

    .scrollable {
        position: relative;
    }

    .itinerary-item img {
        margin-bottom: 10px;
    }
}


/* MEDIUM SCREENS AND UP */
/* min-width 641px, medium screens -> tablets and up) */
@media only screen and (min-width: 40.063em) {

    header {
        padding-top: 0;
    }

    .phones {
        margin-bottom: 0px;
        margin-top: 20px;
        font-size: 20px;
        line-height: 1.1;
    }

    .slider-caption span {
        font-size: 40px;
    }

    .nav {
        height: auto;
        padding: 0;
        position: relative;
        top: auto
    }

    .nav.fixed-nav {
        position: fixed;
        top: 0;
        height: 36px;
    }

    ul.left-menu.fix-top,
    ul.right-menu.fix-top {
        position: fixed;
        top: 50px;
        width:inherit;

    }

    ul.left-menu.fix-bottom,
    ul.right-menu.fix-bottom {
        position: absolute;
        bottom: 0;
        width: inherit;
    }

    .stars {

    }

    .scrollable {
            height: 236px;
    }

    .block-scrollable {
        height: 430px;
    }

    .filter-wrap {
        margin: 10px 0;
        line-height: normal;
        padding-bottom: 0;
        border-bottom: none;
        float: left;
    }

    select.filter-select {
        margin: 0 15px 0 5px;
        float: none;
    }

    .features {
        display: block;
    }

    .features li {
        width: 20%;
        min-width: inherit;
        float: left;
    }

    .duration {
        /*position: absolute;
        bottom: 0;*/
        margin-top: 10px
    }

.itinerary-item-desc {
    padding: 0 15px;
}
.pack-flags {
/*	float: right;*/
    margin-top: 5px;
}
}

/* LARGE SCREENS AND UP */
/* min-width 1024px, large screens -> desktop */
@media only screen and (min-width: 64em) {

    .phones {
    /*	font-size: 23px;*/
    }

    .nav-menu li a {
        padding: .5rem 1.25rem;
        letter-spacing: .5px;
    }

    .nav-menu ul li a {
        padding: .25rem 1.25rem;
    }

    .footer-nav ul li {
        font-size: 1rem;
    }

    .block-scrollable {
        height: 480px;
    }

    .pack .block-scrollable {
        height: 480px;
    }

    .price {
        padding: .1rem .75rem .15rem;
    }

    .price span {
        font-size: 1.5rem;
    }

    .price span.from {
        font-size: 1.25rem;
        margin-right: 7px;
    }

    .slider-caption {
        top:20%;
        left: 23%;
    }

    .attraction-item {
        height: 400px;
    }


}


/* XLarge screens */
@media only screen and (min-width: 90.063em) {

    .slider-caption {
        top:20%;
        left: 30%;
    }
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */


/* RETINA DISPLAY */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

}
