@charset "utf-8";
/* CSS Document */

.cl-effect-2 a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    margin: 30px 0px 0;
    outline: medium none;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
	font-style: normal;
    font-weight: normal;
    line-height: 20px;
    margin-right: 6px;
    text-transform: uppercase;
	font-family: 'open_sanssemibold';
}
.cl-effect-2 a:hover, .cl-effect-2 a:focus {
    outline: medium none;
}


/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	line-height:35px;
}

.cl-effect-2 a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
	background: #2c318d;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	border-radius: 15px;
}

.csstransforms3d .cl-effect-2 a span::before {
	position: absolute;
	top: 100%;
	left: 1px;
	width: 100%;
	height: 100%;
	background: #2c318d;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	padding-left:14px;
	border-radius: 15px;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
	background: #2c9131;
	color:#fff;	
}
.csstransforms3d .cl-effect-2 .submenuown  a:hover span:before,
.csstransforms3d .cl-effect-2 .submenuown  a:focus span:before{background: none repeat scroll 0 0 #2c318d;}

ul.main-menu li ul li a{padding-top:4px !important; padding-bottom:4px !important}

/******custom*******/
.mobilebanking .showportion,
.mobilebanking  #header{z-index:6; position:relative}
ul.main-menu{list-style:none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
ul.main-menu li{display:inline-block; *display:inline}
ul.main-menu li{position:relative;}
ul.main-menu li ul.submenu{
	list-style:none; position:absolute; left:0; top:65px; padding:0 0 10px; 
	margin:0; background:#2c318d; width:230px;
	display:none;
	border-top:5px solid green;
	border-radius: 0 6px 6px;
}
ul.main-menu li ul li{padding:0 6px}
ul.main-menu li ul li a{color:#fff; font-size: 0.9em; font-weight:normal; font-family: 'open_sansregular';}
ul.main-menu li ul li a{
	margin:0; line-height:20px; text-transform:capitalize;
	font-size: 0.9em;
    font-weight: 400;
    padding: 8px 4px 8px 8px;
    position: relative;
    text-transform: none;
	text-decoration:none; 
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	display:block;
}
ul.main-menu li ul li:last-child a{border-bottom:none}
ul.main-menu li ul li{display:block;}
ul.main-menu li:hover ul{display:block}
ul.main-menu li ul li a:hover{background:#3e4393 }
/******Other pages******/

.tvadddiv, .tvadddiv .tvad{width:100% !important; height:180px;}
.tvadddiv{padding-bottom:40px; float:none; height:200px;}

#mep_0{padding:10px 5% !important; background:#000; width:100% !important;}
.brochurewrapper{position:absolute; right:0; top:0; padding-right:30px; overflow:hidden}
.brochurewrapper span{font-weight:bold;; float:left}
.brochurewrapper a{margin-left:10px; float:left; text-decoration:none}
.brochurewrapper a:hover{color:green}

.sticky-menu-active ul.main-menu{margin-top:22px}
.sticky-menu-active #header .logo img{top:32px !important; width:190px !important; height:58px !important; }
.innerwrapper{padding-top:25px 15px 0}

.mobilebanking .home-intro.light p,
.mobilebanking .home-intro.light p span {color:#000}

h2.newFture{
	position:absolute;
	z-index:5000;
	line-height:32px !important;
	font-size:14px !important;
	right:180px;
	font-weight:100 !important;
	font-family: 'open_sanssemibold';
	display:none;
	
	
}
h2.newFture strong.inverted{
	min-height:22px !important;	
	font-weight:100 !important;
	font-family: 'open_sanssemibold';
	background:none;
	padding-left:0;
	padding-right:0;
}
h2.newFture a, h2.newFture strong.inverted  span{color:#fff; font-weight:100 !important; font-family: 'open_sanssemibold';}


.word-rotate .word-rotate-items span.setservice1,
.word-rotate .word-rotate-items span.setservice2,
.word-rotate .word-rotate-items span.setservice3{background:#2c9131; display:block;
	-webkit-border-radius: 15px !important;
	-moz-border-radius: 15px !important;
	border-radius: 15px !important;
	padding-left:10px;
	padding-right:10px;
}
.word-rotate .word-rotate-items span.setservice2{background:#eb2128;}
.word-rotate .word-rotate-items span.setservice3{background:#2c318d;}
.featuredimages{display:block; margin:15px auto;}
.featuredservice h3,
.featuredservice h5{text-transform:capitalize; font-weight:700}

.featuredservice h3.panel-title{font-size:14px}
.featuredservice h5{margin-top:10px}

.featuredTable{width:99.95%; border:1px solid #ccc; margin:15px 0; border-bottom:0; border-right:0}
.featuredTable tr th,
.featuredTable tr td{padding:4px; }
.featuredTable tr.headtitle th{text-align:center}
.featuredTable tr td,
.featuredTable tr th{border-bottom:1px solid #ccc; border-right:1px solid #ccc; }
.featuredTable tr .featuredTable{border:0; width:100%; margin:0}
.btnHov{font-size:17px !important}

/*-------Logo Txt------*/

@media (max-width: 1199px){
	.imagealign, .featuredimages{width:100%}
	.enditem{width:50%}
}

@media (max-width: 991px){
#header h1.logo img {
    height: 58px !important;
    max-width: 173px !important;
}
.mobslider, .mobslider img{width:100% !important; height:auto !important}
.cl-effect-2 a{margin:2px 0}
.cl-effect-2 a, .cl-effect-2 a span{display:block; text-align:center; padding:0}

ul.main-menu li ul.submenu {
    background: none repeat scroll 0 0 #2c318d;
    position: static;
    top: 0;
    width: 100%;
	left:-14px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border:0	
}
#header .nav-main ul ul{margin-left:0 !important}
#header .nav-main ul ul li:first-child a:hover{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;	
}

#header .nav-main ul ul li:last-child a:hover{
	-webkit-border-radius:0 0 15px 15px;
	-moz-border-radius: 0 0 15px 15px;
	border-radius:0 0 15px 15px;
}
#header .nav-main ul li{border-bottom:none}
.csstransforms3d .cl-effect-2 a span:before{padding:0 !important; background:#171717}
.imagealign{width:100%}
.enditem{width:50%}
}

@media (max-width: 767px){
	.centeralign{width:100%}
}

@media (max-width: 600px){
	.appsDldBtn{margin-bottom:10px !important}
}

@media (max-width: 480px){
	.innerwrapper .nav-tabs li a{font-size:10px !important; padding-left:8px; padding-right:8px}
	.newFture{display:none}
	.featuredTable{font-size:10px}
}

@media (max-width: 360px){
	.featuredTable{font-size:7px}
	.featuredTable tr th, .featuredTable tr td{padding:1px}
}