body {
  
  background-color: #ffffff; 
  margin: 0;
  position: relative;
  width: 100%;

}



h1, h2, h3, h4, h5, legend, .title, .title-font  {

  font-family: grotesk, sans-serif;
	font-weight: 900;
  font-style: normal;
  
  
}

p, li, td, .copy-font  {
  font-family: grap, sans-serif;
  font-style: normal;

}







.test_notification a {
  color: #FFFFFF;
  text-decoration: underline;

}

.test_notification {

  height:30px;
  margin-top: 0px;
  background-color: hsl(217, 67%, 50%);
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;




}


.underline{

text-decoration: none;

}



.test-container {
  display: grid;
  padding: 10px;
  justify-content: space-between;
  align-items: center;

  box-shadow: 0 1px 4px 0 hsl(218, 10%, 90%);
  grid-template-areas: 
  

  "base-header-n1 base-header-0 base-header-1 base-header-2 base-header-3 base-header-4 base-header-5 base-header-6 base-header-7" 

  
}


.base-header-n1 {

  grid-area:base-header-n1;
  color: 	hsl(218, 10%, 50%);
  font-size: 13px;
  }
  

.base-header-0 {

  grid-area:base-header-0;
  color: 	hsl(218, 10%, 75%);
  font-size: 13px;
  }
  

.base-header-1 {

grid-area:base-header-1;

color: 	hsl(218, 10%, 50%);
font-size: 13px;


}


.base-header-2 {

  grid-area:base-header-2;
  color: 	hsl(218, 10%, 50%);
  font-size: 13px;
  
  }


  .base-header-3 {

    grid-area:base-header-3;
    
    color: 	hsl(218, 10%, 50%);
  font-size: 13px;
    }


    .base-header-4 {

      grid-area:base-header-4;
      
      color: 	hsl(218, 10%, 50%);
  font-size: 13px;
      }


      .base-header-5 {

        grid-area:base-header-5;
        color: 	hsl(218, 10%, 50%);
  font-size: 13px;
        
        }


        .base-header-6 {

          grid-area:base-header-6;
          color: 	hsl(218, 10%, 50%);
         font-size: 13px;
          
          }


        .base-header-7 {

          grid-area:base-header-7;
          color: 	hsl(218, 10%, 50%);
          font-size: 13px;
          display: none;
          
          }



/* div[class^="base-header-"], div[class*="base-header-"] {

  display: flex;
  align-items: center;
  justify-content: center;
  color: 	hsl(218, 10%, 50%);
  font-size: 13px;
  
} */




#header, #main, #footer {
  margin: 0 auto;
  margin-bottom: 7px;
}









i{font-style: normal; font-size: 24pt;}
a, a:hover, a:active, a:focus{outline: 0;}
.trim{text-rendering: optimizeSpeed;}



#messages .success{color: green;}
#messages .warning, #messages .error{color: red;}

.underline{
  text-decoration: underline;
}


/* SYMBOLS AND COLORS */
[class*="symbol-"]:hover {
  text-decoration: none !important;
}


[class*="symbol-"].black:hover {opacity: 1 !important;}
.anou-blue  {color: rgb(65, 123, 217)   !important;}
.white      {color: #ffffff             !important;}/*background*/
.black      {color: #333                !important;}/*not clickable*/
.gray       {color: #888                !important;}/*disabled*/
.blue       {color: #417bd9             !important;}/*read-only information*/
.red        {color: rgb(179, 50, 0)     !important;}/*delete or danger*/
.green      {color: rgb(37, 153, 0)     !important;}/*add or create*/
.pink       {color: rgb(255, 0, 255)    !important;}/*special tool*/
.purple     {color: #663399             !important;}/*learn insights*/
.gold       {color: rgb(245, 180, 0)    !important;}/*money related*/


.color-rating1  {color: rgb(164, 0,   0)    !important;}/*dark red*/
.color-rating2  {color: rgb(254, 0,   0)    !important;}/*medium red*/
.color-rating3  {color: rgb(240, 203, 83)   !important;}/*light red*/
.color-rating4  {color: rgb(126, 198, 132)  !important;}/*light green*/
.color-rating5  {color: rgb(1,   142, 11)   !important;}/*dark green*/
.color-rating-store  {color: rgb(65, 123, 217)   !important;}/*dark green*/

.g95p {color: 	hsl(218, 10%, 95%)   !important;}
.g90p {color: 	hsl(218, 10%, 90%)   !important;}
.g85p {color: 	hsl(218, 10%, 85%)   !important;}
.g75p {color: 	hsl(218, 10%, 75%)   !important;}
.g50p {color: 	hsl(218, 10%, 50%)   !important;}
.g25p {color: 	hsl(218, 10%, 25%)   !important;}
.g10p {color: 	hsl(218, 10%, 10%)   !important;}

.b95p {color: 	hsl(217, 67%, 95%)   !important;}
.b75p {color: 	hsl(217, 67%, 75%)   !important;}
.b50p {color: 	hsl(217, 67%, 50%)   !important;}
.b25p {color: 	hsl(217, 67%, 25%)   !important;}
.b5p {color: 	hsl(217, 67%, 5%)   !important;}









.price-loader {
  position: relative;
}



.price-loader:before {
  background: #ffffff url(/static/images/loader.gif) no-repeat;
  background-size: contain;
  background-position: center;
  content: '';
  z-index: 14;
  width: 100%;
  height: 40px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.price-loader.hide-load:before {
  display: none;
}
#cart .price-loader:before {
  height: 20px;
}
.no-pointevent {
  pointer-events: none;
}







#banner-test {

color: #293540;
font-family: noe-reg, sans-serif;
font-size: 22px;
text-align: left;

  

}




 










.footer-container {
  display: grid;
  grid-gap: 40px;
  padding-top:40px;
  padding-left: 50px;
  padding-right: 40px;
  margin-top: 0px;
  grid-template-areas: 
  
  /* " the_cooperative connect visit-footer artisan-footer email-footer" */
  "personalization the_cooperative connect visit-footer artisan-footer  "
  " email-footer email-footer email-footer email-footer email-footer "  

}


.personalization{
grid-area: personalization


}


.footer-title {

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

}


.base-link {

  text-decoration: none !important;
  color: 	hsl(218, 10%, 50%);


}


.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;

}

.artisan-footer{

  grid-area: artisan-footer;

}

.email-footer {

grid-area: email-footer;
text-align:center;
display:flex;
align-items:center;
text-align:center;
flex-direction:row;

}

 .mc-testing{
  display:flex;
  text-align:center;
  flex-direction:column;

 }


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: hsl(218, 10%, 75%);
  opacity: 1; /* Firefox */
}


.copyright-footer {

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

}



 



/* DROP DOWN MENU TESTs */


.dropbtn {
  color: hsl(218, 10%, 75%);
  /* padding: 16px; */
  font-size: 16px;
  border: none;


}

.dropdown {
  display: inline-block;
}




/* THESE TWO THINGS DICTATE HEIGHT OF CART */

.dropdown-content {
  display: none;
  position: absolute;
  right:0%;
  background-color: #ffffff;
  width: 35vw;
  margin-top:6.5px;
  z-index: 1;
  border-color:hsl(218, 10%, 1%);
  border: .1px solid hsl(218, 10%, 95%);


  
}




.cart-product-list-overflow-post {

  overflow-y: auto;

  height:150px;


}


.cart-product-list-overflow {

  /* overflow-y: auto; */

  /* height:200px; */


}










.cart-button {
  color: black;
  padding-top: 12px;
  padding-bottom: 12px;
  text-decoration: none;
  display: block;
}

/* .dropdown-content p:hover {background-color: #ddd;} */

/* .dropdown:hover .dropdown-content {display: block;} */

.dropdown:hover .dropbtn {color: hsl(218, 10%, 50%);}

.top-bar{

height:0;
width:100%;
border-color:hsl(218, 10%, 95%);

border-width: .1px;
margin-top: 0em;
margin-bottom: 0em;
}

.cart-bar-thick{

  height:0;
  width:100%;
  border-color:hsl(218, 10%, 95%);
  border-width: 7px;
  margin-top: 0em;
  margin-bottom: 0em;
  }


  .cart-bar-liner{

    width:90%;

    border-color:hsl(218, 10%, 90%);
    border-width: .1px;
    margin-top: 0em;
    margin-bottom: 0em;
    }

  .cart-product-bar{

    /* width:100%; */
    margin-left: 10px;
    margin-right: 10px;
    border-color:hsl(218, 10%, 90%);
    border-width: 0px;
    margin-top: 0em;
    margin-bottom: 0em;
    }
  
  .cart-dropdown-area {
/* 
    padding-left: 10%;
    padding-right: 10%; */
    border:1px solid hsl(218, 10%, 90%);

  }

  .cart-font-header {

    font-size: 13px;
    color: hsl(218, 10%, 30%);
    font-weight:100;
    padding-left: 20px;



  }

  .cart-font {


    font-size: 13px;
    color: hsl(218, 10%, 60%);
    font-weight:100;
    padding: 20px;

  }

  .cart-product-list {

    text-align: left;
    display: flex;
    flex-direction: column;
    


  }




  .cart-product-list img {
  
    /* width: 100%;
    object-fit:cover;
    padding:10px; */


    width: 100%;
    object-fit:cover;
    padding:10px;

  }

  .cart-product-list-overflow-post img {
  
    width: 75px;
    object-fit:cover;
    padding:10px;

    /* width: 100%;
    object-fit:cover;
    padding:10px; */


  }




.drop-product-name {

  font-size: 13px;
  color: hsl(218, 10%, 30%);
  line-height: 0px;
  margin:0;
  padding-top: 10px;
  font-weight:100;

}



.drop-product-data {

  font-size: 13px;
  color: hsl(218, 10%, 80%);
  line-height: 0px;
  margin:0;
  padding-top: 10px;
  font-weight:100;

}

.remove {

  text-decoration: underline;

}


.drop-group-name{

  font-size: 13px;
  color: hsl(218, 10%, 60%);
  line-height: 0px;
  margin:0;
  font-weight:100;
  line-height: 14px;

  /* line-height: 10px; */
  /* font-size: 13px;
  color: hsl(218, 10%, 60%);
  font-weight:100;
  line-height: 14px;
  font-weight:100; */
  margin:0

}

.drop-cart-price {

  font-size: 13px;
  color: hsl(218, 10%, 60%);
  font-weight:100;
  line-height: 5px;
  padding-top:-1px;
  /* margin:0;
padding: 0px; */
  
  /* margin:0 */

}


.catz {


  text-decoration: line-through;

}

.drop-cart-price-crossed {

  font-size: 13px;
  color: hsl(218, 10%, 60%);
  font-weight:100;
  line-height: 0px;
  text-decoration: line-through;

  
  /* margin:0 */

}





.drop-cart-alerts {

  font-size: 13px;
  color: hsl(125, 33%, 35%);
  font-weight:100;
  line-height: 14px;
  font-weight:100;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;




}

.drop-cart-alerts a {

  font-size: 13px;
  color: hsl(125, 33%, 35%);
  font-weight:100;
  /* line-height: 14px; */
  font-weight:100;
  display: inline-block;



}





  /* DROP DOWN GRID */


  .idv_product_data {

display: grid;
grid-template-columns: 100px 1fr 20px;
/* grid-gap: 15px; */
margin-left:10px;

/* padding:10px; */
/* min-width: auto; */



  }


.remove-button {

/* padding-right:20px;
padding-top:10px; */
font-family: grap, sans-serif;
font-weight: 900;
font-style: normal;
color: hsl(218, 10%, 75%);
font-size: 20px;
cursor: pointer;

}





  /* THIS IS REPEATED FROM PRODUCT PAGE, CHECK NO CONFLICT */

  .add-to-cart-button {

    background-color: rgba(0, 103, 214, 0.934);
    color: white;
    height: 35px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;


    text-decoration: none;
    text-align: center;

  
  }


  .custom-order-submit-confirmation {




    background-color: rgba(25, 104, 29, 0.934);
    color: white;
    height: 35px;
    font-size: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    
    
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;


    text-decoration: none;
    text-align: center;


}



  .add-to-cart-button-cart {

    /* background-color: 	hsl(218, 10%, 25%); */
    background-color: rgba(0, 103, 214, 0.934);
    /* border: none; */
    color: white;
    height: 35px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: 20px;
    margin-right:20px;
    margin-top: 10px;
    margin-bottom:25px;

    text-decoration: none;
    text-align: center;

  
  }


  




  #no-items-in-cart-drop {

    padding: 20px;


  }

  .idv-photo {

    text-align: center;


  }









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

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

}



/* HEader things */


.header-link {

  text-decoration: none;
  color: hsl(218, 10%, 50%);
  
  
  
  }
  
  .key-link {
  
    text-decoration: none;
    color: hsl(218, 10%, 75%);
  
  }
  
  .key-link:hover {
  
    cursor: pointer;
  
  
  }
  
  .hover-link:hover {
  
  cursor: pointer;
  
  
  }
  






/* HAMBURGER */








.hamburger {

color: hsl(218, 10%, 75%);
padding-right: 20px;

}

.ham-close {

  color: hsl(218, 10%, 75%);
  padding-right: 20px;
  font-size: 20px;
  /* padding-top:0px */

}




.hamburger-content {
  display: block;
  position: absolute;
  right:0%;
  background-color: #ffffff;
  width: 100vw;
  margin-top:30px;
  z-index: 1;
  border-color:hsl(218, 10%, 1%);
  border: .1px solid hsl(218, 10%, 95%);




  
}

.ham-content {

  margin-left: 20px;
  margin-right: 20px;
  margin-bottom:20px;


}


.ham-triangle {

  color: hsl(218, 10%, 50%) 
  
  
  }


  .ham-selection-div {

    display: flex;
    /* flex-direction: row; */
    justify-content: space-between;
    align-items: center;
    margin-top: -5px;
    cursor: pointer;
    
    
    }

.ham-a {

text-decoration: none;


}



.ham-header {

  color: 	hsl(218, 10%, 30%);
  font-size: 10px;
  text-transform: uppercase;
  /* margin-top:0px; */

}

.ham-hr{

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  /* margin-bottom: 100px;  */
  /* padding-top:20px; */

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

}







.footer-hr {
  display: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom:0px !important;

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

}

/* email */

.mailchimpinput{

  /* background-color: #E8ACA5;
  border: none;
  color: white;
  padding: 7px 16px; */
  border:.5px solid hsl(218, 10%, 75%);
  /* border: none; */
  padding: 7px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  /* width: 55%; */
  width: 280px;

}


.mailchimpsubbutton{

  background-color: hsl(217, 67%, 50%);
  border: none;
  color: white;
  padding: 7px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  /* width: 55%; */
  width: 140px;;

  margin:20px;
  cursor: pointer;
}





/* MEDIA QUERIES */






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

  .test-container {
    display: grid;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
  
    box-shadow: 0 1px 4px 0 hsl(218, 10%, 90%);
    grid-template-areas: 
    
  
    "base-header-n1 base-header-0 base-header-1 base-header-2 base-header-3 base-header-4 base-header-5 base-header-6 base-header-7" 
  
    
  }
  
  
  .base-header-n1 {
  
    grid-area:base-header-n1;
    color: 	hsl(218, 10%, 50%);
    font-size: 13px;
    }
    
  
  .base-header-0 {
  
    grid-area:base-header-0;
    color: 	hsl(218, 10%, 75%);

    font-size: 13px;

    }
    
  
  .base-header-1 {
  
  grid-area:base-header-1;
  
  color: 	hsl(218, 10%, 50%);
  font-size: 13px;
  display: none;
  
  }
  
  
  .base-header-2 {
  
    grid-area:base-header-2;
    color: 	hsl(218, 10%, 50%);
    font-size: 13px;
    display: none;
    
    }
  
  
    .base-header-3 {
  
      grid-area:base-header-3;
      
      color: 	hsl(218, 10%, 50%);
    font-size: 13px;
      }
  
  
      .base-header-4 {
  
        grid-area:base-header-4;
        
        color: 	hsl(218, 10%, 50%);
    font-size: 13px;
    display: none;
        }
  
  
        .base-header-5 {
  
          grid-area:base-header-5;
          color: 	hsl(218, 10%, 50%);
    font-size: 13px;
    display: none;
          
          }
  
  
          .base-header-6 {
  
            grid-area:base-header-6;
            color: 	hsl(218, 10%, 50%);
    font-size: 13px;
            
            }
  
  
          .base-header-7 {
  
            grid-area:base-header-7;
            color: 	hsl(218, 10%, 50%);
            font-size: 20px;
            display:block;
            
            }
  
  






            .footer-container {
              display: grid;
              grid-gap: 40px;
              padding-top:40px;
              padding-left: 20px;
              padding-right: 20px;
              margin-top: 0px;
              grid-template-areas: 
              
              " personalization "
               " the_cooperative " 
               " connect " 
               " visit-footer " 
               " artisan-footer "
               " email-footer "
            
            }
            


            .footer-hr {
              display: block;
              width: 100%;
              margin-left: auto;
              margin-right: auto;
              margin-top: 0px;
              margin-bottom:0px !important;

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






















  
}