@import url('https://fonts.googleapis.com/css?family=Open+Sans:700,800'); @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); input, button, select, textarea, body, .lead, .font-body { &, &.h1, &.h2, &.h3, &.h4, &.h5, &.h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Lato', sans-serif; font-weight: 400; strong, &.bold, .bold { font-weight: 700; } } } h1, h2, h3, h4, h5, h6, .font-heading { &, &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { font-family: 'Open Sans', sans-serif; font-weight: 400; strong, &.bold, .bold { font-weight: 600; } } } /*------------------------------------------*\ Main Variables \*-------------------------------------------*/ @baseColor: #a41f35; @buttonMain: #000000; @buttonCustom: #fff; @line-height-heading: 1.3; @line-height-body: 1.6; @pixelfont: 16px; @h1: 46px; @h2: 40px; @h3: 34px; @h4: 24px; @h5: 18px; @h6: 16px; @lead: 20px; @accent2: #5b5b5b; @accent3: #004CC9; @accent4: #6F6F6F; @accent5: #E8EBED; /* Do not touch */ @darkColor: #000; @lightColor: #fff; /*-------------------------------------------*\ Helper function \*-------------------------------------------*/ .mixin (@a) when (lightness(@a) >= 66%) { color: @darkColor; } .mixin (@a) when not (lightness(@a) >= 66%) { color: @lightColor; } ::selection { background: @baseColor; } ::-moz-selection { background: @baseColor; } .complementary(@_a){ background-color: @_a; .mixin(@_a); } .btn(@b:@buttonMain){ border-color: @b; .complementary(@b); text-shadow: none; &:hover,.disabled, [disabled] { background-color: darken(@b, 4%); border-color: darken(@b, 4%); .mixin(@b); } &:active, .active, &:focus, .focus { background-color: darken(@b, 8%); border-color: darken(@b, 8%); .mixin(@b); } } .element(@_arg, @font:@_arg) { a:hover, .sidebar-content .nav.nav-tabs.nav-stacked .parent ul a.selected, .sidebar-content .nav li li a:hover, div[role="complementary"] div > ul > li:hover{ color:darken(@font,8%) } a, .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav li a:hover, .nav li a:focus, .navbar .nav > li > a:focus, .navbar .nav > li > a:hover, .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span, nav[role="navigation"] .nav-normal > .active > a, nav[role="navigation"] .nav-normal li a:hover, nav[role="navigation"] .nav-pills-square > .active > a, nav[role="navigation"] .nav-bar > li > a:hover, nav[role="navigation"] .nav-bar > li > a:focus, nav[role="navigation"] .nav-bar > .active > a, nav[role="navigation"] .nav-bar-top > .active > a, nav[role="navigation"] .nav-bar-top > li > a:hover, nav[role="navigation"] .nav-bar-underline > .active > a, nav[role="navigation"] .nav-underline > .active > a, nav[role="navigation"] .nav-underline > li > a:hover, nav[role="navigation"] .nav-separator > .active > a, nav[role="navigation"] .nav-separator > li > a:hover, .sidebar-content .nav a.active, div[role="complementary"] div > ul > li:active, .sidebar-content .nav li a:hover, .sidebar-content .nav li a:focus { color: @font; } .nav a:hover .caret { border-bottom-color: @font; border-top-color: @font; } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus, .nav-tabs.nav-stacked > .active > a, .nav-tabs.nav-stacked > .active > a:hover, .nav-tabs.nav-stacked > .active > a:focus, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus, .grid li a:hover img, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, .gform_wrapper li.gfield_error input[type="text"]:focus, .gform_wrapper li.gfield_error input[type="url"]:focus, .gform_wrapper li.gfield_error input[type="email"]:focus, .gform_wrapper li.gfield_error input[type="tel"]:focus, .gform_wrapper li.gfield_error input[type="number"]:focus, .gform_wrapper li.gfield_error input[type="password"]:focus, .gform_wrapper li.gfield_error textarea:focus { border-color: @_arg; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus, .nav-tabs.nav-stacked > .active > a, .nav-tabs.nav-stacked > .active > a:hover, .nav-tabs.nav-stacked > .active > a:focus, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .progress .bar, .progress-striped .bar, .progress-info.progress-striped .bar, .progress-striped .bar-info, nav[role="navigation"] .nav-pills-square li a:hover { background-color: @_arg; } .form-control:focus{ border-color: @_arg; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(red(@_arg),green(@_arg), blue(@_arg), 0.6); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{ background-color: @_arg; border-color: @_arg; } } .home a { text-decoration: none; } .transition(@property: all; @duration: .3s; @function: ease; @delay: 0s) { -moz-transition: @property @duration @function @delay; -o-transition: @property @duration @function @delay; -ms-transition: @property @duration @function @delay; transition: @property @duration @function @delay; } body, p, .gform_body .gfield input, .gform_body .gfield textarea, .gform_body .gfield select { font-size: @pixelfont; line-height: @line-height-body; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: @line-height-heading; } h1, .h1 { font-size: @h1; } h2, .h2 { font-size: @h2; } h3, .h3 { font-size: @h3; } h4, .h4 { font-size: @h4; } h5, .h5 { font-size: @h5; } h6, .h6 { font-size: @h6; } .lead { font-size: @lead; line-height: @line-height-body; } /* Scrolltotop */ #topcontrol { background-color: rgba(0, 0, 0, 0.1); background-position: center center; background-repeat: no-repeat; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-radius: 3px; color: #ffffff; height: 48px; line-height: 55px; margin: 0 15px 15px 0; text-align: center; width: 48px; z-index: 10000; } #scrolltotop:before { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #ffffff; border-image: none; border-style: solid; border-width: 10px; content: ""; height: 0; left: 28%; position: absolute; top: 17%; width: 0; } #topcontrol:hover{ background-color: darken(@baseColor,10%); } /*-------------------------------------------*\ Accent Colors \*-------------------------------------------*/ .accent { color: @baseColor !important; } .accent2 { color: @accent2 !important; } .accent3 { color: @accent3 !important; } .accent4 { color: @accent4 !important; } .accent5 { color: @accent5 !important; } /*-------------------------------------------*\ Custom Fonts \*-------------------------------------------*/ .font-custom1 { font-size: 15px; } .font-custom2 { font-size: 20px; } /*-------------------------------------------*\ Buttons \*-------------------------------------------*/ .element(@baseColor); .btn-primary{ .btn(); &:hover,&:active,&:focus { } } .btn-custom { .btn(@buttonCustom); &:hover,&:active,&:focus { color: #fff; background-color: #a41f35; border-color: #a41f35; } } .btn-custom2 { .btn(); &:hover,&:active,&:focus { } } .btn { text-transform: uppercase; border-radius: 50px; } .btn-lg { padding: 10px 25px; } /*-------------------------------------------*\ Header \*-------------------------------------------*/ .home .header-shadow { box-shadow: none; } header img.brand { width: 100%; max-width: 297px; margin-top: 30px; } header nav[role="navigation"] > ul:first-child { margin-top: 0; } header nav[role="navigation"] > ul > li { > a { padding: 10px 0; color: #fff; font-size: 18px; &.dropdown-toggle .caret { border-bottom-color: #fff; border-top-color: #fff; } } + li { margin-left: 20px; } &:hover, &:active, &:focus, &.active { > a { color: @baseColor; background-color: transparent; box-shadow: 0 -2px 0 @baseColor inset; &.dropdown-toggle .caret { border-bottom-color: @baseColor; border-top-color: @baseColor; } } } } .nav li a:hover, .nav li a:focus { color: @baseColor; background-color: transparent; border-color: transparent; } nav[role="navigation"] ul > li .dropdown-menu > li:hover > a, nav[role="navigation"] ul > li .dropdown-menu > li > a:hover { background: none repeat scroll 0 0 @baseColor; color: #fff; } .main-header .flex-box { height: 120px; } .main-header .phone { margin-bottom: 15px; color: #5b5b5b; .fa-stack { margin-right: 5px; font-size: 12px; } span.fa-stack > i + i { color: #000; font-size: 0.8em; } } /*-------------------------------------------*\ Hompage CSS \*-------------------------------------------*/ .home section { box-shadow: inset 0px 12px 20px 0px rgba(0, 0, 0, 0.4); } /* hp banner */ .hp-banner img { width: 100%; margin-top: -450px; } /* our firm */ .hp-firm { min-height: 800px; } .hp-firm p { margin: 20px 0 30px; } /* I know insurance */ .hp-grad { position: relative; overflow: hidden; } .hp-grad .flex-box { height: 800px; } .hp-grad .img-person { position: absolute; left: 13vw; bottom: -70px; } .hp-grad.grad-right .img-person { left: auto; right: 13vw; } /* hp blog */ .hp-blog .row-condensed { margin: 0 -15px; } .hp-blog .row-condensed .grid { padding: 0 15px; } .hp-blog article .well { min-height: 340px; background-color: #dcdcdc; border-radius: 0; border: none; } .hp-blog h3[itemprop="headline"] { line-height: 1; } .hp-blog h3[itemprop="headline"] a { color: #000; font-size: 24px; } .hp-blog div[itemprop="articleBody"] { font-size: 16px; } .hp-blog h3[itemprop="headline"] a:hover { color: #a41f35; } .hp-blog article .btn { padding: 10px 25px; font-size: 16px; background-color: #fff; box-shadow: none; } .hp-blog article .btn:hover { color: #fff; background-color: #a41f35; } /*-------------------------------------------*\ Footer \*-------------------------------------------*/ .main-footer { font-size: 14px; h3 { text-transform: initial; } } .main-footer p { font-size: 14px; } .main-footer .col { margin-top: 13px; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; } /*-------------------------------------------*\ Global CSS \*-------------------------------------------*/ /* shortcode lawyer section */ .shortcode-lawyer .grid { /*display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;*/ display: block; } .shortcode-lawyer .grid > li { /*-webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%;*/ width: 33.33%; } .shortcode-lawyer .grid > li > a { visibility: hidden; } .shortcode-lawyer h3 a { color: #000; } .shortcode-lawyer .grid > li > h3 > a { font-size: 24px; } .shortcode-lawyer h3 a:hover, .shortcode-lawyer h3 a:active, .shortcode-lawyer h3 a:focus { color: #a41f35; } .shortcode-lawyer .row.spacer::after { display: none; } /* Sidebar */ //In the future, we will improve to all of cases. div[role="complementary"] .flexnav a.current-page { color: @baseColor !important; /* edit this property for active page */ } /* Well */ .page .well { background-color: #fff; border: 1px solid #ccc; } /* HR line */ hr { border-color: #ccc; } /* Social Media Icon */ .fa.fa-linkedin { font-family: "Font Awesome 5 Brands"; background-color: #a41f35; border-radius: 30px; color: #fff; display: inline-block; height: 30px; line-height: 30px; margin: auto 3px; width: 30px; font-size: 16px; text-align: center; margin-bottom: 30px; } /*------------------------------------------- Bio's Long Content -------------------------*/ .bio{ height: 550px; overflow: overlay; } /* Hide scrollbar for Chrome, Safari and Opera */ .bio::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .bio { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /*-------------------------------------------*\ Media Queries \*-------------------------------------------*/ @media (min-width: 992px) and (max-width: 1199px) { header nav[role="navigation"] .nav > li { > a { padding: 10px 8px; font-size: 15px; } + li { margin-left: 10px; } } .hp-banner img { margin-top: -220px; } .hp-grad .img-person { left: 0; max-width: 72vw; } .hp-grad.grad-right .img-person { right: 0; } .hp-blog article .well { min-height: 390px; } } @media (max-width: 991px) { h2, .h2 { font-size: 30px; } header nav[role="navigation"] { display: none; } .hp-banner img { margin-top: -130px; } .hp-grad .flex-box { height: auto; margin-top: 40px; text-align: center; } .hp-grad .img-person { position: static; margin: 0 auto; max-width: 350px; } .hp-blog article .well { min-height: 1px; } .shortcode-lawyer .grid { display: block; } .shortcode-lawyer .grid > li { float: none; width: 50%; } } @media (max-width: 767px) { header img.brand { width: 100%; max-width: 150px; margin-top: 20px; } .main-header .flex-box { height: auto; } .main-header .phone { text-align: center; margin-top: 10px; } .hp-banner img { margin-top: -60px; } .hp-firm { text-align: center; min-height: 1px; } .hp-firm .row > div { background-color: rgba(0,0,0,0.8); padding: 12px; } /* shortcode lawyer section */ .shortcode-lawyer .grid { display: block; } .shortcode-lawyer .grid > li { float: none; width: 100%; } .bio{ height: auto; } }

CONTACT

Get In Touch

While this website provides general information, it does not constitute legal advice. The best way to get guidance on your specific legal issue is to contact a lawyer. To schedule a meeting with a lawyer, please call 416-361-1500 or send an email to [email protected]

Black Sutherland LLP

5000 Yonge Street, Suite 1504
North York, ON M2N 7E9

Phone: 1‑866‑902‑7557

Toll Free: 1-866-902-7557 (1-866-90-BSLLP)

Fax: 416-361-1674

For Accounting Inquiries, Please Contact:

Kathy Treloar
Accounting Manager
416-840-1333
[email protected]

For All Other Inquiries, Please Contact:

Pamela Briggs
Business Administration Manager
416-840-1321
[email protected]

Nicole Sparkman
Business Operations Manager
416-840-1354
[email protected]