/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* Default Font Sizes and Spacing Calculation (for screens 1700px - 1600px) */
:root {
  /* Font Sizes */
  --body-font-size: 18px; /* Base Body Font */
  --sb-font: calc(var(--body-font-size) * 0.88); /* Small Body Font */
  --lb-font: calc(var(--body-font-size) * 1.1);
  --xlb-font: calc(var(--body-font-size) * 1.22);
  --h1-font: calc(var(--body-font-size) * 3.33); /* 60px */
  --h2-font: calc(var(--body-font-size) * 1.94); /* 35px */
  --h3-font: calc(var(--body-font-size) * 1.56); /* 28px */
  --h4-font: calc(var(--body-font-size) * 1.39); /* 25px */
  --h5-font: calc(var(--body-font-size) * 1.11); /* 20px */
  --h6-font: calc(var(--body-font-size) * 1);    /* 18px */
  --mega-font: calc(var(--body-font-size) * 5.2); /* 94px */

  /* Spacing Variables */
  --10-space: 10px;
  --15-space: 15px;
  --20-space: 20px;
  --25-space: 25px;
  --30-space: 30px;
  --40-space: 40px;
  --50-space: 50px;
  --60-space: 60px;
  --80-space: 80px;
  --100-space: 100px;
  --150-space: 150px;

  --reg-space: 50px;
}

/* Large Screens (max-width: 1440px) */
@media (max-width: 1440px) {
  :root {
    --body-font-size: 16.5px;
    --reg-space: 35px;
    --25-space: 20px;
    --50-space: 45px;
    --60-space: 50px;
    --80-space: 70px;
    --100-space: 90px;
    --150-space: 130px;
    --40-space: 35px;
  }
}

/* Tablet (max-width: 1220px) */
@media (max-width: 1220px) {
  :root {
    --body-font-size: 15.5px;
    --30-space: 25px;
    --40-space: 30px;
    --50-space: 40px;
    --60-space: 45px;
    --80-space: 60px;
    --100-space: 80px;
    --150-space: 110px;
  }
}

/* Smaller Tablets (max-width: 1023px) */
@media (max-width: 1023px) {
  :root {
    --body-font-size: 15px;
    --reg-space: 30px;
    --10-space: 8px;
    --15-space: 10px;
    --20-space: 15px;
    --25-space: 20px;
    --30-space: 25px;
    --40-space: 30px;
    --50-space: 35px;
    --60-space: 40px;
    --80-space: 50px;
    --100-space: 70px;
    --150-space: 90px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    --body-font-size: 14px;
    --sb-font: 13px;
	  
  --lb-font: calc(var(--body-font-size) * 1.1);
  --xlb-font: calc(var(--body-font-size) * 1.22);
    --h1-font: calc(var(--body-font-size) * 2.7);
    --h2-font: calc(var(--body-font-size) * 1.7);
    --h3-font: calc(var(--body-font-size) * 1.4);
    --h4-font: calc(var(--body-font-size) * 1.2);
    --h5-font: calc(var(--body-font-size) * 1);
    --h6-font: calc(var(--body-font-size) * 0.94);
    --mega-font: calc(var(--body-font-size) * 4);

    --reg-space: 25px;
    --10-space: 6px;
    --15-space: 8px;
    --20-space: 10px;
    --25-space: 15px;
    --30-space: 20px;
    --40-space: 25px;
    --50-space: 30px;
    --60-space: 35px;
    --80-space: 45px;
    --100-space: 55px;
    --150-space: 70px;
  }
}

/* Mobile Portrait (max-width: 478px) */
@media (max-width: 478px) {
  :root {
    --body-font-size: 14px;
    --sb-font: 13px;
  --lb-font: calc(var(--body-font-size) * 1.0.5);
  --xlb-font: calc(var(--body-font-size) * 1.1);
    --h1-font: calc(var(--body-font-size) * 2.5);
    --h2-font: calc(var(--body-font-size) * 1.5);
    --h3-font: calc(var(--body-font-size) * 1.2);
    --h4-font: calc(var(--body-font-size) * 1.1);
    --h5-font: calc(var(--body-font-size) * 1);
    --h6-font: var(--body-font-size);
    --mega-font: calc(var(--body-font-size) * 3);

    --reg-space: 20px;
    --10-space: 5px;
    --15-space: 6px;
    --20-space: 8px;
    --25-space: 10px;
    --30-space: 15px;
    --40-space: 20px;
    --50-space: 25px;
    --60-space: 30px;
    --80-space: 35px;
    --100-space: 40px;
    --150-space: 50px;
  }
}


.brx-draggable.seo-popup, .brx-draggable.seo-popup-box {display:none;}
.seo-popup.is-active-element, .seo-popup-box.is-active-element {display:flex;}