/**
 * Theme Name: Macro Meats
 * Theme URI: http://www.macromeats.com
 * Author: WoW Creative
 * Author URI: http://wowcreative.com.au
 */

/* Font Face */

@font-face {
    font-family: 'VerlagRegular';
    src: url('fonts/verlag-black.eot');
    src: url('fonts/verlag-black.svg#VerlagBlack') format('svg'),
    url('fonts/verlag-black.eot') format('embedded-opentype'),
    url('fonts/verlag-black.woff') format('woff'),
    url('fonts/verlag-black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'VerlagLight';
    src: url('fonts/verlag-light.eot');
    src: url('fonts/verlag-light.svg#VerlagLight') format('svg'),
    url('fonts/verlag-light.eot') format('embedded-opentype'),
    url('fonts/verlag-light.woff') format('woff'),
    url('fonts/verlag-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'VerlagBold';
    src: url('fonts/verlag-bold.eot');
    src: url('fonts/verlag-bold.svg#VerlagBold') format('svg'),
    url('fonts/verlag-bold.eot#iefix') format('embedded-opentype'),
    url('fonts/verlag-bold.woff') format('woff'),
    url('fonts/verlag-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'amati_.._plainregular';
    src: url('fonts/amatiplain-webfont.eot');
    src: url('fonts/amatiplain-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/amatiplain-webfont.woff') format('woff'),
    url('fonts/amatiplain-webfont.ttf') format('truetype'),
    url('fonts/amatiplain-webfont.svg#amati_.._plainregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* 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, img, ins, kbd, q, s, samp,
small, strike, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
input {
    outline: none;
}

strong, b {

}

* html .clearfix{ /* IE6 */
    height: 1%;
    overflow: visible;
}
*+html .clearfix{ /* IE7 */
    min-height: 1%;
    clear: both;
}
.clearfix:after { /* General */
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

/* Text */

a { outline: 0; text-decoration: none; color: #000000; }
p { font-size: 13px; line-height: 1.4; margin: 0 0 15px 0; color: #666666; }
h1 { font-size: 48px; line-height: 1; color: #000000; }
h2 { font-size: 14px; line-height: 1.4; color: #000000; margin: 20px 0 5px 0; font-style: normal; }
h3 { font-size: 12px; line-height: 1.4; color: #000000; }
h4 { font-size: 20px; line-height: 1; color: #000000; }
h5 { font-size: 16px; line-height: 1; color: #000000; }
h6 { font-size: 12px; line-height: 1; color: #000000; }

li { font-size: 13px; line-height: 1.3; color: #666666; }
ol.ref li { font-size: 11px; }
table { width: 100%; margin: 0 0 20px 0; }
thead td { border-bottom: 1px solid #000000; }
td { font-size: 12px; line-height: 1.3; color: #666666; padding: 3px 5px; border-bottom: 1px solid #999999; }

/* Forms */

input[type="text"],
input[type="email"],
textarea {
    margin: 0;
    padding: 0;
    width: 100% !important;
    max-width: 100%;
    display: block;
    outline: none;
    font-style: italic;
    border: 1px solid #cccccc;
    font-size: 13px;
    font-family: Georgia, "Times New Roman", serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    text-indent: 0.01px;
    text-overflow: "";
    padding: 4px;
}
input[type="submit"] {
    font-family: Georgia, "Times New Roman", serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #000000;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border: none;
    cursor: pointer;
    padding: 7px 17px;
    margin: 0;
    color: #ffffff;
    font-style: italic;
}
input[type="submit"]:hover {
    background-color: #848484;
}
::-webkit-input-placeholder {
    color: #b2b2b2;
}

:-moz-placeholder { /* Firefox 18- */
    color: #b2b2b2;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #b2b2b2;
}

:-ms-input-placeholder {
    color: #b2b2b2;
}

/* Misc */

b { font-weight: normal; }
.vertical-text {
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -ms-transform: rotate(-90.0deg);  /* IE9+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
    transform: rotate(-90.0deg);  /* Standard */
    display: inline-block;
    width: auto;
    padding-top: 5px;
    height: 23px;
    width: 20px;
    float: left;
    white-space: nowrap;
}
.mobile { display: none; }
.desktop { display: block; }
body.page-id-113 td { text-align: center; vertical-align: middle; }
body.page-id-113 thead td .vertical-text { position: relative; left: 16%; }
body.page-id-113 td img { display: inline-block; }
body.page-id-113 tr td:first-child { text-align: left; }

/* Wrappers */

html, body { height: 100%; margin: 0; padding: 0; }
body { color: #000; font-family: Georgia, "Times New Roman", serif; }
.wrapper { max-width: 100%; height: 100%; margin: 0 auto;  position: relative;  }
.inner-wrapper { min-height: 100%; padding-bottom: 50px; position: relative; z-index: 6; }
.wrapper img.main-bottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 5; }

/* Homepage */

body.home #main > div { padding: 232px 15px 30px 15px; }
#main .feature { min-height: 270px; }
#main .column .feature h2 { padding: 7px 16px 8px 16px; font-size: 23px; line-height: 1.2; color: #666666; }
#main .column .feature h2 span { width: 100%; padding-bottom: 30px; min-height: 40px; display: block; }
#main .column .feature p { font-size: 12px; margin: 0; line-height: 1.4; width: 51%; max-width: 260px; }
#main .column .feature .feature-content {
    padding: 31px 16px 32px 16px;
}
#main .column .feature img { position: absolute; bottom: 0; right: 0; width: 50%; height: auto; }
#main .column > .site-link { width: 50%; margin: 0; border: none; display: inline-block; vertical-align: top; }
#main .column > .site-link .site-link-content {
    margin: 0 15px 20px 15px;
    text-align: center;
    padding-bottom: 6px;
}
#main .column > .site-link .site-link-content h3 {
    display: inline-block;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: 100%;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'VerlagRegular', Arial, sans-serif;
    position: absolute;
    bottom: 17px;
    left: 0;
}
#main .column > .site-link .site-link-content h3 a {
    background-color: #231f20;
    display: inline-block;
    padding: 0 8%;
    position: relative;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    height: 24px;
    line-height: 24px;
}
#main .column > .site-link .site-link-content h3 a:before,
#main .column > .site-link .site-link-content h3 a:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 28px;
    top: -2px;
    background-image: url(images/heading-end-sprite.png);
    background-repeat: no-repeat;
}
#main .column > .site-link .site-link-content h3 a:before { left: -9px; background-position: 0px 0px; }
#main .column > .site-link .site-link-content h3 a:after { right: -9px; background-position: -9px 0px; }
#main .column > .site-link .site-link-content > a { border: 5px solid #ffffff; display: block; }
#main .column > .site-link .site-link-content a { display: block; color: #ffffff; }

#main .column > .site-link.sidebar-feature { width: 100%; }
#main .column > .site-link.sidebar-feature .site-link-content { padding-bottom: 0; background-image: none; }
#main .column > .site-link.sidebar-feature .site-link-content > a { border: none; }

#main .column .twitter { padding: 5px; background-color: #ffffff; }
#main .column .twitter h2 { color: #493627; text-align: center; padding: 0; }
#main .column .twitter .twitter-icon { position: absolute; right: 5px; top: 3px; }
#main .column .twitter iframe { min-width: 100% !important; max-width: 100% !important; }

/* Header */

header { position: absolute; top: 0; left: 0; width: 100%; z-index: 15; padding-bottom: 13px; min-width: 100%; background-color: black; }
header.fixed { position: fixed; top: -151px; }
header .fixed-logo { display: none; position: absolute; bottom: 2px; left: 30px; z-index: 20; }
header .fixed-logo img { width: 100px; }
header > div { height: 198px; }
header > div > div { max-width: 900px; position: relative; height: 198px; margin: auto; }
header h1 { position: absolute; top: 19px; width: 100%; z-index: 20; text-align: center; margin: 0 auto; }
header h1 a { display: inline-block; }
header h1 a img { margin: 0 auto; width: 330px; height: auto; display: block; }
header nav { position: absolute; top: 168px; width: 100%; z-index: 20; display: block; }
header nav ul { list-style: none; }
header nav > ul { width: 100%; text-align: center; position: absolute; right: 50%; margin-right: -50%; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s; }
header.fixed nav > ul { right: 50%; margin-right: -61%; }
header nav > ul > li {  display: inline-block; *display: inline; zoom: 1; text-transform: uppercase; position: relative; padding: 0 20px 6px 28px; }
header nav > ul > li:before { content: "|"; font-family: 'VerlagRegular', Arial, sans-serif; position: absolute; left: 0; top: 1px; }
header nav > ul > li:first-child:before { content: ""; }
header nav > ul > li > a { color: #666666; font-size: 14px; line-height: 20px; font-family: 'VerlagRegular', Arial, sans-serif; opacity: 0.85; }
header nav > ul > li:hover > a { color: #ffffff; border-bottom: 2px solid #ffffff; opacity: 1; }

header nav .sub-menu { display: none; position: absolute; background: rgb(255,255,255); background: rgba(255,255,255,0.9); padding: 10px; text-align: left; width: 108px; font-style: italic; top: 26px; left: 28px; }
header nav .sub-menu > li { text-transform: none; margin-top: 5px; }
header nav .sub-menu > li:first-child { margin-top: 0; }
header nav .sub-menu > li > a { color: #000000; font-size: 12px; display: block; line-height: 16px; padding: 0 1px; }
header nav .sub-menu > li > a:hover { color: #454647; text-decoration: underline; }

/* Main */

#main { background-color: #f0f0f0; max-width: 900px; margin: 0 auto; position: relative; z-index: 10; font-style: italic; }
#main > div { padding: 232px 15px 30px 15px; min-height: 600px; }
#main #slideshow-content { padding: 5px; background-color: #ffffff; margin: 0 15px 20px 15px; position: relative; z-index: 30; }
#main #slideshow .slide-content { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000); }
#main #slideshow .slide-content h2 { font-family: 'VerlagLight', Arial, sans-serif; color: #ffffff; font-size: 26px; line-height: 31px; margin: 0; padding: 25px;  }
#main aside { width: 33.3333%; float: left; }
#main aside > div { margin: 0 15px; }
#main aside .sidebar-content { font-style: italic; }
#main aside .sidebar-content p { font-size: 17px; line-height: 1.2; color: #000000; }
#main article#content,
#main section#content { width: 66.6666%; float: right; font-style: italic; }
#main.fullwidth article#content,
#main section#content.fullwidth { width: 100%; }
#main article#content > div { border: 5px solid #ffffff; margin: 0 15px 20px 15px; }
#main article#content > div > h1,
#main article.content-header h1 { display: block; background-color: #ffffff; color: #000000; font-size: 18px; padding: 12px 12px 12px 12px; }
#main article#content h2,
#main article.content-header h2 { font-weight: bold; font-style: italic; }
#main article#content h3,
#main article.content-header h3 { color: #ffffff; background-color: #000000; padding: 5px; margin: 20px 0 0 0; }
#main article#content .entry,
#main article.content-header .entry { padding: 12px; background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#70FFFFFF,endColorstr=#70FFFFFF); zoom: 1; }
#main article#content .entry a { text-decoration: underline; word-break: break-word; }
#main article ul,
#main article ol { margin: 15px 0 15px 18px; }
#main article#content li,
#main article.content-header li { margin-bottom: 5px; }
#main .pagination { margin: 0 15px 20px 15px;  }
#main .pagination > * {
    padding: 8px 0;
    border: 5px solid #ffffff;
    background: rgba(255,255,255,0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#70FFFFFF,endColorstr=#70FFFFFF);
    display: inline-block;
    width: 30px;
    text-align: center;
    color: #666666;
}
#main .pagination .current {
    background-color: #ffffff;
    color: #000000;
}

/* Bricks */

body.archive.post-type-archive-recipe #main > div { padding: 146px 15px 30px 15px; }
#main .brick { width: 33.3333%; float: left; font-style: italic; }
#main section#content .brick { width: 50%; }
#main .brick > div,
#main .content-header > div {
    margin: 0 15px 20px 15px;
    position: relative;
    padding: 0 0 9px 0;
}

#main .brick > div > h2 {
    display: block;
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
    line-height: 1.2;
    padding: 12px 12px 12px 12px;
    margin: 0;
    text-transform: none;
    font-style: italic;
}
.post-type-archive-recipe #main .brick > div img {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.post-type-archive-recipe #main .brick > div:hover img {
    -webkit-transform:scale(1.1) rotate(3deg); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform:scale(1.1) rotate(3deg); /*Mozilla scale version*/
    -o-transform:scale(1.1) rotate(3deg); /*Opera scale version*/
    -ms-transform: scale(1.1) rotate(3deg); /*MS scale version*/
}

#main .brick .brick-content { padding: 10px 14px 20px 14px; background-color: #fff; }
#main .brick .brick-content p { width: 100%; margin: 10px 0 15px 0; font-size: 12px; line-height: 1.4; }
#main .brick .brick-content p a { text-decoration: underline; }
#main .brick .brick-content img { margin: 0 0 15px 0; }
#main .brick .brick-content h3 { margin: 10px 0 0 0; font-size: 12px; line-height: 1.3; font-style: normal; text-transform: uppercase; font-family: 'VerlagRegular', Arial, sans-serif; }
#main .brick > div > h4 {
    display: inline-block;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: 100%;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'VerlagRegular', Arial, sans-serif;
    position: absolute;
    bottom: -2px;
    font-size: 14px;
    left: 0;
    text-align: center;
}
#main .brick > div > h4 a,
.button-style a {
    background-color: #231f20;
    display: inline-block;
    padding: 0 8%;
    position: relative;
    color: #ffffff;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-decoration: none !important;
}
#main .brick > div > h4 a:before,
#main .brick > div > h4 a:after,
.button-style a:before,
.button-style a:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 28px;
    top: -2px;
    background-image: url(images/heading-end-sprite.png);
    background-repeat: no-repeat;
}
#main .brick > div > h4 a:before,
.button-style a:before { left: -9px; background-position: 0px 0px; }
#main .brick > div > h4 a:after,
.button-style a:after { right: -9px; background-position: -9px 0px; }
.button-style {
    display: inline-block;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: 100%;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'VerlagRegular', Arial, sans-serif;
}

/* Products */

#main .brick.product .brick-content p { width: 92%; margin: 10px auto 15px auto; }

/* Columns */

#main .column { width: 33.3333%; float: left; font-style: italic; }
#main .column > div { margin: 0 15px 20px 15px; border: 5px solid #ffffff; position: relative; }
#main .column > div > h2 { display: block; background-color: #ffffff; color: #000000; font-size: 16px; padding: 7px 12px 12px 12px; margin: 0; text-transform: none; font-style: italic; }
#main .column .column-content { padding: 12px; background: rgba(255,255,255,0.5); }
#main .column .column-content ul:first-child { margin: 0 0 15px 18px; }
#main .column.recipe-title > div { border: none; }
#main .column.recipe-title > div > h2 { text-transform: uppercase; font-style: normal; background: none; padding: 0; font-size: 90px; line-height: 0.85; font-family: 'amati_.._plainregular'; width: 10%; }
#main .column.recipe-title > div > h3 { font-size: 14px; color: #666666; }
#main .column.recipe-title > div p { margin: 0; }
#main .column span.divider { display: block; width: 100%; border-bottom: 10px solid #fff; margin: 20px 0; }
#main .column.two-thirds { width: 66.6666% }

/* posts */

#main .brick .brick-content.news a { text-decoration: underline; }
#main .brick .brick-content.news p { margin: 0 0 5px 0; }
#main .brick .brick-content.news p.subheading { margin: 0; }
#main .brick .brick-content.news img { margin: 10px 0; }
#main .brick .brick-content.news #video-embed { margin: 10px 0; border: 5px solid #1b1b1b; background-color: #000000; }
#main #news.videos .brick { width: 50%; }

/* Custom Tables */

body.page-id-113 thead td { height: 120px; vertical-align: bottom; }

/* Single Posts */

body.single-recipe #main > div { padding: 149px 15px 30px 15px; }
#main .recipe-feature { padding: 5px; background-color: #ffffff; margin: 0 15px 30px 15px; }

/* Stockists */

#main .stockists-map { position: relative; margin: 30px 0; }
#main .stockists-map .stockists-map-container { width: 65%; position: relative; }
#main .stockists-map map { position: relative; z-index: 20; }
#main .stockists-map .blank-map { position: relative; z-index: 15; }
#main .stockists-map .img-state { z-index: 10; display:none; }
#main .stockists-map .bg-map { position: absolute; top: 0; left: 0; z-index: 5; opacity: 0.8; }
#main .stockists-map .img-state { z-index: 10; display: none; position: absolute; }
#main .stockists-map .img-state.wa { left: 0; top: 9.7%; width: 39.83333333333333%; }
#main .stockists-map .img-state.nt { left: 39.83333333333333%; top: 2.2%; width: 22.333333333333332%; }
#main .stockists-map .img-state.qld { top: 0; right: 0.2%; width: 37.833333333333336%; }
#main .stockists-map .img-state.nsw { right: 0; top: 49.5%; width: 30.666666666666664%; }
#main .stockists-map .img-state.vic { right: 8.9%; top: 68.2%; width: 21.833333333333332%; }
#main .stockists-map .img-state.sa { top: 43.7%; left: 39.83333333333333%; width: 29.666666666666668%; }
#main .stockists-map .img-state.tas { top: 85.8%; right: 12.5%; width: 11.666666666666666%; }
#main .stockists-map .stockists-state { position: absolute; left: 70%; top: 100px; display: none; }
#main .stockists-map .stockists-state h4 { font-size: 13px; line-height: 1.3; color: #666666; font-weight: bold; margin: 0; }
#main .stockists-map .stockists-state ul { margin: 0; list-style: none; }
#main article#content .stockists-map .stockists-state li { margin: 0; }

/* Contact */

#main .wpcf7 { margin-top: 20px; }
#main .wpcf7 p,
#main .brick .brick-content .wpcf7 p { margin: 0 0 7px 0; width: 90%; }
#main span.wpcf7-form-control-wrap { display: block !important; }
#main span.wpcf7-not-valid-tip { color: #000000; font-size: 11px; margin-top: 5px; margin-left: 5px; }
#main div.wpcf7-validation-errors,
#main div.wpcf7-mail-sent-ok  { margin: 0; padding: 5px; background: rgb(255,102,51); background: rgba(255,102,51,0.75); color: #ffffff; font-size: 12px; line-height: 1.4; border: 2px solid #e86a24 ; }
#main div.wpcf7 img.ajax-loader { margin: 5px 0 0 0; }
#main.contact-page section#content .brick { width: 100%; }

/* Footer */

footer { background-color: #ffffff; max-width: 900px; margin: 0 auto; position: relative; z-index: 10; text-align: center; font-size: 10px; font-style: italic; }
footer > div { padding: 10px 30px; background-color: #e1e1e1; }
footer ul { display: inline; }
footer ul li { display: inline; font-size: 10px; }
footer ul li:after { content: " - " }
footer ul li a { text-decoration: underline; }
footer p { display: inline; font-size: 10px; }
footer p.available { position: absolute; top: 30%; left: 5%; font-size: 12px; }
body.page-id-21 footer p.available { display: none; }

/* Mobile */

.menu-btn {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: #000000;
    display: none;
    margin-left: 15px;
    top: 10px;
}
.menu-btn:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    width: 20px;
    height: 3px;
    background: #ffffff;
    box-shadow: 0 8px 0 0 #ffffff,
    0 16px 0 0 #ffffff;
}