@media (max-width:990px) {
    h1.text-md-center:after {
        margin: 0 auto;
    }
}

@media (max-width:1024px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    p {
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3,
    #list-view h1,
    #grid-view h1 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5,
    .trail-section .trail-rating h2 {
        font-size: 1rem;
    }

    p {
        font-size: 0.95rem;
    }

    .sticky-c1,
    .sticky-c2 {
        margin: 1rem 0 1.5rem;
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1440px;
    }
}

/*
 * header navigation
 */
@media (min-width: 768px) {
    .navbar-brand img {
        height: 50px;
    }

    .nav-toolbar ul li {
        display: inline-block;
        margin: 0 1rem;
    }

    .nav-toolbar ul.fontsize-list li,
    .nav-toolbar ul.language-list li {
        margin: 0 0.2rem 0 0;
        padding: 0;
        border: 0;
        width: auto;
        height: auto;
        line-height: inherit;
    }

    .nav-toolbar ul.language-list li:hover,
    .nav-toolbar ul.fontsize-list li:hover {
        background: none;
        background-color: transparent;
    }

    .nav-toolbar ul.language-list li:after {
        content: "|";
        display: inline-block;
        margin-left: 0.4rem;
        color: #fff;
    }
}

@media (max-width: 992px) {
    #hero-banner .carousel-item {
        height: 40vh;
        min-height: 250px;
    }
}


@media (max-width: 1024px) {
    .weather span{
        margin-top: -2px;
    }
}
@media (max-width: 768px) {
    .navbar>.container, .navbar>.container-fluid{
            align-items: baseline;
    }
    .caption h2 {
        font-size: 1rem;
    }

    h3.f-sm-1dot25,
    #grid-view h1 {
        font-size: 0.75rem;
    }

    #grid-view p.region {
        font-size: 0.75rem;
    }

    .navbar {
        padding: .5rem 0rem;

    }

    .navbar-brand {
        margin-right: 0;
    }

    .hiking-logo {
        width: 100px;
        height: 37px;
    }


    #return-to-top {
        right: 18px;
        width: 31px;
        height: 31px;
    }
    .pull-right{
/*        width: 41%;*/
    }
    .pull-right .navbar-options{
        text-align: right;
    }
    .weather p, #weather_temp_m{
        font-size: 0.8rem;
        margin-bottom: 3px;

    }
    .weather span{
        margin-top: 0px;
        font-size: 0.8rem;
    }
    .weather .humidity:before{
        top: 2px;
    }
    
}

@media (max-width: 480px) {
    h3.f-sm-1dot25 {
        font-size: 1.1rem;
    }

    #list-view h1,
    #grid-view h1 {
        font-size: 0.75rem;
    }
}


/*
 * about section
 */
@media (min-width: 768px) {
    .personal-clothing-img {
        width: 75%;
        padding-bottom: 75%;
    }

    .personal-clothing-table .col-md-3:after {
        display: block;
    }

    .personal-clothing-table .row:after {
        display: none;
    }

    .personal-clothing-table .col-md-3,
    .personal-clothing-table .col-md-9 {
        padding: 1rem;
    }

    .personal-clothing-table .col-md-9 h3 {
        text-align: left;
        padding: 0;
    }
}

@media (min-width: 992px) {
    .intro .intro-img {
        width: 75%;
        float: right;
    }

    .intro .intro-text {
        left: 0;
        width: 60%;
        margin-top: 3rem;
        position: absolute;
    }


}


@media (min-width: 1200px) {
    .intro .intro-text {
        width: 45%;
    }

    .personal-clothing-img {
        width: 35%;
        padding-bottom: 35%;
    }
}

@media (max-width: 1200px) {

    #whatishiking .sticky-c1,
    #whatishiking .sticky-c2 {
        margin: 0;
    }

}

@media (max-width: 480px) {

    .sticky-c1,
    .sticky-c2 {
        padding: 0;
    }

    .video-section .sticky-c1,
    .video-section .sticky-c2 {
        padding: 1rem;
    }

    .video-section h1 {
        margin-bottom: 0rem;
    }
}

/*
 * feature section
 */
@media (min-width: 992px) {
    .feature-section .featured-text {
        padding: 0 0 0 2rem;
        border-left: .5rem solid #164418;
    }
}

/*
 * promotion section
 */
@media (min-width:992px) {
    .promotion-section .promotion-text {
        padding: 5rem
    }

    .promotion-section .promotion-text hr {
        border-color: #164418;
        border-width: .25rem;
        width: 30%
    }
}

@media (max-width: 1199px) {
    #promote-map a h2 {
        font-size: 1.5rem;
    }
}

/*
 * trail section
 */
@media (min-width: 992px) {
    .ratingstar {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .sub-criterion {
        width: 10rem;
    }
}

@media (min-width: 500px) {

    .transport-table .col-sm-4,
    .transport-table .col-sm-8 {
        padding: 1rem;
    }
}

@media (max-width:1200px) {
    .rating-icon.bg {
        padding: 1rem;
    }

    .floating-scrollspy {
        top: 60%;
    }
}

@media (max-width:991px) {
    .rating-icon.bg {
        padding: 1.2rem;
    }

    .grid-sizer,
    .grid-item.ratio4-3 {
        width: 50%;
        padding-bottom: 37.5%;
    }

    .grid-item {
        width: 50%;
    }

    #promote-map a h2 {
        font-size: 0.8rem;
    }

    #map {
        max-height: 38rem;
        height: 58vh !important;
    }
}

@media (max-width:768px) {
    .keyword-wrapper {
        width: calc(100% - 115px);
    }

    .rating-icon.bg {
        padding: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    #whatishiking table tbody th {
        background-color: #607134;
    }

    #whatishiking table tbody td > div {
        margin-left: 40%
    }

    #whatishiking table thead th:not(:first-child) {
        display: none;
    }

    #whatishiking table td,
    #whatishiking table th {
        display: block;
        clear: both;
    }

    #whatishiking table td[data-th]:before {
        content: attr(data-th);
        float: left;
        display: block;
        width: 40%;
    }
}

/*
 * others section
 */
/*
 @media (min-width:992px) {
    .others-section { padding: 5rem 0; }
    .others-list img { margin:1rem; }
 }
*/
@media (max-width: 991px) {
    #trail-review .sticky-c2 {
        padding: 2rem 0;
    }

    #map-modal h2 {
        font-size: 1rem;
    }

}

@media (max-width:480px) {
    .others-list img {
        width: 50px;
        margin: 0.6rem;
        height: auto;
    }


    .trail-list .summary,
    .trail-list .view-more,
    #grid-view .view-more {
        font-size: 0.75rem;
    }
}

/*
 * search section
 */
@media (max-width:768px) {
    .trail-section #list-view .mh-300 {
        min-height: 0px;
        padding-bottom: 100%;
    }

    .review:last-child:after,
    .result-link:last-child:after {
        display: none
    }
}


/*
 * footer
 */
@media (max-width: 768px) {
    .credits {
        text-align: center
    }

    .social-area {
        justify-content: center;
        padding: 0;
    }
}




/*
  * element styles
  */
@media (max-width:990px) {

    .sticky-c1,
    .sticky-c2 {
        margin: 0.5rem 0;
        padding: 2rem;
    }

    .header-no {
        font-size: 150%;
        margin-right: 1rem;
    }
}

@media (max-width:480px) {

    .sticky-c1,
    .sticky-c2 {
        padding: 1rem;
    }

    .icon-skills {
        width: 2.5rem;
        padding-bottom: 2.5rem;
        left: 1rem;
    }
}


@media (min-width:1100px) {

    #fatal-detail .fatal_map_pin {
        width: 40px;
        height: 40px;
    }
}

@media (min-width:1300px) {

    #fatal-detail .fatal_map_pin {
        width: 45px;
        height: 45px;
    }
}

@media (min-width:1500px) {

    #fatal-detail .fatal_map_pin {
        width: 50px;
        height: 50px;
    }
}