body {
  font-family: "Arial Narrow", Arial, sans-serif;
  opacity: 0;
  font-weight: 300;
  line-height: 1.2em;
  font-size: 1.5em;
  font-weight: 500;
  color: purple;
  background-color: #c2aaa9;
}

a {
  text-decoration: none;
}

.displayChat {
  display: block;
}

.hideChat {
  display: none;
}

#upcoming {
  margin-left: 69px;
  left: 0px;
}

.pop-outin {
  position: fixed;
  top: 40px;
  right: 3em;
  z-index: 99999;
  cursor: pointer;
  animation: pop 1.2s ease-in-out infinite;
  animation-delay: 1s;
}

.pop-outin:hover {
  color: white;
}

@keyframes pop {

  50%  {
    transform: scale(1.2);
    /*color: pink;*/
  }

}


.today {
  color: white;
}

.title {
  color: white;
}

#about {
  right: 3em;
  top: 47px;
  position: fixed;
  z-index: 99999;
  cursor: pointer;
}

#pop-up {
    width: 25%;
    height: 40%;
    overflow: scroll;
    right: 6em;
    top: 9.6em;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: fixed;
    border-radius: 20px;
    background-color: #ababab;
    display: none;
    z-index: 100;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
    color: white;
    padding: 10px 15px 10px 20px;
}

#pop-up p {
    font-size: 24px;
    line-height: 1.1em;
    padding: 0;
    margin-top: 10px;
}

.pop-up a {
  color: #FF3838;
}
.pop-up a:hover {
  color: #9e0000;
  cursor: pointer;
}

#h {
  position: relative;
    height: 143%;
    /* padding: 0px; */
    /* margin: 0px; */
    top: -58px
}

#live {
    width: 500px;
    height: 560px;
    overflow: scroll;
    right: 50vw;
    top: 50vh;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translate(50%, -50%);
    position: fixed;
    border-radius: 20px;
    background-color: #6b1579;
    z-index: 100;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
    color: #d4b2b2;
    padding: 10px 35px 10px 35px;
    margin-block: 0;
}

#live h1 {
  color: white;
  margin-block-end: -0.45em;
  margin-top: 1.6em;
  padding: 0px;
  font-weight: 100;
}

.o {
  z-index: -1;
}

#player-container #play-pause {
    cursor: pointer;
    text-indent: -999986px;
    height: 518px;
    width: 506px;
    padding: 0px 0px;
    margin: 0px;
    z-index: 3;
    background-image: url(images/play.svg);
    background-repeat: no-repeat!important;
    background-position: center;
    background-size: 676px;
    position: relative;
    left: 11px;
    top: 22px;
}
.play {
  background-image: url(images/play.svg);
}
.pause {
   background-image: url(images/pause.svg)!important;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  padding: 20px 25px 20px 25px;
  z-index: 9999999;
  }  

.close2 {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  padding: 20px 25px 20px 25px
  }  

/* .play2 {
  height: 200px;
  right: 3em;
  top: 47px;
  position: fixed;
  z-index: 99999;
  cursor: pointer;
  }*/

  .play2:hover{
    color: white;
  }

  .close3 {
  position: fixed;
  right: 0px;
  bottom: 0px;
  cursor: pointer;
  padding: 15px 15px 14px 25px;
  z-index: 9999999999999;
  background-color: #fefdfd;
  border-top: solid;
  border-color: #d4d4d4;
  border-top-width: thin;
  display: none;

  }  

#content {
  /* width: 35em; */
  width: 35em;
  padding: 2em 0 2em 0.5em;
  position: fixed;
  left: 0;
  top: 10px;
  /*mix-blend-mode: screen;*/
}
#content p, #content ul, #content ol {
  margin: 0;
  padding: 0.5em 0;
}
#content li {
  margin: 0;
  padding: 0;
}
#content blockquote .wrapliner {
  position: relative;
  padding-left: 0;
}
#content blockquote .wrapliner:before {
  position: absolute;
  content: "";
  top: 0;
  left: -1.5em;
  height: 1.2em;
  width: 3px;
  background: #FEAB1B;
  transform: skew(47deg);
}
#content a {
  color: #FF3838;
}
#content a:hover {
  color: #9e0000;
  cursor: grab;
}
#content a, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  font-weight: 400;
}
#content strong {
  font-weight: 800;
}

#player{
position: fixed;
bottom: -7px;
left: 0;
width: 100%;
z-index: 999;
display: none;
opacity: 100%;
}

#player2{
position: fixed;
bottom: -7px;
left: 0;
width: 100%;
z-index: 999;
display: none;
opacity: 100%;
}

#player3{
position: fixed;
bottom: -7px;
left: 0;
width: 100%;
z-index: 999;
display: none;
opacity: 100%;
}

#player4{
position: fixed;
bottom: -7px;
left: 0;
width: 100%;
z-index: 999;
display: none;
opacity: 100%;
}

#player5{
position: fixed;
bottom: -7px;
left: 0;
width: 100%;
z-index: 999;
display: none;
opacity: 100%;
}


h1 {
  font-size: 1em;
  padding: 0em 0em;
}

h2 {
  font-size: 1.5em;
  margin: 0;
  padding: 1em 0;
}

h3 {
  font-size: 1.3333333333em;
  margin: 0;
  padding: 1em 0;
}

h4 {
  font-size: 1.25em;
  margin: 0;
  padding: 1em 0;
}

h5 {
  font-size: 1.2em;
  margin: 0;
  padding: 1em 0;
}

h6 {
  font-size: 1.1666666667em;
  margin: 0;
  padding: 1em 0;
}

.wrapliner {
  display: block;
  position: relative;
  background: none;
  padding: 0;
  margin: 0;
  z-index: 1;
  width: 100%;
  padding: 0 100px 0 40px;
}
.wrapliner .wrapliner {
  padding: 0;
}

.wrap_line_1 {
  left: 0px;
}

.wrap_line_2 {
  left: 20px;
}

.wrap_line_3 {
  left: 40px;
}

.wrap_line_4 {
  left: 60px;
}

.wrap_line_5 {
  left: 80px;
}

.wrap_line_6 {
  left: 100px;
}

.wrap_line_7 {
  left: 120px;
}

.wrap_line_8 {
  left: 140px;
}

.wrap_line_9 {
  left: 160px;
}

.wrap_line_10 {
  left: 180px;
}

.wrap_line_11 {
  left: 200px;
}

.wrap_line_12 {
  left: 220px;
}

.wrap_line_13 {
  left: 240px;
}

.wrap_line_14 {
  left: 260px;
}

.wrap_line_15 {
  left: 280px;
}

.wrap_line_16 {
  left: 300px;
}

.wrap_line_17 {
  left: 320px;
}

.wrap_line_18 {
  left: 340px;
}

.wrap_line_19 {
  left: 360px;
}

.wrap_line_20 {
  left: 380px;
}

.wrap_line_21 {
  left: 400px;
}

.wrap_line_22 {
  left: 420px;
}

.wrap_line_23 {
  left: 440px;
}

.wrap_line_24 {
  left: 460px;
}

.wrap_line_25 {
  left: 480px;
}

.wrap_line_26 {
  left: 500px;
}

.wrap_line_27 {
  left: 520px;
}

.wrap_line_28 {
  left: 540px;
}

.wrap_line_29 {
  left: 560px;
}

.wrap_line_30 {
  left: 580px;
}

.wrap_line_31 {
  left: 600px;
}

.wrap_line_32 {
  left: 620px;
}

.wrap_line_33 {
  left: 640px;
}

.wrap_line_34 {
  left: 660px;
}

.wrap_line_35 {
  left: 680px;
}

.wrap_line_36 {
  left: 700px;
}

.wrap_line_37 {
  left: 720px;
}

.wrap_line_38 {
  left: 740px;
}

.wrap_line_39 {
  left: 760px;
}

.wrap_line_40 {
  left: 780px;
}

.wrap_line_41 {
  left: 800px;
}

.wrap_line_42 {
  left: 820px;
}

.wrap_line_43 {
  left: 840px;
}

.wrap_line_44 {
  left: 860px;
}

.wrap_line_45 {
  left: 880px;
}

.wrap_line_46 {
  left: 900px;
}

.wrap_line_47 {
  left: 920px;
}

.wrap_line_48 {
  left: 940px;
}

.wrap_line_49 {
  left: 960px;
}

.wrap_line_50 {
  left: 980px;
}

.wrap_line_51 {
  left: 1000px;
}

.wrap_line_52 {
  left: 1020px;
}

.wrap_line_53 {
  left: 1040px;
}

.wrap_line_54 {
  left: 1060px;
}

.wrap_line_55 {
  left: 1080px;
}

.wrap_line_56 {
  left: 1100px;
}

.wrap_line_57 {
  left: 1120px;
}

.wrap_line_58 {
  left: 1140px;
}

.wrap_line_59 {
  left: 1160px;
}

.wrap_line_60 {
  left: 1180px;
}

.wrap_line_61 {
  left: 1200px;
}

.wrap_line_62 {
  left: 1220px;
}

.wrap_line_63 {
  left: 1240px;
}

.wrap_line_64 {
  left: 1260px;
}

.wrap_line_65 {
  left: 1280px;
}

.wrap_line_66 {
  left: 1300px;
}

.wrap_line_67 {
  left: 1320px;
}

.wrap_line_68 {
  left: 1340px;
}

.wrap_line_69 {
  left: 1360px;
}

.wrap_line_70 {
  left: 1380px;
}

.wrap_line_71 {
  left: 1400px;
}

.wrap_line_72 {
  left: 1420px;
}

.wrap_line_73 {
  left: 1440px;
}

.wrap_line_74 {
  left: 1460px;
}

.wrap_line_75 {
  left: 1480px;
}

.wrap_line_76 {
  left: 1500px;
}

.wrap_line_77 {
  left: 1520px;
}

.wrap_line_78 {
  left: 1540px;
}

.wrap_line_79 {
  left: 1560px;
}

.wrap_line_80 {
  left: 1580px;
}

.wrap_line_81 {
  left: 1600px;
}

.wrap_line_82 {
  left: 1620px;
}

.wrap_line_83 {
  left: 1640px;
}

.wrap_line_84 {
  left: 1660px;
}

.wrap_line_85 {
  left: 1680px;
}

.wrap_line_86 {
  left: 1700px;
}

.wrap_line_87 {
  left: 1720px;
}

.wrap_line_88 {
  left: 1740px;
}

.wrap_line_89 {
  left: 1760px;
}

.wrap_line_90 {
  left: 1780px;
}

.wrap_line_91 {
  left: 1800px;
}

.wrap_line_92 {
  left: 1820px;
}

.wrap_line_93 {
  left: 1840px;
}

.wrap_line_94 {
  left: 1860px;
}

.wrap_line_95 {
  left: 1880px;
}

.wrap_line_96 {
  left: 1900px;
}

.wrap_line_97 {
  left: 1920px;
}

.wrap_line_98 {
  left: 1940px;
}

.wrap_line_99 {
  left: 1960px;
}

.wrap_line_100 {
  left: 1980px;
}

/* chat */
#chat-button {
  margin-top: -24px;
}

#chat-box {
  position: fixed;
  bottom: 0;
  right: 8px;
}

#clock {
  position: fixed;
  bottom: 20px;
  left: 10px;
}

@media (max-width: 640px) {
  #content {
    position: relative;
    width: 95%;
    /* height: 100vh; */
    /* overflow-y: scroll; */
  }

  /* O as background */
  /* #content {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
  } */

  .show a::after{
    content: ' ';
    /* display: inline-block;
    margin-right: 1em; */
  }

  #chat-button {
    display: none;
  }
  #about {
  right: 1em;
  top: 1px;
  position: fixed;
  z-index: 99999;
  cursor: pointer;
}

  #pop-up {
    width: 79%;
    height: 60%;
    right: 1em;
    top: 13.6em;
  }
  .widget-container {
    z-index: 999999;
  }

  #chat-box {
    display: none;
  }

  #clock {
    position: absolute;
    bottom: 11em;
    left: 0.8em;
  }

  .pop-outin {
    top: 51px;
    right: 1em;
  }

  #live {
    width: 15em;
    height: 17.5em;
    top: 37vh;
    padding: 0px 0px 0px 0px;
  }

#player-container #play-pause {
    position: fixed;
    cursor: pointer;
    text-indent: -999986px;
    height: 16em;
    width: 14.5em;
    padding: 0px 0px;
    margin: 0px;
    z-index: 3;
    background-image: url(images/play.svg);
    background-repeat: no-repeat!important;
    background-position: center;
    background-size: 478px;
    position: relative;
    left: 0.5em;
    top: 29px;
}

}

#df {
  text-decoration: none;
}

@media (max-width: 376px) {
   #live {
    width: 15em;
    height: 17em;
    top: 48vh;
    padding: 0px 0px 0px 0px;
  }

  #clock {
    position: absolute;
    bottom: 3.8em;
    left: 0.8em;
  }
}