:root {
    --sidebar-brand-image-height: 150px;
    --sidebar-brand-image-margin-right: 0px;
    --content-title-font-size: 2.4rem;
}
.sidebar-brand img {
    margin: auto;
}
@media only screen and (min-width: 768px) {
    :root {
        --navbar-height: 0px;
    }
}
.content-title {
    margin-bottom: 0.25rem;
}
.content-subtitle {
    margin-top: 0px;
    margin-bottom: 0.25rem;
}
.bg-youtube {
    background-color: red !important;
}
.bg-twitch {
    background-color: #6441a5 !important;
}
.bg-twitter {
    background-color: #1DA1F2 !important;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
}
.content > h1 {
    font-size: 2.4rem !important;
}
.content > h2 {
    font-size: 2.2rem !important;
}
.content > h3 {
    font-size: 2.0rem !important;
}
.content > h4 {
    font-size: 1.8rem !important;
}
.content > h5 {
    font-size: 1.6rem !important;
}
.toc {
    position: fixed;
    max-height: 90%;
    overflow-y: auto;
}
.body {
    min-height: 50%;
}
.postbody {
    max-width: 1150px;
}
.footer {
	background: linear-gradient(rgba(1,10,25,1), rgba(1,10,25,.1)), url("/img/footer.webp");
	background-size: cover;
	background-repeat: no-repeat;
}
.front-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 400px;
}
.front-video > video {
    width: 100%;
    margin-top: -25%;
}
.front-video > .hero {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('/img/bg.png'),linear-gradient(to bottom, rgba(0,0,0,0.50) 0%,rgba(0,0,0,0.50) 100%);
    background-repeat: repeat, no-repeat;
}
.text-hero {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-text {
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
}
iframe {
    border: 0px;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.toc ul ul {
    margin: 0.5rem 0 0 1.5rem;
}
.toc > ul > li {
    margin: 0;
}
.toc ul {
    margin: 0;
}
.toc ul > li {
    margin-bottom: 0.5rem;
}
.toc a {
    font-size: 1.2rem;
}
.postbody img {
    max-width: 100%;
    height: auto;
}

.partner-logo {
    max-width: 150px;
    height: auto;
}

.img-lightbox {
    max-width: 320px !important;
    height: auto !important;
}

.sidebar {
    background-image: linear-gradient(
  0deg,
  hsl(0deg 0% 0%) 0%,
  hsl(213deg 23% 7%) 50%,
  hsl(214deg 12% 11%) 100%
    ) !important;
}

/*--- - -- 2021 Grid -- - --- */

.gridcontainer {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    grid-template-rows: repeat(9, minmax(100px, 1fr));
    width: 100%;
    grid-column-gap: 25px;
    grid-row-gap: 10px;
    max-width: 960px;
    
}

/*--- - -- START 2021 Grid @media queries -- - --- */

@media only screen
 and (min-width: 1200px) {
.gridcontainer {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    margin: 0 auto;
    
}
div.gridcontainer img.grid-logo {
    max-width: 490px !important;
    overflow: visible;
    border: none;
    margin:  -140px 0;
}

div.gridcontainer img {
max-width: 100px;
width: 100%;
border: none;
margin: 0 auto;
}

div.gridcontainer .gridsixtwo a {

overflow: visible;
}

}


@media only screen
and (min-width:500px)
and (max-width: 1200px) {
.gridcontainer {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

div.gridcontainer img {
max-width: 100px;
width: 100%;
border: none;
margin: 0 auto;
}

div.gridcontainer img.grid-logo {
max-width: 210px;
}
}

/*mobile*/
@media screen 
and (max-width: 500px) {
.gridcontainer {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}


div.gridcontainer a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100%;
}

div.gridcontainer img {
max-width: 300px !important;
width: 100%;
border: none;
padding: 20px 0;
}


/*	div.gridcontainer a {
    vertical-align: middle;
    text-align: center;

}

div.gridcontainer img {
max-width: 300px !important;
width: 100%;
border: none;
margin: 0 auto;
min-height: 120px;
padding: 20px 0;
}*/



div.gridcontainer img.grid-logo {
display: none;
}

}

/*--- - -- END 2021 Grid @media queries -- - --- */

div.gridcontainer img {
object-fit: cover;
max-width: 150px;
}

div.gridcontainer img:hover {

-webkit-filter: drop-shadow(0px 0px 17px rgba(8, 133, 218, 0.95));
 filter: drop-shadow(0px 0px 17px rgba(8, 133, 218, 0.95));
 transition: filter 0.3s ease-in-out;
 transition: -webkit-filter 0.3s ease-in-out;

}

.grid-logo-2021 {
    grid-row: 5/5;
    grid-column: 2 / 5;
    overflow: visible;
}

.grid-logo {
    grid-row: 3/5;
    grid-column: 2 / 4;
}

div.gridcontainer a {
max-width: 150px;
border: none !important;
color: transparent;
}



/*--- - --- - --- - --- - --- - --- - --- - ---*/



.gridoneone {
grid-row: 1 /2;
grid-column: 1/2;
}

.gridonetwo {
grid-row: 1 /2;
grid-column: 2/3;
}

.gridonethree {
grid-row: 1 /2;
grid-column: 3/4;
}

.gridonefour {
grid-row: 1 /2;
grid-column: 4/5;
}

.gridonefive {
grid-row: 1 /2;
grid-column: 5/6;
}

.gridtwoone {
grid-row: 2 /3;
grid-column: 1/2;
}

.gridtwotwo {
grid-row: 2 /3;
grid-column: 2/3;
}

.gridtwothree {
grid-row: 2 /3;
grid-column: 3/4;
}

.gridtwofour {
grid-row: 2 /3;
grid-column: 4/5;
}

.gridtwofive {
grid-row: 2 /3;
grid-column: 5/6;
}

.gridthreeone {
grid-row: 3 / 4;
grid-column: 1/2;
}

.gridthreetwo {
grid-row: 3 / 4;
grid-column: 2/3;
}

.gridthreethree {
grid-row: 3 / 4;
grid-column: 3/4;
}

.gridthreefour {
grid-row: 3 / 4;
grid-column: 4/5;
}

.gridthreefive {
grid-row: 3 / 4;
grid-column: 5/6;
}

.gridfourone {
grid-row: 4 / 5;
grid-column: 1/2;
}

.gridfourtwo {
grid-row: 4 / 5;
grid-column: 2/3;
}

.gridfourthree {
grid-row: 4 / 5;
grid-column: 3/4;
}

.gridfourfour {
grid-row: 4 / 5;
grid-column: 4 / 5;
}

.gridfourfive {
grid-row: 4 / 5;
grid-column: 5/6;
}

.gridfiveone {
grid-row: 5 / 6;
grid-column: 1/2;
}

.gridfivetwo {
grid-row: 5 / 6;
grid-column: 2/3;
}

.gridfivethree {
grid-row: 5 / 6;
grid-column: 3/4;
}

.gridfivefour {
grid-row: 5 / 6;
grid-column: 4/5;
}

.gridfivefive {
grid-row: 5 / 6;
grid-column: 5/6;
}

.gridsixone {
grid-row: 6 /7;
grid-column: 1/2;
}

.gridsixtwo {
grid-row: 6 / 7;
grid-column: 2/3;
}

.gridsixthree {
grid-row: 6 /7;
grid-column: 3/4;
}

.gridsixfour {
grid-row: 6 / 7;
grid-column: 4/5;
}

.gridsixfive {
grid-row: 6 /7;
grid-column: 5/6;
}

/*seven*/

.gridsevenone {
grid-row: 7 /8;
grid-column: 1/2;
}

.gridseventwo {
grid-row: 7 / 8;
grid-column: 2/3;
}

.gridseventhree {
grid-row: 7 /8;
grid-column: 3/4;
}

.gridsevenfour {
grid-row: 7 / 8;
grid-column: 4/5;
}

.gridsevenmid {
grid-row: 7 /8;
grid-column: 2/4;
}


.gridsevenfive {
grid-row: 7 /8;
grid-column: 5/6;
}

/*eight*/

.grideightone {
grid-row: 8/9;
grid-column: 1/2;
}

.grideighttwo {
grid-row: 8/9;
grid-column: 2/3;
}

.grideightthree {
grid-row: 8/9;
grid-column: 3/4;
}

.grideightfour {
grid-row: 8/9;
grid-column: 4/5;
}

/*.grideightmid {
grid-row: 8/9;
grid-column: 2/4;
}*/


.grideightfive {
grid-row: 8/9;
grid-column: 5/6;
}

/*grid nine*/

.gridnineone {
grid-row: 9/10;
grid-column: 1/2;
}

.gridninetwo {
grid-row: 9/10;
grid-column: 2/3;
}

.gridninethree {
grid-row: 9/10;
grid-column: 3/4;
}

.gridninefour {
grid-row: 9/10;
grid-column: 4/5;
}

/*.gridninemid {
grid-row: 9/10;
grid-column: 2/4;
}*/


.gridninefive {
grid-row: 9/10;
grid-column: 5/6;
}