@font-face {font-family: "Noto";src:url(NotoSans.ttf);}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* -------------------------------------------- Var Declaration ---------------------------------------- */

:root{

    /* -------------------------------------------- Stylesheet ---------------------------------------- */
    --color-base1: #161616;
    --color-base2: #1b0000;
    --color-base3: #810000;
    --color-base3b: #dddddd;
    --color-base4: #ffffff;
    --color-base4b: #d6d6d62a;
    --color-base5: #444444;
    --color-base5b: #c9c9c9;
    --color-base6: #ffffff;
    --color-base7: #d6d6d6;
    --color-red: #a10000;
    --color-yellow: #ff0000;
    --color-green: #7ce38b;
    --color-blue1: #a2d2fb;
    --color-blue2: #77bdfb;
    --color-purple: #cea5fb;

    /* -------------------------------------------- Basics ---------------------------------------- */
    --body-font-type: "times", sans-serif;
    --body-font-type-transparent: "sans-serif", sans-serif;
    --body-normal-font-size:0.800rem;
    --body-normal-font-size-transparent:23px;
    --body-normal-font-size2:14px;
    --body-h1-font-size:22px;
    --body-h2-font-size:11px;
    --body-h1-font-size-transparent:22px;
    --body-h2-font-size-transparent:12px;
    --body-h2-font-line:13px;

    /* -------------------------------------------- Container ---------------------------------------- */
    --sitebg-background-color:radial-gradient(circle, var(--color-base3) 0%, var(--color-base2) 90%);
    --box-shadow:0px 5px 25px 0px rgba(0, 0, 0, 0.5);
    --box-shadow-hover:0px 5px 5px 0px rgba(0, 0, 0, 0.05);

    --keybackground-color:#21262d;
    --keybackground-color-hover: #556681;
    --key-color:#777777;
    --key-color-hover:#ffffff;

    --body-link-color:#9b0000;
    --body-link-line-color:#860000;
    --body-link-color-hover:#cf0000;

    --transparent-body-link-color:#9698a8;
    --transparent-body-link-line-color:#949494;
    --transparent-body-link-color-hover:#949494;

    --table-border: 0px solid #35373d;
    --table-background:transparent;
    --table-background-selceted:#ffffff;
    --table-background-selceted-light:#686868;
    --table-background-selceted-dark:#696969;
    --table-background-header:#d1d1d1;
    --table-font-color:#550000;
    --table-font-color2:#ff0000;
    --table-font-color3:#ff4444;    
    --table-font-color4:#9b9b9b;
    --table-font-color5:#a8a8a8;
    --popup-shadow:0px 0px 0px 0px inset #58d0ff;
    --popup-color:#c7c7c7;
    --popup-background:#bdbdbd3a;

    --button-bordercolor:#7e7e7e5e;
    --button-bordercolor-hover:#ac0000;
    --button-color:#7c7c7c;
    --button-color-hover:#ac0000;
    --button-shadow:0px 3px 10px 0px #00000013;
    --button-font-size:12px;

    --button2-bordercolor:#7c7c7c5e;
    --button2-bordercolor-hover:#7ce38b;
    --button2-color:#89929b;
    --button2-color-hover:#7ce38b;
    --button2-shadow:0px 3px 10px 0px #00000013;
    --button2-font-size:12px;

    --button3-bordercolor:#89929b5e;
    --button3-bordercolor-hover:#b90c00;
    --button3-color:#89929b;
    --button3-color-hover:#c50d00;
    --button3-shadow:0px 3px 10px 0px #00000013;
    --button3-font-size:12px;

    --svg-row-icon:#0c0c0c;
    --svg-row-icon-hover:#00b7ff;
    --svg-pic-color:#0a0a0a;
    --svg-pic-color-hover:#00b7ff;

    --svg-pic-icon2:#cccccc;
    --svg-pic-icon2_hover:#a50000;

    --placeholder-color:#00b7ff;
    --form-background:#313131;
    --form-color:#cecee2;
    --form-border: 1px solid #535353;
    --form-border-focus: 1px solid #00b7ff;
    --form-background-focus:#2b2b2b;

    --footer-color:#4e4e4e;
    --footer-link-color:#646464;
    --footer-link-color-hover:#00c3ff;
    --footer-normal-font-size:10pt;
    --footer-normal-font-size-h1:20px;
    --footer-color-h1:#575757;
    --footer-background-color:#161616;
}

code{
border-radius:5px; margin:15px;
}

.hljs {
  color: #adbac7;
  background: #00000028
}

.flyer{
width:98%; margin:1%; border-radius:20px;
}

.promo{
border:0px solid;
transition: all 200ms ease-in-out;
}

.promo:hover{
    border:0px solid;
    filter: blur(4px);
    transition: all 200ms ease-in-out;
    }

.announcment{
    position:fixed;
    float:left;
    top:75px;
    z-index:50;
    width:100%;
    background:#1d1d1d4b;
    color:#bebebea1;
    padding:7px;
    border-bottom:0px solid #00000038;
    box-shadow:0px 0px 15px 5px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(5px);
}

/* -------------------------------------------- BASE ---------------------------------------- */
hr{border-top: 0.01rem solid var(--color-base4b); border-bottom:0px;margin-bottom:20px; border-radius:10px; width:100%;}
body{margin:0px; background-attachment:fixed; background: var(--background-color); font: var(--body-font);font-size: var(--body-normal-font-size);color:var(--font-color_main);width: 100%;display: flex;flex-direction:column;flex-wrap: nowrap;order: 1;justify-content: center;align-items: center;}
.video{border-radius:10px;border: 0px;}
.sitebg{width: 100%;height: 100%;justify-content: center;align-items: center; background:var(--sitebg-background-color); background-attachment:fixed; }
img {max-width: 100%;}
a, .content_cell a, .sitebg a, .content_cell_transparent a, body a, .table-container a, .content a {color:var(--body-link-color);text-decoration: underline;text-decoration-color: var(--body-link-line-color);}
a:hover, .content_cell a:hover, .sitebg a:hover, .content_cell_transparent a:hover, body a:hover, .table-container a:hover, .content a:hover {color:var(--body-link-color-hover);text-decoration: none;}
.wrapper{width: 100%;margin: auto;}
.site_submenu{background-color:var(--submenu-background-color); width: 100%; height: 50px; position:fixed; z-index:1; top:70px; box-shadow: var(--box-shadow);}
@media screen and (min-width: 1118px) {.wrapper{width: 100%;max-width: 1350px;min-width: 1200px;margin: auto;}}


.content-image{
    border-radius:10px;
}
/* -------------------------------------------- Cookie ---------------------------------------- */

.cookie{position: fixed;bottom:0px; left:-10px;width: 100%;border-radius: 5px;background:var(--background-color);z-index:300;box-shadow: var(--box-shadow);padding:10px;color:var(--font-color);height: 100px;margin-left:10px;padding:20px;display: flex;}
.cookiebutton{border:3px;padding:10px;border-radius: 5px;cursor: pointer;position:relative;float:right;color:#ffffff;display: flex;margin-right:20px; font-size:var(--body-normal-font-size2);}
.cookiebutton:hover{color:#ffffff;}
/* -------------------------------------------- Header ---------------------------------------- */

.headerimage{width:100%;max-width: 1700px;position:relative;align-items: center;justify-content: center;}
@media screen and (min-width: 1118px) {.header{margin-top:30px;display: flex;flex-direction: row;flex-wrap: nowrap;order: 1;justify-content: center;margin-bottom:0px;}}

/* -------------------------------------------- Content Output ---------------------------------------- */

.keyword{position:relative;float:left;margin:3px;padding:5px;box-shadow: var(--box-shadow);border-radius: 3px;cursor:pointer;color:var(--key-color);font: var(--body-font);font-size:12px;border-top:1px rgba(255, 255, 255, 0.1) solid;border-bottom:1px rgba(0, 0, 0, 0.1) solid;background:var(--keybackground-color);}
.keyword:hover{background:var(--keybackground-color-hover); color:var(--key-color-hover);}
.blogimage{border-radius:10px;}


.content{display:flex;flex-flow: column;}

@media screen and (min-width: 1000px){
    .content{display:flex;flex-flow: row nowrap;}
}
.content_cell{
    border:0.1em solid var(--color-base4b);
    box-shadow: var(--box-shadow);
    margin:10px;
    margin-top:20px;
    font: var(--body-font-type);
    background-color:var(--color-base7);
    color: var(--color-base5);
    border-radius: 5px;
    padding-left:2.0%;
    padding-right:2.0%;
    padding-top:1.5%;
    padding-bottom:1.5%;
    font-size: var(--body-normal-font-size);
    flex: 1;
    backdrop-filter: blur(10px);
}

h1 .svg-icon{height: 25px; width:25px;position:relative; float:left;top:0px;margin:0px;margin-right:5px;transition: all 200ms ease-in-out; margin-right:10px;}
h1 .svg-icon path{fill: var(--color-base5) !important;}

.content_cell_transparent{
    margin:10px;
    margin-top:20px;
    font: var(--body-font-type);
    font-size: var(--body-normal-font-size);
    background: transparent;
    color: var(--color-base5b);
    border-radius: 0px;
    padding:2.5%;
    font-size: var(--body-normal-font-size);
    flex: 1;
}


.content_cell h1{color: var(--color-base6);font: var(--body-font-type);font-size: var(--body-h1-font-size);margin-bottom:20px;margin-top:10px;}
.content_cell h2{color: var(--color-base6);font: var(--body-font-type);font-size: var(--body-h2-font-size);margin-bottom:20px;margin-top:10px;}
.content_cell_transparent h1{color: var(--color-base6);font: var(--body-font-type-transparent);font-size: var(--body-h1-font-size-transparent);margin-bottom:20px;margin-top:10px;}
.content_cell_transparent h2{color: var(--color-base6);font: var(--body-font-type-transparent);font-size: var(--body-h2-font-size-transparent);margin-bottom:20px;margin-top:10px;}


/* -------------------------------------------- Table ---------------------------------------- */

.table-container {display: flex;flex-flow: column nowrap;background-color: var(--table-background);width: 100%;margin: 0 auto;border-radius: 5px;border: var(--table-border);border-top: 1px solid var(--background-color);}
.table-row {display: flex;flex-flow: row nowrap;width: 100%;cursor: pointer;border: 0px solid var(--background-color);border-bottom: var(--table-border);padding:10px;border-radius:5px;background-color: var(--table-background);}
.table-row-toggle {background-color: var(--table-background);box-shadow: 0px 5px 10px rgba(0, 0, 0, .08);transition: all 200ms ease-in-out;}
.table-row .row-item2{color: var(--table-font-color2);}
.table-row .row-item3{color: var(--table-font-color3);}
.table-row:hover, .table-row-progress:hover, .table-row-prospect:hover, .table-row-hold:hover, .table-row:hover .row-item3, .table-row:hover .row-item2 {background-color: var(--table-background-selceted); color: var(--table-font-color5);}
.table-row:hover{border-top:0px solid var(--table-background-selceted-light); border-left:0px solid var(--table-background-selceted-light); border-bottom:0px solid var(--table-background-selceted-dark); border-right:0px solid var(--table-background-selceted-dark);}
.heading, .heading:hover {background-color: var(--table-background-header);color: var(--table-font-color);border: var(--background-color); border-bottom: var(--table-border) ;}
.row-item {display: flex;flex: 1;font-size: var(--body-normal-font-size);text-wrap: nowrap;transition: all 200ms ease-in-out;border-radius: 2px;}
.row-item:hover {background-color: transparent;transition: all 0ms ease-in-out;}

.row-item2 {display: flex;flex: 1;font-size: var(--body-normal-font-size);text-wrap: nowrap;transition: all 200ms ease-in-out;border-radius: 2px;}
.row-item2:hover {background-color: transparent;transition: all 0ms ease-in-out;}

.row-item3 {display: flex;flex: 1;font-size: var(--body-normal-font-size);text-wrap: nowrap;transition: all 200ms ease-in-out;border-radius: 2px;}
.row-item3:hover {background-color: transparent;transition: all 0ms ease-in-out;}

.table-row:last-child,.table-row-prograss:last-child,.table-row-hold:last-child,.table-row-prospect:last-child,.row-sub-container .row-item:last-child {border-bottom: 1;}
.row-item .svg-icon{height: 20px; width:20px;transition: all 200ms ease-in-out;}
.row-item .svg-icon path{fill: var(--svg-row-icon) !important;}
.row-item:hover .svg-icon path{fill: var(--svg-row-icon-hover) !important;transition: all 200ms ease-in-out;}
.dbpopup{visibility:hidden;width: 100%;transition: all 200ms ease-in-out;overflow: hidden;height: 0px; border-radius:0px;}
.dbpopup-open{visibility:visible;width: 100%;height: 200px;transition: all 200ms ease-in-out;overflow: hidden;background-color: var(--popup-background);color:var(--popup-color);box-shadow:var(--popup-shadow);scrollbar-width: 0px;padding:17px;}
.info{overflow:auto;height: 170px;padding:2%;}
.spacer{width:100%; height:30px; clear: both;}

.svg-icon2 path{fill: var(--svg-pic-icon2) !important;}
.content_cell:hover .svg-icon2 path, .content_cell_transparent:hover .svg-icon2 path, .svg-icon2:hover path{fill: var(--svg-pic-icon2_hover) !important;}
.svg-icon2{float:right; height:80px;transition: all 200ms ease-in-out; margin:10px; width:80px;}


.svg-icon3 path{fill: var(--svg-pic-icon2) !important;}
.svg-icon3:hover path{fill: var(--svg-pic-icon2_hover) !important;}
.svg-icon3{height:30px;transition: all 200ms ease-in-out; margin:10px; width:50px;}

/*-------------------------- SVG Logo ------------------------ */
.logodiv .svg-icon{height: 100px; width:100px;position:relative; float:left;top:0px;margin:15px;transition: all 200ms ease-in-out;}
.logodiv .svg-icon path{fill: var(--font-color) !important;}
.logodiv:hover .svg-icon path{fill: var(--link-color-hover) !important;transition: all 200ms ease-in-out;}

/*-------------------------- SVG Logo Content ------------------------ */
.content .svg-pic{width:350px;position:relative; float:right;top:0px;margin:15px;transition: all 200ms ease-in-out;}
.content .svg-pic:hover{margin:15px;transition: all 200ms ease-in-out;  transform: rotate(10deg);}
.content .svg-pic path{fill: var(--svg-pic-color)!important;}
.content .svg-pic:hover path{fill: var(--svg-pic-color-hover) !important;transition: all 200ms ease-in-out;}

/*-------------------------- Button ------------------------ */

.button{
    color:var(--button-color);
    padding:7px;background: var(--button-bgcolor);
    border-radius: 5px;
    margin:5px;
    cursor: pointer;
    position: relative;
    float:left;
    font: var(--body-font);
    font-size: var(--button-font-size);
    box-shadow: var(--button-shadow);
    border:1px solid var(--button-bordercolor);
}
.button:hover{color:var(--button-color-hover);background: var(--button-bgcolor-hover);border:1px solid var(--button-bordercolor-hover);}
.button .svg-icon{height: 14px; width:16px;position:relative; float:left;top:0px;margin:0px;margin-right:5px;transition: all 200ms ease-in-out;}
.button .svg-icon path{fill: var(--button-color) !important;}
.button:hover .svg-icon path{fill: var(--button-color-hover) !important;transition: all 200ms ease-in-out;}


.button2{
    color:var(--button2-color);
    padding:7px;background: var(--button2-bgcolor);
    border-radius: 5px;
    margin:5px;
    cursor: pointer;
    position: relative;
    float:left;
    font: var(--body-font);
    font-size: var(--button2-font-size);
    box-shadow: var(--button2-shadow);
    border:1px solid var(--button2-bordercolor);
}
.button2:hover{color:var(--button2-color-hover);background: var(--button2-bgcolor-hover);border:1px solid var(--button2-bordercolor-hover);}
.button2 .svg-icon{height: 14px; width:16px;position:relative; float:left;top:0px;margin:0px;margin-right:5px;transition: all 200ms ease-in-out;}
.button2 .svg-icon path{fill: var(--button2-color) !important;}
.button2:hover .svg-icon path{fill: var(--button2-color-hover) !important;transition: all 200ms ease-in-out;}


.button3{
    color:var(--button3-color);
    padding:7px;background: var(--button3-bgcolor);
    border-radius: 5px;
    margin:5px;
    cursor: pointer;
    position: relative;
    float:left;
    font: var(--body-font);
    font-size: var(--button3-font-size);
    box-shadow: var(--button3-shadow);
    border:1px solid var(--button3-bordercolor);
}
.button3:hover{color:var(--button3-color-hover);background: var(--button3-bgcolor-hover);border:1px solid var(--button3-bordercolor-hover);}
.button3 .svg-icon{height: 14px; width:16px;position:relative; float:left;top:0px;margin:0px;margin-right:5px;transition: all 200ms ease-in-out;}
.button3 .svg-icon path{fill: var(--button3-color) !important;}
.button3:hover .svg-icon path{fill: var(--button3-color-hover) !important;transition: all 200ms ease-in-out;}


/* -------------------------- FORM --------------------------- */

input, textarea, .custom-select, [type="checkbox"]{margin:5px;background-color: var(--form-background);border:var(--form-border);padding:10px;border-radius: 7px;color: var(--form-color);font: var(--body-font);font-size: var(--normal-font-size);}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */color:var(--placeholder-color);opacity: 1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color:var(--placeholder-color);}
::-ms-input-placeholder { /* Microsoft Edge */color:var(--placeholder-color);}
.custom-select option {padding:10px;}
input:focus,  textarea:focus{border:0px;outline:none;background-color: var(--form-background-focus);border:var(--form-border-focus);}

/* -------------------------- MEDIA --------------------------- */

audio::-webkit-media-controls-timeline-container{background:rgb(59, 59, 59);}

/* ------------------------- FOOTER ------------------------ */

.footer{
    width: 100%;
    color:var(--footer-color);
    background:var(--footer-background-color);
    font:var(--body-font);
    font-size:var(--footer-normal-font-size);
    margin-top:50px;
    margin-bottom:0px;
}

.footer_flexbox{column-gap: 1.0rem; row-gap: 1.0rem; margin-left:150px;margin-right:150px;margin-top:50px; margin-bottom:150px;}

.footer_flexbox{display:flex;flex-flow: column;}

@media screen and (min-width: 1000px){
    .footer_flexbox{display:flex;flex-flow: row nowrap;}
}

.footer_cell{color:var(--footer-color);flex: 1; margin-top:20px;}
.footer_cell h1{color:var(--footer-color-h1);font: var(--body-font);font-size: var(--footer-normal-font-size-h1);}
.footer_cell a{color:var(--footer-link-color);text-decoration: underline;}
.footer_cell a:hover{color:var(--footer-link-color-hover);text-decoration: none;}
.footer hr{color:var(--footer-color);height: 0px;border: none;border-top: 1px solid var(--footer-color);}