/*! custom.css v1.0 */

/* ==========================================================================

   Custom CSS Stylesheet. This is where you should add your own styles!

   ========================================================================== */

/*
* Simple style overrides or custom adds
*/
.w3-display-right{
opacity: 0.7;
border: none;
background: inherit;
color: white;
margin: 5px;
font-size: 30px;

}
.w3-display-left{
opacity: 0.7;
border: none;
background: inherit;
color: white;
margin: 5px;
font-size: 30px;

}
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}
button:focus {outline:0 !important}
input[type="button"]:focus
{
    outline:none;
}
.some-css-selector {font-size:13px;}
.subtitulo{
font-size: 30px;

}

div#chatbot {
  background: white;
  width: 20em;
  max-width: 80%;
  position: fixed;
  padding: 0 0 0.5em 0;
  z-index: 10;
  top: 30%;
  right: -20em;
  transition-duration: 0.5s;
}

div#chatbot .icono:hover {
  cursor: pointer;
}

div#chatbot .boton-cerrar:hover {
    cursor: pointer;
}

div#chatbot .icono {
    font-size: 2.5em;
    left: -1.5em;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    /* border: 2px solid #000; */
    border-right: 0;
    position: absolute;
    background: #cd2122;
    color: #fff;
    padding: 0 0.5em;
    border-radius: 0.25em 0 0 0.25em;
    box-shadow: -3px 6px 9px 2px #464444;
}

div#chatbot .titulo {
  color: #cd2122;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

div#chatbot .texto {
  text-align: center;
  font-size: 1.05em;
  margin-top: -0.5em;
}

div#chatbot .boton:hover {
  cursor: pointer;
}

div#chatbot .boton {
  width: 80%;
  text-align: center;
  margin: 0.5em 10% 0 10%;
  background: #f7af3d;
  display: block;
  border-radius: 1em;
  color: #fff;
  font-weight: bold;
}

div#chatbot .boton:hover {
  background: #e69e2c;
}

#formulario-cotizar {
  max-width: 65em;
  width: 100%;
  margin: 1em auto;
}

#formulario-cotizar h4 {
  font-size: 1.25em;
  font-weight: bold;
}

.formulario-pasos input{
  width:100%;
  height: 22px;
}

.formulario-pasos div.texto{
  width:100%;
  margin-bottom: 1em;
}

form.formulario-cotizar .row [class*="col-"] {
  padding: 0 15px;
}

.formulario-pasos div.boton-confirmar-icono {
  float: right;
  background: #FFF;
  /* margin-left: -0.5em; */
  position: absolute;
  border-radius: 1em;
  padding: 0 0.25em;
  top: -1px;
  color: #33cc33;
  right: -1em;
  border: 1px solid #9fba34;
}


div.imagen-gracias {
  width: 29em;
  max-width: 100%;
}

#boton-confirmar {
  opacity: 0;
  visibility: hidden;
}

div.confirmar {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 10em;
    background-color: #545454;
    color: #fff;
    text-align: center;
    font-size: 1.25em;
    border-radius: 2em 0 0 2em;
}

div.confirmar:hover .boton-confirmar-texto {
  background-color: #9fba34;
  border-radius: 2em 0 0 2em;
}

div.confirmar:hover {
  cursor: pointer;
}

.formulario-pasos div.boton-paso-texto {
    float: right;
    color: #FFF;
    background: #545454;
    padding: 0 2em;
    border-radius: 1em 0 0 1em;
}

#nombreCliente {
  font-size: 1.75em;
  font-weight: bold;
  color: #338833;
  text-align: center;
}

.formulario-cotizar {
  margin-bottom: 10em;
  margin-top: 6em;
}

.pedido {
  font-size: 1.25em;
  color: #444;
  margin-bottom: 2em;
  text-align: center;
}

.formulario-pasos.paso-2 div.texto{
  width:100%;
  margin-bottom: 0;
  margin-top: 1em;
}

.formulario-pasos.paso-2 .unidad {
  float: left;
  background: #666;
  color: #fff;
  font-weight: bold;
  margin-top: -22px;
  height: 22px;
  position: absolute;
  right: 15px;
  line-height: 22px;
  padding: 0 5px;
}

.solo-puente {
  display: none;
}

.puente .solo-puente {
  display: block;
}

.solo-pluma {
  display: none;
}

.pluma .solo-pluma {
  display: block;
}

.formulario-pasos textarea {
  width: 100%;
}

.boton-paso-3 {
  margin-top: 2em;
}

.formulario-pasos div.boton-paso-icono {
  float: right;
  background: #9fba34;
  border-radius: 0 1em 1em 0;
  padding: 0 1em;
  color: #fff;
}

#formulario-cotizar .paso-1,
#formulario-cotizar .paso-2,
#formulario-cotizar .paso-3 {
  transition-duration: 0.5s;
  visibility: hidden;
  opacity: 0;
  margin-left: -100em;
  position: absolute;
}

#formulario-cotizar.uno .paso-1 {
  visibility: visible;
  opacity: 1;
  margin: 0;
  position: relative;
}

#formulario-cotizar.dos .paso-2 {
  visibility: visible;
  opacity: 1;
  margin: 0;
  position: relative;
}

#formulario-cotizar.tres .paso-3 {
  visibility: visible;
  opacity: 1;
  margin: 0;
  position: relative;
}

.formulario-pasos div.boton-paso-texto {
  float: right;
  color: #FFF;
  background: #545454;
  padding: 0 2em;
  border-radius: 1em 0 0 1em;
}

.formulario-pasos div.boton-paso-icono:hover,
.formulario-pasos div.boton-paso-texto:hover  {
  cursor: pointer;
  background-color: #9fba34;
}

div.imagen-gracias {
  left: 0;
  right: 0;
  margin: auto;
}

div.pasos {
  margin-top: 3em;
  width: 100%;
  background: #ddd;
  height: 4px;
  margin-bottom: 3em;
  position: relative;
}

div.pasos span {
  position: absolute;
  width: 1.7em;
  border-radius: 1em;
  background-color: #cc3;
  height: 1.75em;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  top: -0.75em;
  z-index: 2;
}

#formulario-cotizar.uno div.tramo.uno {
  background-color: #33cc33;
  height: 4px;
  width: 33%;
}

#formulario-cotizar.dos div.tramo.dos {
  background-color: #33cc33;
  height: 4px;
  width: 66%;
}

#formulario-cotizar.tres div.tramo.tres {
  background-color: #33cc33;
  height: 4px;
  width: 100%;
}

#formulario-cotizar.uno span.uno,
#formulario-cotizar.dos span.uno,
#formulario-cotizar.tres span.uno {
  background-color: #33cc33;
}

#formulario-cotizar.dos span.dos,
#formulario-cotizar.tres span.dos {
  background-color: #33cc33;
}

#formulario-cotizar.tres span.tres {
  background-color: #33cc33;
}

div.pasos div.paso.uno {
    width: 33%;
    height: 4px;
}
div.pasos div.paso.dos {
  width: 66%;
  height: 4px;
}
div.pasos div.paso.tres {
  width: 100%;
  height: 4px;
}

div.pasos span.uno {
  left: 33%;
}
div.pasos span.dos {
  left: 66%;
}
div.pasos span.tres {
  left: 99%;
}

#formulario-cotizar h1 {
  font-size: 1.7em;
  margin: 0;
}

#formulario-cotizar h3 {
  font-size: 1.1em;
  margin: 0;
  line-height: 0.5em;
  max-width: 40em;
  font-weight: bold;
  color: #f7af3d;
}

.subheader-titles.cotizar {
  text-align: center;
}

.subheader-titles.cotizar .subheader-maintitle {
  font-weight: 300;
  font-size: 3em;
}

.subheader-titles.cotizar .subheader-maintitle .innovacion-cotizar {
  color: #cd2122;
}

div#chatbot.mostrar-chatbot {
    right: 0em;
    padding: 1em 0;
    z-index: 10;
    font-size: 1.5em;
    border-radius: 0em 0 0 1.25em;
    box-shadow: -3px 6px 9px 2px #464444;
    /* box-shadow: 2px 2px 2px 2px #ccc; */
}


/* ==========================================================================
   ** Responsive styles custom rules
   * These rules are ready to be used for either overrides
   * or just your own custom rules.
   ========================================================================== */

@media only screen and (min-width : 1921px){

}

@media only screen and (max-width : 1440px){

}

@media only screen and (min-width : 1200px) and (max-width : 1440px){

}

@media only screen and (min-width : 1200px){

}

@media only screen and (max-width: 1199px){
#fondoservicios{
  display: none;
}
#fondocel{
  display: block;
}

}

@media only screen and (min-width: 992px) and (max-width: 1199px){

}

@media only screen and (min-width: 992px){


}

@media only screen and (max-width: 991px) {
.caroculto{

  display: none;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px){
.zn-res-trigger {float: right;}
}

@media only screen and (min-width: 768px) {
.colmargen{
padding-left: 0px;
}
.colmargenr{
	padding-right: 0px;
}
#columna2{
display: flex;
}
#fila1{
display: flex;

}
#accmobile{
display: none;
}
.slidermobile{
display: none;
}
#desplegable{
  display: none;
}
}

@media only screen and (max-width: 767px) {
    div.pasos {
        width: 79%;
    margin-left: 2em;
    }
.noencel{
  display: none;}
#estadisticas{
display: none;
}
#videobackground{
display: none;
}
#columna2{
display: block;

}
#fila1{
display: block;

}
#texto1{
  padding-top: 15px;
  
}
#sidebar-widget{
 display: none;
}

.slideroculto{
display: none;
}
#prodrelac{
 display: none;
}
#portfolio-nav{
  display: none;
}
}


@media only screen and (max-width : 480px) {
#columna
{padding-left: 20px;}
}

@media only screen and (max-width : 320px) {

}

}