.clear-float{
    clear: both;
}

body{
    padding:0px;
    margin:0px;
    color: #575757;
}

.ref-container{
    width:100%;
    background-color: #f9f5f2;
}

/* top-top */
.ref-container .top-top{
    width:90%;
    margin:auto;
    
}
.ref-container .top-top .left{
    position: relative;
}

.ref-container .top-top .right{
    float: right;
    width:50%;
    position: relative;
}

.ref-container .top-top .right .information{
    margin: auto;
    position: absolute;
    right:0px;
    top:20px;
    width:100%;
}

.ref-container .top-top .right .information > p{
    display: inline-block;
    font-size:20px;
    position: absolute;
    right:75%;
    top:2px;
}

.ref-container .top-top .right .information > input{
    padding:8px;
    border:none;
    width: 35%;
    position: absolute;
    right:37%;
}

.ref-container .top-top .right .information > input:last-child{
    padding:8px;
    border:none;
    width: 35%;
    position: absolute;
    right:0;
}

.ref-container .top-top .left{
    float: left;
    width:50%;
}
@font-face{
    src:url(../font/calibril.ttf);
    font-family: CALIBRIL;
}
.ref-container .top-top .left > h4{
    font-size: 24px;
    margin:0px;
    padding:25px 0;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    font-family: CALIBRIL; 
}

.ref-container .top-top .left > h4 > a{
    color: #de5c51;
    text-decoration: none;
    border-bottom: 2px solid #de5c51;
}

.ref-container .top-top .left > h4 > a >i{
    margin-right:10px;
    font-size: 18px;
    transform: matrix(1,0,0,1,0,0);
    transition-duration: 1s;
}

/* filter-list */
.ref-container .wrap-filter{
    width:100%;
    background-color: #de5c51;
    margin-top:10px;
    
}
.ref-container .wrap-filter .filter-list{
    width:90%;
    position: relative;
    margin:auto;
    height: 0px;
    opacity: 0;
    transition-property: height opacity;
    transition-duration: 1s;
}

.ref-container .filter-list .three-row{
    display:inline-block;
    margin-right:15%;
    padding-left:0px;
    list-style-type: none;
    margin-top:30px;
    margin-bottom: 60px;
}

.ref-container .filter-list .three-row li{
    padding: 5px 0;
}

.ref-container .filter-list .three-row li a{
    color:#ffffff;
    font-size:18px;
    border-bottom: 1px solid;
    padding-bottom:2px;
    text-decoration: none;
}

.ref-container .filter-list .three-row li a:hover{
    color:black;
    transition-property: color;
    transition-duration: 300ms;
}

.ref-container .filter-list .three-row li a::before{
    content: "- ";
}

.ref-container .filter-list .icon-icon{
    display: inline-block;
    position: absolute;
    top:30px;
    color:black;
    font-weight: 800;
    cursor: pointer;
}
.icon-filter{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -12px;
    font-size: 24px !important;
}

.ref-container .filter-list .icon-icon >i{
    font-weight: 700;
    margin-right:5px;
}


/* post-content */
.ref-container .post-content{
    width:90%;
    margin:auto;
}

.post-content .post-post{
    width:100%;
    margin: 15px 0;

    padding:25px 0;
}

.post-content .post-post:first-child{
    border: none;
}

.post-content .post-post >div{
    width:100%;
}

.post-content .post-post .thumbnail{
    max-height: 705px;
}

.post-content .post-post:hover .thumbnail{
    background-color: #000000;
    transition-property: background-color;
    transition-duration: 500ms;
}

.post-content .post-post .thumbnail > a{
    margin: 0;
    padding: 0;
}

.post-content .post-post .thumbnail img{
    width:100%;
    max-height: 705px;
}

.post-content .post-post:hover .thumbnail > a > img{
    opacity: 0.3;
    transition-property: opacity;
    transition-duration: 500ms;
}

.post-content .post-post .row-description{
    margin-top:20px;
    position: relative;
}

.post-content .post-post .row-description .left{
    float: left;
    width:47%;
}

.post-content .post-post .row-description .left >h3{
    font-weight: 300;
    color: #000000;
    font-size: 22px;
    line-height: 1.4;
}

.post-content .post-post .row-description .right{
    float: right;
    width:47%;
}

.post-content .post-post .row-description .right > p{
    color:  #7f7f7f;
    font-size: 20px;
    line-height: 1.4;
}

.post-content .post-post .row-description .right > a{
    color:#de5c51;
    
}

.post-content .post-post .row-description .right > a:hover{
    color: #575757;
    
}

.post-content .post-post .row-description .right > a >i{
    font-size: 18px;
    margin-right:10px;
    margin-top:30px;
    margin-bottom: 70px;
}

/* post-related */
.post-related{
    width:90%;
    margin:auto;

}

.post-related .post-post{
    width:31%;
    margin: 15px 0;
    padding:25px 0;
    display: inline-table;
    margin: 1%;
}

.post-related .post-post .thumbnail img{
    width:100%;
    height:300px;
    /* height: auto; */
    object-fit: cover;
}

.post-related .post-post:hover .thumbnail{
    background-color: #1b1818;
    transition-property: background-color;
    transition-duration: 500ms;
}
.row-description h4{
    padding-left: 10px;
}
.post-related .post-post:hover .thumbnail .row-description h4{
    transition: all 0.5s;
    color: white;
}

.post-related .post-post .row-description h3{
    font-size:20px;
}

.post-related .post-post:hover .thumbnail > a > img{
    opacity: 0.6;
    transition-property: opacity;
    transition-duration: 500ms;
  
}

#load-more{
    text-align: center;
    padding-top:15px;
    padding-bottom:15px;
    color:#de5c51;
    font-size: 24px;
    transition-property: color background-color;
    transition-duration: 600ms;
    cursor: pointer;
    margin-bottom:30px;
}

#load-more:hover{
    background-color: #de5c51;
    color:#fcfcfc;
    transition-property: color background-color;
    transition-duration: 600ms;
}

/* RESPONSIVE */

@media screen and (max-width:1024px){
    
    .ref-container .top-top{
        width:95%;
        margin:auto;
    }

    .ref-container .top-top .right .information{
        position: absolute;
        right: 0px;
        top: 20px;
        width: 100%;
    }

    .ref-container .top-top .right input{
        
        border:none;
        width: 35%;
    }

    .ref-container .top-top .right .information > p{
        display: inline-block;
        font-size:18px;
        margin-right:10px;
    }

    .ref-container .top-top .left > h4{
        font-size: 20px;
        margin:0px;
        padding:20px 0;
        padding-left: 30px;
    }

    /* filter-open */
    .ref-container .filter-list .icon-icon{
        display: none;
    }

    .ref-container .post-content{
        width:95%;
        margin:auto;
    }

    .ref-container .wrap-filter .filter-list{
        width:90%;
    }

    /* post-related*/
    .post-related{
        width:95%;
        margin:auto;
    }

    .post-related .post-post{
        width:45%;
        margin: 15px 0;
        padding:25px 0;
        display: inline-table;
        margin: 2%;
    }
}


@media screen and (max-width:768px){
    .ref-container .top-top .right input{
        padding:5px;
        border:none;
        width: 35%;
    }

    .ref-container .wrap-filter .filter-list{
        width:90%;
    }

    /* post-content */
    .ref-container .post-content{
        width:100%;
        margin:auto;
    }

    .post-content .post-post .row-description{
        width:95%;
        margin:auto;
        margin-top:20px;
    }
}



@media screen and (max-width:600px){

    /* top-top */

    .ref-container .top-top .right .information > p{
        display: none;
    }

    .ref-container .top-top .left{
        float: left;
        width:100%;
    }

    .ref-container .top-top .left > h4{
        font-size: 18px;
        margin:0px;
        padding:20px 0;
        padding-left: 30px;
        margin-top:5px;
    }

    .ref-container .top-top .right .information > input{
        padding:8px;
        border:none;
        width: 45%;
        position: absolute;
        right:47%;
    }
    
    .ref-container .top-top .right .information > input:last-child{
        padding:8px;
        border:none;
        width: 45%;
        position: absolute;
        right:0;
    }

    /* filter-list */
    .ref-container .wrap-filter{
        overflow-y: scroll;   
    }

    .ref-container .wrap-filter .filter-list{
        width:90%;
    }

    .ref-container .filter-list .three-row{
        display:block;
        padding:0;
        margin:0;
    }

    /* post-content */
    .post-content .post-post .row-description .left{
        float: left;
        width:100%;
    }

    .post-content .post-post .row-description .left >h3{
        font-weight: 300;
        color: #000000;
        font-size: 18px;
        line-height: 1.4;
    }

    .post-content .post-post .row-description .right{
        float: right;
        width:100%;
    }

    .post-content .post-post .row-description .right > p{
        color:  #7f7f7f;
        font-size: 16px;
        line-height: 1.4;
    }


    /* post-related */

    .post-related .post-post{
        width:100%;
        margin: 15px 0;
        padding:25px 0;
        display: inline-table;
        margin: 1%;
    }
    
}