/* CSS Document */

@media only screen and (max-width: 680px) {
	
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 {width:100%;
		  margin:auto;
		  padding:0;
		  background-color:none;	
		  }
/*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:scroll;
							  background-position: center;
							  background-repeat: no-repeat;
							  background-size: cover;
							  }

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

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

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

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

.bgimg-5 {background-image:url(../image/header5.jpg);
		  min-height: 860px;
		  }
		  
.bgimg-about {background-image:url(../image/header.jpg);
		  min-height: 400px;
		  }	
.bgimg-find {background-image:url(../image/header6.jpg);
		  min-height: 400px;
		  }	
.bgimg-distributors {background-image:url(../image/10.jpg);
		  min-height: 400px;
		  }	

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

.bgimg-quality {background-image:url(../image/header8.jpg);
		  min-height: 400px;
		  }	
		  	  
.title {position: absolute;
		left: 4.33%;
		top: 8%;
		padding-left:16px;
		width: 100%;
		text-align: left;
		color: #095e02;
		font-size:48px;
		font-weight:700;
		line-height:120%;
		font-family: 'Noto Sans', sans-serif;
		}
.title img {height:96px;}
.title-inner {position: absolute;
		left: 4.33%;
		top: 10%;
		padding-left:16px;
		
		width: 100%;
		text-align: left;
		color: white;
		font-size:48px;
		font-weight:700;
		line-height:120%;
		font-family: 'Noto Sans', sans-serif;
		}
.title-inner img {height:36px;}		
/*for taglines, quotes*/
.break1 {background-color:#333333;
		text-align:center;
		padding:36px 16px 36px 16px;
		/*testing*/position:relative;
		text-align: justify;
		}
.break1 img,.break2 img {height:28px;}
.break2 {position:relative;
		background-color:#073502;
		text-align:center;
		padding:36px 16px 36px 16px;
		text-align: justify;
		}

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

span.wutung-section{font-size:36px;
			font-family: 'Noto Sans', sans-serif;
			font-weight:bold;
			line-height:120%;
			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:64px;
position:absolute;
right:0;
width:75%;}			
.intro p {font-size:16px;
		  line-height:150%;
		  font-family: 'Open Sans', sans-serif;
		  margin-bottom:16px;
		  padding-right:16%;
		  }

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*/
.details {display:block;}
.dframe {position: absolute;
display:block;
		top: 420px;
		width: 100%;
box-sizing:border-box;
		background-color:white;
		opacity:0.8;
		min-height:960px;
		}
.dframe-enquiry {position: absolute;
display:block;
		top: 200px;
		width: 100%;
box-sizing:border-box;
		background-color:white;
		opacity:0.8;
		min-height:640px;}
.list-enquiry {position: absolute;
		top: 200px;font-size:16px;
		text-align: left;padding:16px 0;
		
}			
.list {position: absolute;
		top: 420px;font-size:16px;
		text-align: left;
		display:inline-block;
}

.sentence img {width:120px;
margin:16px 8px;padding-right:33.33%;
padding-left:33.33%;
display:block;
vertical-align:middle;
text-align:center;}

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

.sentence p {color:#black;
display:inline-block;
		margin:16px 4.33% 0 16px;

font-family:'Open Sans', sans-serif;
vertical-align:middle;
}

.video {  
display:block;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{left:4.33%;
			font-size:16px;
			box-sizing:border-box;
			vertical-align:middle;
			text-align:left;
			line-height:150%;margin-left:4.33%;
padding-top:8px;	display:block;		}		
				
/*category of product info*/			
p#category{vertical-align:text-top;
					color:#095e02;
					font-weight:bold;
					line-height:150%;
					width:100%;
					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;
				margin:0;
				line-height:175%;
				}


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

input[type=text],
input[type=email],
input[type=tel] {		width:320px;
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:320px;
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:320px;
		display:inline-block;
		padding-left:0 0 4px 0px;
		resize:none;
		}
		


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

input[type=reset],
input[type=submit]{
				  border:none;
border-radius:48px;
padding:8px 48px; margin:8px;
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 4.33% 32px 4.33%;
background-color:#333333;
box-sizing:border-box;
font-size:16px;
line-height:150%;
color:#606060;
font-size:24px;
font-weight:bold;
text-align:center;
font-family:'Noto Sans', sans-serif;
}
.tagline img {height:32px;}

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

.part,.catalogue-title {margin-left:auto;margin-right:auto;
padding:16px 16px 16px 16px;
background-color:#eadeb9;
box-sizing:border-box;
width:100%;
font-size:24px;
line-height:150%;
color:#293829;
text-align:center;
font-weight:bold;
font-family:'Noto Sans', sans-serif;
}
.part {margin-top:48px;margin-bottom:48px;}
.catalogue-title {margin-top:0;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:83.33%;
font-size:16px;
line-height:150%;
text-align:left;
font-weight:bold;
color:#606060;
font-family:'Noto Sans', sans-serif;
}
.para {margin:64px 4.33% 64px 4.33%;
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:0 auto 16px auto;height:480px;position:relative;}
.footer{bottom:0;
		left:0;
		background:#333333;
   padding:32px 16px 32px 4.33%;
  width:100%;
  font-color: white;
		left:0;
		}

.display {
font-family:'Open Sans', sans-serif;
margin-left:4.33%;margin-right:auto;width:100%;text-align:center;
vertical-align:top;margin-bottom:48px;margin-top:32px;padding:0;}

.item {box-sizing:border-box;
min-width:100%;vertical-align:top;
margin:32px 4.33%;width:100%;padding:0;

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

.item {min-width:100px;}
.item img {width:83.33%;
margin-left:0;margin-bottom:0;margin-right:auto;padding:0;

}

.des  {background-color:#e6e6e6; 
margin-top:0;box-sizing:border-box;padding:8px 16px 0 16px;min-width:83.33%;}
.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:left;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:100%;display:block;}
.slide {position:relative;
		background-size:cover;
		display:flex;
		overflow:hidden;
		}
button {border:none;
height:40px;
padding:8px 8px 0 8px;
display:inline-block;
font-size:24px;
font-weight:bold; 
color:#095e02;
background-color:white;
font-family: 'Noto Sans', sans-serif;
}
button.left,button.right {width:44px;}
/*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;
		margin-left:4.33%;
		margin-right:4.33%;
		}

/* 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{
				  background:#FFFFFF;
				  padding: 0 16px 0 32px;
				  display:block;
				  box-sizing:border-box;
				 

				  overflow-x:hidden;
				  margin-bottom:0;
				  margin-bottom:0;
				  position:relative;
				  }
#product{}
				  

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;
					
					line-height:175%;
					display:block;
					margin:0;
					
					font-family:'Open Sans', sans-serif;
					}
	p#category-button {display:none;}				
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:block;
				margin:0;
				max-width:auto;
				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 4.33%;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 img {display:block;}
.inline {display:block;}
.footer p {
display:inline-block; list-style-type: none;
margin:16px 18px 16px 0;
font-size:16px;
font-family: 'Noto Sans', sans-serif;
color:white;
font-weight:bold;
vertical-align:middle;
}
		  
}