/* FONTS
---------------------------------------------------------------------------*/

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



/* VARIABLES
---------------------------------------------------------------------------*/

:root {
	--global-base-color: #000000;
	--global-secondary-color: #FFFFFF;
	--global-highlight-color: #FFA800;

	--global-kb-font-size-sm: clamp(0.813rem, 0.087vw + 0.771rem, 0.875rem);
	--global-kb-font-size-md: clamp(1rem, 0.174vw + 0.917rem, 1.125rem);
    --global-kb-font-size-lg: clamp(1.063rem, 0.434vw + 0.854rem, 1.375rem);
    --global-kb-font-size-xl: clamp(1.25rem, 0.868vw + 0.833rem, 1.875rem);
    --global-kb-font-size-xxl: clamp(1.875rem, 1.736vw + 1.042rem, 3.125rem);
    --global-kb-font-size-xxxl: clamp(2.5rem, 3.472vw + 0.833rem, 5rem);

	--wp--preset--font-size--small: var(--wp--preset--font-size--small);
	--wp--preset--font-size--medium: var(--global-kb-font-size-md);
	--wp--preset--font-size--large: var(--global-kb-font-size-lg);
	--wp--preset--font-size--x-large: var(--global-kb-font-size-xl);
}




/* TAG STYLES 
---------------------------------------------------------------------------*/

*	{ margin: 0; padding: 0; }

html	{ position: relative; }

body	{ position: relative; font-size: 18px; font-size: clamp(16px, 16px + 0.024999999999999915vw, 18px); letter-spacing: 1.3px; color: var(--global-base-color); background-color: #ffffff; font-weight: normal; font-family: 'Helvetica Neue', 'Arial', sans-serif; line-height: 140%; }

header { position: absolute; top: 30px; left: 30px;  }

footer { position: relative; bottom: 0; left: 0; width: calc(100% - 60px); color: var(--global-secondary-color); background-color: #2b2b2b;  padding: 30px 30px 5px; text-align: center;  }

p { margin-bottom: 20px;  }

img { display: block;  }


/* HEADER STYLES 
---------------------------------------------------------------------------*/

#logo { text-transform: lowercase; color: var(--global-secondary-color); font-weight: bold; font-size: clamp(1.875rem, 1.736vw + 1.042rem, 3.125rem); }
#logo span { color: var(--global-highlight-color); }



/* CONTENT STYLES 
---------------------------------------------------------------------------*/

.team-list			{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.team-member		{ width: 20%; flex: 1; }
.team-member img	{ max-width: 100%; height: auto; }

.orange-band { background-color: var(--global-highlight-color); padding: 50px; display: flex; justify-content: center; align-items: center;  }
.orange-band img { width: 80%; max-width: 400px; height: auto; }

/* FOOTER STYLES 
---------------------------------------------------------------------------*/

footer a { text-decoration: none; color: var(--global-secondary-color); }
footer a:hover { text-decoration: underline;  }


/* RESPONSIVE STYLES 
---------------------------------------------------------------------------*/


@media screen and (max-width: 1100px) {
    .team-member	{ min-width: 33%; }
	.primary	{ min-width: 50%; }
}	

@media screen and (max-width: 850px) {
    .team-member	{ min-width: 50%; }
	.primary:first-of-type	{ min-width: 100%; }
}	

@media screen and (max-width: 550px) {
    .team-member	{ min-width: 100%; }
}