@font-face {
  font-family: 'Pluto Light';
  src: url('../css/fonts/PlutoLight.eot'); /* IE9 Compat Modes */
  src: url('../css/fonts/PlutoLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/PlutoLight.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/PlutoLight.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/PlutoLight.svg#6b56808f1b4f1d8b9e574f27ac4d13d8') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Pluto Heavy';
  src: url('../css/fonts/PlutoHeavy.eot'); /* IE9 Compat Modes */
  src: url('../css/fonts/PlutoHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/PlutoHeavy.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/PlutoHeavy.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/PlutoHeavy.svg#b60cb02d96a2d974b0128baf1707d1c7') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

p
{
	margin: 0;
}

body
{
	background: #e8e8e8;
	font-size: 16px;
	text-align: center;
	font-family: Arial;
}

section#container
{ 
  max-width: 20em;
  max-height: 20em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 2em;
  transition: all ease 0.3s;
  /*box-shadow: 2px 2px 20px #b8001f;*/
}

header
{
  border-bottom: 2px solid rgba(0,0,0, 0.3);
  padding: 0 0 0.7em 0;
}

section#message
{
  padding: 1.5em 0;
  border-bottom: 2px solid rgba(0,0,0, 0.3);
}

section#message p
{
  font-family: 'Pluto Light';
  text-transform: uppercase;
  color: #FFF;
  font-size: 1.2em;
  letter-spacing: -0.05em;
}

section#message .bold
{
  font-family: 'Pluto Heavy';
  text-transform: uppercase;
  color: #f29770;
  font-size: 1.1em;
  letter-spacing: -0.05em;
}

footer
{
  height: 100px;
  transition: all ease 0.3s;
}

footer ul
{
  list-style: none;
  margin:  2em auto;
  padding: 0;
}

footer ul li
{
  display: inline-block;
}

footer a.social-slide {
  height: 60px;
  width: 60px;
  display: block;
  transition: all ease 0.3s;
}

footer a.social-slide:hover {
  background-position: 0px -60px;
  /*box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);*/
}

footer a.mail-hover {
  background-image: url('../images/mail.png');
  background-size: 60px;
}

footer a.facebook-hover {
  background-image: url('../images/facebook.png');
  background-size: 60px;
}

footer a.twitter-hover {
  background-image: url('../images/twitter.png');
  background-size: 60px;
}

@media screen and (max-width: 40em)

{ 
  footer a.social-slide:hover {
  background-position: none;
  }

}