* {
  font-family: "Open Sans";
}
a:hover {
  text-decoration: none;
}
.container{
  max-width: 1200px;
}
.col-md-4 {
  padding-left: 5px;
  padding-right: 5px;
}
body {
  background-color: black;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.logo {
  margin-top: 50px;
}
.black-bkg {
  background-color: #111;
}
.h1-category {
  color: #fff;
  font-size: 35px;
  font-weight: 500;
  margin-left: -10px;
  margin-right: -10px;
}
.category-img {
  max-width: 390px;
  width: 100%;
}
.video {
  max-width: 390px;
  width: 100%;
  background-color: #111;
  border: 1px solid #292929;
  box-shadow: 0px 2px 1px rgb(0 0 0 / 2%);
  overflow: hidden;
}
.videothumb {
  width: 100%;
}
.thumb {
  max-width: 390px;
  width: 100%;
  position: relative;
}
.thumb-time {
  position: absolute;
  max-width: 390px;
  width: 100%;
  height: 44px;
  bottom: 10px;
  text-align: left;
}
.thumb-time span {
  display: block;
  color: #fff;
  float: left;
  margin-left: 7px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
}
.liveflag {
  margin-top: 10px;
  padding-left: 3px;
  padding-right: 3px;
}
.thumb-time .hd-marker.is-hd {
  background-image: url(../images/hdhd.png);
}
.thumb-time .hd-marker {
  display: block;
  margin: 0 7px 7px 0;
  width: 28px;
  height: 18px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.thumb-time span {
  display: block;
  color: #fff;
  float: left;
  margin-left: 7px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
}

.thumb-info {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 9px;
  text-align: left;
}

body.dark-theme .thumb-info span.cwrap {
  color: #888;
}
.thumb-info span.cwrap:hover {
  color: #fd4045 !important;
}
.thumb-info span.cwrap {
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
}
.thumb-info span.cwrap,
.thumb-title h3 {
  font-weight: 600;
  font-size: 15px;
  display: block;
  width: auto;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden !important;
}
.thumb-info span {
  font-size: 12px;
  line-height: 13px;
}
.thumb-info span {
  font-size: 12px;
  line-height: 13px;
}

body.dark-theme .thumb-info p {
  color: #666 !important;
}
.thumb-info p {
  display: block;
  width: auto;
  font-size: 14px;
  color: #666;
  margin-bottom: 11px;
}
.category-cont .thumb-info {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
.question button {
  color: #fff;
  border: none;
  background-color: #ea504d;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 17px;
  margin: 0 7px;
  cursor: pointer;
}
.dNone {
  display: none;
}
.modal-header {
  border: none;
}
.modal-content {
  background-color: #1d1d1d;
}
.close {
  color: #6e737c;
  text-shadow: none;
  margin: 5px !important;
  position: absolute;
  border: 1px solid #6e737c !important;
  padding: 5px 10px !important;
  right: 15px;
  border-radius: 27px;
}
.close:hover,
.close:focus {
  color: #fff !important;
  border-color: #6e737c !important;
}
#n-title {
  color: #fd3f45;
  font-size: 30px;
}
.subscribe-btn {
  background: #fd3f45;
  color: #fff;
}
.inp-lbl {
  color: #fff;
}
#emailHelp {
  color: #6e737c;
}
#error-email p {
  text-align: center;
  color: red;
  width: 100%;
}
.error-email-inp {
  border: 1px solid #fd3f45;
  background: #ddd;
}
.is-mobile{
  display: none;
}
@media (max-device-width:480px)  {
  .conteiner-mobile{
    position: absolute;
    bottom:15%;
  }
  .conteiner-mobile-modal{
    position: absolute;
    bottom:12%;
  }

  .is-mobile{
    display: flex !important;
  }

  .logo{
    max-width: 250px;
  }
}

/* Arrange buttons */
.btn-matrix {
  flex-wrap: wrap; /* allow buttons to jump to another row */
}
.btn-matrix > .btn {
  width: 33%; /* force buttons to have the same width regardless of content */
}
.btn-matrix > .btn:nth-child(3n + 4) {
  margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
}
.btn-matrix > .btn:nth-child(n + 4) {
  margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix {
  margin: 20px;
  display: flex;
  padding: 0!important;
  justify-content: space-between;
}

.btn-outline-category{
  color: #888;
  background-color: transparent;
  background-image: none;
  border-color: #888;
}
.btn-outline-category:hover {
  color: #fff ;
  border-color: #fff;
}