@charset "UTF-8";
/* Pictures */
/* Written by Hanson Ma */

.pic{
	float: left;
	width: 100%;
	margin-top: 25px;
	border: 1px solid #999;
	-moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  position: relative;
}

#picspace{
  float: left;
  width: 100%;
  height: 75px;
}



.tagme, .tagme2{
  width: 100%;
  color: #ccc;
  text-align: center;
  font-family: "Roboto-Light";
  font-size: 14.5px;
  height: 18px;
}

.tagme{
  margin-top: 15px;
}

.tagme2{
  margin-top: 25px;
}


.mee{
  color: #56d46a;
}

#panel{
  width: 100%;
  height: 150px;
}

#scorehold{
  width: 500px;
  height: 100%;
  background: ;
  margin: 0 auto;
  border-bottom: 2px solid #4e4e4e;
}

#scory{
  margin: 0 auto;
  height: 100%;
  width: 400px;
  position: relative;
}

#thereal{
  width: 100%;
  height: 120px;
  bottom: 0;
  position: absolute;
  text-align: center;
}

#scorez{
  float: left;
  width: 35%;
  height: 100%;
}

.team{
  float: left;
  width: 32.5%;
  height: 100%;
  font-size: 19px;
  color: #fff;
}

.teamlogo{
  width: 100%;
  height: 60%;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

#scoreboard{
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  color: #fff;
}

#gamedate{
  width: 100%;
  height: 36%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7d7d7d;
  font-size: 14px;
}

.teamname{
  margin-top: 10px;
}

/* The holy magic */

@media only screen and (max-width: 855px) {
  .pic, .tagme2{
    margin-top: 13px;
    border: none;
  }
  .pic:hover{
    border: none;
  }
  #picspace{
    height: 63px;
  }
  .tagme{
    margin-top: 13px;
  }
}

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

  #scory{
    position: initial;
  }

  #thereal{
    position: initial;
  }

  #scorehold{
    margin: 0px;
    width: 100%;
    position: relative;
  }

  .team{
    margin-top: 30px;
  }

  #scorez{
    margin-top: 30px;
  }

  #panel{
    height: 210px;
    position: relative;
  }

}

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

  .tagme{
    font-size: 13px;
    margin-top: 13px;
  }

}

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

  #scory{
    width: 100%;
  }

}

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

  .tagme{
    font-size: 11px;
    margin-top: 11px;
  }

}