/*Styles are being written with bootstrap in mind, so class names will be similar */

/*Responsive*/


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

/*Global*/

html { min-width: 1000px; background-color: #E2E2E2; }
*:not([type="submit"]) { box-sizing: initial; }
a { color: #d81e05; font-size: 12px; }
    a[href^="tel:"] { cursor: default; text-decoration: none; font-weight: bold; }
hr { background-color: #D9D9D9; opacity: 0.5; }
#content p { font-size: 15px; margin: 15px 0; color: #444444; }

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

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

/*Remove dots bg*/

#top { background-image: none; }
#content { width: auto; margin: 0; padding: 0; background: none; border: none; }
.wrapper { background-image: none; padding: 0; }
#language a { color: #555; } 
#scotia-sites li a { color: #555; }

/*Template layout*/

form { width: 100%; }
button, input, select, textarea { line-height: normal; }

/*Row spans entire viewport to colour background */
/*Col spans content width and is centred */
.header { width: 980px; margin: 0px auto; font-size: 12px; z-index: 999; clear: both; background-color: #fff; }

.col { width: 980px; margin: 0 auto; }
.btn { font-size: 14px; cursor: pointer; }
.btn-primary, .btn-default { position: relative; display: inline-block; padding: 9px 25px; 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; }
.tile .btn-primary:hover { margin-bottom: -1px; top: unset;}
.tile .btn-default:hover { margin-bottom: -1px; top: unset;}

/*Extend template, match colours in designs*/

#top { background-color: #E2E2E2; }
#logoHeader { background-color: white; }
#serviceMenuHeader { background-color: #eee; clear: both; }
#serviceMenuHeader .header { z-index: 1000; }
#megaMenuHeader { background-color: #d81e05; }
#mega-menu { border: none; }
#search-panel { margin: 0 auto; width: 980px; }
#search-nav-top { margin-bottom: 30px; }
#docs h2 { font-size: 1.6em; padding-bottom: 15px; line-height: 1.8em; }
#docs div>p { font-size: 0.9em; line-height: 1.5em }
#search-line { padding: 20px; }
.norm { font-size: 1.5em; }
#docs a.pointer { font-size: 1em; }
#selection li, #docs li { margin-bottom: 1.3em; }
.navigation { padding: 20px 0; margin: 20px 0; }
#search-panel ul.pager > li { font-size: 1.1em }


#rotatorMain { background-color: white; border-bottom: 1px solid #C5C5C5; -webkit-box-shadow: 0px 3px 8px 0px rgba(136,136,136,0.6); -moz-box-shadow: 0px 3px 8px 0px rgba(136,136,136,0.6); box-shadow: 0px 3px 8px 0px rgba(136,136,136,0.6); }
#ribbonMain { background-color: white; border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2; margin-top: 20px; }
#tileMain { background-color: #E2E2E2; padding: 0 0 20px 0; text-align: center; }
    #tileMain .col { width: 1000px; }

#topFooter { background-color: #f2f2f2; padding: 35px 0 15px 0;; font-size: 10px; }
#bottomFooter { background-color: #f2f2f2; padding: 10px 0; font-size: 10px; }
#legalFooter { background-color: #f2f2f2; padding: 10px 0; }

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




/*Modules*/
.tile { position: relative; display: inline-block; width: 314px; min-height: 370px; padding: 15px 20px 60px 20px; border: 1px solid #D2D2D2; margin: 20px 8px 0 8px; vertical-align: top; text-align: left; background-color: white; 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 h4 { margin: 0 0 20px 0; font-size: 2em; 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: 3em; font-weight: bold; display: block; }
	#content .tile .adspot0 p { font-size: 2em; line-height: 1.3em; width: 50%; }
	.tile .adspot2 h4 { margin-bottom: 5px; }
	.tile .adspot2 h5 { color: #D81E05; font-size: 3.5em; line-height: 1.1em; letter-spacing: -0.03em; }
	.tile .adspot3 h4 { font-size: 4em; }
	#content .tile .adspot3 p { font-size: 2.5em; }
    #content .tile h5 + p { margin-top: 0; }
    .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.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: 18px; right: 0; width: 50%; font-size: 1.5em; text-align: right; transform: translateY(50%); -webkit-transform: translateY(50%); }
    .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.65em; font-weight: bold; }
	#content .tile.news p { margin: 5px 0 25px 0; line-height: 1.4em; }
	.tile.mobileBanking h4 { font-size: 2.3em; font-weight: bold; margin-bottom: 0; }
	#content .tile.mobileBanking p { line-height: 1.4em; margin: 5px 0 10px 0; }
	.tile.mobileBanking img { margin: 10px 0 20px 0; }
	#content .tile .whychoose p { font-size:2.5em; margin-top:195px; }
	

.rotator { position: relative; height: 450px; z-index: 1; }
    .rotator > ul,  .rotator > ul { overflow: hidden; margin: 0; margin-left: 0%; padding: 0; list-style-type: none; white-space: nowrap; width: 100%; height: 100%; font-size: 0px; }
        .rotator > ul > li { transition: margin-left ease-out 1s; position: relative; display: inline-block; margin: 0; padding: 0; list-style-type: none; width: 100%; height: 100%; vertical-align: top; white-space: nowrap; }
    .rotator h2 { font-family: Frutiger, Arial, Helvetica, sans-serif; font-size: 48px; line-height: 1em;     letter-spacing: -1.5px; }
 .rotator h3 { font-size: 20px; line-height: 1.3em; margin-top: 20px;}
.rotator .btn { margin-top: 30px; font-size: 16px; }
.rotator > ul > li > a { display: block; width: 100%; }
    .rotator > ul > li > a > img { position: absolute; width: 100%; height: 100%; }
    .rotator > ul > li > a > article { position: absolute; bottom: 50px; left: 0; padding: 5px 10px; background-color: rgba(255,255,255,0.7); width: 85%; font-size: 14px; }

.rotator > nav { position: absolute; bottom: 0; left: 50%; width: 980px; height: 44px; margin-left: -490px; text-align: center; z-index: 100; }
    .rotator > nav > a { cursor: pointer; display: block; position: absolute; bottom: 225px; margin-bottom: -22px; text-align: center; text-decoration: none; vertical-align: middle; background-color: rgba(238,238,238,0.7); border: 1px solid rgba(203,203,203,0.7); border-radius: 5px; box-sizing: border-box; }
        .rotator > nav > a:hover { background-color: rgba(213,213,213,0.7); }
    .rotator > nav .next { right: 0; }
    .rotator > nav .prev { left: 0; }
    .rotator > nav > a img { display: block; margin: 7px 11px; }
    .rotator > nav ul { list-style-type: none; padding: 0px; margin: 0px; position: relative; font-size: 0; }
		.rotator > nav > ul > li > a:focus { outline: 1px dotted #000; }
        .rotator > nav ul li { display: inline-block; padding: 0 6px; }
        .rotator > nav ul a { cursor: pointer; overflow: hidden; text-indent: -100px; background-color: #d2d2d2; height: 12px; width: 12px; display: block; text-align: center; color: #fff; }
    .rotator > nav li.selected a { opacity: 1; background-color: #d81e05; }
.rotator .slide { height: 100%; background: center center no-repeat; background-size: auto 100%; margin-right: -15px; }
    .rotator .slide > div { position: relative; top: 48%; width: 850px; margin: 0 auto; padding: 0 310px 0px 0; box-sizing: border-box; transform: translateY(-50%); -webkit-transform: translateY(-50%); overflow: hidden; z-index: 10; }

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

.ribbons { width: 100%; position: relative; padding: 10px 0 8px 0; }
 .ribbons > ul { background-color: #EEEEEE; position: relative; padding: 0; overflow: hidden; line-height: 0; margin: 0 5px; white-space: nowrap; z-index: 100; }
.ribbons > ul:before, .ribbons > ul:after { content: ""; position: absolute; top: 0; width: 25px; height: 83px; 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; line-height: normal; list-style-type: none; box-sizing: border-box; }
    .ribbons > ul > li > header { top: 1px; position: absolute; width: 190px; height: 65px; padding: 7px 0 10px 0; margin: 10px 0 0 -10px; text-align: center; line-height: 42px; border: 1px solid transparent; cursor: pointer; z-index: 100; box-sizing: border-box; transform: translateX(40px); -webkit-transform: translateX(40px); transition: left 0.3s ease-in-out 0s, border-color 0s ease 0.5s, width 0s ease 0.5s; }
    .ribbons > ul > li.expanded > header { transition: left 0.3s ease-in-out 0s, border-color 0s ease 0s, width 0s ease 0s; }
    .ribbons > ul > li:nth-of-type(1n+2) > header { border-left-color: #D5D5D5; }
    .ribbons > ul > li.selected.expanded > header { width: 190px; height: 73px; background-color: #FFFFFF; border-top-color: #D5D5D5; border-left-color: #D5D5D5; border-right-color: #D5D5D5; z-index: 10; transition: left 0.3s ease-in-out 0s, height 0s ease 0s, border-color 0s ease 0s, width 0s ease 0s; }
    .ribbons > ul > li.selected.expanded + li > header { border-left-color: transparent; }
    .ribbons > ul > li > header > img { vertical-align: middle; }
    .ribbons > ul > li > header > span { color: #515151; display: inline-block; max-width: 110px; padding-left: 10px; font-size: 16px; line-height: 1.1em; text-align: left; white-space: normal; vertical-align: middle; z-index: 10; }

/*Tab Collapsible for Ribbons*/
.ribbons > ul > li { transition: max-height 0.3s ease-in-out 0.2s; max-height: 82px; z-index: 100; overflow: hidden; vertical-align: top; }
    .ribbons > ul > li.expanded { transition: max-height 0.3s ease-in-out 0s; max-height: 1000px; overflow: visible; }
    .ribbons > ul > li > section { position: relative; transition: opacity 0.3s ease-in-out 0s, margin 0.3s ease-in-out 0.2s; margin-top: 82px; width: auto; opacity: 0; }
        .ribbons > ul > li > section:before { content: ""; position: absolute; top: 0; left: -20px; width: 980px; /*border-top: 1px solid #D5D5D5;*/ opacity: 0; }
        .ribbons > ul > li.expanded > section:before { opacity: 1; transition: opacity 0.3s ease-in-out 0s, margin 0.3s ease-in-out; }
    .ribbons > ul > li.expanded > section { transition: opacity 0.3s ease-in-out 0.3s, margin 0.3s ease-in-out; opacity: 1; margin-top: 84px; background-color:#FFFFFF; border: none; }
	.ribbons > nav > ul > li > a:focus { outline: 1px dotted #000; }
.ribbons > ul > li > section > div#close { border: 1px solid #D4D4D4; background-color: #EEEEEE; width: 11px; height: 15px; padding: 5px 10px 10px 10px; position: absolute; right: 0; top: 35px; cursor: pointer; font-size: 20px; color: #D81E05; font-weight: bold; z-index: 200; }
	
	
.contentColumn { display: inline-block; width: 315px; height: 100%; padding: 30px 40px 10px 0px; font-size: 1.04em; line-height: 1.8em; vertical-align: top; white-space: normal; box-sizing: border-box; }
    .contentColumn article { padding: 5px 0 10px 0; }
    .contentColumn h2 { margin-bottom: 20px; font-size: 38px; line-height: 1em; }
 .contentColumn h3 { margin-top: 0; color: #515151; font-size: 24px; line-height: 1.2em; }
 .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 { font-size: 15px; margin: 10px 0 15px 0; }
#content .contentColumn p > a { font-size: 15px; }
.contentColumn article h3 { font-size: 18px; font-weight: bold; }
.contentColumn img { margin: 0px 0 15px 0; border: 1px solid #d4d2d2; padding: 7px; }
.contentColumn .btn-default { min-width: 90px; line-height: normal; text-align: center; box-sizing: border-box; font-size: 14px; margin-bottom: 15px; }
.contentColumn .ribbonBanner { border: 1px solid #D4D2D2; padding: 0; margin: 0; }
.contentColumn .ribbonBanner h3 { font-size: 26px; font-weight: normal; padding: 20px 20px 0 20px; }
.contentColumn .ribbonBanner img { border: none; margin: 0; padding: 0; margin-bottom: -7px; }
#content .contentColumn .ribbonBanner p { margin: 5px 0 0 0; padding: 0 20px}
.contentColumn .ribbonBanner .btn-default { margin: 15px 20px 20px 20px; }

.ribbons > nav { height: 0; position: absolute; top: 0; width: 100%; text-align: center; z-index: 100; }
    .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 { position: absolute; display: block; top: 35px; width: 25px; height: 83px; padding: 30px 0 0 0; box-sizing: border-box; transform: translateY(-30%); -webkit-transform: translateY(-30%); cursor: pointer; background-color: #666666; }
         .ribbons > nav a.disabled, .ribbons > nav a:hover { background-color: #CBCBCB; }
    .ribbons > nav .prev { left: 0; border-radius: 5px 0 0 5px; }
    .ribbons > nav .next { right: 0; border-radius: 0 5px 5px 0; }
		.ribbons > nav a.next { right: 0; }
    .ribbons > nav img { display: block; width: auto; height: 20px; margin: 0 auto; }

.googleMap { width: 100%; height: 100%; }

.topFooter > div { font-size: 1.5em; line-height: 1.4em; }
.topFooter > div h3 { font-size: 1em; font-weight: bold; }
.topFooter > div a { font-size: 0.933em; }
.topFooter > div .phone { font-size: 1.2em; }
.topFooter > div .phone:hover { cursor: pointer; }
.socialMediaLinks img { display: block; width: auto; height: 36px; }

#legal small { font-size: 1.1em; }


@media (max-width: 1020px) {
    html { zoom: 0.75;  }
}

/*Vignette Styles*/

html { background: none; background-color: #e2e2e2;}
.wrapper {width: 100%;}
.footer-wrapper { width: 100%; }
#content-divider { display:none;}
#footer {margin:0;}
#footer li { font-size: 1em; }
hr {border-color:white;}
#btm { background-color: #f2f2f2; border: none; }
#legal { background-color: #f2f2f2; height: auto; padding: 10px 35px 10px 70px; color: #666; font-size: 11px; line-height: 1em; background-image: none; }
#sign-in-btn { font-size: 0.7em; }


/** FOOTER **/
.topFooter { margin:0; }
.topFooter .footer-right { width:27%; }
.topFooter .footer-left { margin-left: 2%; width: 27%; }
.topFooter .footer-center { width:42% }
.topFooter > div { width: 27%; display: inline-block; vertical-align: top; }
.topFooter > div h3 { margin-bottom: 4px; font-size: 1.2em; line-height: 1em; font-weight: bold; }
.topFooter > div a { font-size: 1em; }
.topFooter > div p { color: #444444; margin: 10px 0 0 0; }
.topFooter > div .phone { cursor: pointer; font-size: 1.286em; line-height: 1.5em; color: #666666; display: block; }
.topFooter .socialMediaLinks { padding: 0; margin: 18px 0 0 5px; }
.topFooter .socialMediaLinks > li { list-style-type:none; display:inline-block; max-width:25%; padding-right: 5%;}
.topFooter .socialMediaLinks > li:last-of-type { padding-right: 0; }
.topFooter .footer-right h3 { padding-left: 5px; }
.topFooter > div > img { display:inline-block; max-width:18%; vertical-align:top; padding-right:4%; }
.topFooter > div > aside { display:inline-block; width:80%; }
.topFooter .scotiaHelps { border-top: 1px solid #D9D9D9; margin: 15px 0; padding: 5px 0 0 60px; background-image: url('/ca/common/icons/icn-footer-scotiahelps.png'); background-repeat: no-repeat ; background-position: 5% 70%; }
.topFooter .scotiaHelps a { font-weight: bold; }
#topFooter .visible-desktop { position: relative; }
#topFooter .visible-desktop .search { position: relative; width: 276px; height: 45px; margin: 1em 0 0 0; }	
#topFooter .visible-desktop .search label { position: absolute; left: -9999px; }
#topFooter .visible-desktop .txtSearchQuery { width: 280px; left: 0; font-size: 1.03em; position: absolute; top: 0; right: 0; background-color: #fff; color: #8e8e8e; height: 20px; height: 20px\0/IE8+9; padding: 6px; margin: 5px 20px 0 0; border: 1px solid #ccc; border-color: #ccc #fff #fff #ccc; -webkit-box-shadow: -1px -1px 0 #fff; -moz-box-shadow: -1px -1px 0 #fff; box-shadow: -1px -1px 0 #fff; }
#topFooter .visible-desktop .imgSearchSubmit { position: absolute; top: 0; right: 0; color: #fff; width: 30px; height: 30px; margin: 7px -20px 0 0; font-weight: normal; text-shadow: -1px -1px 0 #900; }
#topFooter #search { position: relative; margin-left: -20px; margin-top: 15px; }

.bottomFooter { margin: 0; }
.bottomFooter ul { display: inline-block; vertical-align: bottom; }
.bottomFooter .otherLinks { float: right; padding: 30px 9px 4px 0; }
.bottomFooter .footerLinks { width: 76.5%; margin-left: 10px; padding: 20px 0 10px 0; }
.bottomFooter .footer-logo { text-align: right; margin-top: -28px; margin-right: 20px; }
.bottomFooter ul { padding: 20px 0 10px 0; }
	.bottomFooter ul > li { list-style-type: none; display: inline-block; padding: 3px 10px; }
.bottomFooter .footerLinks > li > a { color: #d81e05; font-size: 1.3em; }
.bottomFooter .otherLinks li { padding: 3px 8px; }

html:lang(fr) .topFooter .scotiaHelps { background-position: 2% 70%; padding: 5px 0 0 52px; }
html:lang(fr) #content .tile .whychoose p { margin-top: 155px; }
html:lang(fr) #content .tile .adspot3 p { width:91%; }

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
	#serviceMenuHeader {
		clear: none;	
	}
	.footer-wrapper #footer {
		width: auto;	
	}
	.footer-wrapper {
		background-color: #F2F2F2;	
	}
	#legal {
		padding: 40px 0 0 40px;	
	}
}
@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape) {
	#serviceMenuHeader {
		clear: none;	
	}
	.footer-wrapper #footer {
		width: auto;	
		margin: 0;
	}
	#legal {
		padding: 40px 0 0 40px;
	}
}
@media only screen and (max-device-width: 767px) and (min-device-width: 320px) and (orientation: portrait) {
	#serviceMenuHeader {
		clear: none;	
	}
}
@media only screen and (max-device-width: 767px) and (min-device-width: 320px) and (orientation: landscape) {
	#serviceMenuHeader {
		clear: none;	
	}
	.bottomFooterMobile ul > li {
		width: 10%	
	}
}