* { box-sizing: border-box; padding: 0; margin: 0; }
body, html { font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.25; background-color: #fff; color: #333; font-smoothing: antialiased; height: 100%; margin: 0; }
img { height: auto; max-width: 100%; }
p { font-size: 16px; line-height: 1.4; margin: 15px 0 15px; }
#hero h1 { font-family: 'Raleway Dots', sans-serif; font-size: 120px; color: #fff; position: absolute; top: 45%; left: 40px; opacity: .75; animation: fadeUp .5s ease-out 1s both; }
h2 { font-size: 30px; color: #fff; margin: 15px 0 25px; }
h3 { font-size: 14px; color: #fff; opacity: .75; letter-spacing: 11px; }
h4 { letter-spacing: 5px; text-transform: uppercase; font-size: 22px; color: #111; line-height: 1.2em; padding: 15px 0; text-align: center; }

.center { text-align: center; margin: 15px auto; }
.content img { width: 100%; max-width: 400px; vertical-align: center; }

#topBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; color: #000; margin: 0; cursor: pointer; transition: 0.2s; font-size: 40px; }
#topBtn:hover { color: #333; }

#menu { position: relative; text-align: right; right: 40px; top: 30px; z-index:2; animation: navigationIn .5s ease-out .75s both; opacity: 0; }
#menu-footer { position: relative; text-align: center; }
#menu ul li, #menu-footer ul li { display: inline-block; padding: 10px 10px; }
#menu ul li:last-child { padding-right: 0px; }
#menu ul li > a, #menu-footer ul li > a { display: block; color: #fff; text-decoration: none; transition: 0.3s; font-size: 25px; }
#menu ul li:hover > a, #menu-footer ul li:hover > a { opacity: .5; }

a.cta-button { display: block; background-color: #333; border-radius: 5px; border: 2px solid #333; color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; padding: 10px 25px; text-align: center; text-decoration: none; width: 100%; max-width: 400px; margin: 0 auto; }
a.cta-button:hover { background-color: transparent; border: 2px solid #333; color: #333; text-decoration: none; }

.content { width: 100%; background-color: #efefef; padding: 0; }
.content.gray { background-color: #efefef; }

a { color: #39c; text-decoration: none; }
a:hover { color: #6cf; text-decoration: underline; }

#header { position: fixed; width: 100%; height: 120px; margin: 0 auto; top: 0; z-index: 5; animation: slideDown .5s ease-out 0s; }
#header:before { animation-fill-mode: none; -webkit-backdrop-filter: blur(10px) saturate(10%); backdrop-filter: blur(10px) saturate(10%); bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 0; background-color: rgba(0,0,0,.4); }
#logo { position: absolute; margin: 0 auto; left: calc(50% - 50px); width: 150px; height: 120px; display: block; background-size: contain; background-image: url("../images/logo_gm.png"); opacity: .25; transition: 0.3s;}
#title { position: absolute; top: 34px; left: 40px; display: block; color: #fff; text-transform: uppercase; transition: 0.3s; text-shadow: 0px 1px 2px rgba(0,0,0,.3); animation: logoIn .5s ease-out .5s both; opacity: 0; }
#title h1 { font-size: 28px; color: #fff; letter-spacing: 3px; }
#title h3 { font-size: 14px; color: #fff; opacity: .75; letter-spacing: 12px; }

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 { position: relative; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.bg { position: relative; }
.bgShort { position: relative; }

#hero { animation: fadeDown 1s ease-out both; }
.bgimg-1 { background-image: url("../images/driftwood.jpg"); min-height: 700px; }
.bgimg-2 { background-image: url("../images/deer_fawn.jpg"); min-height: 400px; }
.bgimg-3 { background-image: url("../images/international_truck.jpg"); min-height: 400px; }
.bgimg-4 { background-image: url("../images/crap_apple_silhouette.jpg"); min-height: 400px; }
.bgimg-5 { background-image: url("../images/flower_macro.jpg"); min-height: 400px; }
.bgimg-6 { background-image: url("../images/field_cattails.jpg"); min-height: 600px; }

.captionBox1 { position: absolute; max-width: 500px; background-color: rgba(0, 0, 0, .45); padding: 30px 40px; margin-left: auto; right: 40px; z-index: 1; /*top: 35%;*/ top: calc(50% - 110px); animation: fadeRight .5s ease-out 1s both; }
.captionBox2 { position: absolute; left: 10%; top: 35%; width: 80%; padding: 20px 40px; margin: 0 auto; text-align: center; color: #000; z-index: 1; background-color: rgba(0, 0, 0, .75); }
.captionBox1 h2, .captionBox2 h2 { color: #fff; }
.captionBox1 p, .captionBox2 p { color: #fff; }

.caption { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: #000; z-index: 1; }
.caption span.border { background-color: rgba(0, 0, 0, .75); color: #fff; padding: 18px; font-size: 20px; letter-spacing: 5px; text-transform: uppercase; }

.about { background-color: #fff; text-align:center; padding: 20px 40px; text-align: justify; animation: fadeUp .75s ease-out 1s both; }
.about h4 { text-align: center; }
.about p { color: #777; }

.sectional { position: relative; text-align: center; padding: 30px 60px; text-align: justify; }
.dark_bg { color: #ddd; background-color: #282E34; }
.light_bg { color: #333; background-color: #ffffff; }
.white_bg { color: #333; background-color: #ffffff; height: 100px; animation: fadeUp .5s ease-out 1s both; }

@media screen and (max-width:770px) {
    #logo { margin: 0; left: auto; right: 0; opacity: .1; width: 100px; height: 80px; }
	  .sectional { padding: 20px 30px; }
    .captionBox1 { width: 90%; right: 0; left: 0;  margin: 0 auto; top: calc(50%); padding: 10px 30px; }
    .captionBox2 { top: 25%; padding: 10px 30px; }
    #hero h1 { right: 0; left: 0; margin: 0 auto; top: 20%; text-align: center; color: #333; }

    #menu { right: 20px; top: 15px; }
    #header { height: 80px; }
    #title { top: 17px; left: 20px; }
    #title h1 { font-size: 25px; letter-spacing: 3px; }
    #title h3 { font-size: 11px; letter-spacing: 12px; }
    .juicer-feed { padding: 20px 0 !important; }
    p { font-size: 15px; line-height: 1.3; }
    h2 { font-size: 24px; margin: 15px 0 15px; }
    h3 { font-size: 12px; }
    h4 { font-size: 20px; }
}

@media screen and (max-width:375px) {
    #logo { display: none; }
    #menu { display: none; }
    .bgimg-1 { min-height: 350px; }
    .captionBox1 { display: none; }
    #title { left: auto; margin: 0 auto; text-align: center; }
    #title { left: auto !important; margin: 0 auto !important; display: table; position: relative !important;}
}

@media only screen and (max-device-width: 1366px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 { background-attachment: scroll !important; background-size: cover; }
}

@keyframes slideDown {
  0% { opacity: 0; transform: translate(0px, -120px); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translate(0px, 10px); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes fadeDown {
  0% { opacity: 0; transform: scale(1.2, 1.2) translate(0px, -50px); transform-origin: center center; }
  100% { opacity: 1; transform: scale(1,1) translate(0px, 0px); transform-origin: center center; }
}
@keyframes fadeRight {
  0% { opacity: 0; transform: translate(50px, 0px); }
  100% { opacity: 1; transform: translate(0px, 0px);  }
}
@keyframes logoIn {
  0% { opacity: 0; transform: translate(-20px, 0px); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes navigationIn {
  0% { opacity: 0; transform: translate(20px, 0px); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}