/*See file Make These Changes for instructions*/ /*AW #1 Change Font - Font Link inserted in index.php in section line 131-136*/ body{ font-family: "Open Sans", sans-serif; background: #fff; font-size:15px; } /*AW #2 Change Header Background Colour i.e. where Menu is and Add a line at the bottom of the Header*/ .header{ background-color:#fff !important; /*border-bottom: 5px solid #e0e0e0;*/ box-shadow: 0px 5px 10px #0000001a; margin-bottom: 10px; } /*AW #3 Modify Side Padding to align the logo & menu*/ @media (min-width: 768px){ .header{ padding:33px 120px; } .nav { padding-top:10px; padding-left:20px; } } @media (max-width: 768px){ .header{ padding:0px 0 0 0; /*20px 0 0 0*/ } .navbar{ margin:0 0 0px 0px; /*0 0 10px 10px*/ } } /*AW #4 Remove padding on the sides of the website - this padding on original css prevented the header & footer from stretching the full 100% Also removed the extra border line that is at the top of Protostar*/ body.site { padding: 0px; border-top:0px !important; } .container-fluid { padding-right: 0; padding-left: 0; } /*AW #5 Change Menu Font, Size & Spacing*/ .nav { margin:0; font-size:13.7px; font-family: "Open Sans", sans-serif; text-transform:uppercase; } /*AW #6 Change Menu Link Colours */ .nav a{ color:#000; font-weight: normal; } /*AW #7 Change Menu Hover Effect to not have a "bubble" around the link when mouse overs over it. Also change hover colour */ .nav > li > a:active, .nav > li > a:hover, .nav > li > a:focus { color:#fff; background:#e2ac36 !important; } .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover { background:#e2ac36 !important; color:#fff; } /*AW #8 Add padding to menu*/ .navigation { padding: 5px 0 5px 10px; border: none; margin:5px 0 0 0; } /*AW #9 Additional DIV created to add padding to the sides of the website so that text does not touch the sides - we removed the original padding from the body so that the header/footer can stretch,so now we are adding it again. Added the DIV to index.php line 179-188*/ #wrapping{ padding: 10px 0px 0px 10px; } /*AW #10 Footer Background Colour & Text Colour */ .footer{ background-color: #000; color:#fff; margin-top: 20px; } /*AW #11 Protostar has a horizontal line at the bottom of the page, this is to change the line's colour */ hr { border-top:1px solid #d5dae0; border-bottom:none; } /*AW #12 Create a new DIV for index.php - Added padding to the sides of the text in the footer line 215-229*/ #footer-wrapping{ padding:0 20px 20px 20px; } /*AW #13 Changed the padding between the MAIN CONTENT and RIGHT SIDE POSITIONS to be less */ .row-fluid [class*="span"] { margin-left: 1.127659574%; } /*AW #14 Remove grey bubble around 3-line menu icon */ .navbar .btn-navbar { background: #fff !important; /*#088fc1*/ border-color: #fff !important; } .btn btn-navbar collapsed{ background:transparent !important; } /*AW #15 Sponsor Logo Background*/ #whitebckg { /*background: #fd4c4c !important;*/ margin: 0px!important; padding: 0px 10px 0px 0px; float: right !important; max-height: 105px !important; } .site-title{ padding-left:20px !important; } /*AW #16 Sponsor Logo Background on small screens*/ @media (max-width: 768px) { #whitebckg { /*background: #fd4c4c !important;*/ margin: -20px 30px 0px 0px!important; /*-15px 124px 5px 0px!important*/ padding: 0px 0px 0px 0px; /*float: right;*/ max-height: 105px !important; } } .site-title{ padding-left:20px !important; } /*AW #17 Change layout for top 4 banners - when viewed on mobile and desktop*/ @media (max-width: 768px){ .bant .bannergroup .banneritem { width: 46% !important; float: left !important; display: inline !important; padding-right: 4% !important; } } @media (min-width: 769px){ .bant .bannergroup .banneritem { width: 24% !important; float: left !important; display: inline !important; padding-right: 1% !important; margin-right:0 !important; } } /*MHE #1 change and shading outline of CLOSED / COMING SOON / FUNDED */ .twk-camp-soon .twkc-item-image::before, .twk-camp-closed .twkc-item-image::before, .twk-camp-funded .twkc-item-image::before, .twk-camp-soon .card-img::before, .twk-camp-closed .card-img::before, .twk-camp-funded .card-img::before { border: 2px solid #78CBEA; background: #ee7d00 transparent; color: #000; } /*MHE #2 slider3 - scroll fix - nextend – to disable scrolling on large slider*/ body, html { overflow: auto !important; } /*MHE #3 to have banner adverts horizontal in small screen/devices - size option 768px*/ @media (max-width: 768px) { .bannergroup .banneritem { /*AW */ float: none !important; /*AW width: 30%; */ /*AW*/ padding-right: 10px; /*AW padding-left: 10px;*/ } } .bannergroup .banneritem img { max-width: 100%; height: auto; } /*MHE #4 to increase spacing between banners/adverts in vertical position */ .banneritem { margin-bottom: 10px; } /*MHE #5 Change radius of image and show/hide shadow inside Featured Pin */ .twkc-item-featured .twkc-item-buttons { text-align: center; } /*MHE #6 Desktop Menu when selected - Yellow Colour */ .nav-pils > .active > a{ color: #000; background-color: #ffff00 !important; } .fwcss .btn-notify { background-color: #4472C4; border-color: #4472C4; color: #ffffff; } /*MHE #7 sets logo-text colour ...*/ .site-title { color: #fff; font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; padding-left: 35px; padding-top: 10px; font-size: 35px; line-height: 65px; font-weight: bold; } /*MHE #8 Changes colour of logo-text when hover*/ .site-title:hover { color: #ffff00; text-decoration: none; } /*MHE #9 Make donate/read more button rounder*/ .twkc-item-buttons .btn { width: 42%; margin: 5px; text-align: center; padding: .5rem 0; border: 0; border-radius: 10px !important; /* box-sizing: border-box; */ } /*MHE #10 Remove sticky from READ MORE page*/ .fwcss .sticky-top { position: -webkit-sticky; position: relative; /*position = sticky*/ top: 0; } /*MHE #11 Unbold Font main area in Read More Screen*/ .twkcampaigns-item .card-block { font-weight: normal; } /*MHE #12 keep Font in Stats Bold in Read More Screen*/ .twkc-item-featured .twkc-item-stats { font-weight: bold; } /*MHE #13 Full Image to Fit in Container in Read More Screen*/ .twkcampaigns .twkc-item-image iframe, .twkcampaigns .card-img iframe, .twkcampaigns .twkc-item-image img, .twkcampaigns .card-img img { object-fit: fill; } /*MHE #14 Background colour of main container*/ .twkcampaigns { background: #eefeff; } /*MHE #15 this fixes SAFARI browser layout */ @media (min-width: 992px) { .fwcss .col-lg-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33%; max-width: 33%; } } /*MHE #16 Position of Image in Featured pin */ .twkc-item-featured .twkc-item-image, .twkp-item-featured .twkp-item-image { position: relative; max-height: 205px; z-index: -1; } /*MHE #17 Position of Image in Featured Pin */ .twkc-item-featured .twkc-item-image img, .twkp-item-featured .twkp-item-image img { max-height: 140%; height: 140%; width: auto; border-radius: 0rem; overflow: hidden; box-shadow: -0.25rem 0.25rem 0.5rem #0000; object-fit: COVER !IMPORTANT; } @media (max-width: 768px) { .twkc-item-featured .twkc-item-image img, .twkp-item-featured .twkp-item-image img { max-height: 100%; height: 100%; width: auto; border-radius: 0rem; overflow: hidden; box-shadow: -0.25rem 0.25rem 0.5rem #0000; object-fit: COVER !IMPORTANT; } } /*MHE #18 make payment options on donate page larger*/ label, input, button, select, textarea { font-size: 18px; font-weight: normal; line-height: 35px; } /*MHE #19 Change colour of LOGIN form text - without this it uses colour of menu button - see template.css line 3029*/ .nav-tabs.nav-stacked > li > a { color: #000; } /*MHE #20 - decrease height of PUBLIC PIN and change colour or bottom "name" strip and change size of font "name" strip*/ .twkpublic-item .card-wrapper { height: 375px; } @media (max-width: 768px) { .twkpublic-item .card-wrapper { height: 390px; } } /*MHE #21 Change size and colour of pin border and accrynom background colour*/ .twkpublic-item .twkp-item-company { font-size: .8rem; background: #ffd504; } /*MHE #22 change radius of donate/read more buttons*/ .twkp-item-buttons .btn { border-radius: 9px !important; } /*MHE #23 change background containetr colour*/ .twkpublic { background: #fbea97; } /*MHE #24 Change background colour of ANONYMOUS pop-up*/ .fwcss .alert-info { background-color: #ffffff; border-color: #000000; color: #000000; font-weight: 600; } /*MHE #25 Change background and text colour for NPO Certificate Reminder*/ .fwcss .alert-danger { background-color: #fd0000; /* border-color: #ebcccc; */ color: #ffffff; font-size: 13pt; } /* MHE #26 Increase text area block height */ .fwcss .form-control { line-height: 1.50; } /* MHE #27 Increase size of category dropdown menus*/ .fwcss select.form-control-sm:not([size]):not([multiple]), .fwcss .input-group-sm > select.form-control:not([size]):not([multiple]), .fwcss .input-group-sm > select.input-group-addon:not([size]):not([multiple]), .fwcss .input-group-sm > .input-group-btn > select.btn:not([size]):not([multiple]) { height: 2.5rem; color: #000; background-color: #fff; } .fwcss .form-control-sm, .fwcss .input-group-sm > .form-control, .fwcss .input-group-sm > .input-group-addon, .fwcss .input-group-sm > .input-group-btn > .btn { font-size: 1rem; } /*MHE #28 change colour of menu in mobile display*/ @media (max-width: 768px /*979px*/) { .nav-collapse .nav > li.active > a { color: #fff; } } @media (max-width: 768px /*979px*/) { .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { color: #000; } } /* MHE #29 Move mobile menu button to right*/ .navbar .btn-navbar { margin-left: 20px; } /*MHE #30 Change layout of dropdown menus in mobile @media (max-width: 768px) { /.fwcss button,/ .fwcss input, .fwcss optgroup, .fwcss select, .fwcss textarea { margin: 5px 286px 0px 0px; } }*/ /*MHE #31 Change spcingspacing betwwen dropdown menu items*/ .fwcss button, .fwcss input, .fwcss optgroup, .fwcss select, .fwcss textarea { margin: 2px; } /*MHE #32 change Read More Button colour*/ .twkp-item-buttons .btn-readmore { background: #e2dfdf; font-weight: 600; } /*MHE #33 Hide PRocessing Fee Opt-in .row.form-group.twk-process-fee { display: none !important; }*/ /*MHE #34 Submit Button on Individual Application Form*/ @media (min-width: 768px) { .convertforms .cf-btn { width: 86px; margin-left: 250px; } } /*MHE #35 increase spacing beweetn "advert" and blue background/frame*/ form { margin: 0px 0px 0px 0px; } @media (max-width: 786px) { form { margin: 0px 15px 0px 0px; } } /*MHE #36 make font size of stats amounts smaller in mobile view*/ @media (max-width: 768px) { .twkp-item-stats .col { font-size: 75%; } } /*MHE #37 change menu style options*/ .nav-pills > li > a { padding-top: 56px; padding-bottom: 38px; padding-left: 20px; padding-right: 20px; margin-top: -70px; margin-bottom: 0px; margin-right: 0px; border-radius: 0px; } @media (max-width: 768px /*979px*/) { #wrapping { padding: 0px 0px 0px 10px; } } /*MHE #38 Move navigation to right*/ .pull-left { margin: 0px 111px 0px 0px; } /*MHE #39 Aligh Brand to centre in Mobile device*/ @media (max-width: 768px) { .header .brand { float: none; display: block; text-align: center; width: 25%; padding: 10px 0px 0px 145px; } } .navbar .btn-navbar .icon-bar { background-color: #000; }