:root {
   --clr-body: #555;
   --clr-body-bg: #fff;
   --clr-primary: #d0092d;
   --clr-secondary: #036649;
   --clr-menu: #036649;
   --clr-red: #e8412c;
   --head-height: 250px;
   --font-family: OpenSans;
}

@font-face {
   font-family: "OpenSans";
   font-weight: normal;
   src: url(/static/font/OpenSansR.ttf) format("truetype");
}

@font-face {
   font-family: "OpenSans";
   font-weight: bold;
   src: url(/static/font/OpenSansB.ttf) format("truetype");
}

body {
   color: var(--clr-body);
   background-color: var(--clr-body-bg);
   font-family: var(--font-family); 
}

a {
   color: var(--clr-secondary);
}

a:hover {
   color: var(--clr-primary);
}

.clr-primary {
   color: var(--clr-primary);
}

.clr-secondary {
   color: var(--clr-secondary);
}

/* btn menu */
.btn-live {
   background-color: var(--clr-red);
   border: .13rem solid var(--clr-red);
}

.btn-live:hover {
   color: #fff;
   background-color: var(--clr-menu);
   border: .13rem solid var(--clr-red);
}

::marker {
   color: var(--clr-primary);
}

.hallName {
   background-color: var(--clr-primary);
}

.modal-header {
   background-color: var(--clr-primary);
}

.programmeControls {
   background-color: var(--clr-body-bg);
}

.wizardCount.active {
   background-color: var(--clr-primary);
}

.dropdown-item:focus, .dropdown-item:hover {
   background-color: var(--clr-primary);
   color: #fff;
}

.custom-control-input:checked~.custom-control-label::before {
   border-color: var(--clr-secondary);
   background-color: var(--clr-secondary);
}

@media (max-width:280px) {
   .header-top {
      min-height: calc(var(--head-height) * .2463);
   }
}

@media (min-width: 281px) and (max-width: 320px) {
   .header-top {
      min-height: calc(var(--head-height) * .2831);
   }
}

@media (min-width: 321px) and (max-width: 360px) {
   .header-top {
      min-height: calc(var(--head-height) * .3162);
   }
}

@media (min-width: 361px) and (max-width: 375px) {
   .header-top {
      min-height: calc(var(--head-height) * .3309);
   }
}

@media (min-width: 376px) and (max-width: 411px) {
   .header-top {
      min-height: calc(var(--head-height) * .3603);
   }
}

@media (min-width: 412px) and (max-width: 414px) {
   .header-top {
      min-height: calc(var(--head-height) * .364);
   }
}

@media (min-width: 415px) and (max-width: 540px) {
   .header-top {
      min-height: calc(var(--head-height) * .4743);
   }
}

@media (min-width: 541px) and (max-width: 768px) {
   .header-top {
      min-height: calc(var(--head-height) * .6765);
   }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .header-top {
      min-height: calc(var(--head-height) * .9007);
   }
}

@media (min-width: 1200px) {
   .header-top {
      min-height: var(--head-height);
   }
}

.btn-color {
   transition: all .7s;
}

/*
.nav-item>.btn:focus {
   color: var(--clr-primary)
}

span[g-container="clock"] {
   width: 4rem;
}

span[data-target="#tagsModal"] {
   display: none;
}
*/