.site {
    overflow: hidden;
}

.timeline_pg_content {
    display: flex;
}



.filter_container {

    /*margin-top: -38px;*/
    /*padding-top: 38px;*/
}




.timeline_list li {
    list-style-type: none;
    display: flex;
}

.timeline_list li.must-know p{
    color: #eb6e6e;
}

.timeline_list span{
    display: block;
    /*width: 100px;*/
    height: 100px;
    font-size: 30px;
    font-weight: 600;
    color: #cdcdcd;
    float: left;
    margin: 0 20px 0 0;
}

.timeline_list p{
    display: block;
    color: #191919;
    font-size: 18px;
    margin: auto;
    text-align: left;
    width: 100%;
}

.filter_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #f9f9f9;
}

.filter_title {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    display: block;
    width: 100%;
    font-family: "Nunito Sans", sans-serif;
    color: #191919;
    margin: 40px 0 25px 20px;
}

.filter_list {
    list-style-type: none;
    /*background: #f5f5f5;*/
    width: 100%;
    padding: 0px 0 20px 20px ;
}

.filter_list li {
    padding: 15px 0;
    font-weight: 300;
    font-size: 16px;
    color: #8c9597;
    position: relative;
    cursor: pointer;
}


.filter_list li:hover {
    color: #0e649b;
}

/*.filter_list li:hover:before {*/
/*position: absolute;*/
/*content: '';*/
/*display: block;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
/*right: calc(100% + 10px);*/
/*width: 20px;*/
/*height: 4px;*/
/*background: #0f5fa3;*/
/*}*/



/*
photo day
*/
.photo-day-page-wr{
    margin:30px 0;
}
.timeline_list .photo-day-text{
    padding-left:30px;
    width:37%;
    margin: 0px;
    font-size:16px;
}
.photo-day-wrapper-lnk{
    display: block;
    width: 63%;
}
.photo-day-wrapper-lnk img{
    width:100%;
    display: block;
}
.timeline_list .timeline_time-photo-day{
    height: auto;
    font-size:16px;
    float: none;
    margin: 0;
    margin-bottom: 15px;
    width:100%;
}





@media (max-width: 1200px) {
    .timeline_list span{
        font-size: 25px;
        font-weight: 600;
        margin: 0 20px 0 0;
    }
    .timeline_list p{
        font-size: 16px;
    }
    .filter_list li {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    .timeline_pg_content {
        display: flex;
        flex-wrap: wrap;
    }
    .filter_container {
        width: 100%;
        flex-direction: row;
        /*margin: 0px -140px 0 -140px;*/
        /*width: calc(100% + 280px);*/
        /*padding: 20px 0 5px 140px;*/
        padding: 20px 0 5px 0px;
        overflow: visible;
        position: relative;
    }
    .filter_container:before {
        content: '';
        display: block;
        position: absolute;
        background: #f9f9f9;
        height: 100%;
        width: 200vw;
        height: 100%;
        top: 0;
        left: -100vw;
        z-index: 27;
    }
    .filter_title {
        width: auto;
        margin: 0 30px 0 0;
        z-index: 30;
    }
    .filter_list {
        flex-direction: row;
        display: flex;
        width: auto;
        padding: 0px;
        z-index: 30;
        overflow: auto;
    }
    .filter_list li{
        /*margin: 20px 20px 20px 20px;*/
        margin: 0px;
        padding: 0 20px;
        min-width: 120px;
    }
    .timeline_pg {
        display: flex;
        width: 100%;
    }
}


@media (max-width: 860px) {
   .timeline_list .photo-day-page-wr{
        display: block;
    }
    .photo-day-wrapper-lnk{
        display: block;
        margin-bottom:20px;
        width:100%;
    }
    .timeline_list .photo-day-text{
        padding-left:0px;
        width:100%;
    }
}



@media (max-width: 620px) {
    .timeline_list {
        padding: 0;
    }
    .timeline_list span {
        font-size: 18px;
    }
    .timeline_list p {
        font-size: 15px;
    }
}

@media (max-width: 560px) {
    .photo-day-wrapper{
        margin-top: -60px;
    }
}

@media (max-width: 400px) {
    .timeline_list p {
        font-size: 14px;
    }
}