@CHARSET "ISO-8859-1";

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/OpenSans-Regular.eot) format('embedded-opentype'),
		url(../fonts/OpenSans-Regular.woff) format('woff'),
		url(../fonts/OpenSans-Regular.woff2) format('woff2'),
		url(../fonts/OpenSans-Regularttf) format('truetype'),
		url(../fonts/OpenSans-Regular.svg) format('svg');
}

@font-face {
	font-family: 'Open Sans Semibold';
	font-style: normal;
	src: url(../fonts/OpenSans-Semibold.eot) format('embedded-opentype'),
		url(../fonts/OpenSans-Semibold.woff) format('woff'),
		url(../fonts/OpenSans-Semibold.woff2) format('woff2'),
		url(../fonts/OpenSans-Semibold) format('truetype'),
		url(../fonts/OpenSans-Semibold.svg) format('svg');
}

.header-border {
	border: none;
}

.hamburger-login-menu-button {
	width: 15%;
	background-color: #004770;
	text-align: center;
	background-image: url('../images/login-mobile-icon.png');
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 50%;
	cursor: pointer;
	display: table-cell;
}

.main-content-wrapper {
	padding: 0;
	background-color: #ffffff;
	background-image: url('../images/login_background_desktop.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.metlife-login-wrapper {
	position: relative;
	background-image: url('../images/loginbg_mobile.gif');
	background-repeat: no-repeat;
	background-size: 302px;
	min-height: 100%;
	background-position-x: 50%;
}

.logo-container {
	width: 85%;
}

.login-block-wrapper {
	width: 302px;
	background-color: #007ac7;
	float: none;
	margin: 0px auto;
	opacity: 0.9;
	border-radius: 3px;
}

.login-heading-container {
	text-align: center;
	width: 100%;
	height: 52px;
	color: #ffffff;
	font-size: 24px;
	font-family: Open Sans;
	line-height: 52px;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	font-weight: bold;
}

.login-body-container {
	padding: 0px 18px;
	padding-bottom: 15px;
}
.login-account {
		clear: both;
}
.dropdown-wrapper {
	height: 40px;
	width: 100%;
	border-radius: 5px;
	color: #999999;
	font-size: 12px;
	background: #ffffff;
	font-family: Open Sans;
	float: right;
	background-image: url('../images/select-dropdown-icon.png');
	background-repeat: no-repeat;
	background-position: 98%;
}

.login-body-container select {
	height: 40px;
	width: 100%;
	background: none repeat scroll 0 0 transparent;
	padding-left: 15px;
}

.login-input-box {
	height: 40px;
	width: 100%;
	border-radius: 5px;
	padding-left: 15px;
	color: #999999;
	font-size: 12px;
	font-family: Open Sans;
	margin-top: 9px;
}

.login-button {
	border: none;
	outline: none;
	box-shadow: none;
	height: 42px;
	width: 100%;
	text-align: center;
	background-color: #85c93a;
	margin-top: 9px;
	border-radius: 5px;
	font-size: 17px;
	color: #ffffff;
	font-weight: bold;
	font-family: Open Sans;
}

.login-subtext {
	color: #ffffff;
	font-size: 12.5px;
	font-family: Open Sans;
	text-align: right;
	padding-top: 18px;
}

.login-subtext span {
	cursor: pointer;
}

.account-locked-text {
	padding-top: 15px;
}

.new-user-block {
	width: 100%;
	height: 41px;
	color: #ffffff;
	text-align: center;
	background-color: #02446e;
	font-size: 12px;
	font-family: Open Sans;
	line-height: 41px;
	cursor: pointer;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.new-user-block a {
	display: block;
	width: 100%;
	height: 41px;
	color: #ffffff;
	font-size: 12px;
	font-family: Open Sans;
	color: #ffffff;
}

.desktop-container {
	max-width: 1200px;
	float: none;
	margin: 0px auto;
	position: static;
	padding-top: 198px;
	position: relative;
}

.mobile-background-img {
	display: block;
	width: 100%;
	height: 302px;
	position: absolute;
}

.desktop-background-img {
	position: absolute;
}

.login-account>span,.metlife-welcome-message-container,.desktop-background-img,.metlife-help-wrapper
	{
	display: none;
}

#mobile-number-list {
	width: 292px;
	height: 51%;
	max-height: 340px;
}

#mobile-number-list .popup-body {
	height: 80%;
}

.helpline-number-list li {
	height: 30px;
	width: 50%;
	float: left;
	margin: 5px 0px;
}

.helpline-numbers,.helpline-numbers:link,.helpline-numbers:hover,.helpline-numbers:active,.helpline-numbers:visited
	{
	font-family: Open Sans;
	font-size: 12px;
	color: #007cc2;
}
.helpline-numbers a:link,.helpline-numbers a:hover,.helpline-numbers a:active,.helpline-numbers a:visited
	{
	font-family: Open Sans;
	font-size: 12px;
	color: #007cc2;
}
#forgot_password {
	height: 250px;
}

#forgot_password .error-message {
	margin-top: 0;
	margin-bottom: 20px;
}

.display-colon {
	display: none;
}

.forgot-password-text {
	display: block;
	font-family: Open Sans;
	font-size: 13px;
}

.forgot-password-input {
	border: 1px solid #adc9dc;
	border-radius: 3px;
	height: 34px;
	margin-top: 10px;
	width: 100%;
	color: #666666;
	padding: 6px 12px;
}

.forgot-password-action-btns {
	margin-top: 15px;
	text-align: center;
}

.forgot-password-submit,.forgot-password-close,.forgot-password-only-close {
	height: 37px;
	width: 90px;
	border-radius: 3px;
	border: 1px solid transparent;
	font-size: 17px;
	font-family: Open Sans Semibold;
	margin: 0px auto;
    display: inline-block;
    line-height: 37px;
}

.forgot-password-submit,.forgot-password-only-close {
	background-color: #77a22f;
	color: #ffffff;
	margin-right: 7px;
}

.forgot-password-close {
	background-color: #dadada;
	color: #333333;
}
.forgot-password-close a,.forgot-password-close a:link,.forgot-password-close a:hover,.forgot-password-close a:active,.forgot-password-close a:visited{
	color: #333333;
	font-family: Open Sans Semibold;
}
.success-message-forgotpassword {
	font-size: 13px;
	position: relative;
	font-family: Open Sans;
	border: 1px solid #74af33;
	background-color: #dcefdc;
	color: #74af33;
	clear: both;
	border-radius: 5px;
	padding: 10px;
	margin-top: -20px;
	float: left;
	width: 100%;
	display: none;
	margin-bottom: 20px;
}

.success-message-forgotpassword img {
	position: absolute;
}

.success-message-forgotpassword span {
	display: inline-block;
	margin-left: 25px;
}
.call-list {
	border-spacing: 0px 10px;
	border-collapse: separate;
}

.call-list td {
	width: 50%;
	margin-top: 5px;
	border: 1px solid;
	vertical-align: top;
	padding: 1px 5px;
}

.call-list .call-list-country {
	width: 30%;
}
.forgot-password-action-btns{
    overflow: hidden;
    width: 100%;
    }
    .cancel-btn:link,.cancel-btn:hover,.cancel-btn:active,.cancel-btn:visited{
    color:#333333;
    }
    
@media ( min-width :768px) {
		.main-content-wrapper {
    padding: 0;
    background-color: #ffffff;
    background-image: url('../images/login_background_desktop.png');
    background-repeat: no-repeat;
    background-size: 100% 555px;
}
	
	.hamburger-login-menu-button,.mobile-background-img {
		display: none;
	}
	.desktop-background-img {
		display: block;
		height: 555px;
		width: 100%;
	}
	.metlife-login-wrapper {
		position: relative;
		background-image: url('../images/loginbg_desktop.gif');
		background-repeat: no-repeat;
		    background-size: 100% 555px;
    height: 555px;
    background-position-y: inherit;
	}
	.metlife-welcome-message-container {
		display: block;
	}
	.metlife-welcome-message-container {
		position: absolute;
		top: 71px;
		padding-left: 25px;
		background-color: rgba(252, 253, 255, 0.6);
		width: 100%;
		max-width: 1200px;
	}
	.mymetlife-welcome-header {
		font-family: Open Sans Semibold;
		font-size: 34px;
		color: #0c192b;
		display: block;
		padding-top: 20px;
		text-align: center;
	}
	.mymetlife-welcome-description {
		display: block;
		color: #1e1f20;
		font-size: 16px;
		font-family: Open Sans;
		padding-top: 23px;
		text-align: center;
	}
	.add-to-favorites {
		font-family: Open Sans Semibold;
		color: #dd5904;
		font-size: 15px;
		display: block;
		padding-top: 26px;
		padding-bottom: 15px;
	}
	.login-block-wrapper {
		width: 38%;
		max-width: 370px;
		top: 250px;
		position: absolute;
		left: 50px;
		right: 20px;
		border-radius: 3px;
	}
	.login-heading-container {
		height: 58px;
		font-size: 22px;
		line-height: 58px;
	}
	.helpline-numbers,.helpline-numbers:link,.helpline-numbers:hover,.helpline-numbers:active,.helpline-numbers:visited
	{
	cursor: default;
}
.helpline-numbers a:link,.helpline-numbers a:hover,.helpline-numbers a:active,.helpline-numbers a:visited
	{
	cursor: default;
}
	.login-body-container {
		padding: 0px 22px;
		padding-bottom: 15px;
	}
	.dropdown-wrapper {
		height: 40px;
		width: 70%;
		border-radius: 5px;
		color: #999999;
		font-size: 12px;
		font-family: Open Sans;
		float: right;
		margin-top: 13px;
		background-image: url('../images/select-dropdown-icon.png');
		background-repeat: no-repeat;
		background-position: 95%;
	}
	.login-body-container select {
		height: 40px;
		width: 100%;
		padding-left: 15px;
	}
	.login-input-box {
		height: 38px;
		width: 70%;
		float: right;
		border-radius: 5px;
		padding-left: 15px;
		color: #666666;
		font-size: 13px;
		font-family: Open Sans;
		margin-top: 17px;
		border-radius: 5px;
		margin-top: 13px;
	}
	.password-input-box {
		margin-top: 19px;
	}
	.login-button {
		margin-top: 24px;
	}
	.login-subtext {
		font-size: 14px;
	}
	.new-user-block {
		height: 51px;
		font-size: 16px;
		font-family: Open Sans Semibold;
		line-height: 51px;
	}
	.new-user-block a {
		display: block;
		font-size: 16px;
		height: 51px;
		font-family: Open Sans Semibold;
	}
	.login-account {
		clear: both;
		height: 65px;
		color: #ffffff;
		font-size: 14px;
		font-family: Open Sans;
		background-color: #1797e6;
		margin: 0px -22px;
		padding: 0px 22px;
	}
	.input-wrapper {
		background-color: transparent;
		margin: 0px;
		padding: 0;
		height: auto;
	}
	.login-account>span {
		display: block;
		float: left;
		line-height: 65px;
	}
	.input-wrapper span {
		line-height: 51px;
	}
	.metlife-help-wrapper {
		display: block;
	}
	.metlife-help-container {
		max-width: 1200px;
		float: none;
		margin: 0px auto;
		padding: 20px 15px 0px 15px;
	}
	.mymetlife-help-text-header {
		font-family: Open Sans;
		font-size: 18px;
		color: #333333;
	}
	.metlife-help-block {
		width: 25%;
		float: left;
		margin-bottom: 50px;
	}
	.metlife-help-icon-container {
		width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: 18px auto;
    background-repeat: no-repeat;
    background-position: left -19px top -20px;
    background-size: 114px;
}
	}
	.claims-icon {
		/* background-color: #f47320; */
		background-image: url('../images/Claim Notifications.png');
	}
	.products-icon {
	/* 	background-color: #2e6eb8; */
		background-image: url('../images/Link my Policies-01.png');
	}
	.branch-details-icon {
		/* background-color: rgb(105, 31, 126); */
		background-image: url('../images/Update Contact Details-01.png');
	}
	.faq-icon {
	/* 	background-color: #74ae33; */
		background-image: url('../images/View Fund Fact Sheet-01.png');
	}
		.update-contact-details-icon {
		/* background-color: #2e6eb8; */
		background-image: url('../images/Update Contact Details-01.png');
	}
	.link-my-policies-icon {
		/* background-color: rgb(105, 31, 126); */
		background-image: url('../images/Link my Policies-01.png');
	}
	.view-funds-fact-sheet-icon {
		/* background-color: #74ae33; */
		background-image: url('../images/View Fund Fact Sheet-01.png');
	}
	.claim-notifications-icon {
		/* background-color: #f47320; */
		background-image: url('../images/Claim Notifications.png');
	}
	.metlife-help-text-heading {
		text-align: center;
		font-family: Open Sans Semibold;
		font-size: 16px;
		color: #333333;
	}
	.metlife-help-text-description {
		text-align: center;
		margin-top: 18px;
		font-family: Open Sans;
		font-size: 14px;
		color: #333333;
		font-family: Open Sans;
	}
	.footer {
		clear: both;
	}
	#forgot_password .popup-body {
		padding-top: 30px;
	}
	.display-colon {
		display: inline;
	}
	.forgot-password-text {
		width: 50%;
		float: left;
		line-height: normal;
		font-family: Open Sans Semibold;
	}
	.forgot-password-input {
		margin-top: 0px;
		width: 50%;
	}
	.forgot-password-action-btns {
		margin-top: 30px;
	}
	


@media only screen and (min-device-width: 360px) and (max-device-height:
	640px) and (orientation : landscape) and (-webkit-device-pixel-ratio:
	3) {
	.header-border {
		border: none;
	}
	.hamburger-login-menu-button {
		width: 15%;
		background-color: #004770;
		text-align: center;
		background-image: url('../images/login-mobile-icon.png');
		background-repeat: no-repeat;
		background-size: 30px;
		background-position: 50%;
		cursor: pointer;
		display: table-cell;
	}
	.main-content-wrapper {
		padding: 0;
		background-color: #ffffff;
		background-image: url('../images/login_background_desktop.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.metlife-login-wrapper {
		position: relative;
		background-image: url('../images/loginbg_mobile.gif');
		background-repeat: no-repeat;
		background-size: 302px 302px;
		min-height: 100%;
		background-position-x: 50%;
	}
	.logo-container {
		width: 85%;
	}
	.login-block-wrapper {
		width: 302px;
		background-color: #007ac7;
		float: none;
		margin: 0px auto;
		opacity: 0.9;
		border-radius: 3px;
	}
	.login-heading-container {
		text-align: center;
		width: 100%;
		height: 52px;
		color: #ffffff;
		font-size: 24px;
		font-family: Open Sans;
		line-height: 52px;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
		font-weight: bold;
	}
	.login-body-container {
		padding: 0px 18px;
		padding-bottom: 15px;
	}
	.dropdown-wrapper {
		height: 40px;
		width: 100%;
		border-radius: 5px;
		color: #999999;
		font-size: 12px;
		background: #ffffff;
		font-family: Open Sans;
		float: right;
		background-image: url('../images/select-dropdown-icon.png');
		background-repeat: no-repeat;
		background-position: 98%;
	}
	.login-body-container select {
		height: 40px;
		width: 100%;
		background: none repeat scroll 0 0 transparent;
		padding-left: 15px;
	}
	.login-input-box {
		height: 40px;
		width: 100%;
		border-radius: 5px;
		padding-left: 15px;
		color: #999999;
		font-size: 12px;
		font-family: Open Sans;
		margin-top: 9px;
	}
	.login-button {
		border: none;
		outline: none;
		box-shadow: none;
		height: 42px;
		width: 100%;
		text-align: center;
		background-color: #85c93a;
		margin-top: 9px;
		border-radius: 5px;
		font-size: 17px;
		color: #ffffff;
		font-weight: bold;
		font-family: Open Sans;
	}
	.login-subtext {
		color: #ffffff;
		font-size: 12.5px;
		font-family: Open Sans;
		text-align: right;
		padding-top: 18px;
	}
	.login-subtext span {
		cursor: pointer;
	}
	.account-locked-text {
		padding-top: 15px;
	}
	.new-user-block {
		width: 100%;
		height: 41px;
		color: #ffffff;
		text-align: center;
		background-color: #02446e;
		font-size: 12px;
		font-family: Open Sans;
		line-height: 41px;
		cursor: pointer;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.new-user-block a {
		display: block;
		width: 100%;
		height: 41px;
		color: #ffffff;
		font-size: 12px;
		font-family: Open Sans;
		color: #ffffff;
	}
	.desktop-container {
		max-width: 1200px;
		float: none;
		margin: 0px auto;
		position: static;
		padding-top: 151px;
		position: relative;
	}
	.mobile-background-img {
		display: block;
		width: 100%;
		height: 302px;
		position: absolute;
	}
	.desktop-background-img {
		position: absolute;
	}
	.login-account>span,.metlife-welcome-message-container,.desktop-background-img,.metlife-help-wrapper
		{
		display: none;
	}
	#mobile-number-list {
		width: 292px;
		height: 65%;
		max-height: 270px;
	}
	#mobile-number-list .popup-body {
		height: 65%;
	}
	.helpline-number-list li {
		height: 30px;
		width: 50%;
		float: left;
		margin: 5px 0px;
	}
	.helpline-numbers,.helpline-numbers:link,.helpline-numbers:hover,.helpline-numbers:active,.helpline-numbers:visited
		{
		font-family: Open Sans;
		font-size: 12px;
		color: #007cc2;
	}
	.helpline-numbers a:link,.helpline-numbers a:hover,.helpline-numbers a:active,.helpline-numbers a:visited
		{
		font-family: Open Sans;
		font-size: 12px;
		color: #007cc2;
	}
}

@media only screen and (min-device-width: 360px) and (max-device-height:
	640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3)
	{
	.header-border {
		border: none;
	}
	.hamburger-login-menu-button {
		width: 15%;
		background-color: #004770;
		text-align: center;
		background-image: url('../images/login-mobile-icon.png');
		background-repeat: no-repeat;
		background-size: 30px;
		background-position: 50%;
		cursor: pointer;
		display: table-cell;
	}
	.main-content-wrapper {
		padding: 0;
		background-color: #ffffff;
		background-image: url('../images/login_background_desktop.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.metlife-login-wrapper {
		position: relative;
		background-image: url('../images/loginbg_mobile.gif');
		background-repeat: no-repeat;
		background-size: 302px 302px;
		min-height: 100%;
		background-position-x: 50%;
	}
	.logo-container {
		width: 85%;
	}
	.login-block-wrapper {
		width: 302px;
		background-color: #007ac7;
		float: none;
		margin: 0px auto;
		opacity: 0.9;
		border-radius: 3px;
	}
	.login-heading-container {
		text-align: center;
		width: 100%;
		height: 52px;
		color: #ffffff;
		font-size: 24px;
		font-family: Open Sans;
		line-height: 52px;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
		font-weight: bold;
	}
	.login-body-container {
		padding: 0px 18px;
		padding-bottom: 15px;
	}
	.dropdown-wrapper {
		height: 40px;
		width: 100%;
		border-radius: 5px;
		color: #999999;
		font-size: 12px;
		background: #ffffff;
		font-family: Open Sans;
		float: right;
		background-image: url('../images/select-dropdown-icon.png');
		background-repeat: no-repeat;
		background-position: 98%;
	}
	.login-body-container select {
		height: 40px;
		width: 100%;
		background: none repeat scroll 0 0 transparent;
		padding-left: 15px;
	}
	.login-input-box {
		height: 40px;
		width: 100%;
		border-radius: 5px;
		padding-left: 15px;
		color: #999999;
		font-size: 12px;
		font-family: Open Sans;
		margin-top: 9px;
	}
	.login-button {
		border: none;
		outline: none;
		box-shadow: none;
		height: 42px;
		width: 100%;
		text-align: center;
		background-color: #85c93a;
		margin-top: 9px;
		border-radius: 5px;
		font-size: 17px;
		color: #ffffff;
		font-weight: bold;
		font-family: Open Sans;
	}
	.login-subtext {
		color: #ffffff;
		font-size: 12.5px;
		font-family: Open Sans;
		text-align: right;
		padding-top: 18px;
	}
	.login-subtext span {
		cursor: pointer;
	}
	.account-locked-text {
		padding-top: 15px;
	}
	.new-user-block {
		width: 100%;
		height: 41px;
		color: #ffffff;
		text-align: center;
		background-color: #02446e;
		font-size: 12px;
		font-family: Open Sans;
		line-height: 41px;
		cursor: pointer;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.new-user-block a {
		display: block;
		width: 100%;
		height: 41px;
		color: #ffffff;
		font-size: 12px;
		font-family: Open Sans;
		color: #ffffff;
	}
	.desktop-container {
		max-width: 1200px;
		float: none;
		margin: 0px auto;
		position: static;
		padding-top: 151px;
		position: relative;
	}
	.mobile-background-img {
		display: block;
		width: 100%;
		height: 302px;
		position: absolute;
	}
	.desktop-background-img {
		position: absolute;
	}
	.login-account>span,.metlife-welcome-message-container,.desktop-background-img,.metlife-help-wrapper
		{
		display: none;
	}
	#mobile-number-list {
		width: 292px;
		height: 65%;
		max-height: 270px;
	}
	#mobile-number-list .popup-body {
		height: 65%;
	}
	.helpline-number-list li {
		height: 30px;
		width: 50%;
		float: left;
		margin: 5px 0px;
	}
	.helpline-numbers,.helpline-numbers:link,.helpline-numbers:hover,.helpline-numbers:active,.helpline-numbers:visited
		{
		font-family: Open Sans;
		font-size: 12px;
		color: #007cc2;
	}
		.helpline-numbers a:link,.helpline-numbers a:hover,.helpline-numbers a:active,.helpline-numbers a:visited
		{
		font-family: Open Sans;
		font-size: 12px;
		color: #007cc2;
	}
}
@media ( min-width :1700px) {
.main-content-wrapper {
		padding: 0;
		background-color: #ffffff;
		background-image: none;
	}
	
	.metlife-login-wrapper {
    position: relative;
    background-image: url('../images/loginbg_desktop.gif');
    background-repeat: no-repeat;
    background-size: 100% 775px;
    height: 775px;
    background-position-y: inherit;
}
}