/*
Reglas para trabajar con CSS

1) Primero se definen los estilos para ETIQUETAS html. por ejemplo : header, footer, div, a, p, etc.

2) Despues se definen los estilos para IDENTIFICADORES (id), los id's son elementos unicos en el html,
   en el css se declaran con el simbolo de # ejemplo: #nombre-id{  estilos  } y en el html se llaman
   mediante el atributo id ejemplo :   <div id="publicidad"></div>
   
3) Al fnal se definen los estilos para las CLASES (class), las clases son elementos que se pueden
   repetir 'n' veces en el html, en el css se declaran con el simbolo de . ejemplo :   .nombre-clase{  estilos  }
   y en el html se llaman mediante el atributo class, ejemplo : <div class="borde-logos"></div> 

4) Todos los estilos se ordenan conforme van apareciendo en la disposicion del html, teniendo en cuenta
   la prioridad anterior, es decir, primero ETIQUETAS, luego IDENTIFICADORES y al final las CLASES

5) Los atributos se declaran de la siguiente forma : { atributo:valor1; atributo:valor2; ...atributoN:valorN; }

6) Todos los atributos se ordenan alfabeticamente, por ejemplo si tengo width, color, display
   entonces el orden seria primero color, luego display y al final width
   
7) Si tenemos estilos para el comodin *, o para las etiquetas html y/o body, estos estilos son los
   primeros en definirse. 

8) En el body debemos declarar un tamaņo de fuente global.

9) Si tenemos estilos para resetear elementos html, estos iran antes de cualquier estilo.

*/

/*   reseteo universal   */
* {
	border: 0;
	margin: 0;
	padding: 0;
}

/*   16px = 12pt = 100% = 1em   */
body {
    Background-color: #CCCCCC;   
    font-size: 1em;     /*   16px = 1em.  standart, tamaņo de fuente Global */
}


h4 {
/*
  color: #F47D31;
  color: #663300;
  color: darkblue;
  background-color: #fff;
*/
	color: #3994AE;
	background-color: #fff;
	-webkit-box-shadow: 2px 2px 20px #888;
	-webkit-transform: rotate(-25deg);
	-moz-box-shadow: 2px 2px 20px #888;
	-moz-transform: rotate(-45deg);
	position: absolute;
	padding: 0px 150px;
	top: 50px;
	left: -120px;
	text-align:left;
	
}

section#contacto {
/*
	max-width: 97%; 
  max-width: 94%;   /*  ancho del header (titulo)   
  margin: -1.5em auto;

  background: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#797979));
  background: -moz-linear-gradient(top,  #797979,  #ffffff);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
*/
	background: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#797979));
  background: -moz-linear-gradient(top,  #797979,  #ffffff);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
	
	border-radius: 0.5em;
	display: block;   
	margin: 0.00625em auto;
	max-width: 94%;
  min-height: 12em;
  padding: 1.0em 1.0em 1.0em 1.0em;   
  text.align: center;
}

section#contacto1 {
/*	
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
	
    background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#959595));
    background: -moz-linear-gradient(top,  #959595,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#ffffff');

    background-color: #FFF;   
*/
    background: -webkit-gradient(linear, left top, left bottom, from(#001848), to(#ffffff));
    background: -moz-linear-gradient(top,  #001848,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#001848', endColorstr='#ffffff');
	

	  border-radius: 0.5em;
  	display: block;   
  	margin: 0.1em auto;
  	max-width: 97%;   /*	ancho del header (titulo)   */
    min-height: 12em;
    padding: 1.0em 1.0em 1.0em 1.0em;   
    text-align: center;
}

section#titulo_video_1 {
/*
    margin: 16px auto; 
*/
    color: #991313;
    font-family: Tahoma;
    font-size: 21.0px;
    margin: 18px auto; 
    text-decoration: none;
    text-align: center;
}

    #wtop_video {       /*   inicio del Video (top)*/
      margin: 18px auto; 
    }

    /*
section#sec_boton a {
#sec_boton a {
    */
section#sec_boton a {
    /*
    margin: -60px 10px 10px 10px;    no funca
    margin: 60px 10px 10px 10px;
    */
    color: #183786;
    font-family: Tahoma;
    font-size: 17.0px;
    text-decoration: none;
}

section#sec_boton a:hover {
/*
    font-family:Tahoma; color:#212121; font-size:17.0px; text-decoration:underline;
*/
    font-family:Tahoma; color:#991313; font-size:17.0px; text-decoration:underline;
}

section#contacto11 {
/*
    background: #424242;
    min-height: 9em;  
    min-height: 140px;  
    padding: 16px 8px 8px 8px;   
    vertical-align: top;      
    margin: 1.6px auto; 
*/
    /*
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    */
    background: -webkit-gradient(linear, left top, left bottom, from(#001848), to(#ffffff));
    background: -moz-linear-gradient(top,  #001848,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#001848', endColorstr='#ffffff');
	
    border-radius: 8px;
    display: inline-block;
    margin: 5px 5px 1px 5px;	
	  max-width: 97%;
	  min-height: 50px;	
    padding: 1px 8px 1px 8px;   
}

section#contacto2 {
/*
  max-width: 97%; 
  max-width: 94%;   /*  ancho del header (titulo)   
  margin: -1.5em auto;
*/
  background: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#797979));
  background: -moz-linear-gradient(top,  #797979,  #ffffff);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
  
  border-radius: 0.5em;
  display: block;   
  margin: 1.5em auto;
  max-width: 94%;
  min-height: 12em;
  padding: 1.0em 1.0em 1.0em 1.0em;   
  text-align: center;
}

section#contacto22 {
/*  
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
  
    background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#ffffff));
    background: -moz-linear-gradient(top,  #959595,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#991313), to(#212121));
    background: -moz-linear-gradient(top,  #991313,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#991313', endColorstr='#ffffff');
    text-align: center;
*/
    background: -webkit-gradient(linear, left bottom, left top, from(#001848), to(#ffffff));
    background: -moz-linear-gradient(top,  #001848,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#001848', endColorstr='#ffffff');

    border-radius: 0.5em;
    display: block;   
    margin: 0.1em auto;
    max-width: 97%;   /*  ancho del header (titulo)   */
    min-height: 12em;
    padding: 1.0em 1.0em 1.0em 1.0em;   
    text-align: left;
}

section#titulo_video_2 {
/*
*/
    color: #991313;
    font-family: Tahoma;
    font-size: 21.0px;
    margin: 1.0em auto; 
    text-decoration: none;
}


section#contacto222 {
/*
    background: -webkit-gradient(linear, left top, left bottom, from(#991313), to(#212121));
    background: -moz-linear-gradient(top,  #991313,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#991313', endColorstr='#ffffff');
*/
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    border-radius: 0.5em;
    display: inline-block;
    margin: 0.1em auto; 
    max-width: 97%;
    min-height: 9em;  
    padding: 1.0em 0.5em 0.5em 0.5em;   
    vertical-align: top;      
}

section#contacto12 {
    background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
	
	display: block;   
	line-height: 10em;	
	letter-spacing: normal;	
	left: 10em;	
	top: 10em;	
	width: 10em;	
	
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
}

div#experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
    }

div#cube {
      position: relative;
      margin: 0 auto;
      height: 400px;
      width: 400px;
      -webkit-transition: -webkit-transform 2s linear;
      -webkit-transform-style: preserve-3d;
    }
	
    .face {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
      background-color: rgba(50, 50, 50, 0.7);
    }	
	
    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(200px);
    }

    #cube .two {
      -webkit-transform: translateZ(200px);
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
    }
	
	
        var xAngle = 0, yAngle = 0;
        document.addEventListener('keydown', function(e)
		{
                switch(e.keyCode)
                {

                        case 37: // left
                                yAngle -= 90;
                                break;

                        case 38: // up
                                xAngle += 90;
                                break;

                        case 39: // right
                                yAngle += 90;
                                break;

                        case 40: // down
                                xAngle -= 90;
                                break;
                };

                $('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
        }, false);


/*  manejo de Responsive Web Design (media cuery)   */
@media screen and (min-width: 921px) and (max-width: 1080px) {
}

@media screen and (min-width: 620px) and (max-width: 920px) {   
}

@media screen and (min-width: 469px) and (max-width: 619px) {   
}

/*
@media screen and (min-width: 318px) and (max-width: 468px) {   
@media screen and (min-width: 17px) and (max-width: 317px) {   
@media screen and (max-width: 317px) {
@media screen and (max-width: 360px) {
*/

@media screen and (max-width: 440px) {
/*
*/
@media screen and (max-width: 385px) {

@media screen and (max-width: 335px) {

@media screen and (max-width: 285px) {

@media screen and (max-width: 268px) {

@media screen and (max-width: 248px) {
  section#titulo_video_1 {
    /*
      color: #FF0000;
    */
      font-size: 15.0px;
  }

  section#contacto22 {
    /*
    */
      font-size: 12.0px;
  }

@media screen and (max-width: 200px) {
  section#titulo_video_1 {
    /*
      color: #9933CC;
    */
      font-size: 8.0px;
  }

  section#contacto22 {
    /*
    */
      font-size: 10.0px;
  }

}