@charset "UTF-8";

/*
Theme Name: Africa Health Care
Theme URI: https://www.africahealthcare.co.za
Author: the Africa Health Care team
Author URI: https://www.africahealthcare.co.za
Version: 1.0
*/

/* Categories 01 to 03 are the basics. */
html,body{ font-weight: 300;height: 100%; font-size: 1rem; border: 0; color: #777777; }

/*
  Globals
*/
h1 { font-size: 2rem; font-weight: 500; color: #047dc4 }
h2 { font-size: 1.8rem; line-height: 2.4rem; font-weight: 500; color: #047dc4 }
h3 { font-size: 1.5rem; line-height: 34px; font-weight: 500; color: #047dc4 }
strong{ font-weight: bold }
p{ line-height: 1.6rem }
a, a:hover, a:active, a:focus, a:visited{ color: #047dc4 }
.wp-block-button{ padding: 0;}
.wp-block-button__link{ font-size: inherit; padding: 1rem 3rem !important; background-color: transparent !important; }
.wp-block-button__link::after{ margin-left: .5rem; font-size: 0.9rem; font-family: "Font Awesome 5 Free";  font-weight: 600; content: "\f061";}
.wp-block-button__link,.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited{ color: #047dc4 !important; text-decoration: none; display: block;}

.btn{ font-weight: 500; line-height: 1.2rem;}
.btn-primary,
.btn-primary:hover,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active{ border-radius:100px; background-color: #047dc4; border:2px solid #047dc4; color: #ffffff !important; text-decoration: none !important; }
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:visited,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active{ border-radius:100px; background-color: #ffffff; border:2px solid #047dc4; color: #047dc4 !important; text-decoration: none !important; }
.btn-default,
.btn-default:hover,
.btn-default:visited,
.btn-default:active,
.btn-default:focus,
.btn-default:not(:disabled):not(.disabled):active{ border-radius:100px; background-color: transparent; border:2px solid #047dc4; color: #047dc4 !important; text-decoration: none !important; }

.text-blue{ color: #047dc4 !important }
.bg-blue{ background-color: #047dc4 !important; color: #fff !important; }

.sticky{ display: none }
.sticky a,.sticky a:hover {color: #151d21 }
.sticky-top{ position: fixed; width:100%}
.sticky img{ height: 40px; width: auto }
.sticky .inner{ position: relative }
.sticky .inner ul{ padding:.5rem 0 }

/*
  Nav
*/
.inner ul li{ margin: 0 0.5rem; }
.inner ul li a{ font-size: 1rem; color: #047dc4 !important; font-weight: 500; display: block; padding: .5rem 1rem; }
.inner ul li a:hover{ color: #00a5e5 !important; text-decoration: none; }

/*
  Header
*/
header .logo img{ width: auto; height: 40px; }
header .topnav{ background-color: #f3f3f3 !important;}
header .topnav ul{ list-style: none; padding: 0; margin: 0;}
header .topnav ul li{ float: left; margin: 0 0.5rem; }
header .topnav ul li a{ display: block; padding: .5rem 1rem;color: #888 !important; font-size: 0.75rem !important;font-weight: 500; }
header .topnav ul li a:hover{ color: #444 !important; text-decoration: none;}

.home-slider {position: relative;overflow: hidden;}
.home-slider .slider-overlay {
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 150%);
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 150%);
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 150%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=1);
  height: 100%;left: 0; position: absolute; width: 100%;
}
.home-slider .img-fill { width: 100%;  display: block; overflow: hidden; position: relative; text-align: center}
.home-slider .img-fill img { position: relative; display: inline-block;  max-width: none; width:100%;}
.home-slider .item .img-fill { background: #000; text-align: left; }
.home-slider .item .img-fill .info { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; line-height: 100vh; text-align: center; }
.home-slider .item .info > div { height: 100%; vertical-align: middle; }
.home-slider .NextArrow {
  position: absolute;
  top: 50%;
  right: -50px;
  width: 38px;
  height: 145px;
  background:transparent;
  border: 0 none;
  margin-top: -72.5px;
  text-align: center;
  font: 20px/45px;
  font-family: "Font Awesome 5 Free"; 
  font-weight:600;
  color: #FFF;
  z-index: 5;
  transition: all .3s ease-out;
}
.home-slider .PrevArrow {
  background: transparent;
  border: 0 none;
  color: #fff;
  font: 20px/45px;
  font-family: "Font Awesome 5 Free"; 
  font-weight:600;
  height: 145px;
  margin-top: -72.5px;
  left: -50px;
  height: 145px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 38px;
  z-index: 5;
  transition: all .3s ease-out;
}
.home-slider .item h3 {
  color: #fff;
  font-size: 3rem;
  font-weight: 400;
  line-height: 3.4rem;
  -webkit-animation: fadeOutRight 1s both;
  animation: fadeOutRight 1s both;
  margin-top: 120px;
}
.home-slider .item h5 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 100;
  margin-top: 15px;
  -webkit-animation: fadeOutLeft 1s both;
  animation: fadeOutLeft 1s both;
}

.home-slider .item.slick-active h3 {
  -webkit-animation: fadeInDown 1s both 1s;
  animation: fadeInDown 1s both 1s;
}

.home-slider .item.slick-active h5 {
  -webkit-animation: fadeInLeft 1s both 1.5s;
  animation: fadeInLeft 1s both 1.5s;
}

.home-slider .item.slick-active a {
  -webkit-animation: fadeInUp 1s both 2s;
  animation: fadeInUp 1s both 2s;
}

.home-slider .item.slick-active:nth-child(odd) img {
  -webkit-animation: slideInfiZoomIn 20s both;
  animation: slideInfiZoomIn 20s both;
}

.home-slider .item.slick-active:nth-child(even) img {
  -webkit-animation: slideInfiZoomOut 20s both;
  animation: slideInfiZoomOut 20s both;
}

.PrevArrow:focus,.NextArrow:focus { border: none; outline: none;}
.home-slider .NextArrow:before { content:"\f105" }
.home-slider:hover .NextArrow {right: 0px;}
.home-slider .PrevArrow:before { content:"\f104" }
.home-slider:hover .PrevArrow {left: 0px; }

.PrevArrow:hover { background: transparent none repeat scroll 0 0; }
.NextArrow:hover { background: transparent none repeat scroll 0 0; }

.slick-arrow{ cursor: pointer; font-size: 2rem; border: 0 none; color: #fff; position: absolute; z-index: 1000; top:50%; }
.slick-prev{ left: 15px; }
.slick-next{ right: 15px; }

/*
  Hospital Search
*/
.hospital-search{ background-color: #047dc4;}
.hospital-search h3{ color: #fff;margin: 0 0 20px; font-size: 1.2rem;}
.hospital-search .form-control{ padding: 0.4rem 1rem;}
.hospital-search .btn-secondary{ padding: 0.8rem 1rem !important; }
.hospital-search p{ margin: 2px 0; }

.hospital-search ul{ list-style: none; padding: 0; margin: 0;}
.hospital-search ul li{ padding: 10px 20px; border-top: 1px solid #cecece;}
.hospital-search ul li:first-child{ border-top: none}
.hospital-search ul li p{ float: left; margin: 0 10px 0 0; font-size: 0.8rem; line-height: 1rem; }
.hospital-search ul li .fas{ font-size: 1.5rem; margin-left: 8px;}
.hospital-search ul li .fas.fa-map-marker-alt{color: #00a5e5}
.hospital-search ul li .fas.fa-phone-alt{ color: #047dc4; }
.hospital-search ul li a{ float: right; color: #777777 !important;}
.hospital-search ul li h4 { font-size: 1.2rem;}
.hospital-search ul li h4 a{ float: none; text-decoration: none;}
.hospital-search ul li h4 a:hover{ text-decoration: underline;}

/*
  Main
*/
#section-about{ padding: 50px 0 }
#section-about h1{font-size: 2rem;}
#section-about p{ color:#999 }

#section-about-hospitals{ padding: 50px 0; background: rgb(243,243,243);
  background: linear-gradient(0deg, rgba(243,243,243,0) 90%, rgba(243,243,243,1) 100%);}
#section-about-hospitals h1{font-size: 2rem;}
#section-about-hospitals h1 p{ font-size: 1.2rem; font-weight: 300;color: #777777;margin: 0;}
#section-about-hospitals p{ color:#999 }
#section-about-hospitals .number{ width: 17%; color: #00a5e5; text-align: right;}
#section-about-hospitals .text{ width: 83%; padding: 15px 0 0 10px; font-size: 1.2rem;}

#section-divisions{ background-color: #f3f3f3; color: #047dc4 }
#section-divisions .bg-dark{ background-size: cover; background-position: center center; background-repeat: no-repeat;}
#section-divisions h2{ color: #047dc4; margin-bottom: 20px; font-size: 1.8rem; }
#section-divisions ul{ list-style: none; padding: 0; margin:0;}
#section-divisions ul li{ padding: 20px 0; border-top: 1px solid #cecece; position: relative; text-align: left;color: #047dc4; font-size: 1.2rem; font-weight: 400;}
#section-divisions ul li:first-child{ border-top-color: #047dc4;}
#section-divisions ul li a{ float:right; margin-left: 10px; color: #999; margin: 0 20px; font-size: 0.95rem; }
#section-divisions ul li::after{ position: absolute; right:0; top:22px; font-size: 0.8rem; color: #047dc4; font-family: "Font Awesome 5 Free";  font-weight: 600; content: "\f054"; }

#section-partner{ padding: 20px 0 0; background-color: #047dc4; color: #fff; } 
#section-partner h2{ color: #ffffff; font-size: 2.9rem; font-weight: 200; line-height: 3.4rem;}
#section-partner p{ font-size: 1.5rem; line-height: 2.2rem; font-weight: 100; margin-bottom: 30px; }
#section-partner .bg-partner{ background-position: right top; background-repeat: no-repeat; background-size:70% auto}
#section-partner .partner-content{ padding: 60px 15px 80px;}

#section-ad{ background-color: #032544; position: relative; color: #fff; padding: 0; }
#section-ad h2{ font-size: 2rem; line-height: 3rem; color: #fff !important; margin-bottom: 10px !important}
#section-ad p { font-size: 1.5rem; line-height: 2.2rem;font-weight: 100; }
#section-ad .bg-ad{padding: 50px 0; background-position: center center; background-repeat: no-repeat; background-size:100% auto}
#section-ad .btn-secondary{ border: 0 !important;}

#section-contact{ padding:50px 0;  }
#section-contact h2{ color: #047dc4;font-size: 2.6rem; font-weight: 200; line-height: 2.8rem;}

/*
  Hospital
*/
#section-hospital-header{padding: 30px 0 20px; background-color: #047dc4; color: #fff;}
#section-hospital-header h1{ color: #fff; }
#section-hospital-about h2{ color: #047dc4; font-weight: 500; margin-bottom: 20px;}
#section-hospital-about img{ width: 100%; height: auto;}
#section-hospital-services{ padding: 50px 0;}
#section-hospital-services h3, #section-careers h3{ border-bottom: 1px solid #047dc4; padding-bottom: 15px;margin-bottom: 20px;}
#section-careers h3{ margin-top: 40px !important;}
#section-hospital-services ul{ padding-left: 20px; margin: 0;}
#section-hospital-services p{ margin: 0 0 5px; }
#section-hospital-hours{padding: 30px 0 20px;background-color: #f3f3f3;}
#section-hospital-hours h3{ border-bottom: 1px solid #047dc4; padding-bottom: 20px;margin-bottom: 30px;}
#section-hospital-hours ul{ padding-left: 20px; margin: 0; }
#section-hospital-hours p { margin: 0 0 5px; }
#section-hospital-pharmacy h3{ color: #fff; }
#section-hospital-pharmacy a{ color: #fff;}
#section-hospital-pharmacy .bg-dark { background-size: cover; background-position: top center; background-repeat: no-repeat;}
#section-hospital-specialists{ padding: 50px 0;}
#section-hospital-specialists h3{ border-bottom: 1px solid #047dc4; padding-bottom: 20px;margin-bottom: 30px;}
#section-hospital-specialists ul{ width:100%; padding-left: 20px; margin: 0; }
#section-hospital-specialists ul li{ float: left; margin-bottom: 20px; width:25%; padding: 0 40px 0 0 ;}

/*
  Page
*/
#section-page-header{ padding: 50px 0; background-color: #047dc4; color: #fff; background-size: 100% auto; background-position: center center; background-repeat: no-repeat; }
#section-page-header.page-doctors, #section-page-header.page-hospitals{ padding: 40px 0 !important;}
#section-page-header img{ width: 100%; height: auto;}
#section-page-header h1{ color: #fff !important; }
#section-page h1{ font-size: 2rem; margin-bottom: 1rem;}
#section-page h2{ font-size: 1.4rem; color: #333333;}
#section-page h3{ font-size: 1.4rem; margin-top: 1rem;}
#section-page.page-doctors h2, #section-page.page-hospitals h2{ font-size: 2rem; color: #047dc4;}
#section-page footer.entry-footer{ padding: 15px;}

#section-page.page-hospitals .page-hospitals-list h4 a{color: #333; font-size: 1.2rem;}

/*
  Form
*/
textarea.form-control{ height: 150px !important; border-radius: 20px !important;}
.form-control{ border:1px solid #ddd; border-radius:50px; line-height: 2rem; height: inherit !important;}
.email-form-error{ color: #990000; }
.newsletter-form-error{ color: #e77a21; }
.border-error{ border-bottom-color:#990000 }
.grecaptcha-badge{ display:none !important}

/*
  Footer
*/
footer{ color: #666 !important; background-color: #f3f3f3; }
footer a, footer a:hover{ color:#666 !important; }
footer h3{ margin-bottom: 10px; color:#666 ;text-transform: uppercase; text-transform: uppercase; font-size: 1.2rem; font-weight: 300;}
footer img{ width: 250px; height: auto;}
footer p{margin: 25px 0;}
footer ul {list-style: none; padding:0;}
footer ul li{ line-height: 20px; padding: 7px 0; }
footer ul li a{ display: block;}
footer ul li a::after{ float: right; font-size: 0.8rem; color: #047dc4; font-family: "Font Awesome 5 Free";  font-weight: 600; content: "\f054"; }
footer ul.social-icons li{ float: left; margin-right: 20px;}
footer ul.social-icons li a::after{ content: "" }

footer .form-control, footer .form-control:focus,
#mc_embed_signup .mc-field-group input{ background-color: transparent; border-radius: 0px; line-height: 2rem; height: inherit !important; padding: .375rem !important; font-size: 1rem;border: none;border-bottom: 1px solid #ccc;} 
#mc_embed_signup{ background: transparent !important;}
#mc_embed_signup form{ padding: 0 !important;}
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error{ margin-bottom: 0 !important;}
#mc_embed_signup .response{ line-height: 20px; }
#mc_embed_signup .response a{display:none}

footer .copyright{ background-color: #ffffff; color: #999; font-size: 0.85rem;}
footer .copyright a, footer .copyright a:hover{ color: #999 !important;}
footer .copyright p { margin: 0; line-height: 22px;}
footer .copyright img{ width: 100px; height: auto; margin: 0 5px;}

.wp-block-table td, .wp-block-table th{border-color: #ddd;}
.modal .modal-header h5{ color: #000;font-size: 24px;} 
.modal .modal-body h5{ color: #047dc4; margin-bottom: 1rem; }
.modal .modal-body img { width: 50%; float: left; margin: 0 15px 5px 0;}

 /* Customize the label (the container) */
 .checkbox-container {
  display: block;
  position: relative;
  margin-top: 10px;
  font-size: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 80px;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

.alert-secondary { color: #383d41; background-color: #f3f3f3; border: none;}
.badge-secondary{background-color: #999; font-weight: 400; padding: 5px 10px;}

.card{
margin-bottom: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
border-width: 0;
}