/* FontFaces */
/* Globus */
@font-face {
    font-family: BlackBones;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Black-Bones.otf);
}

/* Roboto */
@font-face {
    font-family: Roboto-Black;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Roboto-Black.ttf);
}

@font-face {
    font-family: Roboto-Bold;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: Roboto-Light;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Roboto-Light.ttf);
}

@font-face {
    font-family: Roboto-Medium;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: Roboto-Thin;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/Roboto-Thin.ttf);
}

/* Roboto Condensed */
@font-face {
    font-family: RobotoCondensed-Bold;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoCondensed-Bold.ttf);
}

@font-face {
    font-family: RobotoCondensed-Light;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoCondensed-Light.ttf);
}

@font-face {
    font-family: RobotoCondensed-Regular;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoCondensed-Regular.ttf);
}

/* RobotoSlab */
@font-face {
    font-family: RobotoSlab-Bold;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoSlab-Bold.ttf);
}

@font-face {
    font-family: RobotoSlab-Light;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoSlab-Light.ttf);
}

@font-face {
    font-family: RobotoSlab-Medium;
    src: url(/UP/HPv3_staging/CompanyFiles/CompanyID_43/AnnonceTemplates/Azubi_2_print/fonts/RobotoSlab-Medium.ttf);
}

:root {
    /* color */
    --color_black: black;

    /* Primary */
    --color_FreshOrange: #ffa500;
    --color_ForestGreen: #00622c;
    --color_Zeltgrau: #585c56;

    /* Secondary */
    --color_SunnyYellow: #ffcc00;
    --color_AppleGreen: #afca0b;
    --color_SpringGreen: #009640;
    --color_TomatoRed: #e30613;
    --color_Steingrau: #928e85;
    --color_white: #fffefc;

    /* Acent */
    --color_SeaBlue: #6daaaa;
    --color_SkeyBlue: #4562ac;


    /* font-family */
    --font-family_root: "Roboto-Medium";
    --font-family_second-posting: "BlackBones";
    --font-family-bold: "Roboto-Bold";
    --font-family-black: "Roboto-Black";

    /* font-size */
    --font-size_root: 14px;
    --font-size-h1: 1.813em;
    --font-size_h3: 1.8em;
    --font-size-title-footer: 1.25em;
    --font-size-title-apply: 1.6em;
    --font-size_share_icons_a: 1.0em;
    --font-size-headerpostings: 3.5em;
    --font-size_content_li_before: 1.25em;
    --font-size_boxTitleInfo-li-before: 0.75em;
    --font-size-benefits: 0.875em;
    --font-size-benefits_slide: 1.6em;

    /* content */
    --li-content: '\2022';

    /* width, height */
    --max-width-annonce: 21cm;
    --max-height-annonce: 29.7cm;
    --max-width_benefits-item: 119px;
    --width_share-icon-li: 20px;
    --width-height_boxTitleInfo-apply: 140px;
    --width_height_benefits: 70px;
    --width_logo1-logo2: 100px;
    --width_logo3: 200px;
    --width_logo_ending: 100px;
    --width_qr-code: 80px;
}

/*##################### 
### beginn basic ###  
##################### 
  */
.annonce {
    background-color: var(--color_white);
    border: 1px solid var(--color_black);
    display: block;
    position: relative;
    width: var(--max-width-annonce);
    max-width: var(--max-width-annonce);
    height: auto;
    max-height: var(--max-height-annonce);
    margin: 0 auto;
    font-family: var(--font-family_root);
    font-size: var(--font-size_root);
    line-height: 1.4;
}

/* 
##################### 
### end basic ###### 
##################### 
  */

/* 
##################### 
### beginn header ### 
##################### 
  */
.annonce .header {
    width: 100%;
    position: relative;
}

.annonce .wrapper_header .wrapper_boxTitleInfo {
    margin-top: -40px;
    z-index: 10;
    position: relative;
    margin-left: 20px;
}

.annonce .header .boxImage {
    position: relative;
    display: block;
}

.annonce .header .boxImage .image {
    width: 100%;
}

.annonce .header .boxImage .image img {
    width: 100%;
    border-bottom-right-radius: 50%;
}

.annonce .header .boxImage .HeaderPostingFirst {
    position: absolute;
    top: 4%;
    left: 36%;
    color: var(--color_white);
    font-size: var(--font-size-headerpostings);
}

.annonce .header .boxImage .HeaderPostingFirst .team {
    font-weight: var(--font-family-bold);
}

.annonce .header .boxImage .HeaderPostingFirst .personal {
    color: var(--color_FreshOrange);
    font-weight: var(--font-family-bold);
}

.annonce .header .boxImage .HeaderPostingSecond {
    position: absolute;
    left: 36%;
    top: 23%;
    color: var(--color_white);
    font-family: var(--font-family_second-posting);
    font-weight: var(--font-family-bold);
    transform: rotate(-4.99997deg) scaleX(0.889271);
    font-size: var(--font-size-headerpostings);
}

.annonce .header .boxTitleInfo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: flex-start;
    margin-top: -70px;
    height: auto;  /* Bug-664  */
}

.annonce .header .boxTitleInfo .titleInfos {
    background-color: var(--color_ForestGreen);
    display: block;
    border-bottom-right-radius: 250px;
    border-top-right-radius: 250px;
    width: 70%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px 30px;
    margin-bottom: 15px;
}

.annonce .header .boxTitleInfo .titleInfos .title {
    color: var(--color_white);
    width: 100%;
}

.annonce .header .boxTitleInfo .titleInfos .title h1 {
    font-size: var(--font-size-h1);
    margin-bottom: 0;
    color: var(--color_FreshOrange);
}

.annonce .header .boxTitleInfo .titleInfos .info {
    color: var(--color_white);
    width: 100%;
    font-weight: var(--font-family-bold);
}

.annonce .header .boxTitleInfo .titleInfos .info ul li:empty {
    display: none;
}

.annonce .header .boxTitleInfo .titleInfos .info ul {
    list-style-type: disc;
    list-style: disc;
    padding-left: 0px;
}

.annonce .header .boxTitleInfo .titleInfos .info ul li {
    font-size: var(--font-size-title-footer);
    display: inline-block;
    list-style-type: disc;
    list-style: disc;
}

.annonce .header .boxTitleInfo .titleInfos .info ul li:before {
    content: var(--li-content);
    color: var(--color_white);
    font-size: var(--font-size_boxTitleInfo-li-before);
    display: inline-block;
    margin-right: 0px;
    margin-left: 5px;
    margin-top: -5px;
}

.annonce .header .boxTitleInfo .apply {
    background-color: var(--color_FreshOrange);
    height: var(--width-height_boxTitleInfo-apply);
    width: var(--width-height_boxTitleInfo-apply);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
}

.annonce .header .boxTitleInfo .apply a,
.annonce .header .boxTitleInfo .apply a:hover,
.annonce .header .boxTitleInfo .apply a:active,
.annonce .header .boxTitleInfo .apply a:visited {
    text-decoration: none;
    color: var(--color_Zeltgrau);
    font-size: var(--font-size-title-apply);
    font-weight: var(--font-family-black);
}

/* 
##################### 
### end header ###### 
##################### 
  */


/* 
##################### 
### beginn content ## 
##################### 
  */
.annonce .content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1.2em;
    padding-left: 5px;
    padding-right: 5px;
}

.annonce .content .caption {
    display: block;
}

.annonce .content h3 {
    font-size: var(--font-size_h3);
    font-weight: var(--font-family-bold);
    color: var(--color_Zeltgrau);
    display: block;
    margin-top: 0px;
    text-transform: none;
}

.annonce .content ul {
    padding-left: 0;
    margin-top: 0;
    margin-left: 0
}

.annonce .content ul li {
    list-style-type: none;
    margin-bottom: 5px;
    padding-left: 20px;
    text-indent: -16px;
}

.annonce .content li:before {
    content: var(--li-content);
    color: var(--color_FreshOrange);
    font-size: var(--font-size_content_li_before);
    margin-right: 10px;
}

.annonce .content .weoffer,
.annonce .content .profile,
.annonce .content .tasks,
.annonce .content .team {
    padding-left: 5px;
}


.annonce .content .leftColumn,
.annonce .content .rightColumn {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
    flex: 1;
}

/* 
##################### 
### end content #####
##################### 
  */

/* 
##################### 
### beginn benefits # 
##################### 
  */
.annonce .benefits {
    padding: 0px;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

.annonce .benefits .slide-left,
.annonce .benefits .slide-right {
    color: var(--color_SpringGreen);
    height: var(--width_height_benefits);
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: var(--font-size-benefits_slide);
    cursor: pointer;
}

.annonce .benefits .slide-right {
    margin-right: 0;
    margin-left: 20px;
}

.annonce .benefits .items {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    max-width: 100%;
}

.annonce .benefits .item {
    background-color: var(--color_ForestGreen);
    font-size: var(--font-size-benefits);
    color: var(--color_white);
    font-weight: var(--font-family-bold);
    padding-left: 10px;
    padding-right: 10px;
    display: inline-flex;
    align-items: center;
    height: var(--width_height_benefits);
    width: 100%;
    max-width: var(--max-width_benefits-item);
    margin-right: 14px;
    position: relative;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    flex-shrink: 0;
    box-sizing: unset;
}

.annonce .benefits .item:after {
    content: '';
    display: none;
    width: var(--width_height_benefits);
    height: var(--width_height_benefits);
    border-radius: 50%;
    background-color: var(--color_ForestGreen);
    position: absolute;
    right: -30px;
}

/* 
##################### 
### end benefits #### 
##################### 
  */

/* 
##################### 
### beginn ending ### 
##################### 
  */
.annonce .ending {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
    align-items: flex-end;
}

.annonce .ending .contact {
    width: 85%;
}

.annonce .ending .logo img {
    max-width: var(--width_logo_ending);
    min-width: var(--width_logo_ending);
    width: var(--width_logo_ending);
}


/* 
##################### 
### end ending ###### 
##################### 
  */

/* 
##################### 
### beginn footer ###
##################### 
  */
.annonce .footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    margin: 2em 0;
}


.annonce .footer .logo1,
.annonce .footer .logo2,
.annonce .footer .logo3 {
    padding: 10px;
}


.annonce .footer .logo1 img,
.annonce .footer .logo2 img {
    max-width: var(--width_logo1-logo2);
    min-width: var(--width_logo1-logo2);
    width: var(--width_logo1-logo2);
}

.annonce .footer .logo3 img {
    max-width: var(--width_logo3);
    min-width: var(--width_logo3);
    width: var(--width_logo3);
}



/* 
##################### 
### end footer ###### 
##################### 
  */

/* 
##################### 
### additionals #####
##################### 
*/

.annonce .content,
.annonce .benefits,
.annonce .ending {
    padding-left: 20px;
    padding-right: 20px;
}

.download-joboffer {
    display: none;
}

.wrapper_share-icons {
    background-color: var(--color_ForestGreen);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.wrapper_share-icons span {
    color: var(--color_white);
    font-size: var(--font-size_root);
    padding-left: 60px;
}

.share-icons {
    display: none;
}

.qr-code {
    width: var(--width_qr-code);
}

/* ## Editor Changes ## */
.bg-editable .edit-bg-color i.fa,
.bg-editable main.editable .fa,
.editable i.fa {
    color: black;
    background-color: white;
}

.row h3 {
    text-transform: unset;
}

body > #cookie-info-modal {
	font-family: Roboto-Medium;
    color: #585c56;
    font-size: 16px;
    word-wrap: break-word;
    width: 97%
}

#cookie-info-modal .action-buttons .button-group a {
    display: block;
    margin-bottom: .5em;
}

#cookie-info-modal .action-buttons .cookie-info-button {
    margin-left: 1em;
}

#cookie-info-modal .info-content a {
    color: var(--color_FreshOrange);
    text-decoration: none;
}

#cookie-info-modal .button {
    border: none;
    font-size: 16px;
    margin-top: 1em;
    background-color: var(--color_FreshOrange);
    color: #fffefc;
    border-radius: 4px;
    line-height: 16px;
    padding: 9px 24px;
    text-decoration: none;
}