/*
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;
}

/*
@font-face {
    font-family: "Chalet";
    src: url("../fonts/Chalet.eot");	
    src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),	
         url("../fonts/Chalet.woff") format("woff"),
         url("../fonts/Chalet.ttf") format("truetype"),
         url("../fonts/Chalet.svg#Chalet") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pecita";
    src: url("../fonts/Pecita.eot");	
    src: url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),	
         url("../fonts/Pecita.woff") format("woff"),
         url("../fonts/Pecita.ttf") format("truetype"),
         url("../fonts/Pecita.svg#Chalet") format("svg");
    font-weight: normal;
    font-style: normal;
}
*/


/* begin Page */
/* Created by Carlos Vassallo Donayre */

/* Inicio de la barra vertical scroll */
html {
/*
    Fondo de la pantalla
  background-color: transparent;
       rosado
    background-color: #F4A9EA;
*/  
  overflow-y: auto;
  /* Kudos to @sami for pointing out that setting the overflow to "auto" instead of "hidden" fixes the keyboard nav bug! */

/* Jueves 28-8-2014
  background-color: transparent;
*/  
}

@media only screen and (max-device-width:480px) {
  html {
    overflow: auto;
  }
}

body.custom {
/*
    Extremo inicial y final de la barra
    right: 8px;
    right: 10px;
    right: 12px;
*/

/* Jueves 28-8-2014
  background-position: center top;
  background-image: url(images/bg.jpg);
  background-repeat: no-repeat;
  position: absolute;
*/  
  top: 0;
  left: 0;
  bottom: 0;
  right: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
/*
    Extremo inicial y final de la barra
    height: 6px;
    width: 8px;
    width: 10px;
    width: 12px;
*/  
    width: 12px;
    height: 3px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
/*
    Extremo inicial y final de la barra
    background-color: transparent;
    background-color: #F4A9EA;
    height: 30px;
    height: 10px;
*/  
    height: 30px;
    display: block;
    background-color: #CCCCCC;
}

::-webkit-scrollbar-track-piece {
/*
    Fondo de la barra
    background-color: #3b3b3b;
    background-color: #fff;
    -webkit-border-radius: 6px;
*/  
    background-color: #212121;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical {
/*
    Barra scroll
    background-color: #666;
    background-color: #fff;
       rosado
    background-color: #F4A9EA;
       celeste
    background-color: #3994AE;
    height: 50px;
    height: 10px;


    background-color: #F4A9EA;

    background: -webkit-gradient(linear, left top, left bottom, from(#F4A9EA), to(#ffffff));
    background: -moz-linear-gradient(top,  #F4A9EA,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#450000), to(#ffffff));
    background: -moz-linear-gradient(top,  #450000,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    -webkit-border-radius: 6px;
*/  
    -webkit-border-radius: 3px;

    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    height: 50px;
}

::-webkit-scrollbar-thumb:horizontal {
/*
    Barra scroll
    background-color: #666;
    background-color: #fff;
    background-color: #2B6145;
    width: 50px;
    background-color: #CCCCCC;
    -webkit-border-radius: 3px;
*/  
    -webkit-border-radius: 6px;
    background: -webkit-gradient(linear, left top, left bottom, from(#450000), to(#ffffff));
    background: -moz-linear-gradient(top,  #450000,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    width: 50px;
}
/* Fin de la barra vertical scroll */





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

section#contenedor {
/*
*/
	border-radius: 0px;
	display:block;
	width: 100%;   
  min-height: 110px;
  margin: 0px 0px 0px -5px;
}

.social {
    /*
    top: 200px;
    top: -170px;
    */
    left: 0;
    position: fixed;
    top: 0px;
    z-index: 2000;
}

.social ul {
    /*
    */
    list-style: none;
}

.social ul li a {
    /*
    */
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.social ul li .icon-facebook {background: #3b5998;}
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-instagram {background: #666666;}
.social ul li .icon-mail {background: #666666;}

.social ul li a:hover {
    background: #000;
    padding: 10px 30px;
}



section#boton_social {
/*
    background: -webkit-gradient(linear, left top, right bottom, from(#3886BE), to(#ffffff));
    background: -moz-linear-gradient(top,  #3886BE,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#991313', endColorstr='#ffffff');

    border: solid 3px #919191;
    border-radius: 8px;

    color: #000;        
    font-size: 13px;

    margin: -20px 1px 1px 460px;
    min-height: 4px; 
    padding: 1px;
    text-align: center;
    text-decoration: none;
    width: 15%;   
*/
    background: -webkit-gradient(linear, left top, right bottom, from(#3886BE), to(#ffffff));
    background: -moz-linear-gradient(top,  #3886BE,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#991313', endColorstr='#ffffff');

    border: solid 3px #919191;
    border-radius: 8px;
    left: 0;
    margin: 0px 0px 0px 5px;
    height: 26px; 
    padding: 2px 2px 2px 2px;

    position: fixed;
    top: 400px;
    width: 4%;   
    z-index: 2000;
}

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

    border: solid 3px #BDBDBD;
    color: #fff;        
}

section#clic1 {
/*
    background: -webkit-gradient(linear, left top, right bottom, from(#3886BE), to(#ffffff));
    background: -moz-linear-gradient(top,  #3886BE,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#991313', endColorstr='#ffffff');

    border: solid 3px #919191;
    border-radius: 8px;
    top: 400px;
    top: 200px;
*/

    left: 0;
    margin: 0px 0px 0px 5px;
    height: 26px; 
    padding: 2px 2px 2px 2px;

    position: fixed;
    top: 160px;
    width: 4%;   
    z-index: 2000;
}

#video7_1024 {
  display: block;
}


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

    border: solid 3px #BDBDBD;
    color: #fff;        
}
*/


/*	manejo de Responsive Web Design (media cuery 1)   */
/*
@media screen and (min-width: 921px) and (max-width: 1080px) {
@media screen and (max-width: 980px) {
*/
@media screen and (max-width: 1024px) {
    #video7_1024 {
        /*
        */
        display: none;
    }
}

@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) {
}