/* Tablet specific stylesheet */

@media screen and (min-width: 750px) and (max-width: 1020px) {
	
	/* General styles
	---------------------------------------------------------------------------------------------- */
	
	#main {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		overflow:hidden;
	    position:relative;
	}	
	
	
	/* Header
	---------------------------------------------------------------------------------------------- */
	
	#header-wrapper {
		width: 100%;
		margin: 0 auto;
		padding: var(--tablet-header-wrapper-padding, 0);
		background-color: white;
	}
	
	#header {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: auto;
		min-height: 80px;
	}
	
	#branding {
		width: var(--tablet-branding-width, 92%); /*92%;*/
		height: 80px;
		margin: 0 4%;
		padding: 0;
		float: left;
	}
	
	a#advam-logo {
		display: block;
		float: left;
		width: var(--tablet-advam-logo-width, 190px); /*190px;*/
		height: 100%;
		background-image: var(--header-image-name, url('/styles/common/images/headerLogo.png'));
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	
	
	/* Navigation
	---------------------------------------------------------------------------------------------- */
	
	.mobile-menu-wrapper {
		float: right;
		margin: 25px 0 0 0;
		width: 20%;
		max-width: 30px;
		text-align: right;
	}
	
	a.menu-icon {
		width: 30px;
		height: 30px;
		display: block;
		background-image: url(images/icon-menu@2x.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 30px;
	}
	
	#navigation {
		display: none;
		float: none;
		margin: 0 0 0 0;
		width: 100%;
		padding: 0;
		height: auto;
		background-color: #fff;
		clear: both;
		overflow: hidden;
		/* position: absolute;
		top: 80px;
		z-index: 1000; */
	}
	
	ul.menu {
		list-style: none;
		margin: 0 0 0 0;
		height: auto;
		padding: 0;
		float: none;
	}
	
	ul.menu.logged-in {
		margin-top: 0;
	}
	
	ul.menu.logged-in li.menu-item {
		margin-left: 0;
	}
	
	#navigation ul.menu li.menu-item {
		float: none;
		font-size: 1.3em; /* 13px */
		line-height: 38px;
		text-transform: uppercase;
		margin-right: 0;
		font-style: normal;
		font-weight: normal;
	}
	
	li.menu-item {
		margin-left: 0;
	}
	
	li.menu-item a,
	li.menu-item a:link, 
	li.menu-item a:visited {
		display: block;
		height: 40px;
		padding: 0 3%;
		color: #555;
		background-color: #eee;
		text-decoration: none;
		margin: 0;
		border-bottom: 1px solid #ccc;
		width: 94%;
	}
	
	li.menu-item a:hover,
	li.menu-item a:active,
	li.current-menu-item a:link,
	li.current-menu-item a:visited {
		color: #61acec;
		border-bottom: 1px solid #ccc;
	}


	a#home-icon,
	a#topup-icon,
	a#modify-icon,
	a#password-icon,
	a#review-icon,
	a#close-icon,
	a#logout-icon,
	a#managepass-icon {
		/* background-image: none; */
		background-position: 4% center;
		padding-left: 8%;
	}
	a#review-invoice-icon {
	background-position:4.1% center;
	padding-left: 8%;
}


	/* Content
	---------------------------------------------------------------------------------------------- */
	
	#content {
		padding: 0;
	}
	
	#intro-text-home {
		width: 100%;
		/* height: 180px; */
		margin: 0 auto;
		text-align: center;
	}
	
	#intro-text {
		width: 100%;
		height: 80px;
		margin: 0 auto;
		text-align: center;
		margin-top: var(--intro-text-margin-top, 0);
	}
	
	.content-row {
		float: left;
		max-width: 100%;
		margin-right: 15px;
		margin-bottom: 15px;
	}
	
	body.entry-page .content-row {
		margin-bottom: 0;	
	}
	
	p.field-label {
		font-size: 1.3em; /* 13px */
		line-height: 20px;
		padding-top: 6px;
		float: left;
		clear: both;
	}
	
	.password-link {
		
	}
	
	.form-wrapper {
		width: 100%;
		background-color: var(--element-body-container-background-color-form-wrapper, white);
		float: left;
		padding: 25px 0;
		margin-bottom: 40px;
		border-radius: 0px;
	}


	/* Entry page
	---------------------------------------------------------------------------------------------- */
	
	.register-details,
	.content-wrapper {
		width: 100%;
		background-color: #ffffff;
		float: left;
		padding: 0;
		margin-bottom: 40px;
		border-radius: 0;
		margin-top: var(--register-details-margin-top, 30px);
	}
	
	.existing-customer {
		float: left;
		width: 92%;
		padding: 40px 4%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.new-customer {
		float: left;
		width: 92%;
		padding: 40px 4%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	
	
	/* Top up page
	---------------------------------------------------------------------------------------------- */
	
	.credit-card-details {
		float: left;
		width: 92%;
		background-color: var(--element-body-container-background-color-credit-card-details, white);
		padding: 40px 4%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	.account-summary {
		float: left;
		width: 92%;
		background-color: #f3fcfb;
		border-bottom: 1px solid #9bd7d4;
		padding: 40px 4%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.account-summary .content-row {
		margin-bottom: 0;
	}
	
	.user-summary {
		float: left;
		width: 90%;
		background-color: var(--element-body-container-background-color-user-summary, #eeeeee); /*#eeeeee;*/
		border-bottom: var(--element-body-container-border-bottom-user-summary, 1px solid #cccccc);
		padding: 30px 5%;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}
	
	.user-summary .content-row {
		margin-bottom: 0;
	}
	
	.account-summary p,
	.user-summary p {
		font-size: 1.5em; /* 15px */
		line-height: 40px;
		margin: 0;
	}
	
	.account-summary .register-input {
		background-color: #ffffff;
		border: 1px solid #9bd7d4;
		color: #00a59d;
		font-weight: 600;
	}

	#changePasswordForm .register-input{
	font-size:1.4em;
	}
	
	
	
	/* Steps styling
	---------------------------------------------------------------------------------------------- */
	
	.steps-header {
		width: 92%;
		background-color: #f4f4f4;
		border-top: 1px solid #cccccc;
		float: left;
		padding: 15px 4%;
	}
	
	.steps-header.open-step {
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
	}
	
	.steps-header:last-child {
		border-bottom: 1px solid #cccccc;
	}
	
	.steps-header h2 {
		padding-bottom: 0;
		line-height: 42px;
	}
	
	.steps-wrapper {
		float: left;
		width: 92%;
		padding: 0 4% 25px 4%;
	}
	
	.step-number {
		font-size: 2.5em; /* 25px */
		line-height: 40px;
		float: left;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: block;
		text-align: center;
		margin-right: 15px;
	}
	
	.steps-header.open-step .step-number {
		background-color: #bbdde6;
		border: 1px solid #bbdde6;
		color: white;
	}
	
	.steps-header.closed-step .step-number {
		background-color: #f8f8f8;
		border: 1px solid #cccccc;
		color: #777777;
	}

	
	
	/* Buttons
	---------------------------------------------------------------------------------------------- */
	
	.blue-button {
		width: 100%;
	}
	
	.green-button {
		width: 100%;
	}
	
	.right-side {
		width: 100%;
		float: right;
	}
	
	.left-side {
		float: left;
	}
	
	.radio-button {
		margin-right: 10px;
	}
	
	.check-box {
		margin-right: 10px;
	}
	
	.right-side.complete-reg {
		width: 50%;
		max-width: 250px;
	}
	
	
	/* Input fields
	---------------------------------------------------------------------------------------------- */
	
	.content-row {
		margin-right: 2%;
	}
	
	.content-row.one-col {
		width: 10.6%;
	}
	
	.content-row.two-col {
		width: 23.4%;
	}
	
	.content-row.three-col {
		width: 36.1%;
	}
	
	.content-row.four-col {
		width: 48.9%;
	}
	
	.content-row.five-col {
		width: 61.7%;
	}
	
	.content-row.six-col {
		width: 74.4%;
	}
	
	.content-row.seven-col {
		width: 87.2%;
	}
	
	.content-row.eight-col {
		width: 100%;
	}
	
	.content-row.last-child {
		margin-right: 0;
	}
	
	img.credit-card-icon {
		width: 21%;
		height: auto;
		float: left;
		border: 0 none;
		margin-right: 5%;
		margin-bottom:5px;
	}

	.register-select {
		background-image: url(images/select-arrow.png);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: auto 40%;
	}
	
	.calendar-input {
		width: calc(100% - 40px);
	}
	
	.calendar-link {
		float: left;
		display: block;
		width: 22px;
		height: 22px;
		margin-left: 7px;
	}
	
	
	.calendar-icon {
		width: 22px;
		height: 22px;
	}

	
	/* Typography
	---------------------------------------------------------------------------------------------- */
	
	h1.entry-header {
		font-size: 3.2em; /* 36px */
		line-height: 40px;
		color: var(--element-header-h1-entry-color, white);
		font-weight: var(--element-header-h1-entry-font-weight, 300);
		/* padding: 65px 0; */
	}

	
	
	/* Footer
	---------------------------------------------------------------------------------------------- */
	
	#footer {
		margin: 0;
		background-color: #363636;
		border-top: 1px solid #000000;
	}
	
	#footer-text {
		width: 92%;
		margin: 0 4%;
		padding: 20px 0;
	}
	
	#footer-text p {
		font-size: 1.2em; /* 12px */
		color: #999999;
		font-weight: 400;
	}
	
	#footer-text p br {
		display: none;
	}
	
	img.footer-logo {
		max-width: 180px;
		height: auto;
	}

	.register-details, .content-wrapper, #content > form{
		width:100%;
	}

	.additional-link-wrap {
		float: left;
		width: 92%;
		padding: 10px 4%;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	#additional-link-title {
		width: 420px !important;
		padding-top: 5px !important;
	}
	
}