.body-sec { max-width:100%; margin-left:auto; margin-right:auto; } #jp_blog .inner { max-width:1070px; margin-left:auto; margin-right:auto; padding: 1em; font-family: "Roboto", serif; } #jp_blog .inner h3 { font-size: 1.8em; margin: 1em 0;} #jp_blog .inner h3.center { text-align: center;} /* news highlight */ #jp_blog .top-news-highlight { background: #fff;} #jp_blog .top-news-highlight .inner { max-width:1070px; width:90%; margin:0 auto; padding: 1em; } #jp_blog .top-news-highlight .main-display { display: flex;} #jp_blog .top-news-highlight .left { max-width: 400px; width: 95%; padding: 2em 2em 0 0; } #jp_blog .top-news-highlight .left .news-label span { font-size: .77em; display: block; border-bottom: 2px solid #aaa;} #jp_blog .top-news-highlight .left .news-label span { padding-bottom: .5em; font-weight: bold; color: #b5820f; font-family: "Roboto", serif;} #jp_blog .top-news-highlight .left h2 { font-size: 2.1em; margin-bottom: .4em; color: #444; font-family: "Raleway", sans-serif; font-weight: bold;} #jp_blog .top-news-highlight .left h6 { font-size: 1em; margin-bottom: 1em; color: #666; font-family: "Roboto", serif;} #jp_blog .top-news-highlight .left .info-sec { font-size: .77em; color: #777; font-family: "Roboto", serif;} #jp_blog .top-news-highlight .left .info-sec a { color: #444;} #jp_blog .top-news-highlight .right { max-width: 90%; width: 90%; max-height: 350px; } #jp_blog .top-news-highlight .right .img-sec { width: 100%; height: 100%; } #jp_blog .top-news-highlight .right .img-sec img { width: 100%; height: 100%; object-fit: cover;} #jp_blog .top-news-highlight .other-news { margin-top: 1em; width: 95%; } #jp_blog .top-news-highlight .other-news em.other { font-size: .77em; display: block; color: #666; font-family: "Roboto", serif;} #jp_blog .top-news-highlight .other-news em.other { font-weight: bold; margin-bottom: 1em;} #jp_blog .top-news-highlight .other-news .inner-sec { display: flex;} #jp_blog .top-news-highlight .other-news .news-item { max-width: 200px; margin-right: 1em;} #jp_blog .top-news-highlight .other-news .news-item h6 { font-size: .9em; margin-bottom: .5em; color: #444; font-family: "Roboto", sans-serif;} #jp_blog .top-news-highlight .other-news .news-item .img-con { width: 100%; height: 160px; margin-bottom: .6em;} #jp_blog .top-news-highlight .other-news .news-item .img-con img { width: 100%; height: 100%; display: block; margin-bottom: 1em; object-fit: cover;} #jp_blog .top-news-highlight .other-news .news-item .info-sec2 { font-size: .7em; color: #bbb;} #jp_blog .top-news-highlight .view-all-top { font-size: .8em; float: right; color: #3e84b9;} #jp_blog .view-all { color: #ddd; display: block; background: #666; width: 120px; padding: .5em; margin: 0 auto; text-align: center;} #jp_blog .view-all { text-align: center; font-size: .8em; border-radius: 15px;} #jp_blog .view-all:hover { background: #0A548B; text-decoration: none;} /* topics */ #jp_blog .topics-sec { border-top:4px solid #aaa; background: #555;} #jp_blog .topics-sec .search-sec { max-width: 800px; width: 90%; margin: 2em auto 1em auto; } #jp_blog .topics-sec form.searchbox { display: flex;} #jp_blog .topics-sec .search-sec input { width: 85%; height: 40px; display: block; padding: .3em .5em; font-size: 1.1em; } #jp_blog .topics-sec form.searchbox button { padding: 0; width: 80px; background: #3da124; width: 80px; display: block; border: 1px solid rgb(136, 133, 133);} #jp_blog .topics-sec form.searchbox button { border-left: none;} #jp_blog .topics-sec form.searchbox button img { width: 22px;} #jp_blog .topics-sec .topic-list { display: flex; justify-content: center; align-items: flex-start; margin: 1em 1em 0 0;} #jp_blog .topics-sec h6 { color: #ebd854; text-align: center; font-size: 1.2em;} #jp_blog .topics-sec a.item { display: block; background:#333; border: 1px solid #555; margin-bottom:1.3em; margin:0 0 2em 1em;} #jp_blog .topics-sec a.item { max-width: 150px;} #jp_blog .topics-sec a.item { box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.3);} #jp_blog .topics-sec a.item img { width: 100%; height: 100%;} #jp_blog .topics-sec a.item span { font-size:1.1em; text-align:center; color:#eee; padding:1em 0; display: block;} /* middle sec */ #jp_blog .main-content-inner { display: flex;} #jp_blog .main-content-inner .left-sec { width: 98%; max-width: 750px; margin-right: 1em;} #jp_blog .main-content-inner .left-sec h2 { font-size: 2em; margin-bottom: .4em; color: #444; font-family: "Raleway", sans-serif; font-weight: bold;} #jp_blog .main-content-inner .left-sec h2 { border-bottom: 3px solid #ccc; padding-bottom: 0.5em; } /* trending */ #jp_blog .main-content-inner .left-sec .trending-sec { padding: 2em; background: #fefefe; border: 1px solid #cecece;} #jp_blog .post-listing a.article { border-bottom:1px solid #ddd; margin-bottom:1em; display: flex; } #jp_blog .post-listing a.article .img_sec { width:150px; min-width: 150px; margin-right: 1em; } #jp_blog .post-listing a.article .img_sec img { width:100%;} #jp_blog .post-listing a.article .text span.title { font-size:1.4em; color: #346b11; font-family: "Raleway", sans-serif;} #jp_blog .post-listing a.article .text p { margin:1em 0; font-size:.79em; color:#444; line-height:1.7em;/* font-family: Helvetica, Arial;*/} #jp_blog .post-listing a.article .text .summary { color: #444;} #jp_blog .post-listing a.article .text .more { font-size:.8em; color: #4aafdd;} #jp_blog .post-listing a.article:hover { text-decoration:none;} #jp_blog .main-content-inner .right-sec { width: 300px; } /*-------------------------------------------------------- Medium Screen ---------------------------------------------------------*/ @media screen and (max-width: 835px) { #jp_blog .top-news-highlight .other-news .news-item .img-con { height: 100px;} #jp_blog .top-news-highlight .other-news .news-item h6 { font-size: .8em;} #jp_blog .main-content-inner { display: block;} #jp_blog .main-content-inner .left-sec { margin: 0; width: 99%;} #jp_blog .main-content-inner .right-sec { width: 98%; margin-top: 2em; } } @media screen and (max-width: 700px) { /* news highlight */ #jp_blog .top-news-highlight .right { margin-top: 1em; height: 250px;} } @media screen and (max-width: 600px) { #jp_blog .top-news-highlight .main-display { display: block; } /*top sec*/ #jp_blog .top-sec h6 { font-size:.9em;} /* topics */ #jp_blog .topics-sec a.item span { font-size:1em;} } @media screen and (max-width: 550px) { /* trending */ #jp_blog .post-listing a.article { display: block; } #jp_blog .post-listing a.article .img_sec { width:98%; max-width: 300px; margin: 0 auto; } #jp_blog .post-listing a.article .text { margin-top: 1em; text-align: center; } #jp_blog .post-listing a.article .text .summary { display: none;} #jp_blog .post-listing a.article .text .more { display: none;} } @media screen and (max-width: 450px) { } @media screen and (max-width: 360px) { }