body{
    margin: 0;
    background-color: black;
    overflow: hidden;
    color: #999;
    font-family: Tajawal, sans-serif;
    height: 100vh;
    user-select: none;
}

.th-container{
    width: 100%;
    height: 100%;
}

.th-full-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.th-main-container{
    max-height: 720px;
    overflow: hidden;
}

@font-face {
    font-family: "Tajawal";
    src: url("/static/assets/fonts/Tajawal-Light.ttf");
}

/*--------------------*/
/* Main layout        */
/*--------------------*/

#th-narration{
    z-index: 50;
    pointer-events: none;
}

#th-video-container{
    background-color: black;
}

.th-aladin-container{
    pointer-events: none;
}

/*--------------------*/
/* Game master        */
/*--------------------*/

body.th-game-master{
    padding-top: 15px;
}

.th-game-master .th-btn{
    margin-top: 30px;
    width: calc(100% - 25px);
    font-size: 150%;
    padding-top: 20px;
    border: solid 1px green;
}
.th-game-master .th-btn.th-btn-inactive{
    border: solid 1px gray;
}

.th-game-master-section{
    font-size: 150%;
    margin-top: 20px;
}

.th-game-master-elem {
    display: inline-block;
    width: 50%;
}

.th-btn.th-btn-shutdown{
    position: absolute;
    border: solid 1px darkred;
    left: 0;
    bottom: 100px;
}

.th-btn.th-btn-shutdown:hover{
    background: darkred;
    border: solid 1px red;
}
/*--------------------*/
/* Dev/Debug          */
/*--------------------*/

#th-gui{
    max-width: 500px;
    margin: auto;
    margin-top: 50px;
}
.th-text-label{
    display: none;
}

.th-debug{
    position: absolute;
    /* top: 10px; */
    /* left: 10px; */
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 80%;
}

.th-debug p{
    margin-top: 5px;
    margin-bottom: 5px;
}

.th-debug-label{
    display: inline-block;
    width: 60px;
}

body.th-debug .th-dialog p{
    border: dashed 0.5px #ff7;
}

body.th-debug .th-text-label{
    display: block;
    left: -1px;
    width: fit-content;
    height: 18px;
    position: relative;
    top: -18px;
    margin-bottom: -20px;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #ff7;
    color: black;
    font-size: 10pt;
}



/*--------------------*/
/* UI                 */
/*--------------------*/


.th-btn{
    display: inline-block;
    margin-right: 4px;
    background-color: black;
    text-align: center;
    padding: 5px;
    /* border: dashed 1px #900; */
    /* color: red; */
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
}

a.th-btn{
    transition: background-color 0.2s;
    color: lightgray;
    text-decoration: none;
    width: fit-content;
    padding: 10px;
    border: solid 1px darkgreen;
    background-color: black;
    margin: auto;
    /* transition: all 0.5s ease-in-out; */
}

body .dg.ac{
    z-index: 50;
}

a.th-btn:hover{
    color: white;
    background-color: darkgreen;
    border: solid 1px green;
}

a.th-btn.th-btn-sm{
    pointer-events: auto;
    background-color: darkgreen;
    border-radius: 4px;
    border: none;

    padding-top: 7px;
    padding-bottom: 1px;
    cursor: pointer;
}

a.th-btn.th-btn-sm:hover{
    color: white;
    background-color: green;
    /* transition: all 0.2s ease-in-out; */
}

a.th-btn.th-btn-sm.th-btn-inactive,
a.th-btn.th-btn-sm:disabled{
    color: gray;
    background-color: #333;
    pointer-events: none;
}

a.th-btn.th-btn-sm.th-btn-missing{
    color: gray;
    background-color: #500;
    pointer-events: none;
}

/* a.th-btn{ */
/*     color: lightgray; */
/*     text-decoration: none; */
/* } */

a.th-btn.th-btn-inactive{
    background-color: #333;
    color: black;
    pointer-events: none;
    border: 1px #333;
    /* border: dashed 1px #300; */
}

.th-btn-active{
    background-color: lightgray;
    color: black;
}

.th-btn-off{
    background-color: #111;
}

a.th-btn.th-btn-on{
    background-color: #eee;
    color: black;
}

/*--------------------*/
/* Layout             */
/*--------------------*/

.th-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.th-right{
    justify-content: flex-end;
}

.th-margin{
    margin: 10px;
}

.th-frame.th-scroll{
    overflow-y: scroll;
}


/*--------------------*/
/* Dialorgs           */
/*--------------------*/

#th-infos{
    pointer-events: none;
    position: absolute;
    z-index: 499;
    width: 100%;
}

#th-infos.th-infos-bottom{
    bottom: 30px;
}

#th-infos.th-infos-top{
    top: 0px;
}

#th-infos.th-infos-bottom .th-infos-content{
    background-color: rgba(0, 0, 0);
    border: solid 1px gray;
    padding: 10px;
    border-radius: 4px;
    padding-top: 17px;
}

#th-infos.th-infos-bg .th-infos-content{
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px 10px 10px 10px;
}

#th-infos.th-infos-jwst{
    width: 75%;
    left: 0;
    top: 5px;
}

.th-infos-content{
    font-size: 180%;
    margin-top: 30px;
    color: lightgray;
    text-align: center;
}

.th-dialog-container{
    position: absolute;
    top: 70vh;
    height: 30vh;
    width: 100vw;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.th-mod.th-dialog-container{
    top: 0px;
    height: 100vh;
}

.th-dialog{
    font-size: 170%;
    color: lightgray;
    text-align: center;
    max-width: 900px;
    transition: ease-in-out 1s;
}

.th-dialog.th-show{
    opacity: 1;
    transition: ease-in-out 1s;
}

.th-dialog-mod{
    height: 100%;
    width: 34%;
}

.th-dialog-mod .th-dialog{
    max-width: 70%;
}

.th-dialog-btns{
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: 5px;
}

.th-btn.th-btn-dialog{
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 150px;
    padding: 7px;
    padding-bottom: 2px;
    margin: 2px;
}
.th-btn.th-btn-dialog div{
    width: 100px;
}

.th-dialog-web .th-infos-content{
    margin-top: 0.5em;
    font-size: 150%;
}

.th-dialog-web .th-dialog-content{
    fontsize: 150%;
    padding: 20px 10px;
}

.th-dialog-web div{
    /* border: 0.5px #222 solid; */
}

.th-dialog-web{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
}

.th-dialog-head{
    min-height: 2em;
    margin-top: 0.5em;
    text-align: center;
}

.th-dialog-content{
    min-height: 2em;
    flex-grow: 5;
    text-align: center;
}

/*--------------------*/
/* Alfred             */
/*--------------------*/

.th-alfred-controls{
    position: absolute;
    bottom: 10px;
    right: 10px;
    /* width: 100%; */
}

.th-alfred-controls .th-btn{
    display: inline-block;
    float: right;
    margin-left: 10px;
    font-size: 150%;
    font-weight: bold;
    width: 50px;
}

/*--------------------*/
/* Animations         */
/*--------------------*/

.th-overlay{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 500;
}
.th-fade{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 999;
}
.th-hide{
    opacity: 0;
    transition: ease-in-out 1s;
}

.th-show{
    opacity: 1;
}



/*--------------------*/
/* Tables             */
/*--------------------*/

.th-row{
    display: flex;
    flex-direction: row; 
    align-items: center;
}

.th-col,
.th-column{
    display: flex;
    flex-direction: column;
}

.th-active-row{
    color: white;
}

.th-table-header{
    font-weight: bold;
    border-bottom: 1px solid;
}

.th-cell{
    padding: 5px;
}

.th-cell-2{
    width: 50%;
}

.th-cell-3{
    width: 33%;
}

.th-cell-4{
    width: 25%;
}

.th-tone-control{
    margin: 5px;
}

/*--------------------*/
/* Board              */
/*--------------------*/

.th-frame{
    border: solid 1px gray;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
    /* background-color: black; */
}

.th-hexa{
    fill: black;
    stroke: gray;
    stroke-width: 0.5;
}

.th-hexa-frame,
.th-hexa-starmap{
    fill: transparent;
    transition: all 2s ease-in-out;
    transition-property: fill, stroke;
}
.th-hexa-frame.th-hexa-a,
.th-hexa-starmap.th-hexa-a{
    fill: rgb(48, 0, 255);
    stroke: transparent;
}

.th-hexa-frame.th-hexa-b,
.th-hexa-starmap.th-hexa-b{
    fill: rgb(0, 255, 127);
    stroke: transparent;
}

.th-hexa-frame.th-hexa-c,
.th-hexa-starmap.th-hexa-c{
    fill: rgb(255, 205, 0);
    stroke: transparent;
}

foreignObject{
    pointer-events: none;
}

.th-hexa-html-content{
    position: relative;
    background-color: transparent;
}

.th-hexa-html-content .th-full-container{
    box-sizing: border-box;
}

.th-hexa-html-content h2{
}

.th-hexa-content{
    /* border: 1px solid blue; */
    color: white;
}

.th-hexa-value,
.th-hexa-title{
    fill: white;
}
.th-hexa-title{
    /* text-align: center; */
    /* margin-left: 30%; */
    /* background-color: black; */
    position: relative;
    /* color: white; */
    color: lightgray;
    font-size: 100%;
    margin-top: 0px;
    display: inline-block;
    /* padding: 5px; */
    padding-top: 6px;
    padding-left: 5px;
    padding-right: 5px;
    /* border: 1px solid lightgray; */
}

.th-hexa-is-title .th-hexa-value{
    font-size: 150%;
    font-weight: bold;
}
.th-hexa-value tspan{
    font-size: 70%;
}

.th-hexa-value{
    position: absolute;
    text-align: center;
    /* margin-left: 30%; */
    padding-left: 5px;
    font-size: 140%;
    /* font-weight: bold; */
    bottom: 10px;
}

/* #th-hexas-board .th-hexa { */
/*     fill: transparent; */
/* } */
#th-hexas-board .th-hexa{
    stroke: white;
    stroke-width: 1;
}

/*--------------------*/
/* Archives           */
/*--------------------*/

.th-archive-title{
    text-align: center;
    color: white;
    max-width: 80%;
}

.th-archive-num{
    color: darkred;
    font-weight: bold;
    margin-top: 50px;
    font-size: 120%;
}

.th-archive-date{
    margin-top: 15px;
    font-size: 150%;
}

.th-archive-title-text{
    margin-top: 15px;
    font-size: 200%;
    font-weight: bold;
}

.th-archive-subtitle{
    margin-top: 10px;
    font-size: 150%;
}

.th-subtitles-container{
    color: lightgray;
    position: absolute;
    height: 6em;
    bottom: 30px;
    width: 100%;
    /* border: solid 1px green; */
}

.th-subtitles{
    font-size: 170%;
    /* font-style: italic; */
    text-align: center;
}

.th-frame .th-subtitles-container{
    top: 15px;
    bottom: 10px;
    height: 3em;
}

.th-frame .th-subtitles{
    font-size: 140%;
    /* font-style: italic; */
    text-align: center;
    z-index: 1000;
}



/*--------------------*/
/* Synths             */
/*--------------------*/


.th-synth-range{
    padding: 5px;
    /* width: 400px; */
    color: white;
}

.th-synth-range.th-synth-control{
    color: gray;
}

.th-synth-range input{
    margin: 5px;
    width: 300px;
}

.th-synth-range label{
    position: relative;
    top: -5px;
    margin-left: 10px;
}

.th-synth-trig{
    margin: 10px;
    border: 1px solid gray;
}

/*--------------------*/
/* System             */
/*--------------------*/

.th-star{
    transition: fill 0.7s ease-in-out;
    fill: gold;
    pointer-events: none;
}

.th-star-decoration{
    stroke: gold;
    /* stroke-width: 2; */
}

.th-planet{
    transition: fill 0.7s ease-in-out;
    fill: #333;
    stroke: white;
    pointer-events: none;
}

.th-orbit{
    transition: stroke 0.7s ease-in-out;
    fill: transparent;
    stroke: gray;
    pointer-events: none;
}

.th-shadow{
    /* fill: hsl(25, 90%, 70%); */
    fill: orange;
}

.th-bw .th-star{
    /* transition: all 1s ease-in-out; */
    fill: white;
}
.th-bw .th-planet{
    fill: white;
}
.th-bw .th-orbit{
    stroke: white;
}

.th-planet-label{
    fill: white;
    font-size: 150%;
}

.th-planet-label-line{
    stroke: white;
}

.th-solar-system-title{
    fill: white;
    font-size: 250%;
    text-anchor: middle;
}

#th-solar-system .th-planet{
    fill: lightgray;
    stroke: none;
}

#th-solar-system .th-orbit{
    stroke: lightgray;
}

#th-planet-sun .th-orbit{
    display: none;
}

#th-planet-sun .th-planet-label{
    display: none;
}

#th-planet-sun .th-planet{
    fill: gold;
    stroke: none;
}
#th-planet-earth .th-planet-label-line,
#th-planet-earth .th-orbit{
    stroke: cyan;
}

#th-planet-earth .th-planet-label{
    fill: cyan;
}

#th-planet-gliese-b{
    fill: cyan;
}

#th-planet-gliese-b{
    fill: white;
}

#th-planet-earth,
#th-planet-earth .th-planet{
    fill: cyan;
    stroke: none;
}

.th-solar-system .tick text,
.th-type-system .tick text{
    color: white;
    font-size: 180%;
}

/*--------------------*/
/* Modules            */
/*--------------------*/

.th-mod-a{
    border: solid 1px;
    border-color: rgb(48, 0, 255);
}

.th-mod-b{
    border: solid 1px;
    border-color: rgb(0, 255, 127);
}

.th-mod-c{
    border: solid 1px;
    border-color: rgb(255, 205, 0);
}

.th-mod{
    font-size: 200%;
}

.th-mod a.th-btn{
    padding: 30px;
}
.th-a a.th-btn{
    border-color: blue;
}

.th-b a.th-btn{
    border-color: green;
}

.th-c a.th-btn{
    border-color: red;
}

.th-action{
    stroke-width: 2;
    fill: transparent;
    stroke: green;
}

.th-action:hover{
    fill: transparent;
    stroke: lightgreen;
}

/*--------------------*/
/* Graph              */
/*--------------------*/

.th-pt{
    stroke: lightgray;
    fill: lightgray;
}

.th-axis path,
.th-axis line{
    stroke: gray;
}

.th-axis text{
    fill: lightgray;
    font-size: 150%;
    stroke: none;
}

/*--------------------*/
/* Terminal           */
/*--------------------*/

.th-terminal{
    position: absolute;
    width: 100%;
    font-family: Monospace;
    /* font-size: 120%; */
}

.th-terminal div{
    /* width: fit-content; */
}

.th-terminal-out{
    padding: 15px;
}

.th-terminal-task{
    padding-top: 5px;
    padding-left: 5px;
    font-size: 200%;
    color: white;
}

.th-term-line{
    margin-left: 10px;
    max-width: 100%;
}

.th-term-deco{
    color: darkmagenta;
}

.th-term-login{
    /* color: plum; */
    color: orchid;
    /* color: thistle; */
    /* color: darkmagenta; */
    font-weight: 600;
}

.th-term-state{
    color: dodgerblue;
    font-weight: 500;
}

.th-term-invite{
    color: gray;
}

.th-term-content{
    color: white;
}

/*--------------------*/
/* Transit            */
/*--------------------*/

.th-web .th-transit-graph-svg{
    overflow: visible;
}

#th-transit-container svg{
    overflow: visible;
}

.th-sensor-grid-rect{
    stroke: #622;
    fill: none;
}

.th-gauge-rect{
    stroke:#555;
}

.th-landmark{
    stroke-width: 2;
    font-size: 150%;
}

.th-game .th-game-tap rect{
    fill: rgba(48, 0, 255, 0.3);
}

.th-game-biasstar-background{
    fill: rgba(0, 64, 32);
}

.th-game-biasstar-cursor{
    fill: rgba(0, 255, 127);
}

.th-game .th-game-biasstar rect{
    fill: rgba(0, 255, 127, 0.3);
}


.th-game-biasnoise-background{
    fill: rgba(255, 205, 0, 0.3);
}

.th-game .th-game-biasnoise rect{
    fill: rgba(255, 205, 0, 0.3);
}

.th-rect-noise{
    fill: rgba(255, 205, 0);
}

.th-target-done .th-rect-noise{
    fill: black;
    stroke: rgba(255, 205, 0);
}

.th-game rect.th-game-cursor{
    fill: transparent;
    stroke: lightgreen;
}

.th-transit-game-head{
    margin-left: 70px;
    margin-right: 20px;
    position: absolute;
    width: 100%;
    height: 150px;
}

.th-transit-game-head-div{
    text-align: center;
    width: 33%;
    height: 100%;
    font-size: 150%;
}

.th-transit-game-head-a{
    color: rgb(75, 20, 255);
}

.th-transit-game-head-b{
    color : rgba(0, 255, 127);
}

.th-transit-game-head-c{
    color: rgba(255, 205, 0);
}

/* Tap      */

.th-tap-container{
    width: 100%;
    height: 100%;
}

.th-valid{
    color: green;
}
.th-tap-label{
    color: lightgray;
    margin-right: 20px;
}
.th-web .th-tap-label{
    font-size: 120%;
}
.th-res-top{
    color: white;
    margin-bottom: 10px;
}

.th-btn-tap {
    margin: auto;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background: rgba(48, 0, 255);
    font-size: 300%;
    font-weight: bold;
    color: white;
}

.th-tap-indication{
    border: solid 1px lightgray;
    margin: 2px;
    padding: 10px;
}

.th-tap-indication h3{
    margin-top: 0px;
}

.th-tap-res-row{
    margin-top: 5px;
    border: solid 1px gray;
    width: 92%;
}

.th-tap-reinit{
    position: absolute;
    top: 10px;
    right: 10px;
}

.th-tap-suppr{
    position: relative;
    top: 7px;
    height: 100%;
    width: 8%;
    /* padding: 7px; */
    padding-top: 0px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 150%;

}

.th-web .th-tap-suppr{
    font-weight: bold;
    font-size: 170%;
    padding-top: 7px;
    padding-bottom: 0px;
    padding-left: 15px;
}

.th-tap-res{
    height: 100%;
    background-color: gray;
    color: black;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 12px;
}
.th-result-tap{
    stroke:  rgba(70, 20, 255);
             stroke-width: 3px;
}

.th-result-tap-failed{
    stroke:  red;
    stroke-width: 1px;
}
/*--------------------*/
/* Distance           */
/*--------------------*/
.th-simul-path{
    stroke: white;
    fill: transparent;
    stroke-width: 2;
}

.th-simul-tick{
    stroke: lightgray;
    stroke-width: 0.5;
    stroke-dasharray: 5 5;
}

.th-simul-label{
    pointer-events: none;
    font-size: 130%;
    user-select: none;
}

.th-simul-circle{
    stroke: lightgray;
    fill: transparent;
    pointer-events: none;
}

.th-simul-current{
    color: white;
}

.th-simul-num{
    width: 5%;
}

.th-simul-radius,
.th-simul-distance{
    width: 15%;
}

.th-simul-period{
    width: 25%;
}

.th-simul-ecart{
    width: 25%;
}

.th-obj{
    box-sizing: border-box;
    font-size: 120%;
    color: white;
    background-color: darkred;
    margin-top: 0;
    margin-bottom: 0.5em;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 3px;
    font-size: 100%;
    border-radius: 3px;
}

.th-obj.th-simul-valid{
    background-color: lightgreen;
    color: black;
}

.th-simul-valid{
    color: lightgreen;
    stroke: lightgreen;
}

.th-simul-suppr{
    cursor: pointer;
    flex-grow: 10;
    float: right;
    text-align: right;
    padding-right: 15px;
}

/*--------------------*/
/* Radius             */
/*--------------------*/

.th-label-radius{
    pointer-events: none;
    stroke-width: 2;
    stroke: lightgray;
}

.th-label-radius-text{
    font-size: 130%;
    stroke: none;
    fill: white;
    text-anchor: middle;
}

/*--------------------*/
/* Masse              */
/*--------------------*/

.th-label-masse{
    font-size: 130%;
    stroke: none;
    fill: white;
}

.th-masse-ecart{
    font-size: 160%;
    font-weight: bold;
    background: black;
}

/*--------------------*/
/* Spectre            */
/*--------------------*/

/* .th-gaz-name{ */
/*     margin-left: 0px; */
/*     height: 100%; */
/*     position: relative; */
/*     font-size: 150%; */
/*     text-align: center; */
/*     color: white; */
/* } */

/*--------------------*/
/* Final              */
/*--------------------*/


.th-arp-control p{
    margin-top: 0;
}

.th-arp-btn{
    width: 15px;
    height: 15px;
}

.th-arp-gaz-list .th-gaz-name{
    transition: background-color 0.3s;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    background-color: lightgray;
    padding: 15px 15px 8px 15px;
    margin: 10px;
    margin-top: 20px;
    width: 50px;
    cursor: pointer;
}
.th-arp-gaz-list .th-gaz-name.th-gaz-inactive{
    background-color: #555;

}
.th-arp-gaz-list{
    padding-bottom: 10px;
}

.th-final-mixer .th-hexa{
    stroke: white;
    stroke-width: 1.5;
}


.th-hexa-action{
    stroke: white;
    stroke-width: 1;
}

.th-arp-control{
    transition: border 0.3s;
    font-size: 200%;
    border: solid 1px gray;
    padding: 10px;
    margin-bottom: 20px;
    /* height: 56px; */
}

.th-arp-control-active{
    border-width: 3px;
    border-color: white;
}

.th-arp-btn{
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border: solid 1px white;
}

.th-arp-action{
    border: solid 2px lightgray;
}

.th-step{
    cursor: pointer;
    stroke-width: 4px;
    stroke-linejoin: round;
}


/*--------------------*/
/* Credits            */
/*--------------------*/

.th-credit-container{
    font-size: 32pt;

}
.th-credit-container div{
    /* border: solid 1px red; */
}

.th-credit-main-title{
    font-size: 200%;
    margin-bottom: 50px;
}

.th-credit-section{
    width: 100%;
    height:100vh;
    /* height: 100% */
}


.th-credit-title{
    font-weight: 700;
    font-size: 150%;
    margin-bottom: 0.5em;
    width: 100%;
    color: gray;
    margin-top: 20px;
    text-align: center;
    font-weight: bold
}

.th-credit-elem{
    display: flex;
    margin-bottom: 20px;
}

.th-credit-labelled{
    position: relative;
    width: 100%;
}

.th-credit-label{
    font-size: 70%;
}

.th-credit-labelled .th-credit-label{
    position: absolute;
    bottom: 4px;
    left: 50.5%;
    font-size: 70%;
    text-align: left;
    width: 50%;
    padding-left: 8px;
    /* line-height: 80px; */
    /* height: 60px; */
}

.th-credit-image{
    width: 400px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.th-credit-content{
    font-size: 100%;
    color: white;
    text-align: center;
    padding-right: 8px;
    width: 100%;
    line-height: 36pt;
}

.th-credit-labelled .th-credit-content{
    padding-right: 15px;
    text-align: right;
    width: 50%;
}

.th-credit-labelled .th-credit-col{
    padding-left: 15px;
    text-align: left;
    color: white;
    width: 50%;
}

.th-credit-partner{
    color: #555;
    font-size: 80%;
    /* margin-top: 100px; */
    margin-bottom: 50px;
}

.th-credit-space{
    height: 150px;
}

.th-credit-title-sm{
    font-weight: lighter;
    font-size: 100%;
    margin-bottom: 0.5em;
    width: 100%;
    color: gray;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.th-bottom-overlay{
    position: fixed;
    top: 721px;
    left: 0px;
    width: 1920px;
    height: 500px;
    background-color: black;
    z-index: 1000;
}