/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #ffffff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 30px; /* Place content 30px 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 8px;
    text-decoration: none;
    font-family: "Arial", sans-serif;
    font-size: 2vw;
    color: #818181;
    display: block;
    transition: 0.3s
}
 
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
 
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 5vw;
    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;
    overflow:hidden;
    width:100%;
}
body {
    font-family: 'Noto Sans TC', 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
    overflow-x: hidden;
    background-color: white;
	margin: 0;
	padding: 0;
	color: #000;
}
a:link, a:visited {
  color: #ff5b61;
}
a:active {
  color: #ff5b61;
}
 
/* Add a black background color to the top navigation */
.topnav {
    background-color: #ffffff;
    overflow: hidden;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
}
 
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 5vw;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
 
/* 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: 5vw;}
}

@media only screen and (max-width: 800px) {
     .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 5vw;}
}

a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:rotate(180deg);
  }
}
 
#ico{
  display: none;
}
 
.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 100%;
  @include border-radius(5px);
 
  #transition: all 0.5s ease;
 
  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;
 
    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }
 
    &:hover{
      background: #555;
    }
  }
}

/* Order Form Styles */

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-size: 50px;
}

input[type=text]:focus {
  background-color: lightyellow;
}

textarea:focus {
  background-color: lightyellow;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #ffffff;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}

input[type=submit]:hover {
  background-color: #3c5110;
}

input[type=reset] {
  background-color: #ffffff;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}

input[type=reset]:hover {
  background-color: #3c5110;
}

input.largerBox {
  width: 40px;
  height: 40px;
}
		
button[type=submit] {
  background-color: #ffffff;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}

button[type=submit]:hover {
  background-color: #3c5110;
}

button[type=reset] {
  background-color: #ffffff;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}

button[type=reset]:hover {
  background-color: #3c5110;
}


.container {
  border-radius: 5px;
  background-color: #ffffff;
  padding: 20px;
}

.col-L {
  float: left;
  width: 30%;
  margin-top: 6px;
  font-family: Georgia, Times New Roman;
  font-size: 30px;
}

.col-R {
  float: left;
  width: 70%;
  margin-top: 6px;
  font-family: Georgia, Times New Roman;
  font-size: 30px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 2000px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 2000px) {
  .col-L, .col-R, input[type=submit] {
    width: 100%;
    margin-top: 0;
	font-size:5vw;
  }
}



div.top {
  background-color: #ffffff;
  padding: 1px;
}

@media screen and (min-width: 601px) {
  div.top {
    font-size: 30px;
	font-family: Arial, 微軟正黑體;
	color: #3c5110;
	font-weight: bold;
	text-align:center
  }
}

@media screen and (max-width: 600px) {
  div.top {
    font-size: 15px;
	font-family: Arial, 微軟正黑體;
	color: #3c5110;
	font-weight: bold;
	text-align:center
  }
}

.remarks {
  font-family: Georgia, Times New Roman;
  font-size: 25px;
}

.remarks1 {
  font-family: Times New Roman;
  font-size: 5vw;
  color: #3c5110;
}

.remarks2 {
  font-family: Georgia, Times New Roman;
  font-size: 30px;
  font-weight: bold;
}

.remarks3 {
  font-family: Times New Roman;
  font-size: 25px;
  font-weight: bold;
  color: #ff5b61;
}

.remarks4 {
  font-family: Georgia, Times New Roman;
  font-size: 15px;
  font-weight: bold;
}

.remarks5 {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(20px + 0.390625vw);
  color: #3c5110;
  font-style: italic;
  font-weight: bold;
}

.remarks6 {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(17px + 0.390625vw);
  color: #3c5110;
  font-style: italic;
  font-weight: bold;
}

.price0 {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(18px + 0.390625vw);
  color: gray;
  text-decoration: line-through;
}

.price {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(18px + 0.390625vw);
  color: #3c5110;
  font-style: italic;
  font-weight: bold;
}

.price0-a {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(28px + 0.390625vw);
  color: gray;
  text-decoration: line-through;
}

.price-a {
  font-family: Times New Roman, 微軟正黑體;
  font-size: calc(28px + 0.390625vw);
  color: #3c5110;
  font-style: italic;
  font-weight: bold;
}


.remarks-tc {
  font-family: 微軟正黑體;
  font-size: 5.5vw;
  color: #3c5110;
  font-style: italic;
  font-weight: bold;
}


.collapsible {
  background-color: #fff;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Footer Menu */

* {
  box-sizing: border-box;
}

.f1 {
  float: left;
  width: 20%;
  align: center;
}

.f2 {
  float: left;
  width: 20%;
  align: center;
}

.f3 {
  float: left;
  width: 20%;
  align: center;
}

.f4 {
  float: left;
  width: 20%;
  align: center;
}

.f5 {
  float: left;
  width: 20%;
  align: center;
}



@media only screen and (max-width: 800px) {
  /* For mobile phones: */
  .f1, .f2, .f3, .f4, .f5 {
    width: 100%;
  }
}

/* Responsive Image Gallery */

div.gallery {
  border: 0px solid #ccc;
}

div.gallery:hover {
  border: 0px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}