#inner {
	margin: 0px;
}

body {
    font-family: 'tradegothic_condensed', CenturyGothic, sans-serif;
	background: #85CDD5;
}

html {
	scroll-behavior: smooth;
}

#nav-wrapper #nav a{
    color: #333 !important;
}

#container {
    margin: 100px 18vw 50px 14vw;
    font: initial;
    font-family: inherit;
    --btn-color: #337AB7;
    --btn-color-hover: #153d5f;
	width: 70vw;
	display: block;
}

fieldset {
    margin-top: 40px !important;
}

input,
select,
textarea {
	background-color: white;
}

input, select {
	border-bottom: 2px solid #85CDD5;
	background: white;
}

input[type="file"] {
	border: none;
	color: transparent;
}

.custom-file-input::-webkit-file-upload-button {
	visibility: hidden;
}

.custom-file-input::before {
	display: none;
}

.custom-file-label:before { 
	font-family: 'Arial', 'FontAwesome';
	content: '\f030     Upload Photo';
	background: #85CDD5;
	padding: 5px 8px;
	outline: none;
	display: inline-block;
	white-space: nowrap;
	-webkit-user-select: none;
	cursor: pointer;
	font-weight: 300;
}
/*Custom dropdown based on https://fabriceleven.com/design/clever-way-to-change-the-drop-down-selector-arrow-icon/*/

#gender {
	position: relative;
	margin: 0;
}

#gender:after {
    content: '▼';
    color: white;
	right: 32px;
	top: 15px;
    height: 25px;
    padding: 2px 4px;
    position: absolute;
    pointer-events: none;
    background: #85CDD5;
}

#gender select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/*custom checkbox css based on https://www.w3schools.com/howto/howto_css_custom_checkbox.asp*/

/* Customize the label (the container) */
.checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 1.4rem;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark, .checkmark-terms {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: white;
	border: 2px solid #85CDD5;
}

.checkmark-terms {
	background-color: #85CDD5;
	border: 2px solid white;
}

/* On mouse-over, add a grey background color */
.checkmark-terms:hover {
	background-color: yellow;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark, .checkbox-container input:checked ~ .checkmark-terms {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, .checkmark-terms:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after, .checkbox-container input:checked ~ .checkmark-terms:after  {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after, .checkbox-container .checkmark-terms:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

h2 {
	color: #38113A;
	font-size: 4em;
	font-weight: 800;
	margin: 3em 3em 0 0.5em;
}

#start-header {
	font-size: 6em;
	padding-top: 10vh;
}

#start-header + p {
	font-size: 2em;
	width: 40%;
	margin: 0.5em 0 2em 0;
}

.start-selection {
	background: white;
	font-size: 1.5em;
	font-weight: bold;
	color: #38113A;
	border: 2px solid white;
	display: block;
	margin-top: 1em;
	text-align: center;
	width: 40%;
	padding-right: 170px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
	height: 4em;
}

.select-cofounder {
	background-image: url(/wp-content/themes/hatchery_theme/images/BAT_finding_cofounders.png);
}

.select-startup {
	background-image: url(/wp-content/themes/hatchery_theme/images/BAT_joining_a_team.png);
}

.select-cofounder:hover, .select-startup:hover {
	background: white;
	border: 2px solid #38113A;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}

.select-cofounder:hover {
	background-image: url(/wp-content/themes/hatchery_theme/images/BAT_finding_cofounders.png);
}

.select-startup:hover {
	background-image: url(/wp-content/themes/hatchery_theme/images/BAT_joining_a_team.png);
}

.hide {
	display: none;
}

.error {
	color: rgb(245, 53, 53);
}

.error-box {
	background-color: rgb(241, 115, 115);
	border: 3px;
	border-color: red;
	border-style: solid;
	width: 100%; 
	text-align: center;
	padding: .75rem;
	color: black;
}

.cofounder-search-start {
	padding-top: 10vh;
	margin-left: 0;
	padding-left: 0;
	font-weight: 600;
	float: left;
}

.cofounder-start-subtitle {
	color: #38113A;
	font-size: 2em;
	font-weight: 600;
	margin: 4vh 0 1vh 0;
	text-align: left;
}

.big-button {
	background: white;
	font-size: 1.5em;
	font-weight: bold;
	color: #38113A;
	padding: 0.5em 4em;
	text-align: center;
	border: 2px solid white;
	display: block;
	margin: auto;
}

.big-button:hover {
	background-image: none;
	background: white;
	border: 2px solid #38113A;
}

.word-count {
	color: #85CDD5;
	background: white;
	text-align: right;
	margin: 0;
	width: 100%;
	padding: .75em .75em .75em 0;
}

.top-form-image{
	width: 18vw;
	height: auto;
	object-fit: contain;
	margin: 2vw;
	margin: 2em;
}

.top-form-title {
	padding-top: 10vh;
	margin-left: 0;
	padding-left: 0;
	font-weight: 600;
}

#looking-for, #looking-for-description {
	width: 100%;
}

#looking-for, #looking-for-description-block{
	margin-bottom: 3em;
}

#looking-for-description {
	height: 7em;
	margin: 0;
	border: none;
}

#team-image {
	width: 20vw;
	height: auto;
	object-fit: contain;
	margin: 2vw;
	margin: 0 2em 0 2em;
	float: left;
}

.search-start-container {
	display: flex;
}

.row {
	/* display: flex; */
}

.form-input {
	width:100% !important;	
	padding: 1em 0 1em 1em;
}

.section {
	margin-top: 1em;
}

.form-section {
	background: white;
	margin-top: 5em;
	padding: 2em;
	overflow: hidden;
	display:flex;
	flex-direction: column;
}

.form-section > h3{
	font-size: 2.5em;
	color: #85CDD5;
	font-weight: 600;
}

.form-section > h4, .basic-info > div > h4{
	font-size: 1.5em;
	color: #85CDD5;
	padding: 1em 0;
	font-weight: 600;
}

.is-rounded {
	border-radius: 50%;
	max-width: 128px;
	max-height: 128px;
	position: relative;
}

.pfp {
	/* make a square container */
    width: 128px;
    height: 128px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.textarea-block {
	border: 2px solid #85CDD5;
}

.textarea-main-form {
	width: 100%;
	height: 10vh;
}

.education-row {
	/* background: #E7F5F7;
	border-radius: 50px;
	margin-bottom: 8px; */
}
.education-row > input {
	margin: .5em;
	background-color: transparent;
}

.education-button {
	background-image: none;
}

.education-button:hover {
	background-image: none;
}

.education-button-icon {
	position: absolute;
	top: -4px;
	left: -20px;
	height: 25px;
	width: 25px;
	background-color: #85CDD5;
	border-radius: 50%;
}

.education-button-icon:before {
	content: "+";
	height: 25px;
	width: 25px;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #38113A;
	font-size: 18px;
}

.del-education-button-icon {
	position: absolute;
	float: right;
	height: 25px;
	width: 25px;
	background-color: #f04444;
	border-radius: 50%;
}

.del-education-button-icon:before {
	content: "-";
	height: 25px;
	width: 25px;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: white;
	font-size: 18px;
}

.delEdu {
	justify-self: right !important;
	background: none !important;
	color: rgb(241, 115, 115);
	padding-right: 0 !important;
	font-size: 2.5rem;
}

.firstEdu {
	margin-left: 2.5rem !important; 
}

.education-button-text {
	margin-left: 12px;
}

.education-container {
	display: block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.terms {
	margin: 5vh 0;
}
.place-center {
	width: 100%;
	display: flex;
	justify-content: center;
}

.place-left {
	width: 100%;
	display: flex;
	justify-content: left;
}

.basic-info > div > input, select{
	margin: 1em 2em;
	/* width: 20vw; */
}

.problem-statement {
	margin: 1em 0;
	width: 100%;
}

#problem-statement {
	margin: 0 !important;
}

h4.row {
	margin-left: inherit;
}

.exit-text {
	text-align: center;
	color: #38113A;
	font-weight: 600;
	font-size: 1.8em;
	margin-top: 25vh;
}

.exit-image {
	width: 50%;
	text-align: center;
	display: block;
	margin: 5vh auto;
}

@media screen and (max-width: 960px){
	
	h2 {
		margin: 3em 0.5em 0.5em 0.5em;
	}
	
	#start-header + p {
		width: 100%;
	}
	
	.start-selection {
		width: 100%;
	}
	
	#container {
		width: auto;
	}
	
	.big-button {
		margin: auto;
	}
	
}

/* Laptops */
@media screen and (max-width: 1200px) and (min-width: 900px) {
	div > #gender {
		max-width: 100%;
		overflow: hidden;
	}
	#gender:after {
		right: 0px !important;
	}
	.basic-info {
		width: 100% !important;
	}
}

/* Tablets */
@media screen and (max-width: 900px){
	.row {
		display: inline;
	}
	.form-input {
		width: 75% !important;
		margin: auto !important;
		padding: 1em 0 1em 0;
	}
	.form-section > h3 {
		text-align: center;
	}
	select {
		width: 100% !important;
	}
	#gender:after {
		right: 0px !important;
	}
	.form-section > h4, .basic-info > div > h4 {
		text-align: center;
	}
	.firstEdu {
		margin-left: auto !important;
	}
	.delEdu {
		background-color: white !important;
		padding-right: 100% !important;
		padding-left: 0;
	}
}

@media screen and (max-width: 720px){
	#team-image{
		display: none !important;
	}
	#container{
		margin: 10px;
	}
}

/* Large phones */
@media screen and (max-width: 426px){
	.start-selection {
		width: 100% !important;
		font-size: .9em;
		padding-right: 120px;
	}
	.cofounder-search-start {
		font-size: 3em;
		width: 100%;
	}
	#team-image { 
		width: 100%;
	}
	.place-left {
		width: 100%;
	}
	.search-start-container {
		display: inline;
	}
	.container-fluid, .basic-info, .form-section {
		padding: 0 !important;
	}
	.form-section > h3 {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 1em !important;
		font-size: 2em !important;
		text-align: center;
	}
	.form-section > h4 {
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 1em !important;
	}
	.education-row > input {
		align-items: center;
		max-width: 75%;
		background-color: transparent;
	}
	.textarea-block {
		width: 75%;
		margin-bottom: 5%;
	}
	.word-count {
		padding: .5em .5em .5em 0 !important;
	}
	textarea {
		height: 200px !important;
	}
	.exit-image {
		width: 100% !important;
	}
	#start-header {
		font-size: 4em !important;
	}
	#start-header + p {
		font-size: 1.5em;
	}
	.delEdu {
		padding-left: 10% !important; 
	}
	.checkbox-container { 
		margin-left: 10%; 
	}
}

/* medium phones */
@media screen and (max-width: 376px){
	.cofounder-search-start {
		font-size: 3em;
		width: 100%;
	}
	#team-image { 
		width: 100%;
	}
	.place-left {
		width: 100%;
	}
	.search-start-container {
		display: inline;
	}
	.education-button {
		padding: 1em !important;
	}
	.big-button {
		font-size: 1.1em !important;
	}
}

/* Small phones */
@media screen and (max-width: 321px){
	#start-header {
		font-size: 5em;
	}
	.cofounder-search-start {
		font-size: 3em;
		width: 100%;
	}
	#team-image { 
		width: 100%;
	}
	.place-left {
		width: 100%;
	}
	.search-start-container {
		display: inline;
	}
}