@import 'style_reset.css';
@import 'style_index.css';

@import 'style_general.css';
@import 'style_mosaic.css';
@import 'style_navigation.css';

@import 'style_about.css';
@import 'style_director.css';
@import 'style_projects.css';
@import 'style_project.css';
@import 'style_footer.css';

@font-face {
    font-family: 'SuisseIntl-Regular';
    src: url('fonts/SuisseIntl-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
	
}

/* Variables
==================================== */
:root{
	/* Text Setting */
	--font: 'SuisseIntl-Regular', sans-serif;
	--fs: 10px;
	--fsl: calc(var(--fs) * 3);
	--lh: 120%;

	/* Color */
	--grey: #bebebe;
	--bg: #fff;
	--text: #000;
	--overlay: rgba(255,255,255, 0.9);

	/* Margins */
	--gap: 2px;
	--ms: 10px;
	--ml: 4rem;

	/* Columns */
	--cols-desktop: 12;
	--col: calc(( 100vw + (var(--ms) * (var(--cols-desktop) - 1)) ) / var(--cols-desktop));

	/* Transitions */
	--speed: 100ms;
	--speedx8: 800ms;
	--ease: cubic-bezier(0.650, 0.000, 0.350, 1.000);
}

@media only screen and (max-width:834px){
	
	:root{
		--cols-desktop: 2;
	}
	
}