/*
Theme Name: Web Anchor Boilerplate
Theme URI: http://webanchor.co.za
Author: WebAnchor
Author URI: http://themetailor.co.za
Description: Webanchor Boiler Plate Theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-anchor-boilerplate
Tags: editor-style
*/





/** Keep drop-downs working **/

:root {
  --yellow: #FFCC00;

}
img { display: block; }

#access li { position: relative; }
#access ul ul { display: none; float: left; position: absolute; top: 3.333em; left: 0; z-index: 99999; }
#access ul ul ul { left: 100%; top: 0; }
#access ul li:hover > ul { display: block; }

input[type=text],select {  font-family:'ff-meta-web-pro', Arial; border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
textarea { height: 100px; border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; }
input[type=submit] { border: 1px solid #CCC; background: #FFF; text-align: center; padding: 10px; cursor: pointer; }
input[type=submit]:hover { background: #CCC; }

input[type=submit] { font-size: 15px; color: #022B33; list-style: none; margin: 0 0 0 20px ; padding: 0; display: inline-block; }
input[type=submit] { box-shadow: 0 1px 1px 0px rgba(0,0,0,0.16); font-size: 18px; display: inline-block; text-align: center; min-width: 26px; height: 26px; line-height: 26px; box-sizing: border-box; text-decoration: none; background: #FFF; border-radius: 3px; color: var(--yellow); padding: 0; font-weight: bold; margin-left: 5px; }
input[type=submit]:hover { background: var(--yellow); color: #FFF; }

.sr-only,.login label {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

input, textarea { box-sizing: border-box; }
.group:after,.container:after { content: ""; display: table; clear: both; }

@media screen and (min-width: 960px) {
     .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);
     }

     .alignwide {
     max-width: 80vw;
     width: 80vw;
     margin-left:  calc(50% - 40vw);
}
}

/* ========================================================================== */
/* CUSTOM STYLES */
.container { max-width: 96%; margin: 0 auto; position: relative; }
body { color: #022B33; font-family:'ff-meta-web-pro', Arial; font-size: 18px; line-height: 25px; padding-top: 55px; }
body p.intro { font-size: 19px; line-height: 24px; }
h1,h2,h3,h4,h5,h6 { font-family:'ff-meta-web-pro-condensed', Arial; font-weight: 700; line-height: 1.5; }

h1 { font-size: 55px; }
h2 { font-size: 30px; line-height: 40px; font-weight: 500; }
h3 { font-size: 35px; font-weight: 300; letter-spacing: -1px; }
h4 { font-size: 35px;  }
h5 { font-weight: bold; font-size: 25px; letter-spacing: 0.2px; }

.yellow { color: var(--yellow); }
.blue { color: #022B33; }

p { font-family:'ff-meta-web-pro'; font-size: 18px; line-height: 1.5; }
a { transition: all 250ms ease; }
figure { margin: 30px auto!important; }
figure img { border-radius: 25px; }
figcaption { font-size: 15px;  }
figcaption a { color: #022B33; }
figcaption a:hover { color: var(--yellow); }
.max100 figure.is-resized img { max-height: 100px; width: auto; }

header { background: var(--yellow); position: fixed; top: 0; left: 0; width: 100%; height: 55px; z-index: 9999; }
header h1 { margin: 0; padding: 0; text-align: center; position: absolute; left: 10px; top: 5px; }
header h1 a {  background: url('img/logo.png') no-repeat; width: 62px; height: 45px; display: block; text-indent: -9999px; background-size: 100%; margin: 0 auto 0; } 

#navi { width: 100%; display: block; height: 55px; line-height: 55px; }
#navi ul { width: 100%; list-style: none; padding: 0; margin: 0; text-align: center; }
#navi ul li { display: inline; margin: 0; padding: 0 10px; }
#navi ul li a { letter-spacing: 1px; color: #022B33; font-size: 17px; font-family: 'ff-meta-headline-web-pro-com'; font-weight: 700; text-transform: uppercase; text-decoration: none; }
#navi ul li a:hover,#navi ul li.current-menu-item a { color: #FFF; text-shadow: 0px 1px 2px rgba(0,0,0,0.16); }
#mobibox { display: none; }

footer { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--yellow); text-align: center; padding: 10px 0; color: #FFFFFF; font-size: 11px; height: 50px; box-sizing: border-box; z-index: 99999; }
footer .container { display: flex; }
footer .container > div { width: 37%; display: flex; align-items: center; }
footer .container > div.right {  width: 63%; justify-content: flex-end; }

footer ul { list-style: none; margin: 0; padding: 0; text-align: right; height: 100%; line-height: 32px; display: flex; align-items: center; align-self: center; }
footer ul li { font-size: 15px; color: #022B33; list-style: none; margin: 0 0 0 20px ; padding: 0; display: inline-block; }
footer ul li a.footbtn { box-shadow: 0 1px 1px 0px rgba(0,0,0,0.16); font-size: 13px; display: inline-block; text-align: center; min-width: 20px; height: 20px; line-height: 20px; box-sizing: border-box; text-decoration: none; background: #FFF; border-radius: 3px; color: var(--yellow); padding: 0; font-weight: bold; margin-left: 5px; }
footer ul li a.footbtn:hover { background: var(--yellow); color: #FFF; }
footer ul li a.join { padding: 0 6px; }
footer ul li a.footlink { color: #022B33; font-weight: bold; text-decoration: none; }
footer ul li a.footlink:hover { color: #FFF; }
footer span.healthgap { background: url('img/footer-health-gap.png') no-repeat; width: 105px; height: 22px; display: block; text-indent: -9999px; background-size: 100%; margin: 0; float: left; } 
footer span.pepfartext { font-size: 10px; color: #022B33; line-height: 11px; display: block; margin-left: 10px; float: left; width: 170px; font-weight: normal; text-align: left; }

section.content { padding-bottom: 50px;}

#head { width: 100%; height: auto; position: relative; }
#head img { max-width: 100%; width: 100%; height: auto; }
#head .size-thumbnail { display: none; }
#head h1 { margin: 0; padding: 0; text-align: center; position: absolute; left: 0; right: 0; top: 0; text-align: center; }
#head h1 a {  background: url('img/logo-big.png') no-repeat; width: 454px; height: 321px; display: block; text-indent: -9999px; background-size: 100%; margin: 0 auto 0; } 
#head h2 { font-size: 55px; line-height: 55px; width: 50%; color: var(--yellow); text-transform: uppercase; margin: 0 auto; padding: 0; text-align: center; position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; letter-spacing: 1px; font-weight: 600; }

/* FORM */
.page-template-template-forms main { max-width: 700px; }
.gform_wrapper { max-width: 620px!important; margin: 20px auto!important; }
.gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half { padding-right: 0!important; }
.gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) { margin: 0 auto!important; }
.gform_wrapper textarea.large { max-height: 160px!important; }
/*
.gform_footer input[type=submit] { transition: all 250ms ease; background: #000; color: #FFF; margin: 0 auto!important; display: block!important; width: 400px!important; max-width: 90%; float: none; }
.gform_footer input[type=submit]:hover { opacity: 0.5; }

*/
.gform_wrapper label.gfield_label, .gform_wrapper legend.gfield_label { font-weight: normal!important; }
.gform_wrapper ul.gform_fields li.gfield { padding-right: 0!important; }
.gform_wrapper .gform_footer { padding-top: 0!important; margin-top: 0!important; }
.gform_footer input[type=submit] { border: none; background: var(--yellow); list-style: none; margin: 0; padding: 10px; color: #FFF; box-shadow: 0 1px 1px 0px rgba(0,0,0,0.16); font-size: 21px; display: i-block; text-align: center; height: auto; line-height: 1; box-sizing: border-box; text-decoration: none; border-radius: 10px; font-weight: bold;  }
.gform_footer input[type=submit]:hover { background: #022B33; color: #FFF; }

.nodesk { display: none; }

main { width: 800px; max-width: 98%; margin: 40px auto 80px; } 
main p a { color: var(--yellow); }
main.posts { width: 800px; max-width: 98%; margin: 0 auto; -webkit-columns: 2 360px; -moz-columns: 2 360px; columns: 2 360px; }
main article img,.wp-block-image:not(.is-style-rounded) img { max-width: 100%; width: 100%; height: auto; border-radius: 0 0 5% 5% !important; border-top: 10px solid var(--yellow); }
main article img {  box-shadow: 0 3px 6px 0px rgba(0,0,0,0.16); }
main .image-120 img { max-width: 120px!important; border:none!important; }
main h2 a, main h3 a { color: #022B33; }
main h2 a:hover, main h3 a:hover { color: var(--yellow); }
.page-template-template-resources main { margin-bottom: 80px; }

.members { padding: 30px 0; }

.members ul.slider li {}
.members ul.slider li a { height: 100px; display: block; display: flex; align-items: center; justify-content: center; }
.members ul.slider li a img { width: auto; height: auto; border-radius: 0; max-height: 100px; max-width: 90%; }
.members .lSSlideOuter { height: 130px; }

.single h2.post-title { font-size: 35px; line-height: 33px;  color: var(--yellow); text-transform: uppercase; margin: 0 auto; padding: 0; text-align: left;  letter-spacing: 1px; font-weight: 600; }
.single article { margin: 100px auto; }
.single article p { text-align: left; }
.single article p a { color: #022B33; }
.single article p a:hover { color: var(--yellow); }
.single article p.intro { margin-bottom: 20px; }
.single span.meta { display: block; font-weight: bold; margin: 20px 0; }

.search h2.post-title { font-size: 35px; line-height: 33px;  color: #022B33; text-transform: uppercase; margin: 40px auto; padding: 0; text-align: center;  letter-spacing: 1px; font-weight: 600; }

.grid { margin: 60px auto; }
.grid-sizer,
.grid > article { width: 21%; margin-bottom: 20px; }
.grid > article a.get-link { font-family:'ff-meta-web-pro-condensed'; font-size: 21px; color: var(--yellow); text-align: center; text-decoration: none; font-weight: 600; display: block; margin-top: 10px; }
.grid > article a.get-link:hover { color: #022B33; }
.gutter-sizer { width: 5%; }
.grid > article { text-align: center; }
.grid > article h2 { font-size: 20px; line-height: 22px; text-transform: uppercase; font-weight: 600;  margin: 15px 0 5px; }
.grid > article h2 a { color: #022B33; text-decoration: none; }
.grid > article h2 a:hover { color: var(--yellow); }
.grid > article .entry-content { font-size: 16px; line-height: 20px; margin: 10px auto 0; }


.grid-2 { margin: 60px auto 0; display: flex; flex-wrap: wrap; gap: 8%; }
.grid-2 > article { width: 46%; }
.grid-2 > article { text-align: center; margin-bottom: 30px; }
.grid-2 > article h2 { font-size: 20px; line-height: 22px; text-transform: uppercase; font-weight: 600; margin: 15px 0; }
.grid-2 > article h2 a { color: var(--yellow); text-decoration: none; }
.grid-2 > article h2 a:hover { color: #022B33; }
.grid-2 > article .entry-meta { text-transform: uppercase; }
.grid-2 > article p { font-size: 16px; line-height: 20px; margin: 10px auto 0; }

.filter-button-group { text-align: center; list-style: none; }
.filter-button-group li { display: inline-block; }
.filter-button-group button,.filter-button-group li a { text-decoration: none; cursor: pointer; font-family:'ff-meta-web-pro-condensed'; font-size: 28px; line-height: 28px; text-transform: uppercase; font-weight: 600; border: none; background: transparent; color: var(--yellow); }
.filter-button-group button:hover,.filter-button-group li a:hover { color: #7E9397; }


.category-nav { text-align: center; list-style: none; margin: 40px 0;}
.category-nav ul {  margin: 0; padding: 0;  }
.category-nav li { display: inline-block; margin: 0 20px 0 0; padding: 0 20px 0 0; border-right: 5px solid #7E9397;  }
.category-nav li:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.category-nav li a { text-decoration: none; cursor: pointer; font-family:'ff-meta-web-pro-condensed'; font-size: 28px; line-height: 28px; text-transform: uppercase; font-weight: 600; border: none; background: transparent; color: #7E9397; }
.category-nav li a:hover,.category-nav li.current-menu-item a { color: var(--yellow); }

/* DROPDOWN */
.custom-select-wrapper { position: relative; user-select: none; width: 180px; margin: 0 auto; }
.custom-select { position: relative; display: flex; flex-direction: column; border-width: 0 2px 0 2px; border-style: solid; border-color: #022B33; }
.custom-select__trigger {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-weight: 300; color: #3b3b3b; height: 30px; line-height: 30px; background: #ffffff; cursor: pointer; border-width: 2px 0 2px 0; border-style: solid; border-color: #022B33; font-size: 15px; text-align: left; }
.custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; border: 2px solid #022B33; border-top: 0; background: #fff; transition: all 0.5s; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; }
.custom-select.open .custom-options { opacity: 1; visibility: visible; pointer-events: all; }
.custom-select button { position: relative; display: block; padding: 0 10px; font-size: 17px; font-weight: 300; color: #3b3b3b; line-height: 30px; cursor: pointer; transition: all 0.5s; width: 100%; display: block;  border: none; border-bottom: 1px solid #809498; background: #FFF; text-align: left;}
.custom-select button:hover { cursor: pointer; background-color: #022B33; color: #FFF; }
.custom-select button.selected { color: #ffffff; background-color: #022B33; }
.arrow { position: relative; height: 15px; width: 15px; }


.arrow::before, .arrow::after { content: ""; position: absolute; bottom: 0px; width: 0.15rem; height: 100%; transition: all 0.5s; }

.arrow::before { left: -5px; transform: rotate(-45deg); background-color: #022B33; }
.arrow::after { left: 5px; transform: rotate(45deg);  background-color: #022B33; }

.open .arrow::before { left: -5px; transform: rotate(45deg);  }
.open .arrow::after { left: 5px; transform: rotate(-45deg); }


#topborder { border-top: 3px solid #022B33; }



/* SEARCHBOX */
#lognav { position: absolute; right: 0; top: 0; height: 55px; }

input::placeholder { color: #022B33; opacity: 1; font-weight: 300; }

#searchbox { position: absolute; right: 20px; top: 0;  } 
#searchbox span.searchpop { position: absolute; right: 0; top: 0; float: left; cursor: pointer; width: 30px; height: 55px; text-align: center; background: url('img/icon-search.png') no-repeat; text-indent: -9999px; background-position: center; background-size: 16px; }
#searchbox span.closer { background: var(--yellow); display: none; position: absolute; right: -30px; top: 0; float: left; cursor: pointer; width: 30px; height: 55px; text-align: center; line-height: 55px; }
#searchbox span.closer i { transition-duration: 0.8s; transition-property: transform;  }
#searchbox span.closer i:hover {  transform: rotate(360deg); -webkit-transform: rotate(360deg); }
#searchbox form { border: none; background: #FFE067; display: none; position: absolute; right: 0; width: 300px; top: 10px; border-radius: 5px; }
#searchbox form label { display: none; }
#searchbox form input#search { background: #FFE067; text-align: left; border: none; width: 250px; margin: 0; height: 35px; line-height: 35px; font-size: 15px; color: #022B33; }
#searchbox form input[type=image] { border: none; position: absolute; right: 10px; top: 10px; float: left; cursor: pointer; width: 16px; height: 16px; text-align: center; }

#logbox { position: absolute; right: 0; top: 0;  } 
#logbox span.open { color: #022B33; line-height: 55px; }

.login { display: none; background: var(--yellow); position: absolute; top: 55px; right: 0; width: 280px; box-sizing: border-box; padding: 30px 15px 10px; }
.login strong { font-size: 16px; }
.login p { margin: 0 0 10px 0; font-size: 14px; line-height: 16px; }
.login span.closing { position: absolute; right: 10px; top: 10px; float: left; cursor: pointer; width: 16px; height: 16px; text-align: center; line-height: 16px; }
.login span.closing i { transition-duration: 0.8s; transition-property: transform;  }
.login span.closing i:hover {  transform: rotate(360deg); -webkit-transform: rotate(360deg); }
.login input[type=text],.login input[type=password] { font-family: 'ff-meta-web-pro', Arial; border-radius: 5px; padding: 10px; box-shadow: 0 1px 1px 0px rgba(0,0,0,0.16); background: #FFE067; text-align: left; border: none; width: 250px; margin: 0; height: 35px; line-height: 35px; font-size: 15px; color: #022B33; }

.login a,.login input[type=submit] { display: inline-block; border: none; background: #FFF; list-style: none; margin: 0; padding: 5px 10px; color: #022B33; box-shadow: 0 1px 1px 0px rgba(0,0,0,0.16); font-size: 14px; display: i-block; text-align: center; height: auto; line-height: 1; box-sizing: border-box; text-decoration: none; border-radius: 5px; font-weight: bold; text-transform: uppercase; }
.login a:hover,.login input[type=submit]:hover { background: #022B33; color: #FFF!important; }

.mobi { display: none; }
#mobinav { display: none; }

.wp-pagenavi { text-align: center; padding: 0 0 150px; }
.wp-pagenavi span,.wp-pagenavi a { background: var(--yellow); width: 36px; height: 36px; box-sizing: border-box; color: #022B33; border: 1px solid #022B33!important; display: inline-block; }
.wp-pagenavi a:hover,.wp-pagenavi span { background: #022B33; color: #FFF; }

h4.yellowhead { color: var(--yellow); text-align: center; text-transform: uppercase; }

.countries {  }
.countries figure { margin: 0 auto 10px!important; }
.countries h5 { margin: 0 auto!important; }
.countries p { margin-top: 0; font-size: 16px; line-height: 20px; }

.search-no-results .container { margin-bottom: 80px; }
.search-no-results .container h2, .search-no-results .container p  { text-align: center; }

.search-results .entry-meta { margin-bottom: 10px; text-transform: uppercase; }
.max100 img { border-radius: 0!important; border: none!important; }


/* MEDIA QUERIES */

@media all and (max-width: 2400px) {

}

@media all and (max-width: 1280px) {

}

@media all and (max-width: 768px) {
    #mobibox { display: block; margin: 0; position: fixed; top: 13px; right: 50px; text-shadow: 0px 1px 2px rgba(0,0,0,0.16); }
    #mobibox #showmobi { float: left; cursor: pointer; width: 50px; height: 27px; text-align: center; background-size: 100%; line-height: 27px; font-size: 24px; cursor: pointer; }

    #navi { display: none; }

    footer .container > div.right span { display: none;  }

    .mobi { display: block; }
    .desktop { display: none!important; }

    footer .container .left { text-align: left; color: #022B33; }

    #head h1 a { width: 300px; height: 200px; }
    #head h2 { width: 60%; font-size: 35px; line-height: 35px; }

    #mobinav { display: none; width: 100%; background: var(--yellow); position: fixed; height: 100vh; padding: 20px; top: 0; left: 0; text-align: center; box-sizing: border-box; }
    #mobinav ul { list-style: none; margin: 0; padding: 0; }
    #mobinav ul li { margin: 20px 0; letter-spacing: 1px; color: #FFF; font-size: 26px; font-family: 'ff-meta-headline-web-pro-com'; font-weight: 700; text-transform: uppercase; text-decoration: none; }
    #mobinav ul li a { text-decoration: none; text-transform: uppercase; color: #FFF; text-shadow: 0px 1px 2px rgba(0,0,0,0.16); }

    #mobinav #headsearch form { position: relative; border: none; background: #FFE067; display: block; width: 300px; border-radius: 5px; margin: 20px auto; }
    #mobinav #headsearch form label { display: none; }
    #mobinav #headsearch form input#search { background: #FFE067; text-align: left; border: none; width: 300px; margin: 0; height: 35px; line-height: 35px; font-size: 15px; color: #022B33; }
    #mobinav #headsearch form input[type=image] { border: none; position: absolute; right: 10px; top: 10px; float: left; cursor: pointer; width: 16px; height: 16px; text-align: center; }

    #mobinav span.closeit { color: #022B33; background: var(--yellow); position: absolute; right: 15px; top: 15px; float: left; cursor: pointer; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 30px; }
    #mobinav span.closeit i { transition-duration: 0.8s; transition-property: transform;  }
    #mobinav span.closeit i:hover {  transform: rotate(360deg); -webkit-transform: rotate(360deg); }

    #lognav.open { display: block; width: 100%; background: var(--yellow); position: fixed; height: 100vh; padding: 20px; top: 0; left: 0; text-align: center; box-sizing: border-box; }
}


@media all and (max-width: 568px) {
    body { padding-top: 0; }
    p { font-size: 17px; line-height: 23px; }
    h2 { font-size: 24px; line-height: 28px; }
    h3 { font-size: 24px; line-height: 28px; }
    h4 { font-size: 26px; }
    .single h2.post-title { font-size: 25px; line-height: 25px; }
    header { color: var(--yellow); height: 200px; width: 50px; background: transparent; position: absolute; top: 0; right: 0; left: auto; }
    header h1 { display: none; }
    header .container { width: 100%; max-width: 100%; height: 100%; }
    header .login { color: #022B33; width: 100%; position: fixed; top: 0; height: 100vh; }

    #lognav { position: absolute; right: 0; top: 50px; height: 70px; width: 100%; text-align: center; }
    #lognav #searchbox { position: relative; top: auto; left: auto; width: 100%; display: block; height: 30px; right: auto; }
    #lognav #logbox { position: relative; top:  auto; left: auto; width: 100%; display: block; height: 40px; right: auto; }
    #searchbox span.searchpop { background: url('img/icon-search-mobi.png') no-repeat; background-size: 22px; background-position: top center; width: 50px; }
    #logbox span.open { color: var(--yellow); font-size: 22px; }
    #mobibox { top: 5px; right: 0; }
    
    #head .size-thumbnail { display: block; }
    #head .size-full { display: none; }
    #head h2 { font-size: 34px; width: 96%; line-height: 1; }

    main { margin: 40px auto; max-width: 90%; }

    footer { height: auto; padding: 5px 0; }
    footer ul li { margin: 0; }
    footer .left .mobi { line-height: 1; margin-bottom: 5px;}
    footer .container > div { width: 45%; }
    footer .container > div.right { width: 55%; height: 46px; }
    
    .category-nav { margin: 20px 0; }
    .category-nav li { border-right-width: 3px; margin: 0 10px 0 0; padding: 0 10px 0 0; }
    .category-nav li a { font-size: 20px; line-height: 25px; }

    .grid-2 { margin: 0 auto 60px; }
    .grid-sizer-2, .grid-2 > article { width: 100%; }

    .grid-sizer, .grid > article { width: 45%; }    
    .grid > article h2 { font-size: 20px; line-height: 20px; }
    .grid > article a.get-link { font-size: 17px; }

    #headsearch form input[type="image"] { top: 20px!important; }
    #headsearch form input#search { height: 55px!important; line-height: 55px!important; }

    #searchbox span.closer { width: 30px; font-size: 30px; right: -10px; top: -10px; height: 30px; line-height: 30px; }
    #searchbox span.closer i { color: #022B33; }
    #lognav.open #searchbox form { position: relative; }
    #headsearch { padding-top: 100px; }
    #searchbox form { width: 100%; }

    footer ul { display: flex; width: 100%; justify-content: space-between; }
    footer ul li { line-height: 18px; font-size: 12px; }
    footer ul li a.footbtn { font-size: 15px; line-height: 23px; height: 23px; min-width: 23px; }

    footer .container > div { flex-wrap: wrap; }
    footer span.healthgap { width: 140px; height: 29px; }




}