*{
		margin: 0px;
		padding: 0px;
		font: 16;
		font-size: 12px;
		}
	body{
		background:#fff;
		font-family: arial,Helvetica;
		font-size:12px;
		font-size: 1.3em;
		line-height: 18px;
		color:#2d2d2d;
		position:relative;
		-webkit-font-smoothing: antialiased;
	}
	p{
		font: 15px;
		}
	a{
		cursor:pointer;
		
	}

	h3{
		line-height: 1.1;
		padding:1px;
		font-size:35px;
		cursor:pointer;
		}
	h4{
		font-size: 30px;
		}
	img{
		max-height:100%;
	}
	#wrap{
		max-width:100%;
		margin:0 auto;
	}
	/* -------------this is for the hamburger menu ------------*/
		.container {
	    display: none;
	    cursor: pointer;
		float: left;
		margin-left: 0.7%;
	}

	.bar1, .bar2, .bar3 {
	    width: 30px;
	    height: 4px;
	    background-color: #333;
	    margin: 6px 0;
	    transition: 0.4s;
	}

	.change .bar1 {
	    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
	    transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .bar2 {opacity: 0;}

	.change .bar3 {
	    -webkit-transform: rotate(45deg) translate(-8px, -8px);
	    transform: rotate(45deg) translate(-8px, -8px);
	}
	/* -------------end styling hamburger menu ------------*/
	#head-wrap{
		width:100%;
		height: 80px;
		margin:0;
	}
	#logo{
		width:30%;
		height:10%;
		float:left;
		margin-left:2%;
		cursor: pointer;
	}
	#logo img{
		max-width:100%;
		max-height:100%;
	}/* this will make the image to resize to width of the container */

	/* this styling is for the search menu */
	#col-serch{
		width: auto;
		height: 10%;
		cursor:pointer;
		float:right;
		
	}

	#col-serch input[type=text] {
	  padding: 6px;
	  font-size: 17px;
	  border: none;
	}
	#col-serch button {
	  float: right;
	  padding: 6px 10px;
	  margin-right: 16px;
	  background: #ddd;
	  font-size: 17px;
	  border: none;
	  cursor: pointer;
	}
	#col-serch button:hover {
	  background: #ccc;
	}
	.col-split{
		width: 1px;
	    height: 32px;
	    background: #b9bbbf;
	    float: right;
	    margin-right: -21%;
		margin-top:1px;
	}
	.col-find-us{
		float:right;
		margin-right:-26%;
		margin-top:7px;
		font-size: 15px;
	}

	.col-reg {
	    width: 100px;
	    height: 32px;
	    border-bottom: 1px solid #de2929;
		border-left: 1px solid #de2929;
		border-right: 1px solid #de2929;
		border-bottom-right-radius: 10px;
	    border-bottom-left-radius: 10px;
	    float: left;
	    margin-left: 27%;
		margin-right: 2%;
	}
	.col-reg p{
		font-size: 15px;
		text-align:center;
		line-height: 2.2;
	}

	.col-login {
	    width: 100px;
	    height: 32px;
	    border-bottom: 1px solid #b9bbbf;
		border-left: 1px solid #b9bbbf;
		border-right: 1px solid #b9bbbf;
		border-bottom-right-radius: 10px;
	    border-bottom-left-radius: 10px;
	    float: left;
		background:#de2929;
	}
	.col-login p{
		font-size: 15px;
		text-align:center;
		line-height: 2.2;
		color:white;
	}
	#col-ppb{
		 width: 420px;
	    height: 44px;
	    float: right;
	    margin-top: 1%;
	    margin-right: 22%;
	}

	#col-per{
		width:128px;
		height:38px;
		float:left;
		background:#b9bbbf;
		margin-top: 1.1%;
		border-top-right-radius: 5px;
	    border-top-left-radius: 5px;
		overflow:hidden;
	    margin-right: 2px;
		cursor:pointer;
	}
	#col-per p{
		font-size: 15px;
		text-align:center;
		line-height: 2.2;
		color:#303133;
	}

	#col-per p:hover{
		color:#303132;
		transition:0.5s ease-in-out;
	}

	#col-pri{
		width:32%;
		height:38px;
		float:left;
		background:#555659;
		margin-top: 1.1%;
		border-top-right-radius: 5px;
	    border-top-left-radius: 5px;
		overflow:hidden;
		margin-right: 2px;
		cursor:pointer;
	}
	#col-pri p{
		font-size: 15px;
		text-align:center;
		line-height: 2.2;
		color:white;
	}
	#col-pri p:hover{
		color:#acadaf;
		transition:0.5s ease-in-out;
	}

	#col-bus{
		width:32%;
		height:38px;
		float:left;
		background:#303133;
		margin-top: 1.1%;
		border-top-right-radius: 5px;
	    border-top-left-radius: 5px;
		overflow:hidden;
	    margin-right: 2px;
		cursor:pointer;
	}
	#col-bus p{
		font-size: 15px;
		text-align:center;
		line-height: 2.2;
		color:white;
		text-align:center;
	}
	#col-bus p:hover{
		color:#acadaf;
		transition:0.5s ease-in-out;
	}

	.clearfix-padding{
		clear:both;
		padding:2%;
	}
	/*---------------------------------------------------*/

	#col-nav{
		width:100%;
		height:35px;
		background:#dedfe0;
		margin-top: -4%;
		border:0.2px solid #bdbfc1;
	}

	ul {
		list-style:none;
		margin-right: 3%;
	}

	ul li{
		font-family:sans-serif;
		display:inline-block;
		padding-right:3%;
		padding-top:0.8%;
		float: right;
		font-size: 70%;
		font-weight:100;
		
	}
	a{
		text-decoration:none;
		color:black;
	}
	a:hover, .current {
		text-decoration:underline;
	}
	/*--------------------slider starts here -----------------*/
	.fade{
		margin:auto;
		margin-top: -3.5%;
		max-width: 1360px;/* This is what makes it to auto-resize */
	}

	.imgban-box{
		padding-top:70px;
		padding-left:100px;
	}
	 .imgban-box h2{
		font-family: arial;
		font-size: 60px;
		color: #fff;
	}
	 .imgban-box h2 p{
		font-family: arial;
		font-size: 16px;
		color: #fff;
		padding-top: 6px;
	 }
	.fade img{
		max-width:100%;
		max-height:100%;
	}

	/*--------------------slider ends here -----------------*/

	#col-inner-wrap{
		width:100%;
		height:676px;
		margin:auto;
		background:#42423f;
		margin-top:-4%;
	}
	#col-inner-wrap-1{
		width: 27%;
		height:auto;
		margin: 0;
		margin-left: 5%;
		margin-right: 1%;
	    float: left;
	}
	#col-circle{
		width: 70px; 
		height: 70px; 
		margin:1%;
		margin-right: 3%;
		max-width:100%;
		max-height:100%;
		background:#de2929;
		border-radius:100px;
		-webkit-border-radius:100px;
		-moz-border-radius:100px;
		float:left;
	}
	#col-circle p{
		margin-left:25%;
		margin-bottom:1%;
		line-height: 2.6;
		font-size:27px;
		font-weight:strong;
		color:white;
	}
	#col-inner-wrap-1 h4{
		line-height: 1;
		text-align: left;
		color:white;
		font-size: 158%;
	}
	#col-inner-wrap-1 h4:hover{
		transition: 1s ease-in-out;
		color:#b91818;
		cursor:pointer;

	}

	.font{
		font-size: 15px;
		line-height: 2;
		color: #c5c5c5;
		text-align: left;
	}
	.font-txt-center{
		font-size:13px;
		line-height:2;
		color:#565252;
		text-align:center;
	}
	/* starts the styling for inner wrap 2 */
	.col-inner-wrap-2{
		width:100%;
		height:430px;
		margin:auto;
		background:#42423f;
		margin-top:-4%;
	}
	#col-3{
		width:  55%;
		height:292px;
		float:right;
		margin-right:5%;
	}
	#col-3 h4{
		line-height:1.8;
	}
	#col-3 h5{
		line-height: 3;
	}
	#col-learn-more{
		width: 15%;
		height:17%;
		background:#de2929;
		border: 1px solid #de2929;
		border-radius:5px;
		margin-top: 2%;
		cursor:pointer;
	}
	#col-learn-more:hover{
		transition: 1s ease-in-out;
		background:#e81111;
	}

	#col-learn-more p{
		line-height: 3.5;
		text-align:center;
		color:white;
		font-size:14px;
	}
	.col-circle-2{
		width: 213px; 
		height: 213px; 
		margin:1%;
		margin-right: -5%;
		max-width:100%;
		max-height:100%;
		border-radius:100px;
		-webkit-border-radius:131px;
		-moz-border-radius:100px;
		float:left;
		overflow:hidden;
		-webkit-animation-duration:300s;
		-o-animation-duration:300s;
		-ms-animation-duration:300s;
		-moz-animation-duration:300s;
	}
	.col-circle-2 img{
		max-width:100%;
		max-height:100%;
		border-radius:100px;
		-webkit-border-radius:100px;
		-moz-border-radius:100px;
	}

	/* ends the styling for inner wrap 2 */

	/* starts the styling for inner wrap 3 */
	#col-inner-wrap-3{
		width:100%;
		height:290px;
		margin:auto;
		background:#de2929;
		margin-top:-4%;
	}
	#col-inner-wrap-3 h2{
		line-height: 2;
	    padding: 5px;
		text-align:center;
		font-size: 260%;
	}
	.font2{
		font-size:13px;
		line-height:2;
		color:#b5b3b3;
		text-align:justify;
		 letter-spacing: 1px;
		 padding:1%;
	}
	/* ends the styling for inner wrap 3 */

	/* starts the styling for inner wrap 4 */
	.col-inner-wrap-4{
		width:100%;
		height:430px;
		margin:auto;
		background:#42423f;
		margin-top:-4%;
	}
	#col-4{
		width:  55%;
		height:292px;
		float:left;
		margin-left:5%;
	}
	#col-4 h4{
		line-height:1.8;
	}
	#col-3 h5{
		line-height: 3;
	}
	#col-learn-more{
		width: 30%;
		height:17%;
		background:#de2929;
		border: 1px solid #de2929;
		border-radius:5px;
		margin-top: 4%;
		cursor:pointer;
	}
	#col-learn-more:hover{
		transition: 1s ease-in-out;
		background:#e81111;
	}

	#col-learn-more p{
		line-height: 3.5;
		text-align:center;
		color:white;
		font-size:14px;
	}
	#col-circle-3{
		width: 213px; 
		height: 213px; 
		margin:1%;
		margin-left: 5%;
		max-width:100%;
		max-height:100%;
		border-radius:100px;
		-webkit-border-radius:131px;
		-moz-border-radius:100px;
		float:right;
		overflow:hidden;
	}
	#col-circle-3 img{
		max-width:100%;
		max-height:100%;
		border-radius:100px;
		-webkit-border-radius:100px;
		-moz-border-radius:100px;
	}

	/* -----------ends the styling for inner wrap 4 ---------*/


	/* style line */
	#line{
		width:100%;
		height:1px;
		background:#aeafae;
		margin-bottom: 2%;
	}
	/* footer styling starts here */
	#footer{
		width:100%;
		height:210px;
		margin:auto;
		margin-top:-4%;
	}
	#col-footer1{
		width:20%;
		height:90%;
		margin-left:3.5%;
		float:left;
	}
	#col-footer1 h4{
		font-size:16px;
	}
	.font5{
		font-size:13px;
		line-height:2.5;
		color:#de2929;
		cursor:pointer;
	}
	#col-social-media{
		width:50px;
		height:50px;
		float: left;
	}
	.blue{
		color:blue;
	}
	.twi-color{
		color:#8aafea;
	}
	.linked-color{
		color:#75bdea;
	}
	.you-color{
		color:#d12121;
	}
	#col-social-media i{
		font-size:40px;
		padding:2px;
	}
	.txt-center{
		text-align:center;
	}

	#body_container{
		width: 100%;
		height: 700px; 
		background: red; 
	}
	/* styling for the rate starts here */
	#col_rateimg{
		width: 100%; 
		height: auto; 
		margin: 1px auto;
	}
		#col_rateimg img{
		max-width:100%;
		max-height:100%;
	}
	#col_rate{
		width: 97%;
		height: 40%;
		border: 1px solid #dbd8d8; 
		background: white; 
		margin : 0 auto;
		padding: 8px; 
	}
	#col_rate a{
		font-size: 107%;
		font-weight: bold; 

	}#col_rate p{
		font-size: 117%;
		line-height: 20px;
		padding: 6px; 

	}#col_rate h1{
		font-size: 127%;
		font-weight: normal; 

	}
	table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 80%;
	}

	td, th {
	    border: 1px solid #dddddd;
	    text-align: left;
	    padding: 8px;
	}

	tr:nth-child(even) {
	    background-color: #dddddd;
	}


	/* media queries responsive styling */
	@media screen and (max-width: 768px){
		#head-wrap{
			background:white;
			height:37px;
		}
		.container {
	    display: inline;;
		}
	#col-nav{
		width:100%;
		height:auto;
		margin:0;
		margin-top:-7.9%;
		position:absolute;
		display:none;
		z-index:100;
	}
	ul{
		width:100%;
		z-index:100;
		
		
	}
	ul li{
		float:left;
		padding-top: 6.8%;
		border: 1px solid #42423f;
		text-align:center;
		width:100%;
	}
	.fade{
		z-index:-100;
	}
	#col-ppb{
		float:right;
		margin-right:0;
		margin-top:0;
		margin-bottom: -6%;
	}
	#logo{
		margin-left:6%;
		width:27%;
	}
	.col-reg{
		margin-left:20%;
	}
	#col-inner-wrap{
		height:1000px;
	}
	#col-inner-wrap-1{
		width:95%;
		height:250px;
		margin-bottom: 78px;
	}
	}

	@media screen and (max-width: 478px){
		.col-reg{
			margin-left: 0%;
			display:none;
		}
		
		.fade{
			margin-top: 2.5%;
		}
		
		#logo {
	    margin-left: 1%;
	    margin-top: 1%;
		margin-right: 20%;
	    width: 33%;
	}
	#col-pri{
		margin-left:90px;
	}
	#col-per{
		display:none;
	}
	#col-inner-wrap-1{
		
	}
	h3{
		font-size:20px;
	}
	h4{
		font-size:18px;
		
	}
	h5{
		font-size:14px;
		line-height:1;
		
	}
	#col-3 h4 {
		line-height:1;
	}
	#col-3{
		width:100%;
		text-align:center;
		margin-right:0%;
	}
	#col-learn-more{
		margin-left:auto;
		margin-right: auto;
		margin-top:1%;
		width:auto;
	}
	#col-inner-wrap-3 h2{
		line-height: 1;
	}
	#col-inner-wrap-3{
		height:424px;
	}
	.font-txt-center{
		padding-top:33%;
	}
	.font{
		padding-top:0%;
	}
	}

	/*---------------------------------- THIS IS WHERE REGISTERATION STYLING STARTS FROM -------------------------*/
	#logo-reg{
		width:57%;
		height:10%;
		margin-left: auto;
	    margin-right: auto;
		margin-top: 1%;
		cursor: pointer;
	}

	input[type=password] {
		width: 80%;
	    padding: 3px 2px;
	    margin: 9px 0 0 33px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    box-sizing: border-box;
		font-size:16px;
	}
	#col-MAC{
		width:35%;
		height: 500px;
		float:left;
		margin-left: 10%;
		margin-top: 5%;
	}
	#col-MAC p{
		font-size: 15px;
		text-align:left;
		line-height: 2.2;
		
		color:#464242;
		padding:2px;
	}
	.col-ATM{
		float:left;
		margin:13px 6px 0 0;
	}
	.col-ATM i{
		font-size: 40px;
	}
	#col-form{
		width:350px;
		height: 628px;
		background:#777676;
		float:right;
		margin-right: 183px;
		margin-top: 5%;
		margin-bottom:5%;
		 box-shadow: 5px 10px #d4d2d2;
		 border-radius: 3px;
	}
	input[type=text], select {
		width: 80%;
	    padding: 3px 2px;
	    margin: 9px 0 0 33px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    box-sizing: border-box;
		font-size:16px;
	}
	input[type=number] {
		width: 20%;
	    padding: 3px 2px;
	    margin: 9px 0 0 33px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    box-sizing: border-box;
		font-size:16px;
	}


	.col-form{
		margin-right:auto;
		margin-left: auto;
	}
	#month{
	    width:20%;
	}
	input[type=radio] {
		
	    padding: 3px 2px;
	    margin: 8px 0 0 33px;
	    display: inline-block;
	    border: 1px solid #ccc;
		font-size:16px;
	}
	input[type=submit] {
	    background-color: #de2929;
		width: 80%;
		font-size:16px;
		padding: 3px 2px;
		margin: 11px 0 0 33px;
	}
	/* the responsive */
	@media screen and (max-width: 478px){
		#col-MAC{
			width:94%;
			
		}
	#col-inner-wrap{
		height: 2000px
	}
		h3,h4{
			text-align:center;
		}
		.col-ATM{
			margin-left: 16px;
		}
		#col-form{
			margin-top:-52%;
			margin-right:60px;
			margin-bottom:5%;
		}
	}

	/*---------------------------------- THIS IS WHERE REGISTERATION STYLING STARTS FROM -------------------------*/



	/*---------------------------------- THIS IS WHERE SECURITY-SETUP STYLING STARTS FROM -------------------------*/

	#col-setup-header{
		width: 100%;
		height:80px;
		background:#acaab3;
	}
	#logo-setup-sec{
		width:57%;
		height:46%;
		float:left;
	    margin-left: 20%;
		margin-top: 20.5px;
		cursor: pointer;
	}
	#col-nav-setup-sec{
	    float: right;
	    width: 30%;
	    margin: -29px 176px -2px 5px;
	}
	#col-nav-setup-sec ul li{
		width: 75px;
	    font-size: 18px;
	}
	#col-wrap-setup-sec{
	    width: 35%;
	    height: 610px;
	    margin: -109px auto 30px auto;
	    background: #acaab3;

	}
	#sec-circle i{
		font-size:160px;
		text-align:center;
	    padding: 7px;
	}
	#sec-circle{
		width: 173px;
	    height: 173px;
	    background: white;
	    margin-right: auto;
	    margin-left: auto;
	    border-radius: 115px;
	    border: 8px solid white;
	    position: relative;
	}
	#inner-wrap-setup-sec{
		width:80%;
		height: auto;
		margin-right:auto;
		margin-left: auto;
		margin-top: 134px;
	}
	#inner-wrap-setup-sec h3{
		text-align:center;
		padding-bottom: 31px;
	}

	#inner-wrap-setup-sec input[type=text]{
	    width: 100%;
	    padding: 12px 20px;
	    margin: 8px 0;
	    box-sizing: border-box;
	}
	#inner-wrap-setup-sec input[type=password]{
	    width: 100%;
	    padding: 12px 20px;
	    margin: 8px 0;
	    box-sizing: border-box;
	}

	#inner-wrap-setup-sec input[type=submit]{
	    width: 40%;
	    padding: 12px 20px;
	    margin: 8px 0;
	    float:left;
	}

	.col-label{
		font-size:16px;
	}
	.container-setup{
		display:none;
		float:right;
		margin-right: 16px;
	}

	/* responsive design for the setup */
	@media screen and (max-width: 768px){
		.container-setup{
			display:block;
		}
		#col-nav-setup-sec ul li{
			width: 150px;
		}
		#col-nav-setup-sec{
			position:relative;
			margin: 23px 1px -35px 5px;
			position: relative;
			display:none;
		}
		#col-wrap-setup-sec{
			width:84%;
		}
	}

	@media screen and (max-width: 478px){
		#col-setup-header{
			    height: 45px;
		}
		#logo-setup-sec{
			margin-left:5%;
			margin-top: 13.5px;
			
		}
		#col-nav-setup-sec{
			position:relative;
			margin: 44px -47px -1px 3px;
			position: relative;
			display:none;
		}
		#col-nav-setup-sec ul li{
			width: 126px;
		}
		.container-setup{
			display:block;
			margin-top: 3%;
		}
		#col-wrap-setup-sec{
			width:84%;
		}
			
		
	}



	/* ------------------------------logo-login------------ styling------------*/
	#col-form-login{
		width:300px;
		height: 300px;
		background:white;
		float:right;
		margin-right: 183px;
		margin-top: 5%;
		margin-bottom:5%;
		 box-shadow: 5px 10px 5px 10px  #d4d2d2;
		 border-radius: 3px;
	}

	#col-form-login input[type=submit]{
	    width: 80%;
	    padding: 7px 0px;
	    margin: 18px 28px 0 ;
	    float:right;
	}
	#col-form-login input[type=password]{
	    width: 80%;
	    padding: 7px 0px;
	    margin: 18px 28px 0 ;
	    float:right;
	}

	@media screen and (max-width: 768px){
		#col-form-login{
		  margin-top: -46%;
		   }
		#col-MAC {
	    width: 82%;
		}
	}

	@media screen and (max-width: 478px){
		#col-form-login{
		  margin-right: 9%;
		  margin-top: -71%;
		   }
		#col-inner-wrap-3{
    		width:100%;
    		height:478px;
    		margin:auto;
    	}
		.col-circle-2{
		    width: 170px;
		}
	}