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

body {
		margin: 0px;
		background-color: #fafafa;
	}

	h1 {
		font-family: "Lucida Handwriting", "comic sans ms", Verdana, "sans-serif";
		font-style: italic;
		font-weight: normal;
		color: #3d3d3d;
		font-size: xx-large;
		float: left;
		z-index: 4;
		text-shadow: 0 0 9px #fafafa;
		width: 100%;
		margin-top: 12px;
		margin-bottom: 15px;
		text-align: center;
	}

	h2 {
		font-family: "comic sans ms", Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 1.14em;
		clear: both;
		float: none;
		text-align: left;
		padding: 0px;
		line-height: 200%;
		z-index: 4;
		/*text-shadow: 0 0 9px #fafafa;*/
		width: 100%;
		max-width: 702px;
		margin-top: 12px;
		margin-bottom: 36px;
	}

	p {
		font-family: Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 0.9em;
		float: none;
		text-align: justify;
		padding: 0px;
		line-height: 150%;
		z-index: 4;
		/*text-shadow: 0 0 9px #fafafa;*/
		width: 100%;
		margin-top: 18px;
	}

	ol li {
		font-family: Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 0.9em;
		padding: 0px;
		line-height: 150%;
	}

	ul li {
		font-family: Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 0.9em;
		padding: 0px;
		line-height: 150%;
	}

	.h2-values-first-letter {
		font-size: x-large; 
		text-decoration: underline; 
		margin-top: 0px;
		line-height: 60%;
	}

	.h2-span-values {
		font-family: Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 0.9em;
		line-height: 150%;
	}

	.article-block-top-h2 {
		margin-bottom: 0px; 
		padding-bottom: 0px;
	}

	.contact-inputs placeholder {
		font-family: "comic sans ms", Verdana, "sans-serif";
		color: #3d3d3d;
		font-size: 15px;
	}

	.image-container .image-small {
		max-width: 600px;
		overflow: hidden;
		cursor: pointer;
	}

	.image-container .image-small img {
		width: 100%;
		object-fit: cover;
		transition: .2s linear;
	}

	.image-container .image-small:hover img {
		transform: scale(1.05);
	}

	.popup-image {
		position: fixed;
		top: 0; left: 0;
		background: rgba(0,0,0,.9);
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: none;
	}

	.popup-image span {
		position: absolute;
		top: 0; right: 10px;
		font-size: 60px;
		font-weight: 600;
		color: #fff;
		cursor: pointer;
		z-index: 9999;
	}

	.popup-image img {
		
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		object-fit: cover;
		margin-top: 18px;
		background: #fafafa;
	}

	.green-h2 {
		color: #000000;
		font-weight: 600;
		text-decoration: none;
}


/* Start of mobile CSS */
@media (max-width: 600px) {




	:root {
		--bar-width: 48px;
		--bar-height: 6px;
		--hamburger-gap: 6px;
		--foreground: #f7941d;
		--foreground-before: #25aae1;
		--foreground-after: #8cc63f;
		--bg-pagina: #fafafa;
		--background: white;
		--logo-image-height: 93px;
		--hamburger-height: calc(var(--bar-height)*3 + var(--hamburger-gap)*2);
		--hamburger-margin-top: calc((var(--logo-image-height) - var(--hamburger-height))/2);
		--hamburger-margin: 21px;
		--animation-timing: 200ms ease-in-out;

		--block-divider-scaler: 0.2;
		--article-img-thumb: 69px;
	}


	a {
		text-decoration: none;
		color: var(--foreground-before);
	}

	a:visited {
		text-decoration: none;
		color: var(--foreground-before);
	}



	.hamburger-menu {
		--x-width: calc( var(--hamburger-height) * 1.41421356237);

		display: flex;
		flex-direction: column;
		gap: var(--hamburger-gap);
		width: 60px; /*max-content;*/
		position: absolute;
		top: var(--hamburger-margin-top);
		left: var(--hamburger-margin);
		z-index: 2px;
		cursor: pointer;

	}

	.hamburger-menu::before,
	.hamburger-menu::after,
	.hamburger-menu input {
		content: "";
		width: var(--bar-width);
		height: var(--bar-height);
		/*background-color: var(--foreground);
		background-color: white;*/
		border-radius: 9999px;
		transform-origin: left center;
		transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing);  
	}

	.hamburger-menu::before {
		background-color: var(--foreground-before);
	}
	.hamburger-menu::after {
		background-color: var(--foreground-after);
	}
	.hamburger-menu input {
		background-color: var(--foreground);
	}

	.hamburger-menu input {
		appearance: none;
		padding: 0;
		margin: 0;
		outline: none;
		pointer-events: none;
	}

	.hamburger-menu:has(input:checked)::before {
		rotate: 45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / -2);
	}

	.hamburger-menu:has(input:checked)::after {
		rotate: -45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / 2);
	}

	.hamburger-menu input:checked {
		opacity: 0;
		width: 0px;
	}

	.sidebar {
		transition: translate var(--animation-timing);
		translate: -100%;
		margin-top: -15px; /*calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);*/
		padding: 0.5rem 3rem;
		/*margin-left: 0.5rem;*/
		background-color: var(--bg-pagina);
		color: black; /*var(--foreground-before);*/
		/*color: var(--foreground-before);*/

		max-width: 100%;
		height: 0;
		/*min-height: 100vh;*/

		font-family: "Lucida Handwriting", "comic sans ms", "Trebuchet MS", Verdana, "sans-serif";
		font-style: italic;
		font-size: x-large;
		font-weight: normal;
	}

	.main-links {
		padding-top: 15px;
	}

	.hamburger-menu:has(input:checked) + .sidebar {
		translate: 0;
		min-height: 90vh;
	}

	.logo-image {
		height: var(--logo-image-height);
		margin: 0;
		margin-left: calc((100vw - 54px - 50px)/2);

		/*opacity: 0;
		width: 135px;
		height: 115px;*/
	}

	.rest-content {
		z-index: 0;
		position: relative;
		/*float: left;
		padding-left: 30px;*/
		padding-top: 102px;
		width: 100%;
		min-width: 300px;
		margin-top: 0px;
		/*width: 100%;*/
	}

	.page-banner {
		/*background-image: url("Raw images/City concept/About-us-Lean-Manufacturing.png");*/
		width: 100%;
		min-width: 300px;
		float: left;
	}

	.banner-img {
		width: 100%;
		float: left;
		z-index: 0;
	}

	.navigation-div {
		/*position: absolute;*/
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fafafa;
		margin: 0px;
		padding: 0px;
		width: 100%;
		/*height: 100vh;
		background: #fff;
		box-shadow: 0 12px 24px rgba(0,0,0,.09);
		visibility: hidden;
		opacity: 0;*/
	}

	.block-divider {
		float: left;
		margin-left: 39px;
		margin-right: 39px;
		width: calc(100vw - 78px);
		margin-top: 9px;
		border-top: 1px solid #afafaf;
		/*background-image: url("Images/line-block-divider.png");*/
	}

	.block-divider img {
		rotate: 90deg;
		width: 11px;
		height: 12.6px;
		margin-left: calc((100vw - 33px - 78px)/2);
	}

	.block-divider-last {
		float: left;
		margin-left: 39px;
		margin-right: 39px;
		width: calc(100vw - 78px);
		margin-top: 0px;
		border-bottom: 1px solid #afafaf;
		/*background-image: url("Images/line-block-divider.png");*/
	}

	.block-divider-last img {
		rotate: -90deg;
		width: 11px;
		height: 12.6px;
		margin-left: calc((100vw - 33px - 78px)/2);
	}

	.article-block-top {
		text-align: left;
		padding-left: 15px;
		padding-right: 9px;
		padding-bottom: 0px;
		padding-top: 18px;
		float: left;
	}	
	
	.article-block {
		text-align: left;
		padding-left: 15px;
		padding-right: 9px;
		padding-bottom: 27px;
		padding-top: 0px;
		margin-top: 18px;
		float: left;
	}

	.article-img-thumb {
		float: left;
		width: var(--article-img-thumb);
		margin-top: 15px;
		margin-left: 9px;
		/*visibility: hidden;*/
	}

	.article-img-thumb-h1 {
		font-family: "Lucida Handwriting", "comic sans ms", Verdana, "sans-serif";
		font-style: italic;
		font-weight: normal;
		color: #3d3d3d;
		font-size: xx-large;
		float: left;
		z-index: 4;
		text-shadow: 0 0 9px #fafafa;
		width: calc((100vw - var(--article-img-thumb))/2 + 36px);
		margin-top: 12px;
		margin-bottom: 27px;
		text-align: center;
	}

	.h2-values-first-letter {
		font-size: x-large; 
		text-decoration: underline; 
		margin-top: 0px;
		line-height: 60%;
	}

	.h2-span-values {
		font-family: Verdana, "sans-serif";
		font-style: normal;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 0.9em;
		line-height: 150%;
	}
	
	.contact-form-div h2 {
		margin-bottom: 9px;
	}
	
	.contact-form-div textarea {
		height: 180px;
		padding-top: 15px;
		border-radius: 20px;
	}
	
	.contact-form-div button {
		display: flex;
		align-items: center;
		padding: 9px;
		font-size: 18px;
		font-family: "comic sans ms", Verdana, "sans-serif";
		color: #fff;
		gap: 10px;
		border: 2px solid #b9b9b9;
		border-radius: 45px;
		background: #25aae1;
		cursor: pointer;
		margin-left: 243px;
	}
	
	.contact-form-email {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-left: 0px;
	}
	
	.contact-inputs {
		width: 339px;
		height: 45px;
		/*border: none;
		outline: none;*/
		padding-left: 18px;
		font-weight: 300;
		color: #3d3d3d;
		border-radius: 45px;
		border: 2px solid #b9b9b9;
	}
	
	.contact-inputs:focus {
		border: 2px solid #25aae1;
	}
	
	.contact-inputs::placeholder {
		color: #3d3d3d;
	}
	
	.popup-image img{
		max-width: 90%;
	}

} /*End of CSS for mobile*/



@media (min-width: 601px) {
	:root {
		--container-all-width: 810px;
		--logo-image-height: 120px;
		--foreground-before: #25aae1;
		--navigation-div-width: 180px;
		--main-content-width: 603px; /*calc(var(--container-all-width) - var(--navigation-div-width);*/
		--page-banner-img-width: 396px;
		--article-img-thumb: 99px;
		--article-title-and-img-width: 189px;
		--article-subtitle-and-content-padding-left: 9px;
	}
	
	h1 {
		float: left;
	}
	
	.article-img-thumb {
		float: left;
		width: var(--article-img-thumb);
		margin-top: 15px;
		margin-left: 9px;
	}
	
	.article-img-thumb1 {
		float: left;
		width: 189px;
		margin-top: 15px;
		margin-left: 0px;
	}	
	.article-img-thumb-h1 {
		font-family: "Lucida Handwriting", "comic sans ms", Verdana, "sans-serif";
		font-style: italic;
		font-weight: normal;
		color: #3d3d3d;
		font-size: 1.8em;
		float: left;
		/*z-index: 4;*/
		text-shadow: 0 0 9px #fafafa;
		width: var(--article-img-thumb); /*calc((100vw - var(--article-img-thumb))/2 + 36px);*/
		margin-top: 18px;
		margin-bottom: 27px;
		margin-left: -9px;
		text-align: center;
	}
	
	h2 {
		margin-left: 45px;
	}
	
	a {
		text-decoration: none;
		color: var(--foreground-before);
	}

	a:visited {
		text-decoration: none;
		color: var(--foreground-before);
	}
	
	a:hover {
		text-decoration: underline;
	}
	
	.container-all {
		clear: both;
		float: none;
		width: var(--container-all-width);
		margin-left: auto;
		margin-right: auto;
		/*border-left: 1px solid #afafaf;
		border-right: 1px solid #afafaf;*/
	}
	
	.logo-image {
		height: var(--logo-image-height);
		margin: 0;
		margin-left: 0;
		margin-top: 33px;

		/*opacity: 0;
		width: 135px;
		height: 115px;*/
	}
	
	.sidebar {
		margin: 0px;
		margin-top: 9px; /*calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);*/
		padding: 0rem 0rem 0rem 1.5rem;
		width: var(--navigation-div-width);

		font-family: "Lucida Handwriting", "comic sans ms", "Trebuchet MS", Verdana, "sans-serif";
		font-style: italic;
		font-size: normal;
		font-weight: normal;
		line-height: 180%;
		color: black;
		border-left: 1px solid #afafaf;
	}
	
	.empty-bottom-nav {
		width: var(--navigation-div-width);
		height: 18px;
		margin-top: -6px;
		border-left: 1px solid #afafaf;
		border-right: 1px solid #afafaf;
		border-bottom: 1px solid #afafaf;
	}
	
	.empty-bottom-nav1 {
		width: var(--navigation-div-width);
		height: 21px;
		border-left: 1px solid #afafaf;
		border-right: 1px solid #afafaf;*/
	}
	
	.empty-bottom-nav2 {
		width: var(--navigation-div-width);
		height: 261px; /*calc(100vh - 0px);*/
		border-right: 1px solid #afafaf;
	}

	.main-links {
		padding-top: 6px;
	}
	
	.hamburger-menu {
		visibility: hidden;
	}

	.navigation-div {
		float: left;
	}
	
	.rest-content {
		float: left;
		width: var(--main-content-width);
		margin-left: 0px;
		/*border-right: 1px solid #afafaf;*/
	}
	
	.left-side-banner {
		height: 21px;
		float: left;
		width: 45px;
		background-image: url("Images/left-right-side-banner-bg.png");
		margin-top: 90px;
		margin-left: 27px;
		margin-right: 27px;
	}
	
	.right-side-banner {
		height: 21px;
		float: left;
		width: 63px;
		background-image: url("Images/left-right-side-banner-bg.png");
		margin-top: 90px;
		margin-left: 21px;
		margin-right: 0px;
	}
	
	.page-banner {
		width: var(--page-banner-img-width);
		float: left;
	}
	
	.banner-img {
		width: var(--page-banner-img-width);
		float: left;
	}
	
	.article-block-top {
		width: var(--main-content-width);
		float: inherit;
		margin: 0px;
		padding-left: 18px;
	}
	
	.article-block-top-h2 {
		width: 540px;
	}
		
	.article-block {
		width: var(--main-content-width);
		float: inherit;
		margin: 0px;
		padding-left: 27px;
		padding-top: 0px;
		border-left: 1px solid #afafaf;
	}
	
	.article-title-and-img {
		width: var(--article-title-and-img-width);
		float: left;
		padding-bottom: 0px;
		/*border-right: 1px solid #afafaf;*/
	}
	
	.article-subtitle-and-content {
		width: calc(var(--main-content-width) - var(--article-title-and-img-width) - 28px);
		padding-left: 36px; /*var(--article-subtitle-and-content-padding-left);*/
		padding-right: 0px;
		float: left;
		/*border-right: 1px solid #afafaf;*/
	}
	
	.article-subtitle-and-content h2 {
		margin-left: 18px;
		width: calc(var(--main-content-width) - var(--article-title-and-img-width) - 81px);
	}
	
	.contact-form-div h2 {
		margin-bottom: 9px;
	}
	
	.contact-form-div textarea {
		height: 180px;
		padding-top: 15px;
		border-radius: 20px;
	}
	
	.contact-form-div button {
		display: flex;
		align-items: center;
		padding: 9px;
		font-size: 18px;
		font-family: "comic sans ms", Verdana, "sans-serif";
		color: #fff;
		gap: 10px;
		border: none;
		border-radius: 45px;
		background: #25aae1;
		cursor: pointer;
		margin-left: 270px;
	}
	
	.contact-form-email {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-left: 45px;
	}
	
	.contact-inputs {
		width: 360px;
		height: 45px;
		/*border: none;
		outline: none;*/
		padding-left: 18px;
		font-weight: 300;
		color: #3d3d3d;
		border-radius: 45px;
		border: 2px solid #b9b9b9;
	}
	
	.contact-inputs:focus {
		border: 2px solid #25aae1;
	}
	
	.contact-inputs::placeholder {
		color: #3d3d3d;
	}
	
	.block-divider {
		width: var(--main-content-width);
		float: inherit;
		margin-top: 36px;
		margin-bottom: 9px;
		background-image: url("Images/line-block-divider.png");
	}
	
	.block-divider img {
		width: 15px;
		height: 17.2px;
	}
	
	.block-divider-last {
		width: var(--main-content-width);
		float: inherit;
		margin-top: 18px;
		margin-bottom: 9px;
		/*background-image: url("Images/line-block-divider.png");*/
		border-bottom: 1px solid #afafaf;
	}
	
	.block-divider-last img {
		rotate: -90deg;
		margin-left: auto;
		margin-right: auto;
		width: 15px;
		height: 17.2px;
		float: right;
	}
	
	.popup-image img{
		max-width: 900px;
	}
		
	}
}