/* 
    Created on : 18/07/2014, 12:28:42 PM
    Author     : Jonathan Torres
*/
@import url(http://fonts.googleapis.com/css?family=Raleway:500);
/*Scrollbar*/
::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar{
	width: 12px;
	background-color: #151515;
}

::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #585858;
}
/*EMPIEZAN ESTILOS GENERALES*/
html{
    margin: 0;
}

body{
    background: whitesmoke;
    font-family: 'Raleway', sans-serif;

}
.contenedor{
    width: 90%;
    min-width: 650px;
    background: white;
    margin: 40px auto;
    padding: 0px;
    box-sizing: border-box;
    border-radius: 10px;
}
header{
    width: 100%;
    text-align: center;
}
#logo{
 background: url(logo.png) no-repeat left top;
 width: 57px;
 height: 57px;
 margin: 0 10px;
 display: inline-block;
}
#logo:hover{
 animation: logo-2 .1s steps(4) infinite;
 -webkit-animation: logo-2 .1s steps(4) infinite;
}
@keyframes logo-2 { 
  0% { background-position: 0px 0px; }
  100% { background-position: -228px 0px; }
 }
 @-webkit-keyframes logo-2 { 
  0% { background-position: 0px 0px; }
  100% { background-position: -228px 0px; }
 }
 #logo404{
 background: url(logo404.png) no-repeat left top;
 width: 133px;
 height: 133px;
 margin: 0 10px;
 display: inline-block;
 animation: logo-3 .1s steps(4) infinite;
 -webkit-animation: logo-3 .1s steps(4) infinite;
}
@keyframes logo-3 { 
  0% { background-position: 0px 0px; }
  100% { background-position: -533px 0px; }
 }
 @-webkit-keyframes logo-3 { 
  0% { background-position: 0px 0px; }
  100% { background-position: -533px 0px; }
 }
nav ul{
    width: 100%;
    margin: 0px auto;
    padding: 0;
    text-align: center;
    background: rgb(0,132,170);
    position: relative;
}

a{
    color: inherit;
    text-decoration: none;
}

nav ul li{
    color: white;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    font-size: 15px;
    padding: 0px;
    text-align: center;
    vertical-align: top;
    width: 120px; height: 50px;
}
nav ul li:hover{
    background: white;
    color: black;
}

#inicio, #nosotros, #productos, #contacto{
    background: white;
    color: black;
    margin: 0;
}

section{
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
section#notfound{
    width: 100%;
    height: 200px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
section h6{
    color: rgb(73,73,73);
}
footer{
    background: rgb(0,132,170);
    width: 100%;
    height: 33px;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    display: inline-block;
}

h6{
    color: white;
    text-align: center;
    margin: 0;
}

#text_footer::selection{
    background: rgb(208,228,240);
}
/*TERMINA ESTILOS GENERALES*/
/*EMPIEZA ESTILOS PAGINA "INICIO"*/

section img{
    width: 100%;
    max-width: 700px;
}

/*TERMINA ESTILOS PAGINA "INICIO"*/
/*EMPIEZA ESTILOS PAGINA "NOSOTROS"*/
.mision, .historia{
    width: 100%;
    text-align: left;
    display: inline-block;
}
div#foto, div#foto2{
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    float: left;
    display: inline-block;
}
div#foto img{
    width: 100%;
    max-width: 500px;
}
#parrafo,#parrafo2{
    width: 50%;
    background: rgb(200,200,200);
    padding: 10px;
    box-sizing: border-box;
    float: left;
    display: inline-block;
}
/*TERMINAN ESTILOS PAGINA "NOSOTROS"*/

/*EMPIEZAN ESTILOS PAGINA "PRODUCTOS"*/

.lista_productos{
    width: 100%;
}

.productos{
    width: 90%;
    margin: 20px auto;
}
.productos section{
    width: 100%;
    height: 250px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
}

#productos_lista{
    width: 90%;
    margin: 0px auto;
    padding: 0;
    text-align: center;
    background: rgb(225,225,225);
    position: relative;
}
#productos_lista li{
    color: black;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    font-size: 15px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    width: 150px; height: 50px;
} 
#productos_lista li:hover{
    background: white;
}
#Asp,#AspEs,#Turb,#Extra, #val, #bal{
    background: whitesmoke;
}
#galeria{
    z-index: 2;
    position: relative;
}
#prod{
    width: 100%;
    height: auto;
}
#describ{
    text-align: left;
    height: auto;
    background: rgb(220,220,220);
}
#info_balanceo{
    width: 100%;
    height: auto;
    background: white;
    text-align: left;
}
/*TERMINAN ESTILOS PAGINA "PRODUCTOS"*/

/*EMPIEZAN ESTILOS PAGINA "CONTACTO"*/
#mapa{
    width: 50%;
    margin: 10px 0;
    float: left;
}
#info{
    width: 50%;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    float: left;
}
.i-form{
    width: 60%;
    height: 2em;
    border-radius: 5px;
}
#bottom{
    width: 100%;
}
.i-form-t{
    width: 60%;
}
.formklein{
    font-size: 14px;
}
.formsubmit{
    background: rgb(0,132,170);
    color: white;
    width: 50%;
    height: 3em;
    border-radius: 5px;
}
.formsubmit:hover{
    background: rgb(0,102,150)
}
/*TERMINAN ESTILOS PAGINA "CONTACTO"*/

@media screen and (max-width: 800px){
    .contenedor{
        width: 90%;
    }
    div#foto{
        width: 100%;
        text-align: center;
    }
    #parrafo,#parrafo2{
        width: 100%;
    }
    .productos{
        width: 100%;
    }
}
/*Efecto Lightbox*/
.fadebox {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.overbox {
    display: none;
    position: absolute;
    top: 15%;
    left: 25%;
    width: 50%;
    height: 70%;
    z-index:1002;
    overflow: auto;
}
.showLightbox{
	display: none;
}
.hideLightbox{
	color: white;
	background: URL('closelabel.gif') no-repeat;
	padding-right: 66px;
	padding-bottom: 22px;
}
.carta-navidad{
	width: 100%;
	height: auto;
}