/* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: none; } /* The `Mirco Clearfix` */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only - Include this rule to trigger hasLayout and contain floats */ .clearfix { *zoom: 1; } /* our fallback incase the below gets used */ .clear { clear: both; border: none; float: none; } .btn-primary { background-color: #dc4646; border-color: #dc4646; color: #fff; border: none; } .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { border-radius: 0px; background-image: none; } .btn-primary:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:active { background-image: none; background-color: #5f1b71; text-decoration: none; border: none; } /* STANDARD HTML ELEMENTS */ body { font-size: 14pt; line-height: 1.7em; color: #555555; } img { max-width: 100%; } /* STRUCTURAL ELEMENTS */ #header { background-color: #444; text-align: center; color: #eee; } #header img.logo { width: 100%; max-height: 80px; } #outerWrapper { position: relative; } #banner .col-md-12 { padding: 0; } #breadcrumbs { background-color: #f5f5f5; } .breadcrumb { padding: 3px 31px; margin-bottom: 0px; list-style: none; background-color: transparent; border-radius: 0; font-size: 10pt; } .breadcrumb .divider img { margin: -5px 0 0 0; } .breadcrumb>li+li:before { content: none; } #extraFooterInfo { background-color: #f5f5f5; padding: 40px 0; } /* OOBA FLEXBOX STUFF */ .flex-container { display: flex; flex-direction: row; align-items: stretch; align-content: stretch; flex-wrap: wrap; } .flex-item { display: flex; margin: 0 0.5% 0 0.5%; flex: 1 1 auto; flex-direction: column; } .flex-content { display: block; } .flex-20 { flex-basis: 19%; } .flex-25 { flex-basis: 24%; } .flex-33 { flex-basis: 32.333% } .flex-50 { flex-basis: 49% } .flex-66 { flex-basis: 65.666% } .flex-75 { flex-basis: 74% } .flex-80 { flex-basis: 79% } .flex-100 { flex-basis: 99% } @media only screen and (min-width: 20px) and (max-width: 767px) { .flex-20 { flex-basis: 99% !important; margin: 0; } .flex-25 { flex-basis: 99% !important; margin: 0; } .flex-33 { flex-basis: 99% !important; margin: 0; } .flex-50 { flex-basis: 99% !important; margin: 0; } .flex-66 { flex-basis: 99% !important; margin: 0; } .flex-75 { flex-basis: 99% !important; margin: 0; } .flex-80 { flex-basis: 99% !important; margin: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .flex-20 { flex-basis: 49% !important; } .flex-25 { flex-basis: 49% !important; } .flex-33 { flex-basis: 49% !important; } .flex-50 { flex-basis: 49% !important; } .flex-66 { flex-basis: 49% !important; } .flex-75 { flex-basis: 99% !important; } .flex-80 { flex-basis: 99% !important; } } @media only screen and (min-width: 992px) and (max-width: 1024px) { .flex-20 { flex-basis: 49% !important; } .flex-25 { flex-basis: 49% !important; } .flex-33 { flex-basis: 49% !important; } .flex-50 { flex-basis: 49% } .flex-66 { flex-basis: 49% !important; } .flex-75 { flex-basis: 99% !important; } .flex-80 { flex-basis: 99% !important; } } .article-header-image { position: relative; } .article-header-image h1 { position: absolute; top: 45%; margin: 0 auto; text-align: center; width: 100%; display: block; text-transform: uppercase; font-size: 23pt; font-weight: 500; } .article-header-image h1 span { color: #45545f; padding: 1.5%; background-image: url("/images/trans-pngs/transparent-png-60.png"); } .article-header-image { position: relative; text-align: center; margin: 0 0 30px 0; } .article-header-image img { width: 100%; } .model-background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .opacity-black-5 { background-image: url("/images/trans-pngs/transparent-png-black-05.png"); } .opacity-black-10 { background-image: url("/images/trans-pngs/transparent-png-black-10.png"); } .opacity-black-15 { background-image: url("/images/trans-pngs/transparent-png-black-15.png"); } .opacity-black-20 { background-image: url("/images/trans-pngs/transparent-png-black-20.png"); } .opacity-black-30 { background-image: url("/images/trans-pngs/transparent-png-black-30.png"); } .opacity-black-40 { background-image: url("/images/trans-pngs/transparent-png-black-40.png"); } .opacity-black-50 { background-image: url("/images/trans-pngs/transparent-png-black-50.png"); } .opacity-black-60 { background-image: url("/images/trans-pngs/transparent-png-black-60.png"); } .opacity-black-70 { background-image: url("/images/trans-pngs/transparent-png-black-70.png"); } .opacity-black-75 { background-image: url("/images/trans-pngs/transparent-png-black-75.png"); } .opacity-black-80 { background-image: url("/images/trans-pngs/transparent-png-black-80.png"); } .opacity-black-90 { background-image: url("/images/trans-pngs/transparent-png-black-90.png"); } .opacity-white-05 { background-image: url("/images/trans-pngs/transparent-png-05.png"); } .opacity-white-10 { background-image: url("/images/trans-pngs/transparent-png-10.png"); } .opacity-white-15 { background-image: url("/images/trans-pngs/transparent-png-15.png"); } .opacity-white-20 { background-image: url("/images/trans-pngs/transparent-png-20.png"); } .opacity-white-30 { background-image: url("/images/trans-pngs/transparent-png-30.png"); } .opacity-white-40 { background-image: url("/images/trans-pngs/transparent-png-40.png"); } .opacity-white-50 { background-image: url("/images/trans-pngs/transparent-png-50.png"); } .opacity-white-60 { background-image: url("/images/trans-pngs/transparent-png-60.png"); } .opacity-white-70 { background-image: url("/images/trans-pngs/transparent-png-70.png"); } .opacity-white-75 { background-image: url("/images/trans-pngs/transparent-png-75.png"); } .opacity-white-80 { background-image: url("/images/trans-pngs/transparent-png-80.png"); } .opacity-white-90 { background-image: url("/images/trans-pngs/transparent-png-90.png"); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* DYNAMIC CONTENT LAYOUT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .dynamic-content {} .dynamic-content h3 { margin: 30px 0 30px 0;color: #d5721f; } .dynamic-content .content-see-all-link { float: right; } .dynamic-content .content-see-all-link a { font-size: 10pt; color: #ffffff; background-color: #9c9c89; padding: 9px; border-radius: 3px; } .dynamic-content .content-see-all-link a:hover { background-color: #1d69b2; text-decoration: none; } .dynamic-content-items { display: flex; flex-direction: row; margin: 0 0 60px 0; } .dynamic-content-item { padding: 0 0 6px 0; margin: 0 0.5% 0 0.5%; display: flex; flex-direction: column; } .dynamic-content-image-link {} .dynamic-content-image-intro-swap { width: 100%; height: 100%; height: 150px; background-size: cover; border: 1px solid #cccccc; background-position: center; } .dynamic-content-item-text { padding: 10px; min-height: 200px; position: relative; background-color: #f8f8f8; } .dynamic-content-item-text h4 { margin: 0; font-size: 12pt; min-height: 50px; line-height: 1.4em; } .dynamic-content-item-text h4 a { color: #333333; font-weight: 700; } .dynamic-content-item-text h4 a:hover { color: #222222; } .dynamic-content-item-text p { font-size: 10pt; line-height: 1.6em; color: #666666; } .dynamic-content-item-text p a { background-color: #e57f1f; border-color: #e57f1f; text-transform: uppercase; font-size: 7pt; padding: 1px 5px; margin: -5px 0 0 0; color:#ffffff; position: absolute; bottom: 10px; right: 10px; } .dynamic-content-items a.btn.btn-primary { background-color: #e57f1f; border-color: #e57f1f; text-transform: uppercase; font-size: 7pt; padding: 3px 5px; margin: -5px 0 0 0; position: absolute; bottom: 10px; right: 10px; } .content-videos .dynamic-content-image-intro-swap { height: 120px; } .content-blogs .dynamic-content-item-text p a:after { font-family: 'Font Awesome 5 Free'; color: #ffffff; display: inline-block; margin: 0 0 0 5px; content: "\f35d"; font-weight: 900; } .content-blogs .dynamic-content-items a.btn.btn-primary:after { font-family: 'Font Awesome 5 Free'; color: #ffffff; display: inline-block; margin: 0 0 0 5px; content: "\f249"; font-weight: 900; } .content-activities .dynamic-content-item-text p a:after { font-family: 'Font Awesome 5 Free'; color: #ffffff; display: inline-block; margin: 0 0 0 5px; content: "\f35d"; font-weight: 900; } .content-activities .dynamic-content-items a.btn.btn-primary:after { font-family: 'Font Awesome 5 Free'; color: #ffffff; display: inline-block; margin: 0 0 0 5px; content: "\f249"; font-weight: 900; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* SPECIFIC PAGE CSS */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* HOME */ #pageOverride-101 .page-header { display: none; } .home-intro { font-size: 12pt; width: 80%; margin: 20px auto 0 auto; } .topic { height: 370px; margin-top: 10px; background-size: cover; border: 1px solid #cccccc; background-position: center; position: relative; } .topic h2 { display: inline; margin: 20px 0 0 -3px; padding: 10px 70px 10px 10px; font-size: 0.9em; background-color: #e7822e; width: fit-content; color: #fff; text-transform: uppercase; -webkit-box-shadow: 3px 5px 8px 0px rgba(0,0,0,0.6); box-shadow: 3px 5px 8px 0px rgba(0,0,0,0.6); } .topic .topic-description { background-image: url(/images/trans-pngs/transparent-png-80.png); font-size: 11pt; line-height: 1.6em; padding: 4px 10px 6px 10px; position: absolute; bottom: 90px; width: 70%; left: 20px; } .topic.topic-treat-yourself .topic-description { width: 60%; } .topic .topic-button { position: absolute; bottom: 10px; right: 10px; } .topic .topic-button a { background-color: #1767b1; border-color: #1767b1; text-transform: uppercase; font-size: 10pt; padding: 7px 12px; color: #ffffff; } .home-topics .topic-treat-yourself { background-image: url("https://res.cloudinary.com/carers-wellbing-hub/image/upload/q_auto:good,f_auto,h_500,c_scale/v1607534570/hub/site/home-topics/topic-treat-yourself.jpg"); } .home-topics .topic-community-support { background-image: url("https://res.cloudinary.com/carers-wellbing-hub/image/upload/q_auto:good,f_auto,h_500,c_scale/v1607534686/hub/site/home-topics/topic-community-support.jpg"); } .home-topics .topic-education { background-image: url("https://res.cloudinary.com/carers-wellbing-hub/image/upload/q_auto:good,f_auto,h_500,c_scale/v1607538209/hub/site/home-topics/topic-education.jpg"); } .home-topics .topic-medical-support { background-image: url("https://res.cloudinary.com/carers-wellbing-hub/image/upload/q_auto:good,f_auto,h_500,c_scale/v1607534809/hub/site/home-topics/topic-medical-support.jpg"); } .home-topics .topic-mental-health { background-image: url("https://res.cloudinary.com/carers-wellbing-hub/image/upload/q_auto:good,f_auto,h_500,c_scale/v1607534954/hub/site/home-topics/topic-mental-health.jpg"); } /* HELP VIDEOS */ .section-video { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #16242d; } .section-video .video-content { text-align: center; z-index: 100; } .section-video .video-container { /* position: absolute; top: 0; left: 0; */ width: 100%; margin: 0; padding: 0; } .video-container video { width: 100%; } .video-filter { background: url('/images/trans-pngs/transparent-png-black-50.png'); background-size: auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* ------------------------------------------------------------------------------------ */ /* JOOMLA - CATEGORY BLOG OVERVIEW PAGES */ /* ------------------------------------------------------------------------------------ */ .flex-item.cat-child { background-color: #2f3543; padding: 10px 20px; border-radius: 8px; margin: 1%; width: 31.33333%; } .flex-item.cat-child h3.page-header.item-title { padding: 0px 0 21px 0; margin: 0; line-height: 1em; } .flex-item.cat-child .page-header.item-title a { text-align: center; color: #dddddd; font-size: 19px; text-transform: capitalize; font-weight: 400; line-height: 1em; } .flex-item.cat-child .category-desc p { font-size: 10pt; padding: 10px 2%; color: #dddddd; min-height: 90px; } .flex-item.cat-child p.readmore { background: #c24147; overflow: hidden; position: relative; display: block; margin: 0px -20px -10px -20px; text-align: right; clear: both; min-height: auto !important; } .flex-item.cat-child p.readmore a { color: #fff; } .blog h2 span { font-size: 45px; color: #3f4553; font-weight: normal; text-align: center; line-height: 1.4em; text-transform: capitalize; } .blog .item { margin: 0 1% 48px 1%; background-color: #2f3543; padding: 10px 20px; border-radius: 8px; } .blog .item .page-header { min-height: 50px; padding: 0; margin: 0; } .blog .item .page-header h2 { padding: 0px 0 14px 0; margin: 0; line-height: 1em; } .blog .cols-3 .item .page-header h2 { min-height: 80px; } .blog .item .page-header a { text-align: center; color: #dddddd; font-size: 19px; text-transform: capitalize; font-weight: 400; line-height: 1em; } .blog .item p { font-size: 10pt; padding: 10px 2%; color: #dddddd; min-height: 375px; } #pageOverride-477 .blog .item p { min-height: 425px; } .blog .item .item-image { margin: 0 0 20px 0; } .blog .item p.readmore { background: #c24147; overflow: hidden; position: relative; display: block; margin: 0px -20px -10px -20px; text-align: right; clear: both; min-height: auto !important; } .blog .item p.readmore a { color: #fff; } .item-page .item-image { max-width: 500px; margin: 20px; border: 1px solid #ccc; } /* tags */ ul.tags { margin: 0; padding: 0; min-height: 70px; } ul.tags li { float: left; list-style: none; margin: 5px; } /* ------------------------------------------------------------------------------------ */ /* THE WHOLE TAGGING MALARKY */ /* ------------------------------------------------------------------------------------ */ .content-links a img { width: 50px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* INDIVIDUAL MODULES */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* HEADER - Logo */ header img.logo { width: 100%; height: auto; max-width: 320px; margin: 0 auto; } /* HEADER - Strapline */ header .strapline { font-size: 12pt; font-style: italic; text-align: right; margin: 40px 0 0 0; color: #d5721f; } /* HOME CAROUSEL */ .carousel-caption { border-radius: 5px; right: 30%; left: 30%; padding-bottom: 30px; } /* BACK TO TOP */ /* This is actually created on the fly in the script.js file in the template */ a.backTotop { position: fixed; bottom: 30px; right: 20px; display: none; } a.backTotop .fas { font-size: 3em; color: #aaa; } /* NAVIGATION */ #mainNavigationHoldingDiv { background-color: #9c9c89; } .navbar-default { -webkit-box-shadow; none; box-shadow: none; background-image: none; background: none !important; border-radius: 0; border: none; margin: 0; min-height: unset; } .navbar-default .navbar-nav>li { /* border-right: 1px solid #ccc; */ } .navbar-default .navbar-nav>li>a { color: #ffffff; padding: 10px 15px 10px 15px; text-transform: uppercase; font-size: 13px; text-shadow: none !important; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { box-shadow: none; -webkit-box-shadow: none; background-image: none; background-color: transparent; color: #fff; text-shadow: none; } .navbar-default .navbar-nav>.active>a:after { margin: 3px auto -3px auto; height: 2px; width: 100%; background-color: #ffffff; content: " "; display: block; text-align: center; } .nav>li>a:focus, .nav>li>a:hover { background-image: none; background-color: none; text-shadow: none; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { background-image: none; border-top-left-radius: 4px; border-top-right-radius: 4px; text-shadow: none; color: #f5f5f5; } #mainNavNavigation ul.nav.mod-list.navbar-nav>li:last-of-type ul.dropdown-menu { right: 0; left: auto; } /* make the last nav item's dropdown menu come in from the right rather than hanging off the page */ .navbar-default ul li ul.dropdown-menu { left: 0x; border: none; min-width: 280px; background-color: #eeeeee; } .navbar-default ul li ul li ul.dropdown-menu { border: none; min-width: 280px; background-color: #2f3543; top: 1px; left: 98%; } .navbar-default .dropdown-menu>li>a { padding: 14px 12px 14px 12px; color: #666666; font-size: 14px; } .navbar-default .dropdown-menu>li>a:focus, .navbar-default .dropdown-menu>li>a:hover, .navbar-default .dropdown-menu>li.current>a { background-image: none !important; background-color: #d5721f !important; font-weight: 400; color: #ffffff; } /* @media only screen and (min-width: 120px) and (max-width: 479px) { */ @media only screen and (min-width: 120px) and (max-width: 767px) { #mainNavigation { position: absolute; top: -45px; left: 40px; } .navbar { background-color: #20242d; width: 100%; padding: 0px; margin-left: -24px; z-index: 40; } .navbar-default .navbar-nav>li { padding: 10px 20px; } .navbar-default .navbar-nav>li.active { } .navbar-default .navbar-collapse, .navbar-default .navbar-form { width: 360px; } } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px 0 6px 6px; border-left-color: #ffffff; margin-top: 5px; margin-right: 0px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } ul.nav>li.dropdown>ul.dropdown-menu { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; max-height: 0; display: block; overflow: hidden; opacity: 0; } .nav>li.dropdown.open>.dropdown-menu { max-height: 700px; opacity: 1; overflow: unset; } /* JoomForest Mobile Pro Over-ride */ .jf_mm_pro li { text-align: left; border-bottom: 1px solid #ccc; } .jf_mm_pro_wrapper li a>i, .jf_mm_pro_wrapper li a>img { vertical-align: -1px !important; } /* REGULAR LABS - MODAL POPUPS */ button#rl_modals_close { padding: 5px; opacity: 1; width: 100px; text-align: center; height: 40px; top: 9px; right: 11px; background: none; background-color: #e57f1f; font: unset; color: #ffffff; } button#rl_modals_close:after { left: 2px; position: absolute; top: 1px; font-family: 'Font Awesome 5 Free'; color: #ffffff; content: "\f00d"; } /********************************************************************************************************/ /* Note: Design for a width of 1031px -> 1199px */ /********************************************************************************************************/ @media only screen and (min-width: 1031px) and (max-width: 1199px) { } /********************************************************************************************************/ /* Note: Design for a width of 960px -> 1030px */ /********************************************************************************************************/ @media only screen and (min-width: 960px) and (max-width: 1030px) { } /********************************************************************************************************/ /* Note: Design for a width of 768px -> 959px */ /********************************************************************************************************/ @media only screen and (min-width: 768px) and (max-width: 959px) { } /********************************************************************************************************/ /* Note: Design for a width of 600px -> 767px */ /********************************************************************************************************/ @media only screen and (min-width: 600px) and (max-width: 767px) { } /********************************************************************************************************/ /* Note: Design for a width of 480px -> 599px */ /********************************************************************************************************/ @media only screen and (min-width: 480px) and (max-width: 599px) { } /********************************************************************************************************/ /* Note: Design for a width of 120px -> 479px */ /********************************************************************************************************/ @media only screen and (min-width: 120px) and (max-width: 479px) { }