.twitchbar {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    /* background-color: rgba(55,55,55,0.8); */
    background-color: rgba(100,139,60,0.8);
    line-height: 40px;
    font-size: 34px;
    font-family: '80s_font';
    color:white;
}

.webcam_border {
  position: relative;
  margin: auto;
  margin-top: 180px;
  width:1280px;
  height:720px;
  background-color: #373737;
}

.webcam_border:before, .webcam_border:after {
	content: '';
	position: absolute;
	left: -4px;
	top: -4px;
	/* background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, */
		/* #0000ff, #00ff00,#ffff00, #ff0000); */
  background: linear-gradient(45deg, #f9d64f, #648b3c);
	background-size: 500%;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	z-index: -1;
	animation: steam 120s linear infinite;
}

.webcam_border:after {
	filter: blur(10px);
}

.twitchbardiv {
    float: left;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #d8d8d8;
}

#lastdonint {
  color: #f9d64f;
}

.twitchbardiv font {
    display:inline-block;
}

.chatframe #chat_box {
    background: none !important;
}

.twitchinfo {
    color:white;
    padding-left:4px;
}

.twitchcam {
    width: 2052px;
    height: 1220px;
}

.twitchbards {
    width: 1200px;
    height: 180px;
    background-color: rgba(100,139,60,0.8);
    background-size: 1200px;
    line-height: 60px;
    font-size: 60px;
    font-family: '80s_font';
    color:white;
    text-align:left;
}

.twitchbards td {
    width : 600px;
    height: 60px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


body {
    color:black;
    background : none;
    overflow-y:hidden;
}

.a01 {
  position: absolute;
  width:1920px;
}

.a02{
  position: absolute;
  width:1920px;
}

.a03{
  position: absolute;
  width:1920px;
}

#cont {
  width:1920px;
  height:1080px;
  animation-play-state: paused;
  opacity:0.8;
}

.cercle01{
  visibility: hidden;
  animation: getdown 1s ease-in-out, getup 1s 13s ease-in-out;
  animation-fill-mode: forwards;
}

.bar01{
  visibility: hidden;
  transform-origin: center;
  animation: getdown 1s ease-in-out, rotatebar 0.5s 1s ease-in-out, unrotatebar 0.5s 12.5s ease-in-out, getup 1s 13s ease-in-out;
  animation-fill-mode: forwards;
}

.cerclesolo {
  visibility: hidden;
  animation: cerclesolohide 1s 1s linear, cerclesoloshow 1s 12s linear;
  animation-fill-mode: forwards;
}

.barright{
  visibility: hidden;
  animation: movebarright .5s 1.5s ease-in-out, movebarrightleft .5s 12s ease-in-out;
  animation-fill-mode: forwards;
}

.barleft{
  visibility: hidden;
  animation: movebarleft .5s 1.5s ease-in-out, movebarleftright .5s 12s ease-in-out;
  animation-fill-mode: forwards;
}

.demileft {
  visibility: hidden;
  animation: getleft 10s 2s ease-in-out;
  animation-fill-mode: forwards;
}

.demiright {
  visibility: hidden;
  animation: getright 10s 2s ease-in-out;
  animation-fill-mode: forwards;
}

.alertdiv {
  padding-left: 600px;
  padding-right: 600px;
  padding-top: 60px;
  padding-bottom: 60px;
  width: 720px;
  height: 207px;
  position: absolute;
  z-index: 10;
  font-family: '80s_font';
  font-size: 60px;
  text-align: center;
  display: table;
  color : #f9d64f;
}

.primaryFont {
  font-family: '80s_font';
  font-size: 200px;
  color : #ffffff;
}
.secondaryFont {
  font-family: '80s_font';
  font-size: 50px;
  color : #f9d64f;
}

#timer {
  font-size: 100px !important;
}

.alertdivspan {
  opacity: 0;
  animation: alertdivshow 9s 2.5s ease-in-out;
  vertical-align: middle;
  display: table-cell;
}

.wiggle {
  animation: wiggle 1s infinite linear;
}

.wiggle2 {
  animation: wiggle 1s infinite linear;
}

.highlight {
  display: inline-block;
  color: #648b3c;
}

.sousmessage {
  font-size: 40px;
}

body {
    margin:0px;
}

svg {
  transform-origin: top left;
  transform: scale(0.3);
  fill : #f9d64f;
}

svg path{
  fill : #f9d64f;
}

@keyframes alertdivshow{
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wiggle {
   0% { transform: rotate(2deg); }
   10% { transform: rotate(-2deg); }
   20% { transform: rotate(2deg); }
   30% { transform: rotate(-2deg); }
   40% { transform: rotate(2deg); }
   50% { transform: rotate(-2deg); }
   60% { transform: rotate(2deg); }
   70% { transform: rotate(-2deg); }
   80% { transform: rotate(2deg); }
   90% { transform: rotate(-2deg); }
   100% { transform: rotate(2deg); }
}

@keyframes cerclesoloshow{
  0% {visibility: visible;}
  100% {visibility: hidden;}
}

@keyframes cerclesolohide{
    0% {visibility: visible;}
    100% {visibility: hidden;}
}

@keyframes getleft {
  0% { transform:translateX(0); visibility: visible; }
  10% { transform:translateX(-1250px);}
  90% { transform:translateX(-1250px);}
  100% { transform:translateX(0); visibility: hidden;}
}

@keyframes getright {
  0% { transform:translateX(0); visibility: visible;}
  10% { transform:translateX(1250px);}
  90% { transform:translateX(1250px);}
  100% { transform:translateX(0); visibility: hidden;}
}

@keyframes getdown {
  0% { transform:translateY(-1400px); visibility: visible;}
  100% { transform:translateY(0px); visibility: hidden;}
}

@keyframes getup {
  0% { transform:translateY(0px); visibility: visible;}
  100% { transform:translateY(-1400px); visibility: hidden;}
}

@keyframes rotatebar {
  0% {transform: rotate(0deg); visibility: visible;}
  100% {transform: rotate(45deg); visibility: hidden;}
}


@keyframes unrotatebar {
  0% {transform: rotate(45deg);visibility:visible;}
  100% {transform: rotate(0deg);}
}


@keyframes movebarright {
  0% { transform:translateX(0px); visibility: visible;}
  100% { transform:translateX(300px); visibility: hidden;}
}

@keyframes movebarleft {
  0% { transform:translateX(0px); visibility: visible;}
  100% { transform:translateX(-300px); visibility: hidden;}
}

@keyframes movebarrightleft {
  0% { transform:translateX(300px); visibility: visible;}
  100% { transform:translateX(0px); visibility: hidden;}
}

@keyframes movebarleftright {
  0% { transform:translateX(-300px); visibility: visible;}
  100% { transform:translateX(0px); visibility: hidden;}
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

@font-face {
    font-family: '80s_font';
    src: url('../fonts/pxlxxl.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');