/*Author: Zakhanya Systems(N Zulu);
 *Description: General css for the website;
 *Date: 25th November 2015;
 */
body,html {
    font-family: 'Nunito', sans-serif;
	font-weight: bold;
    background: white;
	
	margin: 0;
	overflow-x: hidden;
}

.blue{
	color: #46b8da;
}

.white{
	color: white;
}

#how{
	height: 300px;
	margin: 0px;
	background-size: 100% 100%;
	background-image: url("../images/c.jpg");
	background-repeat: no-repeat;
}

#key{
	height: 300px;
	margin: 0px;
	background-size: 100% 100%;
	background-image: url("../images/grey.jpg");
	background-repeat: no-repeat;
}

.current{
	background-color: #46b8da;
    border-radius: 20px; 
}

.faq{
	height: 300px;
	background-size: 100% 100%;
	background-image: url("../images/horror.jpg");
}

label.error{
	color:red;
}

.slider{
	position: relative;
	height: 415px;
	width:100%;
}

.banner,.banner2,.banner3{
  position: absolute;
  width: 100%;
  height: 100%;
}

.banner{
	color:black;
	font-weight:bold;
	height: 415px;
	margin: 0px;
	padding: 10px;
	background-size: cover;
	max-width: 1500px;
	background-size: 100% 100%;
	background-image: url("../images/b.jpg");
	background-repeat: no-repeat;
	animation:fade 30s infinite;
    -webkit-animation:fade 30s infinite;
}

.banner2{
	color:black;
	font-weight:bold;
	height: 415px;
	margin: 0px;
	padding: 10px;
	max-width: 1500px;
	opacity:0.5;
	background-color:white;
	background-size: 100% 100%;
	background-image: url("../images/bannerhome.jpg");
	background-repeat: no-repeat;
	animation:fade2 30s infinite;
    -webkit-animation:fade2 30s infinite;
	
}

.banner3{
	color:black;
	font-weight:bold;
	height: 415px;
	margin: 0px;
	padding: 10px;
	max-width: 1500px;
	background-color:white;
	background-size: 100% 100%;
	background-image: url("../images/image12.jpg");
	background-repeat: no-repeat;
	animation:fade3 30s infinite;
    -webkit-animation:fade3 30s infinite;
	
}

.s{
	font-size: 16px;
	color: black;
	font-weight:bold;
}

@keyframes fade
{
  0%   {opacity:1}
  16.66% {opacity:1}
  33.32% { opacity: 1}
  48% { opacity: 1}
  50% {opacity:0}
  66.64% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  16.66% {opacity:0}
  33.32% { opacity: 1}
  50% {opacity:1}
  64% {opacity:1}
  66.64% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  16.66% {opacity:0}
  33.32% { opacity: 0}
  50% {opacity:0}
  66.64% { opacity: 1}
  90%{ opacity: 1}
  100% { opacity: 0}
}

.navbar{
	border-radius: 0px;
}

.space{
	margin-top:29px;
}

li{
	font-size: 20px;
}

.navbar-nav {
    float: none;
    text-align: center;
}

.navbar{
  margin-bottom: 0;
}

nav{
  border: solid 1px #555;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: black;
    }

.navbar-inverse .navbar-toggle {
    border-color: white;
  }

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: white;
  }

  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #e6e6e6;
}

.home img{
  transition: 1s;
  webkit-transition: 1s;
}

.footer{
  width: 100%;
  height: auto;
  position: relative;
  bottom: 0;
  background: black;
  color: white;
  padding: 10px;
  box-shadow: 0 5px 5px -3px #333;
}


h4{
	font-family: 'Nunito', sans-serif;
	
}

.navbar-nav > li{
    float: none;
    display: inline-block; 
    padding: 10px 25px;
  }

.navbar-nav > li:hover{
    background-color: none;
}

.navbar-inverse .navbar-nav > li > a{
  color: white;
  font-size: 16px;
  font-weight: bolder;
}

.btn-info{
	background-color: black;
}

.btn-info:hover{
	background-color: black;
}

.navbar-inverse .navbar-nav > li:hover > a:hover{
  color: white;
  font-weight: bolder;
  background-color: #46b8da;
  border-radius: 20px;
  
 }
 

.navbar-inverse{
  background: black;
  box-shadow: 0 5px 5px -3px #333;
 }

.nav-justified > li{
  width: 1%;
}

.navbar-toggle{
  border-color: #05163C;
}