/*=============================================================
    Authour URI: www.tyraweb.co.ke
    License: Commons Attribution 3.0
========================================================  */



  /*-------------- WOW ANIMATION -----------------*/
.wow{
	visibility:hidden;
}







table{
	font: bold 15px Arial, Helvetica, sans-serif;
}



input{
	font: bold 18px Arial, Helvetica, sans-serif;
}






#show_loading_div{
border-radius: 5px; 
position: fixed; 
top: 15%; 
left: 30%; 
z-index: 5000; 
padding:10px 0 10px 0;
width: 350px; 
text-align: center; 
background: #EDDBB0; 
border: 1px solid #000
}







#error div{
    border:1px solid darkgray;
    padding:2px 0 2px 5px;
    line-height:25px;
}


#myInput {
    clear:both;
    margin-top:3px;
  background-image: url('../../images/searchicon.png');
  background-position: 10px 10px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 14px;
  padding: 5px 20px 5px 43px;
  border: 1px solid darkgray;
  margin-bottom: 5px;
  border-radius:30px;
}
#myInput:hover {
  background-position: 20px 10px;
  padding: 5px 20px 5px 53px;
  -webkit-transition: all .6s; /* Safari */
    transition: all .6s;
}






  /*-------------- TOOLTIPS -----------------*/
  .txt-highlight {
  	font-style:italic;
  }
  .tooltip-inner {
    padding: 5px 10px;
    background-color: red;
  }
  .tooltip.top .tooltip-arrow {border-top-color: #f29d0c;}
  .tooltip.right .tooltip-arrow {border-right-color: #f29d0c;}
  .tooltip.bottom .tooltip-arrow {border-bottom-color: #f29d0c;}
  .tooltip.left .tooltip-arrow {border-left-color: #f29d0c;}















/*-------------- HEADER -----------------*/
#header-top-part{
	min-height:25px; 
	background:white; 
	color:darkslategray; 
	margin:0; 
	font-size:13px; 
	padding:0;
}
img#logo_image{
	height:100%;
	padding:0;
	margin:0;
}
img#fb_image{
	width:25px;
	height:25px;
	padding:0;
	margin:0;
}
img#user_profile_img{
	width:30px;
	height:30px;
	border-radius:30px;
	vertical-align: center;
}
#header_container{
	font-size:12px; 
	background: DarkSlateGray;
	color:white;
	margin:0;
}
.navbar-collapse a{
color:white;
background: DarkSlateGray;
}
.navbar-inverse{
	font-size:10px;
	background: DarkSlateGray;
	margin:0;
	border:0;
	color:white;
	padding:0;
}
.navbar-inverse .navbar-header{
	background: DarkSlateGray; 
	margin:0;
}
.navbar-inverse input{
	width:100%;
}
#header_container li{
	font-size:12px;
	vertical-align: center;
}
#header_container li a{
	color: white;
	margin-left:5px;
	background: DarkSlateGray;
	font-size:12px;
}
.navbar-inverse li #mypagelocation{
	color: white;
	border-bottom:1px solid yellowgreen;
	background: linear-gradient(-179deg, rgba(55, 100, 55, 1) 2%, rgba(45, 74, 94, 1) 99%);
}
#header_container li a:hover{
	text-decoration:none;
	border-bottom:1px solid yellowgreen;
	background: linear-gradient(-179deg, rgba(55, 100, 55, 1) 2%, rgba(45, 74, 94, 1) 99%);
}
.navbar-inverse li ul li a:hover{
	border-bottom:1px solid yellowgreen;
}
.navbar-inverse .navbar-brand {
    padding: 0 15px;
}

/*--hover dropdown-- */
.dropbtn {
    background-color: DarkSlateGray;
    color: white;
    padding: 12px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
    padding-top:5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: DarkSlateGray;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style-type:none; 
    padding:0; 
    border-top:2px solid white;
    border-bottom:2px solid white;
}
.dropdown-content input {
    width:100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom:1px dotted white;
}
.dropdown-content li {
    min-height:30px;
}

.dropdown-content a:hover {
background-color: DarkSlateGray;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: DarkSlateGray;
}











/*-------------- HOME PAGE -----------------*/
body {
		background-color: #fff;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: black;
		padding: 0 0 0 0; 
	}
	#home1{
	    background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%), url('../../images/bulk-sms.jpg');
		background-size: 1500px 100%;
		height:500px;
		background-repeat: no-repeat;
		border-bottom: 2px solid #D0D0D0;
		box-shadow: 2px 0 8px gray;
		margin-top:70px;
		padding-top:20px;
		clear:both;
	}
	#home1_inner{
	    text-align:center;
		padding:50px 0 0 20px;
		color:white;
		line-height:35px;
		font: 30px "Arial Black", Gadget, sans-serif;
	}
	#home1_inner button{
		height:50px;
		margin:30px auto;
		font-size: 22px;
		background-color: Transparent;
		color:white;
	}
	#home1_inner button:hover{
		background:white;
		color:darkslategray;
	}
	#home1 #balance_btn{
		position:absolute; 
		right:0;
		top:-20px;
		font-size:12px;
		padding-top:2px;
		padding-bottom:2px;
	}
	#home1 #why_us_image{
		position:absolute; 
		width:200px; 
		bottom:0; 
		right:0;
	}
	#home2{
		background-size: 100% 100%;
		font-size: 16px;
		min-height:600px;
		background-repeat: no-repeat;
		text-align: justify;
	}
	#operator_logo{
	height:120px;
	padding:20px 0 20px 0;
	}
	#home2 h3{
		color:brown;
		font-weight:700;
		text-align:left;
		background:white;
		border-radius:5px;
		padding:5px;
	}
	#home2 #inner_div{
padding-right:20px;
margin:0;
font-size:14px;
text-align: center;
	}
	#home2 #inner_div h3{
text-align: center;
	}
	#home2 .icon1{
		background:gray;
		border-radius: 50%;
		width:50px;
		line-height:50px;
		height: 50px;
		text-align: center;
		vertical-align: center;
		margin:auto;
	}
	#home2 .icon1 i{
		font-size:24px;
		color:white;
	}
	#home3{
	margin-top:10px; 
	height:200px;
	}
	#home3 span{
	color:brown; 
	font-size:40px; 
	margin:20px 0 0 0; 
	padding:0;
	}
	#home3 h2{
		width:100%;
		font-size:30px; 
	color: darkgreen;
	padding-left:50px;
	}
	#home3 p{
	font-size:16px; 
	padding-left:60px;
	}
	#home4{
	border-bottom:3px solid brown;
	padding:0; 
	margin:0; 
	color:brown; 
	background:darkgray; 
	margin-top:10px; 
	height:200px; 
	text-align:center; 
	font-size:25px; 
	line-height:60px;
	}
	#home4 span{
	color:darkslategray; 
	font-size:70px; 
	margin:20px 0 0 0; 
	padding:0;
	}
	#home4:hover span{
	background:darkslategray; 
	color:darkgray;
	transition: all .5s;
	border-radius:48%;
	}
#Sidebar{
	padding:20px 0 0 40px; 
	margin:0;
	font: 12px normal Helvetica, Arial, sans-serif;
}






	
	
	

#body_page{
		background-size: 100% 100%;
		font: 14px normal Helvetica, Arial, sans-serif;
		min-height:800px;
		line-height:35px;
		background-repeat: no-repeat;
		padding-bottom:50px;
		margin-top:70px;
	}
#body_page h2{
	font-size:25px;
		text-align:left;
		color:darkgreen;
		 width:100%;
		 padding:5px 1px 5px 1px;
		 border:1px solid #c6c0c0;
		 border-radius:5px;
		 font-family:Times New Roman;
		 background-color: #e7f2f2;
	}
	h2#header_h2{
		margin-top:40px;
	}
code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 16px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
		font-weight:700; 
	}
	#body_page table{
		color:DarkSlateGray;
		background:azure;
		font-size:12px;
	}
	#body_page table thead{
		color:black;
		background:#1dd4d4;
	}
	#body_page table tr:hover{
		background:Bisque;
	}
	#body_page table thead:hover{
		color:DarkSlateGray;
	}
	#page_inner input[type=text],textarea, select{
width:100%;
float:right;
	}
	#page_inner select{
height:35px;
	}
	#page_inner{
		background:white;
		padding:10px;
		margin-top:20px;
		border-radius:10px;
		min-height:800px;
		text-align: justify;
	}
	#page_inner h2{
		border-bottom:2px solid black;
		display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  background: #e1e1e1;
  border-radius:5px;
  padding-left:3px;
	}
	#form_div{
		clear:both;
	}
#page_inner #how_to_page_lower{
	margin:0;
	padding:0;
line-height:20px;
	    color: #B76F38;
    background-color: #FFFAF6;
    border-bottom: 1px solid #E6DAD2;
    border-right: 1px solid #E6DAD2;
	}








/*-------------- BUY  AIRTIME-----------------*/
#buy_airtime_small_div{
	border:1px solid gray;
	height:300px;
	border-radius:5px ;
	padding:0;
	margin-right:20px;
	margin-bottom:25px;
}
#buy_airtime_image{
width:100%;
height:185px;
	padding:0;
	margin:0;
}
#buy_airtime_small_div_lower{
	text-align: center;
	font-weight: 500;
	font-size: 16px;
}
#buy_airtime_small_div_lower p{
	margin:0;
}
#buy_airtime_small_div_lower #product-title{
	color:blue;
}
#buy_airtime_small_div_lower #price-wrapper{
	font-weight: 700;
}
#buy_airtime_small_div_lower #price-wrapper strike{
	color:gray;
}











/*-------------- HOME SLIDESHOW -----------------*/
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}
.active {
  background-color: #717171;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 4.8s;
  animation-name: fade;
  animation-duration: 4.8s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}







/*-------------- CONTACT US PAGE -----------------*/
#contactus_div input[type=text]{
width:80%;
float:right;
}
#contactus_div textarea{
height:150px;
width:100%;
}
#contact_form_div{
clear:both;
}









/*-------------- WHY US PAGE -----------------*/
#why_us_inner{
    margin:0;
    padding:0;
height:130px; 
line-height:20px;
font-size:16px;
}
#why_us_inner div{
    margin:0;
    padding:0;
}
#why_us_inner_glyph{
color:darkslategray; 
background:white; 
line-height:90px; 
height:90px; 
width:70px; 
font-size:30px; 
text-align:center;
 border-radius:0 10px 0 10px;
 border:1px solid #e3e1e1;
 transition: all 1s; 
}
#why_us_inner:hover #why_us_inner_glyph{
color:white; 
background:darkslategray;
transition: all 1s; 
}
#why_us_lower{
    margin:0;
    padding:0;
}
#why_us_lower div{
    margin:0;
    padding:0;
}
#why_us_inner h3{
color:darkblue;
padding-top:0;
margin-top:0;
}
#why_us_lower h3{
background:darkslategray;
color:white;
padding:5px;
}
#why_us_bottom{
	clear:both;
	min-height:100px;
	padding-top:30px;
	padding-bottom:30px;
	background: #f0e0e0;
	text-align:center;
	font-weight:700;
}














/*-------------- PAGINATION -----------------*/
ul.tsc_pagination li a
{
border:solid 1px;
border-radius:3px;
padding:6px 9px 6px 9px;
color:black;
text-decoration:none;
margin-top:5px;
padding:7px 10px 7px 10px;
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}
ul.tsc_pagination li
{
padding-bottom:1px;
float:left;
margin:0px;
padding:0px;
margin-left:5px;
height:30px;
}
ul.tsc_pagination li a:hover,ul.tsc_pagination li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
}
ul.tsc_pagination
{
margin:4px 0;
height:50px;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
padding:5px;
}










	/*-------------- FOOTER -----------------*/
#footer{
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%), url('../../images/footer-back.jpg');
	background-size: cover;
    background-position: center;
	color: white;
	clear:both;
	min-height:150px;
	line-height:35px;
}
#footer ul{
	display:inline-block;
	list-style:none;
	padding:0;
}
#footer h3{
	color:#1dd4d4;
    border-bottom:1px dashed gray; 
    width:280px;
	font-size:22px;
}
#footer a{
	color: white;
}
#footer a:hover{
	color: white;
	padding-left:5px;
	text-decoration:none;
	transition: all .5s;
}
#footer #lower_footer{
	text-align:center;
	color:darkgray;
	border-top:1px solid gray;
	height:60px;
	line-height:30px;
}
#footer input[type=text]{
	width:100%;
	background:black;
	color:white;
	margin-bottom:5px;
	border-radius:5px;
}
#footer input[type=submit]{
    width:100%;
	color:white;
	border-radius:5px;
	border:1px solid white;
}
#footer #Newsletter_info{
	line-height: 18px;
	color:#ccc7c7;
}
#social_links{
	color:white;
	padding:15px;
	border-radius:50%;
	border:1px solid darkgray;
}
#social_links:hover{
	background-color:#4a6d9d;
	border-color:#4a6d9d;
}








/*-------------- NOTIFICATIONS -----------------*/
.not-body {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100vh;
    z-index: -1;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding-top:70px;
    -webkit-transition: .6s;
    transition: .6s;
    color:black;
}
.not-body .inner-pad {
  height:100%;
  background: rgba(0,18,23,0.6);
  padding-top:0px;
  padding-bottom: 20px;
}
.not-body .inner-pad .add-pad {
    height:100%;
}
.not-body .inner-pad .add-pad .nholder {
    position: relative;
    height:100%;
}
.notification {
    position: absolute;
    bottom:10px;
    right: 0px;
    width: 400px;
    background:#fff;
    text-align: center;
    padding-bottom: 40px;
}
.notification img {
float: left;
width:100%;
margin-bottom: 10px;
}
.notification .medium-normal {
background: #fff;
color: #333;
}
.notification #close-not {
width:100px;
padding:5px;
cursor: pointer;
color:DarkSlateGray;
background:white;
margin:20px auto 20px auto;
border:3px solid DarkSlateGray;
}













@media(max-width:768px) {
/*-------------- HOME PAGE -----------------*/
    	#home1{
		height:300px;
	}
	#home1_inner{
		padding:20px 0 0 0;
		text-align:center;
		color:yellowgreen;
		line-height:18px;
		font: 18px Arial, sans-serif;
	}
	#home1 #why_us_image{
		position:absolute; 
		width:90px; 
		bottom:0; 
		right:0;
	}
	#home2{
	    padding:0;
	    margin:0;
		font: 14px normal Helvetica, Arial, sans-serif;
		line-height:22px;
		text-align:justify;
	}
	#home2 h3{
		font-size:22px;
		padding-left:0;
		margin-left:0;
	}
	#home4{
	padding:0; 
	margin:0; 
	margin-top:10px; 
	height:150px; 
	font-size:15px; 
	line-height:25px;
	}
	#home4 span{
	font-size:30px; 
	}
	table{
    table-layout:fixed;
    overflow-x: auto;
        display: block;
        font-size:10px;
}
#home3{
	height:150px;
	line-height:20px;
	font-size:14px; 
	}
#home3 span{
	font-size:22px; 
	}
#home3 h2{
	color: darkgreen;
	padding-left:0px;
	font-size:14px;
	}
#home3 p{
	font-size:14px; 
	padding-left:0px;
	}










#body_page{
		min-height:400px;
	}
#body_page h2{
		font-size:16px;
		width:100%;
	}
#body_page table{
    table-layout:fixed;
    overflow-x: auto;
        display: block;
        font-size:10px;
}








	/*-------------- FOOTER -----------------*/
#footer{
	padding:0;
	margin:0;
	border:0;
	line-height:25px;
}
#footer h3{ 
    width:320px;
}
#footer #lower_footer{
    border:0;
	line-height:16px;
	clear:both;
	padding-top:30px;
} 

}