@import 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,900,900i';

body,
html{
	margin:0;
	padding:0;
	background:#002a41 url(images/background.png) top center no-repeat;
	background-size:contain;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:15px;
	line-height:1.5em;
}
.wrap{max-width:1100px;width:100%;margin:0 auto;padding:0 10px}
.wrap:after,.header:after,section:after,.header:after {content:" ";display:table;clear:both;}
a {text-decoration:none;color:#000}
img {vertical-align:bottom}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:900;color:#ebaf4a;text-transform:uppercase;line-height:1.1em}

/*======================================== 
COLUMNS
========================================  */

.flex {display: -webkit-flex; -webkit-flex-wrap: wrap;display: flex;flex-wrap: wrap;}
.flex:after {content:" ";display:table;clear:both;}
.col-4-4 {width:25%;float:left}
.col-2-2 {width:50%;float:left}
.col-3-3 {width:33.33%;float:left}

/* ======================================== 
BUTTONS
========================================  */

.button, #dn-center .submit {border:none;display:inline-block;transition:background-color 0.5s ease;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding:20px 30px;color:#fff;font-size:17px;font-weight:900}
.button.yellow {background:#ebaf4a;}
.button.yellow:hover {background:#02233a}
.button.blue {background:#02233a;}
.button.blue:hover {background:#02233a}

/* ======================================== 
HEADER
========================================  */

header .wrap {position:relative}
header #logo img {max-width:700px;width:100%;clear:both}

header p {font-size:22px;margin:0 0 10px 0;color:#ebaf4a;font-weight:900}
header h1 {color:#d43d3f;font-size:50px;margin:0;line-height:1em}
header h1 span {color:#ebaf4a}
header .header {width:350px;position:absolute;right:10px;top:110px}
header .initiative {width:150px;position:absolute;right:10px;bottom:30px}
header .call {position:absolute;top:10px;right:10px;background:#003c58;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding:15px 20px;font-size:17px;font-weight:900;color:#ebaf4a}
header .call img {display:inline-block;height:20px;margin-right:10px}
	
/* ======================================== 
INTRO
========================================  */
	
#intro {text-align:center;margin-bottom:30px;}
#intro h2 {font-size:27px;margin:25px 0}
#intro .wrap {border-bottom:1px solid #ebaf4a;padding:30px 15px;}

/* ======================================== 
CATEGORIES
========================================  */

#categories {margin-bottom:50px}
#categories p {font-size:14px;}
#categories .col-4-4 {padding:15px;}
#categories h3 {font-size:23px;}
#categories .icon img {height:40px;margin-bottom:20px}


/* ======================================== 
VOLUNTEER
========================================  */

#volunteer {background:#003c58 url(images/volunteer-bk.png) top right no-repeat;padding:90px 0;text-align:center}
#volunteer h2 {font-size:30px;margin:0 0 35px 0;color:#fff}
#volunteer h2 span {color:#ebaf4a;}

/*======================================== 
CONTACT
========================================  */

#contact {background:#ebaf4a url(images/contactbk.png) top left no-repeat;padding:70px 0 40px}
#contact h2, .dn-head {font-size:30px;margin:0 0 35px 0;color:#fff;text-align:center}

form#contactFrm ul {margin:0;padding:0;list-style:none}
form#contactFrm ul li {padding:5px;width:48%;float:left}
form#contactFrm ul li#input_1-7,form#contactFrm ul li#input_1-8,#contactFrm ul li#input_1-9,form#contactFrm ul li#input_1-7b {width:99%}
form#contactFrm ul li#input_1-2,form#contactFrm ul li#input_1-4,form#contactFrm ul li#input_1-6,form#contactFrm ul li#input_1-10 {float:right;}
form#contactFrm ul li#input_1-9 {text-align:center;}
form#contactFrm ul.checklist {float:right;width:65%;border-left:1px solid #fff;padding-left:20px}
form#contactFrm ul li#input_1-8 {margin:20px 0}
form#contactFrm ul li#input_1-8 p {width:30%;float:left;font-weight:900;font-size:23px;line-height:27px;margin:0}

input:not([type=submit]):not([type=checkbox]), textarea, select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   padding:15px;
   border:none;
   background:#fff;
   width:100%;
   font-family: 'Roboto', sans-serif;
   font-size:15px;
}

select {	 
}
input[type="checkbox"] {display: none;}
label {cursor: pointer;line-height:25px;}
input[type="checkbox"] + label:before {
  	border: 1px solid #ffffff;
	background:#fff;
  	content: "\00a0";
	display: inline-block;
	font-family: cimby;
  	height: 25px;
  	width: 25px;
  	margin: 0 10px 0 0;
  	padding:0;
	vertical-align: top;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #003c58;
  content: "\61";
  text-align: center;
	line-height:28px;
}
*:focus {outline:none !important}

input[type="submit"] {font-family: 'Roboto', sans-serif;cursor:pointer}
	.button.submit, #dn-center .submit {background:#003c58;padding: 20px 70px}
	.button.submit:hover, #dn-center .submit:hover {background:#02233a}

/* ======================================== 
FOOTER
========================================  */

footer {padding:25px 0;background:#fff;font-size:13px;color:#333}
footer p {margin:0;width:50%;float:left}
footer p:nth-child(2) {text-align:right}
footer a {color:#003c58;}
footer a:hover {color:#ebaf4a}

/* ======================================== 
CUSTOM ICONS
========================================  */

@font-face {
  font-family: "cimby";
  src:url("fonts/cimby.eot");
  src:url("fonts/cimby.eot?#iefix") format("embedded-opentype"),
    url("fonts/cimby.woff") format("woff"),
    url("fonts/cimby.ttf") format("truetype"),
    url("fonts/cimby.svg#cimby") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "cimby" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "cimby" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-check:before {
  content: "\61";
}

/* ======================================== 
RESPONSE PAGE
========================================  */
#response {
	text-align:center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
	margin: 15px auto;
    border: none;
    background: #fff;
    width: 50%;
    font-size: 15px;
	color:#ebaf4a;
	font-weight:bold;
}

/*Donate*/
.dn-padding {
	padding: 5px;
}

.dn-smalltext {
	font-size: 10px;
}

#dn-center {
	width: 100%;
	margin:0px auto;
	background-color:#FFF;
	clear: both;
	padding:50px 5%;
	overflow: hidden;
	position: relative;
}

.dn-head{
	color: #2d3f87;
	font-weight:bold;
	text-transform:uppercase;
	margin: 20px 5px 5px 5px;
	text-align: left;
	clear: both;
}

.dn-subhead {
	clear:both;
	margin:15px 0px 0px 0px;
	color: #ebaf4a;
	font-weight: bold;
}

#dn-center .dn-twoleft {
	float: left;
	width: 49%;
}

#dn-center .dn-tworight {
	float: right;
	width: 49%;
}

#dn-center .dn-onefull {
	width: 100%;
	clear: both;
}

#dn-center .dn-threewrap {
	float: left;
	width: 66%;
}

#dn-center .dn-threeleft {
	float: left;
	width: 50%;
}

#dn-center .dn-threecenter {
	float: right;
	width: 50%;
}

#dn-center .dn-threeright {
	width: 33%;
	float: right;
}

.dn-title {
	font-size: 12px;
	color:#003c58;
	font-weight: bold;
}

.dn-textfield, .dn-textfieldsm, .dn-textfieldsml {
	width: 98%;	
	min-height:25px;
	border:1px solid #003c58 !important;
	padding: 3px 10px 3px 10px;
	padding:10px 2% !important;
}

.dn-textfieldsm {
	width: 50% !important;
}

.dn-textfieldsml {
	width: 40% !important;
}

.dn-spacer {
	clear:both;
	height:10px;
}

.dn-star {
	color: #F00;
}


#dn-center .submit {
	border:none;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#FFF;
}

.options {
	margin:15px 0px;
	width:90%;
	background:#002a41 url(images/background.png) top center no-repeat;
	background-size:contain;
	padding:25px 0px;
}

.col {
	float:left;
	width:46%;
	margin:0px 0px 0px 2%;
}

.col2 {
	float:right;
	width:46%;
	margin:0px 2% 0px 0px;
}

.option {
	overflow:hidden;
	color:#FFF !important;
	margin:5px 0px;
}

.option .ticket {
	float:left;
	text-align:left;
	width:85%;
	line-height:15px;
	text-transform:uppercase;
	font-weight:bold;
}

.option label {
	line-height:normal;
}

.option .ticket .ticketdetail {
	font-weight:normal;
	font-size:10px;
	font-style:italic;
	text-transform:none;
}

.option .ticketprice {
	float:right;
	text-align:right;
	color:#ebaf4a;
	font-weight:bold;
	width:15%;
}

.total {
	clear:both;
	width:50%;
	color:#FFF;
	overflow:hidden;
	font-weight:bold;
	margin:10px auto;
}


#dn-account.dn-js { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

#dn-center input[type="checkbox"] {
	display:inline;
}


#dn-center input[type="checkbox"] + label:before {
	display:none;
}

/* ======================================== 
RESPONSIVE
========================================  */

@media screen and (max-width: 957px) {
	.col-4-4 {width:50%;float:left}
	header #logo {text-align:center}
	header .header {width:100%;position:static;padding:100px 0 30px;text-align:center}
	header .initiative {width:150px;position:static;margin:20px auto 0}
	header .call {position:relative;display:inline-block;float:right;top:20px}
}
@media screen and (max-width: 757px) {
	header h1 {font-size:40px;}
	.col-4-4 {width:100%;float:left;text-align:center}
	footer p {width:100%;text-align:center}
	footer p:nth-child(2) {text-align:center}

	form#contactFrm ul li {width:100%;padding:5px 0}
	form#contactFrm ul.checklist {width:50%;border-left:1px solid #fff;padding-left:20px}
	form#contactFrm ul li#input_1-8 p {width:45%;}
}
@media screen and (max-width: 757px) {
	form#contactFrm ul.checklist {width:100%;border-left:none;padding-left:0}
	form#contactFrm ul li#input_1-8 p {width:100%;margin-bottom:20px}
}

@media screen and (max-width: 450px) {
	#dn-center,  .col, .col2, #dn-center .dn-threewrap, #dn-center .dn-threeleft,  #dn-center .dn-threecenter, #dn-center .dn-threeright, #dn-center .dn-twoleft, #dn-center .dn-tworight, .option .ticketprice, .option .ticket {
		float:none;
		width:100%;
	}
	
	
	.option .ticketprice {
		padding:0px 2% 0px 0px;
	}
	
	.dn-head {
		font-size:x-large;
	}
}