:root{
	
	--color-base-system:rgb(33, 34, 36);
	--color-black:rgb(0, 0, 0);
	--color-white:rgb(255, 255, 255);

	--color-base-black: rgb(27, 27, 27);
	--color-base-white: rgb(255, 255, 255);

	--color-html-black: var(--color-base-black);
  	--color-html-white: var(--color-base-white);

  	--color-neutral-50: rgb(250, 250, 250);
  	--color-neutral-50-fg: var(--base-black);

  	--color-neutral-100: rgb(244, 244, 245);
  	--color-neutral-100-fg: var(--base-black);

  	--color-neutral-200: rgb(227, 227, 232);
  	--color-neutral-200-fg: var(--base-black);

  	--color-neutral-300: rgb(212, 212, 216);
  	--color-neutral-300-fg: var(--base-black);

  	--color-neutral-400: rgb(161, 161, 170);
  	--color-neutral-400-fg: var(--base-black);

  	--color-neutral-500: rgb(113, 113, 122);
  	--color-neutral-500-fg: var(--base-white);

  	--color-neutral-600: rgb(82, 82, 91);
  	--color-neutral-600-fg: var(--base-white);

  	--color-neutral-700: rgb(63, 63, 70);
  	--color-neutral-700-fg: var(--base-white);

  	--color-neutral-800: rgb(39, 39, 42);
  	--color-neutral-800-fg: var(--base-white);

  	--color-neutral-900: rgb(24, 24, 27);
  	--color-neutral-900-fg: var(--base-white);

  	--color-success-base:rgb(41, 130, 59);
  	--color-success-light:rgb(235, 242, 235);

  	--color-warning-base:rgb(233, 161, 0);
  	--color-warning-light:rgb(253, 246, 229);

  	--color-error-base:rgb(220, 32, 32);
	--color-error-base2: rgb(172, 13, 13);
  	--color-error-light:rgb(252, 234, 234);

   /* [+] Color schema => colors: Branding */

   --color-branding-0: rgb(19 47 85);
   --color-branding-10: rgb(0, 82, 155);
   --color-branding-10-fg: var(--base-white);
 
   --color-background-menu:rgb(223, 230, 232);
   --color-background-menu-fg:var(--color-branding-10);
 
 
   --color-branding-50: rgb(0, 82, 155);
   --color-branding-50-fg: var(--base-black);
 
   --color-branding-100: rgb(70, 158, 242);
   --color-branding-100-fg: var(--base-black);
 
   --color-branding-200: rgb(75, 145, 219);
   --color-branding-200-fg: var(--base-black);
 
   --color-branding-300: rgb(70, 149, 242);
   --color-branding-300-fg:var(--base-black);
 
   --color-branding-400: rgb(70, 149, 242);
   --color-branding-400-fg: var(--base-black);
 
   --color-branding-500: rgb(16, 115, 229);
   --color-branding-500-fg: var(--base-white);
 
   --color-branding-600: rgb(67, 139, 232);
   --color-branding-600-fg: var(--base-white);
 
   --color-branding-700: rgb(59, 130, 245);
   --color-branding-700-fg: var(--base-white);
 
   --color-branding-800: rgb(61, 140, 255);
   --color-branding-800-fg: var(--base-white);
 
   --color-branding-900: rgb(61, 150, 255);
   --color-branding-900-fg: var(--base-white);
 
   --color-branding-red: rgb(207, 64, 12);
   --color-branding-red-80: rgba(207, 64, 12, 0.26);
   --color-branding-red-fg: var(--base-white);
 
   --color-menu-item: rgb(223, 230, 232);
   --color-menu-interno-bg: rgb(223, 230, 232);

   --color-blue1: #132E55;
   --color-blue1-10: #132F55;
   --color-blue2: #98B1D4;
   --color-blue3: #C7DEFF;
   --color-blue4: #476794;
   --color-blue5: #002050;
   --color-blue6: #3A5A87;
   --color-blue7: #D1E4FF;
   --color-blue8: #3A5A87;
   --color-blue8-10: #3a5a877e;
   --color-blue9: #13243B;

   --color-green: #12b412;
   --color-green2:#1d801d;
   
   /* [-] Color schema => colors: Branding */

    
  /* [+] Html defaults*/

	/*(+) colors*/

		
		--html-dafault-text-color: var(--color-base-black);
		--html-dafault-bg-color: var(--color-webapp-white);
		
  	/*(-) colors*/

	/*(+) TypeFaces*/

		--html-default-font-family: 'Roboto', sans-serif;
		--html-default-fontsize-min: 14px;
		--html-default-font-size-max: 18px;
		--html-default-fontsize: clamp(var(--html-default-fontsize-min), 5vw, var(--html-default-font-size-max));
		 --html-default-font-line-height: 150%; /* calc(var(--html-default-fontsize)*1.8); */

		--html-default-font-size-h1: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h1: calc(var(--webapp-font-size)*1.5);

		--html-default-font-size-h2: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h2: calc(var(--webapp-font-size)*1.5);

		--html-default-font-size-h3: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h3: calc(var(--webapp-font-size)*1.5);

		--html-default-font-size-h4: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h4: calc(var(--webapp-font-size)*1.5);

		--html-default-font-size-h5: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h5: calc(var(--webapp-font-size)*1.5);

		--html-default-font-size-h6: clamp(16px, 3vw, 32px);
		--html-default-font-line-height-h6: calc(var(--webapp-font-size)*1.5);

		--fs-content: 26px;
		--fs-btn: 17px;
	
	/*(-) TypeFaces*/

	/*(+) sizing, margins and paddings*/

		/* +> HMTL/viewPort*/
			--html-default-viewport-min-width: 350px;
			--html-defautl-viewport-max-width: 1295px;
		/* -> HMTL/viewPort*/

			--html-default-margin: 10px;
			--html-default-padding: 10px;
			--html-default-border-radius: 12px;
			
			--html-default-element-height:100vh;

		/* +>images*/
			--image-default-width:100%;
			--image-default-height:100%;
		/* ->images*/

	/*(-) sizing, margins and paddings*/

	/*(+)  visual personalization */
	--html-default-aparence: none;
	--html-default-transition-speed: 200ms;
  
	--html-default-focus-color:rgb(255, 181, 73);
	--html-default-focus-outline:rgb(255, 181, 73);
	--html-default-elements-shadow:  rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	/*(-)  visual personalization */

	
  


	/* [-] Html defaults*/
	
	/* [+] HTML > Custons */

	--max-viewport-width: var(--html-defautl-viewport-max-width);
	--section-padding: 1.5em;
	--section-dark-bg-color:rgb(52, 73, 94);
	--transition-default-delay: .5s;

	/* [-] HTML > Custons*/


	
}

* {

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: var(--transition-speed);
	/*color: var(--html-dafault-text-color);*/
	
	}
	
	html{
		box-sizing: border-box;
		font: 400 1em/1.4 var(--html-default-fontsize);
		font-size: var( --html-default-fontsize);
		text-rendering: optimizeLegibility;
		/* width: 100%; */
		background: var(--color-base-system);
	}
	html,body{
		width: 100%;
		background: var(--color-base-white);
	}
	body{
		opacity: 0;
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 20px;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		-webkit-font-smoothing: antialiased;
	}
	
	.section{
		width: 100%;
	}
	.section-container{
		max-width:var(--max-viewport-width);
	}
	
	h1{
		font-size: calc(var(--html-default-fontsize)*2.40);
		font-weight: 700;
		padding:initial;
		margin:initial;
	}
	h2{
		
	font-size: 40px;
		font-weight: 400;
		padding: initial;
		margin:20px 0 20px 0;
	}

	h3{
		font-size: calc(var(--html-default-fontsize)*1.4);
		font-weight: 400;
		padding: initial;
		margin:20px 0 20px 0;
	}

	p{
		font-size: var(--html-default-fontsize);
		line-height: var(--html-default-font-line-height);
	}
	
	a{
		text-decoration: none;
	}
	/*
	i{
		font-size: 60px;
	}
	*/