.banner-container {
	display: grid;
	grid-gap: 20px;
	/* min-height: 620px; */
	/* max-width: 1200px; */
	/* padding-left: 1px;
	padding-right: 1px; */
	grid-template-areas: 
	
	"banner-image"
  
  }
  
  
  
  .banner-image {
  
	/* background-image: url('https://res.cloudinary.com/hork5h8x1/image/upload/v1567691750/PJnltgoY_mufhua.jpg'); */
	color: #ffffff;
	/* background-size: cover; */
	/* background-position: center left; */
	grid-area: banner-image;
	text-align: center;
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* font-size: 60px; */
	max-height: 600px;
	/* z-index: -100; */
  
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  
  } 
  
   
  .banner-image > img {
  
	/* max-width: 1200px; */
	width: 100%;
	height:100%;
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  /* overflow:hidden added for Chrome compatibility on Marketplace Page */
  }



 

  .store-name{
    grid-area: store-name;
    /* display:flex;
    align-self: center;
    justify-self: center; */
    padding-right: 40px;
    padding-left: 40px;
    font-size:9vw;
      
    
      
      }
    


      .trial {
  
        position:absolute;
        display: grid;
        align-self: center;
        justify-self: center;
        /* max-height: 300px; */
        /* z-index: 1000; */
        grid-template-areas:
        " store-title "
        " store-name " 
      
      }
      
      .store-title{
      grid-area: store-title;
      color: var(--white);
      padding: 40px;
      font-size: 2vw;
      
      }
      




      /* SPREAD LOVE */





      .spread-trial {
  
        position:absolute;
        display: grid;
        align-self: center;
        justify-self: center;
        /* max-height: 300px; */
        /* z-index: 1000; */
        grid-template-areas:
        " sub-title "
        " main-title " 
        /* " button " */
      
      }
      
.sub-title{
grid-area: sub-title;



}


.main-title{
  grid-area: main-title;
  margin-top: -20px;
  /* font-size: 5vw; */
  
  
  }

      .spread-title{
      grid-area: store-title;
      color: var(--white);
      /* padding: 40px; */
      font-size: 3vw;
      
      }
      



      .spread-name{
        grid-area: store-name;
        /* display:flex;
        align-self: center;
        justify-self: center; */
        padding-right: 50px;
        padding-left: 50px;
        font-size:7vw;
        padding-top:43px;
        /* margin:5px; */
          
        
          
          } 

.button-link{
cursor: pointer;
text-decoration: none;


}


.button-div{

  display:flex;
  justify-content: center;
  grid-area: button;
  margin-top:-60px;
  margin-bottom:60px;


}

.wall-hang-button {
  /* background-color: #6abbbc; Green */
  background-color: #865d7e;

  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5vw;
  /* width:20vw; */
  cursor: pointer;
  z-index:999;
}











.banner-link {

color: white;
text-decoration: none;;


}

.banner-text {

font-size: 8vw;

}

.heroContainer {
  display: grid;
  min-height: 620px;
  padding-left: 40px;
  padding-right: 40px;
  grid-template-areas: "hero"
  
}

.hero {
  background: white url(https://res.cloudinary.com/hork5h8x1/image/upload/v1569166453/visits_yqxc7w.jpg);
  /* background-size: cover; */
  color: #ffffff;
  background-size: cover;
  background-position: center left;
  grid-area: hero;
  text-align: center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mini-hero-text {
color: #ffffff;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;



}


/* Marketplace CustomOrders Vists */


.hightlight-container {
  display: grid;
  grid-gap: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: " marketplace visit custom  "
                       " marketplace-info visit-info custom-info  "

}



.marketplace {

  grid-area: marketplace;
  background: url("https://res.cloudinary.com/hork5h8x1/image/upload/v1568754846/quote1_miuwpl.jpg");
  min-height: 420px;
  background-size: cover;
  margin-bottom: -40px;
  object-fit: cover;
  width: 100%;

}


.custom {

  grid-area: custom;
  background: url("https://res.cloudinary.com/hork5h8x1/image/upload/v1568754455/collab_g9bofo.jpg");
  min-height: 420px;
  background-size: cover;
  margin-bottom: -40px;
  object-fit: cover;
  width: 100%;

}


.visit {

  grid-area: visit;
  background: url("https://res.cloudinary.com/hork5h8x1/image/upload/v1597569984/bright_kcinzd.jpg");
  background-color: 	hsl(217, 67%, 25%);
  min-height: 420px;
  background-size: cover;
  margin-bottom: -40px;
 
  object-fit: cover;
  width: 100%;


}



.highlight-link{


text-decoration: none;

}

/* div[class*="title-info-"] {
  color: 	hsl(218, 10%, 50%);
  text-align: center



} */

#title-info {

color: 	hsl(218, 10%, 25%);
font-family: grap, sans-serif; ; 
font-size: 22px;
text-align: center


}

#sub-info {

color: 	hsl(218, 10%, 50%);
font-family: grap, sans-serif;
font-size: 16px;
text-align: center


}



.title-info-marketplace {

grid-area: marketplace-info;
}

.title-info-custom {

grid-area: custom-info;

}

.title-info-visit {

  grid-area: visit-info;

}

 


hr {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 100px;

  border: 0;
  border-bottom: 1px solid hsl(218, 10%, 85%);

}





/* Sustainability Header ENV/HEALTH &  */

.sustainability-container {

  display: grid;
  grid-gap: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 0px;
  grid-template-areas: " sustainability-title sustainability-title "
                       " sustainability-material sustainability-money "
                       " sus-material-info sus-money-info "


}

.info-header {

  /* font-size: 6vw; */
  font-size:4vw;
  
  }
  


.sustainability-title {

  color: 	#293540;
  /* font-family: grap, sans-serif; 
  font-size: 38px;
*/
  font-family: noe;
  font-size: 26px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: sustainability-title;


}



.sustainability-material {

  grid-area: marketplace;
  background: url("http://res.cloudinary.com/hork5h8x1/image/upload/q_auto/v10000000/IMG_1307_hxnxyo") bottom;
  min-height: 420px;
  background-size: cover;
  margin-bottom: -40px;
  grid-area: sustainability-material;



}


.sustainability-money {

  grid-area: marketplace;
  background: url("http://res.cloudinary.com/hork5h8x1/image/upload/q_auto/v10000000/IMG_4192_tzaqla") bottom;;
  min-height: 420px;
  background-size: cover;
  margin-bottom: -40px;
  grid-area: sustainability-money;



}



.sus-material-info {

grid-area: sus-material-info;
/* display: flex;
align-items: left;
justify-content: left;
text-align: left; */
text-align: left;

}


.sus-money-info {

  grid-area: sus-money-info;
  /* display: flex;
  align-items: left;
  justify-content: left;
  text-align: left; */
  text-align: left;

  
  
  }

  #sus-title-info {

    color: 	hsl(218, 10%, 25%);
    font-family: grap, sans-serif;
    font-size: 26px;
    text-align: left
    
    
    }
    
    #sus-sub-info {
    
    color: 	hsl(218, 10%, 50%);
    font-family: grap, sans-serif;
    font-size: 16px;
    text-align: left;
    margin-top: -20px
    
    
    }



    /* press container */






/* 
    .press-container {
      display: grid;
      min-height: 620px;
      max-width: 1200;
      background-color: 	hsl(217, 67%, 50%);

      grid-template-areas: " marketplace custom visit "
                           " marketplace-info custom-info visit-info "
    
    }


     */


    .asdf-container {
      grid-gap: 20px;

      
      
    
    }
    
    
    
    .asdf-image {
    
      background-image: url('https://res.cloudinary.com/hork5h8x1/image/upload/v10000000/h8jz_25I_xse88g');
      /* background-color: 	hsl(217, 67%, 50%); */
      color: #ffffff;
      background-size: cover;
      min-height: 600x;
      /* max-width: 1200px; */
      font-size: 60px;
      margin-top: 70px;
      margin-bottom: 60px;
      display: grid;
      position: relative;
      grid-template-areas: 
      
      /* "space0 space00" */
      "quote-press image-press" 
      /* "space1  space2"   */
      
      
    
    }








.image-press {

  grid-area: image-press;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;



}



.title-quote {

  /* color: 	hsl(218, 10%, 50%);
    font-family: grap, sans-serif;
    font-size: 16px;
    text-align: center; */
    grid-area: title-quote;
    display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  padding:40px;


}


.quote-press {

  grid-area: quote-press;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  padding: 40px;
  
  
    
  }
  
  .whom-press {
  
  grid-area:whome-press;
  
  }







.mini-press-header {

  color: 	hsl(0, 0%, 100%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;
  align-self: flex-start;
  padding-top: 25px;
 
 

}


.mini-press-footer {

  color: 	hsl(0, 0%, 100%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;
  align-self: flex-start;
  padding-top: 30px;
  font-size: 26px;
  text-indent: 10px
 
 

}


.mini-press-diamond {

  color: 	hsl(0, 0%, 100%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;
  align-self: flex-start;
  
 

}


.quote-font {

  
  color: 	hsl(0, 0%, 100%);
  font-family: 'EBG';
  /* font-family: 'noe-reg'; */

  font-size: 35px;
  text-align:left;
  



}

.source-font {

  color: 	hsl(0, 0%, 100%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;
  margin-top: -20px;

}



.hr-test {

margin-top:70px !important;
margin-bottom: 40px !important;

}



    /* Footer container */


/* .footer-container {
  display: grid;
  grid-gap: 40px;

  padding-left: 50px;
  padding-right: 40px;
  margin-top: 0px;
  grid-template-areas: 
  
  " the_cooperative connect visit-footer email-footer email-footer"

}


.footer-title {

  color: 	hsl(218, 10%, 50%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;

}

.footer-font {

  color: 	hsl(218, 10%, 75%);
  font-family: grap, sans-serif;
  font-size: 14px;
  text-align: left;

}


.the_cooperative {

  grid-area: the_cooperative;


}

.connect{

  grid-area: connect;

}


.visit-footer{

  grid-area: visit-footer;

}


.email-footer {

grid-area: email-footer;

max-width: 550px;
}


input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid hsl(218, 10%, 75%);
  font-size: 20px;
  
}

::placeholder { 
  color: hsl(218, 10%, 75%);
  opacity: 1; 
}


.copyright-footer {

  color: 	hsl(218, 10%, 75%);
  font-family: grap, sans-serif;
  font-size: 12px;
  text-align: center;

}


 */



@media only screen and (max-width: 800px) {


  .store-name{
    grid-area: store-name;
    /* display:flex;
    align-self: center;
    justify-self: center; */
    padding-right: 20px;
    padding-left: 20px;
    font-size:10vw;
      
    
      
      }

  .hightlight-container {
    display: grid;
    grid-gap: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    grid-template-columns: 1fr;
    /* grid-template-areas: " marketplace visit custom  "
                         " marketplace-info visit-info custom-info  "; */
  
    grid-template-areas:
    " marketplace "
    " marketplace-info "
   " visit "  
    "visit-info"
    "custom "
    "custom-info";
    




  }





  .sustainability-container {

    display: grid;
    grid-gap: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    /* grid-template-areas: " sustainability-title sustainability-title "
                         " sustainability-material sustainability-money "
                         " sus-material-info sus-money-info " */


    grid-template-areas: 
    
    " sustainability-title "
    " sustainability-material "
    " sus-material-info "
    " sustainability-money "
    " sus-money-info "

  
  }

  .info-header {

    /* font-size: 6vw; */
    font-size:6vw;
    
    }

}






/* For SPread Love */
@media only screen and (max-width: 700px) {

  .button {
    background-color: #E8ACA5; /* Green */
    border: none;
    color: white;
    padding: 7px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
    width:55%
  }


}