/* Table of contents
   a.  Variables
   1.  Landing Page
   2.  How It Works
   3.  Our Boxes
   4.  Media Queries
*/

/* =====================
   a. VARIABLES
   ===================== */

/* Colors */
$white:                   #fff;
$off-white:               #f7f5f2;
$green:                   #0acea8;
$red:                     #ed4747;
$navy:                    #363b44;
$gray:                    #686868;
$medgray:				  #aaaaaa;
$darkgray:				  #3a3a3a;
$text-color:              $gray;
$link-color:              $text-color;

/* Typography */
$base-font-family:        'Open Sans', sans-serif;
$base-font-size:          16px;
$heading-font-family:     'Lato', sans-serif;
$heading-font-weight:     600;
$button-font-family:      $heading-font-family;

/* Layout */
$site-max-width:          1200px;
$breakpoint-small-screen: 540px;
$gutter:                  $base-font-size;


/* =====================
   1. LANDING PAGE
   ===================== */

.lime-text{
	color:#d5e456 !important;
}

.brown-text{
	color:#ae8a5b !important;
}

.snacks-pattern{
	/*background-color: #f4f4f4;*/
	padding: 20px;
	background-image: url(https://cdn.shopify.com/s/files/1/0209/2570/files/snack-hero-sugar2.jpg?6718055516511894761);
	background-size: 100%;
	background-position: center top;
}

.snacks-highlight-text{
	color: #e2545b;
    font-weight: 900;
}	


.snacks-landing-header{
	max-width: 500px;
	margin: auto;
	text-align: center;
	padding: 60px 20px 40px 20px;
}

.snacks-landing-header img{
	max-width: 340px;
    width: 80%;
}

.snacks-landing-header h1{
	font-size:5em;
}



.snacks-about-the-box{
	margin:0 auto;
	max-width: 1200px;
}

.two-column p.snacks-about-valueprop{
	margin: 35px 0;
  	padding: 0 10px;
	font-size: 0.9em;
	line-height: 1.5em;
}

.snacks-about-icon{
    margin: 0px 5px 0 0;
    display: inline-block;
    vertical-align: top;
    font-size: 30px;
}

.snacks-about-text{
	display: inline-block;
    width: 83%;
    color: #1c1c1c;
}

.snacks-selection-option-container{
	margin-top:10px;
	font-size: 0;
}


.snacks-selection-green-desc{
	background-color:#d5e456;
	padding:20px 10px;
	margin:20px auto;
}

.snacks-selection-green-desc h3{
    max-width: 400px;
    margin: 15px auto;
    color: #190a11;
    font-weight: 900;
}



.snacks-about-the-box .two-column{
	width:50%;
}

.blue-container{
	background-color: #34c1d3;
}

.red-container{
	background-color:#e2545b
}

.snacks-about-the-box .about-box-text-container {
  margin: auto;
}




/* =====================
   2. SELECTION PAGE
   ===================== */

.snacks-selection-header{
    max-width: 1200px;
    margin: auto;
    text-align: center;
    padding: 60px 0 0 0;
}
.snacks-selection-header h5 {
  max-width: 500px;
  text-align: center;
  margin: 20px auto;
  font-size:1.1em;
}
.snacks-logo{
	max-width: 340px;
    width: 80%;
    display:inline-block;
}

.snacks-selection-header h1{
	font-size:5em;
}

.snacks-selection-panel-container{
 	display: -webkit-box;
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex;
	display:flex;
/*	-webkit-justify-content: space-around;
	justify-content: space-around;*/
	-webkit-align-items:center;
	align-items:center;
    margin: 50px auto;
    max-width: 1200px;
    background-color: #ffffff;
}

.snacks-selection-panel-image{
	background-color:#d5e456;
	padding:20px 10px;
    -ms-flex-grow:0.5;
    -moz-flex-grow:0.5;
	-webkit-flex-grow:0.5;
	flex-grow: 0.5;
    text-align: center;
}

.snacks-selection-panel-text{
	padding: 5px 3% 5px 3%;
	margin: auto;
}

.snacks-selection-desc{
    color: #d5e456;
    font-size: 1.8em;
    line-height: 1.3em;
    margin: 0;
    font-weight: 900;
}

.snacks-offer-desc{
    max-width: 400px;
    margin-bottom: 20px;
    font-size: 0.9em;
    line-height: 1.3em;
}



.snacks-selection-option-container{
	margin-top:10px;
	font-size: 0;
}

.snacks-selection-option-container-size{
	margin-top:10px;
  	margin-bottom: 30px;
	font-size: 0;
}

.snacks-selection-option{
    width: 22%;
	max-width: 130px;
	margin: 0 0.8% 0 0;
    background-color:#eee;
    color: #7b880e;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    padding: 10px;
    vertical-align: top;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #d5e456;  
}

.snacks-selection-option-size{
    width: 22%;
	max-width: 130px;
	margin: 0 0.8% 0 0;
    background-color:#eee;
    color: #7b880e;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    padding: 10px;
    vertical-align: top;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #d5e456;  
}

.snacks-selection-option.active{
	background-color:#d5e456;
}

.snacks-selection-option-size.active{
	background-color:#d5e456;
}

.snacks-selection-option.active .box-price {
  color:#706D6E;
}

.snacks-selection-option-size.active .box-price {
  color:#706D6E;
}

.snacks-selection-panel-container #selection-panel-total-save{
    font-size: 1.1em;
    line-height: 0.9em;
    margin-bottom: 15px;
}

.snacks-selection-panel-container #selection-panel-total-price{
	
}

.snacks-selection-panel-container .selection-panel-total{
	margin:20px 0 10px 0;
}


#most-popular{
line-height:1em;
margin-bottom: 3px;
}


.box-price{
   padding: 6px;
}


.snacks-add-to-cart{
    height: 40px;
    max-width: 220px;
    padding: 10px 15px;
    letter-spacing: 0.25em;
}


  
.snacks-press-container{
  display: -webkit-box;
  display: -moz-box;  
  display: -ms-flexbox;  
  display: -webkit-flex;
  display:flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding:2% 0;
}


.snacks-press{
  text-align: center;
  padding: 5px 10px;
  margin: 10px;
/*   border: 1px solid #bbc94b; */
  background-color: white;

}

.snacks-press h6{
  line-height: 1.35em;
  letter-spacing: 0.03em;
  color: #b8ca1f;
  font-style: oblique;
  font-weight: 400;
  font-size: 1.3em;
}

.snacks-press img{
  max-width: 135px;
  opacity: 0.6;
}
  




/* =====================
   3. SNACKS PRODUCT PREVIEW SECTION
   ===================== */






.snacks-whatsinside{
    width:100%;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #f1f1f1;
  
}
  
.snacks-whatsinside-slide {
    width:100%;
  	padding: 20px 0;
}
  
.snacks-whatsinside-row{
	max-width: 1200px;
 	display: -webkit-box;
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex;
	display:flex;
  	-webkit-justify-content: space-between;
    justify-content: space-between;
    margin: auto;

}
  
  
.snacks-whatsinside-block{
     padding: 20px;
    text-align: center;
    line-height: 1.4em;
    margin: 10px;
    box-shadow: 4px 8px 11px -4px rgba(0, 0, 0, 0.19); 
}
  
.snacks-whatsinside-product-desc{
 text-align:left; 
 -webkit-flex-grow: 1;
 flex-grow: 1;
}
  
 
.snacks-whatsinside-slide h2 {
  font-size:1.8em;
  text-transform:uppercase;
  font-weight:900;
  margin:20px auto 10px;
}
.snacks-whatsinside-slide h3 {
	font-size:1.1em;
	text-transform:uppercase;
  	margin: 25px 0;
}  
  
.snacks-whatsinside-slide p{
 max-width:650px; 
}

  
.snacks-whatsinside-nutrition{
   	margin-top: 25px;
 	display: -webkit-box;
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex;
	display:flex;
   	-webkit-flex-wrap: wrap;
   	flex-wrap: wrap; 
}
  
  .snacks-whatsinside-icon{
 	display: -webkit-box;
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex;
	display:flex;
    -webkit-align-items: center;
   align-items: center;
   width: 49%;
  }
  
  .snacks-whatsinside-icon img{
	max-width: 40px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 10px 0;
  }
  
 .snacks-whatsinside-icon-text{
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 0.85em;
   	line-height: 1.1em;
 }
  
  
.snacks-whatsinside-country-text{
 	max-width:240px; 
}
  
  
.snacks-whatsinside-artisan-img {
    margin: auto;
    border-radius: 100%;
    max-width: 140px;
}
  
  
.snacks-whatsinside-preview{
	display: -webkit-box;
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex;
	display:flex;
    margin:auto;
    background-color: #ffffff;
    justify-content: center;
    padding-bottom: 30px;
  	-webkit-flex-wrap: wrap;
    flex-wrap:wrap;
  
}
  
.snacks-whatsinside-preview-item{
    height: 130px;
    width: 130px;
    border-radius: 100%;
    margin: 1%;
    cursor: pointer;
    overflow: hidden;
  	transition: all 0.5s ease-in-out;
  	padding:10px;
}
  
  
.snacks-whatsinside-preview-heading{
  padding: 50px 0 25px 0;
  margin:auto;
}
  








/* =====================
   4. MEDIA QUERIES
   ===================== */





@media screen and (max-width: 899px){
  
  	.snacks-selection-panel-container{
		display: block;
	}
	.snacks-selection-panel-text{
		text-align: center;
		padding: 6px 3% 30px 3%;
	}
	.snacks-selection-option{
		width: 46%;
	    max-width: 266px;
	    margin: 2px;
	    padding: 15px 8%;
	    height: 80px;
	}
  	.snacks-selection-option-size{
		width: 30%;
	    max-width: 266px;
	    margin: 2px;
	    padding: 15px 2%;
	    height: 65px;
	}
	.snacks-selection-desc{
		margin:50px auto 10px auto;
	}
    .snacks-offer-desc{
    	margin: 0 auto 15px auto;
    }


}

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

.snacks-about-the-box .two-column {
    width: 100%;
}
  
.blue-container, .red-container{
	background-color: transparent;
}

.snacks-landing-header h1{
	font-size:4em;
}


.snacks-landing-header{
	padding: 0 0 40px 0;
}


.snacks-about-the-box, .snacks-about-the-box .two-column{
	padding: 0;
}

.snacks-about-text{
	display:block;
	margin: auto;
}

.snacks-pattern{
	background-size: 200%;
    background-position: top;
}

.snacks-about-the-box .about-box-text-container, .snacks-about-the-box .container-opposite .about-box-text-container{
	padding:20px;
}
  
  
.snacks-selection-header h1{
	font-size:4em;
}


.snacks-selection-header{
	padding: 0;
}


  
.snacks-press-container{
   display:block; 

}

.snacks-press{
  max-width: 90%;
  margin: 1px auto; 
}  
  
  
  
  
/* SNACKS PRODUCT PREVIEW    */
  
 .snacks-whatsinside-row{
  -webkit-flex-wrap: wrap;
  flex-wrap:wrap; 
   
 }
  
.snacks-whatsinside-block{
  width:100%;
  padding: 10px;
  margin: 5px;
  font-size: 0.9em;
}
  
.snacks-whatsinside-product-desc{
 text-align: center; 
  
}
  
.snacks-whatsinside-slide p {
    max-width: 450px;
    margin: auto;
}
  
  
.snacks-whatsinside-block img{
 margin: auto; 
/*  max-width: 250px; */
}
  
.snacks-whatsinside-icon{
 width: 100%;
 -webkit-justify-content: center;
 justify-content: center;
}
  
  
.snacks-whatsinside-icon img{
  max-width: 20px;
  margin: 0 5px 5px 0;
    
}
  
 
.snacks-whatsinside-preview-item {
  height: 100px;
  width: 100px;  
}
  

  
.snacks-whatsinside-artisan-img {
      max-width: 100px;
}  
  
  
  
 

}