/* -------------------------------------------- */
/* VB Tech: Website */
/* Version: 1 */
/* -------------------------------------------- */
/* Created by twotribes.de */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Variable initialization
Font initialization
Element/Property resets
Development markers */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !Fonts */
/* !-------------------------------------------- */

@font-face {
    font-family: "Raleway";
    src: url("./fonts/raleway-light-webfont.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("./fonts/raleway-medium-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("./fonts/raleway-semibold-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("./fonts/raleway-bold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("./fonts/raleway-black-webfont.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}


/* !-------------------------------------------- */
/* !Central property dictionary */
/* !-------------------------------------------- */
	
:root {
    /* !--- COLOR: definitions */
	/* Base corporate colors */
    --vbt-thunder-ultradark: #555A4E;
    --vbt-thunder-dark: #797470;
    --vbt-thunder-dark-alpha50: rgba(121, 116, 112, 0.5);
    --vbt-thunder-medium: #8B8B83;
    --vbt-thunder-light: #CEC9C1;
    --vbt-thunder-light-alpha50: rgba(206, 201, 193, 0.5);
    --vbt-thunder-ultralight: #D5D6D1;
    --vbt-thunder-ultralight-40: #eeefed;
    
    --vbt-ball-ultradark: #73150F;
    --vbt-ball-dark: #A21B18;
    --vbt-ball-medium: #DE1B1A;
    --vbt-ball-light: #E9531C;
    
    /* !--- COLOR: semantic assignments */
    /* Background colors */
    --backcolor-page: var(--vbt-thunder-ultralight-40);
    --backcolor-page-dark: var(--vbt-thunder-ultralight);
    
    --backcolor-caption: var(--vbt-thunder-ultralight);
    
    --backcolor-underlay: var(--vbt-thunder-dark-alpha50);


    /* Line colors */
    --linecolor-standard: #fff;
    
    /* Text colors */
    --textcolor-standard: #000;
    --textcolor-accent: var(--vbt-thunder-dark);
    
    --textcolor-head: var(--vbt-ball-light);
    --textcolor-head-master: var(--vbt-ball-dark);
    --textcolor-head-sub: var(--vbt-thunder-dark);
    
    --textcolor-link: var(--vbt-thunder-ultradark);
    --textcolor-link-hover: #000;


    /* !--- BUTTONS & LINKS */
    /* Default :focus-visible settings */
    --focus-outlinecolor: var(--vbt-ball-medium);
    --focus-outline-standard: 1.5px dashed var(--focus-outlinecolor);
    --focus-outline-inverse: 1.5px dashed #fff;

    /* Actions */
    --button-menu-text: var(--vbt-thunder-dark);
    --button-menu-text-hover: #fff;
    --button-menu-active-text: #fff;

    --button-menu-back: var(--vbt-thunder-ultralight);
    --button-menu-back-hover: var(--vbt-thunder-dark);
    --button-menu-active-back: var(--vbt-thunder-dark);
    
    --button-link-text: var(--vbt-thunder-ultradark);
    --button-link-text-hover: #000;
    
    --button-primary-text: var(--vbt-thunder-ultradark);
    --button-primary-text-hover: #fff;
    
    --button-primary-back: var(--vbt-thunder-ultralight);
    --button-primary-back-hover: var(--vbt-thunder-dark);

    
    /* !--- CONTAINERS */
    --shadow-overlay: 0px 4.8px 2.2px rgba(0, 0, 0, 0.028),
    0px 9.7px 5.3px rgba(0, 0, 0, 0.04),
    0px 15px 10px rgba(0, 0, 0, 0.05),
    0px 21.8px 17.9px rgba(0, 0, 0, 0.06),
    0px 33.9px 33.4px rgba(0, 0, 0, 0.072),
    0px 73px 80px rgba(0, 0, 0, 0.1);
    
    --shadow-flyout: 0px 4.8px 2.2px rgba(0, 0, 0, 0.028),
    0px 9.7px 5.3px rgba(0, 0, 0, 0.04),
    0px 15px 10px rgba(0, 0, 0, 0.05),
    0px 21.8px 17.9px rgba(0, 0, 0, 0.06),
    0px 33.9px 33.4px rgba(0, 0, 0, 0.072),
    0px 73px 80px rgba(0, 0, 0, 0.1);

    
    /* !--- TRANSITIONS */
    --transition-universal: all 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --transition-opacity: opacity 0.3s ease, background 0.3s ease;
    --transition-color: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    --transition-color-outline: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, outline 0.3s ease;
    --transition-color-outline-icon: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, outline 0.3s ease, transform 0.3s ease;


    /* !--- TYPOGRAPHY */
    /* Typography baseline */
    --font-base: "Raleway", "Helvetica", "Arial", sans-serif;
    
    /* Standard typography configurations */
    --textset-s: 400 12px/17px var(--font-base);
    --textset-m: 400 14px/20px var(--font-base);
    --textset-m-plus: 600 18px/22px var(--font-base);
    --textset-l: 500 22px/28px var(--font-base);
    --textset-xl: 600 24px/29px var(--font-base);
    --textset-xxl: 600 26px/37px var(--font-base);

    
    /* !--- PAGE LAYOUT */
    /* Default widths */
    --desktop-gutter: 24px;
    --mobile-gutter: 16px;
    
    --desktop-viewport-margin: 64px;
    
    --width-1col: 40px;
    --width-1col-plus: 64px;
    --width-2col: 104px;
    --width-2col-plus: 128px;
    --width-3col: 168px;
    --width-3col-plus: 192px;
    --width-4col: 232px;
    --width-4col-plus: 256px;
    --width-5col: 296px;
    --width-5col-plus: 320px;
    --width-6col: 360px;
    --width-6col-plus: 384px;
    --width-7col: 424px;
    --width-7col-plus: 448px;
    --width-8col: 488px;
    --width-8col-plus: 512px;
    --width-9col: 552px;
    --width-9col-plus: 576px;
    --width-10col: 616px;
    --width-10col-plus: 640px;
    --width-11col: 680px;
    --width-11col-plus: 704px;
    --width-12col: 744px;
    --width-12col-plus: 768px;
    --width-13col: 808px;
    --width-13col-plus: 832px;
    --width-14col: 872px;
    --width-14col-plus: 896px;
    --width-15col: 936px;
    --width-15col-plus: 960px;
    --width-16col: 1000px;
    --width-16col-plus: 1024px;
    --width-17col: 1064px;
    --width-17col-plus: 1088px;
    --width-18col: 1128px;
    --width-18col-plus: 1152px;
    --width-19col: 1192px;
    
    /* Compiled widths */
    --site-width: 1192px;
    --site-width-bleed: calc(var(--site-width) + 2 * var(--desktop-viewport-margin)); /* = 1320px / 1st breakpoint:  */

}


/* !--- Smaller viewports */
@media only screen and (max-width: 1320px) {
    :root {
        --site-width: 100%;
        --site-width-bleed: 100%;
    }
}


/* !-------------------------------------------- */
/* !Reset-styles */
/* !-------------------------------------------- */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	min-height: 100%;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
	html {
		scroll-behavior: auto;
	}
}

body, h1, h2, h3, h4, h5, h6, p {
	font-weight: 400;
	margin: 0;
	padding: 0;
}

main {
	display: block; /* bugfix for IE11 and older (their default is display: inline) */
}

ul, ol, li, dl, dt, dd {
	list-style: none;
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
	min-width: 0; /* overrides browser default to make it as wide as its widest children */
}

legend {
	color: inherit;
	padding: 0;
	margin: 0;
}

abbr {
    border: none; /* tame Chrome + Firefox */
    text-decoration: none; /* tame Chrome + Firefox */
}

figure {
	margin: 0;
}

em {
	font-style: normal;
}

mark {
	background: inherit;
	color: inherit;
}

/* :focus initialization */
*:focus:not(:focus-visible) {
    outline: none;
}