@import url('https://fonts.googleapis.com/css?family=Montserrat:700i|PT+Sans:400,400i,700|Roboto+Slab:700|Roboto:400i,500i&subset=latin-ext');

html, body
{
background-color: #008b45; /*springgreen 3*/
font-family: 'PT Sans', sans-serif;
font-size: 13pt;
color: #4D4D4D; /*gray 30*/

}

h3
{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 14pt;
}

#body_wrapper
{
background: #F0FFFF; /*honeydew 1 (honeydew)*/
width: 1100px;
min-height: 400px;
margin: 0px auto;
border-radius: 8px;
}

#banner_area
{
text-align: center !important;
padding-top: 4px !important;
}

#menu_area_outer
{
background-color: #DFDFDF; 
border-radius: 20px;
margin: 0 2px;
padding: 2px 0;
}

#menu_area
{
margin: 0 auto;
display: table;
/*background-color: #008b45; /*springgreen 3*/
font-family: 'Roboto Slab', serif;
font-size: 14pt;

}

#menu_area ul
{
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#menu_area li:first-child
{
/*border-left: 2px solid #f0fff0;*/
}

#menu_area li:last-child
{
border-right: none;
}

#menu_area li
{
list-style: none;
display: inline;
float: left;
border-right: 2px solid #f0fff0;
padding: 2px 16px;
margin: 0;
}

#menu_area li:hover
{
background-color: #008b45; /*springgreen 3*/
}

#menu_area a
{
text-decoration: none;
}

#menu_area a:link /*non-visited links*/
{
color: #008b45; /*springgreen 3*/
}

#menu_area a:visited /*visited links*/
{
color: #4D4D4D; /*gray 30*/
}

#menu_area a:hover
{
color: #ffffff;
}

#menu_area a:active
{

}

#content-area
{
width: 1024px;
margin: 0px auto;
height: 100%;
}


#mid-section
{
height: 100%;
width: 746px;
line-height: 1.8em;
padding: 2px 20px;
text-align: justify;
/*display: inline-block;*/
float: left;
}

.page_title
{
font-family: 'Roboto', sans-serif;
font-size: 11pt;
font-weight: 500;
font-style: italic !important;
color: #D02090;
margin: 6px 0px;
}

.subtitle
{
font-family: 'Roboto Slab', serif;
font-size: 14pt;
font-weight: bold;
margin-left: 12px;
}

.values
{
	list-style-type: none;
	margin: 0px 0px 0px 50px;
	position: relative;
	padding:0px 0px 0px 30px;
}

.values li:before
{
	display: inline-block;
	position: absolute;
	left: 0px;
	content: '\2714'; /* hex character code*/
	text-align: center;
	font-size: 16pt;
	color: #39b54a;
}

.co-curricular
{
	list-style-type: none;
	margin: 0px 0px 0px 50px;
	position: relative;
	padding:0px 0px 0px 30px;
}

.co-curricular li:before
{
	display: inline-block;
	position: absolute;
	left: 0px;
	content: '\272C'; /* hex character code*/
	text-align: center;
	font-size: 16pt;
	color: #C71585;
}

.dagger
{
	font-size: 16pt;
	font-weight: bold;
	color: #9400D3;
	margin-right: 10px;
}

#mid-section a
{
text-decoration: none;
border-bottom: 1px dashed blue;
color: #4D4D4D;
}

#front-pic
{
width: 640px;
height: 401px;
display: block;
margin: 6px auto;
}

#sidebar_area
{
height: 100%;
/*display: inline-block;*/
float: right;
width: 290px;
margin: 6px 4px 4px 6px;
padding: 0px 4px;
/*background-color: #8FBC8F;*/
border-radius: 8px;
/*border: 1px solid #008b45;*/
}

.sidebar_panel
{
background-color: #008080;
padding: 0px 2px 4px 2px;
border-radius: 8px;
margin: 0px 0px 10px 0px;
}

.sidebar_panel a
{
	text-decoration: none;
	color: inherit;
}

.sidebar_panel a:visited
{
	color: inherit;
}

.sidebar_title
{
margin: 0;
text-align: center;
color: #f0fff0;
padding: 6px 0px;
}

.sidebar_panel_content
{
background-color: #f0fff0;
min-height: 200px;
border-radius: 8px;
padding: 4px 4px;
font-size: 13pt;
text-align: center;
}

.visitation_times
{
display: block;
color: #C76114;
font-weight: bold;
text-align: center;
}

.sidebar_bank_name
{
	font-weight: bold;
}

.time-period
{
	font-weight: bold;
	color: #1874CD;
}

.procedure
{
	list-style: none;
	/*remove default margin and padding*/
	margin: 0px 0px 0px 35px;
	padding: 0px 0px 0px 60px;
	position: relative;
}

.procedure li
{
	/* define the counter variable*/
	counter-increment: proc_num;
	margin: 12px 0px;
}

.procedure li:before

{
	content:counter(proc_num); /*generate the content*/
	display: inline-block;
	box-sizing: border-box;
	margin: 0px 16px 0px 0px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #39b54a;
	vertical-align:middle;
    text-align: center;
    color: white;
	position: absolute;
	left: 0px;
	padding: 2px 0px 0px 0px;
}

.safaricom_service
{
color: #39b54a;
font-weight: bold;
display: block;
text-align: center;
margin-bottom: 0;
}

#bank-wrap
{
	width:86%;
	margin: auto;
	background-color: white;
	border: 1px solid #F7F7F7;
	border-radius: 20px;
}

#contacts-wrap
{
	width:90%;
	margin: auto;
	background-color: #d2f7ff;
	border: 1px solid #F7F7F7;
	border-radius: 20px;
}

.bank
{
	margin: 50px 0px;
	text-align: center
}

.trademark
{
	font-weight: normal;
}

.contact
{
	margin: 15px 0px 10px 30px;
}

.cont-name
{
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
	font-size: 14pt;
	color: #1245ef;
}

.logo-container
{
	display: inline-block;
	width: 45%;
	text-align:right;
}

.icon-container
{
	display: inline-block;
	width: 170px;
	text-align: center;
	vertical-align: middle;
}

.bank-details
{
	display: inline-block;
	vertical-align: top;
	width: 55%;
}

.contact-type
{
	display: inline-block;
	vertical-align: middle;
}

.bank-logo
{
	max-width: 230px;
}

.contact-icon
{
	max-width: 75px;
}

.service
{
	font-size: 14pt;
	font-weight: bold;
}

.safaricom
{
	font-size: 12pt;
	color: #39b54a;
}

.acc_no, .cont_no
{
	font-size: 14pt;
}

.sidebar_panel_content_h1
{
font-family: 'Roboto Slab', serif;
font-weight: 700;
font-size: 14pt;
color: #008080;
text-align: center;
display: block;
}

.sidebar_panel_content_h2
{
text-align: center;
}

.bank_names
{
color: #C76114;
font-weight: bold;
text-align: center;
display: block;
}

.sidebar_contacts
{
text-align: center;
display: block;
}

#footer_area
{
text-align: center;
clear: both;
}