/*
Template Name: MNIT - Simple One Page 
Author: Mohamed Nabhan
*/
/* -----------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------
1) General
2) Page Loader
3) Helper
4) Navbar
5) Header
6) About 
7) home 
	a. home One 
 	b. home Two
8) Our Process
9) Our Price
10) Testimonials 
11) Design
12) Contact-Us
13) Footer

-------------------------------------------------------------

------------------------------------------------------------*/


/*--------------------------------  1) General  --------------------------------*/

/* font-size */

h4,
.h4,
h5,
.h5 {
	font-size: 22px;
	font-weight: 700;

}


* {
	outline: none;
	outline: 0;
}

body {
	outline: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
p,
lead {
	font-family: 'Open Sans', sans- rif;
}

a {
	outline: none !important;
	outline: 0;
}

/*--------------------------------  2) Helper  --------------------------------*/
label {
	color: #1984ab
}

input {
	display: inline-block;
}

.section-padding {
	padding-top: 8rem;
	padding-bottom: 2rem;
}

.border {
	border: 1px solid #fff;
	padding: 3px 12px;
}

.border-main {
	border: 1px solid #0c7da7
}

.border-secondry-1 {
	border: 1px solid #1f8fb9;
}

.border-bottom-secondry-1 {
	border-bottom: 1px solid #1f8fb9;
}

.border-white {
	border: 1px solid #fff;
}

.no-border {
	border: none !important;
}

.no-shadow {
	box-shadow: none !important;
}

.bg-main {
	background-color: #0c7da7;
}

.bg-secondry {
	background-color: #1984ab;
}

.bg-secondry-1 {
	background-color: #1f8fb9 !important;
}

.bg-secondry-2 {
	background-color: #cde6ef;
}

.bg-yellow {
	background-color: #fecc58;
}

.bg-transperant {
	background-color: transparent;
}

.bg-white {
	background-color: #fff !important;
}

.color-main {
	color: #0c7da7
}

.color-secondry {
	color: #1984ab;
}

.color-secondry-1 {
	color: #1f8fb9;
}

.color-yellow {
	color: #fecc58;
}

.color-white {
	color: #fff !important;
}

.color-black {
	color: #fff;
}

.btn-yellow {
	border: none;
	padding: 8px;
	margin: 19px auto;
	border-radius: 4px;
	color: #0c7da7;
	font-size: 20px;
	font-weight: bold;
	background-color: #fecc58;
	transition: all 0.5s ease-in-out;
}

.btn-yellow:hover {
	/*	padding: 8px 11px;*/
	color: #fecc58;
	background-color: #0c7da7;
}

.login .btn-yellow {
	border: 1px solid #0c7da7;
}

.login .btn-yellow:hover {
	color: #fff;
	border: 1px solid #fecc58;
}

.btn-main {
	border: none;
	padding: 8px;
	margin: 10px auto;
	border-radius: 0;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background-color: #0c7da7;
	text-align: left;
	transition: all 0.5s ease-in-out
}

.btn-main:hover {
	/*padding: 8px 11px;*/
	color: #0c7da7;
	background-color: #fecc58;
}

.w-25 {
	width: 25%;
}

.w-30 {
	width: 40%;
}

.w-50 {
	width: 50%;
}

.w-81 {
	width: 81% !important;
}

.w-75 {
	width: 75%;
}

.bold {
	font-weight: bold;
}

.scroll-y {
	overflow-y: auto;
}

.scroll-x {
	overflow-x: auto;
}

.vertical-top {
	vertical-align: top;
}

/*------ Table -----*/
table {
	margin-top: 10px;
	margin-bottom: 10px;
}

table tbody {
	border: 1px solid #0c7da7;
}

table,
table td,
table tr {
	padding: 10px;
	border-right: 1px solid #0c7da7;
	border-left: 1px solid #0c7da7;
	border-top: 1px solid #0c7da7;

}

table,
table tbody td {
	border: 1px solid #0c7da7;
	color: #0c7da7;

}

table tfoot {
	border: 1px solid #0c7da7;
}

table tr {
	background-color: #fff;
}

table .color-black td {
	color: #000;
}

table .border-white td {
	border: 1px solid #fff;
}

table .border-white td:first-child {
	border-left: 1px solid #0c7da7;
}

table .border-white td:last-child {
	border-right: 1px solid #0c7da7;
}

table .des {
	min-width: 200px;
}

table .form-control {
	margin: 0 !important;
	width: 100%;
}

/*--- Form -----*/
/*
form >div {
	margin-top: 19px;
}
*/

.form-control {
	display: inline-block;
	border: 0;
	-webkit-border: 1px solid #1984ab;
	-o-border: 1px solid #1984ab;
	-moz-border: 1px solid #1984ab;
	border: 1px solid #1984ab;
	border-radius: 0;
	color: #0c7da7;
	font-weight: bold;
	background-color: #f8f9f9;
	min-height: 42px;
	font-size: 20px;
}

.form-control-plaintext {
	display: block;
	width: 100%;
	padding-top: .375rem;
	padding-bottom: .375rem;
	margin-bottom: 0;
	line-height: 1.5;
	background-color: transparent;
	border: solid transparent;
	border-width: 1px 0;
	color: #0c7da7;
}

form .form-label {
	width: 34%;
	text-align: left;
	/*padding-top: 15px;*/
}

form .form-control,
form .form-control-plaintext {
	width: 63%;
	margin: 8px auto;
	padding: 5px 12px;
	display: inline-block;
}





.vertical form .form-label {
	width: 17%;
}

.vertical form .form-control {
	width: 81%;
}

.form-control::-webkit-input-placeholder {
	color: #0c7da7;
	font-weight: 400;
}

button[type="submit"] {
	border-radius: 0;
	border: none;
	padding: 8px 30px;
	margin: 19px auto;
	border-radius: 4px;
	font-weight: bold;
}

textarea {
	border: 1px solid #1984ab !important;
	background-color: #fff !important;
	resize: none;
	width: 100% !important;
	margin: 8px auto;

}

button.text-danger:hover,
button.text-danger:focus {
	color: #843534;
}

button:hover,
button:focus {
	color: #23527c;
	text-decoration: underline;
}

/*--- Scroll Bar ----*/


/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #fecc58;
	;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #0c7da7;

}

/*--- Check Box ---*/


label.checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

label.checkbox input[type="checkbox"]+span {
	font: 16pt sans-serif;
}

label.checkbox input[type="checkbox"]+span:before {
	font: 16pt FontAwesome;
	content: '\00f096';
	display: inline-block;
	width: 16pt;
	padding: 2px 0 0 3px;
	margin-right: 0.5em;
}

label.checkbox input[type="checkbox"]:checked+span:before {
	content: '\00f046';
}

label.checkbox input[type="checkbox"]:focus+span:before {
	outline: 1px dotted #aaa;
	outline: none;
}

label.checkbox input[type="checkbox"]:disabled+span {
	color: #999;
}

label.checkbox input[type="checkbox"]:not(:disabled)+span:hover:before {
	text-shadow: 0 1px 2px #77F;
}

table label.checkbox input[type="checkbox"]+span {
	font: 14pt sans-serif;
}

table label.checkbox input[type="checkbox"]+span:before {
	font: 14pt FontAwesome;
	content: '\00f096';
	display: inline-block;
	width: 14pt;
	padding: 2px 0 0 3px;
	margin-right: 0.5em;
}


.bg-main-img {
	background: url(../images/main-bg.png) no-repeat center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	min-height: 100vh;
	position: relative;
	/*padding-bottom: 50px;*/
}

/*--------------------------------  4) Navbar --------------------------------*/
.navbar {
	min-height: 70px;
	border-bottom: none;
	background-color: #0c7da7;
}

.scrolled {
	background-color: rgba(0, 0, 0, 0.5);
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
	color: #fecc58;
	background-color: transparent;
}

.navbar-inverse .navbar-nav>li>a {
	color: #fff;
	padding-top: 25px;
	padding-bottom: 25px;
	font-size: 19px;
}

.navbar-inverse .navbar-brand {
	color: #BBB;
	font-size: 35px;
	line-height: 40px
}

.navbar-right .dropdown-menu {
	left: 0;
	right: auto
}

.navbar-inverse .navbar-brand span {
	color: #0097A7;
}

.navbar-toggle {
	margin-top: 18px;
}

.navbar-header img {
	padding: 15px;
	max-width: 150px;
}

.navbar-inverse .navbar-toggle {
	border-color: #fff;
}

/*--------------------------------  5) login --------------------------------*/
.login,
.home {
	/* background: url(../images/login-bg.png) no-repeat center fixed; */
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	min-height: 100vh;
	position: relative;
	/*	padding-bottom: 50px;*/
}

.login .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 559px;
	background-color: rgba(0, 0, 0, 0);
	color: #FFF;
	padding-bottom: 50px;
}

.login .center-vh {
	margin-top: 25vh;
}

.login h1 {
	font-weight: bold;
	font-size: 65px;
}

.login h1 span {
	font-weight: normal;
	color: #0097A7;
}

.login h1~.lead {
	font-size: 30px;
}

.login form {
	max-width: 440px;
	border-radius: 19px;
	background-color: rgba(25, 132, 171, 0.65);
	padding: 30px;
}

.login form h2 {
	color: #fecc58;
	font-size: 26px;
	font-weight: 400;
	margin-top: 0;
	padding: 15px;
}

.login form input.form-control {
	border-radius: 4px;
}

.login button[type="submit"] {
	color: #0c7da7;
}


.login form .form-label {
	width: 24%;
}

.login form .form-control {
	width: 73%;
}

.cartoon-man {
	position: absolute;
	right: -50px;
	top: -50px;
}

.login-form {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.login-form form {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/*--------- home -------------*/

.home {
	/* background: url(../images/home-bg.png) no-repeat center fixed; */
	color: #fff;
}

.home h2 {
	padding-top: 70px;
	font-weight: bold;
}

.home-info {
	padding-top: 20vh;
}


/*----------- banking Page ----------*/

.border-section {
	padding: 12px;
	border: 1.2px solid #0c7da7;
	background-color: #fff;
}

.banking-border-yellow {
	padding: 15px;
	border: 2px solid #fecc58;
	background-color: #fff;
}

.side .form-control {
	width: 100%;
	margin: 0 auto;

}



[class^="icon-"],
[class*=" icon-"] {
	padding-right: 10px;
}

/*
Override
*/

/*
Bootstrap
*/
@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 850px) {
	.container {
		width: 800px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

@media (min-width: 1350px) {
	.container {
		width: 1310px;
	}
}

@media (min-width: 1550px) {
	.container {
		width: 1500px;
	}
}

@media (min-width: 1770px) {
	.container {
		width: 1700px;
	}
}

@media (min-width: 1880px) {
	.container {
		width: 1800px;
	}
}

@media (min-width: 2100px) {
	.container {
		width: 2000px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-weight: bold !important;
}



/* dxDataGrid */
.dx-datagrid-table {
	font-size: 20px !important;
	font-weight: 700 !important;

}