html {
    box-sizing: border-box;
}

*,
*::before,
*:after {
    box-sizing: inherit;
}

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

h1,
h2 {
    display: inline;
    font-size: 30%;
}

strong {
    font-size: 16px;
    font-weight: bold;
    color: rgb(255, 0, 0);
}

p {
    margin: 5px;
}

hr {
    margin: 4px;
}

span {
    font-size: 16px;
    font-weight: 700;
    color: rgb(255, 0, 0);
}

body {
    max-width: 1500px;
    margin: 0;
    padding-top: 0px;
    font-family: sans-serif;
    background-color: rgb(245, 245, 247);
}

header {
    max-width: 1500px;
    margin: 0;
    padding-bottom: 0;
    font-family: sans-serif;
    background-color: rgb(245, 245, 247);
}

.titulo {
    font-size: 16px;
    font-weight: 700;
    color: rgb(0, 255, 0);
    margin-left: 30px;
}

label {
    font-size: 18px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin-left: 0px;
    display: inline-block;
    width: 180px;
}

#logosv {
    width: 30px;
    height: 30px;
}

#lsv {
    width: 30px;
    height: 30px;
}

label#nomsv {
    width: 30px;
    font: size 16px;
    font-weight: bold;
    color: rgb(255, 0, 0);
}

#nomtitulo {
    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 0, 0);
    width: 1200px;
    text-align: center;
}

#progsoft {
    max-width: 1200px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 30px;
    color: rgb(0, 0, 0);
}

#nommod {
    font-size: 18px;
    font-weight: bold;
    color: rgb(255, 0, 0);
    width: 100px;
}

#nomgmod {
    font-size: 18px;
    font-weight: bold;
    color: rgb(255, 0, 0);
    width: 400px;
}

input#estiloenviar {
    width: 150px;
    margin-left: 80px;
}

textarea {
    font-size: 16px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin: auto;
    border-radius: 5px;
    border: 2px solid;
    resize: none;
}

input {
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin-left: 0px;
    border: 2px solid;
    max-width: 700px;
    height: 30px;
    border-radius: 5px;
}

form {
    padding: 0px;
    cursor: pointer;
    display: block;
    max-width: 800px;
    margin: auto;
    text-align: left;
}

#formpedido {
    max-width: 800px;
    max-height: 410px;
}

#contenedor {
    margin: 0;
    padding-bottom: 10px;
    width: 1200px;
    height: 40px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    background-color: rgb(245, 245, 247);
    color: rgb(255, 0, 63);
}

#inicio {
    max-width: 1500px;
    max-height: 800px;
    background-image: url(../imagenes/programacontable.jpg);
}

#debajomenu {
    margin-top: 55px;
    max-width: 100%;
    height: auto;
}

@media(max-width: 590px) {
    #debajomenu {
        margin-top: 90px;
    }
}

@media(max-width: 390px) {
    #debajomenu {
        margin-top: 110px;
    }
}

@media(max-width: 310px) {
    #debajomenu {
        margin-top: 120px;
    }
}

@media(max-width: 220px) {
    #debajomenu {
        margin-top: 170px;
    }
}

@media(max-width: 170px) {
    #debajomenu {
        margin-top: 250px;
    }
}

#menuprincipal {
    display: inline-block;
    width: 100%;
    max-height: 250px;
    top: 0;
    left: 0;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgb(0, 0, 0);
    position: fixed;
    z-index: 1;
}

@media(max-width: 590px) {
    #menuprincipal {
        max-height: 90px;
    }
}

@media(max-width: 390px) {
    #menuprincipal {
        max-height: 110px;
    }
}

@media(max-width: 310px) {
    #menuprincipal {
        max-height: 120px;
    }
}

@media(max-width: 220px) {
    #menuprincipal {
        max-height: 170px;
    }
}

@media(max-width: 170px) {
    #menuprincipal {
        max-height: 250px;
    }
}

#in,
#qs,
#sv,
#py,
#sp,
#as,
#mo,
#pd,
#pr,
#de {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    text-align: left;
    text-decoration: none;
    margin-left: 33px;
}

#in:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#qs:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#sv:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#py:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#sp:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#as:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#mo:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#pd:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#pr:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#de:hover {
    color: rgb(255, 0, 63);
    font-size: 20px;
}

#cabeceraempresa {
    max-width: 1500px;
    height: 300px;
    margin: auto;
    text-align: justify;
    background-image: url(../imagenes/softwarecontable.jpg);
}

#empresa {
    max-width: 1000px;
    margin: 5px auto;
    height: auto;
    padding: 10px;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 200px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    border: 2px solid rgb(0, 0, 0);
}

#cabecerasoftware {
    max-width: 1200px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/erp.jpg);
}

#software {
    max-width: 1140px;
    height: auto;
    margin: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
}

#cabecerasv {
    max-width: 1200px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/softwareadministrativo.png);
}

#cabecerapy {
    max-width: 1200px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/softwarefinanciero.png);
}

#cabecerasvpu {
    max-width: 1200px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/contable.png);
}

#cabecerasoporte {
    max-width: 1500px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/softwarepymes.jpg);
}

#soporte {
    max-width: 1300px;
    height: auto;
    margin: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    line-height: 20px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
}

#cabecerapedidos {
    max-width: 1200px;
    height: 180px;
    margin: auto;
    background-image: url(../imagenes/erpsolinvisual.jpg);
}

#pedidos {
    max-width: 800px;
    max-height: 410px;
    margin: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    padding: 5px;
    border: 2px solid rgb(0, 0, 0);
}

#cabeceracapa {
    width: 1200px;
    height: 200px;
    float: center;
    margin-top: 10px;
    margin-left: 0px;
    background-image: url(../imagenes/erppymesolin.jpg);
}

#capacita {
    max-width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
}

#solinvisual {
    max-width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    Padding: 10px;
    border: 2px solid rgb(0, 0, 0)
}

#cpromo {
    max-width: 1200px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/erpcartagena.jpg);
}

#promo {
    max-width: 1140px;
    height: auto;
    margin: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 900px;
    line-height: 20px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
}

#cabeceramodulo {
    max-width: 1500px;
    height: 300px;
    margin: auto;
    background-image: url(../imagenes/portada1.jpg);
}

#modulo {
    max-width: 1300px;
    height: auto;
    margin: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    line-height: 20px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
}

#cdemo {
    max-width: 1500px;
    height: 600px;
    margin: 0;
    padding: 0;
}

#demo {
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500px;
    line-height: 20px;
    text-align: justify;
    background-color: rgb(8, 189, 230);
    color: rgb(250, 10, 10);
}

video {
    max-width: 1200px;
    height: 600px;
    width: 90%;
    margin: 0;
    padding: 0;
}

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

#primero {
    max-width: 1200px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
}

#cont {
    max-width: 1100px;
    height: 325px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#ven {
    max-width: 1100px;
    height: 310px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#cxc {
    max-width: 1100px;
    height: 250px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#inv {
    max-width: 1100px;
    height: 190px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#cxp {
    max-width: 1100px;
    height: 210px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#tes {
    max-width: 1100px;
    height: 210px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#com {
    max-width: 1100px;
    height: 310px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#nom {
    max-width: 1100px;
    height: 310px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#pres {
    max-width: 1100px;
    height: 90px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#presc {
    max-width: 1100px;
    height: 90px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#act {
    max-width: 1100px;
    height: 355px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#bi {
    max-width: 1100px;
    height: 190px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(193, 193, 193);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#op {
    max-width: 1100px;
    height: 200px;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500px;
    background-color: rgb(187, 226, 255);
    color: rgb(0, 0, 0);
    text-align: justify;
    margin-top: 10px;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    overflow: auto;
}

#piepagina {
    max-width: 1500px;
    max-height: 180px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    text-align: center;
    background-color: rgb(19, 19, 19);
}

#contacto {
    max-width: 1500px;
    max-height: 100px;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
    text-align: center;
}

#cont3 {
    font-size: 16px;
    font-weight: bold;
}

#cont4 {
    font-size: 20px;
    font-weight: bold;
}

#ftig {
    max-width: 1500px;
    max-height: 25px;
    margin: auto;
    font-size: 24px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
    text-align: center;
}

#cont2 {
    max-width: 1500px;
    max-height: 180px;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
    text-align: center;
}

.contemail {
    max-width: 1500px;
    max-height: 180px;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
    text-align: center;
    text-decoration: none;
}

.contemail a {
    text-decoration: none;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
}

#cont5 {
    max-width: 1500px;
    max-height: 180px;
    margin: auto;
    font-size: 12px;
    font-weight: bold;
    color: rgb(245, 245, 247);
    background-color: rgba(19, 19, 19);
    text-align: center;
}

#derecho {
    max-height: 30px;
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: rgb(235, 3, 3);
}

#dautor {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}

#grad0 {
    max-width: 100%;
    height: 100%;
    background: linear-gradient(rgb(8, 211, 238), rgb(204, 229, 250));
    font-size: 10vw;
    font-weight: bold;
    /*text-align: center;*/
    color: rgb(255, 255, 255);
}

#grad {
    max-width: 100%;
    height: 100%;
    background: linear-gradient(rgb(8, 211, 238), rgb(204, 229, 250));
    font-size: 11.5vw;
    font-weight: bold;
    text-align: center;
    color: rgb(235, 3, 3);
}

#gradtext {
    font-size: 1.5vw;
    font-weight: bold;
    text-align: center;
    color: rgb(0, 0, 0);
}

#gradtext2 {
    background: linear-gradient(rgb(8, 211, 238), rgb(204, 229, 250));
    font-size: 1vw;
    font-weight: bold;
    text-align: center;
    color: rgba(11, 75, 214, 0.945);
}

#gradtext3 {
    background: linear-gradient(rgb(8, 211, 238), rgb(204, 229, 250));
    font-size: 1.5vw;
    font-weight: bold;
    text-align: center;
    color: rgb(9, 0, 0);
}

#gradimg {
    max-width: 100%;
    height: 230px;
    background-image: url(../imagenes/marazulporta.jpg);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

#grademo {
    max-width: 100%;
    height: 400px;
    background-image: url(../imagenes/natura.jpg);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

#gradtext1 {
    max-width: 100%;
    height: 100%;
    background: linear-gradient(rgb(8, 211, 238), rgb(204, 229, 250));
    font-size: 3.5vw;
    font-weight: bold;
    text-align: center;
    color: rgb(248, 16, 16);
}

#grad1 {
    max-width: 100%;
    height: 100%;
    background-image: linear-gradient(rgb(183, 218, 247), rgb(34, 153, 250));
    /*background-image: linear-gradient(rgb(142, 255, 189), rgb(125, 252, 180));*/
    font-size: 3vw;
    font-style: oblique;
    font-weight: bold;
    ;
    text-align: center;
    color: rgb(0, 0, 0);
}

#grad11 {
    max-width: 100%;
    height: 300px;
    background-image: url(../imagenes/marazulporta.jpg);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

#grad2 {
    max-width: 100%;
    height: 100%;
    background-image: radial-gradient(rgb(4, 65, 156), rgb(135, 252, 184), rgb(125, 252, 180));
    font-style: oblique;
    font-size: 8vw;
    font-weight: bold;
    text-align: center;
    color: rgb(235, 3, 3);
}

#grad21 {
    max-width: 1500px;
    height: 200px;
    background-image: url(../imagenes/33llg.jpg,blue,);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

#grad3 {
    max-width: 100%;
    height: 100%;
    background-image: linear-gradient(rgb(183, 218, 247), rgb(34, 153, 250));
    font-size: 3.5vw;
    font-style: oblique;
    font-weight: bold;
    text-align: center;
    color: rgb(0, 0, 0);
}

#grad4 {
    max-width: 100%;
    height: 50px;
    background-image: linear-gradient(rgb(194, 253, 180), rgb(196, 253, 182), rgb(199, 252, 185));
}

#wa {
    position: fixed;
    /*top : 450px;*/
    left: 10px;
}

#waubica {
    position: fixed;
    top: 400px;
    left: 10px;
}

#teubica {
    position: fixed;
    top: 400px;
    left: 80px;
}

#t {
    position: fixed;
    left: 80px;
}