@import url(cssreset.css);
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {height:100%;}
body {
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 40px;
  color: #fff;
  font-size:20px;
  font-weight:300;
  line-height: 1.8em;
  text-align:center;
  background-color: #000;
  width: 100%;
  height: 100%;
}
footer {
  font-size: 0.7em;
  margin-top:4em;
  padding: 0.5em 0;
  border-top:1px solid #2e2d2d;
}
.block {display: block;}
.bold {font-weight: bold;}
.color {color:#e92d00;}
.extrabig {font-size:120%;}
.extrabsmall {font-size:80%;}
.txtthin {font-weight: 300;}
.txtL {text-align: left;}
.txtR {text-align: right;}
.clear {clear:both;}

/* CUSTOMIZE Bootstrap.css
-------------------------------------------------- */
h1 {
  font-size:2.8em;
  font-weight:300;
  line-height:1em;
}
h2 {
  font-size:2em;
  font-weight: 300;
}

h5 {
  font-size:1.2em;
  font-weight:300n;
}


@media (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}


/* candy
-------------------------------------------------- */
h1 {
	text-transform:capitalize;
  margin-bottom:0.5em;
}
h2 {
  text-transform:capitalize;
  margin-bottom:0.5em;
}
figure.full-image {
  width:100%;
  margin:0 auto;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
}
div.vcenter {
  position: absolute;
  top:50%;
  width:100%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Navigation
-------------------------------------------------- */
#header {
  background-color: rgb(0, 0, 0); /*未支援瀏覽器指定不透明色*/
  border-bottom:1px solid #2e2d2d;
  width:100%;
  height:50px;
  clear:both;
  position:fixed;
  top:0;
  z-index: 99;
  display:none;
}
#header #logo img{
  height:50px;
}
nav ul {
  margin:0;
  float:right;
}
nav ul li {
  margin-right:2em;
  list-style: none;
  float:left;
}
nav ul li a:hover {
  text-decoration: none;
}

/* Hero Page
-------------------------------------------------- */
#heropage {
  height:120%;
  min-height:120%;
  position: relative;
  background-image: url("../images/hero-bg.jpg");  
  background-size: cover;
  -moz-background-size:cover;        /*for Firefox*/
  -webkit-background-size:cover;        /*for Google Chrome、Safari*/
  -o-background-size:cover;        /*for Opera*/
  background-position: center;
}
#heropage figure img {
  width:350px;
  max-width:80%;
}
#heropage p {
  width:90%;
  max-width:1170px;
  margin:0 auto 2em auto;
  color:#d3d3d3;
}
#heropage h1 {
  margin-top:1em;
}
#heropage a {
  width:100%;
  color:#ccc;
  font-size:3em;
}
#heropage a:hover {
  color:#fff;
}



/* Feature
-------------------------------------------------- */
#feature {
  height:auto;
  min-height:100%;
  position: relative;
  padding-top:3em;
  padding-bottom:3em;
}
#feature h1 {
  margin-top:3em;
}

#feature .container {
  margin-top:4em;
}



/* Produce
-------------------------------------------------- */
#produce {
  height:auto;
  min-height:400px;
  position: relative;

  background-image: url("../images/produce-bg-lg.jpg");  
  background-size: cover;
  -moz-background-size:cover;        /*for Firefox*/
  -webkit-background-size:cover;        /*for Google Chrome、Safari*/
  -o-background-size:cover;        /*for Opera*/
  background-position: center;
}


/* Product
-------------------------------------------------- */
#product {
  height:auto;
  min-height:100%;
  position: relative;
  padding-top:3em;
}
#product h1 {
  margin-top:3em;
}
#product h2 {
  font-size:1em;
}
#product h2 a {
  color:#fff;
}
#product h2 a:hover {
  text-decoration: underline;
}
#product .row div {
  margin-top:2em;
}
/* Story
-------------------------------------------------- */
#story {
  height:auto;
  min-height:500px;
  position: relative;
  padding-bottom:3em;
  margin-bottom:3em;
}
#story h1 {
  margin-top:3em;
}

/* Map
-------------------------------------------------- */
#map {
    width: 100%;
    height: 300px;
    margin-top: 100px;
}


/* Contact
-------------------------------------------------- */
#contact {
  height:auto;
  min-height:500px;
  position: relative;
  padding-bottom:3em;
  margin-bottom:3em;
}
#contact h1 {
  margin-top:3em;
}
#contact i {
  font-size: 2em;
  color:#7497a0;
  line-height:1.5em;
}
#contact a {
  color:#fff;
}
#contact a:hover {  
  text-decoration: underline;
}


/* Responsive
-------------------------------------------------- */
@media screen and (max-device-width: 768px) { 
  #heropage a {bottom:0;}
  #produce {min-height:600px;}
  #contact {min-height:700px;}
}

@media screenand (max-device-width: 992px) {
  body {font-size:16px;}
  #heropage a {bottom:0;}
  div.col-md-4 figure img {width:90%;margin-top:3em;}
}

@media (min-width:993px) {
  div.col-md-4 figure img {width: 300px;}
}
@media screen and (min-device-width:993px) {
  #heropage a {bottom:0;}
}


@media all and (orientation: portrait) {
  #heropage {min-height:200%;}
}