/* responsive here */

/* mobile version */
@media screen and (max-width: 767px){
    /* content */
    .contentWrap .grid.begin > .grid.left,
    .contentWrap .grid.begin > .grid.right{
        width: 100%;
        margin: 0 auto 20px auto;
    }


    .contentWrap .grid .title{
        font-size: 20px !important;
    }
    .contentWrap .grid .description{
        font-size: 16px !important;
        margin-bottom: 12px;
    }
    .contentWrap .grid.journey .description,
    .contentWrap .grid.video .description{
        width: 100%;
    }
    .contentWrap .grid.journey .description,
    .contentWrap .grid.video .description{
        margin: 20px auto;
    }


    .contentWrap .grid.timeline .wrap{
        margin-top: 60px;
    }
    .contentWrap .grid.timeline .thumbnailWrap{
        width: 60%;
        margin: 0 20% 40px 20%;
    }
    .contentWrap .grid.timeline .textWrap{
        width: 92%;
        margin-left: 8%;
    }
    .contentWrap .grid.journey .description,
    .contentWrap .grid.video .description{
        text-align: left;
    }
    .share-btn.visible-xs{
        display: none !important;
    }

    .scrollbar ul.scrollbarUL li.scrollbarList .text,
    .scrollbar ul.scrollbarUL li.scrollbarList .arrowRight{
        line-height: 28px;
    }
}

/* tablet version is belong the desktop version */
@media screen and (min-width: 767px) and (max-width: 1024px){
   .contentWrap .grid.begin img{
        width: 100%;
   }
}
@media screen and (max-width: 1024px){
    /** headings **/
    .header .wordings{
        display: none;
    }
    .wt-wrapper .mainTitle{
        margin-bottom: 10px;
    }


    /** share button **/
    .share-btn.hidden-xs{
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
    }
    .share-btn.hidden-xs img{
        margin: 0 4px;
    }


    /** scrollbar **/
    .scrollbarWrap{
        width: 100%;
    }
    .scrollbarWrap,
    .scrollbarWrap .scrollbar,
    .scrollbar ul.scrollbarUL,
    .scrollbar ul.scrollbarUL li.scrollbarList,
    .scrollbar ul.scrollbarUL li.scrollbarList > a{
        height: 26px;
    }
    .scrollbar ul.scrollbarUL li.scrollbarList .text{
        font-weight: 300;
    }
    .scrollbar ul.scrollbarUL li.scrollbarList .text, .scrollbar ul.scrollbarUL li.scrollbarList .arrowRight{
        line-height: 26px;
    }
    .scrollbar ul.scrollbarUL li.scrollbarList .arrowRight{
        padding-right: 6px;
        margin-top: 0;
        /*margin-top: -4px;*/
    }
    .scrollbar ul.scrollbarUL li.scrollbarList .text{
        padding: 0 6px;
    }
    



    /** content **/
    .contentWrap .content{
        width: 98%;
        margin-top: 20px;
    }
    .contentWrap .grid{
        margin-bottom: 20px;
    }
    .contentWrap .grid.begin{
        margin-bottom: 0;
    }
}


/* desktop version */
@media screen and (min-width: 1025px){

}