/*Responsive*/
.visible-mobile { display: block; }
.visible-desktop { display: none; }

.col { width: 95%; }

/*Global*/

html { background-color: #e2e2e2; }
a { color: #d81e05; }
hr { background-color: #D9D9D9; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { }
h2 { color: #d81e05; font-size: 36px; margin: 2% 0; }
h3 { color: #666666; font-size: 20px; }
h4 { color: #666666; font-size: 16px; margin: 5px 0; }
h5 { color: #d81e05; font-size: 14px; margin: 5px 0; }
h6 { }

ul.checked li { list-style-type: none; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS45OSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTEuOTkgOSI+PHRpdGxlPmljb24tY2hlY2ttYXJrPC90aXRsZT48cGF0aCBkPSJNMTEuNjYsMC4zN0ExLjA4LDEuMDgsMCwwLDAsMTAuMTQuMjhMMTAsMC4zNyw0LjcxLDYuMDVsLTIuNzYtM0ExLjA4LDEuMDgsMCwwLDAsLjQzLDNsLTAuMDkuMDlhMS4yOSwxLjI5LDAsMCwwLDAsMS43M0wzLjg4LDguNjVhMS4wOCwxLjA4LDAsMCwwLDEuNTIuMDlsMC4wOS0uMDksNi4xNS02LjU0QTEuMjksMS4yOSwwLDAsMCwxMS42Ni4zN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTAuMDEpIiBmaWxsPSIjZDgxZTA1Ii8+PC9zdmc+) no-repeat left 6px}
    

.AgilityDevBar, .AgilityStatusBar { display: none !important; }

/*Remove dots bg*/

#top { background-image: none; }
.wrapper { background-image: none; padding: 0; }

#content p { font-size: 1.5em; }

/*Template layout*/
 .btn-primary,  .btn-default { position: relative; display: inline-block; padding: 8px 15px; border-radius: 5px; margin: 1px; font-weight: bold; }
 .btn-primary { border: 1px solid #bd0000; margin: 1px; background-color: #d81e05; color: white; box-shadow: 0 1px 1px #900; }
 .btn-default { border: 1px solid #d0d0d0; margin: 1px; background: linear-gradient(to bottom, #fefefe, #ededed); color: #d81e05; box-shadow: 0 1px 1px #666; }
     .btn-primary:hover,  .btn-default:hover { top: 1px; text-decoration: none; }
     .btn-default:hover { background: linear-gradient(to bottom, #ededed, #fefefe); box-shadow: none; }
 .btn-primary:hover { box-shadow: 0 -8px 4px -4px #f21b1b inset; }

.btn-close:after { content: "x"; color: white; font-size: 16px; font-weight: bold; background-color: black; border-radius: 20px; border: 3px solid #dedede; padding: 1px 6px; float: right; }

/*Extend template, match colours in designs*/

#top { background-color: #E2E2E2; }
#logoHeader { background-color: white; }
#serviceMenuHeader { background-color: #eee; }
#megaMenuHeader { background: linear-gradient(top, #fefefe 0%,#cdcccd 56px); }
    #megaMenuHeader.row { padding:0;}
    #megaMenuHeader .col { width:100%; }

#rotatorMain { height: 365px; padding: 0; background-color: white; border-bottom: 1px solid #C5C5C5; margin-bottom: 3%; }
#ribbonMain { padding: 10px 0; background-color: white; border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2; }
    #ribbonMain .col { width: auto; }
#tileMain { padding: 0 4px; background-color: #E2E2E2; }
    #tileMain .col { width: auto; }

#topFooter { box-sizing: border-box; padding: 0; }
    #topFooter .col { width: auto; }
.topFooterMobile > div { color: #666666; font-size: 16px; line-height: 1.3em; }
    .topFooterMobile > div h3 { font-size: 18px; font-weight: bold; }
    .topFooterMobile > div h4 { color: #444444; font-size: 15px; font-weight: bold; }
    .topFooterMobile > div p { margin: 0; }
    .topFooterMobile > div a { font-size: 16px; }
    .topFooterMobile > div .phone { font-size: 24px; font-weight: bold; margin: 8px 0; color: #666666; display: block; }
.socialMediaLinks img { display: block; width: auto; height: 36px; }


/*Other Template Overrides*/
#top ul#nav-tabs li { background-color: #7D7D7D; }
    #top ul#nav-tabs li.current a { color: #666666; }
    #top ul#nav-tabs li:first-of-type { margin-left: 0; }

#serviceMenuHeader .header { z-index: 1000; }

#ulServiceMenu li:first-of-type .tab { padding-left: 0; margin: 0; }
#ulServiceMenu li.a .content { height: 370px; left: 0; }
#ulServiceMenu li.c .content { left: -345px; }
#mainNav ul li a span { position: relative; z-index: 100; text-align: center; }
    #mainNav ul li a span em { font-style: normal; position: relative; display: block; text-align: center; z-index: 420; margin: 0px auto; }

#megaMenuHeader #mega-menu { padding: 0; }
#mega-menu.top-nav-sb li.a a.tab { padding-left: 0 !important; }


/*Modules*/
.tile { position: relative; height: 370px; background-color: white; border: 1px solid #D2D2D2; margin: 10px 0; padding: 20px 20px 60px 20px; font-size: 0.833em; box-sizing: border-box; }
    .tile .bgImage { position: relative; height: 100%; margin: -10px -10px -50px -10px; padding: 10px 10px 50px 10px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
 .tile p { margin: 1em 0; }
    .tile a { font-size: 1em; }
 .tile .btn { position: absolute; bottom: 21px; left: 20px; font-size: 15px; padding: 8px 20px; }
 .tile .bgImage .btn { bottom: 11px; left: 10px; }
 .tile .btn:hover { top: inherit; bottom: 20px; }
 .tile .bgImage .btn:hover { bottom: 10px; }
 .tile .btn:nth-of-type(2) { left: inherit; right: 20px; }
 .tile .bgImage .btn:nth-of-type(2) { right: 10px; }
 
 .tile h4 { margin: 0 0 20px 0; font-size: 1.7em; color:#666666; }
    .tile h5 { margin: 0; color: #515151; font-size: 1.5em; }
 .tile .adspot0 h4 { margin: 10px 0 5px 0; }
	.tile .adspot0 span.red { font-size: 2.5em; font-weight: bold; display: block; }
	#content .tile .adspot0 p { font-size: 1.5em; line-height: 1.3em; width: 50%; }
 .tile .adspot2 h4 { font-size: 1.4em; margin: 0 0 5px 0; }
	.tile .adspot2 h5 { color: #D81E05; font-size: 2.2em; line-height: 1.1em; letter-spacing: -0.03em; }
	#content .tile .adspot2 p { margin: 0; font-size: 1.3em; }
	.tile .adspot3 h4 { font-size: 3em; margin-bottom: 10px; }
	.tile.mobileBanking img { margin: 10px 0 20px 0; }
	#content .tile .adspot3 p { font-size: 1.8em; margin: 10px 0 0 0; }
 #content .tile .whychoose p { font-size:2em; margin-top:175px; }
 	.tile .whychoose img { width: 80%; }
	.tile .bgImage.whychoose { background-position: 6% 30%; }
	
.tile.map h4 { font-size: 1.5em; }
.tile.map h5 { margin: 15px 0 0 0; color: #515151; font-size: 1.25em; font-weight: bold; }
.tile.map section { font-size: 1.25em; }
.tile.map > footer { position: absolute; bottom: 20px; left: 20px; right: 20px; }
 .tile.map .btn { bottom: 1px; left: 0; }
     .tile.map .btn:hover { bottom: 0; }
     .tile.map .btn + a { position: absolute; bottom: 10px; right: 0; font-size: 1.25em; }
.tile.map .noLocations { display: none; }

.tile.news { padding-bottom: 0; }
	.tile.news > ul { list-style-type: none; }
	.tile.news > ul li a { font-size: 1.3em; font-weight: bold; }
	#content .tile.news p { font-size: 1.25em; margin: 0 0 20px 0; line-height: 1.4em; }
	.tile.mobileBanking h4 { font-size: 1.7em; font-weight: bold; margin-bottom: 0; }
	#content .tile.mobileBanking p { font-size: 1.4em; line-height: 1.4em; margin: 7px 0; }

.rotator { position: relative; margin: 0; height: 100%; }
    .rotator h2 { font-family: Frutiger, Arial, Helvetica, sans-serif; font-size: 36px; line-height: 1em; }
 .rotator > ul { overflow: hidden; margin: 0; padding: 0; list-style-type: none; white-space: nowrap; width: 100%; height: 100%; font-size: 0px; }
.rotator > ul.pauseEffects { transition: none; }
.rotator > ul > li { transition: margin-left ease-out 0.5s; position: relative; display: inline-block; margin: 0; padding: 0 15px; list-style-type: none; width: 100%; height: 100%; white-space: nowrap; box-sizing: border-box; vertical-align: top; }
    .rotator > ul > li > a { display: block; width: 100%; }
    .rotator > ul > li a img { top: 0; width: 100%; vertical-align: top; }
    .rotator > ul > li a article { position: absolute; bottom: 30px; width: 85%; padding: 5px 10px; background-color: rgba(255,255,255,0.7); font-size: 14px; color: #666666; }

.rotator .visible-mobile { display: table; height: 100%; }
    .rotator .visible-mobile > div { display: table-cell; vertical-align: middle; padding-bottom: 40px; }
    .rotator .visible-mobile h2 { font-family: frutiger, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.1em; }
 .rotator p,  .rotator h3 { margin: 15px 0; }
 .rotator h3 { font-size: 16px; line-height: 1.5em; }
.rotator .btn { margin-top: 10px; font-size: 15px; }


.rotator > nav { position: absolute; bottom: 15px; left: 0; width: 100%; height: 32px; padding: 0; text-align: center; }
 .rotator > nav ul { display: inline-block; margin: 0; padding: 0; list-style: none; }
.rotator > nav li { display: inline-block; margin: 0 3px; padding: 0; list-style: none; }
.rotator > nav a { text-indent: -9000px; display: block; width: 12px; height: 12px; margin: 0; padding: 0; list-style: none; font-size: 0px; line-height: 0px; background-color: #898989; }
.rotator > nav li.selected a { background-color: #d81e05; }
.rotator .next, .rotator .prev { display: none; }
.rotator .pause, .rotator .resume { display: none; }

.rotator > ul > li > * { white-space: normal; max-height: 100%; }

.ribbons { width: 100%; position: relative; }
 .ribbons > ul { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; z-index: 100; }
.ribbons > ul:before, .ribbons > ul:after { content: ""; position: absolute; top: 0; width: 50px; height: 54px; background: #fff; z-index: 200; }
.ribbons > ul:before { left: 0; }
.ribbons > ul:after { right: 0; }
.ribbons > ul > li { display: inline-block; width: 100%; height: 100%; margin: 0; padding: 0; list-style-type: none; }
    .ribbons > ul > li > header { transition: left 0.5s ease-in-out 0s; top: 9px; width: 90%; height: 36px; margin: 0 0 0 4%; line-height: 36px; position: absolute; cursor: pointer; z-index: 100; text-align: center; font-size: 17px; color: #515151; }
        .ribbons > ul > li > header > img { vertical-align: middle; max-width: 36px; }
        .ribbons > ul > li > header > span { display: inline-block; z-index: 10; line-height: 1.1em; vertical-align: middle; }
    .ribbons > ul > li > section { display: inline-block; vertical-align: top; width: 100%; }

/*Collapse for Ribbons:*/
.ribbons > ul > li > section > div#close { display: none; }
.ribbons > ul > li { transition: max-height 0.5s ease-in-out 0.5s; max-height: 54px; }
    .ribbons > ul > li:nth-of-type(1n+2) { margin-left: -0.28em; }
    .ribbons > ul > li.expanded { transition: max-height 0.5s ease-in-out 0s; max-height: 2500px; z-index: 100; }
    .ribbons > ul > li > section { transition: opacity 0.5s ease-in-out 0.5s; margin-top: 65px; padding: 0 15px; width: 100%; height: 100%; opacity: 0; box-sizing: border-box; }
    .ribbons > ul > li.expanded > section { transition: opacity 0.33s ease-in-out 0.5s, margin-left 0.75s ease-in-out 0s; opacity: 1; }

    /*Collapse for Content:*/
    .ribbons > ul > li > section > .contentColumn { display: block; width: 100%; vertical-align: top; white-space: normal; height: 100%; padding: 0; margin: 0; }
        .ribbons > ul > li > section > .contentColumn > article { position: relative; border-top: 2px solid #EEEEEE; width: 100%; padding: 45px 0 15px 0; }
            .ribbons > ul > li > section > .contentColumn > article > div { display: none; }
            .ribbons > ul > li > section > .contentColumn > article.expanded > div { display: block; }
 .ribbons > ul > li > section > .contentColumn > article > h3 { position: absolute; font-size: 20px; top: 30px; left: 0; width: 100%; margin: 0; font-weight: bold; cursor: pointer; transform: translateY(-50%); }
.ribbons > ul > li > section > .contentColumn > article > h3:after { content: "+"; position: absolute; right: 10px; top: -3px; font-size: 24px; font-weight: bold; color: #d81e05; }
.ribbons > ul > li > section > .contentColumn > article.expanded > h3:after { content: "\2013"; right: 11px; top: -4px; }

.contentColumn h2 { margin-bottom: 15px; font-family: frutiger, Arial, Helvetica, sans-serif; font-size: 34px; font-weight: normal; line-height: 1em; }
 .contentColumn h3 { margin: 0; color: #515151; font-size: 1.61em; width: 85%; }
 .contentColumn ul { margin: 1em 0; padding: 0; font-size: 17px; }
 .contentColumn ul { margin: 1em 0.5em 1em 0; font-size: 17px; line-height: 1.2em; }
 	.contentColumn ul li { padding: 0 0 14px 25px }
	.contentColumn ul li a { font-size: 17px; }
#content .contentColumn p { margin: 15px 0; font-size: 1.06em; line-height: 1.4em; }
.contentColumn img { display: inline-block; margin-top: 16px; }
.contentColumn .btn-default { display: inline-block; min-width: 90px; line-height: normal; text-align: center; box-sizing: border-box; margin-bottom: 5px;}

.ribbons > nav { height: 0; position: absolute; top: 0; width: 100%; text-align: center; z-index: 200; }
    .ribbons > nav ul { list-style-type: none; padding: 0px; margin: 0px; position: relative; }
        .ribbons > nav ul li { display: inline-block; padding: 0 6px; }
    .ribbons > nav a { background-color: #666666; position: absolute; display: block; top: 28px; width: 30px; height: 30px; padding: 5px 0; border-radius: 5px; box-sizing: border-box; transform: translateY(-50%); cursor: pointer; }
        .ribbons > nav a.disabled { opacity: 0.5; background-color: #CBCBCB;  }
    .ribbons > nav .prev { left: 15px; }
    .ribbons > nav .next { right: 16px; }
    .ribbons > nav img { display: block; width: auto; height: 20px; margin: 0 auto; }


/* Vignette Styles */
.newContent { display: inherit !important; }
.oldContent { display: none !important; }

#content { padding: 0; background: none; font-size: 14.4px; margin-bottom: 0; border: none; }

html { background: none; background-color: #e2e2e2;}
.wrapper {width: 100%;}

/* FOOTER */
#bottomFooter { margin-top: 6px; padding: 0; }
    #bottomFooter .col { width: 100%; }
    #bottomFooter hr { display: none; }
	
#footer { background-color: transparent; }
.footer-wrapper { width: 100%; }
#content-divider { display:none;}
#footer {margin:0;}
#footer li { font-size: 1em; }
.footer-wrapper #footer { padding: 0; }
hr {border-color:white; }
#btm { background-color: #FFFFFF; border-bottom: 0; padding: 0; }
#legal { background-color: #FFFFFF; height: auto; padding: 0 0 20px 0; color: #666; font-size: 11px; line-height: 1em; background-image: none; text-indent: 1px; width: 230px; }

.bottomFooterMobile { padding: 16px 18px; background-color: #fff; }
.bottomFooterMobile ul { display: inline-block; vertical-align: bottom; }
.bottomFooterMobile .otherLinks { }
.bottomFooterMobile .footerLinks { border-bottom: 1px solid #D4D4D4; padding-bottom: 10px; width: 100%; }
.bottomFooterMobile ul > li { list-style-type: none; display: inline-block; padding: 5px 10px 10px 5px; width: 27%; }
.bottomFooterMobile .footerLinks > li > a { color: #d81e05; font-size: 13px; }
.bottomFooterMobile .footer-logo { margin-top: 15px; padding: 20px 0 0 0; margin: 0 auto; width: 210px; }

.topFooterMobile { background-color: #e2e2e2; }
                        .topFooterMobile > div { margin: 2%; padding: 8% 5%; vertical-align: top; background-color: #F2F2F2; }
                            .topFooterMobile > div h3 { margin-bottom: 4%; margin-top: 0; }
                        .topFooterMobile .socialMediaLinks { padding: 2% 1%; margin: 0 auto; }
                            .topFooterMobile .socialMediaLinks > li { list-style-type: none; display: inline-block; padding-right: 8%; }
							.topFooterMobile .socialMediaLinks > li:last-of-type { padding-right: 0; }
                        .topFooterMobile > div > img { display: inline-block; max-width: 18%; vertical-align: top; padding-right: 4%; margin-top: 0; }
                        .topFooterMobile > div > aside { display: inline-block; width: 75%; }
						
.topFooterMobile .scotiaHelps { border-top: 1px solid #D9D9D9; margin: 15px 0 0 0; padding: 20px 0 0 60px; background-image: url('/ca/common/icons/icn-footer-scotiahelps.png'); background-repeat: no-repeat ; background-position: 5% 70%; }
						.topFooterMobile .scotiaHelps a { font-weight: bold; }
						#topFooter .visible-mobile { position: relative; }
						#topFooter .visible-mobile .search { position: relative; width: 256px; height: 45px; margin: 1em 0 0 0; }
						#topFooter .visible-mobile > .search { position: absolute; top: 54%; left: 5%; margin: 0 0 0 35px; z-index: 1; }
						#topFooter .visible-mobile .search label { position: absolute; left: -9999px; }
						#topFooter .visible-mobile .txtSearchQuery { width: 222px; background-color: #fff; color: #8e8e8e; height: 20px; padding: 6px; margin: 5px 20px 0 0; border: 1px solid #ccc; border-color: #ccc #fff #fff #ccc; font-size: 1.2em; box-shadow: -1px -1px 0 #fff; }
						#topFooter .visible-mobile .imgSearchSubmit { position: absolute; top: 0; right: 0; color: #fff; width: 30px; height: 30px; margin: 7px 22px 0 0; font-weight: normal; text-shadow: -1px -1px 0 #900;}
						
html:lang(fr) #mobile-sign-in-btn h2 { color: #FFFFFF; }
html:lang(fr) .bottomFooterMobile .footer-logo { width: 260px; }
html:lang(fr) #legal { width: 240px; }
html:lang(fr) .bottomFooterMobile ul > li { width: auto; }

@media only screen and (max-device-width: 767px) and (min-device-width: 320px) and (orientation: portrait) {
	.tile img { display: block; margin: 0 auto; }
	.tile.mobileBanking img { display: block; margin: 0 auto; margin-bottom: 20px; }
	
	html:lang(fr) .ribbons > ul > li > header > span { width:63%; white-space:normal; }
	
}
@media only screen and (max-device-width: 767px) and (min-device-width: 320px) and (orientation: landscape) {
	.bottomFooterMobile ul > li { width: 10%	 }
	.topFooterMobile .scotiaHelps { background-position: 1% 100%; padding-left: 50px; }	
	.tile .bgImage { background-position: top center; margin: -19px -10px 0px -10px; padding-top: 20px; }
	.tile img { display: block; margin: 0 auto; }
	.tile.mobileBanking img { display: block; margin: 0 auto; margin-bottom: 20px; }
	.tile .bgImage.whychoose { background-position: 50% 30%; background-size: 80%; }
	#content .tile .whychoose p { margin-top: 205px; }
	
	html:lang(fr) .bottomFooterMobile ul > li { width: auto; }
	html:lang(fr) #legal { width: 36%; }
}

@media only screen and (max-device-width: 320px) and (orientation: portrait) {
	.topFooterMobile .socialMediaLinks > li { padding-right: 6%;	}
	.tile.mobileBanking img { margin-top: 0; width: 100% }
	.tile img { width: 100%; }
	.ribbons > ul > li > header > span { width:37%; white-space:normal; }
	
	html:lang(fr) #content .tile .whychoose p { margin-top: 125px }
	html:lang(fr) .ribbons > ul > li > header > span { width:62%; white-space:normal; }
	html:lang(fr) .tile h4 { margin:0 0 15px 0; }
	html:lang(fr) #content .tile .adspot3 p { width:82%; }
}

@media only screen and (max-device-width: 320px) and (orientation: landscape) {
	html:lang(fr) #content .tile .whychoose p { margin-top: 145px }
}