body{
overflow: auto;
background: white;
}

/* ***************** PRELOADER ******************* */
#bg{
background: transparent linear-gradient(
180deg
,#053354 0,#006aa5 100%) 0 0 no-repeat padding-box;
}
#loader {
position: absolute;
left: 45%;
top: 40%;
z-index: 1;
width: 30px;
height: 30px;
border: 16px solid #053354;
border-radius: 50%;
border-top: 16px solid #11e2e2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}

@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
/********************** content ****************************/

.content-block h1{
text-align: center;
color: white;
z-index: 1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
padding-left: 22px;
padding-right: 22px;
}

.content-block2{
height: fit-content;
margin: auto;
padding-left: 50px;
padding-right: 70px;
}

.content-block2 #block{
margin: auto;
height: fit-content;
position: relative;
padding: 30px;
padding-top: 1px;
}

.box{
width: 100%;
font-family: 'Roboto', sans-serif;
background-color: white;
border-radius: 4px;
font-weight: normal;
}

.box h2{
font-family: 'Roboto', sans-serif;
}

.row-details{
margin-left: -15px;
margin-right: -15px;
}

.job-panel{
padding: 35px 0;
/* padding: 25px 0; */
border-top: 2px solid #006aa5;
}

.box p {
font-family: Arial, sans-serif;
line-height: 30px;
word-spacing: 3px;
letter-spacing: 0.2px;
margin: auto;
font-family: "Gill Sans", sans-serif;
color: rgb(45, 81, 88);
}

.button{
border: none;
color: #006aa5;
background-color: transparent;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}

.button:hover{
color: #13445e;
border: white solid 1px;
}
.col-4{
    text-align: center;
}

@media (min-width: 1201px) {
.row-details{
	height: 30px;
}
.col{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-1{
width: 25%;

}
.col-2{
width: 25%;
}
.col-3{
width: 29.333333%;

}
.col-4{
width: 9%;
}
.col-1, .col-2, .col-3, .col-4{
float: left;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1200px){
.row-details{
	height: 30px;
}	
.col{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-1{
width: 25%;

}
.col-2{
width: 25%;
}
.col-3{
width: 27.333333%;

}
.col-4{
width: 10%;
}
.col-1, .col-2, .col-3, .col-4{
float: left;
}
}
@media screen and (max-width: 1024px) {
.content-block2 #block {
padding: 0;
}
.content-block2 {
height: max-content;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
.button{
padding-left: 7px;
padding-right: 7px;
}

.col{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-1{
width: 25%;

}
.col-2{
width: 20%;
}
.col-3{
width: 23%;

}
.col-4{
width: 14%;
}
.col-1, .col-2, .col-3, .col-4{
float: left;
}
}
@media only screen   and (max-width: 1024px)  and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.row-details{
	height: 80px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.row-details{
		height: 80px;
	}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 240px) and (max-device-width : 480px) {
.table-heading{
display: none;
}
.row-details{
display: grid;
}

br{
    display: none;
}
.col-1{
width: 100%;
padding-right: 0;
}
.col-2{
width: 100%;
padding-right: 0;
}
.col-3{
width: 100%;
padding-right: 0;
}
.col-4{
width: 100%;
padding-right: 0;
}
}

@media only screen and (min-device-width : 540px) and (max-device-width : 720px) {
.table-heading{
display: none;
}
.row-details{
height: 80px; 
}
.col-1{
    width: 100%;
    padding-right: 0;
    }
    .col-2{
    width: 100%;
	padding-right: 0;
    }
    .col-3{
    width: 100%;
    padding-right: 0;
    }
    .col-4{
    width: 100%;
	padding-right: 0;
    }
}

/*********Pagination  ***********/

.pagenumbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
	margin-top: 20px;
}

.pagenumbers button {
	width: 30px;
	height: 30px;

	appearance: none;
	border: none;
	outline: none;
	cursor: pointer;

	/* background-color: #44AAEE; */
	background-color: transparent;

	margin: 5px;
	transition: 0.4s;

	color: #FFF;
	color: black;

	font-size: 18px;
	/* text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); */
	/* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); */
}

.pagenumbers button:hover {
	background-color: #006aa5;
}

.pagenumbers button.active {
	background-color: #006aa5;
	box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
	color: #FFF;
}