/*
WOO CUSTOM STYLESHEET
---------------------

Instructions:

Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking. */


/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */




/* DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 768px) {
	/* Desktop styles go below this line */
	
}

#header {
	background: #FFF;
}

.page-template-template-home nav#navigation{
	margin:0;
}

.page-template-template-home #inner-wrapper{
	padding: 0;
}

/* HOME PAGE */ 

.col-3, .col-2{
	text-align: center;
	display: inline-block;
}
.col-12 {
	padding: 0 0 15px;
}
.note {
	border-radius: 50px;
	background: #686868;
	color: #FFF;
	width: 95%;
	margin: auto;
	font-size: 18px;
	padding: 15px 0;
	font-weight: 300;
	text-align: center;
	letter-spacing: 1px;
}
.note span {
	font-weight: 600;
}
.steps-col{
	padding:20px;
}
.steps-container {
	border-top: 1px solid #dcdcdc;
}
.steps-container h2 {
	color: #555;
	font-size: 28px;
}
.steps-container h2 span {
	color: #85c4a6;
}
.raised {
	background: #f4f4f4;
	text-align: center;
	padding: 40px 0;
}
.top-steps{
	padding:40px 20px;
}
.clearfix {
	clear: both;
}
/* BUTTONS */

a.btn{
	text-decoration: none;
}
a.btn.orange, a.btn.white{
	color:#fff;
}
a.btn.brown{
	color: #686868;
}
a.btn.brown:hover{
	color: #fff;
}
a.btn.white:hover{
	color: #686868;
}
.btn{
	border-radius: 100px;
	padding: 12px 50px !important;
	font-size: 17px;
	font-weight: 600;
	margin: 13px 15px;
	color:#fff;
	font-family: 'Open Sans';
}
.orange{
	background: #FB7253;
}
.orange:hover{
	background: #ce5337;
	transition: all 0.2s ease-in-out;
}
.white{
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
}
.white:hover{
	background: #fff;
	color: #686868;
	transition: all 0.2s ease-in-out;
}
.brown{
	background: transparent;
	border:1px solid #686868 ;
	color: #686868;
}
.brown:hover{
	background-color: #686868;
	color: #fff; 
	transition: all 0.2s ease-in-out;
}

/* HEADER */
#header .donate-now {
	float: right;
    margin-top: 24px;
}
.header{
	background: url('images/header.png') no-repeat bottom;
	background-size: cover;
	font-size: 0;
}
.header .text{
	color: #fff;
	font-size: 18px;
	text-shadow: 0px 4px 6px rgba(0,0,0,0.15);
	font-weight: 600;
	font-family: 'Open Sans';
}
.header .big{
	font-size: 30px;
	text-shadow: 0px 4px 6px rgba(0,0,0,0.15);
	margin-bottom: 32px;
	font-family: 'Open Sans';
	margin-top: 5px;
}
.header img{
	position: relative;
}

/* Steps*/
.steps-container .top-steps{
	text-align: center;
	line-height: 30px;
	margin:0 auto;
}
.steps-container .top-steps p{
	font-size: 23px;
    font-family: 'Open Sans';
}
.steps-container .bottom-steps{
	font-size: 0;
}
.steps-container .bottom-steps .home-title{
	 font-weight: 700;
    font-size: 22px;
    font-family: 'Open Sans';
}
.steps-container .bottom-steps .text{
	font-size: 18px;
	font-family: 'Open Sans';
    line-height: 135%;
}
.steps-container .bottom-steps .col-3 {
	float: left;
}

/* DONATE */
.donate{
	background: url('images/background-2.jpg') no-repeat;
	background-size: 100% auto;
	text-align: center;
	padding:65px 20px 80px 20px;
	background-color: #f4f4f4;
	font-family: 'Open Sans';
}
.donate .home-title{
	padding-bottom:30px;
	font-family: 'Open Sans';
}

/* VIEW CHARITIES */

.view-charities {
	text-align: center;
	margin-bottom: 20px;
	position: relative;
}
.view-charities a {
	display: inline-block;
	padding: 12px 35px!important;
	z-index: 1;
    background: #FFF;
    position: relative;
}
.view-charities:before {
	content: '';
    display: block;
    width: 70%;
    height: 1px;
    background: #686868;
    left: 50%;
    margin-left: -35%;
    top: 50%;
    position: absolute;
    z-index: 0;
}
body.page-id-121 article ul {
	display: inline-block;
    width: 40%;
    float: left;
}
body.page-id-121 article ul li {
	list-style-type: none;
}
body.page-id-121 article ul li:before {
	content: "• ";
    color: #87c5a4; /* or whatever color you prefer */
    padding-right: 10px;
}
body.page-id-121 #content {
	padding: 0 
}
body.page-id-121 .entry {
	padding-left: 115px;
}
body.page-id-121 h1.title {
	color: #FB7253;
	text-align: center;
	margin-bottom: 50px;
}
.donate-row {
	text-align: center;
	background: #f4f4f4;
	padding: 55px 0;
    margin-top: 25px;
}

/* #footer */

#footer{
	background-color: #87c5a4;
	text-align: center;
	padding:20px 20px;
}
#footer nav{
	padding:20px 0;
	position: relative;
}
#footer nav:after{
	content: "";
	width:160px;
	border-bottom: 1px solid #fff;
	position: absolute;
	bottom:0;
	left: 50%;
	margin-left: -80px;
	opacity: .4;
}
#footer nav ul li a{
	color: #fff;
	font-weight: bold;
	padding:10px 30px;
	font-size: 16px;
	font-family: 'Open Sans';
}

#footer .logo{
	text-align: center;
	padding:20px 0;
}
#footer .copyright p{
	color: #fff !important;
	font-size: 16px;
}
@media(max-width:767px){
	.col-3{
		width: 100%;
	}
	.col-2{
		width: 100%;
		margin-bottom: 30px;
	}
	#header {
		text-align: center;
		border-bottom: 1px solid #EEE;
	}
	#header .donate-now {
		float: none;
		margin-top: 15px;
    	display: inline-block;
	}
	.header {
		padding-top: 30px;
	}
	.header img{
		bottom:-30px;
		width: 400px;
		max-width: 100%;
	}
	.donate{
		background-image: none;
	}
	.donate a.btn{
		display: block;
	}
	.donate .home-title{
		width: auto;
		font-size: 22px;
	}
	#footer nav ul li{
		display: block;
		margin-bottom: 20px;
	}
	body.page-id-121 .entry {
		padding-left: 0px;
	}
	body.page-id-121 article ul {
		width: 100%;
	}
	body.page-id-121 h1.title {
		margin-top: 20px;
	}
}
@media(min-width:768px){
	#navigation ul {
		text-align: center;
	}
	#navigation ul.nav > li {
		display: inline-block;
		float: none;
	}
	.col-3{
		width: 33.3333%;
	}
	.col-2{
		width: 50%;
		margin-bottom: none;
	}
	.header{
		height: 350px;
	}
	.col-12 {
		padding: 14px 0 0;
	}
	.note {
		width: 420px;
		padding: 15px;
	}
	.header .text {
		padding-right: 40px;
	}
	.header .hero-text {
		position: relative;
    	top: -5px;
	}
	.header .hero-text a {
		margin-right: 40px;
	}
	.header img{
		bottom: -24px;
		left: -30px;
	}
	.donate .home-title{
		width: 600px;
		margin-left: auto;
		margin-right: auto;
		font-size: 24px;
	}
	#footer nav ul li{
	display: inline-block;
	}
}
@media(min-width:992px){
	.steps-container .top-steps{
		width: 700px;
	}
	.header{
		height: 420px;
	}
	.header .hero-text {
    	top: -28px;
	}
	.header img{
		position: relative;
		bottom:-58px;
		left: -60px;
		max-width: initial;
    	height: auto;
	}
}
@media(min-width:1200px){

}
@media(min-width:1400px){

}