/* CSS Document */

@media only screen and (min-width: 1280px) and (max-width: 1499px) {
	
body {margin:0;
	  padding:0;
	  border:0;
	  overflow-x:hidden;
	  }
	  
a {text-decoration:none;
  transition: 0.3s;
  color:white;
  }	  
a#item {text-decoration:none;
  transition: 0.3s;
  color:black;
  }	  
a#nav{color:#606060;}
a#current-item  {color:#7bea5c;}
a#current {color:#7bea5c;}
a#current:hover,a#current:active,a#item:hover,a#item:active {background-color:white;}
a#current-item:hover,a#current-item:active {color:white;}
a.button {color:#095e02;}	
a#nav:hover,a#nav.active {color:white;
background-color:#7bea5c;}
a:hover,a:active{background-color:#7bea5c;}

a#pic:hover,a#pic:active,a#item:hover,a#item:active,a.button:hover,a.button#active {opacity:0.3;background:none;}

h2::selection,p::selection,span::selection,div::selection,a::selection,img::selection {background: #efefef;}
/*for scrolling*/
::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-track {background:#efefef;}
::-webkit-scrollbar-thumb {border-radius:10px;background:#ababab;}
/*responsive grid*/	
.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}

.wrapper {	
		  }
/*menu*/		  
img#logo {height:44px;padding-right:32px;display:inline-block;}
/*parallax*/
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-solid, .bgimg-about, .bgimg-products, .bgimg-quality, .bgimg-find, .bgimg-distributors {position: relative;
							  background-attachment: fixed;
							  background-position: center;
							  background-repeat: no-repeat;
							  background-size: cover;
							  }

.bgimg-1 {background-image:url(../image/header1.jpg);
		  min-height: 800px;
		  }

.bgimg-2 {background-image:url(../image/header2.jpg);
		  min-height: 800px;
		  }
.bgimg-solid {background-image:url(../image/wutung-bg.png);
		  min-height: 1200px;
		  }

.bgimg-3 {background-image:url(../image/header3.jpg);
		  min-height: 800px;
		  }

.bgimg-4 {background-image:url(../image/header4.jpg);
		  min-height: 800px;
		  }

.bgimg-5 {background-image:url(../image/header5.jpg);
		  min-height: 800px;
		  }
		  
.bgimg-about {background-image:url(../image/header.jpg);
		  min-height: 480px;
		  }	
.bgimg-find {background-image:url(../image/header6.jpg);
		  min-height: 480px;
		  }	

.bgimg-distributors {background-image:url(../image/10.jpg);
		  min-height: 480px;
		  }	
.bgimg-products {background-image:url(../image/header7.jpg);
		  min-height: 480px;
		  }	

.bgimg-quality {background-image:url(../image/header8.jpg);
		  min-height: 480px;
		  }	
		  	  
.title {position: absolute;
		left: 4.33%;
		top: 20%;
		padding-left:16px;
		width: 100%;
		text-align: left;
		color: #095e02;
		font-size:64px;
		font-weight:700;
		line-height:150%;
		font-family: 'Noto Sans', sans-serif;
		}

.title-inner {position: absolute;
		left: 4.33%;
		top: 30%;
		padding-left:16px;
		width: 100%;
		text-align: left;
		color: white;
		font-size:64px;
		font-weight:700;
		line-height:150%;
		font-family: 'Noto Sans', sans-serif;
		}
		
/*for taglines, quotes*/
.break1 {background-color:#333333;
		text-align:center;
		padding:56px 16px 56px 16px;
		/*testing*/position:relative;
		text-align: justify;
		}

.break2 {position:relative;
		background-color:#223a21;
		text-align:center;
		padding:56px 16px 56px 16px;
		text-align: justify;
		}

.break1 p,.break2 p {text-align:center;
					font-size:36px;
					line-height:150%;
					font-weight:bold;
					color: #ffd72e;
					font-family: 'Noto Sans', sans-serif;
					}
					
					
/*for simple introduction of the section*/
.intro {position: absolute;
		left: 4.33%;
		top: 16%;
		margin-left:16px;
		width: 30%;
		text-align: left;
		}
		
span.section{font-size:48px;
			font-family: 'Noto Sans', sans-serif;
			font-weight:bold;
			line-height:100%;
			color:#095e02;
			}

span.wutung-section{font-size:48px;
			font-family: 'Noto Sans', sans-serif;
			font-weight:bold;
			line-height:56px;
			color:#095e02;
			margin-bottom:16px;
			}

span.sub-section{font-size:24px;
			font-family: 'Noto Sans', sans-serif;
			font-weight:bold;
			color:white;
			}
img.promo {bottom:32px;
position:absolute;
right:0;}			
.intro p {font-size:16px;
		  line-height:150%;
		  font-family: 'Open Sans', sans-serif;
		  margin-bottom:32px;
		  }

span.button {
background-color:#afe2bc;
border-radius:48px;
padding:8px 48px;
font-size:16px;
font-weight:bold; 
color:#095e02;
font-family: 'Noto Sans', sans-serif;
}	
/*a bit of the details; with icons*/
.dframe,.dframe-enquiry {position: absolute;
		left: 41.66%;
		top: 240px;
		margin-left:16px;
		width: 58.33%;
		background-color:white;
		opacity:0.8;
		box-sizing:content-box;
		min-height:560px;
		}
		
.list,.list-enquiry {position: absolute;
		left: 50%;
		top: 280px;
		margin:16px 0 0 0;
		width: 41.66%;
		text-align: left;
		display:inline-block;
}

.sentence img {width:80px;
padding-right:24px;
display:inline-block;
vertical-align:middle;}

.sentence span {color:#095e02;
font-weight:bold;
font-family:'Noto Sans', sans-serif;}

.sentence p {color:#black;
max-width:400px;
display:inline-block;
font-family:'Open Sans', sans-serif;
vertical-align:middle;
}

.video {  height:100%;
    max-width:100%;
    overflow: hidden;
	background-color:black;
}
.video video {max-width:100%;
background-color:none;
display:flex;
padding:auto;
margin:auto;}


/*enquiry*/
#table-list{
			font-size:16px;
			box-sizing:border-box;
			vertical-align:middle;
			text-align:left;
			line-height:150%;
padding-top:8px;			}		
				
/*category of product info*/			
p#category,p#category-button{vertical-align:text-top;
					padding:0 4px 0 0;
					color:#095e02;
					width:160px;
					font-weight:bold;
					line-height:150%;
					display:inline-table;
					margin:0;
					max-width:40%;
					font-family:'Noto Sans', sans-serif;
					}

/*details of product info, mapview for find us map*/				
p#item{font-weight:normal;
				vertical-align:text-top;
				padding:0 0 16px 0;
				display:inline-table;
				margin:0;
				max-width:60%;
				line-height:175%;
				}


select ,input,textarea{outline-color: #a3b1c6;}

input[type=text],
input[type=email],
input[type=tel] {width:300px;display:inline-block;
				border-top:none;
				border-left:none;
				border-right:none;
				border-bottom:solid 1.6px #BBB;
				font-family: 'Open Sans', sans-serif;
				padding-left:4px 0 4px 0;
				}
				
select {width:300px;display:inline-block;
		border-top:none;
		border-left:none;
		border-right:none;
		border-bottom:solid 1.6px #BBB;
		font-family: 'Open Sans', sans-serif;
		padding:0 0 4px 0;
		}


textarea {border-top:none;
		border-left:none;
		border-right:none;
		border-bottom:solid 1.6px #BBB;
		font-family: 'Open Sans', sans-serif;
		width:300px;
		display:inline-block;
		padding-left:0 0 4px 4px;
		resize:none;
		}
		

input[type=reset],
input[type=submit],
input[type=file] {
				  border:none;
				  margin:0 8px 0 0;
				  
border-radius:48px;
padding:8px 48px;
font-size:16px;
font-weight:bold; 
color:#095e02;
background-color:#afe2bc;
font-family: 'Noto Sans', sans-serif;
}


/*end of parallax*/
.tagline {margin-left:auto;margin-right:auto;
padding:32px 16px 32px 16px;
background-color:#333333;
box-sizing:border-box;
width:41.66%;
font-size:24px;
line-height:150%;
color:#606060;
font-size:24px;
font-weight:bold;
text-align:center;
font-family:'Noto Sans', sans-serif;

}


.tagline span{font-size:36px;
color:#ffd72e;
font-family:'Noto Sans', sans-serif;
font-weight:bold;
line-height:150%;}

.part,.catalogue-title {margin-left:auto;margin-right:auto;
padding:32px 16px 32px 16px;
background-color:#eadeb9;
box-sizing:border-box;
width:41.66%;
font-size:24px;
line-height:150%;
color:#293829;
text-align:center;
font-weight:bold;
font-family:'Noto Sans', sans-serif;
}
.part {margin-top:24px;margin-bottom:48px;}
.catalogue-title {margin-top:180px;margin-bottom:48px;}

.part span,.catalogue-title{font-size:36px;
color:#293829;
font-family:'Noto Sans', sans-serif;
font-weight:bold;text-align:center;
line-height:150%;}

.navigation {margin-left:auto;margin-right:auto;
padding:16px 16px 0 16px;
width:66.66%;
font-size:16px;
line-height:150%;
text-align:center;
font-weight:bold;
color:#606060;
font-family:'Noto Sans', sans-serif;
}
.para {margin:64px 12% 64px 12%;
font-size:16px;
line-height:150%;
font-family:'Open Sans', sans-serif;
}

.para span {color:green;
font-weight:bold;
font-family:'Noto Sans', sans-serif;
}
.para p {padding-bottom:16px;}
#map {width:100%;margin:auto;height:480px;position:relative;}

.display {left:8.33%;display:flex;
font-family:'Open Sans', sans-serif;
margin-left:auto;margin-right:auto;padding:auto;text-align:center;
vertical-align:top;margin-bottom:64px;margin-top:32px;}

.item {display:inline-block;box-sizing:border-box;
padding-left:8.33%;padding-right:8.33%;width:240px;vertical-align:top;
margin:32px 4.165% 64px 4.165%;
}
.display2only {left:8.33%;display:flex;  
font-family:'Open Sans', sans-serif;
margin-left:auto;margin-right:auto;padding:auto;width:58.33%;
vertical-align:top;margin-bottom:64px;margin-top:32px;text-align:center;}

.item img {width:240px;
text-align:center;vertical-align:bottom;
margin:0;
padding:0;
}

.des  {background-color:#e6e6e6;
width:240px;margin-top:0;padding:8px 16px;box-sizing:border-box;}
.des p {font-size:16px;
font-family:'Open Sans', sans-serif;
font-size:16px; line-height:150%;
}
.des span {font-size:16px;font-family: 'Noto Sans', sans-serif;
color:#095e02;font-weight:bold;}
span#find {font-size:16px;font-family: 'Noto Sans', sans-serif;
color:#606060;font-weight:bold;line-height:28px;}
.button-des {text-align:center;margin-top:32px;margin-left:auto;margin-right:auto;margin-bottom:16px;}
.button-des span{
background-color:#afe2bc;
border-radius:48px;
padding:8px 48px;
font-size:16px;
font-weight:bold; 
color:#095e02;
vertical-align:middle;
font-family: 'Noto Sans', sans-serif;
}	

.button-des-item {text-align:left;margin-top:16px;margin-left:auto;margin-right:auto;margin-bottom:24px;}
.button-des-item span{
background-color:#afe2bc;
border-radius:48px;
padding:8px 48px;
font-size:16px;
font-weight:bold; 
color:#095e02;
vertical-align:middle;
font-family: 'Noto Sans', sans-serif;
}	

/*product slide*/
.w3-content {width:50%;display:inline-block;height:560px;}
.slide {position:relative;
		background-size:cover;
		display:flex;
		overflow:hidden;
		}
button {border:none;
padding:8px;
height:40px;
width:40px;
font-size:24px;
font-weight:bold; 
color:#095e02;
background-color:white;
font-family: 'Noto Sans', sans-serif;
}
/*testing product*/
.info-list{
		  }
/* slide for product specification; from w3school how to tab, phase 1, slide soon*/
#slide {position:relative;
		background-size:cover;
		display:flex;
		width:640px;
		max-height:640px;
		overflow:hidden;
		}

/* archive map #maptest {margin-top:128px;
margin-left:4.16%;
margin-right:4.16%;
margin-bottom:64px;
position:relative;
		background-size:cover;
		display:flex;
		width:1280px;
		max-height:500px;
		overflow:hidden;}*/
		

.wrap {position:relative;
	  right:0;
	  }
	  					

/* Float the list items side by side */

/* Style the links inside the list items */
		
	

/*info text*/	  
#info-text-scroll,#product{height:400px;
				  width:45%;
				  background:#FFFFFF;
				  padding: 0 16px 16px 32px;
				  max-width:640px;
				  left:46%;
				  display:inline-block;
				  box-sizing:border-box;
				  overflow-y:scroll;
				  overflow-x:hidden;
				  margin-bottom:0;
				  margin-bottom:0;
				  position:relative;
				  }
#product{position:absolute;top:540px;}
				  

p#info-subheading{font-family:'Noto Sans', sans-serif;
				padding-top:16px;font-size:24px;
				line-height:100%;
				font-weight:bold;
				color:#095e02;
				}

#table-list{font-family: 'Open Sans', sans-serif;
			font-size:16px;
			box-sizing:border-box;
			vertical-align:middle;
			text-align:left;
			line-height:150%;
			color:#434952;
			padding:0;
			}		
				
/*category of product info*/			
p#info-sub,p#category{vertical-align:text-top;
					padding:0 4px 0 0;
					color:#606060;
					width:160px;
					line-height:175%;
					display:inline-table;
					margin:0;
					max-width:40%;
					font-family:'Open Sans', sans-serif;
					}
					
p#info-sub{color:#d51e38;
			padding-top:16px;
			}
/*details of product info, mapview for find us map*/				
p#item,ul#item,div#mapview {font-weight:normal;
				vertical-align:text-top;
				color:#434952;
				padding:0 0 16px 0;
				display:inline-table;
				margin:0;
				max-width:60%;
				line-height:175%;
				}
div#mapview{padding:0;}	

ul#item {list-style-type:none;}	

/*view docs*/
object.docs {width:100%;height:640px;}


/*site map*/
.sitemap  {
width:240px;margin-top:0;padding:8px 16px;box-sizing:border-box;}
.sitemap p {font-size:16px;
font-family:'Open Sans', sans-serif;
font-size:16px; line-height:150%;
}
.sitemap span {font-size:24px;font-family: 'Noto Sans', sans-serif;
color:#095e02;font-weight:bold;}



.des  {background-color:#e6e6e6;
width:240px;margin-top:0;padding:8px 16px;box-sizing:border-box;}
.des p {font-size:16px;
font-family:'Open Sans', sans-serif;
font-size:16px; line-height:150%;
}
.des span {font-size:16px;font-family: 'Noto Sans', sans-serif;
color:#095e02;font-weight:bold;}

.footer{bottom:0;
		left:0;
		background:#333333;
   padding:32px 16px 48px 4.33%;
  width:100%;
  font-color: white;
		left:0;
		height:96px;
		}

.footer img {display:inline-block;}

.footer p {
display:inline-block; list-style-type: none;
margin:16px 18px 48px 0;
font-size:16px;
font-family: 'Noto Sans', sans-serif;
color:white;
font-weight:bold;
vertical-align:middle;
}
		  
}