@import url(/components/fontawesome/css/all.min.css);
@import url(../../page/fuentes/fuentes.css);

/* fuentes */

@font-face{
    font-family: "Exo2-Regular";
    src: url(../../page/fuentes/Exo2-Regular.otf);
}

@font-face{
    font-family: "Exo2-Bold";
    src: url(../../page/fuentes/Exo2-Bold.otf);
}

@font-face{
    font-family: "Avenir";
    src: url(../../page/fuentes/Avenir.ttc);
}

/* fin fuentes */

/* variables */ 

:root {
    --azul-oscuro: #1A2756;
    --azul-claro: #5BC4E8;
    --verde-claro: #A4CE42;
    --naranja-oscuro: #EB5C2C;
}

/* fin variables */

/* Columnas de 5 */

.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 {
    min-height: 1px; 
    position: relative;
  }

  .col-xs-5 {
    float: left;
    width: 20%;
    padding-right: 15px;
    padding-left: 15px;
  }

  @media (min-width: 768px) {
    .col-sm-5 {
      float: left;
      width: 20%;
    }
  }

  @media (min-width: 992px) {
    .col-md-5 {
      float: left;
      width: 20%;
    }
  }

  @media (min-width: 1200px) {
    .col-lg-5 {
      float: left;
      width: 20%;
    }
  }

/* fin columnas de 5*/

/* general */

* {
    font-family: "Exo2-Regular";
}

a:hover{
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* fin general */

/* header */



.header-redes {
    z-index: 2;
    position: absolute;
}

.header-redes img {
    width: 375px;
    margin-left: 150px;
    margin-top: 25px;
}


.pqr-app .app {
    background: none !important;
}

.pqr-app .app p:first-child {
    display: none;
}

.pqr-app .app p img {
    width: 100%;
    height: 100%;
}

/* fin header */


/* banner principal */

.carousel-indicators{
    display: none;
}

.fondo-imagen {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background: no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    margin-top: 0px;
    z-index: 1;
}

.banner-desc {
    margin-top: 620px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.banner-desc p{
    color: var(--azul-claro);
    text-align: center;
    font-size: 28px;
}

.fondo-imagen-responsive {
    display: none;
}

/* fin banner principal */

/* inicio */

.pqr-app {
    display: none;
    position: fixed;
    top: auto;
    bottom: 1.5em;
    z-index: 999;
    width: 117px;
}

/* fin inicio */




/* Que es */

.caja-quees {
    background-image: url(/skins/page/images/fondoquees.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position-x: right;
    padding-top: 80px;
    padding-bottom: 50px;
}

.caja-quees .disenio2 img{
    width: 300px;
    display: block;
    margin: auto;
}

.caja-quees h2{
    color: var(--verde-claro);
    display: flex;
    justify-content: start;
    font-weight: 600;
}

.caja-quees .descripcion {
    margin-top: 30px;
}

.caja-quees .descripcion p{
    color: var(--azul-oscuro);
    font-size: 18px;
    font-family: "Avenir" !important;
}

.caja-quees .descripcion p span{
    font-family: "Avenir" !important;
}

/* fin que es */

/* lo que hacemos */

.caja-loque{
    padding-top: 10px;
    padding-bottom: 40px;
}

.hr-loque{
    border-bottom: 5px dotted var(--naranja-oscuro);
    margin: 45px auto;
    width: 80%;
}

.hr-npro{
    border-bottom: 5px dotted var(--azul-oscuro);
    margin: 45px auto;
    width: 80%;
}

.hr-atr{
    border-bottom: 5px dotted var(--verde-claro);
    margin: 45px auto;
    width: 80%;
}

.hr-img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0px 25px;
    margin-top: 27px;
    width: 103px;
}

.hr-img-npro{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0px 25px;
    margin-top: 23px;
    width: 92px;
    height: 40px
}

.caja-loque h2{
    display: flex;
    justify-content: center;
    color: var(--naranja-oscuro);
    font-weight: 600;
}

.caja-loque .card{
    border: none;
    border-bottom: 4px dotted var(--verde-claro) !important;
    padding: 16px 0px;
}

.caja-loque .card .descripcion p{
    color: var(--azul-oscuro);
    padding-right: 300px;
    font-family: "Avenir" !important;
}

.caja-loque .card-header {
    background-color: #fff;
    border: none;
    color: var(--verde-claro);
    font-size: 20px;
    cursor: pointer;
    font-family: "Avenir" !important;
}

.span-titulo{
    font-family: "Avenir" !important;
}

.accordion .card-header[aria-expanded="true"] {
    color: var(--naranja-oscuro);
}

.caja-loque .card-header svg{
    font-size: 45px;
}

.caja-loque .card-body {
    
}

/* fin lo que hacemos */


/* nuestros proyectos */

.caja-nuestrospro{
    padding-top: 25px;
    padding-bottom: 40px;
}

.caja-nuestrospro .disenio4 .descripcion p{
    color: var(--azul-oscuro);
    font-family: "Avenir" !important;
}

.id_75 .col-xs-5{
    padding: 0px 0px;
}

.imagen-panel{
	position: relative;
	overflow: hidden;
}

.imagen-capa{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 0;
	opacity: 0.8;
	transform: translatey(180px);
	transition: 0.6s eas;
}

.imagen-capa h2{
    text-align: center;
    padding: 12px 0px;
    font-size: 18px;
    font-weight: 600;
}



.imagen-capa .descripcion-contenido{
	color: #fff;
    text-align: center;
    padding: 0px 20px;
}

.imagen-panel:hover .imagen-capa{
	transform: translatey(-0px);
	transition: 0.6s ease-in-out;
}

.disenio4 h2{
    text-align: center;
    color: var(--naranja-oscuro);
    font-weight: 600;
    margin-bottom: 35px;
}

.disenio4 .descripcion{
    text-align: center;
    color: var(--azul-oscuro);
    margin-bottom: 35px;
}

.disenio5 .descripcion-contenido p{
    font-family: "Avenir" !important;
}


/* fin nuestros proyectos */

/* Areas de trabajo */

.caja-areatrabajo .col-sm-12 h2{
    color: var(--naranja-oscuro);
    font-weight: 600;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.caja-areatrabajo .disenio4 img{
    padding: 20px;
}

.caja-areatrabajo .col-xs-5 h2{
    text-align: center;
    font-size: 23px;
    color: var(--azul-oscuro);
    font-family: "Avenir";
}

/* fin Areas de trabajo */

/* Nuestros proyectos */

.tit-one-np{
    margin-top: 65px;
}

.tit-one-np h2{
    color: var(--azul-oscuro);
    font-weight: 600;
    margin-left: 195px;
}

.tit-two-np {
    display: flex;
    justify-content: end;
    margin-right: 195px;
}

.tit-three-np{
    white-space: break-spaces;
    text-align: right;
    position: absolute;
    margin-top: 50px;
}

.tit-three-np span{
    color: var(--verde-claro);
    font-size: 24px;
    line-height: 24px;
    font-family: "Avenir" !important;
}

.botonCategorias {
    min-width: 60px;
    width: 0%;
    font-weight: 600;
    background-color: var(--verde-claro);
    border-radius: 28px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--azul-oscuro) !important;
    font-size: 30px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-right: 55px;
    cursor: pointer;
}

.botonCategorias:hover {
    background-color: var(--naranja-oscuro);
    cursor: pointer;
}

.contenidoInfo .contenidoDescrip{
    color: #fff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 40px;
    font-family: "Avenir" !important;
    font-weight: 600;
}


.categoriasHome {
    /* background-color: var(--azul-oscuro); */
    background-image: url('/skins/page/images/fondo-one.png');
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 204px;
}

.fondo-color{
    background-color: var(--azul-oscuro);
    margin-top: 30px;
    padding-bottom: 40px;
}

.contenidoImagenes{
    background-color: transparent;
    border: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  
.contenidoImagenes img{
    height: 219px;
    width: 285px;
    object-fit: cover;
}

.vermasimagen {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(91,196,232,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 300ms;
}

.vermasimagen a{
    text-decoration: none;
}

.vermasimagen h1 {
    padding: 1rem 1rem;
    background: transparent;
    border-radius: 5px;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    font-size: 2.2rem;
}

.vermasimagen h1:hover {
    background: var(--verde-claro);
    border: 1px solid var(--verde-claro);
    color: #fff;
    transition: all 300ms;
}
.imagenesHome .row .col-md-3:hover .vermasimagen {
    left: 0;
}

/* Fin nuestros proyectos */

/* nuestra trayectoria */

.flecha-abajo{
    position: absolute;
    margin-top: 98px;
}

.categoriasAnios{
    margin-bottom: 60px;
}

.categoriasAnios h2{
    color: var(--naranja-oscuro);
    font-weight: 600;
    display: flex;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 80px;
}


.categoriasAnios .contenidoAnios{
    width: 70%;
    padding-left: 32px;
}

.categoriasAnios .contain-catanios{
    display: block;
}

.categoriasAnios .botonAnios{
    background-color: var(--verde-claro);
    color: #fff !important;
    border-bottom-right-radius: 36px;
    border-top-right-radius: 36px;
    padding: 13px 30px;
    line-height: 39px;
    font-size: 25px;
    text-align: right;
    margin-bottom: 27px;
    cursor: pointer;
}

.categoriasAnios .botonAnios:hover{
    background-color: var(--naranja-oscuro);
    width: 125%;
    transition: 0.5s;
}

.categoriasAnios .contenidoDesc li{
    color: var(--naranja-oscuro);
    font-size: 25px;
}

.categoriasAnios .contenidoDesc li span{
    color: var(--azul-oscuro);
    font-family: "Avenir" !important;
}

/* fin nuestra trayectoria */

/* footer */

.pre-footer{
    background-image: url('/skins/page/images/fondo-two.png');
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 204px;
    padding-bottom: 55px;
}

.fondo-color-tres{
    background-color: var(--azul-oscuro);
    margin-top: 30px;
}

.logo-footer img{
    width: 240px;
    margin: 40px 0px;
}

footer .redes-footer span {
    color: #fff;
    font-weight: 100;
    font-size: 18px;
    text-align: left;
}

footer .redes-footer span strong{
    font-family: "Avenir" !important;
}

.form input::placeholder,.form textarea::placeholder{
	color:  var(--azul-oscuro);
	font--family: "Avenir" !important;
}

.form .form-control {
    font-family: 'Avenir' !important;
    background-color: #d4d4dc  !important;
    font-size: 15px;
    border-radius: 20px;
}


footer form h1 {
    margin: 0;
    color: var(--verde-claro);
    font-size: 35px;
    text-align: right;
}

footer .form-div {
    margin: 0;
    color: #fff;
    font-size: 17px;
    text-align: right;
}

.btn-enviar {
    background-color: var(--naranja-oscuro);
    color: #fff;
    font-size: 23px;
    padding: 6px 25px;
    border-radius: 13px;
    margin-left: auto;
}

.btn-enviar:hover {
    background-color: var(--verde-claro);
}

footer form .form-group {
    margin: 0.5em 0;
}

/* fin footer */

/* gracias */

.caja-gracias-redes{
    background-image: url(/skins/page/images/fondo-three.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: -15%;
    padding-top: 48%;
}

.fondo-color-dos{
    background-color: var(--azul-oscuro);
    margin-top: 30px;
    padding-bottom: 40px;
}

.caja-gracias-redes .logo-footer img {
    width: 240px;
    margin: 0px 0px; 
    margin-bottom: 18px
}


.redes-footer span {
    color: #fff;
    font-weight: 100;
    font-size: 18px;
    text-align: left;
}

.caja-gracias-two{
    display: flex;
    align-items: center;
    justify-content: end;
}

.caja-gracias-two h2{
    color: var(--verde-claro);
    text-align: right;
    width: 295px;
    margin-left: auto;
}

.caja-gracias-two .footer-desc .descripcion {
    color:#fff;
    text-align: right;
}

.caja-gracias-two .footer-desc .descripcion span{
    font-size: 22px !important;
}

.caja-gracias-two h4{
    color: var(--azul-claro);
    text-align: right;
    font-family: "Avenir" !important;
}

.caja-gracias-redes .redes-gracias .col-xs-5{
    display: flex;
    justify-content: right;
}

.caja-gracias-redes .redes-gracias svg {
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
    background: var(--verde-claro);
    color: var(--azul-oscuro);
    width: 50px;
    height: 50px;
    text-align: center;
    transition: 0.5s;
    text-decoration: none;
    font-size: 50px;
    border-radius: 6px;
}

.caja-gracias-redes .redes-gracias svg:hover {
    background: var(--naranja-oscuro);
    color: #fff;
}

.caja-gracias-redes span strong{
    font-family: "Avenir" !important;
}

footer .derechos-reservados {
    background: var(--verde-claro);
    color: var(--azul-oscuro);
    padding: 38px 0;
    text-align: center;
    display: flex;
    justify-content: end;
}

footer .derechos-reservados span{
    color: var(--azul-oscuro);
    font-size: 18px;
}

.footer-desc .descripcion p{
    font-family: "Avenir" !important;
}

.footer-desc .descripcion p span{
    font-family: "Avenir" !important;
}

/* fin gracias */

/* responsive*/

@media (max-width: 1199px) and (min-width: 0px) {
    
}
@media (max-width: 991px) and (min-width: 0px) {
    
}
@media (max-width: 767px) and (min-width: 0px) {

    
}
@media (max-width: 575px) and (min-width: 0px) {

    .pqr-app {
        display: block;
        width: 80px;
    }

    .contenedor-general {
        margin-top: 25px !important;
        background-color: var(--azul-oscuro);    
    }

    .fondo-imagen {
        display: none;
    }

    .fondo-imagen-responsive {
        background-image: none !important;
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background: no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding: 0 0 3em 0;
    }

    .col-xs-5 {  
        width: 100%;
    }

    .banner-desc {
        margin-top: 60px;
        padding-top: 0em;
    }

    .caja-quees h2 {
        justify-content: center;
    }

    .caja-quees .descripcion p {
        text-align: center;
    }

    .caja-loque h2 {
        text-align: center;
    }

    .card-header .col-sm-10{
        display: block !important;
        text-align: center;
        margin-top: 15px;
    }

    .imagen-capa {
        transform: translatey(0px);
        display: flex;
        align-items: center;
    }

    .caja-areatrabajo .disenio4 img {
        display: block;
        margin: auto;

    }
    
    .categoriasHome {
        background-color: var(--azul-oscuro); 
        background-image: none;
    }

    .tit-one-np h2 {
        margin-left: auto;
        padding: 10px 15px;
        text-align: center;
    }

    .tit-two-np {
        justify-content: center;
        margin-right: auto;
    }

    .tit-three-np {
        white-space: normal;
        text-align: center;
        margin-top: 50px;
    }

    .botonCategorias {
        margin: auto;
    }

    .caja-loque .card-header svg {
        font-size: 38px;
        margin-top: 17px;
    }

    .flecha-abajo {
        display: none;
    }

    .categoriasAnios .contenidoAnios {
        width: 100%;
    }

    .categoriasAnios .botonAnios {
        border-bottom-left-radius: 36px;
        border-top-left-radius: 36px;
        text-align: center;
    }

    .aniosHome {
        margin-top: 50px;
    }

    .caja-loque .card .descripcion p {
        padding-right: 0px;
    }

    .pre-footer {
        background-color: var(--azul-oscuro);
        background-image: none;
        padding-top: 0px;
    }

    .logo-footer img {
        width: 190px;
    }

    .foter{
        padding: 0px 30px;
    }

    footer form h1 {
        text-align: center;
    }

    footer .form-div {
        text-align: center;
        margin-top: 20px;
    }

    .form-check{
        text-align: center !important;
    }

    .btn-enviar {
        margin: auto !important;
    }

    .categoriasHome {
        padding-top: 150px;
    }

    .derechos-reservados img{
        width: 170px;
        display: block;
        margin: auto;
        padding: 0px !important;
    }

    footer .derechos-reservados span {
        padding-left: 0px !important;
    }

    .caja-quees {
        background-size: 50%;
        background-position-x: center;
        background-position-y: 89%;
    }

    .caja-gracias-redes {
        background-image: none;
        background-color: var(--azul-oscuro);
        padding-top: 8px;
    }

    .caja-gracias-two h2 {
        text-align: center;
        margin: auto;
        margin-top: 40px;
    }

    .caja-gracias-two .footer-desc .descripcion {
        text-align: center;
        margin-top: 40px;
    }

    .caja-gracias-two .footer-desc .descripcion p{
        text-align: center !important;
    }

    .caja-gracias-two h4 {
        text-align: center;
    }

    .redes-gracias .col-xs-5{
        width: 20%;
    }

    .header-redes {
        position: relative;
    }

    .header-redes img {
        margin-left: 0px;
    }
    
    .caja-quees .disenio2 img {
        margin-bottom: 43px;
    }
    
    .g-recaptcha{
        justify-content: center !important;
    }
}

@media (max-width: 320px) and (min-width: 0px) {
    
}

/* fin responsive */