#container {
    background-color: #ecebea;
    width: 100%;
    height: 100%;
}

.containerCotelco {
    max-width: 1200px;
    margin: auto;
}

.formulario {
    background-image: linear-gradient(#2FA7FF, rgb(51, 177, 231));
    padding: 3px 34px 3px 34px;
    border-radius: 15px;
}

.ff {
    margin-left: -18px;
}

.row-reset {
    margin-right: 0px;
    margin-left: 0px;
}

.col-reset {
    padding-right: 0px;
    padding-left: 0px;
}

.formulario h2 {
    font-weight: bold;
}

#header {
    background: rgba(32, 124, 229, 1);
    height: 20%;
    width: 100%;
}

.logoheader {
    width: 104px;
    margin-top: -7px;
}

.img-header-bg {
    width: 188px;
    position: relative;
    top: 19px;
    left: 200px;
}

.text-navbar {
    font-size: 11px;
    font-weight: bold;
    color: #009BDD;
    margin-top: 8px;
}

.cardHeader {
    margin: 0px;
    padding: 1px;
}

.card-footer {
    border: none!important;
}

.card-footer a {
    background-color: #FF0000;
    color: white;
    padding: 4px;
    border-radius: 40px;
    font-weight: bold;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 12px;
}

.form-group {
    margin-bottom: 3px !important;
}

.form-group input {
    height: 33px;
}

.form-control {
    font-size: 13px;
    font-weight: bold;
}

.card-body p {
    font-size: 12px;
    font-weight: bold;
    background: #B2E1B8;
    width: 95px;
    border-radius: 5px;
    height: 22px;
    color: #22596E;
    margin-left: 17px;
}

.card-header {
    background: #4CBA5A;
    color: white;
    font-weight: bold;
    font-size: 13px;
    padding: 2px;
}

.headboard {
    background-size: cover;
    background-repeat: no-repeat;
}

.col-8 h3 {
    font-weight: bold;
    margin-left: 150px;
    margin-top: -8px;
    font-size: 23px;
}

.titulo {
    font-size: 11px;
    margin-left: 150px;
}

.titulo-header {
    color: #009BDD;
    font-size: 16px;
    font-weight: bold;
}

.img-headboard {
    width: 100%;
    display: block;
    margin: auto;
}

.slider {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 20px;
}

.img2-headboard {
    width: 100%;
    display: block;
    margin: auto;
    border-radius: 12px;
}

.tittle-slider {
    width: 80%;
    margin: auto;
    display: block;
    font-size: 130%;
    margin-top: 20px;
    margin-bottom: 1%;
    color: #767678;
}

.content-products {
    width: 96%;
    margin: auto;
}

.infoProduct {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    margin-bottom: 10%;
}

.ref-product {
    font-size: 95%;
    margin-top: 5%;
}

.cod-product {
    font-size: 85%;
    margin-top: 5%;
}

.img-product {
    width: 100%;
    margin-top: 10%;
}

.img-product2 {
    width: 53%;
    margin-top: 10%;
}

.img-product3 {
    width: 77%;
    margin-top: 10%;
}

.img-product4 {
    width: 34%;
    margin-top: 10%;
}

.contado {
    font-size: 14px;
    color: #D60000;
    font-weight: bold;
    margin-top: 5%;
}

.precio {
    font-size: 20px;
    color: #FF0000;
    font-weight: bold;
}

.containButtonWpp {
    position: relative;
    padding: 20px 0;
}

.buttomWpp {
    text-decoration: none;
    background-color: #00BB28;
    color: white;
    border-radius: 20px;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 90%;
    margin: auto;
    position: relative;
}

.img-btnwpp {
    position: absolute;
    width: 40px;
    right: -25px;
    top: -20px;
}

.img-banner {
    width: 100%;
    display: block;
    margin: auto;
}

.banner {
    width: 80%;
    display: block;
    margin: auto;
    margin-top: 20px;
}

.content-products2 {
    width: 80%;
    margin: auto;
}

.product-principal {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
}

.infoProduct-principal {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    display: inline-block;
    margin-top: 1%;
}

.tittle1 {
    font-size: 18px;
    margin-left: 5%;
    color: #848387;
}

.tittle2 {
    margin-left: 5%;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 3%;
    color: #737277;
}

.content-productsMin {
    width: 100%;
    border-radius: 5px;
    display: inline-block;
}

.content-productmin1 {
    width: 100%;
    background-color: white;
    display: inline-block;
    margin: auto;
    text-align: center;
    margin-top: 5%;
}

.container-img1 {
    margin: auto;
    margin-top: 0%;
}

.img-min1 {
    margin: auto;
    width: 30%;
}

.img-min2 {
    margin: auto;
    width: 100%;
}

.img-min3 {
    margin: auto;
    width: 70%;
}

.img-min4 {
    margin: auto;
    width: 58%;
}

.img-min5 {
    margin: auto;
    width: 67%;
}

.img-min6 {
    margin: auto;
    width: 30%;
}

.img-min7 {
    margin: auto;
    width: 74%;
}

.img-min8 {
    margin: auto;
    width: 83%;
}

footer {
    width: 98%;
    display: block;
    margin: auto;
    margin-top: 0%;
}

.img-footer {
    width: 100%;
    display: block;
    margin: auto;
}

.contact {
    text-align: center;
    margin: auto;
    margin-top: 2%;
}

.buttom-footer {
    background-color: #DD0F52;
    color: white;
    padding: 4px;
    border-radius: 40px;
    font-weight: bold;
    padding-left: 22px;
    padding-right: 22px;
    border: none;
}

.img-footer {
    position: relative;
}

.img-modal {
    width: 100%;
}

.contenido-footer {
    top: 69px;
    left: 460px;
    position: absolute;
}

.button-landing {
    position: relative;
    top: -12px;
    bottom: 0px;
    background: linear-gradient( rgb(49, 159, 231), rgb(42, 99, 229));
    color: white;
    border-radius: 40px;
    font-weight: bold;
    padding: 13px 37px 16px 37px;
    border: none;
    left: 466px;
    transition: all ease 0.7s;
    font-size: 19px;
    text-decoration: none;
}

.button-landing:hover {
    text-decoration: none;
    color: white;
    box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.3), 0 0 50px rgba(49, 138, 172, 0.4);
    outline-color: rgba(49, 138, 172, 0);
    outline-offset: 100px;
    text-shadow: 6px 6px 10px #121ed7;
    background: linear-gradient( rgb(45, 122, 230), rgb(51, 177, 231));
    padding: 16px 42px 20px 41px;
    left: 454px;
    top: -17px;
    font-size: 20px;
}

@media (max-width:1340px) {
    .button-landing {
        position: relative;
        top: -12px;
        left: 527px;
        transition: all ease 0.7s;
        font-size: 19px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 16px 42px 20px 41px;
        left: 517px;
        top: -17px;
        font-size: 20px;
    }
}

@media (max-width:1280px) {
    .button-landing {
        position: relative;
        top: -12px;
        left: 491px;
        transition: all ease 0.7s;
        font-size: 19px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 16px 42px 20px 41px;
        left: 481px;
        top: -17px;
        font-size: 20px;
    }
}

@media (max-width:1220px) {
    .button-landing {
        position: relative;
        top: -12px;
        left: 445px;
        transition: all ease 0.7s;
        font-size: 19px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 16px 42px 20px 41px;
        left: 432px;
        top: -17px;
        font-size: 20px;
    }
}

@media (max-width:1110px) {
    .button-landing {
        position: relative;
        padding: 13px 37px 16px 37px;
        top: -12px;
        left: 395px;
        transition: all ease 0.7s;
        font-size: 17px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 16px 42px 20px 41px;
        left: 380px;
        top: -17px;
        font-size: 18px;
    }
}

@media (max-width:1030px) {
    .button-landing {
        position: relative;
        padding: 12px 32px 14px 32px;
        top: -12px;
        left: 378px;
        transition: all ease 0.7s;
        font-size: 16px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 14px 38px 15px 38px;
        left: 369px;
        top: -14px;
        font-size: 17px;
    }
}

@media (max-width:1000px) {
    .button-landing {
        position: relative;
        padding: 12px 32px 14px 32px;
        top: -12px;
        left: 341px;
        transition: all ease 0.7s;
        font-size: 16px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 14px 38px 15px 38px;
        left: 329px;
        top: -14px;
        font-size: 17px;
    }
}

@media (max-width:900px) {
    .button-landing {
        position: relative;
        padding: 11px 30px 13px 30px;
        top: -12px;
        left: 314px;
        transition: all ease 0.7s;
        font-size: 15px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 12px 34px 14px 34px;
        left: 302px;
        top: -14px;
        font-size: 16px;
    }
}

@media (max-width:810px) {
    .button-landing {
        position: relative;
        padding: 11px 28px 12px 28px;
        top: -12px;
        left: 290px;
        transition: all ease 0.7s;
        font-size: 14px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 11px 33px 13px 33px;
        left: 282px;
        top: -14px;
        font-size: 15px;
    }
}

@media (max-width:769px) {
    .button-landing {
        position: relative;
        padding: 11px 28px 12px 28px;
        top: -12px;
        left: 268px;
        transition: all ease 0.7s;
        font-size: 14px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 11px 33px 13px 33px;
        left: 263px;
        top: -14px;
        font-size: 15px;
    }
}

@media (max-width:769px) {
    .button-landing {
        position: relative;
        padding: 11px 28px 12px 28px;
        top: -12px;
        left: 268px;
        transition: all ease 0.7s;
        font-size: 14px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 11px 33px 13px 33px;
        left: 263px;
        top: -14px;
        font-size: 15px;
    }
}

@media (max-width:600px) {
    .button-landing {
        position: relative;
        padding: 10px 24px 11px 24px;
        top: -12px;
        left: 213px;
        transition: all ease 0.7s;
        font-size: 11px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 10px 26px 12px 26px;
        left: 208px;
        top: -14px;
        font-size: 12px;
    }
}

@media (max-width:570px) {
    .button-landing {
        position: relative;
        padding: 10px 24px 11px 24px;
        top: -12px;
        left: 182px;
        transition: all ease 0.7s;
        font-size: 11px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 10px 26px 12px 26px;
        left: 180px;
        top: -14px;
        font-size: 12px;
    }
}

@media (max-width:510px) {
    .button-landing {
        position: relative;
        padding: 8px 19px 9px 19px;
        top: -12px;
        left: 172px;
        transition: all ease 0.7s;
        font-size: 9px;
        text-decoration: none;
    }
    .button-landing:hover {
        padding: 9px 22px 10px 22px;
        left: 165px;
        top: -14px;
        font-size: 10px;
    }
}

@media (max-width:430px) {
    .button-landing {
        position: relative;
        padding: 7px 17px 8px 17px;
        top: -12px;
        left: 144px;
        transition: all ease 0.7s;
        font-size: 8px;
        text-decoration: none;
    }
    .button-landing:hover {
        position: relative;
        padding: 8px 19px 9px 18px;
        top: -12px;
        left: 142px;
        font-size: 8px;
        text-decoration: none;
    }
}

@media (max-width:390px) {
    .button-landing {
        position: relative;
        padding: 6px 15px 7px 15px;
        top: -12px;
        left: 134px;
        transition: all ease 0.7s;
        font-size: 7px;
        text-decoration: none;
    }
    .button-landing:hover {
        position: relative;
        padding: 8px 19px 9px 18px;
        top: -12px;
        left: 142px;
        font-size: 8px;
        text-decoration: none;
    }
}

@media (max-width:380px) {
    .button-landing {
        position: relative;
        padding: 6px 15px 7px 15px;
        top: -12px;
        left: 132px;
        transition: all ease 0.7s;
        font-size: 7px;
        text-decoration: none;
    }
    .button-landing:hover {
        position: relative;
        padding: 8px 19px 9px 18px;
        top: -12px;
        left: 142px;
        font-size: 8px;
        text-decoration: none;
    }
}

@media (max-width:365px) {
    .button-landing {
        position: relative;
        padding: 6px 15px 7px 15px;
        top: -12px;
        left: 123px;
        transition: all ease 0.7s;
        font-size: 7px;
        text-decoration: none;
    }
    .button-landing:hover {
        position: relative;
        padding: 8px 19px 9px 18px;
        top: -12px;
        left: 142px;
        font-size: 8px;
        text-decoration: none;
    }
}

@media (max-width:325px) {
    .button-landing {
        position: relative;
        padding: 5px 13px 6px 13px;
        top: -12px;
        left: 107px;
        transition: all ease 0.7s;
        font-size: 7px;
        text-decoration: none;
    }
    .button-landing:hover {
        position: relative;
        padding: 8px 19px 9px 18px;
        top: -12px;
        left: 142px;
        font-size: 8px;
        text-decoration: none;
    }
}

@media (max-width:245px) {
    .button-landing {
        position: relative;
        padding: 3px 8px 3px 8px;
        top: -12px;
        left: 81px;
        transition: all ease 0.7s;
        font-size: 5px;
        text-decoration: none;
    }
}