@import url("index.css"); 
/*@import url("base-mobile.css"); */
:root{
	--intro-img-width:300px; /* fit the portrait screen */
	/*need a better picture, rectangle not square*/
}
/*----------------------------------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>
*/

.content .intro{
	position:static;
	width:auto; /* if the element has paddings => use auto instead of 100% */
	padding:0px var(--text-tab);
	/*outline:2px solid green;*/
}

.content .intro h1{
	font-family: var(--heading-font-family);
	font-size: calc(var(--heading-font-size) * 1.2);
	line-height: calc(var(--heading-line-height) * 1.2); 
	color: var(--body-text-color);
	text-align:center;
	width:100%; /* overwrite index.css, can use 100% because no paddins */ 
	margin:0px; 
	padding:0px;
	/*padding:var(--text-tab);*/
	/*outline:2px solid red;*/
}

.intro img{
    position:static; /* overwrite index.css*/
	width: 100%; 
	margin-right: 0px; /*overwrite*/
	max-width: 100%;
  	height: auto; /* overwrite index.css*/
	float:none; /* overwrite index.css*/
	margin:0px;
	padding:0px;
	/*padding-left: var(--text-tab);*/
	/*outline: 2px solid yellow;*/
}

.intro p{
	width: auto;
	/*padding-left: var(--text-tab);*/
	padding:0px;
	padding-top: var(--text-tab);
	/*outline: 2px solid red;*/
}

.intro #intro-last-p{
	padding-bottom: var(--body-font-size);
	/*outline: 2px solid red;*/
}

/*
	<!--==================== 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>
*/

.usp{
	padding:0px; /* overwrites value*/
	width:auto;
}

.usp ul{
	padding:0px; /* overwrites value*/
	width:auto; /* overwrites value*/
	padding:var(--text-tab);
	/*padding: var(--text-tab);*/
	/*outline: 4px solid blue;*/
}
.usp li {
	position:static;
	padding:0px;
	
	/*width:auto;*/

	/*display: block;
	position: relative;
	padding-left:var(--element-hpadding);*/
	/*outline: 2px solid blue;*/
}

.usp h2{
	/*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;*/
	/*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;*/
}