html {scroll-padding-top: 150px;}
#stand {scroll-margin-top: 250px;}
/* HEADER */
.header {padding: 16px 10px 10px 16px; z-index: 10; background: var(--color-primario); border-radius: 0px; font-weight: 500; color: white; width: calc(100% - 40px); position: fixed; top: 20px; margin: auto; left: 0px; right: 0px; display: flex; align-items: center; justify-content: space-between;
.left {display: flex; align-items: center; gap: 20px;}
.logo {width: 140px;}
.info {display: flex; gap: 14px; align-items: center; font-size: 16px; font-weight: 600;}
.item {display: flex; align-items: flex-start; gap: 3px; width: fit-content;}
.icoHeader {font-size: 20px; margin: -2px 0px 0px 0px;}
.txt {text-wrap: auto;}
.nav {display: flex; gap: 16px;}
.btnLink {font-size: 18px; text-align: center; display: flex; align-items: center; font-weight: 600; transition: .2s; cursor: pointer;
&:hover {color: var(--color-complement);}
}
.btnLink2 {background: white; color: var(--color-secundario); font-weight: 600; font-size: 16px; text-align: center; width: auto; padding: 10px 14px; border-radius: 0px; transition: .2; cursor: pointer;
&:hover {background: var(--color-secundario); color: var(--color-complement);}
}
.menu {display: none; align-items: center; gap: 4px; background: white; color: var(--color-secundario); font-weight: 600; font-size: 16px; text-align: center; width: auto; padding: 6px 14px; border-radius: 0px; transition: .2; cursor: pointer;
&:hover {background: var(--color-secundario); color: var(--color-complement);}
}
.icoMenu {font-size: 24px;}
}
@media ( width <= 1210px ) {
.header {align-items: flex-end; padding: 10px;
.btnLink {display: none;}
.btnLink2 {display: none;}
.menu {display: flex;}
.logo {width: 120px; padding: 10px 0px 8px 12px;}
}
}
@media ( width <= 670px ) {
.header {
.info {display: none;}
}
}
/* BANER */
.baner {width: 100%; height: 100vh; overflow: hidden; position: relative; min-height: 600px;
.bgImg {position: absolute; top: 0px; left: 0px; opacity: .2; display: none;}
.cl-normal {position: relative; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; height: 100%;}
.left {width: 45%; padding: 0px 0px 140px 0px; position: relative;}
.copy {color: var(--color-secundario); font-size: 42px; text-transform: uppercase;}
.subCopy {color: var(--color-primario); font-weight: 500; font-size: 20px; text-transform: uppercase; margin: 10px 0px 40px 0px;}
.bt1 {justify-content: flex-start; gap: 5px; width: 240px; border-radius: 0px 0px; margin: 0px 0px 14px 0px; padding: 0px 15px; transition: .2s;}
.right {width: 50%; height: 100%;}
.cajas {width: 330px; position: absolute; right: 40px; bottom: 60px;}
}
@media ( width <= 1400px ) {
.baner {
.right {width: 60%;}
.left {width: 36%;}
.cajas {width: 220px; position: absolute; right: -80px; bottom: 80px; z-index: 2;}
}
}
@media ( width <= 960px ) {
.baner {min-height: inherit; max-height: inherit; height: inherit;
.cl-normal {height: inherit;}
.left {width: 100%; padding: 140px 0px 0px 0px; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between;}
.bt1 {width: 48%; justify-content: center;}
.right {width: 100%; display: flex; align-items: flex-end; align-content: flex-end; border-radius: 0px; overflow: hidden;}
.cajas {display: none;}
}
}
@media ( width <= 650px ) {
.baner {
.copy {font-size: 28px;}
.bt1 {width: 100%;}
}
}
/* ESTRUCTURE 2 COLUMN */
.wrapEstruct {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin: 100px auto 0px auto;
.left {width: 30%;}
.right {width: 65%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.topNosotros1 {margin: 40px 0px 0px 0px;}
}
@media ( width <= 960px ) {
.wrapEstruct {
.left {width: 100%;}
.right {width: 100%;}
}
}
/* NOSOTROS */
.envase {color: var(--color-secundario); font-size: 28px; text-wrap: auto;}
.imgEnvase {border-radius: 0px; width: 100%;}
.imgWrapEnv {border-radius: 0px 0px; overflow: hidden; height: 350px; width: 100%;}
.negocio {font-weight: 800; color: var(--color-primario); font-size: 40px; width: 100%; margin: 20px 0px 20px 0px;}
.compra {width: 60%; font-weight: 500;
.titlecompra {background: var(--color-primario); color: white; font-size: 24px; padding: 20px 20px 100px 20px; border-radius: 0px 0px;}
.imgCompra {width: 80%; margin: -100px auto 0px auto;}
}
.dejo {width: 38%; color: var(--color-secundario); font-size: 22px; font-weight: 600; line-height: 1; margin: 30px 0px 0px 0px;}
@media ( width <= 1400px ) {
.imgWrapEnv {height: 280px;}
.compra {
.imgCompra {margin: -70px auto 0px auto;}
}
}
@media ( width <= 960px ) {
.envase {width: 60%; margin: auto; text-align: center;}
.imgWrapEnv {order: 2;}
.negocio {text-align: center;}
}
@media ( width <= 650px ) {
.envase {width: 100%;}
.compra {width: 100%;
.titlecompra {text-align: center; padding: 18px 18px 90px 18px;}
.imgCompra {width: 100%;}
}
.negocio {font-size: 32px;}
.dejo {width: 100%; text-align: center; margin: 0px 0px 20px 0px}
.imgWrapEnv {border-radius: 0px 0px;}
}
/* ITEM FERIA SIMULTANEO */
.seisFerias {width: 100%; text-align: center; color: var(--color-secundario); font-size: 50px; font-weight: 800;}
.simultaneo {width: 100%; text-align: center; color: var(--color-secundario); font-size: 22px;}
.itemSimultaneo {width: 49%; margin: 20px 0px 0px 0px; border-radius: 0px 0px; border: 1px solid var(--color-gray4); display: flex; align-items: center; justify-content: space-between; padding: 0px 10px; color: var(--color-secundario);
.imgSimultaneo {width: 140px;}
.txt {width: 310px; text-align: center; font-weight: 500;}
}
@media ( width <= 960px ) {
.itemSimultaneo {width: 100%;}
}
@media ( width <= 650px ) {
.itemSimultaneo {flex-direction: column;
.txt {padding: 0px 10px 12px 10px;}
}
}
/* VISITANTE */
.copyMedio {width: 100%; margin: 90px 0px; text-align: center; color: var(--color-secundario); font-size: 40px; font-weight: 800; text-transform: uppercase;}
.title1 {font-weight: 700; color: var(--color-secundario); font-size: 30px; padding: 0px 10px;}
.subtitle {font-weight: 800; color: var(--color-primario); font-size: 50px; margin: 0px 0px 10px 0px; padding: 0px 10px;}
.cultive {position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 0px 0px; display: flex; align-items: flex-end; align-content: flex-end;
.cultiveTxt {position: relative; width: calc(100% - 20px); color: var(--color-complement); text-align: center; padding: 12px 10px; font-size: 17px; font-weight: 500; text-wrap: auto; background: rgba(73, 47, 43, 0.7); margin: 0px auto 10px auto; border-radius: 0px 0px;}
.img-int {position: absolute;}
}
.aqui {font-size: 45px; width: 50%; line-height: 1; color: var(--color-secundario); margin: 50px 0px 0px 0px;}
.bolsas {width: 50%; margin: 50px 0px 0px 0px;}
@media ( width <= 960px ) {
.copyMedio {font-size: 30px;
br {display: none;}
}
.title1 {width: 100%; text-align: center;}
.subtitle {width: 100%; text-align: center;}
.bolsas {margin: 50px 0px 20px 0px;}
.aqui {width: 100%; text-align: center; font-size: 44px; margin: 20px 0px 0px 0px; position: relative;}
.bolsas {width: 100%; margin: 0px 0px 20px 0px;}
}
@media ( width <= 650px ) {
.aqui {font-size: 28px;}
.copyMedio {margin: 40px 0px;}
}
/* RUBROS */
.rubros {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 30px 0px; margin: 200px 0px 0px 0px; width: 100%;
.itemRubros {width: 23%; height: 300px; overflow: hidden; border-radius: 0px 0px; position: relative;}
.icoMoment {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; font-size: 60px; color: white;}
.title {border-radius: 0px 0px; font-weight: 500; font-size: 22px; position: absolute; bottom: 0px; background: rgba(0, 0, 0, 0.5); text-align: center; color: white; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center;}
.top1 {margin: -120px 0px 0px 0px;}
.top2 {margin: -240px 0px 0px 0px;}
.top3 {margin: -360px 0px 0px 0px;}
}
@media ( width <= 1440px ) {
.rubros {margin: 260px 0px 0px 0px;}
}
@media ( width <= 960px ) {
.rubros {margin: 20px 0px 0px 0px; gap: 20px 0px;
.itemRubros {width: 32%; height: 230px;}
.top1 {margin: 0px 0px 0px 0px;}
.top2 {margin: 0px 0px 0px 0px;}
.top3 {margin: 0px 0px 0px 0px;}
}
}
@media ( width <= 650px ) {
.rubros {
.itemRubros {width: 48%; height: 180px; border-radius: 0px 0px;}
.title {font-size: 18px; height: 40px; border-radius: 0px 0px;}
}
}
/* EXPOSITOR */
.expositorSubtitle {font-weight: 800; color: var(--color-primario); text-transform: uppercase; padding: 8px 8px}
.titleExpositor {color: var(--color-secundario);}
.caraWrap {width: 50%; overflow: hidden; border-radius: 0px 0px;}
.cara {width: 48%; font-size: 22px; line-height: 1; margin: 80px 0px 0px 0px; color: var(--color-secundario);}
.subtitleMedio {width: 100%; text-align: center; font-size: 34px; padding: 0px 100px; color: var(--color-gray4); line-height: 1; font-weight: 700; margin: 50px 0px;}
.subtitle2 {width: 100%; text-align: center; font-size: 24px; color: var(--color-primario); line-height: 1; font-weight: 800; text-transform: uppercase; margin: 0px 0px 20px 0px;}
.itemParticipar {width: 48%; color: var(--color-secundario); margin: 0px 0px 30px 0px;
.icoPart {font-size: 40px;}
.title {font-weight: 800; font-size: 22px; width: 50%; margin: 5px 0px;}
.txt {text-wrap: auto;}
}
.expoStiky {position: sticky; top: 140px;}
@media ( width <= 1440px ) {
.titleExpositor {font-size: 34px;}
.cara {margin: 30px 0px 0px 0px;}
.subtitleMedio {padding: 0px 0px;}
}
@media ( width <= 960px ) {
.expoStiky {position: relative; top: 0px;}
.expositorSubtitle {text-align: center;}
}
@media ( width <= 650px ) {
.itemParticipar {width: 100%;
.title {width: 100%;}
}
.subtitleMedio {font-size: 24px; padding: 0px;}
.caraWrap {width: 100%;}
.cara {width: 100%; text-align: center;}
}
/* STAND */
.stand {background: var(--color-complement); margin: 280px 0px 0px 0px; padding: 40px 0px 0px 0px;
.cl-normal {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
}
.standImg {width: 50%; margin: -280px 0px 0px 0px;}
.vinetas {width: 48%;}
.itemVine {display: flex; align-items: flex-start; gap: 3px; margin: 0px 0px 8px 0px; color: var(--color-secundario); font-weight: 500; font-size: 20px;}
.medidas {width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0px 0px -50px 0px;
.title {font-size: 40px; color: var(--color-secundario); width: 100%;}
.itemMedida {background: var(--color-secundario); color: var(--color-complement); border-radius: 0px 0px; width: 150px; height: 120px; display: flex; flex-direction: column; justify-content: center;}
.letra {font-weight: 800; text-transform: uppercase; font-size: 50px;}
.info {font-weight: 500; font-size: 22px;}
}
@media ( width <= 1440px ) {
.standImg {width: 58%;}
.vinetas {width: 40%;}
}
@media ( width <= 960px ) {
.standImg {width: 100%; margin: -380px 0px 0px 0px;}
.vinetas {width: 100%;}
.medidas {margin: 40px 0px -50px 0px;}
}
@media ( width <= 650px ) {
.standImg {width: 100%; margin: -180px 0px 0px 0px;}
.medidas {
.title {font-size: 28px;}
.itemMedida {width: 110px; height: 110px; border-radius: 0px 0px;}
.letra {font-size: 40px;}
.info {font-size: 18px;}
}
}
/* FOOTER */
.footer {width: 100%; gap: 24px; padding: 20px; background: var(--color-secundario); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 170px 0px 0px 0px; color: var(--color-complement);
.left {display: flex; gap: 12px 16px; flex-wrap: wrap;}
.itemFooter {display: flex;}
.icoFot {}
.right {display: flex; gap: 14px;}
.icoRedes {font-size: 24px; cursor: pointer;}
}
@media ( width <= 960px ) {
.footer {
.right {width: 100%;}
.itemFooter {width: 100%;}
}
}
/* NAV MOBILE */
.navMob {position: fixed; width: 100%; transition: .4s .1s; height: 0%; background: rgba(0, 0, 0, 0.8); top: 0px; left: 0px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
.wrap {color: white; margin: 0px 0px 0px -90%; transition: .3s .0s; width: 100%; padding: 150px 20px 100px 40px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start;}
.btNavMob {font-size: 30px; transition: .2s; text-transform: uppercase;
&:hover {color: var(--color-complement);}
}
.navIntOn {margin: 0px 0px 0px 0px; transition: .3s .1s;}
}
.navOn {height: 100%; transition: .4s .0s;}
@media ( width <= 650px ) {
.navMob {
.btNavMob {font-size: 24px;}
}
}
/* SCROLLBAR */
::-webkit-scrollbar {width: 12px; transition: .2s; overflow: auto;}
::-webkit-scrollbar-track {background: var(--color-primario); margin: 40px 0px; border-radius: 0px; transition: .2s; }
::-webkit-scrollbar-thumb {transition: .2s; background: var(--white07); border-radius: 0px; }