.page--join {
	max-width: 900px;
	margin: 0 auto 80px;
}

.field-wrapper {
	max-width: 600px;
	margin: 0 auto;
}


/* ACCORDIONS */
.accordion-box {
	margin-bottom: 18px;
	background-color: var(--mainblue);
	overflow: hidden;
}
	@media (min-width: 400px)  {.accordion-box {margin-bottom: 35px;}}
	@media (min-width: 600px)  {.accordion-box {margin-bottom: 50px;}}
	@media (min-width: 1024px) {.accordion-box {margin-bottom: 75px;}}
	@media (min-width: 1244px) {.accordion-box {margin-bottom: 100px;}}

.accordion-box-last {margin-bottom: 50px;}
	@media (min-width: 768px)  {.accordion-box-last {margin-bottom: 75px;}}
	@media (min-width: 1024px) {.accordion-box-last {margin-bottom: 100px;}}
	@media (min-width: 1244px) {.accordion-box-last {margin-bottom: 150px;}}

.accordion {
	position: relative;
	background-color: #63BCE1;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	transition: 0.4s;
	padding: 30px 18px;
	box-sizing: border-box;
}
	@media (min-width: 400px) {.accordion  {padding: 40px 20px;}}
	@media (min-width: 600px) {.accordion  {padding: 50px;}}
	@media (min-width: 1024px) {.accordion {padding: 50px;}}
	@media (min-width: 1244px) {.accordion {padding: 100px;}}

.accordion h3 {
	position: relative;
	z-index: 2;
}

.accordion button {
	position: absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 20px;
	background-color: var(--mainblue);
	border-color: var(--mainblue);
	z-index: 10;
}
	@media (min-width: 400px)  {.accordion button  {right: 20px;}}
	@media (min-width: 600px)  {.accordion button  {right: 50px;}}
	@media (min-width: 768px)  {.accordion button  {right: 75px; width: 180px;}}
	@media (min-width: 1024px) {.accordion button {width: 240px;}}

.accordion.active {
	border-radius: 7px 7px 0 0;
	background-color: #FFF;
}

.accordion:hover button, .accordion button:hover {
	background-color: #263640;
	border-color: #263640;
}

.active, .accordion:hover {}

.panel {
	padding: 25px;
	border-radius: 7px;
	display: none;
	background-color: white;
	overflow: hidden;
}
	@media (min-width: 500px) {.panel {padding: 50px;}}
	@media (min-width: 600px) {.panel {padding: 50px 50px 100px;}}


.accordion.active ~ .panel {
	border-radius: 0 0 7px 7px;
}

.accordion.active button.btn {
	display: none;
}

.accordion-box-x {
	position: absolute;
	width: 30px;
    top: 30px;
    right: 20px;
	opacity: 0;
}
	@media (min-width: 400px) {
		.accordion-box-x {
			width: 30px;
		    top: 42px;
		    right: 25px;
		}
	}
	@media (min-width: 600px) {
		.accordion-box-x {
			width: 40px;
		    top: 47px;
		    right: 50px;
		}
	}
	@media (min-width: 1024px) {
		.accordion-box-x {
			width: 50px;
		    top: 53px;
		    right: 50px;
		}
	}
	@media (min-width: 1244px) {
		.accordion-box-x {
		    top: 98px;
		    right: 100px;
		}
	}


.accordion.active .accordion-box-x {
	opacity: 1;
}


.accordion-box-student,
.accordion-box-educator,
.accordion-box-parent,
.accordion-box-supporter {
	position: relative;
}

.accordion-box-student-svg,
.accordion-box-educator-svg,
.accordion-box-parent-svg,
.accordion-box-supporter-svg {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.accordion-box-student-svg 	 {width: 300px;}
.accordion-box-educator-svg  {width: 110%;}
.accordion-box-parent-svg 	 {width: 110%;}
.accordion-box-supporter-svg {width: 300px;}
	@media (min-width: 600px) {
		.accordion-box-student-svg 	 {width: 600px;}
		.accordion-box-educator-svg  {width: 100%;}
		.accordion-box-parent-svg 	 {width: 100%;}
		.accordion-box-supporter-svg {width: 650px;}	
	}


.accordion.active .accordion-box-student-svg,
.accordion.active .accordion-box-educator-svg,
.accordion.active .accordion-box-parent-svg,
.accordion.active .accordion-box-supporter-svg {
	display: none;
}
/* ACCORDIONS */





/* FORM */

.fui-input-container input {border:  2px solid var(--mainblue) !important;}

.fui-row {margin-bottom: 10px !important;}

.fiu-label {
	font-size: 20px !important;
}



/* FORMIE OVERRIDES */
.fui-submit {
   display: inline-block !important;
   padding: 16px 40px 18px !important;
   color: white !important;
   text-align: center !important;
   font-size: 20px !important;
   letter-spacing: .02rem !important;
   text-decoration: none !important;
   background-color: var(--darkblue) !important;
   border-radius: 40px !important;
   border: 2px solid var(--darkblue) !important;
   cursor: pointer !important;
   box-sizing: border-box !important;
   transition: all 225ms ease !important;
   line-height: 1 !important;
	font-family: franklin-gothic-atf, sans-serif !important;

}
   .fui-submit:hover {
      background-color: var(--teal) !important;
      border-color: var(--teal) !important;
   }

.fui-page-row input,
.fui-page-row textarea {
   border: 2px solid var(--darkblue);
}

.fui-page-row input {
	padding: 20px !important;
	font-size: 20px !important;
}

.fui-page-row label {
   color: var(--darkblue);
	font-family: franklin-gothic-atf, sans-serif !important;
   font-size: 20px;
	font-weight: 400 !important;
}

.fui-type-email-address label,
.fui-type-name label,
.fui-type-dropdown {
	padding-bottom: 7px !important;
}

.fui-page-row textarea {
	min-height: 200px;
}

.fui-legend {
	font-size: 20px !important;
	margin-bottom: 10px !important;
	letter-spacing: 1 !important;
	font-family: franklin-gothic-atf, sans-serif !important;
	font-weight: 400 !important;
}

.fui-type-checkboxes .fui-legend {margin-bottom: 20px !important;}

.fui-checkbox-label {
	margin-bottom: 20px !important;
}

.fui-field:not(.fui-type-hidden-field) {
   margin-bottom: 30px !important;
}

.fui-page-row {width: 100% !important;}
/* FORMIE OVERRIDES */


/* CONTACT PAGE - FORMIE OVERRIDES */
.contact .fui-page-row {
   width: 100% !important;
   max-width: 750px;
   padding-right: 18px !important;
   display: contents;
}

.fui-name-first-name {margin-right: 30px !important;}

.fui-submit {margin-top: 30px !important;}


.fui-type-checkboxes {}
   @media (min-width: 768px)  {
      .fui-type-checkboxes {
         width: 50%;
         float: left;
      }
   }

.fui-select {
	font-size: 18px !important;
	padding: 20px !important;
	font-family: franklin-gothic-atf, sans-serif !important;
	border: 2px solid var(--mainblue) !important;
}

.fui-select option {
	font-family: franklin-gothic-atf, sans-serif !important;
}

.fui-input::placeholder,
.fui-select::placeholder {
	color: #AAA !important;
	font-family: franklin-gothic-atf, sans-serif !important;
}
/* CONTACT PAGE - FORMIE OVERRIDES */