/*
	NORMALIZE
*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: #181819;
  text-align: center;
  background: #181819;
}

a {
  text-decoration: none;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

b, strong {
  font-weight: bold;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

small {
  font-size: 80%;
}

img {
  border: 0;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
}

ol li {
  list-style-type: decimal;
}

p {
  line-height: 1em;
  margin-bottom: 0;
  margin-top: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  margin: 0;
  padding: 0;
}

/*
  FONTS
*/

@font-face {
  font-family: 'Raleway';
  src: url('/fonts/v1.x/v1.0/raleway/raleway-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/*
  BACKGROUND
*/

body {
  overflow: hidden;
  text-align: center;
}

body, html { height: 100%;}
body {
	background: none;
  background-color: #333;
	font-family: Androgyne;
	height: 100%;
	z-index:1;
}
body.snow {
	background-image: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/nieve1.png'), url('https://verne.elpais.com/especial/villancicos-de-navidad/images/nieve2.png'), url('https://verne.elpais.com/especial/villancicos-de-navidad/images/nieve3.png');
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	

/*
  CONTENT
*/

.container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.logo {
  display: block;
  width: 206px;
  height: 68px;
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/verne.svg') no-repeat left bottom;
  background-size: auto 36px;
  text-align: left;
  text-indent: -9999px;
  margin: 0 auto 30px;
  position: relative;
}

@keyframes move {
  0% { transform: rotate(0deg); }
  33% { transform: rotate(-2.5deg); }
  66% { transform: rotate(2.5deg); }
  100% { transform: rotate(0deg); }
}

.logo:after {
  content: '';
  display: block;
  width: 55px;
  height: 46px;
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/gorro.svg') no-repeat center;
  position: absolute;
  top: 1px;
  right: -3px;
  transform-origin: center;
  animation: move 3s linear infinite;
}

p {
  font-family: 'Raleway';
  font-weight: 700;
  font-style: normal; 
  font-size: 14px;
  line-height: 120%;
  color: white;
  text-shadow: 0 2px 2px rgba(0,0,0,.2);
  margin-bottom: 10px;
}

.buttons {
  overflow: hidden;
  position: relative;
  height: 273px;
  width: 273px;
  margin: 0 auto 20px;
}

.buttons a {
  display: block;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
}

.buttons a span {
  display: block;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .7s;
  transform: rotate(0deg);
}

.buttons a:focus span,
.buttons a:active span,
.buttons a:hover span {
  transform: rotate(10deg);
}

#cascabel {
  width: 132px;
  height: 134px;
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/button.png') no-repeat left top;
  top: 0;
  left: 0;
}

#botella {
  width: 132px;
  height: 273px;
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/double-button.png') no-repeat left top;
  top: 0;
  right: 0;
}

#pandereta {
  width: 132px;
  height: 134px;
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/button.png') no-repeat left top;
  bottom: 0;
  left: 0;
}

#cascabel span {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/cascabel.svg') no-repeat center;
}

#botella span {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/botella.svg') no-repeat center;
}

#pandereta span {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/pandereta.svg') no-repeat center;
}

.buttons audio {
  position: absolute;
  z-index: -1;
}

.share {
  text-align: center;
  margin: 10px 0;
}

.share li {
  display: inline-block;
}

.share li a {
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 2px;
}

.share li a.facebook {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/facebook.svg') no-repeat center;
}

.share li a.twitter {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/twitter.svg') no-repeat center;
}

.share li a.whatsapp {
  background: url('https://verne.elpais.com/especial/villancicos-de-navidad/images/whatsapp.svg') no-repeat center;
}