/*
Theme Name: [metary] | ResilientGroup
Theme URI: https://www.metary.de/
Author: Goran Peric
Author URI: mailto:support@metary.de
Description: Kundenspezifisches Theme zum Verwalten der Webseite
Version: 0.2.0
Text Domain: resilientgroup
Tags:
*/

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### General Definitions */

@font-face {
    font-family: 'IBMPlexSans-Light';
    src: url("./assets/fonts/IBMPlexSans/IBMPlexSans-Light.ttf") format("truetype");
}
@font-face {
    font-family: 'IBMPlexSans-Regular';
    src: url("./assets/fonts/IBMPlexSans/IBMPlexSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: 'IBMPlexSans-Bold';
    src: url("./assets/fonts/IBMPlexSans/IBMPlexSans-Bold.ttf") format("truetype");
}
@font-face {
    font-family: 'IBMPlexSans-SemiBold';
    src: url("./assets/fonts/IBMPlexSans/IBMPlexSans-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: 'IBMPlexSans-Medium';
    src: url("./assets/fonts/IBMPlexSans/IBMPlexSans-Medium.ttf") format("truetype");
}

:root {
    --bodyfontsize: 20px;
    --bodylineheight: 34px;
    --mainfontfamily: 'IBMPlexSans-Regular';
    --mainstrongfontfamily: 'IBMPlexSans-Bold';
    --mainfontcolor: #1D1D1D;

    --rg_green: #15A9B5;
    --rg_blue: #002D40;
    --white: #fff;
}

html { padding: 0; margin: 0; position: relative; }
body { padding: 0 0 0 300px !important; margin: 0; min-height: 100vh; color: var(--mainfontcolor) !important; transition: padding 1s;
    font-family: var(--mainfontfamily) !important; font-size: var(--bodyfontsize) !important; line-height: var(--bodylineheight) !important;; }

img { width: auto !important; max-width: 100% !important; height: auto !important; }

a { color: var(--rg_green) !important; text-decoration: none !important; }
a:hover { color: var(--rg_green) !important; text-decoration: underline; cursor: pointer; }

p, .accordion-body { text-align: justify; }
strong { font-family: var(--mainstrongfontfamily); }

h1, .h1 { color: #002D40 !important; font-family: "IBMPlexSans-Regular" !important; letter-spacing: 1px; }
h2, .h2 { color: #002D40 !important; font-family: "IBMPlexSans-Medium" !important; letter-spacing: 1px; }

main ul { margin: 0 !important; padding: 0 !important; list-style-type: none; }
main ul li { margin: 0; padding: 0 0 1rem 20px !important; position: relative; }
main ul li:before { font-family: 'Font Awesome 5 Pro'; content: '\f111'; color: #15A9B5; position: absolute; left: 0; top: 1px; font-size: 12px; }

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* Header Definitions */

#d_sidebar { display: block; position: fixed; z-index: 100; left: 0; height: 100vh; width: 300px; background-color: #001E2B !important; overflow-y: auto; transition: left 1s; }
#d_sidebar ._menu { display: block; width: 240px; margin: 0 auto; padding: 0; }

#menu-header-menue, #menu-header-menue li { display: block; padding: 0; margin: 0; list-style-type: none; }
#menu-header-menue li { border-bottom: 1px solid rgba(218, 237, 243, 0.25) !important; }
#menu-header-menue li a { display: block; width: 100%; padding: 1rem 0; margin: 0; color: var(--white) !important; font-family: 'IBMPlexSans-Light'; text-transform: uppercase; font-size: 18px !important; line-height: 18px !important; transition: all 0.5s !important; }
#menu-header-menue li a:hover, #menu-header-menue li.current-menu-item a { color: var(--rg_green) !important; font-family: 'IBMPlexSans-Regular'; }

#d_sidebar ._logo a { max-width: 90%; margin: 0 auto; padding-top: 10%}
#d_sidebar ._social a { display: inline-block; width: 40px; height: 40px; margin: 0 5px; color: rgba( 255, 255, 255, 0.5 ) !important; transition: all 0.5s; border-radius: 50px; }
#d_sidebar ._social a ion-icon { height: 40px; }
#d_sidebar ._social a:hover { color: var(--rg_green) !important; background-color: var(--white) !important; }

.menu-footer-menue-container, .menu-footer-menu-en-container { display: table; margin: 0 auto !important;}
#menu-footer-menue, #menu-footer-menu-en, #menu-footer-menue li, #menu-footer-menu-en li { display: block; padding: 0; margin: 0 auto; list-style-type: none; }
#menu-footer-menue li, #menu-footer-menu-en li { float: left; padding: 0 0.5rem; }
#menu-footer-menue li a, #menu-footer-menu-en li a { display: table; width: 100%; padding: 0; margin: 0; color: rgba( 255, 255, 255, 0.5) !important; font-family: 'IBMPlexSans-Light'; font-size: 15px !important; line-height: 15px !important; transition: all 0.5s !important; }
#menu-footer-menue li a:hover, #menu-footer-menu-en li a:hover { color: rgba( 255, 255, 255, 1) !important; }

header { position: fixed !important; top: -100px; z-index: 999999; width: 100%; display: block; min-height: 50px; background-color: #001E2B; transition: all 0.5s;}
header .openMenu { position: absolute; text-align: center; width: 40px; height: 40px; left: 1rem; top: 50%; transform: translateY(-50%); }
header .openMenu ion-icon { display: none; color: var(--white) !important; width: 40px; height: 40px;}
header .openMenu.closed .toopen { display: block; }
header .openMenu.opened .toclose { display: block; }
header ._logo_mobile img { display: inline-block; max-height: 50px !important; }

@media only screen and (max-width: 1199.98px) {
    body { padding-left: 0 !important; }
    #d_sidebar { left: -300px; }

    header { top: 0 !important; }

    #mainarea:not(.home) { padding-top: 6rem !important; }
    #d_sidebar ._logo { display: none !important; }
    #d_sidebar ._menu { padding-top: 5rem !important; }
}

#d_sidebar.opened { left: 0 !important; }

#lmenu { display: none; background-color: #fff; border-radius: 10px; width: 75%; bottom: 75%; left: 50%; transform: translateX(-50%); }
#lmenu.show { display: block; }
#lmenu .arrow-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; bottom: -10px; right: 60px; }
#lmenu ._headline { color: var(--rg_blue); font-size: 17px !important; line-height: 17px !important; font-family: 'IBMPlexSans-Medium'; text-transform: uppercase; }

._languages ._l { color: var(--rg_blue) !important; text-decoration: none !important; font-size: 16px !important; line-height: 16px !important; font-family: 'IBMPlexSans-Regular'; padding-left: 30px; }
._languages ._l:hover { color: var(--rg_green) !important; }
._languages ._l ion-icon { display: none; position: absolute; width: 20px; height: 30px; left: 0; top: 50%; transform: translateY(-50%); color: var(--rg_green) !important; }
._languages ._l.active ion-icon { display: block; }

._lang a { display: inline-block; color: rgba( 255, 255, 255, 0.5) !important; font-family: 'IBMPlexSans-Light'; font-size: 15px !important; line-height: 15px !important; transition: all 0.5s !important; padding: 0 20px 0 25px; }
._lang a:hover { color: rgba( 255, 255, 255, 1) !important; }
._lang a ion-icon { display: none; position: absolute; width: 15px; height: 20px; right: 0; top: 50%; transform: translateY(-50%); }
._lang a ._globe { display: block; left: 0; right: auto !important; width: 20px; height: 30px; }
._lang a.closed ._closed { display: block; }
._lang a.opened ._opened { display: block; }

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* Content Definitions */

.bg_cubes { position: absolute; width: 400px; height: 300px; background-image: url('./assets/images/bg_cubes.png'); background-repeat: no-repeat; background-position: bottom right; z-index: -10 !important; bottom: 0; right: 0; background-size: contain; }

#mainarea { display: block; width: 100%; padding: 0; margin: 0 !important;}

.homeimg { height: 100vh; background-position: center; background-size: cover; }
.homeimg .layer { right: 0; width: 100%; height: 100%; background-color: rgba( 0, 30, 43, 0.5 ) !important; }
.homeimg ._headline { font-size: 65px; line-height: 80px; font-family: 'IBMPlexSans-Regular'; color: #fff; }
.homeimg ._info { display: block; margin: 0 auto; width: 100%; max-width: 700px; color: #fff; font-size: 24px; line-height: 36px; font-family: 'IBMPlexSans-Medium'; }

#rg_dots { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); }
#rg_dots ._dot { display: block; padding: 10px; border: 1px solid transparent; border-radius: 20px; }
#rg_dots ._dot.active { border: 1px solid #fff; }
#rg_dots ion-icon { color: #fff !important; height: 10px; width: 10px; display: block; }

.rg_form input[type="text"], .rg_form input[type="email"],
.rg_form textarea { background-color: #F0F2F2 !important; border: 0 !important; border-radius: unset !important; resize: none !important;
    box-shadow: none !important; padding: 0.5rem; color: #1D1D1D !important; }
.rg_form a { font-size: 16px; color: var(--rg_green) !important; }
.rg_form a:hover { text-decoration: underline !important; }

.rg_vision span { color: #F46A79 !important; font-size: 20px; font-family: "IBMPlexSans-Bold"; line-height: 34px;}
.rg_vision h3 { font-family: "IBMPlexSans-Bold"; font-size: 3.75rem; color: var(--rg_blue) !important; }

.joboffer { position: relative; border: 1px solid #DAEDF3; display: block; }
.joboffer:hover { text-decoration: none !important; cursor: pointer; }
.joboffer p { position: relative; padding-left: 1.25rem; color: #1D1D1D !important; font-size: 20px; line-height: 20px; margin: 0; }
.joboffer p > ion-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #F46A79 !important; transition: all 0.5s; }
.jobtitle { color: #15A9B5 !important; font-family: 'IBMPlexSans-Bold' !important; }
.joboffer > ion-icon { position: absolute; height: 20px; right: 1.5rem; top: 50%; transform: translateY(-50%); color: #15A9B5 !important; transition: all 0.5s; }
.joboffer:hover > ion-icon { height: 30px; font-size: 30px; right: 2rem; }

.rg_contactperson img { width: 100%; max-width: 300px !important; }

#rgBenefits .accordion-item { border: 0; border-bottom: 2px solid var(--rg_green); border-radius: 0; }
#rgBenefits a { color: var(--rg_blue) !important; text-decoration: none !important; font-family: 'IBMPlexSans-Medium' !important; font-size: 20px !important; line-height: 20px !important; }
#rgBenefits a ion-icon { display: none; color: var(--rg_green) !important; width: 30px; height: 30px; text-align: center;
position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#rgBenefits a[aria-expanded="false"] ._add { display: block; }
#rgBenefits a[aria-expanded="true"] ._minus { display: block; }

.rg_investment ._logo { max-width: 200px; background: #fff; }
.rg_investment ._logo img { position: absolute; max-width: 80% !important; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.rg_investment ._name { font-family: 'IBMPlexSans-Medium'; font-size: 24px; line-height: 24px; }
.rg_investment ._name span { color: rgba( 0, 45, 64, 0.5 ); text-transform: uppercase; font-size: 20px !important;}
.rg_investment p { font-size: 18px !important; line-height: 24px; font-family: 'IBMPlexSans-Light'; text-align: start !important; letter-spacing: 1px;}
.rg_investment ._invest { font-size: 16px !important; line-height: 24px; font-family: 'IBMPlexSans-Light'; }

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* Footer Definitions */


/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* Shortcode Definitions */

.rg_btn { display: inline-flex; width: auto; height: auto !important; background: #15A9B5; border: 0; border-radius: 0; box-shadow: none;color: #fff !important; font-size: 18px; line-height: 18px; font-family: 'IBMPlexSans-Medium' !important; text-transform: uppercase; text-decoration: none !important; text-align: center; }
.rg_btn ion-icon { transition: all 0.5s; }
.rg_btn:hover { background: linear-gradient( to right, #15A9B5, #004969 ); color: var(--white) !important; }
.rg_btn:hover ion-icon { transform: scale( 1.15 ); }


.rg_icon.simple { display: block; width: 100%; max-width: 150px; margin: 0 auto; background: none !important; }
.rg_icon.simple ._icon ion-icon { color: #15A9B5 !important; height: 30px; width: 30px; }
.rg_icon.simple ._headline { font-size: 20px; line-height: 25px; color: #002D40 !important; min-height: 50px; }
.rg_icon.extended { display: block; width: 100%; max-width: 350px; }
.rg_icon.extended ._icon ion-icon { color: #15A9B5 !important; height: 60px; width: 60px; padding: 0; margin: 0; }
.rg_icon.extended ._headline { font-size: 24px; line-height: 30px; color: #002D40 !important; padding-left: 0.6rem !important; }
.rg_icon.extended ._info { font-size: 18px; line-height: 26px; color: #1D1D1D !important; padding-left: 0.6rem !important; }

.rg_contactbox { background: url('./assets/images/bg_contact.jpg') no-repeat center; background-size: cover; color: var(--white) !important; }

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### ###### ###### ###### ###### ###### ###### ###### */