body {
    background-image: url(../img/blackbg.jpg);
    overflow: hidden;
    
}

/*#bottom_fade {
  z-index: 99;
  position: fixed;
  bottom: 0%;
  background-image: url("lebron.jpg");
}*/

#headerContainer {
    width: 100%;
    height: 72px;
    border: 2px solid black;
    margin: auto;
    background-color: #2c2b2b;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    z-index: 1;
}

#graphicsContainer {
    width: 1170px;
    height: 700px;
    border: 2px solid black;
    margin: auto;
    background-image: url(../img/court.png);
    margin-top: 5px;
}

li {
    color: #ebebeb;
    font-family: helvetica;
    display: inline-block;
    padding-left: 20px;
    text-align: center;
}

h2 {
    font-family: impact;
    text-shadow: 2px 2px 4px #000000;
    padding-left: 530px;
    display: inline-block;
    color: white;
    font-size: 27px;
    z-index: 2;

}

.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 100px;
    padding-top: 20px;
    font-family: helvetica;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    height:210px;
    background-color: #467CBCFF;
    color: #fff;
    position: absolute;
    border-radius: 3px;
    padding: 5px 15px;
    font-family: helvetica;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;

}

.awesome {
    color:white;
    font-weight: bold;
    position: absolute;
    -webkit-animation:colorchange 3s;
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;

}
.awesome2 {
    color:white;
    font-weight: bold;
    position: absolute;
    -webkit-animation:colorchange 3s;
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;

}
.modal-content {
  font-family: helvetica;
  letter-spacing: 1px;
  font-weight: 900;
 
}

@-webkit-keyframes colorchange {
      0% {
        
        color: blue;
      }
      
      30% {
        
        color: red;
      }
      
      60% {
        
        color: white;
      }
      
      90% {
        
        color: blue;
      }
      
      
      
    
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}



#east {
    float: right;
    width: 72px;
    padding-top: 0px;
    padding-right: 80px;
    display: inline-block;
}

#west {
    float: left;
    width: 72px;
    padding-top: 0px;
    padding-left: 80px;
}

#nba1 {
   width: 70px;
  
 
    
}

#nba2 {
    width: 70px;
    padding-top: 15px;
    float: right
}

#hoverTeam {
    font-size: 25px;
    font-family: impact;
}

.lineFont,
#hoverTeam,
#dragTeam {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}


#CC {
    stroke: #d4d429;
    stroke-width: 7px;
}

#BC {
    stroke: white;
    stroke-width: 7px;
}

#MH {
    stroke: black;
    stroke-width: 7px;
}

#OM {
    stroke: #cccaca;
    stroke-width: 7px;
}

#DP {
    stroke: red;
    stroke-width: 7px;
}

#GS {
    stroke: #FFCD34;
    stroke-width: 7px;
}

#LA {
    stroke: #FDB927;
    stroke-width: 7px;
}

#DM {
    stroke: #C4CED4;
    stroke-width: 7px;
}

#OC {
    stroke: #F05133;
    stroke-width: 7px;
}

#SA {
    stroke: #C4CED4;
    stroke-width: 7px;
}

#SA-LA,
#OC-SA,
#DM-OC,
#LA-GS {
    stroke: red;
    stroke-width: 7px;
}

#MH-BC,
#BC-OM,
#OM-DP,
#CC-MH {
    stroke: blue;
    stroke-width: 7px;
}

#GS-CC,
#SA-CC,
#SA-MH,
#LA-BC,
#DM-MH,
#OC-MH,
#OM-LA,
#DP-SA,
#LA-DP {
    stroke: #e1ea12;
    stroke-width: 7px;
}


.circle {
  display: block;
  width: 80px;
  height: 80px;
  background-image: url(../img/ball.png);
  border-radius: 70%;

 
  /* Animation to spin and move the sphere */
  -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
  -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
  -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
  animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
  
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  
  position: absolute;
  left: 0;
  z-index: 3;
}

/* Spinning the sphere using key frames */
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

/* Move sphere from left to right */
@-moz-keyframes moveLeftToRight {
  0%   { left: -100px; }
  100% { left: 100%; }
}
@-ms-keyframes moveLeftToRight {
  0%   { left: -100px; }
  100% { left: 100%; }
}
@keyframes moveLeftToRight {
  0%   { left: -100px; }
  100% { left: 100%; }
}
@-webkit-keyframes moveLeftToRight {
  0%   { left: -100px; }
  100% { left: 100%; }
}
.modal {
   
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 80%; /* Full width */
    height: 500; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    margin-left: 143px;
    display: inline-block;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 38px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}