@import url('https://fonts.googleapis.com/css?family=Expletus+Sans');

/* general */
ul li a, small { color: #ddd; }
.space { margin-top: 1em; margin-bottom: 1em; }
.max-space { margin-top: 2em; margin-bottom: 2em; }
.sup-space { margin-top: 3em; margin-bottom: 3em; }

.white { color: #fff; }
.black { color: #000; }
.dark-gray { color: #3E3E3E; }
.sky { color: #C3D2DC; }
.blue { color: #4D6394; }
.gray { color: #8a8a8a; }
.orange { color: #ff5400; }
.navy { color: #2A3E75; }
.red { color: #FF2500; }
.bg-gray { background-color: #F3F2F2; }
.bg-orange { background-color: #ff5400; }
.bg-navy { background-color: #2A3E75; }
.bg-purple { background-color: #331d35; }
.bg-white { background-color: #FFF; }
.bg-orange-trans { background-color: #ff5400; }
.bg-navy-trans { background-color: rgba(26, 30, 44, 0.7); }
.bg-coral { background-color: coral; }
.bg-main { background: url('../img/bgs/leonsolar.png')no-repeat bottom; background-size: cover; }
.bg-main-inn { background: url('../img/bgs/leonsolar.png')no-repeat center 100px; background-size: cover; }
.bg-servicios { background: url('../img/bgs/servicios.jpg')no-repeat top; background-size: cover; }
.bg-beneficios { background: url('../img/bgs/beneficios.jpg')no-repeat top; background-size: cover; }
.bg-content {  background: url('../img/bgs/footer.png')no-repeat top; background-size: cover; }
.top50 { margin-top: 50px; }
.top80 { margin-top: 80px; }
.top200 { margin-top: 200px; }
.bott100 { margin-bottom: 100px; }
.no-pad-right { padding-right: 0; }
.no-pad { padding-left: 0; padding-right: 0; }
.light { font-weight: 100; }


/* menu */
.box-logo { position: relative; }


/* index */
.header img { padding-top: 20px; }
.box-main, .box-main-inn {position: relative;}
@media screen and (max-width: 39.9375em) {
	.main-box h1 { font-size: 5em; padding-top: 100px; }
	.main-box p { padding-bottom: 150px; }
}
@media screen and (min-width: 40em) {
	.main-box h1 { font-size: 10em; padding-top: 100px; color: #fff; }
	.main-box p { padding-bottom: 150px; max-width: 400px; }
}
#shad { position: absolute; margin-top: -200px; margin-left: auto; margin-right: auto; z-index: 2; }
.header{ position: relative; z-index: 3; }
div.box-prefoot.bottom{
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    /* margin-left: auto; */
    /* margin-right: auto; */
    width: 100%;
}


/* nosotros */
.box-somos, .box-hipoteca { min-height: 450px; }
.box-somos span{ padding-top: 100px; display: inline-block; }

.hr1 { width: 30%; border: solid 1px #C3D2DC; display: inline-block; }
@media screen and (max-width: 39.9375em) {
    .box-somos h1 { font-size: 2em; }
    .bg-somos { background: url('../img/banners/somos.jpg')no-repeat center; background-size: cover; }
}
@media screen and (min-width: 40em) {
    .bg-somos { background: url('../img/banners/somos.jpg')no-repeat 200px center; background-size: cover; }
    .box-somos h1 { font-size: 6em; }
}
.hr2 { width: 20%; border: solid 2px #8a8a8a; }
.box-main-inn { padding-bottom: 300px; }


/* hipoteca */
.box-hipoteca h1{ padding-top: 150px;  }
@media screen and (max-width: 39.9375em) {
    .box-hipoteca h1 { font-size: 2em; }
    .bg-hipoteca { background: url('../img/banners/hipoteca-verde.jpg')no-repeat center; background-size: cover; }
}
@media screen and (min-width: 40em) {
    .bg-hipoteca { background: url('../img/banners/hipoteca-verde.jpg')no-repeat center; background-size: cover; }
    .box-hipoteca h1 { font-size: 4em; }
}


/* productos */
.box-hogar{
    background: url('../img/banners/hogar.jpg')no-repeat center; background-size: cover; 
}
.box-industrial{
    background: url('../img/banners/industrial.jpg')no-repeat center; background-size: cover; 
}
.box-albercas{
    background: url('../img/banners/albercas.jpg')no-repeat center; background-size: cover; 
}
.box-hogar div.in,.box-industrial div.in, .box-albercas div.in { padding-top: 150px; padding-bottom: 20px; }
.btn-orange { background-color: #ff5400; color: #fff; padding: 5px 10px; border-radius: 10px; }
/* catalog */
.content-wrap span { color: #333; font-size: .8em; font-family: monospace; }
.flex-caption {
  text-align: center;
  padding: 1em;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 0;
}
.catalogue { max-height: 100px; }
.flexslider { margin-bottom: 20px !important; }
.slider { margin: 50px 0 10px!important;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}

/* footer */
.box-footer {border-top: solid 1px #666;}
footer { position: relative; bottom: 0; }
.footer { padding-top: 10px; }
.bg-footer {  }
footer { padding: 35px 10px 10px 20px; }
footer img { max-height: 100px; }

/* solucion */
.box-solucion { padding-top: 100px; }

/* contacto */
.box-form{
    padding-top: 100px;
}
#map {
    height: 100%;
    min-height: 150px;
    width: 350px;
}
.icon { display: inline-block; } 
.next-icon{ display: inline-block; }
.pad-left-1 { padding-left: 10px; }


.align-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.foot-menu { display: inline-block; }


/* beneficios */
.ul-benefs li img{  max-height: 70px; }
ul.benef li::before {
  content: "● ";
  color: red; /* or whatever color you prefer */
}
.ul-benefs li { margin: 1em !important; }
.ul-benefs li figure { padding: 1em !important; margin: 1em !important;  }

ul.brands img {  max-height: 70px; }
ul.brands img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

ul.brands img:hover {
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}


#rib-con { position: fixed; left: 0; bottom: 0; }
#rib-con span { 
  color: #828282;
  margin-top: 40px;
  margin-left: -15px;
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);/* Firefox */
  -ms-transform: rotate(-90deg);/* IE */
  -o-transform: rotate(-90deg);/* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }/* Internet Explorer */
#ribbon {
  width: 90px;
  height: 140px;
  margin: 25px auto 0;
  position: relative;
  overflow: hidden;
}

#ribbon .inset {
  width: 80px;
  height: 27.5px;
  position: absolute;
  top: -25px;
  
  z-index: 5;
  
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  
  background: rgba(0,0,0,0.3);
  
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

#ribbon .container {
  position: relative;
  width: 50px;
  height: 125px;
  overflow: hidden;
  margin: 0 auto;
  border-left: 1px solid #f0f1f1;
  border-right: 1px solid #f0f1f1;
}
#ribbon .base {
  height: 100px;
  width: 50px;
  background: #f0f1f1;
  position: relative;
  z-index: 2;
}

#ribbon .base:after {
  content: '';
  position: absolute;
  top: 0;
  width: 43px;
  left: 3px;
  height: 121px;
  border-left: 1px dashed #C3D3DA;
  border-right: 1px dashed #C3D3DA;
}

#ribbon .base:before {
  content: '';
  position: absolute;
  top: 0;
  width: 43px;
  left: 3.5px;
  height: 121px;
  border-left: 1px dashed #C3D3DA;
  border-right: 1px dashed #C3D3DA;
}

#ribbon .left_corner {
  width: 50px;
  height: 50px;
  background: #f0f1f1;
  position: absolute;
  bottom: 10px;
  left: -25px;
  z-index: 1;
  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#ribbon .right_corner {
  width: 50px;
  height: 50px;
  background: #f0f1f1;
  position: absolute;
  bottom: 10px;
  right: -25px;
  z-index: 1;
  
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}