*{
    margin:0;
    padding:0;
}
body{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    background:url(../img/fondo-general.jpg);
}
abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video{
    display:block;
}
a img{
    border:none;
}
@-webkit-keyframes pluma {
  0% {
    -webkit-transform: translate(0,0);
  }
  50%{
    -webkit-transform: translate(-5px,-10px);
  }
  100% {
    -webkit-transform: translate(0,0);
  }
}
@-moz-keyframes pluma {
  0% {
    -moz-transform: translate(0,0);
  }
  50% {
    -moz-transform: translate(-5px,-10px);
  }
  100% { 
    -moz-transform: translate(0,0);
  }
}
@-webkit-keyframes sombrapluma {
  0% {
    opacity:1;
  }
  50%{
    opacity:0.5;
  }
  100% {
    opacity:1;
  }
}
@-moz-keyframes sombrapluma {
  0% {
    opacity:1;
  }
  50% {
    opacity:0.5;
  }
  100% { 
    opacity:1;
  }
}
@font-face {
    font-family: 'BitterRegular';
    src: url('../fonts/Bitter-Regular-webfont.eot');
    src: url('../fonts/Bitter-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bitter-Regular-webfont.woff') format('woff'),
         url('../fonts/Bitter-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Bitter-Regular-webfont.svg#BitterRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
img.alizq{
    float:left;
    margin:0 10px 10px 0;
}
img.alder{
    float:right;
    margin:0 0 10px 10px;
}
h1,h2,h3,h4,h5,h6{
    font-family:BitterRegular, Georgia, Serif;
    font-weight:normal;
}
h1{font-size:30px;}
h2{font-size:20px;}
h3{font-size:17px;}
h4{font-size:15px;}
h5{font-size:13px;}
h6{font-size:12px;}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; }

.envoltura{
    margin:0 auto;
    width:815px;
}
#cuerpo{
    background:url(../img/fondo-bienvenida.png) no-repeat center 50px;
    padding-top:100px;
}
header{
    margin-bottom:30px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
header h1{
    width:252px;
    height:59px;
    overflow:hidden;
    background:url(../img/logo-vb.png) center;
    overflow:hidden;
    text-indent:-999px;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-126px;
}
header #social{
    background:url(../img/fondo-social.jpg);
    height:25px;
    position:relative;
    z-index:2;
    border-bottom:1px solid #8d8d8d;
}
header #social .envoltura{
    position:relative;
    padding-top:2px;
}
header nav{
    background:#27323f url(../img/fondo-nav.png) top repeat-x;
    height:24px;
    font-family:BitterRegular, Georgia, Serif;
}
header nav ul#menu{
    float:left;
    color:#fff;
    width:400px;
    text-align:left;
}
header nav ul#menu li{
    float:left;
    padding-left:30px;
}
header nav li a{
    color:#acbbcc;
    text-transform:uppercase;
    text-decoration:none;
    font-size:11px;
}
header nav li a:hover{
    color:#fcf130;
}
header nav li{
    float:right;
    list-style:none;
    margin:0 10px;
    line-height:24px;
}
#portada{
    margin:0 auto;
    width:815px;
    height:320px;
    padding:35px 73px;
    position:relative;
    margin-bottom:30px;
    background:url(../img/fondo-portada.png) no-repeat center;

}
#portada #banner-video{
    width:380px;
    float:left;
}
#portada #bienvenida{
    float:left;
    width:410px;
    padding-right:20px;
    position:relative;
    color:#555;
}
#portada #bienvenida #accion{
    position:absolute;
    top:40px;
    right:10px;
    width:180px;
}
#portada #bienvenida #accion h4{
    margin:10px 0;
    padding:10px 5px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    text-align:center;
    font-size:15px;
    text-transform:uppercase;

}
#portada #bienvenida #accion h5{
    text-transform:uppercase;
    text-align:center;
    font-size:17px;
}
#portada #bienvenida #accion h4 span{
    display:block;
    font-size:23px;
    line-height:20px;
    color:#6e1702;
}
ul#staytuned{
    text-align:center;
}
ul#staytuned li{
    height:32px;
    width:32px;
    display:inline-block;
    list-style:none;
    margin:2px;
    text-indent:-9999px;
    overflow:hidden;
}
ul#staytuned li#ico-twt a{
    background:url(../img/ico_twitter.png) no-repeat;
    height:32px;
    width:32px;
    display:block;
}
ul#staytuned li#ico-fbk a{
    background:url(../img/ico_facebook.png) no-repeat;
    height:32px;
    width:32px;
    display:block;
}
ul#staytuned li#ico-kick a{
    background:url(../img/ico_kickstarter.png) no-repeat;
    height:32px;
    width:32px;
    display:block;
}
#portada #bienvenida h3{
    font-size:16px;
    line-height:22px;
}
ul#staytuned li#ico-kick a:hover, ul#staytuned li#ico-fbk a:hover, ul#staytuned li#ico-twt a:hover{
    background-position:0 -32px;
}
#portada h2{
    width:225px;
    height:200px;
    background:#7a7a7a;
    overflow:hidden;
    margin-bottom:30px;
    background:url(../img/uk-logo.png) no-repeat;
    text-indent:-9999px;
}

#portada h3 span{
    color:#6e1702;
}
#portada p.derechos{
    position:absolute;
    bottom:-10px;
    left:0;
    text-align:center;
    font-size:11px;
    width:960px;
    color:#2c2525;
}
#aplicacion .envoltura{
    height:410px;
    position:relative;
}
#aplicacion .envoltura h3{
    position:absolute;
    right:10px;
    top:20px;
    font-size:21px;
    color:#fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0);
    color:#6e1702;
}
#aplicacion .envoltura h3.esp{
    font-size:21px;
    right:0;
}
#aplicacion #versiones{
    float:left;
    width:460px;
    position:relative;
    
}
#aplicacion #versiones #libro{
    position:absolute;
    top:0;
    left:-60px;
}
#aplicacion #versiones #ipad #ipadprev, #aplicacion #versiones #ipad #ipadnext, #aplicacion #versiones #iphone #iphonenext, #aplicacion #versiones #iphone #iphoneprev{
    display:none;
    cursor:pointer;
    background:url(../img/flechas-dispositivos.png);
}
#aplicacion #versiones #ipad{
    position:absolute;
    top:70px;
    left:70px;
}

#aplicacion #versiones #ipad .pantalla{
    width:274px;
    height:205px;
    position:absolute;
    top:27px;
    left:70px;
    overflow:hidden;
    background:url(../img/fondo-ipad.jpg); 
}
#aplicacion #versiones #ipad #ipadprev{
    width:20px;
    height:20px;
    text-indent:-999px;
    overflow:hidden;
    position:absolute;
    left:80px;
    top:70px;
}
#aplicacion #versiones #ipad #ipadprev:hover{
    background-position:0 -20px;  
}
#aplicacion #versiones #ipad #ipadnext{
    width:20px;
    height:20px;
    text-indent:-999px;
    overflow:hidden;
    position:absolute;
    right:80px;
    top:70px;
    background-position:-20px 0;  
}
#aplicacion #versiones #ipad #ipadnext:hover{
    background-position:-20px -20px;    
}


#aplicacion #versiones #ipad .pantalla ul{
	position: relative;
	padding: 0; 
	margin: 0;
}
#aplicacion #versiones #ipad .pantalla li{
	width: 262px; 
	height: 191px;
	float: left; 
	list-style: none;
	margin: 0 1px;
	text-align:center;
	padding:7px 5px;
}
#simplePrevious, #simpleNext{
	cursor: pointer;
	font-size: 0.8em;
	text-decoration: underline;	
}

#aplicacion #versiones #iphone{
    position:absolute;
    top:170px;
    left:50px;
}
#aplicacion #versiones #iphone .pantalla{
    width:84px;
    height:125px;
    position:absolute;
    top:34px;
    left:32px;
    overflow:hidden;
    background:url(../img/fondo-iphone.jpg); 

}
#aplicacion #versiones #iphone #iphoneprev{
    width:20px;
    height:20px;
    overflow:hidden;
    position:absolute;
    left:40px;
    bottom:70px;
    text-indent:-999px;
   
}
#aplicacion #versiones #iphone #iphoneprev:hover{
    background-position:0 -20px;
 }
#aplicacion #versiones #iphone #iphonenext{
    width:20px;
    height:20px;
    text-indent:-999px;
    overflow:hidden;
    position:absolute;
    left:90px;
    bottom:70px;
    background-position:-20px 0;
}
#aplicacion #versiones #iphone #iphonenext:hover{
    background-position:-20px -20px;
}
#aplicacion #versiones #iphone .pantalla ul{
	position: relative;
	padding: 0; 
	margin: 0;
}
#aplicacion #versiones #iphone .pantalla li{
	width: 84px; 
	height: 125px;
	float: left; 
	list-style: none;
	margin: 0 1px;
	text-align:center;
}
#aplicacion #versiones h4{
    position:absolute;
    top:340px;
    left:230px;
    font-size:14px;
    text-transform:uppercase;
}
#aplicacion #caracteristicas{
    float:right;
    width:350px;
    padding-top:70px;
}
#aplicacion #caracteristicas li{
    list-style:none;
    float:left;
    width:165px;
    height:130px;
    margin:5px;
    font-family:BitterRegular, Georgia, Serif;
    color:#000000;
    font-size:14px;
    text-align:center;
    text-shadow: 2px 2px 2px #fff;   
}
#galeria{
    clear:both;
    background:#655959;
    height:80px;
    padding:10px 0;
    border-bottom:2px solid #817850;
}
#galeria #sneakpeak{
    width:120px;
    float:left;
    color:#fff;
    text-align:center;
    margin-right:5px;
    text-transform:uppercase;
    padding:0 5px;
}
#galeria #sneakpeak h4{
    margin:10px 0;
    padding:10px 0;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;

}
#galeria #sneakpeak h4{
    font-size:16px;
}
#galeria #sneakpeak h4 span{
    font-size:24px;
    line-height:18px;
}
#galeria ul{
    float:left;
    width:340px;
}
#galeria li{
    float:left;
    margin:0 5px 0 0;
    height:80px;
    width:80px;
    list-style:none;
    position:relative;
}
#galeria li span.ver{
    height:30px;
    width:30px;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15px;
    margin-left:-15px;
    background:url(../img/lupa.png) no-repeat;
    cursor:pointer;
    display:none;
    z-index:100;
}
.doscolumnas{
    padding:20px 0;
}
.doscolumnas .columna-uno{
    width:395px;
    float:left;
    margin:0 20px 0 0;
}
.doscolumnas .columna-dos{
    width:395px;
    float:left;
}
#contenido{
    padding:30px 0 60px 0;
    background:url(../img/fondo-contenido.jpg);
}
#contenido a{
    color:#f0be28;
    text-decoration:none;
}
#contenido a:hover{
    text-decoration:underline;
}
#contenido p{
    padding:10px 0;
    line-height:170%;
    color:#fff;
    font-size:12px;
}
#contenido h3{
    margin-bottom:20px;
    font-size:21px;
    text-transform:uppercase;
    color:#352c2c;
}
#contenido h4{
    padding:5px 0;
    font-size:17px;
    color:#352c2c;
}
footer{
    height:110px;
    background:url(../img/fondo-pie.jpg);
    position:relative;
    font-family:BitterRegular, Georgia, Serif;
    color:#555;
}
footer a{
    color:#ae860d;
}
footer a:hover{
    color:#c48b09;
}
footer .envoltura{
    position:relative;
}
footer #pluma{
    position:absolute;
    top:-120px;
    right:-50px;
    width:205px;
    height:120px;

}
footer #pluma #pluma01{
    position:absolute;
    top:0;
    right:0;
    -webkit-animation-name:             pluma; 
    -webkit-animation-duration:         5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: ease-in-out;
    -moz-animation-name:             pluma; 
    -moz-animation-duration:         5s; 
    -moz-animation-iteration-count:  infinite;
    -moz-transition-timing-function: ease-in-out;

}
footer #pluma #pluma02{
    position:absolute;
    bottom:0;
    right:0;
    -webkit-animation-name:             sombrapluma; 
    -webkit-animation-duration:         5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: ease-in-out;
    -moz-animation-name:             sombrapluma; 
    -moz-animation-duration:         5s; 
    -moz-animation-iteration-count:  infinite;
    -moz-transition-timing-function: ease-in-out;
}
footer #detalle-pie{
    position:absolute;
    left:0;
    top:-60px;
    height:60px;
    background:url(../img/detalle-pie.png) center;
    width:100%;

}
#rights{
    text-align:center;
    font-size:11px;
    color:#8b8b8b;
    clear:both;
}
#rights p{
    line-height:100%;
    padding:0;
}
.trescolumnas .columna1{
    float:left;
    width:200px;
}
.trescolumnas .columna1 input{
    background:none;
    border:1px solid #ccc;
    padding:2px;
    float:left;
    width:105px;
    background:#555;
    color:#fff;
    padding:5px;
     box-shadow:inset 0 0 10px #3b3b3b;
     -webkit-box-shadow:inset 0 0 10px #3b3b3b;
     -moz-box-shadow:inset 0 0 10px #3b3b3b;
    font-family:BitterRegular, Georgia, Serif;
    font-size:11px;
    margin:3px 0;
}
.trescolumnas .columna1 input.button{
    width:70px;
    background:#ae860d;
     box-shadow:inset 0 0 10px #9c780c;
     -webkit-box-shadow:inset 0 0 10px#9c780c;
     -moz-box-shadow:inset 0 0 10px #9c780c;
     border:1px solid #9c780c;
     color:#fff;
     padding:4px;
     margin:4px 0;
     cursor:pointer;
     
}
.trescolumnas .columna1 input.button:hover{
    background:#9c780c;
}
.trescolumnas .columna2{
    float:left;
    width:370px;
    text-align:center;
    margin:0 15px 10px 15px;
}
.trescolumnas .columna2 h4{
    font-size:13px;
    border-right:1px solid #9a9a9a;
    border-left:1px solid #9a9a9a;
}
.trescolumnas .columna3{
    float:left;
    width:200px;
    text-align:right;
    font-size:13px;
}
/*
@media all and (-webkit-min-device-pixel-ratio: 2) {
  body{
    background:url(../img/fondo-general@2x.jpg); background-size: 25%;
  }
  #portada h2 {
    background:url(../img/uk-logo@2x.png) no-repeat; background-size: 100%;
  }
  header h1{
    background:url(../img/logo-vb@2x.png) center; background-size: 100%;
  }
  #contenido{
    background:url(../img/fondo-contenido@2x.jpg); background-size: 25%;
  }
  #portada{
    background:url(../img/fondo-portada@2x.png) no-repeat center; background-size: 100%;
  }
  footer{
    background:url(../img/fondo-pie@2x.jpg); background-size: 25%;
  }
  footer #detalle-pie{
    background:url(../img/detalle-pie@2x.png) center;  background-size: 100%;
  }
}
*/