@import url(header.css);
@import  url(footer.css);
@import  url(sociales.css);
@import  url(buttons.css);


:root{
    --green: #69a745;
    --green-light : #b8d6a7;
    --avocado: #a6b53a;
    --blue: #102c6e;
    --gray: #a2a2a2;

    --vitax: #de8a71;
    --vglutax: #7e82ae;
    --vglutation: #c4aba5;
    --vcontrol: #26b09b;
    --vtedetox: #41773e;
    --neurokafe: #0084c5;
    --vglucalose: #8083af;
    --vfortyflora: #899ea4;
    --vcolagen: #c787ac;
    --vorganex: #bcc245;
    --vitadol:#b05f7b;
    --vcurcumax: #ccb732;
    --vitalboost: #3eb3b0;
    --vitarly: #006fad;
    --vthermokafe: #961726;
    --lovekafe: #a71a96;
    --vitalix: #b3284c;
    --vasculax: #4b5fa3;
    --vitalay: #83b4c5;
    --vitaren: #a42d79;

    --allow:#7DAF3B;
    --disallow:#af3b3b;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*{
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
}
.container-fluid {
    padding-right: 6% !important;
    padding-left: 6% !important;
}
.hr{
    border: 1px solid var(--gray);
    background-color: var(--gray);
    margin-left: auto;
    margin-right: auto;
}

/*-- HelveticaNeue --*/
@font-face {
    font-family: "HelveticaNeue-bold";
    src: url(../assets/fonts/HelveticaNeue/HelveticaNeuBold.ttf);
}
@font-face {
    font-family: "HelveticaNeue";
    src: url(../assets/fonts/HelveticaNeue/HelveticaNeue.ttf);
}
@font-face {
    font-family: "HelveticaNeue-Light";
    src: url(../assets/fonts/HelveticaNeue/HelveticaNeueLight.ttf);
}
@font-face {
    font-family: "HelveticaNeue-Thin";
    src: url(../assets/fonts/HelveticaNeue/HelveticaNeueThin.ttf);
}
@font-face {
    font-family: "HelveticaNeue-It";
    src: url(../assets/fonts/HelveticaNeue/HelveticaNeueIt.ttf);
}
/*-- Roboto --*/
@font-face {
    font-family: "Roboto";
    src: url(../assets/fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
    font-family: "Roboto-Light";
    src: url(../assets/fonts/Roboto/Roboto-Light.ttf);
}
@font-face {
    font-family: "Roboto-Medium";
    src: url(../assets/fonts/Roboto/Roboto-Medium.ttf);
}
@font-face {
    font-family: "Roboto-Bold";
    src: url(../assets/fonts/Roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: "Roboto-Bold-Italic";
    src: url(../assets/fonts/Roboto/Roboto-BoldItalic.ttf);
}

/*-- Texts --*/
h1,h2,h3,h4,h5,h6{
    font-family: "Roboto-Bold";
}
h1{
    font-size: calc(30px + (60 - 30) * ((100vw - 300px) / (1600 - 300)));
}
h2{
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)));
}
h3{
    font-size: calc(19px + (35 - 19) * ((100vw - 300px) / (1600 - 300)));
}
h5{
    font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
}
p.txt{
    font-size: calc(15px + (25 - 15) * ((100vw - 300px) / (1600 - 300)));
}
.text-blue{
    color: var(--blue) !important;
}
/*-- Backgrounds --*/
.bg-glass{
    background: rgba(15, 44, 105, 0.384) !important;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
    backdrop-filter: blur( 5px ) !important;
    -webkit-backdrop-filter: blur( 5px ) !important;
    transition: ease 1s;
}
.bg-glass-toggle{
    background: rgba(15, 44, 105, 0.384) !important;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
    backdrop-filter: blur( 5px ) !important;
    -webkit-backdrop-filter: blur( 5px ) !important;
    transition: ease 1s;
}
.bg-transparent{
    transition: ease 1s;
}
.bg-green{
    background-color: var(--green);
}
.bg-blue{
    background-color: var(--blue);
}

/*--- Carousel ---*/
#carouselIndex .carousel-caption{
    top: 10%;
    bottom: 15%;
    margin: auto;
}
#carouselIndex p{
    font-family: "Roboto-Light";
    font-size: calc(15px + (30 - 15) * ((100vw - 300px) / (1600 - 300)));
}

/*-----------------
---    INDEX    ---
-----------------*/

/*--- Sections ---*/
section.sections{
    color: white;
    font-family: "HelveticaNeue-Light";
}
section.sections div.row>div{
    min-height: 170px;
    padding: 3% 3% 1% 3%;
    display: flex;
    flex-wrap: wrap;
}
section.sections div.row>div:nth-child(1){
    background-image: url(../img/empresa.png) !important;
    background-size: cover;
}
section.sections div.row>div:nth-child(2){
    background-image: url(../img/fabricacion.png) !important;
    background-size: cover;
    background-position: right;
}
section.sections div.row>div:nth-child(3){
    background-image: url(../img/productos.png) !important;
    background-size: cover;
}
section.sections div.row>div:nth-child(4){
    background-image: url(../img/oportunidad.png) !important;
    background-size: cover;
}
/*--- Weillcome ---*/
section.wellcome{
    color: white;
    background-image: url(../img/backgrounds/bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    background-position-y: bottom;
}
section.wellcome p,
section.wellcome h3{
    font-family: "HelveticaNeue-Thin";
}

section.wellcome .mt-sp{
    margin-top: 20%;
}

/*-----------------
---   FOUNDES   ---
-----------------*/
section.attribute{
    color: white;
    background-image: url(../img/backgrounds/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
}
section .semicircle{
    position: absolute;
    z-index: -1;
    right: 0px;
    top: -10%;
    width: 35%;
}
/*-- attribute --*/
section.attribute table th{
    vertical-align: middle;
}
.vineta{
    width: calc(27px + (40 - 27) * ((100vw - 300px) / (1600 - 300))) !important;
    
}
section.attribute table td{
    padding: 1.7rem;
}
section.attribute p{
    font-family: "HelveticaNeue-Thin";
    margin: 0;
}

/*-- members --*/
section.members h1{
    color: var(--blue);
}
section.members h4{
    color: var(--green);
    font-size: calc(17px + (30 - 17) * ((100vw - 300px) / (1600 - 300)));
}
section.members p{
    color: var(--blue);
    font-family: "Roboto";
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.members img{
    filter: drop-shadow(0px 0px 20px var(--gray));
}

/*-- values --*/
section.values{
    color: white;
}
section.values h1,
section.values h4{
    color: var(--blue);
}
section.values h4{
    font-size: calc(17px + (30 - 17) * ((100vw - 300px) / (1600 - 300)));
}
section.values .row>div{
    display: flex;
    flex-direction: column;
}
section.values .card-blue{
    background-color: #3c5385;
    padding: 5%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    flex-grow: 1;
}
section.values .card-blue>p{
    font-family: "Roboto-Light";
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: white;
}
/*-----------------
--- FABRICACIÓN ---
-----------------*/
section.manufact{
    font-family: "HelveticaNeue-Light";
    color: var(--blue);
}

/*-----------------
---   PRODUCTS  ---
-----------------*/
/*-- features --*/
section.features h5{
    color: var(--blue);
    font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.features p{
    color: var(--blue);
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-family: "Roboto-Light";
    font-weight: bold;

}
/*-- best-products --*/
section.best-products{
    color: white;
}
section.best-products .triangulo{
    position: absolute;
    right: 0px;
    top: -200%;
    
}
section.best-products .triangulo2{
    position: absolute;
    right: 0px;
    z-index: -1;
}
section.best-products .logo-transparent{
    width: calc(80px + (150 - 80) * ((100vw - 300px) / (1600 - 300)));
}

/*-- products --*/
section.products img{
    width: 75%;
}
section.products a:hover{
    text-decoration:none;
}
section.products h3,
section.products h5{
    color: var(--blue);
}
section.products h5{
    font-family: "Roboto-Medium";
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1600 - 300)));
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
}
section.products .separator{
    height: calc(300px + (1350 - 300) * ((100vw - 300px) / (1600 - 300)));;
}
/*
section.products .carousel-continer{
    position: relative;
}
section.products .carousel-continer .next{
    position: absolute;
    top: 50%;
    right: 30px;
    z-index: 100;
    cursor: pointer;

    filter: drop-shadow(5px 5px 10px var(--gray));
}
section.products .carousel-continer .prev{
    position: absolute;
    top: 50%;
    left: 30px;
    z-index: 100;
    cursor: pointer;

    filter: drop-shadow(5px 5px 10px var(--gray));
}
*/
/*-----------------
---   PRODUCTS  ---
-----------------*/
.top-logo{
    position: absolute;
    right: 0;
    width:  calc(170px + (400 - 170) * ((100vw - 300px) / (1600 - 300)));
    filter: drop-shadow(10px 10px 20px var(--gray));
}
section.separador-top{
    height: 100px;
}
section.separador-bottom{
    height: 100px;
}

section.product-descrip .rectangle{
    position: absolute;
    top: 20%;
    width:  calc(90px + (180 - 90) * ((100vw - 300px) / (1600 - 300)));
}
section.product-descrip h1,
section.product-descrip p{
    color: var(--blue);
}
section.product-descrip p,
section.descripcion p{
    font-family: "HelveticaNeue-Light";
}
section .beneficios h4,
section .beneficios ul>li{
    font-family: "HelveticaNeue-bold" !important;
    font-size: calc(17px + (25 - 17) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold !important;
    font-style: italic !important;
}
section .ingredientes h4{
    font-weight: bold !important;
    font-style: italic !important;
}

section .beneficios ul{
    margin-left: 4%;
}

section.descripcion{
    color: var(--blue);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: bottom;
}

/*---------------------
---   OPPORTUNITY   ---
----------------------*/
section.building{
    color: white;
    background-image: url(../img/backgrounds/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
}

/*-- building --*/
section.building table th{
    vertical-align: middle;
}
section.building table td{
    padding: 1.7rem;
}
section.building p{
    font-family: "HelveticaNeue-Thin";
    margin: 0;
}

/*-- marketing and solidity --*/
section.markidity h1{
    color: var(--blue);
}
section.markidity h4{
    color: var(--green);
    font-size: calc(17px + (30 - 17) * ((100vw - 300px) / (1600 - 300)));
}
section.markidity h4.plus{
    color: var(--green);
    font-size: calc(17px + (40 - 17) * ((100vw - 300px) / (1600 - 300)));
}
section.markidity h5{
    color: var(--blue);
    font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.markidity p{
    color: var(--blue);
    font-family: "Roboto";
    font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.markidity img{
    filter: drop-shadow(0px 0px 20px var(--gray));
}

.semicircle2{
    position: absolute;
    z-index: -1;
    right: 0px;
    bottom: -5%;
    width: 50%;
}

/*---------------------
---   REWARD PLAN   ---
----------------------*/
section.takecharge{
    color: white;
    background-image: url(../img/backgrounds/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
    height: calc(270px + (500 - 270) * ((100vw - 300px) / (1600 - 300)));
}

/*-- joined --*/
section.joined h4{
    color: var(--blue);
    font-size: calc(17px + (32 - 17) * ((100vw - 300px) / (1600 - 300)));
}
section.joined p{
    color: var(--blue);
    font-family: "Roboto";
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.joined .border-right{
    border-right: 2px solid var(--gray) !important;
}
/*-- points --*/
section.points h4{
    color: var(--green);
    font-size: calc(17px + (27 - 17) * ((100vw - 300px) / (1600 - 300)));
    font-style: italic;
}
section.points p{
    color: var(--blue);
    font-family: "Roboto";
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/*-- reward plan --*/
#reward .carousel-caption h1{
    font-size: calc(20px + (60 - 20) * ((100vw - 300px) / (1600 - 300)));
}
section.reward h2{
    color: var(--blue);
}
section.reward p{
    color: var(--blue);
    font-family: "Roboto";
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.reward .btn-download{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 7rem;
    padding: 2% 18%;
    background-color: var(--green);
    border: 2px solid var(--green);
    font-weight: bold;
    font-size: calc(14px + (30 - 14) * ((100vw - 300px) / (1600 - 300)));
    --hover: var(--green);
}
section.reward .btn-download:hover,
section.reward .btn-download:focus{
    animation: pulse 1s;
    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
    color: var(--green) !important;
    background-color: white !important;
}

section .semicircle3{
    position: absolute;
    z-index: -1;
    right: 0px;
    bottom: -5%;
    width: 50%;
}
/*------------------------
---      CONTACT       ---
------------------------*/
/*-- carousel --*/
#carouselContact .carousel-caption{
    top: 40%;
    left: 0%;
    margin: auto;
}
#carouselContact .carousel-caption h1{
    color: white;
}
/*-- cards --*/
section.contact-card{
    color: white;
}
section.contact-card h2{
    color: var(--blue);
    font-style: italic;
}
section.contact-card .row>div{
    display: flex;
    flex-direction: column;
}
section.contact-card .card-blue{
    background-color: var(--blue);
    padding: 5%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    flex-grow: 1;
}
section.contact-card .card-blue>h3{
    font-family: "Roboto-Bold-Italic";
    font-size: calc(14px + (30 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: white;
}
section.contact-card .card-blue>img{
    width: 20%;
}
section.contact-card .card-blue>i{
    font-size: calc(14px + (60 - 14) * ((100vw - 300px) / (1600 - 300)));
}
section.contact-card .card-blue>p{
    font-family: "Roboto-Bold-Italic";
    font-size: calc(14px + (27 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: white;
}
section.contact-separador{
    height: calc(500px + (1500 - 500) * ((100vw - 300px) / (1600 - 300)));
}
section.contact-separador .semicircle4{
    position: absolute;
    z-index: -1;
    right: 0px;
    bottom: 0%;
    width: calc(200px + (320 - 200) * ((100vw - 300px) / (1600 - 300)));
}

/*-------------------------*/
/*-PRODUCTOS INDIVIDUALES--*/
/*-------------------------*/

#v-itax section.product-descrip h1{
    /*color: var(--vitax) !important;*/
    color: var(--blue) !important;
}
#v-itax section.descripcion{
    background-image: url(../img/backgrounds/bg4.png);
}
/*-- --*/
#v-thermokafe section.product-descrip h1{
    color: var(--vthermokafe) !important;
}
#v-thermokafe section.descripcion{
    background-image: url(../img/backgrounds/bg14.jpg);
}
/*-- --*/
#v-tedetox section.product-descrip h1{
    color: var(--vtedetox) !important;
}
#v-tedetox section.descripcion{
    background-image: url(../img/backgrounds/bg15.jpg);
}
/*-- --*/
#v-itarly section.product-descrip h1{
    color: var(--vitarly) !important;
}
#v-itarly section.descripcion{
    background-image: url(../img/backgrounds/bg6.png);
}
/*-- --*/
#v-collagen section.product-descrip h1{
    color: var(--vcolagen) !important;
}
#v-collagen section.descripcion{
    background-image: url(../img/backgrounds/bg5.png);
}
/*-- --*/
#neurokafe section.product-descrip h1{
    color: var(--neurokafe) !important;
}
#neurokafe section.descripcion{
    background-image: url(../img/backgrounds/bg14.jpg);
}
/*-- --*/
#v-organex section.product-descrip h1{
    color: var(--vorganex) !important;
}
#v-organex section.descripcion{
    background-image: url(../img/backgrounds/bg6.png);
}
/*-- --*/
#v-glutation section.product-descrip h1{
    /*color: var(--vglutation) !important;*/
}
#v-glutation section.descripcion{
    background-image: url(../img/backgrounds/bg7.png);
}
/*-- --*/
#v-glucalose section.product-descrip h1{
    color: var(--vglucalose) !important;
}
#v-glucalose section.descripcion{
    background-image: url(../img/backgrounds/bg8.png);
}
/*-- --*/
#v-itadol section.product-descrip h1{
    color: var(--vitadol) !important;
}
#v-itadol section.descripcion{
    background-image: url(../img/backgrounds/bg9.png);
}
/*-- --*/
#v-control section.product-descrip h1{
    color: var(--vcontrol) !important;
}
#v-control section.descripcion{
    background-image: url(../img/backgrounds/bg10.png);
}
/*-- --*/
#v-fortyflora section.product-descrip h1{
    color: var(--vfortyflora) !important;
}
#v-fortyflora section.descripcion{
    background-image: url(../img/backgrounds/bg11.png);
}
/*-- --*/
#v-curcumax section.product-descrip h1{
    color: var(--vcurcumax) !important;
}
#v-curcumax section.descripcion{
    background-image: url(../img/backgrounds/bg12.png);
}
/*-- --*/
#v-italboost section.product-descrip h1{
    color: var(--vitalboost) !important;
}
#v-italboost section.descripcion{
    background-image: url(../img/backgrounds/bg13.png);
}
/*-- --*/
#v-glutax section.product-descrip h1{
    color: var(--vglutax) !important;
}
/*
#v-glutax section.descripcion{
    color: var(--blue);
    background-image: url(../img/backgrounds/bg13.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
}
*/
/*-- --*/
#lovekafe section.product-descrip h1{
    color: var(--lovekafe) !important;
}
#lovekafe section.descripcion{
    background-image: url(../img/backgrounds/bg14.jpg);
}
/*-- --*/
#vitalix section.product-descrip h1{
    color: var(--vitalix) !important;
}
#vitalix section.descripcion{
    background-image: url(../img/backgrounds/bg5.png);
}
/*-- --*/
#vasculax section.product-descrip h1{
    color: var(--vasculax) !important;
}
#vasculax section.descripcion{
    background-image: url(../img/backgrounds/bg6.png);
}
/*-- --*/
#vitalay section.product-descrip h1{
    color: var(--vitalay) !important;
}
#vitalay section.descripcion{
    background-image: url(../img/backgrounds/bg6.png);
}
/*-- --*/
#vitaren section.product-descrip h1{
    color: var(--vitaren) !important;
}
#vitaren section.descripcion{
    background-image: url(../img/backgrounds/bg6.png);
}

/*cookies*/
.cookies p{
    font-family: "Roboto";
    font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
    color: white;
    margin: 0;
}
.cookies a{
    color: var(--blue);
}