/* body */
body {
  left: 0;
  margin: 0;
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

html, body {height: 100%;
background-color: #000;}

/* menu */
.menu {
  background: #00BFFF;
  left: -200px;
  height: 100%;
  position: fixed;
  width: 200px;
  z-index: 999;
}

/**********Header text**************/

.body_area{
  margin: 0 auto;
}

.title-text{
  margin-top: 50px;
  text-align: center;
}

.title-text h1{
  padding: 20px 15px 20px 25px;
  font-size: 1.3em;
  font-weight: normal;
  color: #fff;
  line-height: 1.1em;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-top: 1px solid #00BFFF;
  border-bottom: 1px solid #00BFFF;
}


.sub-text h2{
  background: #00BFFF;
  padding: 20px 15px 20px 25px;
  border-radius: 20px 0px 0px 0px;
  font-size: 1em;
  font-weight: normal;
  color: white;
  line-height: 1.1em;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  width: 70%;
  margin: 40px auto;
  transition: background-color 0.5s ease;
}

.sub-text h2:hover{
background: #696969;
}

a { text-decoration: none; color: #fff; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active  text-decoration: none;


// MEDIA QUERIES

  /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
        body{
            background-color: green;
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .body_area, .bolder, .three, .headings td{
          font-size: 120%;
        }
          .score, .year{
          font-size: 90%;
        }


    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .body_area{
            width: 60%;
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .body_area{
            width: 60%;
        }
    }