@media screen and (max-width:1399px) {
	footer .container .footerNav .grp {
		max-width: 300px;
	}

	footer .container .footerNav .left {
		width: 45%;
		margin-right: 5%;
	}

	footer .container .footerNav .rgt {
		width: 45%;
		margin-right: 5%;
	}

	.common-login .svgImg,
	.common-signup .svgImg {
		width: 600px;
		right: -30px;
		top: 80px;
	}
}

@media screen and (max-width:1199px) {
	footer .container .footerNav {
		width: calc(100% - 190px);
	}

		footer .container .footerNav .grp {
			max-width: 430px;
		}

		footer .container .footerNav .left {
			width: 40%;
			margin: 0 5%;
		}

		footer .container .footerNav .rgt {
			width: 40%;
			margin: 0 5%;
		}

	footer .container .copyright {
		display: block;
		width: 100%;
		text-align: left;
		margin-top: 30px;
	}

		footer .container .copyright span {
			margin-left: 0;
			margin-right: 20px;
			margin-bottom: 20px;
		}

			footer .container .copyright span:last-child {
				margin-right: 0;
			}

	.common-filter .col4 .btn {
		width: calc(50% - 74px);
	}

	.template-listening .container {
		max-width: 1070px;
	}

		.template-listening .container .intro,
		.template-listening .container .footnote {
			width: calc(95% - 222px);
			max-width: none;
			left: 0;
			margin-left: 200px;
			margin-right: 0;
		}

	.template-listening .listen-now {
		left: 0;
	}

		.template-listening .listen-now .left {
			width: 170px;
			margin-right: 30px;
		}

		.template-listening .listen-now .rgt {
			width: calc(95% - 200px);
		}

	.template-listening .listen-summary {
		left: 0;
	}

		.template-listening .listen-summary .left {
			width: 170px;
			margin-right: 30px;
		}

		.template-listening .listen-summary .rgt {
			width: calc(95% - 200px);
		}

	.template-listening .listen-transcript {
		left: 0;
	}

		.template-listening .listen-transcript .left {
			width: 170px;
			margin-right: 30px;
		}

		.template-listening .listen-transcript .rgt {
			width: calc(95% - 200px);
		}

	.sticky-chp-list.stick {
		width: calc(90% - 180px);
		margin-left: 75px;
	}
}

@media screen and (max-width:1099px) {
	.happenings-grid .grid .grid-item .description h4,
	.happenings-grid-02 .grid .grid-item .description h4 {
		font-size: 24px;
		line-height: 30px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width:999px) {
	header .container .logoImg {
		width: 50%;
	}

	header .container .iconNav {
		width: 50%;
	}

		header .container .iconNav .iconBtn.DESKTOP,
		header .container .iconNav .commonBtn {
			display: none;
		}

		header .container .iconNav .menuBtn {
			display: inline-block;
			vertical-align: middle;
			margin-left: 15px;
		}

	header .container .mainMenu {
		background: #ffffff;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		opacity: 0.0;
		pointer-events: none;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

		header .container .mainMenu.active {
			min-height: 100vh;
			top: 0;
			opacity: 1.0;
			pointer-events: all;
			overflow-y: auto;
		}

		header .container .mainMenu ul {
			text-align: center;
			position: relative;
			top: 70px;
		}

	header.active .container .mainMenu ul {
		position: relative;
		top: 55px;
	}

	header .container .mainMenu ul li {
		display: block;
		margin: 15px 0;
	}

		header .container .mainMenu ul li:last-child {
			padding-bottom: 100px;
		}

		header .container .mainMenu ul li a {
			font-size: 34px;
			font-weight: 300;
			line-height: normal;
			display: inline-block;
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
		}

	header .container .mainMenu .MOBILE {
		display: block;
	}

	header .acctMenu {
		display: none !important;
	}

	.happenings-grid-02 .grid .grid-item {
		float: left;
		width: calc(50% - 30px);
		height: 0;
		padding-top: calc(50% - 30px);
	}

	.happenings-grid-02 .grid .grid-sizer {
		width: calc(50% - 30px);
	}

	.happenings-grid-02 .grid .grid-item:last-child {
		width: calc(100% - 30px);
		padding-top: 300px;
	}

	.share.sticky {
		position: absolute !important;
		top: auto;
		bottom: 0;
		left: 0;
		float: none;
	}

	.share {
		width: 100%;
		text-align: center;
	}

		.share a {
			display: inline-block;
			vertical-align: top;
			margin: 7.5px;
		}

	.template-reading .container,
	.template-watching .container,
	.template-listening .container {
		padding-bottom: 25px;
		margin-bottom: 125px;
	}

		.template-reading .container .common-advise .content {
			width: calc(100% - 100px);
			padding: 40px 50px 50px 50px;
		}

	.template-listening .container {
		max-width: none;
	}

		.template-listening .container .intro,
		.template-listening .container .footnote {
			width: calc(100% - 22px);
			margin-left: 0;
		}

	.template-listening .listen-now .left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.template-listening .listen-now .rgt {
		width: 100%;
	}

	.template-listening .listen-summary .left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.template-listening .listen-summary .rgt {
		width: 100%;
	}

	.template-listening .listen-transcript .left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.template-listening .listen-transcript .rgt {
		width: 100%;
	}

	.sticky-chp-list.stick {
		width: calc(100% - 22px);
		margin-left: 0;
	}
}

@media screen and (max-width:899px) {
	.mailing-list .container .col3 .field input {
		max-width: 280px;
	}

	.common-filter .col3 .btn {
		width: calc(50% - 74px);
	}

	.happenings-grid .grid .grid-item:nth-of-type(2) {
		width: calc(50% - 30px);
		padding-top: 370px;
	}

	.happenings-grid .grid .grid-item:nth-of-type(3) {
		width: calc(50% - 30px);
		padding-top: 370px;
	}

	.happenings-grid .grid .grid-item:nth-of-type(4) {
		width: calc(100% - 30px);
		padding-top: 300px;
	}

	.happenings-grid .grid .grid-item:nth-of-type(5) {
		width: calc(100% - 30px);
		padding-top: 300px;
	}

	.happenings-grid .grid .grid-item .grp .image {
		width: 45%;
	}

	.happenings-grid .grid .grid-item .grp .content {
		width: 55%;
		position: relative;
	}
}

@media screen and (max-width:799px) {
	header,
	.HOME header {
		width: calc(100% - 40px);
		padding: 20px;
	}

		header.active {
			padding: 10px 20px;
		}

		header .searchField {
			width: calc(90% - 32px);
			top: 60px;
			right: 10px;
		}

	footer {
		background: rgb(28,62,113);
		background: -moz-linear-gradient(90deg, rgba(28,62,113,1) 0%, rgba(43,172,226,1) 70%);
		background: -webkit-linear-gradient(90deg, rgba(28,62,113,1) 0%, rgba(43,172,226,1) 70%);
		background: linear-gradient(90deg, rgba(28,62,113,1) 0%, rgba(43,172,226,1) 70%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c3e71",endColorstr="#2bace2",GradientType=1);
	}

		footer .container {
			width: calc(100% - 40px);
			margin: 0 20px;
		}

			footer .container .footerNav .grp {
				max-width: 300px;
			}

	.mailing-list .container {
		width: calc(100% - 40px);
		max-width: none;
		padding: 40px 20px;
	}

	.common-content .container {
		margin: 100px auto 50px auto;
	}

		.common-content .container h2 {
			margin-bottom: 35px;
		}
}

@media screen and (max-width:699px) {
	footer .container .logoImg {
		display: block;
		margin-bottom: 30px;
	}

	footer .container .footerNav {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}

		footer .container .footerNav .grp {
			max-width: none;
		}

		footer .container .footerNav .left {
			width: 45%;
			margin: 0 5% 0 0;
		}

		footer .container .footerNav .rgt {
			width: 45%;
			margin: 0 5% 0 0;
		}

	.mailing-list .container .col3 span {
		display: block;
		width: 100%;
		max-width: 300px;
		margin-bottom: 20px;
	}

	.mailing-list .container .col3 .field {
		display: inline-block;
		width: calc(100% - 140px);
		max-width: none;
		text-align: left;
		margin-bottom: 0;
	}

		.mailing-list .container .col3 .field input {
			width: 100%;
			max-width: none;
		}

	.mailing-list .container .col3 .btn {
		display: inline-block;
		margin-bottom: 0;
		max-width: none;
	}

	.happenings-grid-02 .grid .grid-item {
		float: left;
		width: calc(100% - 30px);
		height: 0;
		padding-top: 300px;
	}

	.happenings-grid-02 .grid .grid-sizer {
		width: calc(100% - 30px);
	}

	.modal-body .container .grp .left {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	.modal-body .container .grp .rgt {
		display: block;
		width: 100%;
		margin-left: 0;
	}

	.responsiveTable {
		margin-top: 0;
	}

		.responsiveTable table {
			margin: 0;
		}

			.responsiveTable table thead {
				border: none;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}

			.responsiveTable table tr {
				display: block;
				border-bottom: none;
				margin: 10px 0 10px 0;
				background: #f1f3f6;
			}

			.responsiveTable table tbody tr td {
				border-bottom: none;
				display: block;
				text-align: right !important;
				padding: 6px 12px;
			}

			.responsiveTable table td::before {
				content: attr(data-label);
				float: left;
				font-weight: 300;
				color: #1c3e71;
			}

			.responsiveTable table tbody tr td:last-child {
				paddding-bottom: 0;
			}

			.responsiveTable table tbody tr:last-child td {
				border-bottom: none;
			}
}

@media screen and (max-width:599px) {
	.wrapper h2 {
		font-size: 45px;
		line-height: 50px;
	}

	.drip {
		width: 215px;
	}

		.drip:before {
			left: 92.5px;
			width: 10px;
			height: 10px;
			animation: anima_drip_mobile 4s ease 0.25s 1 forwards;
		}

		.drip:after {
			animation: anima_splash_mobile 6s ease 0.25s 1 forwards;
		}

	header .searchField {
		top: 70px;
	}

	.common-filter .col2 .btn,
	.common-filter .col3 .btn,
	.common-filter .col4 .btn {
		width: calc(100% - 74px);
	}

	.happenings-grid .grid .grid-item {
		float: left;
		width: calc(100% - 30px);
		height: 0;
		padding-top: 100%;
	}

	.happenings-grid .grid .grid-sizer {
		width: calc(100% - 30px);
	}

	.happenings-grid .grid .grid-item:nth-of-type(2) {
		width: calc(100% - 30px);
		padding-top: 100%;
	}

	.happenings-grid .grid .grid-item:nth-of-type(3) {
		width: calc(100% - 30px);
		padding-top: 100%;
	}

	.happenings-grid .grid .grid-item:nth-of-type(4) {
		padding-top: 0 !important;
		height: auto;
	}

	.happenings-grid .grid .grid-item:nth-of-type(5) {
		padding-top: 100%;
	}

	.happenings-grid .grid .grid-item .description {
		width: calc(85% - 40px) !important;
	}

	.happenings-grid .grid .grid-item .grp {
		height: auto;
		display: block;
		position: relative;
	}

		.happenings-grid .grid .grid-item .grp .image {
			width: 100%;
			height: 0;
			padding-top: 50%;
		}

		.happenings-grid .grid .grid-item .grp .content {
			width: 100%;
		}

		.happenings-grid .grid .grid-item .grp .description {
			padding: 20px;
			position: relative;
		}

			.happenings-grid .grid .grid-item .grp .description h4 {
				margin-top: 40px;
			}

	/*.template-reading .container .common-section .image {
		height: 0;
		padding-top: 100%;
	}*/

	.field-content .col2 {
		width: calc(100% - 20px);
	}

	.account-detail {
		width: calc(100% - 44px);
		padding: 20px;
	}

	.account-subscription {
		width: calc(100% - 44px);
		padding: 20px;
	}

	.account-pwd {
		width: calc(100% - 44px);
		padding: 20px;
	}

	.common-banner .banner-text .episode-title {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 15px;
	}

	.vision-mission .left {
		width: calc(100% - 62px);
		margin-right: 0;
		padding: 30px;
		margin-bottom: 30px;
	}

	.vision-mission .rgt {
		width: calc(100% - 62px);
		margin-left: 0;
		padding: 30px;
	}

	.cookie .container {
		width: calc(100% - 40px);
		padding: 20px;
	}

		.cookie .container .left {
			width: 100%;
			margin-bottom: 15px;
		}

		.cookie .container .rgt {
			text-align: left;
			width: 100%;
		}
}

@media screen and (max-width:499px) {
	footer .container .logoImg {
		display: block;
		margin-bottom: 20px;
	}

	footer .container .footerNav {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}

		footer .container .footerNav .grp {
			max-width: none;
		}

			footer .container .footerNav .grp span {
				margin-bottom: 15px;
			}

		footer .container .footerNav .left {
			width: 100%;
			margin: 0 0 15px 0;
		}

		footer .container .footerNav .rgt {
			width: 100%;
			margin: 0;
		}

	.happenings-grid-02 .grid .grid-item {
		padding-top: calc(100% - 30px);
	}

	.common-login .container {
		padding: 30vh 0 10vh 0;
	}

	.template-reading .container .common-advise .content {
		width: calc(100% - 60px);
		padding: 30px 30px 40px 30px;
	}
}

@media screen and (max-width:399px) {
	.mailing-list .container .col3 .field {
		width: 100%;
		margin-bottom: 10px;
	}

	.mailing-list .container .col3 .btn {
		text-align: left;
	}
}

@media screen and (max-width:359px) {
	.pagination ul {
		font-size: 24px;
		line-height: 30px;
	}

		.pagination ul li img {
			width: 18px;
		}

		.pagination ul li span {
			font-size: 24px;
			width: 35px;
			height: 25px;
			padding: 5px 0;
		}

		.pagination ul li a {
			font-size: 24px;
			width: 35px;
			height: 25px;
			padding: 5px 0;
		}

	.modal-body .container .settings {
		position: relative;
		text-align: right
	}
}

@media screen and (orientation:portrait) {
	.home-banner .container .banner-img {
		padding-top: 75vh;
		min-height: inherit;
	}

	.home-banner .container .banner-text {
		top: 35%;
		left: 50%;
		transform: translate(-50%,-35%);
		animation: anima_title_mobile 1s ease 0s 1 forwards;
	}

	.vision-mission .left {
		left: auto;
		opacity: 0.25;
	}

	.vision-mission .rgt {
		right: auto;
		opacity: 0.25;
	}

	.vision-mission.animation .left {
		animation: anima_fade_in_25 1s ease 0s 1 forwards;
	}

	.vision-mission.animation .rgt {
		animation: anima_fade_in_25 1s ease 0s 1 forwards;
	}
}

@media screen and (orientation:landscape) and (max-height:700px) {
	.home-banner .container .banner-img {
		padding-top: 75vh;
		min-height: inherit;
	}
}

@media screen and (max-height:599px) {
	.common-banner {
		height: auto;
		min-height: 0;
	}

		.common-banner .banner-bg {
			height: 100%;
			min-height: 0;
			position: absolute;
			left: 0;
			top: 0;
		}

		.common-banner .banner-text {
			position: relative;
			left: auto;
			top: auto;
			transform: none;
			padding: 20% 0 15% 0;
		}

	.common-login .container {
		min-height: 90vh;
		padding: 30vh 0 10vh 0;
	}

	.common-signup .container {
		min-height: 90vh;
	}
}

@media screen and (max-height:499px) {
	.sticky-chp-list .chp-list {
		max-height: 200px;
	}
}