body
		{
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size whis is changeable by user */
			font-family: Verdana, sans-serif; /* as stated here: https://www.w3schools.com/css/css_font.asp */
			margin: 0;
		}
		
		#simanic_logo
		{			
			position: relative;
			
			margin: 7px auto 7px auto; /* top .. right .. bottom .. left */
			
			/* border: 1px dashed red; */
		}
		
		#simanic_logo img
		{
			max-width: 65%;
			
			margin: 5px auto 1px 20px; /* top .. right .. bottom .. left */
		}
		
		ul.breadcrumb
		{
			width: 95%; /* in other files ... the width isn't set here ... because breadcrumbs lives within some other DIV */
			
			padding: 10px 16px;
			
			list-style: none;
			background-color: #eee;
			
			border: 1px solid green;
			margin: 5px auto 6px auto; /* top .. right .. bottom .. left */
		}
		
		ul.breadcrumb li
		{
			display: inline;
			
			font-size: 15px;
		}
		
		ul.breadcrumb li+li:before
		{
			padding: 8px;
			
			color: black;
			
			content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
		}
		
		ul.breadcrumb li a
		{
			color: #0275d8;
			text-decoration: none;
		}
		
		ul.breadcrumb li a:hover
		{
			color: #F29445;
			text-decoration: underline;
		}
		
		ul.breadcrumb li#fixed_text
		{
			color: #74730E;
		}
		
		h1
		{
			color: #CE660F;
			
			margin: 0;
			
			margin-left: 15px;
		}
		
		#product_cat_block { /* width commented in ... navbar_middle_mega.css ... because it is controlled here */
			width: 95%;
		}
		
		#navbar_top_inner { /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
			width: 95%;
		}
		
		#top_text
		{			
			position: relative;
			
			width: 95%;
			
			margin: 0 auto;
			
			padding: 15px;
			padding-bottom: 5px;
			
			font-family: arial;
			
			line-height: 1.3;
			
			border: 1px solid green;
			
			/* background-color: #EFF0C0; */
		}
		
		@media only screen and (min-width: 1200px)
		{
			ul.breadcrumb li
			{
				font-size: 18px;
			}
		}		
			
		@media only screen and (min-width: 1450px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
		
			#simanic_logo, .slideshow-container, .dot_padding, #product_cat_block, #navbar_top_inner, ul.breadcrumb, #footer_inner, #top_text
			{
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */
				
				width: 70%;
			}
			
			#simanic_logo
			{
				/*margin-top: 50px;*/ /* when top navbar = fixed this is needed ... but mobile = relative so initially set to: 0 further up */
			}
		}