html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins',Arial, Helvetica, sans-serif;
    color:#33373e;
    position: relative;
}
p{
    font-family: 'Poppins',Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    font-size: 18px;
}

*::selection {
    background: #84a546;
    color: white;
}

/* Firefox */
*::-moz-selection {
    background: #84a546;
    color: white;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Poppins',Arial, Helvetica, sans-serif;
}
h2{
    font-size: 2.5rem;
}
h3{
    font-size: 2em;
}
.fondoh{
    background:url('../../svg/fondoh.svg');
    background-position: center;
    background-size: cover;

}

.btnm{
    background-color: #84a546;
    border: #84a546;
    padding: 6px 30px;
}

.btnm:hover {
    background-color: #668037;
    transition: 0.4s;
}

.navbar-nav > li {
    padding: 0px 16px;
}

.fixed-top{
    background-color: #152746;
}

.colormenu{
    background-color: #152746;
}

.textoh{
    padding-top: 10%;
    position: relative;
}

.banner-one {
    position: relative;
    padding: 200px 0px 100px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-banner {
    position: relative;
    z-index: 1;
}

.banner-one h2 {
    font-size: 36px;
    color: #84a546;
    margin-bottom: 15px;
}

.btnh{
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 10px 32px;
    text-decoration: none;
}

.btnh:hover{
    border: 2px solid #ffffff;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .2);
    text-decoration: none;
    transition: 0.4s;
}

 a.btncm:hover{
    text-decoration: none;
}

.btnc{
    background-color: #84a546;
    border: 2px solid #84a546;
    padding: 10px 32px;
}

.btnc:hover{
    background-color: #668037;
    border: 2px solid #668037;
    transition: 0.4s;
}

a.btnc:hover{
    text-decoration: none;
}

.botones{
    margin-top: 38px;
}

a.btns.estilob {
    margin-right: 22px;
}
/* Clase de los spans */
.resaltars{
    color: #84a546;
    font-weight: 400;
}

/* Tarjetas "¿Por qué Smartlab? */
.titulop h2{
    text-align: center;
    margin-bottom: 50px;
    font-weight: 400;
}
.card {
    border: 2px solid #84a546;
    border-radius: .25rem;
    height: 458px;
}
.card-img-top{
    margin: 50px auto 20px auto;
    width: 30%;
}
.card-img-2 {
    width: 65%;
    margin: auto;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}
.card-img-3{
    width: 55%;
}
.card-text{
    font-size: 16px;
    color: #919191;
}
.card-body{
    padding: 0 1.25rem 1.25rem 1.25rem;
}
.card-body h3 {
    font-weight: 600;
    color: #152746;
}
/* Empresas */
.tituloem h3{
    text-align: center;
    margin-bottom: 15px;
    margin-top: 60px;
    font-weight: 400;
}

.tituloem p{
    text-align: center;
    margin-bottom: 30px;
}
/* Soluciones */
.titulos{
    text-align: center;
}
.soltext{
    color: #ffffff;
}
.btns{
    background-color: #84a546;
    border: 2px solid #84a546;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    padding: 7px 40px;
    border-radius: 12px;
    box-shadow: 0 1px 3px #999;
}

.btns:hover{
    background-color: #668037;
    border: 2px solid #668037;
    transition: 0.4s;
    padding: 7px 40px;
}

/* Solución Edivolt */
.fondoe{
    background-image:url('../../svg/fondoe.svg');
    background-position: center;
    background-size: cover;
}

.fondoe h2{
    color:#ffffff;
}
.imago-edivolt{
    padding-bottom: 30px;
    width: 50%;
}
.edicont{
    padding-top: 100px;
}
/* Solución Addendamático */
.addendacont{
    padding-top: 100px;
}
.imago-adden{
    padding-bottom: 30px;
    width: 80%;
}
/* Solución CFDImático */
.fondoc{
    background-image:url('../../svg/fondoc.svg');
    background-position: center;
    background-size: cover;
}
.cfdicont{
    padding-top: 100px;
}
.imago-cfdi{
    padding-bottom: 30px;
    width: 65%;

}
/* Fábrica de software*/
.fscont{
    padding-top: 100px;
}

/* Formulario */
:focus {
    outline: none;

}

form.form-contact{
    min-height: 490px;
    width: 100%;
}

form.form-contact h2{
font-size: 25px;
font-weight: 300;
color: #33373e;
margin-bottom: 35px;
}
form.form-contact .user-info{
display: flex;
flex-direction: column;
}
.error{
    color:#F00;
    font-size: 12px;
}

input.error, select.error {
    border-bottom: 2px #F00 solid !important;
}
#serv.error{
    color: #F00;
}

.select{
    border: none;
    background: none;
    border-radius: 0;
    margin-top: 8px;
    margin-bottom: 20px;
}
form.form-contact input, form.form-contact select{
width: 100%;
padding: 8px 5px;
margin-bottom: 20px;
border-radius: 0px;
background-color: transparent;
border: none;
border-bottom: 2px solid #152746;

font-family: 'Poppins', Courier, monospace;
color: #33373e;
font-size: 14px;
}
form.form-contact select.valid{
    border-color: #84a546;
    color: #84a546;
}
.form-contact input:focus {
    border-color: #84a546;
    color: #84a546;
}

.form-contact input.valid {
    border-color: #84a546 !important;
    color: #84a546;
}

textarea.error {
    border-bottom: 2px solid red;
    color: #F00;
}
.textar{
    margin-top: 0px;
    margin-bottom: 5px;
    height: 85px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #152746;
}
textarea:focus{
    border-bottom: 2px solid #84a546;
    color: #84a546;
}
textarea.error:focus{
    border-bottom: 2px solid #F00;
}

.textar.valid{
    border-bottom: 2px solid #84a546;
    color: #84a546;
}
.btnform{
    margin-top: 14px;
    width: 100%;
    background: #ffffff;
    padding: 10px;
    border: 2px solid #152746;
    color: #152746;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 1px 3px #999;
}
.btnform:hover{
    width: 100%;
    background: #152746;
    padding: 10px;
    border: 2px solid #152746;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: .5s;
}

.infoc{
    font-size: 1.2rem;
    display: inline;
}
.infoh{
    font-size: 1rem;
    display: inline;
}
.imagotipos{
    height: 40px;
    margin-top: 50px;
}

.icof{
    margin-right: 10px;
}

/*** Modal ***/
.modal-content{
 max-width: 575px;
 margin: auto;
 padding: 0;
}

.modal-header{
 padding: 1rem 0;
 border: none;
}

.modal-body{
 padding:20px;
}

.modal-title{
 margin: 4px 0 8px 10px;
 font-weight: 700;
}

.modal-header .close {
 padding: .5rem 1rem;
 margin: 0;
}

.msn-i{
 max-width: 320px;
 display: block;
 margin: auto;
}

p.msn{
 font-size: 1.2rem;
}

/***** Footer *****/
.fondot{
    background:url('../../svg/fondot.svg');
    background-position: center;
    background-size: cover;
}
.titulosf{
    color: #ffffff;
}
.estilof{
    color: #ffffff;
    list-style: none;
    font-size: 14px;
    font-weight: 300;
}
ul.estilof{
    padding-left: 20px;
}
ul.estilof a{
    text-decoration: none;
    color: #ffffff;
    transition: .5s;
}
ul.estilof a:hover{
    color: #84a546;
}

ul.estilof i{
    margin-right: 10px;
}

ul.estilof li{
    margin: 10px 0;
}

.estilol{
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
}
p.estilol{
    margin: 0;
}

.lineaf{
    border-top: 1px solid #ffffff;
}

a.correo {
    text-decoration: none;
    color: #33373e;
}

a.correo:hover {
  color: #84a546;
}

/*** Media queries ***/

@media only screen and (max-width: 575px) {
    .fondoe{
        background-image:url('../../svg/fondoe-xs.svg');
    }
    .fondoc{
        background-image:url('../../svg/Web-26.svg');
    }
    div.ilh {
        display: none;
      }
    .card-img-2{
        width: 45%;
    }
    .card-img-3{
        width: 45%;
    }
    .textoh{
        text-align: center;
    }
    .imagotipos{
        height: 40px;
        margin-top: 40px;
    }
    .infoc{
        font-size: 15px;
        display: inline;
    }
    .infoh{
        font-size: 14px;
        display: inline;
    }

    .btnc{
        margin-top: 10px;
    }
    .altura{
        margin-top: 3rem!important;
    }
    .correoc{
        padding-top: 1rem;
    }
    .resaltars{
        font-size: 32px;
    }
    .banner-one h2 {
        font-size: 30px;
        margin-bottom: 18px;
    }
    .fondoe h2{
        font-size: 32px;
    }
    .titulo-serv{
        font-size: 32px;
    }
    .titulo-cont{
        font-size: 32px;
    }
    .tituloem p{
        margin-bottom: 0px;
    }

}

@media only screen and (min-width: 576px){
    .fondoe{
        background-image:url('../../svg/fondoe-xs.svg');
    }
    .fondoc{
        background-image:url('../../svg/Web-26.svg');
    }

    div.ilh {
        display: none;
      }
    .card-img-2{
        width: 45%;
    }
    .textoh{
        text-align: center;
    }
    .textohb{
        font-weight: 400;
    }
    .imagotipos{
        height: 40px;
        margin-top: 40px;
    }
    .infoc{
        font-size: 1rem;
        display: inline;
    }

    .infoh{
        font-size: 15px;
        display: inline;
    }
    .btnc{
        margin-top: 10px;
    }
    .altura{
        margin-top: 0!important;
    }
    .correoc{
        padding-top: 1rem;
    }
}

@media only screen and (min-width: 600px) {
    .fondoe{
        background-image:url('../../svg/fondoe-sm.svg');
    }
    .fondoc{
        background-image:url('../../svg/Web-25.svg');
    }
    div.ilh {
        display: none;
      }
    .card-img-2 {
        width: 45%;
    }
    .card-img-3 {
        width: 40%;
    }
    .textoh{
        text-align: center;
    }
    .imagotipos{
        height: 40px;
        margin-top: 40px;
    }
    .infoc{
        font-size: 1rem;
        display: inline;
    }
    .infoh{
        font-size: 15px;
        display: inline;
    }
    .altura{
        margin-top: 1px!important;
    }
    .correoc{
        padding-top: 1rem;
    }
}
@media only screen and (min-width: 768px) {
    .fondoe{
        background-image:url('../../svg/fondoe-md.svg');
    }

    .fondoc{
        background-image:url('../../svg/Web-24.svg');
    }
    div.ilh {
        display: block;
        padding-top: 100px;
      }
    .card-img-2{
        width: 90%;
        height: 458px;
    }
    .card-img-3 {
        width: 50%;
    }
    .card-img-top{
        width: 40%;
    }
    .card-body h3 {
        font-size: 24px;
    }
    .textoh{
        text-align: left;
    }
    .imagotipos{
        height: 40px;
        margin-top: 0px;
    }
    .infoc{
        font-size: 12px;
        display: inline;
    }
    .infoh{
        font-size: 12px;
        display: inline;
    }
    .btnh{
        font-size: 16px;
        padding: 10px 15px;
    }
  }

@media only screen and (min-width: 992px) {
    .fondoe{
        background-image:url('../../svg/fondoe-lg.svg');
    }
    .fondoc{
        background-image:url('../../svg/fondoc-lg.svg');
    }
    div.ilh {
        display: flex;
        padding-top: 0px;
      }
    .card-img-2{
        width: 81%;
        height: auto;
    }
    .card-img-3 {
        width: 44%;
    }
    .textoh{
        text-align: left;
    }
    .imagotipos{
        height: 40px;
        margin-top: 50px;
    }
    .infoc{
        font-size: 1rem;
        display: inline;
    }

    .infoh{
        font-size: 15px;
        display: inline;
    }
    .btnh{
        border: 2px solid #ffffff;
        color: #ffffff;
        padding: 10px 32px;
        text-decoration: none;
    }
    .correoc{
        padding-top: 0;
    }
    .estilof{
        font-size: 12px;
    }
}
@media only screen and (min-width: 1200px) {
    .fondoe{
        background-image:url('../../svg/fondoe.svg');
    }
    .fondoc{
        background-image:url('../../svg/fondoc.svg');
    }
    div.ilh {
        display: flex;
        padding-top: 0px;
      }
    .card-img-2{
        width: 65%;
        height: 386px;
    }
    .card-img-3 {
        width: 53%;
    }
    .textoh{
        text-align: left;
    }

    .btnh{
        border: 2px solid #ffffff;
        color: #ffffff;
        padding: 10px 32px;
        text-decoration: none;
    }
    .estilof{
        font-size: 14px;
    }
}