/*---------------------------CSS FOR WESTERNA BUSINESS BANKING------------------------------*/

/*-----------landing div and its contents------*/
.landingdiv{
	border:0px solid green;
	height:100vh;
	position: relative;
}

.landingdiv img{
	width:100%;
	height:100%;
}

.landingdiv div{
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
}

.landingdiv div h1{
	font-size: 50px;
	font-weight: bold;
	margin:80px 0px 0px 20px;
	color:#f3f4f5;
	line-height:1.2;
}

.landingdiv div h5{
	font-size: 20px;
	font-weight: bold;
	margin:20px 20px;
	color:#f3f4f5;
}

@media screen and (max-width:550px) {
	.landingdiv{
		height:300px;
	}
	.landingdiv div h1{
		margin:40px 0px 0px 20px;
		font-size: 20px;
	}
	
	.landingdiv div h5{
		font-size:15px;
	}
	
}

/*------------Homepage Navigation---------------*/
.navbar{
	background-color: #fff !important;
}
.nav-link,.nav-link:focus,.nav-link:hover{
	color:#da9016;
}

.dropdown-menu{
	background-color: #da9016;
	padding:0px;
}

.dropdown-menu li:hover{
	background-color: #da9016;
	color:#da9016 !important
}

.dropdown-menu li>a,.dropdown-menu li>a:hover,.dropdown-menu li>a:active{
	color:#fff;
	background-color:#da9016;
}


/*-----------Homepage Css----------*/


div.afternavigation{
	width:100%;
	height:auto;
	padding:0px;
	position: relative;
}

div.afternavigation >img{
	width:100%;
	height:100%;
}

div.transparent{
	background-color:rgba(0,0,0,0.5);
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	padding: 20px;
	box-sizing: border-box;
}

div.transparent h1{
	text-align: center;
	color:#fff;
	font-size:50px;
	font-weight: bold;
	margin-top:100px;
}

div.transparent h5{
	text-align: center;
	color:#fff;
	font-size:30px;
	font-weight: bold;
	margin-top:20px;
}

/*--------Media screen handling afternavigation--*/
@media screen and (max-width:650px){
	div.afternavigation{
		width:100%;
		height:auto;
		padding:0px;
		position: relative;
	}
	div.transparent h1{
		margin-top:40px;
		font-size:30px;
	}

	div.transparent h5{
		margin-top:10px;
		font-size:18px;
	}
}


/*---------------------------------------Banking statistics-----------------------------------*/
div.statistics-container{
   background-color:none;
}

div.statistics-container>h1,div.banking-statistics section h4{
	font-weight: bold;
	font-size:30px;
	color:#ee990d;

}

div.banking-statistics section h4{
	font-weight: bold;
	font-size:25px;
	color:#ee990d;

}

div.banking-statistics{
	padding: 10px;
	box-sizing: border-box;
}

div.banking-statistics section{
  text-align:left;
  border-radius:6px;
  background-color: #fff;
  margin:5px;
  padding:10px;
  box-sizing: border-box;
  box-shadow: 1px 2px 10px gray;
}

div.banking-statistics section aside{
	background-color:#b5c4ea;
	height:60px;
	width:60px;
	border-radius:50%;
	text-align: center;
	padding:0px;
}

div.banking-statistics aside h6{
	color:#ee990d;
	font-weight: bold;
	font-size:20px;
}

div.banking-statistics aside h2{
	color:#ee990d;
	font-weight: bold;
	font-size:32px;
}

div.banking-statistics aside p{
	color:#6c6c6d;
	padding:5px;
	
}

div.banking-statistics section aside i,div.banking-statistics section aside svg{
	font-size:40px;
	font-weight: bold;
	color:#ee990d
}

div#banking-statisticsHomage section>img{
	width:60px;
	height:50px;
	border:0px solid green;
	border-radius: 50%;
}

div.banking-statistics section>img{
	width:75px;
	height:80px;
	border:0px solid green;
	border-radius: 50%;
}

div.banking-statistics section h5{
	margin-top:20px;
	color:#ee990d;
	font-weight: bold;
	padding:10px;
	box-sizing: border-box;
}

div.banking-statistics section p{
	box-sizing: border-box;
	padding:5px;
	margin-top:-10px;
}

.btn-stat{
	background-color: #a36704;
	color:#fff;
	border:1px solid #fff
}

.btn-stat:hover{
	background-color: #a36704;
	color:#fff
}

/*---hero images homepages---*/
.hero-container{
	position:relative;
	height:550px;
}

.hero-container aside{
	position: absolute;
	top:0px;
	right:0px;
	left:0px;
	bottom:0px;
	background-color:rgba(0,0,0,0.8)
}

.hero-container aside h1{
	text-align: center;
	color:#f3f4f5;
	font-weight: bold;
	margin:26vh 0px 0px 0px;
}

.hero-container aside p{
	width:80%;
	text-align: center;
	color:#afb2af;
	font-weight: bold;
	margin:20px auto;
	font-size:20px;
}

@media screen and (max-width:600px) {
	.hero-container aside h1{
		text-align: center;
		color:#f3f4f5;
		font-weight: bold;
		margin:10vh 0px 0px 0px;
	}
	
	.hero-container aside p{
		width:80%;
		text-align: center;
		color:#afb2af;
		font-weight: bold;
		margin:10px auto;
		font-size: 14px;
	}
	
}

@media screen and (max-width:550px) {
	.hero-container{
		position:relative;
		height:70vh
	}
	
}


/*---------------------somethings you might like--------------------*/
div.somethings{
	padding:20px;
	box-sizing: border-box;
	border:0px solid green;
	background-color: #f0f1f1;
}

div.somethings>h1{
	font-weight: bold;
	font-size:30px;
	color:#ee990d;
	margin:20px 0px;
}

div.something-row section{
	height:300px;
   border-radius:9px;
   border:0px solid green;
   margin:5px;
   padding: 0px;
}

div.something-row section aside{
	width:80%;
	height:100%;
	background-color:#fff;
	position: absolute;
	border-radius:9px;
	clip-path: polygon(0 0, 66% 0, 90% 100%, 0% 100%);
	padding:10px;
	box-sizing: border-box;
	word-wrap:break-word;
}

div.something-row section aside h5{
	margin-top:50%;
	font-size:30px;
	color:#2877e1;
}

div.something-row section aside h5+p{
	font-size:20px;
	color:#2877e1;
	margin:-5px 0px
}

div.something-row section img{
	width:100%;
	height:100%;
	border-radius:9px;
}


/*-------------------------------------footer content-------------------------------------------*/
div.footer{
	background-color: #000;
	color:#fff;
	padding:20px;
	box-sizing: border-box;
}