@font-face {
    font-family: GreatDay;
    src: url(/fonts/GreatDay/greatday-webfont.eot);
    src: url(/fonts/GreatDay/greatday-webfont.eot?#iefix) format('embedded-opentype'), url(/fonts/GreatDay/greatday-webfont.woff2) format('woff2'), url(/fonts/GreatDay/greatday-webfont.woff) format('woff'), url(/fonts/GreatDay/greatday-webfont.ttf) format('truetype'), url(/fonts/GreatDay/greatday-webfont.svg) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto-Thin;
    src: url(/fonts/Roboto-Thin/roboto-thin-webfont.eot);
    src: url(/fonts/Roboto-Thin/roboto-thin-webfont.eot?#iefix) format('embedded-opentype'), url(/fonts/Roboto-Thin/roboto-thin-webfont.woff2) format('woff2'), url(/fonts/Roboto-Thin/roboto-thin-webfont.woff) format('woff'), url(/fonts/Roboto-Thin/roboto-thin-webfont.ttf) format('truetype'), url(/fonts/Roboto-Thin/roboto-thin-webfont.svg) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin/roboto-thin-webfont.eot);
    src: url(/fonts/Roboto-Thin/roboto-thin-webfont.eot?#iefix) format('embedded-opentype'), url(/fonts/Roboto-Thin/roboto-thin-webfont.woff2) format('woff2'), url(/fonts/Roboto-Thin/roboto-thin-webfont.woff) format('woff'), url(/fonts/Roboto-Thin/roboto-thin-webfont.ttf) format('truetype'), url(/fonts/Roboto-Thin/roboto-thin-webfont.svg) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Typo-Bold;
    src: url(/fonts/Typo/typo-bold-webfont.eot);
    src: url(/fonts/Typo/typo-bold-webfont.eot?#iefix) format('embedded-opentype'), url(/fonts/Typo/typo-bold-webfont.woff2) format('woff2'), url(/fonts/Typo/typo-bold-webfont.woff) format('woff'), url(/fonts/Typo/typo-bold-webfont.ttf) format('truetype'), url(/fonts/Typo/typo-bold-webfont.svg) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Lexend;
    src: url(/fonts/Lexend/Lexend-Regular.eot);
    src: url(/fonts/Lexend/Lexend-Regular.eot?#iefix) format('embedded-opentype'), url(/fonts/Lexend/Lexend-Regular.woff2) format('woff2'),         url(fonts/Lexend/-Regular.woff) format('woff'), url(/fonts/Lexend/Lexend-Regular.ttf) format('truetype'), url(/fonts/Lexend/Lexend-Regular.svg#Lexend-Regular) format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lexend-Thin;
    src: url(/fonts/Lexend/Lexend-Thin.eot);
    src: url(/fonts/Lexend/Lexend-Thin.eot?#iefix) format('embedded-opentype'), url(/fonts/Lexend/Lexend-Thin.woff2) format('woff2'), url(/fonts/Lexend/Lexend-Thin.woff) format('woff'), url(/fonts/Lexend/Lexend-Thin.ttf) format('truetype'), url(/fonts/LexendLexend-Thin.svg#Lexend-Thin) format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lexend-ExtraLight;
    src: url(/fonts/Lexend/Lexend-ExtraLight.eot);
    src: url(/fonts/Lexend/Lexend-ExtraLight.eot?#iefix) format('embedded-opentype'), url(/fonts/Lexend/Lexend-ExtraLight.woff2) format('woff2'), url(/fonts/Lexend/Lexend-ExtraLight.woff) format('woff'),  url(/fonts/Lexend/Lexend-ExtraLight.ttf) format('truetype'), url(/fonts/Lexend/Lexend-ExtraLight.svg#Lexend-ExtraLight) format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Aptos';
    src: url('/fonts/Aptos/Aptos.eot');
    src: url('/fonts/Aptos/Aptos.eot?#iefix') format('embedded-opentype'), url('/fonts/Aptos/Aptos.woff2') format('woff2'), url('/fonts/Aptos/Aptos.woff') format('woff'), url('/fonts/Aptos/Aptos.ttf') format('truetype'), url('/fonts/Aptos/Aptos.svg#Aptos') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aptos-Narrow';
    src: url('/fonts/Aptos-Narrow/Aptos-Narrow.eot');
    src: url('/fonts/Aptos-Narrow/Aptos-Narrow.eot?#iefix') format('embedded-opentype'), url('/fonts/Aptos-Narrow/Aptos-Narrow.woff2') format('woff2'), url('/fonts/Aptos-Narrow/Aptos-Narrow.woff') format('woff'), url('/fonts/Aptos-Narrow/Aptos-Narrow.ttf') format('truetype'), url('/fonts/Aptos-Narrow/Aptos-Narrow.svg#Aptos-Narrow') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    margin: 0;
    /*font-family: Lexend-ExtraLight, Roboto, sans-serif;*/
    /*font-family:  Aptos-Narrow, Roboto, sans-serif;*/
    font-family: Aptos-Narrow, Roboto, sans-serif;
    font-weight: 100 !important;
    background: rgb(45, 55, 66);
    /*background: linear-gradient(-20deg, #030f17 0%, rgba(37, 218, 235, .05) 60%, #061F2F 100%);*/
    background: linear-gradient(-20deg, var(--background-color-1) 0%, var(--background-color-2) 60%, var(--background-color-3) 100%);
    min-height: 100vh;
    background-size: cover;
    color: var(--font-color);
    cursor: default;
}

.Roboto {
    font-family: Roboto, sans-serif !important;
    font-size:  1.2rem;
}

.chart {
    width: 100%;
    min-height: 150px;}
    .chart text {
        fill: rgba(248, 249, 250, .75) !important;
        text-transform: capitalize;
    }

    .google-visualization-tooltip {
        color: #000000;
        padding: 0.25rem !important;
    }
    .google-visualization-tooltip-item-list {
        padding: 0 !important;
    }
    .google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child {
        margin: 0rem !important;
    }
    .google-visualization-tooltip-item {
        margin: 0rem !important;
        padding: 0rem !important;
    }

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    background-color: var(--fade-color) ;
    
    margin: 0.5rem;
    margin-top: 0rem;
    /*margin-bottom: 0.5rem;*/
    border: none;
    user-select: none;

    font-size: 1rem;
}

div[class^='col'], div[class*=' col'] {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.navbar-collapse {margin-bottom: 0 !important;}

div[class^='row'], div[class*=' row'] {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.card {
    /*height: 100%;*/
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    background-color: var(--fade-color);
    background: linear-gradient(90deg, var(--fade-color-1) 0%, var(--fade-color-2) 60%);
   
    border-radius: 0.25rem; }
    .card > hr {
      margin-right: 0;
      margin-left: 0; }
    .card > .list-group:first-child .list-group-item:first-child {
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem; }
    .card > .list-group:last-child .list-group-item:last-child {
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem; }

.list-group-item.urllink {
    padding: 0.25rem 0.25rem;
}

.card-body {
    /*height: 100%;*/
    flex: 1 1 auto;
    padding: 0.25rem;
    background-color: initial;
    background: initial;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

span[class^='card-'] + span[class^='card-']::before, span[class*=' card-'] + span[class*=' card-']::before {
    display: inline-block;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    color: #6c757d;
    content: "/";
}

.card-title {
    margin-bottom: 0rem; }
    .card-title.plex {
        font-size: 2rem;
        /*font-size: 1.5vb;*/
        line-height: 2rem;}

.card-subtitle {
    margin-bottom: 0.15rem; }
    .card-subtitle.plex {
        font-size: 1.2rem;
        line-height: 1.4rem;}

.card-img-top {
    object-fit: cover;
    object-position: 50% 50%;
    /*height: calc(card-img-top * 1.5) !important;*/
    /*height: calc(100vw / 1.777777778) !important;*/
}

.card-footer {
    flex: 1 1 auto;
    padding: 0.25rem;
    background-color: rgba(0, 0, 0, .3);
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .4) 60%);
    border-top: initial; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    padding-right: 0.25rem;
    /*font-size: 0.7em;*/
    color: rgba(248, 249, 250, .75);
    text-transform: capitalize;}
    .card-footer:last-child {
      border-radius: initial; 
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
}

.card-header {
    flex: 1 1 auto;
    padding: 0.25rem;
    background-color: rgba(0, 0, 0, .3);
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .4) 60%);
    border-top: initial; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    padding-right: 0.25rem;
    /*font-size: 0.7em;*/
    color: rgba(248, 249, 250, .75);
    text-transform: capitalize;
}

.media {
    /*height: 100%;*/
    display: flex;
    align-items: flex-start; 
    padding: 0.25rem;
}

.media-body {
    flex: 1; 
    min-width: 0;
}

.icon.on {
    background-color: var(--success);
}

.icon.off {
    background-color: var(--danger);
}

.script {
    font-family: GreatDay;
}

.text-main {
    color: var(--color-system) !important;
    /*color: rgba(7,124,188,.6) !important;*/
}

.border-main {
    border-color: var(--highlight) !important;
    /*border-color: rgba(7,124,188,.5) !important;*/
}

.border-none {
    border: none !important;
}

.border-orange {
    border-color: orange !important;
    border-width: 2px !important;
}

.border-system {
    border-color: var(--color-system) !important;
    border-width: 2px !important;
}

.text-system {
    color: var(--color-system) !important;
}

.bg-system {
    background-color: var(--color-system) !important;
}

.bg-system-dark {
    background-color: var(--color-system-dark) !important;
}

.bg-main {
    background-color: var(--highlight) !important;
    /*background-color: rgba(7,124,188,.4) !important;*/
}

.bg-gradient {
    background-color: rgba(0, 0, 0, .3);
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .4) 60%);
}

.h-16-9 {
    width: 100% !important;
    padding-top: 56.25%;
    background-size: cover !important;
}
/*
.plex-carousel {
    background-size: 70% auto !important;
}
*/
.media {
    background-color: rgba(0, 0, 0, .0);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.scale-130 {
    opacity: 1;
    transform: scale(1.3);
    margin: 0.5rem;
}

.bg-gradient-simple {
    background-color: rgba(0, 0, 0, .3);
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .4) 60%);
}

.filler {
    width: 0.5rem !important;
    background: rgba(0, 0, 0, .4);
}
.watermark {
    position: relative;
    top: -20px;
    margin-bottom: -20px;
    z-index: 1;
    font-size: 20px;
}

.script.clock {
    position: relative;
    top: 110px;
    margin-top: -110px;
    z-index: 1;
/*
    background: -webkit-linear-gradient(90deg, var(--main-color-1), var(--main-color-2)) !important;
    background-clip: text;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
        */
}

#weather {
    line-height: 1.5em
}

.reload,
.load {
/*
    max-height: 0px;
    overflow: hidden !important;
*/
    display: none;
}

.reload.expanded,
.load.expanded {
/*
    max-height: initial !important;
*/
    display: block;
}

#datetext {
    font-family: Typo-Bold;
    color: rgba(255, 255, 255, .5);
    position: relative;
    top: -60px;
    margin-bottom: -60px;
    z-index: 1;
    font-size: 8em;
    line-height: .5em
}

#clock,
#date,
#error {
    /*color: rgba(255, 255, 255, .6);*/
    /*font-family: Roboto-Thin;*/
    font-family: Lexend-Thin;
    z-index: 2
}

.social-box {
    display: inline-block;
    width: 3em;
    height: 3em;
    text-align: center
}

.social-box:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -8px
}

.social-box a {
    color: #fff;
    font-size: 1.2em;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    padding-left: 9px
}

html {
  
    user-select: none;
}


.notes {
    user-select: text;
}

.password {
    user-select: text;
    font-family: monospace !important;
}

.userSelectNone {
    user-select: none !important;
}

.userSelectText {
    user-select: text !important;
}

.userSelectAll {
    user-select: all !important;
}


body, .background {
    background:
    linear-gradient(var(--background-color-1), transparent),
    linear-gradient(to top left, var(--background-color-2), transparent),
    linear-gradient(to top right, var(--background-color-3), transparent);
    background-blend-mode: screen;

}

body.darktheme {
    background: #181818;
}

pre {
    user-select: text;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(230, 230, 230, .8);
}

#loading {
    display: none;
    background: rgb(45, 55, 66);
    background: linear-gradient(0deg, rgba(45, 55, 66, 1) 0%, rgba(60, 64, 68, 1) 60%, rgba(32, 38, 50, 1) 100%);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    top: 0;
}

.square {
    height: 60px;
    width: 40px;
    text-align: center;
    line-height: 60px;
    overflow: hidden;
    white-space: nowrap;
    font-family: Roboto, sans-serif;
    padding: 2px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.square.large {
    height: 75px;
    width: 50px;
    line-height: 75px;
}

.square.detail {
    height: 75px;
    width: 50px;
    line-height: 75px;
}

#header {
    background-position: center center
}

.progress {
    height: 3px;
}

.dot {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 1em;
    overflow: hidden;
    white-space: nowrap;
    font-family: Roboto, sans-serif;
}

.text-normal {
    font-size: medium;
}

.text-large {
    font-size: 2em;
}

.text-black-50 {
    color: rgba(0, 0, 0, .5) 
}

.text-black-75 {
    color: rgba(0, 0, 0, .75) 
}

.text-white-25 {
    color: rgba(255, 255, 255, .25) 
}

.text-white-50 {
    color: rgba(255, 255, 255, .5) 
}

.text-white-75 {
    color: rgba(255, 255, 255, .75) 
}

.text-muted {
    color: #7b838a !important;
}

.text-light {
    color: var(--font-color-light) !important;
}

.text-light-25 {
    color: rgba(248, 249, 250, .25) 
}

.text-light-50 {
    color: rgba(248, 249, 250, .5) 
}

.text-light-75 {
    /* color: rgba(248, 249, 250, .75) !important */
    color: rgba(248, 249, 250, .75) 
}

.text-10 {
    font-size: 0.1em;
}

.text-20 {
    font-size: 0.2em;
}

.text-30 {
    font-size: 0.3em;
}

.text-40 {
    font-size: 0.4em;
}

.text-50 {
    font-size: 0.5em;
}

.text-60 {
    font-size: 0.6em;
}

.text-70 {
    font-size: 0.7em;
}

.text-80 {
    font-size: 0.8em;
}

.text-90 {
    font-size: 0.9em;
}

.text-100 {
    font-size: 1em;
}

.text-110 {
    font-size: 1.1em;
}

.text-120 {
    font-size: 1.2em;
}

.text-125 {
    font-size: 1.25em;
}

.text-150 {
    font-size: 1.5em;
}

.text-200 {
    font-size: 2em;
}

.text-300 {
    font-size: 3em;
}

.bg-Work {
    background-color: rgba(31, 60, 94, .5) !important;
}

.bg-Home {
    background-color: rgba(47, 86, 93, .5) !important;
}

.bg-fade {
    background-color: rgba(0, 0, 0, .3);
    background-color: var(--fade-color);
}

.bg-mid-fade {
    background-color: rgba(20, 20, 20, .6);
  /*  background-color: rgb(35, 40, 44);
    box-shadow: 0 0 1px 1px rgba(106, 229, 211, .2) !important;
    */
}

.bg-dark-fade {
    background-color: rgba(0, 0, 0, .2)
}
.bg-light-fade {
    background-color: rgba(255, 255, 255, .8)
}
.carousel-dark {
    background-color: rgba(0, 0, 0, .6)
}

.bg-light-fade {
    background-color: rgba(248, 249, 250, .12)
}

.border-light-fade {
    border-color: rgba(248, 249, 250, .3) !important
}

.border-trans {
    border-color: transparent !important
}

.bg-lightfade {
    background-color: rgba(0, 0, 0, .1)
}

.bg-none {
    background-color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
}

.btn-menu {
    color: rgba(248, 249, 250, .8);
    background-color: none;
    border-color: none;}
    .btn-menu:hover {
        color: rgba(248, 249, 250, 1);
        background-color: rgba(255, 255, 255, .1);
        text-decoration: none; }

.navbar-toggler {
    padding: initial;
    font-size: 1rem;
    line-height: 1;
    background-color: transparent;
    border: 0px solid transparent;
    border-radius: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
    /*color: rgba(248, 249, 250, .75);*/
    color: var(--menu-font-color);    
}
.navbar-dark {
    background-color: var(--menu-background);
    color: var(--menu-font-color);    
}

.navbar-sub {
    background-color: var(--submenu-background);
    /*min-height: 50px;*/
}

.dropdown-menu {
    color: rgba(248, 249, 250, .75);
    background-color: #0D242E;
    background-color: rgba(0, 0, 0, .8);
    /*background-color: #136674;
    background-color:var(--highlight);
    background-color: var(--menu-background);*/
    background-color: #1F272C;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 0.25rem;
    font-size: 1em;
}

.dropdown-menu {
    border: none !important;
    border-left: 1px solid var(--color-system) !important;
}


/*.dropdown-item, .nav-item {*/
.dropdown-item, .nav-link {
    font-weight: inherit;
    cursor: pointer;
    border-radius: 0.25rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;}
/*    .dropdown-item:hover, .dropdown-item:focus, .nav-item:hover, .nav-item:focus {*/
    .nav-link:hover, .nav-link:focus {
        color: #16181b;
        text-decoration: none;
        background-color: #136674;
        background-color:var(--highlight);
        transition: background-color 0.75s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: var(--highlight);
    transition: background-color 0.75s ease;
    border-radius: 0px;
}


.border-3 {
    border-width: 3px !important
}

.background-image {
    z-index: 1;
    display: block;
    background-size: cover;
    height: 120%;
    filter: blur(20px) brightness(70%);
    margin: -40px
}

.content {
    z-index: 9999;
    padding: 20px
}

.content:after {
    display: table;
    clear: both;
    content: ''
}

.link {
    cursor: pointer;
}

.link:hover {
    background-color: var(--highlight);
    transition: background-color 0.75s ease;
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-item+.list-item {
    padding-left: 0.5rem;
}

.list-item+.list-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    content: "|";
}

#alpha {
    padding: 0;
    padding-top: 0;
    margin: 0
}

#alpha li div {
    margin: 5px;
    text-align: center
}

#alpha li {
    float: left;
    list-style: none
}

#alpha img {
    width: 100%
}

.button,
.buttonWrap {
    transition: background .5s ease-out;
    transition: color .5s ease-out
}

h1 {
    text-align: center;
    margin-top: 60px;
    color: #efefef
}

h2 {
    font-size: 1em;
    font-weight: 600;
    margin: 30px 0px 10px;
    color: #efefef
}

h2 i.fas {
    margin-right: 8px
}


@media screen and (max-width:991px) {
    .plex-carousel {
        background-size: cover !important;
    }
}
@media screen and (max-width:800px) {
    .buttonbox {
        width: 392px
    }

    h2 {
        text-align: center;
        margin: 15px 10px 10px;
    }

    .nomobile {
        display: none;
    }
}

@media screen and (max-width:409px) {
    .buttonbox {
        width: 196px
    }

    h1 {
        padding: 0 40px;
        margin-top: 40px
    }

    .list-item+.list-item {
        padding-left: 0rem;
    }
    
    .list-item+.list-item::before {
        display: inline-block;
        padding-right: 0rem;
        color: #6c757d;
        content: "";
    }
}


@media screen and (min-width:600px) {

    .dropdown:hover .dropbtn,
    .topnav a:hover {
        /*background-color: rgba(230, 0, 0, .4);*/
        background-color: rgba(26, 213, 210, .3);
        background-color:var(--highlight);
        color: rgb(255, 255, 255, 1)
    }

    .dropdown-content a:hover {
        background-color: #ddd;
        color: #000;
        background-color: rgba(26, 213, 210, .5);
        background-color:var(--highlight);
        color: rgb(255, 255, 255, 1)
    }

    .dropdown:hover .dropdown-content {
        display: block
    }
}

@media screen and (max-width:600px) {

    .dropdown .dropbtn,
    .topnav a:not(:first-child) {
        display: none
    }

    .topnav a.bars {
        float: right;
        display: block
    }
}

@media screen and (max-width:600px) {
    .topnav.responsive {
        position: relative
    }

    .topnav.responsive .bars {
        position: absolute;
        right: 0;
        top: 0
    }

    .topnav.responsive .active {
        border-bottom: 1px solid #dee2e6 !important;
        border-color: #6c757d !important
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        background-color: rgba(255, 255, 255, .1);
        background-color: rgba(0, 0, 0, .1);
    }

    .topnav.responsive a.main {
        background-color: transparent;
    }

    .topnav.responsive .dropdown {
        float: none
    }

    .topnav.responsive .dropdown-content {
        position: relative;
        display: block;
        background-color: rgba(255, 255, 255, .1)
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left
    }

    .topnav.responsive .dropdown .dropbtn .fas {
        display: none
    }
}

.card-columns {
    column-count: 1
}

.DataTime {
    font-size: 0.5em;
}

.thumb {
    width: 100px;
    /*height: 50px;*/
    object-fit: cover;
}
.cover {
    object-fit: cover;
}

.icon {
    --icon-height: 60px;
    --icon-width: calc(var(--icon-height) * 0.6666666666666667);
}

.icon-square {
    --icon-height: 100px;
    --icon-width:  100px;
}

.icon-square-75 {
    --icon-height: 75px;
    --icon-width:  75px;
}

.icon-tab {
    --icon-height: 100px;
}

.icon-medium, .icon.medium {
    --icon-height: 100px;
}

.icon-small, .icon.small {
    --icon-height: 40px;
}

.icon-large, .icon.large {
    --icon-height: 140px;
        background-position: top !important;
}

.icon-driver-small {
    --icon-height: 75px;
    width: calc(var(--icon-height) * 1.5) !important;

    background-position: top !important;
}


.icon.news {
    --icon-height: 170px;
    height: var(--icon-height);
    line-height: 75px;
    width: calc(var(--icon-height) * 1.5) !important;
}

.icon.news.top {
    --icon-height: 170px;
    height: var(--icon-height);
    line-height: 75px;
    width: calc(var(--icon-height) * 1.5) !important;
    background-position: top !important;
}

.icon.news-small {
    --icon-height: 70px;
    height: var(--icon-height);
    line-height: 75px;
    /*width: calc(var(--icon-height) * 1.5) !important;*/
}

.icon-driver {
    --icon-height: 100px;
    height: var(--icon-height);
    line-height: 75px;
        width: calc(var(--icon-height) * 0.75) !important;
}

.icon-driver-large {
    --icon-width: 120px;
    height: calc(var(--icon-width) * 1.5) !important;
       background-position: top !important;
}

.icon-team {
    --icon-height: 75px;
    height: var(--icon-height);
    line-height: 75px;
        width: calc(var(--icon-height) * 1.5) !important;
}

.icon-team-large {
    --icon-height: 100px;
}

.trans {
    opacity:0.4;
}
@media (min-width:576px) {
    .card-columns {
        column-count: 2
    }

    .dot {
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 1.2em;
        overflow: hidden;
        white-space: nowrap;
    }

    .breadcrumb {
        padding: 0.75rem 1rem;
    }



}

@media (min-width:768px) {
    .card-columns {
        column-count: 3
    }

    .icon-medium {
        --icon-height: 120px;
    }

    .icon-large {
        --icon-height: 200px;
    }

    .icon-driver-large {
        --icon-width: 250px;
        height: calc(var(--icon-width) * 0.75) !important;
        background-position: top !important;
    }

}

@media (min-width:992px) {
    .card-columns {
        column-count: 4
    }

    .icon-medium {
        --icon-height: 150px;
    }

    .icon-large {
        --icon-height: 350px;
    }
}

@media (min-width:1200px) {
    .card-columns {
        column-count: 4
    }
}

.wide {
    --icon-width: calc(var(--icon-height) * 1.5) !important;
    /*width: calc(var(--icon-height) * 1.5) !important;*/
}


.top {
    background-position: top !important;
}



.icon-normal {
    --icon-width: calc(var(--icon-height) * 0.6666666666666667) !important;
}

div[class*="icon"], img[class*="icon"] {
    height: var(--icon-height);
    /*width: calc(var(--icon-height) * 0.6666666666666667);
    min-width: calc(var(--icon-height) * 0.6666666666666667);*/
    width: var(--icon-width);
    min-width: var(--icon-width);
    line-height: var(--icon-height);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    font-family: Roboto, sans-serif;
    padding: 2px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, .3);
    
    color: #f8f9fa;
    margin-right: 0.5rem;
    /*border-radius: 0.25rem;*/
    float: left;

    transition: all .4s ease;
    /*transition: width 2s, height 2s;*/
}

.media-body:hover > .icon {
    /*
    width: calc(var(--icon-width) * 2);
    height: calc(var(--icon-height) * 2);
    */
    transform: scale(1.2);
}

.testimonial-group > .row {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .testimonial-group > .row > .col-2 {
    display: inline-block;
  }

.banner {
    display: flex;
    flex-wrap: wrap;
    /*margin-left: 0.5rem;*/
    /*margin-right: 0.5rem;*/

    /*border-bottom: 1px solid var(--secondary);*/
    margin-bottom: 0.5rem !important;

    /*border-top: 1px solid var(--secondary);*/
    margin-top: 0.5rem !important;
}

.banner-item {
    position: relative;
    flex-grow: 1;
    margin-bottom: 0.25rem !important;
    margin-top: 0.25rem !important;
    padding-right: 0.5rem;
}

.banner-title .banner-item {
    flex-grow: 0 !important;
}

div[class^='banner-item'] + div[class^='banner-item'], div[class*=' banner-item'] + div[class*=' banner-item'] {
   border-left: 1px solid var(--secondary);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
}




.blur {
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }

#titleImageArt, #titleImagePoster {
    overflow: hidden;
  }

.zoom {
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: all .5s;
}
.rss p img {
    --img-width: 80%;
    width: var(--img-width);
    line-height: 75px;
    height: calc(var(--img-width) * .666666669) !important;
    object-fit: cover !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.form-control {
    color: #181818 ;
    font-weight: 500;
}

.card-title {
    font-size: 1.4rem;
}

.card-subtitle {
    padding-top: 0rem !important;
}

.p-00 {
    padding: 0rem !important;
}

.m-00 {
    margin: 0rem !important;
}

.text-150 {
    font-size: 1.2em;
}

table.race td:nth-child(4), table.race th:nth-child(4) {
    display: none;
}
table.race td:nth-child(5), table.race th:nth-child(5) {
    display: none;
}
table.race td:nth-child(6), table.race th:nth-child(6) {
    display: none;
}
table.race td:nth-child(7), table.race th:nth-child(7) {
    display: none;
}

table.qualifying td:nth-child(4), table.qualifying th:nth-child(4) {
    display: none;
}

table.qualifying td:nth-child(8), table.qualifying th:nth-child(8) {
    display: none;
}

table.practice td:nth-child(4), table.practice th:nth-child(4) {
    display: none;
}

table.practice img, table.qualifying img, table.race img {
    display: none;
}

@media (min-width: 576px) {
    .text-150 {
        font-size: 1.5em;
    }

    table.practice td:nth-child(4), table.practice th:nth-child(4) {
        display: table-cell;
    }

    table.practice img, table.qualifying img, table.race img {
        display: inline;
    }

    table.race td:nth-child(4), table.race th:nth-child(4) {
        display: table-cell;
    }
    table.race td:nth-child(5), table.race th:nth-child(5) {
        display: table-cell;
    }
    table.race td:nth-child(6), table.race th:nth-child(6) {
        display: table-cell;
    }
    table.race td:nth-child(7), table.race th:nth-child(7) {
        display: table-cell;
    }
}

.bg-contain {
    background-size: contain !important;
}

a {
    color: #c9d1d9;
    text-decoration: none;
    background-color: transparent; }
    a:hover {
      color: #e4e8ec;
      text-decoration: none; }



b {
    font-weight: bold;
}

.progress-bar {
    background-color: var(--color-system);
}

.card-subtitle , .card-subtitle a {
    
    color: var(--color-system) ;
}

.break-word {
    word-break: break-word;
    white-space: normal;
}

.tube-bakerloo {
    background-color: rgb(137, 78, 36) !important;
}

.tube-central {
    background-color: rgb(220, 36, 31) !important;
}

.tube-circle {
    background-color: rgb(255, 206, 0) !important;
    color: #333333 !important;
}

.tube-district {
    background-color: rgb(0, 114, 41) !important;
}

.tube-dlr {
    background-color: rgb(0, 175, 173) !important;
    color: #333333 !important;
}

.tube-elizabeth {
    background-color: rgb(105, 80, 161) !important;
}

.tube-hammersmith-city {
    background-color: rgb(215, 153, 175) !important;
    color: #333333 !important;
}

.tube-jubilee {
    background-color: rgb(106, 114, 120) !important;
}

.tube-metropolitan {
    background-color: rgb(117, 16, 86) !important;
}

.tube-northern {
    background-color: rgb(0, 0, 0) !important;
}

.tube-piccadilly {
    background-color: rgb(0, 25, 168) !important;
}

.tube-victoria {
    background-color: rgb(0, 160, 226) !important;
    color: #333333 !important;
}

.tube-waterloo-city {
    background-color: rgb(118, 208, 189) !important;
    color: #333333 !important;
}