/*
Theme Name: Cape Retirement Fund
Author: Viewport
Author URI: http://www.viewport.co.za
Description: Custom Theme for Cape Retirement Fund
/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
* {box-sizing:border-box;}
body {background:white; color:#666; font-size:100%; font-weight:400; font-family:'Oxygen', Helvetica, Arial, Verdana, sans-serif; font-stretch:normal; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; -webkit-text-size-adjust:none;}
/* Font Styles */
h1, h2, h3, h5, h6 {line-height:125%; color:#444; padding:0.5em 0; font-weight:700;}
h1 {font-size:250%; font-weight:300; letter-spacing:-0.01em; padding:0.25em 0;}
h2 {font-size:150%; font-weight:400; line-height:140%; letter-spacing:-0.01em;}
h3 {font-size:120%;}
h2 a, h3 a {text-decoration:none; color:#444;}
h2 a:hover, h3 a:hover {color:#008da8; }
.main-content h3 {padding:0.8em 0 0.2em;}
h4 {font-size:125%; line-height:150%; font-weight:400;}
h5 {}
h6 { padding:0.25em 0; font-size:85%; color:#444; text-transform:uppercase; font-weight:700; letter-spacing:1px;}
p {line-height:150%; padding:0.5em 0;}
strong {font-weight:700;}
p strong {color:#444;}
em {font-style:italic;}
small{font-size:85%; line-height:125%; font-weight:normal;}
img {max-width:100%;}
hr {border:0; height:1px; background:#eee; margin:1.5em 0;}
/* Lists */
.main-content ul {list-style:disc; padding:0.5em 3em 0.5em 1em; line-height:150%;}
.main-content ul li {list-style:disc; margin:0.5em;}
.main-content ol {list-style:decimal; padding:1em 2em; line-height:150%;}
.main-content ol li {list-style:decimal; margin:0.5em;}
/* Blockquotes */
blockquote {display:block; position:relative; background:#f4f5fa; padding:1em 2em 1em 3em; margin:1em 0; }
blockquote:before {position:absolute; top:10px; left:-15px; content:'\201C'; font-size:100px; color:#999รงรง; line-height:100%; font-family:'Georgia';}
blockquote p {display:block; font-style:italic; color:#444; font-size:115%; line-height:160%; font-family:'Georgia';}
@media screen and (max-width:768px) {
h1 {font-size:170%; }
h2 {font-size:150%;}
}
/* Links */
a, input[type=submit] {color:#008da8; text-decoration:underline; }
a:hover {color:#777;}
header, header .logo img, .spacer, a, input[type=submit], .btn, header .contact, .icon, .pagetitle {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
/* Buttons */
.btn, input[type=submit] {font-family:'Oxygen', sans-serif; border:0; cursor:pointer; outline:none; text-indent:0; margin:0; text-decoration:none; padding:1em 1.5em !important; line-height:100%; background:#008da8; text-transform:uppercase; color:white; display:inline-block; text-align:center; font-size:85%; letter-spacing:0.04em; font-weight:700; -webkit-border-radius:2px; border-radius:2px; }
.btn:hover, input[type=submit]:hover {text-decoration:none; background:#777; color:white;}
.btn.grey {background:#777; color:white; padding:0.9em 1.25em !important;}
.btn.grey:hover {background:#008da8; color:white;}
.btn i {margin-left:5px;}
a[href$=".pdf"]{background: url(img/pdf.png) center left no-repeat; padding-left:42px; height:45px; display: inline-block; padding-top:15px; background-size:32px; text-decoration:none; font-weight:700;}
@media only screen and (max-width:480px) {
.btn, input[type=submit] {margin:0.5em 0; padding:0.8em 1.2em !important; }
}
/* Header Section */
header {display:block; position:relative; z-index:100; text-align:center; background:white; box-shadow:0 0 3px rgba(0,0,0,0.2);}
header .logo {display:block;}
@media screen and (min-width:769px){
header {position:fixed; top:0px; left:0px; height:140px; width:100%; z-index:100; text-align:right;}
header .logo {float:left;}
header .logo img {max-width:200px; margin:15px 20px 0;}
.spacer {height:140px; display:block;}
header .contact {display:inline-block; vertical-align:middle; text-align:right; margin:2em 0 0;}
header .contact strong {color:#008da8; display:block; font-size:115%;}
header .contact a {color:#777;}
header.smaller .contact { margin:1em 0 0;}
header .btn {display:inline-block; vertical-align:middle; margin:2em 5em 0;}
header.smaller .btn {margin:1em 5em 0;}
header.smaller {height:100px;}
header.smaller .logo img {max-width:125px;}
.spacer.smaller {height:100px;}
}
@media only screen and (min-width:769px) and (max-width:1024px) {
header .btn {display:inline-block; vertical-align:middle; margin:2em 1.5em 0;}
header .contact {font-size:90%; max-width:40%;}
}
@media only screen and (max-width:768px) {
header {width:100%; float:left;}
.spacer, header .contact {display:none;}
header .logo {float:left;}
header .logo img {max-height:70px; margin:10px 10px 0px;}
header .btn {display:none;}
}
/* Desktop Menu */
.desktop-menu {display:block;}
.desktop-menu ul, .desktop-menu li {}
.desktop-menu ul li.hover,.desktop-menu ul li:hover {position:relative;z-index:599}
.desktop-menu ul ul {display:none;position:absolute;top:100%;left:0;z-index:598; box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
.desktop-menu ul li:hover > ul {display:block; }
.desktop-menu ul ul {top:0;left:100%}
.desktop-menu a {display:block; text-decoration:none}
.desktop-menu li {background:#008da8; position:relative; border-bottom:1px solid rgba(255,255,255,0.2); text-transform:uppercase; font-weight:700;}
.desktop-menu li:hover, .desktop-menu li.current-menu-item, .desktop-menu li.current-page-parent {background:white; color:#777;}
.desktop-menu li:hover a, .desktop-menu li.current-menu-item a, .desktop-menu li.current-page-parent a {color:#777;}
.desktop-menu a {color:white; line-height:125%; padding:1em; min-width:200px}
.desktop-menu ul ul li{background:white; color:#777; border-bottom:1px solid rgba(0,0,0,0.1); text-transform:none; font-weight:400;}
.desktop-menu ul ul li:hover{background:white; color:#777;}
.desktop-menu li:hover a {background:white; color:#777;}
.desktop-menu li li a:hover {background:#f5f5f5; color:#444;}
/* Down Arrows for Children */
.desktop-menu li.menu-item-has-children a:after, .desktop-menu li.current-menu-item a:after {float:right; vertical-align:middle; content:'\f105'; color:white; margin-left:10px; font-family:'FontAwesome'; opacity:0.5;}
.desktop-menu li.current-menu-item a:after, .desktop-menu li.menu-item-has-children:hover a:after, .desktop-menu li.menu-item-has-children.current-menu-item a:after, .desktop-menu li.menu-item-has-children.current-page-parent a:after {opacity:1; color:#999;}
.desktop-menu li.menu-item-has-children li a:after {display:none;}
@media only screen and (max-width:768px) {
.desktop-menu {display:none}
}
/* Mobile Menu */
@media only screen and (max-width:768px) {
#burger-toggle{cursor:pointer; width:90px; padding:0 0 0 32px; height:90px; float:right; margin:0; border:0; -webkit-appearance:none; outline:none; background:white;}
#burger-toggle span, #burger-toggle span:before, #burger-toggle span:after {cursor:pointer; border-radius:10px; height:5px; width:30px; background:#999; position:absolute; display:block; content:''}
#burger-toggle span:before {top:-10px}
#burger-toggle span:after {bottom:-10px}
#burger-toggle span, #burger-toggle span:before,#burger-toggle span:after {transition:all 250ms ease-in-out}
#burger-toggle.active span {background-color:transparent}
#burger-toggle.active span:before, #burger-toggle.active span:after {top:0}
#burger-toggle.active span:before {transform:rotate(45deg)}
#burger-toggle.active span:after {transform:rotate(-45deg)}
.mobile-menu {z-index:100;}
.mobile-menu ul {list-style-type:none; width:100%; margin:0; padding:0; background:white; position:static; text-align:left; position:absolute; z-index:100; top:90px; left:0px; -webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,0.1); box-shadow:0 1px 3px 0 rgba(0,0,0,0.1); display:none; }
.mobile-menu ul.show {display:block;}
.mobile-menu li {display:block; border-top:1px solid #eee; font-weight:bold; position:relative;}
.mobile-menu li a {border:none; cursor:pointer; text-transform:uppercase; display:block; padding:1.5em; font-size:100%; color:#444; background:white; text-decoration:none;}
.mobile-menu li a:before {float:left; vertical-align:middle; content:'\f105'; color:#008da8; margin-right:1em; font-family:'FontAwesome';}
.mobile-menu li a .fa {float:right;}
.mobile-menu li.current:hover a {background:white; color:#444;}
.mobile-menu li:hover a {background:white; color:#444;}
.mobile-menu li:hover ul a {background:white; color:#444;}
.mobile-menu li:hover ul a:hover {background:white; color:#444;}
.mobile-menu li ul {position:relative; width:100%; z-index:100; top:auto; left:0px; background:white; border:0; padding:0 0 1em; -webkit-box-shadow:none; box-shadow:none; display:none;}
.mobile-menu li ul li {display:block; width:100%; float:none; text-align:left; border:0; position:relative; z-index:100; margin:0;}
.mobile-menu li ul li a {width:100%; height:auto; background:white; color:#444; display:block; text-transform:none; padding:0.5em 1.5em; line-height:125%; font-size:100%; font-weight:400;}
.mobile-menu li ul li a:before {margin:0 1em;}
.mobile-menu ul li a:hover + .sub-menu, .mobile-menu .sub-menu:hover {display:block;}
}
@media screen and (min-width:769px){
#mobileMenu {display:none}
#burger-toggle {display:none}
li.myportfolio {display:none;}
}
/* Generic Template */
.main-content {padding:1em 2.5em; display:block; clear:both;}
@media only screen and (min-width:769px) {
html, body {height:100%;}
.sidebar {width:20%; height:100%; position:fixed; z-index:50; background:#008da8;}
.content {width:80%; height:auto; float:right; position:relative; z-index:1; background:white;}
.left-side {width:70%; float:left; padding:0.5em 0 2.5em;}
.right-side {width:25%; float:right; padding:1.5em 0 2.5em;}
}
@media only screen and (min-width:1025px) {
.sidebar {width:250px; }
.content {width:calc(100% - 250px);}
}
@media only screen and (min-width:769px) and (max-width:1024px) {
.sidebar {width:25%; }
.content {width:75%;}
}
@media only screen and (max-width:768px) {
.main-content {padding:1em;}
.left-side {text-align:left;}
.right-side {text-align:left; padding:2em 0;}
.content-column div { padding: 0 !important;}
}
/* HOME PAGE */
/* jQuery FlexSlider v2.6.3 */
.flex-container a:hover,.flex-slider a:hover{outline:none}
.slides,.slides > li,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none}
.flex-pauseplay span{text-transform:capitalize}
.flexslider{margin:0;padding:0}
.flexslider .slides > li{display:none;-webkit-backface-visibility:hidden}
.flexslider .slides img{width:100%;display:block}
.flexslider .slides:after{content:"\0020";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .flexslider .slides{display:block}
* html .flexslider .slides{height:1%}
.no-js .flexslider .slides > li:first-child{display:block}
.flexslider{margin:0; max-height:100vh; overflow-y:hidden; position:relative; display:block; clear:both; z-index:2; zoom:1;}
.flexslider .slides{zoom:1;}
.flexslider .slides img{height:auto;-moz-user-select:none}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}
.loading .flex-viewport{max-height:300px}
.flexslider .slides li {position:relative; z-index:2;}
.flexslider .slides li img {position:relative; z-index:2;}
.flex-direction-nav{*height:0}
.flex-direction-nav a{text-decoration:none;display:block;width:35px; height:35px; margin:-20px 0 0;position:absolute; outline:none; top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,0.8); -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.flex-direction-nav a:before{font-family:'FontAwesome'; font-size:35px; display:inline-block;content:'\f053'; color:white}
.flex-direction-nav a.flex-next:before{content:'\f054'}
.flex-direction-nav .flex-prev{left:1em}
.flex-direction-nav .flex-next{right:1em;text-align:right}
.flexslider:hover .flex-direction-nav .flex-prev{opacity:.6;}
.flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1}
.flexslider:hover .flex-direction-nav .flex-next{opacity:.6;}
.flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1}
.flex-direction-nav .flex-disabled{opacity:0!important;filter:alpha(opacity=0);cursor:default;z-index:-1}
.flex-control-nav{position:absolute; bottom:15px; left:6%; text-align:left; z-index:4;}
.flex-control-nav li{margin:0 4px; display:inline-block; zoom:1; *display:inline; }
.flex-control-paging li a {width:10px; height:10px; float:left; position:relative; background:white; background:rgba(0,0,0,0.15); cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; border-radius:20px;}
.flex-control-paging li a:hover{background:rgba(0,0,0,0.4);}
.flex-control-paging li a.flex-active{background:#008da8;cursor:default;}
.centerit {position:relative; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.slides .copy {position:absolute; width:55%; height:100%; top:0; left:6%; z-index:3; text-align:left;}
.slides h1 {padding:0;}
.slides h1 strong {display:block; font-weight:700; color:#008da8;}
.slides h1 em {display:block; font-weight:700; font-style:normal;}
.slides p {color:#444; padding:1em 0 2em;}
.slides p i.fa-thumbs-o-up {font-size:175%; line-height:100%;}
.slides span {display:block; font-size:70%; line-height:100%; font-weight:bold; padding:0.5em 0 0 0.5em;}
.slides li:nth-of-type(2) h1, .slides li:nth-of-type(4) h1, .slides li:nth-of-type(5) h1 {color:white;}
.slides li:nth-of-type(2) h1 strong, .slides li:nth-of-type(4) h1 strong, .slides li:nth-of-type(5) h1 strong {color:#02b1d2;}
.slides li:nth-of-type(2) p, .slides li:nth-of-type(4) p, .slides li:nth-of-type(5) p {color:white;}
.slides .btn {font-size:100%;}
@media only screen and (max-width:768px) {
.flexslider {height:auto;}
.slides .copy {left:1em;}
.slides h1 {font-size:150%; font-weight:400; padding-bottom:0.5em;}
.flexslider .slides .copy p, .flex-control-nav {display:none !important;}
}
@media only screen and (max-width:480px) {
.flexslider {height:auto;}
.slides .copy {left:1em;}
.slides h1 {font-size:100%; font-weight:400;}
.slides .btn {font-size:80%;}
}
/* Assist Options */
.assist-options {display:block; text-align:center; padding:1.5em 0; margin:0 0 1.5em; border-bottom:1px solid #eee;}
.assist-options .option {display:inline-block; vertical-align:top; width:20%; margin:0 2%;}
.assist-options a.icon {display:inline-block; background:#008da8; color:white; width:100px; height:100px; -webkit-border-radius:100px; border-radius:100px; }
.assist-options a.icon:hover {background:#777;}
.assist-options .option h3 {padding:0.5em 0 0;}
.assist-options .option p {font-size:90%; line-height:140%;}
@media only screen and (max-width:1024px) {
.assist-options .option {width:22%; margin:0 1%;}
}
@media only screen and (max-width:768px) {
.assist-options {padding:0;}
.assist-options .option {width:45%; margin:1em 2%;}
}
@media only screen and (max-width:480px) {
.assist-options {float:left; width:100%; padding:1em 0 2em;}
.assist-options .option {width:auto; display:block; margin:1em; text-align:left; float:left; clear:both;}
.assist-options a.icon {float:left; width:80px; height:80px; margin:0 1em 0 0;}
.assist-options .option h3 {padding:0;}
}
/* INTERNAL PAGES */
/* Banner */
.banner {display:block; clear:both; position:relative; z-index:1; text-align:left; color:white;}
.banner .copy {position:absolute; height:100%; top:0; left:2.5em; z-index:3; text-align:left;}
.banner .copy h1 {display:inline-block; color:white; vertical-align:middle; font-weight:700;}
.banner .copy .icon {display:inline-block; vertical-align:middle; font-size:350%; color:white; margin-right:5px;}
.banner img {width:100%;}
.banner .icon img {width:100px;}
@media screen and (max-width:768px) {
.banner .copy .icon {display:none;}
}
/* Subnav */
.subnav {display:block; position:relative; text-align:center; padding:0; background:#ebf6f8;}
.subnav li {display:inline-block; vertical-align:top; width:19%; padding:2em 1%; margin-right:-4px;}
.subnav li.back {width:auto; padding:1em; position:absolute; left:0px; top:0px;}
.subnav li.back a {font-weight:700;}
.subnav li.back a:before {content:"\f104"; display:inline-block; font-family:'FontAwesome'; margin-right:7px;}
.subnav li .icon {display:inline-block; background:#008da8; color:white; width:80px; height:80px; -webkit-border-radius:100px; border-radius:100px; }
.subnav li:hover .icon, .subnav li.current .icon {background:#777;}
.subnav li.current .pagetitle, .subnav li:hover .pagetitle {color:#444;}
.subnav li .pagetitle {display:block; padding:0.75em 0 0; font-weight:700; line-height:125%;}
.subnav li a {text-decoration:none;}
.subnav li.current{position:relative}
.subnav li.current:after{bottom:0px; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute;pointer-events:none;border-color:rgba(235, 246, 248, 0); border-bottom-color:white;border-width:12px;margin-left:-12px}
/* Subnav */
.children {display:block; position:relative; text-align:center; padding:0; border-bottom:1px solid #eee;}
.children li {display:inline-block; position:relative; vertical-align:middle; padding:1.5em 2em; line-height:125%; font-weight:700; border-right:1px solid #eee;}
.children li:last-of-type {border-right:0;}
.children li a {text-decoration:none;}
.children li.current a {color:#444;}
.children li.current:after{bottom:-20px; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute;pointer-events:none;border-color:rgba(235, 246, 248, 0); border-top-color:#eee;border-width:10px;margin-left:-10px}
@media only screen and (max-width:768px) {
.subnav li {padding:1em 1%;}
.subnav li .icon {width:50px; height:50px;}
.subnav li .pagetitle {font-size:90%;}
.subnav li.current:after{display:none;}
.subnav li .pagetitle {padding:0.5em 0 0;}
}
@media only screen and (max-width:480px) {
.subnav li {display:inline-block; vertical-align:top; width:30%; padding:1em 1%;}
}
/* Form Elements */
input, textarea, select {-webkit-appearance: none; display:block; padding:0.75em 0; margin:0.75em 0 0; max-width:100%; text-indent:1em; border:1px solid #adaaa2; color:#1d1c1b; font-size:100%; -webkit-border-radius:3px; border-radius:3px;}
input[type=checkbox] {padding:0; background:white; width:auto !important; color:black; display:inline-block; margin-right:10px;}
::-webkit-input-placeholder {color:#999; font-weight:400 !important; font-style:italic;}
:-moz-placeholder {color:#999; font-weight:400 !important; font-style:italic;}
::-moz-placeholder {color:#999; font-weight:400 !important; font-style:italic;}
:-ms-input-placeholder {color:#999; font-weight:400 !important; font-style:italic;}
input[type=submit] {-webkit-appearance:none; margin:0.75em 0;}
.req {color:red; display:inline-block;}
form br {display:none;}
input[type=checkbox] {
-webkit-appearance: checkbox !important;
}
/* Contact Form 7 output */
.wpcf7-validates-as-required {border-left:2px solid red; max-width:calc(90% - 3px);}
div.wpcf7-response-output {font-weight:bold; font-size:100%; line-height:125%; border:0 !important; padding:0 !important; margin:0 !important; color:red;}
div.wpcf7-mail-sent-ok {font-size:100%; color:red; font-weight:bold;}
form.sent div {display:none !important;}
.wpcf7-not-valid-tip {display:block; padding:0 0 0.5em; font-size:85% !important; color:red !important;}
form.sent div.wpcf7-mail-sent-ok {display:block !important; min-height:200px; font-size:125%; color:#008da8;}
form.sent p {display:none;}
/* Video Responsive */
.videoWrapper {position:relative; padding-bottom:56.25%; padding-top:0px; height:0; overflow:hidden; margin:0 0 2em;}
.videoWrapper iframe, .videoWrapper object, .videoWrapper embed {position:absolute;top:0;left:0;width:100%; height:100%;}
/* Events */
#tribe-events-pg-template {margin:0 auto; max-width:95%;}
h3.tribe-events-month-event-title {font-weight:700 !important}
/* Trustees */
.member {display:inline-block; width:250px; vertical-align:top; margin:1em 2em 1em 0;}
.member h3 {padding:0.5em 0 0.25em;}
.member h3 a {text-decoration:none; color:#008da8;}
.member h3 a:hover {color:#444;}
.member p {padding:0; text-transform:uppercase; font-size:80%; letter-spacing:1px; line-height:125%;}
.member:last-of-type {display:block; width:auto; border-top:1px solid #eee; padding:2em 0;}
.member:last-of-type img {width:250px;}
.trustee {display:block; padding:2em 0;}
.trustee .image {display:inline-block; width:45%; vertical-align:top; margin-right:5%;}
.trustee .copy {display:inline-block; width:49%; vertical-align:top;}
.trustee .copy h6 {padding:1em 0;}
@media only screen and (min-width:1025px) {
.trustee .image {max-width:500px; }
.trustee .copy {}
}
@media only screen and (max-width:768px) {
.trustee .image, .trustee .copy {display:block; width:auto; padding:0;}
}
/* Upcoming workshops */
.upcoming-workshops {display:block; border:1px solid #eee; -webkit-border-radius:2px; border-radius:2px; text-align:center; padding:0 0 1em;}
.upcoming-workshops h6 {background:#f4f5fa; padding:1em; border-bottom:1px solid #eee; letter-spacing:0;}
.upcoming-workshops img {max-width:75px; margin:1em 1em 0;}
.upcoming-workshops h3, .upcoming-workshops p {margin:0 1em;}
.upcoming-workshops h3 a {color:#008da8;}
/* Special Notice */
.notice {background:#fef6df; display:block; text-align:center; padding:1em; color:#444; clear:both;}
.notice span {background:#ff5400; color:white; -webkit-border-radius:2px; border-radius:2px; display:inline-block; font-size:85%; font-weight:700; padding:0.4em 0.5em; line-height:100%; margin-right:1em;}
/* Tables */
.main-content table {background:white; margin:1.5em 0; border:1px solid #eee; font-size:90%; line-height:140%; width:100%;}
.main-content table th, .main-content table td {padding:0.75em; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:left; vertical-align:top; }
.main-content table th { font-weight:700; color:#444; background:#f4f5fa; }
.main-content table th small {font-weight:400; line-height:100%;}
table a[href$=".pdf"]{padding-left:25px; height:auto; padding-top:2px; background-size:20px; font-weight:400;}
/* Blog */
article h1 {padding:0 0 1em;}
article small {color:#999; display:block; padding-bottom:1em;}
article img {margin:0 0 1em;}
article .gallery figure {display:inline-block; margin:0 1em 0 0;}
/* Footer */
footer {clear:both; display:block; background:#f4f5fa; position:relative; z-index:100; padding:2.5em; }
footer .quicklinks, footer .newsletter, footer .social {display:inline-block; vertical-align:top; text-align:left;}
footer .quicklinks ul {display:inline-block; vertical-align:top;font-size:85%; text-decoration:none; color:#666; padding:0 4em 2em 0;}
footer .quicklinks ul a {display:inline-block; text-decoration:none; color:#666; padding:0.25em 0;}
footer .quicklinks ul li:first-of-type a {text-transform:uppercase; font-weight:700; color:#444; padding:0.25em 0; letter-spacing:1px;}
footer .newsletter {width:300px; padding-right:1em;}
footer .newsletter p {padding:0;}
footer .newsletter .wpcf7-validates-as-required {border:1px solid #adaaa2;}
footer .newsletter form.sent div.wpcf7-mail-sent-ok {min-height:50px; font-size:100%; padding:1em 0 !important;}
footer .social {}
footer .social a {margin:0.3em 0.3em 0 0; font-size:225%; display:inline-block;}
footer .social .fa-facebook {color:#3b5998;}
footer .social .fa-twitter {color:#4099FF}
footer .social .fa-linkedin {color:#007bb6}
footer .social .fa-instagram {color:#cd486b}
footer .copyright, footer .indemnity {font-size:70%; line-height:135%; display:block; padding:1.5em 0 0; color:#999;}
footer p {font-size:85%;}
footer h6 {padding:0.25em 0; line-height:100%;}
footer .quicklinks ul li:first-of-type a, footer h6 {line-height:125%;}
footer .backtotop {font-size:200%; position:absolute; right:1em; bottom:1em;}
footer .backtotop a {opacity:0.25; color:#777;}
footer .backtotop a:hover {opacity:1;}
@media only screen and (min-width:1025px) {
footer .quicklinks {width:50%;}
footer .social {float:right;}
}
@media only screen and (max-width:768px) {
footer {padding:0.5em;}
footer .quicklinks, footer .newsletter {width:49%; padding:1em; vertical-align:top;}
footer .quicklinks ul {padding:0 0 1em;}
footer .quicklinks ul a {padding:0.2em 0;}
footer .social, footer .copyright {width:auto; display:block; padding:1em; max-width:80%;}
footer .backtotop {right:0.5em; bottom:0.5em;}
}
/* Page Design Updates */
/* two pot */
body.page-id-77070 .banner {
background-color: #008da8;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
margin-inline: 2.5rem;
border-radius: 1rem;
padding-inline-end: 3rem;
align-items: center;
}
body.page-id-77070 .banner .centerit {
transform: none;
left: unset;
top: unset;
}
body.page-id-77070 .banner .copy {
max-width: 630px;
left: 0;
padding: 2rem;
position: relative;
}
body.page-id-77070 .banner > img {
width: auto;
height: 270px;
}
body.page-id-77070 .banner p {
font-size: 18px;
}
.post-39 p,
.post-77070 p {
font-size: 16px;
color: #666;
}
.post-39 p:empty,
.post-77070 p:empty {
margin: 0;
line-height: 0;
padding: 0;
}
.post-39 h2,
.post-77070 h2 {
font-size: 32px;
text-transform: none;
color: #008da8;
font-weight: 600;
}
.post-39 h3,
.post-77070 h3 {
text-transform: none;
color: #008da8;
font-size: 26px;
}
.post-39 h4,
.post-77070 h4 {
text-transform: none;
color: #008da8;
font-size: 20px;
font-weight: 600;
}
.post-39 h5,
.post-77070 h5 {
text-transform: none;
font-size: 20px;
}
.post-39 h6,
.post-77070 h6 {
text-transform: none;
font-size: 18px;
font-weight: 600;
}
.post-39 a:hover,
.post-77070 a:hover {
text-decoration: underline;
}
.post-77070 a[href$=".pdf"] {
height: auto;
padding-top: 0;
background-image: none;
padding-left: 0;
display: flex;
gap: 16px;
}
.post-77070 a[href$=".pdf"]::before {
content: "\f1c1";
font-family: FontAwesome;
font-size: 20px;
}
/* contact page*/
.row {
display: flex;
flex-direction: row;
gap: 16px;
}
.row-table {
align-items: flex-start;
}
.col {
display: flex;
flex-direction: column;
padding-block: 24px;
padding-inline: 16px;
flex: 1 1 auto;
flex-basis: 100%;
width: 100%;
}
.col-shrink{
flex: 0 1;
}
.col img {
margin: 0;
}
.col-img {
flex: 1 0 auto;
max-width: fit-content;
}
.text-white {
color: white;
}
.text-white a {
color: white;
font-weight: normal;
}
.text-white h2 {
color: white;
}
.text-white h6 {
color: white;
}
.border.light {
border: 1px solid #eeeeee;
}
.rounded {
padding: 16px;
border-radius: 8px;
}
.bg-light {
background-color: #eeeeee;
}
.bg-primary {
background-color: #008da8;
}
.bg-primary-light {
background-color: rgba(0, 141, 168, 26%);
}
.d-grid {
display: grid;
}
.d-flex {
display: flex;
}
.space-between {
justify-content: space-between;
}
.align-items-center {
align-items: center;
}
.gap-1 {
gap: 16px;
}
.gap-2{
gap: 24px;
}
.gap-3{
gap:32px;
}
.mt-1{
margin-top:16px;
}
.mt-2{
margin-top:24px;
}
.mb-1{
margin-bottom:16px;
}
.mb-2{
margin-bottom:24px;
}
ul.nostyle {
padding: 0;
}
ul.nostyle,
ul.nostyle li {
list-style: none;
}
ul.checked {
padding: 0;
}
ul.checked li {
display: flex;
gap: 16px;
}
ul.checked li::before {
content: "\f00c";
font-family: FontAwesome;
font-size: 20px;
color: #008da8;
font-weight: normal;
}
ul.icon-list{
list-style: none;
padding:0;
}
ul.icon-list li::before,
.icon::before {
font-family: FontAwesome;
}
ul.icon-list li::before{
font-size: 20px;
color: #008da8;
min-width: 20px;
}
ul.icon-list li{
list-style: none;
display: flex;
gap: 16px;
}
ul.icon-list li.phone::before{
content: "\f095";
}
ul.icon-list li.email::before{
content: "\f003";
}
ul.icon-list li.fax::before{
content: "\f1ac";
}
ul.icon-list li.whatsapp::before{
content: "\f232";
}
ul.icon-list li.facebook::before{
content: "\f09a"
}
ul.icon-list li.instagram::before{
content: "\f16d"
}
ul.icon-list li.tiktok::before{
content: "";
background-image: url(https://crfund.co.za/wp-content/uploads/2025/02/tiktok.png);
}
.icon.whatsapp::before {
content: "\f232";
font-size: 20px;
color: #008da8;
}
.post-39 .wpcf7-form label{
font-weight: 600;
}
.post-39 .wpcf7-form-control{
border-radius: 8px;
border: 2px solid #008da8;
margin-top:8px;
}
.post-39 .wpcf7-select {
margin-top: 0;
}
.post-39 p:has(.wpcf7-select){
padding-top: 0;
}
@media (max-width: 1400px) and (min-width: 1200px) {
.col-heading {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 1200px) {
body.page-id-77070 .banner img {
display: none;
}
body.page-id-77070 .banner {
display: block;
padding-inline-end: 0;
}
.row-table {
flex-direction: column;
}
.row-table .col:not(.border){
padding-inline: 0;
}
.post-77070 iframe {
min-width: 100%;
max-width: 100%;
}
.grid-address{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media(max-width:769px){
body.page-id-77070 .banner{
margin: 0;
border-radius: 0;
}
body.page-id-77070 .banner .copy{
padding: 16px;
}
.grid-address{
grid-template-columns: 1fr 1fr;
}
}
@media(max-width:576px){
.col-heading{
flex-direction: column;
gap: 0;
}
.grid-address{
grid-template-columns: 1fr;
}
}
@media(min-width: 1201px){
.col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-4{
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-3{
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-2{
width: 16%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
}
@media(min-width: 1700px){
.grid-address{
grid-template-columns: 1fr 1fr;
}
}
@media(min-width: 576px){
.post-39 .wpcf7-form-control{
width: 440px;
}
}
/* Data Deletion Form */
#request-deletion-form .wpcf7-form-control {
width: 100%;
max-width: 100%;
}
#request-deletion-form form {
display: flex;
flex-wrap: wrap;
}
#request-deletion-form form p {
margin: 0;
}
/* First four elements: 50% width */
#request-deletion-form form p:nth-child(-n+5) {
flex: 1 1 50%;
}
#request-deletion-form form p:nth-child(3),
#request-deletion-form form p:nth-child(5) {
padding-left: 12px;
}
/* From fifth
onwards: 100% width */
#request-deletion-form form p:nth-child(n+6) {
flex: 1 1 100%;
}
@media (max-width: 970px) {
#request-deletion-form form p {
flex: 1 1 100% !important;
padding-left:0 !important;
padding-bottom:15px
}
}