/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11/03/2021, 05:13:59 PM
    Author     : Sammy Guergachi <sguergachi at gmail.com>
*/
:root {
    --blanco:#ffffff;
    --rojo: #E2231A;
    --azul:#13b5ee;
    --grisTexto:#8b8a92;
    --grisFondo:#e3e6ea; 
    --negro:#000000;
}
*{
    box-sizing: border-box;
}
.container-fluid{
    background-color:var(--blanco);
}
.link{
    color:var(--azul);
    font-size: calc(16px + (17 - 16) * (100vw - 250px) / (3500 - 250));
    font-weight: 600;
}
.link:link{
    color:var(--azul);
}
.link:visited{
    color:var(--azul);
}
.link:hover{
    color:var(--azul);
    text-decoration:none;
}
.link:active{
    color:var(--azul);
}
.contenido1{
    width:100%;
    height:auto;
    background-image:url("https://lcptracker.com/wp-content/uploads/2020/02/Contact-Support.jpg");
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:60px;
    padding: 2% 0%;
}
.contenido1 .row div{
    padding: 0% 10% 0% 10%;
}
.contenido1 h1{
    color:var(--blanco);
    font-size: calc(40px + (80 - 40) * (100vw - 250px) / (3500 - 250));
}
.contenido1 p{
    color:var(--blanco);
    font-size: calc(20px + (24 - 20) * (100vw - 250px) / (3500 - 250));
}
/***********************************************************************/
.contenido2{
    background-color:var(--grisFondo);
}
.contenido2 .comercial, .contenido2 .proveedores{
    justify-content: center;
    align-items: center;
    display: flex;
}
.contenido2 h3{
    text-align: center;
    padding: 2% 0%;
    color: var(--grisTexto);
    font-size: calc(23px + (28 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido2 h2{
    display:flex;
    justify-content: center;
    align-items: center;
    color:var(--blanco);
    font-size: calc(35px + (55 - 35) * (100vw - 250px) / (3500 - 250));
}
.contenido2 .comercial{
    width:100%;
    height:370px;
    background-image:url("https://cdn.pixabay.com/photo/2020/11/20/05/44/handshake-5760544_960_720.jpg");
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}
.contenido2 .proveedores{
    width:100%;
    height:370px;
    background-image:url("https://img.huffingtonpost.com/asset/5e74df6a23000000233a3ade.jpeg?cache=i3Xd4VRfDG&ops=scalefit_720_noupscale");
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}
/***********************************************************************/
.search{
    padding: 1% 0%;
}
.search .row{
    padding:0% 8%;
}
.search h3{
    text-align: center;
    padding: 2% 0% 0%;
    color: var(--grisTexto);
    font-size: calc(24px + (28 - 24) * (100vw - 250px) / (3500 - 250));
}
.search .btn-danger{
    background-color:var(--rojo);
    width: 60px;
}
.search .columna{
    padding:0;
}
.search .box{
    background-color:var(--blanco);
    margin: 5% 0% 2% 0%;
    padding: 2% 5% 2% 5%;
    border: 1px solid lightgray;
}
/***********************************************************************/
.contenido3{
    background-color:var(--grisFondo);
    padding: 2% 0;
}
.contenido3 .dispositivos{
    width:100%;
    height:300px;
    background-image:url('https://cdn.pixabay.com/photo/2017/01/29/13/20/mobile-devices-2017978_960_720.png');
    background-size:contain;
    background-position: right;
    background-repeat: no-repeat;
}
.contenido3 .dispositivos img{
    max-width:100%;    
    height:auto;
}
.contenido3 .texto{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0% 17% 0% 4%;
}
.contenido3 h6{
    color:var(--rojo);
    font-size: calc(23px + (25 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido3 p{
    color:var(--negro);
    font-size: calc(18px + (19 - 18) * (100vw - 250px) / (3500 - 250));
}
/***********************************************************************/
.contenido4{
    background-color:var(--blanco);
    display:flex;
    flex-flow: wrap;
    justify-content: space-around;
    align-items: center;
    padding:5% 0%;
}
.contenido4 .box{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.contenido4 p{
    font-size: calc(17px + (18 - 17) * (100vw - 250px) / (3500 - 250));
    font-weight: 500;
}
.contenido4 svg{
    height:150px;
    width:100px;
}
.separador{
    border: 1px solid lightgray;
    width: 93%;
}
/***********************************************************************/
.contenido5{
    background-color:var(--blanco);
}
.contenido5 img{
    max-width: 100%;
    width:600px;
    height: inherit;
    margin: auto;
    display: block;
}
.contenido5 .columnas{
}
.contenido5 h6{
    color:var(--grisTexto);
    font-size: calc(23px + (28 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido5 p{
    color:var(--negro);
    font-size: calc(18px + (19 - 18) * (100vw - 250px) / (3500 - 250));
}
/***********************************************************************/
.contenido6{
    background-color:var(--blanco);
}
.contenido6 h6{
    color:var(--grisTexto);
    font-size: calc(23px + (28 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido6 p{
    color:var(--negro);
    font-size: calc(18px + (19 - 18) * (100vw - 250px) / (3500 - 250));
}
.contenido6 img{
    max-width: 100%;
    width: 600px;
    height: inherit;
}
.contenido6 .columna1{
    display: flex;
    justify-content: flex-end;
}
.contenido6 .columna2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/***********************************************************************/
.contenido7{
    background-color:var(--blanco);
}
.contenido7 h6{
    color:var(--grisTexto);
    font-size: calc(23px + (28 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido7 p{
    color:var(--negro);
    font-size: calc(18px + (19 - 18) * (100vw - 250px) / (3500 - 250));
}
.contenido7 .columna{
}
/***********************************************************************/
.contenido8{
    background-color:var(--blanco);
}
.contenido8 h6{
    color:var(--grisTexto);
    font-size: calc(23px + (28 - 23) * (100vw - 250px) / (3500 - 250));
}
.contenido8 a{
    display:block;
    font-size: calc(18px + (19 - 18) * (100vw - 250px) / (3500 - 250));
}
.contenido8 .columna{
}
/***********************************************************************/
footer{
    background-color:var(--rojo);
}
/*// Small devices (landscape phones, 575px and down)*/
@media (max-width: 575px) { 
    .contenido1{
        min-height: 100vh;
    }
    .contenido1 .row div {
        padding: 10% 10% 0% 10%;
    }
    .contenido2 h3 {
        padding: 10% 0%;
    }
    .search {
        padding: 10% 0%;
    }
    .contenido3 .texto {
        padding: 0% 5% 10% 5%;
    }
    .contenido5 h6 {
        padding: 5% 0%;
    }
    .contenido5, .contenido6, .contenido7, .contenido8{
        padding: 0% 5%;
    }
    .contenido6 h6 {
        padding: 5% 0%;
    }
    .contenido8{
        padding-bottom:10%;
    }
}
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {  
    .contenido1{
        min-height: 100vh;
    }
    .contenido1 .row div {
        padding: 10% 10% 0% 10%;
    }
    .contenido2 h3 {
        padding: 10% 0%;
    }
    .search {
        padding: 10% 0%;
    }
    .contenido3 .texto {
        padding: 0% 5% 10% 5%;
    }
    .contenido5 h6 {
        padding: 5% 0%;
    }
    .contenido5, .contenido6, .contenido7, .contenido8{
        padding: 5% 5%;
    }
    .contenido6 h6 {
        padding: 5% 0%;
    }
    .contenido8{
        padding-bottom:10%;
    }
}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  
    .contenido1{
        min-height: auto;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .contenido2 h3 {
        padding: 5% 0%;
    }
    .search {
        padding: 3% 0%;
    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .contenido2 h3 {
        padding: 3% 0%;
    }
    .contenido3 .texto {
        padding: 0% 17% 0% 4%;
    }
    .contenido5, .contenido6, .contenido7, .contenido8 {
        padding: 3% 5%;
    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 2300px) {  
    .contenido4, .contenido5, .contenido6, .contenido7, .contenido8{
        max-width:2300px;
        margin:auto;
    }
}