/*-------------------------
GENERAL STYLE CSS

Body, Fonts, links

-----------------------*/

body{
	
	font-family:'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif;
	line-height:1.5;
	font-size:16px;
	background-color:white;
	margin:0px;
	padding:0px;
	color:#505759;
	z-index:800;
		
}

.content{
    width:100%;
	position:absolute;
	top:0;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;

}



/*------------------------
         FONTS
-------------------------*/

h1 {font-size: 200%; margin-bottom: 0px ; margin-top: 0;letter-spacing:0.1em;}
h2 {font-size: 160%; margin-bottom: 3px ; margin-top: 0;letter-spacing:0.1em;}
h3 {font-size: 120%;  margin-bottom: 0; margin-top: 0;letter-spacing:0.1em;}
h4 {font-size: 100%;  margin-bottom: 0; margin-top: 0;letter-spacing:0.1em;}

p        {font-size: 100% ;margin-bottom: 0; margin-top:0;letter-spacing:0.1em; text-align:justify;text-justify:inner-word; }
p.strong {font-weight:bold;letter-spacing:0.1em;}
p.small  {font-size: 80% ;margin-bottom: 0; margin-top:0;letter-spacing:0.1em;}


/*------------------------
         LINKS 
-------------------------*/

a:link, a:visited{
  
  font-size:100%; 
  text-decoration:none;
  font-weight:100;
  background-color:transparent;
  letter-spacing:0.03em;
 
}


p a:link    {color:#00bfb2;text-decoration:none;}
p a:visited {color:#00bfb2;}



#indexpagelink p a:hover   {text-decoration:underline;}
#indexpagelink p a:active  {text-decoration:underline;}




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

h1 {font-size:140%; }
h2 {font-size:120%;}
h3 {font-size:100%; font-weight:bold;}


p    {font-size: 90% }
ul li{font-size: 90% }
p.strong {font-weight:bold; }
p.small  {font-size: 80% ;}

a:link, a:visited{
  font-size:90%; 
  text-decoration:none;

}
}

     
    
/*------------------------------------------------------------------------------------------------------------------------------
         												HEADER 
--------------------------------------------------------------------------------------------------------------------------------*/



/*----Header Icons----*/

.fa-search {
	color:#00bfb2;
	padding: 5px 5px;
	font-size:18px;

}

.fa-search:hover{
	color:#006d65 ;	
}


.fa-facebook-f{
	color:#00bfb2;	
	padding: 5px 5px;
	font-size:18px;

}

.fa-facebook-f:hover{
	color:#006d65 ;	
	
}


.fa-shopping-cart{
	color:#00bfb2;	
	padding: 5px 15px 5px 5px;
	font-size:18px;

}

.fa-shopping-cart:hover{
	color:#006d65;	
	
}

.sticky{
    border-bottom:3px solid #00bfb2e;
    
}

.sticky2{
   border-bottom:3px solid #00bfb2e;
   overflow:hidden;

}


/*--Language Selections Button--*/

.language-selections{
   text-align:right;
   display:inline-block;
   width:28%;
   margin:10px 0;
   padding-right:0;


  
}

.language-selections ul li{
   text-align:center;
   display:inline-block;
   padding:5px;
   margin:0;
   font-size:small;
   
}


.language-selections ul li a:hover{
      color:#00bfb2;
   
}




/*--Header Links--*/

header a:link   {color:#505759 ; font-size:95%;}
header a:visited {color:#505759 ; font-size:95%;}
header a:hover, a:active {color:#00bfb2; font-size:95%;}




/*-------------------------------------
         	DESKTOP HEADER 
--------------------------------------*/



.ipad-header, .mobile-header{
	display:none;
}




/*--Header Container--*/

header nav{
	background-color:#fff;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    
}

/*delete later--*/
header .bignav{
	background-color:#fff;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    
}


/*--Menu Container--*/
.top-category{
   text-align:left;
   display:inline-block;
   width:50%;
   margin:10px 0;
   padding-left:40px; 	
} 

.top-category-ul li{
	font-size:95%;
}
.top-category ul li:hover .menu-sub {
	display:block;


}

.top-category ul li:hover i { 
	transform: rotate(90deg); 
}

.top-category ul li:hover {
	color:#00bfb2;	

}





/*--Logo Container--*/

header nav div.logo {
   text-align:left;
   display:inline-block;
   float:left;
   width:12%;
   margin:10px 0;
   padding-left:40px;	
} 

.logo img{
   width:180px;
   height:auto;	
}


/*--Menu and right icons container--*/
header nav div ul {
	list-style:none;
	text-align:left;
	position:relative;
	margin:-10px;
	padding:0;
		
}

header nav div ul li{
	display:inline-block;
	margin-top:0;
	padding:1.9em 1em 5em 1em;
			
}



/*--Sub Menu --*/

.menu-sub {
	position:absolute;
	width:100%;
	display:none;
	padding:2em;
	padding-top:10px;
	margin-top:25px;
	margin-left:-1em;
	background-color:#fff;
	z-index:1000;
	border-top:3px solid #00bfb2;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
	
}



.menu-sub li{
	display:block;
	padding:0;
	margin:0;
	font-size:85%;
	font-weight:normal;	
}


.menu-sub li a{
	padding:0;
	padding-left:.8em;
	margin-bottom:.3em;
			
}


.menu-category{
	margin:1.2em 0;
	font-size:90%;	
	color:#00bfb2;

}


.menu-col-1, .menu-col-2, .menu-col-3{
	float: left;
	text-align:left;
	margin:0;
	padding:0;
	
}


.menu-col-1,.menu-col-2{
  width:35%;
}





/*-------------------------------------
         	IPAD-PRO HEADER 
--------------------------------------*/


@media screen and (max-width:1024px){
	
.ipad-header, .mobile-header {
	display:none;
}

.DesktopHeader{
	display:block;
}

header nav{
	background-color:#fff;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
  
     
}


.top-category{
   text-align:left;
   display:inline-block;
   width:50%;
   margin:10px 0;
   padding-left:80px;
     
	
} 


.language-selections{
   text-align:right;
   display:inline-block;
   width:22%;
   margin:10px 0;
   padding-right:15px;
    

}

.menu-sub{
  width:80%;
}


.menu-col-1,.menu-col-2{
  width:50%;
}


}


/*-------------------------------------
         	IPAD HEADER 
--------------------------------------*/


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

.DesktopHeader, .mobile-header{
	display:none;
}


.ipad-header {	
	display:block;
	background-color:;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    border-bottom:3px solid #00bfb2;

}

.ipad-header nav{
 	height:80px;  
 	margin-top:0;
 	
 	

}

.mobile-toggle{
	width:20%; 
	display:inline;
	text-align:center;
	margin-left:7%;
	margin-top:15px;
}

.mobile-search{
	width:20%; 
	display:inline;
	text-align:right;
	margin-left:18%;
	margin-top:15px;
	
}

.mobile-logo{	
   width:40%; 
   display:inline; 
   text-align:center;
   margin-left:28%;
   margin-bottom:0;
   margin-top:15px;

 
}
   
.mobile-logo img{
	width:150px;
	margin-top:15px;
	
	
}


}

/*----------------------------------------------------
         	IPHONE HEADER (landscape view) 
-----------------------------------------------------*/

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

.DesktopHeader, .mobile-header{
	display:none;
}


.ipad-header {	
	display:block;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    border-bottom:3px solid #00bfb2;

}

.ipad-header nav{
 	height:80px;  
 	margin-top:0;
 	
 	

}

.mobile-toggle{
	width:15%; 
	display:inline;
	text-align:center;
	margin-left:5%;
	margin-top:15px;
}

.mobile-search{
	width:20%; 
	display:inline;
	text-align:right;
	margin-left:15%;
	margin-top:15px;
	
}

.mobile-logo{	
   width:30%; 
   display:inline; 
   text-align:center;
   margin-left:25%;
   margin-bottom:0;
   margin-top:15px;

 
}
   
.mobile-logo img{
	width:150px;
	margin-top:15px;
	
	
}


}

/*-------------------------------------
         	IPHONE HEADER 
--------------------------------------*/

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

.DesktopHeader, .ipad-header {
	display:none;
}


.mobile-header {
    display:inherit;
	position:fixed;
	width:100%;
	height:75px;
	margin:0 auto;
	z-index:1000;
	background:#fff;
		
}

.mobile-header-innerdiv {
    display:block; 
    width:100%; 
    height:auto; 
    padding-top:0;		
}


.mobile-toggle {
	width:20%; 
	display:inline;
	text-align:center;
	margin-left:5%;
}


.mobile-search {
	width:20%; 
	display:inline;
	text-align:right;
	margin-left:5%;
}


.mobile-logo {	
   width:50%; 
   display:inline; 
   text-align:center;
   margin-left:17%;
   margin-bottom:0; 
}

   
.mobile-logo img {
	width:150px;		
}

.language-selection-mobile {
	display:block;
	width:100%; 
	height:30px;
	margin-top:20px ; 
	text-align:right;
	background:#00bfb2;

}

}





/*------------------------------------------------------------------------------------------------------------------------------
         													FOOTER
--------------------------------------------------------------------------------------------------------------------------------*/


/*---LINKS---*/

footer nav ul {list-style:none;}
footer ul li  {display:block; color:#fff; text-align:left; font-size:90%;}
footer a:hover{color:#00bfb2;}
footer a:link, a:visited {color:#fff; font-size:100%;}


/*-------------------------------------
    DESKTOP, IPAD-PRO FOOTER
--------------------------------------*/


.mobile-footer{
	display:none;
}


footer {  
   background:#00bfb2;
   background-image: linear-gradient(to right, #00bfb2 , black);
   position:relative;
   bottom:0;
   left:0;
   width:100%;
   height:300px;
   margin-top:0;
   overflow:hidden;
   z-index:900;	
  
}

.bigtable{ 
    display:block;
   	width:70%;
	height:120px;
	margin:10px auto;
    margin-top:30px;
    text-align:center;                     
}


/*--Left Column--*/

.leftcolumn{
    float:left;
    width:32%;
    margin:0;
    padding:0;  	
}


.leftcolumn nav li p{
       font-weight:bold;
       text-align:left;  
}


/*--Middle Column--*/

.middlecolumn {
    float:left;
    width:32%;
    margin:0;
    padding:0;
}

.middlecolumn nav li p{      
       font-weight:bold;
       text-align:left;   
}



/*--Right Column--*/


.rightcolumn { 
    float:left;
    width:32%;
    margin:0;
    padding:0;
   
}

.rightcolumn nav li p{       
       font-weight:bold;
       text-align:center;
 
}

.rightcolumn nav ul li {       

       text-align:center;
       margin-left:0;   
}

.rightcolumn img{
    display:inline;
	width:30px; 
    height:auto;
    padding:6px;
    margin-top:10px;  
}


article.copyright{
    width:100%;
    height:50px;
	position:absolute;
	bottom:8px;
	font-size:80%;
	text-align:center;
	margin:0 auto;		
}


article.copyright p{
	text-align:center;
	color:#fff;
	padding-top:10px;	
}




/*-------------------------------------
         	IPAD FOOTER
--------------------------------------*/

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

.bigtable{ 
    display:block;
   	width:90%;
	height:120px;
	margin:10px auto;
    margin-top:30px;
    text-align:center;
   
}

}


/*-------------------------------------
         	IPHONE FOOTER
--------------------------------------*/


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

.desktop-footer {
	display:none;
}

.mobile-footer {
	display:block;
	background:#00bfb2;
   	background-image: linear-gradient(to right, #00bfb2 , black);
	width:100%;
	height:280px;
	z-index:900;

}

article.copyright {
    width:100%;
    height:40px;
	position:absolute;
	bottom:0px;
	font-size:80%;
	text-align:center;
	margin:0 auto;	
}

article.copyright p {
	text-align:center;
	color:#fff;
	padding-top:10px;	
}

}