html, body {

    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size:15px;
    line-height: 120%;
}
a {
  outline: none;
  text-decoration: none;
  color: #fb3;
}
a:hover {
  text-decoration:none !important;
  color: #000;
}

h1,h2,h3,h4,h5,h6
{
  font-family: 'Raleway', sans-serif;
}

.orange {
    color:#fb3;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.75rem
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.25rem;
}

.f-icon {
  /*
  copia tecnica de FlagIcon
  pero usando los SVG de FontAwesome
  */
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1em;
  line-height: 1em;
}
.f-icon:before {
  content: "\00a0";
}

.btn-dac,
.btn-dac:visited {
  background-color:#eee!important;
  color: #222!important;
  border-bottom: 2px solid #fb3;
  font-weight: bold;
  margin: 5px;
  /*box-shadow: 0 .25em .25em rgba(0,0,0,.5);*/
}
.btn-dac:hover{
  background-color: #222!important;
  color: #eee!important;
  /*box-shadow: 0 .5em .35em rgba(0,0,0,.35);*/
}
.btn-dac-dark,
.btn-dac-dark:visited {
  background-color: #222!important;
  color: #fb3!important;
}
.btn-dac-dark:hover{
  background-color:#ddd!important;
  color: #222!important;
}

.btn {
  text-decoration: none!important;
}



/* ----- INI: HEADER ----- */
#header {
  box-shadow:         0px 6px 17px -5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 6px 17px -5px rgba(0,0,0,0.5);
  -moz-box-shadow:    0px 6px 17px -5px rgba(0,0,0,0.5);
}

/* INI: TOP-HEADER */
#top-bar {
  background-color: #444;
  color: #fff;
  padding-top: .5em;
  padding-bottom: .5em;
}

#top-header {
/*  border-top: .5rem solid #333;*/
  background-color: #fb3;
  box-shadow: 5px 0px 16px -8px rgba(0,0,0,0.5);
}
#logo {
  display: block;
  text-align:center;
}

#logo img {
  max-width: 280px;
  width: 100%;
  padding-top: 0;
}


.navbar .navbar-nav > .nav-item
{
  margin: 0;
  padding: .5em 0;
  text-align: center;
}
.navbar .navbar-nav > .nav-item:hover
{
  background-color: #222;
  color: #fff;
}
.navbar .navbar-nav > .nav-item:hover > .nav-link
{
  color: #fff;
}
.navbar .navbar-nav > .nav-item:hover
{
  background-color: #222;
  color: #fff;
}
/*
.navbar .navbar-nav > .nav-item.current
{
  background-color: #555;
  color: #fff;
}
.navbar .navbar-nav > .nav-item.current > .nav-link
{
  color: #fff;
}
*/
#top-header .nav-link {
  color: #fff;
  font-weight: bold;
}
#top-header .nav-link:hover {
  color: #fb3;
}

/* FIN: TOP-HEADER */


/* FIN: BOTTOM-HEADER /

/* ----- FIN: HEADER ----- */

/* INI: LAYOUTS GENERALES */
#main, body {
  background-color: #eee;
}
#main {
}
#primary
{
  background-color: #fff;
}
#post-title {
  background-image: url('../img/sol-ener-fondo-about-1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
  padding-top: 1em;
  padding-bottom: 1em;
}
#post-title .description{
  margin-top: 5px;
  font-weight: bold;
/*  text-shadow: 0px 1px 3px rgba(0,0,0.15); */
}
#post-title.over-title {
  padding-bottom: 12em;
}
#contenido > .over-title {
  margin-top: -12em;
  background-color: #fff;
}
.full-width #post-title .bloque-titulo-texto {
  text-align: right;
}
.full-width #post-title .bloque-titulo-texto p {
  margin-top: 1em;
  font-size: 1.1em;
  line-height: 130%;
}

/* layout 4 */
#post-title.title-min .breadcrumbs
{
  margin-bottom: .25em;
}
#post-title.title-min .el-titulo h2 {
  font-size: 1.5rem;
}
#post-title.title-min .la-descripcion p {
  display: none;
}
#post-title.title-min .encuadre-md {
  padding: 0;
}
#post-title.title-min .encuadre-md:after,
#post-title.title-min .encuadre-md:before {
    display: none
}

/* FIN: LAYOUTS GENERALES */

/* INI: PRIMARY */
#primary p {
  line-height: 150%;
  text-align: justify;
}

#primary h1 {
  font-size: 2rem;
  margin: 1.5rem 0 1.25rem 0;
}
#primary h2 {
  font-size: 1.75rem;
  margin: 1.25rem 0 1rem 0;
}
#primary h3 {
  font-size: 1.5rem;
  margin: 1rem 0 .75rem 0;
}
#primary h4 {
  font-size: 1.25rem;
  margin: .75rem 0 .5rem 0;
}
/* FIN: PRIMARY */

/* ----- ----- ----- ----- */

/* INI: FOOTER */

#footer h3 {
    margin-top:0 ;
    font-size:16px ;
    font-weight:bold ;
    color: white;
}
#footer h4 {
    margin-top:1px ;
    font-size:14px ;
    font-weight:700 ;
}
#footer li
{
  list-style: inside none;
}
#footer a
{
  text-decoration: none;
}
#footer a:hover
{
  color: #fff;
}
#top-footer {
    padding-top:30px;
    padding-bottom:35px;
    background-color:#535353;
    background-position: bottom left, bottom right;
    background-repeat:no-repeat;
    text-align:center;
}
#top-footer .container ul {
    margin: auto 0;
    text-align: center;
    width: 100%;
    overflow:hidden;
    padding:0;
    display: flex;
    align-items: center;
   justify-content: center
 }

#top-footer .container ul li a
{
    color:white;
}

#top-footer .container ul li a:hover
{
    text-decoration:none;
}
.byn-i {
  filter: grayscale(100%) invert(0.7);
  padding: 5px;
  margin-bottom: 3px;
}
.byn-s {
  filter: grayscale(100%) invert(0.3);
  padding: 5px;
  margin-bottom: 5px;
}
.byn-i:hover, .byn-s:hover {
  filter: none;
  background-color: #fff;
  border-radius: 2px;
}
#top-footer .container ul li img {
    display:block;
    margin:0 auto;
    width: 100%;
    max-width: 100px;
    max-height: 80px;
}
#top-footer .container ul li {
    text-align:center;
    line-height: 10px !important;
}

#bottom-footer {
    color: #eee;
    padding-top:30px;
    background-color:#222;
    text-align:center;
}
#bottom-footer h4 {
  margin: 1rem 0 1.5rem 0;
  color: #fff;
  font-size: 1rem;
}
#bottom-footer p {
  margin: .25rem 0;
  font-size: .9rem;
}
#bottom-footer .fa {
  font-size: 1.25em!important;
  padding: .25em;
  display: inline-block;
}
#bottom-footer #triple-footer {
  text-align:left;
}

#bottom-footer .redes {
  text-align: center;
  display: block;

}
#bottom-footer .redes img.social-ft{
  max-height: 3rem;
  width: 3rem;
  display: inline-block;
  padding: .5rem;
}

#copy {
  padding: .5rem 0;
}

/* FIN: FOOTER */

/* ----- INI PAGES ----- */

/* INI: HOME */



/* FIN: HOME */


/* ----- FIN PAGES ----- */



/* INI: EFECTOS */
/*
  Efecto para los link en cajas y titulos

  .encuadre
    se usa para los titulos y es visible

  .encuadre-hover
    se usa para los links y tiene efecto
    en el hover del <a>
*/

.encuadre
{
  display: inline-block;
  position: relative;
  padding: 1em;
}
.encuadre:after,
.encuadre:before
{
  position: absolute;
  display: block;
  content: ' ';
  border: .5em solid #fff;
  width: 50%;
  height: 50%;
}
.encuadre-md
{
  padding: .77em;
  margin-bottom: 25px;
}
.encuadre-md:after,
.encuadre-md:before
{
  border-width: .35em;
  width: 33%;
  height: 33%;
}
.encuadre:before,
a:hover .encuadre-hover:before
{
  bottom: 0;
  right: 0;
  border-top-width: 0;
  border-left-width: 0;
}

.encuadre:after,
a:hover .encuadre-hover:after
{
  top: 0;
  left: 0;
  border-bottom-width: 0;
  border-right-width: 0;
}

.encuadre-hover:after,
.encuadre-hover:before
{
  opacity: 0;
  transition: all .25s ease-out;
}
.encuadre-hover:before
{
  bottom: -1em;
  right: -1em;
}
.encuadre-hover:after
{
  top: -1em;
  left: -1em;
}

a:hover .encuadre-hover:after,
a:hover .encuadre-hover:before
{
  opacity: 1;
}

.background-hover-zoom
{
  background-size: 360px 360px;
  transition:         all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -o-transition:      all .3s ease-out;
  -moz-transition:    all .3s ease-out;
  opacity: .8;
}
.background-hover-zoom:hover
{
  background-color: #000;
  opacity: 1;
  background-size: 320px 320px;
}


/* INI: HOME SLIDER */

#slider {
  overflow: hidden;
  position: relative;
  padding-bottom: 2em;
  z-index: 300;
}
.curvado{
  overflow: hidden;
  width: 200%;
  margin-left:-50%;
  border-radius: 0 0 50% 50%;
  box-shadow: 0 1em 1em rgba(0,0,0,.5);  
}
.curvado-inner{
  width: 50%;
  margin: auto;
}
.bx-wrapper {
  margin: 0 auto!important;
  background-color: transparent!important;
  box-shadow: none!important;
  border: none!important;
  padding-left: 0px!important;
  padding-right: 0px!important;
}
.bx-wrapper .bx-pager {
    text-align: center;
    font-size: inherit!important;
    font-family: inherit!important;
    font-weight: bold;
    color: #666;
    padding-top: 1em;
    padding-bottom: 4em;
}
.bx-wrapper img {
  width: 100%!important;
  height: auto;
  min-height: 400px;
}
#slider .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#slider .caption {
  display: table;
  width: 100%;
  height: 100%;
}
#slider .caption-inner {
  display: table-cell;
  vertical-align: middle;
}
#slider .fondo {
  background-color: #00000077!important;
  padding: 1em;
}
#slider .fondo h1,
#slider .fondo p {
  font-family: 'Raleway';
  font-weight: bold;
  color: #fff;
  text-align: center!important;
}
#slider .fondo h1{
  font-size: 2em;
}
#slider .fondo p {
  font-size: 1.4em;
}
.bx-wrapper .bx-prev {
  left: 10px;
  background-image: url('../img/iconos/arrow-circle-left.svg');
  background-position: 0 0!important;
  background-size: 32px 32px;
  filter: invert(88%) sepia(23%) saturate(3304%) hue-rotate(329deg) brightness(102%) contrast(105%);
}
.bx-wrapper .bx-next {
  right: 10px;
  filter: invert(88%) sepia(23%) saturate(3304%) hue-rotate(329deg) brightness(102%) contrast(105%);
  background-image: url('../img/iconos/arrow-circle-right.svg');
  background-position: 0 0!important;
  background-size: 32px 32px;
}

.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-prev:hover {
  filter: invert(100%) !important;
  background-position: 0 0!important; /* esto anula los estilos hover del bx-slider */
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fb3;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #fff;
}
/* FIN: HOME SLIDER */

/* SERVICIOS */
#servicios {
  background-color: #fff;
  margin-top: -4em;
  z-index: 200;
}
#servicios .row > div
{
  padding-top: 4em;
}

.bg-color-1{
  background-color: #fb3;
}

#soluciones img
{
  max-height: 200px;
}


#galeria {
  z-index: 100;
  padding-bottom: 4em;
}
#galeria h1{
  color: #fff;
}
#boton-gigante-galeria {
    margin-top: 20px;
}
#boton-gigante-galeria img
{
  display: inline-block;
}
#ver-mas {
  display: inline-block;
  line-height: 150px;
  width: 150px;
  height: 150px;
  clear: none;
  background-color: #fff;
  margin: 0px 20px 20px 0;
  position: relative;
  top: 3px;
  font-size: 20px;
  text-align: left;
  padding-left: 25px;
}
#ver-mas::after {
  content: "►";
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 30px;
}
/*
#contacto {
  overflow: hidden;
  position: relative;
  padding-bottom: 2em;
  padding-top: 2em;
  margin-top: -4em;
  z-index: 400;
}
.curvado-top{
  overflow: hidden;
  width: 200%;
  margin-left:-50%;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -1em 1em rgba(0,0,0,.5);  
}
.curvado-top-inner{
  width: 50%;
  margin: auto;
  min-height: 400px;
}
#contacto .curvado-top{
  background-image: url('../img/sol-ener-contacto-fondo-1.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
*/
#calidad a img {
    height: 85px;
    width: auto;
}
#calidad a.jasolar img {
    position: relative;
    top: 10px;
}
#calidad a.lorentz img {
    height: 110px;
}
#calidad a.trojan img {
    height: 130px;
}
#calidad a.qmax img {
    height: 65px;
}

#contacto #post-title{
  background-position: 50% 10%;
}
/* toggle */

a.bttn-tog {
  color:#fb3;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
}


h4.bttn-tog:hover {
    color:#FFF;
}

h4.bttn-tog:focus {
    color:#FFF;
}


.bttn-tog {
  font-size:18px;
  font-weight:bold;
  padding:5px;
  position:relative;
  z-index:2;
}
.bttn-tog:before {
    -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
    top:0;
    left:0%;
    right:100%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:#fb3;
    z-index:-1;
  }
.bttn-tog:hover:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
  }

.bttn-tog:focus:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
  }

.btn-enersol{
  background-color: #fb3;
}
.btn-enersol:hover{
  background-color: #222!important;
  color: #fb3!important;
}
/* END OF SOLUCIONES ENERGETICAS */