@charset "UTF-8";
/* CSS Document */
@font-face{
	font-family: 'SunLifeSans-Regular';
	src: url('Fonts/SunLifeSans-Regular.woff') format('woff');
}

@font-face{
	font-family: 'SunLifeSans-Bold';
	src: url('Fonts/SunLifeSans-Bold.woff') format('woff');
}

body{
	font-family:'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	position: relative;
}

#wrapper{
	margin:0 auto;  
	max-width:1024px;
	background-color: rgba(215, 215, 215, 0.1);
}

#topbar{
	background-color:white;
}

#bodywrap {
	position:relative;
	height: 150px;
}

.bodywrap{
	position:relative;
	height: 150px;
}

.logo{
	padding: 10px;
	width: 180px;
	height: auto;
}

p{
	font-size: 16px;
	font-style: normal;
}

#formwrapper{
	width: 500px;
	margin: 0 auto;
	padding:10px;
	text-align: left;
}

.formhead {
	max-width: 500px;	
}

.bannerimg{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-image: url("https://www.sunlife.ca/ma/res/sunlife_PROD/f5637e368184dfb4521cbe2619472aedb958e854837bfaa9925a4ea37f3b94c5.png");
	background-size: cover;
	min-height: 150px;
	background-position: right;
	margin-top:10px;
}

h1{
	font-family: 'SunLifeSans-Bold', sans-serif, Verdana, Arial, Helvetica;
	font-size: 26px;
	line-height: 1.2;
	color: #FFFFFF; 
	margin-top: -10px;
	padding-top: 30px;
}

h2{ 
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	font-size:16px;
	font-weight: 400;
	color:#FFFFFF;
	margin:0;
	padding-top: 0px;
}

h3{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	font-size:18px;
	color:#003946;
	margin:0;
	padding-top: 15px;
}

.banner {
	margin-top: 0px;
	margin-left: 20px;
	max-width: 508px;
}

.nbsp{
	font-size:50%;
}

.btn{
	background-color: #FFCB05;
	border: none;
	cursor: pointer;
	text-align: center;
	color: #003946;
	width: 100%;
	height: 50px;
}

.btn:hover{
	background-color: #EAAB00;
	border: none;
	cursor: pointer;
	text-align: center;
	color: #003946;
	width: 100%;
	height: 50px;
}

.btn:visited{
	background-color: #79346D;
	border: none;
	cursor: pointer;
	text-align: center;
	color: #fff;
	width: 100%;
	height: 50px;
}

.contact-form *{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	display: block; 
	width: 97%;
	margin-top: 10px;
	font-size: 16px;
	font-style:normal;
	padding:5px;
	text-align: left ;
}

.form-check{
	padding-top: 8px;
	padding-bottom: 4px;
}

.form-check-label{
	padding-left: 5px;
	color: #333;
}

.footnote{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	font-size:75%;
	text-align: center;
	max-width: 480px;
	padding-top: 10px;
}

.footnote2{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	font-size:75%;
	color: #555555;
	text-align: center;
	max-width: 480px;
	padding-top: 10px;
}

#footer{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	background-color: #003946;
	text-align:center;
	color: #ffffff;
	font-weight:lighter;
	padding:15px 60px 50px 60px;
	font-size: 75%;
	border-top:5px solid #003946;
}

.legal-text{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	text-decoration-color: #fff;
	color: #fff;
}

.legal-text2{
	font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
	text-decoration-color: #002d3d;
	color: #002d3d;
	text-decoration: underline;
}

.legal-text a{
	color: #fff;
}

.legal-text a:hover{
	color: #fff;
}

.legal-text a:active{
	color: #fff;
}

.legal-text a:visited{
	color: #fff;
}

* {
	box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
	float: left;
	width:100%;
	padding: 10px 0px 10px 10px;
}
.left {
	width: 35%;
	padding-right: 10px;
}

.right {
	width: 100%;
	padding:20px;
	padding-right: 25px;
}

.middle {
	width: 5%;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}
.row{
	padding-top: 30px;
}

.footer-margin{
	margin: 100px 0px 0px 0px;
	height: 0px;
}

#padding{
	padding-right: 10px;
}

.hideMobile{
	display:none;
}

.showMobile{
display: none;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media only screen and (max-width: 980px) {
	.input{
		width:100% !important;
	}	

	hr {
		font-family: 'SunLifeSans-Bold', sans-serif, Verdana, Arial, Helvetica;
		display: block;
		margin-top: 2em;
		margin-bottom: 2em;
		margin-left: auto;
		margin-right: auto;
		border-style: inset;
		border-width: 1px;
	}

	.middle{
		display:block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	.right p{
		margin: 0px 0px 0px 0px;
		padding: 20px 0px 0px 0px;
		font-weight: 700;
	}

	.column {
		width:100%;
		padding: 10px 0px 10px 0px;
	}

	.footnote{
		width:100%;
		padding-top: 10px;
	}

	.footnote2{
		width:100%;
		padding-top: 10px;
	}

	.row{
		align-content: center;
		padding: 0px 100px 0px 100px;
		width: 100%;
	}

	.column {
		width: 100%;
		display: table;
		clear: both;
		margin:auto;
	}
	.left{
		margin: auto;
		width: 100%;
	}

	#formwrapper{
		position:relative;
		/*margin: 50px 50px auto 0px;*/
	}

	.footer-margin{
		margin: 100px 0px 0px 0px;
		height: 0px;
	}
}

@media screen and (max-width: 700px) {
.hideMobile{
	display:block;
}
}

@media screen and (max-width: 600px) {
	.formhead h2{
		font-size: 15px;
	}

	.input{
		width:100% !important;
	}	

	hr {
		font-family: 'SunLifeSans-Regular', sans-serif, Verdana, Arial, Helvetica;
		display: block;
		margin-top: 2em;
		margin-bottom: 2em;
		margin-left: auto;
		margin-right: auto;
		border-style: inset;
		border-width: 1px;
	}

	.middle{
		display:block;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	.right p{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		font-weight: 700;
	}

	.column {
		width:100%;
		padding: 10px 0px 10px 0px;
	}

	.footnote{
		width:100%;
		padding-top: 10px;	
	}

	.footnote2{
		width:100%;
		padding-top: 10px;	
	}

	.row{
		align-content: center;
		padding: 0px 60px 0px 40px;
		width: 100%;
	}

	.column {
		width: 100%;
		content: "";
		display: table;
		clear: both;
		margin:auto;
	}

	.left{
		margin: auto;
		width: 100%;
	}

	#formwrapper {
		position:relative;
		/*margin: 50px 50px auto 0px;*/
	}
}

@media(max-width:560px){
	.contact-form *{
		width: 100%;
	}
	#formwrapper{
		width:100%
	}
	

	.footnote{
		width:100%;
		padding-top: 10px;
	}

	.footnote2{
		width:100%;
		padding-top: 10px;
	}

	.bannerimg{
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("https://www.sunlife.ca/ma/res/sunlife_PROD/f5637e368184dfb4521cbe2619472aedb958e854837bfaa9925a4ea37f3b94c5.png");
		min-height: 150px;
		background-position: right !important;
		}	

	.banner {
		margin-top: 0px;
		margin-left: 20px;
		max-width: 350px;
	}

	/*
	h1{
		padding-top: 20px;
	}
	*/

	h2{ 
		padding-bottom: 30px;
	}
}

@media screen and (max-width:460px){
	h1{
		font-size:22px;
	}

	h2{
		font-size:16px;
	}

	.showMobile{
		display: block;
	}

	.contact-form *{
		width: 100%;
	}
	#formwrapper{
		width:100%
	}
	}		

	.footnote{
		width:100%;
		padding-top: 10px;
	}

	.footnote2{
		width:100%;
		padding-top: 10px;
	}
}

@media(max-width:400px){
	.bannerimg{
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("https://www.sunlife.ca/ma/res/sunlife_PROD/f5637e368184dfb4521cbe2619472aedb958e854837bfaa9925a4ea37f3b94c5.png");
		min-height: 150px;
		background-position: right !important;
	}	
	h1{
		/*	padding-top: 20px;*/
	}

	h2{ 
		padding-bottom: 30px;
	}
}

@media screen and (max-width:320px){
	.bannerimg{
		min-height:180px;
	}
	.banner{
		max-width:280px;
	}
}

@media screen and (max-width:100px){
	.contact-form *{
		width: 100%;
	}

	#formwrapper{
		width:100%
	}

	.footnote{
	width:100%;
	padding-top: 10px;
	}

	.footnote2{
	width:100%;
	padding-top: 10px;
	}
}