@import url("fonts/JetBrainsMono.css");
@import url("fonts/Mulish.css");
@import url("icons.css");
body{
    margin: 0px;
    overflow-x: hidden;
}
#content{
    width: 100%;
    height: auto;
}
.backgroundModal{
    position: fixed;
    width: 0px;
    height: 0px;
    z-index: 9;
    background-color: #717171;
    opacity: 0;
}
.backgroundModalShow{
    animation: modalShow 1s;
    animation-fill-mode: forwards;
}
.backgroundModalHide{
    animation-delay: 1s;
    animation: modalHide 1s;
    animation-fill-mode: forwards;
}
/* General Content Styles  */
.content-container{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .large-row{
    display: flex;
    flex-wrap: wrap;
}
.content-container .title{
    padding-top: 3vh;
    padding-bottom: 3vh;
    width: 100%;
    height: auto;
    font-family: "JetBrains Mono";
    font-weight: 700;
    font-size: 6vh;
    color: #262626;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .title b{
    color: #ffa500;
}
.content-container .sub-title{
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-size: 3vh;
    color: #999999;
    text-align: justify;
}
.content-container .texto{
    padding: 30px;
    min-height: 19vh;
}
.content-container .txt-center{
    text-align: center;
}
.content-container .box50{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .box-separator-doted{
    border-left: 5px dotted #999999;
}
.content-container .box-icon{
    margin-bottom: 15px;
    width: 84px;
    height: 84px;
    background-size: cover;
}
.content-container .backround-gray{
    background-color: #f2f3f5;
}
/* PRESENCIA */
.content-container .map{
    width: 100%;
    min-height: 40vh;
    background-image: url("../assets/_images/mapa.jpg");
    background-size: cover;
    border: 0px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .map .content{
    float: left;
    width: 100%;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .title{
    padding-left: 2vh;
    width: 100%;
    min-height: 5vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 4vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .title .texto{
    left: 0vh;
    padding: 0px;
    padding-left: 2vh;
    width: 90%;
    min-height: 2vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .title .texto b{
    padding: 5px;
    color:#ffff!important;
    background-color: #ffa500;
}
.content-container .presencia .title .map-pin{
    width: 7.61vh;
    height: 7.61vh;
    background-image: url("../assets/_icons/ubicacion.png");
    background-size: cover;
}
.content-container .presencia .content .bloque-ciudades{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad{
    padding: 0px!important;
    margin-bottom: 3vh;
    align-items: normal;
    justify-content: center;
    width: 25%;
    min-height: 15vh;
    background-color: #f2f3f5;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title{
    padding: 0vh;
    width: 100%;
    min-height: 3vh;
    justify-content: center;
}
.content-container .presencia .content .bloque-ciudades .separador{
    margin-left: 5vh;
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title .icon{
    width: 7.61vh;
    height: 7.61vh;
    background-size: cover;
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title .antofagasta{
    background-image: url("../assets/_images/portada_250.png");
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title .serena{
    background-image: url("../assets/_images/faro_250.png");
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title .santiago{
    background-image: url("../assets/_images/metro_250.png");
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .title .name{
    width: auto;
    min-height: 3vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    font-size: 3vh;
    color: #393939;
    text-transform: uppercase;
    text-align: center;
}
.content-container .presencia .content .bloque-ciudades .bloque-ciudad .texto{
    padding-top: 0vh;
    padding-left: 1vh;
    padding-right: 1vh;
    width: 100%;
    min-height: 4vh;
    justify-content: center;
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-size: 2vh;
    text-align: justify;
    color: #999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* CCTV */
.content-container .cctv{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-height: 4vh;
    background-color: #f2f3f5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .cctv .title{
    padding: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-height: 5vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .cctv .title .icon{
    width: 8.16vh;
    height: 8.16vh;
    background-image: url("../assets/_icons/cctv-100.png");
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .cctv .title .texto{
    padding: 0vh;
    padding-left: 3vh;

    width: auto;
    min-height: 2vh;
    font-family: "JetBrains Mono";
    font-weight: 600;
    font-size: 3.2vh;
    color: #393939;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase;
}
.content-container .cctv .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-height: 3vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase;
}
.content-container .cctv .content .descripcion{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0vh;
    width: 49%;
    min-height: 3vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 5px dotted #999999;
}
.content-container .cctv .content .descripcion .sub-title{
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    width: 100%;
    min-height: 2px;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 2.3vh;
    text-transform: lowercase;
}
.content-container .cctv .content .descripcion .dahua{
    width: 34.62vh;
    height: 12.04vh;
    background-image: url("../assets/_images/dahua.png");
    background-size: cover;
}
.content-container .cctv .content .descripcion .hikvision{
    margin-left: 12vh;
    width: 34.62vh;
    height: 15.62vh;
    background-image: url("../assets/_images/hikvision.png");
    background-size: cover;
}
.content-container .cctv .content .descripcion .texto{
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    width: 100%;
    min-height: 3vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-size: 2.3vh;
    color: #999999;
    text-align: justify;
    text-transform: none;
}
.content-container .cctv .content .bondades{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 49%;
    min-height: 3vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .cctv .content .bondades .separador{
    margin-left: 3vh;
}
.content-container .cctv .content .bondades .bondad{
    margin-bottom: 3vh;
    padding: 1vh;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 45%;
    min-height: 12vh;
    background-color: #bbbbbc;
    border-radius: 20px 0px 0px 20px;
    -moz-border-radius: 20px 0px 0px 20px;
    -webkit-border-radius: 20px 0px 0px 20px;
    border: 0px solid #000000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .cctv .content .bondades .bondad .icon{
    width: 8vh;
    height: 8vh;
    background-size: cover;
}
.content-container .cctv .content .bondades .bondad .content{
    padding-left: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 80%;
    min-height: 2vh;
    border: 0px solid #000000;
}
.content-container .cctv .content .bondades .bondad .content .nombre{
    padding: 0vh!important;
    width: 100%;
    min-height: 1vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    font-size: 2.5vh;
    color: #393939;
    text-transform: uppercase;
}
.content-container .cctv .content .bondades .bondad .content .descripcion-bondad{
    display: initial;
    width: 100%;
    min-height: 2.3vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 300;
    font-size: 1.6vh;
    color: #646467;
    border: 0px solid #000000;
    text-transform: none;
    text-align: justify;
}
@media only screen and (max-width: 768px) {
    .content-container .cctv .title .texto{
        padding-left: 0vh;
        width: 100%;
        text-align: center;
    }
    .content-container .cctv .content .descripcion{
        width: 100%;
        border-right: 0px dotted #999999;
    }
    .content-container .cctv .content .descripcion .dahua{
        margin-top: 4vh;
    }
    .content-container .cctv .content .descripcion .hikvision{
        margin-left: 0vh;
    }
    .content-container .cctv .content .bondades{
        width: 100%;
    }
    .content-container .cctv .content .bondades .bondad{
        width: 96%;
    }
    .content-container .cctv .content .bondades .separador{
        margin-left: 0vh;
    }
}
/* Desarrollo de Software */
.content-container .code{
    margin-top: 3vh;
    margin-bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 49%;
    min-height: 4vh;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .title{
    padding: 0vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 9vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .title .icon{
    width: 8.16vh;
    height: 8.16vh;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .title .texto{
    padding: 0vh;
    padding-left: 2vh;
    width: auto;
    min-height: 2vh;
    font-family: "JetBrains Mono";
    font-weight: 600;
    font-size: 3.2vh;
    color: #393939;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase;
}
.content-container .code .sub-title{
    padding-top: 2vh;
    padding-left: 2vh;
    padding-right: 2vh;
    width: 100%;
    min-height: 10vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 2.5vh;
    color: #999999;
    text-align: center;
}
.content-container .code .content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4vh;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .content .item-separador{
    margin-top: 2vh;
}
.content-container .code .content .item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 98%;
    min-height: 8vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .content .item .icon{
    margin-right: 3vh;
    width: 9.02vh;
    height: 9.02vh;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .content .item .content{
    padding: 0vh;
    padding-left: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    width: 85%;
    min-height: 4vh;
    border-left: 3px dotted #999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .content .item .content .title{
    display: unset;
    padding: 0vh;
    width: 100%;
    min-height: 3vh;
    font-family: "JetBrains Mono";
    font-size: 3vh;
    color: #393939;
    text-align: left;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .code .content .item .content .texto{
    display: unset;
    padding: 0vh;
    width: 100%;
    min-height: 3vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 2.1vh;
    color: #999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
    .content-container .code{
        width: 100%;
    }
    .content-container .code .title .texto{
        width: 100%;
        padding-left: 0vh;
        text-align: center;
    }
    .content-container .code .content .item{
        margin-top:4vh;
    }
    .content-container .code .content .item .content{
        padding-left: 0vh;
        padding-top: 1.5vh;
        border-left: 0px dotted #999999;
    }
    .content-container .code .content .item .content .title{
        text-align: center;
        font-size: 3vh!important;
    }
    .content-container .code .content .item .content .texto{
        margin-top: 1vh;
        text-align: justify;
    }
}
/* Web-Sites */
.content-container .web-sites{
    margin-top: 3vh;
    margin-bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 49%;
    min-height: 4vh;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .title{
    padding: 0vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 9vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .title .icon{
    width: 8.16vh;
    height: 8.16vh;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .title .texto{
    padding: 0vh;
    padding-left: 2vh;
    width: auto;
    min-height: 2vh;
    font-family: "JetBrains Mono";
    font-weight: 600;
    font-size: 3.2vh;
    color: #393939;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase;
}
.content-container .web-sites .sub-title{
    padding-top: 2vh;
    padding-left: 2vh;
    padding-right: 2vh;
    width: 100%;
    min-height: 10vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 2.5vh;
    color: #999999;
    text-align: center;
}
.content-container .web-sites .content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4vh;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .content .item-separador{
    margin-top: 2vh;
}
.content-container .web-sites .content .item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 98%;
    min-height: 8vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .content .item .icon{
    margin-right: 3vh;
    width: 9.02vh;
    height: 9.02vh;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .content .item .content{
    padding: 0vh;
    padding-left: 2vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    width: 85%;
    min-height: 4vh;
    border-left: 3px dotted #999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .content .item .content .title{
    display: unset;
    padding: 0vh;
    width: 100%;
    min-height: 3vh;
    font-family: "JetBrains Mono";
    font-size: 3vh;
    color: #393939;
    text-align: left;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-container .web-sites .content .item .content .texto{
    display: unset;
    padding: 0vh;
    width: 100%;
    min-height: 3vh;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 2.1vh;
    color: #999999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
    .content-container .web-sites{
        padding-top: 3vh;
        border-top: 5px dotted #999999;
        width: 100%;
    }
    .content-container .web-sites .title .texto{
        padding-top: 1vh;
        width: 100%;
        padding-left: 0vh;
        text-align: center;
    }
    .content-container .web-sites .content .item{
        margin-top:4vh;
    }
    .content-container .web-sites .content .item .content{
        padding-left: 0vh;
        padding-top: 1.5vh;
        border-left: 0px dotted #999999;
    }
    .content-container .web-sites .content .item .content .title{
        text-align: center;
        font-size: 3vh!important;
    }
    .content-container .web-sites .content .item .content .texto{
        margin-top: 1vh;
        text-align: justify;
    }
}
/* GENERAL STYLES */
.title-word-decoration{
    padding: 1vh;
    color:#ffff!important;
    background-color: #ffa500;
}
/* Other media screen */
@media only screen and (max-width: 768px) {
    .title-word-decoration{
        display: unset;
        padding: 0vh;
    }
    .api{
        margin-top: 3vh;
    }
    .content-container .title{
        font-size: 4vh!important;
    }
    .content-container .presencia .title{
        padding-left: 0vh;
        justify-content: center;
        font-size: 3vh!important;
    }
    .content-container .presencia .title .texto{
        margin-top: 2vh;
        padding-left: 0vh;
        width: 100%;
        text-align: center;
    }
    .content-container .presencia .content .bloque-ciudades .bloque-ciudad{
        width: 90%;
    }
    .content-container .presencia .content .bloque-ciudades .separador{
        margin-left: 0vh;
    }
    .content-container .box50{
        width: 100%!important;
        height: auto;
    }
    .content-container .box-separator-doted{
        border-left: 0px dotted #999999!important;
    }
    .content-container .margin-block{
        margin-top: 20px;
    }
}
/* Key frames for animation */
@keyframes modalShow {
    from, to {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}
@keyframes modalHide {
    from, to {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }
    99% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    100% {
        width: 0px;
        height: 0px;
    }
}