*{
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="button"]{
    -webkit-appearance: none;
    -moz-appearance: none;
}
html{
    font-size:16px;
}
@media (max-width: 900px) { 
     html {
    font-size: 10px;    
    } 
}
@media  (min-width: 900px) and (max-width: 1000px) { 
     html {
    font-size: 11px;    
    } 
}
@media (min-width: 1000px) and (max-width: 1100px) { 
     html {
    font-size: 12px;    
    } 
}
@media (min-width: 1100px) and (max-width: 1200px) { 
     html {
    font-size: 13px;    
    } 
}
@media (min-width: 1200px) and (max-width: 1350px) { 
     html {
    font-size: 14px;    
    } 
}
@media (min-width: 1350px) and (max-width: 1500px) { 
     html {
    font-size: 15px;    
    } 
}
#hcr {
position:fixed;
top:50px;
width:300px;
visibility:hidden;
}

.hcrtab {
height:40px;
width:50px;
float:left;
cursor:pointer;
background:url('../img/barajat.jpg') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #FF2E2E;
background:#FFD0D0;
padding:5px;
width:90%;
}


select {
    text-align: center;
    text-align-last: center;
  /* webkit*/
}
body {
 font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 width:100%;
 overflow:hidden;
}
#preloader{
  z-index:999;
  position: fixed;
  top:0;
  left:0;
  background:transparent;
  opacity:0.4;
}
.menu{
    top:0;
    left:0;
    width:100%;
    height: 40px;
    background-color:#152163;
    color:white;
    text-align:center;
    position: fixed;
    z-index:900;
}
.topnav{
    /*overflow: hidden;*/
    border-radius:10px;
    display: block;
}
.topnav a {
    float: left;
    display: block;
    color: white;
    font-weight:bold;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 1.4rem;
    border-radius:20px;
    /*text-transform: uppercase;*/
}
.topnav a:hover {
    background-color: white;
    color:black;
    border-radius:0px 0px 0px 0px;
}
.fwinput{
border-radius:10px ;
background:lightgrey;
color:#152163;
font-size:1.5rem;
font-weight:bold;
text-align:center;
width:95%;
opacity:1;
}
.etiqueta{
border-radius:20px;
color:white;
font-size:1.2rem;
background:#152163;
text-align:center;
vertical-align:middle;
}
.menui {
    display: block;
    position:absolute;
    right:0;
    min-width:200px;
    height:100%;
    border-style:solid;
    border-color:#152163;
    border-width: 2px;
    padding:0 0 2px;
    font-weight:bold;
    text-align:center;
    text-decoration: none;
    font-size: 1.6rem;
    background-color: white;
    color:#152163;
    cursor:pointer;
        z-index:900;
    /*text-transform: uppercase;*/
}

.sub-menu{
    display: none;
    position:absolute;
    right:0;
    top:20px;
    min-width:200px;
    background:#152163;
    color: white;
    font-weight:bold;
    text-align:left;
    text-decoration: none;
    font-size: 1.4rem;
    z-index:900;
}
.sub-menu ul:hover{
    color:#152163;
    background: white; 
    cursor:pointer;
    z-index:900;
}
.botnav{
    display: inline-block;
}
.botnav a{
    float: left;
    display: block;
    color:white;
    font-weight:bold;
    text-align: center;
    padding: 2px 5px;
    font-size: 0.7rem;
}
.inferior{
    position: fixed;
    left:0;
    bottom: 0 ;
    width:100%;
    height:25px;
    z-index:99;
    background:#152163; 
    text-align: center;
}
.superior{
    float:left;
    background:white url("../img/superior.jpg");
    /*background-repeat: repeat;*/
    background-position: center; 
    background-size: contain; 
    margin-top:30px;
    text-align: left;
    width:15%;
    opacity:1;
 
}
.contenido{
    position:relative;
    float:left;
    width:59%;
    background:white url("../img/tapete.jpg");
    background-size: cover; 
    background-repeat: no-repeat; 
    opacity:1;
    z-index:-1;
    top:30px;
}
.lateral{
    float:right;
    margin-right:2%;
    width:23%;
    background:white url("../img/barajatras.jpg");
    background-size:20px 30px;
    background-repeat: repeat; 
    opacity:0.8;
    margin-top:30px;
    overflow:auto;
}
.contenido1{
    position:relative;
    width:100%;
    opacity:1;
}
.contenido2{
    position:relative;
    width:100%;
    opacity:1;
    bottom:20px;
}
.interno{
    position:absolute;
    background-color:transparent;
    left:33%;
    opacity:1;
    width:33%;
    height:55%;
    text-align:center;
    top:1px;
}
.pinte{
    position:relative;
    background-color:transparent;
    opacity:1;
    left:35%;
    width:30%;
}
.enjuego{
    position:absolute;
    background:white;
    color:red;
    top:40px;
    width:100%;
    opacity:0.6;
}

.cjug1{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:60px;
    width:30%;
    text-align:left;
}
.cjug5{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:60px;
    left:66%;
    width:30%;
    text-align:left;
}
.cjug2{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:190px;
    width:30%;
    text-align:left;
}
.cjug4{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:190px;
    left:66%;
    width:30%;
    text-align:left;
}
.cjug3{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:140px;
    left:35%;
    width:30%;
    text-align:left;
}

.jug1{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:33%;
    height:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
}
.jug5{
    position:absolute;
    background-color:transparent;
    opacity:1;
    left:66%;
    width:33%;
    height:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
}
.jug2{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:40%;
    width:33%;
    height:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
}
.jug4{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:40%;
    left:66%;
    width:33%;
    height:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
}
.jug3{
    position:absolute;
    background-color:transparent;
    opacity:1;
    top:55%;
    left:33%;
    width:33%;
    Height:45%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    z-index:890;
}
.apu{
    position:relative;
    background-color:transparent;
    opacity:1;
    margin-left:-60%;
    text-align:center;
    width:210%;
    z-index:90;
    color:black;
}
.cartasyo{
    position:relative;
    background-color:transparent;
    opacity:1;
    margin-left:-100%;
    text-align:center;
    width:300%;
    z-index:900;
}
.cartastx{
    position:relative;
    background:green;
    align-items:center;
    display:flex;
    opacity:1;
    text-align:center;
    width:100%;
    z-index:900;
}
.jugt1{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:18%;
    height:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    bottom:2%;
    left:40%;
}
.tabdatos{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:20%;
    height:40%;
    color:black;
    text-align:left;
    font-size:1.3rem;
    bottom:2%;
    left:18%;
}
.ctrlciega{
    position:absolute;
    background-color:red;
    opacity:0.6;
    width:15%;
    height:15%;
    color:white;
    text-align:left;
    font-size:1.2rem;
    bottom:6%;
    left:1%;
}
.controles{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:35%;
    height:45%;
    color:black;
    text-align:center;
    font-size:1.1rem;
    bottom:1%;
    left:60%;
}
.jugt2{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:37%;
    left:1px;
}
.jugt3{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:1px;
}
.jugt4{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:15%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:17%;
}
.jugt5{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:33%;
}
.jugt6{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:50%
}
.jugt7{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:67%;
}
.jugt8{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:16%;
    height:38%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:1px;
    left:83%;
}
.flop{
    position:absolute;
    background:black;
    align-items:center;
    display:flex;
    opacity:1;
    width:40%;
    color:yellow;
    text-align:center;
    font-size:1.5rem;
    top:38%;
    left:22%;
}
.apuesta{
    position:absolute;
    opacity:1;
    width:10%;
    height:15%;
    text-align:center;
    align-items:center;
    font-size:1.5rem;
    top:38%;
    left:66%;
}
.pasta{
    position:absolute;
    background-color:transparent;
    opacity:1;
    width:22%;
    height:15%;
    color:black;
    text-align:center;
    font-size:1.5rem;
    top:38%;
    left:77%;
}
.aputx{
    position:relative;
    background-color:transparent;
    opacity:1;
    text-align:center;
    width:95%;
    z-index:90;
    color:black;
}
.row { width: 100%;text-align:center;}
.column-25 {  float:left; width:24%;text-align:center;}
.column-252 {  float:left; width:24%;text-align:center;}
.column-50 {  float:left; width:49%;text-align:center;}
.column-502 {  float:left; width:49%;text-align:center;}
.column-35 {  float:left; width:42%;text-align:center;}
.column-65 {  float:left; width:58%;text-align:center;}
.column-75 {  float:left; width:74%;text-align:center;} 
.column-23 {  float:left; width:18%;text-align:center;font-size:1.1rem;margin-left:2%;}
.column-15 {  float:left; width:15%;text-align:center;}
.column-85 {  float:left; width:85%;text-align:justify;margin-left:5%;}
.column-95 {  float:left; width:93%;text-align:left;}
.column-70 {  float:left; width:68%;text-align:center;margin-left:1%;} 
.column-60 {  float:left; width:56%;text-align:center;margin-left:1%;} 
.column-40 {  float:left; width:39%;text-align:center;} 
.gest {  position:relative;display:inline-block;vertical-align:top;padding:0.5rem;} 
.gesb {  position:relative;display:inline-block;vertical-align:bottom;padding:0.5rem;} 
.column-30 {  float:left; width:30%;text-align:center;margin-left:1%;margin-top:2%;} 
.extra-18 {  float:left; width:24%;}
.extra-80 {  float:right;margin-right:1%; width:75%;}
.column-10 {  float:left; width:10%;text-align:center;margin-left:0;} 
.column-5 {  float:right; width:5%;text-align:left;margin-right:5px;margin-top:10px;} 

.boton{
background-color:silver;
color:red;
border:none;
font-size:1.1rem;
font-weight: bold;
width:90px;
margin-left:5px;
border-radius:10px;
height:35px;
cursor:pointer;
}
.boton:hover{
background-color:red;
color:silver;
}
.botonm{
background-color:white;
color:violet;
border:none;
font-size:1.1rem;
font-weight: bold;
width:90%;
border-radius:10px;
height:35px;
cursor:pointer;
text-align:center;
}
.botonm:hover{
background-color:violet;
color:white;
}
.baotonj{
background-color:red;
color:white;
border:none;
font-size:0.9rem;
font-weight: bold;
margin-left:10px;
width:80px;
border-radius:10px;
height:30px;
cursor:pointer;
text-align:center;
}
.baotonr{
background-color:red;
color:white;
border:none;
font-size:0.9rem;
font-weight: bold;
margin-left:10px;
width:80px;
border-radius:10px;
height:30px;
cursor:pointer;
text-align:center;
}
.aparece{ 
  animation-name: aparece1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes aparece1 {  
  0% { 
  -webkit-transform:  scale(2);  
-moz-transform:  scale(2);
-ms-transform:  scale(2);
transform:scale(2);
  }
15% { 
-webkit-transform:  scale(1.7);  
-moz-transform:  scale(1.7);
-ms-transform:  scale(1.7);
transform:scale(1.7);
  }  
 35% { 
-webkit-transform:  scale(1.4);  
-moz-transform:  scale(1.4);
-ms-transform:  scale(1.4);
transform:scale(1.4);
  }  
50% { 
-webkit-transform:  scale(1.3);  
-moz-transform:  scale(1.3);
-ms-transform:  scale(1.3);
transform:scale(1.3);
  }
 70% { 
-webkit-transform:  scale(1.2);  
-moz-transform:  scale(1.2);
-ms-transform:  scale(1.2);
transform:scale(1.2);
  }
85% { 
-webkit-transform:  scale(1.1);  
-moz-transform:  scale(1.1);
-ms-transform:  scale(1.1);
transform:scale(1.1);
}
}
.parpadeam { 
  animation-name: parpadeom;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 4;
}

@keyframes parpadeom {  
  0% { opacity: 0.3;
  -webkit-transform:  scale(2);  
-moz-transform:  scale(2);
-ms-transform:  scale(2);
transform:scale(2);
  }
15% { opacity: 0.4;
-webkit-transform:  scale(1.5);  
-moz-transform:  scale(1.5);
-ms-transform:  scale(1.5);
transform:scale(1.5);
  }  
 35% { opacity: 0.5;
-webkit-transform:  scale(1.0);  
-moz-transform:  scale(1.0);
-ms-transform:  scale(1.0);
transform:scale(1.0);
  }  
50% { opacity: 0.6;
-webkit-transform:  scale(1.5);  
-moz-transform:  scale(1.5);
-ms-transform:  scale(1.5);
transform:scale(1.5);
  }
 70% { opacity: 0.7;
-webkit-transform:  scale(1.0);  
-moz-transform:  scale(1.0);
-ms-transform:  scale(1.0);
transform:scale(1.5);
  }
85% { opacity: 0.8;
-webkit-transform:  scale(0.7);  
-moz-transform:  scale(0.7);
-ms-transform:  scale(0.7);
transform:scale(0.7);
  }
100% { opacity: 1.0; }
}
.naranjito{
color:#ff8000;
font-size:1rem;
margin-top:10px;
}
.imagens{
height:65px;
margin-left:1px;
margin-top:3px;
background:transparent;
z-index:-1;
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 15px 15px red;
-ms-box-shadow: 0 0 15px 15px red;
-o-box-shadow: 0 0 15px 15px red;
box-shadow: 0 0 15px 15px red;
}
.imagenn{
height:65px;
margin-left:1px;
margin-top:3px;
background:transparent;
z-index:-1;
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 10px 10px green;
-ms-box-shadow: 0 0 10px 10px green;
-o-box-shadow: 0 0 10px 10px green;
box-shadow: 0 0 10px 10px green;
}
.imagenb{
height:65px;
margin-left:1px;
margin-top:3px;
background:transparent;
z-index:-1;
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 10px 10px blue;
-ms-box-shadow: 0 0 10px 10px blue;
-o-box-shadow: 0 0 10px 10px blue;
box-shadow: 0 0 10px 10px blue;
}
.imagen:hover{
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 15px 15px #ec731e;
-ms-box-shadow: 0 0 15px 15px #ec731e;
-o-box-shadow: 0 0 15px 15px #ec731e;
box-shadow: 0 0 15px 15px #ec731e;
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

.parpadeac { 
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 10;
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
.gira:hover {
transition:all 3s ease-in-out;	    
-webkit-transform: rotateY(360deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(3600deg);
transform-style: preserve-3d;
}
.pulsar{
position:relative;
width:90%;
cursor:pointer;
}
.pulsar:active{
top:5px;
-webkit-box-shadow: 0 5px 5px 0 #ff8000;
-moz-box-shadow: 0 5px 5px 0 #ff8000;
box-shadow: 0 5px 5px 0 #ff8000;
}
.flecha {
    height: 15px;
    width: 15px;
    border-right: 4px solid #152163;
    border-bottom: 4px solid #152163;
    transform: rotate(-45deg);
    cursor: pointer;
    float:right;
    margin-right:10px;
    margin-top:5px;
}
.imgbot:hover{
-webkit-transform:  scale(1.4);  
-moz-transform:  scale(1.4);
-ms-transform:  scale(1.4);
-o-transform: scale(1.4);
transform:scale(1.4);
}
.fwselini{
border-radius:10px 0 0 10px;
background:silver;
color:black;
font-weight:bold;
font-size:1.4rem;
text-align:center;
width:45%;
}
.pane {
    display: block;
	text-align: center;
   /* height: 40px;
    padding: 1px;
    margin: 2px auto;*/
    position: relative;
    /*box-shadow*/
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    border: 1px solid #5c5c5c;
    border-top: 1px solid #999;
    /*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(0,0,0,0.8);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -moz-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -ms-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -o-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    /*background-size*/
    -webkit-background-size: 5px 5px;
    -moz-background-size: 5px 5px;
    -o-background-size: 5px 5px;
    background-size: 5px 5px;
}
span { margin: 10px }
p,
.button {
    /*transition*/
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
	cursor: pointer;
}
span:hover>p {
    color: #00aeff;
    text-shadow: -2px -4px 2px #000;
}
.button {
    display: block;
    float: left;
    font-size: 28px;
    background-color: #434343;
    background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151));
    border: none;
    border-top: 3px solid #c2c2c2;
    /*border-radius*/
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    padding: 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    margin-right: 10px;
    text-decoration: none;
    color: #242424;
    background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                                                -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),                        -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                        -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                                                -webkit-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}
.button:active {
    border-top: 0px solid #dde1e7;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    /*transform*/
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
}
/* Social btns */
.social span {
    width: 30px;
    height: 25px;
    margin: 7px;
    font-size: 20px;
}
.social span p {
    padding: 0;
    margin: -7px;
}
.social span:active {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),        0 1px 0 #2D2D2D,         0 2px 0 #2D2D2D,        0 3px 0 #2C2C2C,         0 4px 0 #2A2A2A,         0 0 0 7px #222,         0 4px 0 7px #222,        0px 0px 50px #FFF;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),        0 1px 0 #2D2D2D,         0 2px 0 #2D2D2D,        0 3px 0 #2C2C2C,         0 4px 0 #2A2A2A,         0 0 0 7px #222,         0 4px 0 7px #222,        0px 0px 50px #FFF;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),        0 1px 0 #2D2D2D,         0 2px 0 #2D2D2D,        0 3px 0 #2C2C2C,         0 4px 0 #2A2A2A,         0 0 0 7px #222,         0 4px 0 7px #222,        0px 0px 50px #FFF;
}
.social span:hover > .t {
    color: #53B1F0;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .s {
    color: #00aeff;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .y {
    color: #C30000;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .f {
    color: #3B5998;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .g {
    color: #D84335;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .k {
    color: #32516C;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .l {
    color: #71B6D9;
    text-shadow: -1px -1px 1px #000;
}
.social span:hover > .m {
    color: #44BBFF;
    text-shadow: -1px -1px 1px #000;
}