/*---------------------------------------
[Master Stylesheet]

Project: Sakhi Charity & Donations
Version: 1.0
Last change: 04/09/19 [fixed bug]
Assigned to: Srgit
Primary use: Sakhi Charity & Donations Template  
---------------------------------------

[Table of contents]

1. Body / body
2. Navbar / .navbar
3. Header / .header
4. About Us / #about-us 
5. bg-img1 / .bg-img1
6. Popular Causes / #popular-causes
7. counter / #counter-bg
8. Our Dedicated Volunteers / #volunteers
9. Subscribe/ #subscribe-section
10. footer/ .main-footer
11. about us page/ .about-section
12. Our History/ .timelines
13. Our Awards/ .our-awards
14. Mission Goals/ .services-section
15. our team / .our-team
16. events / .event-page
17. section-portfolio / .section-portfolio
18. causes-page / #causes-page
19. blog / .blog-bg
20. Get In Touch / .contact
21. style-css-map / .style.css.map

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

# [Color codes]
Body-Font:  	#212529 {dark}
Background:		#ffffff (white)
Content:		#222 (light black)
a (standard):	#000 (black)
a (visited):	#049e33 (dark green)
a (active):	 	#049e33 (dark green)
---------------------------------------

[Font Properties]
Body font:       font-family: 'Lato', sans-serif;
Headings:         font-family: 'DM Serif Display', serif
Input, textarea: 'sans-serif';
---------------------------------------*/

#mainNav .navbar-brand {
	margin:0 auto
}
#mainNav .nav-link {
	font-size:15px
}
.top-bar {
	background:#ff6700;
	padding:10px 0;
	font-size:13px
}
.social-links-head-4 a {
	color:#ffffff;
	display:inline-block;
	padding:0 10px;
	font-size:15px;
	opacity:0.7;
}
.social-links-head-4 a:hover {
	opacity:1;
}
.bg-dark.op-1 {
	background:rgba(0, 0, 0, 0.1)!important
}
.bg-dark.op-2 {
	background:rgba(0, 0, 0, 0.2)!important
}
.bg-dark.op-3 {
	background:rgba(0, 0, 0, 0.3)!important
}
.bg-dark.op-4 {
	background:rgba(0, 0, 0, 0.4)!important
}
.bg-dark.op-5 {
	background:rgba(0, 0, 0, 0.5)!important
}
#mainNav .navbar-toggler {
	float:none;
	margin:10px 0 10px 0;
	border-radius:0;
	padding:10px 35px
}
.only-on-mobile {
	display:none
}
@media (min-width: 992px) {
#mainNav .nav-link {
-webkit-transition: none;
transition: none;
padding:1.9rem 0.9rem 1.9rem 0.9rem!important;
color: #fff;
}
#mainNav .language-select {
padding-right:0
}
}
 @media (max-width:1600px) {
#mainNav .navbar-brand img {
max-width:100%;
}
#mainNav .navbar-brand {
width:160px;
}
#mainNav .nav-link {
-webkit-transition: none;
transition: none;
padding: 1.3rem 1rem 1.3rem 1rem!important;
color: #fff;
}
}
 @media (max-width:1400px) {
.top-bar {display:none}
#mainNav .nav-link { padding:1.3rem .7rem 1.3rem .7rem!important}
}
 @media (max-width: 992px) {
#mainNav .nav-link {
padding:0.5rem 1rem
}
.top-link li i {
font-size: 10px;
margin: 0 5px 0 5px;
}
.navbar-brand {
display:none
}
.only-on-mobile {
display:inline-block;
float:left
}
.dis-inlin {
display:inline-block;
width:100%
}
.only-on-mobile .navbar-brand {
display:inline-block;
}
.only-on-mobile .navbar-brand img {
max-width:100%;
}
#mainNav .navbar-toggler {
float:right;
margin:30px 0 10px 0
}
.boder-b {
display: block;
}
.bg-dark.op-3 {
text-align:center;
}
.boder-b [class*=col-] {
-ms-flex: 0 0 100%;
text-align:center;
flex: 0 0 100%;
max-width: 100%;
}
.top-link {
display: block;
}
.top-link li {
width:100%
}
.top-link li.hidden-m {
display:none
}
}
 @media (max-width: 767px) {
.top-bar {
display:none
}
#mainNav {
padding:0;
}
#mainNav .navbar-toggler {
padding:14px 10px 10px 10px;
margin:10px 0;
}
#mainNav .navbar-brand {
padding: 10px 0 0 0;
}
#mainNav .nav-link {
padding:0.5rem 1rem 0.5rem 1rem!important
}
}
 @media (max-width: 414px) {
.social-links-head-4 {
display:none
}
.top-bar .mr-auto {
width:100%;
margin-left:auto;
text-align:center
}
#mainNav .navbar-brand img {
width: 100%;
}
#mainNav .navbar-brand {
width:auto
}
}
 @media (max-width: 737px) and (min-width: 567px) {
#mainNav .navbar-brand img {
width: 80%;
}
}
@media (max-width: 414px) {
.only-on-mobile {
display: inline-block;
float: left;
width: 50%;
text-align: left!important;
}
#mainNav .navbar-toggler {
float: right;
margin: 20px 0 10px 0;
padding: 10px 15px
}
.only-on-mobile img {
width:100%
}
}