@font-face {
  font-family:'HammersmithOne'
  src:url('fonts/HammersmithOne-Regular.ttf') format('truetype');
  font-family:'Audiowide';
  src:url(fonts/Audiowide-Regular.ttf) format('truetype');
  font-family:"Zekton Free";
  src:url("fonts/zekton_free.eot") format("eot"),url("fonts/zekton_free.woff") 
  format("woff"),url("fonts/zekton_free.ttf") format("truetype"),
  url("fonts/zekton_free.svg#ZektonFree") format("svg");
  font-family:'Zekton Rg';
  src:url(fonts/zekton-rg.ttf) format('truetype');
  font-family:Revalia;
  src: url(fonts/Revalia-Regular.ttf) format('truetype');
  font-family:PressStart2P;
  src: url(fonts/PressStart2P-Regular.ttf) format('truetype');
}

body{
  margin:auto;
  padding:2% 0% 15% 0%;
  background:url(img/background.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

#box{
  background:#FFFFFF url(img/background-header.png);
  background-repeat:no-repeat;
  background-size:100% 768px;
  background-attachment:scroll;
  min-height:768px;
  height:auto;
  margin:auto;
  padding:5px;
  width:100%;
  max-width:720px;
  min-width:650px;
  border: 1px solid black;
  -box-shadow: 0px 20px 35px rgba(0,0,0,0,5);
  -webkit-box-shadow: 0px 20px 35px rgba(0,0,0,0,5);
  -moz-box-shadow: 0px 20px 35px rgba (0,0,0,0,5);
  -o-box-shadow: 0px 20px 35px rgba(0,0,0,0,5);
  border-radius:15px;
}

#logo{
  float:left;
  width:100%;
  vertical-align:top;
  padding:0px;
  position:absolute;
  opacity:0.9;
  -webkit-transform:translate(-15px,-40px);
  -moz-transform:translate(-15px,-40px);
}

#presentation {
  font-family:Revalia;
  font-size:16px;
  width:100%;
  height:0px;
  margin-top:2.5%;
  background:rgba(0,0,0,0.1);
  background:url('img/linux-expose.jpg') center center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
  
  -webkit-animation: hide 15s;
  -moz-animation: hide 15s;
  -webkit-animation:translate(-160px -50px);
}

@-webkit-keyframes hide{
  0%{height:200px;background-size:150% 320px;}
  50%{height:200px;}
  65%{height:200px;}
  100%{height:0px;background-size:100% 200px;}
}

@-moz-keyframes hide{
  0%{height:200px;background-size:150% 320px;}
  50%{height:200px;}
  65%{height:200px;}
  100%{height:0px;background-size:100% 200px;}
}


#introduction{
  font-family:'Play', Montserrat,'Open Sans','Helvetica Neue', Arial;
  font-size:12px;
  text-align:center;
  padding:5% 2% 2% 2%;
  
}

h2{
  font-family:Revalia;
}

#header{
  background:rgba(255,0,0,0,1);
}

#content{
  background:rgba(0,255,0,0,1)
}

#tags{
  font-family:;
  background-color:#FFFFFF;
}

#tittle{
  color:#353535;
  font-size:30px;
  padding-left:25%;
  position:relative;
}

h1{
  font-family:'DejaVu Sans',Arial,'Play';
}

#linux{
  letter-spacing:-2px;
  font-size:50px;
  font-family:PressStart2P;
  color:#DDDDDD;
  text-align:right;
  float:right;
  vertical-align:top;
  text-shadow: 0px 2px 8px #8C0000;
  -moz-text-shadow: 0px 2px 8px #8C0000;
  -webkit-text-shadow: 0px 2px 8px #8C0000;
  -o-text-shadow: 0px 0px 2px #8C0000;
  
  -webkit-transform:scale(1,1);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transform:scale(1,1);
  -moz-transition: -moz-transform 0.7s;
}

#linux:hover{
  -webkit-transform:scale(1.05,1.1);
  -moz-transform:scale(1.05,1.1);
}

#login{
  padding:5px;
  text-align:right;
}

input{
  border:0px solid white;
  border-radius:3px;
  background:#DDDDDD;
  box-shadow:inset: 0px 0px 3px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset: 0px 0px 3px rgba(0,0,0,0.1);
  -moz-box-shadow:inset: 0px 0px 3px rgba(0,0,0,0.1);
  
}


#tux {
  height:50%;
  width:50%;
  float:left;
  vertical-align:middle;
  position:absolute;
  padding:0px;
}

table{
  width:49%;
  float:left;
  margin:0.5%;
  border:1px solid black;
  border-radius:10px;
  
  -webkit-transform:scale(0.97,0.97);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transform:scale(0.97,0.97);
  -moz-transition: -moz-transform 0.5s;
}

#animaciontexto1{
  font-family:Audiowide,'DejaVu Sans',Arial;
  color:rgba(255,255,255,0);
  text-shadow: 2px 2px 5px rgba(0,0,0,0);
  font-size:25px;
  -webkit-transform:translate(0px,0px);
  -webkit-animation:muevetexto1 6.5s;
  -moz-transform:translate(0px,0px);
  -moz-animation:muevetexto1 6.5s;
}
 
@-webkit-keyframes muevetexto1{
  0%{color:rgba(255,255,255,0);-webkit-transform:translate(-150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
  25%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  50%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  75%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  100%{color:rgba(255,255,255,0);-webkit-transform:translate(150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
}

@-moz-keyframes muevetexto1{
  0%{color:rgba(255,255,255,0);-moz-transform:translate(-150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
  25%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  50%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  75%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  100%{color:rgba(255,255,255,0);-moz-transform:translate(150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
}

#animaciontexto2{
  font-family:Audiowide,'DejaVu Sans',Arial;
  text-align:right;
  color:rgba(255,255,255,0);
  text-shadow: 2px 2px 5px rgba(0,0,0,0);
  font-size:50px;
  padding:0px 25px 0px 25px;
  -webkit-transform:translate(0px,-50px);
  -webkit-animation:muevetexto2 5s;
  -webkit-animation-delay: 2.5s;
  -moz-transform:translate(0px,-50px);
  -moz-animation:muevetexto2 5s;
  -moz-animation-delay: 2.5s;
}
 
@-webkit-keyframes muevetexto2{
  0%{color:rgba(255,255,255,0);-webkit-transform:translate(150px,-25px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
  25%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  50%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  75%{color:rgba(255,255,255,1);-webkit-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  100%{color:rgba(255,255,255,0);-webkit-transform:translate(-150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
}

@-moz-keyframes muevetexto2{
  0%{color:rgba(255,255,255,0);-moz-transform:translate(150px,-25px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
  25%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  50%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  75%{color:rgba(255,255,255,1);-moz-transform:translate(0px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
  100%{color:rgba(255,255,255,0);-moz-transform:translate(-150px,0px);text-shadow: 2px 2px 5px rgba(0,0,0,0)}
}

footer{
  padding-top:2%;
  text-align:center;
  font-size:12px;
  font-family:Arial,'Sans Serif';
  background-color:#FFFFFF;
  
}

table:hover{
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
}

table th{
  font-family:'Montserrat';
  text-align:left;
  border-radius:10px 10px 2px 2px;
  background: #6E6E6E;
  color: #FFFFFF;
  width:100%;
  padding-left:5px;
}

table td{
  border:0px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.2);
  
}

#version{
  float:right;
  padding-right:5px;
}

#preview{
  float:left;
  position:relative;
  text-align:left;
}

#text{
  font-size:12px;
  font-family:'Helvetica', Arial;
}

#download{
  float:right;
  padding-right:10px;
}