/*--------- Inserate Layout----------*/
/*-----------------------------------*/
/*------------12.09.2023-------------*/
/*---------Umantis---mle-------------*/
/*-----------------------------------*/
/*************Fonts**************/
/********************************/
/* @font-face {
font-family: '';
src: url("") format("truetype");
font-weight: 400;
} */
body, h1, h2, h3, h4, h5, h6, p, a, button {
font-family: 'Libre Franklin', Arial, Helvetica, Verdana, Geneva, sans-serif !important;
color: #002060;
text-align-last: none;
hyphens: auto;
}
h1 {
font-size: 40px !important;
}
/*Header Banner*/
/***************/
.header {
position: relative;
max-height: 525px;
overflow: hidden;
}
.headerimagecontainer {
background-color: #009dd2;
}
#headerArea {
background-color: #009cd2;
}
#headerImage {
max-width: 70%;
height: auto;
}
/***********Body***********/
/**************************/
body {
box-shadow: -1px 11px 8px 1px #888888;
overflow-x: hidden !important;
margin-bottom: 4em !important;
}
.jobInformationContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
row-gap: 1rem;
}
/*Job Short Facts - Bullet Points*/
.jobBulletPoints > div {
display: flex;
flex-direction: row;
gap: 1em;
padding: 0px;
}
.jobBulletPoints img {
width: 2em;
height: auto;
}
.jobBulletPoints h5 {
margin: 0;
text-align: left;
font-size: 20px;
}
/*Job Description: Tasks, Profile, Benefits & About us*/
.jobDescription div {
/* border: 2px solid #2f528f; */
border: 2px solid #d9d9d9;
position: relative;
}
.jobDescription h5 {
background-color: #002060;
display: inline-flex;
position: relative;
left: 0.2em;
top: -0.7em;
padding: 10px 15px;
color: white;
font-weight: bold;
/* width: 22em; */
width: auto;
}
.jobDescription p {
padding-left: 2rem !important;
}
.jobDescription li {
color: #183362;
}
.jobDescription ul {
list-style-type: square;
}
/*Bewerben Button*/
#staticApplyBox {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
div#staticApplyBox, #staticApplyBox h6, #staticApplyBox p {
font-size: small;
word-break: keep-all;
}
.contactAndMediaContainer, .contactAndMediaContainer p {
font-size: small;
}
#staticApplyBox h5, .contactAndMediaContainer h5 {
font-size: 16px;
}
.applyBox, .contactAndMediaContainer {
background-color: #00b0f0;
border: 2px solid #2f528f;
}
#stickyApplyBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 2em;
}
.applyBox > *,
.contactAndMediaContainer > * {
text-align: center;
}
.rightSide h5 {
font-weight: 700;
}
.rightSide h6,
.rightSide p {
color: white;
}
#applyButton1, #applyButton2 {
background-color: #ffffff;
color: #00b0f0;
border-radius: 25px;
border: 1px solid #2f528f;
padding: 8px 16px;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
#applyButton1:hover, #applyButton2:hover {
background-color: #002060;
color: white;
}
#mailContactButton {
background-color: #00b0f0;
color: white;
border-radius: 25px;
border: 1px solid #ffffff;
padding: 8px 16px;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
#mailContactButton:hover {
background-color: #002060;
color: white;
}
i.applyButtons {
color: white;
transition: color 0.3s ease-in-out;
}
i.applyButtons:hover {
color: #2f528f;
}
#socialMediaContainer i {
color: white;
}
.socialMediaIcons {
width: 25px;
height: auto;
}
#jobMarketLink,
#mailLink, #telLink
{
color: white !important;
}
#mailLink, #telLink {
text-decoration: none;
}
#mailLink:hover, #telLink:hover {
text-decoration: underline;
}
.modal-content i {
color: #002060 !important;
}
#share-btn {
border: none;
background-color: transparent;
}
#share-btn i {
color: white;
transition: color 0.3s ease-in-out;
}
#share-btn i:hover {
color: #2f528f;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: none;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #ffffff !important;
margin: auto;
padding: 20px;
width: 20em !important;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
align-items: center;
}
.modal-content h5 {
color: #002060 !important;
}
.modal a {
font-family: 'GoetheFFBook', Arial, sans-serif !important;
font-size: 16pt;
font-weight: bold;
text-decoration: none;
color: #002060 !important;
}
.modal a img {
/* SCALE */
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
/* VERZÖGERUNG */
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.modal a:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.modal ul li::marker{
content: "";
}
::marker {
color: #00b0f0;
}
.modal ul li {
padding-left: 0 !important;
align-self: center;
margin: 0.8em 0;
}
.modal ul {
padding-left: 0 !important;
}
.modal ul i::before {
margin-right: 1.3em;
width: 0.5em;
display: inline-block;
}
.close-btn {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
align-self: flex-start;
}
.close-btn:hover,
.close-btn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.close-btn h5 {
color: #00b0f0;
align-self: center;
margin-bottom: 1em;
}
#socialMediaContainer a{
color: #ffffff;
transition: color 0.2s ease-in-out;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: center;
}
.socialmedia-icon {
width: 60px;
padding: 15px;
/* SCALE */
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
/* VERZÖGERUNG */
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.socialmedia-icon:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.socialmedia-box-icon {
width: 60px;
padding: 15px;
}
/*Footer*/
footer {
}
/*Responsive Design*/
/*******************/
/*Large Screen Size*/
@media only screen and (max-width: 1400px) {}
/*Mid Screen Size*/
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 991px) {
.jobBulletPoints > div {
padding: 0px 2em;
}
}
/*Tablet Screen Size*/
@media only screen and (max-width: 768px) {
iframe {
height: 400px;
}
.jobDescription h5 {
/* width: 15em; */
width: auto;
}
.jobDescription h5 {
top: -1.7em;
}
.jobAboutUs h5 {
top: -1.1em;
}
.jobDescriptionContainer > :nth-child(2) {
margin-top: -2em;
}
h1 {
font-size: 26px !important;
line-height: 35px;
}
}
/*Mobile Screen Size*/
@media only screen and (max-width: 425px) {
.benefit {
flex-basis: 50%;
}
.benefit p {
width: 120px;
}
iframe {
height: 350px;
}
.jobDescription h5 {
/* width: 100%; */
width: auto;
left: 0;
}
.jobBulletPoints h5 {
font-size: 18px;
}
#stickyApplyBox h5 {
font-size: smaller;
}
.jobDescription h5 {
font-size: 16px;
}
.jobDescriptionContainer > :nth-child(2) {
margin-top: -1.5em;
}
#headerImage {
max-width: 90%;
}
.diversityPassus p {
font-size: 14px;
}
}
@media only screen and (max-width: 320px) {
.benefit p {
width: 100px;
}
}
@media print {
body {
max-width: fit-content !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
#googleMapsContainer,
.headerImageContainer,
.applyButtonContainer,
#socialMediaContainer,
.applyBox, .contactAndMediaContainer {
display: none !important;
}
}