#wrapper
{
    position:relative;
    width:600px;
    height:252px; 
    margin:0 auto;
    border-style:transparent; /*solid*/
    border-width:2px;
    border-color:black;
}

#yield_wrap
{
    position:relative;
    margin: 30px auto;     
    border-style:transparent;
    border-width:2px;
    border-color:black;
    width:600px;
    height:50px; 
}

#box
{
    position:absolute;    
    background-color:none; 
    border-style:transparent;
    border-width:2px;
    border-color:black;
    height:250px;
    width:300px;
    margin:0px;
}

#field-wrap
{
    position:absolute;
    top:0px; /*60*/
    right:60px; /*10*/
    width:200px; 
    height:200px;
    border-style:transparent;
    border-width:2px;
    border-color:black;
   
}

#wrapper2
{
    position:relative;
    margin:30px auto;
    border-style:transparent;
    border-width:2px;
    border-color:black;
    width:250px;
    height:80px;
}

/* Styling the jumbotron: http://stackoverflow.com/questions/23618333/bootstrap-styling-jumbotron-elements */
.jumbotron{
    
    /*position: relative;*/
    
    padding:20px !important;
    
    /*
    /*margin-top:70px !important; */
    background: transparent; 
    margin-top: 0;
    margin-right: 0; 
    /*text-align:center;*/
    margin-bottom: 30 !important;
    
}

.navbar{
    
    /* Removes space between navbar and jumbotron */
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;    
    font-size: 12px;
    letter-spacing: 5px;
    
}

.navbar-nav li a:hover {
    color: #1abc9c !important;
}

/* wraps quantity and drop-down button together */
#button {
    
    position:relative;
    margin-bottom:5px;     
    border-style:transparent; 
    border-width:2px;
    border-color:black;
    width:250px; 
}



/* Had to set postion of bg-4 to absolute and bottom:0px and left:0px to ensure footer sticks to bottom of the page */ 
.bg-4 {
    
    padding: 70px; 
    background-color: #2f2f2f;
    color: #ffffff;
    position: absolute;
    bottom:0px;
    left:0px;
    width: 100%;   
    height:100px;
    margin-top:70px; 
    
}



/*
Excellent source for making background image stretch across whole page: http://stackoverflow.com/questions/5662735/stretch-background-image-css. Need to understand what -webkit -moz and -o is. Try removing and see what happens?
.bg-1 {    
     
    background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity:0.9; 
    z-index:-1;
}



.bg-1 {
  position: relative;  
}


.bg-1:after {
    
  position: absolute;  
  left: 0;
  top: 0;
  width: 100%;
  height: 500px; /*going to have to dynamically generate height using Javascript based on how many steps user inputs
  content: '';
  z-index: -1;
  background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat center center fixed;  
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*opacity:0.5; */
        
}
*/

.bg-1 {
  position: relative;
}

.bg-1:after {
    
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  /*going to have to dynamically generate height using Javascript based on how many steps use inputs */
  content: '';
  z-index: -1;
  background: url("https://loonylabs.files.wordpress.com/2014/08/peptides.jpg") no-repeat center center fixed; 
  
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  /*opacity: 0.5;*/
    
}

/* Note used this: https://chrisbracco.com/css-sticky-footer-effect/  to ensure footer always sticks to bottom of page */ 

body {
    
  position: relative;
  margin: 0;
  padding-bottom: 15rem;
  min-height: 100%;
    
}


html {
    
    height: 100%;
    
}