@media screen and (min-width: 460px) {
	/* navbar */
	.navbar-brand {
		margin-left: 1em;
	}
	.navbar-brand img {
		display: inline-block;
	}
	.navbar-brand img.small-logo {
		display: none;
	}
	.modal-dialog {
	    margin: 30px auto;
	}
	.dd-modal-header {
		padding: 65px 60px 45px 60px;
	}
	.dd-modal-body {
		padding: 40px 60px 25px 60px;
	}

	/* data list */
	.dd-data-list h5{
		font-size: 1.2em;
	}
	.dd-data-list h3 {
	    margin-top: -0.5em;
	    font-size: 3rem;
	}

	/* data download footer banner*/
	.jumbotron.pagefooter h3 {
		font-size: 1.875rem;
	}

	/* media */
	.border-media {
		padding: 2em 1em;
	}
	.media-title {
		padding-left: 15px;
	}
	.sop-media + .sop-media::before {
		left: 34px;
	}
	.sop-media .media-head {
		padding-left: 15px;
		padding-right: 15px;
	}
	.sop-media .media-body {
		max-width: calc(100% - 80px);
		padding-left: 15px;
		padding-right: 15px;
	}
	
	/* search */
	#banner-search {
		height: 37.5vh;
	}

}
@media screen and (min-width: 514px) {
	/* about */
	#menber ~ .row {
		justify-content: space-between;
	}
	.about > h3,
	.about > h5 {
		max-width: none;
	}
	/* data modal */
	.dd-modal .modal-content {
		min-width: 450px;
	}
	/* result */
	.results[data-list="img"] {
		justify-content: space-between;
	}
}
@media screen and (min-width: 576px) {
	/* index banner */
	.jumbotron h1 {
		letter-spacing: 8px;
		font-size: 2rem;
	}
	.jumbotron h2.h5 {
		font-size: 1.25rem;
	}
	.custom-justify {
		padding: 0 10px 0 0;
	}

	.scroll-down-btn {
		top: calc(-45px - 1rem);
		width: 60px;
		height: 70px;
		font-size: 60px;
	}

	/* navbar */
	.navbar {
		height: 100%;
		padding: 10px 20px 0;
	}
	.modal-dialog {
		max-width: 550px;
	    margin: 30px auto;
	    align-self: center;
	}
	.dd-modal-header {
		padding: 65px 40px 75px 45px;
		min-height: 344px;
	}
	.dd-modal-body {
		padding: 45px 40px 25px 20px;
	}
	.dd-modal-body .dd-link {
		background-color: transparent;
		color: inherit;
		border: 1px solid #787878;
		float: right;
		font-size: 1em;
		display: inherit;
	}
	.dd-modal-body .dd-link:hover {
		background-color: #24b8b0;
	}
	#container-resource {
		max-width: none;
	}
	/* fixed scrollspy */
	.nav-scrollspy {
		right: 30px;
	}
	
}
@media screen and (min-width: 768px) {
	.modal-dialog {
		max-width: 650px;
	    margin: 30px auto;
	}
	/* nav mobile */
	.nav-mobile::after {
		content: none;
	}
	.nav-link[disabled="disabled"] {
		cursor: default;
	}
	/* nav left */
	.nav-left {
		border: none;
		display: inline-block;
		width: auto;
		max-height: none;
		overflow:  visible;
		margin: 0;
		padding: 0;
	}
	.nav-left .nav-link {
	    border-radius: 0;
	    padding: 5px 10px;
	    min-width: 91px;
	    margin: 0 auto 5px 15px;
	    text-align: center;
	    width: auto;
	    display: inline-block;
		color: #262d51;
		opacity: 1;
	}
	.nav-left .nav-link.active {
		background-color: #24b8b0;
		color: #fff;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.14);
		position: relative;
	}
	.nav-left .nav-link:first-of-type {
		margin-top: -10px;
	}

	#container-resource {
		max-width: 720px;
	}
	#rr-tab2 {
    	padding-right: 1%;
		text-align: right;
		top: -10px;
	}
	#rr-tab2 .nav-link {
		text-align: right;
		padding: 0;
		margin: 0 0 15px auto;
		min-width: auto;
	}
	
	#rr-tab2 .nav-link.active{
		color: #24b8b0;
		background-color: transparent;
		text-shadow: none;
	    border-bottom: 1px solid #24b8b0;
	}
	#rr-tab2 br {
		display: inline;
	}
	
	/* nav top */
	.nav-top {
		margin: 0px -15px 24px;
		text-align: center;
		display: flex;
		border: 0;
		overflow:  visible;
		width: auto;
		padding: 0;
	}
	.nav-top li {
		padding: 0;
		position: relative;
		display: inline-block;
		height: 100%;
	}
	
	.nav-top .nav-link {
	    background-color: #323541;
	    color: #fff;
	    border-radius: 0;
	    padding: 19px 25px 17px;
	    font-size: 1.1em;
    	height: 64px;
    	opacity: 1;
	}
	.nav-top .nav-link.active {
		background-color: #b0b0b0;
		color: #fff;
		position: relative;
	}
	.nav-top .custom-icon {
		display: inline-block;
	    font-size: 22px;
	    margin-left: 10px;
	    vertical-align: top;
	    margin-top: -6px;
	    letter-spacing: 12px;
	}
	.nav-top .nav-link .material-icons {
		display: inline-block;
		font-size: 32px;
	    vertical-align: top;
	    margin-left: 8px;
	    margin-top: -3px;
	}
	/* media */
	.media {
		display: flex;
	}
	.media + .media {
		margin-top: 60px;
	}
	.img-media-list {
		margin-top: -25px;
	}
	.img-media,
	.media.gray {
		box-shadow: none;
	}
	.img-media .media-head {
		margin-bottom: 0;
	}
	.img-media .media-body {
		padding-left: 2em;
	}
	
	.border-media {
		padding: 2.2em 0;
	}
	.border-media .media-head {
		padding-left: 0;
		padding-right: 0;
		margin-right: 1em;
	}
	.border-media .media-body {
		padding-right: 25px;
	}
	.border-media {
		border-top: 1px solid #000;
		padding: 2.5em 0;
	}
	.border-media + .border-media {
		margin-top: 0;
	}
	.border-media:last-of-type {
		border-bottom: 1px solid #000;
	}
	.media-title {
		padding-left: 40px;
	}
	.sop-media {
		padding: 25px;
	}
	.sop-media + .sop-media {
		margin-top: 0;
	}
	.sop-media + .sop-media::before {
		left: 59px;
	}
	.sop-media .media-body {
		max-width: 600px;
	}
	/* data */
	.tab-content {
		min-height: 70vh;
	}
	.dd-data-list {
		/* margin: 2.5rem auto 5rem; */
	}
	.dd-data-list .col-md-auto {
		display: block;
		margin-right: 0;
		margin-bottom: 1rem;
		padding: 0;
	}
	.dd-data-list > div > div {
		text-align: center;
		display: inline-block;
	}
	.dd-data-list > div:first-of-type .material-icons {
		margin-right: -8px;
	}
	.dd-data-list h3 {
	    margin-top: 0;
	    margin-bottom: 0;
	}

	/* data modal */
	.dd-modal .modal-content {
		min-width: 600px;
	}

	/* result */
	.gray-btn {
		display: inline-block;
		margin: 0 0 0 1rem;
	}
	.results[data-list="list"] .result {
		padding-left: 0;
	}
	.results[data-list="list"] .result-text {
		margin-top: 0;
		padding-left: 1.5em;
		max-width: calc(100% - 182px);
	}
	.page-navigation .page-number + .page-number:nth-of-type(n + 5) {
		display: list-item;
	}

}
@media screen and (min-width: 992px) {
	
	/* navbar */
	body.navbar-show {
		padding-left: 0;
		min-width: 100%;
	}
	.navbar-expand-md .navbar-toggler {
	    display: none;
	}
	.navbar-collapse {
		position: relative;
	    padding: 0;
	    top: auto;
	    left: auto;
	    min-height: auto;
	    height: auto;
	    width: auto;
	    background-color: transparent;
	    transition: none;
	}
	.navbar-collapse.show + .nav-bar-bg {
		opacity: 0;
		pointer-events: none;
	}
	.navbar-nav {
		flex-direction: row !important;
	    height: auto;
	}
	.navbar-light .navbar-nav .nav-link {
	    color:  #262d51;
	}
	.lang-item {
		margin-left: 2em;
	}
	.nav-item.bottom {
		margin-bottom: 0;
	}
	.nav-item {
		margin-right: 1.5em;
	}
	.nav-item .nav-link,
	.nav-item.bottom ~ .nav-item .nav-link,
	.navbar-expand-lg .navbar-nav .nav-link {
		padding: 0.3rem 0rem 0.1rem;
	    border-bottom: 1px solid rgba(0,0,0, 0);
	}
	.navbar-light .navbar-nav .active>.nav-link,
	.navbar-light .navbar-nav .nav-link:hover,
	.navbar-light .navbar-nav .nav-link.active {
		background-color: transparent;
		color:  #262d51;
		border-bottom-color: rgba(0,0,0,.8);
	}
	.nav-item #dataDownload,
	.nav-item #langSwitch {
		border-bottom: 0;
	}
	.nav-item.lang-item .nav-link {
		border-bottom: 0;
		color:  rgba(0,0,0, 0.5);
	}
	.dropdown-menu {
		margin-left: 0.6em;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	}
	.dropdown-item {
		padding: 0.4em 1em;
	}

	/*news tab*/
	.news-tab {
		position: absolute;
		left: 0;
		padding-right: 1.5rem;
	}
	.news-tab .nav {
	    display: flex;
	    max-width: none;
	    margin-left: 0;
	    max-height: none;
	    overflow: visible;
	    border: 0;
	    color: inherit;
	    position: relative;
	    text-align: center;
	    padding-top: 0;
	}
	.news-tab .nav.active {
		max-height: none;
	}
	.news-tab .nav::after {
		content: none;
	}
	.news-tab .nav-item {
		width: auto;
		padding: 0;
	}
	.news-tab .nav-item.active {
		opacity: 1;
		position: relative;
	}

	/**/
	#container-resource {
		max-width: 960px;
	}
	#rr-tab2 {
    	padding-right: 4%;
	}

	/*position*/
	.flex-lg-middle {
		display: -webkit-flex;
	    display:         flex;
	    -webkit-align-items: center;
	            align-items: center;
	    -webkit-justify-content: center;
	            justify-content: center;
	}

	/* media */
	.border-media .media-head {
		padding-right: 2em;
	}

	/* result */
	.list-btn-line {
		float: right;
		margin: 0;
	}
}
@media screen and (min-width: 1200px) {
	.nav-item {
		margin-right: 2em;
	}
	#container-resource {
		max-width: 1140px;
	}
	#rr-tab2 {
    	padding-right: 6%;
    	white-space: 
	}
	/* footer */
	footer {
		padding: 20px 0 30px;
	}
	footer p {
		margin-bottom: 0;
	}
	footer .row > div {
		position: relative;
	}
	/* backtop_btn */
	.backtop_btn {
	    height: 35px;
	    width: 35px;
	    top: 0;
	    right: 20px;
	    font-size: 35px;
	    margin: auto;
	}
	
}