.contenedorOutline {
    position: absolute;
    text-align: right;
    bottom: 15px;
    left: 0%;
    /* top: 75%; */
  
    /* On resizing
    transform: translate(-25%, -25%);
    transform-origin: center center;*/
}

/*.BlogImagenBackground {
  transition: all 0.3s ease;
}*/

.portfolio-item:hover {
    background-size: 100px 100px, 100% 100%;
}
.portfolio-item:hover figcaption.mask {
    padding-bottom: 30px;
    background-color: rgb(0, 51, 153);/*rgb(0, 68, 204);*/
}

img.social-btn {
    box-shadow: none;
}

img.InicioLogoFactory {
    width:70px;
    height:70px;
    border-radius: 4px;
    background-color: #FFF;
    color: #FFF;
}

.contenedor-imagen {
    text-align: center;
}

.img-pie {
    text-align: center;
    font-size: 12px;
}

.parrafo {
    text-align: left;
    margin-top: 50px;
    margin-bottom: 10px;
    margin-left: 17px;
    padding-left: 10px;
    border-left: 3px;
}

.panel-ayuda {
    margin-top: 50px;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    padding-top: 30px;
    border-right: 5px;
    border-bottom: 5px;
    /*background-color: rgba(13,76,146,.2);*/
}

.panel-ayuda > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    top: -20px;
    left:-20px;
    font-weight: bold;
    /*box-shadow: 1px 1px 1px #696969CC;*/
}

.portfolio-item.video {
    background-image: url(../img/youtube2icon.png);
    background-position: center 35%, center center;
}

.portfolio-item.blog {
    background-image: url(../img/bloggericon.png);
    background-position: center 35%, center center;
}

.portfolio-item.articulo {
    background-image: url(../img/img-info.png);
    background-position: center 35%, center center;
}

/* Inicio paletas de colores para módulos */

/* eFactory (genérica) */

.portfolio-item.generico {
    background-color: rgba(0,49,149,.3);
    background-image: url(../img/img-generico.png), url(../img/pantallas/como-lo-hago-generico-y-cuentas-por-cobrar.jpg);
    background-position: center 40%, center center;
}

.underline.generico {
  background-color: rgb(0,49,149);
}

.parrafo.generico {
     /*border-left: solid rgb(0,49,149);*/
}

.panel-ayuda.generico {
  border-right: solid rgb(0,49,149);
  border-bottom: solid rgb(0,49,149);
  background: rgba(0,49,149,.15);
}

.panel-ayuda.generico > .vignette {
  color: white;
  text-shadow: 1px 1px #000000;
    background-color: rgb(0,49,149);
}

/* Proyectos */

.portfolio-item.proyectos {
    background-color: rgba(13,76,146,.3);
    background-image: url(../img/obrasicon2.png), url(../img/pantallas/como-lo-hago-condominio-web.jpg);
    background-position: center 40%, center center;
}

.underline.proyectos {
    background-color: rgb(13,76,146);
}

.parrafo.proyectos {
     /*border-left: solid rgb(13,76,146);*/
}

.panel-ayuda.proyectos {
    border-right: solid rgb(13,76,146);
    border-bottom: solid rgb(13,76,146);
	background: rgba(13,76,146,.15);
}

.panel-ayuda.proyectos > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(63,126,196);
}

/* Contabilidad */

.portfolio-item.contabilidad {
    background-color: rgba(19,146,13,.3);
    background-image: url(../img/money-contabilidad-icon.png), url(../img/pantallas/como-lo-hago-efactory-contabilidad-web.jpg);
    background-position: center 40%, center center;
}

.underline.contabilidad {
  background-color: #13920d;
}

.parrafo.contabilidad {
     /*border-left: solid rgb(19,146,13);*/
}

.panel-ayuda.contabilidad {
    border-right: solid rgb(19,146,13);
    border-bottom: solid rgb(19,146,13);
	background: rgba(19,146,13,.15);
}

.panel-ayuda.contabilidad > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(19,146,13);
}

/* Recursos Humanos */

.portfolio-item.rrhh {
    background-color: rgba(255,128,0,.3);
    background-image: url(../img/img-crm.png), url(../img/pantallas/como-lo-hago-crm-sfa-mkt.jpg);
    background-position: center 40%, center center;
}

.underline.rrhh {
  background-color: #ff8000;
}

.parrafo.rrhh {
     /*border-left: solid rgb(255,128,0);*/
}

.panel-ayuda.rrhh {
    border-right: solid rgb(255,128,0);
    border-bottom: solid rgb(255,128,0);
	background: rgba(255,128,0,.15);
}

.panel-ayuda.rrhh > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(255,128,0);
}

/* CRM */

.portfolio-item.crm {
    background-color: rgba(213,170,0,.3);
    background-image: url(../img/img-crm.png), url(../img/pantallas/como-lo-hago-crm-sfa-mkt.jpg);
    background-position: center 40%, center center;
}

.underline.crm {
  background-color: #d5aa00;
}

.parrafo.crm {
     /*border-left: solid rgb(213,170,0);*/
}

.panel-ayuda.crm {
    border-right: solid rgb(213,170,0);
    border-bottom: solid rgb(213,170,0);
	background: rgba(213,170,0,.15);
}

.panel-ayuda.crm > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
  background-color: rgb(213,170,0);
}

/* Ventas */

.portfolio-item.ventas {
    background-color: rgba(0,153,51,.3);
    background-image: url(../img/img-ventas.png), url(../img/pantallas/como-lo-hago-ventas-y-cuentas-por-cobrar.jpg);
    background-position: center 40%, center center;
}

.underline.ventas {
  background-color: #009933;
}

.parrafo.ventas {
     /*border-left: solid rgb(0,153,51);*/
}

.panel-ayuda.ventas {
  border-right: solid rgb(0,153,51);
  border-bottom: solid rgb(0,153,51);
	background: rgba(0,153,51,.15);
}

.panel-ayuda.ventas > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(0,153,51);
}

/* Compras */

.portfolio-item.compras {
    background-color: rgba(177,27,112,.3);
    background-image: url(../img/img-compras.png), url(../img/pantallas/como-lo-hago-compras-y-cuentas-por-pagar.jpg);
    background-position: center 40%, center center;
}

.underline.compras {
  background-color: #b11b70;
}

.parrafo.compras {
     /*border-left: solid rgb(177,27,112);*/
}

.panel-ayuda.compras {
    border-right: solid rgb(177,27,112);
    border-bottom: solid rgb(177,27,112);
	background: rgba(177,27,112,.15);
}

.panel-ayuda.compras > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(177,27,112);
}

/* Inventarios */

.portfolio-item.inventarios {
    background-color: rgba(105,38,12,.3);
    background-image: url(../img/img-inventarios.png), url(../img/pantallas/como-lo-hago-inventarios.jpg);
    background-position: center 40%, center center;
}

.underline.inventarios {
  background-color: #69260c;
}

.parrafo.inventarios {
     /*border-left: solid rgb(105,38,12);*/
}

.panel-ayuda.inventarios {
    border-right: solid rgb(105,38,12);
    border-bottom: solid rgb(105,38,12);
	background: rgba(105,38,12,.15);
}

.panel-ayuda.inventarios > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(105,38,12);
}

/* Punto de Ventas */

.portfolio-item.puntoventas {
    background-color: rgba(34,183,173,.3);
    background-image: url(../img/img-puntov.png), url(../img/pantallas/como-lo-hago-punto-de-ventas-web.jpg);
    background-position: center 40%, center center;
}

.underline.puntoventas {
  background-color: #22b7ad;
}

.parrafo.puntoventas {
     /*border-left: solid rgb(34,183,173);*/
}

.panel-ayuda.puntoventas {
    border-right: solid rgb(34,183,173);
    border-bottom: solid rgb(34,183,173);
	background: rgba(34,183,173,.15);
}

.panel-ayuda.puntoventas > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(34,183,173);
}

/* Tesoreria */

.portfolio-item.tesoreria {
    background-color: rgba(86,29,132,.3);
    background-image: url(../img/img-tesoreria.png), url(../img/pantallas/como-lo-hago-tesoreria.jpg);
    background-position: center 40%, center center;
}

.underline.tesoreria {
  background-color: #561d84;
}

.parrafo.tesoreria {
     /*border-left: solid rgb(86,29,132);*/
}

.panel-ayuda.tesoreria {
    border-right: solid rgb(86,29,132);
    border-bottom: solid rgb(86,29,132);
	background: rgba(86,29,132,.15);
}

.panel-ayuda.tesoreria > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(86,29,132);
}

/* Producción */

.portfolio-item.produccion {
    background-color: rgba(19,34,194,.3);
    background-image: url(../img/img-produccion.png), url(../img/pantallas/como-lo-hago-condominio-web.jpg);
    background-position: center 40%, center center;
}                 

.underline.produccion {
  background-color: #1322c2;
}

.parrafo.produccion {
     /*border-left: solid rgb(19,34,194);*/
}

.panel-ayuda.produccion {
    border-right: solid rgb(19,34,194);
    border-bottom: solid rgb(19,34,194);
	background: rgba(19,34,194,.15);
}

.panel-ayuda.produccion > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(19,34,194);
}

/* Importaciones */

.portfolio-item.importaciones {
    background-color: rgba(255,69,69,.3);
    background-image: url(../img/img-importaciones.png), url(../img/pantallas/como-lo-hago-costos-y-gastos-de-importacion.jpg);
    background-position: center 40%, center center;
}

.underline.importaciones {
  background-color: #ff4545;
}


.parrafo.importaciones {
     /*border-left: solid rgb(255,69,69);*/
}

.panel-ayuda.importaciones {
    border-right: solid rgb(255,69,69);
    border-bottom: solid rgb(255,69,69);
	background: rgba(255,69,69,.15);
}

.panel-ayuda.importaciones > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(255,69,69);
}

/* Solmoviles */

.portfolio-item.solmoviles {
    background-color: rgba(40,135,206,.3);
    background-image: url(../img/img-mobile.png), url(../img/pantallas/como-lo-hago-efactory-super-mobile.jpg);
    background-position: center 40%, center center;
}

.underline.solmoviles {
  background-color: #2887ce;
}

.parrafo.solmoviles {
     /*border-left: solid rgb(40,135,206);*/
}

.panel-ayuda.solmoviles {
    border-right: solid rgb(40,135,206);
    border-bottom: solid rgb(40,135,206);
	background: rgba(40,135,206,.15);
}

.panel-ayuda.solmoviles > .vignette {
	color: white;
	text-shadow: 1px 1px #000000;
    background-color: rgb(40,135,206);
}

/* Fin paletas de colores para módulos */

 .overlay {
    background: transparent;
    width: 100%;
    height: calc(100% - 50%);
    padding-bottom: 15px;
    position: relative;
    top: 25%;
}

#home-clh {
    color: rgb(31, 53, 146);
    position: relative;
    min-height: 400px;
    margin-top: -200px;
    background-image: url(img/keyboard_half_close-up.jpg);
    /* background-position: 150px; */
    /* background: url(../img/como-lo-hago-cabecera.jpg) no-repeat;
    margin-top: 0px;
    background-position: 0px -270px; */
    padding-top: 150px;
    padding-bottom: 20px;    
    background-size: 100% 100%;
}
.titulo1 {
    font-size: 50px;
    font-weight: bold;
    color: rgb(31, 53, 146);
    margin-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
}
.titulo2 {
    width: 80%;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
}
.underline{
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 80%;
  height: 5px;
  background-color: #3A95C6;
}

@media only screen and (max-width: 991px) {
    .titulo1 {
        font-size: 35px;
        margin-bottom: 5px;  
    }
    .titulo2 {
        width: 100%;
        font-size: 25px;    
        text-align: center;   
    }
}
.img-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: column nowrap;
    align-self: center;
}
 .img-center > div {
      margin-top: 50px;
 }

 @media only screen and (max-width: 991px) {
     .img-center {
         flex-flow: row nowrap;
     }
}
 .infografia-img {
 
    border: 5px solid rgb(33, 123, 212);
    border-radius: 8px;
    box-shadow: 1px 1px 20px 0px rgb(86, 144, 167);
      padding-bottom: 10px;
 }
 .contenido-centrado {
     display: flex;
     justify-content: center;
     height: 100%;
     width: 100%;
     padding: 10px;

 }
 .item.carrusel-pantalla {
    width: 100%;
    margin: auto;

 }
.scroll-topContainer {
    visibility: hidden;
    background: rgb(51, 50, 50);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.39);
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    font-size: 35px;
    color: white;
    text-align: center;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease;
    z-index: 999999;
   
 }
 .shown {
    visibility: visible;

 }
 .scroll-topContainer > i {
      margin: -6px 0px 0px 1px;
 }
 .scroll-topContainer:hover {
      opacity: 1;  
 }

   #divider h3 {
    color: #3B0C96;
 }
 #divider .btn-lg {
    color: #3B0C96;
     border: 1px solid rgba(49, 10, 125, 0.88);
     transition: all 0.5s ease;
     background-color: white;
 }
#divider .btn-lg:hover {
    background: #3B0C96;
    color: white;
}
.paneles{
    margin: 5px !important;
    margin-right: 18px !important;
}

.flex-row{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.flex-item{
    flex-basis: 50%;
}
 
/*Nuevos CSS*/
.imagen-pasos {
    max-width: 80%;
    ;
}

.contenedor-imagen-pasos {
    text-align: center
}

.seccion-ayuda {
    padding-top: 40px;
    width: 100%;
}

@media screen and (min-width: 1400px) {
    .seccion-ayuda {
        width: 80%;
        margin: 10% auto;  margin-top: 2em;
    }
}

.paso-ayuda {
    text-align:justify;
}

.sub-paso-ayuda {
    text-align:justify;
    margin-left: 5em;
}
@media screen and (max-width: 991px) {
    .sub-paso-ayuda {
        margin-left: 1em;
    }
}

.separador-paso-ayuda {
    height: 1px;
    left: 0em;
    width: 100%
}

.sub-separador-paso-ayuda {
    height: 1px;
    left: 5em;
    width: 95%
}

.resumen-paso-ayuda{
    font-size: 18px;
    font-weight: bold;
    margin-left: 5em;
}
@media screen and (max-width: 991px) {
    .resumen-paso-ayuda{
        margin-left: 2em;
    }
}


.botones-sub-ayuda{
    border-radius: 10px 10px 10px 10px;
    width:700px;
    border: 1px solid rgb(0, 50, 152);
    display: inline-block;
    text-align:left;
    text-decoration: none;
    font-size: 1.25em;
    padding: 1em 1em 1em 3em;
    margin: 1em;
    background-color: #FFF;
    background-position: 8px center;
    background-repeat: no-repeat;
    background-size: 48px;
    outline: transparent;
}
.f-reportes{
    color:  rgb(96, 128, 192);
}
.f-reportes:hover{
    color:rgba(17, 38, 73, 0.904);
}
.list-form{
    list-style: none;
}
.list-form li{
    padding-bottom: 10px;
}