@import url(../common.css);
@import url(header.css);
@import url(navmenu-banner.css);
@import url(footer.css);
@import url(decorations.css);

.banner {margin:10px auto 0;padding:5px;width:600px;height:270px;background:url(img/head-bkgd.png) no-repeat}

.stomach {margin:10px auto;}
.stomach .leftarea {float:left;max-width:0px;}
.stomach .rightarea {float:right;max-width:120px;}
.stomach .content {margin:0 0 0 0;max-width:500px;}


#ad1 {display:block;width:600px;height:270px;overflow:hidden;text-align:center}
#ad1 * {display:block;width:600px;height:270px}

#ad7 {display:block;width:130px;height:66px;overflow:hidden;text-align:center}
#ad7 * {display:block;width:130px;height:66px}

.bottomarea {
	margin: 0 auto;
	padding: 0 0 15px;
	width: 600px;
}

.topic {
	color: black;
    font-weight: bold;
    font-size: 1.5rem;
	text-transform: uppercase;
}

.not-uppercase-topic {
	color: black;
    font-weight: bold;
    font-size: 1.5rem;
}

.learn-more {
	text-decoration: none;
	color: #fe7800;
}

.learn-more::after {
	border-color: #fe7800 #fe7800 transparent transparent;
}

.payment-partners-section {
	/*margin: 2rem;*/
}

.payment-partners-section .img-container {
	text-align: center;
	/*margin: 0 20%;*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: center;*/
}

.payment-partners-section .img-container .pp-img {
	margin: 0.5rem;
	/*width: 70px;
    height: 32px;*/
}

.payment-partners-section .img-container img {
    /*width: 100%;*/
	max-width: 70px;
    max-height: 32px;
}

.features-section {
	margin: 4rem 0 2rem 0;
	text-align: center;
	
	display: flex;
	
	background-image: url(img/element1.png);
	background-size: contain;
    background-repeat: no-repeat;
}

.features-section .features-list {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	padding: 1.5rem 5%;
}

.features-section .features-list .feature .icon-container {
	border-radius: 50%;
	/*opacity: 70%;*/
	
	padding: 1rem;
    width: fit-content;
    margin: 0 auto;
	transition: 0.5s linear;
}

.features-section .features-list .feature .title {
	font-weight: bold;
	margin: 1rem 0;
	text-transform: inherit;
}

.features-section .features-list .feature {
	border-radius: 0.5rem;
	/*border-bottom: 1rem solid;*/
	background-color: white;
	padding: 2.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	flex: 1 1 100%;
    margin: 0 0.5rem;
	
	transition: all 0.5s linear;
	position: relative;
	overflow: hidden;
}

.features-section .features-list .feature::before {
	content: "";
	transform: translateY(calc(100% - 1rem));
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transition: all 0.5s;
}

.features-section .features-list .feature .icon-container, .features-section .features-list .feature .title, .features-section .features-list .feature .caption {
	position: relative;
}

.features-section .features-list .feature:hover::before {
	transform: translateY(0);
}

.features-section .features-list .feature:hover .icon-container {
	background-color: white;
	opacity: 1;
}

.features-section .features-list .feature:hover {
	color: white;
}

.features-section .features-list .multi-channels {
	border-color: #ff9e26;
}

.features-section .features-list .multi-channels::before {
	background-color: #ff9e26;
}

.features-section .features-list .multi-channels .icon-container {
	background-color: #ff9e2654;
}

.features-section .features-list .seamless-integration {
	border-color: #4ac1fe;
}

.features-section .features-list .seamless-integration::before {
	background-color: #4ac1fe;
}

.features-section .features-list .seamless-integration .icon-container {
	background-color: #4ac1fe54;
}

.features-section .features-list .value-added-solution {
	border-color: #2fdf69;
}

.features-section .features-list .value-added-solution::before {
	background-color: #2fdf69;
}

.features-section .features-list .value-added-solution .icon-container {
	background-color: #2fdf6954;
}

.features-section .features-list .robust-and-secure {
	border-color: #ff4c4c;
}

.features-section .features-list .robust-and-secure::before {
	background-color: #ff4c4c;
}

.features-section .features-list .robust-and-secure .icon-container {
	background-color: #ff4c4c54;
}

.takeaway-self-service {
	display: flex;
	align-items: center;
	padding: 2rem 5%;
	
	background-image: url(img/element21.png), url(img/element22.png);
    /*background-repeat: no-repeat;
    background-position: right center;*/
}

.one-stop-management {
	display: flex;
	align-items: center;
	padding: 2rem 5%;
	
	background-image: url(img/element21.png), url(img/element22.png);
    /*background-repeat: no-repeat;
    background-position: right center;*/
}

.who-we-are-section {
	display: flex;
	align-items: center;
	padding: 2rem 5%;
	
	background-image: url(img/element21.png), url(img/element22.png);
	
    /*background-repeat: no-repeat;
    background-position: right center;*/
}

.body-background {
	background-size: contain;
}

.takeaway-self-service .image-section {
	background: url(img/element2.png) no-repeat;
	background-size: contain;
	
	
	flex: 40%;
	margin-right: 2rem;
	 text-align: right; 
}

.takeaway-self-service .image-section img {
	border-radius: 50%;
	height: 25rem;
	width: 25rem;
}

.takeaway-self-service .text-section {
	flex: 50%;
}

.takeaway-self-service .text-section .description {
	margin: 1rem 0;
	line-height: 2;
}

.one-stop-management .image-section {
	background: url(img/element2.png) no-repeat;
	background-size: contain;
	
	flex: 40%;
	margin-right: 2rem;
}

.one-stop-management .text-section {
	flex: 50%;
}

.one-stop-management .text-section .description {
	margin: 1rem 0;
	line-height: 2;
}

.who-we-are-section .image-section {
	background: url(img/element2.png) no-repeat;
	background-size: contain;
	
	flex: 40%;
	margin-right: 2rem;
	 text-align: right; 
}

.who-we-are-section .image-section img {
	height: 25rem;
	width: 25rem;
}

.who-we-are-section .text-section {
	flex: 50%;
}

.who-we-are-section .text-section .description {
	margin: 1rem 0;
	line-height: 2;
}

.mobile-one-stop-management{
	display:none;
}

.octopus-authorized-section {
	display: flex;
	align-items: center;
	padding: 2rem 5%;
}

.octopus-authorized-section .image-section {
	background: url(img/element2.png) no-repeat;
	background-size: contain;
	
	flex: 40%;
	margin-right: 2rem;
}

.octopus-authorized-section .text-section {
	flex: 50%;
}

.octopus-authorized-section .text-section .description {
	margin: 1rem 0;
}

.inquiry-now-container{
		margin-top: 1rem;
    height: 25vh;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
}

.inquiry-now-container img{
	z-index: -1;
    max-width: unset;
    max-height: unset;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    object-fit: cover;
    text-align: center;

}

.inquiry-text{
	font-size: 1.5rem;
    word-spacing: 4;
    color:white;
}

.inquiry-now-button{
	border-radius: 0.5rem;
  background-color: #fe6400;
  color: white;
  border: 1px solid white;
  padding: 0.6rem 3.2rem;
  font-family: 'Lato';
  font-size: 1rem;
}


.app-lang-zh_cn .enquiry-text{
	word-spacing: unset;
	font-size: 2rem;
  	letter-spacing: 4;
}

.app-lang-zh_tw .enquiry-text{
	word-spacing: unset;
	font-size: 2rem;
  	letter-spacing: 4;
}


.app-lang-en .eat2go-enquiry-container .enquiry-button{
	position: absolute;
	border-radius: 0.5rem;
    background-color: #fe6400;
    color: white;
    border: 1px solid white;
    padding: 0.6rem 3.2rem;
	font-family: 'Lato';
	top: 13rem;
	left: 50rem;
 	font-size: 1rem;
}


.app-lang-zh_cn .eat2go-enquiry-container .enquiry-button{
 	letter-spacing: 2;
}


.app-lang-zh_tw .eat2go-enquiry-container .enquiry-button{
 	letter-spacing: 2;
}


/*.who-we-are-section {
	background-image: linear-gradient(top, #f2f2f2, #f2f2f2 70%, transparent 70%, transparent 100%);
    background-image: -webkit-linear-gradient(top, #f2f2f2, #f2f2f2 70%, transparent 70%, transparent 100%);
    padding: 2rem 10%;
    margin: 2rem 0;
    text-align: center;
}

.who-we-are-section .topic {
	color: #fe7800;
	font-size: 1.5rem;
}

.who-we-are-section .description {
	margin: 1.5rem 0;
}

.who-we-are-section .key-concept-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.who-we-are-section .key-concept-container .key-concept-block {
	border-radius: 0.5rem;
	border-top: 1rem solid #fe7800;
	background-color: white;
	padding: 2.5rem;
	width: 25%;
	margin-bottom: 2rem;
	
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.who-we-are-section .key-concept-container .key-concept-block img {
    width: 90px;
}

.who-we-are-section .key-concept-container .key-concept-block .title {
	font-weight: bold;
	margin-top: 1rem;
}

.who-we-are-section .key-concept-container .key-concept-block .caption {
	margin: 1rem 0;
}*/

.accept-payments-section {
	text-align: center;
	padding: 0 15%;
}

.accept-payments-section .topic {
	/*color: black;
	font-weight: bold;
	font-size: 1.5rem;*/
	margin: 0 -15%;
	text-transform: inherit;
}

.accept-payments-section .content-row {
	display: flex;
	justify-content: space-between;
	
	margin: 2rem 0;
}

.accept-payments-section .content-row .content {
	position: relative;
	width: 30%;
	height: auto;
	margin-bottom: 1rem;
}

.accept-payments-section .content-row .content img {
	width: 100%;
}

.accept-payments-section .content-row .content .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.8;
    background-color: black;
    color: white;
    padding: 0.5rem;
    max-height: 1.4rem;
    overflow: hidden;
	text-decoration: none;
}

.accept-payments-section .content-row .content .caption.no-caption-content {
	overflow: visible;
	max-height: 50%;
}

.accept-payments-section .content-row .content:hover .caption {
	max-height: 50%;
	transition: 2s;
}

.accept-payments-section .content-row .content .caption .caption-title {
	font-weight: bold;
}

.accept-payments-section .content-row .content .caption .caption-content {
	/*display: none;*/
	margin-top: 0.5rem;
	text-align: start;
}

.shop-2-go-section {
	background-color: #f2f2f2;
	padding: 1rem 10% 0 10%;
}

.shop-2-go-section .title {
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: inherit;
}

.shop-2-go-section .feature-container {
	display: flex;
    align-items: center;
	margin-top: 1rem;
}

.shop-2-go-section .feature-container .left-section {
	/*width: 60%;*/
	flex: 0 1 60%;
}

.shop-2-go-section .feature-container .left-section .sub-title {
	color: #e13e71;
}

.shop-2-go-section .feature-container .left-section .sub-content {
	margin: 1.5rem 0;
}

/*.shop-2-go-section .feature-container .left-section .learn-more {
	text-decoration: none;
	color: #fe7800;
}

.shop-2-go-section .feature-container .left-section .learn-more::after {
	border-color: #fe7800 #fe7800 transparent transparent;
}*/

.shop-2-go-section .feature-container .right-section {
	align-items: flex-end;
}

.apply-account-section {
	background-color: #edc28f;
	padding: 1rem 15%;
}

.apply-account-section .title {
	font-weight: bold;
	font-size: 1.5rem;
}

.apply-account-section .steps-row {
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
}

.apply-account-section .steps-row .step-container {
	width: 30%;
}

.apply-account-section .steps-row .step-container div {
    margin-bottom: 1rem;
}

.apply-account-section .steps-row .step-container .step-index {
	background-color: #fe7800;
	border-radius: 50%;
	color: white;
	width: 2rem;
	height: 2rem;
	display: flex;
    align-items: center;
    justify-content: center;
}

.apply-account-section .steps-row .step-container .step-title {
	font-weight: bold;
}

.apply-account-section .steps-row .step-container .step-content {
	
}

/*.apply-account-section .get-started {
	border-radius: 0.5rem;
	background-color: #fe6400;
    color: white;
    border: transparent;
	padding: 0.5rem 2rem;
}*/

.header {
	background-image:url(img/head-bkgd.png);
}

/*.header-content {
	color: black;
	max-width: 680px;
	width: 680px;
}*/

/*#nav-bar .nav-name, #nav-bar .nav-name a, .lang-and-get-started a {
	color: black;
}

.lang-and-get-started .lang-seperator {
	border-color: black;
}*/

/*.header-content .text-section {
	margin-right: 3rem;
	width: 50%;
}

.header-content .image-section {
	position: relative;
	background-image:url(img/head-bkgd.png);
}

.header-content .image-section .image-container {
	display: flex;
	transform: rotateZ(10deg);
	position: absolute;
}*/

.image-container {
	display: flex;
}

.header-image-container {
	transform: rotateZ(15deg);
}

#pop-up-area {
	display: none;
	position: fixed;
	/*position: absolute;*/
	z-index: 11;
	max-width: 80vw;
	max-height: 90vh;
	overflow: auto;
	background-color: white;
	margin-top: 2.5%;
    border-radius: 5px;
    box-shadow: #505050 0 0 5px 0;
    margin: auto;
    left: 0;
    right: 0;
    /*top: 5vh;*/
    width: fit-content;
    justify-content: flex-end;
    top: 0;
    bottom: 0;
    height: fit-content;
    width: fit-content;
}

#pop-up-area img {
	margin: auto;
	display: flex;
}

/*.close-button {
	color: #aaa;
  	float: right;
 	font-size: 28px;
  	font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}*/

.popup-dialog-close {
    flex: 0 0 auto;
    text-align: right;
    position: absolute;
}

.popup-dialog-close-btn {
    border-radius: 50%;
    background: #aaa;
    color: white;
    width: 40px;
    height: 40px;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.popup-dialog-close-btn.focus, .popup-dialog-close-btn:focus, .popup-dialog-close-btn:hover {
    color: #333;
    text-decoration: none;
}

.close {
	font-size: 1.5rem;
    font-weight: bold;
}

.pop-up-area img {
	max-width: calc(80vw - 60px);
}

@media screen and (max-width: 1199px) {
	/*.who-we-are-section {
		background-image: linear-gradient(top, #f2f2f2, #f2f2f2 85%, transparent 85%, transparent 100%);
	    background-image: -webkit-linear-gradient(top, #f2f2f2, #f2f2f2 85%, transparent 85%, transparent 100%);
	}
	
	.who-we-are-section .key-concept-container, .accept-payments-section .content-row {
		flex-direction: column;
		align-items: center;
		margin-top: 2rem;
	}
	
	.who-we-are-section .key-concept-container .key-concept-block {
		width: 100%;
		padding: 1rem;
		border-width: 1.5rem;
	}*/
	
	.accept-payments-section .content-row .content {
		width: 100%;
		padding: 0;
		border-width: 1.5rem;
	}
	
	.features-section .features-list, .accept-payments-section .content-row {
		flex-direction: column;
	}
	
	.features-section .features-list .feature {
		margin-bottom: 1.5rem;
	}
	
	.who-we-are-section {
		flex-direction: column;
	}
	
	.who-we-are-section .image-section {
		margin-bottom: 1.5rem;
		margin-right: 0;
	}
	
	.takeaway-self-service {
	flex-direction: column;
}
	
	.takeaway-self-service .image-section {
	margin-bottom: 1.5rem;
		margin-right: 0;
}

	.mobile-one-stop-management  {
	flex-direction: column;
		display: flex;
	align-items: center;
	padding: 2rem 5%;
	
	background-image: url(img/element21.png), url(img/element22.png);
    /*background-repeat: no-repeat;
    background-position: right center;*/
}

	.mobile-one-stop-management .image-section {
	background: url(img/element2.png) no-repeat;
	background-size: contain;
	
	flex: 40%;
	margin-right: 0;
	margin-bottom: 1.5rem;
	}

	.mobile-one-stop-management .text-section {
	flex: 50%;
	}
	
	
	.mobile-one-stop-management .text-section .description {
	margin: 1rem 0;
	line-height: 2;
	}
	

	.one-stop-management  {
		display:none
	}
	




}

@media screen and (min-width: 900px) {
	.header {
		background-image:url(img/head-bkgd.png);
		background-size: auto 600px;
		min-height: 600px;
		background-position: right top;
	}
	
	.header-image-section {
		justify-content: flex-end;
	}
	
	.header-image-container {
		/*display: flex;
		position: absolute;
		margin-left: 700px;
		top: 12rem;
		height: 500px;
		z-index: 2;
		transform: rotateZ(15deg);*/
		margin-left: 0;
		margin-right: -13rem;
	}
	
	.header-image-container .mpos {
		min-height: 491px;
		min-width: 235px;
		max-height: 491px;
		max-width: 235px;
	}

	.header-image-container .mobile {
		min-height: 391px;
		min-width: 198px;
		max-height: 391px;
		max-width: 198px;
	}

	.header-image-container .tablet {
		min-height: 247px;
		min-width: 350px;
		max-height: 247px;
		max-width: 350px;
	}
	
	.header-image-container img {
		align-self: center;
	}
}

@media screen and (max-width: 599px) {
	.payment-partners-section {
		text-align: center;
		margin: 2rem 0rem;
	}
	
	.payment-partners-section .img-container {
		margin: 0;
	}
	
	.shop-2-go-section .feature-container {
		flex-direction: column;
	}
	
	.shop-2-go-section .feature-container .left-section, .shop-2-go-section .feature-container .right-section {
		width: 100%;
		flex: 1 1 auto;
	}
	
	.header-content {
		top: 0;
	}
	
	.payment-partners-section .img-container .pp-img {
		/*min-width: 35%;*/
		max-width: 40%;
	}
	
	.shop-2-go-section .feature-container .right-section {
		margin-top: 1.5rem;
	}
	
	.apply-account-section .steps-row {
		flex-direction: column;
	}
	
	.apply-account-section .steps-row .step-container {
		width: 100%;
		margin-bottom: 1.5rem;
	}
	
	.apply-account-section .steps-row .step-container .mobile-title {
		align-items: center;
		display: flex;
	}
	
	.apply-account-section .steps-row .step-container .step-index {
		margin-right: 1rem;
	}
	
	.features-section {
		margin: 0;
	}
	
	/*.header-image-section .header-image-container {
		transform: none;
		position: inherit;
		margin-left: 0;
		top: 0;
		flex-direction: column;
	}
	
	.header-image-section .header-image-container img {
		margin: 0 auto;
		min-width: 0px;
		min-height: 0px;
	}*/
}

@media screen and (max-width: 1199px) {
	.header-content-container {
		padding: 6rem 5%;
	}
}

@media screen and (max-width: 1499px) {
	.header-content-container {
		padding: 13rem 5% 1rem 5%;
		margin: 0;
	}
	
	.payment-partners-section .img-container .pp-img {
		min-width: calc(12.5% - 1rem);
	}
}