body{
	background-image: url("AppCover.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
}

.registration {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	background-color: rgba(30,9,58,0.60);
	width: 80%;
	box-shadow: 5px 5px 10px #545454;
	border-radius: 10px;
}

.registration_container {
	display: flex;
	min-height: 600px;
	background-color: rgba(94,66,92,0.66);
}

.registration_image {
	background-image: url("SheepHead-New-Vector.png");
	background-size: cover;
	background-position: center;
	display: none;
	flex-basis: 40%;
	position: relative;
}

@media (min-width: 768px) {
	.registration_image {
		display: block;
	}
}

@media (max-width:576px) {
.registration {
	transform: translate(-50%, -40%);
	}
}

@media screen and (max-width: 480px){
	.registration {
		transform: translate(-50%, -20%);
		margin-bottom: -10px;
		padding-left: 0px;
		padding-right: 0px;
	}	
}

.registration_image .title {
	colour: #fff;
	font-size: 70px;
	position: absolute;
	top: 100px;
	left: 20px;
}

.registration_image .site {
	color: #fff;
	position: absolute;
	bottom: 10px;
	left: 20px;
	font-size: 14px;
}

.registration_image .overlay {
	background-color:  rgba(0,0,0,0.10);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.registration_form {
	padding: 60px 15px;
}

@media (min-width: 768px) {
	.registration_form {
		padding: 60px;
		flex-basis: 60%;
	}
}

.registration_form .title {
	color: #ffff;
	margin-bottom: 50px;
	position: relative;
}

.registration_form .title::before {
	content: '';
	border-bottom: 3px solid #212529;
	position: absolute;
	bottom: -8px;
	width: 20%;
	border-radius: 5px;
}

.registration_form .form-label,
.registration_form .form-check-label {
	color: #fff;

}

.registration_form .form-control {
	background-color: rgba(243,236,237,0.50);
	color: #fff;
	border: 1px solid #fff;
}

/* The alert message box */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.registration_form .help-block {
	color: antiquewhite;
	background-color: crimson;
}