@import url(https://fonts.googleapis.com/css?family=Anton);
body{
   font-family: 'Anton', sans-serif;
   background-image: url("faces/bg.jpg");
background-repeat:repeat;
 background-size: 540px 945px;
background-color: grey;
text-align:center;

transition: background-color .5s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }



object{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;
} 
#topBar a:hover{
cursor:pointer;
text-shadow: 0 2px 5px rgba(0,0,0,.2);

}
.menulist a:hover{
text-shadow: 0 2px 5px rgba(0,0,0,.2);

}


#west{
text-align:center;
width:40%;
float:left;
}
#east{
text-align:center;
width:40%;
float:right;
margin-bottom:30px;
}
#middle{
width:20%;
float:left;
text-align:center;

margin-top:5%;

}

#rockets{
margin-top:0px;

}

#jazz {
margin-top: -10%;

}

#pelcs{
margin-top: -10%;



}

#gs{
margin-top: -10%;


}

#cavs{
margin-top:0px;


}

#raptors{
margin-top: -10%;

}

#celtics{
margin-top: -10%;

}

#Sixers{
margin-top:-10%;


}
/* Style the tab */
.tab {
    overflow: hidden;
   
    font-family: "Ariel", sans-serif;
    font-weight:bold;
    margin-top:40px;

}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: #ddd;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size:2.5vw;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ccc;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #1e4289;
    color:white;
    
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 2px solid #ccc;
    padding-top: 20px;
   
}

/*.topnav {
    background-color: black;
    overflow: hidden;
    font-family: 'Anton', sans-serif;
    margin-bottom:1%;
    width:20%;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    max-width:15%;
}
.topnav a:not(:first-child) {display: none;}
  
.topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.active {
    background-color: #ddd;
    color: white;
}




.icon{
position:absolute;
top:5%;
left:3%;
transform: translate(-50%,-50%);
width: 80px;
height:80px;
cursor:pointer;
background: #000;
}
.hamburger{
width: 50px;
height: 6px;
background:#fff;
position:absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
transition:.5s;

}
.hamburger:before,
.hamburger:after{
content:'';
position:absolute;
width:50px;
height:6px;
background:#fff;
transform:translateX(-50%);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
transition:.5s;
}

.hamburger:before{
top:-16px;
}
.hamburger:after{
top:16px;
}
.icon.active .hamburger{
background:rgba(0,0,0,0);
box-shadow 0 2px 5px rgba(0,0,0,0);
}
.icon.active .hamburger:before{
top:0;

transform:translateX(-50%) rotate(45deg);
}
.icon.active .hamburger:after{
top:0;
transform:translateX(-50%) rotate(135deg);
}*/


.navigation {
    width: 200px;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    background-color: #ddd;
    box-shadow: 0 4px 4px -3.5px #232323;
    -moz-box-shadow: 0 4px 4px -3.5px #232323;
    -webkit-box-shadow: 0 4px 4px -3.5px #232323;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    padding-top: 0px;
        border-bottom:2px solid white;

}
#topBar{
width:100%;
height:50px;
position:fixed;
z-index:1000;
top:0;
left:0;
background-color:#ddd;
 box-shadow: 0 4px 4px -3px #232323;
    -moz-box-shadow: 0 4px 4px -3px #232323;
    -webkit-box-shadow: 0 4px 4px -3px #232323;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    padding-top: 0px;
   border-bottom:2px solid white;
    }

.navigation a {
    text-decoration: none;
}

.navigation ul {
position:absolute;
    margin-top:30px;
    text-align:center;
    list-style:none; 
    margin-left:auto;
    margin-right:auto;
}


.menulist {
width:200px;
padding-left:0px;
    
}


.logo {
    text-align:center;
    margin:0 auto;
    transform: translate(5%,30%);
    text-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.line1, .line2, .line3 {
  margin-top:5px;
  background-color:#1e4289;
  width:25px;
  height:3px;
  display:block;
  position:relative;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  opacity:1.0;
  border-radius:15%;
  transition: all .3s;
}

.line1.active {
  transform: rotate(270deg);
  opacity:0.0;
  box-shadow: 0 2px 5px rgba(0,0,0,0);
  background-color:#1e4289;
  top:5px;
}

.line2.active {
  transform: rotate(45deg);
  background-color:#1e4289;
}

.line3.active {
  transform: rotate(-45deg);
  background-color:#1e4289;
  top:-7px;
}

.menuitems {
    padding-top:12px;
    padding-bottom:12px;
    text-decoration: none;
    list-style:none; 
font-family: 'Anton', sans-serif;
    font-weight: 300;
    font-size: 24px;
    display: inline-block;
    position:relative;	
    text-align:center;
    color: #1e4289;
    opacity:0.0;
    transition: all .5s ease-in-out;
}

.menuitems:after {
  content:'';
  display:block;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width .2s;
}

.menuitems:hover::after {
    width:100%;
}

#closebtn {
    height:25px;
    width:25px;	
    position: absolute;
    text-decoration:none;
    top: 10px;
    left: 25px;
    font-size: 36px !important;
    margin-right: 50px;
    z-index:100;
    color:#fff;
    cursor:pointer;
    trainsition:background-position .3s;
}

#main {	
    transition: margin-top .5s;
    text-align:left;
    margin:auto;
   margin-top:30px;
    font-size:30px;
    z-index:-10;
  
}
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("faces/bg.jpg");
background-repeat:repeat;
 background-size: 540px 945px;
background-color: grey;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 166px;
  height: 166px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://loading.io/spinners/basketball/lg.basketball-rotating-spinner.gif);
  -webkit-filter: grayscale(100%);
  background-size:200px 200px; /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  border: 4.5px solid grey;
  border-radius:200px;
  padding:0px;
  /* is width and height divided by two */
}
.content{
display:block;
clear: both;
background: rgba(0,0,0,.3);
border-radius:10px 10px 10px 10px;
width:70%;
margin-left:15%;
padding:10px;


}
h2{
color:#FFF;
margin-bottom:-30px;
padding:10px;
font-size:4vw;
font-family: "Ariel", sans-serif;
font-weight:bold;
text-shadow: 0 2px 5px rgba(0,0,0,.5);
margin-top:-4px;
}
h3{
color:#FFF;
margin-bottom:-30px;
padding:10px;
font-size:3vw;
font-family: "Ariel", sans-serif;
font-weight:bold;
margin-top:-17px;
text-shadow: 0 2px 5px rgba(0,0,0,.5);

}
p{
font-family: "Ariel", sans-serif;
font-size:1.5vw;
color:white;
padding:13px;
}
#main li{
font-family: "Ariel", sans-serif;
font-size:1.5vw;
color:white;
padding-bottom:13px;


}
#main ul{
list-style:none;
padding:13px;


}


.footer{
display:block;
position:absolute;
clear:both;
background: rgba(0,0,0,.3);
width:97%;
margin-top:20px;
text-align:center;
padding:0px;
margin-bottom:0px;
border-top:2px solid white;


}
.footer p{
font-size:1vw;
}

@media only screen and (max-width: 900px) {
p{
font-size:2.6vw;
}
#main li{
font-size:2.6vw;
}
.footer p{
font-size:1.7vw;
}

}