@charset "utf-8";
/* CSS Document */
/*----------Documents CSS-----------*/
@media screen and (max-width:1024px) {
	#main .welcome h2 {
		float: left;
		width: 28%;
	}	
	#main .welcome p {
		float: left;
		width: 69%;
                padding: 0 0 50px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#topup {
		bottom: 5px;
		margin-left:0px;
	}
	#clients{ position:inherit;}
	.footer_widget_3{ margin-bottom:85px; }
	/* .header_container, #top_nav, .wrapper_container{ width: 767px; } just turning it into mobile responsive immediately - BM */
}
@media only screen and (min-width: 480px) and (max-width: 959px) {
	.header_container,.footer_container,.wrapper_container{
		width:100%;
	}
.header_container {
		padding-top:15px;
		padding-bottom:10px;
	}
	#main .welcome {
		padding-left: 15px;
	}	
	#nav{
		display:none
	}
	#main .welcome h2 {
		float: left;
		width: 34%;
	}	
	#main .welcome p {
		float: left;
		width: 60%;
	}
	.serviceBlock{
		float: none;
		margin: 0 auto;
		border: none;
		margin-bottom: 20px;		
	}
	#topup {
		margin-left:0px;
		bottom:8px;
		left: 85%;
	}
	.footer_widget_3{
		margin-top: 20px;
		text-align: left;		
	}
	#footer_wrapper {
		padding: 38px 0 8px 0;
	}
	#bannerText {
		left: 0%;
		top: -275px;
		margin-left: 0px;
	}
	#navigation {
		left: 0%;
		top: -50px;
		margin-left: 0px;
	}
	#banner_container{
		width: 95%;
		background: red;
		margin: 0 auto;
		position: relative;
	}
	#breadcrumb {
		font-size: 46px;
		top: 60px;
		right: 0%;
		margin-right:0px;
		position: absolute;
	}
	#client_container {
		width: 90%;
	}
	/*.client_container {
		min-height: 402px;
		width: 68%;
	}*/
	.clnavigation{
		left:40%
	}
	.client_container {
		/*min-height: 702px;*/
		width: 45%;
		margin: 0 auto;
	}
	#clients img,#clients img.small {
		margin: 0 55px 20px!important;
		display:block
	}	
	#clients {
	    padding: 5% 16%;
	    position: inherit;
	    text-align: center;
	}
	.footer_widget_3{ margin-bottom:85px; text-align:center;
	}	
	.footer_widget_1,.footer_widget_2,.footer_widget_3{
			margin-bottom: 20px;
			width:100%;
			text-align:center;
			padding-right:0;
		}
	/* .crsl-item{ width:97px !important;}	 */
	.crsl-items,
	.slidernav{ margin-left:0% !important;}	
	
		
	.slidernav a.next {
	  display: inline-block;
	  padding:0px;
	  margin:0 8px 0 0 ;
	  float:none;
	  width:19px;
	  height:37px;
	  background:url(../images/next-arrow.png) left top no-repeat;
	  text-indent:-9999px;
	}
	.slidernav a.previous {
	  display: inline-block;
	  padding:0px;
	  margin:0 8px 0 0 ;
	  float:none;
	  width:19px;
	  height:37px;
	  background:url(../images/prev-arrow.png) left top no-repeat;
	  text-indent:-9999px;
	}
	.crsl-items{ margin-top:30px;}
	#top_nav{
		width:100%;
		}
	#logo, #logo a{
		width:100%;
		text-align:center;
		margin-bottom:10px;
		}	
	#social {
	    float: none;
	    margin-right: 0;
	    text-align: center;
	    width: 100%;
	}
	#social a{
		 float: none;
		 }
	#top_nav{
		position:inherit;
		margin:10px 0 -53px;
	    top:0;
		}
	.camera_pag {
	    float: none !important;
	    margin: -71px 0 0 0 !important;
	    padding: 0 !important;
	    width: 100% !important;
		text-align:left !important;
	}	
	.cameraContent{ width:100% !important;}	
	.camera_wrap .camera_pag .camera_pag_ul{ text-align:left !important;}
	.footer_widget_2 #address {
	    background: none;
	    padding: 0px;
	}
	#camera_wrap_95 .camera_caption > div{ margin-left:10px;}
	#w{
		max-width:100% !important;
		min-width:100% !important;
		width:100% !important;
		}
	.client_container{
		width:100%;
		margin:0;
		padding:0;
		}
	#footer_wrapper{
			background:#163561;
		}
				
}/* END MAIN RESPONSIVE SNAP */
@media only screen and (max-width: 480px) {
	#main .welcome h2 {
		float: left;
		width: 44%;
	}
	#main .welcome p {
		float: left;
		width: 50%;
	}
	
}
/*@media screen and (max-width: 600px){
	#clients img, #clients img.small {
		margin: 0 70px 20px!important;
	}
}*/

@media only screen and (max-width: 479px) {
        #main .welcome h1 {
		text-align: center;
		width: 100%;
	}
        #main .welcome h1 b {
		text-align: center;
		padding-bottom: 10px;
	}
	.header_container,.footer_container,.wrapper_container{
		width:100%;
	}
	.header_container {
		padding-top:15px;
		padding-bottom:10px;
	}
	#social {
		margin-top: 20px;
	}	
	#main .welcome {
		padding-left: 0px;
	}	
	#nav{
		display:none
	}
	#main .welcome h2 {
		float: none;
		width:60%;
		margin:0 auto;
		text-align:center
	}	
	#main .welcome p {
		float: none;
		width:80%;
		margin:0 auto;
		text-align:center;
		margin-top: 20px;
                padding-bottom: 5px;
	}	
	.serviceBlock{
		float: none;
		margin: 0 auto;
		border: none;
		margin-bottom: 20px;	
                width: auto;
	}
	.footer_widget_1,.footer_widget_2,.footer_widget_3{
		margin-bottom: 20px;
		width:100%;
		text-align:center;
		padding-right:0;
	}
	.footer_container .footer_widget_3{
		text-align:center;
		margin-bottom: 0px;
	}
	#footer_wrapper{
		background:#163561;
	}
	#topup {
		/*
bottom: 5px;
		left: 40%;
		margin-left: 0px;
*/
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		display: block;
		margin: 20px auto 0px auto;
	}
	#bannerText {
		left: 0%;
		top: -275px;
		margin-left: 0px;
	}
	#navigation {
		left: 0%;
		top: -50px;
		margin-left: 0px;
	}
	#banner_container{
		width: 95%;
		background: red;
		margin: 0 auto;
		position: relative;
	}
	#breadcrumb {
		font-size: 46px;
		top: 60px;
		right: 0%;
		margin-right:0px;
		position: absolute;
	}	
	#client_container {
		width: 90%;
	}
	.client_container{
		/*min-height: 702px;*/
		width: 50%;
	}
	.clnavigation{
		left:40%
	}
        #clients .thumbnail {width: 126px;}
	#clients img.small,#clients img  {
		/*margin: 0 40px 10px!important;*/
		display:block
	}
	#clients{ position:inherit;}
	.footer_widget_3{ margin-bottom:85px;
	}	
	/* .crsl-item{ width:97px !important;} */
	/*.crsl-items{ margin-left:-14% !important;}*/
	
	.slidernav{ margin-left:0% !important;}
	
		
	.slidernav a.next {
	  display: inline-block;
	  padding:0px;
	  margin:0 8px 0 0 ;
	  float:none;
	  width:19px;
	  height:37px;
	  background:url(../images/next-arrow.png) left top no-repeat;
	  text-indent:-9999px;
	}
	.slidernav a.previous {
	  display: inline-block;
	  padding:0px;
	  margin:0 8px 0 0 ;
	  float:none;
	  width:19px;
	  height:37px;
	  background:url(../images/prev-arrow.png) left top no-repeat;
	  text-indent:-9999px;
	}
	.crsl-items{ margin-top:30px;}
	#top_nav{
		width:100%;
		}
	#logo, #logo a{
		width:100%;
		text-align:center;
		margin-bottom:10px;
		}	
	#social {
	    float: none;
	    margin-right: 0;
	    text-align: center;
	    width: 100%;
	}
	#social a{
		 float: none;
		 }
	#top_nav{
		position:inherit;
		margin:10px 0 -53px;
	    top:0;
		}
	.camera_pag {
	    float: none !important;
	    margin: -71px 0 0 0 !important;
	    padding: 0 !important;
	    width: 100% !important;
		text-align:left !important;
	}
	.cameraContent{ width:100% !important;}	 
	.camera_wrap .camera_pag .camera_pag_ul{ text-align:left !important;}
	.footer_widget_2 #address {
	    /* background: url("../images/icons/map-icon.png") no-repeat scroll 20px top rgba(0, 0, 0, 0); */
	    background: none;
	    padding: 0px;
	}
	#camera_wrap_95 .camera_caption > div{ margin-left:10px;}
	#w{
		max-width:100% !important;
		min-width:100% !important;
		width:100% !important;
		}
	.client_container{
		width:100%;
		margin:0;
		padding:0;
		}	
	#clients {
	    padding: 5%;
	    position: inherit;
	    text-align: center;
	}	
					
}
/* Smartphones iPhone (landscape) ----------- */
@media only screen 
and (min-width: 321px) and (max-width: 568px) 
and (orientation : landscape) {
	#main .welcome p {		
		width: 55%;                
	}
	#main .welcome h2 {
		float: left;
		width: 40%;
	}	
	#clients{ position:inherit;}	
.crsl-item{ width:97px !important;}	
}
/* Smartphones iPhone (portrait) ----------- */
@media only screen 
and (max-width : 320px) and (orientation : portrait) {
	#clients img.small,#clients img  {
		/*margin: 0 40px 10px!important;*/
		display:block
	}
	#clients{ position:inherit;}
.crsl-item{ width:259px !important;}	
	
}

@media only screen and (max-width: 240px) {
	#main .welcome h2 {
		float: none;
		width: 80%;
	}
	.footer_widget_1,.footer_widget_2,.footer_widget_3{
		padding-right:0;
		width:100%;
		text-align:center;
		
	}
	.footer_widget_3{
		width:80%
	}
	#bannerText {
		width:90%
	}
	#clients h2 span{
		display:block
	}
	#client_container {
		width: 92%;
	}
	.client_container {
		padding: 25px 60px 13px 45px;	
	}
	#clients{ position:inherit;}
}


/* BM UPDATES AND FIXES 
********************************************************************************************************/
@media only screen and (max-width: 959px) {
	#LHS, #RHS{
		display: block;
		float: none;
		width: 100%;
		padding: 0px;
	}
	.item-page, #RHS{ padding: 0px 10px; }
	/* making the full menu show on mob */
	#top_nav ul.sf-menu{ width: 100%; }
	#top_nav ul.sf-menu li a{
		font-size: 16px;
		padding: 5px;
	}
	#top_nav ul.sf-menu li+li{ border-top: 1px solid #51657E; }
	#top_nav ul.sf-menu ul{
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: none;
		box-shadow: none;
		height: auto !important;
		width: auto !important;
		-webkit-box-shadow: none;
		margin: 0px 0px 0px 15px;
	}
		#top_nav ul.sf-menu ul:before{
			content: '';
			position: absolute;
			left: -5px;
			top: 11px; 
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 3.5px 0 3.5px 6.1px;
			border-color: transparent transparent transparent #c1c9d1;
		}
		#top_nav ul.sf-menu ul li{
			background: none;
			
		}

	/* banner */
	#banner_wrapper{ height: auto; padding-top: 40px; }
	/* clients page client logos */
	body.clients #client_wrapper .bt-cs .thumbnails{
		display: block;
		width: 100%;
		float: none;
		height: auto;
		padding: 8px 0px;
	}
	body.clients #client_wrapper .bt-cs .thumbnails{ border-top: 2px solid #6D6D6D; }
	body.clients #client_wrapper .bt-cs .thumbnails:after{ display: none; }
	body.clients #client_wrapper .bt-cs .thumbnails+.thumbnails:before{ display: none; }
	body.clients #client_wrapper .bt-cs .bt-row-first .thumbnails{ border: none; }
	body.clients #client_wrapper .bt-cs .bt-row-first .thumbnails+.thumbnails{ border-top: 2px solid #6D6D6D; }
	
	body.clients #client_wrapper .bt-cs .thumbnails a{ display: block; }
}