html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
  background-color: #181734;
  background-image: url("img/TING_bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 90%;
  color: #f9efef;
  font-family: 'Roboto', sans-serif;
}

body a {
  text-decoration: none;
}

header {
  margin: auto;
  width: 90%;
  max-width: 1280px;
  text-align: center;
}

h1 {
  text-indent: -10000px;
  height: 10px;
}

main {
  margin: auto;
  width: 100%;
  max-width: 1410px;
  text-align: center;
}

#introText {
  margin: 80px auto 80px;
  width: 90%;
  text-align: center;
  font-size: 2em;
  font-weight: 500;
}

#introText p.first {
  font-weight: 300;
  margin-bottom: 1em;
}

#introText p.first span {
  font-weight: 300;
  margin-bottom: 1em;
}

#youtubeVideo {
    position: relative;
    margin: 80px auto 80px;
    width: 70%;
    height: 0;
    padding-bottom: 39.38%;
    text-align: center;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 961px) {
  #gallery {
    margin: 80px auto 80px;
    width: 90%;
    text-align: center;
  }

  #gallery ul {
    width: 100%;
    padding: 0;
  }

  #gallery ul li {
    display: inline;
    margin: 0;
  }

  #gallery ul li a {
    display: inline-block;
    width: 47%;
    margin: 1% 1% 1%;
  }

  #gallery ul li a img {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  #gallery {
    margin: 80px 0 80px;
    width: 100%;
    text-align: center;
  }

  #gallery ul li a {
    margin: 0;
  }

  #gallery ul li img {
    padding: 0;
    margin: 20px 0;
    width: 95%;
  }
}

#gallery ul {
  list-style-type: none;
}

#gallery ul li img {
  border: 1px solid #474663;
}

#mainText {
  text-align: center;
  width: 100%;
  margin: auto;
}

#features {
  padding: 20px 20px 40px;
  text-align: center;
  width: 70%;
  margin: auto;
}

#features h2 {
  width: 397px;
  height: 187px;
  background-image: url("img/Features_Title.png");
  text-align: center;
  font-size: 3em;
  font-weight: 300;
  margin: 0 auto 40px;
  text-indent: -10000px;
}

#mainText ul {
    width: 100%;
    margin: 0 auto 0;
    font-size: 1.8em;
    font-weight: 300;
}

#mainText ul li {
    text-align: left;
}

#steamShop h2 {
  text-align: center;
  font-size: 3em;
  font-weight: 700;
  margin: 40px auto 10px;
}

footer {
  margin: 80px auto 80px;
  width: 100%;
  max-width: 1410px;
  text-align: center;
}

#linkContainer a {
  margin: 0 80px;
}

#companyContainer {
  margin: 80px 0;
}

#companyContainer p {
  margin: 20px 0;
	font-size: 0.8em;
}
