/* DESIGN ADJUSTMENTS: the classes typed into a block's Design adjustments, Title class or Column class boxes.
   The full list with explanations is under Appearance > Design classes. Loaded on every page. */

/* WIDTHS */
.medium-container { max-width: 1400px; margin-left: auto; margin-right: auto;}
.regular-container { max-width: 1000px; margin-left: auto; margin-right: auto;}
.narrow-container { max-width: 650px; margin-left: auto; margin-right: auto; }

/* COLOURS */
.main { background-color: var(--main); }
.green { background-color: var(--green); }
.grey { background-color: var(--grey);;}
.accent { background-color: var(--accent); }
.light { background-color: var(--light); }
.white { background-color: var(--white); }
.dark-green { background-color: var(--dark-green); color: var(--white);}
.accent-light { background-color: var(--accent-light); }
.beige { background-color: var(--beige); }

/* SPACING SCALE
   Name = size + p (padding) or m (margin) + t (top), b (bottom) or tb (top and bottom).
   Size        | Padding              | Margin
   very small  | vspt vspb vsptb 10px | vsmt vsmb vsmtb 10px
   small       | spt  spb  sptb  20px | smt  smb  smtb  20px
   regular     | pt   pb   ptb   40px | mt   mb   mtb   60px
   medium      | mpt  mpb  mptb 100px | mmt  mmb  mmtb 100px
   large       | lpt  lpb  lptb 180px | lmt  lmb  lmtb 180px */

/* very small: 10px */
.vspt { padding-top: 10px;}
.vspb { padding-bottom: 10px;}
.vsptb { padding-top: 10px; padding-bottom: 10px;}
.vsmt { margin-top: 10px;}
.vsmb { margin-bottom: 10px;}
.vsmtb { margin-top: 10px; margin-bottom: 10px;}

/* small: 20px */
.spt {padding-top: 20px;}
.spb {padding-bottom: 20px;}
.sptb { padding-top: 20px; padding-bottom: 20px;}
.smt { margin-top: 20px;}
.smb { margin-bottom: 20px;}
.smtb { margin-top: 20px; margin-bottom: 20px;}

/* regular: padding 40px, margin 60px */
.pt { padding-top: 40px;}
.pb { padding-bottom: 40px;}
.ptb { padding-top: 40px; padding-bottom: 40px;}
.mt { margin-top: 60px;}
.mb { margin-bottom: 60px;}
.mtb { margin-top: 60px; margin-bottom: 60px;}

/* medium: 100px */
.mpt { padding-top: 100px;}
.mpb { padding-bottom: 100px;}
.mptb { padding-top: 100px; padding-bottom: 100px;}
.mmt { margin-top: 100px;}
.mmb { margin-bottom: 100px;}
.mmtb { margin-top: 100px; margin-bottom: 100px;}

/* large: 180px */
.lpt { padding-top: 180px; }
.lpb { padding-bottom: 180px;}
.lptb { padding-top: 180px; padding-bottom: 180px;}
.lmt { margin-top: 180px; }
.lmb { margin-bottom: 180px;}
.lmtb { margin-top: 180px; margin-bottom: 180px;}

/* all sides */
.p0 {padding: 0px;}
.p20 {padding: 20px;}
.p40 {padding: 40px;}
.p60 {padding: 60px;}
.m0 {margin:0px;}
.m10 {margin: 10px;}
.center { text-align: center;}
.plr { padding-left: 40px; padding-right: 40px;}

/* COLUMN GAPS */
.wide-gap > div { grid-gap: 80px; }

/* GRID LAYOUT */
.fr-2-1 { grid-template-columns: 2fr 1fr;}
.fr-1-2 { grid-template-columns: 1fr 2fr; }
.fr-1-1 { grid-template-columns: 1fr 1fr;}
.fr-3-1 { grid-template-columns: 3fr 1fr;}
.fr-1-3 { grid-template-columns: 1fr 3fr; }
.fr-3-2 { grid-template-columns: 3fr 2fr;}
.fr-2-3 { grid-template-columns: 2fr 3fr; }
.fr-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
.fr-1-2-2 { grid-template-columns: 1fr 2fr 2fr; }
.fr-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
.fr-2-1-2 { grid-template-columns: 2fr 1fr 2fr; }
.fr-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.fr-1-2-1-1 { grid-template-columns: 1fr 2fr 1fr 1fr; }
.fr-1-4 { grid-template-columns: 1fr 4fr; }

/* DECORATIONS */
.accent-line { border-top: 5px var(--accent) solid; }
.transparent img { mix-blend-mode: multiply;}
.block-column .rotate-30 img { transform: rotate(-30deg); top: -30px; max-width: 350px;}
.block-column .top img { object-position: top; }
.block-column .mh500.contain img { object-fit: contain; }

/* TEXT */
.sub-title, .block-column .sub-title p:first-of-type {margin-bottom: 20px; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: bold; }
.sub-text { font-size: 16px; letter-spacing: 0;}
.medium-text p { font-size: 22px; }
.medium-text a.button { font-size:initial; }

@media screen and (max-width: 1000px) {
	.plr { padding-left: 20px; padding-right: 20px;}
	.fr-1-1, .fr-2-1, .fr-1-2, .fr-1-1-1, .fr-1-2-2, .fr-1-2-1-1, .fr-1-4 { grid-template-columns: 1fr; }
	.gap0 .grid { grid-gap: 0; }
}