/*
    hero.css
    asialeader.cn | 01/06/2021 | CSS
    (c) Copyright 2021 web-communication.eu
*/


.hero {
    position: 				relative;
	margin: 				0 auto;
    width: 					100%;
}


.hero .container {
  position: 				relative;
margin: 				0 auto;
  width: 					100%;
  max-width: 1920px;
  min-height: 40vh;
background-color: 			#DDDDDD;
overflow:				hidden;
}

.hero .cover {

	-webkit-background-size:	cover;
	-moz-background-size: 		cover;
	-o-background-size: 		cover;
	background-size: 			cover;
	overflow: hidden;
}



.hero .one {
	background-image: url('../images/manufacturing4b.jpg');
  background-position: 60% 50%;
}


.hero .two {
	background-image: url('../images/production.jpg');
  background-position: center;
}

.hero .aboutus {
	background-image: url('../images/atto.jpg');
background-position: 85% 50%;
}

.hero .aboutus-2 {
	background-image: url('../images/test3.jpg');
background-position: center;
}


.hero .whyasialeader {
	background-image: url('../images/corona.jpg');
background-position: 85% 50%;
}

.hero .skyline {
	background-image: url('../images/skyline.jpg');
background-position: center;
}


.hero .design {
	background-image: url('../images/design.jpg');
background-position: 65% 50%;
}

.hero .swissmade {
	background-image: url('../images/swissmade.jpg');
	background-position: center;
}




.hero img {
	margin: 0 auto;
	width: 100%;
  max-width: 1920px;
	display:				block;
}



.hero .fading {
	position:						absolute;
	bottom:							0;
	left:							0;
	width:							100%;
	height:							350px;

	/* webkit example */
	background-image: -webkit-gradient(
	linear, left top, left bottom, from(rgba(0,180,255,0)), to(rgba(0,180,255,0.5))
	);

	/* mozilla example - FF3.6+ */
	background-image: -moz-linear-gradient(
	  rgba(0,180,255, 0) 0%, rgba(0,180,255, 0.7) 95%
	);
}


.hero h1 {
	font-family: 					'Roboto', sans-serif;
	font-weight: 					normal;
	font-size: 						56px;
	letter-spacing: 				0.125em;
	text-indent: 					0.125em;
	color:							#FFFFFF;
	text-transform:					uppercase;
}










/* responsive */

@media only screen and (max-width: 920px) {

  .hero .container {
    max-height: 35vh;

  }

}

@media only screen and (max-width: 1280px) {


}

@media only screen and (min-width: 1281px) and (max-width: 1600px) {



}