/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2022/2023 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | imail@machtWeb.de ----------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													  6.00/00 - 16-09-22
/* layout	-> startpage														  */
/* file 	-> design/design.css												  */
/* colors	-> http://www.color-hex.com											  */
/* ------------------------------------------------------------------------------ */
/* -------------------------------------------------------------- 6.00/00 - 16-09-22
/* ROOT																			  */
/* ------------------------------------------------------------------------------ */
@charset "UTF-8";
/* link		-> https://fonts.google.com/ */
/*			-> https://google-webfonts-helper.herokuapp.com/fonts */
/* files	-> design/fonts/... */
/* DEFAUL FONT */
@font-face {
	font-family:'Montserrat';
	src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype'),
		url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'),
		url('fonts/Montserrat-Light.ttf') format('truetype');
	font-display:swap;
	}
/* FALL BACK FONT */
@font-face {
	font-family:'OpenSans';
	src:url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'),
		url('fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'),
		url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	font-display:swap;
	}
/* ------------------------------------------------------------------------------ */
/* COLORS - CUSTOMER */
:root {
	/* FONTS */
	--font-4all:	'Montserrat';
	--font-4fallb: 	'OpenSans';
	--font-weight:	400;

/* box-shadow */
/* link	-> https://getcssscan.com/css-box-shadow-examples */
--box-shw-b2top:rgb(0,0,0,0.19) 0 10px 20px,rgb(0,0,0,0.23) 0 6px 6px;

/* progress-bar */
--prog-bar-bgr: rgb(2, 136, 209,.9);
--prog-bar-hgt: .4rem;				/* height def .4rem */
--scroll-progress:0%;				/* for progress-bar -> LIGHT 1 -> see JS also */

	--color-logo:#ee741d;
	/* background body */
	--bgr-body: #fff;

	}
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 16-09-22 */
::selection				{color:white;background:var(--color-logo,#ee741d);} 
::-moz-selection		{color:white;background:var(--color-logo,#ee741d);}
/* fix those ugly scrollbars in windows */
*::-webkit-scrollbar 		{width:0;}
*::-webkit-scrollbar-thumb 	{background:red;border-radius:8px;}
/* ------------------------------------------------------------------------------ */
/* RESETS */
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after	{content:'';display:table;}
.clearfix:after						{clear:both;}
*, *:before, *:after 				{box-sizing:inherit;}
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 16-09-22 */

html {
	/*box-sizing:border-box;*/
	/*font-size: 100%;*/
	block-size:100%;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
	text-rendering:optimizeSpeed;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	}

/* link		-> https://codepen.io/jenning/pen/mdRNjZq */
/* info		-> responsive typography */
/* update	-> 06-05-2021 */
body {
	display:grid;grid-template-columns:1fr 0; /* important for back2top */
	margin:0;
	line-height:1.4;	
	font-family:var(--font-4all),var(--font-4fallb),'Segoe UI',Roboto,Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
	font-weight:var(--font-weight);
	/*font-size: 1.2rem;*/
	/*background:var(--bgr-body,#fff);*/
	}

/* ------------------------------------------------------------------------------ */
/* CONTENT-WRAPPER */
.content-wrapper {
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:95vw;
	margin:1rem;
	padding:1rem;
	border: 0px dashed red;
	z-index:0;
    counter-reset:Element; /* reset must be here */
	}

hr {
	margin: .4rem 0;
	border: solid #ee741d;
	border-width: 0 0 1px 0;
    }
	
.centered  {display:flex;justify-content:center;align-items:center;flex-flow:wrap;}
		
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 16-09-22 */
/* PROGRESS-BAR LIGHT 1 */
/* link		-> https://codepen.io/maddesigns/pen/VMQWGy */
/* update	-> 13-05-2020 */
/* info		-> jQuery must NOT be activated BUT standard.js */
:root {--scroll-progress:0%;}
.progress-bar {
	position:fixed;
	top:0;
	right:0;
	left:0;
	height:var(--prog-bar-hgt);
	background-image:linear-gradient(to right, var(--prog-bar-bgr) var(--scroll-progress), rgb(255,255,255,0) 0);
	box-shadow:var(--box-shw-b2top);
	z-index:9999;
	}
.scroll-section {height: 300px;}
	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */