/* GLOBAL VARS - DEFAULTS */
:root{
	/*
    --site-pattern: %s;
    --color-primary: %s;
    --color-secondary: %s;
    --color-tertiary: %s;
    --color-highlight: %s;
    */
	--site-map: url("/wp-content/themes/dot/assets/img/global/dot-pattern.jpg");

	--color-primary-bg: var(--color-primary);
	--color-secondary-bg: var(--color-secondary);
	--color-tertiary-bg: var(--color-tertiary);	
	
	--background-color-primary: #2d2d2d;
	--background-color-secondary: #ebebeb;
	--background-color-tertiary: #e6e6e6;
	

	--color-text-primary: black;
	--color-text-secondary: white;
	
	--color-link-primary: #3e94c1;
	--color-link-secondary: #4ec4cd;
	
	
	--font-family-primary: "Montserrat", sans-serif;
	--font-family-secondary: "Montserrat", sans-serif;
	
	
	--font-size-large: 48px;
	--font-size-medium: 38px;
	--font-size-small: 21px;
	--font-size-xsmall: 18px;
	
	
	/* Other global colours */
	--color-blue1: #0777AD;
	--color-blue2: #4ec4cd;	
	
	--color-green1: #55AF47;
	--color-green2: #A4CE4E;
	
	--color-orange1: #ffc20e;
	--color-orange2: #e78e00;
	
	--color-red1: #f1443e;
	--color-red2: #a73658;	
	/* Other global colours */
		
}

/********  Colors  *******/
.color-primary {color: var(--color-primary) }
.color-secondary {color: var(--color-secondary) }
.color-tertiary {color: var(--color-tertiary) }
.color-highlight {color: var(--color-highlight) }

.color-primary-bg {background-color: var(--color-primary) }
.color-secondary-bg {background-color: var(--color-secondary) }
.color-tertiary-bg {background-color: var(--color-tertiary) }
.color-highlight-bg {background-color: var(--color-highlight) }


.alternate-colors .col:nth-child(6) div,
.alternate-colors .col:nth-child(5) p span,
.alternate-colors .col:nth-child(4) p span,
.alternate-colors .col:nth-child(3) div,
.alternate-colors .col:nth-child(2) div,
.alternate-colors .col:first-child p span {
    background: var(--color-primary);
}

.alternate-colors .col:nth-child(6) p span,
.alternate-colors .col:nth-child(5) div,
.alternate-colors .col:nth-child(4) div,
.alternate-colors .col:nth-child(3) p span,
.alternate-colors .col:nth-child(2) p span,
.alternate-colors .col:first-child div {
    background: var(--color-tertiary);
}


	
.background-color-primary { background-color: var(--background-color-primary) }
.background-color-secondary { background-color: var(--background-color-secondary) }
.background-color-tertiary { background-color: var(--background-color-tertiary) }


/* Global colours */
.color-blue1 { color: var(--color-blue1) }
.color-blue2 { color: var(--color-blue2) }

.color-blue1-bg {background-color: var(--color-blue1) }
.color-blue2-bg {background-color: var(--color-blue2) }

.color-green1-bg {background-color: var(--color-green1) }
.color-green2-bg {background-color: var(--color-green2) }

.color-orange1-bg {background-color: var(--color-orange1) }
.color-orange2-bg {background-color: var(--color-orange2) }

.color-red1-bg { background-color: var(--color-red1) }
.color-red2-bg { background-color: var(--color-red2) }
/* Global colours */

/********  Colors  *******/


.site-pattern-after:after,
.site-pattern {
    background: var(--site-pattern);
}
.site-pattern {
	background-color: var(--color-tertiary);
}

.site-map {
	background: var(--site-map);
	background-repeat: no-repeat;
    background-size: cover;
}

/* TYPOGRAPHY */

body{
	font-family: var(--font-family-primary);
}

h1, h2, h3, h4, h5, p {
	color: var(--color-text-primary);
}

h1 {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-large);
}

h2 {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-medium);
}

h3 {
	font-family: var(--font-family-secondary);
	font-size: var(--font-size-small);
}

p {
	font-family: var(--font-family-secondary);
	font-size: var(--font-size-xsmall);
	margin-bottom: 1.5rem;
	color: #2d2d2d
}
p:last-child {
    margin-bottom: 0;
}

a {
	color: var(--color-link-primary);
	font-family: var(--font-family-secondary);
	font-size: var(--font-size-xsmall);
	transition: color .3s ease;
}

a:hover {
	color: var(--color-link-secondary);
}


.btn {
	font-family: var(--font-family-secondary);
}


li {
	font-family: var(--font-family-secondary);
	font-size: var(--font-size-xsmall);
}

button,
label,
input {
	font-family: var(--font-family-primary);
}