/* Table of contents
---------------------------------------------------------------------- /
*
*  1 - Import Google Font
*  2 - Global Styles
*    2.1 - Section Angle
*    2.2 - Section Title and Description
*    2.3 - Social Buttons
*    2.4 - Buttons
*    2.5 - Parallax 
*    2.6 - Owl Slider
*    2.7 - Hexagon
*    2.8 - Content Title and Icon 
*  3 - Main Menu
*  4 - Top Section
*  5 - About Us Section
*  6 - Team Section
*  7 - Volunteer Section
*  8 - Next Event Section
*  9 - Service Section
*  10 - Pricing Section
*     10.1 - Hover Effects
*  11 - Testimonial Section
*  12 - Gallery Section
*  13 - Causes Section 
*  14 - Twitter Section
*  15 - News Section
*  16 - Upcoming Events Section
*  17 - Clients Section
*  18 - Contact Section
*      18.1 - Email Validator
*  19 - Google Map 
*  20 - Blog Page
*      20.1 - Slider
*      20.2 - Post Blockquote
*      20.3 - Attachment Link
*      20.4 - Comment Section
*      20.5 - Blog Sidebar
*  21 - Blog Single Page
*      21.1 - Pagination
*  22 - Footer Section
*  23 - Scroll to Top
*  24 - Element Appear Effect
*
---------------------------------------------------------------------- */



/* 1 - Import Google Font
------------------------------------------------------------------------*/
/*@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800,900);
*/
/* Google Font End 
------------------------------------------------------------------------*/



/* 2 - Global Styles
---------------------------------------------------------------------- */
html,
body {
	font-family: 'Raleway', sans-serif;
	color: black;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	background-color: #fafafa;
}


a {
	color: #0d0d0d;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}

a:hover {
	color: #f39c12;
	text-decoration: none;
}

a:focus { 
	outline:none;
	outline-offset:0;
}

p {
	line-height: 30px;
	font-size:1em;
	margin-bottom: 20px;
	
}

img {
	max-width: 100%;
	/*height: auto;*/
}





/* 2.4 - Buttons
---------------------------------------------*/
.btn {
	border-radius: 0px;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 700;
	outline: none;
	position: relative;
}
.btn:focus, 
.btn:active:focus, 
.btn.active:focus {
	outline:none;
}
.custom-btn:after,
.angle-effect.custom-btn:after, 
.btn {
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.custom-btn:hover {
	color: #ffffff;
}
.custom-btn {
	font-weight: 700;
	height: 40px;
	line-height: 38px;
	overflow: hidden;
	z-index: 0;
}
.custom-btn {
	border: 2px solid #ffffff;
	color: #ffffff;
	font-size:1em;
	margin: 5px 10px;
	padding: 0 20px;
	text-transform: uppercase;
}
.custom-btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background: #f39c12;
	opacity: 1;
}
.custom-btn:hover:after {
	height: 100%;
	left: 0%;
	opacity: 1;
}
.angle-effect.custom-btn:after {
	width: 0;
	left:50%;
	-webkit-transform: skew(50deg) scale(1.1,1);
	-mox-transform: skew(50deg) scale(1.1,1);
	-ms-transform: skew(50deg) scale(1.1,1);
	-o-transform: skew(50deg) scale(1.1,1);
	transform: skew(50deg) scale(1.1,1);
}
.angle-effect.custom-btn:hover:after {
	width: 100%;
	left:0%;
}
.custom-btn:hover {
	border-color: #f39c12;
}
.white-bg .custom-btn,
.gray-bg .custom-btn {
	color: #0d0d0d;
	border-color: #f39c12;
}
.white-bg .custom-btn:hover,
.gray-bg .custom-btn:hover {
	color: #ffffff;
}
.donate-btn {
	background-color: gray;
	color: #ffffff;
	font-weight: 600;
	line-height: 50px;
	text-transform: uppercase;
	height: 50px;
	padding: 0 25px;
}
.donate-btn:hover {
	color: #ffffff;
	background-color: #e5091c;
}
.carousel-indicators li,
.carousel-indicators li.active {
	margin: 3px;
	height: 12px;
	width: 12px;
} 
.carousel-indicators li {
	background-color: rgba(255,255,255,.3);
	border:1px solid rgba(255,255,255,.3);
}
.carousel-indicators li.active {
	background-color: #f39c12;
	border:1px solid #f39c12;
}

/* 2.4 - Buttons End
---------------------------------------------*/


/* 2.5 - Parallax  End
---------------------------------------------*/


/* 2.6 - Owl Slider
---------------------------------------------*/
.owl-controls {
	text-align: center;
	margin-top: 35px;
}
.owl-page {
	background-color: rgba(0,0,0,.3);
	border:2px solid  rgba(0,0,0,.0);
	border-radius: 100%;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 2px;
}
.owl-page.active {
	background-color: #f39c12;
	border:2px solid  #f39c12;
}
/* 2.6 - Owl Slider End
---------------------------------------------*/

/* 2.7 - Hexagon
---------------------------------------------*/
.hex {
	position: relative;
	width: 100px; 
	height: 61px;
	border-radius: 7px;
	margin: 30px auto 50px auto;
}
.hex:before, 
.hex:after {
	position: absolute;
	width: inherit; height: inherit;
	border-radius: inherit;
	background: inherit;
	content: '';
	margin-left: -59px;
}
.hex ,
.hex:before, 
.hex:after {
	border-left: 2px solid #ffe32d;
	border-right: 2px solid #ffe32d;
}
.hex:before {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}
.hex:after {
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.hex.hex-margin {
	margin-bottom: 60px;
}
/* 2.7 - Hexagon End
---------------------------------------------*/


/* 2.8 - Content Title and Icon 
---------------------------------------------*/
.content-title {
	color: #0d0d0d;
	font-size: 1.375em;
	font-weight: 800;
	line-height: 1em;
	text-transform: uppercase;
	margin-top: 0;
	min-height: 40px;
}
.content-icon-hex {
	width: 118px; 
	height: 72px;
	border-radius: 7px;
	background: #ffe32d;;
	margin: 30px 30px 40px 0;
}
.content-icon {
	color: #ffffff;
	font-size: 2.25em;
	line-height: 72px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
/* 2.8 - Content Title and Icon End
---------------------------------------------*/


/* 2 - Global Styles End
---------------------------------------------------------------------- */




/* 3 - Main Menu
------------------------------------------------------------------------*/