@font-face {
    font-family: 'civitalight';
    src: url('fonts/civitalig-webfont.eot');
    src: url('fonts/civitalig-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/civitalig-webfont.woff') format('woff'),
         url('fonts/civitalig-webfont.ttf') format('truetype'),
         url('fonts/civitalig-webfont.svg#civitalight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'eb_garamondregular';
    src: url('fonts/ebgaramond-webfont.eot');
    src: url('fonts/ebgaramond-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ebgaramond-webfont.woff') format('woff'),
         url('fonts/ebgaramond-webfont.ttf') format('truetype'),
         url('fonts/ebgaramond-webfont.svg#eb_garamondregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,body {
  margin:0; padding:0;
}


body {
	font-family: "eb_garamondregular" !important; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-size: 1em;
	background-image: url("../img/bgimg.jpg");
	background-position: center;
}

h1 {
	font-family: 'civitalight' !important;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h5 {
	font-family: 'civitalight';
	font-size: 1.2em;
	color: #a1a1a1;
}

p {
	line-height: 1em;
}

#content {
	padding-top: 2em;
	padding-bottom: 2em;
}

/*
 * Overriding foundation base classes FTW! 
 */
.panel {
  padding: .75em;
  background-color: white;
  border: none;
  margin-bottom: 0;
}

#video-row {
  padding: .7em;
  margin-bottom: .75em;
}

.description {
  line-height: 2em;
  font-size: 140%;
  padding: .7em;
  background-color: rgba(256,256,256,.2);
}

#sfcm-logo {
    background-color: rgba(255,255,255,.92);
}

#subform {
  margin-top: .7em;
  font-family: "civitalight";
  margin-bottom: 0;
}

#subtext {
  /*opacity: .8;*/
}

#subblurb {
  margin-top: .5em;
}

.header {
	text-align: center;
}

.play-button {
  opacity: .8;
	margin-top: 1.25em;
	margin-bottom: 0.25em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.button-gatheringsky {
  font-size: 14pt;
  width: 100%;
}
.platform-icon {
margin-top: 1.25em;
margin-bottom: 0.25em;
height: 88px;
opacity: .6;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.store-badge {
  margin-left: auto;
  margin-right: auto;
  display: block;
}




footer {
	background-color: rgba(0, 0, 0, 0.9);
	color: #b1b1b1;
	padding-top: 1em;
	padding-bottom: 1em;
}	

.about {

}

.about p {
	text-align: right;
}
.about h5 {
	text-align: right;
}

.about ul {
	margin-top: 1em;
	text-align: right;
}
.about li {
  text-align: right;
	list-style-type: none;
}

#names {
	line-height: 1em;
}

.contact li {
	list-style-type: none;
	line-height: 1em;
}

.award {
    width: 200px;
}

.awards-row {
    text-align: center;
    margin-bottom: 1.22em;
}

.awards {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

/*.twitter-share-button {
  margin-left: 2em;
}*/
#socialmedia {
  opacity: .8;
  margin-top: 1.5em;
}

.socialbutton {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .4em;
  width: 100px;
  display: block !important;
}


#steam-image {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


a.dark-link  {
  color: black;
}
a.dark-link :focus :hover {
  color: dark-grey;
}
a.dark-link  :active {
  color: black;
}

@media screen and (max-width: 500px) {
  .platform-icon {
    height: auto;
    width: 100%;
  }

}

@media only screen and (max-width: 768px) {
  .award {
    width: 9.5rem;
  }

  #steam-image {
    width: 280px;
    }
  #socialmedia {
    text-align: center;
  }
}

@media only screen and (max-width: 350px) {
  .award {
    width: 8rem;
  }

}