/* Running Squiz Matrix Developed by Squiz - http://www.squiz.net Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd Page generated: 19 March 2020 10:42:08 */ /** * Royal Life Saving Society Australia - Screen Style Sheet * * screen.css * author: Squiz Australia */ /* * Table of Contents * * 1. General * 1.1 Reset * 1.2 General Typography * 1.3 Headings * 1.4 Links * 1.5 Lists * 1.5.1 Unordered List * 1.5.2 Media Icons * 1.5.3 Ordered List * 1.5.4 Pagination * 1.5.5 Definition List * * 1.6 Tables * 1.7 Forms * 1.8 Images * 1.9 Miscellaneous * 1.9.1 Button * 1.9.2 Highlight Box * 1.9.3 Blockquote * 1.9.4 Self-clearing elements * 1.9.5 Image with caption * 1.9.6 Shared Icons * 1.9.7 Responsive embed * * 2. Page Elements * 2.1 Page Structure * 2.2 Accessibility * 2.3 Header * 2.3.1 Branding * 2.3.2 Global Links * 2.3.3 Site Search * 2.3.4 Login * * 2.4 Navigation * 2.5 Breadcrumbs * 2.6 Secondary Navigation * 2.7 Footer * 2.7.1 Site Links * 2.7.2 Footer Links * * 3. Content Elements * 3.1 Modules * 3.1.1 Content Blocks * 3.1.2 Table of Contents + Featured * 3.1.3 Tabs * 3.1.4 Videos * 3.1.5 Feature Blocks * 3.1.6 In-Page Features * 3.1.7 Section Pages Module * 3.1.8 National Partners * 3.1.9 Carousel * 3.1.10 Document Listing Module * 3.1.11 Accordion Module * 3.1.12 Banner + Feature * 3.1.13 Info Boxes * * 3.2 Home Page * 3.2.1 Featured Home * * 3.3 Landing Page * 3.2.1 Contact Page * 3.2.2 Media List * 3.2.3 Facts and Figures * 3.2.4 Resources * 3.2.5 News * * 3.4 Inner Page * 3.4.1 Training pages - course search form * * 4. Fonts * 4.1 Explicit Custom Font Targets * 4.1.1 Active Fonts * 4.1.2 Inactive Fonts * 4.1.2.1 Typography * 4.1.2.2 Navigation * 4.1.2.3 Content Blocks * 4.1.2.4 Tabs * 4.1.2.5 Buttons + Links * * Build Notes * ## Fonts used * font-family:'FrutigerLTW01-45Light'; * font-family:'Museo Sans W01 500'; * font-family:'VAG Rounded W01 Bold'; * font-family:'VAG Rounded W01 Light'; * * All declerations have been compiled in section 4 */ @import url(https://fast.fonts.com/cssapi/a0b5d4ac-2c78-45b6-a9f2-9bd90d6d52a0.css); /* Primary modules */ /* Variables */ /* Colors */ /* Object-fit */ /*profill object-fit style*/ .compat-object-fit { background-position: center center; background-size: cover; } .compat-object-fit img { opacity: 0; } .compat-object-fit-wrapper { overflow: hidden; } .objectfit { object-fit: cover; } a.objectfit__wrapper { overflow: hidden; display: inline-block; } /* -------------------- 1. General -------------------- */ /*-- 1.1 Reset --*/ .s-landing-modules * { box-sizing: border-box; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; -webkit-text-size-adjust: none; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } img { -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } img.maps { width: 100%; height: auto; } body:not(.home) #content img { border-radius: 5px; max-width: 100%; height: auto; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; border-bottom: 1px dotted #aaa; } iframe { border: none; outline: none; background: none; } .js-disabled iframe { display: none; } /*-- 1.2 General Typography --*/ body { background-color: #eee; color: #58585a; font: normal 75%/1.333333em Arial, Helvetica, sans-serif; /* 12px */ } .s-landing-modules body { font: normal 1em Arial, Helvetica, sans-serif; /* 12px */ } .js-enabled hr { display: none; } .hide { position: absolute; left: -9999em; top: -9999em; } .hidden { visibility: hidden; } .clear { clear: both; } .for-accessibility { position: absolute; left: -9999em; } .script-note { padding: 10px; font-style: italic; background: #eee; display: block; } p { margin: 1.4em 0; line-height: 1.42em; /* 18px */ } strong { font-weight: bold; } em { font-style: italic; } /*-- 1.3 Headings --*/ h1, h2, h3 { color: #055b93; margin: 20px 0; line-height: 1.2em; } h4, h5, h6 { color: #58585a; line-height: 1.2em; } h1 { text-transform: uppercase; font-size: 2.166666667em; /* 26px */ } h2 { font-size: 2em; /* 24px */ } .s-landing-modules h2 { font-size: 2.625em; /* 42px */ } h3 { text-transform: uppercase; font-size: 1.833333333em; /* 22px */ } h4 { font-size: 2em; /* 24px */ } h5 { font-size: 1.833333333em; /* 22px */ } h6 { text-transform: uppercase; font-size: 1.166666667em; /* 14px */ font-weight: bold; } /*-- 1.4 Links --*/ a:focus, a:active { outline: none; } a { color: #006296; text-decoration: none; } a:hover, a:focus { text-decoration: underline; } #content a.more { border: none; text-transform: uppercase; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 100% 3px transparent; display: inline-block; padding: 0 10px 0 0; margin: 10px 0 5px; } #content a.more:hover, #content a.more:focus { text-decoration: underline !important; } /*-- 1.5 Lists --*/ /*-- 1.5.1 Unordered List --*/ div[id*="content_div"] ul, div[id*="new_div"] ul, div[id*="content_container"] ul, .details-page > ul, div[id*="accordion_-"] ul { margin: 2em 0 2em 8px; } div[id*="content_div"] ul li, div[id*="new_div"] ul li, div[id*="content_container"] ul li, .details-page > ul li, div[id*="accordion_-"] ul li { padding: 0 0 0 24px; background: transparent url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 0 0.4em; line-height: 1.6em; } div[id*="content_div"] ul ol li, div[id*="new_div"] ul ol li, div[id*="content_container"] ul ol li, .details-page > ul ol li, div[id*="accordion_-"] ul ol li { background: none; padding: 0; } div[id*="content_div"] ul ul li ul, div[id*="new_div"] ul ul li ul, div[id*="content_container"] ul ul li ul, .details-page > ul ul li ul, div[id*="accordion_-"] ul ul li ul { margin-left: 0; } /*-- 1.5.2 Media Icons --*/ #content ul.media-listing li { padding: 0; background: none; } #content a.pdf, #content a.doc, #content a.xls, #content a.rss, #content a.file { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 0; color: #63656b; padding: 0 0 2px 20px; display: inline-block; } #content a.pdf:hover { background-position: 0 -452px; } #content a.doc:hover { background-position: 0 -582px; } #content a.xls:hover { background-position: 0 -713px; } #content a.file:hover { background-position: -1px -4894px; } #content a.pdf { background-position: 0 -91px; } #content a.doc { background-position: 0px -201px; } #content a.xls { background-position: 0px -322px; } #content a.file { background-position: -1px -4736px; } #content a.pdf abbr, #content a.doc abbr, #content a.xls abbr, #content a.file abbr { border: none; } #content a.rss { text-indent: -999em; background-position: 0 -3837px; padding: 0 0 0px 18px; line-height: 1; } #content a.rss:hover, #content a.rss:focus { background-position: -40px -3837px; } /*-- 1.5.3 Ordered List --*/ #content ol { margin: 2em 0 2em 30px; list-style: decimal; } #content ol li { line-height: 1.6em; } #content ol li ol { margin-left: 20px; } /* added 18/03/2020 */ #content ol li ul li { margin: 8px 0 8px 16px; list-style-type: circle; } #content ol li ul li ul li { margin: 8px 0 8px 16px; list-style-type: square; } /*-- 1.5.4 Pagination --*/ #content .pagination ul, #content .pagination ul li { margin: 0; padding: 0; list-style: none; font-size: 1.05em; } #content .pagination ul.page-listing:first-child, #content .pagination ul li.page-listing:first-child { margin-left: 0; } #content .pagination ul li { float: left; background: none; } #content .pagination ul li a, #content .pagination ul li strong { margin-left: 5px; padding: 8px 12px; border-radius: 5px; text-align: center; display: inline-block; } #content .pagination ul li span { margin-left: 5px; padding: 5px 0px; } #content .pagination ul li span:first-child { margin-right: -4px; } #content .pagination ul li a { background-color: #e1e1e1; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: linear-gradient(to bottom, #f6f6f6, #e1e1e1); color: #58585a; } #content .pagination ul li a:hover, #content .pagination ul li a:focus { background-color: #616161; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#818181), to(#616161)); background-image: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#616161)); background-image: linear-gradient(to bottom, #818181, #616161); color: #fff; } #content .pagination ul li:first-child a { margin-left: 0; } #content .pagination ul li a:hover, #content .pagination ul li a:focus { text-decoration: none; } #content .pagination ul li.prev a, #content .pagination ul li.next a, #content .pagination ul li.prev strong, #content .pagination ul li.next strong { text-indent: -999em; height: 33px; width: 32px; display: block; padding: 0; border-radius: 0; } #content .pagination ul li.prev strong, #content .pagination ul li.next strong { opacity: .3; } #content .pagination ul li.prev a strong, #content .pagination ul li.next a strong { background: none; margin: 0; } #content .pagination ul li.prev a, #content .pagination ul li.prev strong { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -1px; margin-right: 10px; } #content .pagination ul li.next a, #content .pagination ul li.next strong { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -42px; margin-left: 10px; } #content .pagination ul li.prev a:hover { background-position: -80px -1px; } #content .pagination ul li.next a:hover { background-position: -80px -42px; } #content .pagination ul li strong { background-color: #006296; color: #fff; } .page-control { overflow: hidden; } .page-control.bottom { clear: both; padding: 0 0 10px; } .page-control > h2 { text-transform: uppercase; font-size: 1.4em; float: left; margin: 0; width: 428px; text-align: center; padding: 8px 0; } .page-control > a:first-child { float: left; padding: 9px 0 7px 42px; background-position: 0 -2367px; } .page-control > a:first-child:hover { background-position: 0px -2452px; } .page-control > a { float: right; text-transform: uppercase; background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 86px -2408px; display: inline-block; padding: 8px 42px 8px 0; } .page-control > a:hover { background-position: 86px -2493px; } .page-control .pagination { width: 350px; text-align: center; float: left; } .page-control > span { float: left; padding: 8px 17px 8px 0; width: 185px; } .page-control .archive { background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 100% 11px transparent; padding: 8px 17px 8px 0; } .page-control .archive:hover { background-position: 100% 11px; } /*-- 1.5.5 Definition List --*/ dl dt { float: left; display: block; width: 80px; clear: left; font-weight: bold; padding-bottom: 6px; } dl dt.phone, dl dt.fax, dl dt.email, dl dt.abn, dl dt.date, dl dt.time, dl dt.location { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat -999em -999em; padding-left: 35px; } dl dt.phone { background-position: -2px -1552px; } dl dt.fax { background-position: -2px -1673px; } dl dt.email { background-position: -2px -1806px; } dl dt.date { background-position: -2px -1945px; } dl dt.time { background-position: -2px -2082px; } dl dt.location { background-position: -2px -2211px; } dl dt.abn { background-position: -1px -3982px; } dl dd { margin-left: 80px; padding-bottom: 6px; } .definition { clear: both; } .definition strong { float: left; width: 85px; margin: 1.4em 0; } .definition p { float: right; width: 535px; } /*-- 1.6 Tables --*/ table.data { width: 100%; } table.data caption { position: absolute; left: -999em; } table.data th { font-size: 1.1em; padding: 14px 10px 12px; text-align: left; border-bottom: none !important; } table.data td { text-align: left; padding: 10px 10px 8px; font-size: 0.95em; } table.data thead tr { background: #006296; } table.data tbody tr.even { background: #efefef; } table.data td, table.data th { border: 1px solid #d7d7d7; } table.data th { color: #fff; font-weight: bold; } /*-- 1.7 Forms --*/ .default-form legend { color: #006296; font-size: 1.18em; font-weight: bold; display: block; padding: 10px 0 20px; white-space: normal; } .default-form legend span { display: block; } .default-form fieldset { border: none; min-width: 0; } .default-form label, .default-form div > strong { color: #006296; font-size: 1.18em; font-weight: bold; width: 95px; display: inline-block; margin-top: 12px; float: left; } .default-form input[type="text"], .default-form input[type="password"], .default-form textarea { border-radius: 5px; border: 1px solid #dddddd; width: 100%; padding: 12px 10px; background: #fafafa; color: #58585a; box-sizing: border-box; } @media screen and (min-width: 768px) { .default-form input[type="text"], .default-form input[type="password"], .default-form textarea { width: 270px; } } .default-form textarea { font: inherit; } .default-form .textarea-container { position: relative; } .default-form .textarea-container label { position: absolute; top: 23px; left: 0; } .default-form .textarea-container textarea { margin-left: 95px; } .default-form input[type="text"]:focus, .default-form textarea:focus { border-color: #bbb; background: #eee; } .default-form fieldset > div > abbr { color: #c83625; float: right; font-size: 1.2em; } .default-form fieldset .required-field { font-weight: normal; font-size: 0.86em; display: block; } .default-form fieldset > div > select { width: 100%; margin: 10px 0 0; box-sizing: border-box; } @media screen and (min-width: 768px) { .default-form fieldset > div > select { width: auto; } } .default-form .controls { text-align: right; } .default-form input[type="reset"], .default-form input[type="submit"] { font-size: 1.15em; text-transform: uppercase; cursor: pointer; } #content .default-form .list-input { overflow: hidden; } #content .default-form .list-input ul { width: 305px; float: right; display: inline-block; margin: 6px 0 0 5px; } #content .default-form .list-input ul li { background: none; padding: 0 0 5px 0; } #content .default-form ul li label { margin: 0 0 0 5px; float: none; font-weight: normal; font-size: 1.05em; color: #58585A; } #content .default-form ul li input[type="checkbox"] { float: none; } .landing #content .default-form { padding-top: 20px; } .landing #content .default-form.content-block fieldset > div { float: none; } .landing #content .default-form .controls input[type="submit"], .inside #content .default-form .controls input[type="submit"] { margin-right: 17px; } .landing #content .inner-right .default-form .controls input[type="submit"] { margin: 0; } .landing #content .default-form .pagination { padding: 10px 0 22px; overflow: hidden; } .landing #content .default-form .pagination ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 15px 0 0; } .landing #content .default-form .pagination, .landing #content .default-form .pagination ul { width: auto; text-align: right; } @media screen and (min-width: 768px) { .landing #content .default-form .search-input { float: left; } .landing #content .default-form .pagination ul { margin-top: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; float: right; } } .landing #content .default-form .doc-listing { float: none; width: auto; padding: 0; } .landing #content .default-form .doc-listing ul { width: 100%; } .resources #content .default-form { background: url(https://www.royallifesaving.com.au/__data/assets/image/0020/17048/bg-resources.png) left top no-repeat #006296; } .resources #content .default-form .styled-field-1 { min-height: 63px; padding-top: 0; border: none; background: #006296; } .resources #content .default-form .styled-field-1 label { color: #fff; } .resources #content .default-form .styled-field-2 { background: #fff; border: none; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; text-align: center; padding: 10px 15px 10px 17px; } .resources #content .default-form legend { color: #fff; font-size: 1.54em; padding: 0 0 10px 52px; text-transform: uppercase; line-height: 1.05; min-height: 38px; } @media screen and (min-width: 1024px) { .resources #content .default-form legend { min-height: 0; } } .resources #content .default-form label, .resources #content .default-form strong { margin: 0; padding: 10px 0 6px; float: none; width: auto; display: block; font-size: 1.16em; } .resources #content .default-form fieldset > div > a { display: inline-block; padding: 10px 15px 10px 0; text-transform: uppercase; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 100% 13px transparent; } .resources #content .default-form fieldset > div { padding: 0; width: 100%; border-bottom: 1px dotted #1ab5e8; margin: 0 -20px; padding: 10px 10px 10px 22px; background: #dfdfdf; } .resources #content .default-form fieldset > div > select { width: 100%; margin: 10px 0; float: none; } @media screen and (min-width: 768px) { .resources #content .default-form fieldset > div > select { width: 100%; float: left; } } .resources .alert-msg { display: block; height: 24px; width: 24px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -4148px; text-indent: -999em; float: left; margin: 7px; } .inside #content .default-form .controls { text-align: left; margin-top: 20px; } #content .default-form .has-helper > p { padding-right: 60px; } #content .default-form .has-helper > div { margin-bottom: 10px; } #content .default-form .has-helper > div:last-of-type { margin-bottom: 0; } #content .default-form .helper { margin-top: 25px; } #content .default-form .helper ul { width: 100%; float: none; border-top: 1px dotted #006296; margin: 10px 0 0; } #content .default-form .helper ul li { padding: 0; border-bottom: 1px dotted #006296; background: none; } #content .default-form .helper ul li a { background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 95% 8px; line-height: 1.6em; padding: 4px 24px 2px 5px; margin-left: -5px; text-transform: uppercase; display: block; border-bottom-left-radius: 10px; border-top-left-radius: 10px; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } #content .default-form .helper ul li a:hover, #content .default-form .helper ul li a:focus { background-color: #E2F0F5; } #form_email_13243 .default-form fieldset label { width: 120px; } #form_email_13243 .default-form fieldset > div { width: 700px; } #form_email_13243 .default-form input[type="text"], .default-form textarea { width: 450px; } #form_email_13243 .default-form .list-input ul { float: left; } #form_email_13243 .default-form .list-input ul li { display: inline-block; } #form_email_13243 .default-form fieldset .form_date select { width: 60px; margin-left: 2px; margin-right: 2px; } #form_email_13243 .default-form .form_content { padding-left: 20px; } #form_email_13243 .default-form .form_content p { margin-top: 0; } #form_email_13243 .default-form .form_content ul { margin-top: 0; margin-bottom: 0; } #form_email_13243 .default-form .form_note { padding-left: 25px; margin-top: 0; } #form_email_13243 .default-form textarea { max-width: 600px; } #form_email_13243 .default-form fieldset .errors { padding-left: 0; } @media screen and (min-width: 768px) { #content .default-form .has-helper { float: left; width: -webkit-calc(100% - 260px); width: calc(100% - 260px); } #content .default-form .helper { float: left; width: 250px; margin-top: 0; } } /*Matrix Output*/ .login-form { background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 5px 5px; padding: 0; } .login-form table tr td:first-child { color: #006296; display: inline-block; float: left; font-size: 1.18em; font-weight: bold; width: 95px; padding: 10px 0 30px; } /*-- 1.8 Images --*/ .align-left > img { width: 100%; height: auto; display: block; } .align-right > img { width: 100%; height: auto; display: block; } @media screen and (min-width: 655px) { .align-right { float: right; margin: 0 0 10px 20px; padding: 1px; } .align-right > img { width: auto; height: auto; display: inline-block; } .align-left { float: right; margin: 0 20px 10px 0; padding: 1px; } .align-left > img { width: auto; height: auto; display: inline-block; } } /*-- 1.9 Miscellaneous --*/ .show-tablet { display: none !important; } @media screen and (min-width: 768px) { .show-mobile { display: none !important; } .show-tablet { display: block !important; } } /*-- 1.9.1 Button --*/ div.button { margin: 20px 0 60px; font-size: 1.15em; text-transform: uppercase; max-height: 45px; } .s-landing-modules div.button { text-transform: none; } input[type="submit"], input[type="reset"] { overflow: visible; } .s-landing-modules div.button > a { padding: 7px 30px 6px; border: 1px solid #e5e5e5; border-radius: 5px; background-color: #0799cc; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: linear-gradient(to bottom, #f6f6f6, #e1e1e1); color: #fff; text-align: center; text-decoration: none; display: inline-block; } .s-landing-modules div.button > a:hover { background-color: #05749b; } div.button a, #content input[type="submit"], #content input[type="reset"], .login input[type="submit"] { padding: 7px 30px 6px; border: 1px solid #e5e5e5; border-radius: 5px; background-color: #e1e1e1; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background-image: linear-gradient(to bottom, #f6f6f6, #e1e1e1); color: #58585a !important; text-align: center; text-decoration: none; display: inline-block; } .login div.button a, .login input[type="submit"] { background-color: #c4c4c4; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#e8e8e8), to(#c4c4c4)); background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#c4c4c4)); background-image: linear-gradient(to bottom, #e8e8e8, #c4c4c4); } #content div.button a:hover, #content div.button a:focus, #content input[type="submit"]:hover, #content input[type="submit"]:focus, #content input[type="reset"]:hover, #content input[type="reset"]:focus, .login input[type="submit"]:hover, .login input[type="submit"]:focus, .login div.button a:hover, .login div.button a:focus, .banner-info div.button a:hover, .banner-info div.button a:focus, .feature div.button a:hover, .feature div.button a:focus { border: 1px solid #e5e5e5; background-color: #616161; background-image: -webkit-linear-gradientgradient(linear, left top, left bottom, from(#818181), to(#616161)); background-image: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#616161)); background-image: linear-gradient(to bottom, #818181, #616161); color: #fff !important; text-decoration: none !important; } #content div.button.info, #content div.button.find { margin: 10px 0; } #content div.button.info a, #content div.styled-field-2 input[type="submit"] { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat -4px -2633px #d0d0d0; padding: 14px 32px 13px 62px; color: #055b93 !important; } #content div.styled-field-2 input[type="submit"] { padding: 9px 11px 7px 40px; color: #055b93 !important; background-position: -3px -2739px; font-size: 1.05em; width: 209px; } #content div.button.info a:hover, #content div.button.info a:focus { background-position: -2px -2683px; color: #fff !important; } #content div.styled-field-2 input[type="submit"]:hover, #content div.styled-field-2 input[type="submit"]:focus { background-position: -3px -2779px; color: #fff !important; } #content div.button.donate a { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -2595px; padding: 11px 22px 6px 48px; } #content div.button.donate a:hover, #content div.button.donate a:focus { background-position: -122px -2595px; } /*-- 1.9.2 Highlight Box --*/ div.highlight { margin: 20px 0; padding: 15px; border: 1px dotted #1ab5e8; background: #e2f0f5; color: #006296; } div.highlight strong { display: block; } div.highlight p { margin: 0; padding: 0; } #content div.errors ul { margin: 20px 0; padding: 15px; border: 1px dotted #a21212; background: #f1e5e5; } #content div.errors ul li { padding: 0 0 0 10px; background: none; list-style: inside disc; color: #000; } /*-- 1.9.3 Blockquote --*/ blockquote { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 6px -865px #eee; padding: 2px 20px 10px 75px; border: 1px solid #ddd; border-radius: 10px; } blockquote p { margin: 1.2em 0 0.6em; } blockquote .reference { font-style: italic; text-align: right; display: block; padding-bottom: 2px; } /*-- 1.9.4 Self-clearing elements --*/ .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } /*-- 1.9.5 Image with caption --*/ #content div.image { clear: both; overflow: hidden; padding: 1.4em 0.8em; border: 1px solid #ddd; border-radius: 10px; background: #eee; } #content div.image img { float: left; padding: 0; margin-right: 20px; } /*-- 1.9.6 Shared Icons --*/ .share-icons { float: left; } .share-icons .addthis_toolbox a { margin-bottom: 0 !important; } .share-icons h2, .share-icons > strong { float: left; margin: 0; padding: 6px 21px 0 0; text-transform: uppercase; font-size: 1.333333333em; /* 16px */ color: #055B93; font-weight: normal; } .share-icons ul, .share-icons .addthis_toolbox { float: left; } .share-icons ul li, .share-icons a { float: left; margin-left: 5px; } .share-icons ul li:first-child { padding-left: 0; } .share-icons ul li a, .share-icons a { display: block; width: 24px; height: 25px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0004/17059/sprite-share-icons.png) no-repeat; text-indent: -9999px; padding: 0 !important; } .share-icons ul li a.twitter, .share-icons a.addthis_button_twitter { background-position: 0 -50px; } .share-icons ul li a.twitter:hover, .share-icons a.addthis_button_twitter:hover, .share-icons ul li a.twitter:focus, .share-icons a.addthis_button_twitter:focus { background-position: 100% -50px; text-decoration: none; border-style: none; } .share-icons ul li a.email, .share-icons a.addthis_button_email { background-position: 0 -99px; } .share-icons ul li a.email:hover, .share-icons a.addthis_button_email:hover, .share-icons ul li a.email:focus, .share-icons a.addthis_button_email:focus { background-position: 100% -99px; text-decoration: none; border-style: none; } .share-icons ul li a.email:hover, .share-icons a.addthis_button_facebook:hover, .share-icons ul li a.email:focus, .share-icons a.addthis_button_facebook:focus { background-position: 100% 0; text-decoration: none; border-style: none; } .share-icons .addthis_toolbox span { background: none !important; } /* 1.9.7 Responsive embed */ .responsive-youtube { position: relative; display: block; height: 0; padding: 0; overflow: hidden; padding-bottom: 56.25%; } .responsive-youtube > iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* 1.9.8 Video modal */ .video-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.65); padding: 50px 10px; } @media screen and (min-width: 1025px) { .video-modal { 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; } } .video-title { width: -webkit-calc(100% - 175px); width: calc(100% - 175px); position: absolute; top: -35px; left: 0; color: #fff; font-size: 18px; height: 24px; line-height: 24px; text-shadow: 0 0 10px #000; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; } .video-dialog { width: 100%; position: relative; max-width: 850px; background-color: #fff; padding: 5px; margin: 0 auto; border-radius: 5px; box-sizing: border-box; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); } .modal-buttons { 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; position: absolute; top: -35px; right: 0; } .video-link { display: inline-block; height: 24px; font-size: 14px; line-height: 24px; padding: 0 10px; background-color: #fff; border-radius: 5px; color: #000; -webkit-transition: 0.15s opacity linear; transition: 0.15s opacity linear; margin-right: 15px; opacity: 0.7; } .video-link:hover, .video-link:focus { opacity: 1; text-decoration: none; } .video-modal-close { display: inline-block; height: 20px; width: 20px; -webkit-transition: 0.15s opacity linear; transition: 0.15s opacity linear; opacity: 0.7; } .video-modal-close:before, .video-modal-close:after { content: ''; position: absolute; height: 21px; width: 5px; background-color: #fff; display: inline-block; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 7px; top: 1px; } .video-modal-close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .video-modal-close:hover { opacity: 1; } @media screen and (max-width: 475px) { .video-link { display: none; } .video-title { width: -webkit-calc(100% - 30px); width: calc(100% - 30px); } } /* -------------------- 2. Page Elements -------------------- */ /*-- 2.1 Page Structure --*/ body.home { background: #FFF; } body.home #content { max-width: none; padding-left: 0; padding-right: 0; } body.home #content-aside { margin-top: 0; } body:not(.home) #content { margin-bottom: 20px; } body.s-landing-modules { background: #FFF; font-size: 16px; line-height: normal; } body.s-landing-modules #content { margin: 0; padding: 0; max-width: 100%; overflow: hidden; } #breadcrumb-wrapper, #content, .wrapper, #footer { margin: 0 auto; width: 100%; max-width: 1365px; padding-left: 10px; padding-right: 10px; box-sizing: border-box; /*-- Removed because this is a global edit, not page specific. --*/ } .inside #content-main > div, .inside #content-main > form > .default-form.content-block { padding: 34px 28px; border-radius: 5px; background: #fff; } .inside #content-main > form > .default-form.content-block { padding: 25px 15px 15px 15px; } @media screen and (max-width: 768px) { .inside #content-main > form > .default-form.content-block label { float: none; margin-top: 0; margin-bottom: 5px; width: 100%; display: block; } } .landing #content-aside { display: none; } #content-aside { margin-top: 40px; } #content-main > h1 { margin-top: 0; } @media screen and (min-width: 768px) { #breadcrumb-wrapper, #content, .wrapper, #footer { padding-left: 15px; padding-right: 15px; } } @media screen and (min-width: 1024px) { .inside #content-inner { float: right; width: -webkit-calc(100% - 272px); width: calc(100% - 272px); } #content-aside { float: left; width: 252px; margin-right: 20px; background: none; margin-top: 0; } } /*-- 2.2 Accessibility --*/ #nav-accessibility h2 { position: absolute; top: -999em; left: -999em; } #nav-accessibility ol li { display: inline; } #nav-accessibility ol li a { color: #fff; background: #006595; position: absolute; left: -999em; top: -999em; line-height: 3; text-indent: 30px; display: block; font-weight: bold; text-transform: uppercase; border-bottom: 2px ridge #004261; float: left; } #nav-accessibility ol li a:focus { position: static; float: none; } hr { display: none; } div.hr { display: block; border: 1px dotted #b8b8b8; margin: 10px 0 15px; } /*-- 2.3 Header --*/ #header { position: relative; } #header > .wrapper { padding-left: 15px; padding-right: 90px; } #header-wrapper { width: 100%; /*-- Removed because this is a global edit, not page specific. --*/ } .header-right { float: right; display: none; } @media screen and (min-width: 1025px) { #header > .wrapper { padding-right: 15px; } .header-right { display: inherit; } } /*-- 2.3.1 Branding */ .branding { float: left; display: block; margin-top: 25px; margin-bottom: 25px; border-radius: 12px; -webkit-transition: .15s box-shadow linear; transition: .15s box-shadow linear; } .branding img { display: block; width: 250px; max-width: 100%; } @media screen and (min-width: 1025px) { .branding img { width: 400px; } } .branding:focus { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.25); } /*-- 2.3.2 Global Links --*/ ul.global-links { float: right; margin-top: 14px; } ul.global-links li { float: left; border-right: 1px solid #006296; padding: 0 10px 0 10px; line-height: 1; } ul.global-links li a { font-size: 14px; color: #006296; text-decoration: none; } ul.global-links li a:hover, ul.global-links li a:focus { text-decoration: underline; } div.login { position: relative; z-index: 1000; float: right; margin-top: 14px; padding-left: 8px; } .js-enabled div.login > span, .js-enabled div.login > .login-error-value, .js-disabled div.login > span, .js-disabled div.login .login-error-value { display: none; } .js-disabled div.login > span, .js-disabled div.login > .login-error-value { display: none; color: #000; position: absolute; top: 5px; z-index: -1; background: url(https://www.royallifesaving.com.au/__data/assets/image/0014/17042/bg-error.png) left top no-repeat; border-radius: 5px; text-align: center; padding: 23px 0 10px; font-size: .95em; width: 252px; right: 0; font-weight: bold; } div.login > a { font-size: 14px; text-decoration: none; } div.login > a:hover, div.login > a:focus { text-decoration: underline; background-position: -48px -1460px; } div.login > a.selected { background-position: 53px -1489px; } div.login a.further-info { color: #006296; display: inline; float: left; margin: 7px 0 0; overflow: hidden; text-decoration: none; } div.login a.further-info:hover { text-decoration: underline; } /*-- 2.3.3 Site Search --*/ form.site-search { display: none; position: relative; margin-top: 35px; width: 275px; float: right; } .search-input { position: relative; } form.site-search legend { position: absolute; left: -999em; } form.site-search label { margin: 0; width: 65px; color: #fff; font-size: 1.12em; text-transform: uppercase; float: left; padding: 8.5px 0; } form.site-search .wrap-input { float: left; } form.site-search input { border: none; background: none; float: right; } form.site-search input[type="text"], #content-main .search-input input[type="text"] { float: left; font-size: 14px; width: 100%; height: 32px; padding: 0; display: block; } .search-input span.wrap-input { background: #F2F2F2; } span.wrap-input { background: #fff; position: relative; border-radius: 5px; display: block; height: 32px; padding: 0 38px 0 10px; line-height: 40px; outline: 0; } .default-form span.wrap-input { width: auto; } form.site-search input[type="text"].blur, form.site-search input[type="text"]:focus { outline: none; } form.site-search input[type="submit"], #content-main .search-input input[type="submit"] { position: absolute; right: 2px; bottom: 1px; width: 30px; height: 30px; background: url("https://www.royallifesaving.com.au/__data/assets/image/0014/17060/sprite-site-search-button.png") no-repeat 0 0; text-indent: -999em; line-height: 0; cursor: pointer; } form.site-search input[type="submit"]:focus, #content-main .search-input input[type="submit"]:focus { outline: 0; } #content-main .search-input input[type="text"] { background: transparent; border: none; outline: none; } #content-main .search-input input[type="submit"] { padding: 0; bottom: 1px; right: 3px; } form.site-search input[type="submit"]:hover, #content-main .search-input input[type="submit"]:hover, form.site-search input[type="submit"]:focus, #content-main .search-input input[type="submit"]:focus { background-position: 0px -30px; } @media screen and (min-width: 1024px) { form.site-search input[type="text"] { width: 162px; } } /*-- 2.3.4 Login --*/ div.login > div { position: absolute; right: -2px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0018/17046/bg-login.png) no-repeat -4px 0; width: 223px; height: 151px; padding: 20px 16px; overflow: hidden; top: -999em; } .js-disabled div.login > div { left: -999em; } div.login > div form legend { text-transform: uppercase; color: #006296; font-size: 1.3em; display: block; padding: 10px 0 14px 56px; } div.login > div form div { padding: 5px 0 3px; overflow: hidden; clear: both; } div.login > div form label { color: #006296; display: inline-block; float: left; font-size: 1em; font-weight: bold; width: 66px; padding: 6px 0 0; } div.login > div form input[type="text"], div.login > div form input[type="password"] { border-radius: 5px; border: 1px solid #dddddd; width: 135px; padding: 6px 10px; background: #fafafa; color: #58585a; } div.login > div form input[type="text"]:focus { border-color: #bbb; background: #efefef; } div.login > div form input[type="submit"] { font-size: 1em; text-transform: uppercase; float: right; cursor: pointer; } div.login .login-error input[type="submit"] { float: left; } div.login .login-error { color: #006296; background: url(https://www.royallifesaving.com.au/__data/assets/image/0018/17046/bg-login.png) no-repeat -16px -57px; top: 59px; position: absolute; width: 224px; height: 116px; } div.login .login-error em { padding: 0; margin: 10px 0; font-family: arial; font-weight: bold; font-size: 2em; font-style: normal; display: block; } div.login .login-error strong { display: block; } div.login .login-error div.button { margin: 0; display: inline-block; color: #4e4e4f; font-size: 1em; float: left; } div.login .login-error div.button a { color: #4e4e4f; padding: 7px 20px 6px; } div.login .login-error a.cancel-btn { color: #006296; font-weight: bold; padding: 14px 12px; display: inline-block; text-decoration: underline; } div.login .login-error a.cancel-btn:hover, div.login .login-error a.cancel-btn:focus { text-decoration: none; } .login > form > #log_in_out_button, .login > #log_in_out_button { padding: 0px 8px; border-radius: 2px; cursor: pointer; text-transform: uppercase; font-size: 0.86em; position: relative; } /*-- 2.4 Navigation --*/ #nav { position: absolute; left: 0; right: 0; z-index: 100; background-color: #006595; display: none; } #nav.expanded { display: inherit; } #nav form.site-search { float: none; width: auto; margin-top: 15px; margin-bottom: 5px; } #nav form.site-search label { display: none; } #nav form.site-search .wrap-input { float: none; width: auto; height: 36px; } #nav form.site-search input[type="text"] { font-size: 18px; height: 36px; } #nav form.site-search input[type="submit"] { background: url("https://www.royallifesaving.com.au/__data/assets/file/0017/17270/search-icon.svg") no-repeat center center; background-size: 22px; right: 4px; bottom: 3px; } .js-mainNav-toggler { display: block; position: relative; height: 52px; width: 52px; background-color: #006296; border-radius: 50%; position: absolute; top: 50%; margin-top: -26px; right: 15px; } .js-mainNav-toggler:before { position: absolute; content: ''; left: 50%; margin-left: -14px; top: 16px; width: 29px; height: 5px; border-top: 3px solid white; border-bottom: 3px solid white; display: block; } .js-mainNav-toggler:after { position: absolute; content: ''; left: 50%; margin-left: -14px; width: 29px; height: 3px; background-color: white; bottom: 17px; } .js-mainNav-toggler.expanded:before, .js-mainNav-toggler.expanded:after { top: 50%; margin-top: -2px; } .js-mainNav-toggler.expanded:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .js-mainNav-toggler.expanded:before { height: 3px; border: 0; background-color: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .main_nav-item { border-bottom: 1px solid #008acb; } .main_nav-item.expanded { border-bottom: 0; } .main_nav-item:last-of-type { border-bottom: 0; } .main_nav-item > .nav-links { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .main_nav-link, .sub_nav-link { font-size: 20px; font-family: 'VAG Rounded W01 Bold'; text-decoration: none; line-height: 1.33; padding: 10px 0 8px 0; color: #fff; display: block; } .main_nav-link:hover, .main_nav-link:focus, .sub_nav-link:hover, .sub_nav-link:focus { text-decoration: none; } .nav-links > .main_nav-link { width: -webkit-calc(100% - 29px); width: calc(100% - 29px); } .sub_nav-list { background-color: #008ACB; margin-left: -15px; margin-right: -15px; display: none; } .expanded > .sub_nav-list { display: block; } .sub_nav-item { border-bottom: 1px solid #0A9FE6; margin-left: 15px; margin-right: 15px; } .sub_nav-item:last-of-type { border-bottom: 0; } .sub_nav-link { padding-left: 15px; padding-right: 15px; } .has-subs > .main_nav-link { position: relative; padding-right: 25px; } .has-subs > .main_nav-link:after { position: absolute; top: 50%; right: 2px; margin-top: -5px; content: ''; display: block; height: 6px; width: 6px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .has-subs.expanded > .main_nav-link:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .megamenu { background-color: #e7e7e7; position: absolute; z-index: 9; left: 0; right: 999em; top: 100%; overflow: hidden; height: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); } .megamenu > .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .js-disabled .main_nav-item div a:focus { margin-left: 999em !important; background: #fff; padding: 10px; position: absolute; left: 0; top: 0; width: 960px; zoom: 1; } .js-disabled .main_nav-item div a:focus img { margin: 0; padding-right: 12px; } #nav .secondary strong, #nav .aux-info strong { text-transform: uppercase; font-size: 1.34em; color: #055B93; font-weight: normal; display: block; } #nav .feature { box-shadow: 2px 0 4px rgba(0, 0, 0, 0.075); padding: 15px; background: #fff; overflow: hidden; min-width: 205px; width: 20%; -webkit-flex-basis: 20%; -ms-flex-preferred-size: 20%; flex-basis: 20%; -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } #nav .no-feature .feature { display: none; } #nav .feature img { padding: 0 0 10px; width: 100%; height: auto; } #nav .feature span { color: #004b76; line-height: 1.6; display: block; } #nav .feature .button { margin: 20px 0 0; } #nav .no-feature.no-aux .secondary { border: none; padding-bottom: 20px; } #nav > .wrapper { padding-left: 15px; padding-right: 15px; } #nav .secondary { width: 70%; -webkit-flex-basis: 70%; -ms-flex-preferred-size: 70%; flex-basis: 70%; position: relative; overflow: hidden; } #nav .secondary > strong { padding: 17px 15px 13px 15px; border-bottom: 1px dotted #1ab5e8; } #nav .secondary > strong + .secondary-list { height: -webkit-calc(100% - 46px); height: calc(100% - 46px); } #nav .no-aux .secondary { width: 80%; -webkit-flex-basis: 80%; -ms-flex-preferred-size: 80%; flex-basis: 80%; } .secondary-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100%; } .secondary-list > li { width: 33.3%; -webkit-flex-basis: 33.3%; -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; padding: 12px 15px 15px 15px; display: block; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .secondary-list > li a:not(.thumb) { display: block; color: #004b76; text-decoration: none; zoom: 1; position: relative; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } .secondary-list > li > a:not(.thumb) { margin-left: -15px; margin-right: -15px; padding: 5px 15px 3px 15px; -webkit-transition: background-color 0.1s ease-in; transition: background-color 0.1s ease-in; } .secondary-list > li > a:not(.thumb):hover, .secondary-list > li > a:not(.thumb):focus, .secondary-list > li > a:not(.thumb).active { background-color: #fff; } .secondary-list > li:after { content: ''; position: absolute; background-color: #e7e7e7; bottom: -500px; height: 500px; left: 0; right: 0; z-index: -1; } .secondary-list > li:nth-child(1), .secondary-list > li:nth-child(3n) { position: relative; background-color: #dddddd; } .secondary-list > li:nth-child(1):after, .secondary-list > li:nth-child(3n):after { background-color: #dddddd; } .col-4 .secondary-list > li { width: 25%; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .col-4 .secondary-list > li:nth-child(3n) { background-color: transparent; } .col-4 .secondary-list > li:nth-child(3n):after { background-color: #e7e7e7; } .col-4 .secondary-list > li:nth-child(odd) { background-color: #dddddd; } .col-4 .secondary-list > li:nth-child(odd):after { background-color: #dddddd; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .secondary-list > li { width: -webkit-calc(33.3% - 30px); width: calc(33.3% - 30px); -webkit-flex-basis: -webkit-calc(33.3% - 30px); -ms-flex-preferred-size: calc(33.3% - 30px); flex-basis: calc(33.3% - 30px); } .col-4 .secondary-list > li { width: -webkit-calc(25% - 30px); width: calc(25% - 30px); -webkit-flex-basis: -webkit-calc(25% - 30px); -ms-flex-preferred-size: calc(25% - 30px); flex-basis: calc(25% - 30px); } } #nav .secondary > ul > li > a > strong { text-transform: uppercase; font-size: 1.3em; font-weight: normal; line-height: 1.33; } #nav .secondary > ul > li > a > span { display: block; margin-left: 67px; } #nav .secondary ul li a.thumb { display: block; text-decoration: none; color: #006296; border-radius: 2px; -webkit-transition: .15s background-color linear, .15s box-shadow linear; transition: .15s background-color linear, .15s box-shadow linear; } #nav .secondary ul li a.thumb:hover, #nav .secondary ul li a.thumb:focus { background-color: #fff; box-shadow: 0 0 0 6px #fff; } #nav .secondary ul li a.thumb img { float: left; margin-right: 10px; } #nav .secondary ul li a.thumb strong { margin-bottom: 6px; } #nav .secondary ul li a:hover h3 { text-decoration: underline; } #nav .secondary ul li.folder img { display: block; width: 100%; height: auto; } #nav .secondary ul li strong { font-size: 1em; font-family: arial; text-transform: none; font-weight: bold; margin: 0; display: block; } #nav .secondary ul li li a { padding: 5px 15px; margin-left: -15px; margin-right: -15px; -webkit-transition: 0.1s background-color ease-in; transition: 0.1s background-color ease-in; } #nav .secondary ul li li a:hover, #nav .secondary ul li li a:focus, #nav .secondary ul li li a.active { background-color: #fff; } #nav .secondary ul li li li a { padding-top: 3px; padding-bottom: 3px; color: #004e77; } #nav .secondary ul li li li a:before { content: ''; display: inline-block; height: 4px; width: 4px; border-right: 2px solid #0198CF; border-bottom: 2px solid #0198CF; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-right: 8px; vertical-align: middle; margin-top: -2px; } #nav .secondary ul ul ul { margin: 0 0 15px; } #nav .secondary ul li.folder > a { margin-bottom: 15px; } #nav .secondary ul li li li a:hover { text-decoration: underline; background-color: transparent; } #nav .no-aux .secondary > ul > li.no-border, #nav .no-feature .secondary > ul > li.no-border { border: none; } #nav .aux-info { border-left: 1px dotted #1ab5e8; padding: 15px; width: 10%; -webkit-flex-basis: 10%; -ms-flex-preferred-size: 10%; flex-basis: 10%; min-width: 210px; } #nav .aux-info ul { padding: 10px 0 15px; } #nav .aux-info ul li a { padding-bottom: 5px; color: #006296; line-height: 1.6em; display: inline-block; font-weight: normal; text-decoration: none; } #nav .aux-info ul li a:hover, #nav .aux-info ul li a:focus { text-decoration: underline; } #nav .aux-info ul li a:before { content: ''; height: 4px; width: 4px; display: inline-block; border-bottom: 2px solid #0198CF; border-right: 2px solid #0198CF; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); vertical-align: middle; margin-top: -2px; margin-right: 6px; } @media screen and (min-width: 1025px) { .sub_nav-list, .expanded > .sub_nav-list, .js-subNav-toggle, .has-subs > .main_nav-link:after { display: none; } #nav { position: relative; background-color: #0198CF; display: inherit; } #nav > .wrapper { padding-left: 15px; padding-right: 15px; } .main_nav-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .main_nav-item { border-bottom: 0; margin-right: 8px; overflow: hidden; } .main_nav-item:last-of-type { margin-right: 0; } .main_nav-item:hover > .megamenu, .main_nav-item.hovered > .megamenu { right: 0; height: auto; } .main_nav-link, .has-subs > .main_nav-link { font-size: 18px; text-transform: uppercase; padding: 14px 12px 10px 12px; border-radius: 8px; margin-bottom: 5px; margin-top: 5px; -webkit-transition: .1s background-color linear; transition: .1s background-color linear; } .hovered .main_nav-link, .hovered .has-subs > .main_nav-link { background-color: #27b3e4; } .nav-links > .main_nav-link, .nav-links > .has-subs > .main_nav-link { width: auto; } .main_nav-link:hover, .main_nav-link:focus, .has-subs > .main_nav-link:hover, .has-subs > .main_nav-link:focus { background-color: #27b3e4; text-decoration: none; } .js-mainNav-toggler { display: none; } } @media screen and (min-width: 1205px) { .main_nav-link, .has-subs > .main_nav-link { padding-left: 22px; padding-right: 22px; } } /*-- 2.5 Breadcrumbs --*/ #breadcrumb-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 20px; margin-bottom: 20px; } .landing #breadcrumb-wrapper { margin-top: 20px; margin-bottom: 16px; } .breadcrumb { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .breadcrumb em, .breadcrumb a { padding: 0 0 0 27px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat 11px 3px; } .breadcrumb a:first-child { padding: 0; background: none; } .breadcrumb a { color: #006296; text-decoration: none; } .breadcrumb a:hover, .breadcrumb a:focus { text-decoration: underline; } .breadcrumb em { color: #58585a; font-weight: bold; font-style: normal; } @media screen and (min-width: 768px) { #breadcrumb-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .breadcrumb { width: -webkit-calc(100% - 152px); width: calc(100% - 152px); margin-bottom: 0; } } @media screen and (min-width: 1024px) { #breadcrumb-wrapper { margin-bottom: 30px; } } /*-- 2.6 Secondary Navigation --*/ #nav-secondary { position: relative; } #nav-secondary h2 { position: absolute; top: -999em; left: -999em; } #nav-secondary h3 { position: absolute; top: -18px; left: 9px; margin: 0; padding: 12px; border-radius: 5px; background: #006296; color: #fff; font-size: 1.333333333em; } /* First Level */ #nav-secondary > ul { margin: 0; border-radius: 5px; overflow: hidden; } #nav-secondary > ul a { -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } #nav-secondary > ul a:hover { background: #eee; } #nav-secondary > ul > li { padding: 0; background: none; } #nav-secondary > ul > li > a { display: block; padding: 15px 0; border-top: 1px dotted #1ab5e8; background: #e2f0f5; font-weight: bold; } #nav-secondary > ul > li > a > span { margin-left: 23px; padding-left: 14px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0020/17039/bg-blue-bullet-large.png) no-repeat 0 4px; display: inline-block; } #nav-secondary > ul > li:first-child > a { border: none; padding-top: 37px; } #nav-secondary > ul > li.active > a { background: #cfcfcf; } /* Second Level */ #nav-secondary > ul > li.active > ul { position: static; } #nav-secondary > ul > li > ul { margin: 0; position: absolute; left: -999em; } #nav-secondary > ul > li > ul > li { padding: 0; } #nav-secondary > ul > li > ul > li > a { display: block; padding: 15px 0; border-top: 1px dotted #dbdbdb; background: #f4f4f4; font-weight: normal; } #nav-secondary > ul > li > ul > li:first-child > a { border-top: 1px dotted #1ab5e8; } #nav-secondary > ul > li > ul > li.current > a > span { text-decoration: underline; } #nav-secondary ul > li > ul > li > a > span { margin-left: 54px; padding-left: 14px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat 0.1em 4px; display: inline-block; } /* Third Level */ #nav-secondary > ul > li > ul > li > ul { margin: 0; } #nav-secondary > ul > li > ul > li > ul > li { padding: 0; } #nav-secondary > ul > li > ul > li > ul > li > a { display: block; padding: 15px 0; border-top: 1px dotted #dbdbdb; background: #fff; font-weight: normal; } #nav-secondary > ul > li > ul > li > ul > li.current > a > span { text-decoration: underline; } #nav-secondary ul > li > ul > li > ul > li > a > span { margin-left: 80px; padding-left: 14px; padding-right: 5px; background: url("https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png") no-repeat 0.2em 5px; display: inline-block; } /*-- 2.7 Footer --*/ #footer-wrapper { width: 100%; background: #002440 url("https://www.royallifesaving.com.au/__data/assets/image/0015/17043/bg-footer-wrapper.jpg") no-repeat scroll 50% 0; } #footer { max-width: 980px; margin: 0 auto; padding-top: 35px; padding-left: 0; padding-right: 0; box-sizing: border-box; } .footer-heading { margin: 0; padding: 0 20px; line-height: 0; } .footer-heading:hover { background-color: rgba(255, 255, 255, 0.075); } .footer-heading-link { font-family: 'VAG Rounded W01 Bold'; position: relative; color: #66ccff; padding: 12px 0 10px 0; text-decoration: none; display: block; line-height: 1.2; } .footer-heading-link:after { content: ''; height: 6px; width: 6px; display: inline-block; border-right: 3px solid #fff; border-bottom: 3px solid #fff; position: absolute; right: 2px; margin-top: -6px; top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .footer-heading-link:hover, .footer-heading-link:focus { text-decoration: none; } .links-expanded .footer-heading-link:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .footer_links-list { background-color: #008ACB; display: none; } .links-expanded .footer_links-list { display: block; } .footer-item { padding-left: 20px; padding-right: 20px; } .footer_links-list .footer-item:last-of-type .footer-link { border-bottom: 0; } .footer-item:hover { background-color: #0083c1; } .footer-link { line-height: 1.5; font-family: 'VAG Rounded W01 Bold'; font-size: 22px; padding: 10px 0 7px 15px; display: block; color: #fff; text-decoration: none; border-bottom: 1px solid #06A0E9; } @media screen and (min-width: 1024px) { #footer { text-align: inherit; padding-top: 45px; padding-left: 15px; padding-right: 15px; } .footer_links-list { display: block; background-color: transparent; } .footer-heading, .footer-heading-link { padding: 0; } .footer-heading { margin-top: 35px; margin-bottom: 20px; } .footer-heading:hover { background-color: transparent; } .footer-heading-link { font-size: 16px; font-family: inherit; width: auto; float: none; /*-- Removed because this is a global edit, not page specific. --*/ } .footer-heading-link:after { display: none; } .footer-row { display: inline-block; vertical-align: top; width: -webkit-calc(100% / 5 - 44px); width: calc(100% / 5 - 44px); margin-left: 50px; /*-- Removed because this is a global edit, not page specific. --*/ } #footer .footer-row:nth-of-type(1) .footer-heading, #footer .footer-row:nth-of-type(2) .footer-heading, #footer .footer-row:nth-of-type(3) .footer-heading, #footer .footer-row:nth-of-type(4) .footer-heading, #footer .footer-row:nth-of-type(5) .footer-heading { margin-top: 0; } #footer .footer-row:nth-of-type(1), #footer .footer-row:nth-of-type(6) { margin-left: 0; } .footer-link { font-size: 12px; padding-top: 0; padding-bottom: 0; padding-left: 15px; border-bottom: 0; border-bottom: 0; position: relative; font-family: inherit; } .footer-link:before { position: absolute; content: ''; display: inline-block; height: 4px; width: 4px; top: 6px; left: 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .footer-link:hover, .footer-link:focus { color: #66ccff; } .footer-item { padding-left: 0; padding-right: 0; border-bottom: 0; } .footer-item:hover { background-color: transparent; } } /*-- 2.7.1 Site Links --*/ /*-- 2.7.2 Footer Links --*/ ul.footer-links { border-top: 1px solid #58839B; padding: 30px 0 25px; margin: 30px 20px 5px; } ul.footer-links li { text-align: center; } ul.footer-links li a { color: #fff; font-size: 16px; display: inline-block; padding: 5px 0; text-decoration: none; } ul.footer-links li a:hover, ul.footer-links li a:focus { color: #66ccff; } ul.footer-links li a.text-large { font-size: 2em; } @media screen and (min-width: 768px) { ul.footer-links li { float: left; border-right: 1px solid #fff; padding-right: 10px; margin-right: 10px; } ul.footer-links li:last-of-type { margin-right: 0; padding-right: 0; border-right: 0; } ul.footer-links li a { font-size: 14px; padding: 0; } } @media screen and (min-width: 1024px) { ul.footer-links { margin-left: 0; margin-right: 0; } ul.footer-links li a { font-size: 12px; } } /* 2.8 Homepage state selector */ .territories-text { color: #fff; font-size: 26px; font-family: 'VAG Rounded W01 Bold'; font-weight: bold; height: 80px; line-height: 80px; display: none; } .territories-text:after { content: ''; display: inline-block; height: 11px; width: 11px; margin-left: 15px; border-bottom: 6px solid #AAE6FF; border-right: 6px solid #AAE6FF; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .territories-list { background-color: #0799cc; display: none; list-style: none; margin: 0; padding: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .territory-item { border-top: 1px solid #17B1E7; margin: 0 16px; } .territory-link { color: #fff; font-size: 20px; font-family: 'VAG Rounded W01 Bold'; text-decoration: none; display: block; padding: 16px 0 12px 0; border-radius: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .territory-link:hover, .territory-link:focus { text-decoration: none; } .territory-link.active, .territory-link.active:hover, .territory-link.active:focus { color: #16B1E7; background-color: #fff; padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; pointer-events: none; } .js-territories-toggle { position: relative; background-color: #0799cc; padding: 24px 16px 19px 16px; border-radius: 4px; } .js-territories-toggle:after { content: ''; height: 6px; width: 6px; display: inline-block; border-right: 3px solid #fff; border-bottom: 3px solid #fff; float: right; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .js-territories-toggle.territories-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .js-territories-toggle.territories-expanded:after { -webkit-transform: rotate(225deg); transform: rotate(225deg); } @media screen and (min-width: 1024px) { .js-territories-toggle, .js-footer-toggler { display: none; } .territories-container { background-color: #0799cc; } .territories-text { text-align: center; display: inherit; } .territories-text:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); vertical-align: text-top; margin-top: 2px; } .territories-list { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; width: 100%; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; background-color: transparent; margin: 10px 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .territory-item { width: 12.5%; border-top: 0; margin-left: 0; margin-right: 0; border-right: 1px solid #17B1E7; } .territories-list .territory-item:last-of-type { border-right: 0; } .territory-link { padding: 25px 0 20px; margin: 0 12px; border-radius: 8px; text-align: center; -webkit-transition: .1s background-color linear; transition: .1s background-color linear; } .territory-link:hover, .territory-link:focus { background-color: #16B1E7; } .territory-link.external { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .territory-link.external:before { content: ''; background: url(https://www.royallifesaving.com.au/__data/assets/file/0005/17267/external-link-icon.svg) center center; background-size: 16px; height: 16px; width: 16px; display: inline-block; margin-right: 8px; margin-top: -1px; } .territory-link.active, .territory-link.active:hover, .territory-link.active:focus { margin-left: 12px; margin-right: 12px; padding-left: 0; padding-right: 0; } .territories-wrap { margin: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1240px) { .territories-list { margin-left: 10px; width: -webkit-calc(100% - 10px); width: calc(100% - 10px); -webkit-flex-basis: -webkit-calc(100% - 10px); -ms-flex-preferred-size: calc(100% - 10px); flex-basis: calc(100% - 10px); } .territories-text { float: left; } .territories-text:after { margin-top: 0; vertical-align: inherit; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } .padding-vertical-large, .padding-vertical-small { padding-top: 10px; padding-bottom: 10px; } .padding-top-small { padding-bottom: 10px; } .padding-bottom-small { padding-bottom: 10px; } @media screen and (min-width: 768px) { .padding-vertical-large, .padding-vertical-small { padding-top: 15px; padding-bottom: 15px; } .padding-top-small { padding-bottom: 15px; } .padding-bottom-small { padding-bottom: 15px; } } @media screen and (min-width: 1025px) { .padding-vertical-large { padding-top: 65px; padding-bottom: 65px; } .padding-vertical-small { padding-top: 40px; padding-bottom: 40px; } .padding-top-small { padding-bottom: 40px; } .padding-bottom-small { padding-bottom: 40px; } } /* 2.9 Homepage category tiles */ .tiles .category-tile { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10px; text-decoration: none; } .tiles .category-tile img { width: 100%; display: block; } @media screen and (max-width: 768px) { .tiles .category-tile:last-of-type { margin-bottom: 0; } } .tile-heading { display: none; color: #fff; text-transform: uppercase; margin-top: 0; font-size: 26px; margin-bottom: 15px; } .tiles-4 .tile-heading { font-size: 18px; margin-bottom: 10px; } .tile-description { color: #fff; background-color: #003e61; padding: 15px; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .s-landing-modules .tile-description { background-color: rgba(0, 43, 72, 0.85); } .tile-content { font-size: 14px; line-height: 1.5; } .tile-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; position: absolute; bottom: 15px; left: 15px; font-family: 'VAG Rounded W01 Bold'; font-size: 20px; text-transform: uppercase; color: #fff; line-height: 20.5px; height: 41px; z-index: 2; -webkit-transition: .1s opacity linear; transition: .1s opacity linear; } .s-landing-modules .tile-title { font-size: 22px; text-transform: none; letter-spacing: 1px; line-height: 22px; } .tile-image { position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .tile-image:after { -webkit-transition: .15s all linear; transition: .15s all linear; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.45))); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.45) 100%); } .tile-arrow { display: none; } .c-tiles .tile-arrow { position: absolute; background-color: #002b48; border: 2px solid #0799cc; height: 32px; width: 32px; right: 20px; bottom: 20px; display: block; z-index: 2; -webkit-transition: .15s all linear; transition: .15s all linear; } .c-tiles .tile-arrow:after { position: absolute; content: ''; height: 7px; width: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-right: 2px solid #0092D3; border-bottom: 2px solid #0092D3; top: 50%; left: 50%; margin-top: -5px; margin-left: -7px; } @media screen and (min-width: 60em) { .c-tiles .category-tile:hover .tile-arrow, .c-tiles .category-tile:focus .tile-arrow { bottom: auto; top: 20px; } } @media screen and (min-width: 768px) { .tiles-4 .tile-title { font-size: 18px; line-height: 20.5px; } .tiles-4 .s-landing-modules .tile-title { font-size: 22px; line-height: 22px; } .tiles { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .tiles .category-tile { margin-right: 15px; margin-bottom: 0; width: -webkit-calc(33.3% - 10px); width: calc(33.3% - 10px); -webkit-flex-basis: -webkit-calc(33.3% - 10px); -ms-flex-preferred-size: calc(33.3% - 10px); flex-basis: calc(33.3% - 10px); } .tiles .category-tile:last-of-type { margin-right: 0; } .tiles.tiles-4 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tiles.tiles-4 .category-tile { width: -webkit-calc(50% - 8px); width: calc(50% - 8px); -webkit-flex-basis: -webkit-calc(50% - 8px); -ms-flex-preferred-size: calc(50% - 8px); flex-basis: calc(50% - 8px); } .tiles.tiles-4 .category-tile:nth-child(2), .tiles.tiles-4 .category-tile:nth-child(4) { margin-right: 0; } .tiles.tiles-4 .category-tile:nth-child(1), .tiles.tiles-4 .category-tile:nth-child(2) { margin-bottom: 15px; } .s-landing-modules .tiles { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } @media screen and (min-width: 1025px) { .tile-content { font-size: 16px; } .tiles-4 .tile-content { font-size: 14px; } .tile-heading { display: inherit; } .tiles.tiles-4 { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .tiles.tiles-4 .category-tile { width: -webkit-calc(25% - 11px); width: calc(25% - 11px); -webkit-flex-basis: -webkit-calc(25% - 11px); -ms-flex-preferred-size: calc(25% - 11px); flex-basis: calc(25% - 11px); } .tiles.tiles-4 .category-tile:nth-child(2) { margin-right: 15px; } .tiles.tiles-4 .category-tile:nth-child(1), .tiles.tiles-4 .category-tile:nth-child(2) { margin-bottom: 0; } .tile-description { background-color: rgba(0, 62, 97, 0.8); opacity: 0; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; -webkit-transition: .15s opacity linear; transition: .15s opacity linear; overflow-y: hidden; } .tile-title { bottom: 20px; left: 20px; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); font-size: 24px; line-height: 24px; } .s-landing-modules .tile-title { bottom: 25px; } .tile-arrow { position: absolute; background-color: #fff; height: 41px; width: 41px; right: 20px; bottom: 20px; display: block; z-index: 2; -webkit-transition: .15s all linear; transition: .15s all linear; } .tile-arrow:after { position: absolute; content: ''; height: 11px; width: 11px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-right: 5px solid #0092D3; border-bottom: 5px solid #0092D3; top: 50%; left: 50%; margin-top: -8px; margin-left: -11px; } .category-tile:hover .tile-arrow, .category-tile:focus .tile-arrow { background-color: #00233D; } .category-tile:hover .tile-arrow:after, .category-tile:focus .tile-arrow:after { border-right-color: #fff; border-bottom-color: #fff; } .category-tile:hover .tile-description, .category-tile:focus .tile-description { opacity: 1; } .category-tile:hover .tile-title, .category-tile:focus .tile-title { opacity: 0; cursor: default; pointer-events: none; } .category-tile:hover .tile-image:after, .category-tile:focus .tile-image:after { height: 0; opacity: 0; } } @media screen and (min-width: 1025px) and (max-width: 1100px) { .tile-content { padding-right: 15%; font-size: 14px; } } /* 2.9 Homepage social blocks */ .social-blocks-container .social-block { width: 100%; margin-bottom: 10px; background-color: #fff; } .social-blocks-container .social-block:last-of-type { margin-bottom: 0; } .social-block { border: 1px solid #999; border-radius: 5px; } .social-block.facebook { border-color: #426DA3; } .social-block.twitter { border-color: #159BC1; } .social-block.news { border-color: #00405E; } .social-block-heading { color: #fff; font-size: 16px; font-family: 'VAG Rounded W01 Bold'; background-color: #999; line-height: 30px; padding: 10px 15px 10px 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .facebook .social-block-heading { background-color: #426DA3; } .twitter .social-block-heading { background-color: #159BC1; } .news .social-block-heading { background-color: #00405E; } .block-heading-title { line-height: 28px; margin-top: 2px; } .block-heading-title:before { content: ''; display: inline-block; height: 20px; width: 20px; vertical-align: middle; margin-top: -4px; margin-right: 10px; } .facebook .block-heading-title:before { background: url("https://www.royallifesaving.com.au/__data/assets/file/0006/17268/facebook-logo-icon.svg") no-repeat; background-size: 20px; } .twitter .block-heading-title:before { background: url("https://www.royallifesaving.com.au/__data/assets/file/0018/17271/twitter-logo-icon.svg") no-repeat; background-size: 20px; } .news .block-heading-title:before { background: url("https://www.royallifesaving.com.au/__data/assets/file/0007/17269/news-feed-icon.svg") no-repeat; background-size: 20px; } .block-heading-link { color: #fff; text-decoration: none; margin-top: 2px; line-height: 28px; border-radius: 5px; } .block-heading-link:after { content: ''; display: inline-block; height: 6px; width: 6px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); vertical-align: middle; margin-top: -4px; margin-left: 6px; } .block-heading-link:hover, .block-heading-link:focus { text-decoration: underline; } .social-block-content { padding: 15px; text-align: center; } @media screen and (min-width: 1024px) { .social-blocks-container > .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .social-blocks-container .social-block { width: -webkit-calc(33.3% - 15px); width: calc(33.3% - 15px); margin-bottom: 0; margin-right: 19.5px; } .social-blocks-container .social-block:last-of-type { margin-right: 0; } } .news-feed-block { display: block; position: relative; margin-bottom: 15px; } .news-feed-block img { width: 100%; display: block; } .news-feed-block:last-of-type { margin-bottom: 0; } .news-feed-block:after { -webkit-transition: .15s all linear; transition: .15s all linear; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(52%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0.75))); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0.75) 100%); } .news-feed-block-title { position: absolute; bottom: 15px; left: 15px; right: 15px; line-height: 21px; color: #fff; font-family: 'VAG Rounded W01 Bold'; font-size: 17px; z-index: 2; } .programs-container { padding-top: 20px; padding-bottom: 20px; background-color: #B9D7E4; } .programs-container.with-bg { background-repeat: no-repeat; background-position: center center; background-size: cover; } .button-viewmore { display: block; background-color: #003F60; color: #fff; text-decoration: none; text-transform: uppercase; line-height: 1.33; font-family: 'VAG Rounded W01 Bold'; padding: 14px 20px 10px; font-size: 16px; text-align: center; -webkit-transition: background-color .1s linear; transition: background-color .1s linear; } .button-viewmore:hover, .button-viewmore:focus { text-decoration: none; background-color: #00507a; } .videos-wrapper { margin-bottom: 10px; margin-top: 15px; } .videos-wrapper .video-program { margin-bottom: 10px; } .videos-wrapper .video-program:last-of-type { margin-bottom: 0; } .programs-heading { color: #003F60; margin: 0; text-align: center; text-transform: uppercase; font-size: 30px; } @media screen and (min-width: 768px) { .programs-heading { font-size: 38px; } .button-viewmore { padding: 19px 20px 15px; font-size: 20px; width: 260px; margin: 0 auto; } .videos-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 0; padding-top: 35px; padding-bottom: 35px; } .videos-wrapper .video-program { width: -webkit-calc(50% - 9px); width: calc(50% - 9px); -webkit-flex-basis: -webkit-calc(50% - 9px); -ms-flex-preferred-size: calc(50% - 9px); flex-basis: calc(50% - 9px); margin-right: 17.5px; margin-bottom: 0; } .videos-wrapper .video-program:last-of-type { margin-right: 0; } } @media screen and (min-width: 1024px) { .programs-heading { font-size: 42px; } .programs-container { padding-top: 65px; padding-bottom: 65px; } } .preview-box { position: relative; } .preview-box:after { -webkit-transition: .15s all linear; transition: .15s all linear; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.35))); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.35) 100%); } .preview-box .preview-title { color: #fff; text-align: center; font-size: 18px; font-family: 'VAG Rounded W01 Bold'; line-height: 1.33; position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; } .preview-box .image-preview { display: block; width: 100%; height: auto; } .preview-box .play-video-button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } .preview-box .play-video-button:before { content: ''; top: 50%; left: 50%; margin-top: -33px; margin-left: -33px; height: 66px; width: 66px; display: inline-block; border-radius: 50%; background-color: rgba(255, 255, 255, 0.65); border: 2px solid #0099CA; position: absolute; -webkit-transition: all .1s linear; transition: all .1s linear; } .preview-box .play-video-button:after { position: absolute; top: 50%; left: 50%; content: ''; width: 0; height: 0; margin-top: -15px; margin-left: -2px; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #0099CA; -webkit-transition: all .1s linear; transition: all .1s linear; } .preview-box .play-video-button:hover:before, .preview-box .play-video-button:focus:before { background-color: #fff; } .preview-box .play-video-button:hover:before, .preview-box .play-video-button:hover:after, .preview-box .play-video-button:focus:before, .preview-box .play-video-button:focus:after { -webkit-transform: scale(1.1); transform: scale(1.1); } .partners-container { background-color: #888; padding-top: 35px; padding-bottom: 25px; } .partners-container > .wrapper { max-width: 980px; } .partners-container.with-bg { background-repeat: no-repeat; background-position: center center; background-size: cover; } .partners-heading { margin-top: 0; margin-bottom: 20px; font-size: 26px; text-align: center; color: #fff; text-transform: uppercase; } .partners-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .partners-wrapper .partner-box { 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; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: -webkit-calc(50% - 20px); width: calc(50% - 20px); -webkit-flex-basis: -webkit-calc(50% - 20px); -ms-flex-preferred-size: calc(50% - 20px); flex-basis: calc(50% - 20px); padding: 10px; border-radius: 5px; -webkit-transition: .15s background-color linear; transition: .15s background-color linear; } .partners-wrapper .partner-box img { max-width: 100%; height: auto; } .partners-wrapper .partner-box:nth-child(1), .partners-wrapper .partner-box:nth-child(2) { margin-bottom: 10px; } .partners-wrapper .partner-box:hover, .partners-wrapper .partner-box:focus { background-color: rgba(0, 0, 0, 0.15); } _::-moz-svg-foreign-content, :root .partners-wrapper { display: block; } _::-moz-svg-foreign-content, :root .partners-wrapper .partner-box { display: inline-block; text-align: center; } @media screen and (min-width: 768px) { .preview-box .preview-title { font-size: 24px; } .partners-container { padding-top: 45px; padding-bottom: 45px; } .partners-heading { margin-bottom: 30px; font-size: 30px; } } @media screen and (min-width: 1025px) { .partners-wrapper .partner-box { width: -webkit-calc(25% - 30px); width: calc(25% - 30px); -webkit-flex-basis: -webkit-calc(25% - 30px); -ms-flex-preferred-size: calc(25% - 30px); flex-basis: calc(25% - 30px); } .partners-wrapper .partner-box:nth-child(1), .partners-wrapper .partner-box:nth-child(2) { margin-bottom: 0; } .preview-box .play-video-button:before { margin-top: -45px; margin-left: -45px; height: 86px; width: 86px; } .preview-box .play-video-button:after { margin-top: -21.5px; margin-left: -6px; border-width: 21.5px 0 21.5px 22px; } } /* -------------------- 3. Content Elements -------------------- */ /*-- 3.1 Modules --*/ /*-- 3.1.1 Content Blocks --*/ .content-block { position: relative; border-radius: 5px; background: #fff; } .content-block > h1, .content-block h2, .content-block h3 { margin-top: 0; } .content-block > h2, .content-block > a > h2 { position: absolute; top: -20px; left: 18px; margin: 0 18px 0 0; padding: 12px 10px; border-radius: 5px; background: #e6e6e6; color: #006296; text-transform: uppercase; font-size: 1em; z-index: 10; } /*-- 3.1.2 Table of Contents + Featured --*/ .content-block { transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; } .content-block > div { zoom: 1; } div.toc { margin-top: 0 !important; padding: 0 !important; background: none !important; zoom: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.toc .content-block.full-width, div.featured .content-block.full-width { cursor: auto; } .inside #content div.featured .content-block { margin-top: 55px; } .inside #content div.featured .content-block a { padding: 34px 11px 6px; text-align: center; } .inside #content div.featured .content-block img { padding-bottom: 4px; float: none; } .inside #content div.featured .content-block div { margin: 0; clear: both; float: left; width: 100%; text-align: left; } .inside #content div.featured .content-block div strong { color: #58585A; padding: 6px 0 2px; display: block; clear: both; } .inside #content div.featured .content-block span.file-info { padding: 10px 0 4px 20px !important; border-top: 1px dotted #7fb0ca; } .inside #content div.featured .content-block span.link { padding: 10px 4px !important; width: 100%; background: none !important; } .inside #content div.featured .content-block span.link em { font-weight: bold; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 100% 2px transparent; padding-right: 10px; } div.toc .content-block:hover, div.toc .content-block:focus, div.featured .content-block:hover, div.featured .content-block:focus { background-color: #e2f0f5; } div.toc .content-block.full-width:hover, div.toc .content-block.full-width:focus, div.featured .content-block.full-width:hover, div.featured .content-block.full-width:focus { background-color: #fff; } div.toc .content-block:hover img, div.toc .content-block:focus img, div.featured .content-block:hover img, div.featured .content-block:focus img { opacity: 0.8; } #content div.toc .content-block a, #content div.featured .content-block a { display: block; text-decoration: none; zoom: 1; } #content div.toc .content-block.full-width a, #content div.featured .content-block.full-width a { display: inline-block; } #content div.featured .content-block.full-width span.file-info { float: none; } .home div.toc .content-block h2 { color: #1998a3; background: #fff; } #content div.toc .content-block.full-width img { width: 100%; height: auto; } #content div.toc .content-block.block-1 img, #content div.toc .content-block.block-2 img, #content div.toc .content-block.block-3 img { border-radius: 5px; margin-bottom: 10px; } div.toc .content-block div:not(.responsive-youtube) { margin-top: -4px; padding: 18px 15px 12px; } #content div.featured .content-block ul { margin: 0; border-top: 1px dotted #006296; } #content div.featured .content-block ul li { background-position: 95% 0.4em; line-height: 1.6em; padding: 3px 24px 3px 20px; border-bottom: 1px dotted #006296; text-transform: uppercase; } div.toc .content-block div h5 { font-size: 1em; text-transform: uppercase; color: #006296; font-family: 'VAG Rounded W01 Bold'; margin-bottom: 10px; } div.toc .content-block div p, div.featured .content-block div p { margin-top: 0; color: #58585a; } div.toc .content-block span.read-more { display: block; padding: 12px 0 0 0; border-top: 1px dotted #7fb0ca; text-transform: uppercase; } div.toc .content-block span.read-more em { padding-right: 10px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat 100% 0.2em; font-style: normal; } #content div.toc .content-block a > img, #content div.featured .content-block a > img { width: 100%; height: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media screen and (min-width: 768px) { div.toc { margin-left: -15px; margin-right: -15px; } #content div.toc .content-block a, #content div.featured .content-block a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width: 1024px) { #content div.toc .content-block.block-1 img, #content div.toc .content-block.block-2 img, #content div.toc .content-block.block-3 img { margin-bottom: 0; margin-right: 10px; } #content div.toc .content-block.block-1 a, #content div.toc .content-block.block-2 a, #content div.toc .content-block.block-3 a, #content div.featured .content-block.block-1 a, #content div.featured .content-block.block-2 a, #content div.featured .content-block.block-3 a { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } #content div.toc .content-block.block-1 a > img, #content div.toc .content-block.block-2 a > img, #content div.toc .content-block.block-3 a > img, #content div.featured .content-block.block-1 a > img, #content div.featured .content-block.block-2 a > img, #content div.featured .content-block.block-3 a > img { width: auto; border-radius: 5px; } } /*-- 3.1.3 Tabs --*/ .tabs-wrapper .tab-content { background: #fff; border-radius: 5px; overflow: hidden; padding: 10px; clear: both; min-height: 378px; } .js-disabled .tabs-wrapper .tab-content { min-height: 0; } ul#tabs-wrapper { margin: 0; padding: 0; overflow: hidden; background: url(https://www.royallifesaving.com.au/__data/assets/image/0016/17062/sprite-tabs.png) 0 7px no-repeat; } ul#tabs-wrapper li { font-size: 1.3em; text-transform: uppercase; background: none; padding: 0; width: 143px; float: left; text-align: center; margin-left: -2px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0016/17062/sprite-tabs.png) -999em -999em no-repeat; } ul#tabs-wrapper li:first-child { margin: 0; } ul#tabs-wrapper li a { padding: 15px 0 5px; display: block; background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) -999em -999em no-repeat; } ul#tabs-wrapper li a:hover, ul#tabs-wrapper li a:focus { text-decoration: none; } ul#tabs-wrapper li.social, ul#tabs-wrapper li.youtube { text-align: left; } ul#tabs-wrapper li.newsevents:hover { background-position: 1px -109px; } ul#tabs-wrapper li.social:hover { background-position: 1px -109px; } ul#tabs-wrapper li.youtube:hover { background-position: -283px -109px; } ul#tabs-wrapper li.social a { background-position: 81px -3617px; padding: 15px 0 5px 20px; } ul#tabs-wrapper li.youtube a { background-position: 102px -3519px; padding: 15px 0 5px 26px; } ul#tabs-wrapper li.current, ul#tabs-wrapper li.current:hover { background-position: 0 -55px; } .quick-list { width: 223px; float: left; } .quick-list:first-child { width: 223px; float: left; margin-right: 10px; } .quick-list.single { width: 100%; margin: 0; } #content .quick-list h3 { font-size: 1.4em; margin: 12px 0 5px; text-indent: 4px; } #content .quick-list h3 a:hover { text-decoration: underline !important; background-color: transparent; } #content .quick-list ul { margin: 0; } #content .quick-list ul li { padding: 0; background: none; } #content .quick-list ul li a { padding: 16px 2px 10px 72px; display: block; border-top: 1px dotted #96dff6; zoom: 1; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; overflow: hidden; min-height: 78px; } #content .quick-list ul li a.no-thumb { padding: 16px 2px 10px 10px; } #content .quick-list ul li:first-child a { border: none; padding-top: 8px; } #content .quick-list social-widget { width: 213px; height: 326px; } .quick-list a:hover, .quick-list a:focus { background: #E2F0F5; text-decoration: none !important; } .quick-list ul li a img { float: left; margin: 0 0 0 -68px; border-radius: 0; } .quick-list strong, .quick-list em, .quick-list span { display: block; } .quick-list strong { line-height: 1; } .quick-list em { font-style: normal; line-height: 1.5; } .quick-list span { color: #58585a; line-height: 1.4; } #content .quick-list a.more { padding: 0 10px 0 72px; margin: 4px 0; } #twitter-widget-0 { margin: 5px 0 0; } #facebook-widget { margin: 6px 0 0; width: 213px; height: 327px; } div.toc .content-block.full-width > h2, div.featured-home .content-block > h2 { font-size: 1.5em; padding: 16px; } /*-- 3.1.4 Videos --*/ .js-enabled .video-wrapper { display: block !important; } .video-wrapper { height: 420px; width: 560px; margin: 0 0 20px 0; display: none; } .js-enabled #content #playerContainer { height: 220px; padding: 6px; width: 444px; background: url(https://www.royallifesaving.com.au/__data/assets/image/0015/17052/loading.gif) center no-repeat; } #content #playerContainer, #content #videos { padding: 6px; } #content ul.videos li { float: left; width: 80px; margin-left: -2px; cursor: pointer; padding: 5px; border-radius: 5px; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } #content ul.videos li .clip-url { position: absolute; left: -999em; } #content ul.videos li:hover { background: #E2F0F5; } #content ul.videos li:first-child { margin: 0; } #content ul.videos li span { font-size: 0.9em; color: #000; } #content ul.videos li span.video-helper { position: absolute; left: -999em; } /*-- 3.1.5 Feature Blocks --*/ div.toc .block-1 a, div.toc .block-2 a, div.toc .block-3 a, div.featured .content-block a { padding: 36px 18px 16px; } div.toc .block-1 h2, div.toc .block-2 h2, div.toc .block-3 h2, div.featured .contnet-block h2 { top: -18px; } div.toc .block-1 img, div.toc .block-2 img, div.toc .block-3 img, div.featured .content-block img { width: 100%; height: auto; } /* div.toc .content-block.full-width img{ float: none; width:100%; height:auto; margin-bottom:1em; } div.toc .content-block.full-width div{ margin-left: 0px; }*/ div.toc .block-1 div, div.toc .block-2 div, div.toc .block-3 div, div.featured .content-block div { margin-top: 0; } @media screen and (min-width: 768px) { div.toc .block-1 img, div.toc .block-2 img, div.toc .block-3 img, div.featured .content-block img { margin-right: 15px; width: auto; border-radius: 5px; } div.toc .content-block, div.featured .content-block { margin-left: 15px; margin-right: 15px; margin-top: 35px; cursor: pointer; } } /* First Block */ div.toc .block-1, div.toc .block-2, div.toc .block-3, div.toc .content-block, div.featured .content-block { margin-top: 35px; width: 100%; max-width: 1350px; } div.toc .block-1 div { padding: 0; } /* Second & Third Block */ div.toc .block-2 div, div.toc .block-3 div, div.featured .content-block div { padding: 0; } @media screen and (min-width: 768px) { div.toc .block-2, div.toc .block-3, div.toc .content-block, div.featured .content-block { margin-top: 34px; width: -webkit-calc(50% - 30px); width: calc(50% - 30px); } div.toc .block-1 { width: 100%; } } @media screen and (min-width: 1024px) { div.toc .content-block, div.featured .content-block { width: -webkit-calc(25% - 30px); width: calc(25% - 30px); } div.toc .block-2, div.toc .block-3 { margin-top: 34px; width: -webkit-calc(50% - 30px); width: calc(50% - 30px); } div.toc .block-1 { width: 100%; } } /*-- 3.1.6 In-Page Features --*/ div.in-page-features { margin-top: 0 !important; padding: 0 !important; background: none !important; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } div.in-page-features .content-block { width: 100%; margin-top: 50px; box-sizing: border-box; } div.in-page-features .content-block:hover, div.in-page-features .content-block:focus { background-color: #e2f0f5; } div.in-page-features .content-block:hover img, div.in-page-features .content-block:focus img { opacity: 0.8; } div.in-page-features .content-block h2 { top: -22px; background-color: #628011; color: #fff; } .training div.in-page-features .content-block h2 { background: #f99d1c; color: #013652; } div.in-page-features .content-block > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 29px 16px 16px; text-decoration: none; } div.in-page-features .content-block img { border-radius: 5px; margin-right: 10px; } div.in-page-features .content-block div p { margin-top: 0; margin-bottom: 0; color: #58585a; } div.featured { padding: 0 !important; background: none !important; border-radius: 0 !important; } @media screen and (min-width: 768px) { div.featured { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } div.in-page-features { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-left: -15px; margin-right: -15px; } div.in-page-features .content-block { width: -webkit-calc(30% - 30px); width: calc(30% - 30px); margin-left: 15px; margin-right: 15px; } div.in-page-features .content-block > a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } div.in-page-features .content-block img { margin-right: 0; margin-bottom: 10px; } } @media screen and (min-width: 1024px) { div.in-page-features .content-block > a { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } div.in-page-features .content-block img { margin-right: 10px; margin-bottom: 0; } } /* Listing Feature */ div.in-page-features .content-block.listing { padding: 22px 16px 7px; } div.in-page-features .content-block.listing:hover, div.in-page-features .content-block.listing:focus { background: #fff; } div.in-page-features .content-block.listing div { float: none; margin: 0; width: 100%; } #content div.in-page-features .content-block.listing ul { margin: 0; } #content div.in-page-features .content-block div ul li { padding: 0; border-top: 1px dotted #006296; background: none; } #content div.in-page-features .content-block div ul li a { display: block; padding: 7px 0 7px 7px; text-transform: uppercase; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 98% 50%; } #content div.in-page-features .content-block div ul li a:hover, #content div.in-page-features .content-block div ul li a:focus { background-color: #e2f0f5; } #content div.in-page-features .content-block div ul li:first-child { border: none; } @media screen and (min-width: 768px) { div.in-page-features .content-block.listing { width: -webkit-calc(40% - 30px); width: calc(40% - 30px); } } /*-- 3.1.7 Section Pages Module --*/ div.section-pages { margin: 44px 0 0 0; padding: 51px 26px 33px; } div.section-pages h2 { position: absolute; top: -18px; left: 22px; padding: 12px; border-radius: 5px; background: #628011; color: #fff; font-size: 1em; } #content div.section-pages ul { margin: 0; } @media screen and (min-width: 1024px) { #content div.section-pages ul li { float: left; width: 33.3%; background-position: 0 0.8em; } } #content div.section-pages ul li a { display: block; padding: 5px 0; } /* add-info */ div.add-info { zoom: 1; } div.add-info .content-block { border-radius: 5px; background: #fff; float: left; margin-top: 45px; } div.add-info .content-block > div { float: left; width: 380px; position: relative; padding: 45px 18px 25px 46px; } div.add-info .content-block > div:first-child { width: 472px; } div.add-info .content-block > div h2 { background: #628011; border-radius: 5px; color: #fff; font-size: 1em; left: 18px; margin: 0 18px 0 0; padding: 12px; position: absolute; text-transform: uppercase; top: -18px; z-index: 10; } /*-- 3.1.8 National Partners --*/ .add-info div a { display: block; text-indent: -999em; background: url(https://www.royallifesaving.com.au/__data/assets/image/0018/17055/sprite-logos.png) no-repeat 0 0; float: left; margin-left: 15px; } .add-info div .kp-logo { width: 63px; height: 47px; background-position: 0 0; margin: 0; } .add-info div .ut-logo { width: 71px; height: 42px; background-position: -84px -8px; } .add-info div .pw-logo { width: 95px; height: 42px; background-position: -178px 0; } .add-info div .ils-logo { width: 48px; height: 48px; background-position: -410px 0; } .add-info div .as-logo { width: 113px; height: 49px; background-position: -176px 0; } .add-info div .ag-logo { width: 92px; height: 49px; background-position: -531px -1px; margin-left: 5px; } .add-info div .rls-logo { width: 36px; height: 49px; background-position: -477px 0; } .add-info div .kp-logo:hover, .add-info div .kp-logo:focus { background-position: 0 100%; } .add-info div .ut-logo:hover, .add-info div .ut-logo:focus { background-position: -84px -78px; } .add-info div .pw-logo:hover, .add-info div .pw-logo:focus { background-position: -178px -90px; } .add-info div .ils-logo:hover, .add-info div .ils-logo:focus { background-position: -410px -80px; } .add-info div .as-logo:hover, .add-info div .as-logo:focus { background-position: -176px -83px; } .add-info div .ag-logo:hover, .add-info div .ag-logo:focus { background-position: -531px -82px; } .add-info div .rls-logo:hover, .add-info div .rls-logo:focus { background-position: -477px -80px; } /*-- 3.1.9 Carousel --*/ #content .scrollable { height: 70px; overflow: hidden; padding: 0; position: relative; width: 274px; margin: 0 52px; } #content .scrollable ul { height: 70px; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 2000em; } #content .carousel ul { margin: 0; } #content .scrollable ul li { float: left; margin: 0; padding: 0; position: relative; background: none; width: 275px; } .js-disabled #content .carousel { height: auto; } .js-disabled #content .carousel ul { width: auto; height: auto; position: static; } .js-disabled #content .carousel ul li { float: none; width: 100%; border-bottom: 1px dotted #96DFF6; } .js-disabled #content .carousel ul li a { float: none; display: block; padding: 8px; } .js-disabled #content .carousel ul li a.has-image { padding: 8px 8px 8px 110px; } #content .carousel ul li a { text-indent: 0; display: inline-block; margin: 0; background: none; padding: 6px 6px 6px 10px; color: #58585a; border-radius: 5px; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } #content .carousel ul li .thumb-wrap { float: left; margin: 0 0 0 -105px; width: 100px; text-align: center; } #content .carousel ul li a.has-image { padding: 6px 6px 6px 110px; } #content .carousel ul li a strong { display: block; } #content .carousel ul li a:hover { background: #E2F0F5; text-decoration: none !important; } #content .carousel a.next, #content .carousel a.prev { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) -149px -2904px no-repeat; border: medium none; cursor: pointer; display: block; height: 32px; position: absolute; text-indent: -9999px; top: 45%; width: 32px; z-index: 10; } #content .carousel a.next, #content .carousel a.next.disabled:hover, #content .carousel a.next.disabled:focus { background-position: -180px -2936px; right: 20px; } #content .carousel a.next:hover, #content .carousel a.next:focus { background-position: -180px -2904px; } #content .carousel a.prev, #content .carousel a.prev.disabled:hover, #content .carousel a.prev.disabled:focus { background-position: -147px -2904px; left: 0; } #content .carousel a.prev:hover, #content .carousel a.prev:focus { background-position: -147px -2936px; left: 0; } #content .carousel a.prev.disabled, #content .carousel a.prev.disabled:hover { background-position: -83px -2937px; cursor: auto; } #content .carousel a.next.disabled, #content .carousel a.next.disabled:hover { background-position: -117px -2936px; cursor: auto; } /*-- 3.1.10 Document Listing Module --*/ .doc-listing { margin: 44px 0 0 0; padding: 51px 26px 33px; } fieldset.doc-listing { margin: 0; } .default-form.content-block fieldset.doc-listing { padding: 0; } .default-form.content-block fieldset.pagination { clear: both; padding: 15px 0; } .default-form.content-block fieldset.pagination ul { float: right; } .media-list .doc-listing { width: auto; padding: 0; margin: 15px 0; } .doc-listing h2 { background: #628011; color: #fff; } #content .doc-listing ul { margin: 0; } #content .doc-listing ul li { background: none; padding: 0; border-bottom: 1px dotted #b8b8b8; zoom: 1; } #content .doc-listing ul li:first-child { border-top: 1px dotted #b8b8b8; } #content .default-form .doc-listing ul li:first-child { border-top: none; } .doc-listing ul li a { display: block; padding: 22px 10px; margin: 0 -10px; border-radius: 10px; zoom: 1; } .doc-listing ul li a.has-image { padding: 22px 10px; } .doc-listing ul li a.has-image img { border-radius: 5px; margin-bottom: 10px; } .media-list .inner-right a > div > img { border-radius: 5px; max-width: 140px; } #content .doc-listing ul li a:hover, #content .doc-listing ul li a:focus, .media-list .inner-right .content-block > a:hover, .media-list .inner-right .content-block > a:focus { background-color: #e2f0f5; text-decoration: none; } .media-list .inner-right .content-block { margin-bottom: 30px; } .media-list .doc-listing ul li p { margin: 0.4em 0 0.7em; color: #58585A; } .doc-listing dl { display: block; color: #58585a; } .doc-listing dl dt { width: auto; padding: 2px 4px 0 0; clear: none; } .doc-listing dl dd { margin: 0; padding: 2px 0 0; } .doc-listing dl dt.normal-weight, .doc-listing dl dt:first-child { font-weight: normal; } .doc-listing dl dd.bold-weight { font-weight: bold; } #content div.featured .content-block span.file-info { display: block; position: relative; font-size: 1em !important; padding: 2px 0 4px 27px !important; margin: 10px 0 0; } #content div.featured .content-block span.file-info:before, .doc-listing ul li a span:before { content: ''; position: absolute; top: 50%; left: 0; margin-top: -8px; background-image: url(https://www.royallifesaving.com.au/__data/assets/image/0017/17054/sprite-doc-icons.png); background-repeat: no-repeat; display: inline-block; height: 16px; width: 16px; } #content div.featured .content-block span.file-info.pdf, #content div.featured .content-block span.file-info.doc, #content div.featured .content-block span.file-info.xls, #content div.featured .content-block span.file-info.file, .doc-listing ul li.pdf a span, .doc-listing ul li.doc a span, .doc-listing ul li.xls a span, .doc-listing ul li.file a span { position: relative; padding: 0 0 4px 20px; } #content div.featured .content-block span.file-info.pdf:before, .doc-listing ul li.pdf a span:before { background-position: -46px 0; } #content div.featured .content-block span.file-info.doc:before, .doc-listing ul li.doc a span:before { background-position: -33px -16px; } #content div.featured .content-block span.file-info.xls:before, .doc-listing ul li.xls a span:before { background-position: -19px -32px; } #content div.featured .content-block span.file-info.file:before, .doc-listing ul li.file a span:before { background-position: 0 -50px; height: 17px; } #content div.featured .content-block span.file-info span, .doc-listing ul li a span em, .media-list .inner-right a span em { font-style: normal; text-transform: uppercase; } .media-list .inner-right a span em { font-size: 1.3em; margin: 14px 0 10px; display: block; color: #006296; } #content div.featured .content-block span.file-info em { font-size: 1em; color: #006296; font-style: normal; text-transform: uppercase; font-weight: bold; } #content fieldset.doc-listing ul li { border-bottom: 1px dotted #b8b8b8; } #content fieldset.pagination { border-bottom: 1px dotted #b8b8b8; border-top: 1px solid transparent; } #content fieldset.pagination.bottom { border-bottom: 1px solid transparent; } .media-list .doc-listing dl { padding: 5px 0; } .media-list .doc-listing dl dt, .media-list .inner-right dl dt, .media-list .details-page dl dt { text-indent: -999em; width: 16px; height: 18px; } .media-list .inner-right dl dt, .media-list .details-page dl dt { padding: 0 4px 0 0; } .media-list .inner-right dl dd, .media-list .details-page dl dd { padding: 0; margin: 0; line-height: 1.6; } .media-list .doc-listing dl dt, .media-list .doc-listing dl dd { padding-top: 0; } @media screen and (min-width: 768px) { .doc-listing ul li a.has-image { padding: 22px 10px 22px 178px; min-height: 85px; overflow: hidden; } .doc-listing ul li a.has-image img { float: left; margin-left: -170px; max-width: 140px; margin-bottom: 0; } } /*-- 3.1.11 Accordion Module --*/ div.accordion { overflow: hidden; margin-top: 44px; border-radius: 5px; } .contact-us div.accordion { width: 100%; margin: 0 0 25px 0; } .contact-us div.accordion div h3 { font-size: 1.2em; margin: 0.2em 0 1.4em; } .contact-us div.accordion > div > div > img, div.accordion .gmaps { display: block; margin-bottom: 10px; } @media screen and (min-width: 585px) { .contact-us div.accordion > div > div > img, div.accordion .gmaps { margin-bottom: 0; float: right; } } .contact-us div.accordion > div > div { overflow: hidden; } .contact-us div.accordion .gmaps img { padding: 0; } div.accordion .gmaps img { padding-left: 10px; padding-bottom: 10px; } div.accordion h2 { margin: 0; padding: 19px 92px 16px 28px; border-top: 1px solid #eee; color: #5e5e5e; text-transform: uppercase; font-size: 1.333333333em; /* 18px */ cursor: pointer; background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat right -4600px #d9d9d9; } div.accordion img { display: block; } div.accordion img.align-right { float: none; width: 100%; height: auto; margin: 0 0 15px; } div.accordion > h2:first-child { border: none; } .js-enabled div.accordion h2:hover { background-color: #5f5f5f; color: #fff; } div.accordion h2.selected { background-color: #055b93 !important; background-position: right -4240px; color: #fff; } .js-disabled div.accordion h2 { background: #055b93; color: #fff; } div.accordion div h3, div.accordion div h4 { margin: 0 0 8px; text-transform: uppercase; font-size: 1.571428571em; /* 14px */ } #content div.accordion div dl { margin: 15px 0; } div.accordion > div > div { padding: 20px 15px 15px; border-top: 1px dotted #b8b8b8; background: #fff; } div.accordion > div > img { display: block; } div.accordion > div > div:first-child { border: none; } @media screen and (min-width: 565px) { div.accordion img.align-right { float: right; width: auto; height: auto; margin: 0 0 10px 20px; } } @media screen and (min-width: 1024px) { div.accordion > div > div { padding: 32px 20px 32px 28px; } .contact-us div.accordion { margin-bottom: 0; } } /*-- 3.1.12 Banner + Feature --*/ #branding-ribbon { position: relative; overflow: hidden; } #branding-ribbon h1 { position: absolute; left: 25px; top: 25px; color: #fff; margin-top: 0; margin-bottom: 0; font-size: 2.8em; } #branding-ribbon > img { display: block; min-height: 220px; margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #branding-ribbon .banner-info { background-color: rgba(0, 0, 0, 0.75); color: #fff; padding: 15px; border-radius: 10px; position: absolute; right: 25px; left: 25px; bottom: 25px; } #branding-ribbon .banner-info span { line-height: 1.5; } #branding-ribbon .banner-info h2 { color: #fff; margin-top: 0; margin-bottom: 10px; } #banner-container { position: relative; padding: 0 !important; background: none !important; overflow: hidden; margin-bottom: 10px; } .js-disabled #banner-container, .js-disabled #banner { height: auto; } #banner-container.loading { background: url(https://www.royallifesaving.com.au/__data/assets/image/0015/17052/loading.gif) center no-repeat !important; } #banner-container p { position: absolute; top: 0; font-size: 2.4em; text-align: center; font-style: italics; color: #ccc; } #banner { position: relative; color: #fff; } .js-disabled .banners { position: static; } .banners { position: absolute; left: 0; right: 0; } .banners > img { height: 450px; display: block; margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .banners .wrapper { position: absolute; width: -webkit-calc(100% - 30px); width: calc(100% - 30px); left: 0; right: 0; bottom: 60px; top: 15px; } .s-landing-modules .banners > img { height: 390px; width: auto; } @media screen and (min-width: 1025px) { .s-landing-modules .banners > img { height: 602px; } } @media screen and (min-width: 1800px) { .s-landing-modules .banners > img { height: auto; width: 100%; } } @media screen and (min-width: 768px) { #branding-ribbon h1 { left: 45px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #branding-ribbon .banner-info { width: 240px; padding-left: 30px; right: 45px; left: auto; bottom: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #branding-ribbon .banner-info > div { background: url(https://www.royallifesaving.com.au/__data/assets/image/0014/17033/bg-banner-info-point-l.png) no-repeat scroll left center transparent; margin: 0 0 0 -45px; padding: 0 0 0 30px; } #branding-ribbon > img { width: 100%; height: auto; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transform: none; transform: none; margin-left: 0; } .s-landing-modules #branding-ribbon { width: auto; } } @media screen and (min-width: 995px) { #branding-ribbon > img { width: 100%; height: auto; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transform: none; transform: none; margin-left: 0; } } #banner-container .banner-info { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: -webkit-calc(100% - 14px); width: calc(100% - 14px); max-width: 450px; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; } #banner-container .banner-info.v-center { top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #banner-container .banner-info.v-top { top: 15px; } #banner-container .banner-info.v-bottom { bottom: 0; } #banner-container .banner-info h2 { color: #fff; font-size: 28px; line-height: 1.25; margin: 0 0 10px; } #banner-container .banner-info span { line-height: 20px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 72px; overflow: hidden; } #banner-container .banner-info img { width: 100%; max-width: 100%; height: auto; display: block; margin-bottom: 15px; } #banner-container .banner-info .button { margin: 0; padding-top: 20px; } #banner-container .banner-info .button a { background: #0198CF !important; border: 0; display: block; border-radius: 0; padding-top: 12px; padding-bottom: 10px; color: #fff !important; font-size: 16px; font-family: 'VAG Rounded W01 Light'; text-decoration: none; -webkit-transition: background .1s linear; transition: background .1s linear; } #banner-container .banner-info .button a:hover, #banner-container .banner-info .button a:focus { border: 0 !important; background: #018dc0 !important; } .s-landing-modules #banner-container { height: 390px !important; } .s-landing-modules #banner-container .banner-info { max-width: 420px; z-index: 13; background-color: transparent; } @media screen and (min-width: 480px) { .s-landing-modules #banner-container .banner-info h2 { font-size: 44px; line-height: 45px; } } .s-landing-modules #banner-container .banner-info span { font-size: 18px; line-height: 25px; } .s-landing-modules #banner-container .banner-info .button a { background-color: #0799cc !important; background-image: none; display: inline-block; padding-top: 19px; padding-bottom: 17px; color: #fff; font-size: 18px; letter-spacing: 2px; } .s-landing-modules #banner-container .banner-info .button a:hover, .s-landing-modules #banner-container .banner-info .button a:focus { background: #068ebd !important; } @media screen and (min-width: 420px) { #banner-container .banner-info.v-top { top: 35px; } #banner-container .banner-info h2 { font-size: 26px; } #banner-container .banner-info span { line-height: 26px; font-size: 20px; } #banner-container .banner-info img { width: auto; } } @media screen and (min-width: 680px) { #banner-container .banner-info { left: 0; width: auto; -webkit-transform: translateX(0); transform: translateX(0); } #banner-container .banner-info.v-center { top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } #banner-container .banner-info .button a { display: inline-block; } } @media screen and (min-width: 1025px) { #banner-container .banner-info { left: 15px; padding: 15px; border-radius: 10px; } #banner-container .banner-info h2 { font-size: 32px; } #banner-container .banner-info span { font-size: 18px; } #banner-container .banner-info .button a { padding-top: 17px; padding-bottom: 14px; } .s-landing-modules #banner-container { height: 602px !important; } .s-landing-modules #banner-container .banner-info { left: 70px; } .s-landing-modules #banner-container .banner-info h2 { font-size: 64px; line-height: 70px; } .s-landing-modules #banner-container .banner-info span { line-height: 25px; } .s-landing-modules #banner-container .banner-info .button a { font-size: 18px; } } @media screen and (min-width: 1380px) { .banners .wrapper { top: 0; bottom: 50px; } .banners > img { width: 100%; height: auto; } .s-landing-modules .banners > img { width: auto; } #banner-container .banner-info.v-bottom { bottom: 50px; } } @media screen and (min-width: 1600px) { #banner-container .banner-info { max-width: 500px; } #banner-container .banner-info h2 { font-size: 38px; } #banner-container .banner-info span { font-size: 22px; line-height: 28px; } } #banner-nav { white-space: nowrap; bottom: 15px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; z-index: 50; text-align: right; } #banner-nav > a { display: inline-block; overflow: hidden; height: 8px; width: 8px; cursor: pointer; margin-right: 10px; border-radius: 50%; background-color: #0799cc; box-shadow: none; overflow: initial; } #banner-nav > a:last-of-type { margin-right: 0; } #banner-nav > a.active, #banner-nav > a.active:hover, #banner-nav > a.active:focus { background-color: white; } #banner-nav > a:hover, #banner-nav > a:focus { background-color: #ebebeb; } #banner-nav { bottom: 30px; } @media screen and (min-width: 1025px) { #banner-nav { bottom: 60px; } } #banner-nav > a { background-color: #0799cc; height: 8px; width: 8px; box-shadow: none; overflow: initial; } #banner-nav > a.active, #banner-nav > a.active:hover, #banner-nav > a.active:focus { background-color: #fff !important; margin: 0 23px 0 15px; } #banner-nav > a.active::before, #banner-nav > a.active:hover::before, #banner-nav > a.active:focus::before { background-color: #002b48; border: 1px solid #0799cc; border-radius: 50%; content: ''; display: block; height: 30px; margin-left: -12px; margin-top: -12px; position: absolute; width: 30px; z-index: -1; } @media screen and (min-width: 1025px) { #banner-nav > a.active::before, #banner-nav > a.active:hover::before, #banner-nav > a.active:focus::before { background-color: transparent; } } .training #banner-nav a.active { background-color: #FC9C09; } #banner-control { display: none; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; z-index: 50; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 55px; } #banner-control .banner-navigation { color: #fff; font-size: 18px; font-family: 'VAG Rounded W01 Light'; margin-left: 20px; margin-right: 20px; background-color: rgba(0, 0, 0, 0.55); padding: 6px 10px 4px 10px; border-radius: 4px; } #banner-control .arrow-previous, #banner-control .arrow-next { position: relative; display: inline-block; height: 24px; width: 14px; cursor: pointer; } #banner-control .arrow-previous:after, #banner-control .arrow-previous:before, #banner-control .arrow-next:after, #banner-control .arrow-next:before { position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 14px; border-color: transparent transparent transparent rgba(0, 0, 0, 0.55); } #banner-control .arrow-previous:after, #banner-control .arrow-next:after { border-width: 7px 0 7px 8px; border-color: transparent transparent transparent #fff; top: 5px; left: 2px; } #banner-control .arrow-previous:hover:after, #banner-control .arrow-previous:focus:after, #banner-control .arrow-next:hover:after, #banner-control .arrow-next:focus:after { border-color: transparent transparent transparent #0799cc; } #banner-control .arrow-previous:before { border-width: 12px 14px 12px 0; border-color: transparent rgba(0, 0, 0, 0.55) transparent transparent; } #banner-control .arrow-previous:after { left: 4px; border-width: 7px 8px 7px 0; border-color: transparent #ffffff transparent transparent; } #banner-control .arrow-previous:hover:after, #banner-control .arrow-previous:focus:after { border-color: transparent #0799cc transparent transparent; } #branding-ribbon-wrapper.displaying-banner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } #branding-ribbon-wrapper.no-banner { display: none !important; } @media screen and (min-width: 1024px) { #banner-container { margin-bottom: 0; } } @media screen and (min-width: 1180px) { #banner-control { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } /*-- 3.1.13 Info Boxes --*/ .info-boxes { border-top-right-radius: 10px; border-top-left-radius: 10px; background: #fff; float: left; position: relative; } .info-boxes p { color: #58585a; margin: 0; } .info-boxes > a:first-child { border-color: transparent; } .info-boxes > a:hover { background: #E2F0F5; text-decoration: none !important; } .info-boxes .button { margin: 15px 0 10px; } .info-boxes > a, .info-boxes > div { float: left; width: 214px; border-left: 1px dotted #2dbfee; padding: 0 15px 5px; background: transparent; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } .info-boxes.total-3 > a, .info-boxes.total-3 > div { width: 295px; } .info-boxes a h2 { padding: 24px 0 24px 72px; line-height: 1; text-transform: uppercase; font-size: 1.8em; margin: -5px 0 5px; position: relative; zoom: 1; } .info-boxes a div { padding: 0 10px 10px; } .info-boxes > div { color: #5151c6; padding: 0 30px 5px; width: 184px; } .info-boxes div h2 { line-height: 1; color: #5151c6; text-transform: uppercase; font-size: 1.8em; margin: 25px 0 5px; } .info-boxes div h2 span { font-size: 1.4em; } .info-boxes .training-icon { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -3037px; } .info-boxes .safety-icon { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -3227px; } .info-boxes .resources-icon { background: url(https://www.royallifesaving.com.au/__data/assets/image/0019/17056/sprite-main.png) no-repeat 0 -3417px; } /*-- 3.2 Home Page --*/ .home #breadcrumb-wrapper { display: none; } /*-- 3.2.1 Featured Home --*/ div.featured-home { margin-left: -28px; zoom: 1; clear: both; } div.toc .content-block.full-width, div.featured-home .content-block, div.featured-home .tabs-wrapper { margin-top: 30px; padding: 60px 18px 12px; box-sizing: border-box; } @media screen and (min-width: 768px) { div.toc .content-block.full-width { width: -webkit-calc(50% - 30.5px); width: calc(50% - 30.5px); } } div.featured-home .tabs-wrapper { padding: 0; margin-top: 17px; } div.toc .content-block.full-width h3, div.featured-home .content-block h3 { font-size: 1.35em; margin: 20px 0 8px; } div.toc .content-block.full-width p, div.featured-home .content-block p { margin: 5px 0 10px; } div.toc .content-block.full-width a p { color: #58585a; } /*-- 3.2 Landing Page --*/ .landing #content-main > h1 { margin: 0 0 0 18px; } .landing #content-main > div { border-radius: 5px; background: #fff; padding: 15px; margin-top: 28px; zoom: 1; } .landing #content-main > div:first-child { margin-top: 0; min-height: 300px; } @media screen and (min-width: 768px) { .landing #content-main > div { padding: 24px 30px; } } /*-- 3.2.1 Contact Page --*/ .contact-us .content-block { padding: 25px 25px 10px; margin-bottom: 25px; } .contact-us .content-block > h2 { background: none; border: none; font-size: 2em; position: static; text-transform: none; padding: 0; margin: 0 0 20px 0; } .contact-us .default-form input[type="text"], .contact-us .default-form textarea, .contact-us .default-form select { width: 100%; box-sizing: border-box; } .contact-us .default-form .controls { width: 243px; } .contact-us .default-form label { width: 100%; display: block; margin: 0 0 5px 0; float: none; } .contact-us .default-form label > span { display: inline-block; } .contact-us #content .default-form fieldset > div { width: 100%; padding: 8px 0; float: none; } .contact-us #content .default-form fieldset > .errors { width: 100%; padding: 0; } .contact-us #content .default-form fieldset > .errors ul { margin: 0 0 20px; } .contact-us #content .default-form { padding-top: 0; } .contact-us #content .default-form input[type="submit"] { width: 100%; } @media screen and (min-width: 1024px) { .contact-us .inner-left { width: -webkit-calc(100% - 418px); width: calc(100% - 418px); margin-right: 25px; float: left; } .contact-us .inner-right { width: 393px; float: left; } .contact-us #content .default-form { max-width: none; } .contact-us .default-form input[type="text"], .contact-us .default-form textarea, .contact-us .default-form select { float: right; width: 250px; } .contact-us .default-form label { width: 88px; display: inline-block; margin: 13px 0 0 0; float: left; } .contact-us #content .default-form input[type="submit"] { width: auto; } } /*-- 3.2.2 Media List --*/ .media-list .inner-left .content-block { padding: 25px 25px 10px; } .media-list .inner-left .content-block > h2 { background: none; border: none; font-size: 2em; position: static; text-transform: none; padding: 0; margin: 20px 0; } .media-list .inner-left { width: 100%; padding: 0 !important; } .media-list .inner-right { width: 100%; padding: 0 !important; margin-top: 20px !important; background: none !important; } @media screen and (min-width: 768px) { .media-list .inner-left { width: -webkit-calc(100% - 225px); width: calc(100% - 225px); margin-right: 25px; float: left; } .media-list .inner-right { margin-top: 12px !important; width: 200px; float: left; } } .media-list .inner-right .content-block div { padding: 32px 15px 12px; color: #58585A; } .media-list .inner-right .content-block > a { display: block; text-decoration: none !important; cursor: pointer; } .media-list #content .inner-right .content-block div ul { margin: 10px 0 4px 5px; } .media-list #content .inner-right .content-block div ul li { padding: 0 0 0 16px; } /*-- 3.2.3 Facts and Figures --*/ .inside #content .default-form.content-block { margin-top: 50px; } #content .content-block.aux-block { width: 240px; float: left; margin-left: 28px; padding: 18px 20px 12px; } /*-- 3.2.4 Resources --*/ .resources #content .default-form { padding: 14px 12px 0 20px; } .resources #content .content-block-container { padding: 0; background: none; margin: 0; } .resources #content .content-block.listing { padding: 16px 14px 0; margin-top: 28px; } .resources #content .content-block.listing h2 { position: static; background: none; font-size: 1.4em; padding: 0 0 10px; margin: 0; } .resources #content .content-block.listing ul { padding: 0; margin: 0 -14px; text-transform: uppercase; border-top: 1px dotted #006296; } .resources #content .content-block.listing ul li:first-child { border: none; } .resources #content .content-block.listing ul li { border-top: 1px dotted #006296; padding: 0; background: none; } .resources #content .content-block.listing ul li a { padding: 4px 10px 4px 14px; display: block; background: url(https://www.royallifesaving.com.au/__data/assets/image/0012/17040/bg-blue-bullet.png) no-repeat scroll 95% 10px transparent; zoom: 1; } .resources #content .content-block.listing ul li:hover, .resources #content .content-block.listing ul li:focus { background: #E2F0F5; } @media screen and (min-width: 768px) { .resources .content-block { float: left; width: -webkit-calc(100% - 330px); width: calc(100% - 330px); } .resources #content .default-form { float: right; width: 220px; margin-top: -6px; } .resources #content .content-block.listing { float: right; clear: right; width: 223px; } .resources #content .content-block-container { float: right; } .resources #content .content-block.listing ul { width: 250px; } } /*-- 3.2.5 News --*/ #content .details-page > img { margin: 0 0 20px 20px; max-width: 340px; } @media screen and (min-width: 768px) { #content .details-page > img { float: right; } } /* 3.4 Inner Page */ /*-- 3.4.1 Training pages - course search form --*/ #month-select > select { width: 70px !important; } #month-select .alert-msg { float: right; margin-left: 0; margin-top: 0; } .find-scheduled-course-form input[type="text"] { border-radius: 0 0 0 0; margin-right: 10px; padding: 2px 5px; width: 168px; float: none !important; } .find-scheduled-course-form img.ui-datepicker-trigger { border-radius: 0 0 0 0 !important; width: 12px !important; height: 11px !important; cursor: pointer; } /* -------------------- 4. Fonts -------------------- */ /* * font-family:'FrutigerLTW01-45Light'; * font-family:'Museo Sans W01 500'; * font-family:'VAG Rounded W01 Bold'; * font-family:'VAG Rounded W01 Light'; * */ /*-- 4.1 Explicit Custom Font Targets --*/ /* 4.1.1 Active Fonts */ .mti-repaint h1, .mti-repaint h2, .mti-repaint h4, .mti-repaint .button a, .mti-repaint .pagination ul li a, .mti-repaint #content input[type="submit"], .mti-repaint #content input[type="reset"], .mti-repaint .login input[type="submit"], .mti-repaint .doc-listing ul li a span em, .mti-repaint .media-list .inner-right a span em, .mti-repaint form.site-search label, .mti-repaint .global-links li.login > div form legend, .mti-repaint .contact-us div.accordion div h3, .mti-repaint div.featured-home .content-block h3, .mti-repaint ul#tabs-wrapper li, .mti-repaint #banner-container p, .mti-repaint #nav .secondary > strong, .mti-repaint #nav .aux-info > strong, .mti-repaint div.login > div form legend, .mti-repaint #nav .secondary > ul > li > a > strong, .mti-repaint .banner-info h2 { font-family: 'VAG Rounded W01 Bold'; } .mti-repaint h3, .mti-repaint table.data th, .mti-repaint div.doc-listing ul li a span:first-child, .mti-repaint .share-icons h2, .mti-repaint .share-icons > strong, .mti-repaint .resources #content .default-form legend { font-family: 'VAG Rounded W01 Light'; } .mti-repaint h5 { font-family: 'Museo Sans W01 500'; } .mti-repaint h6 { font-family: 'FrutigerLTW01-45Light'; } /*-- 4.1.2 Inactive Fonts --*/ /*-- 4.1.2.1 Typography --*/ .mti-inactive #nav .secondary strong, .mti-inactive #nav .aux-info strong { font-weight: bold; } .mti-inactive #nav .feature span { font-weight: normal; font-size: 1.1em; } .mti-inactive #content .default-form legend { font-size: 1.4em; } .mti-inactive .share-icons > strong { font-size: 1.2em; font-weight: bold; padding: 5px 21px 0 0; } /*-- 4.1.2.2 Navigation --*/ .mti-inactive h1, .mti-inactive h2, .mti-inactive h3 { font-weight: bold; letter-spacing: -1px; } .mti-inactive #nav > ul > li { font-size: 0.95em; font-weight: bold; } .mti-inactive #nav > ul > li > a { letter-spacing: -1px; } /*-- 4.1.2.3 Content Blocks --*/ .mti-inactive .info-boxes div h2 { font-size: 1.6em; } .mti-inactive .info-boxes a h2 { font-weight: bold; font-size: 1.5em; } .mti-inactive .content-block > h2, .mti-inactive .content-block > a > h2, .mti-inactive div.login > div form legend, .mti-inactive div.add-info .content-block > div h2 { font-weight: bold; } /*-- 4.1.2.4 Tabs --*/ .mti-inactive ul#tabs-wrapper li { font-weight: bold; font-size: 1.16em; } /*--- 4.1.2.5 Buttons + Links --*/ .mti-inactive div.button, .mti-inactive #content input[type="submit"], .mti-inactive #content input[type="reset"], .mti-inactive .login input[type="submit"] { font-size: 1em; font-weight: bold; letter-spacing: -1px; } .mti-inactive #content a.rss { line-height: 0.9; } .mti-inactive #content div.button.info a { padding: 14px 30px 13px 62px; } .mti-inactive #content div.styled-field-2 input[type="submit"] { padding: 8px 8px 9px 37px; } .content-div-no-overflow { overflow: hidden; } .addthis_button_twitter, .addthis_button_facebook, .addthis_button_email { width: 24px !important; } .landing #content .default-form .pagination:after, .landing #content .default-form .pagination ul:after, .share-icons:after, .search-input:after, #nav > .wrapper:after, .main_nav-list:after, #nav .secondary ul li a.thumb:after, #footer-wrapper:after, .footer-heading:after, ul.footer-links:after, .territories-container:after, .territories-list:after, .contact-us #content .default-form fieldset > div:after, .media-list .inner-right:after, .inside #content .default-form.content-block:after, .clearfix:after, .section--divided:after { clear: both; } .landing #content .default-form .pagination:before, .landing #content .default-form .pagination ul:before, .share-icons:before, .search-input:before, #nav > .wrapper:before, .main_nav-list:before, #nav .secondary ul li a.thumb:before, #footer-wrapper:before, .footer-heading:before, ul.footer-links:before, .territories-container:before, .territories-list:before, .contact-us #content .default-form fieldset > div:before, .media-list .inner-right:before, .inside #content .default-form.content-block:before, .clearfix:before, .section--divided:before, .landing #content .default-form .pagination:after, .landing #content .default-form .pagination ul:after, .share-icons:after, .search-input:after, #nav > .wrapper:after, .main_nav-list:after, #nav .secondary ul li a.thumb:after, #footer-wrapper:after, .footer-heading:after, ul.footer-links:after, .territories-container:after, .territories-list:after, .contact-us #content .default-form fieldset > div:after, .media-list .inner-right:after, .inside #content .default-form.content-block:after, .clearfix:after, .section--divided:after { content: ""; display: table; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .s-landing-modules .page-wrapper { max-width: 100%; overflow: hidden; } /* Secondary modules */ /* Themes */ .t-bg--theme-primary { background-color: #002b48 !important; } .t-bg--theme-secondary { background-color: #0799cc !important; } .t-color--theme-primary { color: #002b48 !important; } .t-color--theme-secondary { color: #0799cc !important; } .t-color--theme-txt { color: #fff !important; } body.theme--default .t-bg--theme-primary { background-color: #002b48 !important; } body.theme--default .t-bg--theme-secondary { background-color: #0799cc !important; } body.theme--default .t-color--theme-primary { color: #002b48 !important; } body.theme--default .t-color--theme-secondary { color: #0799cc !important; } body.theme--default .t-color--theme-txt { color: #fff !important; } body.theme--default ul.global-links li { border-color: #fff !important; } body.theme--default .banner-gradient-top { background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#002b48)); background-image: linear-gradient(to top, transparent, #002b48); } body.theme--default .banner-gradient-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#002b48)); background-image: linear-gradient(to bottom, transparent, #002b48); } body.theme--default .button > a { color: #fff !important; } body.theme--default .button > a:hover { color: #fff !important; } body.theme--default .button > a:hover.t-bg--theme-primary { background-color: #002239 !important; } body.theme--default .button > a:hover.t-bg--theme-secondary { background-color: #068ebd !important; } body.theme--default #banner-nav > a.active::before { background-color: #002b48 !important; border-color: #0799cc !important; } @media screen and (min-width: 1025px) { body.theme--default #banner-nav > a.active::before { background-color: transparent !important; } } @media screen and (min-width: 1025px) { body.theme--default .main_nav-link:hover { background-color: #41c9f8 !important; } } body.theme--default .section__heading.t-color--theme-txt + .section__intro::after { background-color: #fff !important; } body.theme--default .section__heading.t-color--theme-primary + .section__intro::after { background-color: #002b48 !important; } body.theme--default .section__heading.t-color--theme-secondary + .section__intro::after { background-color: #0799cc !important; } body.theme--default .section--divided__copy.t-bg--theme-primary::before { background-color: #002b48 !important; } body.theme--default .section--divided__copy.t-bg--theme-secondary::before { background-color: #0799cc !important; } body.theme--default #footer-wrapper { background-color: #002b48 !important; background-image: none; } body.theme--default .footer-heading-link, body.theme--default .footer-link:hover, body.theme--default .footer-links li a:hover { color: #0799cc !important; } body.theme--tiger .t-bg--theme-primary { background-color: orange !important; } body.theme--tiger .t-bg--theme-secondary { background-color: red !important; } body.theme--tiger .t-color--theme-primary { color: orange !important; } body.theme--tiger .t-color--theme-secondary { color: red !important; } body.theme--tiger .t-color--theme-txt { color: #000 !important; } body.theme--tiger ul.global-links li { border-color: #000 !important; } body.theme--tiger .banner-gradient-top { background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(orange)); background-image: linear-gradient(to top, transparent, orange); } body.theme--tiger .banner-gradient-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(orange)); background-image: linear-gradient(to bottom, transparent, orange); } body.theme--tiger .button > a { color: #000 !important; } body.theme--tiger .button > a:hover { color: #000 !important; } body.theme--tiger .button > a:hover.t-bg--theme-primary { background-color: #f09b00 !important; } body.theme--tiger .button > a:hover.t-bg--theme-secondary { background-color: #f00000 !important; } body.theme--tiger #banner-nav > a.active::before { background-color: orange !important; border-color: red !important; } @media screen and (min-width: 1025px) { body.theme--tiger #banner-nav > a.active::before { background-color: transparent !important; } } @media screen and (min-width: 1025px) { body.theme--tiger .main_nav-link:hover { background-color: #ff6666 !important; } } body.theme--tiger .section__heading.t-color--theme-txt + .section__intro::after { background-color: #fff !important; } body.theme--tiger .section__heading.t-color--theme-primary + .section__intro::after { background-color: orange !important; } body.theme--tiger .section__heading.t-color--theme-secondary + .section__intro::after { background-color: red !important; } body.theme--tiger .section--divided__copy.t-bg--theme-primary::before { background-color: orange !important; } body.theme--tiger .section--divided__copy.t-bg--theme-secondary::before { background-color: red !important; } body.theme--tiger #footer-wrapper { background-color: orange !important; background-image: none; } body.theme--tiger .footer-heading-link, body.theme--tiger .footer-link:hover, body.theme--tiger .footer-links li a:hover { color: red !important; } /* Divided content section */ .c-section--divided .section--divided__copy::before { background-color: #002b48; } .c-section--divided .section__intro::after { background-color: #0799cc; } .section--divided { display: block; margin: 0; position: relative; width: 100%; z-index: 20; } .section--divided__copy { margin: -10px -20px 20px -20px; padding: 40px 20px; position: relative; width: -webkit-calc(100% + 40px); width: calc(100% + 40px); } @media screen and (min-width: 60em) { .section--divided__copy { margin: -30px -15px; width: -webkit-calc(100% + 30px); width: calc(100% + 30px); } } @media screen and (min-width: 75em) { .section--divided__copy { padding: 80px 0; width: 50%; } .section--divided--right .section--divided__copy { padding-left: 140px; } .section--divided__copy h2, .section--divided__copy p { max-width: 415px; padding-left: 20px; } .section--divided__copy::before { background-color: #0799cc; content: ''; height: 100%; position: absolute; bottom: 0; top: 0; right: 0; width: 2000px; z-index: -1; } .section--divided--right .section--divided__copy { float: right; } .section--divided--right .section--divided__copy::before { left: -7px; right: auto; } } .section--divided__media { display: block; height: 100%; margin: 20px auto; max-width: 100%; width: 100%; } @media screen and (min-width: 75em) { .section--divided__media { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; left: 50%; margin-top: 0; margin-bottom: 0; margin-left: -100px; max-width: 680px; position: absolute; top: -8px; width: 50%; } .section--divided--right .section--divided__media { margin-left: -580px; } } .section__heading { font-size: 30px; margin: 0 auto 35px auto; text-align: center; } .section__heading--left { margin-left: 0; text-align: left; } @media screen and (min-width: 60em) { .section__heading { font-size: 42px; } } .section__intro { font-size: 20px; font-style: italic; line-height: 25px; } .section__intro::after { background-color: #002b48; content: ''; display: block; height: 4px; margin-top: 28px; width: 45px; } .section--centered .section__intro::after { margin: 28px auto 0 auto; } .section--centered { text-align: center; } /* Responsive video */ .responsive-video { max-width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Tile style overrides */ .c-tiles__container.padding-vertical-large { padding-bottom: 40px; padding-top: 40px; } @media screen and (min-width: 60em) { .c-tiles__container.padding-vertical-large { padding-bottom: 65px; padding-top: 65px; } } .c-tiles__container h2.section__heading { font-size: 30px; } @media screen and (min-width: 60em) { .c-tiles__container h2.section__heading { font-size: 42px; } } .c-tiles .category-tile { margin-bottom: 20px; } @media screen and (min-width: 1025px) { .c-tiles .category-tile { margin-bottom: 0; } } @media screen and (min-width: 60em) { .no-flexboxlegacy .action-tiles .c-tiles .category-tile { min-height: 280px; } .no-flexboxlegacy .program-tiles .c-tiles .category-tile { min-height: 210px; } .no-flexboxlegacy .program-tiles .c-tiles .category-tile img { height: 100%; width: 100%; } } .c-tiles .tile-description { padding: 15px; } @media screen and (max-width: 37.438em) { .program-tiles .c-tiles .tile-description { display: none; } } .c-tiles .tile-description .tile-heading { text-transform: none; } @media screen and (min-width: 60em) { .c-tiles .tile-description .tile-heading { font-size: 18px; } } .c-tiles .tile-content { font-size: 16px; line-height: 23px; letter-spacing: 1px; } @media screen and (min-width: 37.5em) { .c-tiles .tile-content { font-size: 14px; } } .c-tiles .tile-heading { padding-right: 30px; } .c-tiles .tile-image { height: 210px; max-height: 280px; overflow: hidden; } @media screen and (min-width: 37.5em) { .tiles-cropped .c-tiles .tile-image { max-height: 210px; } } @media screen and (max-width: 37.438em) { .action-tiles .c-tiles .tile-image { max-height: 140px; } } @media screen and (max-width: 37.438em) { .c-tiles .tile-image { max-height: 165px; } } @media screen and (min-width: 75em) { .c-tiles .tile-image { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 280px; } } .c-tiles .tile-image img { height: 100% !important; width: 100%; } @media screen and (max-width: 37.438em) { .c-tiles .tile-title { bottom: 25px; left: 30px; padding-right: 55px; } } @media screen and (min-width: 60em) { .c-tiles .tile-title { font-size: 24px; line-height: 24px; } } .action-tiles .c-tiles .tile-arrow { display: none; } @media screen and (min-width: 1025px) { .action-tiles .c-tiles .tile-arrow { display: block; } } @media screen and (min-width: 37.5em) { .c-tiles.tiles-4 .tile-title { font-size: 22px; line-height: 22px; } } @media screen and (min-width: 60em) { .c-tiles.tiles-4 .tile-heading { font-size: 18px; } } .has-background-image { background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; } /* Link box */ .c-linkbox__container.padding-vertical-large { padding-bottom: 40px; padding-top: 40px; } @media screen and (min-width: 60em) { .c-linkbox__container.padding-vertical-large { padding-bottom: 75px; padding-top: 75px; } } .c-linkbox__container h2.section__heading { font-size: 30px; } @media screen and (min-width: 60em) { .c-linkbox__container h2.section__heading { font-size: 42px; } } @media screen and (min-width: 60em) { .link-box-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .link-box-container--wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .link-box { border: 2px solid #fff; margin: 20px 0; text-align: center; width: 100%; } .t-bg-white .link-box { border-color: #002b48; } @media screen and (min-width: 60em) { .link-box { margin: 0 7px; } } @media screen and (min-width: 60em) { .link-box-container--wrap .link-box { margin: 8px 0; width: 24%; } } .link-box a { font-size: 20px; font-weight: bold; color: inherit; padding: 24px 15px; display: block; width: 100%; -webkit-transition: .125s all ease-in-out; transition: .125s all ease-in-out; } .t-bg-white .link-box a { color: #002b48; } .link-box a:hover, .link-box a:focus { background-color: #fff; color: #0799cc; text-decoration: none; } .t-bg-white .link-box a:hover, .t-bg-white .link-box a:focus { color: #fff; background-color: #002b48; } .t-bg--theme-primary .link-box a:hover, .t-bg--theme-primary .link-box a:focus { color: #002b48; } .t-bg--theme-secondary .link-box a:hover, .t-bg--theme-secondary .link-box a:focus { color: #0799cc; } /* Column text container */ .c-column-text__container { color: #002b48; } .c-column-text__container.padding-vertical-large { padding-bottom: 40px; padding-top: 40px; } @media screen and (min-width: 60em) { .c-column-text__container.padding-vertical-large { padding-bottom: 65px; padding-top: 65px; } } .c-column-text__container h2.section__heading { color: #0799cc; font-size: 30px; margin: 0 0 16px; } @media screen and (min-width: 60em) { .c-column-text__container h2.section__heading { font-size: 42px; } } .c-column-text__container .section__intro { font-weight: bold; margin: 16px 0 8px; } .c-column-text__container .section--centered .section__intro::after { margin: 23px auto 0 auto; } @media screen and (min-width: 60em) { .column-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } } .column-text__column { text-align: left; } @media screen and (min-width: 60em) { .column-text__column { max-width: 45%; } } .column-text__column p { line-height: 25px; } .c-banner-stripe #banner .banners > img { height: 390px; max-width: initial; border-radius: 0; } @media screen and (min-width: 1025px) { .c-banner-stripe #banner .banners > img { height: 602px; } } .c-banner-stripe .banners:after { display: none; content: ''; background-color: rgba(0, 43, 72, 0.35); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 12; } .c-banner-stripe .banners.has-overlay:after { display: inline-block; } .c-banner-stripe .banners.has-overlay .banner-gradient-top, .c-banner-stripe .banners.has-overlay .banner-gradient-bottom { display: block; } .c-banner-stripe .banner-gradient-top, .c-banner-stripe .banner-gradient-bottom { display: none; position: absolute; height: 45%; left: 0; right: 0; z-index: 12; } .c-banner-stripe .banner-gradient-top { background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#002b48)); background-image: linear-gradient(to top, transparent, #002b48); top: 0; } .c-banner-stripe .banner-gradient-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#002b48)); background-image: linear-gradient(to bottom, transparent, #002b48); bottom: 0; }