/* base.css v0.9 ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family:sans-serif; /* 1 */ -ms-text-size-adjust:100%; /* 2 */ -webkit-text-size-adjust:100%; /* 2 */ } /** * Remove default margin. */ body { margin:0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display:block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display:inline-block; /* 1 */ vertical-align:baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display:none; height:0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display:none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background:transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline:0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom:1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight:bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style:italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size:2em; margin:0.67em 0; } h2.h1restyle { font-size:2em; /*margin:0.67em 0;*/ } /** * Address styling not present in IE 8/9. */ mark { background:#ff0; color:#000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size:80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { max-width:100%; border:0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow:hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin:1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing:content-box; box-sizing:content-box; height:0; } /** * Contain overflow in all browsers. */ pre { overflow:auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family:monospace, monospace; font-size:1em; } /* Forms ========================================================================== */ /** * Known limitation:by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue:affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color:inherit; /* 1 */ font:inherit; /* 2 */ margin:0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow:visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform:none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance:button; /* 2 */ cursor:pointer; /* 3 */ } /* Range input styles for slider ========================================================================== */ input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; /*fix for FF unable to apply focus style bug */ border: 1px solid #f2f2f2; background: #f2f2f2; padding: 0; } input[type=range]::-webkit-slider-runnable-track { height: 2px; background: #cacaca; border: none; border-radius: 2px; margin: 24px 0 20px 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 28px; width: 28px; border-radius: 50%; background: #0079c1; margin-top: -14px; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; } input[type=range]::-moz-range-track { height: 5px; background: #cacaca; border: none; border-radius: 2px; } input[type=range]::-moz-range-thumb { border: none; height: 28px; width: 28px; border-radius: 50%; background: #0079c1; } /*hide the outline behind the border*/ input[type=range]:-moz-focusring { outline: 2px solid #f2f2f2; outline-offset: -1px; } input[type=range]::-ms-track { height: 2px; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ background: transparent; /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; border-width: 20px 0; /*remove default tick marks*/ color: transparent; } input[type=range]::-ms-fill-lower { background: #777; border-radius: 2px; } input[type=range]::-ms-fill-upper { background: #ddd; border-radius: 2px; } input[type=range]::-ms-thumb { border: none; height: 28px; width: 28px; border-radius: 50%; background: #0079c1; } input[type=range]:focus::-ms-fill-lower { background: #888; } input[type=range]:focus::-ms-fill-upper { background: #cacaca; } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor:default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height:normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing:border-box; /* 1 */ padding:0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height:auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance:textfield; /* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box; /* 2 */ box-sizing:content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; } /** * Define consistent border, margin, and padding. */ fieldset { border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border:0; /* 1 */ padding:0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow:auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE:the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight:bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse:collapse; border-spacing:0; } td, th { padding:0; } /* Fonts ========================================================================== */ @font-face { font-family:"dax"; src:url("../fonts/dax.eot"); src:url("../fonts/dax.eot?#iefix") format("embedded-opentype"), url("../fonts/dax.woff") format("woff"); font-weight:normal; font-style:normal; } @font-face { font-family:"dax-bold"; src:url("../fonts/dax-bold.woff") format("woff"); font-style:normal; } @font-face { font-family:"dax-light"; src:url("../fonts/dax-light.woff") format("woff"); font-weight:normal; font-style:normal; } @font-face { font-family:"dax-medium"; src: url("../fonts/dax-medium.woff") format("woff"); font-weight:normal; font-style:normal; } /* Tag defaults ========================================================================== */ /** * html */ html { background-color:#0079c1; } /** * body */ body { color:#414141; font-size:15px; font-family:"dax", Arial, Sans-Serif; } /** * main */ main { /*max-width:1200px;*/ min-width:320px; margin:0 auto; padding:0 0 45px; } @media (max-width:767px) { main { padding:0 0 30px; } } /** * page */ #page { width:100%; background-color:#ffffff; } /** * popup */ #popup { width:100%; background-color:#ffffff; } #popup main { padding:30px 0; } /** * section */ section { padding:0 45px; } @media (max-width:767px) { section { padding:0 30px; } } section.flush { padding:0; } section.flush.top { padding-top:0; } section.flush.right { padding-right:0; } section.flush.bottom { padding-bottom:0; } section.flush.left { padding-left:0; } section section { padding:0; } /** * horizontal rule */ hr { height:1px; margin:45px 0; border:0; background-color:#cacaca; } hr.no-line { height:45px; margin:0; background-color:transparent; border: 0;} hr.flush { margin:0; } hr.flush.top { margin:0 0 45px; } hr.flush.bottom { margin:45px 0 0; } hr.flush.top.bottom { margin:0; } @media (max-width:767px) { hr { margin:30px; } hr.flush { margin:0; } hr.flush.top { margin:0 0 30px; } hr.flush.bottom { margin:30px 0 0; } hr.flush.top.bottom { margin:0; } hr.no-line { height:30px; } } /** * headers */ h1, h2, h3, h4, h5, h6 { margin:-.15em 0; line-height:1.3em; font-weight:normal; } h1 { font-family:"dax-light"; font-size:2.533em; } h2 { font-family:"dax-light"; font-size:1.733em; } h2.h1restyle { font-family:"dax-light"; font-size:2.533em; } h3 { font-family:"dax-medium"; font-size:1.333em; } h4 { font-family:"dax-bold"; font-size:1.133em; } h5 { font-family:"dax-bold"; font-size:1em; } h6 { font-family:"dax"; font-size:1em; } @media (max-width:767px) { h3 { font-size:1.466em; } h4 { font-size:1.2em; } h5 { font-size:1.066em; } h6 { font-size:1.066em; } } h1 sup, h1 sub, h2 sup, h2 sub, h3 sup, h3 sub, h4 sup, h4 sub, h5 sup, h5 sub, h6 sup, h6 sub { font-family:"dax-light"; } /** * links */ a { color:#0079c1; line-height:1.3em; text-decoration:none; } a:hover { text-decoration:underline; } a:focus { outline:1px dotted #0079c1; text-decoration:underline; } a:active { text-decoration:underline; } a.active { text-decoration:none; } a.disabled { color:inherit; cursor:default; } a.disabled:hover, a.disabled:focus, a.disabled:active { text-decoration:none; } a.disabled:focus { outline:1px dotted #414141; } @media (min-width:768px) { a[href^="tel"] { color:inherit; cursor:default; } a[href^="tel"]:hover, a[href^="tel"]:focus, a[href^="tel"]:active { text-decoration:none; } a[href^="tel"]:focus { outline:1px dotted #414141; } } /** * paragraph */ p { margin:-.15em 0; line-height:1.3em; } @media (max-width:767px) { p { font-size:1.066em; } } /** * strong */ strong { display:block; margin:-.15em 0; line-height:1.3em; font-family:"dax-bold"; font-size:1.133em; font-weight:normal; } /** * em */ em { display:block; margin:-.15em 0; line-height:1.3em; font-family:"dax-italic"; font-size:.866em; font-style:normal; } /** * lists */ ol { list-style: decimal; } ul { list-style: disc; } li { list-style: inherit; } ul, ol { margin:-.15em 0; padding:0 0 0 3em; } ul > li, ol > li { line-height:1.3em; } ul.double-spaced > li, ol.double-spaced > li { margin:.9em 0 0; } ul.double-spaced > li:first-child, ol.double-spaced > li:first-child { margin:0; } ul.flush, ol.flush { padding:0; list-style:none; } ul.row { padding:0; list-style:none; text-align:center; } ul.row > li { display:inline-block; margin:0 0 0 30px; } ul.row > li:first-child { margin:0; } @media (max-width:767px) { ul, ol { padding:0 0 0 1.3em; } ul.flush, ol.flush { padding:0; } ul.row { padding:0; text-align:left; } ul.row.centered, ul.row.centered-mobile { text-align:center; } ul.row > li { display:block; margin:.9em 0 0; } ul.row:first-child { margin:0; } } /** * superscript, subscript */ sub, sup { font-size:.7em; line-height:1em; white-space:nowrap; } /** * bold */ b { font-family:"dax-bold"; font-weight:normal; } /** * italic */ i { font-family:"dax-italic"; font-style:normal; } /** * u */ u { text-decoration:underline; } /** * s */ s { text-decoration:line-through; } /** * abbr */ abbr { border-bottom:1px dotted #cacaca; } sub abbr, sup abbr { border-bottom:0; } /** * mark */ mark { background-color:#f2f2f2; } /** * q */ q:before { content:"“"; } q:after { content:"â€Â"; } html[lang="fr"] q:before { content:"«"; } html[lang="fr"] q:after { content:"»"; } /** * small */ big { font-size:1.133em; } /** * small */ small { font-size:.866em; } /** * var */ var { font-style:normal; } /** * table */ table { width:100%; } table thead th { padding:0 15px 15px; border-bottom:1px solid #414141; line-height:1.3em; font-size:1.2em; font-weight:normal; text-align:left; } table tbody th, table tbody td { padding:15px; border-bottom:1px solid #cacaca; line-height:1.3em; font-weight:normal; text-align:left; } table tbody td:nth-child(odd) { background-color:#f2f2f2; } table tfoot td { padding:15px 15px 0; font-size:.866em; text-align:left; } @media (max-width:767px) { table thead th { padding:0 7px 7px; } table tbody th, table tbody td { padding:7px; } table tfoot td { padding:7px 7px 0; } } table.centered thead th { text-align:center; } table.centered tbody th, table.centered tbody td { text-align:center; } table.centered thead th:first-child, table.centered tbody th:first-child, table.centered tbody td:first-child { text-align:left; } .fill table tbody th, .fill table tbody td:nth-child(odd) { background-color:#ffffff; } .fill table tbody td:nth-child(even) { background-color:#f2f2f2; } /** * input elements */ label { display:block; margin:-.15em 0; line-height:1.3em; font-family:"dax-medium"; } label input[type="text"], label input[type="number"], label input[type="email"], label input[type="tel"], label input[type="date"], label input[type="password"], label textarea, label .select { margin:5px 0 0; } input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], textarea { width:100%; padding:7px 8px; box-sizing:border-box; border:1px solid #cacaca; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background-color:#ffffff; line-height:1.2em; } input[type="text"]:focus, input[type="date"]:focus, input[type="password"]:focus, textarea:focus { border-color:#0079c1; outline:0; } input[type="text"]::-webkit-input-placeholder, input[type="text"]:-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="text"]:-ms-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="date"]:-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="date"]:-ms-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="password"]:-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="password"]:-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea:-moz-placeholder, textarea::-moz-placeholder, textarea:-ms-input-placeholder { color:#cacaca; } input[type="text"]:disabled, input[type="date"]:disabled, input[type="password"]:disabled, textarea:disabled { background-color:#f2f2f2; color:#cacaca; } textarea { resize:none; } /** * select */ select { width:100%; padding:8px; box-sizing:border-box; border:1px solid #cacaca; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background-color:#ffffff; } select:focus { border-color:#0079c1; outline:0; } select:disabled { background-color:#f2f2f2; color:#cacaca; } .select { display:inline-block; position:relative; width:100%; vertical-align:middle; } @supports (pointer-events:none) and ((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)) { .select:before { position:absolute; width:2em; top:1px; right:1px; bottom:1px; border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0; -moz-border-radius:0 3px 3px 0; background-color:#ffffff; pointer-events:none; content:""; } .select:after { position:absolute; top:50%; right:.6em; height:1em; margin:-.5em 0 0; line-height:1em; font-family:"bmo-icon"; font-size:1em; content:"\e60d"; pointer-events:none; } .select.disabled:before { background-color:#f2f2f2; } .select.disabled:after { color:#cacaca; } } /** * checkbox */ input[type="checkbox"] { position:absolute; left:-999em; } input[type="checkbox"] + label { display:inline-block; position:relative; padding:0 0 0 26px; cursor:pointer; } input[type="checkbox"] + label:before { display:inline-block; position:absolute; top:50%; left:0; box-sizing:border-box; width:20px; height:20px; margin:-10px 0 0; border:1px solid #cacaca; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background-color:#ffffff; line-height:20px; font-family:"bmo-icon"; font-size:14px; font-weight:bold; text-align:center; content:""; } input[type="checkbox"]:checked + label:before { content:"\e60c"; } input[type="checkbox"]:focus + label:before { border-color:#0079c1; } input[type="checkbox"]:disabled + label { cursor:default; } input[type="checkbox"]:disabled + label:before { background-color:#f2f2f2; color:#cacaca; } /** * radio */ input[type="radio"] { position:absolute; left:-999em; } input[type="radio"] + label { display:inline-block; position:relative; padding:0 0 0 24px; cursor:pointer; } input[type="radio"] + label:before { display:inline-block; position:absolute; top:50%; left:0; box-sizing:border-box; width:20px; height:20px; margin:-10px 0 0; border:1px solid #cacaca; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background-color:#ffffff; content:""; } input[type="radio"] + label:after { display:none; position:absolute; top:50%; left:4px; box-sizing:border-box; width:12px; height:12px; margin:-6px 0 0; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background-color:#414141; content:""; } input[type="radio"]:checked + label:after { display:inline-block; } input[type="radio"]:focus + label:before { border-color:#0079c1; } input[type="radio"]:disabled + label { cursor:default; } input[type="radio"]:disabled + label:before { background-color:#f2f2f2; } input[type="radio"]:disabled + label:after { background-color:#cacaca; } /** * font-weight fixes */ h1 b { font-family:"dax-medium"; } h1 i { font-family:"dax-light-italic"; } h1 b i, h1 i b { font-family:"dax-medium-italic"; } h2 b { font-family:"dax-medium"; } h2 i { font-family:"dax-light-italic"; } h2 b i, h2 i b { font-family:"dax-medium-italic"; } h3 b { font-family:"dax-bold"; } h3 i { font-family:"dax-medium-italic"; } h3 i b, h3 b i { font-family:"dax-bold-italic"; } h4 i { font-family:"dax-bold-italic"; } h5 i { font-family:"dax-bold-italic"; } b i, strong i { font-family:"dax-bold-italic"; } i b , em b { font-family:"dax-bold-italic"; } label b { font-family:"dax-bold"; } label i { font-family:"dax-medium-italic"; } label i b, label b i { font-family:"dax-bold-italic"; } /* Global classes ========================================================================== */ /** * clear */ .clear:after { display:table; content:""; clear:both; } /** * block */ .block { display:block; } /** * Device hides */ @media (min-width:768px) { .desktop-hide { display:none !important; } } @media (max-width:1080px) { .tablet-hide { display:none !important; } } @media (max-width:767px) { .mobile-hide { display:none !important; } } .screen-reader-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; outline:0 !important; border:0; overflow:hidden; clip:rect(0,0,0,0); } /** * break */ .break { display:block; height:1.3em; } .break.half { height:.65em; } /** * stroke */ .stroke { border:2px solid #cacaca; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; margin:0; } a.stroke { display:block; color:#414141; } a.stroke:hover, a.stroke:focus { color:#414141; outline:0; border-color:#0079c1; text-decoration:none; } a.stroke:active, a.stroke.active { border-color:#0079c1; background-color:#0079c1; color:#ffffff; text-decoration:none; } a.stroke.active:focus { outline:1px dotted #0079c1; } @media (min-width:768px) { a.stroke[href^="tel"]:hover, a.stroke[href^="tel"]:active { border-color:#cacaca; } a.stroke[href^="tel"]:focus { border-color:#cacaca; outline:1px dotted #414141; } } /** * fill */ .fill { background-color:#f2f2f2; } .fill.stroke { border-color:#f2f2f2; } .fill.dark { background-color:#3c3c3c; color:#ffffff; } .fill.dark.stroke { border-color:#3c3c3c; } .fill.dark a { color:#ffffff; text-decoration:underline; } .fill.dark a:focus { outline-color:#ffffff; } .fill mark { background-color:#3c3c3c; color:#ffffff; } .fill.dark mark { background-color:#f2f2f2; color:#414141; } .unfill { background-color:#ffffff; } .unfill.stroke { border-color:#ffffff; } .fill.dark .unfill a { color:#0079c1; text-decoration:none; } .fill.dark .unfill a:focus { outline-color:#0079c1; } .fill .unfill mark { background-color:#f2f2f2; } .fill.dark .unfill mark { background-color:#f2f2f2; } @media (min-width:768px) { .fill.dark a[href^="tel"] { text-decoration:none; } } /** * copy */ .copy { padding:30px; text-align:left; } .copy.stroke { padding:28px; } @media (max-width:767px) { .copy { padding:15px; } .copy.stroke { padding:13px; } } .copy.flush.top { padding-top:0; } .copy.flush.right { padding-right:0; } .copy.flush.bottom { padding-bottom:0; } .copy.flush.left { padding-left:0; } /** * centered */ .centered { text-align:center; } @media (max-width:767px) { .centered-mobile { text-align:center; } } @media all and (min-width: 768px) { .centered-desktop {text-align:center;} } /** * pointer */ .pointer { position:relative; margin:0 0 38px; } .pointer:before { display:block; position:absolute; bottom:-40px; left:50%; width:0; margin:0 -40px; border-style:solid; border-width:40px 40px 0; border-color:#cacaca transparent; content:""; } .pointer:after { display:block; position:absolute; bottom:-37px; left:50%; width:0; margin:0 -40px; border-style:solid; border-width:40px 40px 0; border-color:#ffffff transparent; content:""; } .pointer.fill:before { border-color:#f2f2f2 transparent; } .pointer.fill:after { display:none; } .pointer.fill.dark:before { border-color:#3c3c3c transparent; } .pointer.reverse { margin:38px 0 0; } .pointer.reverse:before { top:-40px; bottom:auto; border-width:0 40px 40px; } .pointer.reverse:after { top:-37px; bottom:auto; border-width:0 40px 40px; } @media (max-width:767px) { .pointer { margin:0 0 23px; } .pointer:before { bottom:-25px; margin:0 -25px; border-width:25px 25px 0; } .pointer:after { bottom:-22px; margin:0 -25px; border-width:25px 25px 0; } .pointer.reverse { margin:23px 0 0; } .pointer.reverse:before { top:-25px; bottom:auto; border-width:0 25px 25px; } .pointer.reverse:after { top:-22px; bottom:auto; border-width:0 25px 25px; } } a.pointer.stroke:hover:before, a.pointer.stroke:focus:before { border-color:#0079c1 transparent; } a.pointer.stroke:active:before, a.pointer.stroke.active:before { border-color:#0079c1 transparent; } a.pointer.stroke:active:after, a.pointer.stroke.active:after { display:none; } /** * circle */ .circle { position:relative; margin:38px 0 0; } .circle:before { display:block; position:absolute; top:-40px; left:50%; width:80px; height:40px; margin:0 -40px; background-color:#cacaca; border-radius:40px 40px 0 0; -webkit-border-radius:40px 40px 0 0; -moz-border-radius:40px 40px 0 0; content:""; } .circle:after { display:block; position:absolute; top:-38px; left:50%; width:76px; height:39px; margin:0 -38px; background-color:#ffffff; border-radius:38px 38px 0 0; -webkit-border-radius:38px 38px 0 0; -moz-border-radius:38px 38px 0 0; content:""; } .circle.fill:before { display:block; position:absolute; top:-40px; left:50%; width:80px; height:40px; margin:0 -40px; background-color:#f2f2f2; border-radius:40px 40px 0 0; -webkit-border-radius:40px 40px 0 0; -moz-border-radius:40px 40px 0 0; content:""; } .circle.fill:after { display:none; } .circle.fill.dark:before { background-color:#3c3c3c; } .circle.reverse { margin:0 0 38px; } .circle.reverse:before { top:auto; bottom:-40px; border-radius:0 0 40px 40px; -webkit-border-radius:0 0 40px 40px; -moz-border-radius:0 0 40px 40px; } .circle.reverse:after { top:auto; bottom:-38px; border-radius:0 0 40px 40px; -webkit-border-radius:0 0 40px 40px; -moz-border-radius:0 0 40px 40px; } @media (max-width:767px) { .circle { margin:23px 0 0; } .circle:before { top:-25px; width:50px; height:25px; margin:0 -25px; border-radius:25px 25px 0 0; -webkit-border-radius:25px 25px 0 0; -moz-border-radius:25px 25px 0 0; } .circle:after { top:-23px; width:46px; height:24px; margin:0 -23px; border-radius:23px 23px 0 0; -webkit-border-radius:23px 23px 0 0; -moz-border-radius:23px 23px 0 0; } .circle.reverse { margin:0 0 25px; } .circle.reverse:before { top:auto; bottom:-25px; border-radius:0 0 25px 25px; -webkit-border-radius:0 0 25px 25px; -moz-border-radius:0 0 25px 25px; } .circle.reverse:after { top:auto; bottom:-23px; border-radius:0 0 25px 25px; -webkit-border-radius:0 0 25px 25px; -moz-border-radius:0 0 25px 25px; } } a.circle.stroke:hover:before, a.circle.stroke:focus:before { background-color:#0079c1; } a.circle.stroke:active:before, a.circle.stroke.active:before { background-color:#0079c1; } a.circle.stroke:active:after, a.circle.stroke.active:after { display:none; } /** * pointer, circle combination */ .pointer.circle { margin:38px 0; } .pointer.circle.fill:before { border-width:0; } .pointer.circle.fill:after { display:block; position:absolute; top:auto; bottom:-40px; left:50%; width:0; height:0; margin:0 -40px; border-style:solid; border-width:40px 40px 0; border-color:#f2f2f2 transparent; background-color:transparent; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; content:""; } .pointer.circle.fill.dark:after { border-color:#3c3c3c transparent; } .pointer.circle.reverse:after { top:-40px; bottom:auto; border-width:0 40px 40px; } @media (max-width:767px) { .pointer.circle { margin:23px 0; } .pointer.circle.fill:after { bottom:-25px; margin:0 -25px; border-width:25px 25px 0; } .pointer.circle.reverse:after { top:-25px; bottom:auto; border-width:0 25px 25px; } } /** * loader */ .loader { min-width:80px; min-height:80px; background-image:url(../newimages/loaders/desktop.gif); background-position:center center; background-repeat:no-repeat; } .loader.fill, .fill .loader { background-image:url(../newimages/loaders/desktop-fill.gif); } .loader.fill.dark, .fill.dark .loader { background-image:url(../newimages/loaders/desktop-fill-dark.gif); } @media (max-width:767px) { .loader { min-width:50px; min-height:50px; background-image:url(../newimages/loaders/mobile.gif); } .loader.fill, .fill .loader { background-image:url(../newimages/loaders/mobile-fill.gif); } .loader.fill.dark, .fill.dark .loader { background-image:url(../newimages/loaders/mobile-fill-dark.gif); } } /* Columns ========================================================================== */ .columns { display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch; -webkit-align-content:stretch; align-content:stretch; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .columns.no-flex { display:block; } .columns:after { display:table; content:""; clear:both; } .columns + .columns { margin:15px 0 0; } .columns > * { display:block; float:left; position:relative; box-sizing:border-box; margin:0 0 0 1%; } /** * column "quantity" helpers */ .columns.two > * { width:49.5%; } .columns.three > * { width:32.666%; } .columns.four > * { width:24.25%; } .columns.five > * { width:19.2%; } .columns.six > * { width:15.83%; } .columns.seven > * { width:13.428%; } .columns.eight > * { width:11.625%; } .columns.aside > *:first-child { width:59.6%; } .columns.aside > *:last-child { width:39.4%; } .columns.aside.reverse > *:first-child { width:39.4%; } .columns.aside.reverse > *:last-child { width:59.6%; } .columns.aside.small > *:first-child { width:71.142%; } .columns.aside.small > *:last-child { width:27.858%; } .columns.aside.small.reverse > *:first-child { width:27.858%; } .columns.aside.small.reverse > *:last-child { width:71.142%; } @media (max-width:767px) { .columns + .columns:not(.nowrap) { margin:15px 0 0; } .columns:not(.nowrap) > * { margin:15px 0 0; } .columns.two:not(.nowrap) > *, .columns.three:not(.nowrap) > *, .columns.four:not(.nowrap) > *, .columns.five:not(.nowrap) > *, .columns.six:not(.nowrap) > *, .columns.seven:not(.nowrap) > *, .columns.eight:not(.nowrap) > *, .columns.aside:not(.nowrap) > *:first-child, .columns.aside:not(.nowrap) > *:last-child, .columns.aside.reverse:not(.nowrap) > *:first-child, .columns.aside.reverse:not(.nowrap) > *:last-child, .columns.aside.small:not(.nowrap) > *:first-child, .columns.aside.small:not(.nowrap) > *:last-child, .columns.aside.small.reverse:not(.nowrap) > *:first-child, .columns.aside.small.reverse:not(.nowrap) > *:last-child { width:100%; } } /** * column "split" helper */ .columns.split.two > * { width:100%; } .columns.split.two > *:last-child { margin:15px 0 0; } .columns.split.three > * { width:49.5%; } .columns.split.three > *:last-child { margin:15px 0 0 25.25%; } .columns.split.four > * { width:49.5%; } .columns.split.four > *:first-child + * + * { margin:15px 0 0; } .columns.split.four > *:last-child { margin:15px 0 0 1%; } .columns.split.five > * { width:32.666%; } .columns.split.five > *:first-child + * + * + * { margin:15px 0 0 16.833%; } .columns.split.five > *:last-child { margin:15px 0 0 1%; } .columns.split.six > * { width:32.666%; } .columns.split.six > *:first-child + * + * + * { margin:15px 0 0; } .columns.split.six > *:first-child + * + * + * + *, .columns.split.six > *:last-child { margin:15px 0 0 1%; } .columns.split.seven > * { width:24.25%; } .columns.split.seven > *:first-child + * + * + * + * { margin:15px 0 0 12.25%; } .columns.split.seven > *:first-child + * + * + * + * + *, .columns.split.seven > *:last-child { margin:15px 0 0 1%; } .columns.split.eight > * { width:24.25%; } .columns.split.eight > *:first-child + * + * + * + * { margin:15px 0 0; } .columns.split.eight > *:first-child + * + * + * + * + *, .columns.split.eight > *:first-child + * + * + * + * + * + *, .columns.split.eight > *:last-child { margin:15px 0 0 1%; } .columns.split.aside > *, .columns.split.aside.reverse > * { width:100%; } .columns.split.aside > *:last-child, .columns.split.aside.reverse > *:last-child { margin:15px 0 0; } .columns.split.aside.small > *, .columns.split.aside.small.reverse > * { width:100%; } .columns.split.aside.small > *:last-child, .columns.split.aside.small.reverse > *:last-child { margin:15px 0 0; } @media (max-width:767px) { .columns.split.three:not(.nowrap) > *, .columns.split.four:not(.nowrap) > *, .columns.split.five:not(.nowrap) > *, .columns.split.six:not(.nowrap) > *, .columns.split.seven:not(.nowrap) > *, .columns.split.eight:not(.nowrap) > * { width:100%; } .columns.split + .columns.split, .columns.split:not(.nowrap) > *, .columns.split.two:not(.nowrap) > *:last-child , .columns.split.three:not(.nowrap) > *:last-child, .columns.split.four:not(.nowrap) > *:first-child + * + *, .columns.split.four:not(.nowrap) > *:last-child, .columns.split.five:not(.nowrap) > *:first-child + * + * + *, .columns.split.five:not(.nowrap) > *:last-child, .columns.split.six:not(.nowrap) > *:first-child + * + * + *, .columns.split.six:not(.nowrap) > *:first-child + * + * + * + *, .columns.split.six:not(.nowrap) > *:last-child, .columns.split.seven:not(.nowrap) > *:first-child + * + * + * + *, .columns.split.seven:not(.nowrap) > *:first-child + * + * + * + * + *, .columns.split.seven:not(.nowrap) > *:last-child, .columns.split.eight:not(.nowrap) > *:first-child + * + * + * + *, .columns.split.eight:not(.nowrap) > *:first-child + * + * + * + * + *, .columns.split.eight:not(.nowrap) > *:first-child + * + * + * + * + * + *, .columns.split.eight:not(.nowrap) > *:last-child, .columns.split.aside:not(.nowrap) > *:last-child, .columns.split.aside.reverse:not(.nowrap) > *:last-child { margin:15px 0 0; } .columns.split.aside.small:not(.nowrap) > *:last-child, .columns.split.aside.small.reverse:not(.nowrap) > *:last-child { margin:15px 0 0; } .columns.split:not(.nowrap) > *:first-child { margin:0; } } /** * column combinations */ .columns.one.two > *:first-child { margin:0 0 0 25.25%; } .columns.one.three > *:first-child { margin:0 0 0 33.666%; } .columns.one.four > *:first-child { margin:0 0 0 37.875%; } .columns.one.five > *:first-child { margin:0 0 0 40.4%; } .columns.one.six > *:first-child { margin:0 0 0 42.085%; } .columns.one.seven > *:first-child { margin:0 0 0 43.286%; } .columns.one.eight > *:first-child { margin:0 0 0 44.187%; } .columns.two.three > *:first-child { margin:0 0 0 16.833%; } .columns.two.four > *:first-child { margin:0 0 0 25.25%; } .columns.two.five > *:first-child { margin:0 0 0 30.3%; } .columns.two.six > *:first-child { margin:0 0 0 33.666%; } .columns.two.seven > *:first-child { margin:0 0 0 36.071%; } .columns.two.eight > *:first-child { margin:0 0 0 37.875%; } .columns.three.four > *:first-child { margin:0 0 0 12.625%; } .columns.three.five > *:first-child { margin:0 0 0 20.2%; } .columns.three.six > *:first-child { margin:0 0 0 25.25%; } .columns.three.seven > *:first-child { margin:0 0 0 28.857%; } .columns.three.eight > *:first-child { margin:0 0 0 31.562%; } .columns.four.five > *:first-child { margin:0 0 0 10.1%; } .columns.four.six > *:first-child { margin:0 0 0 16.833%; } .columns.four.seven > *:first-child { margin:0 0 0 21.642%; } .columns.four.eight > *:first-child { margin:0 0 0 25.25%; } .columns.five.six > *:first-child { margin:0 0 0 8.416%; } .columns.five.seven > *:first-child { margin:0 0 0 14.428%; } .columns.five.eight > *:first-child { margin:0 0 0 18.937%; } .columns.six.seven > *:first-child { margin:0 0 0 7.214%; } .columns.six.eight > *:first-child { margin:0 0 0 12.625%; } .columns.seven.eight > *:first-child { margin:0 0 0 6.312%; } /** * reset column margins */ .columns > *:first-child { margin:0; } @media (max-width:767px) { .columns.one.two:not(.nowrap) > *:first-child, .columns.one.three:not(.nowrap) > *:first-child, .columns.one.four:not(.nowrap) > *:first-child, .columns.one.five:not(.nowrap) > *:first-child, .columns.one.six:not(.nowrap) > *:first-child, .columns.one.seven:not(.nowrap) > *:first-child, .columns.one.eight:not(.nowrap) > *:first-child, .columns.two.three:not(.nowrap) > *:first-child, .columns.two.four:not(.nowrap) > *:first-child, .columns.two.five:not(.nowrap) > *:first-child, .columns.two.six:not(.nowrap) > *:first-child, .columns.two.seven:not(.nowrap) > *:first-child, .columns.two.eight:not(.nowrap) > *:first-child, .columns.three.four:not(.nowrap) > *:first-child, .columns.three.five:not(.nowrap) > *:first-child, .columns.three.six:not(.nowrap) > *:first-child, .columns.three.seven:not(.nowrap) > *:first-child, .columns.three.eight:not(.nowrap) > *:first-child, .columns.four.five:not(.nowrap) > *:first-child, .columns.four.six:not(.nowrap) > *:first-child, .columns.four.seven:not(.nowrap) > *:first-child, .columns.four.eight:not(.nowrap) > *:first-child, .columns.five.six:not(.nowrap) > *:first-child, .columns.five.seven:not(.nowrap) > *:first-child, .columns.five.eight:not(.nowrap) > *:first-child, .columns.six.seven:not(.nowrap) > *:first-child, .columns.six.eight:not(.nowrap) > *:first-child, .columns.seven.eight:not(.nowrap) > *:first-child { margin:0; } } /** * column "lines" helper */ .columns.lines > * { border-left:1px solid #cacaca; } .columns.lines > *:first-child { border-left:none; } .columns.lines > * { margin:0; } .columns.lines.two > * { width:50%; } .columns.lines.three > * { width:33.33%; } .columns.lines.four > * { width:25%; } .columns.lines.five > * { width:20%; } .columns.lines.six > * { width:16.666%; } .columns.lines.seven > * { width:14.285%; } .columns.lines.eight > * { width:12.5%; } .columns.lines.aside > *:first-child { width:60%; } .columns.lines.aside > *:last-child { width:40%; } .columns.lines.aside.reverse > *:first-child { width:40%; } .columns.lines.aside.reverse > *:last-child { width:60%; } .columns.lines.aside.small > *:first-child { width:71.429%; } .columns.lines.aside.small > *:last-child { width:28.571%; } .columns.lines.aside.small.reverse > *:first-child { width:28.571%; } .columns.lines.aside.small.reverse > *:last-child { width:71.429%; } .columns.lines.two.three > *:first-child { margin:0 0 0 16.666%; } .columns.lines.two.four > *:first-child { margin:0 0 0 25%; } .columns.lines.two.five > *:first-child { margin:0 0 0 30%; } .columns.lines.two.six > *:first-child { margin:0 0 0 33.333%; } .columns.lines.two.seven > *:first-child { margin:0 0 0 35.714%; } .columns.lines.two.eight > *:first-child { margin:0 0 0 37.5%; } .columns.lines.three.four > *:first-child { margin:0 0 0 12.5%; } .columns.lines.three.five > *:first-child { margin:0 0 0 20%; } .columns.lines.three.six > *:first-child { margin:0 0 0 25%; } .columns.lines.three.seven > *:first-child { margin:0 0 0 28.571%; } .columns.lines.three.eight > *:first-child { margin:0 0 0 31.25%; } .columns.lines.four.five > *:first-child { margin:0 0 0 10%; } .columns.lines.four.six > *:first-child { margin:0 0 0 16.666%; } .columns.lines.four.seven > *:first-child { margin:0 0 0 21.428%; } .columns.lines.four.eight > *:first-child { margin:0 0 0 25%; } .columns.lines.five.six > *:first-child { margin:0 0 0 8.416%; } .columns.lines.five.seven > *:first-child { margin:0 0 0 14.428%; } .columns.lines.five.eight > *:first-child { margin:0 0 0 18.937%; } .columns.lines.six.seven > *:first-child { margin:0 0 0 7.214%; } .columns.lines.six.eight > *:first-child { margin:0 0 0 12.625%; } .columns.lines.seven.eight > *:first-child { margin:0 0 0 6.312%; } @media (max-width:767px) { .columns.lines:not(.nowrap) > * { border-top:1px solid #cacaca; border-left:none; } .columns.lines:not(.nowrap) > *:first-child { border-top:none; } .columns.lines:not(.nowrap) > *.copy { padding:30px 15px; } .columns.lines:not(.nowrap) > *.copy:first-child { padding:0 15px 30px; } .columns.lines:not(.nowrap) + .columns.lines { margin:30px 0 0; border-top:1px solid #cacaca; } .columns.lines:not(.nowrap) + .columns.lines > *.copy:first-child { padding:30px 15px 30px; } .columns.lines.two:not(.nowrap) > *, .columns.lines.three:not(.nowrap) > *, .columns.lines.four:not(.nowrap) > *, .columns.lines.five:not(.nowrap) > *, .columns.lines.six:not(.nowrap) > *, .columns.lines.seven:not(.nowrap) > *, .columns.lines.eight:not(.nowrap) > *, .columns.lines.aside:not(.nowrap) > *:first-child, .columns.lines.aside:not(.nowrap) > *:last-child, .columns.lines.aside.reverse:not(.nowrap) > *:first-child, .columns.lines.aside.reverse:not(.nowrap) > *:last-child { width:100%; } .columns.lines.aside.small:not(.nowrap) > *:first-child, .columns.lines.aside.small:not(.nowrap) > *:last-child, .columns.lines.aside.small.reverse:not(.nowrap) > *:first-child, .columns.lines.aside.small.reverse:not(.nowrap) > *:last-child { width:100%; } .columns.lines.two:not(.nowrap) > *:last-child, .columns.lines.three:not(.nowrap) > *:last-child, .columns.lines.four:not(.nowrap) > *:last-child, .columns.lines.five:not(.nowrap) > *:last-child, .columns.lines.six:not(.nowrap) > *:last-child, .columns.lines.seven:not(.nowrap) > *:last-child, .columns.lines.eight:not(.nowrap) > *:last-child, .columns.lines.aside:not(.nowrap) > *:last-child, .columns.lines.aside.reverse:not(.nowrap) > *:last-child { padding:30px 15px 0; } .columns.lines.aside.small:not(.nowrap) > *:last-child, .columns.lines.aside.small.reverse:not(.nowrap) > *:last-child { padding:30px 15px 0; } .columns.lines.two.three:not(.nowrap) > *:first-child, .columns.lines.two.four:not(.nowrap) > *:first-child, .columns.lines.two.five:not(.nowrap) > *:first-child, .columns.lines.two.six:not(.nowrap) > *:first-child, .columns.lines.two.seven:not(.nowrap) > *:first-child, .columns.lines.two.eight:not(.nowrap) > *:first-child, .columns.lines.three.four:not(.nowrap) > *:first-child, .columns.lines.three.five:not(.nowrap) > *:first-child, .columns.lines.three.six:not(.nowrap) > *:first-child, .columns.lines.three.seven:not(.nowrap) > *:first-child, .columns.lines.three.eight:not(.nowrap) > *:first-child, .columns.lines.four.five:not(.nowrap) > *:first-child, .columns.lines.four.six:not(.nowrap) > *:first-child, .columns.lines.four.seven:not(.nowrap) > *:first-child, .columns.lines.four.eight:not(.nowrap) > *:first-child, .columns.lines.five.six:not(.nowrap) > *:first-child, .columns.lines.five.seven:not(.nowrap) > *:first-child, .columns.lines.five.eight:not(.nowrap) > *:first-child, .columns.lines.six.seven:not(.nowrap) > *:first-child, .columns.lines.six.eight:not(.nowrap) > *:first-child, .columns.lines.seven.eight:not(.nowrap) > *:first-child { margin:0; } } /** * column "join" helper, "stroke" and link fixed */ .columns.join > * { margin:0; } .columns.join.two > * { width:50%; } .columns.join.three > * { width:33.333%; } .columns.join.four > * { width:25%; } .columns.join.five > * { width:20%; } .columns.join.six > * { width:16.666%; } .columns.join.seven > * { width:14.285%; } .columns.join.eight > * { width:12.5%; } .columns.join.aside > *:first-child { width:60%; } .columns.join.aside > *:last-child { width:40%; } .columns.join.aside.reverse > *:first-child { width:40%; } .columns.join.aside.reverse > *:last-child { width:60%; } .columns.join.aside.small > *:first-child { width:71.429%; } .columns.join.aside.small > *:last-child { width:28.571%; } .columns.join.aside.small.reverse > *:first-child { width:28.571%; } .columns.join.aside.small.reverse > *:last-child { width:71.429%; } .columns.join > *.stroke { border-width:2px 1px 2px 1px; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; } .columns.join > *.stroke:first-child { border-width:2px 1px 2px 2px; border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; } .columns.join.two > *:last-child, .columns.join.three > *:last-child, .columns.join.four > *:last-child, .columns.join.five > *:last-child, .columns.join.six > *:last-child, .columns.join.seven > *:last-child, .columns.join.eight > *:last-child, .columns.join.aside > *:last-child, .columns.join.aside.reverse > *:last-child { border-width:2px 2px 2px 1px; border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; } .columns.join.aside.small > *:last-child, .columns.join.aside.small.reverse > *:last-child { border-width:2px 2px 2px 1px; border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; } .columns.join > a.stroke:hover:before, .columns.join > a.stroke:focus:before, .columns.join > a.stroke:active:before, .columns.join > a.stroke.active:before { position:absolute; top:-2px; left:-2px; bottom:-2px; width:2px; background-color:#0079c1; content:""; z-index:1; } .columns.join > a.stroke:hover:first-child:before, .columns.join > a.stroke:focus:first-child:before, .columns.join > a.stroke:active:first-child:before, .columns.join > a.stroke.active:first-child:before { display:none; } .columns.join > a.stroke:hover:after, .columns.join > a.stroke:focus:after, .columns.join > a.stroke:active:after, .columns.join > a.stroke.active:after { position:absolute; top:-2px; right:-2px; bottom:-2px; width:2px; background-color:#0079c1; content:""; z-index:1; } .columns.join.two > a.stroke:last-child:hover:after, .columns.join.three > a.stroke:last-child:hover:after, .columns.join.four > a.stroke:last-child:hover:after, .columns.join.five > a.stroke:last-child:hover:after, .columns.join.six > a.stroke:last-child:hover:after, .columns.join.seven > a.stroke:last-child:hover:after, .columns.join.eight > a.stroke:last-child:hover:after, .columns.join.aside > a.stroke:last-child:hover:after, .columns.join.aside.reverse > a.stroke:last-child:hover:after, .columns.join.aside.small > a.stroke:last-child:hover:after, .columns.join.aside.small.reverse > a.stroke:last-child:hover:after, .columns.join.two > a.stroke:last-child:focus:after, .columns.join.three > a.stroke:last-child:focus:after, .columns.join.four > a.stroke:last-child:focus:after, .columns.join.five > a.stroke:last-child:focus:after, .columns.join.six > a.stroke:last-child:focus:after, .columns.join.seven > a.stroke:last-child:focus:after, .columns.join.eight > a.stroke:last-child:focus:after, .columns.join.aside > a.stroke:last-child:focus:after, .columns.join.aside.reverse > a.stroke:last-child:focus:after, .columns.join.aside.small > a.stroke:last-child:focus:after, .columns.join.aside.small.reverse > a.stroke:last-child:focus:after, .columns.join.two > a.stroke:last-child:active:after, .columns.join.three > a.stroke:last-child:active:after, .columns.join.four > a.stroke:last-child:active:after, .columns.join.five > a.stroke:last-child:active:after, .columns.join.six > a.stroke:last-child:active:after, .columns.join.seven > a.stroke:last-child:active:after, .columns.join.eight > a.stroke:last-child:active:after, .columns.join.aside > a.stroke:last-child:active:after, .columns.join.aside.reverse > a.stroke:last-child:active:after, .columns.join.aside.small > a.stroke:last-child:active:after, .columns.join.aside.small.reverse > a.stroke:last-child:active:after, .columns.join.two > a.stroke:last-child.active:after, .columns.join.three > a.stroke:last-child.active:after, .columns.join.four > a.stroke:last-child.active:after, .columns.join.five > a.stroke:last-child.active:after, .columns.join.six > a.stroke:last-child.active:after, .columns.join.seven > a.stroke.active:after, .columns.join.eight > a.stroke:last-child.active:after, .columns.join.aside > a.stroke:last-child.active:after, .columns.join.aside.reverse > a.stroke:last-child.active:after, .columns.join.aside.small > a.stroke:last-child.active:after, .columns.join.aside.small.reverse > a.stroke:last-child.active:after { display:none; } .columns.join.two.three > *:first-child { margin:0 0 0 16.666%; } .columns.join.two.four > *:first-child { margin:0 0 0 25%; } .columns.join.two.five > *:first-child { margin:0 0 0 30%; } .columns.join.two.six > *:first-child { margin:0 0 0 33.333%; } .columns.join.two.seven > *:first-child { margin:0 0 0 35.715%; } .columns.join.two.eight > *:first-child { margin:0 0 0 37.5%; } .columns.join.three.four > *:first-child { margin:0 0 0 12.5%; } .columns.join.three.five > *:first-child { margin:0 0 0 20%; } .columns.join.three.six > *:first-child { margin:0 0 0 25%; } .columns.join.three.seven > *:first-child { margin:0 0 0 28.572%; } .columns.join.three.eight > *:first-child { margin:0 0 0 31.25%; } .columns.join.four.five > *:first-child { margin:0 0 0 10%; } .columns.join.four.six > *:first-child { margin:0 0 0 16.668%; } .columns.join.four.seven > *:first-child { margin:0 0 0 21.43%; } .columns.join.four.eight > *:first-child { margin:0 0 0 25%; } .columns.join.five.six > *:first-child { margin:0 0 0 8.335%; } .columns.join.five.seven > *:first-child { margin:0 0 0 14.287%; } .columns.join.five.eight > *:first-child { margin:0 0 0 18.75%; } .columns.join.six.seven > *:first-child { margin:0 0 0 7.145%; } .columns.join.six.eight > *:first-child { margin:0 0 0 12.5%; } .columns.join.seven.eight > *:first-child { margin:0 0 0 6.25%; } @media (max-width:767px) { .columns.join.two.three > *, .columns.join.two.four > *, .columns.join.two.five > *, .columns.join.two.six > *, .columns.join.two.seven > *, .columns.join.two.eight > * { width:50%; } .columns.join.three.four > *, .columns.join.three.five > *, .columns.join.three.six > *, .columns.join.three.seven > *, .columns.join.three.eight > * { width:33.33%; } .columns.join.four.five > *, .columns.join.four.six > *, .columns.join.four.seven > *, .columns.join.four.eight > * { width:25%; } .columns.join.five.six > *, .columns.join.five.seven > *, .columns.join.five.eight > * { width:20%; } .columns.join.six.seven > *, .columns.join.six.eight > * { width:16.666%; } .columns.join.seven.eight > * { width:14.285%; } .columns.join.two.three > *:first-child, .columns.join.two.four > *:first-child, .columns.join.two.five > *:first-child, .columns.join.two.six > *:first-child, .columns.join.two.seven > *:first-child, .columns.join.two.eight > *:first-child, .columns.join.three.four > *:first-child, .columns.join.three.five > *:first-child, .columns.join.three.six > *:first-child, .columns.join.three.seven > *:first-child, .columns.join.three.eight > *:first-child, .columns.join.four.five > *:first-child, .columns.join.four.six > *:first-child, .columns.join.four.seven > *:first-child, .columns.join.four.eight > *:first-child, .columns.join.five.six > *:first-child, .columns.join.five.seven > *:first-child, .columns.join.five.eight > *:first-child, .columns.join.six.seven > *:first-child, .columns.join.six.eight > *:first-child, .columns.join.seven.eight > *:first-child { margin:0; } } /* Icons ========================================================================== */ @font-face { font-family:'bmo-icon'; src:url('../icons/bmo-icon.eot?snnfuv'); src:url('../icons/bmo-icon.eot?#iefixsnnfuv') format('embedded-opentype'), url('../icons/bmo-icon.woff2?snnfuv') format('woff2'), url('../icons/bmo-icon.woff?snnfuv') format('woff'), url('../icons/bmo-icon.ttf?snnfuv') format('truetype'), url('../icons/bmo-icon.svg?snnfuv#bmo-icon') format('svg'); font-weight:normal; font-style:normal; } /** * icon */ .icon { display:inline-block; width:24px; height:24px; line-height:24px; } .icon:before { color:#cacaca; line-height:24px; font-family:"bmo-icon"; font-size:23px; font-weight:normal; font-style:normal; font-variant:normal; text-align:center; text-transform:none; speak:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow:hidden; } .icon.stroke { padding:8px; border-width:2px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } .icon.fill { background-color:#cacaca; } .icon.fill:before { color:#ffffff; } .icon.fill.stroke { border-color:#cacaca; } .icon.fill.dark { background-color:#3c3c3c; } .icon.fill.dark.stroke { border-color:#3c3c3c; } .icon.active { background-color:#0079c1; } .icon.active:before { color:#ffffff; } .icon.active.stroke { border-color:#0079c1; } .icon.large { width:40px; height:40px; line-height:40px; } .icon.large:before { line-height:40px; font-size:39px; } .icon.large.stroke { padding:18px; border-radius:40px; -webkit-border-radius:40px; -moz-border-radius:40px; } @media (max-width:767px) { .icon.large { width:24px; height:24px; line-height:24px; } .icon.large:before { line-height:24px; font-size:23px; } .icon.large.stroke { padding:9px; border-width:1px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; } } a .icon:before { color:#0079c1; } a:hover .icon.stroke, a:focus .icon.stroke { border-color:#0079c1; } a:active .icon.stroke, a.active .icon.stroke { border-color:#0079c1; background-color:#0079c1; } a:active .icon.stroke:before, a.active .icon.stroke:before { color:#ffffff; } @media (min-width:768px) { a[href^="tel"] .icon:before { color:#cacaca; } a[href^="tel"]:hover .icon.stroke, a[href^="tel"]:focus .icon.stroke { border-color:#cacaca; } a[href^="tel"]:active .icon.stroke { background-color:transparent; } a[href^="tel"]:active .icon.stroke:before { color:#cacaca; } a[href^="tel"] .icon.active:before { color:#ffffff; } a[href^="tel"]:hover .icon.active { border-color:#0079c1; } a[href^="tel"]:active .icon.active { background-color:#0079c1; } a[href^="tel"]:active .icon.active:before { color:#ffffff; } } /** * icon helper classes */ /** * Set the icon color to the primary blue if it has the class of primary */ .icon.primary:before { color: #0079c1; } /** * Icon component where icon is blue and text with right next to it. * Simple but didnt exist before */ .icon-block { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .icon-block--start { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .icon-block--top { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .icon-block--inline { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } /* Only underline the text in anchors */ .icon-block--link, .icon-block--link:hover, .icon-block--cta, .icon-block--cta:hover { text-decoration: none; } .icon-block--link:hover > .icon-block__text, .icon-block--cta:hover .icon-block__title { text-decoration: underline; } .icon-block > .icon.large { width: 40px; height: 40px; } /** * Some icons go right up to the edge of their 'width' and some dont. * If your icon is really close up to the text even after a space use the 'tight' class. */ .icon-block > .icon.tight { margin-right: .75em; } .icon-block > .icon.large, .icon-block > .icon.large:before { font-size: 39px; line-height: 40px; } .icon-block > .icon-text { text-align: left; } /** * Our icons set a weird line height and throw off the rest of the text, * this is a fix to align the text with the icon. */ .icon-block > .icon-text:not(.dont-fix-line) { position: relative; top: 2px; } /* start - added sept 26 2016 */ .icon.twentypc:before { content: "\e90a"; font-size: 48px; line-height: 42px; } @media (max-width:767px) { .icon.twentypc:before { font-size: 28px; line-height: 26px; } } /* start - added june 13 2016 */ .icon.usd-savings:before { content: "\e909"; } .icon.ActivateCreditCard:before { content: "\e908"; } /* start - added april 13 2016 */ .icon.demo:before { content: "\e906" ; } .icon.videoPlay:before { content: "\e907"; } /* start - added feb 11 2016 */ .icon.x3:before { content: "\e905"; } /* start - added jan 19 2016 */ .icon.planshare:before { content: "\e903"; } .icon.transfer:before { content: "\e904"; } .icon.gear:before { content: "\e901"; } .icon.touchscreen:before { content: "\e902"; } .icon.truck:before { content: "\e900"; } .icon.biz-loan:before { content: "\e801"; } .icon.cheque:before { content: "\e802"; } .icon.cheque-discount:before { content: "\e803"; } .icon.cheque-rewards:before { content: "\e804"; } .icon.concierge:before { content: "\e805"; } .icon.creditcard-savings:before { content: "\e806"; } .icon.gov-loan:before { content: "\e807"; } .icon.home-loc:before { content: "\e808"; } .icon.id-protection:before { content: "\e809"; } .icon.merchant-loan:before { content: "\e800"; } .icon.merchant-loc:before { content: "\e80f"; } .icon.overdraft-loc:before { content: "\e810"; } .icon.schedule-cheque:before { content: "\e811"; } .icon.fiftyfive:before { content: "\e80a"; } .icon.time-long:before { content: "\e6d2"; } .icon.time-medium:before { content: "\e6d3"; } .icon.time-short:before { content: "\e6d4"; } .icon.wheelchair:before { content: "\e6d5"; } .icon.personal-loc:before { content: "\e6cf"; } .icon.ra-rrsploan:before { content: "\e6d0"; } .icon.rrsp-readiline:before { content: "\e6d1"; } .icon.agri-readiline-loc:before { content: "\e6bd"; } .icon.commercial-loans-insurance:before { content: "\e6be"; } .icon.commercial-mortgage:before { content: "\e6bf"; } .icon.compare-loan-option:before { content: "\e6c0"; } .icon.compare-value:before { content: "\e6c1"; } .icon.farm-equip-readiline:before { content: "\e6c2"; } .icon.farm-mortgage:before { content: "\e6c3"; } .icon.fixedrate-termloan:before { content: "\e6c4"; } .icon.great-value:before { content: "\e6c5"; } .icon.ilp:before { content: "\e6c6"; } .icon.operating-loc:before { content: "\e6c7"; } .icon.priceless-possibilities:before { content: "\e6c8"; } .icon.sky-is-the-limit:before { content: "\e6c9"; } .icon.sbusi-instalment-loan:before { content: "\e6ca"; } .icon.sbusi-loc:before { content: "\e6cb"; } .icon.us-loc-fromhb:before { content: "\e6cc"; } .icon.variablerate-tloan:before { content: "\e6cd"; } .icon.what-v-caniafford:before { content: "\e6ce"; } .icon.interac-debit:before { content: "\e6bc"; } .icon.agrinvest-account:before { content: "\e6a9"; } .icon.business-current-account:before { content: "\e6aa"; } .icon.business-premium:before { content: "\e6ab"; } .icon.car-rental:before { content: "\e6ac"; } .icon.car-trips:before { content: "\e6ad"; } .icon.community-account:before { content: "\e6ae"; } .icon.compare:before { content: "\e6af"; } .icon.cross-border-shopping:before { content: "\e6b0"; } .icon.female-advisor:before { content: "\e6b1"; } .icon.find-plan:before { content: "\e6b2"; } .icon.giftcard:before { content: "\e6b3"; } .icon.help-choose:before { content: "\e6b4"; } .icon.merchandise:before { content: "\e6b5"; } .icon.mobile-billpay:before { content: "\e6b6"; } .icon.not-collecting:before { content: "\e6b7"; } .icon.shopping-cart-am:before { content: "\e6b8"; } .icon.small-business-plan:before { content: "\e6b9"; } .icon.still-cannot-find:before { content: "\e6ba"; } .icon.value-assist-plan:before { content: "\e6bb"; } .icon.double-chevron-down:before { content: "\e6a4"; } .icon.double-chevron-left:before { content: "\e6a5"; } .icon.double-chevron-right:before { content: "\e6a6"; } .icon.double-chevron-up:before { content: "\e6a7"; } .icon.x-to-close:before { content: "\e6a8"; } .icon.warning-tax:before { content: "\e6a3"; } .icon.file-table:before { content: "\e69b"; } .icon.info-i:before { content: "\e69d"; } .icon.magnifying-glass-dollar:before { content: "\e69e"; } .icon.speech-bubble-graph:before { content: "\e69f"; } .icon.tools:before { content: "\e6a0"; } .icon.warning-info:before { content: "\e6a1"; } .icon.warning-money:before { content: "\e6a2"; } .icon.googleplus:before { content: "\e69a"; } .icon.googleplus-filled:before { content: "\e69c"; } .icon.compare-credit-cards:before { content: "\e695"; } .icon.credit-cards-funnel:before { content: "\e696"; } .icon.trophy-calculator:before { content: "\e697"; } .icon.share-filled:before { content: "\e698"; } .icon.share:before { content: "\e699"; } .icon.calculator-affordability:before { content: "\e693"; } .icon.calculator-mortgage:before { content: "\e694"; } .icon.credit-card-chip:before { content: "\e692"; } .icon.first-time-homebuyer:before { content: "\e691"; } .icon.airplane:before { content: "\e600"; } .icon.alert:before { content: "\e601"; } .icon.auto-checking:before { content: "\e602"; } .icon.auto-envelope:before { content: "\e603"; } .icon.baby:before { content: "\e604"; } .icon.banking:before { content: "\e605"; } .icon.book:before { content: "\e606"; } .icon.building:before { content: "\e607"; } .icon.building-executive:before { content: "\e608"; } .icon.calculator:before { content: "\e609"; } .icon.calendar-check:before { content: "\e60a"; } .cta-icon--long-list::before { content: "\e63f"; } .icon.checkings:before { content: "\e60b"; } .icon.checkmark:before { content: "\e60c"; } .icon.chevron-down:before { content: "\e60d"; } .icon.chevron-left:before { content: "\e60e"; } .icon.chevron-right:before { content: "\e60f"; } .icon.chevron-up:before { content: "\e610"; } .icon.circle-cycle:before { content: "\e611"; } .icon.clock:before { content: "\e612"; } .icon.credit-card:before { content: "\e613"; } .icon.credit-card-motion:before { content: "\e614"; } .icon.credit-card-reader:before { content: "\e615"; } .icon.crown:before { content: "\e616"; } .icon.cycle:before { content: "\e617"; } .icon.dollar-bills:before { content: "\e618"; } .icon.dollar-cycle:before { content: "\e619"; } .icon.dollar-cycle-single:before { content: "\e61a"; } .icon.dollar-down:before { content: "\e61b"; } .icon.download:before { content: "\e61c"; } .icon.envelope:before { content: "\e61d"; } .icon.envelope-at:before { content: "\e61e"; } .icon.facebook:before { content: "\e61f"; } .icon.facebook-filled:before { content: "\e620"; } .icon.fax:before { content: "\e621"; } .icon.foreign-currency:before { content: "\e622"; } .icon.game-controller:before { content: "\e623"; } .icon.globe:before { content: "\e624"; } .icon.globe-hand:before { content: "\e625"; } .icon.graduation-hat:before { content: "\e626"; } .icon.graph:before { content: "\e627"; } .icon.group:before { content: "\e628"; } .icon.group-tie:before { content: "\e629"; } .icon.growth-trend:before { content: "\e62a"; } .icon.handshake:before { content: "\e62b"; } .icon.hockey-stick:before { content: "\e62c"; } .icon.house:before { content: "\e62d"; } .icon.individual:before { content: "\e62e"; } .icon.individual-hair:before { content: "\e62f"; } .icon.individual-joint:before { content: "\e630"; } .icon.international:before { content: "\e631"; } .icon.international-hand:before { content: "\e632"; } .icon.internet-document:before { content: "\e633"; } .icon.laptop:before { content: "\e634"; } .icon.laptop-clock:before { content: "\e635"; } .icon.laptop-money:before { content: "\e636"; } .icon.laptop-trend:before { content: "\e637"; } .icon.leaf:before { content: "\e638"; } .icon.lending-money:before { content: "\e639"; } .icon.light-bulb:before { content: "\e63a"; } .icon.linkedin:before { content: "\e63b"; } .icon.linkedin-filled:before { content: "\e63c"; } .icon.list-checkmark:before { content: "\e63d"; } .icon.lock:before { content: "\e63e"; } .icon.long-list:before { content: "\e63f"; } .icon.magnifying-glass:before { content: "\e640"; } .icon.mail:before { content: "\e641"; } .icon.minus:before { content: "\e642"; } .icon.mobile-phone:before { content: "\e643"; } .icon.money:before { content: "\e644"; } .icon.monitor-dollar:before { content: "\e645"; } .icon.multiple-cards:before { content: "\e646"; } .icon.no-fees:before { content: "\e647"; } .icon.number-1:before { content: "\e649"; } .icon.number-2:before { content: "\e64a"; } .icon.number-3:before { content: "\e64b"; } .icon.number-4:before { content: "\e64c"; } .icon.number-5:before { content: "\e64d"; } .icon.number-6:before { content: "\e64e"; } .icon.number-7:before { content: "\e64f"; } .icon.number-8:before { content: "\e650"; } .icon.number-9:before { content: "\e651"; } .icon.number-10:before { content: "\e652"; } .icon.number-11:before { content: "\e653"; } .icon.number-12:before { content: "\e654"; } .icon.number-13:before { content: "\e655"; } .icon.number-14:before { content: "\e656"; } .icon.number-15:before { content: "\e657"; } .icon.number-16:before { content: "\e658"; } .icon.number-17:before { content: "\e659"; } .icon.number-18:before { content: "\e65a"; } .icon.number-19:before { content: "\e65b"; } .icon.number-20:before { content: "\e65c"; } .icon.old-building:before { content: "\e65d"; } .icon.one:before { content: "\e65e"; } .icon.painting:before { content: "\e65f"; } .icon.percent:before { content: "\e660"; } .icon.percentage-growth:before { content: "\e661"; } .icon.personal-wallet:before { content: "\e662"; } .icon.phone:before { content: "\e663"; } .icon.pie-graph:before { content: "\e664"; } .icon.pin-drop:before { content: "\e665"; } .icon.plan:before { content: "\e666"; } .icon.plus:before { content: "\e667"; } .icon.printer:before { content: "\e668"; } .icon.profile:before { content: "\e669"; } .icon.profile-tie:before { content: "\e66a"; } .icon.rss:before { content: "\e66b"; } .icon.rss-filled:before { content: "\e66c"; } .icon.safe-vault:before { content: "\e66d"; } .icon.scroll-caret:before { content: "\e66e"; } .icon.seniors:before { content: "\e66f"; } .icon.shield:before { content: "\e670"; } .icon.shield-car:before { content: "\e671"; } .icon.shield-check:before { content: "\e672"; } .icon.shield-money:before { content: "\e673"; } .icon.shirt-tie:before { content: "\e674"; } .icon.shopping-card-lock:before { content: "\e675"; } .icon.speech-bubble:before { content: "\e676"; } .icon.stats:before { content: "\e677"; } .icon.stethoscope:before { content: "\e678"; } .icon.store-front:before { content: "\e679"; } .icon.stroller:before { content: "\e67a"; } .icon.suitcase:before { content: "\e67b"; } .icon.suitcase-cycle:before { content: "\e67c"; } .icon.tablet-cast:before { content: "\e67d"; } .icon.tablet-dollar:before { content: "\e67e"; } .icon.tablet-play:before { content: "\e67f"; } .icon.tablet-stats:before { content: "\e680"; } .icon.tablet-trend:before { content: "\e681"; } .icon.thumbs-up:before { content: "\e682"; } .icon.times-two:before { content: "\e683"; } .icon.trend-magnifying-glass:before { content: "\e684"; } .icon.trophy:before { content: "\e685"; } .icon.twenty-five-percent:before { content: "\e686"; } .icon.twitter:before { content: "\e688"; } .icon.twitter-filled:before { content: "\e689"; } .icon.two-directions:before { content: "\e68a"; } .icon.wallet:before { content: "\e68b"; } .icon.youtube:before { content: "\e68c"; } .icon.youtube-filled:before { content: "\e68d"; } .icon.youtube-play:before { content: "\e68e"; } .icon.zero-dollars:before { content: "\e68f"; } html[lang="fr"] .icon.no-fees:before { content:"\e648"; } html[lang="fr"] .icon.twenty-five-percent:before { content:"\e687"; } html[lang="fr"] .icon.zero-dollars:before { content:"\e690"; } /* Links ========================================================================== */ .link { display:inline-block; position:relative; padding:0 30px 0 0; line-height:24px; font-family:"dax-medium"; font-size:1.1em; text-align:left; } .link:before { display:block; position:absolute; top:50%; right:0; width:24px; height:24px; margin:-12px 0 0; border-radius:12px; background-color:#0079c1; line-height:24px; color:#ffffff; font-family:"bmo-icon"; font-size:8px; text-align:center; content:"\e60f"; speak:none; } .link.reverse { padding:0 0 0 30px; } .link.reverse:before { right:auto; left:0; } .link.disabled:before { display:none; } @media (max-width:767px) { .link { padding:0 28px 0 0; } .link:before { width:21px; height:22px; margin:-11px 0 0; padding:0 0 0 1px; border-radius:11px; line-height:22px; } } .link.block { padding:0 0 34px 0; font-size:1em; line-height:1.3em; color:#414141; text-align:center; } .link.block:before { top:auto; right:auto; bottom:0; left:50%; margin:0 0 0 -12px; } .link.block:hover, .link.block:focus { text-decoration:none; } .link.block.copy { padding:30px 30px 64px; } .link.block.copy:before { bottom:30px; } .link.block.copy.stroke { padding:28px 28px 62px; } .link.block.copy.stroke:before { bottom:28px; } .link:active, .link.active { background-color:inherit; color:inherit; } @media (max-width:767px) { .link { text-align:left; } .link.block { padding:0 0 32px 0; } .link.block.copy { padding:15px 15px 47px; } .link.block.copy:before { bottom:15px; } .link.block.copy.stroke { padding:13px 13px 45px; } .link.block.copy.stroke:before { bottom:13px; } .columns.lines:not(.nowrap) > *.link.block.copy { padding:30px 15px 62px; } .columns.lines:not(.nowrap) > *.link.block.copy:before { bottom:30px; } .columns.lines:not(.nowrap) > *.link.block.copy:first-child { padding:0 15px 62px; } .columns.lines:not(.nowrap) > *.link.block.copy:last-child { padding:30px 15px 42px; } .columns.lines:not(.nowrap) > *.link.block.copy:last-child:before { bottom:0; } } @media (min-width:768px) { .link[href^="tel"]:before { display:none; } .link.block[href^="tel"]:before { display:block; } } .link.icon { display:table-cell; width:auto; height:44px; padding:0 0 0 56px; text-align:left; vertical-align:middle; } .link.icon:before { display:none; } .link.icon .icon { display:block; position:absolute; top:0; left:0; } @media (max-width:767px) { .link.icon { text-align:left; } } /* chevron ========================================================================== */ .chevron { display:inline-block; position:relative; padding:0 21px 1px 0; line-height:1em; font-family:"dax-medium"; } .chevron:before { display:block; position:absolute; top:50%; right:0; width:16px; height:16px; margin:-8px 0 0; line-height:16px; color:#0079c1; font-family:"bmo-icon"; font-size:14px; text-align:center; speak:none; } .chevron:hover, .chevron:focus, .chevron.active { padding:0 21px 0px 0; border-bottom:1px solid #0079c1; text-decoration:none; } .chevron.disabled:before { color:#414141; } .chevron.disabled:hover, .chevron.disabled:focus, .chevron.disabled.active { padding:0 21px 1px 0; border-bottom:0; } .chevron.reverse { padding:0 0 0 21px; } .chevron.reverse:before { right:auto; left:0; } .chevron.down:before { content:"\e60d"; } .chevron.left:before { content:"\e60e"; } .chevron.right:before { content:"\e60f"; } .chevron.up:before { content:"\e610"; } .chevron.scroll:before { content:"\e66e"; } @media (min-width:768px) { .chevron[href^="tel"]:before { color:#414141; } .chevron[href^="tel"]:hover, .chevron[href^="tel"]:focus, .chevron[href^="tel"].active { padding:0 21px 1px 0; border-bottom:0; } } /* Buttons ========================================================================== */ button, a.button, span.button { display:inline-block; box-sizing:border-box; height:50px; padding:0 30px; border:2px solid #0079c1; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; background-color:transparent; color:#0079c1; font-family:"dax"; font-size:15px; line-height:46px; text-align:center; vertical-align:middle; overflow:hidden; } button:hover, a.button:hover { border-color:#1a4d78; color:#1a4d78; text-decoration:none; } button:focus, a.button:focus, button:active, a.button:active { border-color:#1a4d78; color:#1a4d78; text-decoration:none; outline:0; } button.disabled, a.button.disabled { border-color:#99c9e6; color:#99c9e6; cursor:default; } button.primary, a.button.primary, span.button.primary { background-color:#0079c1; color:#ffffff; } button.primary:hover, a.button.primary:hover { border-color:#1a4d78; background-color:#1a4d78; color:#ffffff; text-decoration:none; } button.primary:focus, a.button.primary:focus, button.primary:active, a.button.primary:active { border-color:#1a4d78; background-color:#1a4d78; color:#ffffff; text-decoration:none; outline:0; } button.primary.disabled, a.button.primary.disabled { border-color:#99c9e6; background-color:#99c9e6; color:#efefef; } button.attention, a.button.attention, span.button.attention { border-color:#ed1b24; background-color:#ed1b24; color:#ffffff; } button.attention:hover, a.button.attention:hover { border-color:#9b262c; background-color:#9b262c; color:#ffffff; text-decoration:none; } button.attention:focus, a.button.attention:focus, button.attention:active, a.button.attention:active { border-color:#9b262c; background-color:#9b262c; color:#ffffff; text-decoration:none; outline:0; } button.attention.disabled, a.button.attention.disabled { border-color:#f8a3a7; background-color:#f8a3a7; color:#efefef; } button.small, a.button.small, span.button.small { height:34px; line-height:34px; } button.wrap, a.button.wrap, span.button.wrap { padding:4px 30px; line-height:19px; } button + button, button + a.button, button + span.button, a.button + button, a.button + a.button, a.button + span.button, span.button + button, span.button + a.button, span.button + span.button { margin:0 0 0 1%; } @media (max-width:767px) { button, a.button, span.button, button.small, a.button.small, span.button.small { width:100%; height:50px; line-height:46px; } button + button, button + a.button, button + span.button, a.button + button, a.button + a.button, a.button + span.button, span.button + button, span.button + a.button, span.button + span.button { margin:15px 0 0; } p button, p a.button, p span.button { margin:15px 0 0; } } button.flush, a.button.flush, span.button.flush { width:100%; } /* Function ========================================================================== */ .function { display:inline-block; width:20px; height:20px; padding:10px; border:2px solid #0079c1; border-radius:22px; -webkit-border-radius:22px; -moz-border-radius:22px; line-height:20px; text-align:center; } .function:focus { outline:0; } .function:hover, .function:focus, .function:active, a:hover .function, a:focus .function, a:active .function { border-color:#1a4d78; } .function .icon { width:20px; height:20px; line-height:20px; } .function .icon:before { color:#0079c1; line-height:20px; font-size:19px; } .function:hover .icon:before, .function:focus .icon:before, .function:active .icon:before, a:hover .function .icon:before, a:focus .function .icon:before, a:active .function .icon:before { color:#1a4d78; } .function.disabled, a.disabled .function { border-color:#99c9e6; } .function.disabled:focus { outline:1px dotted #414141; } .function.disabled .icon:before, a.disabled .function .icon:before { color:#99c9e6; } .function.primary { background-color:#0079c1; } .function.primary .icon:before { color:#ffffff; } .function.primary:hover, .function.primary:focus, .function.primary:active, a:hover .function.primary, a:focus .function.primary, a:active .function.primary { background-color:#1a4d78; } a:hover .function.primary .icon:before, a:focus .function.primary .icon:before, a:active .function.primary .icon:before { color:#ffffff; } .function.primary.disabled, a.disabled .function.primary { border-color:#99c9e6; background-color:#99c9e6; } .function.primary.disabled .icon:before, a.disabled .function.primary .icon:before { color:#efefef; } .function.attention { border-color:#ed1b24; background-color:#ed1b24; } .function.attention .icon:before { color:#ffffff; } .function.attention:hover, .function.attention:focus, .function.attention:active, a:hover .function.attention, a:focus .function.attention, a:active .function.attention { border-color:#9b262c; background-color:#9b262c; } a:hover .function.attention .icon:before, a:focus .function.attention .icon:before, a:active .function.attention .icon:before { color:#ffffff; } .function.attention.disabled, a.disabled .function.attention { border-color:#f8a3a7; background-color:#f8a3a7; } .function.attention.disabled .icon:before, a.disabled .function.attention .icon:before { color:#efefef; } .function.inactive { border-color:#cacaca; background-color:#cacaca; } .function.inactive .icon:before { color:#414141; } .function.small { width:16px; height:16px; padding:7px; } .function.small .icon { width:16px; height:16px; line-height:16px; } .function.small .icon:before { line-height:16px; font-size:15px; } /* ======== IE upgrade warning ======== */ #ieWarn { background: #ebebeb;padding: 17px 17px 17px 40px; } #ieWarn p { margin: 0; font-size:15px; } #ieWarn #ieWarning { float: left; padding-left: 63px; background: url(/img/ieWarnAlert.png) top left no-repeat; margin-top: 12px;} #ieWarn #ieRecos { width: 350px; padding-left: 20px; margin-left: 25px; border-left: 1px solid #cacaca; float:right; } #ieWarn #ieRecos ul {margin:0; padding:0;} #ieWarn #ieRecos ul li { float:left; list-style: none; font-size:15px; padding: 1px 0 2px 33px; margin:0; background-image: url(/img/ieWarnBGs.png); background-repeat: no-repeat; } #ieWarn ul li#downloadCR { margin-bottom: 13px;} #ieWarn ul li#downloadIE { background-position: 0 -22px; margin-bottom: 13px; margin-left: 23px; } #ieWarn ul li#downloadFF { background-position: 0 -44px; } #ieWarn.clearfix:after {clear:both;} #ieWarn.clearfix:before, #ieWarn.clearfix:after { content: " "; display: table; } #ieWarn.clearfix:after { clear: both; } /* ======== end ======== */ /* Force emona font for text-numeric */ .text-numeric { font-family: "emona", serif!important; } /** STYLEGUIDE STYLES **/ /* Reset the box sizing for the new grid, this CANNOT be set globally for everything under style-guide because it breaks the icons and some other stuff */ .style-guide .column, .style-guide .row, .style-guide [class*="small-"], .style-guide [class*="medium-"], .style-guide [class*="large-"] { box-sizing: border-box; } .style-guide .row { /* max-width: 62.5rem; */ /* Because our base font size is 15, this must be changed to 80 rem */ max-width: 80rem; margin-left: auto; margin-right: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .style-guide .row .row { max-width: none; } .style-guide .row.expanded { max-width: none; } .style-guide .row.collapse > .column, .style-guide .row.collapse > .columns { padding-left: 0; padding-right: 0; } .style-guide .column, .style-guide .columns { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; padding-left: 0.9375rem; padding-right: 0.9375rem; min-width: initial; } .style-guide .column.row.row, .style-guide .row.row.columns { float: none; display: block; } .style-guide .row .column.row.row, .style-guide .row .row.row.columns { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .style-guide .small-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .style-guide .small-offset-0 { margin-left: 0%; } .style-guide .small-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .style-guide .small-offset-1 { margin-left: 8.33333%; } .style-guide .small-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .style-guide .small-offset-2 { margin-left: 16.66667%; } .style-guide .small-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .style-guide .small-offset-3 { margin-left: 25%; } .style-guide .small-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .style-guide .small-offset-4 { margin-left: 33.33333%; } .style-guide .small-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .style-guide .small-offset-5 { margin-left: 41.66667%; } .style-guide .small-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .style-guide .small-offset-6 { margin-left: 50%; } .style-guide .small-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .style-guide .small-offset-7 { margin-left: 58.33333%; } .style-guide .small-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .style-guide .small-offset-8 { margin-left: 66.66667%; } .style-guide .small-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .style-guide .small-offset-9 { margin-left: 75%; } .style-guide .small-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .style-guide .small-offset-10 { margin-left: 83.33333%; } .style-guide .small-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .style-guide .small-offset-11 { margin-left: 91.66667%; } .style-guide .small-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .small-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .small-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .small-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .small-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .small-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .style-guide .small-collapse > .column, .style-guide .small-collapse > .columns { padding-left: 0; padding-right: 0; } .style-guide .small-uncollapse > .column, .style-guide .small-uncollapse > .columns { padding-left: 0.9375rem; padding-right: 0.9375rem; } @media screen and (min-width: 40em) { .style-guide .medium-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .style-guide .medium-offset-0 { margin-left: 0%; } .style-guide .medium-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .style-guide .medium-offset-1 { margin-left: 8.33333%; } .style-guide .medium-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .style-guide .medium-offset-2 { margin-left: 16.66667%; } .style-guide .medium-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .style-guide .medium-offset-3 { margin-left: 25%; } .style-guide .medium-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .style-guide .medium-offset-4 { margin-left: 33.33333%; } .style-guide .medium-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .style-guide .medium-offset-5 { margin-left: 41.66667%; } .style-guide .medium-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .style-guide .medium-offset-6 { margin-left: 50%; } .style-guide .medium-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .style-guide .medium-offset-7 { margin-left: 58.33333%; } .style-guide .medium-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .style-guide .medium-offset-8 { margin-left: 66.66667%; } .style-guide .medium-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .style-guide .medium-offset-9 { margin-left: 75%; } .style-guide .medium-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .style-guide .medium-offset-10 { margin-left: 83.33333%; } .style-guide .medium-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .style-guide .medium-offset-11 { margin-left: 91.66667%; } .style-guide .medium-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .medium-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .medium-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .medium-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .medium-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .medium-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .style-guide .medium-collapse > .column, .style-guide .medium-collapse > .columns { padding-left: 0; padding-right: 0; } .style-guide .medium-uncollapse > .column, .style-guide .medium-uncollapse > .columns { padding-left: 0.9375rem; padding-right: 0.9375rem; } } @media screen and (min-width: 64em) { .style-guide .large-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .style-guide .large-offset-0 { margin-left: 0%; } .style-guide .large-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .style-guide .large-offset-1 { margin-left: 8.33333%; } .style-guide .large-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .style-guide .large-offset-2 { margin-left: 16.66667%; } .style-guide .large-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .style-guide .large-offset-3 { margin-left: 25%; } .style-guide .large-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .style-guide .large-offset-4 { margin-left: 33.33333%; } .style-guide .large-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .style-guide .large-offset-5 { margin-left: 41.66667%; } .style-guide .large-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .style-guide .large-offset-6 { margin-left: 50%; } .style-guide .large-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .style-guide .large-offset-7 { margin-left: 58.33333%; } .style-guide .large-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .style-guide .large-offset-8 { margin-left: 66.66667%; } .style-guide .large-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .style-guide .large-offset-9 { margin-left: 75%; } .style-guide .large-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .style-guide .large-offset-10 { margin-left: 83.33333%; } .style-guide .large-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .style-guide .large-offset-11 { margin-left: 91.66667%; } .style-guide .large-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .large-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .large-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .large-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .large-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .large-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .style-guide .large-collapse > .column, .style-guide .large-collapse > .columns { padding-left: 0; padding-right: 0; } .style-guide .large-uncollapse > .column, .style-guide .large-uncollapse > .columns { padding-left: 0.9375rem; padding-right: 0.9375rem; } } .style-guide .shrink { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%; } .style-guide .column.align-top, .style-guide .align-top.columns { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .style-guide .column.align-bottom, .style-guide .align-bottom.columns { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .style-guide .column.align-middle, .style-guide .align-middle.columns { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .style-guide .column.align-stretch, .style-guide .align-stretch.columns { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .style-guide .align-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .style-guide .align-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .style-guide .align-justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .style-guide .align-spaced { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .style-guide .align-top { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .style-guide .align-self-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .style-guide .align-bottom { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .style-guide .align-self-bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .style-guide .align-middle { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .style-guide .align-self-middle { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .style-guide .align-stretch { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .style-guide .align-self-stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .style-guide .small-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .small-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .small-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .small-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .small-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .small-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } @media screen and (min-width: 40em) { .style-guide .medium-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .medium-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .medium-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .medium-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .medium-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .medium-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } } @media screen and (min-width: 64em) { .style-guide .large-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .style-guide .large-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .style-guide .large-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .style-guide .large-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .style-guide .large-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .style-guide .large-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } } .style-guide .small-border-top { border-top: .0666rem solid #cacaca; } .style-guide .small-border-right { border-right: .0666rem solid #cacaca; } .style-guide .small-border-bottom { border-bottom: .0666rem solid #cacaca; } .style-guide .small-border-left { border-left: .0666rem solid #cacaca; } .style-guide .small-reset-border-top { border-top: none; } .style-guide .small-reset-border-right { border-right: none; } .style-guide .small-reset-border-bottom { border-bottom: none; } .style-guide .small-reset-border-left { border-left: none; } @media all and (min-width: 40em) { .style-guide .medium-border-top { border-top: .0666rem solid #cacaca; } .style-guide .medium-border-right { border-right: .0666rem solid #cacaca; } .style-guide .medium-border-bottom { border-bottom: .0666rem solid #cacaca; } .style-guide .medium-border-left { border-left: .0666rem solid #cacaca; } .style-guide .medium-reset-border-top { border-top: none; } .style-guide .medium-reset-border-right { border-right: none; } .style-guide .medium-reset-border-bottom { border-bottom: none; } .style-guide .medium-reset-border-left { border-left: none; } } @media all and ( min-width: 64em ) { .style-guide .large-border-top { border-top: .0666rem solid #cacaca; } .style-guide .large-border-right { border-right: .0666rem solid #cacaca; } .style-guide .large-border-bottom { border-bottom: .0666rem solid #cacaca; } .style-guide .large-border-left { border-left: .0666rem solid #cacaca; } .style-guide .large-reset-border-top { border-top: none; } .style-guide .large-reset-border-right { border-right: none; } .style-guide .large-reset-border-bottom { border-bottom: none; } .style-guide .large-reset-border-left { border-left: none; } } .style-guide .align-start { -webkit-align-self: flex-start; -moz-align-self: flex-start; -ms-align-self: flex-start; align-self: flex-start; } /* re-define chevron link styles */ .style-guide .link { padding:0 34px 0 0; font-size:inherit; } .style-guide .chevron:hover, .style-guide .chevron:focus, .style-guide .chevron.active { padding: 0 21px 1px 0; } .style-guide .chevron:before { width: 16px; height: 16px; margin: -8px 0 0; font-size: 10px; } /* fix horizontal padding on mobile */ @media (max-width:767px) { .style-guide section > .copy { padding-left: 0; padding-right: 0; } } .style-guide .color-text { color: #414141; } .style-guide .text-left { text-align: left; } .style-guide .text-center { text-align: center; } .style-guide .text-right { text-align: right; } .style-guide .small-text-left { text-align: left; } .style-guide .small-text-center { text-align: center; } .style-guide .small-text-right { text-align: right; } @media all and (min-width: 40em) { .style-guide .medium-text-left { text-align: left; } .style-guide .medium-text-center { text-align: center; } .style-guide .medium-text-right { text-align: right; } } @media all and ( min-width: 64em ) { .style-guide .large-text-left { text-align: left; } .style-guide .large-text-center { text-align: center; } .style-guide .large-text-right { text-align: right; } } /** END STYLEGUIDE STYLES **/