@charset "utf-8";
/* CSS Document */
html{
	color:rgba(0,0,0,1.00);
	overflow-x: hidden;
		z-index: 1;

}

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}





.topa{
	margin-left: 25%;
}
.collapsible {
  cursor: pointer;
  width: 100%;
  font-size: 15px;
	padding: 40px 20px 40px 20px ;text-align: center;color: rgba(0,0,0,1.00);
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

.tila a:hover {
  	background-color: #eeede9;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  display: none;
  overflow: hidden;
  background-color:rgba(130,130,130,0.50);height: auto;padding: 50px;
}

a{
color: #000;
}

#mySidenav111 a {
  position: fixed;
  left: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 200px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
	z-index: 9;
}

#mySidenav111 a:hover {
  left: 0;
		z-index: 9;

}

#about11 {
  top: 20px;
  background-color: #04AA6D;		z-index: 9;

}

#blog11 {
  top: 80px;
  background-color: #2196F3;		z-index: 9;

}

#projects11 {
  top: 140px;
  background-color: #f44336;		z-index: 9;

}

#contac11t {
  top: 200px;
  background-color: #555;		z-index: 9;

}


.parent{
    position: relative;
}
.centered {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
	color: rgba(255,255,255,1.00);
	font-size: 600%;
	
	border-style: solid;
  border-width: 1.5px;
	border-color: rgba(255,255,255,1.00);
	padding: 7.5% 25% 7.5% 25%;


	box-shadow: 1px 1px 2px 0 #fff;
}
.list4top a{
	font-family: Noto Sans TC;
	align-items: center;
}
.centered1 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
	color: #000;
	font-size: 35px;
 border-left: 3px solid; 
	border-width: 1.5px;
	border-color: #000;
	
	width: 80px;
	height: 150px;
	margin-left: 20px;
}

.til{
	text-align: center;
	text-shadow: 1px 1px 1px 0 #000;
	color: #000;
	font-size:150%;
	font-family: CENTAUR;
	display:inline-block;
	
}


.topnav {
    background: #fff none repeat scroll 0 0;
    float: left;
    font-size: 0.69em;
    font-weight: 600;
    line-height: 2.2;
    padding: 12px 0;
    text-transform: uppercase;
    width: 100%;
	position:relative;
	z-index:999;
	background-color: #eeede9;
}
.topnav1 {
    background: #fff none repeat scroll 0 0;
    float: left;
    font-size: 0.69em;
    font-weight: 600;
    line-height: 2.2;
    padding: 12px 0;
    text-transform: uppercase;
    width: 100%;
	position:relative;
	z-index:999;
	background-color: #eeede9;
}



/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav1 a {
  float: left;
  color: #000;
  text-align: center;
  padding: 7px 8px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav1 a:hover {
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav1 a.active {
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav1-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

.topnav1-right {
  float: right;
}

.listwd{
		display:inline-block;
	}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
	.topa{
	margin-left: 0%;
}
	.tila{
		display: none;
	}
		.list4top{
		display: none;
	} 
	.tila1{
		display:inline-block;
	}
.topimg{
	

}
	.listwd{
		display: none;
		
	}
}
@media screen and (max-width: 1100px) {
	.tila{
		display: none;
	}
	.tila1{
		display:inline-block;
	}
.topimg{
	
}

}


.title{

	background-size:1400px;
	background-repeat: no-repeat;
	background-attachment: scroll;		
}
.note{
	color: rgba(255,0,4,1.00);
}

.formtp
{
	background-color:#8ACCD9;
	color:#000;
	padding:1%;
}

#contactus{
	
}


.formtp1
{	
	    

	background-color:#80A1C1;
	color:white;
	padding:1%;
	font-size: 20px;
	width: 60%;
	height:450px;
	display: block;
}
.bottomwd{
	margin-bottom: 2px;
}

.about{
	display: inline-block;
	left:70%;
	margin-left: 4%;
	width: 400px
}

.form{
	height:75px;
	width:70%;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size:30px;
	margin-left: 10px;
}

.form12{
	height:30px;
	width:170px;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size:30px;
	margin-left: 200px;
	margin-top: 22px;

}

.formnum{
	height:30px;
	width:20%;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size:30px;
	margin-left: 10px;
}

.tablink {
 	background-color: #B2B2B2;
 	color: #000;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px;
	font-size: 17px;
	width: 15%;
	text-align: center;
}
.column {
  float: left;
  width: 25%;
	padding: 30px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row{
	color: rgba(0,0,0,1.00);
	height: auto;
	width: 100%;
background-color: #eeede9;}
.tablink:hover {
}
.tablink:checked{
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
	color: white;
	display: none;
	padding: 100px 20px;
	height: 125%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

.productform{
	width: 100px;
	display: inline-block;
	margin:5%;
}

.product{
	display: inline-block;
	width: 50px;
}

.formnum1{
	display: inline-block;
	width: 100px;
	height: 25px;
	font-size: 25px;
}

 a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
 }

.button{
	margin-left: 90%;
	margin-bottom: 3%;

}

.pform{
	background-color: rgba(67,206,182,1.00);
}

.formtphot{
	background-color: rgba(183,152,255,1.00);
	margin-left: 20%;
	margin-right: 20%;
}

.about1{
	display: inline-block;
	left:80%;
	width: 300px
}

.img1{
	margin-left:0%;
	width: 100%;
	}
.img1topic{
	width: 100%;
	font-size: 120%;
	text-align: center;
}

.pxbg__bar1POST div p{
	text-align: center;
	
}

/* The side navigation menu */
.sidenav {
  height: 150px; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
	bottom:55px;
 bottom: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
.topimg{
	width:300px;height: auto; display: inline-block;float: right;margin-top: 80px;
}
	.topimga{
	
	display: none;
				width: 0px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
		.list4top{
		display: none;
	} 
.topimga{
	width:300px;height: auto; display: inline-block;float: right;margin-top: 80px;
}
	.topimg{
	
	display: none;
		width: 0px;
}
}


.button1 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: #000;
  background-color: #FFFFFF;
  text-align:center;
  cursor: pointer;
  width: 50px;
	border-style: solid;
	 border-width: 2px;
}

.button1:hover {
  background-color: rgba(166,166,166,0.9);
}

.sidenav a:hover {
  background-color: #ddd;
  color: rgba(0,0,0,0.5);
}

/* Add an active class to highlight the current page */
.sidenav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.sidenav .icon {
  display: none;
}


.sidenav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.sidenav a:hover {
  background-color: #ddd;
  color: rgba(0,0,0,0.5);
}

/* Add an active class to highlight the current page */
.sidenav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.sidenav .icon {
  display: none;
}



.menuicon{
	
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;

}
.listlogo{

}

.list4top{
	margin-top: 100px;
	color: rgba(0,0,0,1.00);
align-items: center;
	width: 50%;
	margin-left: 50%;

}


.choose{
	display: inline-block;
	width: 200px;
	margin-top: 100px;
}

.choose{
	text-align: center;
	color: rgba(0,0,0,1.00);

}

.choosearea{
	text-align: center;
	color: rgba(0,0,0,1.00);
	display: inline-block;
	width: 250px;
}
.choosearea2{
	text-align: center;
	color: rgba(0,0,0,1.00);
	display: inline-block;
	width: 275px;
}
.choosearea1{
	text-align: right;
	color: rgba(0,0,0,1.00);
	display: inline-block;
    position: relative;}

.choosewd{
	background-color:#BEBEBE;
	width:125%;
	padding: 10px 40px 10px 40px;
	margin-top: 10px;
	margin-left: 20px;
		border-style: solid;
  border-width: 1.5px;
	border-color: rgba(0,0,0,1.00);
	margin: 0 auto;
	
}

.choosewd:hover{
	background-color:rgba(191,191,191,1.00);
}

.seclist{
	margin-left: 200px;
}

.areawd{
	text-align: center;
	color: rgba(0,0,0,1.00);
	width: 80%;

}


.way{
	width: 100%;
	height:auto;
	background-color: #eeede9;

	padding: 30px;
	color: rgba(0,0,0,1.00);
	margin-top: 10%;
}


.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 20%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: #FFFFFF;}
#News {background-color: #FFFFFF;}
#Contact {background-color: #FFFFFF;}
#About {background-color: #FFFFFF;}
#test {background-color: #FFFFFF;}

.productpost{
	width: 325px;
		border-style: solid;
  border-width: 1.5px;
	border-color: rgba(0,0,0,1.00);
	margin: 5px;
	color: rgba(0,0,0,1.00);
	display: inline-block;

}

.shopcarbut{
	width:150px;
	height: 50px;
	margin-left: 30px;
	background: rgba(70,70,70,1.00);
	color: rgba(255,255,255,1.00);
}
.shopcarbut:hover{
		background:rgba(172,168,169,1.00);

}


/* ******************************************************
	Author URI: https://codeconvey.com/
	Demo Purpose Only - May not require to add.
	font-family: 'Work Sans', sans-serif;
*********************************************************/





html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

article{
	width: 80%;
	margin: 0 auto;
}

article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {

}
footer {
	font-family: "Lato","Avenir Next",Arial,sans-serif;
    background-color: #f1f1eb;
    color: #2e2e17;
    font-size: 1em;
    font-weight: 300;
    line-height: 25px;
    padding: 1em;
    text-align: center;
}
.footer {
	font-family: "Lato","Avenir Next",Arial,sans-serif;
    background-color: #f1f1eb;
    color: #2e2e17;
    font-size: 1em;
    font-weight: 300;
    line-height: 25px;
    padding: 1em;
    text-align: center;
	margin-top: 200px;
	width: 100%;
}
body {
    color: #fff;
    font-size: 100%;
    line-height: 24px;
    margin: 0;
	padding:0;

}
.lable{
	width: 80px;
	display: inline-block;
	color: #8D8C8C;
	margin-top: 30px;
	margin-top: 30px;
	border-style: hidden;
}
.col-rt-2 .hptsales a{
	margin-left: 50%;
	
}


a{
	font-family: "Raleway",sans-serif;
	text-decoration: none;
	outline: none;
}
a:hover, a:focus {
	color: #373e18;
}
section {
    float: left;
    width: 100%;
	 margin-top:3em;
	 margin-bottom:2em;
}
h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    line-height: normal;
	text-transform:uppercase;
}
h2 span {
    display: block;
    padding: 0;
    font-size: 18px;
    opacity: 0.7;
    margin-top: 5px;
	text-transform:uppercase;
}

#float-right{
	float:right;	
}

/* ******************************************************
	Header
*********************************************************/

.ScriptTop {
    background: #fff none repeat scroll 0 0;
    float: left;
    font-size: 0.69em;
    font-weight: 600;
    line-height: 2.2;
    padding: 12px 0;
    text-transform: uppercase;
    width: 100%;
	position:relative;
	z-index:999;
  border-bottom: 2px solid #4CAF50;
}

/* To Navigation Style 1*/
.ScriptTop ul {
    margin: 24px 0;
    padding: 0;
    text-align: left;
}
.ScriptTop li{
	list-style:none;	
	display:inline-block;
}
.ScriptTop li a {
}
.ScriptTop li a:hover{
	background:#000;
	color:#fff;
}
#contactus{	
	position: -webkit-sticky; 
  position: sticky;
	margin-left: 95%;
	position: fixed;
	display: inline-block;
	padding: 10px;


	

}

/* Header*/
.ScriptHeader {
    float: left;
    width: 100%;
    padding-bottom: 3em;
}
.rt-heading {
    border-bottom: solid 1px #fff;
    padding-bottom: 10px;
    margin: 0 auto;
}





/* ******************************************************
	Live Demo
*********************************************************/





/* ******************************************************
	Responsive Grids
*********************************************************/

.rt-container {
	margin: 0 auto;
	padding-left:12px;
	padding-right:12px;
	
}
.rt-row:before, .rt-row:after {
  display: table;
  line-height: 0;
  content: "";
}

.rt-row:after {
  clear: both;
}
[class^="col-rt-"] {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  padding: 0 15px;
  min-height: 1px;
  position: relative;
}


@media (min-width: 768px) {
  .rt-container {
    width: 750px;
  }
  [class^="col-rt-"] {
    float: left;
    width: 49.9999999999%;
  }
  .col-rt-6, .col-rt-12 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
	.rt-container {
		width: 1170px;
	}
	.col-rt-1 {
		width:16.6%;
	}
	.col-rt-2 {
		width:10%;
	}
	.col-rt-3 {
		width:50%;
	}
	.col-rt-4 {
		width: 67.664%;
	}
	.col-rt-5 {
		width: 83.33%;
	}
			.tila1{
		display:none;
	}

}

@media only screen and (min-width:240px) and (max-width: 768px){
	 .ScriptTop h1, .ScriptTop ul {
		text-align: center;
	}
	.ScriptTop h1{
		margin-top:0;
		margin-bottom:15px;
	}
	.ScriptTop ul{
		 margin-top:12px;		
	}
	
	.ScriptHeader h1,
	.ScriptHeader h2, 
	.scriptnav ul{
		text-align:center;	
	}
	.scriptnav ul{
		 margin-top:12px;		
	}
	#float-right{
		float:none;	
	}
	.topa{
		margin-left: 0%;
	}
		.tila{
		display: none;
	}
.tila1{
		display:inline-block;
	}
}




body, html {

	width: 100%;
  font-family: sans-serif;



}
 

.parallax [class*="pxbg__"] {
  position: relative;
  height: 50vh;
  text-indent: -9999px;
  background-attachment: fixed;
  background-position:bottom;
  background-size: cover;
}
.parallax [class*="pxbg__"]:nth-child(2n) {
  box-shadow: inset 0 0 1em #111;
}
.parallax .pxbg__foo, .parallax .pxbg__bazz {
  height: 100vh;
}
.parallax .pxbg__foo {
}
.parallax .pxbg__bar {

	color: #FFFFFF;
	height: 250px;
}
.parallax .pxbg__bar1{

}
.pxbg__bar1{
		 display: inline-block;

}
.pxbg__bar{
		 display: block;
	height: 50px;

}
 .pxbg__bar1POST{
 border-style: solid;
	 border-width: 2px;
	width: 300px;
	height:auto;
	margin-left: 20px;
	 display: inline-block;
	 float: left;
	 color: rgba(0,0,0,1.00);
  margin-bottom: 16px;
	 align-items: center;
}
 .pxbg__bar1POST1{
	width: 300px;
	height:auto;
	margin-left: 30px;
	 display: inline-block;
	 float: left;
	 color: rgba(0,0,0,1.00);
  margin-bottom: 16px;
  padding: 0 8px;
}
 .pxbg__bar1POST1tx{
	width: 100%;
	height:auto;
	 display: inline-block;
	 float: left;
	 color: rgba(0,0,0,1.00);
  margin-bottom: 16px;
  padding: 0 8px;
	 text-align: center;
	 font-size: 35px;
}

.parallaxContent {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    padding: 2em 0;
    text-align: center;
}
.parallaxContent.green{
	background:#97ce68;
}
.parallaxContent.baby{
	background:#68c8ce;
}

footer {
	font-family: "Lato","Avenir Next",Arial,sans-serif;
    background-color: #f1f1eb;
    color: #2e2e17;
    font-size: 1em;
    font-weight: 300;
    line-height: 25px;
    padding: 1em;
    text-align: center;
}
.title_2{
	width: 90%;
	height:80px;
	background-color: rgba(213,213,213,1.00);
font-size:125%;
	border-style: solid;
	border-width: 1.5px;
	text-align: center;
		border-style: solid;
	 border-width: 2px;
	border-color: rgba(0,0,0,1.00);

}

.title{
	background-color: rgba(213,213,213,1.00);
	border-style: solid;
	border-width: 1.5px;
	text-align: center;
			border-style: solid;
	 border-width: 2px;
	border-color: rgba(0,0,0,1.00);
color: rgba(0,0,0,1.00);
}

.cart_outline{
	border-style: none solid solid solid;
	border-width: 1.5px;
	border-color: rgba(0,0,0,1.00);
  	height: 1000px;
}

.cart_outline2{
	border-style: solid;
	border-width: 1.5px; 	
}

.cart{
	magin:0 auto;
	width:100%;
	*zoom: 1;
	color: rgba(0,0,0,1.00);
}

.cart:after {
  	content: "";
  	display: table;
  	line-height: 0;
  	clear: both;
}

.picture, .word {
  display: inline-block;
  margin: auto;
  float: left;
}

.picture{
	padding:20px;
	width: 300px;
	height: 300px;
}

.word{		
	padding:30px;
	display: inline-block;
	width:500px;
	height:50px;
}

.next_button{
	display: inline-block;
	margin-left: 80px;
	background: rgba(213,213,213,1.00);
	font-size: 25px;
}

.cart_2{
	padding: 20px;
}

.table{
	width: 100%;
}

.shopping_w1{
	height: 50px;
	text-align: center;
	border-bottom: 1px solid #d2d2d2;
	color: rgba(0,0,0,1.00);
}

.text{
	display: inline-block;
	width:200px;
	height: 25px;
}

.cart_3{
	padding: 20px;
	text-align: center;
	font-size: 25px;
}
.payway{
	display: inline-block;
	
}