/*This is used to reduce browser inconsistencies*/
@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
*{box-sizing: border-box;}
html{font-size: 10px;}

body
{
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  background: #FCFFFD;
  font-size: 1.6rem;
}

h1,h2,h3,h4,p,img,#gallery,#sports{margin-bottom: 20px}
#history{margin-bottom: 40px;}

h1{font-weight: 900; font-size: 3.2rem; color: #fff;}
h2{font-weight: 700; font-size: 2.6rem; color: #fff;}
h3{font-weight: 500; font-size: 2.2rem;}
h4{font-size: 2rem;}
p{font-weight: 400; line-height: 1.5em;}

  nav
  {
    background: blue;
    width: 100%;
    background: rgba(26, 87, 157, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
  }

    nav ul
    {
      display: flex;
      justify-content: space-around;
      width: 95%;
      padding: 2%;
    }

        nav a
        {
          display: block;
          line-height: 30px;
          font-size: 1.6rem;
          color: white;
          text-decoration: none;
        }

  #head
  {
    background: url('../images/toronto_small.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #000;
    height: 50vh;
  }

    .headBackground
    {
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }

      header
      {
        width: 90%;
        height: 100%;
        padding: 1.5%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content:flex-end;
      }

  #wrapper
  {
    width: 90%;
    padding: 1.5%;
    margin: 0 auto;
  }

    #gallery ul,
    #teams ul
    {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

      #gallery ul li{margin-bottom: 20px;}

        #gallery img{width: 100%; height: auto;}

        #history h4{font-weight: 500;}

    #history .dots{list-style-type: initial; list-style-position: inside;}

      #history .dots li{margin-bottom: 10px; text-indent: 12px;}

    .outer-frame{width:100%; margin-bottom: 20px;}

      .inner-frame
      {
        padding-bottom: 56.25%;
        position: relative;
        width: 100%;
        height: 0;
      }

        iframe
        {
          border: none;
          position: absolute;
          width: 100%;
          height: 100%;
        }

    #teams ul{text-align: center;}

      #teams div.hockey
      {
        width: 250px;
        height: 200px;
        background: url("../images/hockey_sport.jpg");
      }

      #teams div.basketball
      {
        width:  250px;
        height: 200px;
        background: url("../images/basketball_sport.jpg");
      }

      #teams div.football
      {
        width:  250px;
        height: 200px;
        background: url("../images/football_sport.jpg");
      }

      #teams div.baseball
      {
        width:  250px;
        height: 200px;
        background: url("../images/baseball_sport.jpg");
      }

      #teams div.lacrosse
      {
        width:  250px;
        height: 200px;
        background: url("../images/lacrosse_sport.jpg");
      }

      #teams div.soccer
      {
        width:  250px;
        height: 200px;
        background: url("../images/soccer_sport.jpg");
      }

        #teams ul li div a
        {
          display: block;
          height: 100%;
          color: white;
          text-decoration: none;
          background-color: rgba(0,0,0,0.8);
          opacity: 0;
          transition: opacity 1s;
        }

        #teams ul li div a:hover{opacity: 1;}

          .sports{padding: 10px;}

  footer
  {
    background: #242026;
    height: 10vh;
    display:flex;
    justify-content: center;
    align-items: center;
  }

    footer p
    {
      display: block;
      color: #fff;
      margin-bottom: 0;
    }
/*
  Most of this code was taken from W3schools.
  It first makes circle with border-radius. Than the circle
  is given a width and height and it performs an infinite
  spining animation.
  link:http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
*/
/*Center the loader*/
#loader
{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #1A579D;
  border-bottom: 16px solid #1A579D;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to the whole webpage */
.animate-bottom
{
  position: relative;
  animation-name: animatebottom;
  animation-duration: 1s
}

@keyframes animatebottom
{
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myLoadDiv{display: none;}