/*
Theme Name: Raw 2018.1
Theme URI: http://meyouand.us/
Author: Marc Phu
Author URI: http://meyouand.us
Version: 2018.1
*/

/*
================================================== 
Fonts
==================================================
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');


/*
================================================== 
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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ }
article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }
ol, ul { list-style: none; }
table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a:hover, a:active, a:focus { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; }
a img { border: 0; }
img { display: block; }
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }

/*
================================================== 
Layout Foundation
Tablet: 15-128-15 / Inner: 738px / Outer: 768px
Laptop: 15-140-15 / Inner: 990px / Outer: 1020px
Desktop: 15-170-15 / Inner: 1170px / Outer: 1200px
Desktop XL: 15-210-15 / Inner: 1410px / Outer: 1440px
==================================================
*/
.row { max-width: 600px; margin: 0 auto; }
.row:before, .row:after, [class*='up-'] { content: ""; display: table; clear: both; }
[class*='col-'] { min-height: 1px; width: 100%; padding: 0 15px; margin: 0 auto 15px; /* outline: 1px solid #eee; */ }
.nopadding-col { padding: 0 } /* Removes container padding for columns-in-columns */
@media only screen and (min-width: 1020px) {
	body { background: url(assets/grid-6col-15-140.svg) repeat-y center top; }
	[class*='col-'] { float: left;  }
	.center-col { float: none; margin: 0 auto 15px; } /* Use to un-float and center a box */
	.row { max-width: 1020px; }
	.col-1 { width: 170px; }
	.push-1 { margin-left: 170px; }
	.col-2 { width: 340px; }
	.push-2 { margin-left: 340px; }
	.col-3 { width: 510px; }
	.push-3 { margin-left: 510px; }
	.col-4 { width: 680px; }
	.push-4 { margin-left: 680px; }
	.col-5 { width: 750px; }
	.push-5 { margin-left: 750px; }
	.col-6 { width: 1020px; }
}
@media only screen and (min-width: 1200px) {
	body { background: url(assets/grid-6col-15-170.svg) repeat-y center top; }
	.row { max-width: 1200px; }
	.col-1 { width: 200px; }
	.push-1 { margin-left: 200px; }
	.col-2 { width: 400px; }
	.push-2 { margin-left: 400px; }
	.col-3 { width: 600px; }
	.push-3 { margin-left: 600px; }
	.col-4 { width: 800px; }
	.push-4 { margin-left: 800px; }
	.col-5 { width: 1000px; }
	.push-5 { margin-left: 1000px; }
	.col-6 { width: 1200px; }
}
/*Methods*/
.superwide { width: 100%; } /* This is if you need a background container behind each .row */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; } /*The clear float is applied to the container with the float elements! */
.hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.desktop-layout-init { display: none; }
.mobile-layout-init { display: block; }
.float-left { float: left; }
.float-right { float: right; }
/* Layout tricks */
.box-table { display: table; width: 100%; height: 100%; } /* Used to center hor & ver. Used in conjuction with .box-cell */
.box-cell { display: table-cell; vertical-align: middle; height: 100%; }
.box-height { height: 100vh; } /* Stretch box to browser height. Modern support only  */
.posRelative { position: relative } /* Used in conjunction with .box-middle to quickly set the parent container */
.box-middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* Center horizontally & vertically */
.box-clear:before, .box-clear:after { content: ""; display: table; clear: both; }
.box-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } /* Responsive video embeds */
.box-video iframe,
.box-video object,
.box-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-responsive { margin-bottom: 40px; } /* WP's auto embed url feature */
/* Viewport Slim Specific */
@media only screen and (max-width:1020px) {
	.vslim-float-left { float: left; }
	.vslim-float-right { float: right; }
	.vslim-textalign-center { text-align: center; }
	.vslim-display-block { display: block; }
}
/* Viewport Wide Specific */
@media only screen and (min-width:1020px) {
	.vwide-float-left { float: left; }
	.vwide-float-right { float: right; }
	.vwide-text-align-center { text-align: center; }
	.vwide-display-block { display: block; } /* Useful for breaking rag lines */
}

/*
================================================== 
Typography
==================================================
*/
/*Markup*/
body { font-family: 'Roboto Condensed', sans-serif; font-size: 20px; line-height: 30px; }
p { margin-bottom: 20px; }
a { color: #000; /* text-decoration: none; */ }
a:hover { }
a:visited { }
#bodycontent img { width: 100%; height: auto; }
#bodycontent img.inherit { width: inherit; } /* Don't obey width 100% rule */
/*Repeatables*/
.textWhite { color: #fff; }
.bgOrange { background: orange; }
.textCenter { text-align: center; }
a.buttonA, .buttonA a, #tinymce a.buttonA { display: inline-block; padding: 10px 15px; background: black; font-weight: bold; color: #fff; text-decoration: none !important; border-radius: 20px; }
a.buttonA:hover, .buttonA a:hover, #tinymce a.buttonA:hover { background: grey; }
.blockA, #tinymce .blockA { padding: 20px 20px 0 20px; border: 1px solid red; margin-bottom: 20px; }
/*Posts & Pages*/
.mce-content-body { margin: 20px; }
#tinymce .wp-more-tag, #tinymce .mce-wp-more { height: 20px; }
.entry-title {}
.entry-title a {}
.entry-body h1, .h1, #tinymce h1 { font-size: 40px; line-height: 50px; font-weight: 700; margin-top: 120px; margin-bottom: 10px; }
	@media only screen and (min-width: 1020px) { .entry-body h1, .h1, #tinymce h1 { font-size: 50px; line-height: 60px; } }
.entry-body h2, .h2, #tinymce h2 { font-size: 40px; line-height: 50px; font-weight: 300; margin-top: 80px; margin-bottom: 10px;  }
	@media only screen and (min-width: 1020px) { .entry-body h2, .h2, #tinymce h2 { font-size: 50px; line-height: 60px; } }
.entry-body h3, .h3, #tinymce h3 { font-size: 22px; line-height: 30px; font-weight: 700; margin-top: 40px; }
	@media only screen and (min-width: 1020px) { .entry-body h3, .h3, #tinymce h3 { font-size: 30px; line-height: 40px; } }
.entry-body h4, .h4, #tinymce h4 { font-size: 18px; line-height: 30px; font-weight: 700; }
.entry-body h5, .h5, #tinymce h5 { font-size: 18px; line-height: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.entry-body h6, .h6, #tinymce h6 { font-size: 10px; line-height: 12px; font-weight: 700; text-transform: uppercase; background: #000; color: #fff; padding: 10px; letter-spacing: 1px; display: inline-block; }
.entry-body h1:first-child, .h1:first-child, #tinymce h1:first-child,
.entry-body h2:first-child, .h2:first-child, #tinymce h2:first-child,
.entry-body h3:first-child, .h3:first-child, #tinymce h3:first-child,
.entry-body h4:first-child, .h4:first-child, #tinymce h4:first-child,
.entry-body h5:first-child, .h5:first-child, #tinymce h5:first-child,
.entry-body h6:first-child, .h6:first-child, #tinymce h6:first-child { margin-top: 0; }
.entry-body hr, #tinymce hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
.entry-body p, #tinymce p, 
.entry-body ul, #tinymce ul,
.entry-body ol, #tinymce ol { font-size: 18px; line-height: 30px; margin-bottom: 30px; }
.entry-body a, #tinymce a { text-decoration: underline; }
.entry-body img, #tinymce img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ }
.entry-body .wp-caption, #tinymce .wp-caption { width: 100% !important; }
.entry-body .wp-caption img, #tinmyce .wp-caption img {}
.entry-body .wp-caption-text, #tinmyce .wp-caption-text { font-size: 10px; line-height: 16px; margin-top: 10px; }
.entry-body ul,
.entry-body ol, #tinymce ol { margin-left: 20px; list-style: decimal }
.entry-body ul, #tinymce ul { margin-left: 20px; list-style: disc; }
.entry-body li { margin-bottom: 5px; }
.entry-body li > ul, #tinymce li > ul
.entry-body li > ol, #tinymce li > ol { margin-bottom: 0; margin-left: 20px; }
.entry-body dt, #tinymce dt { font-weight: bold; }
.entry-body dd, #tinymce dd { margin: 0 20px 20px; }
.entry-body b, #tinymce b,
.entry-body strong, #tinymce strong { font-weight: bold; }
.entry-body dfn, #tinymce dfn,
.entry-body cite, #tinymce cite,
.entry-body em, #tinymce em,
.entry-body i, #tinymce i { font-style: italic; }
.entry-body blockquote p, #tinymce blockquote p { font-family: 'Roboto Slab', serif; font-size: 24px; line-height: 36px; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 20px 0; }
.entry-body address, #tinymce address { margin: 0 0 20px; }
.entry-body pre, #tinymce pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; padding: 1.6em; overflow: auto; max-width: 100%; }
.entry-body code, #tinymce code,
.entry-body kbd, #tinymce kbd,
.entry-body tt, #tinymce tt,
.entry-body var, #tinymce var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
.entry-body abbr, #tinymce abbr
.entry-body acronym, #tinymce acronym {	border-bottom: 1px dotted #666; cursor: help; }
.entry-body mark, #tinymce mark,
.entry-body ins, #tinymce ins { background: #fff9c0; text-decoration: none; }
.entry-body sup, #tinymce sup,
.entry-body sub, #tinymce sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }
.entry-body sup, #tinymce sup { bottom: 1ex; }
.entry-body sub, #tinymce sub { top: .5ex; }
.entry-body small, #tinymce small { font-size: 75%; }
.entry-body big, #tinymce big { font-size: 125%; }
.entry-body figure, #tinymce figure { margin: 0; }
.entry-body table, #tinymce table { margin: 0 0 20px; width: 100%; }
.entry-body th, #tinymce th { font-weight: bold; }
/*WP Classes*/
/* .entry-body .alignright { float: right; } Disabled */
/* .entry-body .alignleft { float: left; } Disabled */
.entry-body .aligncenter, #tinymce .aligncenter, #tinymce .aligncenter img, #tinymce dl.wp-caption dt.wp-caption-dt img { margin: 0 auto; display: block; }
/*Comments*/
.comment-content a { word-wrap: break-word; }
.bypostauthor { }


/*
================================================== 
Forms
==================================================
*/
/* shared */
input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none;  border-radius: none; -webkit-border-radius: 0; vertical-align: top; }
input[type="text"], 
input[type="email"], 
input[type="search"],
textarea { padding-left: 10px; border: 1px solid #000; width: 100%; border-radius: 0; }
/* specific */
input[type="text"], 
input[type="email"] { vertical-align: top; height: 20px; line-height: 20px; line-height: 20px; color: #000; }
textarea { padding-top: 5px; }
input[type="submit"] { background: #000; color: #fff; cursor: pointer; border-radius: 2px; border: none;  }
/* pseudos */
::-webkit-input-placeholder { color: #000; }
:focus::-webkit-input-placeholder { color: #aaa; }

/*
================================================== 
Graphics
==================================================
*/
.social a { display: inline-block; width: 20px; height: 20px; }
.social-twitter a { width: 23px; } /* 115:100 ratio */
.social-youtube a { width: 48px; } /* 240:100 ratio */
.social-googleplus a { width: 31px; } /* 155:100 ratio */
.social-medium a { width: 25px; }  /* 126:100 ratio */
.social a svg { fill: #000; }
.social a:hover svg { fill: #AF604F; }


/*
================================================== 
Header
==================================================
*/
#header { /* background: rgba(0,0,0,1); */ min-height: 110px; position: relative; }
#header .col-6 { position: relative; }
#header-title { padding-top: 30px; }
	@media only screen and (min-width: 1020px) { #header-title { position: absolute; top: 0px; left: 15px; } }
#header-title svg { width: 200px; height: 50px; fill: white; } /* Both width and height have to be explicitly defined, because all versions of IE are retarded */
#header-title a:hover svg { fill: #fff; }
#header-menu { overflow: hidden; max-height: 0; transition: all .5s; padding-top: 10px; } /* Hide for mobile init */
	#header-menu { display: none; } /* Assists with preventing browser squeezing to trigger showing the menu */
	.screen-mobile #header-menu { display: block; } /* Assists with preventing browser squeezing to trigger showing the menu */
	.screen-tablet #header-menu { display: block; } /* Assists with preventing browser squeezing to trigger showing the menu */
	.screen-desktop #header-menu { max-height: 600px; padding: 0; }  /* Show for desktop. Must use class instead of @media because of JavaScript calls to switch. */
#header-menu a { font-size: 28px; line-height: 40px; font-weight:700; text-decoration: none; }
#header-menu a:hover { color: yellow; }
#header-menu.header-menu-show { max-height: 600px; } /* Must use max-height for CSS transitions to work. */
#header-menu .children { display: none; } /* Hide child pages from menu */
#header-toggle { width: 30px; height: 30px; cursor: pointer; position: absolute; top: 40px; right: 15px; }
#header-toggle svg { fill: #000; }
/* #header-toggle:hover svg { fill: yellow; } */
@media only screen and (min-width: 1020px) {
	#header-toggle { display: none; /* Hide for desktop init */ }
	#header-menu { display: block; /* Show for desktop init */  }
	#header-menu .menu:before, #nav-main .menu:after { content: " "; display: table; }
	#header-menu .menu:after { clear:both; }
	#header-menu li { float: left; margin: 0 20px 0 0; }
	#header-menu a { font-size: 18px; line-height: 40px; }
}
@media only screen and (min-width: 1020px) {
	.menu-primary-container { position: absolute; top: 40px; right: 0px; }
	#header-searchform { position: absolute; top: 5px; right: 15px; }
}
.searchform-tiny input[type="search"] { background: 0; width: 52px; border: 0; border-radius: 0; border-bottom: 1px solid #fff; opacity: 0.5; transition: all .7s; color: #3c3c58; }
.searchform-tiny input[type='search']::-webkit-input-placeholder { font-family: arial; color: #000; }
.searchform-tiny:hover input[type="search"],
.searchform-tiny input[type="search"]:focus { width: 150px; opacity: 1; border-bottom: 1px solid #3c3c58; }
/* Sticky Header: Apply to the #layout container */
.layout-stickyheader #header { position: fixed; background: rgba(0,0,0,.5); width: 100%; z-index: 1001; } 
.layout-stickyheader #bodycontent { padding-top: 90px }
	@media only screen and (min-width: 1020px) { .layout-stickyheader #bodycontent { padding-top: 160px } }

/*
================================================== 
Body Content
==================================================
*/
#bodycontent { min-height: 700px; }

/*
================================================== 
Video Containers
==================================================
*/
/* For background videos */
.loop-fit { width: 100%; height: 300px; overflow: hidden; margin-bottom: 40px; }
.loop-fit video { width: 100%; height: auto; object-fit: contain; display: none; } /* For looping videos */
/* For embeds */
.embed-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-responsive iframe, .embed-responsive object, .embed-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
================================================== 
Cycle Slideshow
==================================================1
*/
.cycle-slide img { width: 100%; height: auto; }

/*
================================================== 
Flexible Content 
==================================================
*/
/* Single Image Row */
.fc-singleimage { margin-bottom: 50px; }
.fc-singleimage .caption { font-size: 10px; line-height: 16px; margin-top: 10px; }
.hasImagePortrait img.landscape { display: none; }
.hasImagePortrait img.portrait { display: block; }
	@media only screen and (min-width: 400px) {
		.hasImagePortrait img.landscape { display: block; }
		.hasImagePortrait img.portrait { display: none; }
	}
/* WYSIWYG Row */
.fc-wysiwyg { margin-bottom: 60px; }
.fc-wysiwyg [class*='col-'] { margin-bottom: 40px; }
.fc-wysiwyg [class*='col-']:last-child { margin-bottom: 0; }
	@media only screen and (min-width: 1020px) { .fc-wysiwyg [class*='col-'] { margin-bottom: 0; } }
/* Embed Row */
.fc-video-embed { margin-bottom: 60px; }
/* Slideshow Row */
.fc-slideshow { margin-bottom: 60px; }
/* Buffer Row */
.fc-buffer-row { background: rgba(0,0,0,.1); }


/*
================================================== 
Old IE
==================================================
*/
.lt-ie9 #layout { width: 700px; margin: 0 auto; }
.lt-ie9 #header-toggle { display: none; }
.lt-ie9 #header-menu { max-height: 600px; }




/*
================================================== 
Ironbound
==================================================
*/
.ciders .b-ciders a,
.find .b-find a,
.tasting .b-tasting a,
.press .b-press a, 
.faq .b-faq a,
.events .b-events a { color: #AF604F; }
#header .logo { width: 140px; padding-top: 26px}
#header .logo img { width: 100%; }
#header a:hover { color: #AF604F }
#bodycontent { padding: 60px 0 100px; /* background: #fcfcfc; */ }

#bodycontent h1 { font-weight: 700; font-size: 28px }
#bodycontent h2 { font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; border-bottom: 1px solid black; }
#bodycontent h3 { font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
#bodycontent h4 { font-weight: 700; font-size: 18px; }
#bodycontent .section { padding-bottom: 50px;}

.menu { text-transform: uppercase;}
#footer { padding-top: 50px; text-align: center; font-size: 16px; font-weight: 700; text-transform: uppercase; }
#footer a { text-decoration: none; }
#footer a:hover { color: #AF604F }
#footer img { width: 100%;  }
#footer .col-6 { margin-bottom: 0; }
#footer .logo { width: 180px; margin: 0 auto 30px;}
#footer .social { margin-top: 10px;}
#footer .social a { width: 30px; }
#footer .fist { width: 100px;margin: 30px auto 0; }


.presslinks li { margin-bottom: 20px; }
.presslinks a { text-decoration: none; }
.presslinks a:hover { color: #AF604F }
.presslinks span { font-weight: 300; font-style: italic; text-transform: uppercase; font-size: 14px; }