:root{
	/* variables used in index.html */

	/*--intro-img-width: 100px; *//*360px;*/
	--intro-img-height: 240px; 
	--intro-img-padding: 10px; /*30px;*/
	
	--intro-width-left: var(--hNAV-width);
		
	--intro-heading-font-size: calc(var(--heading-font-size) + 6px);
	--intro-heading-line-height: calc(var(--intro-heading-font-size) * 1.5);
	
	--content-img-width: 60px;
	--content-img-height: 60px;

	--intro-element-margin-top: 20px; /* needs to be calculated with calc */

}

/*====================================================================*/
/*----------------------------------INTRO ----------------------------*/
/*====================================================================*/

/*
<section class="content">
	<section class="intro">
		<h1>"Adding value through reliable services."</h1>
		<a href="index.html"><img src="images/frontpage-360-330.png" alt="intro"/></a> 
		<p id="intro-first-p">Welcome to Zybel International, a leading supplier of industrial automation and machine spare parts.</p> 
		<p>We help our customers on reducing costs and increasing productivity by offering reliable distribution services, a broad product line, and competitive pricing that adds value to their upstream input.</p>
		<p id="intro-last-p">Our trained specialists strive to deliver the highest customer service with a firm commitment to build long-term partnerships.</p>
	</section>
*/
		

/*See: relative positioning, Book(Session 4.3 – Positioning Elements) */
	/*move an element relative to where the browser would have placed it if no positioning had been applied */
	/*A relatively positioned object is still part of the normal document flow; its placement is simply adjusted from its default location*/		
	
.content{
	width: 100%; 
	/*padding: 10px;
	padding-left:0px;*/
	position: static; /* default positioning, also the browser controls the height */
	background-color:var(--very-light-gray);
	/*outline: 4px solid green;*/
}

.intro{
	width: 100%; 
	position: static;  /* default positioning*/
	background-color:var(--very-light-gray);
	/*margin-top:var(--intro-element-margin-top);*/
	/*padding-bottom:calc(var(--text-tab) * 2);*/
	/*outline: 2px solid yellow;*/
}

.intro h1{
	/* overwrites original properties*/
	font-size:var(--intro-heading-font-size);
	line-height:var(--intro-heading-line-height); 
	color: var(--dark-gray);
	text-align: center;
	width: var(--intro-width-left);
	padding-top: var(--body-font-size);
	padding-left: var(--body-font-size);
	/*right:0px;
	top:0px;*/
	/*float: right;*/
	position: static; /* within its container (.intro)*/
	/*outline: 2px solid blue;*/
}

.intro img {
	height:var(--intro-img-height);
	width: auto; /*default, to retain the proportions */ 
	padding:var(--intro-img-padding);
	position: relative; /*absolute; */ /* (required). relative to its container if container is not static */
	top: -50px;
	/*right:0px;
	top:0px;*/
	float:right;
	margin-right: 0px;
	margin-top: 0px;
	/*margin-left: var(--intro-width-left);*/
	/*display:block;*/
	/*outline: 2px solid aqua;*/
}

.intro p{
	font-family:var(--heading-font-family);
	font-size: var(--subheading-font-size);
	line-height:var(--subheading-line-height);
	color: var(--dark-gray);
	width: var(--intro-width-left);
	padding-left: var(--body-font-size);
	padding-top: var(--body-font-size);
	/*float:right;*/
	/*position: static;*/
	/*top:0px;*/
	/*outline: 5px solid red;*/
	
}


.intro #intro-first-p{
	padding-bottom: 0px; /*var(--body-font-size);*/
	/*top:100px;
	position: relative;*/
	/*outline: 2px solid green;*/
}

.intro #intro-last-p{
	padding-bottom: var(--body-font-size);
	/*top:200px;
	position: relative;*/
	/*clear:right;*/
	/*outline: 2px solid brown;*/
}


.intro #yellow-mark{
	/*format the "industrial automation and machine spare parts" text*/
	font-family:var(--heading-font-family);
	font-size: var(--subheading-font-size);
	color: var(--body-anchor-color); 
}


/*
	<!--==================== USP: Unique selling propositions  ==========================-->
	<section class="content">
		<section class="usp">
			<ul>
				<li>
					<h2>&raquo;Fast & reliable service</h2>
					<div class="wrapper">
						<div class="img-wrapper"><img src="images/thumbnail_linear_motion_300x300.png" alt="" /></div>
						<p>The need for products & services is often urgent. Hence, we respond quickly to request for quotes and we guarantee the on-time delivery of our products.
						<span id="dots1">...</span>
						</p>
						<div id="more1">
							<p>In a constantly evolving world, the need for products & services is often urgent. Based on that, our customer service team offers rapid responses to request for quotes, permanent supervision of orders status, and the assurance of on-time delivery. We only work with genuine original components and spare parts.</p>
							<p>Everything starts when the need is identified or we receive a request for quote (RFQs), then a prompt proposal follows. After we receive an order, in-stock items ship the same day otherwise, we place an order and our advanced computer system starts monitoring the order daily assuring the on-time delivery of our products. </p>
							<p>Finally, our after sales support team makes sure the right product arrived and is prompt  to answer with the help of our suppliers any technical question that may arise at the moment of installation or setup. </p>
						</div>
						<div class="button-wrapper">
							<button onclick="myReadFunction1()" id="myBtn1" class="myBtn">Read more &raquo </button>
						</div>
					</div>		
				</li>
*/

/*---------------------------------CONTENT --------------------------*/		
.usp{
	padding:var(--text-tab);
	padding-left:0px;
	background-color:white;
	/*outline: 2px solid pink;*/
}

.usp ul{
	height:auto; 
	background-color:Wheat;
	width:calc(var(--intro-width-left) + 10px);
	/*width:var(--intro-width-left);*/
	padding: var(--text-tab);
	/*outline: 2px solid green;*/
}
.usp li {
	display: block;
	position: relative; /*	Session 4.3 – Positioning Elements ("In position:relative we are declaring that this element will have descendants with relative or absolute positioning.")*/
	padding-left:var(--element-hpadding);
	border-bottom:var(--border-bottom-line);
	/*outline: 2px solid blue;*/
}

.usp h2{
	/*padding-left:calc(var(--text-tab) * 4.5);*/
	/*padding-bottom:var(--element-vpadding);*/
	/*font-weight: bold;*/
	color:var(--body-anchor-color);
}

.usp .img-wrapper{
	width:var(--content-img-width);
	height:var(--content-img-height);
	padding-right: var(--text-tab);
	padding-bottom: var(--text-tab);
	/*float:left;*/
	float:right;
	/*outline: 2px solid orange;*/
}

.usp img{
	width:var(--content-img-width);
	height:var(--content-img-height);
	border: 1px;
	padding: 4px;
	border-style: solid;
/*outline: 2px solid green;*/
}

.usp p {
	padding-bottom: var(--text-tab);
	color: var(--body-text-color);
	/*outline: 2px solid green;*/
}

.usp #more1 {display: none;}

.usp #more2 {display: none;}

.usp #more3 {display: none;}

.usp .button-wrapper{
	padding-bottom: var(--text-tab);
	/*padding-left:calc(var(--text-tab) * 5.2);*/
}

.usp .myBtn{
	cursor: pointer;
	color: var(--body-text-color);
	background-color: hsl(39, 60%, 70%);
	font-weight: bold;
	border:none;
	text-align:center;
	/*padding:0px calc(var(--text-tab) / 2);*/
	padding:calc(var(--text-tab) / 3) var(--text-tab); /*padding: vertical horizontal;*/ 
}