/*!
 * TEMA para LV-Energy
 */

/* ----------------------------- GENERALES */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.alert{margin-bottom: 30px;}
.alert button{display:none;}
html,body {min-height: 100%;width: 100%;}
body{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight:300;
  font-style: normal;
  color: #404040;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2em;}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #404040;
}
a:hover, a:focus {
  color: #BECE0A;
}

p {
  font-size: 17px;
  line-height: 1.5em;
  margin-bottom: 20px;
}
p strong{font-weight: bold; display: block;}

.container{ width: 90%; margin: 0 auto;}

/* ----------------------------- MENU */
nav,
.navbar-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

nav {
  position: fixed; top: 0; right: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: table;
  color: #fff;
  background: rgba(190, 206, 16, 1); 
}

.nav-hide { display: none; }

nav ul {
  display: table-cell;text-align: right;
  vertical-align: top; padding-top: 100px;
  padding-left: 0 !important;
}

nav ul li { list-style: none;}

nav ul li a {
  font-size: 35px;line-height: 1.4em; margin-right: 30px;
  color: inherit;
  text-decoration: none; display: block;
}

nav ul li a:hover, nav ul li a:focus {
  color: #404040;
}

@media only screen and (min-width: 550px){nav ul li a {font-size: 50px;}}

.navbar-toggle {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  z-index: 20;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 100%;
  height: 4px;
  margin-bottom: 4px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.navbar-on .bar1,
.navbar-on .bar2,
.navbar-on .bar3 { background-color: #fff; }
.navbar-on .bar1 {
  transform-origin: 25% 40%;
  transform: rotate(45deg);
}
.navbar-on .bar3 {
  transform-origin: 25% 40%;
  transform: rotate(-45deg);
}
.navbar-on .bar2 { background-color: transparent; }

.marca{
  background-image: url('../img/marca-web.png');
  background-image: url('../img/marca-web.svg');
  text-indent: -99999px;
  width: 150px; height: 34px;
  background-size: 150px 34px;
  z-index: 10000;
}

.header-fondo-mobile .marca{position: fixed; top: 25px; left: 20px; margin-top: 0; display: inline-block;}
.header-fondo-mobile{ width: 100%; height: 80px; background: rgba(190, 206, 16, 0); position: fixed;top: 0; z-index: 10000; transition: all 0.3s ease-in-out;}
@media only screen and (min-width: 500px){
  .marca{ width: 150px; height: 34px;background-size: 150px 34px;}
  .header-fondo-mobile .marca{top: 25px;}
}
@media only screen and (min-width: 450px) and (max-width: 899px){
  .header-fondo-mobile .marca{position: relative; margin: 0 auto;display: block; left: 0;}
}
@media only screen and (min-width: 1000px){
 nav{display: table !important;float: right;position: relative;width: auto;}
  .nav-hide { display: block; }
  .navbar-toggle{display: none;}
  nav{height: 80px;background: rgba(190, 206, 16, 0);}
  nav ul {display: inline-block; vertical-align: baseline; padding-top: 20px; padding-left: 0 !important; margin-right: 0; float: right;}  
  nav ul li { display: inline-block;text-align: center;width: 110px; height: 40px; border-left: 1px solid #fff; vertical-align: middle;}  
  nav ul li a {font-size: 13px;line-height: 1.4em;font-weight: 600; text-align: center; display: block; margin-left: 10px; margin: 10px;}
  nav ul li .dos-lineas{position: relative; top: -10px;}
  .container{ width: 950px;}
  .marca-link{float: left;position: relative;} .header-fondo-mobile .marca{position: relative;}
  .nav-hide{float: right;position: relative; width: auto;}
}


/* ----------------------------- HOME */
#page-top, section{width: 100%; min-height: 100vh;}
#page-top .container{padding-top: 200px;color: #fff; text-align: center;}
#page-top .container h2{font-weight: 200;font-size: 2.5em;}
#page-top {
  background: url(../img/siltron-header-paneles-solares-H.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media only screen and (min-width: 700px){
  #page-top .container h2{font-size: 4em}
}

/* ----------------------------- VENTAJAS */
#ventajas {text-align: center; }
#ventajas h3{font-size: 2em; padding-top: 50px; font-weight: 500;}#ventajas h3 span{font-weight: 200;}
#ventajas hr{margin-top: 30px; margin-bottom: 30px;}
#ventajas ul li{display: inline-block; text-align: center; padding: 10px 35px; width: 150px; vertical-align: top; margin-bottom: 20px;}
#ventajas ul li img{display: block; width: 100px; height: auto; margin: 10px auto;}
@media only screen and (min-width: 400px){
 #ventajas h3{font-size: 3em;}
}


/* -----------------------------  SOBRE NOSOTROS */
#sobre-nosotros{text-align: center;}
#sobre-nosotros .container{padding-top: 50px; border-top: 1px #BECE0A solid;}
#sobre-nosotros h3{font-size: 2em; font-weight: 500;}#sobre-nosotros h3 span{font-weight: 200;}
#sobre-nosotros hr{margin-top: 30px; margin-bottom: 30px;}
#sobre-nosotros p{max-width: 500px; margin: 0 auto;}
#sobre-nosotros img{width: 100px; height: auto; margin-bottom: 40px;}
@media only screen and (min-width: 400px){
 #sobre-nosotros h3{font-size: 3em;}
}

/* -----------------------------  QUIENES SOMOS */
#quienes-somos{text-align: center;}
#quienes-somos .container{padding-top: 50px; border-top: 1px #BECE0A solid;}
#quienes-somos h3{font-size: 2em; font-weight: 500;}#quienes-somos h3 span{font-weight: 200;}
#quienes-somos hr{margin-top: 30px; margin-bottom: 30px;}
#quienes-somos ul{}
#quienes-somos ul li{ width: 100%; margin-bottom: 50px;padding-left: 10px; padding-right: 10px;}
#quienes-somos ul li img{width: 200px; height: auto; border-radius: 100px;}
#quienes-somos ul li .nombre{font-size: 1.2em; padding-top: 30px;}
#quienes-somos ul li .nombre-1{padding-top: 0px; line-height: 0.2em;}
#quienes-somos ul li .puesto{font-size: 1em; text-transform: uppercase; font-weight: 600; color: #BECE0A;}
#quienes-somos ul li .info{max-width: 90%; margin: 0 auto;}
@media only screen and (min-width: 1000px){
  #quienes-somos ul li{display: inline-block; width: 30%; vertical-align: top;}

  #quienes-somos ul #daniel-pons{width: 100%; margin-bottom: 50px;}
}
@media only screen and (min-width: 400px){
 #quienes-somos h3{font-size: 3em;}
}

/* -----------------------------  MARCAS */
#marcas{text-align: center;}
#marcas .container{padding-top: 50px; border-top: 1px #BECE0A solid;}
#marcas h3{font-size: 2em; font-weight: 500;}#marcas h3 span{font-weight: 200;}
#marcas hr{margin-top: 30px; margin-bottom: 30px;}
#marcas ul li{display: inline-block; width: 90%; vertical-align: top;}
#marcas ul li img{width: 100%; height: auto;}
#marcas ul li p {font-size: 0.7em;}
@media only screen and (min-width: 450px){
  #marcas ul li{width: 41%; padding: 4%;}
}
@media only screen and (min-width: 1000px){
  #marcas ul li{width: 25%; padding: 4%;}
}
@media only screen and (min-width: 400px){
 #marcas h3{font-size: 3em;}
}

/* ----------------------------- CONTACTO */
#contacto {text-align: center;}
#contacto .container{padding-top: 50px; border-top: 1px #BECE0A solid;}
#contacto h3{font-size: 2em; font-weight: 500;}#contacto h3 span{font-weight: 200;}
#contacto hr{margin-top: 30px; margin-bottom: 30px;}
.contacto-mapa iframe {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
	  -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
    width: 100%;
    height: 60vh;
}
#contacto .fa{color: #BECE0A; font-size: 1.5em; width: 40px;}
#contacto .fa-map-marker{position: relative; left: 5px;}
#contacto .fa-whatsapp{position: relative; left: 5px;}
#contacto .fa-facebook{position: relative; left: 5px;}
.contacto-datos{padding-bottom: 50px;}
.contacto-datos li{line-height: 2em;}
.contacto-datos h4{font-weight: 500; padding-top: 50px; padding-bottom: 15px;}
.contacto-datos h4:first-child{padding-top: 0;}
.contacto-datos ul a{text-decoration: none;}
.contacto-mapa{padding-bottom: 100px;}
@media only screen and (min-width: 1000px){
  .contacto-datos{width: 40%; float: right; text-align: left;}
  .contacto-mapa{width: 55%; float: left; margin-right: 5%;}
}

.contacto-mapa{display: none;}
.contacto-mapa-1{display: block;}
.contacto-mapa-1 img{width: 100%; height: auto;}
@media only screen and (min-width: 1000px){
 .contacto-mapa-1{display: block;width: 55%; float: left; margin-right: 5%;}
}
@media only screen and (min-width: 400px){
 #contacto h3{font-size: 3em;}
}

/* ----------------------------- FOOTER */
footer{background-color: #fff;color: #404040;}
footer .container{padding-top: 50px; border-top: 1px #BECE0A solid;}
.redes-footer{display: block;}
.redes-footer ul{text-align: center;}
.redes-footer li{display: inline-block;}
.redes-footer li i{font-size: 2em;padding: 5px;}
.copy p{text-align: center;font-size: 0.8em; padding-top: 20px;}
.qr-afip{text-align: center;}
@media only screen and (min-width: 1000px){
 .redes-footer{display: none;}
 .qr-afip{float: left;}
 .copy{float: right;}
}

/* ----------------------------- OBJETOS FIJOS */
 #objetos-fijos{display: none;}
@media only screen and (min-width: 1000px){
  #objetos-fijos{display: block; position: fixed; top: 40%;}
  #redes-fijas{position: fixed; left: 40px;}
  #redes-fijas a{font-size: 1.3em;}
  #redes-fijas a, #navegacion-fija a{color: #ffffff;}
  #redes-fijas li{padding: 10px; line-height: 10px;}
  #navegacion-fija{
   position: fixed; right: 40px; top: 20%;
   background: url(../img/barra-menu-01.png) no-repeat center center;
  }#navegacion-fija ul li{margin-bottom: 50px; margin-top: 50px;}
  #navegacion-fija ul a{
   display: block; 
   text-decoration: none; font-size: 2em; line-height: 2em;
   background-image: url('../img/barra-menu-02.png'); background-repeat: no-repeat;
   text-indent: -99999px;
   width: 20px; height: 20px;
   background-size: 20px 20px;   
  }
  #navegacion-fija ul li:first-child{margin-top: 0;}
  #navegacion-fija ul li:last-child{margin-bottom: 0;}
  #navegacion-fija ul a.active{color:#BECE0A !important;
  background-image: url('../img/barra-menu-03.png');
  }
}