/* career page */

section.career {

}

section.career .toparea{
	position: relative;
	width: 100%;
	/*height: 100vh;*/
	min-height: 90vh;
	max-width: 100%;
	max-height: 300vh;
	/*overflow: auto;*/

	background: #265999 url("../images/careerbg.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border-radius: 0 0 31px 31px;
	background-blend-mode: luminosity;

	&:after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(25, 52, 84, 0.7);
		height: 100%;
		width: 100%;
		z-index: 1;
		border-radius: 0 0 31px 31px;
	}
}

section.career .toparea h1 {
	font-size: 50px;
	padding: 180px 250px 0 250px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	z-index: 2;
	position: relative;
}

section.career .toparea h1 a{
	color: #fff;
	text-decoration: none;
}

section.career .toparea .topbutton {
	z-index: 2;
	position: relative;
	margin-top: 40px;
}

section.career .toparea .topbutton a {
	font-size: 20pt;
	padding: 15px 85px;
	border-radius: 11px;
}




section.career .middlearea{
	margin: 70px 150px;
	position: relative;
	line-height: 1.5;

	
}

section.career .middlearea .middledata {
	position: relative;
	
}

section.career .middlearea .middledata h3{
	color: #4e4e4e;	
	font-size: 20pt;
	font-weight: 700;
	padding: 35px 0 15px;
}

section.career .middlearea .middledata p{	
	color: #4e4e4e;
	font-size: 20pt;
	padding: 20px 0;
	margin: 0;
}

section.career .middlearea .middledata p strong {
	margin-right: 10px;
}

section.career .middlearea .middledata p:nth-child(1),
section.career .middlearea .middledata p:nth-child(2),
section.career .middlearea .middledata p:nth-child(3),
section.career .middlearea .middledata p:nth-child(4) {
	padding: 0;
}

section.career .middlearea .middledata p:nth-child(4) {
	padding-bottom: 20px;
}

section.career .middlearea .middledata ul {
	margin: 20px 0;
}

section.career .middlearea .middledata ul li {
	color: #4e4e4e;
	font-size: 20pt;
}

section.career .middlearea .middledata > div {
	background-color: #efefef;
	border-radius: 17px;
	padding: 45px 80px;
	margin-top: 20px;
}

section.career .middlearea .middledata > div span {
	display: block;
	color: #4e4e4e;
	font-size: 20pt;	
}

section.career .middlearea .middledata > div span strong {
	display: inline-block;
	width: 200px;
	margin-right: 150px;

}

section.career .bottombutton {
	margin: 0 0 80px 0;
}

section.career .bottombutton .btn-primary {
	--bs-btn-bg: #265999;
	--bs-btn-active-color: #f1fab6;
	--bs-btn-color: #f1fab6;
	font-size: 26px;
	padding: 15px 85px;
	border-radius: 11px;
}

#formModal .modal-dialog {
	--bs-modal-width: 98%;
	--bs-modal-margin: 1rem;
	--bs-modal-border-radius: 31px;
}

#formModal .modal-content {
	background-color: #4f4f4f;
}

#formModal .modal-header {
	
}


#formModal .modal-header h4.modal-title  {
	font-size: 30pt;
	font-weight: 700;
	width: 100%;
	text-align: center;
	color: #fff;
}

#formModal .modal-header .btn-close,
#formModal .modal-footer .btnclose {
	filter: brightness(0) invert(1);
}

#formModal .modal-footer .btnclose:hover {
	background-color: transparent;
	font-weight: 700;
}

#formModal .modal-body .container-fluid {
	padding-right: calc(var(--bs-gutter-x) * 8.5);
	padding-left: calc(var(--bs-gutter-x) * 8.5);
}

#formModal .modal-body .container-fluid form label.form-label{
	color: #fff;
	font-size: 20pt;
	line-height: 1.3;
}

#formModal .modal-body .container-fluid form label.form-check-label{
	color: #fff;
	font-size: 16pt;
	line-height: 1.3;
}

.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {
	color: var(--bs-form-invalid-color) !important;
}

#formModal .modal-body .container-fluid form label.form-label sup {
	color: #ff0000;
	font-size: 18px;
}

#formModal .modal-body .container-fluid form .form-control,
#formModal .modal-body .container-fluid form .form-select,
#formModal .modal-body .container-fluid form button.multiselect 
{
	padding: .75rem;
	border-radius: 15px;
}

#formModal .modal-body .container-fluid form span.help-block{
	display: block;
	font-size: 12px;
	color: #8cbdfb;	
}

#formModal .modal-body .container-fluid form .multiselect-container label{
	color: #000;
	font-size: 16px;
}

#formModal .modal-body .container-fluid form .multiselect .multiselect-selected-text {
	display: inline-block;
	text-align: left;
	width: 98%;
}

#formModal .modal-body .container-fluid form .multiselect-native-select .dropdown-toggle::after {
	display: inline-block;
	/*margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;*/
}

#formModal .modal-body .container-fluid form .text_title h2{
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 26pt;
}

#formModal .multiselect-native-select .btn-group {
	display: flex;
}


@media only screen and (min-width:320px) and (max-width : 480px) {

	section.career .toparea{

		min-height: 60vh;
		max-width: 100%;
		max-height: 60vh;

		border-radius: 0 0 31px 31px;
	}

	section.career .toparea h1 {
		font-size: 30px;
		padding: 105px 20px 0 20px;
	}
	

	section.career .toparea .topbutton {
		z-index: 2;
		position: relative;
		margin-top: 40px;
	}

	section.career .toparea .topbutton a {
		font-size: 18pt;
		padding: 10px 35px;
	}

	section.career .middlearea{
		margin: 50px 20px;
	}

	section.career .middlearea .middledata {
		position: relative;

	}

	section.career .middlearea .middledata h3{		
		font-size: 20pt;
		padding: 10px 0 0;
	}

	section.career .middlearea .middledata p{		
		font-size: 16pt;
		padding: 20px 0;
		margin: 0;
	}

	section.career .middlearea .middledata ul li {		
		font-size: 16pt;
	}

	section.career .middlearea .middledata > div {
		padding: 20px;
	}

	section.career .middlearea .middledata > div span {
		font-size: 16pt;
	}	
	
	section.career .bottombutton {
		margin: 0 0 80px 0;
	}

	section.career .bottombutton .btn-primary {		
		font-size: 18pt;
		padding: 10px 35px;
	}
	
	#formModal .modal-dialog {
		--bs-modal-width: 98%;
		--bs-modal-margin: 0.5rem 0;
		--bs-modal-border-radius: 31px;
	}

	#formModal .modal-content {
		background-color: #4f4f4f;
		width: 98%;
	}

	#formModal .modal-header {

	}


	#formModal .modal-header h4.modal-title  {
		font-size: 18pt;
		width: 100%;
	}

	

	#formModal .modal-body .container-fluid {
		padding-right: 0;
		padding-left: 0;
	}

	#formModal .modal-body .container-fluid form label.form-label{
		color: #fff;
		font-size: 14pt;
		line-height: 1.3;
	}

	#formModal .modal-body .container-fluid form label.form-check-label{
		color: #fff;
		font-size: 14pt;
		line-height: 1.3;
	}

	#formModal .modal-body .container-fluid form label.form-label sup {
		color: #ff0000;
		font-size: 14px;
	}

	#formModal .modal-body .container-fluid form .form-control,
	#formModal .modal-body .container-fluid form .form-select,
	#formModal .modal-body .container-fluid form button.multiselect
	{
		padding: .75rem;
		border-radius: 15px;
	}

	#formModal .modal-body .container-fluid form span.help-block{
		display: block;
		font-size: 12px;
		color: #8cbdfb;
	}

	#formModal .modal-body .container-fluid form .multiselect-container label{
		color: #000;
		font-size: 16px;
	}

	#formModal .modal-body .container-fluid form .text_title h2{
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 26pt;
	}


}

@media screen and (min-width:320px) and (max-width:950px) and (orientation:landscape) {

	section.career .toparea{

		min-height: 90vh;
		max-width: 100%;
		max-height: 90vh;

		border-radius: 0 0 31px 31px;
	}

	section.career .toparea h1 {
		font-size: 30px;
		padding: 105px 20px 0 20px;
	}


	section.career .toparea .topbutton {
		z-index: 2;
		position: relative;
		margin-top: 40px;
	}

	section.career .toparea .topbutton a {
		font-size: 18pt;
		padding: 10px 35px;
	}

	section.career .middlearea{
		margin: 50px 20px;
	}

	section.career .middlearea .middledata {
		position: relative;

	}

	section.career .middlearea .middledata h3{
		font-size: 20pt;
		padding: 10px 0 0;
	}

	section.career .middlearea .middledata p{
		font-size: 16pt;
		padding: 20px 0;
		margin: 0;
	}

	section.career .middlearea .middledata ul li {
		font-size: 16pt;
	}

	section.career .middlearea .middledata > div {
		padding: 20px;
	}

	section.career .middlearea .middledata > div span {
		font-size: 16pt;
	}
	
	section.career .middlearea .middledata > div span strong {
		width: 100px;
	}	

	section.career .bottombutton {
		margin: 0 0 80px 0;
	}

	section.career .bottombutton .btn-primary {
		font-size: 18pt;
		padding: 10px 35px;
	}

	#formModal .modal-dialog {
		--bs-modal-width: 98%;
		--bs-modal-margin: 0.5rem 0;
		--bs-modal-border-radius: 31px;
	}

	#formModal .modal-content {
		background-color: #4f4f4f;
		width: 100%;
	}

	#formModal .modal-header {

	}


	#formModal .modal-header h4.modal-title  {
		font-size: 18pt;
		width: 100%;
	}



	#formModal .modal-body .container-fluid {
		padding-right: 0;
		padding-left: 0;
	}

	#formModal .modal-body .container-fluid form label.form-label{
		color: #fff;
		font-size: 14pt;
		line-height: 1.3;
	}

	#formModal .modal-body .container-fluid form label.form-check-label{
		color: #fff;
		font-size: 14pt;
		line-height: 1.3;
	}

	#formModal .modal-body .container-fluid form label.form-label sup {
		color: #ff0000;
		font-size: 14px;
	}

	#formModal .modal-body .container-fluid form .form-control,
	#formModal .modal-body .container-fluid form .form-select,
	#formModal .modal-body .container-fluid form button.multiselect
	{
		padding: .75rem;
		border-radius: 15px;
	}

	#formModal .modal-body .container-fluid form span.help-block{
		display: block;
		font-size: 12px;
		color: #8cbdfb;
	}

	#formModal .modal-body .container-fluid form .multiselect-container label{
		color: #000;
		font-size: 16px;
	}

	#formModal .modal-body .container-fluid form .text_title h2{
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 26pt;
	}

}