body{background-color: #f5f5f5;}

.page-header{background-color: transparent; text-align: right;}
.page-header ul{padding: 0px; margin: 0px; list-style: none;}
.page-header ul li{padding: 0px; margin-right: 20px; display: inline-block;}
.page-header ul li a{padding: 8px 40px; text-transform: uppercase; color: #000; background-color: #f3f3f3; font-size: 16px;}
.page-header ul li a:hover, .page-header ul li a.active{background-color: #0d7b3e; color: #fff;}
.page-header .title{position:relative; top: 0px; left: 0px; width: 100%; height: auto; text-align: left;}
.page-header .title a{color: #0d7b3e; text-transform: uppercase; font-size: 20px;}
.page-header .title a span{display: inline-block; vertical-align: middle;}
.page-header .title a span:first-child{background-color: #eaebeb; border-radius: 50%; padding: 6px; margin-right: 5px; width: 40px; height: 40px; text-align: center;}

.search-box{margin-top: 15px; margin-bottom: 15px;}
.search-box table {border-collapse: collapse;}
.search-box table tr td{padding: 0px; position:relative;}
.search-box table tr td:first-child{padding-right: 20px; width: 220px;}
.search-box table tr td input{width: 100%; height: 36px; display:block; padding: 5px;}
.search-box table tr td button{display: block; margin: 0px;}

.article-details{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 50px; margin: 50px 0px; background-color: #fff; display: block; overflow-x:hidden;}
.article-details .title{position: relative; top:0px; left:0px; width: auto; height:auto; display: block; font-size: 28px; font-weight: bold; color: #0d7b3e; line-height: 35px;}
.article-details .date{position:relative; top: 0px; left: 0px; width: auto; height: auto; color: #a9a9a9; font-size:  18px; margin: 20px 0px;}
.article-details .description{position: relative; top: 0px; left: 0px; width: auto; height: auto; color: #666; text-align: justify; display: block; font-weight: bold; font-style: italic; margin: 20px 0px;}
.article-details .article-content{position:relative; top:0px; left: 0px; width: 100%; height: auto; padding-top: 20px;}

.article-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 50px; background-color: #fff; display: block; overflow-x:hidden;}
.article-list img{width: 100%;}
.article-list .row{padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #efefef;}
.article-list .row:hover{transition: background-color 0.2s ease-in-out 0s; background-color: #f9f9f9;}
.article-list a {color: #000; font-weight: bold; font-size: 20px; display: block;}
.article-list a:hover{color: #0d7b3e;}
.article-list p{text-align: justify;}
.article-list .date{font-size: 14px; color: #666; margin: 5px 0px 20px 0px; display: block;}
.article-list .pager ul li{padding: 5px 10px; cursor: pointer; border: 1px solid #ababab; margin: 0px 5px;}
.article-list .pager ul li:hover, .article-list .pager .selected{background-color: #ababab;}

.article-top{background-color: #eaebeb;}
.article-top .col-md-6:last-child{padding-top: 20px; padding-bottom: 20px;}
.article-top .col-md-6:last-child span{display: block; font-size: 16px; font-weight: bold;}
.article-top .col-md-6:last-child p{text-align: justify; margin: 20px 0px;}
.article-top .col-md-6:last-child div{position:relative; width: 100%; height: auto; text-align: right;}
.article-top .col-md-6:last-child a{color: #0d7b3e;}
.article-top .col-md-6:last-child div a span{position: relative; display: inline-block; margin-right: 10px; vertical-align: middle;}
.article-top .col-md-6:last-child div a i{vertical-align: middle;}
.article-top .col-md-6:first-child a{position: relative; top: 0px; left: 0px; width: 100%; height: 100%; display: block;}
.article-top img{width: 100%; height: 100%;}

.article-shortlist{margin-top: 30px;}
.article-shortlist a{width: 100%; display: block; background-color: #f3f3f3; padding-bottom: 5px;}
.article-shortlist a span{display: block; background-color: #f3f3f3; padding: 0px 5px; margin-top: 5px; height: 40px; line-height: 20px; overflow: hidden;}
.article-shortlist a:hover{color: #0d7b3e;}


@media only screen and (max-width: 1024px) {
    .search-box .container{padding: 0px;}
    .search-box table{width: 100%;}
    .search-box table tr td:first-child{width: calc(100% - 102px);}
    .search-box table tr td:last-child{width: 102px;}

    .article-top .col-md-6:first-child{padding-top: 20px;}
    .article-shortlist .col-md-3{padding-top: 20px;}

    .page-header ul li:not(:first-child){margin-top: 20px;}
    .article-list, .article-details{padding: 20px 0px;}
    .container-fluid > .row > .col-md-12{background: #fff;}
    .page-header .container-fluid > .row > .col-md-12, .search-box.container-fluid > .row > .col-md-12{background: transparent;}
}

@media only screen and (min-width: 1024px) {
    .article-top .col-md-6:first-child{padding: 0px;}
}