#superponer {
  position: relative;
  text-align: right;}
#superponer h5 {
  color: #5eb2e8;
  font-family: Georgia;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}

#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 20px;
  left: 90px;
  letter-spacing: 10px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70px;
}
#superponer h6 span {
  color: #405aa0;
  font-family: Times New Roman;
  font-size: 40px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}


 .fixed-bg {
    background-image: url(../imagenes/Pmaquinas.jpg);      
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.jssora02l,.jssora02r{display:block;position:absolute;width:55px;height:55px;cursor:pointer;background:url('imagenes/a02.png') no-repeat;overflow:hidden}.jssora02l{background-position:-3px -33px}.jssora02r{background-position:-63px -33px}.jssora02l:hover{background-position:-123px -33px}.jssora02r:hover{background-position:-183px -33px}.jssora02l.jssora02ldn{background-position:-3px -33px}.jssora02r.jssora02rdn{background-position:-63px -33px}.jssora02l.jssora02lds{background-position:-3px -33px;opacity:.3;pointer-events:none}.jssora02r.jssora02rds{background-position:-63px -33px;opacity:.3;pointer-events:none}.jssort03 .p{position:absolute;top:0;left:0;width:62px;height:32px}.jssort03 .t{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.jssort03 .w,.jssort03 .pav:hover .w{position:absolute;width:60px;height:30px;border:#fff 1px dashed;box-sizing:content-box}.jssort03 .pdn .w,.jssort03 .pav .w{border-style:solid}.jssort03 .c{position:absolute;top:0;left:0;width:62px;height:32px;background-color:#000;filter:alpha(opacity=45);opacity:.45;transition:opacity .6s;-moz-transition:opacity .6s;-webkit-transition:opacity .6s;-o-transition:opacity .6s}.jssort03 .p:hover .c,.jssort03 .pav .c{filter:alpha(opacity=0);opacity:0}.jssort03 .p:hover .c{transition:none;-moz-transition:none;-webkit-transition:none;-o-transition:none}* html .jssort03 .w{width:62px;height:32px}

#caja {
  
    background-color: #DF7401;
    height: 30px;
    width: 99%;
    padding: 5px;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    behavior:url(border.htc);
}

#cajaEncabezado {
   
  /*--  background-color: #DF7401;*/
background:radial-gradient(5px top, ellipse, yellow , gold, red );
background:-webkit-radial-gradient(5px top, ellipse, yellow, gold, red );
background:-moz-radial-gradient(5px top, ellipse, yellow,  gold, red );
background:-o-radial-gradient(5px top, ellipse, yellow,  gold, red  );
background:-ms-radial-gradient(5px top, ellipse, yellow,  gold, red );

    height: 80px;
    width: 99%;
    padding: 1px;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    behavior:url(border.htc);

}

.Blanco-con-azul-sombra {
   text-shadow: 1px 1px 2px black, 0 0 1em yellow, 0 0 0.2em yellow;
   color: orange;
   font: 1.1em;
   font-size: 28px;
   margin: 20px 0;
   text-align: right;
   padding-top: 20px;

}

.textoContenido {
  font-size: .920em;
  line-height: .901em; 
  font-weight: 25;  
  color:#151515;
  text-align: justify;
  width: 100x;
  margin:6px auto;    

}

.textoContenido f {
  font-size: 1.200em; 
  line-height: 1.21em;  
  font-weight: 20px;  
  color: #150b88 ;
  text-align: left;  
  margin:8px auto; 
}

.textoContenido g {
  font-size: 1.40em;
  line-height: 1.20em;  
  font-weight: 20px;  
  color:#151515;
  text-align: justify;  
  margin:100px auto; 
}


#main-header {
  background: #DF7401;
  color: white;
  height: 45px;  
  border: 1;
  width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */H5
  left: 0; /* Posicionamos la cabecera al lado izquierdo */
  top: 0; /* Posicionamos la cabecera pegada arriba */
  position: fixed; /* Hacemos que la cabecera tenga una posición fija */
  
}

.Brillo {
    background-color: orange;
    display: inline-block;

}

.Brillo img:hover {
    opacity: .5;
        filter: brightness(50%)
}



/*MORPH*/
.Movimiento360  {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.Movimiento360:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

/*FOCUS*/
.Enfoque {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.Enfoque:hover {
  border: 70px solid orange;
  border-radius: 50%;
}

/* Inicio de Imagen colgada*/
@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(20deg);}
    50%{-webkit-transform: rotate(-15deg)}
    100%{-webkit-transform: rotate(20deg);}
}
 
@keyframes swinging{
    0%{transform: rotate(20deg);}
    50%{transform: rotate(-15deg)}
    100%{transform: rotate(20deg);}
}
 
.swingimage{
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
}

/*Fin de imagen colgada */

 .awesome {
      
      font-family: futura;
      font-style: italic;      
      width:100%;      
      margin: 0 auto;
      color:#313131;
      font-size:35px;
      font-weight: bold;      
      -webkit-animation:colorchange 20s infinite alternate; 
      
    }

    @-webkit-keyframes colorchange {
      0% {        
        color: blue;
      }      
      10% {        
        color: #8e44ad;
      }      
      20% {        
        color: #1abc9c;
      }      
      30% {        
        color: #d35400;
      }      
      40% {        
        color: blue;
      }      
      50% {        
        color: #34495e;
      }      
      60% {        
        color: blue;
      }      
      70% {        
        color: #2980b9;
      }
      80% {     
        color: #f1c40f;
      }      
      90% {     
        color: #2980b9;
      }      
      100% {        
        color: pink;
      }
    }
   
  
 /* WebKit and Opera browsers */
  @-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
  }

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

  #stage {
    margin: 1em auto;
    font-size:18px;
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    -ms-perspective: 1400px;
    perspective: 1400px;
  }

   #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 90s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 90s;

    -webkit-transform-style: preserve-5d;
    -moz-transform-style: preserve-5d;
    -ms-transform-style: preserve-5d;
    transform-style: preserve-5d;
  }

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }


#spinner img {
    position: absolute;
    border: 8px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 80px rgba(0,0,0,0.2);
  }


/* otra animacion*/
.gps_ring {    

    -webkit-animation: pulsate 10s ease-out;
    -webkit-animation-iteration-count: infinite; 
   
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@-webkit-keyframes pulse
  {      
    0% {-webkit-transform: scale(0); opacity: 0;}
    8% {-webkit-transform: scale(0); opacity: 0;}
    15% {-webkit-transform: scale(0.1); opacity: 1;}
    30% {-webkit-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -webkit-transform: scale(1);}
  }

  @-moz-keyframes pulse
  {      
    0% {-moz-transform: scale(0); opacity: 0;}
    8% {-moz-transform: scale(0); opacity: 0;}
    15% {-moz-transform: scale(0.1); opacity: 1;}
    30% {-moz-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -moz-transform: scale(1);}
  }
 

/* Pulse class and keyframe animation */
.pulseit{
  -webkit-animation: pulse linear 10s infinite;
  animation: pulse linear 10s infinite;
}
@-webkit-keyframes pulse {
  0% { width:85; } 
  50% { width:125px; } 
  100% { width:85px; }
}
@keyframes pulse {
  0% { width:85px; } 
  50% { width:125px; } 
  100% { width:85px; }
}


.shine
{
background-color:#222 ;
background:-webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.7, #fff));
background-repeat:no-repeat;
-webkit-background-size: 100px;
color: rgba(255, 255, 255, 0.2);
-webkit-background-clip: text;
-webkit-animation-name: shining;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shining
{
0%
{
background-position: left top;
}
100%
{
background: right bottom;
}
}

/* Mapa de google movil */

.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;

}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.flashit{
  -webkit-animation: flash linear 10s infinite;
  animation: flash linear 10s infinite;
}
@-webkit-keyframes flash {
  0% { opacity: 1; } 
  50% { opacity: .1; } 
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: 1; } 
  50% { opacity: .1; } 
  100% { opacity: 1; }
}

#container {
  position: absolute;
  top: 20%;
  left: 27%;
  width: 10%;
  height: 10%;

}

.table-container
{
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
}

/*Flecha arriba  */

.ir-arriba {
  display:none;
  padding:20px;
  background:#024959;
  font-size:20px;
  color:#fff;
  cursor:pointer;
  position: fixed;
  bottom:20px;
  right:20px;
}

 #bocadilloarriba {
padding: 10px;
width: 220px;
border­radius: 10px;
background­color: blue;
font­family:   Helvetica, Arial, sans-serif;
font­size: 1.4em;
}

#bocadilloarriba:before {
content:"";
position: absolute;
width: 0;
height: 0;
border­bottom: 30px solid black;
border­right: 20px solid transparent;
border­left: 20px solid transparent;
margin: ­30px 0 0 90px;
}


/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:white; font-size: 15px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 3px; line-height: 1.2em; font-size: 1.4em;}
img { display: block; margin-bottom: 1px;}
aside { font-style: italic; font-size: 1.0em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
	
/* Structure */
#wrapper {
	width: 96%;	
	max-width: 920px;
	margin: auto;

	padding: 0%;
	} 

	#main {
		width: 60%;
		margin-right: 5%;
		float: left;
		}		
		
	aside {
		width: 35%;
		float: right;
		}


/* Logo H1 */
header h1 {
	height: 155px;
	width: 320px;
	float: right;
	display: block;
	/*background: url(../imagenes/Logof.png) 0 0 no-repeat;*/
	text-indent: -9999px;

	}
		
/* Nav */
header nav {
	float: right;
	margin-top: 40px; 
	}
	
	header nav li {
		display: inline;
		margin-left: 15px;
		}

#skipTo {
	display: none;
	}
	#skipTo li {
		background: #b1fffc;
		}

/* Banner */			
#banner {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	}

	#banner img {
		width: 70%;
		}


/* Media Queries */
@media screen and (max-width: 480px) {

	#skipTo {
		display: block;
		}
	
	header nav, #main, aside{
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
		}	
		header nav li {
			margin: 0;
			background: #efefef;
			display: block;
			margin-bottom: 3px;
			}
			header nav a {
				display: block;
				padding: 10px;
				text-align: center;
				}			

    #container {
      position: absolute;
      top: 28%;
      left: 45%;
      width: 50%;
      height: 10%;      
      
    }

}


@media (min-width: 500px) and (max-width:850px) {
   #container {
      position: absolute;
      top: 20%;
      left: 25%;
      width: 50%;
      height: 10%;      
      /*background: red;*/
    }
}


@media (min-width: 851px) and (max-width:1200px) {
   #container {
      position: absolute;
      top: 20%;
      left: 20%;
      width: 50%;
      height: 10%;      
      /*background: blue;*/
    }

    @media (min-width: 300px) and (max-width:470px) {
   #container {
      position: absolute;
      top: 20%;
      left: 20%;
      width: 50%;
      height: 10%;      
      background: blue;
    }

}
/* responsive tables */

* {
  margin: 0;
  padding: 0;
}
body {
  background: url(../images/noise_light-grey.jpg);
  font-family: 'Helvetica Neue', arial, sans-serif;
  font-weight: 300;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 4em;
  font-weight: 400;
  margin: 0 0 20px;
  text-align: center;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #bbb;
}
h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
}
hr {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  margin: 25px 0;
  clear: both;
}
.centered {
  text-align: center;
}
.wrapper {
  width: 100%;
  padding: 30px 0;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.table-container {
  padding: 20px;
  margin: 0 0 20px;
  background: #fff;
  box-shadow: 0 0 5px #ddd;
}
/* responsive tables */
.responsive-stacked-table {
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: collapse;
  table-layout: fixed;
}
.responsive-stacked-table th,
.responsive-stacked-table td {
  padding: 10px;
  border-top: 1px solid #ddd;
}
.responsive-stacked-table thead {
  background: #eee;
  border-bottom: 3px solid #ddd;
}
.responsive-stacked-table tr:nth-child(even) {
  background: #f5f5f5;
}
.responsive-stacked-table .fa {
  margin-right: 5px;
}
.responsive-stacked-table .fa-check-circle {
  color: #690;
}
.responsive-stacked-table .fa-times-circle {
  color: #c00;
}

.responsive-stacked-table.with-mobile-labels {
  font-size: .85em;
}

@media (max-width: 1199px) {
  .container {
    width: auto;
    padding: 0 10px;
  }
}

@media (max-width: 767px) {
  .responsive-stacked-table thead {
    display: none;
  }
  .responsive-stacked-table tr,
  .responsive-stacked-table th,
  .responsive-stacked-table td {
    display: block;
  }
  .responsive-stacked-table td {
    border-top: none;
  }
  .responsive-stacked-table tr td:first-child {
    border-top: 1px solid #ddd;
    font-weight: bold;
  }
  .responsive-stacked-table.with-mobile-labels tr td:first-child {
    font-weight: 300;
  }
  .responsive-stacked-table.with-mobile-labels td:before {
    display: block;
    font-weight: bold;
  }
  .responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before {
    content: "Product:";
  }
  .responsive-stacked-table.with-mobile-labels td:nth-of-type(2):before {
    content: "Processor:";
  }
  .responsive-stacked-table.with-mobile-labels td:nth-of-type(3):before {
    content: "Memory:";
  }
  .responsive-stacked-table.with-mobile-labels td:nth-of-type(4):before {
    content: "Hard Drive:";
  }
  .responsive-stacked-table.with-mobile-labels td:nth-of-type(5):before {
    content: "Graphics Card:";
  }
}
/*  fin de tabla */