@charset "UTF-8";
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@media screen and (max-width:768px){
  #google_translate_element {
    display: none !important;
  }
}

#google_translate_element {
  position: absolute;
  top: 3.2vw;
  left: 5vw;
}

.goog-te-menu-value img {
  width:1px !important;
  height: 1px !important;
}

#google_translate_element img {
  display: inline-block !important;
  object-fit: none !important;
  padding-bottom: 0 !important; 
  margin-bottom: 0px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
  padding-bottom: 0 !important;
}

.col-sm-push-6{
    margin-bottom:10%;
}
.moretoreadinvisible{
    display:none;
}
.moretoreadvisibile{
    display:block;
}
.designation-circle{
    margin-bottom:5%;
}
.greenacres{
    background-color:#9caf31 !important;
}
.square {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
}
.carousel-control.left{
    top:50%;
}
.carousel-control.right{
    top:50%;
}
.readmorelink{
    color:#7d9037;
    text-align:center;
}
.readmorelinkarrow{
    color:#7d9037;
    text-align:center;
}
.embed-responsive {
    overflow: visible !important;
    margin-bottom: 10%;
}

.designation-circle {
    flex: 1;
    margin-right: 5px;
    max-width: 50px;
}

#imageandtext {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.usdalogo {
    width: calc(100%/2);
}

.product_title {
    margin-bottom: 3%;
    padding-top: 3%;
}

.recipebackgroundbrown {
    background-color: #7b2e00;
}

.overflowhidden {
    overflow: hidden;
}

.recipebackgroundcream {
    background-color: #f5e8be;
}

.ingnut {
    font-family: 'Stint Ultra Expanded', cursive;
    color: #f4bd6a;
}

.ingnutactive {
    color: #792c00 !important;
    text-decoration: underline;
}


#productvideonutrition {
    /*padding-bottom:18%;*/
}

.opensans {
    font-family: 'Open Sans', sans-serif !important;
}
.opensans span{
    font-family: 'Open Sans', sans-serif !important;
}
.opensans li {
    font-family: 'Open Sans', sans-serif;
}

.stintexpanded {
    font-family: 'StintUltraExpanded', sans-serif;
}

#nutrition {
    width: 80%;
    margin-left: 10%;
    text-align: center;
    font-family: 'Stint Ultra Condensed', cursive;
}

body {
    background-color: #f5e8be;
}

#headerandnav {
    background-color: #f5e8be;
}
#headerandnavmain {
    background-color: #f5e8be;
}
#headerimg {
    position: absolute;
    width: 100%;
    z-index: 0;
}

#headerimg img {
    width: 100%;
}

#headerbgcolor {
    position: relative;
    /*background: #e3d29b;*/
    z-index: 1;
    background-color: #b39746;
    background-image: url("../img/dark-dot.png");
}

.footer2 {
    position: absolute;
    z-index: 1;
    height: 32vh;
    width: 100%;
    /*background-color:rgba(184,108,45,.5);*/
    background-image: url("../img/background48x48.png");
}

.socialicons {
    position: relative;
    z-index: 2;
    width: 50%;
    height: 50%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

#socialiconsbar {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.socialicns {
    margin-left: calc(50%/6);
    width: 10%;
    float: left;
    margin-top: 5%;
    opacity: 1;
}

#cookslogo {
    position: relative;
    z-index: 1;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
}

#cookslogo img {
    width: 100%;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 12%;
}

#nav {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #F8E49F;
    position: relative;
    margin-top: -3%;
}

#navbg1 {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAALklEQVQYV2NcPsn8/3+G/wyMDAwMjMsnmf03sEphYPjPwMC4bJLZf0PLFAaQFAASBwvpiMgO5AAAAABJRU5ErkJggg==") repeat;
}

#navbg {
    height: 97px;
    background-color: #b39746;
    background-image: url("../img/dark-dot.png");
    position: relative;
    z-index: -1;
}

#nav ul {
    list-style-type: none;
}

#nav li {
    list-style-type: none;
    float: left;
    padding-left: calc(100%/9);
    font-size: 1.3em;
    /*padding-left:11%;*/
}

#products {
    background-color: #f6e9bd;
}

#missionstatement {
    background-color: #f5e8be;
    position: relative;
    z-index: -2;
    margin-top: -10%;
}
#aboutus {
    background-color: #f5e8be;
    position: relative;
    z-index: -2;
    /*margin-top: -20%;*/
}

#missionstatementtext {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    text-align: center;
    /*margin-top: 34%;*/
}
#aboutustext {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    text-align: center;
    margin-top: 20%;
}
#alljars{
    background-color:#f5e8be;
}

#missionstatementtext h1 {
    padding-top: 20%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #b86c2d;
}
#recipesheading h1 {
    padding-top: 20%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #b86c2d;
}
#aboutustext h1 {
    padding-top: 8%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #b86c2d;
}

#missionstatementtext p {

    font-family: 'Roboto Slab', serif;
}
#aboutustext p {
    font-family: 'Roboto Slab', serif;
}

.robotoslab {
    font-family: 'Roboto Slab', serif !important;
    font-weight:700 !important;
}
.black{
    color:black;
}
.lowfat{
    margin-left:2%;
    margin-right:2%;
}

/* quick grid */

.container {
    width: 93%;
    margin: auto;
}



/* Bootstrap-style columns */

.column {
    position: relative;
    float: left;
    min-height: 1px;
    width: 25%;
    padding-left: 4px;
    padding-right: 4px;
    /* Space between tiles */
    margin-top: 8px;
}

.col-span {
    width: 50%;
}

.my-sizer-element {
    width: 8.33333%;
}



/* default styles so shuffle doesn't have to set them (it will if they're missing) */

.my-shuffle {
    position: relative;
    overflow: hidden;
}



/* Ensure images take up the same space when they load */


/* https://vestride.github.io/Shuffle/images */

.aspect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

.aspect__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.aspect--16x9 {
    padding-bottom: 68.25%;
}

.aspect--9x80 {
    padding-bottom: calc(112.5% + 8px);
}

.aspect--32x9 {
    padding-bottom: calc(28.125% - 3px);
}

img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}



/* Small reset */

*,
::before,
::after {
    box-sizing: border-box;
}

figure {
    margin: 0;
    padding: 0;
}




/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}



/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}



/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    /* 1 */
    display: block;
}



/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
    display: inline-block;
}



/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}



/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}



/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
[hidden] {
    display: none;
}



/* Links
   ========================================================================== */


/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}



/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
    outline-width: 0;
}



/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}



/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}



/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}



/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}



/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}



/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}



/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}



/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}



/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}



/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}



/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}



/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}



/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}



/* Forms
   ========================================================================== */


/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */

button,
input,
select,
textarea {
    font-family:'Open Sans', sans-serif;

}



/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
    font-weight: bold;
}



/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */

button,
input,
select {
    /* 2 */
    overflow: visible;
}



/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
    /* 1 */
    margin: 0;
}



/**
 * Remove the inheritence of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritence of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}



/**
 * Change the cursor in all browsers (opinionated).
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}



/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */

[disabled] {
    cursor: default;
}



/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
}



/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}



/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
input:-moz-focusring {
    outline: 1px dotted ButtonText;
}



/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}



/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}



/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}



/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}



/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}



/**
 * Correct the odd appearance of search inputs in Chrome and Safari.
 */

[type="search"] {
    -webkit-appearance: textfield;
}



/**
 * Remove the inner padding and cancel buttons in Chrome on OS X and
 * Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main {
    overflow: hidden;
}

pre.max-height {
    max-height: 30em;
}

picture {
    display: block;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

ul ul {
    padding-left: 1.25em;
    margin: 0;
    list-style-type: circle;
}

li {
    line-height: 1.4;
}

nav>a {
    display: block;
    margin: 5px 0;
}

.breathable-list li {
    line-height: 1.7;
}

.filter__label {
    margin: 0 0 3px;
}

.filter__search {
    margin: 5px 0;
}

.sort-options {
    margin-top: 10px;
}

#be-social h2 {
    margin-bottom: 32px;
}

body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
    color: #5D6D77;
}

a {
    text-decoration: none;
}

a,
a:visited {
    color: #3498DB;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: #2ECC71;
}

h2,
h3,
h4,
h5,
h6 {
    color: #34495E;
}

h1 {
    margin: 20px 0;
    font-weight: 300;
    font-size: 4em;
    line-height: 1;
    color: #2ECC71;
}

h2 {
    position: relative;
    font-size: 2.5em;
    margin-bottom: 18px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0.1em;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 2px;
    /*background-color: #2ECC71;*/
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

h3 {
    margin: .6667em 0 0.5em;
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}
@media screen and (min-width:768px){
    #alljars{
    display:block;
}
}
@media screen and (max-width: 767px) {
    h1 {
        font-size: 8vw;
        margin: 3vw 0;
    }
    h2 {
        font-size: 6vw;
        margin: 2vw 0;
    }
    .col-sm-push-6{
	margin-bottom:15% !important;
}
    .navbar-default a{
        font-size: x-large !important;
    }

#recipetwobody > div.col-sm-6.forprintingredients > h4:nth-child(1){
	margin-top:20%;
}
    #alljars{
    display:block;
}
    #alljarssub{
        display:none;
    }
}

/*h1>a,*/
/*h2>a,*/
/*h3>a {*/
    /*display: none;*/
/*}*/

/*h1:hover>a,*/
/*h2:hover>a,*/
/*h3:hover>a {*/
    /*position: absolute;*/
    /*display: block;*/
    /*top: 0;*/
    /*left: -40px;*/
    /*height: 50px;*/
    /*width: 50px;*/
    /*background: url("../img/link.svg") no-repeat;*/
    /*overflow: hidden;*/
    /*text-indent: -999em;*/
/*}*/

.unstyled {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.light-text-dark-box p {
    color: #ECF0F1;
}

.light-text-dark-box a {
    color: #ECF0F1;
}

.light-text-dark-box a:hover {
    color: white;
}
.square{
    margin-bottom:5%;
}


:not(pre)>code {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    color: black;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
}

:not(pre)>code::before,
:not(pre)>code::after {
    letter-spacing: -0.2em;
    content: "\00a0";
}

.container {
    padding-left: 3.5%;
    padding-right: 3.5%;
}

.container::before,
.container::after {
    content: " ";
    display: table;
}

.container::after {
    clear: both;
}

.row {
    margin-left: auto;
    margin-right: auto;
}

.row::before,
.row::after {
    content: " ";
    display: table;
}

.row::after {
    clear: both;
}

.row .row {
    margin-left: -8px;
    margin-right: -8px;
}

.row--centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.aspect {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
}

.aspect--16x9 {
    padding-bottom: 56.25%;
}

.aspect--9x16 {
    padding-bottom: 177.77778%;
}

.aspect--4x3 {
    padding-bottom: 75%;
}

.aspect--3x4 {
    padding-bottom: 133.33333%;
}

.aspect--3x2 {
    padding-bottom: 66.66667%;
}

.aspect--3x1 {
    padding-bottom: 33.33333%;
}

.aspect--2x3 {
    padding-bottom: 150%;
}

.aspect--2x1 {
    padding-bottom: 50%;
}

.aspect--1x2 {
    padding-bottom: 200%;
}

.aspect--1x1 {
    padding-bottom: 100%;
}

.aspect--none {
    height: auto;
    padding-bottom: 0;
    overflow: visible;
}

.aspect--none>.aspect__inner {
    position: static;
}

.aspect>div,
.aspect__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.col-1\@xs,
.col-2\@xs,
.col-3\@xs,
.col-4\@xs,
.col-5\@xs,
.col-6\@xs,
.col-7\@xs,
.col-8\@xs,
.col-9\@xs,
.col-10\@xs,
.col-11\@xs,
.col-12\@xs,
.col-1\@sm,
.col-2\@sm,
.col-3\@sm,
.col-4\@sm,
.col-5\@sm,
.col-6\@sm,
.col-7\@sm,
.col-8\@sm,
.col-9\@sm,
.col-10\@sm,
.col-11\@sm,
.col-12\@sm,
.col-1\@md,
.col-2\@md,
.col-3\@md,
.col-4\@md,
.col-5\@md,
.col-6\@md,
.col-7\@md,
.col-8\@md,
.col-9\@md,
.col-10\@md,
.col-11\@md,
.col-12\@md,
.col-1\@lg,
.col-2\@lg,
.col-3\@lg,
.col-4\@lg,
.col-5\@lg,
.col-6\@lg,
.col-7\@lg,
.col-8\@lg,
.col-9\@lg,
.col-10\@lg,
.col-11\@lg,
.col-12\@lg {
    position: relative;
    box-sizing: border-box;
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
}

.col-1\@xs,
.col-2\@xs,
.col-3\@xs,
.col-4\@xs,
.col-5\@xs,
.col-6\@xs,
.col-7\@xs,
.col-8\@xs,
.col-9\@xs,
.col-10\@xs,
.col-11\@xs,
.col-12\@xs {
    float: left;
}

.aspect--16x9\@xs {
    padding-bottom: 56.25%;
}

.aspect--9x16\@xs {
    padding-bottom: 177.77778%;
}

.aspect--4x3\@xs {
    padding-bottom: 75%;
}

.aspect--3x4\@xs {
    padding-bottom: 133.33333%;
}

.aspect--3x2\@xs {
    padding-bottom: 66.66667%;
}

.aspect--3x1\@xs {
    padding-bottom: 33.33333%;
}

.aspect--2x3\@xs {
    padding-bottom: 150%;
}

.aspect--2x1\@xs {
    padding-bottom: 50%;
}

.aspect--1x2\@xs {
    padding-bottom: 200%;
}

.aspect--1x1\@xs {
    padding-bottom: 100%;
}

.aspect--none\@xs {
    height: auto;
    padding-bottom: 0;
    overflow: visible;
}

.aspect--none\@xs >.aspect__inner {
    position: static;
}

.col-1\@xs {
    width: 16.66667%;
}

.col-2\@xs {
    width: 33.33333%;
}

.col-3\@xs {
    width: 50%;
}

.col-4\@xs {
    width: 66.66667%;
}

.col-5\@xs {
    width: 83.33333%;
}

.col-6\@xs {
    width: 100%;
}

.col-pull-0\@xs {
    right: auto;
}

.col-pull-1\@xs {
    right: 16.66667%;
}

.col-pull-2\@xs {
    right: 33.33333%;
}

.col-pull-3\@xs {
    right: 50%;
}

.col-pull-4\@xs {
    right: 66.66667%;
}

.col-pull-5\@xs {
    right: 83.33333%;
}

.col-pull-6\@xs {
    right: 100%;
}

.col-push-0\@xs {
    left: auto;
}

.col-push-1\@xs {
    left: 16.66667%;
}

.col-push-2\@xs {
    left: 33.33333%;
}

.col-push-3\@xs {
    left: 50%;
}

.col-push-4\@xs {
    left: 66.66667%;
}

.col-push-5\@xs {
    left: 83.33333%;
}

.col-push-6\@xs {
    left: 100%;
}

.col-offset-0\@xs {
    margin-left: 0%;
}

.col-offset-1\@xs {
    margin-left: 16.66667%;
}

.col-offset-2\@xs {
    margin-left: 33.33333%;
}

.col-offset-3\@xs {
    margin-left: 50%;
}

.col-offset-4\@xs {
    margin-left: 66.66667%;
}

.col-offset-5\@xs {
    margin-left: 83.33333%;
}

.col-offset-6\@xs {
    margin-left: 100%;
}

@media screen and (min-width: 768px) {
    .col-1\@sm,
    .col-2\@sm,
    .col-3\@sm,
    .col-4\@sm,
    .col-5\@sm,
    .col-7\@sm,
    .col-8\@sm,
    .col-9\@sm,
    .col-10\@sm,
    .col-11\@sm,
    .col-12\@sm {
        float: left;
    }
    .aspect--16x9\@sm {
        padding-bottom: 56.25%;
    }
    .aspect--9x16\@sm {
        padding-bottom: 177.77778%;
    }
    .aspect--4x3\@sm {
        padding-bottom: 75%;
    }
    .aspect--3x4\@sm {
        padding-bottom: 133.33333%;
    }
    .aspect--3x2\@sm {
        padding-bottom: 66.66667%;
    }
    .aspect--3x1\@sm {
        padding-bottom: 33.33333%;
    }
    .aspect--2x3\@sm {
        padding-bottom: 150%;
    }
    .aspect--2x1\@sm {
        padding-bottom: 50%;
    }
    .aspect--1x2\@sm {
        padding-bottom: 200%;
    }
    .aspect--1x1\@sm {
        padding-bottom: 100%;
    }
    .aspect--none\@sm {
        height: auto;
        padding-bottom: 0;
        overflow: visible;
    }
    .aspect--none\@sm >.aspect__inner {
        position: static;
    }
    .col-1\@sm {
        width: 8.33333%;
    }
    .col-2\@sm {
        width: 16.66667%;
    }
    .col-3\@sm {
        width: 25%;
    }
    .col-4\@sm {
        width: 33.33333%;
    }
    .col-5\@sm {
        width: 41.66667%;
    }
    .col-6\@sm {
        width: 50%;
    }
    .col-7\@sm {
        width: 58.33333%;
    }
    .col-8\@sm {
        width: 66.66667%;
    }
    .col-9\@sm {
        width: 75%;
    }
    .col-10\@sm {
        width: 83.33333%;
    }
    .col-11\@sm {
        width: 91.66667%;
    }
    .col-12\@sm {
        width: 100%;
    }
    .col-pull-0\@sm {
        right: auto;
    }
    .col-pull-1\@sm {
        right: 8.33333%;
    }
    .col-pull-2\@sm {
        right: 16.66667%;
    }
    .col-pull-3\@sm {
        right: 25%;
    }
    .col-pull-4\@sm {
        right: 33.33333%;
    }
    .col-pull-5\@sm {
        right: 41.66667%;
    }
    .col-pull-6\@sm {
        right: 50%;
    }
    .col-pull-7\@sm {
        right: 58.33333%;
    }
    .col-pull-8\@sm {
        right: 66.66667%;
    }
    .col-pull-9\@sm {
        right: 75%;
    }
    .col-pull-10\@sm {
        right: 83.33333%;
    }
    .col-pull-11\@sm {
        right: 91.66667%;
    }
    .col-pull-12\@sm {
        right: 100%;
    }
    .col-push-0\@sm {
        left: auto;
    }
    .col-push-1\@sm {
        left: 8.33333%;
    }
    .col-push-2\@sm {
        left: 16.66667%;
    }
    .col-push-3\@sm {
        left: 25%;
    }
    .col-push-4\@sm {
        left: 33.33333%;
    }
    .col-push-5\@sm {
        left: 41.66667%;
    }
    .col-push-6\@sm {
        left: 50%;
    }
    .col-push-7\@sm {
        left: 58.33333%;
    }
    .col-push-8\@sm {
        left: 66.66667%;
    }
    .col-push-9\@sm {
        left: 75%;
    }
    .col-push-10\@sm {
        left: 83.33333%;
    }
    .col-push-11\@sm {
        left: 91.66667%;
    }
    .col-push-12\@sm {
        left: 100%;
    }
    .col-offset-0\@sm {
        margin-left: 0%;
    }
    .col-offset-1\@sm {
        margin-left: 8.33333%;
    }
    .col-offset-2\@sm {
        margin-left: 16.66667%;
    }
    .col-offset-3\@sm {
        margin-left: 25%;
    }
    .col-offset-4\@sm {
        margin-left: 33.33333%;
    }
    .col-offset-5\@sm {
        margin-left: 41.66667%;
    }
    .col-offset-6\@sm {
        margin-left: 50%;
    }
    .col-offset-7\@sm {
        margin-left: 58.33333%;
    }
    .col-offset-8\@sm {
        margin-left: 66.66667%;
    }
    .col-offset-9\@sm {
        margin-left: 75%;
    }
    .col-offset-10\@sm {
        margin-left: 83.33333%;
    }
    .col-offset-11\@sm {
        margin-left: 91.66667%;
    }
    .col-offset-12\@sm {
        margin-left: 100%;
    }
    .container {
        padding-left: 7%;
        padding-right: 7%;
    }
}

@media screen and (min-width: 1024px) {
    .col-1\@md,
    .col-2\@md,
    .col-3\@md,
    .col-4\@md,
    .col-5\@md,
    .col-6\@md,
    .col-7\@md,
    .col-8\@md,
    .col-9\@md,
    .col-10\@md,
    .col-11\@md,
    .col-12\@md {
        float: left;
    }
    .aspect--16x9\@md {
        padding-bottom: 56.25%;
    }
    .aspect--9x16\@md {
        padding-bottom: 177.77778%;
    }
    .aspect--4x3\@md {
        padding-bottom: 75%;
    }
    .aspect--3x4\@md {
        padding-bottom: 133.33333%;
    }
    .aspect--3x2\@md {
        padding-bottom: 66.66667%;
    }
    .aspect--3x1\@md {
        padding-bottom: 33.33333%;
    }
    .aspect--2x3\@md {
        padding-bottom: 150%;
    }
    .aspect--2x1\@md {
        padding-bottom: 50%;
    }
    .aspect--1x2\@md {
        padding-bottom: 200%;
    }
    .aspect--1x1\@md {
        padding-bottom: 100%;
    }
    .aspect--none\@md {
        height: auto;
        padding-bottom: 0;
        overflow: visible;
    }
    .aspect--none\@md >.aspect__inner {
        position: static;
    }
    .col-1\@md {
        width: 8.33333%;
    }
    .col-2\@md {
        width: 16.66667%;
    }
    .col-3\@md {
        width: 25%;
    }
    .col-4\@md {
        width: 33.33333%;
    }
    .col-5\@md {
        width: 41.66667%;
    }
    .col-6\@md {
        width: 50%;
    }
    .col-7\@md {
        width: 58.33333%;
    }
    .col-8\@md {
        width: 66.66667%;
    }
    .col-9\@md {
        width: 75%;
    }
    .col-10\@md {
        width: 83.33333%;
    }
    .col-11\@md {
        width: 91.66667%;
    }
    .col-12\@md {
        width: 100%;
    }
    .col-pull-0\@md {
        right: auto;
    }
    .col-pull-1\@md {
        right: 8.33333%;
    }
    .col-pull-2\@md {
        right: 16.66667%;
    }
    .col-pull-3\@md {
        right: 25%;
    }
    .col-pull-4\@md {
        right: 33.33333%;
    }
    .col-pull-5\@md {
        right: 41.66667%;
    }
    .col-pull-6\@md {
        right: 50%;
    }
    .col-pull-7\@md {
        right: 58.33333%;
    }
    .col-pull-8\@md {
        right: 66.66667%;
    }
    .col-pull-9\@md {
        right: 75%;
    }
    .col-pull-10\@md {
        right: 83.33333%;
    }
    .col-pull-11\@md {
        right: 91.66667%;
    }
    .col-pull-12\@md {
        right: 100%;
    }
    .col-push-0\@md {
        left: auto;
    }
    .col-push-1\@md {
        left: 8.33333%;
    }
    .col-push-2\@md {
        left: 16.66667%;
    }
    .col-push-3\@md {
        left: 25%;
    }
    .col-push-4\@md {
        left: 33.33333%;
    }
    .col-push-5\@md {
        left: 41.66667%;
    }
    .col-push-6\@md {
        left: 50%;
    }
    .col-push-7\@md {
        left: 58.33333%;
    }
    .col-push-8\@md {
        left: 66.66667%;
    }
    .col-push-9\@md {
        left: 75%;
    }
    .col-push-10\@md {
        left: 83.33333%;
    }
    .col-push-11\@md {
        left: 91.66667%;
    }
    .col-push-12\@md {
        left: 100%;
    }
    .col-offset-0\@md {
        margin-left: 0%;
    }
    .col-offset-1\@md {
        margin-left: 8.33333%;
    }
    .col-offset-2\@md {
        margin-left: 16.66667%;
    }
    .col-offset-3\@md {
        margin-left: 25%;
    }
    .col-offset-4\@md {
        margin-left: 33.33333%;
    }
    .col-offset-5\@md {
        margin-left: 41.66667%;
    }
    .col-offset-6\@md {
        margin-left: 50%;
    }
    .col-offset-7\@md {
        margin-left: 58.33333%;
    }
    .col-offset-8\@md {
        margin-left: 66.66667%;
    }
    .col-offset-9\@md {
        margin-left: 75%;
    }
    .col-offset-10\@md {
        margin-left: 83.33333%;
    }
    .col-offset-11\@md {
        margin-left: 91.66667%;
    }
    .col-offset-12\@md {
        margin-left: 100%;
    }
}

.code-block {
    position: relative;
    overflow: visible;
    margin-left: calc(-3.5vw - 8px);
    margin-right: calc(-3.5vw - 8px);
}

.code-block pre {
    position: relative;
    z-index: 1;
    min-height: 56px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: calc(3.5vw + 8px);
    padding-right: calc(3.5vw + 8px);
    margin: .5em 0;
}

@media screen and (min-width: 768px) {
    .code-block {
        margin-left: calc(-7vw - 8px);
        margin-right: calc(-7vw - 8px);
    }
    .code-block pre {
        position: relative;
        z-index: 1;
        padding-left: calc(7vw + 8px);
        padding-right: calc(7vw + 8px);
    }
}

@media (min-width: 1395px) {
    .code-block {
        margin-left: calc(((100vw - 1200px) / -2) - 8px);
        margin-right: calc(((100vw - 1200px) / -2) - 8px);
    }
    .code-block pre {
        padding-left: calc(((100vw - 1200px) / 2) + 8px);
        padding-right: calc(((100vw - 1200px) / 2) + 8px);
    }
}

.site-nav .site-nav__title {
    color: #ECF0F1;
}

.site-nav .site-nav__title--first {
    margin-top: 0;
}

.site-nav .btn {
    width: 100%;
}

.site-nav .site-nav__tray {
    transition: .2s;
    overflow: hidden;
    height: 300px;
    background-color: #34495E;
}

.site-nav .site-nav__tray-inner {
    padding-top: 30px;
    padding-bottom: 30px;
}

.site-nav.collapsed .site-nav__tray {
    height: 0;
}

.site-nav .site-nav__band {
    position: relative;
}

.site-nav .site-nav__band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #34495E;
}

.site-footer {
    margin-top: 2em;
    padding: 1em 0;
    background-color: #34495E;
}

.has-code-block .code-block pre {
    margin-bottom: 0;
}

.has-code-block+.site-footer {
    margin-top: 0;
}

.site-footer__credit {
    margin: 0;
    text-align: right;
}

@media screen and (max-width: 767px) {
    .site-nav .btn {
        margin-bottom: 5px;
    }
    .carousel-control{
    display: none;
}
}

.demo-list .figure-wrap {
    position: relative;
    z-index: 1;
}

.demo-list .figure-wrap,
.demo-list .figure-wrap img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: .1s ease;
}

.demo-list:hover .figure-wrap {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.demo-list:hover .figure-wrap img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.demo-list:hover .figure-wrap:hover {
    z-index: 2;
    -webkit-transform: scale3d(1.05, 1.05, 1);
    transform: scale3d(1.05, 1.05, 1);
}

.demo-list:hover .figure-wrap:hover img {
    -webkit-filter: none;
    filter: none;
}

.demo-list .figure-wrap:nth-child(4n+1) {
    margin-left: 0;
}

.demo-list .figure-wrap>a {
    display: block;
}

.demo-list .figure-wrap figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
}

.demo-link-container::before {
    content: '➜';
    color: #2ECC71;
    margin-right: 5px;
}

span.demo-link-container::before {
    margin-left: 5px;
}

@media screen and (max-width: 47.9375em) {
    .demo-list+.demo-list {
        margin-top: 1em;
    }
    .figure-wrap:nth-child(odd) {
        margin-left: 0;
    }
    .figure-wrap:nth-child(n+3) {
        margin-top: 1em;
    }
}

.search-section {
    margin-top: 1em;
    margin-bottom: 1em;
}

input.faq-search {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #95A5A6;
    border-radius: 4px;
    padding: 0.5em;
    font-size: 1.125em;
    color: #95A5A6;
    transition: .15s;
}

input.faq-search::-webkit-input-placeholder {
    color: #95A5A6;
    transition: .15s;
}

input.faq-search:-ms-input-placeholder {
    color: #95A5A6;
    transition: .15s;
}

input.faq-search::placeholder {
    color: #95A5A6;
    transition: .15s;
}

input.faq-search:hover {
    outline: 0;
    color: #5D6D77;
    border-color: #5D6D77;
}

input.faq-search:hover::-webkit-input-placeholder {
    color: #5D6D77;
}

input.faq-search:hover:-ms-input-placeholder {
    color: #5D6D77;
}

input.faq-search:hover::placeholder {
    color: #5D6D77;
}

input.faq-search:focus {
    outline: 0;
    color: #27AE60;
    border-color: #27AE60;
}

input.faq-search:focus::-webkit-input-placeholder {
    color: #27AE60;
}

input.faq-search:focus:-ms-input-placeholder {
    color: #27AE60;
}

input.faq-search:focus::placeholder {
    color: #27AE60;
}

.question {
    margin: 2em 0;
    overflow: hidden;
    transition: .2s ease-out;
}

.question--collapsed {
    height: 0 !important;
    margin: 0;
    border-width: 0;
}

.question--collapsed+.question {
    margin-top: 0;
}

.question--unanswered {
    padding-top: 1.25em;
    border-top: 2px solid #2ECC71;
}

.question__title {
    margin-top: 0;
}

.question__answer {
    margin-bottom: 0;
}

.btn-group::before,
.btn-group::after {
    content: " ";
    display: table;
}

.btn-group::after {
    clear: both;
}

.btn-group .btn {
    float: left;
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: 6px 0 0 6px;
}

.btn-group .btn:last-child {
    border-radius: 0 6px 6px 0;
}

.btn,
button {
    display: inline-block;
    padding: .75em .375em;
    -webkit-appearance: none;
    text-align: center;
    color: black;
    border-radius: .0625em;
    border: 0;
    background-color: #34495E;
    transition: .2s ease-out;
}

.btn:hover,
button:hover {
    background-color: #4a6885;
    text-decoration: none;
}

.btn.active,
.btn:active,
button.active,
button:active {
    background-color: #2C3E50;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn:active,
button:active {
    transition: none;
}

.btn--warning {
    background-color: #E67E22;
}

.btn--warning:hover {
    background-color: #ea9347;
}

.btn--warning.active,
.btn--warning:active {
    background-color: #D35400;
}

.btn--primary {
    background-color: transparent;
}

.btn--primary:hover {
    background-color: #b36c32;
}

.btn--primary.active,
.btn--primary:active {
    background-color: #9fae2d
}

.btn--danger {
    background-color: #E74C3C;
}

.btn--danger:hover {
    background-color: #eb6d60;
}

.btn--danger.active,
.btn--danger:active {
    background-color: #E74C3C;
}

.btn--go {
    background-color: #2ECC71;
}

.btn--go:hover {
    background-color: #4cd787;
}

.btn--go.active,
.btn--go:active {
    background-color: #2ECC71;
}

.filter-group .btn {
    position: relative;
}

.filter-group .btn.active:before,
.filter-group .btn.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    transition: .2s;
}

.filter-group .btn:before {
    background-color: #2C3E50;
    opacity: .05;
    border-radius: 50%;
}

.filter-group .btn:after {
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg);
}

.filter-group .btn.active:before,
.filter-group .btn.active:after {
    opacity: 0;
}

@media (max-width: 47.9375em) {
    .btn,
    button {
        font-size: .875em;
    }
}

@media (max-width: 30em) {
    .btn,
    button {
        font-size: .75em;
    }
}

.text-center {
    text-align: center;
}

.ib {
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .hidden\@xs {
        display: none;
    }
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.clearfix,
.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.hide-text {
    font-size: 0;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.table-center-wrap {
    display: table;
    table-layout: fixed;
}

.table-center {
    display: table-cell;
    vertical-align: middle;
}

.compound-filter-options {
    margin-top: 20px;
    margin-bottom: 40px;
}

.filter-group--compound button {
    width: auto;
    padding-left: 1vw;
    padding-right: 1vw;
}

.filter-group--compound label {
    cursor: pointer;
}

.filter-group--compound .ib+.ib {
    margin-left: 8px;
}

.filter-group__label--compound {
    margin: 0 0 5px;
}

.shape-shuffle-container {
    position: relative;
    overflow: hidden;
}

.shape {
    position: relative;
    margin-left: 0;
    margin-top: 10px;
}

.shape .shape__space {
    width: 100%;
    height: 100%;
    background-color: black;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}

.shape--blue .shape__space {
    background-color: #3498DB;
    border-bottom-color: #3498DB;
}

.shape--red .shape__space {
    background-color: #E74C3C;
    border-bottom-color: #E74C3C;
}

.shape--orange .shape__space {
    background-color: #F39C12;
    border-bottom-color: #F39C12;
}

.shape--green .shape__space {
    background-color: #2ECC71;
    border-bottom-color: #2ECC71;
}

.shape--circle .shape__space {
    border-radius: 50%;
}

.shape--diamond .shape__space {
    -webkit-transform: rotate(45deg) scale(0.70711);
    transform: rotate(45deg) scale(0.70711);
}

.shape--triangle .shape__space {
    padding-top: 9px;
    height: 0;
    width: 0;
    border-width: 0 66px 114px 66px;
    background-color: transparent;
    margin: auto;
}

@media (min-width: 425px) {
    .shape--triangle .shape__space {
        padding-top: 12px;
        height: 0;
        width: 0;
        border-width: 0 90px 156px 90px;
    }
}

@media (min-width: 600px) {
    .shape--triangle .shape__space {
        padding-top: 17.5px;
        height: 0;
        width: 0;
        border-width: 0 131px 227px 131px;
    }
}

@media (min-width: 768px) {
    .shape--triangle .shape__space {
        padding-top: 10px;
        height: 0;
        width: 0;
        border-width: 0 74px 128px 74px;
    }
}

@media (min-width: 1024px) {
    .shape--triangle .shape__space {
        padding-top: 13.5px;
        height: 0;
        width: 0;
        border-width: 0 102px 177px 102px;
    }
}

@media (min-width: 1200px) {
    .shape--triangle .shape__space {
        padding-top: 18px;
        height: 0;
        width: 0;
        border-width: 0 135px 234px 135px;
    }
}

@media (min-width: 1392px) {
    .shape--triangle .shape__space {
        padding-top: 19px;
        height: 0;
        width: 0;
        border-width: 0 142px 246px 142px;
    }
}

#options {
    margin-right: auto;
    margin-left: auto;
}

#options div {
    margin-right: auto;
    margin-left: auto;
}



/* quick grid */

.container {
    width: 93%;
    margin: auto;
}



/* Bootstrap-style columns */

.column {
    position: relative;
    float: left;
    min-height: 1px;
    width: 25%;
    padding-left: 4px;
    padding-right: 4px;
    /* Space between tiles */
    margin-top: 8px;
}

.col-span {
    width: 50%;
}

.my-sizer-element {
    width: 8.33333%;
}



/* default styles so shuffle doesn't have to set them (it will if they're missing) */

.my-shuffle {
    position: relative;
    overflow: hidden;
}



/* Ensure images take up the same space when they load */


/* https://vestride.github.io/Shuffle/images */

.aspect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

.aspect__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.aspect--16x9 {
    padding-bottom: 57.75%;
}
.aspect--32x9 {
    padding-bottom: 47.75%;
}

.aspect--9x80 {
    /*padding-bottom: calc(112.5% + 8px);*/
    padding-bottom:164%;
}
.aspect--5x7{
    padding-bottom:101%;
}




img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}



/* Small reset */

*,
::before,
::after {
    box-sizing: border-box;
}

figure {
    margin: 0;
    padding: 0;
}


@media only screen and (min-width: 300px) and (max-width: 320px) {
    #nav li {
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 321px) and (max-width: 379px) {
    #nav li {
        font-size: 1.7em;
    }
}

@media only screen and (min-width: 380px) and (max-width: 411px) {
    #nav li {
        font-size: 1.8em;
    }
}

@media only screen and (min-width: 412px) and (max-width: 480px) {
    #nav li {
        font-size: 1.9em;
    }
}

@media only screen and (min-width: 481px) and (max-width: 550px) {
    #nav li {
        font-size: 1.9em;
    }
}
@media only screen and (max-width:1200px){
    #alljars{
        margin-top:-4%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1303px) {
    #nav {
        margin-top: -0.75em;
    }
    #nav li {
        font-size: 1.9em;
        padding-left: calc(100%/11);
    }
    #missionstatementtext p {

    }
    #cookslogo img {
        padding-bottom: 7%;
    }
}


@media only screen and (min-width: 1304px) and (max-width: 1395px) {
    #nav {
        margin-top: -0.75em;
    }
    #nav li {
        font-size: 1.9em;
        padding-left: calc(100%/11);
    }
    #missionstatementtext p {
        padding-top: 0%;
    }
    #cookslogo img {
        padding-bottom: 7%;
    }
}

@media only screen and (min-width: 1396px) and (max-width: 1495px) {
    #nav {
        margin-top: -0.75em;
    }
    #nav li {
        font-size: 1.9em;
        padding-left: calc(100%/11);
    }
    #missionstatementtext p {
        padding-top: 0%;
    }
    #cookslogo img {
        padding-bottom: 7%;
    }
}

@media only screen and (min-width: 1496px) and (max-width: 1550px) {
    #nav {
        margin-top: -0.75em;
    }
    #nav li {
        font-size: 1.9em;
        padding-left: calc(100%/11);
    }
    #missionstatementtext p {
        padding-top: 0%;
    }
    #cookslogo img {
        padding-bottom: 7%;
    }
}

@media screen and (min-width:1551px) {
    #nav li {
        font-size: 1.9em;
        padding-left: calc(100%/11);
    }
}

@media screen and (max-width: 880px) {
    /*#nav{
        visibility: hidden;
        display:none;
    }
    */
    #nav li {
        visibility: hidden;
        display: none;
    }
}

@media screen and (max-width:987px) {
    #nav {
        width: 60% !important;
        margin-right: auto;
        margin-left: auto;
    }
    .filter-group {
        width: 75%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 5%;
        margin-top:2%;
    }
}

@media screen and (min-width:987px) {
    .filter-group {
        width: 60% !important;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 5%;
    }
}

.caret {
    display: none;
}

.active .caret {
    display: block;
    width: 5%;
    margin-left: 25%;
    margin-top: auto;
    margin-bottom: auto;
}

.navbar-default {
    background-color: transparent !important;
    border-color: transparent !important;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent !important;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent !important;
}

.nav .navbar-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
}

#bs-example-navbar-collapse-1 a {
    font-family: 'Stint Ultra Condensed', cursive;
    /*color: #F8E49F;*/
    color: red;
}

#navbutton {
    background-image: url("../img/menubuttonbg6.png");
    color: #F8E49F;
}


.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-toggle span.icon-bar {
    transition: all 0.15s;
}

.navbar-toggle span:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggle span:nth-child(3) {
    opacity: 0;
}

.navbar-toggle span:nth-child(4) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggle.collapsed span:nth-child(2),
.navbar-toggle.collapsed span:nth-child(4) {
    transform: rotate(0);
}

.navbar-toggle.collapsed span:nth-child(3) {
    opacity: 1;
}


/*#navbutton{
    width:6.5%;
    margin-right:calc((100%-6.5%)/2)
}
*/

.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    /*background:url(../img/footer5.jpg);*/
    /*background-color:#b86c2d;*/
    background-color: rgba(184, 108, 45, .5);
    font-family: 'Stint Ultra Condensed', cursive;
}



.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #F8E49F !important;
    font-size: 18px;
}

.navbar-default .navbar-nav>li>a {
    color: #F8E49F !important;
    font-size: 18px;
}


.navbar {
    background-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

@media screen and (min-width:768px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        background: none;
    }
}



.filter-options.filter-options--compound {
    margin-top: 5%;
}

#products {
    margin-top: -8%;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    position: relative;
    z-index: 1;
    margin-top: -5.5%;
}

@media (min-width:768px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -8.25%;
    }
}

@media (min-width:830px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -8%;
    }
    #missionstatementtext h1 {
        font-size: 48px;
    }
    #recipesheading h1 {
        font-size: 48px;
    }
}

@media (min-width:880px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -7.75%;
    }
}

@media (min-width:959px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -7.75%;
    }
}

@media (min-width:992px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -7%;
    }
    #missionstatementtext h1 {
        font-size: 60px;
    }
    #recipesheading h1 {
        font-size: 60px;
    }
}

@media (min-width:1200px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -6% !important;
    }
}

@media (min-width:1551px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -5.5% !important;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 28px;
    }
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 28px;
    }
}

@media (min-width:1224px) {
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 24px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 24px;
    }
}

@media (min-width:1502px) {
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 26px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 26px;
    }
}

@media (min-width:1598px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -5% !important;
    }
}

@media (min-width:1750px) {
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 28px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 28px;
    }
}

@media (min-width:1894px) {
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -4.75% !important;
    }
}

@media (min-width:2041px) {
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 34px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 34px;
    }
}

@media (min-width:2371px) {
    #missionstatementtext h1 {
        font-size: 48px;
    }
    #recipesheading h1 {
        font-size: 48px;
    }
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
        font-size: 38px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 38px;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: -3.25% !important;
    }
}

@media (min-width:861px) {
    .navbar {
        width: 60%;
    }
    .navbar li {
        margin-left: auto;
    }
}

#headerandnav nav {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#headerandnavmain nav {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#navbar ul {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

#navbar li {
    margin-left: calc(60%/5);
}

.nav li a {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.filter-options.filter-options--compound button {
    margin-left: calc((60%/10) - 2%);
    margin-right: 0 !important;
    border: none !important;
}

.container {
    width: 100% !important;
}

@media (max-width:828px) {
    #navbar li {
        margin-left: calc(60%/5);
    }
}

.shape-shuffle-container {
    margin-bottom: 10%;
}

@media screen and (max-width:767px) {
    #navbar li {
        margin-left: 0 !important;
    }
    #cookslogo {
        width: 60%;
    }
    #cookslogo img {
        padding-bottom: 0%;
    }
    .navbar-header {
        display: flex;
        justify-content: center;
    }
    .navbar-header button {
        margin-right: 0 !important;
        margin-bottom: 6%;
    }
    #display {
        margin-bottom: 15%;
    }
}





@media screen and (min-width:1px) and (max-width:641px) {
    #recipeonebody {
        padding-bottom: 15%;
    }
    #recipetwobody {
        padding-bottom: 15%;
    }
    #nutritioninfo {
        width: 100%;
    }
    .recipeoneheader {
        /*font-size:24px;*/
    }
    .recipetwoheader {
        /*font-size:24px;*/
    }
}

@media screen and (min-width:642px) and (max-width:734px) {
    #recipeonebody {
        padding-bottom: 10%;
    }
    #recipetwobody {
        padding-bottom: 10%;
    }
    #nutritioninfo {
        width: 80%;
    }
    .recipeoneheader {
        /*font-size:24px;*/
    }
    .recipetwoheader {
        /*font-size:24px;*/
    }
}

@media screen and (min-width:735px) and (max-width:764px) {
    #recipeonebody {
        padding-bottom: 10%;
    }
    #recipetwobody {
        padding-bottom: 10%;
    }
    #nutritioninfo {
        width: 80%;
    }
}

@media screen and (min-width:764px) and (max-width:850px) {
    #recipeonebody {
        padding-bottom: 35%;
    }
    #recipetwobody {
        padding-bottom: 35%;
    }
    #nutritioninfo {
        width: 80%;
    }
}

@media screen and (min-width:851px) and (max-width:1000px) {
    #recipeonebody {
        padding-bottom: 35%;
    }
    #recipetwobody {
        padding-bottom: 35%;
    }
    #nutritioninfo {
        width: 50%;
    }
}

@media screen and (min-width:1001px) and (max-width:2700px) {
    #recipeonebody {
        padding-bottom: 35%;
    }
    #recipetwobody {
        padding-bottom: 35%;
    }
    #nutritioninfo {
        width: 100%;
    }
}



#productvideonutrition {
    background-color: #f5e8be;
    position: relative;
}

.product_title {
    font-family: 'Stint Ultra Expanded', cursive;
    color: #7d9037;
}

.product_co {
    font-family: 'Stint Ultra Condensed', cursive;
    color: #7d9037;
}

.product_rc {
    font-family: 'Stint Ultra Condensed', cursive;
    color: #bd6c2a;
}

.recipe_rm_text {
    width: 80%;
    margin-left: 10%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: white;
    font-size: 24px;
    text-align: center;
}

.recipe_rm_text_2 {
    width: 80%;
    margin-left: 10%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: gray;
    font-size: 24px;
    text-align: center;
}

.recipebackgroundbrown h2 {
    text-align: center;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #fbbb74;
    padding: 7px;
}

.recipebackgroundcream h2 {
    text-align: center;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #7b8f3a;
    padding: 7px;
}

.recipeoneingredients {
    color: #fbbb74
}

.recipetwoingredients {
    color: gray;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

@media screen and (min-width:700px) and (max-width:828px) {
    #recipeone {
        padding-bottom: 5%;
        margin-top: -1.5%;
    }
    #recipetwo {
        padding-bottom: 5%;
        margin-top: -1%;
    }
}

#nutritionnav {
    padding-bottom: 5%;
}

#showingredients {
    padding-right: 5%;
}

@media screen and (min-width:924px) and (max-width:1299px) {
    .footer2 {
        height: 40vh;
    }
}

@media screen and (min-width:1300px) {
    .footer2 {
        height: 35vh
    }
}

#relatedproducts {
    background-color: #dfc780;
    height: 20%;
}

@media screen and (min-width:768px) {
    .product_title {
        display: none;
    }
}

@media screen and (max-width:767px) {
    #imageandtext {
        display: none;
    }

    .recipeoneprepinfo {
        margin-top: 2% !important;
    }
    #recipeoneprepinfo p {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        padding-top:4.5% !important;
    }
    #recipetwoprepinfo {
        margin-top: 2% !important;
        padding-left: 0% !important;
    }
    #recipetwoprepinfo p {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
    #recipeonetab {
        margin-left: 10% !important;
        margin-right: 10% !important;
    }
    #recipetwotab {
        margin-left: 10% !important;
        margin-right: 10% !important;
    }
}

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

    #recipeoneprepinfo {
        margin-top: 1% !important;
    }
    #recipetwoprepinfo {
        margin-top: 1% !important;
    }
    #recipeoneprepinfo p {
        color: white;
    }
    #recipetwoprepinfo p {
        color: grey;
    }
    .col-sm-4 {
        padding-right: 0px !important;
    }
    .col-sm-8 {
        padding-right: 0px !important;
    }
}

@media screen and (min-width:768px) {
    #recipeoneprepinfo {
        margin-top: 4%;
    }
    #recipetwoprepinfo {
        margin-top: 4%;
    }
}

@media screen and (min-width:300px) and (max-width:427px) {
    .recipe_rm_text_2 {
        margin-top: 18%;
        padding-bottom: 3% !important;
    }
}

@media screen and (min-width:428px) and (max-width:767px) {
    .recipe_rm_text_2 {
        margin-top: 10% !important;
        padding-bottom: 3% !important;
    }
}

@media screen and (min-width:300px) and (max-width: 464px) {
    #recipeone {
        margin-top: -18%;
    }
    #recipetwo {
        margin-top: -15%;
    }
    .recipe_rm_text {
        margin-top: 25%;
    }
}

@media screen and (min-width:465px) and (max-width: 564px) {
    #recipeone {
        margin-top: -14%;
    }
    #recipetwo {
        margin-top: -16%;
    }
    .recipe_rm_text {
        margin-top: 25%;
    }
    .recipe_rm_text_2 {
        margin-top: 25%;
    }
}

@media screen and (min-width:565px) and (max-width: 667px) {
    #recipeone {
        margin-top: -12%;
    }
    #recipetwo {
        margin-top: -18%;
    }
    .recipe_rm_text {
        margin-top: 20%;
    }
    .recipe_rm_text_2 {
        margin-top: 20%;
    }
}

@media screen and (min-width:668px) and (max-width: 767px) {
    #recipeone {
        margin-top: -11%;
    }
    #recipetwo {
        margin-top: -18%;
    }
    .recipe_rm_text {
        margin-top: 20%;
        padding-bottom: 3%;
    }
    .recipe_rm_text_2 {
        margin-top: 20%;
    }
}

@media screen and (min-width:829px) and (max-width:904px) {
    #recipeone {
        margin-top: -1%;
    }
    #recipetwo {
        margin-top: -1%;
    }
    #recipeoneprepinfo p {
        padding-top: 0px !important;
    }
    #recipetwoprepinfo p {
        padding-top: 0px !important;
    }
}

@media screen and (min-width:904px) and (max-width:1217px) {
    #recipeone {
        margin-top: -2%;
    }
    #recipetwo {
        margin-top: -2%;
    }
    #recipeoneprepinfo p {
        padding-top: 0px !important;
    }
}

@media screen and (min-width:940px) and (max-width:1217px) {
    #recipetwoprepinfo p {
        padding-top: 1.5% !important;
    }
}

@media screen and (min-width:1218px) and (max-width:1817px) {
    #recipeone {
        margin-top: -3%;
    }
    #recipetwo {
        margin-top: -3%;
    }
    #recipeoneprepinfo p {
        padding-top: 0px !important;
    }
    #recipetwoprepinfo p {
        padding-top: 1.5% !important;
    }
}

@media screen and (min-width:1818px) and (max-width:2200px) {
    #recipeone {
        margin-top: -4%;
    }
    #recipetwo {
        margin-top: -4%;
    }
    #recipeoneprepinfo {
        height: 60px !important;
    }
    #recipeoneprepinfo p {
        padding-top: 0px !important;
    }
    #recipetwoprepinfo p {
        padding-top: 0px !important;
    }
}

@media screen and (min-width:300px) and (max-width:500px) {
    #socialiconsbar {
        padding-top: 10%;
    }
}

@media screen and (min-width:501px) and (max-width:767px) {
    #socialiconsbar {
        padding-top: 5%;
    }
}

@media screen and (min-width:768px) and (max-width:923px) {
    #socialiconsbar {
        padding-top: 3%;
    }
}

@media screen and (min-width:924px) and (max-width:1267px) {
    #socialiconsbar {
        /*padding-top:5%;*/
    }
}

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
    margin: 40px auto 0 auto;
}

iframe {
    margin: 40px auto 0 auto;
}

.youtube .play {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ+CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: all 0.2s ease-out;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.p {
    margin-top: 60px;
}

@media screen and (min-width:320px) and (max-width: 568px) and (orientation:portrait) {
    #recipeone {
        margin-top: -18% !important;
    }
}
@media print {
    #pressfooter{
        display: none;
    }
    p#recipebullets{
        font-size: .8em;
    }
    #headerandnavmain{
        display: none;
    }
    #mainheadnoprint{
        display:none;
    }
    #recipeone {
        top: 0;
    }
    #recipeonevideo{
        display: none !important;
    }
    .forprint{
        display: block !important;
    }
    .printheaderimg {
    position: absolute;
    width: 100%;
    z-index: 0;
}
    #recipetwobody{
        margin-top: 8%;
    }
#recipeone .img-fluid{
    display:none;
}
#recipetwo .img-fluid{
    display:none;
}

.printheaderimg img {
    width: 100%;
}
    .printcookslogo {
    position: absolute;
    width: 50%;
    margin-left:25%;
    z-index: 0;
}

.printcookslogo img {
    width: 100%;
}
.forprintingredients{
    margin-top:-72%;
}
#printtitle{
    position:relative;
    margin-top:20%;
}
#printtitle h2{
    font-family: 'Stint Ultra Expanded', cursive;
    color: black !important;
    font-size:20px;
}
    #printtitle2{
        position:relative;
        margin-top:20%;
    }
    #printtitle2 h2{
        font-family: 'Stint Ultra Expanded', cursive;
        color: black !important;
        font-size:20px;
    }
.recipeoneingredients{
    text-align:center;
}
.recipetwoingredients{
    text-align:center;
}
#headerandnav img{
    display:none !important;
}
}

@media screen{
    .forprint{
        display:none !important;
    }
}
.awflex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.col-xs-4{
    padding-left:0 !important;
}
.col-xs-8{
    padding-left:0 !important;
}

.pad-b-5{
    padding-bottom:5%;
}
/*TODO: Remove .rmtextholder class from recipe ones if using text in recipe_rm_text; */
@media screen and (max-width:456px){
    .rmtextholder{
        padding-top:14% !important;
    }
}
@media screen and (min-width:457px) and (max-width:767px){
    .rmtextholder{
        padding-top:10% !important;
    }
}
/* Currently overridden*/
.recipe_rm_text{
    display:none !important;
}
.recipe_rm_text_2{
    display:none !important;
}

@media screen and (min-width: 768px){
    .forprintingredients h2{
        padding-left:10% !important;
    }
    .forprintingredients h4{
        padding-left:10% !important;
    }
    .forprintingredients ol{
        padding-left:10% !important;
    }
    .forprintingredients h5{
        padding-left:10% !important;
    }
    .forprintingredients ul{
        padding-left:10% !important;
    }
}

#socialicons  a{
color:#b86c2d;
}
#socialicons {
    font-family:'Open Sans';
}
@media screen and (max-width:464px){
    .img-fluid{
        margin-top:18%;
    }
}
@media screen and (min-width:465px) and (max-width:767px){
    .img-fluid{
        margin-top:12%;
    }
}
@media screen and (max-width:767px){
 .shuffle-item{
    left:15% !important;
 }
}

.col-sm-6 p{
   padding-left:15px;
    padding-right:15px;
}

.allproductslink  {
    font-family: 'Stint Ultra Condensed', cursive;
    color: #b86c2d;
}
.nobg {
    background:transparent;
}

.square:hover .overlay {
  opacity: 1;
  width: calc(100% - 30px);
  height: 100%;
}
.square:hover span {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: transform .5s ease, opacity 1.3s ease;
  transition: transform .5s ease, opacity 1.3s ease;
}
.square .overlay{
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: .4s ease;
  transition: .4s ease;
}
.square span {
  color: #9caf31;
  font-family: 'Roboto Slab', serif !important;
font-weight:700 !important;
  text-align: center;
  position: absolute;
  margin-top:25%;
  width: 100%;
  height: 30px;
  line-height: 30px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: transform .5s ease, opacity .7s ease;
  transition: transform .5s ease, opacity .7s ease;
}

@font-face {
  font-family: 'Logofont';
  src: url(/fonts/Veneer_supersmall_fin.ttf);
}
.logotext, .logotext2, .logotext3{
    font-size: 8vw !important;
}
.logotext{
    font-family: 'Logofont';
    color: #F3E9BF;
    opacity: .95;
    text-align: center;
    padding-top:5%;
    font-size: 7.5em;
    padding-bottom: 20%;
    text-shadow: 22px 22px 40px rgba(79, 114, 55, 0.52),
     -22px 22px 40px rgba(79, 114, 55, 0.52),
      22px -22px 40px rgba(79, 114, 55, 0.52),
       -22px -22px 40px rgba(79, 114, 55, 0.52);

}
/*.logotext2{*/
    /*font-family: 'Logofont';*/
    /*color: #F3E9BF;*/
    /*opacity: .95;*/
    /*text-align: center;*/
    /*padding-top:5%;*/
    /*font-size: 7.5em;*/
    /*padding-bottom: 20%;*/
    /*text-shadow: 4px 4px 8px rgba(0,0,0,0.4),*/
     /*-4px 4px 8px rgba(0,0,0,0.4),*/
      /*4px -4px 8px rgba(0,0,0,0.4),*/
       /*-4px -4px 8px rgba(0,0,0,0.4);*/
/*}*/
/*.logotext3{*/
    /*font-family: 'Logofont';*/
    /*color: #F3E9BF;*/
    /*opacity: .95;*/
    /*text-align: center;*/
    /*padding-top:5%;*/
    /*font-size: 7.5em;*/
    /*padding-bottom: 20%;*/
    /*text-shadow: 4px 4px 8px rgba(55, 93, 42, .4), */
    /*-4px 4px 8px rgba(55, 93, 42, .4),*/
     /*4px -4px 8px rgba(55, 93, 42, .4),*/
      /*-4px -4px 8px rgba(55, 93, 42, .4);*/
/*}*/

.square2{
    padding-bottom: 15%;
}

@font-face {
    font-family: 'cooksjournal';
    src: url('https://dev.cookspantry.com/fonts/WOFF2/cooksjournal.woff2') format('woff2'), /* Super Modern Browsers */ url('https://dev.cookspantry.com/fonts/WOFF/cooksjournal.woff') format('woff'), /* Pretty Modern Browsers */ url('https://dev.cookspantry.com/fonts/TTF/cooksjournal.ttf') format('truetype');
}
#press h2{
    font-family: 'cooksjournal', cursive;
    color: #b86c2d;
    font-size: 6em !important;
}
#presstext p{
    font-family: 'Roboto Slab', serif;
}
#presscontact p{
    font-family: 'Roboto Slab', serif;
}
#pressfooter a{
    font-family: 'Roboto Slab', serif;
}
#pressfooter{
    font-family: 'Roboto Slab', serif;
}
.store_select{
    font-family: 'Roboto Slab', serif;
    color: #7d9037;
    cursor: pointer;
}
.center_th{
    text-align: center;
    text-shadow: 22px 22px 40px rgba(79, 114, 55, 0.52),
     -22px 22px 40px rgba(79, 114, 55, 0.52),
      22px -22px 40px rgba(79, 114, 55, 0.52),
       -22px -22px 40px rgba(79, 114, 55, 0.52);

}
/*.logotext2{*/
    /*font-family: 'Logofont';*/
    /*color: #F3E9BF;*/
    /*opacity: .95;*/
    /*text-align: center;*/
    /*padding-top:5%;*/
    /*font-size: 7.5em;*/
    /*padding-bottom: 20%;*/
    /*text-shadow: 4px 4px 8px rgba(0,0,0,0.4),*/
     /*-4px 4px 8px rgba(0,0,0,0.4),*/
      /*4px -4px 8px rgba(0,0,0,0.4),*/
       /*-4px -4px 8px rgba(0,0,0,0.4);*/
/*}*/
/*.logotext3{*/
    /*font-family: 'Logofont';*/
    /*color: #F3E9BF;*/
    /*opacity: .95;*/
    /*text-align: center;*/
    /*padding-top:5%;*/
    /*font-size: 7.5em;*/
    /*padding-bottom: 20%;*/
    /*text-shadow: 4px 4px 8px rgba(55, 93, 42, .4), */
    /*-4px 4px 8px rgba(55, 93, 42, .4),*/
     /*4px -4px 8px rgba(55, 93, 42, .4),*/
      /*-4px -4px 8px rgba(55, 93, 42, .4);*/
/*}*/

.square2{
    padding-bottom: 15%;
}

@font-face {
    font-family: 'cooksjournal';
    src: url('https://cookspantry.com/fonts/WOFF2/cooksjournal.woff2') format('woff2'), /* Super Modern Browsers */ url('https://cookspantry.com/fonts/WOFF/cooksjournal.woff') format('woff'), /* Pretty Modern Browsers */ url('https://cookspantry.com/fonts/TTF/cooksjournal.ttf') format('truetype');
}
#press h2{
    font-family: 'cooksjournal', cursive;
    color: #b86c2d;
    font-size: 6em !important;
}
#presstext p{
    font-family: 'Roboto Slab', serif;
}
#presscontact p{
    font-family: 'Roboto Slab', serif;
}
#pressfooter a{
    font-family: 'Roboto Slab', serif;
}
#pressfooter{
    font-family: 'Roboto Slab', serif;
}


.captcha_wrapper > div > div{
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 13%;
}
.center_th{
    text-align: center !important;
}
.recipe-boxes{
    margin-top: 5%;
    padding-left: 0px !important;
}
.recipe-box .caption {
    position: absolute;
    bottom: 0px !important;
    left: 0px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 0px !important;
    padding-top: 5px !important;
    background-color: #ffffff;
    opacity: .6;
}
.recipe-box{
    border-radius: 7px;
    position: relative;
    overflow: hidden;
}
.caption p{
    font-size: 1.5em;
    font-family: 'Roboto Slab', serif !important;
}
.caption {
    width: 100%;
    z-index: 10;
}
.recipe-details{
    background: rgba(0,0,0,0.3);
    padding-top: 5%;
    padding-right: 15%;
    padding-bottom: 37%;
    padding-left: 15%;
}
ul.recipe-details{
    list-style: none !important;
}
.recipe-details li{
    color: white;
    font-size: 1em;
    padding-bottom: 1%;
    font-family: 'Roboto Slab', serif;
}
.recipe-box{
    margin-bottom: 3%;
}
.recipe-box .overlay{
    position: absolute;
    top: 0;
}
.datum{
    color: white;

}
.ol0{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/000_sauerkraut.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol1{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/001_beet-sauerkraut.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol2{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/002_spicy-sauerkraut.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol3{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/003_dill-pickles.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol4{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/004_pickle-slices.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol4{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/004_pickle-slices.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol5{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/005_pickle-spears.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol6{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/006_whole-beets.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol7{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/007_sliced-beets.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol8{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/008_finely-ground-dijon-mustard.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol9{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/009_whole-grain-dijon-mustard.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol10{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/010_fig-fruit-spread.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol11{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/011_peach-apricot.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol12{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/012_clementine-marmalade.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol14{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/014_spicy-harissa.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol15{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/015_egglant-dip.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol16{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/016_artichoke-dip.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol17{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/017_grilled-artichokes.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol18{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/018-mild-red-enchilada-sauce.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol19{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/019-medium-red-enchilada-sauce.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.ol20{
    background-image: linear-gradient(rgba(0, 0, 255, 0.4), rgba(255, 255, 0, 0.2)), url("https://dev.cookspantry.com/img/artwork/020_mild-green-enchilada-sauce.png");
    background-size:     cover;
    background-repeat:   no-repeat;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.recipe_blurb{
    color: white;
    font-family: 'Roboto Slab', serif;
    text-shadow:22px 22px 40px rgba(79, 114, 55, 0.52), -22px 22px 40px rgba(79, 114, 55, 0.52), 22px -22px 40px rgba(79, 114, 55, 0.52), -22px -22px 40px rgba(79, 114, 55, 0.52);
}
@media screen and (max-width: 768px){
    .recipe_blurb{
        font-size: 2em;
    }
    /*.recipe-details li{*/
        /*display: none !important;*/
    /*}*/
    .recipe-details{
        padding-left: 5%;
        padding-right: 5%;
    }
    .caption p{
        font-size: 1em;
        color: #7d9037;
    }
    .preparation{
        font-size: 1em;
    }
    .cooking {
        font-size: 1em;
    }
}
@media screen and (min-width: 769px){
    .recipe_blurb{
        font-size: 1.25em;
    }

    .preparation{
        font-size: 1em;
    }
    .cooking {
        font-size: 1em;
    }
    .caption p {
        color: #7d9037;
        -webkit-text-stroke-width: .4px;
        -webkit-text-stroke-color: black;
    }
}
.recipe-details{
    height: 100%;
}
#recipesheading h1 {
    padding-top: 20%;
    font-family: 'Stint Ultra Condensed', cursive;
    color: #b86c2d;
    margin-top: -10%;
    padding-bottom: 15%;
    text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 882px){
    .navbar-default .navbar-nav>li>a {
        font-size: 15px !important;
    }
}