/*
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 **/
#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] { border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; }
textarea { height: 100px; border: 1px solid #CCC; background: #FFF; width: 100%; padding: 10px; margin-bottom: 10px; }
input[type=submit] { border: 1px solid #007F56; background: none; text-align: center; padding: 10px; cursor: pointer; color: #007F56; }
input[type=submit]:hover { background: #007F56; border-color: #007F56; color: #FFF; }
input, textarea { box-sizing: border-box; }
#commentform a,.commentlist a { color: #007F56; }

.group:after,.container:after { content: ""; display: table; clear: both; }

.screen-reader-text { text-indent: -9999px; height: 1px; display: block; }

/* ========================================================================== */
/* CUSTOM STYLES */
img { max-width: 100%; height: auto; }
body { border-top: 5px solid #007F56;  margin: 0; font-family: 'Roboto', sans-serif; font-weight: 300; color: #1B143A; line-height: 1.4; font-size: 14px; }
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto', serif; letter-spacing: .5px; }

header { position: relative; margin: 0; padding: 20px 0; border-bottom: 5px solid #1B143A; }
header h1 { margin: 0; padding: 0; float: left; }
header h1 a { background: url('img/logo-briza.png') no-repeat; text-indent: -9999px; width: 170px; height: 75px; display: block; background-size: 100%; margin: 0; color: #FFF; font-size: 60px; text-decoration: none; line-height: 1;  } 


nav#access { float: right; text-align: right; padding: 0; color: #FFFFFF; font-size: 12px; letter-spacing: 1px; height: 75px; line-height: 75px; margin-right: 10%; }
nav#access ul { margin: 0; padding: 0; }
nav#access ul li { display: inline-block; margin: 0 auto; }
nav#access ul li a { color: #1B143A; padding: 0 10px; display: block; margin:  0 10px; text-decoration: none; font-weight: 400; }
nav#access ul li:last-child a { padding-right: 0; margin-right: 0; }
nav#access ul li a:hover,nav#access ul li.current-menu-item a { color: #007F56; text-decoration: none; }
#mobibox { display: none; }

footer { background: #007F56; border-top: 1px solid #FFF; letter-spacing: 1px; text-align: center; padding: 10px 0; color: #FFFFFF; font-size: 11px; margin-top: 50px; }
footer a { color: #FFFFFF; text-decoration: none; text-transform: uppercase; }
footer a:hover { color: #1B143A; text-decoration: none; }


.container { max-width: 960px; width: 96%; margin: 0 auto; }

main { max-width: 960px; width: 96%; margin: 0 auto; display: flex;  flex-wrap: wrap; justify-content: center; }
main article { flex: 2; }
main aside { flex: 1; }

section#content h1 { font-size: 30px; margin-bottom: 20px; line-height: 1;  }
section#content p {  }
section#content p a,section#content ul, section#content ul li, section#content ul li a { color: #1B143A; }
section#content p a:hover, section#content ul li a:hover { color: #007F56; }
section#content p strong,section#content li strong { font-weight: 900; }
section#content ul li { list-style: outside; }

section#content h2 { background: #007F56; color: #FFF; padding: 10px; box-sizing: border-box; }
section#content h3 { background: #1B143A; color: #FFF; padding: 10px; box-sizing: border-box; }

.category main { display: grid; overflow: hidden; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 20px; }
.category article {  margin-bottom: 20px; }
.category article img { width: 100%; height: auto; }
.category article h2 { color: #FFF; font-size: 16px; line-height: 1.4; }
.category article h2 a { color: #FFF; text-decoration: none; }
.category article h2 a:hover { color: #007F56; }
.category article a.btn-read-more { color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 11px; }
.category article a.btn-read-more:hover { color: #007F56; }
.category article p { font-size: 14px; line-height: 1.4; }

.entry-meta,.entry-meta a { font-size: 11px; color: #007F56; text-decoration: none; text-transform: uppercase; }
.entry-meta a { color: #007F56;  }
.entry-meta a:hover { color: #007F56; }


.heading { text-align: left; max-width: 960px; width: 96%; margin: 0 auto; }

aside.pagination { max-width: 960px; width: 96%; margin: 0 auto; }
.paginate-links { display: block; width: 100%; text-align: center; margin: 0; padding: 0; }
.paginate-links span { list-style: none; display: inline-block; display: inline-block;border: 1px solid #007F56; height: 30px; line-height: 30px; min-width: 30px; width: 30px; }
.paginate-links a { text-decoration: none; background: #007F56; color: #FFF; display: inline-block; border: 1px solid #007F56; height: 30px; line-height: 30px; min-width: 30px; width: 30px; }
.paginate-links a:hover { background: #FFF; color: #007F56;}
.paginate-links a.prev,.paginate-links a.next { background: none; border: none; color: #007F56; text-align: center; } 
.paginate-links  a.prev:hover,.paginate-links a.next:hover { color: #007F56; }

#entry-author-info { text-align: left; padding-top: 0; }
#entry-author-info .avatar { display: none; }

#nav-below { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding: 20px 0; }
#nav-below > div { width: 50%; float: left; }
#nav-below > div a { color: #FFF; text-transform: uppercase; text-decoration: none; }
#nav-below > div a:hover { color: #007F56; }
#nav-below .nav-next {text-align: right; }

.sidebar { margin: 20px 0; padding: 0; }
.sidebar ul { margin: 0 0 15px 20px; padding: 0; list-style: inside; }
.sidebar ul li a { color: #007F56; text-decoration: none; }
.sidebar ul li a:hover { color: #007F56; }


.iconblock { text-align: center; padding: 40px 0!important; }
.iconblock i { font-size: 50px; padding: 30px; border-radius: 100px; background-color: #40d3d9; }
.iconblock h4 { font-size: 18px; padding: 0; margin: 20px 0 0 0; text-transform: uppercase; }

.service-heading {  text-align: center; padding: 20px 0!important;  }
.service-heading i { margin: 0 auto; display: block; font-size: 50px; width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 100px; background-color: #40d3d9; }
.service-heading h3 { font-size: 18px; padding: 0 0 20px 0; border-bottom: 2px solid #FFF; display: inline-block; margin: 20px 0 0 0; text-transform: uppercase; }

.bigmargin { margin: 30px 0; }

.blog #content { padding: 40px 0; }
.blog article article { padding-bottom: 30px; border-bottom: 3px solid #1B143A; margin-bottom: 30px; }
.blog article h2 a { text-decoration: none; color: #FFF; }


.btn-read-more { background: #007F56;  border: 1px solid #007F56; display: inline-block; text-transform: uppercase; color: #FFF; padding: 5px 10px; text-decoration: none; }
.btn-read-more:hover { color: #007F56; background: #FFF; }

/* MEDIA QUERIES */

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

}

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

}

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

}

@media all and (max-width: 568px) {
  nav#access { position: absolute; top: 27px; right: -38px; line-height: 1.4; }
  nav#access .menu-header { display: none; position: absolute; top: 35px; right: 0; z-index: 99999; background: #007F56; width: 300px; }
  nav#access .menu-header ul { margin: 0; padding: 20px; width: 100%; box-sizing: border-box; }
  nav#access .menu-header ul li { margin: 10px 0; padding: 0; width: 100%; }
  nav#access .menu-header ul li a { box-sizing: border-box; margin: 0; height: auto; line-height: 1.4; }
  #mobibox { display: block; margin: 0; position: absolute; top: 0; right: 0;  }
  #mobibox #showmobi { background: #007F56; color: #FFFFFF;  float: left; cursor: pointer; width: 35px; height: 35px; line-height: 35px; text-align: center; }
  #mobibox #showmobi i { color: #FFFFFF; font-size: 25px; text-align: center; line-height: 35px; }

  main { width: 90%; display: block; }
  header { height: 92px; background-size: 92px; }
  header h1 { width: auto; }
  header h1 a { width: 320px; height: 92px; }
  nav#access { height: 100%; }
  .sidebar { margin: 20px 0; padding: 0; }
  .sidebar ul { margin: 0; padding: 0; list-style: inside; }
  nav#access ul li a:hover, nav#access ul li.current-menu-item a { color: #CCC; }
  nav#access ul li a { padding: 0; }




}