/* colors */
:root {
    --exp-col: #568AB6;
    --ser-col: #008996;
    --gro-col: #2E598E;
    --aca-col: #A22E5C;
    --sof-col: #E3802D;

    --exp-dark-col: #091e30;
    --ser-dark-col: #002831;
    --gro-dark-col: #001F45;
    --aca-dark-col: #320517;
    --sof-dark-col: #3C1E05;

    --exp-active-col: #499ADE;
    --ser-active-col: #00A7B6;
    --gro-active-col: #0161D8;
    --aca-active-col: #D0276A;
    --sof-active-col: #FF9317;
}

.c1 { color: var(--exp-col); }
.c2 { color: var(--ser-col); }
.c3 { color: var(--gro-col); }
.c4 { color: var(--aca-col); }
.c5 { color: var(--sof-col); }

.bgd1 { background-color: var(--exp-dark-col); }
.bgd2 { background-color: var(--ser-dark-col); }
.bgd3 { background-color: var(--gro-dark-col); }
.bgd4 { background-color: var(--aca-dark-col); }
.bgd5 { background-color: var(--sof-dark-col); }

.bt1 { background-color: var(--exp-col); }
.bt2 { background-color: var(--ser-col); }
.bt3 { background-color: var(--gro-col); }
.bt4 { background-color: var(--aca-col); }
.bt5 { background-color: var(--sof-col); }

.bt1:hover { background-color: var(--exp-active-col); }
.bt2:hover { background-color: var(--ser-active-col); }
.bt3:hover { background-color: var(--gro-active-col); }
.bt4:hover { background-color: var(--aca-active-col); }
.bt5:hover { background-color: var(--sof-active-col); }

.white { color: #FFF; }
.black { color: #000; }
.bgwhite { background: #FFF; }
.bgblack { background: #000; }

.transparent_txt {
    mix-blend-mode: plus-lighter;
    color: rgba(128,128,128,1);
}
/* font */
@font-face { font-family: Poppins;
    src: url('fonts/Poppins-Regular.ttf'),url('fonts/Poppins-Italic.ttf'),url('fonts/Poppins-SemiBold.ttf'),url('fonts/Poppins-SemiBoldItalic.ttf');
}
.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}
.dino {
    font-size: 1.4875em;
    line-height: 1.2em;
    margin-bottom: 4px;
}
.elephant {
    font-size: 1.2em;
    line-height: 1.2em;
}
.dog {
    font-size: 1em;
    line-height: 1.4em;
}
.mouse {
    font-size: 0.875em;
    line-height: 1em;
}
.ant {
    font-size: 0.75em;
    line-height: 1em;
}
.amobe {
    font-size: 0.625em;
    line-height: 1.4em;
}
.mb5 {
    margin-bottom: 3px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}

/* basic */
body {
    margin: 0;
    padding: 0;
    background-color: white;
}
#page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: no-repeat url('images/bg_gradient.webp');
    background-position:center center;
    background-size:100% 100%;
    flex-direction: column;
    min-height: 100vH;
}

/* assets */
.phone_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.4188 0.769072L12.1688 0.0190875C11.8157 -0.0621608 11.4532 0.12221 11.3095 0.453453L9.8095 3.95338C9.67825 4.25962 9.76575 4.61899 10.0251 4.82836L11.9188 6.37833C10.7939 8.77515 8.82827 10.7689 6.38145 11.9157L4.83148 10.022C4.61898 9.76263 4.26274 9.67513 3.95649 9.80638L0.456566 11.3063C0.122198 11.4532 -0.0621732 11.8157 0.0190751 12.1688L0.76906 15.4188C0.847183 15.7563 1.14718 16 1.50029 16C9.50326 16 16 9.51576 16 1.50031C16 1.15031 15.7594 0.847195 15.4188 0.769072Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: 1px 3px;
}
.mobile_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.73636 0H1.71818C0.769602 0 0 0.755859 0 1.6875V16.3125C0 17.2441 0.769602 18 1.71818 18H9.73636C10.6849 18 11.4545 17.2441 11.4545 16.3125V1.6875C11.4545 0.755859 10.6849 0 9.73636 0ZM5.72727 16.875C5.09369 16.875 4.58182 16.3723 4.58182 15.75C4.58182 15.1277 5.09369 14.625 5.72727 14.625C6.36085 14.625 6.87273 15.1277 6.87273 15.75C6.87273 16.3723 6.36085 16.875 5.72727 16.875ZM9.73636 13.0781C9.73636 13.3102 9.54307 13.5 9.30682 13.5H2.14773C1.91148 13.5 1.71818 13.3102 1.71818 13.0781V2.10938C1.71818 1.87734 1.91148 1.6875 2.14773 1.6875H9.30682C9.54307 1.6875 9.73636 1.87734 9.73636 2.10938V13.0781Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: 3px 3px;
    line-height: 55px;
}
.mail_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7725 0.837769H1.28054C0.630282 0.837769 0.102539 1.37255 0.102539 2.03147V13.9685C0.102539 14.6275 0.630282 15.1622 1.28054 15.1622H17.7725C18.4228 15.1622 18.9505 14.6275 18.9505 13.9685V2.03147C18.9505 1.37255 18.4228 0.837769 17.7725 0.837769ZM6.79357 9.22594L9.52888 11.1096L12.2477 9.2128L16.9397 13.9685H2.11338L6.79357 9.22594ZM1.28054 13.1246V5.42756L5.8017 8.54194L1.28054 13.1246ZM13.2337 8.52523L17.7725 5.35952V13.1246L13.2337 8.52523ZM17.7725 2.03147V3.96289L17.7478 3.92708L9.52417 9.66522L1.28054 3.98557V2.03147H17.7725Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: 0 4px;
}
hr {
    border: none;
    height: 1px;
    color: #eaeaea;
    background-color: #e6e6e6;
    width: 100%;
}
/* SOMI vCard */
#stage, #stage_contact {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    z-index:500;
    min-width: 300px;
    position: relative;
}
#stage_contact {
    z-index: 501;
}
.somi_vcard {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.somi_vcard_holder {
    cursor: pointer;
    position: relative;
    z-index: 107;
    width: 100%;
}
.qf-card {
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qf-card.qf-front {
    position: relative;
}
.vcard_flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.shadow {
    box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 20%);
}
#vcard_front:hover, #vcard_back:hover {
    box-shadow: 0 0 20px rgba(101, 199, 255, 0.5);
    border-color: rgb(0, 162, 255);
}
/* vCard toggle */
.vcard_toggle_front {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='63' viewBox='0 0 60 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.85912 45.1505C2.49069 46.1252 2 47.0133 2 47.7368C2 48.3103 2.30237 48.9838 3.12966 49.7388C3.95621 50.4932 5.2182 51.2421 6.89477 51.9383C9.74743 53.1229 13.6464 54.0922 18.2258 54.7143L14.1082 49.644C13.76 49.2153 13.8253 48.5855 14.254 48.2374C14.6828 47.8892 15.3126 47.9545 15.6607 48.3832L21.3344 55.3696C21.6826 55.7983 21.6173 56.4281 21.1885 56.7763L14.2022 62.4499C13.7735 62.7981 13.1437 62.7328 12.7955 62.3041C12.4473 61.8754 12.5126 61.2456 12.9414 60.8974L18.0921 56.7144C13.341 56.0777 9.21422 55.067 6.12777 53.7854C4.33741 53.0419 2.84376 52.1856 1.78141 51.216C0.719798 50.2471 0 49.0778 0 47.7368C0 46.0476 1.13227 44.6373 2.69881 43.5215C4.29062 42.3877 6.52922 41.4077 9.20544 40.6014C14.5705 38.9851 21.9223 38 30 38C38.0777 38 45.4295 38.9851 50.7946 40.6014C53.4708 41.4077 55.7094 42.3877 57.3012 43.5215C58.8677 44.6373 60 46.0476 60 47.7368C60 49.0778 59.2802 50.2471 58.2186 51.216C57.1562 52.1856 55.6626 53.0419 53.8722 53.7854C50.2844 55.2752 45.2909 56.3989 39.545 56.9947L39.3387 55.0053C44.9736 54.4211 49.7592 53.3278 53.1052 51.9383C54.7818 51.2421 56.0438 50.4932 56.8703 49.7388C57.6976 48.9838 58 48.3103 58 47.7368C58 47.0133 57.5093 46.1252 56.1409 45.1505C54.7977 44.1938 52.7894 43.2912 50.2176 42.5164C45.0868 40.9707 37.9385 40 30 40C22.0615 40 14.9132 40.9707 9.78236 42.5164C7.21062 43.2912 5.20227 44.1938 3.85912 45.1505Z' fill='black'/%3E%3Cpath d='M16 2C16 0.89543 16.8954 0 18 0H44C45.1046 0 46 0.895431 46 2V44C46 45.1046 45.1046 46 44 46H18C16.8954 46 16 45.1046 16 44V2Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37 6H25V5H37V6Z' fill='%23999999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37 10H25V9H37V10Z' fill='%23999999'/%3E%3Cpath d='M24 32.7455L23 46H24H39L38 32.7455C37.8896 31.1588 37 31.0181 35.5 30.2541C34.993 29.9959 33 28.7814 34 27.8364C35.6233 26.3023 36 24.9337 36 23.8723C36 21.9087 34.5413 19 31.5 19C29 19 26.0001 20.751 26 23.8723C25.9999 26.9936 27.1691 26.6434 28 27.8364L28.0145 27.8573C29.0003 29.2726 29.0209 29.3022 26 30.2909C24.5 30.7818 24 31.7636 24 32.7455Z' fill='%23999999'/%3E%3C/svg%3E%0A");
    width: 340px;
    height: 430px;
    overflow: visible;
    z-index: 50;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 100% top;
    background-size: 52px;
    opacity: 0;
    right: -25px;
    top: -10px;
}
.vcard_toggle_back {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='63' viewBox='0 0 60 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.85912 45.1505C2.49069 46.1252 2 47.0133 2 47.7368C2 48.3103 2.30237 48.9838 3.12966 49.7388C3.95621 50.4932 5.2182 51.2421 6.89477 51.9383C9.74743 53.1229 13.6464 54.0922 18.2258 54.7143L14.1082 49.644C13.76 49.2153 13.8253 48.5855 14.254 48.2374C14.6828 47.8892 15.3126 47.9545 15.6607 48.3832L21.3344 55.3696C21.6826 55.7983 21.6173 56.4281 21.1885 56.7763L14.2022 62.4499C13.7735 62.7981 13.1437 62.7328 12.7955 62.3041C12.4473 61.8754 12.5126 61.2456 12.9414 60.8974L18.0921 56.7144C13.341 56.0777 9.21422 55.067 6.12777 53.7854C4.33741 53.0419 2.84376 52.1856 1.78141 51.216C0.719798 50.2471 0 49.0778 0 47.7368C0 46.0476 1.13227 44.6373 2.69881 43.5215C4.29062 42.3877 6.52922 41.4077 9.20544 40.6014C14.5705 38.9851 21.9223 38 30 38C38.0777 38 45.4295 38.9851 50.7946 40.6014C53.4708 41.4077 55.7094 42.3877 57.3012 43.5215C58.8677 44.6373 60 46.0476 60 47.7368C60 49.0778 59.2802 50.2471 58.2186 51.216C57.1562 52.1856 55.6626 53.0419 53.8722 53.7854C50.2844 55.2752 45.2909 56.3989 39.545 56.9947L39.3387 55.0053C44.9736 54.4211 49.7592 53.3278 53.1052 51.9383C54.7818 51.2421 56.0438 50.4932 56.8703 49.7388C57.6976 48.9838 58 48.3103 58 47.7368C58 47.0133 57.5093 46.1252 56.1409 45.1505C54.7977 44.1938 52.7894 43.2912 50.2176 42.5164C45.0868 40.9707 37.9385 40 30 40C22.0615 40 14.9132 40.9707 9.78236 42.5164C7.21062 43.2912 5.20227 44.1938 3.85912 45.1505Z' fill='black'/%3E%3Cpath d='M16 2C16 0.89543 16.8954 0 18 0H44C45.1046 0 46 0.895431 46 2V44C46 45.1046 45.1046 46 44 46H18C16.8954 46 16 45.1046 16 44V2Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37 6H25V5H37V6Z' fill='%23999999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37 10H25V9H37V10Z' fill='%23999999'/%3E%3Cpath d='M24 32.7455L23 46H24H39L38 32.7455C37.8896 31.1588 37 31.0181 35.5 30.2541C34.993 29.9959 33 28.7814 34 27.8364C35.6233 26.3023 36 24.9337 36 23.8723C36 21.9087 34.5413 19 31.5 19C29 19 26.0001 20.751 26 23.8723C25.9999 26.9936 27.1691 26.6434 28 27.8364L28.0145 27.8573C29.0003 29.2726 29.0209 29.3022 26 30.2909C24.5 30.7818 24 31.7636 24 32.7455Z' fill='%23999999'/%3E%3C/svg%3E%0A");
    width: 340px;
    height: 320px;
    overflow: visible;
    z-index: 51;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 100% top;
    background-size: 52px;
    opacity: 0;
    right: -25px;
    top: -10px;
}

/* vcard front */
#vcard_front_txt {
    background-color: #d9d9e5;
    width: 262px;
}
#vcard_front_bt, #vcard_front_txt, #vcard_front_image, #vcard_back_bt {
    opacity: 1;
}
#content_front_box {
    background-color: rgba(255,255,255, 0.2);
    border: 1px solid rgba(255,255,255);
    width: 300px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 9px;
    overflow: hidden;
}
#vcard_front_txt {
    padding: 20px 20px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 2;
}
#vcard_front_image {
    line-height: 0px;
    height: 100%;
    width: 100%;
    background-color: #d9d9e5;
    text-align: center;
}
/* vCard Back */
#content_back_box {
    background-color: rgb(255, 255, 255,1);
    border: 1px solid rgba(255,255,255);
    width: 100%;
    height: 420px;
    position: relative;
    border-radius: 9px;
}

#content_box {
    opacity: 0;
    padding: 16px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 388px;
    position: relative;
}

/* header */
header {
    z-index: 101;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.7);
}
footer {
    z-index:102;
    bottom: 0;
    width: 100%;
    display: table-cell;
    vertical-align: bottom;
    background-color: rgba(255,255,255,0.2);
    border-top: 1px solid rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
}

.somi_logo {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* button */
.buttons {
    width: 100%;
    z-index:105;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-out !important;
}

.button_holder {
    width: 300px;
    display: flex;
    flex-direction: row;
    gap: 15px;
}



.button_holder a {
    text-decoration: none !important;
    width: 100%;
}

.button_holder a:visited {
    color: white;
    text-decoration: none !important;
}
.button_icon {
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    color: white;
    padding: 12px 0;
    border-radius: 5px;
}
.button_icon svg {
    padding-bottom: 8px;
}
.button_icon:hover {
    border-radius: 7px;
}

/* footer */
.links_footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 325px;
    height: 60px;
    align-items: center;
}
.somi_companies {
    height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}
.somi_companies .active {
    height: 30px;
}
.footer_tile {
    width: 25%;
    height: 18px;
    cursor: pointer;
}

.border_taps {
    position: absolute;
    top:0;
    height:10px;
    width:100%;
    pointer-events:none;
}
.footer_card {
    display: flex;
    justify-content: center;
    min-height: 200px;
    padding: 20px 0;
    position: relative;
}

.footer_card_gesellschaft_img {
    padding: 15px 15px 10px 15px;
    background-color: white;
    border-radius: 6px;
    display: inline-block;
}

.footer_right {
    float:right;
}

#below_fold a {
    color: white !important;
    text-decoration: none;
}

.reflect_holder {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.reflect, .reflecttwo {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events:none;
    z-index: 10505;
    mix-blend-mode: darken;
    /*background: radial-gradient(circle, rgba(139,238,192,1) 0%, rgba(136,211,235,1) 16%, rgba(233,169,211,1) 34%, rgba(243,224,157,1) 50%, rgba(233,169,211,1) 66%, rgba(136,211,235,1) 84%, rgba(139,238,192,1) 100%);
    */
    background: linear-gradient(90deg, rgba(139,238,192,1) 0%, rgba(136,211,235,1) 16%, rgba(233,169,211,1) 34%, rgba(243,224,157,1) 50%, rgba(233,169,211,1) 66%, rgba(136,211,235,1) 84%, rgba(139,238,192,1) 100%);
    opacity: 0;
}

.reflecttwo {
    opacity: 0;
    background: radial-gradient(circle, rgba(139,238,192,1) 0%, rgba(136,211,235,1) 16%, rgba(233,169,211,1) 34%, rgba(243,224,157,1) 50%, rgba(233,169,211,1) 66%, rgba(136,211,235,1) 84%, rgba(139,238,192,1) 100%);
    mix-blend-mode: darken;
    opacity: 0;
}

.contact_box {
    border: 1px solid rgba(255,255,255);
    width: 300px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 9px;
    overflow: hidden;
}

.contact_txt {
    padding: 25px 20px 20px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start !important;
    text-align: left !important;
    flex-grow: 2;
    background-color: #d9d9e5;
}

.back_box {
    width: 300px !important;
}

.close_bt {
    position: absolute;
    right: -15px;
    top: 5px;
}

input {
    background: rgba(255, 255, 255, 0.84);
    border: none;
    border-bottom: 4px solid #bdbdbd;
    height: 40px !important;
    font-size: 16px;
    font-weight: 400;
    width: calc(100% - 20px);
    padding: 0px 10px;

}

input:focus {
    background-color: white;
    border: none;
    border: 4px solid #00baff !important;
    border-width: 0 0 4px 0 !important;
    color: black;
    border-radius: 0px !important;
    outline: none;
}

.invalid-feedback {
    color: #a90000;
}

.is-invalid {
    border: 1px solid #a90000;
    background-color: #fdeeee;
}

.info_msg {
    position: fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    padding: 50px 0px;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    verflow: auto;
}
.info_msg p {
    margin: 0px;
    display: table;
    margin: 55px auto auto auto;
    padding:20px;
    position: relative;
    background-color: #fff;
    border:1px solid #000;
}
.info_msg.level1 p {
    background-color: #f9eebb;
    border-color:#d8cea0;
}
.info_msg.level2 p {
    background-color: #f97f7a;
    border-color: #d84c47;
}