@media only screen and (min-width: 1023px) {
	
	.content-container{
		max-width: 980px;
	}
	.landing-section{
		padding:0;
	}
	.landing-section .content,
	.landing-section .heading-block{
		max-width: 430px;
	}
	.landing-section .heading{
		font-size: 48px;
		bottom: 60px;
	}
	.landing-section .heading span.text-2{
		font-size: 60px;
	}
	.landing-section .centered-page .heading-block{
		max-width: 185px;
		position: absolute;
	}
	.landing-section .centered-page .heading{
		font-size: 24px;
	}
	.landing-section .centered-page .heading span.text-2{
		font-size: 32px;
	}
	.trapazium-box{
		max-width: 310px;
		font-size: 17px;
		margin: 8px auto;
		padding: 10px 5px;
	}
	.imagethumb{
		max-width: 300px;
		margin: 0 auto;
	}

	div#CaringSG canvas {
	    margin-top: 40px !important;
	}
}

@media only screen and (max-width: 1200px) {
	.chat-bubble{
		right: -45px;
    	max-width: 100px;
	}
}

@media only screen and (max-width: 1100px) {
	.landing-section .image-box .image {
    	width: calc(100% + 15px);
    	margin-left: -45px;
    }
    .landing-section .image-box {
	    padding-top: 100px;
	}
	.chat-bubble{
		right: -30px;
	}
}

@media only screen and (max-width: 990px) {
	.landing-section .heading span.text-2 {
	    font-size: 60px;
	}
	.landing-section .heading {
	    font-size: 50px;
	}
	.landing-section .heading-block{
		max-width: 410px;
	}
	.landing-section .content{
		max-width: 410px;
		margin-top: 20px;
	}
	.landing-section .content p.test-text{
		max-width: 360px;
	}
	.landing-section:not(.stage-completed) .game-section .arrow-btn {
	    right: 0px;
	    max-width: 150px;
	}
	.landing-section .image-box .image{
		width: 100%;
		margin-left: -25px;
	}
	.trapazium-box{
		font-size: 16px;
		margin: 10px auto;
		max-width: 300px;
	}
	.landing-section .centered-page .heading-block{
		max-width: 120px;
	}
	.landing-section .centered-page .heading{
		font-size: 14px;
	}
	.landing-section .centered-page .heading span.text-2{
		font-size: 20px;
	}
	#CaringSG{
		margin-top: -20px;
	}
	#CaringSG canvas{
      margin-top: -20px!important;
    }
}

@media only screen and (max-width: 767px) {
	.landing-section .heading span.text-2 {
	    font-size: 50px;
	}
	.landing-section .heading {
	    font-size: 40px;
	}
	.landing-section .content{
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.landing-section {
	    padding: 15px 0 15px;
	}
	.chat-bubble{
		max-width: 70px;
	}
	.landing-section:not(.stage-completed) .game-section .arrow-btn{
		max-width: 100px;
		bottom: 0;
	}
	.trapazium-box{
		max-width: calc(100% - 110px);
		font-size: 2.1vw;
	}
}

@media only screen and (max-width: 639px){
	.landing-section .flex{
		flex-wrap: wrap;
	}
	.text-box{
		flex: 0 0 100%;
	}
	.landing-section .image-box .image{
		margin-left: 0px;
	}
	.landing-section .image-box{
		padding-top: 5px;
	}
	.m-show{
	    display: block;
	}
	.w-hide{
		display: none;
	}
	.container{
		padding-left: 40px;
		padding-right: 40px;
	}
	.chat-bubble{
		max-width: 110px;
		top: 10%;
	}
	.arrow-btn{
		margin-right: auto;
	}
	.landing-section .heading-block{
		margin-left: auto;
		margin-right: auto;
	}
	.landing-section .content{
		max-width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}
	.landing-section .content p,
	.landing-section .content p.test-text{
		max-width: 100%;
	}
	.landing-section .image-box .image .content{
		max-width: 50%;
		padding: 0;
		margin-right: unset;
		margin-left: unset;
		position: relative;
		z-index: 1;
	}
	.landing-section .image-box .image .content .note{
		text-align: left;
		font-size: 10px;
		margin: 0;
		padding-left: 30px;
		max-width: 85%;
		margin-top: 15px;
	}
	.landing-section .image-box .image .person{
		position: relative;
		z-index: 0;
	}
	.popup .popup-content .frames > .col:nth-child(1),
	.popup .popup-content .frames > .col:nth-child(2),
	.popup .popup-content .frames > .col:nth-child(3){
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.popup .popup-content .frames{
		overflow-x: auto;
	}
	.popup .popup-content .status-bar{
		max-width: 100%;
		justify-content: center;
	}
	.popup .popup-content .frames::-webkit-scrollbar{
		display: none;
	}
	.trapazium-box{
		font-size: 18px;
		padding: 10px 5px;
		max-width: 335px;
	}
	.landing-section .heading{
		bottom: -15px;
		font-size: 45px;
	}
	.landing-section .heading span.text-2 {
	    font-size: 60px;
	}
	.popup .popup-content .frames .text{
		word-break: break-word;
	}
	.popup .popup-content .status-bar .popup-heading{
		max-width: 120px;
	}
	.popup .popup-content .frames .frame {
		padding: 80px 15px 30px;
		text-align: center;
	}
	.popup .popup-content{
		padding: 10px 15px;
	}
}

@media only screen and (max-width: 480px){
	.landing-section .content{
		padding-left: 0px;
		padding-right: 0px;
	}
	.container{
		padding-left: 15px;
		padding-right: 15px;
		max-width: 100%;
	}
	.chat-bubble{
		max-width: 70px;
		right: -10px;
		top: 15%;
	}
	.arrow-btn{
		max-width: 120px;
		margin-top: -35px;
	}
	.landing-section .heading{
		font-size: 10vw;
		bottom: -4vw;
	}
	.landing-section .heading span.text-2{
		font-size: 13vw;
	}
	.landing-section .image-box .image .content .note{
		max-width: 95%;
		font-size: 8px;
	    margin-bottom: 10px;
	    margin-top: 5px;
	    padding-left: 15px;
	}
	.trapazium-box {
    	max-width: calc(100% - 50px);
    	font-size: 4vw;
	}
}