@font-face {
    font-family: 'circular_stdbold';
    src: url('fonts/circularstd-bold_1-webfont.woff2') format('woff2'),
         url('fonts/circularstd-bold_1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'circular_stdbook';
    src: url('fonts/circularstd-book_1-webfont.woff2') format('woff2'),
         url('fonts/circularstd-book_1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}  

body {
	background-color:#FFF;
	width:100%;
	font-size:14px;
    margin: 0 auto;
    font-family: 'circular_stdbook' , sans-serif;
    color: black;
}
		
img{
	max-width:100%;
}

#topwrapper .top, #footerwrapper .footer, .copy {
	width:95%;
	margin:0 auto;
}  

.leftnav {
	float:left;
	width:28%;
	background-image:url(images/banner.jpg);
	background-position:center;
	background-repeat:no-repeat;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	background-color:#334365;
}

.leftnav .logo.two{
	width:55%;
	margin:0 auto 20px auto;
}

.leftnav .logo.secondary{
	width:35%;
	margin:0 auto;
}

.content{
	width:50%;
}

.main {
	width:100%;
	max-width:1700px;
	margin:0 auto;
	padding:15px 0px;
}

.main .padding {
	padding:0px 7%;
}

#topwrapper {
	width:100%;
	position:absolute;
	top:0px;
	z-index:1;
	padding:50px 0 0 0;
} 

#topwrapper .logo.mobile, a.menu, a.donate {
	display:none;
}
 
#topwrapper {
	width:100%;
}

#topwrapper .logo {
	width:280px;
	display:inline-block;
	margin:0 auto;
}

#topwrapper .logobar{
	position:absolute;
	z-index:9;
	top:0;
	left:0;
	width:100%;
}

#topwrapper .logobar .mobile{
	display:none;
} 
 
#innerwrapper {
	float:right;
	width:65%;
	padding:5% 0;
}

.main {
	background-color:#FFF;
    position:relative;
}

.pagetitle {
	font-size:180px;
	color:#FFF;
}

h1 {
	font-family: 'circular_stdbold';
	font-size:48px;
	color:#334365;
	margin:0px 0px 20px 0px;
}

h2 {
	font-size:42px;
	color:#BCB130;
	margin:0 0 15px 0; 
}

h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 13px 229px;
    color: #586477;
    font-weight: bold;
    font-size: 19px;
    text-align: center;
}

label {
    font-size: 16px;
}
 
.header{
	position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase; 
    font-weight: bold;
    font-size: 150px;
    color: rgba(255,255,255,0.2);
    top: -60px;
}

.clear {
	clear:both;
}

 

.flex{
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
	justify-content:center;
}

.padding{
	padding:80px 0;
}

.button{
	display:block;
	float:right;
	border:none;
	background:none;
	color:#334365;
	font-size:26px;
	border-bottom:1px solid #7BCEF9;
}

.button label {
	font-size: x-large;
}

hr{
	height:2px;
	border:none;
	background:#BCB130;
	width:80px;
	margin:0 0 40px 0;
}

#pages .text{ 
    margin: 0 0 15px 0;
    line-height: 28px;
    font-weight: 600;
    font-size: 18px;
}
	
#pages .text.center{
	text-align:center;
} 
 

/*Form*/

#pages form .textfield, #pages form .textarea, #pages .dn-textfield, #pages .dn-textfieldsml {
	height:25px;
	margin:0 0 25px 0;
	width:95%;
	font-size:11px;
	color: #0E303A;
	border:none;
	font-size: 16px;
	border-bottom:1.5px solid #A8A8A8;
}

#pages .dn-padding {
  padding: 0.5em 0;
}

#pages #section2 .dn-padding {
    padding: 0 0.5em 0 0; 
}
#pages #section3 .dn-field .half {
    display: flex;
    flex-wrap: wrap;
    width: 100%
        
}
#pages #section3 .title{
    width: 260px;
    line-height: 20px;
}
/*.stars input[type="radio"] {
  display: none;
}*/
.dn-clear{
	clear:both;}

.dn-title.radio {   display: block;
}
	
.fa-star-filled {
  color: yellow;
} 

#form .dn-field {
    position: relative;
    margin: 0 0 20px 0;
    font-size: 16px;
	 
}

#form #section2 .dn-field {
   display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#form   .dn-textfield {
	width: 100%;
	outline: none;
	border: none;
	font-size:16px;
	margin:0 0 10px 0;
	color:#022859;
	padding:0 0 5px 0;
	border-bottom: 1px solid #022859;
			 
}

 

#form .dn-textfield.third {
        width: 29%;
    margin-right: 24px;
}

#form   select.dn-textfield {
	height:30px;
}
#form .nofloat{
    margin-right: 25px;
}

#form .float{
	float:left;
	width:50%;
    margin-right: 25px;
}

#form .float.half{	 
    width: 44%;
    margin-right: 25px;
}

#form .float.half.two{
	float:right;
    margin-right: 25px;}
 
#form .dn-field.float.twothird{	 
	width:62%;
    margin-right: 25px;
}

#form .dn-title.margin{ 
    left:120px; 
}

#form .dn-field.float.third{	 
	width:28%;
    margin-right: 25px;
}

#form .waiver{
	font-weight:bold;
}

 

 


#form   select.dn-textfield{
	height:31px;
}

#form .button.cont{
	margin:0 0 30px 0;
	display:block;
}

#form .button.spouse{
	display:block;
	float:none;
	margin:0 0 20px 0;
        background: #314465;
    padding: 20px;
    color: white;
}

#form .button input{
	border:none;
	background:none;
    cursor: pointer;
}


#form .dn-title{
	position: absolute;
    pointer-events: none;
    top: 2px;
    left: 0px;
    letter-spacing: 0.65px;
    color: #000;
    transition: 0.2s ease all;
}

#pages form .dn-title.radio{
	position:relative;
	bottom:0;
}

#form .dn-field .dn-title.movetitle,
#form .dn-field input:focus ~ .dn-title,
#form .dn-field input:not([value='']) ~ .dn-title {
	top: -15px;
	left: 0px;
	opacity: 1;
	font-size:10px;
}

#form .dn-field .dn-title.movetitle,
#form .dn-field textarea:focus ~ .dn-title,
#form .dn-field textarea:not([value='']) ~ .dn-title {
	top: -15px;
	left: 0px;
	opacity: 1;
	font-size:10px;
}


/* Hidden Parts */
#form #section1, #form #section2, #form #section3, #form #section4 {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

#form #section1 {
  opacity: 1;
  height: auto;
}

/* Show Step 2 & Hide Step 1 */
#form #step2:checked ~ #section2 {
  opacity: 1;
  height: auto;
}
#form #step2:checked ~ #section1 {
  opacity: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Show Step 3  & Hide Step 2 */
#form #step3:checked ~ #section3 {
  opacity: 1;
  height: auto;
}

#form #step3:checked ~ #section2 {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Show Step 4  & Hide Step 3 */
#form #step4:checked ~ #section4 {
  opacity: 1;
  height: auto;
}

#form #step4:checked ~ #section3 {
  opacity: 0;
  width: 0;
  height: 0;
}


#form .dn-spacer {
	clear:both;
	height:15px;
}

#pages form .dn-twoleft{
	float:left;
	width:50%;
}

#pages form .dn-tworight{
	float:right;
	width:50%;
}

#pages form .dn-threeleft{
	float:left;
	width:33%;
}

#pages form .dn-threecenter{
	float:left;
	width:33%;
}

#pages form .dn-threeright{
	float:left;
	width:33%;
}

#pages form .dn-onefull{
	clear:both;
}
	

#pages form .amount{
	color:#BCB130;
	font-weight:bold;
	font-size:30px;
}

#pages form .amount input{
	color:#BCB130;
	font-weight:bold;
	font-size:30px;
	padding:0 0 0 5%;
	width:95%;
	height:30px;
}

.dn-star {
    color: #F00;font-size:12px;
	position:absolute;
}

#pages form .amount span{
	position:absolute;
}

#pages form .box{
	box-shadow: 10px 5px 10px 10px #e5e5e5;
	margin:30px auto 0px auto;
	width:47%;
	padding:60px 4%;
	font-size:13px;
}

#pages form .category {
	font-family: 'circular_stdbook';
	color:#334365;
	font-size:25px;
	margin:0 0 30px 0;
}

#pages form .textarea{
	resize:none;
}

#pages form .dn-title{ 
	font-size:16px;
	/*color:#818080;*/
    text-transform: none;
    padding: 8px 0;
} 
#pages form .dn-title.rel{
	font-size:13px;
	font-weight:bold;
	letter-spacing:1px;
	color: #0E303A;
	margin:0 0 30px 0;
}   
 

#pages form .title{
	color:#334365;
	margin:30px 0 5px 0;
	font-size:16px;
}

#pages form .title.two{
	margin:80px 0 30px 0;
}

#pages form .fa{
	float:left;
	color:#BCB130;
	clear:both;
}

#pages form .info{
	float:left;
	margin:0 0 20px 20px;
}

#pages form .info a{
	color:inherit;
	text-decoration:none;
}


#pages form .steps .button{
    display: inline-block;
}

#pages form .steps .button.back{
	float:left;
}

#pages form .steps {
   /*  position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; */ 
}

#form .button.back{
	float:left;
}

input[type="checkbox"]+label{
width:calc(100% - 25px);
float:right;
    display: flex;
    flex-wrap: wrap;
}

.waiver {
    font-size: 20px;
}

.waiver label{
    text-decoration: underline;
    text-decoration-color: #7BCEF9; 
        color: #334365; 
    text-underline-offset: 3px;
}


/*Footer*/
#footerwrapper {
	width:90%;
    display: flex;
    align-items:center; 
    justify-content: center;
	border-top:1px solid #707070; 
	float: right;
    padding:20px 5%;
}

#footerwrapper .logo { 
	width:35%;
}

#footerwrapper .contact {
	width:60%;
}

/*Copy*/
.copy {
	width:29%;
	text-align:right;
}

.copy a {
	color:#000000;
	text-decoration:none;
}