/* Put your css in here */
.modal-backdrop, .modal-content {
   background-color: black;
}
#logo{
  padding:15px;
}
#bg{
  background-image:url('/images/bushy.png');
    background-repeat:no-repeat;
    background-size:fill;
    background-position: 0px 40px;
    background-attachment: fixed;

    position: fixed;
    width:100%;
    height:800px;
}
#splash{
    background-image:url('/images/woodtable6.png');
    background-repeat:no-repeat;
    background-size:fill;
    min-height:545px;
    width:100%;
    margin-top: 40px;
    margin-bottom: 0px;
}
#splash h1{
  width:100%; color:white; font-size:35px;
  font-family: 'Merriweather', serif;

}
#splash2{
    background-image:url('/images/splash.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    min-height:545px;
}
.splashRight{
  float:right;
  width:100%;
  padding:30px;
    background: rgba(255,255,255,.45)

}
#splashLeft{
  float:left;
  width:50%;
  padding:30px;
}
#watchVideo, .watchVideo{
  display: inline-block;
  padding: 13px 27px;
  background: #7AC145;
  border-radius: 3px;
  font-size: 20px; 
  color:white;
  margin-top:40px;
  
  margin-bottom:10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .5s ease;
}
#watchVideo:hover, .watchVideo:hover{
  background: #8BD848;
  -webkit-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
}
#buyNow, #faqButton{
  margin-left:10px;
  display: inline-block;
  padding: 13px 27px;
  background: #766D56;
  border-radius: 3px;
  font-size: 20px; 
  color:white;
  font-weight: 500;
  cursor: pointer;
  transition: all .5s ease;
}
#buyNow:hover, #faqButton:hover{
   background: #877B61;
   -webkit-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.55);
}
.buyNow{
  display: inline-block;
  padding: 5px 10px;
  background: #7AC145;
  border-radius: 3px;
  font-size: 14px; 
  color:white;
  font-weight: 500;
  cursor: pointer;
  margin-top:15px;
  transition: all .5s ease;
}
.buyNow:hover{
  -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);
}

body{
    background:white;
    font-family:helvetica neue;
    font-size:14px;
  }

   header img{
    width:250px; 
    margin-left:5px;
  }

  header span{
    cursor: pointer;
  }
  header{
    padding-bottom: 0px;
    background:white;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    float: left;
    width:100%;
  }
  header li a{
    margin-right:30px;
    color:#777;
    width:100%;
    display:none;
    padding:10px;
    background:white;
    border-bottom: 2px solid white;
    transition: all .5s ease;
  }
  .bars{
    display: inline-block;
    position: fixed; right:20px; top:22px;
  }
  a:hover, a:focus, a.active{
    text-decoration:none;
    color:#7AC145;

  }
 #content, #faq{
  padding:40px;
  margin-top: 40px;
 }

 #faq h1{
  font-size:50px;
 }
 #faq ul{
    font-size:35px;
 }
 #faq ul li{
  list-style-type: none;
  margin-top: 20px;
 }
 #faq ul li.question .productLogo{
    height:45px;
  position: relative; top:-12px;
 }
 #faq ul li.question{
    font-weight: bold;
    padding-left: 45px;
    background-image: url(/images/leaf.svg);
    background-repeat: no-repeat;
    background-position: 0px 10px;
 }
 #faq ul li.answer{
    font-size:18px;
    color:#333;
    line-height: 30px;
    margin-bottom: 40px;
 }
 #faq .productLogo{
  height:70px;
 }
 #faq ul li .productLogo{
  height:22px;
  position: relative; top:-6px;
 }
 .primary-nav {
    list-style-type:none;
    padding:0;
    text-align: center;
}

.left {
    margin-right:auto;

}
.view{
  width:100%; float:left;
}
.product{
  padding:0px 7px;
}
.product img{
  width:100px;
}
.product .name{
  font-weight: bold;
  font-size: 16px;
}
.product .name img{
  height: 20px;
  position: relative;
  top:-6px;
  width:auto;
}
.product .description{
  color:#888;
  margin-top:2px;
}
.product .each{
  color:#888;
  margin-top:5px;
}
.product .total{
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.product .image{
  height:150px;
  align-items: center;
  display:flex;
}
.right{
  float:right;
}
.product .image img{
  position:relative;
  margin: auto;
}
#quickBuy{
  background: white;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0px;
}
@media screen and (min-width: 600px) {
  /*
  full screen 
  */
#splash h1{
  width:100%; color:white; font-size:60px;
    font-family: 'Merriweather', serif;

}
#logo{
  padding:0px;
}

 a.active{
   border-bottom: 2px solid #7AC145;
}

header li a{
  display: inline-block;
}
  .bars{
    display: none;
  }


#quickBuy {
  text-align: left;
  width:100%;
  padding:10px 40px;
  background: white;
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    justify-content:space-between;
    align-items: center;
}

.primary-nav {
  padding:10px;
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    justify-content:flex-end;
    align-items: center;
}
  .splashRight{
    width:50%;
    padding:70px;
    padding-top:45px;
    padding-bottom: 0px;
    min-width: 600px;
    background:none;
  }


  
}




/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0%      { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%    { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to      { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from    { opacity: 0.3; -webkit-transform: scale(0.8); }
}
@keyframes fadeIn {
    from    { opacity: 0.3; }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from    { transform:translateY(100%); }
    to      { transform: translateY(0); }
}

  .ng-enter           { animation: fadeIn 0.5s both ease-in; z-index: 8888; }
  /*.ng-leave           { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }*/