/*
 Theme Name:   MB Marketing Bricks | Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description: Personalización y ajustes básicos de seguridad de WordPress.
 Author:      MB Marketing
 Author URI:   https://mbmarketing.es/
 Contributors: Carlos Alonso
 Template:     bricks
 Version:      2.0.0
 Text Domain:  bricks
*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base system 1rem = 16px */
:root {
  --padding-xxl: 6.4rem; /* Base */
  --padding-xl: calc(var(--padding-xxl) - 1.6rem);  /* 4.8rem */
  --padding-l: calc(var(--padding-xxl) - 4rem);     /* 2.4rem */
  --padding-m: calc(var(--padding-xxl) - 4.8rem);   /* 1.6rem */
  --padding-s: calc(var(--padding-xxl) - 5.2rem);   /* 1.2rem */
  --padding-xs: calc(var(--padding-xxl) - 5.6rem);  /* 0.8rem */
  --padding-xxs: calc(var(--padding-xxl) - 6rem);   /* 0.4rem */

  --margin-xxl: 6.4rem; /* Base */
  --margin-xl: calc(var(--margin-xxl) - 1.6rem); /* 4.8rem */
  --margin-l: calc(var(--margin-xxl) - 4rem);  /* 2.4rem */
  --margin-m: calc(var(--margin-xxl) - 4.8rem);  /* 1.6rem */
  --margin-s: calc(var(--margin-xxl) - 5.2rem);  /* 1.2rem */
  --margin-xs: calc(var(--margin-xxl) - 5.6rem);   /* 0.8rem */
  --margni-xxs: calc(var(--margin-xxl) - 6rem);   /* 0.4rem */

  --font-text: min(
    max(0.9rem, calc(1rem + ((1vw - 0.1875rem) * 0.2963))),
    1.1rem
  );
  --font-title: min(
    max(1.75rem, calc(1.75rem + ((1vw - 0.1875rem) * 0.8642))),
    2.625rem
  );

  --border-radius-xxl: 2rem; /* Base */
  --border-radius-xl: calc(var(--border-radius-xxl) - 0.4rem);
  --border-radius-l: calc(var(--border-radius-xxl) - 0.8rem);
  --border-radius-m: calc(var(--border-radius-xxl) - 1.2rem);
  --border-radius-s: calc(var(--border-radius-xxl) - 1.6rem);

  --gap-xxl: 2rem; /* Base */
  --gap-xl: calc(var(--gap-xxl) - 0.4rem);
  --gap-l: calc(var(--gap-xxl) - 0.8rem);
  --gap-m: calc(var(--gap-xxl) - 1rem);
  --gap-s: calc(var(--gap-xxl) - 1.2rem);
  --gap-xs: calc(var(--gap-xxl) - 1.5rem);
  --gap-xxs: calc(var(--gap-xxl) - 1.8rem);

  --animation-base: 500ms ease;
}
/* Heading */
.title-xxl {
  font-size: var(--font-title);
  line-height: 1.2;
}
.title-xl {
  font-size: calc(var(--font-title) - 0.4rem);
  line-height: 1.2;
}
.title-l {
  font-size: calc(var(--font-title) - 0.8rem);
  line-height: 1.2;
}
.title-m {
  font-size: calc(var(--font-title) - 1rem);
  line-height: 1.2;
}
/* Body text */
.txt-m {
  font-size: var(--font-text);
  line-height: 1.5;
}
.txt-s {
  font-size: calc(var(--font-text) - 0.2rem);
  line-height: 1.5;
}
.txt-xs {
  font-size: calc(var(--font-text) - 0.4rem);
  line-height: 1.5;
}

/* Border radius */
.br-xxl { border-radius: var(--border-radius-xxl); }
.br-xl { border-radius: var(--border-radius-xl); }
.br-l { border-radius: var(--border-radius-l); }
.br-m { border-radius: var(--border-radius-m); }
.br-s { border-radius: var(--border-radius-s); }

/* Gap */
.gap-xxl { gap: var(--gap-xxl);}
.gap-xl { gap: var(--gap-xl);}
.gap-l { gap: var(--gap-l);}
.gap-m { gap: var(--gap-m);}
.gap-s { gap: var(--gap-s);}
.gap-xs { gap: var(--gap-xs);}
.gap-xxs { gap: var(--gap-xxs);}

/* Width */
.w-100 { width: 100%;}
.w-90 { width: 90%;}
.w-80 { width: 80%;}
.w-70 { width: 70%;}
.w-60 { width: 60%;}
.w-50 { width: 50%;}
.w-40 { width: 40%;}
.w-30 { width: 30%;}
.w-33 { width: 33%;}
.w-20 { width: 20%;}
.w-25 { width: 25%;}
.w-10 { width: 10%;}

.mw-m {max-width: 1280px;}

/*  Margin   */
.m-auto {margin: 0 auto;}
.m-x-auto {margin-left: auto;margin-right: auto;}
.m-y-auto {margin-top: auto;margin-bottom: auto;}

.m-0 {margin: 0;}
.m-x-0 {margin-left: 0;margin-right: 0;}
.m-y-0 {margin-top: 0;margin-bottom: 0;}
.ml-0 {margin-left: 0;}
.mt-0 {margin-top: 0;}
.mr-0 {margin-right: 0;}
.mb-0 {margin-bottom: 0;}

.m-xxl { margin: var(--margin-xxl); }
.m-x-xxl { margin-left: var(--margin-xxl); margin-right: var(--margin-xxl); }
.m-y-xxl { margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl); }
.ml-xxl { margin-left: var(--margin-xxl); }
.mt-xxl { margin-top: var(--margin-xxl); }
.mr-xxl { margin-right: var(--margin-xxl); }
.mb-xxl { margin-bottom: var(--margin-xxl); }

.m-xl { margin: var(--margin-xl); }
.m-x-xl { margin-left: var(--margin-xl); margin-right: var(--margin-xl); }
.m-y-xl { margin-top: var(--margin-xl); margin-bottom: var(--margin-xl); }
.ml-xl { margin-left: var(--margin-xl); }
.mt-xl { margin-top: var(--margin-xl); }
.mr-xl { margin-right: var(--margin-xl); }
.mb-xl { margin-bottom: var(--margin-xl); }

.m-l { margin: var(--margin-l); }
.m-x-l { margin-left: var(--margin-l); margin-right: var(--margin-l); }
.m-y-l { margin-top: var(--margin-l); margin-bottom: var(--margin-l); }
.ml-l { margin-left: var(--margin-l); }
.mt-l { margin-top: var(--margin-l); }
.mr-l { margin-right: var(--margin-l); }
.mb-l { margin-bottom: var(--margin-l); }

.m-m { margin: var(--margin-m); }
.m-x-m { margin-left: var(--margin-m); margin-right: var(--margin-m); }
.m-y-m { margin-top: var(--margin-m); margin-bottom: var(--margin-m); }
.ml-m { margin-left: var(--margin-m); }
.mt-m { margin-top: var(--margin-m); }
.mr-m { margin-right: var(--margin-m); }
.mb-m { margin-bottom: var(--margin-m); }

.m-s { margin: var(--margin-s); }
.m-x-s { margin-left: var(--margin-s); margin-right: var(--margin-s); }
.m-y-s { margin-top: var(--margin-s); margin-bottom: var(--margin-s); }
.ml-s { margin-left: var(--margin-s); }
.mt-s { margin-top: var(--margin-s); }
.mr-s { margin-right: var(--margin-s); }
.mb-s { margin-bottom: var(--margin-s); }

.m-xs { margin: var(--margin-xs); }
.m-x-xs { margin-left: var(--margin-xs); margin-right: var(--margin-xs); }
.m-y-xs { margin-top: var(--margin-xs); margin-bottom: var(--margin-xs); }
.ml-xs { margin-left: var(--margin-xs); }
.mt-xs { margin-top: var(--margin-xs); }
.mr-xs { margin-right: var(--margin-xs); }
.mb-xs { margin-bottom: var(--margin-xs); }

.m-xs { margin: var(--margin-xxs); }
.m-x-xs { margin-left: var(--margin-xxs); margin-right: var(--margin-xxs); }
.m-y-xs { margin-top: var(--margin-xxs); margin-bottom: var(--margin-xxs); }
.ml-xs { margin-left: var(--margin-xxs); }
.mt-xs { margin-top: var(--margin-xxs); }
.mr-xs { margin-right: var(--margin-xxs); }
.mb-xs { margin-bottom: var(--margin-xxs); }

/* Padding */
.p-0 {padding: 0;}

.p-xxl { padding: var(--padding-xxl); }
.p-x-xxl { padding-left: var(--padding-xxl); padding-right: var(--padding-xxl); }
.p-y-xxl { padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); }
.pl-xxl { padding-left: var(--padding-xxl); }
.pt-xxl { padding-top: var(--padding-xxl); }
.pr-xxl { padding-right: var(--padding-xxl); }
.pb-xxl { padding-bottom: var(--padding-xxl); }

.p-xl { padding: var(--padding-xl); }
.p-x-xl { padding-left: var(--padding-xl); padding-right: var(--padding-xl); }
.p-y-xl { padding-top: var(--padding-xl); padding-bottom: var(--padding-xl); }
.pl-xl { padding-left: var(--padding-xl); }
.pt-xl { padding-top: var(--padding-xl); }
.pr-xl { padding-right: var(--padding-xl); }
.pb-xl { padding-bottom: var(--padding-xl); }

.p-l { padding: var(--padding-l); }
.p-x-l { padding-left: var(--padding-l); padding-right: var(--padding-l); }
.p-y-l { padding-top: var(--padding-l); padding-bottom: var(--padding-l); }
.pl-l { padding-left: var(--padding-l); }
.pt-l { padding-top: var(--padding-l); }
.pr-l { padding-right: var(--padding-l); }
.pb-l { padding-bottom: var(--padding-l); }

.p-m { padding: var(--padding-m); }
.p-x-m { padding-left: var(--padding-m); padding-right: var(--padding-m); }
.p-y-m { padding-top: var(--padding-m); padding-bottom: var(--padding-m); }
.pl-m { padding-left: var(--padding-m); }
.pt-m { padding-top: var(--padding-m); }
.pr-m { padding-right: var(--padding-m); }
.pb-m { padding-bottom: var(--padding-m); }

.p-s { padding: var(--padding-s); }
.p-x-s { padding-left: var(--padding-s); padding-right: var(--padding-s); }
.p-y-s { padding-top: var(--padding-s); padding-bottom: var(--padding-s); }
.pl-s { padding-left: var(--padding-s); }
.pt-s { padding-top: var(--padding-s); }
.pr-s { padding-right: var(--padding-s); }
.pb-s { padding-bottom: var(--padding-s); }

.p-xs { padding: var(--padding-xs); }
.p-x-xs { padding-left: var(--padding-xs); padding-right: var(--padding-xs); }
.p-y-xs { padding-top: var(--padding-xs); padding-bottom: var(--padding-xs); }
.pl-xs { padding-left: var(--padding-xs); }
.pt-xs { padding-top: var(--padding-xs); }
.pr-xs { padding-right: var(--padding-xs); }
.pb-xs { padding-bottom: var(--padding-xs); }

.p-xxs { padding: var(--padding-xxs); }
.p-x-xxs { padding-left: var(--padding-xxs); padding-right: var(--padding-xxs); }
.p-y-xxs { padding-top: var(--padding-xxs); padding-bottom: var(--padding-xxs); }
.pl-xxs { padding-left: var(--padding-xxs); }
.pt-xxs { padding-top: var(--padding-xxs); }
.pr-xxs { padding-right: var(--padding-xxs); }
.pb-xxs { padding-bottom: var(--padding-xxs); }

/*  Aling  items */
.align-center { align-items: center;}
.align-start { align-items: flex-start;}
.align-end { align-items: flex-end;}
.align-baseline { align-items: baseline;}

/*  Justify  content */
.justify-center { justify-content: center;}
.justify-start { justify-content: flex-start;}
.justify-end { justify-content: flex-end;}

/*  Display  */
.flex { display: flex;}
.flex-col { flex-direction: column;}
.flex-row { flex-direction: row;}
.block { display: block;}
.inline-block { display: inline-block;}
.inline { display: inline;}
.hidden { display: none;}

/* Overflow */
.overflow-y{ /* Hide vertical scrollbar and overflow */
	max-width: 100%;
  overflow-y: hidden;
}
.overflow-x{ /* Hide horizontal scrollbar and overflow */
	max-width: 100%;
  overflow-x: hidden;
}
.overflow{ /* Hide all scrollbar and overflow */
	max-width: 100%;
  overflow: hidden;
}


/* Renponsive  size for phones */
@media screen and (max-width: 767px) {
  [class*="w-"] {
    width: 100%;
  }
}