@font-face {
  font-family: 'Lato';
  src: url('/fonts/v1.x/v1.0/lato/lato-regular-webfont.eot');
  src: url('/fonts/v1.x/v1.0/lato/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/v1.x/v1.0/lato/lato-regular-webfont.woff') format('woff'),
       url('/fonts/v1.x/v1.0/lato/lato-regular-webfont.ttf') format('truetype'),
       url('/fonts/v1.x/v1.0/lato/lato-regular-webfont.svg#latoregular-') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/v1.x/v1.0/lato/lato-bold-webfont.eot');
  src: url('/fonts/v1.x/v1.0/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/v1.x/v1.0/lato/lato-bold-webfont.woff') format('woff'),
       url('/fonts/v1.x/v1.0/lato/lato-bold-webfont.ttf') format('truetype'),
       url('/fonts/v1.x/v1.0/lato/lato-bold-webfont.svg#latobold-') format('svg');
  font-weight: bold;
  font-style: normal;
}
html {
  height: 100%;
}

body {
	background: url('../images/fondo.jpg') no-repeat center top #03b282;
  background-size: cover;
  height: 100%;
}

.contenido {
  width: 380px;
	height: 680px;
	position: absolute;
	top: 20%;
	left: 50%;
	margin-left: -190px;
}

.contenido h1 { font-weight:bold;}
.frases {
	text-align: center;
  font-family: 'Lato';
  font-weight: normal;
  line-height: 1.3em;
	font-size: 20px;
	color: #FFF;
  padding-top: 30px;
	background: url('../images/globo.png') no-repeat top center;
}

.logo {
	clear: both;
	margin: 0 auto 15px;
	text-align: center
}

.logo a {
	background: rgba(0,0,0,0) url(/verne/iconos/v1.x/v1.0/logos/verne.svg) no-repeat scroll center center / 208px 42px;
	color: #fff;
	display: inline-block;
	height: 44px;
	text-indent: -9999px;
	width: 214px;
}

.boton {
	cursor: pointer;
	margin: 20px auto;
	text-align: center;
	opacity: 1;
}

.boton svg{  transition:all 0.2s ease-in;}
.boton:hover svg{transform:scale(1.1,1.1) rotate(-5deg);}

.boton .image:active,
.boton .image:focus,
.boton .image:hover {
  opacity: 1;
}

.boton .image:active,
.boton .image:focus {
  background: url('../images/boton_verne_hover.png') no-repeat bottom center;
}

.boton a {
	display: block;
	text-align: center;
	font-family: 'Lato';
	font-weight: bold;
	line-height: 2.5em;
	font-size: 17px;
	color: #FFF;
	position: relative;
	margin-top:35px;
	background:#d7a806;
	border-radius:25px;
	width:90%;
	margin:0 auto;
	text-transform:uppercase;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(159,124,4,1);
	-moz-box-shadow: 2px 2px 2px 0px rgba(159,124,4,1);
	box-shadow: 2px 2px 2px 0px rgba(159,124,4,1);
	transition:all 0.5s ease-in;
}
.boton a:hover{
	-webkit-box-shadow: 0px 0px 0px 0px rgba(159,124,4,1);
	-moz-box-shadow: 0px 0px 0px 0px rgba(159,124,4,1);
	box-shadow: 0px 0px 0px 0px rgba(159,124,4,1);
	color:rgba(159,124,4,1);
}

h1 {
  line-height: 1.3em;
	font-size: 30px;
	color: #FFF;
	text-align: center;
  margin-bottom: 10px;
}
.siguenos_en_ {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.siguenos_en_ li {
  display: inline-block;
  margin: 0 2px;
}

.siguenos_en_ li a {
  background-color: #fff;
  background-image: url("/verne/iconos/v1.x/v1.0/varios/iconos.svg");
  background-repeat: no-repeat;
  border-radius: 100%;
  display: block;
  height: 30px;
  position: relative;
  text-indent: -9999px;
  width: 30px;
}

.siguenos_en_ .facebook a {
  background-position: center -315px;
}

.siguenos_en_ .twitter a {
  background-position: center -264px;
}
.siguenos_en_ .whatsapp a {
  background-image: url("../images/whatsapp.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
}


    #lotto .lotto-path-1 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .1s;
    }
    
    #lotto .lotto-path-2 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .2s;
    }
    
    #lotto .lotto-path-3 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .3s;
    }
    
    #lotto .lotto-path-4 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .4s;
    }
    
    #lotto .lotto-path-5 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .5s;
    }
    
    #lotto .lotto-path-6 {
      -webkit-animation: changeFill 1s linear infinite;
              animation: changeFill 1s linear infinite;
      animation-delay: .6s;
    }
	
  
	#lotto .no-animation{ animation:none;}
  
  
  
  @-webkit-keyframes changeFill {
    0% {
      fill: #d7a806;
    }
    50% {
      fill: #9F7C04;
    }
    100% {
      fill: #d7a806;
    }
  }

  @keyframes changeFill {
    0% {
      fill: #d7a806;
    }
    50% {
      fill: #9F7C04;
    }
    100% {
      fill: #d7a806;
    }
  }
  

@media (max-width:999px){
  .contenido {
  	top: 15%;
  }
}

@media (max-width:599px){
  body {
    background-size: initial;
  }
  .contenido {
    width: 90%;
    left: auto;
    top: auto;
    position: relative;
    margin: 30px auto;
  }
}

@media (max-width:360px){
  .logo a {
  	background-size: 180px auto;
  	width: 180px;
  }
  h1 {
    line-height: 1.2em;
    font-size: 22px;
    margin-bottom: 0;
  }
  .frases {
    font-size: 18px;
  }
  .boton { margin:10px 0;}
  .boton svg{ transform:scale(.8,.8)}
}