/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/***************************************************************************
Setup CSS
***************************************************************************/
* {
    box-sizing: border-box !important;
}

html {
    position: relative;
    min-height: 100%;
    width: 100%;
    min-width: 320px;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    color: #333;
    line-height: 40px;
}

body {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 0 0 .5px;
    background-color: white;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(100, 175, 100, .25) 20px, rgba(100, 175, 100, .25) 40px),
        repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(100, 175, 100, .25) 20px, rgba(100, 175, 100, .25) 40px);
    background-position: center center;
    overflow-x: hidden;
}

/***************************************************************************
Typography
***************************************************************************/
h1, h2, h3, h4, h5, h6, p.slogan {
    margin: 0;
    padding: 0;
    font-weight: 300;
}

h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.35em;
}
h3 {
    font-size: 1.25em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1.15em;
}
h6 {
    font-size: 1.1em;
}

a {
    text-decoration: none;
    color: #374;
}
a:hover {
    color: #5a6;
}

p {
    margin: 0;
    font-size: 1em;
    line-height: 1.25em;
    padding: 20px 0 40px 0;
}
ul, ol {
    margin: 0;
    line-height: 1.25em;
    padding: 20px 0 20px 20px;
    list-style: none;
}
ul li,
ol li {
    padding: 0 0 20px 0;
}

/***************************************************************************
Wrapper
***************************************************************************/
#wrapper {
    position: relative;
    min-height: 100%;
    margin: 0 auto -60px auto;
}

/*** HEADER & FOOTER ***/
#header, #footer {
    position: relative;
    padding: 20px;
    border-right: 1px solid #444;
    border-left: 1px solid #444;
    background-color: #fff;
}

#header {
    border-bottom: 1px solid #444;
}
#header #title {
    padding-bottom: 10px;
    font-size: 2em;
    font-family: 'Bad Script', sans-serif;
}
#header #slogan-container {
    padding: 0;
    font-size: 1.25em;
    font-family: 'Cutive Mono', cursive;
    letter-spacing: -2px;
}

#wrapper:after {
    content: "";
    display: block;
    clear: both;
}
#footer, #wrapper:after  {
    height: 60px;
}
#footer {
    margin: 0 auto;
    clear: both;
    border-top: 1px solid #444;
    font-size: .75em;
    color: #666;
    text-align: right;
}
#footer p {
    padding: 0;
    line-height: 20px;
}

/***************************************************************************
CONTENT
***************************************************************************/
#wrapper #filter-recipes {
    margin-top: 0;
    padding: 0;
}
#filter-recipes #tag-list {
    margin: 10px 0 0 0;
    text-align: right;
}
#filter-recipes #tag-list .tag-wrapper {
    padding: 5px;
    float: right;
    border: 1px solid #444;
    background-color: #fff;
}
#filter-recipes #tag-list .tag-wrapper .label {
    display: block;
    margin-top: -5px;
    margin-left: -3px;
    float: left;
    font-size: .75em;
}
#filter-recipes #tag-list .tag-wrapper .tag-list {
    display: block;
    clear: both;
    padding-top: 5px;
}
#filter-recipes #tag-list .tag {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 3px;
    cursor: pointer;
}
#filter-recipes #tag-list .tag:first-child {
    margin-left: 0;
}
#filter-recipes #tag-list .tag:hover {
    outline: 1px solid #444;
}
#filter-recipes #tag-list .tag.selected {
    background-color: #444;
    color: #fff;
}

#wrapper #recipe-grid-wrapper {
    margin-top: 0;
    padding: 0;
    clear: both;
}
#recipe-grid-wrapper #recipe-grid {
    margin: 20px 0;
    padding-top: 10px;
}
#recipe-grid .recipe-card {
    position: relative;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 1px;
    background-color: transparent;
    perspective: 1000px;
    font-family: 'Cutive Mono', cursive;
    color: black;
    break-inside: avoid-column;
}
#recipe-grid .recipe-card .recipe-card-inner {
    position: relative;
    width: 100%;
    outline: 1px solid #444;
    background-color: transparent;
    box-shadow: 0 0 25px -5px #666;
    cursor: pointer;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    padding-bottom: 100%;
}
#recipe-grid .recipe-card:hover .recipe-card-inner,
#recipe-grid .recipe-card.hover .recipe-card-inner {
    transform: rotateY(180deg);
}
#recipe-grid .recipe-card .recipe-card-front,
#recipe-grid .recipe-card .recipe-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 10px solid #fff;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
#recipe-grid .recipe-card .recipe-card-front {

}
#recipe-grid .recipe-card .recipe-card-back {
    transform: rotateY(180deg);
}
#recipe-grid .recipe-card .recipe-card-back .recipe-title {
    padding-bottom: 10px;
    border-bottom: 1px dotted #999
}
#recipe-grid .recipe-card .recipe-title {
    padding-top: 10px;
    font-family: 'Bad Script', cursive;
    font-size: 24pt;
    color: #165016;
}
#recipe-grid .recipe-card .recipe-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#recipe-grid .recipe-card .recipe-image img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}
#recipe-grid .recipe-card .active-time,
#recipe-grid .recipe-card .total-time,
#recipe-grid .recipe-card .servings {
    display: inline-block;
    width: 33.3%;
    padding: 10px 0;
    text-align: right;
    letter-spacing: -3px;
}
#recipe-grid .recipe-card .active-time,
#recipe-grid .recipe-card .total-time {
    padding-right: 10px;
    border-right: 1px dotted #999
}
#recipe-grid .recipe-card .total-time,
#recipe-grid .recipe-card .servings {
    padding-left: 10px;
}
#recipe-grid .recipe-card .active-time span,
#recipe-grid .recipe-card .total-time span,
#recipe-grid .recipe-card .servings span {
    display: inline-block;
    height: 20px;
    width: 20px;
    float: left;
    margin-right: 5px;
    text-align: center;
    color: #666;
}
#recipe-grid .recipe-card .description {
    padding-top: 10px;
    border-top: 1px dotted #999;
    line-height: 1.25em;
    letter-spacing: -2px;
}
#recipe-grid .recipe-card .description .label {
    display: inline-block;
    width: 100%;
    padding-bottom: 5px;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1em;
    color: #444;
    letter-spacing: 0;
}
#recipe-grid .recipe-card .tags {
    position: absolute;
    bottom: 0;
    width: 100%;
}
#recipe-grid .recipe-card .tags .tag {
    display: inline-block;
    margin-right: 5px;
    padding: 5px;
    background-color: #eee;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1em;
}

/*** Recipe Modal Card ***/
#recipe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .75);
    z-index: 1;
    display: none;
}
#recipe-modal #recipe-modal-card {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #444;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 25px -5px #666;
    font-family: 'Cutive Mono', cursive;
    color: black;
    overflow-y: auto;
}
#recipe-modal #recipe-modal-card .close-modal {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 32px;
    width: 32px;
    text-align: center;
    color: #777;
    cursor: pointer;
}
#recipe-modal #recipe-modal-card .close-modal:hover {
    color: #444;
}
#recipe-modal #recipe-modal-card .close-modal .fa {
    line-height: .9em;
}

#recipe-modal #recipe-modal-card .recipe-title {
    padding-bottom: 20px;
    border-bottom: 1px dotted #999;
    font-family: 'Bad Script', cursive;
    font-size: 24pt;
    line-height: 1.5em;
    color: #165016;
}
#recipe-modal #recipe-modal-card .recipe-image {
    max-width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #999;
}
#recipe-modal #recipe-modal-card .recipe-image img {
    width: 100%;
    height: auto;
}
#recipe-modal #recipe-modal-card .active-time,
#recipe-modal #recipe-modal-card .total-time,
#recipe-modal #recipe-modal-card .servings {
    display: inline-block;
    width: 33.3%;
    padding: 10px 0;
    border-bottom: 1px dotted #999;
    text-align: right;
    letter-spacing: -2px;
}
#recipe-modal #recipe-modal-card .active-time,
#recipe-modal #recipe-modal-card .total-time {
    padding-right: 10px;
    border-right: 1px dotted #999
}
#recipe-modal #recipe-modal-card .total-time,
#recipe-modal #recipe-modal-card .servings {
    padding-left: 10px;
}
#recipe-modal #recipe-modal-card .active-time span,
#recipe-modal #recipe-modal-card .total-time span,
#recipe-modal #recipe-modal-card .servings span {
    display: inline-block;
    height: 20px;
    width: 20px;
    float: left;
    margin-right: 5px;
    text-align: center;
    color: #666;
}
#recipe-modal #recipe-modal-card .description,
#recipe-modal #recipe-modal-card .ingredients-list,
#recipe-modal #recipe-modal-card .directions {
    display: block;
    width: 100%;
    padding: 10px 0 10px 10px;
    line-height: 1.25em;
    letter-spacing: -2px;
}
#recipe-modal #recipe-modal-card .ingredients-list,
#recipe-modal #recipe-modal-card .directions {
    border-top: 1px dotted #999;
}
#recipe-modal #recipe-modal-card .ingredients-list {
    clear: both;
    padding-left: 0;
}
#recipe-modal #recipe-modal-card .description .label,
#recipe-modal #recipe-modal-card .ingredients-list .label,
#recipe-modal #recipe-modal-card .directions .label {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #444;
    text-align: left;
    letter-spacing: 0;
}
#recipe-modal #recipe-modal-card .description .label,
#recipe-modal #recipe-modal-card .directions .label {
    padding-bottom: 5px;
    display: block;
    width: 100%;
    margin-left: -10px;
}
#recipe-modal #recipe-modal-card .directions .steps {
    padding: 5px 0 10px 25px;
}
#recipe-modal #recipe-modal-card .directions .steps .step-heading {
    padding-bottom: 5px;
    margin-left: -20px;
    font-weight: bold;
    text-decoration: underline;
}
#recipe-modal #recipe-modal-card .directions .steps .step {
    padding-bottom: 5px;
    padding-left: 10px;
    display: list-item;
    list-style-type: circle;
}
#recipe-modal #recipe-modal-card .ingredients-list thead .label {
    padding-bottom: 5px;
}
#recipe-modal #recipe-modal-card .ingredients-list tbody td {
    padding-left: 10px;
}
#recipe-modal #recipe-modal-card .ingredients-list .heading {
    padding-top: 10px;
    font-weight: bold;
}
#recipe-modal #recipe-modal-card .ingredients-list .ingredient .preparation {
    cursor: pointer;
}

/***************************************************************************
MISCELLANEOUS
***************************************************************************/
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.threebyfour:after {
    content: "";
    display: block;
    padding-bottom: 75%;
}
.twobythree:after {
    content: "";
    display: block;
    padding-bottom: 66.66%;
}
.ninebysixteen:after {
    content: "";
    display: block;
    padding-bottom: 53.8%;
}

.float-right {
    float: right;
}
.float-left {
    float: left;
}

.clear {
    clear: both;
}

.good {
    color: #496;
}

/***************************************************************************
MEDIA QUERIES
***************************************************************************/

/*** For Mobile and Small Tablets ***/
@media only screen and (max-width: 820px) {

    #header, #footer {
        padding: 10px;
    }
    #header #title {
        font-size: 1.75em;
    }
    #header #slogan-container {
        font-size: 1em;
    }

    #wrapper #content #recipe-filters .filter-item {
        font-size: 20px;
        line-height: 20px;
    }
    #wrapper #content #recipe-filters .filter-item a {
        padding: 4px 6px;
    }

    .not-mobile {
        display: none !important;
    }
}

/*** For Small Mobile Phones Only ***/
@media only screen and (max-width: 479px) {
    body {
        margin: 0;
    }
    #main-nav .main-nav-list {
        padding: 20px 0 0 0;
    }

    #recipe-grid {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        column-count: 1;
        -webkit-column-gap: 0; /* Chrome, Safari, Opera */
        column-gap: 0;
    }

    #wrapper, #footer {
        width: 100%;
        margin: 0;
    }
    #header, #footer {
        border-left: none;
        border-right: none;
    }
    #wrapper {
        border: none;
        margin-bottom: -45px;
    }
    #footer, #wrapper:after  {
        height: 45px;
    }
    #footer p {
        clear: both;
    }
}

/*** For Small & Large Mobile Phones Only ***/
@media only screen and (max-width: 619px) {
    .float-left {
        margin-right: 0;
    }
    .float-right {
        margin-left: 0;
    }

    #wrapper #content #recipe-filters {
        margin-top: 0;
    }
    #wrapper #content #recipes-wrapper .recipe--card {
        margin: 0 0 20px 0;
        height: 270px;
    }
}

/*** For NOT Mobile Phones ***/
@media only screen and (min-width: 480px) {
    #wrapper, #footer  {
        width: 401px;
    }

    #recipe-grid {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        column-count: 1;
        -webkit-column-gap: 0; /* Chrome, Safari, Opera */
        column-gap: 0;
    }
    #recipe-modal {
        padding: 20px;
    }
    #recipe-modal #recipe-modal-card {
        padding: 20px;
    }
}

/*** For Small Tablets ***/
@media only screen and (min-width: 620px) {
    #wrapper, #footer  {
        width: 601px;
    }

    #recipe-grid {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        column-count: 2;
        -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
        column-gap: 20px;
    }

    #wrapper #content #recipe-filters {
        height: 39px;
    }
    #wrapper #content #recipe-filters .filter-item a {
        padding: 9px 15px 7px 15px;
    }
}

/*** For Small Tablets (Portrait) ***/
@media only screen and (min-width: 501px) and (max-width: 767px) and (orientation: portrait) {

}

/*** For Medium Tablets (Landscape) ***/
@media only screen and (min-width: 820px) {
    #wrapper, #footer  {
        width: 801px;
    }

    #recipe-grid {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        column-count: 2;
        -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
        column-gap: 20px;
    }

    #wrapper #content #recipe-filters {
        margin-top: 20px;
    }

    #recipe-modal #recipe-modal-card .recipe-image,
    #recipe-modal #recipe-modal-card .directions {
        width: 66.6%;
        padding-top: 20px;
        padding-left: 20px;
        border-left: 1px dotted #999;
        border-bottom: none;
        float: right;
    }
    #recipe-modal #recipe-modal-card .active-time,
    #recipe-modal #recipe-modal-card .total-time,
    #recipe-modal #recipe-modal-card .servings {
        padding: 20px;
        border-right: none;
    }
    #recipe-modal #recipe-modal-card .description,
    #recipe-modal #recipe-modal-card .ingredients-list {
        width: 33.3%;
        padding: 20px 20px 20px 10px;
    }
    #recipe-modal #recipe-modal-card .ingredients-list {
        float: left;
        padding-left: 0;
    }
    #recipe-modal #recipe-modal-card .directions .label {
        padding-left: 10px;
    }

    .mobile {
        display: none !important;
    }
}

/*** For Large Tablets (Landscape) ***/
@media only screen and (min-width: 1024px) {
    #wrapper, #footer  {
        width: 901px;
    }
    #recipe-modal {
        padding: 40px;
    }
}

/*** For Large Tablets (Portrait) ***/
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

}

/*** For Laptop Screens ***/
@media only screen and (min-width: 1280px) {
    #wrapper, #footer  {
        width: 1201px;
    }
    #recipe-grid {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        column-count: 3;
    }
    #recipe-modal #recipe-modal-card {
        width: 80%;
    }
}


/*** For Medium Desktop Screens ***/
@media only screen and (min-width: 1600px) {
    #wrapper, #footer  {
        width: 1501px;
    }
    #recipe-grid {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        column-count: 4;
    }
    #recipe-modal #recipe-modal-card {
        width: 70%;
    }
}

/*** For Large Desktop Screens ***/
@media only screen and (min-width: 1900px) {
    #wrapper, #footer {
        width: 1801px;
    }
    #recipe-grid {
        -webkit-column-count: 5; /* Chrome, Safari, Opera */
        column-count: 5;
    }
    #recipe-modal #recipe-modal-card {
        width: 60%;
    }
}