.resume {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px 35px 35px 35px;
  background-color: #5085fe;
  width: 100%;
}

.vacancy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px 35px 35px 35px;
  background-color: white;
  width: 100%;
}

.vacancy-button {
	display: inline-block;
	text-align: center;
	width: 30%;
	vertical-align: middle;
}

.detail {
    display: flex;
	justify-content: flex-start;
	width: 40%;
	padding-bottom: 2%;
}

.upload-resume {
	display: inline-block;
	background-color: white;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 10px 1px white;
	color: black;
	font-size: 15px;
	border: none;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

.upload-vacancy {
	display: inline-block;
	background-color: #4855B7;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 10px 1px #7584F2;
	color: white;
	font-size: 15px;
	border: none;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

.upload-resume:hover {
	background-color: white;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 20px 1px white;
	color: black;
	font-size: 15px;
	border: none;
	text-decoration: none;
}

.upload-vacancy:hover {
	background-color: #7584F2;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 20px 1px #7584F2;
	color: white;
	font-size: 15px;
	border: none;
	text-decoration: none;
}

.upload-resume:active {
		background-color: white;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 10px 1px white;
	color: black;
	font-size: 15px;
	border: none;
}

.detail-button {
	background-color: #4855B7;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 10px 1px #7584F2;
	color: white;
	font-size: 1.2rem;
	font-weight: 600;
	border: none;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

.detail-button:hover {
	background-color: #4855B7;
	width: 200px;
	height: 50px;
	border-radius: 50px;
	box-shadow: 0 0 10px 1px #7584F2;
	color: white;
	font-size: 1.2rem;
	font-weight: 600;
	border: none;
	text-decoration: none;
}

.resume-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.vacancy-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.resume-card {
    display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
    width: 70%;
    background-color: #bbd0ff;
    box-shadow: 5px 5px 30px 1px #3c64be;
    padding: 15px;
	margin: 20px;
}

.resume-card:hover {
    background-color: white;
}

.resume-card-input {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 2%;
}

.resume-card-name {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 70%;
}

.resume-card-name p {
	font-size: 1rem;
	color: black;
}

.resume-icon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	width: 30%;
}

.vacancy-img {
	display: flex;
	flex-direction: row;
	width: 30%;
	justify-content: center;
}

.resume-img {
	display: inline-block;
	width: 30%;
	vertical-align: middle;
	text-align: center;
}

.resume-about {
	display: inline-block;
	width: 40%;
	vertical-align: middle;
	text-align: center;
}

.resume-button {
	display: inline-block;
	width: 30%;
	vertical-align: middle;
	text-align: center;
}

.vacancy-about {
	display: inline-block;
	width: 40%;
	text-align: center;
	vertical-align: middle;
}

.vacancy-about h3{
	color: #4855B7 !important;
}

.resume-title h1, h3{
	color: white !important;
}

.resume-img img {
	max-width: 100%;
	display: inline-block;
}


@media (max-width: 991px) {

	.resume-about h1 {
		font-size: 30px;
	}

	.resume-about h3 {
		font-size: 22px;
	}

	.vacancy-about h1 {
		font-size: 30px;
	}

	.vacancy-about h3 {
		font-size: 22px;
	}

	.resume-card-name h2 {
		font-size: 20px;
	}

	.vacancy, .resume {
		padding: 20px;
	}

	.vacancy-title, .resume-title {
		text-align: center;
	}

	.upload-resume, .upload-vacancy {
		width: 100%;
	}

	.resume-button, .vacancy-button {
		display: block;
		margin: 25px auto 0;
		width: 70%;
	}

	.resume-about, .vacancy-about {
		width: 70%;
	}

	.resume-card {
		width: 80%;
	}

	.detail {
		width: 50%;
	}

}

@media (max-width: 500px) {

	.vacancy, .resume {
		padding: 10px;
	}

	.resume-about h1 {
		font-size: 26px;
	}

	.resume-about h3 {
		font-size: 16px;
	}

	.vacancy-about h1 {
		font-size: 16px;
	}

	.resume-card-name h2 {
		font-size: 16px;
	}

	.resume-icon {
		width: 25%;
	}

	.resume-card-name {
		width: 65%;
	}

	.resume-card {
		width: 100%;
	}

	.detail {
		width: 70%;
	}

}