/* ============================================================================================== 

================================================================================================= */

/* general settings */
html, body {
	/*touch-action:none;*/
	content-zooming:none;
	/*margin: 0;*/
	padding: 0;
	background: #FFF;
	/*position: absolute;*/
	width: 100%;
	/*height: 100%;*/
	
    position: relative;
    height: 100%;
}

html {
  overflow-x: hidden;
	 overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  /*min-height:100%;*/
  /*overflow-x:hidden;
  overflow-y:scroll;
  position:relative;*/
  /*width:100%;*/
}
body {
  font-family: 'Trocchi', serif;
  /*background-color:#e6e6e6;*/
  color:#000;
  font-weight:100;
  margin:0;
  /*min-height:100%;*/
  /*width:100%;*/
}
/*.match-height{*/
/*    height: 205px;*/
/*}*/
.view{
  width: 100%;
  height: 100vh;
  /*  max-width: 1500px;*/
  /*margin: 0 auto;*/
}
.container-fluid{
    max-width: 1600px
}
#screen {
	width:100%;
	height:100%;
	margin:auto auto;
	position: absolute;
	/*position: fixed;*/
	top: 0; 
	bottom: 0;
	left: 0; 
	right: 0;
	   /* background-image: url(../images/bgmess.jpg);*/
    /*background-size: cover;*/
    /*background-position: bottom;*/
	/*background: #FFF;*/
	 cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
	z-index: 4;
	max-width: 1500px;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
#screen:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.pad-one{
     padding: 1em;
    margin-top: 5em;
    max-height: 460px;
}
.pad-ww {
    /* padding: 1em; */
    margin-bottom: 2em;
    margin-top: 2em;
    /* max-height: 460px; */
}

.home-element {
    top: 105vh;
    position: relative;
}
img#testimg {
    position: absolute;
    z-index: 999;
}
.text{
  font-family: 'Trocchi', serif;
}
a {
  text-decoration:none;
}
a img {
  border:none;
}
h1 {
  font-size:3.5em;
  font-weight:100;
}
p {
  font-size:1.5em;
}
.header-paragraph{
    font-size: 18px;
    font-weight: 500;
    color: #3f3f3e;
    text-align: center
}
.paragraph {
    padding: 0px 30px;
    width: 86%;
    margin: 0 auto;
    /* border-right: 2px solid #ad75ad; */
    /* border-left: 2px solid #ad75ad; */
}
input,textarea {
  -webkit-appearance:none;
  background-color:#f7f7f7;
  border:none;
  border-radius:3px;
  font-size:1em;
  font-weight:100;
}
input:focus,textarea:focus {
  border:none;
  /*outline:2px solid #7ed7b9;*/
}
h2{
  font-size: 2.26em;
	  border-bottom: 3px solid #000;
   
    font-family: 'Passion One', cursive;
    /*font-family: 'Arbutus Slab', serif;*/
    text-transform: uppercase;
    padding-top: 1.2em;
    margin-bottom: .4em;
}

.pad-bottom-one{
  padding-bottom: 1em;
}

.text{
  font-family: 'Trocchi', serif;
}
a.link-text {
    color: #333333;
}
.clear-both{
    clear: both
}
.left {
  float:left;
}
.right {
  float:right;
}
.border-wise{
  
       /* content: ""; */
    /* display: block; */
    /* position: absolute; */
    /* top: 5px; */
    /* left: 0; */
    width: 100%;
    height: 35px;
    /* margin-right: 4px; */
    background: url(../images/wn-edge.svg);
     background-repeat: repeat-x; 
    background-position: 0 0px;
    background-size: contain;
   
}


.flip{
      -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.flip-h{
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.border-wise2{
      /* content: ""; */
    /* display: block; */
    position: relative;
    /* top: 5px; */
    /* left: 0; */
    width: 100%;
    padding-top: 6em;
    height: 40.7px;
    /* margin-right: 4px; */
    background: url(../images/border2.svg);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    margin: 0 auto;
    /* left: 0; */
    /* right: 0; */
    /* text-align: center; */
   
}
.border-wise2.fit{
   padding-top: 0em;
   height: 20.7px;
   background-size: contain;

}
.four-mar {
  font-size: 1em !important;
    color: white;
    width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    /*resize: both;*/
    overflow: visible;
    margin: 0px;
    color: #fff;

    /*  min-height: 92px;*/
    /*margin: 1em;*/
    /*color: #fff;*/
}
.four-mar2 {
    font-size: .8em !important;
    color: white;
    width: 100%;
    transform: translate(-50%, -50%);
    /* position: absolute; */
    bottom: 0;
    left: 50%;
    padding: 0px;
    /* resize: both; */
    overflow: visible;
    margin: 0px;
    color: #fff;
    position: absolute;
    margin-bottom: 0 !important;
    line-height: 2.5em;
}
.t-body.big-num {
    font-family: 'Trocchi', serif;
    font-size: 4em;
    margin-top: -5%;
    text-transform: none;
    margin-bottom: 0em;
    text-align: center;
    color: #fff;
}
.by{
    font-size: .7em
}
.too-long{
    font-size: 1em;
}
.four {
      position: relative;
    /* background: white; */
    height: 127px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    /*resize: both;*/
    overflow: visible;
    border: 2px solid #FFF;
    min-height: 130px;
    background-color: #3f3f3e;
    margin: 0px;
  
    /*border: 2px solid #FFF;*/
    /*min-height: 130px;*/
    /*background-color: #3f3f3e;*/
    /*margin: -1px;*/
}
.hand {
      opacity: .6;
    background: url(../images/hand.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 70px;
    height: 35px;
    position: absolute;
}
.HL {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: “FlipH”;
    top: 44px;
    left: 30px;
}
.HR {
    top: 44px;
    right: 30px;
}
.hide-hands {
    display: none
}
.btn {
  background-color:#fff;
  border-radius:24px;
  color:#595959;
  display:inline-block;
  font-size:1.4em;
  font-weight:400;
  margin:30px 0;
  padding:10px 30px;
  text-decoration:none;
}
.btn:hover {
  opacity:0.8;
}
.wrap {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:0 auto;
  /*max-width:1420px;*/
  overflow:hidden;
  /*padding:0 50px;*/
  position:relative;
  width:100%;
}
/*.wrap:before {*/
/*  content:'';*/
/*  display:inline-block;*/
/*  height:100%;*/
/*  margin-right:-0.25em;*/
/*  vertical-align:middle;*/
/*}*/

/* header section */
/*header {*/
/*  height:110px;*/
/*}*/
/*header .wrap {*/
/*  height:100%;*/
/*}*/
/*header .logo {*/
/*  margin-top:1px;*/
/*}*/
/*header nav {*/
/*  float:right;*/
/*  margin-top:17px;*/
/*}*/
/*header nav ul {*/
/*  margin:1em 0;*/
/*  padding:0;*/
/*}*/
/*header nav ul li {*/
/*  display:block;*/
/*  float:left;*/
/*  margin-right:20px;*/
/*}*/
/*header nav ul li a {*/
/*  border-radius:24px;*/
/*  color:#aaa;*/
/*  font-size:1.4em;*/
/*  font-weight:400;*/
/*  padding:10px 27px;*/
/*  text-decoration:none;*/
/*}*/
/*header nav ul li a.active {*/
/*  background-color:#c33c3a;*/
/*  color:#fff;*/
/*}*/
/*header nav ul li a.active:hover {*/
/*  background-color:#d2413f;*/
/*  color:#fff;*/
/*}*/
/*header nav ul li a:hover,header nav ul li a.activeSmall {*/
/*  color:#c33c3a;*/
/*}*/

/*SIMONS STYLES SINCE BOOTSTRAP*/
li.nav-link {
    display: inline-block;
}
li.nav-link a {
      display: block;
    padding: 10px;
    font-weight: 500;
    color: #FFF;
    font-family: 'Arbutus Slab', serif;
}
.home-page-element{
         height: 114px;
    width: 100%;
    /*background-color: cadetblue;*/
    /*background-image: url(../images/home-item-bg.svg);*/
    position: relative;
    padding: 4em;
    /* position: absolute; */
    /* margin: 15% 0 0 6%; */
    z-index: 2;
}
.home-item-bg{
   position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
#products-home{
    z-index: 1;
    /* position: absolute; */
    top: 90vh;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    /* width: 93%; */
    /* max-width: 1024px; */
    /* margin: 0 auto !important; */
    width: 100%;
    max-width: 1024px;
    padding: 10px;
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 0; */
    margin: 0 auto;
    text-align: center;
}
/*Products page start*/
.margin-top{
  margin-top:3em;
}
h1.intro {
        /* text-transform: uppercase; */
    /* text-align: center; */
    /* float: left; */
    font-size: 3.8em;
    font-weight: 700;
    /* font-size: 2.8em; */
    /* font-weight: 700; */
    margin-left: 5%;
    font-family: 'Arbutus Slab', serif;
    color: #3f3f3d;
}

img.product1.img-responsive {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56));
    filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56));
    position: relative;
    margin-left: 5%;
    margin-top: -6px;
    z-index: 1;
}
img.product2.img-responsive {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .7s;
    -webkit-animation-iteration-count: 1;
    -webkit-filter: drop-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56));
    filter: drop-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56)); 
    position: relative;
    z-index: 3;
}
.just-shadow {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 1;
    /* -webkit-filter: drop-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56)); */
    /* filter: drop-shadow(7px 3px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56)); */
    position: relative;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);
    /* background-blend-mode: hue; */
    width: 10px;
    left: -6px;
    top: 8px;
    border-radius: 10px;
    height: 88%;
    position: absolute;
    box-shadow: 6px 4px 18px 5px rgba(0, 0, 0, .3);
}
img.product3.img-responsive {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .9s;
    -webkit-animation-iteration-count: 1;
    /* -webkit-filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56)); */
    /* filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56)); */
    position: relative;
    margin-left: -1%;
    margin-top: 0px;
    z-index: 3;
    -webkit-filter: drop-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56));
     filter: drop-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) box-shadow(13px 0px 3px rgba(34, 34, 34, 0.56)) drop-shadow(-13px 0px 6px rgba(34, 34, 34, 0.56)); 
}
img.product4.img-responsive {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: 1.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56));
    filter: drop-shadow(0px 3px 1px rgba(34, 34, 34, 0.56));
    position: relative;
    margin-left: -9%;
    margin-top: -4px;
    z-index: 1;
    width: 98%;
}
.product-mobile{
  display: none !important;
}

#home-heading{
    display: none;
}

div#home-bg {
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    background-color: #FFF;
    background-image: url(../images/home-bg.jpg);
    background-size: cover;
    background-position: bottom;
	  position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    top: 0;
}
@media (min-width: 1600px) {
div#home-bg {
    background-image: url(../images/home-bg-wide.jpg);
}
}
.no-pad{
  padding: 0 !important;
}
.no-pad-bs{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.full-width {
    width: 100%;
}
section#main-content {
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 107vh;
    /* height: 92vh; */
    position: absolute;
}
.main-home-content {
    height: 170px;
    background-color: blue;
}

/*PRODUCT PAGES*/
/* Boxes
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
	.heading {
    width: 100%;
    margin: 0 auto;
}


	.product-heading{
    padding-top: 0;
    text-align: center;
        font-size: 2vw;
    font-family: 'Rye', cursive;
    margin-bottom: 0em;
    margin-top: 0em;
  }
.product-heading2{
	  /*font-size: 2.26em;*/
	  /*border-bottom: 3px solid #000;*/
   /* font-family: 'Passion One', cursive;*/
    /*font-family: 'Arbutus Slab', serif;*/
   /* text-transform: uppercase;*/
   /* padding-top: 1.2em;*/
   /* margin-bottom: .4em;*/
	}
	.product-heading3{
    margin: 0 auto 1em auto;
    text-align: center;
    padding-top: 0;
  
	}
.max-width-heading{
  max-width: 390px
}
	span.pp {
    font-family: 'Vast Shadow', cursive;
    /* font-family: 'Arbutus Slab', serif; */
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    /* margin: 0 auto; */
    display: block;
    margin-bottom: 0em;
}
span.small-head {
    font-family: 'Arbutus Slab', serif;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 1em;
}
span.small-head-2 {
    font-family: 'Rye', cursive;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 1em;
}
.t-head{
    font-family: 'Rye', cursive;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-bottom: 1em;
    text-align: center
}
.t-body{
    font-family: 'Trocchi', serif;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 1em;
    text-align: center
}
.left-c{
    text-align: left;
}
.left-r{
    text-align: right;
}
.lower{
    text-transform: none;
    line-height: 2em;
}
.skew-text-r{
    shape-outside: ellipse(130px 148px at -16% 41%);
    clip-path: ellipse(130px 148px at -26% 32%);
    width: 300px;
    height: 500px;
    float: left;
    opacity: .2;
    /* background-color: purple; */
    /*    shape-outside: ellipse(153px 140px at -23% 40.5%);*/
    /*clip-path: ellipse(130px 148px at -16% 32%);*/
    /*width: 335px;*/
    /*height: 487px;*/
    /*float: left;*/
    /*opacity: .2;*/
    /*background-color: purple;*/
}
.skew-text-r{
    /*shape-outside: ellipse(130px 148px at -16% 41%);*/
    /*clip-path: ellipse(130px 148px at -26% 32%);*/
    /*width: 300px;*/
    height: 500px;
    float: left;
    opacity: .2;
    /* background-color: purple; */
    /*    shape-outside: ellipse(153px 140px at -23% 40.5%);*/
    /*clip-path: ellipse(130px 148px at -16% 32%);*/
    /*width: 335px;*/
    /*height: 487px;*/
    /*float: left;*/
    /*opacity: .2;*/
    /*background-color: purple;*/
}

.skew-text-l{
shape-outside: ellipse(130px 148px at 115% 41%);
    clip-path: ellipse(130px 148px at 116% 32%);
    width: 300px;
    height: 500px;
    float: right;
    opacity: .2;
    /* background-color: purple; */
    /*    shape-outside: ellipse(130px 148px at 115% 41%);*/
    /*clip-path: ellipse(130px 148px at 116% 32%);*/
    /*width: 300px;*/
    /*height: 500px;*/
    /*float: right;*/
    /*opacity: .2;*/
    /*background-color: purple;*/
}
.no-skew-text-l{
    /*shape-outside: ellipse(130px 148px at -16% 41%);*/
    /*clip-path: ellipse(130px 148px at -26% 32%);*/
    width: 2%;
    height: 500px;
    float: right;
    opacity: .2;
    /* background-color: purple; */
    /*    shape-outside: ellipse(153px 140px at -23% 40.5%);*/
    /*clip-path: ellipse(130px 148px at -16% 32%);*/
    /*width: 335px;*/
    /*height: 487px;*/
    /*float: left;*/
    /*opacity: .2;*/
    /*background-color: purple;*/
}
.t-head.di-frame {
    min-height: 127px;
    margin-bottom: 0;
}
span.center-text {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}
.t-p-head{
    font-family: 'Vast Shadow', cursive;
    font-size: 5.8em;
    text-transform: uppercase;
    margin-bottom: .1em;
    text-align: center;
    line-height: .85em;
}
.t-p-body{
    font-family: 'Alfa Slab One', cursive;
    font-size: 2.2em;
    text-transform: uppercase;
    margin-bottom: 1em;
    text-align: center
}

.details{
      margin: 0;
  font-size: 18px;
  max-width: 600px;
}
.match{
  padding: 15px 0;
    margin: 1em 0;
}
ul.ad-info {
  font-family: 'Arbutus Slab', serif;
    padding: 0;
   }
ul.ad-info li {
  list-style-type: none;
    position: relative;
    line-height: 25px;
    padding-left: 40px;
}
ul.ad-info li:before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    width: 25px;
    height: 15px;
    margin-right: 4px;
    background: url(../images/list-almond.svg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}
.box.row-pack.popular.nutritional {
    max-width: 78%;
    margin: 0 auto;
    height: 100%;
    padding-bottom: 6%;
}
.di-frame { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../images/di-frame.svg) 25 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../images/di-frame.svg) 25 stretch; /* Opera 11-12.1 */
    border-image: url(../images/di-frame.svg) 25 stretch;
}
.di-frame-con { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(../images/di-frame.svg) 25 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../images/di-frame.svg) 25 stretch; /* Opera 11-12.1 */
    border-image: url(../images/di-frame.svg) 25 stretch;
}
.retro-p{
    font-family: 'Vast Shadow', cursive;
    font-weight: 400;
    margin: 4px auto;
    width: 90%;
    border: 5px solid #2c2d36;
    border-left: none;
    border-right: none;
    padding: 3%;
    text-align: center;
    color: #2c2d36;
    /*font-size: 2em;*/
    font-size: calc(1rem + ((1vw - 0.2em) * 3));
    line-height: 1.2em;
    text-transform: uppercase;
}
.retro-p.sm {
    font-size: calc(1rem + (1.7vw - 0.2em));
    padding: 0;
}
.avsp {
font-family: 'Rye', cursive;
    font-size: calc(1rem + (3.7vw - 0.2em));
    text-transform: uppercase;
    /* margin-bottom: 1em; */
    text-align: center;
        line-height: 1.1;
}
.margin-two{
    margin-top: 2em;
}
.push-down{
    margin-top: 0%
}
	.nutritional{
	   /*   background-image: url(../images/nut-frame.svg);*/
    /*-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 50px rgba(0, 0, 0, 0.06) inset;*/
    /*background-size: auto 100%; */
    /* background-repeat: no-repeat; */
    /* background-position: left top; */
    /* height: 100%; */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    /* -webkit-background-size: cover; */
    -moz-background-size: cover;
    -o-background-size: cover;
    /* background-size: cover; */
    background: url(../images/nut-frame.svg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
		.frame-v{

    -moz-background-size: cover;
    -o-background-size: cover;
    /* background-size: cover; */
    background: url(../images/frame-vanilla.svg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
	.frame-h{

    -moz-background-size: cover;
    -o-background-size: cover;
    /* background-size: cover; */
    background: url(../images/frame-honey.svg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
	.frame-c{

    -moz-background-size: cover;
    -o-background-size: cover;
    /* background-size: cover; */
    background: url(../images/frame-choc.svg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
	.box {
    position: relative;
    z-index: 1;
    margin-bottom: .43em;
    margin-top: 2em;
    padding: 5px;
	}
	.product-main {
    padding-top: 2em;
    padding-bottom: 2em;
    margin: 0 auto;
    max-width: 340px !important;
    position: relative;
    z-index: 3;
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .9s;
    -webkit-animation-iteration-count: 1;
    -webkit-filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
    filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
}
.detail-heading {
    margin: 2em;
}
	/*.box .box-content {*/
	/*	position: relative;*/
	/*	padding: 21px;*/
	/*	margin: 0 auto;*/
		/*background: #fff;*/
	/*	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 50px rgba(0, 0, 0, 0.06) inset;*/
	/*	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 50px rgba(0, 0, 0, 0.06) inset;*/
	/*	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 50px rgba(0, 0, 0, 0.06) inset;*/
	/*}*/
	/*.box .box-content > img{*/
	/*	width:100%*/
	/*}*/
	/*.box .box-content:before,  .box .box-content:after {*/
	/*	content: '';*/
	/*	z-index: -1;*/
	/*	position: absolute;*/
	/*	left: 2px;*/
	/*	bottom: 11px;*/
	/*	width: 350px;*/
	/*	max-width: 90%;*/
	/*	max-height: 100px;*/
	/*	height: 20%;*/
	/*	background: transparent;*/
	/*	-webkit-border-radius: 30% 0 30% 0%/100% 0 100% 0;*/
	/*	-moz-border-radius: 30% 0 30% 0%/100% 0 100% 0;*/
	/*	border-radius: 30% 0 30% 0%/100% 0 100% 0;*/
	/*	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);*/
	/*	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);*/
	/*	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);*/
	/*	-webkit-transform: skew(-3deg) rotate(-3.5deg);*/
	/*	-moz-transform: skew(-3deg) rotate(-3.5deg);*/
	/*	-ms-transform: skew(-3deg) rotate(-3.5deg);*/
	/*	-o-transform: skew(-3deg) rotate(-3.5deg);*/
	/*	transform: skew(-3deg) rotate(-3.5deg);*/
	/*}*/
	/*.box .box-content:after {*/
	/*	left: auto;*/
	/*	right: 10px;*/
	/*	-webkit-transform: skew(3deg) rotate(3.5deg);*/
	/*	-moz-transform: skew(3deg) rotate(3.5deg);*/
	/*	-ms-transform: skew(3deg) rotate(3.5deg);*/
	/*	-o-transform: skew(3deg) rotate(3.5degg);*/
	/*	transform: skew(3deg) rotate(3.5deg);*/
	/*	-webkit-border-radius: 0 30% 0 30%/0% 100% 0 100%;*/
	/*	-moz-border-radius: 0 30% 0 30%/0% 100% 0 100%;*/
	/*	border-radius: 0 30% 0 30%/0% 100% 0 100%;*/
	/*}*/
.box-content {
    padding: 1px 0%;
    /*padding: 22px 12%;*/
    /*margin: 1em 2em;*/
}

.row-pack.box h3 {
    font-family: 'Arbutus Slab', serif;
    /* text-transform: uppercase; */
    padding: 2px 0;
    margin: 0px;
    display: inline-block;
    vertical-align: top;
    /* font-size: 1em; */
    /* background-color: #eee; */
    width: 100%;
    border-bottom: solid 1px rgba(169, 169, 169, 0)
}
.row-pack h3 span {
    font-size: 18px;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    /*text-transform: capitalize;*/
}
.row-pack.popular h3 {
      font-weight: 500;
    color: #3f3f3e;
    /*background: #eb2c2e!important;*/
}
.pull-left {
    float: left !important;
}
.pull-right {
    float: right !important;
}

/*FRAME*/
.some-margin {
    overflow: visible;
    position: relative;
    /* background: url(http://i.stack.imgur.com/ghI7u.png) left -142px top -83px no-repeat, url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat, url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat, url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat, white; */
    margin: 8%;
    max-width: 430px;
  }
  .form-no-max {

    max-width: none;
  }
.corner {
    position: absolute;
    background: #fff;
    width: 80px;
    height: 40px;
}
.classic{
    background: url(../images/orn.svg) no-repeat top center;
    background-size: contain;
}
.no-svg .classic {
    background: url(../images/orn.png) no-repeat top center;
    background-size: contain;
}
.choc{
    background: url(../images/orn-c.svg) no-repeat top center;
    background-size: contain;
}
.no-svg .choc {
    background: url(../images/orn-c.png) no-repeat top center;
    background-size: contain;
}
.vanilla{
    background: url(../images/orn-v.svg) no-repeat top center;
    background-size: contain;
}
.no-svg .vanilla {
    background: url(../images/orn-v.png) no-repeat top center;
    background-size: contain;
}
.honey{
    background: url(../images/orn-h.svg) no-repeat top center;
    background-size: contain;
}
.no-svg .honey {
    background: url(../images/orn-h.png) no-repeat top center;
    background-size: contain;
}

.TL {
    
    top: -15px;
    left: -51px;
}
.TR {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: “FlipH”;

    top: -15px;
    right: -51px;

}
.BL {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: “FlipV”;

    bottom: -15px;
    left: -51px;
}
.BR {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
    filter: flipv fliph;
    -ms-filter: “flipv fliph”;

    bottom: -15px;
    right: -51px;
}
.side {
    position: absolute;
    background: #fff;
    background: url(../images/frame-s.svg) no-repeat top center;
    background-size: contain;
    width: 31px;
    height: 300px;
}
.no-svg .side {
    background: url(../images/frame-s.png) no-repeat top center;
    background-size: contain;
}
.L {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -27px;
}
.R {
    -moz-transform: scaleX(-1) translateY(-50%);
    -o-transform: scaleX(-1) translateY(-50%);
    -webkit-transform: scaleX(-1) translateY(-50%);
    transform: scaleX(-1) translateY(-50%);
    filter: FlipH;
    -ms-filter: “FlipH”;
    position: absolute;
    top: 50%;
    /*transform: translateY(-50%);*/
    right: -27px;
}
.outer {
  overflow: hidden;
}
.inner.classic{
  border: 4px solid #ff7f3f;
}
.inner.classic i{
    border: 4px solid #ff7f3f;  
}
.inner.choc{
  border: 4px solid #ad7d57;
}
.inner.choc i{
    border: 4px solid #ad7d57;  
}
.inner.vanilla{
  border: 4px solid #fbdd3c;
}
.inner.vanilla i{
    border: 4px solid #fbdd3c;  
}
.inner.honey{
  border: 4px solid #6eaadd;
}
.inner.honey i{
    border: 4px solid #6eaadd;  
}
.inner i {
  width: 70px;
  height: 70px;
  /*border: 4px solid #ff7f3f;*/
  border-radius: 50%;
  background-color: #fff;
    /*  border: 10px solid transparent;*/
    /*-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;*/
    /*-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;*/
    /*border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;*/
}
.inner .top {
  margin-top: -35px;
}
.inner .bottom {
  margin-top: -35px;
  margin-bottom: -35px;
}
.inner .left {
  float: left;
  margin-left: -35px;
}
.inner .right {
  float: right;
  margin-right: -35px;
}
.frame-content {
    padding: 19px;
    /*background-color: #e3d3e6;*/
    /*min-height: 350px;*/
    min-height: 392.02px;
}
 .show-mob-only{
     display: none;
 }
/*.orntl{*/
/*  background: url(../images/orn.svg) no-repeat top center;*/
/*}*/
/*---------------ABOUT PAGE START--------------*/
.middle {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 160rem;
    padding: 0 2.5rem;
    margin: 0 auto;
}
.about-header {
    display: block;
    position: relative;
    margin: 1em 0 0 0;
}
.about-header__logo {
       z-index: 2;
    text-align: center;
    position: relative;
}
.about-header__logo span {
    display: block;
    margin-bottom: 1em;
}
.md-century {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.about-header__logo img.main-img{
    width: 80%;
    max-width: 1000px;
    display: block;
    padding-top: 6em;
    margin: 0px auto;
    z-index: 1;
    position: relative;
    top: 12em;
    -webkit-filter: drop-shadow(4px 0px 0px rgba(34, 34, 34, 0.56)) drop-shadow(0px 0px 1px rgba(34, 34, 34, 0.56)); 
    filter: drop-shadow(4px 0px 0px rgba(34, 34, 34, 0.56)) drop-shadow(0px 0px 1px rgba(34, 34, 34, 0.56));
}


.about-header .man {
    opacity: .5;
    position: absolute;
    z-index: 0;
    top: 32%;
    left: 50%;
    width: 150px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.man img {
    width: 200px;
}
 .about-header__logo p {
    margin: 0px auto 2em;
    font-size: 1.25em;
    width: 40%;
    line-height: 1.75em;
    padding-top: 9em;
}
.text-left{
    text-align: left;
}
.about-list {
        margin: 2em 0 0 0;
}

p.butter-battle-text {
    font-family: 'Trocchi', serif;
    font-size: 1.2em;
    /* text-transform: uppercase; */
    margin-bottom: 1em;
    text-align: center;
    width: 60%;
    margin: 2% auto;
}
.t-body.benefits {
    bottom: 0px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    /* left: 50%; */
    width: 100%;
    color: #fff;
    margin-bottom: 1em;
}
.t-h.four-mar {
       top: 35%;
    font-weight: 500;
    font-size: 5em !important;
    text-align: center;
}
.inline-logo{
    width: 118px;
    margin: -4px 0px 10px 0px;
    position: relative;
    /*  width: 123px;*/
    /*margin: 0px 6px 10px 0px;*/
    /*position: relative;*/
}
.margin-about {
    margin: 4em 0 4em 4em;
}
.margin-about-right {
    margin: 4em 4em 0em 4em;
}
.margin-about-neutral {
    margin: 4em 4em 0em 0em;
}
.main-t-head{
    font-family: 'Rye', cursive;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-bottom: 1em;
   /*margin: 0px auto 2em;*/
}
.main-text{
        margin: 0px auto;
    font-size: 1.25em;
    /*width: 80%;*/
    line-height: 1.75em;
   
}
.about-images{
    max-width: 600px;
    margin: 0em auto;
    width: 100%;
    display: block;
}
#grind-ani {
    position: relative;
    /* width: 33.333%; */
    max-width: 170px;
    margin-left: 4em;
   margin: 11% auto;
    /* margin-top: 0em; */
}
.circle {
    margin-top: 2em;
}
.grind {
    position: relative;
    width: 100%;
  
}
.handle{
    position: absolute;
    width: 90%;
    height: auto;
    /* background-color: #0CB1C4; */
    animation-name: spin;
    transform-origin: 9% 90%;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn); */
    top: 31.6%;
    left: 43%;
    z-index: 4;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

#ani-con {
    /* height: 370px; */
    /* margin: 0 auto; */
    /* overflow: hidden; */
    position: absolute;
    top: 85%;
    left: 20%;
    width: 56%;
    /* height: auto; */
}

/*#ani-con div { position: absolute; }*/

.pour {
    /*position: absolute;*/
    /*left: 29%;*/
    /*top: -11.8em;*/
    /*width: .8em;*/
    /*height: 0px;*/
    /*background-color: #bc8063;*/
    /*border-radius: 10px;*/
        position: absolute;
    left: 49%;
    top: 64%;
    width: 3%;
    height: 0px;
    background-color: #bc8063;
    border-radius: 10px;
    z-index: -1;
}

#beaker {
    /* border: 10px solid #FFF; */
    /* background-image: url(../images/jar.png); */
    /* background-repeat: no-repeat; */
    border-top: 0;
    border-radius: 0 0 15px 30px;
    height: auto;
    /* left: 14px; */
    bottom: 0;
    width: 100%;
    position: absolute;
    z-index: 2;
}

#liquid {
    background-color: #bc8063;
    /* border: 10px solid #bc8063; */
    border-radius: 12.677px 15.677px 9.677px 0.677px;
    bottom: 6px;
    height: 0px;
    overflow: hidden;
    width: 87%;
    position: absolute;
    z-index: 1;
    left: 11%;
}

#liquid:after {
  background-color: rgba(255, 255, 255, 0.25);
  bottom: -10px;
  content: '';
  height: 200px;
  left: -40px;
  position: absolute;
  transform: rotate(30deg);
  -webkit-transform: rotate(15deg);
  width: 110px;
}


@media (max-width: 768px) {
.left-r, .left-c {
    text-align: center;
}
.skew-text-l, .skew-text-r{
    display: none;
}
#grind-ani {

    margin: 4% auto -2em auto;
}
.about-header__logo img.main-img {
    width: 100%;
   padding-top: 10em;
}
.about-header__logo p {
    width: 100%;
    padding-top: 10em;
}
.about-header .man {
    top: 31%;
}


}
/*---------------ABOUT PAGE END---------------*/

/*---------------CONTACT-----------------*/

.text-field {
    height: 35px;
    margin-bottom: 15px;
    padding: 0 9px;
    color: #333333;
    box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.57);
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
        font-family: 'Trocchi', serif;
    font-size: 1.2em;

}

textarea.text-field {
    padding: 9px;
    height: auto;
    resize: vertical;
}

.text-field:focus {
    box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.57), 0 0 1px 1px #333333;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.text-field,
textarea.text-field {
        border-radius: 0;
    width: 100%;
}

textarea.text-field {
    height: 161px;
}
.send-but {
    font-family: 'Rye', cursive;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: 0 auto;
}
button {

    position: relative;
     padding-right: 20px; 
    background-color: rgba(236, 251, 255, 0);
    /* border: 2px solid #a6e0ee; */
    /* color: #2d7586; */
    display: block;
    margin: 13% auto;
    height: 60px;
    width: 170px;
    cursor: pointer;
}
button:focus {outline:0;}
button:hover {
  /*background-color: #ddf7ff;*/
}
button:hover svg {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: -webkit-transform 0.15s;
  -moz-transition: -moz-transform 0.15s;
  -o-transition: -o-transform 0.15s;
  -ms-transition: -ms-transform 0.15s;
  transition: transform 0.15s;
}
button svg {
  position: absolute;
  top: 13px;
  right: 25px;
  height: 30px;
  width: auto;
  -webkit-transition: -webkit-transform 0.15s;
  -moz-transition: -moz-transform 0.15s;
  -o-transition: -o-transform 0.15s;
  -ms-transition: -ms-transform 0.15s;
  transition: transform 0.15s;
}
button svg path {
  fill: #333333;
}
button.clicked {
  /*background-color: #cff5b3;*/
  /*border: 2px solid #cff5b3;*/
  /*color: #6aaa3b;*/
  padding-right: 6px;
  -webkit-animation: bounce-in 0.3s;
  -moz-animation: bounce-in 0.3s;
  -o-animation: bounce-in 0.3s;
  -ms-animation: bounce-in 0.3s;
  animation: bounce-in 0.3s;
  cursor: default;
}
button.clicked svg {
  -webkit-animation: flyaway 1.3s linear;
  -moz-animation: flyaway 1.3s linear;
  -o-animation: flyaway 1.3s linear;
  -ms-animation: flyaway 1.3s linear;
  animation: flyaway 1.3s linear;
  top: -80px;
  right: -1000px;
}
button.clicked svg path {
  fill: #6aaa3b;
}
@-moz-keyframes flyaway {
  0% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 25px;
    height: 30px;
  }
  5% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 0px;
    height: 30px;
  }
  20% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    top: 13px;
    right: -130px;
    height: 45px;
  }
  40% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: -40px;
    right: -280px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    top: -200px;
    right: -1000px;
    height: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes flyaway {
  0% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 25px;
    height: 30px;
  }
  5% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 0px;
    height: 30px;
  }
  20% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    top: 13px;
    right: -130px;
    height: 45px;
  }
  40% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: -40px;
    right: -280px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    top: -200px;
    right: -1000px;
    height: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes flyaway {
  0% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 25px;
    height: 30px;
  }
  5% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 0px;
    height: 30px;
  }
  20% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    top: 13px;
    right: -130px;
    height: 45px;
  }
  40% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: -40px;
    right: -280px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    top: -200px;
    right: -1000px;
    height: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes flyaway {
  0% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 25px;
    height: 30px;
  }
  5% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: 13px;
    right: 0px;
    height: 30px;
  }
  20% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    top: 13px;
    right: -130px;
    height: 45px;
  }
  40% {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    top: -40px;
    right: -280px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    top: -200px;
    right: -1000px;
    height: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes bounce-in {
  0% {
    padding-right: 30px;
  }
  40% {
    padding-right: 6px;
  }
  50% {
    padding-left: 30px;
  }
  100% {
    padding-left: 6px;
  }
}
@-webkit-keyframes bounce-in {
  0% {
    padding-right: 30px;
  }
  40% {
    padding-right: 6px;
  }
  50% {
    padding-left: 30px;
  }
  100% {
    padding-left: 6px;
  }
}
@-o-keyframes bounce-in {
  0% {
    padding-right: 30px;
  }
  40% {
    padding-right: 6px;
  }
  50% {
    padding-left: 30px;
  }
  100% {
    padding-left: 6px;
  }
}
@keyframes bounce-in {
  0% {
    padding-right: 30px;
  }
  40% {
    padding-right: 6px;
  }
  50% {
    padding-left: 30px;
  }
  100% {
    padding-left: 6px;
  }
}

.contacts-map-wrapper {
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.contacts-map {
    height: 310px;
}

.contacts-map-wrapper:before,
.contacts-map-wrapper:after {
    content: "";
    position: absolute;
    z-index: -1;
    -ms-transform: skew(-3deg, -2deg);
    -webkit-transform: skew(-3deg, -2deg); /* Safari and Chrome */
    -o-transform: skew(-3deg, -2deg); /* Opera */
    -moz-transform: skew(-3deg, -2deg); /* Firefox */
    bottom: 13px;
    box-shadow: 0 15px 9px rgba(0, 0, 0, 0.3);
    height: 50px;
    left: 1px;
    max-width: 50%;
    width: 50%;
}

.contacts-map-wrapper:after {
    -ms-transform: skew(3deg, 2deg); /* IE 9 */
    -webkit-transform: skew(3deg, 2deg); /* Safari and Chrome */
    -o-transform: skew(3deg, 2deg); /* Opera */
    -moz-transform: skew(3deg, 2deg); /* Firefox */
    left: auto;
    right: 1px;
}

.address {
    margin-top: 45px;
    padding-left: 50px;
    font-size: 20px;
}

/*-----------------END CONTACT-----------*/
/*END SIMONS STYLES SINCE BOOTSTRAP*/


/* footer section */
/* ===================================
    Icon
====================================== */
.footer-bottom {
    height: 60px;
}
.bg-green {
    background-color: #00a9b4 !important;
}
.foot-content {
    margin-top: 23px;
}
#footer-logo{
  margin: 18px;
      min-width: 250px;
    width: 10%;
}
.footer-social {
    margin: 0 0 18px 0;
}
img.bhlogo {
      min-width: 114px;
    width: 10%;
    margin-bottom: 2px;
    margin-top: -7px;
}
.ppp{
    margin-top: 2em
}

.text-center {
    text-align: center;
}
.axis-icon{
    margin: 4% 0 8% 0;
    opacity: .8;
}
.bullet {
    color: #00a9b4;
    font-size: .8em !important;
    margin: 25px 5px;
}
#pp-link {
    display: inline-block;
    text-align: right;
    min-width: 140px;
}
#tc-link {
    display: inline-block;
    text-align: left;
    min-width: 140px;
}
#terms input {
    -webkit-appearance: checkbox;
}
.terms-text {
    text-transform: none;
    font-size: 1.1em;
}
.terms-text a {
    color: #000;
}
/* icon size */
i { color: #000000; margin:0}
/*.bh-heart{color: #e74554;}*/
.bh-heart{color: #000000;}
.icon-extra-large {font-size:60px !important;}
.footer-social a {
    margin: 0 25px;
    display: inline-block;
}
footer i {
    color: #2c2d36;
    margin: 0;
}
.footer-social i {
    font-size: 22px;
}
.footer-text{
    font-family: 'Trocchi', serif;
    color: #2c2d36;
}
/*footer .copyright {*/
/*  color:#adadad;*/
/*  margin-bottom:50px;*/
/*  margin-top:50px;*/
/*  text-align:center;*/
/*}*/

/* other objects */
.projectObj {
  font-family: 'Arbutus Slab', serif;
  color:#2c2d36;
  display:block;
}
a:hover, a:focus {
   color: #1d1d1b !important;
}
a.projectObj .prod-link:hover {
    /* text-decoration: underline; */
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0);
}
.name-more {
    line-height: 1em;
    float: left;
    font-size: 2.3em;
    font-weight: 700;
    margin-left: 5%;
    margin-top: 4%;
    margin-bottom: 25px;
}
.projectObj .name-l {
  float: left;
  font-size: 3.8em;
  font-weight: 700;
  margin-left: 5%;
  margin-top: 4%;
  
  /*position:absolute;*/
  /*width:42%;*/
}
.projectObj .img-r {
  float:right;
  margin-bottom:4%;
  /*margin-top:5%;*/
  margin-top:0%;
  margin-right: 5%;
  /*width:30%;*/
  width:50%;
  max-width: 325px;
  -webkit-animation-duration: .6s;
  -webkit-animation-delay: .9s;
  -webkit-animation-iteration-count: 1;
  -webkit-filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
  filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
}
.projectObj .name-r {
    float: right;
    font-size: 3.8em;
    font-weight: 700;
    margin-right: 5%;
    margin-top: 4%;
    text-align: right;
 
  /*position:absolute;*/
  /*width:42%;*/
}
.projectObj .img-l {
  float:left;
  margin-bottom:4%;
  margin-top:0%;
  margin-left: 5%;
  width:50%;
  max-width: 325px;
  -webkit-animation-duration: .6s;
  -webkit-animation-delay: .9s;
  -webkit-animation-iteration-count: 1;
  -webkit-filter: drop-shadow(-10px 6px 6px rgba(34, 34, 34, 0.56));
  filter: drop-shadow(-10px 6px 6px rgba(34, 34, 34, 0.56));
}
.main-img-r {
    float: right;
    margin-bottom: 4%;
    margin-top: 5%;
    margin-right: 5%;
    width: 30%;
    max-width: 325px !important;
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .9s;
    -webkit-animation-iteration-count: 1;
    -webkit-filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
    filter: drop-shadow(10px 6px 6px rgba(34, 34, 34, 0.56));
}
.prod-link {
    
    max-width: 295px;
     /*max-width: 510px;*/
}
.show-mob{
    display: none;
}

/*#test-mob {*/
/*    position:fixed;*/
/*}*/
.paddRow {
  background-color:#dadada;
  color:#818181;
  display:none;
  padding-bottom:40px;
}
.paddRow.aboutRow {
  background-color:#78c2d4;
  color:#FFF !important;
  display:block;
}
.paddRow .head {
  font-size:4em;
  font-weight:100;
  margin:40px 0;
}
.paddRow .close {
  cursor:pointer;
  position:absolute;
  right:50px;
  top:80px;
  width:38px;
}

.about {
  color:#818181;
}
.about section {
  margin:0 0 10%;
}
.about .head {
  font-size:4em;
  font-weight:100;
  margin:3% 0;
}
.about .subHead {
  font-size:2.5em;
  font-weight:100;
  margin:0 0 3%;
}
.about .txt {
  width:60%;
}
.about .image {
  width:26%;
}
.about .flLeft {
  float:left;
}
.about .flRight {
  float:right;
}

.projectHead.product {
  background-color:#87b822;
}
.projectHead .picture {
  margin-bottom:6%;
  margin-top:6%;
}
.projectHead .picture.right {
  margin-right:-3.5%;
}
.projectHead .text {
  position:absolute;
  width:49%;
}
.projectHead .centerText {
  margin:0 auto;
  padding-bottom:24%;
  padding-top:6%;
  text-align:center;
  width:55%;
}

.image {
  text-align:center;
}
.image img {
  vertical-align:top;
  width:100%;
}

.contactForm {
  width:50%;
}
#form-messages {
    font-family: 'Trocchi', serif;
    font-size: 1.2em;
    text-align: center;
}
.input {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:1% 0;
  padding:12px 14px;
  width:47%;
}
.input.email {
  float:right;
}

button {
  border:none;
  cursor:pointer;
}
.textarea {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  height:200px;
  margin:1% 0;
  overflow:auto;
  padding:12px 14px;
  resize:none;
  width:100%;
}

::-webkit-input-placeholder {
  color:#a7a7a7;
}
:-moz-placeholder {
  color:#a7a7a7;
}
::-moz-placeholder { /* FF18+ */
  color:#a7a7a7;
}
:-ms-input-placeholder {
  color:#a7a7a7;
}

.loader {
  -moz-animation:loader_rot 1.3s linear infinite;
  -o-animation:loader_rot 1.3s linear infinite;
  -webkit-animation:loader_rot 1.3s linear infinite;
  animation:loader_rot 1.3s linear infinite;
  height:80px;
  width:80px;
}
@-moz-keyframes loader_rot {
  from {
    -moz-transform:rotate(0deg);
  }
  to {
    -moz-transform:rotate(360deg);
  }
}
@-webkit-keyframes loader_rot {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
  }
}
@keyframes loader_rot {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.ng-enter,
.ng-leave {
  -moz-transition:all 2s;
  -o-transition:all .2s;
  -webkit-transition:all .2s;
  transition:all .2s;
}
.ng-enter {
  left:20px;
  opacity:0;
  position:absolute;
  top:0;
}
.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}
.ng-leave {
  left:0;
  opacity:1;
  position:absolute;
  top:0;
}
.ng-leave.ng-leave-active {
  left:-20px;
  opacity:0;
}
.mob-form{
    display: none;
}
.mob-no-form{
    display: inline-block;
}
/* responsive rules */
@media only screen and (max-width: 1427px) {
.box.row-pack.popular.nutritional {
    max-width: 44em;
   padding-bottom: 10%;

}
.t-p-head {
    font-size: 6.8vw;
    padding-top: .5em;
    margin-bottom: .1em;
}
.t-p-head.choco {
    font-size: 4.8vw;
}
h2.product-heading {
    margin-top: 0;
    padding-top: 0;
    font-size: 3.6vh;
}
.border-wise2.fit {
    margin-bottom: 1em;
}
}
@media (max-width:1200px) and (min-width:681px) {
.no-show-mob{
    display: none;
}
.show-mob{
    /*background-color: #ff7f3f;*/
    display: block;
}
img#f5 {
     -ms-transform: rotate(180deg); 
     -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
    width: 100%;
    margin: 0 auto !important;
    bottom: 0px;
    left: 0%;
    /* right: -50%; */
    position: absolute;
    z-index: 0;
}
}
@media (max-width:767px) and (min-width:681px) {
  .projectObj .img-r{
    max-width: 200px;
    margin-top: 10%;
}
.projectObj .img-l{
    max-width: 200px;
    margin-top: 10%;
}
.name-r.prod-link.too-much-text {
    max-width: 400px;
}
}
@media (max-width: 1200px) {
    body {
      font-size:90%;
    }
    h1 {
      font-size:4.3em;
    }
    p {
      font-size:1.3em;
    }
    header {
      height:80px;
    }
    header .logo {
      margin-top:12px;
      width:200px;
    }
    header nav {
      margin-top:11px;
    }
    header nav ul li {
      margin-right:12px;
    }
    header nav ul li a {
      border-radius:23px;
      font-size: 1.3em;
      padding:10px 12px;
    }
    .wrap {
      padding:0 17px;
    }
    .paddRow .close {
      right:30px;
    }
    h2.product-heading {

    font-size: 3.3vh;
}
}
@media (max-width: 991px) {
.t-head.di-frame {
    min-height: 60px;
}
.HR, .HL {
    top: 15px;
}
h1.intro {
   
    font-size: 2.6em;
    margin-left: 7%;
   }
.prod-link {
    max-width: 301px;
}
.projectObj .name-r, .projectObj .name-l {
  font-size: 2.6em
}
.name-r.prod-link.too-much-text {
    max-width: 400px;
}
.about-images{
    margin: 0em auto;
    
}
.margin-about {
    margin: 4em 0 0em 4em;
}
.no-show-mob2{
    display: none;
}
#grind-ani {

    margin: 2% auto;
}
.left-r, .left-c {
    text-align: center;
}
.skew-text-l, .skew-text-r{
    display: none;
}
.circle {
    margin-top: 1em;
}
}
@media (max-width: 900px) {
    .contactForm {
      width:100%;
    }
    .some-margin{
    margin: 6% 4%;
}
h2.product-heading {

    font-size: 3.3vh;
}
}

@media (max-width: 768px) {
    body {
      font-size:80%;
      margin:0;
    }
    h1 {
      font-size:4em;
    }
    header {
      height:70px;
    }
    header .logo {
      margin-top:20px;
      width:70px;
    }
    header nav {
      margin-top:8px;
    }
    header nav ul li {
      margin-right:5px;
    }
    header nav ul li a {
      border-radius:20px;
      font-size:1.1em;
      padding:8px;
    }
    .wrap {
      padding:0 15px;
    }
    .projectObj .name {
      font-size:3em;
    }
    .paddRow {
      padding-bottom:30px;
    }
    .paddRow .head {
      font-size:3em;
      margin:30px 0;
    }
    .paddRow .close {
      right:20px;
      top:60px;
      width:30px;
    }
    .projectHead .picture {
      width:67%;
    }
    .projectHead .picture.right {
      margin-right:16.5%;
    }
    .projectHead .text {
      position:static;
      width:100%;
    }
    .projectHead .centerText {
      width:70%;
    }
    .view-enter,.view-leave {
      -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
      transform:translate3d(0,0,0);
    }
    .t-head.di-frame {
    min-height: 60px;
}
.some-margin{
    margin: 6% 5%;
}
h2.product-heading {

    font-size: 2.5vh;
}
p.butter-battle-text {
    line-height: 2em;
    width: 100%;
    margin: 2% auto;
}
}
@media (max-width: 767px) { 
 .show-mob-only{
     display: inline-block;
 }
 .some-margin{
    margin: 6% auto;
}
h2.product-heading {

    font-size: 3.3vh;
}
.mob-form{
    display: inline-block;
}
.mob-no-form{
    display: none;
}
}
@media (max-width: 680px) {
         #screen {
   pointer-events: none; 
 }
  #home-heading{
    display: inline-block;
    position: absolute;
    margin: 0 auto;
    top: 0px;
    z-index: 4;
    max-width: 65%;
    left: 0;
    right: 0;
  }
  #products-home{
  top: 80vh;
  width: 90%;
  }
.margin-top{
  margin-top:0;
}

 .max-width-heading{
  max-width: 390px
}
  .box-content {
   padding: 22px 8%;
    /*margin: 0 4em;*/
}
.box.row-pack.popular.nutritional {
    max-width: 100%;
}
.t-p-head {
    font-size: 3.8em;
    padding-top: .5em;
    margin-bottom: .1em;
}
.t-p-head.choco {
    font-size: 9vw;
}
.product-mobile{
  width: 95%;
  display: block !important;
}
.product-laptop{
  display: none !important;
}
.border-wise2.fit {
    margin-bottom: 1em;
}

  #test-mob {
    display: none;
    
  }
.name-r.prod-link.too-much-text {
    max-width: 400px;
}
.projectObj .img-r{
    max-width: 200px;
}
.projectObj .img-l{
    max-width: 200px;
}
.margin-about {
    margin: 1em 1em 0em 1em;
}
#grind-ani {
    max-width: 130px;
}
.avsp {

    font-size: calc(1rem + (5.7vw - 0.2em));
}
.retro-p {
    font-size: calc(2.6rem + (1.7vw - 0.2em));
    padding: 0;
}
.retro-p.sm {
    font-size: calc(1.4rem + (1.7vw - 0.2em));
    padding: 0;
}
.no-pad-con{
 padding: 0 !important;   
}
.di-frame-con { 
    border: 10px solid transparent;
    padding: 0 !important;
    -webkit-border-image: none; /* Safari 3.1-5 */
    -o-border-image: none; /* Opera 11-12.1 */
    border-image: none;
}
}
@media (max-width: 480px) {
    body {
      font-size:70%;
      margin:0;
    }
     #screen {
   pointer-events: none; 
 }

h2 {
    font-size: 2em;
}
.name-more {

    font-size: 1.8em;

}
    header {
      height:50px;
    }
    header .logo {
      display:none;
    }
    header nav {
      margin-top:3px;
    }
    header nav ul li {
      margin-right:3px;
    }
    header nav ul li a {
      border-radius:20px;
      font-size:1.3em;
      padding:5px 14px;
    }
    /*#contactBtn {*/
    /*  display:none;*/
    /*}*/

.pad-one{
  padding: 0em;
}

    .wrap {
      padding:0 0px;
    }
    .di-frame{
      padding: 0 0 !important;
    }
    .paddRow {
      padding-bottom:20px;
    }
    .paddRow .head {
      margin:20px 0;
    }
    .paddRow .close {
      right:10px;
      top:45px;
      width:20px;
    }
    .about .image {
      margin:10% auto;
      width:60%;
    }
    .about .abIcon {
      display:inline;
    }
    .projectHead .centerText {
      width:90%;
    }
    .about .txt,.input {
      width:100%;
    }
    .about .flLeft,.about .flRight,.input.email {
      float:none;
    }

    h2.product-heading {
    margin-top: 0;
    padding-top: 0;
    font-size: 3.6vh;
}
      .some-margin{
    margin: 4%
  }

  .footer-text {
    font-size: .7em;

}
  #products-home{
  top: 75vh;
  width: 100%;
  }
  #home-heading{
    top: 80px;
    max-width: 90%;

  }
.just-shadow {

    width: 6px;
    box-shadow: 3px 4px 17px 5px rgba(0, 0, 0, .2), 5px 3px 17px 5px rgba(0, 0, 0, .2);
}
.margin-top{
  margin-top:0;
}

  img.bhlogo {
    min-width: inherit;
    width: 29%;
    margin-bottom: 2px;
    margin-top: -3px;
}
.prod-link{
  max-width: 332px;
  
}
.name-r.prod-link.too-much-text {
    max-width: 500px;
}
.projectObj .img-r {
    margin-bottom: 8%;
   }
.projectObj .img-l {
    margin-bottom: 8%;
   }
.main-img-r {
    
    margin-bottom: 8%;
    margin-top: 4%;
    margin-right: 5%;
    width: 91%;
    max-width: 325px;
  
}
}
@media (max-width: 450px) {

  .box {
	      padding: 15px 0;
    margin: 0 0;   
   /* margin: 0 -90px;*/
     /*margin: 0 -50px;*/
   }
   .box-content {
    padding: 17px 0;
    margin: 0 0;
}
.heading {

    width: 93%;
	}
.details{
  font-size: 16px;
}

.row-pack h3 span {
    font-size: 16px;
}
.max-width-heading{
  max-width: 100%
}
.box.row-pack.popular.nutritional {
    max-width: 100%;
   padding-bottom: 10%;

}
.t-p-head {
    font-size: 12.8vw;
    padding-top: .5em;
    margin-bottom: .1em;
}
.t-p-body {
  font-size: 7vw;
  margin-bottom: 0em;
}
.border-wise2.fit {
    margin-bottom: 1em;
}
.HL {
    top: 9px;
    left: 12px;
}
.HR {
    top: 9px;
    right: 12px;
}
.hand {
    width: 45px;
}
.product-mobile{
  width: 95%;
  display: block !important;
}
.product-laptop{
  display: none !important;
}
.frame-content {
    padding: 6px;
  min-height: 300px;
}
.frame-content.mail {
    padding: 16px;
  min-height: 300px;
}
/*   .box-content {*/
/*    padding: 15px 14%;*/
/*    margin: 0 auto;*/
/*}*/
}