

/*=TYPOGRAPHY
-------------*/
body{font-family: 'Roboto', sans-serif;color:#202B65; font-size: 1em; color:#4d4d4d; line-height:1.6!important;}
#wrap {position: relative;max-width:1175px;margin:0 auto;}
.txtR{text-align:right}
.uppercase{text-transform:uppercase;}
h2,h3{margin-top:0px;margin-bottom:3px}
.switch-turquoise{color: #589AB2 !important;}
.switchblueadmin{color:#5193B2!important; font-family: 'Roboto', sans-serif;}
.switchdarkblue{color:#1D4960!important;}
.switchgrey{color:#4C4D4E!important;}
.switchblack{color:#000000;}
.switchbrown{color: #fff!important;}
.switchgold{color: #A78563 !important;}
.switch-White{color: #ffffff !important;}
.switchwhiteheader{color: #fff!important; font-weight:300 !important; font-size: .75em !important;}

h1 {font-size: 35px;color: #093255; font-weight: 300; margin-bottom: 20px;line-height: 1.4;margin-top: 25px;}
h1 span{display: block; font-size: 16px; font-weight: 300;}

h4 {font-size: 17px;color: #0A3254;line-height: 1.4;font-weight: 500;margin-top: .75em;margin-bottom: 0em;font-family: 'Roboto', sans-serif;}
h5 {font-size: 1em;font-weight: bold;padding-bottom: .0em;margin-bottom: 0;color: #DA282D;}
h6 {color: #4D4D4F; font-size: 15px; font-weight: 500; margin-bottom: 0px}

h6 small{color:#000000;font-size:12px}
h2{font-size:16px;color: #090400;line-height:1.6;}
h3{font-size:30px;color:#202B65;font-weight:400;line-height:1.4; text-transform:uppercase; display:block;position:relative; padding-bottom:3px; }

.bluelineheading {border-bottom:3px solid #99C6BF;position:absolute;content:'';width:59px;}

sup {vertical-align: super; font-size: 60%;}
sub {vertical-align:sub;font-size:65%}
b, strong {font-weight:bold;}
i, em {font-style:italic;}
.scrollable {position: relative;clear: both;}

.block-hm-white p{padding:10px; background-color:#EDEBE7; width:93%;margin:10px 0 0 20px;font-size:16px;}
.block-white-sal p{padding:10px; background-color:#EDEBE7; width:93%;margin:10px 0 10px 20px!important;font-size:18px!important;}
.block-white-sal p span{font-size:25px;}
.block-white-sal {background:#fff;}
.block-white-sal ul.list { margin-left: 2em;  margin-top: .5em; font-size:1.3em;}
.marg-left-15{margin-left: 17px;}
marquee {display: inline-block; width: -webkit-fill-available;}

.commentary-heading {color:#F36E60;line-height:1.4; font-size:1.1em !important;}
.text-decoration {text-decoration:none!important;}
.footer-txt {font-size:23px;color:#829EBC;font-weight:600;line-height:1.4; text-transform:uppercase;}

.download-header {font-size:20px!important; font-weight:500; margin-left:15px; margin-top:20px;}
.download-header span {font-weight:normal;}

.highlights-block{ background: #DBEFF0;  padding: 20px; height: 100%; margin-right: 20px}	
.highlights-block p{ font-size: 20px; color: #093255; text-align: center; line-height: 1.4}
.highlights-block p span{ font-size: 50px; color: #78C8CB; line-height: 1.2; display: block; font-weight: 700}
	.highlights-height{height: 20px}
.down-title{margin-right: -10px;}
	
/*=LINKS
--------*/
a {outline:none}
a:link {color:#202B65;}
a:visited {color:#202B65;}
a:hover {color:#DA272E;text-decoration:none;}

/*EXCEL DOWNLOAD BUTTONS*/
.hoverMe-excel {background: #0B3254;height: 40px;width: 40px;border: 0;color: #fff;text-align: center;padding:7px; overflow: hidden; position: relative; cursor: pointer; font-size:20px;}
.hoverMe-excel:after {background: #fff; height: 40px; width: 100%; border: 0; color: #0B3254; text-align: center; content: '\ef2c'; display: block; position: absolute; top: -110%;
  left: 0px; line-height: 40px; transition: all 0.5s ease-in-out;}
.hoverMe-excel:hover:after {position: absolute; top: 0px; }
	.download-excel{float:right; margin-left:5px;}

/*=DOWNnLOAD STYLES
--------------------*/

.down-title{font-size:15px;color:#093255;text-align:center; }
.down-title a{text-decoration:none;color:#093255;position: relative;
    right: 1px;transition: .3s all;}
.downloads-text{text-decoration:none; color:#78C8CB;line-height:1.4;font-size: 16px;margin-left: 7px;transition: .3s all;transition: 0.5s ease-in;}

.downloads-text:before{content: '\e93c';
    font-family: 'icomoon';
    speak: none;
    color: #DA272E;
    font-weight: bold;
    bottom: -2px;
    position: relative;
   left: -7px;
       padding-right: 1px;transition: 0.5s ease-in;}
.downloads-text a{text-decoration:none;color:#78C8CB;transition: .3s all;transition: 0.5s ease-in;}
.downloads-text a:hover{color:#DA272E;}

.cover-align{text-align:center;}

.change-case{text-transform:none !important;}
.downloads-second-sec{margin-left: 36px;}

.tool-wrapper{background-color: #99FF66;}
.tool-container { height:50px;max-width: 120px;float: right;display: flex;background: #fff;border:2px solid #CACFD7;border-left:8px solid #DA272E;border-width: 2px 0px 2px 8px;transition: all 0.5s ease;     position: relative;top: 95px;    right: 29px;}
.tool-container .icon-items{  width: 60px;  position: relative;  cursor: pointer;  transition: all 0.5s ease;}

.search-box .input {position:relative;overflow:hidden;  width: 0px;  height: 100%;  border: 0px;  outline: none;  transition: all 0.5s ease;}

.tool-container .icon-items-1:hover {  border-top-left-radius: 5px;  border-bottom-left-radius: 5px;}

.tool-container .icon-1:hover {  border-top-right-radius: 5px;  border-bottom-right-radius: 5px;}

.tool-container .icon-items img{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 20px;  color: #848484;}

.input.active ul{margin:0; padding:0}
.search-box .input.active {  width:80px;  padding: 0;}

.tool-container.active {  max-width: 442px;}
	
.input ul li:first-child{border-left:1px solid black}
.input ul li:last-child{border-right:1px solid black}
.input ul {list-style-type: none}
.input ul li{display: inline-block; float: left; vertical-align: middle; width: 22%;}
.input ul li a{display: block; padding: 13px 0; font-size: 20px; text-decoration: none}
.input ul li a img{transition: 0.3s ease}
.input ul li a:hover img{transform:scale(0.5)}

.input ul li {
    display: inline-block;
    float: left;
    vertical-align: middle;
    width: 50%;
    height: 100%;
    text-align: center;}

.icon-1 img{transition: 0.3s ease}
.active .icon-1 img{transform:rotateZ(180deg); top: 15px}
.tool-container .icon-1:hover img{transform:rotateZ(180deg); top: 15px}
.tool-container .icon-1 img{transition: 0.3s ease}
@media screen and (max-width: 1536px) {img[src="images/tool/Group 2228.svg"], .icon-items:nth-child(1){display:none!important}}
@media screen and (max-width: 500px) {
  .search-box .input.active {
    width: 125px;
  }
  .tool-container.active {
    max-width: 320px;
  }
}



/*=BODY CONTENT
---------------*/
main[role="main"] p {font-size:1.1em;margin-bottom:1em;line-height:1.4;}
main[role="main"] ul, main[role="main"] ol {margin-bottom:.5em;}
main[role="main"] li {font-size:1.1em;line-height:1.4;}
main[role="main"] li li, main[role="main"] li p {font-size:100%}
.bath-tub {display:block;float: left;}
.bath-tub img{display:block;max-width:100%;height:auto !important;}
#container figure img {display:block;max-width:100%;height:auto !important}
ul.list li,ol.list li {padding-bottom: 0px;line-height:1.3; font-size:16px;}
ul.list-arrow li {list-style-type:none; margin-left:20px;position:relative; line-height:1.4}
ul.list-arrow li:before {content:'';position:absolute; top:5px; left:-20px; height:5px; width:5px; border-top:1px solid #F15923; border-right:1px solid #F15923; transform: rotate(45deg); webkit-transform: rotate(45deg); moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);}


ol.list {list-style:decimal;margin-left:2.5em}
ul.list-icons li {line-height:1.6; margin-left:.75em;}
ul.list-icons i {font-size:120%;padding-right:.5em;margin-left:-.5em}

ul.square{margin-top:0;line-height:18px}
ul.square li{list-style:none;position:relative;padding:0;margin:0 0 10px 15px; font-size:1em}
ul.square li:before{content:''; width:6px; height:6px; position:absolute; background:#000; top:5px; left:-15px;}
ul.bullet-black{margin-top:0;line-height:18px}
ul.bullet-black li{list-style:none;position:relative;padding:0;margin:0 0 10px 15px}
ul.bullet-black li:before{content:'';position:absolute;top:5px;left:-20px;border:none;width:5px;height:5px;background:#57585A;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%}
ul.bullet-black li li:before{content:'';position:absolute;top:5px;left:-20px;border:none;width:5px;height:5px;border-bottom:1px solid #57585A}


ul.blue-dot {list-style: none; margin-bottom:15px!important; text-align:justify;}
ul.blue-dot li {margin-left: 16px;}
ul.blue-dot li:before {content: "\2022";color: #809CB9;font-weight: bold;display: inline-block; width: 1em;margin-left:-16px; font-size:1.1em;}


.intro {color:#047f8c!important;font-size:18px !important; font-weight:normal;}

.block-content .gutter {padding:.5em;}
.block-content {background:#000;}

ul.dash-list li {list-style-image: url(../images/dash.png); padding-top:3px; margin-left:20px;}
.switch-black {color:#000;}
.noMarginB{margin-bottom:0!important;}
.beigebackground { background-color:#F15923; padding:10px}
.switch-turq{color:#007DB5;}

/*breadcrum*/



/*RESETS*/
.no-margin{margin: 0!important;}
.no-marginT{margin-top: 0!important;}
.no-marginB{margin-bottom: 0!important;}
.no-marginL{margin-left: 0!important;}
.no-marginR{margin-right: 0!important;}

.no-padding{padding: 0!important;}
.no-paddingT{padding-top: 0!important;}
.no-paddingB{padding-bottom: 0!important;}
.no-paddingL{padding-left: 0!important;}
.no-paddingR{padding-right: 0!important;}

.padding-30{padding: 30px;}
.padding-40{padding: 40px 20px;}
.padding-50{padding: 50px 0px;}
.padding-30L{padding-left: 30px!important;}
.padding-30R{padding-right: 30px!important;}
.padding-30T{padding-top: 30px!important;}
.padding-30B{padding-bottom: 30px!important;}

.padding-20{padding: 20px!important;}
.padding-20L{padding-left: 20px!important;}
.padding-20R{padding-right: 20px!important;}
.padding-20T{padding-top: 20px!important;}
.padding-5T{padding-top: 5px!important;}
.padding-20B{padding-bottom: 20px!important;}

.padding-10T{padding-top: 10px!important;}
	
.padding-15{padding: 15px!important;}
.padding-15L{padding-left: 15px!important;}
.padding-15R{padding-right: 15px!important;}
.padding-15T{padding-top: 15px!important;}
.padding-15B{padding-bottom: 15px!important;}
.padding-10B{padding-bottom: 10px!important;}
.padding-40T{padding-top: 40px!important;}


	
.margin-30{margin: 30px!important;}
.margin-30L{margin-left: 30px!important;}
.margin-30R{margin-right: 30px!important;}
.margin-30T{margin-top: 30px!important;}
.margin-40T{margin-top: 40px!important;}
.margin-60T{margin-top: 60px!important;}
.margin-30B{margin-bottom: 30px!important;}

.margin-20{margin: 20px!important;}
.margin-20L{margin-left: 20px!important;}
.margin-20R{margin-right: 20px!important;}
.margin-10TB{margin: 7px 0px!important;}
.margin-20T{margin-top: 20px!important;}
.margin-20B{margin-bottom: 20px!important;}

.margin-15{margin: 15px!important;}
.margin-15L{margin-left: 15px!important;}
.margin-15R{margin-right: 15px!important;}
.margin-15T{margin-top: 15px!important;}
.margin-15B{margin-bottom: 15px!important;}

.margin-10{margin: 10px!important;}
.margin-10L{margin-left: 10px!important;}
.margin-10R{margin-right: 10px!important;}
.margin-10T{margin-top: 10px!important;}
.margin-10B{margin-bottom: 10px!important;}

.margin-5T{margin-top: 5px!important;}

.margin-80T{margin-top: 80px!important;}



/* End of Ezra Styles ------------------------------------------------------------------------------------------------------------------------------------------------------------------------  */

.kumbatext-com {
    color: #007db5!important;
    font-size: 22px;
    margin-bottom: 0!important;
    font-weight: 600;
}
/*Ntsebeng Styles_kumba-delivers.php*/
.kumbatext {
    color: #007db5!important;
    text-transform: uppercase;
    font-size: 23px;
}
.kumbatext-dblue{font-size: 26px;}

/*.finthicktop {
    border-top: 2px solid #30396F;
}*/
.switch-lblue-key{color: #007DB5;}

.visit-web-img{float: left; margin-right: 10px}
.visit-text{float: left}
.visit-link{text-decoration: none;}




.kumbatext-key{
color: #067DB5;
font-size: 30px;
text-transform: uppercase;
font-weight: 600;
}


.key-figrs{
	font-size: 30px;
    color: #202B65;
    font-weight: 600;
}


a.buttonexcel {float:right;
padding: 19px 15px 18px 76px;
background: #DBEAF3;
border: solid #30396F 1px;
width: auto;
color: #30396F;
text-transform: uppercase;
font-weight: 900;margin:20px 0;
position: relative;
}
a.buttonexcel:before {
content: '';
width: 57px;
height: 62px;
position: absolute;
left: 0px;
top: 0px;
background: url("../images/excel.svg") no-repeat;
background-size: 28px  22px;
background-position: center;
border-right: solid #30396F 1px;
}


/*End of Ntsebeng Styles*/

@media screen and (max-width: 1740px) {
#toolbar{
	
}



@media screen and (max-width: 1400px) {

	#toolbar{position: absolute;
   
  }

}




@media screen and (max-width: 1280px) {

	#toolbar{position: absolute;
    right: 0px;
  }
.page-name-bread
	{
		margin-right: 40px;
	}
}
@media screen and (max-width: 1607px) {

	}

@media screen and (max-width: 1405px) {

	}
@media screen and (max-width: 1010px) {
#toolbar {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 20px;
}
.page-name-bread
	{
		margin-right: 60px;
	}
}

@media screen and (max-width: 1090px) {
#toolbar {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 20px;
}
.page-name-bread
	{
		margin-right: 40px;
	}
}
	
	@media only screen and (max-width: 991px) {
  .adminBlocks {
   width: 100%;
	  min-height: auto;
	  margin-bottom: 15px;
  }
}
	
		
	
	
	
		
@media screen and (max-width: 993px) {
	
	
	#toolbar {
    position: absolute;
    top: 0px;
    right: -60px;
    width: 20px;
}
	.highlights-block{height: auto; margin-bottom: 20px; margin-right: 0}
	}
@media screen and (max-width: 975px) {
	
	
	#toolbar {
    position: absolute;
    top: 0px;
    right: -20px;
    width: 20px;
}
	}
@media screen and (max-width: 800px) {
#toolbar {width:280px;}
#toolbar ul li {font-size:1.1em;}
	.down-title{margin-right:0;}
.last-tool-bar-link {
    padding-bottom: 0px !important;
}
#utility {margin-bottom:-30px;float:left;width:100%;/*background: rgba(232,237,237,0.6); *//* Standard syntax (must be last) */}



#toolbar {position:relative;top:0;right:0;border:none;float:right;width:230px;}
#toolbar ul {float:right; /* Standard syntax (must be last) */}
#toolbar ul li {float:left;text-align:center;}
#toolbar a {padding:0.5em;}
#toolbar li a:link, #toolbar li a:visited {background-color:transparent;color:#002478;text-decoration:none; margin-bottom: 0px;height: 100%;}
#toolbar li a:hover {background:#007DB5;color:#fff;}
#toolbar ul li ul li:first-child {display:none;}

		.downloads-second-sec {
    margin-left: 0px;
}

}
	




































