.classNav>a,
.nav-item>a,
.nav-item>span {
    color: var(--color3) !important
}

.classNav>a:hover,
.containerPrecio,
.containerTexts>hr,
.hrUso,
.hrVentajas,
.tallaPegatinas,
.titleTarifa {
    filter: invert(1)
}

.btnPriceIva,
.classNav>a,
.iconLogo,
.nav-item {
    cursor: pointer
}

.classNav>a,
.classNav>a:hover,
.containerExtrasModal>div,
.containerExtrasModal>div:hover,
.iconLogo,
.nav-item,
.nav-item:hover {
    transition: .2s ease-in-out
}

:root {
    --color1: rgb(185, 232, 255);
    --color2: rgb(17, 142, 209);
    --color3: rgb(0, 85, 165);
    --color4: rgb(26, 121, 185);
    --color5: rgb(0, 86, 149);
    --color6: rgb(05, 103, 158);
    --color7: rgb(20, 117, 181);
    --color8: rgb(07, 98, 172);
    --color9: rgb(0, 142, 219);
    --color10: rgb(0, 72, 157);
    --color11: #e0ded1;
    --color12: #dad2bb
}

body {
    background-color: var(--color1);
    overflow-x: hidden;
    z-index: 1
}

.btnPriceIva {
    margin-left: 5px;
    fill: darkgray
}

.iconLogo {
    width: 3rem;
    height: 3rem;
    margin-left: 5%
}

#navbarSupportedContent {
    justify-content: flex-end
}

.containerInfo,
.containerTexts {
    position: absolute;
    display: flex;
    flex-wrap: wrap
}

.nav-item {
    padding: 1% 1rem
}

.classNav,
.classNav>a,
.classNav>div {
    padding: 0 !important
}

.nav-item:hover {
    background-color: RGBA(0, 85, 165, .5)
}

.nav-item:hover>a,
.nav-item:hover>span {
    color: #fff !important
}

.containerBanner {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%
}

.classNav {
    z-index: 100;
    background: RGBA(255, 255, 255, .6) !important;
    font-family: Roboto;
    font-size: 1.2rem
}

.bannerUso,
.bannerVentajas,
.btnContactar,
.classNav>a,
.containerTexts>h1 {
    font-family: "Dancing Script", cursive
}

.imgBanner {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)
}

.containerTexts {
    width: 100%;
    height: 30vh;
    justify-content: center;
    top: 0;
    align-content: center;
    text-align: center;
    margin: 15vh 0;
    background: RGBA(255, 255, 255, .4) !important;
    animation: 1.5s ease-in-out desplazar
}

@keyframes desplazar {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes desplazar2 {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes desplazar3 {
    0% {
        transform: translateX(400%)
    }

    100% {
        transform: translateX(0)
    }
}

.containerTexts>h1 {
    color: var(--color3);
    font-weight: 700;
    animation: 2s ease-in-out desplazar;
    width: 100%
}

.containerTexts>h4 {
    width: 100%;
    margin-top: 4%;
    animation: 3s ease-in-out desplazar
}

.containerTexts>hr {
    width: 80%;
    margin: 3% 20%;
    height: 4px;
    border-radius: 4px;
    background: var(--color3);
    opacity: 1;
    box-shadow: 0 0 5px .5px rgba(0, 0, 0, .9);
    animation: 2.5s ease-in-out desplazar;
    display: none !important
}

.usoCamara {
    animation: 2s ease-in-out desplazar3
}

.usoQR {
    animation: 2.5s ease-in-out desplazar3
}

.usoCarta {
    animation: 3s ease-in-out desplazar3
}

.containerInfo {
    top: 60vh;
    width: 100%
}

.containerExtrasModal,
.containerInfo>div {
    flex-wrap: wrap;
    align-content: center;
    display: flex
}

.containerInfo>div {
    width: 100%;
    padding: 5% 10%;
    align-items: flex-start;
    justify-content: space-evenly
}

.containerUso {
    background-color: #fff;
    box-shadow: 0 0 25px -3px rgba(0, 0, 0, .3)
}

.titleUso {
    background-color: var(--color10) !important;
    border-radius: 0 0 15px 15px;
    color: #fff
}

.titleUso>h5>strong {
    color: var(--color3);
    filter: invert(1)
}

.titleVentaja {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding: 1rem
}

.titleVentaja>h5 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 75%;
    color: var(--color3)
}

.containerDataExtra>.card-body>.list-group-flush,
.containerEjQr,
.containerExtrasModal>div>svg,
.containerExtrasModal>div>img,
.imgVentaja>svg,
.imgVentaja>img {
    width: 100%;
    height: 100%;
}

.containerPortagraficas>svg,
.containerPortagraficas>img {
    width: 100%;
}

.tallaPegatinas {
    color: var(--color4)
}

.bannerUso,
.bannerVentajas,
.containerPrecio,
.titleTarifa {
    text-align: center;
    color: var(--color3)
}

.containerPrecio2 {
    margin: 0 !important;
    padding: 0
}

.imgVentaja {
    width: 4rem;
    height: 4rem;
    padding: 6%;
    background-color: var(--color2);
    border-radius: 50%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center
}

.card {
    border-radius: 15px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
    margin-top: 5%
}

.bannerUso,
.bannerVentajas {
    width: 100%;
    font-size: 3rem;
    animation: 1.5s ease-in-out desplazar2
}

.hrUso,
.hrVentajas {
    width: 100%;
    height: 4px !important;
    border-radius: 4px;
    background: var(--color3);
    opacity: 1;
    box-shadow: 0 0 5px .5px rgba(0, 0, 0, .9);
    animation: 1s ease-in-out desplazar2
}

.containerDataExtra>.card-body>.card-text,
.txtUso {
    text-align: center
}

.imgUso {
    border-radius: 15px 15px 0 0
}

.imgTarifa {
    width: 5rem;
    height: 5rem;
    margin: 5% auto 0
}

.titleTarifa {
    font-size: 2rem;
    font-weight: 700
}

.containerPrecio {
    font-size: 1.5rem !important;
    font-weight: 700;
    background: 0 0;
    margin-bottom: 2%
}

.containerTarifas {
    align-items: flex-start !important
}

.btnContactar {
    width: 10rem;
    padding: 1rem;
    margin: 2% calc(50% - 5rem);
    font-size: 1.7rem;
    font-weight: 700
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border: none
}

body::-webkit-scrollbar-thumb {
    background: var(--color4);
    border-radius: 4px;
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
}

body::-webkit-scrollbar-track {
    background: 0 0
}

.containerExtrasModal {
    align-items: center;
    justify-content: space-evenly;
    margin: 4% 0
}

.containerExtrasModal>div {
    width: 40%;
    padding: 5%;
    background: var(--color1);
    border-radius: 15px;
    box-shadow: 0 0 0 4px var(--color2);
    color: var(--color2);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer
}

.containerPegatinas>label,
.containerPegatinas>span,
.containerPortagraficas>label,
.containerPortagraficas>span {
    width: 100%;
    text-align: center;
    color: var(--color5);
    font-weight: 700
}

.containerExtrasModal>div:hover {
    transform: scale(1.05);
    filter: drop-shadow(2px 4px 6px black)
}

.extraOff {
    filter: grayscale(1)
}

.extraOff:hover {
    filter: grayscale(1) !important
}

.containerDataExtra {
    width: 18rem;
    height: 19rem
}

.containerDataExtra>.card-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between
}

.containerPegatinas {
    width: 30%;
    display: flex;
    flex-wrap: wrap
}

.containerPegatinas>img {
    width: 100%;
    margin: 5% 0
}

.containerPegatinas>label {
    font-size: 1.1rem;
    margin-top: 10%
}

.containerPegatinas>span {
    font-size: 1rem;
    filter: invert(1);
    margin-bottom: 10%
}

.containerPortagraficas {
    width: 40%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    align-content: space-between
}

.containerPortagraficas>label {
    font-size: 1.3rem
}

.containerPortagraficas>span {
    font-size: 1.15rem;
    filter: invert(1)
}

.containerPortagraficas>span>strong {
    filter: invert(1)
}

.containerEjQr>img {
    width: 75%;
    margin: 5% 12.5%;
    box-shadow: 0 6px 20px -3px rgba(0, 0, 0, .41)
}

.btnConsulModal {
    width: 50%;
    margin: 0 25%;
    color: #000;
    filter: invert(1);
    background: var(--color3);
    font-size: 1rem !important;
    font-weight: 700
}

.btnConsulModal:active,
.btnConsulModal:focus,
.btnConsulModal:hover {
    transform: scale(1.1);
    color: #000;
    transition: .2s ease-in-out
}

.containerFooter {
    padding: 0 !important;
    background: #fff
}

.st0 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st1 {
    fill: #ffffff;
}

.st0-2 {
    fill: none;
    stroke: #118ed1;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.st1-2 {
    fill: #118ed1;
}

.containerBtnViewTarifas {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.btnViewTarifas {
    font-family: "Dancing Script", cursive;
    font-size: 1.3em;
    font-weight: 700;
    padding: 0.5rem 1rem;
}

.dNone {
    display: none !important
}