/* Heading */

.container_fluid_create {
	padding: 0 43px;
	background-color: #81d5df;
}

	.create_header {
		padding: 0 5px
	}

		.create_header h3 {
			margin: 30px 0 34px -1px;
		}

		.paragraph_create {
			margin: 0 0 50px -3px;
		}

			.steps {
				margin: 50px 0 0 -3px;
				font-size: 21px;
				font-weight: bold;
			}

				.step_indicator {
					height: 2px;
					width: 220px;
					background-color: #561a4c;
					position: relative;
					margin: 39px 0 0 -3px;
				}

				.step_indicator_one:before {
					content: '';
					height: 4px;
					width: 55px;
					background-color: #561a4c;
					position: absolute;
					left: 0;
					bottom: 1px;
				}

				.step_indicator_two:before {
					content: '';
					height: 4px;
					width: 55px;
					background-color: #561a4c;
					position: absolute;
					left: 55px;
					bottom: 1px;
				}

				.step_indicator_three:before {
					content: '';
					height: 4px;
					width: 55px;
					background-color: #561a4c;
					position: absolute;
					left: 110px;
					bottom: 1px;
				}

				.step_indicator_four:before {
					content: '';
					height: 4px;
					width: 55px;
					background-color: #561a4c;
					position: absolute;
					right: 0;
					bottom: 1px;
				}


	/* Create */

	#makeCreateOne,
	#makeCreateTwo,
	#makeCreateThree,
	#makeCreateFour {
		padding: 0;
	}

	.creation_vessel {
		padding: 180px 15px;
	}

		.creation_vessel_container {
			padding: 0;
		}

			.creation_vessel_container h6 {
				font-weight: 400;
				font-size: 18px;
				margin: 0;
				margin-top: -6px;
				line-height: initial;
				letter-spacing: initial;
			}

				input.create_input {
					width: 100%;
					height:55px;
					border-radius: 5px;
					font-size: 20px;
					margin-bottom: 40px;
					padding:0 12px;
					background: none;
					color: #561a4c;
					border: 2px solid #561a4c;
				}

				input.create_input:focus {
					border: 2px solid #d972ff;
				}

				/* Image */

				.image_vessel {
					border: 2px solid #561a4c;
					border-radius: 5px;
					padding: 40px;
					height: auto;
					margin: 0 0 40px;
				}

				.image_upload_vessel {
					width: 100%;
					height: 55px;
					border-radius: 5px;
					padding: 12px 11px 11px;
					margin: 0 0 40px;
					border: 2px solid #561a4c;
					font-size: 20px;
					position: relative;
				}

				.cancel_img_btn {
					background: none;
					position: absolute;
					border: none;
					width: 44px;
					height: 44px;
					right: 45px;
					top: 47px;
					display: none;
				}

				.cancel_img_btn:focus {
					opacity: .5;
				}

					.cancel_image_icon {
						position: absolute;
						height: 25px;
						width: 25px;
						top: 9px;
						right: 9px;
					}

				.image_upload_label {
					font-size: 0.8em;
					font-weight: 400;
					background-color: #81d5df;
					padding: 0 5px;
					position: absolute;
					left: 49px;
					margin: -105px 0 0;
				}

				#item_image {
					position: absolute;
					left: -9999px;
				}

				.image_label {
					display: block;
					color: #561a4c;
					position: relative;
					border: none;
					letter-spacing: 0;
					border-radius: 5px;
					font-weight: bold;
					font-size: 21px;
					cursor: pointer;
					text-align: center;
					background-color: #81d5df;
					border: 2px solid #561a4c;
					padding: 14px 40px;
					margin: 0;
					-webkit-transition: all 0.5s ease-out;
					-moz-transition: all 0.5s ease-out;
					transition: all 0.5s ease-out;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-khtml-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}

				.image_label:before {
					background-image: url('../assets/icons/plus.svg');
					background-size: 22px 22px;
					position: absolute;
					margin-top: 4px;
					left: 22px;
					width: 22px;
					height: 22px;
					content: '';
				}

				.image_label:visited {
					background-color: #81d5df;
				}

				.image_label:hover,
				.image_label:focus {
					background-color: #92dbe4;
				}

				.links_vessel,
				.jobs_vessel,
				.education_vessel,
				.subject_vessel,
				.big_list_vessel,
				.subject_list_big_item_vessel,
				.small_list_vessel,
				.subject_list_small_item_vessel {
					border: 2px solid #561a4c;
					border-radius: 5px;
					padding: 40px;
					margin: 0 0 40px;
				}

					.little_beam {
						height: 5px;
						width: 15px;
						background: #561a4c;
						margin: 0 auto 40px;
						display: block;
					}

					.creation_button {
						width: 100%;
						height: 59px;
						margin-bottom: 22px;
						background-color: #81d5df;
						border: none;
						color: #561a4c;
						letter-spacing: 0;
						border-radius: 4px;
						font-weight: bold;
						font-size: 21px;
						margin: 0;
					}

					.creation_button_add {
						border: 2px solid #561a4c;
					}

					.creation_button_add:before {
						background-image: url('../assets/icons/plus.svg');
						background-size: 22px 22px;
						position: absolute;
						margin-top: 4px;
						left: 63px;
						width: 22px;
						height: 22px;
						content: '';
					}

					.add_new_list_item_big:before,
					.add_new_list_item:before {
						left: 107px;
					}

					.creation_button:hover,
					.creation_button:focus {
						background-color: #92dbe4;
					}

					.creation_button:visited {
						background-color: #81d5df;
					}

					.creation_button_add:hover,
					.creation_button_add:focus {
						background-color: #92dbe4;
					}

					.creation_button_add:visited {
						background-color: #81d5df;
					}

					.error_vessel {
						width: 100%;
						height: 100%;
						padding: 9px 20px 0px;
					}

						.create_error {
							margin: 0px 0px 22px;
							height: 64px;
						}

					.creation_button_next {
						margin: 0 0 30px;
						border-radius: 42px;
						background-color: #d972ff;
					}

					.creation_button_next:before {
						background-image: url('../assets/icons/arrowright.svg');
						background-size: 22px 22px;
						position: absolute;
						margin-top: 6px;
						right: 27px;
						width: 22px;
						height: 22px;
						content: '';
					}

					.creation_button_next:hover,
					.creation_button_next:focus {
						background-color: #de86ff;
					}

					.creation_button_next:visited {
						background-color: #d972ff;
					}

					.creation_button_back {
						position: relative;
						margin: 0 0 30px;
						background-color: #81d5df;
						border: 2px solid #561a4c;
						border-radius: 42px;
					}

					.creation_button_back:before {
						background-image: url('../assets/icons/arrowleft.svg');
						background-size: 22px 22px;
						position: absolute;
						margin-top: 6px;
						left: 27px;
						width: 22px;
						height: 22px;
						content: '';
					}

					.creation_button_back:hover,
					.creation_button_back:focus {
						background-color: #92dbe4;
					}

					.creation_button_back:visited {
						background-color: #81d5df;
					}

					.creation_button_cancel {
						background-color: #81d5df;
						border: 2px solid #561a4c;
						border-radius: 42px;
					}

					.creation_button_cancel:hover,
					.creation_button_cancel:focus {
						background-color: #92dbe4;
					}

					.creation_button_cancel:visited {
						background-color: #81d5df;
					}

					.creation_button_done {
						background-color: #d972ff;
						color: #212529;
						margin: 0 0 30px;
						border-radius: 42px;
					}

					.creation_button_done:before {
						background-image: url('../assets/icons/yes.svg');
						background-size: 22px 22px;
						position: absolute;
						margin-top: 6px;
						right: 27px;
						width: 22px;
						height: 22px;
						content: '';
					}

					.creation_button_done:hover,
					.creation_button_done:focus {
						background-color: #de86ff;
					}

					.creation_button_done:visited {
						background-color: #d972ff;
					}

/* Inputs */

input#create_firstname + label,
input#create_lastname + label,
input#create_dob + label,
input#create_adres + label,
input#create_zipcode + label,
input#create_city + label,
input#create_phone + label,
input#create_email + label {
	margin: 16px 7px 0;
}

textarea {
	width: 100%;
	border-radius: 5px;
	border: 2px solid #561a4c;
	min-height: 165px;
	background: none;
	margin: 0 0 36px;
	padding: 10px;
	color: #561a4c;
	font-size: 20px;
}

textarea:focus {
	border: 2px solid #d972ff;
}

	textarea + label {
		margin: 13px 0px;
		background-color: #81d5df;
	}

input.create_input + label {
	margin: 13px 0px;
	background-color: #edd2cb;
}

input.create_input + label,
textarea.desc_job + label,
textarea.desc_edu + label,
input.boxed_input + label,
textarea.boxed_input + label {
	margin: 13px 0px 13px 40px;
	background-color: #81d5df;
	position: absolute;
    left: 2px;
    padding: 0 5px;
	margin: 16px 45px 0;
    transition: transform 200ms ease;
    pointer-events: none;
}

textarea.double_boxed_input + label {
	margin: 13px 0px 13px 40px;
	background-color: #81d5df;
	position: absolute;
    left: 2px;
    padding: 0 5px;
    margin: 12px 88px;
    transition: transform 200ms ease;
    pointer-events: none;
}

	input.create_input:focus + label,
	input.create_input + label.freeze,
	textarea.desc_job:focus + label,
	textarea.desc_job + label.freeze,
	textarea.desc_edu:focus + label,
	textarea.desc_edu + label.freeze {
		font-size: .85em;
		font-weight: 400;
		-webkit-transition: 0.1s ease-in;
		-moz-transition: 0.1s ease-in;
		transition: 0.1s ease-in;
		transform: translateY(-1.87em);
	}

	textarea.boxed_input:focus + label,
	textarea.boxed_input + label.freeze {
		transform: translateY(-1.70em);
	}

	textarea.double_boxed_input:focus + label,
	textarea.double_boxed_input + label.freeze {
		transform: translateY(-1.6em);
	}

textarea.desc_job,
textarea.desc_edu {
	min-height: 250px;
}

/* Breakpoints */

@media (max-width: 1550px) {

	.col-xl-4.creation_vessel_container {
		flex: 0 0 41.666667% !important;
		max-width: 41.666667% !important;
	}
}

@media (max-width: 1199.98px) {

	.container_fluid_create {
		padding: 0 30px;
	}
}

@media (max-width: 991.98px) {

	.col-xl-4.creation_vessel_container {
		flex: 0 0 58.333333% !important;
		max-width: 58.333333% !important;
	}
}

@media (max-width: 767.98px) {

	.col-xl-4.creation_vessel_container {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

		.names,
		.location,
		.dob,
		.contact,
		.image,
		.links,
		.jobs,
		.educations,
		.subject,
		.big_list,
		.small_list {
			margin-bottom: 17px;
		}

			.names h6,
			.location h6,
			.dob h6,
			.contact h6,
			.image h6,
			.links h6,
			.jobs h6,
			.education h6,
			.subject h6,
			.big_list h6,
			.small_list h6 {
				font-size: 20px;
				margin-top: 0;
			}

			.image_vessel {
				margin-bottom: 40px;
			}

	.jobs_vessel,
	.education_vessel,
	.subject_vessel,
	.big_list_vessel,
	.small_list_vessel {
		margin-bottom: 50px;
	}

	.small_list_vessel {
		margin-bottom: 17px;
	}

	.action_right {
		margin-bottom: 50px;
	}

	.error_left {
		display: none;
	}

	.create_error {
		margin-top: 32px;
	}
}

@media (max-width: 575.98px) {

	.create_header h3 {
		word-break: break-all;
	}

	.image_upload_vessel {
		font-size: 16px !important;
		padding: 15px 11px 11px;
	}

	.image_label,
	.creation_button,
	.error {
		font-size: 16px;
	}

	.image_label:before {
		margin-top: 0;
	}

	.creation_button_add:before {
		margin-top: 0;
	}

	.creation_button_next:before,
	.creation_button_back:before,
	.creation_button_done:before {
		margin-top: 1px;
	}
}

@media (max-width: 477px) {

	.image_label,
	.creation_button {
		font-size: 15px;
	}

	.image_label:before,
	.creation_button:before {
		display: none;
	}
}