#page-menu { width: 1320px; margin: 70px auto 0; display: flex; justify-content: space-between; height: 68px; background: #EAEAEA; font-size: 18px; font-weight: bold; padding-right: 20px; box-sizing: border-box; }
    #page-menu > .items { display: flex; }
        #page-menu > .items > .i { width: 195px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: #707070; text-decoration: none; position: relative; text-align: center; }
            #page-menu > .items > .i.active { color: white; }
                #page-menu > .items > .i.active:after { content: ''; position: absolute; border: solid 10px transparent; border-top-color: #00BBDC; bottom: -20px; }
            #page-menu > .items > .i.news.active:after { border-top-color: #F05622 }
                    #page-menu > .search-w { display: flex; }
        #page-menu > .search-w > .search { align-self: center; background: white; border-radius: 50px; padding: 5px 5px 5px 20px; }
            #page-menu > .search-w > .search > i { color: #969696; font-size: 14px; vertical-align: 1px; }
            #page-menu > .search-w > .search > .str { border: none; outline: none; font-size: 16px; }
            #page-menu > .search-w > .search > .submit { background: none; border: none; color: #969696; font-size: 16px; cursor: pointer; }

#results { width: 1320px; margin: 55px auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
    #results > .list-item { width: 640px; background: #F2F2F2; border: solid 1px #E8E8E8; border-radius: 5px; padding: 18px 30px 18px 18px; box-sizing: border-box; display: flex; margin-bottom: 32px; }
        #results > .list-item > .img { width: 262px; height: 262px; background-position: center; background-size: cover; flex: none; margin-right: 27px; border-radius: 5px; }
        #results > .list-item > .r { }
            #results > .list-item > .r > h2 { margin: 0; font-size: 21px; }
            #results > .list-item > .r > .date-caption { font-size: 12px; font-weight: bold; margin-top: 15px; }
                #results > .list-item > .r > .date-caption > .type { margin-left: 20px; color: #F05125; }
            #results > .list-item > .r > .brief-description { margin-top: 10px; color: #262626; font-size: 17px; }
            #results > .list-item > .r > .read { margin-top: 20px; display: inline-block; color: #0071B7; text-decoration: none; font-size: 14px; font-weight: bold; text-transform: uppercase; }

@media (max-width:1439px) {
    #page-menu { width: 1000px; }

    #results { width: 1000px; }
        #results > .list-item { width: 490px; }
            #results > .list-item > .img { width: 185px; height: 185px; }
}

@media (min-width:1024px) and (max-width:1439px) {
    #results > .list-item > .r > h2 { font-size: 18px; }
    #results > .list-item > .r > .brief-description { font-size: 15px; }
}

@media(max-width:1023px) {
    #banner { height: 258px; }

    #page-menu { width: 672px; height: 38px; font-size: 11px; margin-top: 34px; }
        #page-menu > .items > .i { width: 102px; }
        #page-menu > .search-w > .search { padding: 0 0 0 15px; }
            #page-menu > .search-w > .search > .str { font-size: 11px; }
            #page-menu > .search-w > .search > i { font-size: 12px; vertical-align: 0; }

    #results { display: block; width: 672px; margin-top: 40px; }
        #results > .list-item { width: auto; }
}


@media(max-width:767px) {
    #banner { height: 234px; }
    #page-menu { flex-direction: column; margin-top: 0; height: auto; width: auto; padding: 0; font-size: 12px; }
        #page-menu > .items { order: 2; height: 40px; justify-content: center; }
        #page-menu > .search-w { background: #F8F8F8; height: 50px; justify-content: center; }
            #page-menu > .search-w > .search { padding: 3px 5px 3px 15px; border: solid 1px #C6C6C6; }
                #page-menu > .search-w > .search > .str { font-size: 12px; }
                #page-menu > .search-w > .search > i { vertical-align: 1px; }

    #results { width: auto; margin-top: 20px; }
        #results > .list-item { display: block; background: none; border: none; padding: 30px 0 20px; border-bottom: solid 1px #C6C6C6; margin: 0; }
            #results > .list-item > .img { width: 262px; height: 262px; margin: 0 auto; }
            #results > .list-item > .r { width: 260px; margin: 20px auto; }
}