/*
Theme Name: National Zoological Gardens
Text Domain: http://www.nzg.ac.za/
Version: 1.0
Author: the Bluevine Team
Author URI: https://www.bluevinegroup.co.za/
Theme URI: https://www.bluevinegroup.co.za/
*/

html,body{ color: #666 !important; font-weight: 300; height: 100%; font-family: "Open Sans", sans-serif;}
h1, h2, h3, h4, h5, h6{ font-family: "Poppins", sans-serif !important }

/*
  Globals
*/
h2, h3{ font-weight: 300;}
h1 {font-size: 3rem; font-weight: 100;}
h2{font-size: 2.8rem; font-weight: 100;}
h2 span.finesse-blue{ font-weight: 400; }
ul{padding-left: 15px;}
.container{ max-width: 1280px;}
strong{ font-weight: bold}
textarea{ height:100px !important}
.tag{ font-size: 9px; padding: 2px 6px !important; margin-bottom: 5px}
nav, .navigation{ font-family: "Poppins", sans-serif }
input[type="submit"], button[type="submit"]{ background:#28a745 !important; border-color: #28a745 !important }

/*
  Colours
*/

/*
  Breadcrumbs
*/
.breadcrumbs{ color: #999; font-size: 0.8rem;}
.breadcrumbs a{ color: #000 }
.breadcrumbs i{ margin: 0 5px}

/*
  Buttons
*/
.btn{ text-transform: uppercase; }
.btn.btn-orange,p.btn.btn-orange{ padding: 5px 14px; background-color: #FD9827; border-color: #FD9827; color: #fff }
.btn.btn-orange.hover, .btn.btn-orange:hover, p.btn.btn-orange.hover,p.btn.btn-orange:hover{ color: #fff;background-color:#e67900;border-color: #e67900;}
.btn.btn-orange.focus, .btn.btn-orange:focus { box-shadow: 0 0 0 .2rem rgba(253,152,39,.5); }
p.btn.btn-orange a,p.btn.btn-orange a:hover{text-decoration: none; color: #fff}
p.btn.btn-orange.btn-sm a{font-size: 12px; }

.btn.btn-purple{ padding: 5px 14px; background-color: #69489B; border-color: #69489B; color: #fff }
.btn.btn-purple.hover, .btn.btn-purple:hover{ color: #fff;background-color:#552e91;border-color: #552e91;}
.btn.btn-purple.focus, .btn.btn-purple:focus { box-shadow: 0 0 0 .2rem rgba(105,72,155,.5); }

main .content a.wp-block-button__link.has-background{ color: #fff !important; margin-bottom: 15px}

/*
  Table
*/
.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th{ padding: 10px; }
.wp-block-table.is-style-stripes{ margin-bottom: 40px; }

/*
  Header
*/
header{ font-size: 0.9rem; background-color: #fff}
header .logo img{ width: auto; height: 50px;}
.navigation{ background-color: #ececec;font-size: 0.9rem;  }
.navigation ul{ list-style: none; margin: 0; padding: 0 }
.navigation ul li{ float: left }
.navigation ul li a{ text-transform: uppercase; color:#000; font-weight: bold; display: block; float: left; margin-right: 30px; line-height: 2.5}
.navigation ul li a:hover{ color: #28a745; text-decoration: none;}
.navigation .form-control{ width: 180px; background: #f9f9f9}
nav ul{ list-style: none; margin: 0; padding: 0 }
nav ul li{ float: left }
nav ul li,nav ul li a{ color: #000 !important; text-decoration: none !important; text-transform: uppercase; }
nav ul li:hover,nav ul li a:hover{ color: #000 !important; text-decoration: none !important;  }
nav ul li.btn{ margin-left: 10px; padding:0 }
nav ul li.btn a{ color: #fff !important; padding: .375rem .75rem; display: block;}
nav ul li.btn-link a:hover{ color: #FF9900 !important;text-decoration: none; }
nav ul li a .fab{ font-size: 15px }
nav ul li a .fab.fa-facebook-f, .fa-facebook, .facebook{ color: #3a5795 !important }
nav ul li a .fab.fa-flickr, .fa-flickr, .flickr{ color: #d40057 !important }
nav ul li a .fab.fa-twitter, .fa-twitter, .twitter{ color: #78bdf1 !important}
nav ul li a .fab.fa-instagram, .fa-instagram, .instagram{ color: #3f729b !important}
nav ul li a .fab.fa-youtube, .fa-youtube, .youtube{ color: #cf3427 !important}
nav ul li a .fab.fa-tripadvisor, .fa-tripadvisor, .tripadvisor{ color: #00af87 !important}

/*
  Banner
*/
.banner{ height: 550px; overflow: hidden;}
.banner img{ margin-top: -125px}
.banner .carousel-control-next, .banner .carousel-control-prev{ top: -90px;/*width: 5% */}
.banner .carousel-caption{left: 5%;right: 5%; top:200px; bottom: inherit; }
.banner .carousel-caption h2,.banner .carousel-caption p{ text-transform: uppercase; font-weight: 300;line-height: 1.1; }
.banner .carousel-caption h2 {font-size: 1rem; font-weight: 300; background-color: rgba(155,136,185,.8);  padding: 10px;}
.banner .carousel-caption p{ font-size: 1.5rem; font-weight: 600;background-color: rgba(0,0,0,.6); padding: 10px; font-family: "Poppins", sans-serif !important }

.inner-banner{ height: 250px; overflow: hidden; position: relative; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; }
.inner-banner img{ margin-top: -250px}
.inner-banner .carousel-caption{ left: 0; bottom: 0; width: 100%; background:rgba(0,0,0,0.4)}
.inner-banner .carousel-caption h1{ font-size: 2.5rem;font-weight: 600; line-height: 1.1; margin-bottom:0 }

/*
  Carousel
*/
.carousel-control-next, .carousel-control-prev{ width:10%; z-index: 100 }
.carousel-caption{ left:10%; right:10%; text-align: left}
.carousel-multi-item .carousel-inner.v-2 .carousel-item.active, .carousel-multi-item .carousel-inner.v-2 .carousel-item-next, .carousel-multi-item .carousel-inner.v-2 .carousel-item-prev{
  display: flex;
}
.carousel-indicators{ display: none;}

/*
  Backgrounds
*/


/*
  Main
*/
main{ }
main.home-main{background-image: url('assets/img/page-bg-top.png');
background-repeat: no-repeat;
background-position: right -200px top 550px;
background-size: 750px}

main .content h2{font-size: 2.5rem; color: #FD9827; font-weight: 200; margin-bottom: 20px;}
main .content img{ max-width: 100%; height: auto;}
main .content a,main .content a:hover{ color: #FD9827}
main .content h3 a,main .content h3 a:hover{ color: #69489B}
main .content h3{ color: #69489B; margin-bottom: 20px;}

main .content .home-ad .caption h4{ color: #fff}
main .content .btn, main .content .btn:hover{ color: #fff}
main .content iframe{ margin: 15px 0; width: 100% !important;}

.sidebar .home-ad, .sidebar .home-events{ margin-left: 0}
.sidebar .home-news .carousel-caption h2{ font-size: 1.5rem;font-weight: 300;}
.sidebar .home-news{ padding-right: 0 !important }
.sidebar iframe{margin-top: 15px;width: 100% !important;}

.widget{background-color: #ececec;}
.widget h3{ color: #000 }
.widget h3 i, .widget h3 a{ color: #000}
.widget h3 i.fa-twitter{ color: #1b95e0}
.widget ul{ list-style: none; margin: 0; padding: 0}
.widget ul li{  border-bottom: 1px solid #dddddd;font-family: "Poppins", sans-serif !important }
.widget ul li a{ text-transform: uppercase; color: #666; display: block; width: 100%; padding: 15px;}
.widget ul li a:hover{ background-color: #dddddd;text-decoration: none;}

/*
  Home
*/
.home-news{ padding-right: 5px; position: relative;}
.home-news .carousel-caption{ left:0; right:0; bottom:0; background: rgb(127,193,223); background: linear-gradient(180deg, rgba(127,193,223,0) 0%, rgba(34,34,34,1) 100%); }
.home-news .carousel-caption p{ margin:0 }
.home-news .carousel-caption h2{ font-size: 2rem; font-weight: 300 }
.home-news .carousel-caption h2 a{ color: #fff }
.home-news .btn.btn-orange{ font-size: 12px; position: absolute; top: 20px; right: 20px; z-index: 1000}

.home-ad{ margin-left: 5px; padding-bottom: 7px; position: relative; }
.home-ad .caption{ position: absolute; bottom:0; left: 0; width: 100%;  }
.home-ad .caption h4{ font-size: 2rem; font-weight: 600; line-height: 1.1; }
.home-ad a{ color:#fff; }
.gallery-ad{ margin-left: 5px; padding-top: 7px; margin-bottom: 0}

.home-events{ margin-left: 5px; padding-top: 7px }
.home-events h4{ font-size: 1.5rem; font-weight: 300 }
.home-events h4 a{ color: #fff }
.home-events p{ margin-bottom: 0}
.home-events .btn.btn-orange{ font-size: 12px; position: absolute; top: 20px; right: 20px; z-index: 1000}
.home-events .btn.btn-orange:hover{ color: #fff; text-decoration: none;}
.home-events .carousel-caption{ left:0; right:0; bottom:0; background: rgb(127,193,223); background: linear-gradient(180deg, rgba(127,193,223,0) 0%, rgba(34,34,34,1) 100%); }

.home-about{}
.home-about h1{ font-size: 2.5rem; color: #FD9827; font-weight: 200; }
.home-about .btn{ padding: 10px 20px }

.home-highlights .highlight{ position: relative; border-right: 10px solid #fff}
.home-highlights .highlight:last-child{border-right: none }
.home-highlights .highlight h3{ font-size: 1.6rem; font-weight: 300; color: #fff; }
.home-highlights .highlight h3 a{ color: #fff; }
.home-highlights .highlight p{ color: #fff }
.home-highlights .highlight p a, .home-highlights .highlight p a:hover{ color: #FD9827}
.home-highlights .btn.btn-orange a{ font-size: 12px; color: #fff !important}
.home-highlights .caption{ position: absolute; bottom:0; left: 0; width: 100%; background: rgb(127,193,223); background: linear-gradient(180deg, rgba(127,193,223,0) 0%, rgba(34,34,34,1) 100%); }
.home-highlights .btn:hover{ background-color: #e67900; border-color: #e67900}

.carousel-inner .card-body{ min-height: 130px; }

.home-research { background-color: #ececec; position: relative; margin-top: 100px; padding-top: 100px}
.home-research p a{ color: #69489B }
.home-research h3{ font-size: 1.6rem; font-weight: 300 }
.home-research h3 a{ color: #666 !important}
.home-research .carousel-item div.col-12 { float: left;width: 33.333333%; max-width: 100%;}
.home-research .carousel-item small{ color: #69489B }
.home-research .carousel-item h4{ font-weight: 200;margin-bottom: 0; }
.home-research .carousel-item h4 a{ color: #666 !important }
.home-research .carousel-inner { position: relative; width: 100%; overflow: hidden; }
.home-research .controls{ position: absolute; left: -100px; bottom: 6px; }
.home-research .controls a{ color: #fff; padding: 8px 12px; background-color:#69489B}
.home-research .controls .control-next{ opacity: 0.6}

.home-newsroom { background-color: #dddddd; position: relative; padding-top: 100px}
.home-newsroom p a{ color: #70B175 }
.home-newsroom h3{ font-size: 1.6rem; font-weight: 300 }
.home-newsroom h3 a{ color: #666 !important}
.home-newsroom .carousel-item div.col-12 { float: left;width: 33.333333%; max-width: 100%;}
.home-newsroom .carousel-item small{ color: #70B175 }
.home-newsroom .carousel-item h4{ font-weight: 200 }
.home-newsroom .carousel-item h4 a{ color: #666 !important }
.home-newsroom .carousel-inner { position: relative; width: 100%; overflow: hidden; }
.home-newsroom .controls{ position: absolute; left: -100px; bottom: 6px; }
.home-newsroom .controls a{ color: #fff; padding: 8px 12px; background-color:#28a745}
.home-newsroom .controls .control-next{ opacity: 0.6}

.home-did-you-know{ padding-top:100px; padding-bottom:100px; position: relative;}
.home-did-you-know .row{ background-color:#28a745 }
.home-did-you-know .did-you-know-left h3{ text-transform: uppercase; color: #fff; font-size: 2.5rem;color: #005914; font-weight: 600}
.home-did-you-know .did-you-know-right{ background-color:#69489B }
.home-did-you-know .did-you-know-right p{ color: #fff; margin: 0; width: 90%}
.home-did-you-know .did-you-know-right h3, .home-did-you-know .did-you-know-right h3 a{ color: #fff; font-size: 1.6rem; font-weight: 300; text-transform: uppercase;}
.home-did-you-know .did-you-know-right a{ color: #fff; }
.home-did-you-know .did-you-know-right a:hover{ text-decoration:underline;}
.home-did-you-know .bg-fern{ position: absolute; right: 0px; top: 40px;  width: 300px; height: 450px; z-index: 1000;
  background-image: url('assets/img/page-bg-bottom.png');
  background-repeat: no-repeat;
  background-size: 500px}

/*
  News
*/
.news-row img{ width: 100%; height: auto; float: left;}
.research-row .col-6{ height: 300px }
.research-row a h3{ color: #69489B !important}
.research-row a:hover{ color: #69489B !important}
.research-row a i { color: #666; font-size: 150px }
.research-row a.btn-success:hover{ color: #fff !important}

/*
  Post Meta
*/
.section-inner .post-meta{ list-style: none }
.section-inner .post-meta .meta-icon{ margin-right: 5px }

/*
  Animals
*/
.item-animals{margin:0 0 30px 0}
.item-animals a.animals-img-wrap{ position:relative; display: block;}
.item-animals a.animals-img-wrap .title { position: absolute; bottom: 0;margin: 0 0 20px 0; left: 0; background-color: rgba(0,0,0,0.6); padding: 10px 15px}
.item-animals a.animals-img-wrap .title h3{color: #fff; font-size: 1.5rem; margin: 0}
.item-animals a.animals-img-wrap .title h4{font-size:18px; font-weight: 300; margin: 0; font-family: "Open Sans", sans-serif !important}
.item-animals p{background-color: #ececec; color: #000;padding: 15px;}

article.animals .wp-block-image.size-large{ margin: 0}
article.animals .animal-info-wrap{ background-color: #ececec; color: #000;  margin-bottom:30px;padding: 20px;}

/*
  Popup
*/
.sgpb-main-html-content-wrapper h3{ color: #69489B}
.sgpb-main-html-content-wrapper img{ width: 100%; height: auto; }
.sgpb-theme-6-content{ box-shadow:none !important }

/*
  Visit the zoo
*/
.visit-the-zoo figure.wp-block-image,.visit-the-zoo figure.wp-block-image img{ position: relative;margin: 0 !important}
.visit-the-zoo figcaption{ position: absolute; bottom: 0; left: 0; color: #fff !important; width: 100%; text-align: center;margin: 0;background-color: rgba(0,0,0,0.6) !important; font-size:20px !important; padding: 10px !important;font-weight: normal; }

/*
  Vanues
*/
.vanue-list figure.wp-block-image,.visit-the-zoo figure.wp-block-image img{ position: relative;margin: 0 !important}
.vanue-list figcaption{ position: absolute; bottom: 0; left: 0; color: #fff !important; width: 100%; text-align: center;margin: 0;background-color: rgba(0,0,0,0.6) !important; font-size:1rem !important;  padding: 10px !important }
.vanue-list figcaption a{ font-size:24px !important; font-weight: normal; }

/*
  Partners
*/
.wp-block-image .aligncenter > figcaption{ text-align:center; }

/*
Pagination
*/
.wp-paginate{ padding: 20px !important}
.wp-paginate a{ color: #000 !important; margin-right: 6px !important;border: none !important; padding:4px 11px !important; border-radius: 50%;  }
.wp-paginate .current{  margin-right: 6px !important;padding:4px 11px !important; border-radius: 50%; color: #005914 !important; background-color: #28a745 !important; font-weight: bold; border: none !important}

/*
  Newsletter
*/
#mc_embed_signup{ background: none !important }
#mc_embed_signup form{ padding: 0 !important }
#mc_embed_signup h2, #mc_embed_signup .indicates-required,#mc_embed_signup div.response a{ display: none !important }
#mc_embed_signup .mc-field-group input, #mc_embed_signup .button{ padding: .375rem .75rem !important}
#mc_embed_signup div.mce_inline_error, #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error{ background: none !important; padding: 0 !important; margin: 5px 0 !important}
#mc_embed_signup .mc-field-group{ padding-bottom: 2px !important}
#mc_embed_signup .button{ height: inherit !important; margin-top: 2px !important}
#mc_embed_signup div.response{ padding: 0 !important; margin: 5px 0 !important; font-size: 14px !important; line-height: 16px !important;width: 100% !important; font-weight: normal !important}
#mc_embed_signup div#mce-responses{ padding: 0 !important; margin: 0 !important; width: 100% !important}
#mc_embed_signup #mce-error-response { color: #e85c41 !important}

/*
  Forms
*/
form .asterisk{ color: #e85c41;}
form label { margin-bottom: 0; font-weight: bold;}
form .border-error{ border: 2px solid #e85c41;}
form .email-form-error,form .book-form-error{ display: none; color: #e85c41;}
form select{ padding: 10px;width: 100%; }

/*
  Footer
*/
footer{ background-color: #222; font-size:0.9rem; color: #ccc !important }
footer a, footer a:hover{ color:#ccc; }
footer h3 { text-transform: uppercase; font-size:1.1rem; font-weight:500;color: #fff !important; margin-bottom: 15px}
footer ul{ list-style: none; line-height: 2rem; padding: 0}
footer div.complaint p{ margin-bottom: 0}
footer .copyright{ background: #000 }
footer .copyright ul{ list-style: none; margin: 0; padding: 0; line-height: inherit;}
footer .copyright ul li{ float: left; margin-left: 10px}