@import url(https://fonts.googleapis.com/css?family=Exo:400,600);


::-moz-selection { background: #f00; color: #fff; text-shadow: none; }
::selection { background: #f00; color: #fff; text-shadow: none; }


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { 
font-size: 100%; padding: 0; margin: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Exo', sans-serif;
	font-weight:600;
    color: #fff;
	font-size:185%;
	line-height:145%;
	background-color:#000;
}

a {
	color: #f00;
	text-decoration: none;
}

a:hover {
	color: #f00;
	background-color:#fff;
}


h2 {
	font-size:280%;
}

/* ------------------------------------------------------- */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ------------------------------------------------------- */

#container {
	width:90%;
	margin: 0 auto;
}

#headerNav {
	top:0px;
	width:100%;
	padding:1.25% 2.25%;
	color:#f00;
	font-size:150%;
	text-transform:uppercase;
	border-top:#ccc thin dashed;

}


#headerNav a {
	color:#fff;
	text-decoration:none;
	
	-webkit-transition: color .4s linear, background-color .4s linear;  
    -moz-transition: color .4s linear, background-color .4s linear;
    -o-transition: color .4s linear, background-color .4s linear;  
    -ms-transition: color .4s linear, background-color .4s linear;  
    transition: color .4s linear, background-color .4s linear; 
	
	
}

#headerNav a:hover {
	color:#f00;
	background-color:#fff;
}

#headerNav ul li {
	display:block;
	padding:0.5%;
	list-style:none;
	list-style-type:none;
}


#welcome {
	width:90%;
	padding-left:5%;
	padding-right:5%;

}

#philosophy {
	width:100%;
	height:100%;
	background:url(../images/philosophy_bg.jpg);
	background-repeat:no-repeat;
	color:#fff;

}

#philosophyContent {
	width:90%;
	color: #fff;
	font-size:135%;
	line-height:145%;
	text-align:left;
	
	padding-top:25%;
	padding-left:110px;
}

#waysToHelp {
	width:100%;
	height:100%;
	color:#fff;
	line-height:22px;
	word-spacing:2px;
	text-align:left;
}

.waysLeft { 
	width:100%;
}

.waysRight { 
	width:100%;
	padding:1.25%;
	font-size:115%;
	line-height:120%;
	background-color:rgba(255, 0, 0, 0.85);
	color:rgba(0, 0, 0, 1);
	
	animation: colorChange 3s infinite alternate;
	-webkit-animation: colorChange 3s infinite alternate; /* Safari and Chrome */
}

.waysRight h2 {
	font-size:155%;
	line-height:110%;
	text-transform:uppercase;
}

.joinLeft { 
	width:100%;
}

.joinRight { 
	width:100%;
	padding:10px;
	font-size:105%;
	color:#fff;
}

.joinRight img { 
	width:100%;
}

.storeLeft { 
	float:left;
	width:47.5%;
	padding:1.25%;
	font-size:105%;
	color:#fff;
}

.storeRight { 
	float:left;
	width:47.5%;
	padding:1.25%;
	font-size:105%;
	color:#fff;
}

.largeText {
	padding-top:3%;
	padding-bottom:3%;
	font-size:275%;
	color:#fff;
}



#footer {
	top:0px;
	width:100%;
	padding:1.25% 0;
	color:#fff;
	font-size:100%;
	font-weight:400;
	background-color:#333;

}


/*  Animation */
@keyframes colorChange
{
from {background-color: rgba(255, 0, 0, 1);}
to {background-color: rgba(255, 0, 0, 0.75);}
}

@-webkit-keyframes colorChange /* Safari and Chrome */
{
from {background-color: rgba(255, 0, 0, 1);}
to {background-color: rgba(255, 0, 0, 0.75);}
}

/*  Form Styles */
input, textarea {
	width:75%;
	border:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	background-color:#fff;
	color:#000;
	font-size:155%;
	font-weight:bold;
	padding:5px;
	
	-webkit-transition: background-color 0.7s ease;  
    -moz-transition: background-color 0.7s ease;  
    -o-transition: background-color 0.7s ease;  
    -ms-transition: background-color 0.7s ease;  
    transition: background-color 0.7s ease;
	
}

input:focus, textarea:focus {
	border:none;
	background-color:rgba(255, 0, 0, 0.85);
	color:#fff;
	padding:5px;
	outline:none;
	
}

textarea {
	resize: none;
}

option {
	font-size:155%;
}


#emf-form .wblack {
	font-size:155%;
	font-weight:bold;
	margin-top:5px;
	padding-left:2.25%;
	padding-right:2.25%;
	padding-top:5.25%;
	padding-bottom:5.25%;
	border:none;
	line-height:14px;

	background-color:rgba(255, 0, 0, 0.85);
	color:#fff;
	vertical-align:top;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;	
	text-transform:uppercase;
	font-family: 'Exo', sans-serif;
	font-weight:600;
	
	-webkit-transition: background-color .4s linear;  
    -moz-transition: background-color .4s linear;  
    -o-transition: background-color .4s linear;  
    -ms-transition: background-color .4s linear;  
    transition: background-color .4s linear; 
}

#emf-form .wblack:hover {
	border:none;
	background-color:#fff;
	color:rgba(255, 0, 0, 1);
	vertical-align:top;
		
}

#mc_embed_signup {
		width:90%;
		clear:left; 
		
}

select { 
	font-size:120%; 
	text-transform: uppercase;
	width:90%;
	border:0; 
	color:#000; 
	background:#f00;
	padding: 1.25%; 
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

}		
		
		

/*  Media Query for Mobile phones */

@media screen and (max-width:1024px) {
	
	
#welcome {
	width:100%;

}

h2 {
	font-size:130%;
}

#headerNav {
	top:0px;
	width:100%;
	padding:1.25% 2.25%;
	color:#f00;
	font-size:170%;
	text-transform:uppercase;
	border-top:#ccc thin dashed;

}


#headerNav ul li {
	display:block;
	padding:0.5%;
	list-style:none;
	list-style-type:none;
}

.storeLeft { 
	width:95%;
	padding:2.5%;
	font-size:105%;
	color:#fff;
}

.storeRight { 
	width:95%;
	padding:2.5%;
	font-size:105%;
	color:#fff;
}

input, textarea {
	width:100%;
	border:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	background-color:#fff;
	color:#000;
	font-size:155%;
	font-weight:bold;
	padding:5px;
	
	-webkit-transition: background-color 0.7s ease;  
    -moz-transition: background-color 0.7s ease;  
    -o-transition: background-color 0.7s ease;  
    -ms-transition: background-color 0.7s ease;  
    transition: background-color 0.7s ease;
	
}

input:focus, textarea:focus {
	border:none;
	background-color:rgba(255, 0, 0, 0.85);
	color:#fff;
	padding:5px;
	outline:none;
	
}

select { 
	font-size:105%; 
	text-transform: uppercase;
	width:95%;
	border:0; 
	color:#000; 
	background:#f00;
	padding: 1.25%; 
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

}	

}