/*

CSS File

*/



/* #Reset & Basics
================================================== */
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, 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, 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; }
html {
	scroll-behavior: smooth;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }

* {
	margin:0;
	padding:0;
}
*:focus {
	outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
					 if you want to keep it! */
}

.underline {
	text-decoration: underline;
}

.bold {
	font-weight: bold;
}

.pointer {
	cursor: pointer;
}

/* =Global Elements
-------------------------------------------------------------- */

/* Main global 'theme' and typographic styles */
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:0 auto;
	padding:0;
	line-height:20px;
}

.WindsorD-Reg {
	font-family: WindsorD-Reg;
	font-weight: normal;
	font-style: normal;
}

/* links */
a, a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a img{border:none}



/* heading */
h1, h2 {margin-bottom:10px;}
h3, h4, h5, h6{margin-bottom:10px;}
h1	{font-size:26px;}
h2	{font-size:18px;}
h3	{font-size:16px;}
h4	{font-size:14px;}
h5	{font-size:12px;}
h6	{font-size:10px;}
h1, h2, h3, h4, h5, h6, .pagedesc,
.slider-text,
.button, .button:visited, input[type="submit"], button, .more-link,
.wp-pagenavi, blockquote, .fn, price
{ font-weight:normal; line-height:normal; font-family: 'WindsorD-Reg', serif; }

blockquote {
	font-family: Helvetica, Arial, sans-serif;
}

.promotion h4, #topnav
{font-family: 'WindsorD-Reg', cursive;}

.pagetitle{ margin-bottom:5px; text-transform:uppercase; }
.pagetitle.nodesc{padding:18px 0 0 0;}
.pagedesc{ font-size:14px; margin-bottom:0;  padding:4px 0 0 0; display:block}


/* Text elements */
hr {
	border-width:0;
	height:20px;
	line-height:0;
	margin:0px;
	margin-bottom:40px;
	page-break-after:always;
	text-align:center;
	width:100%;
	clear:both;
}

p {
	margin-bottom:20px;
	font-size:12px;
}

ul {
	list-style: disc;
	margin: 0 0 5px 1.5em;
}
ul li, ol li{ padding-bottom:10px;}
ol {
	list-style: decimal;
	margin: 0 0 5px 2.2em;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0 24px 0;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 18px;
}
strong {
	font-weight: bold;
}

em,
i {
	font-style: italic;
}
big {
	font-size: 131.25%;
}
ins {
	background: #ffc;
	text-decoration: none;
}
blockquote {
    background-image: url("../images/quote.png");
    background-position: 30px 15px;
    background-repeat: no-repeat;
    clear: both;
    font-size: 14px;
    line-height: 25px;
    margin: 0 0 20px 0;
    padding: 20px 10px 20px 70px;
	border:1px solid #e5e5e5;
	border-width:1px 0px 1px 0px;
	color:#332530;
}


blockquote.left, blockquote.right  {
	float:right;
	width:55%;
	font-size:14px;
	line-height:20px;
	background: url(../images/quote2.png) no-repeat;
	background-position: 15px 18px;
	padding: 22px 10px 22px 50px!important;
	margin-top:10px;
	}

blockquote.left{
	float:left;
	margin-left:0px;
	margin-right:20px;}


blockquote p{ margin:0px;}
blockquote div{}
blockquote cite,
blockquote em,
blockquote i {
	font-style: normal;
}

code {
	font-family:Verdana, Arial;
	letter-spacing:1px;
	margin:25px 0 25px 0px;
	display:block;
	font-size:0.9em;
	border-left:solid 4px #ebebeb;
	padding:15px 10px;
}

pre {
	border-left:solid 4px #ebebeb;
	line-height: 18px;
	margin-bottom: 18px;
	padding:20px;
}
abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
sup,
sub {
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}

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

/* CONTAINER
-------------------------------------------------------------- */
#bodychild{
	width:100%;
	margin:0;

}
#outercontainer{
	width:100%;
	margin:0;
	padding:0;
}

#outerheader,
#outermainmenu,
#outerlogo,
#outerslider,
#outeraftercontent,
#outermain,
#outerfootersidebar,
#outerfooter{width:100%; margin:0 auto}

#outermain { background-color: #f5f5f5; }

#outertitle {
    /*padding: 48px 0 24px;*/
	padding: 28px 0 0;
    text-align: center;
}

#bg-image{ overflow:hidden}
#bg-image img{ width:2000px; max-width: none; display:block;}


/* HEADER & MENU
-------------------------------------------------------------- */
#outerlogo{ z-index:3; position:absolute;}
#logo{ position:relative; text-align:center; padding:18px 0 0px; margin-bottom:25px;}
#logo h1{ font-size:25px; text-transform:uppercase; margin-bottom:0px; margin-top:10px; }
#logo .desc{ font-style:italic; font-size:13px; padding-bottom:0; display:block;}
.branon-logo-sm { width: 20% }
.sf-menu li.utility-nav {
	background-image: none !important;
	padding: 0 5px !important; }
.utility-leaf { position: relative; top: 4px; }

/* Menu */
#navigation{position:relative; z-index:900; margin:0 auto; padding:25px 0 25px 0; text-align:center;}

/* Nav Menu */
#topnav{
	margin:0;
	list-style-type:none;
	overflow:visible;
	position:relative;
}

.sf-menu a {
	text-decoration:none;
	display:		block;
	position:		relative;
	padding: 		0;
	word-spacing:2px;
}


.sf-menu > li {
    position: relative;
    z-index: 10;
	padding:0 10px 0 20px
}


/* Drop down menu */
.sf-menu ul a:hover {}
.sf-menu li li {
	text-align:left;
	margin:0;
}
.sf-menu, .sf-menu * {
	margin:	0;
	padding:	 0;
	list-style: none;
	font-size:15px;

}
.sf-menu {
	line-height:100%;
	position:absolute;

}
.sf-menu ul {
	position: absolute;
	top:	 -999em;
	width: 12em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width: 100%;

}
.sf-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	display: inline-block;
	position: relative;
	margin: 0;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: -2.9em;
	top:	 2.6em; /* match top ul list item height */
	z-index:	 99;
	padding: 0 15px;
	line-height: 25px;

}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:	 -999em;

}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			12em; /* match ul width */
	top:			-1px;
	margin-left:	15px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;

}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			12em; /* match ul width */
	top:			-1px;

}
.sf-menu ul li a{
	padding:12px 0px!important;
	font-size:13px!important;
	text-align:center;
}

.sf-menu li ul {
	padding:0px 0px;

}
.sf-menu a.sf-with-ul {
	padding-right: 	0px;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			10px;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-9999em;
	overflow:		hidden;
	display:none;
}

.sf-menu li li{padding:0px 0px; }

/* dropdown mobile */
.tinynav { display: none }

/* SLIDER
-------------------------------------------------------------- */

#slider{position:relative; margin:0 auto; }

.slider-temp { padding-bottom: 20px !important }
/* CONTENT
-------------------------------------------------------------- */
#outermain{padding:40px 0 0 0; }
body.home #outermain{ }

.row .positionright{float:right;}
.row .positionleft{ float:left;}
.padcontent{padding-right:20px;}
.six.columns .padcontent{padding:0px 20px;}
.positionright .padcontent{padding-right:0px; padding-left:20px;}

.indentleft{overflow:hidden;}
.margin_bottomoff{margin-bottom:0 !important;}
.margin_bottom_small{margin-bottom:6px;}
.margin_bottom_middle{margin-bottom:12px;}
.margin_bottom_large{margin-bottom:16px;}
.margin_bottom_extralarge{margin-bottom:25px;}
.padding_top_middle{ padding-top:12px;}
.center{text-align:center;}
.nomargin{margin-right:0}
.displayblock{display:block;}

/* Home Sell */
.sell .columns {
  margin-bottom: 10px !important;
}

/* Whats new */
.whatsnew .columns {
  margin-bottom: 0;
	position: relative;
}

.whatsnew .nav {
	position: absolute;
	right: 0;
	top: 0;
}

.whatsnew .nav a:link {
	font-size: 15px !important;
}

.whatsnew .nav .read-more {
	margin-right: 15px;
}

/* Promotion */
.promotion { text-align:center; }
.promotion h2{ margin-bottom:0px; margin-top:25px;}
.promotion h4{ margin-bottom:5px;}


/* List */
.list{margin:0; padding:0; list-style-type:none; overflow:hidden}
.list li{ background:url(../images/list.png) no-repeat 0 5px; padding:0 0 8px 25px}

.listborder{margin:0 0 15px 0; padding:5px 0 0 0; list-style-type:none;}
.listborder li{border-bottom:solid 1px #e5e5e5 ; padding-bottom:5px; margin-bottom:5px}
/*.listborder li:first-child{ border-top:solid 1px #e5e5e5 ; padding-top:5px;}*/

/* Circle */
.img-circle {
	-webkit-border-radius: 168px;
	-moz-border-radius: 168px;
	border-radius: 168px;
	box-shadow: 0 0 0 15px #fff;
}

/* Images */
a.image{
	display:block;
	position:relative;
	overflow:hidden;
	 text-align:left;
	}
a.image img{ display:block;}
.rollover{
	background:url(../images/link.png);
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center;
	display:block;
    position:absolute;
	z-index:10;
	display:none;
	cursor:pointer;
	width:100%;
	height:100%;

}

.imageholder {
	position: relative;
}

.new {
	background: red;
	color: #FFF;
	font-family: 'WindsorD-Reg', serif;
	padding: 10px;
	position: absolute;
	left: 30px;
	top: 0;
}

/* Separator */
.separator {
	display:block;
	margin:0 0 40px 0;
	height:4px;
	padding:20px 0 0 0;
	text-align:center;
	width:100%;
	clear:both;
	position:relative;
}

.separator div{ margin: 0 auto; z-index:10;}

.spacer{
	display:block;
	height:20px;
	margin-bottom:10px;
	padding:0 0;
	text-align:center;
	width:100%;
	clear:both;
	}


/* form & button */
form{margin:0; padding:0;}

input[type="text"],
textarea, input[type="password"], select{
	font-size:16px;
	padding:8px 5px;
	font-family:Arial;
}

textarea{width:90%;}

textarea:focus{outline:0;}

.button, .button:visited, input[type="submit"], button, .more-link{
    font-size: 14px;
    line-height: 14px;
    margin: 3px;
    padding: 6px 10px;
    text-transform: uppercase;
}
.button:hover, input[type="submit"]:hover, button:hover{
	text-decoration:none;
}
.button.small{font-size:12px;}
.button.large{
	font-size: 18px;
	letter-spacing: 3px;
	padding: 15px 30px;
	font-family: 'Nunito', sans-serif;
}
.more-link{margin:10px 0 0 0; display:inline-block}


#carousel{ position:relative;}
.maple-syrup-jugs-add, .bbq-sauce-add, .buffalo-sauce-add, .bourbon-vinegar-add {
	margin: 15px 3px !important;
	padding: 20px !important;
	font-size: 16px !important;
}

/* BLOG STYLE
-------------------------------------------------------------- */

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
}
.aligncenter,
img.aligncenter {
	margin: 0 auto;
}
.alignnone,
img.alignnone {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:15px;
}
img.alignleft,
img.alignright,
img.aligncenter,
img.alignnone {
	margin-bottom: 12px;
}

.tag-links{padding:10px 0; display:block}


/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/*** SIDEBAR ***/
.sidebar{ }

.sidebar .widget-title{
	font-size:16px;
	padding:8px 10px 10px 16px;
	margin-bottom:20px;
	text-transform:none;
}

.sidebar ul{
	list-style-type:none;
	list-style-position:outside;
	margin:0;
	padding:0;
}

.sidebar ul li{
	list-style-type:none;
	margin:0;
	padding:0;

}
.sidebar .widget-container{margin-bottom:40px; padding:0 0 0 0;}

.sidebar li li{
	list-style-type:none;
	margin:0 0 0 0;
	padding:0 0 6px 0;
}
.sidebar li li a{}
.sidebar li li a:hover, .sidebar li li a.active{text-decoration:none;}

.sidebar ul.sub-menu, .sidebar ul.children, .sidebar ul ul ul{margin:0 0 0 10px; }
.sidebar ul.sub-menu li, .sidebar ul.children li, .sidebar ul ul ul li{margin-bottom:0; padding-bottom:0;}


/* Gallery sidebar */
.widget-gallery li{ width:41%; float:left; margin-bottom:10px!important; padding-bottom:0px!important;}
.widget-gallery li:nth-child(2n+1){ margin-right:10px;}
.widget-gallery li{ border:7px solid #fff;}
.widget-gallery li img{ display:block;}

/* search widget */
#searchform{position:relative; width:100%; float:left;}
.widget-container #searchform #s{width:80%; background:transparent; padding:12px 4px; border:0}
.searchbutton{position:absolute; top:11px; right:0px; cursor:pointer}

/* Social Icon */
.sn{list-style-type:none; margin:0 0 0 0; padding:0;}
.sn li{list-style-type:none; margin:0; padding:0 15px 0 0 !important; display:inline; background:transparent; border:0px!important;}
.sn span{height:16px; width:16px; display:inline-block}
.icon-img{background-position:0 0;}
.icon-img:hover{opacity:.8; background-position:0 -16px!important;}


/* FOOTER SIDEBAR */
#outerfootersidebar{padding:40px 0 0 0;}
#footersidebar ul{list-style-type:none; margin:0; padding:0;}
#footersidebar li.widget-container{list-style-type:none; margin:0 0px 30px 3px;}
#footersidebar #footcol1 li.widget-container{ margin-left:0px;}
#footersidebar .widget-title{
	font-size:18px;
	margin:0 0 25px 0;
	padding-bottom:15px;
}
#footersidebar li li{ margin:0 0 3px 0; padding:0 0 3px 0}


/* recent post footer sidebar */
#footersidebar .ts-recent-post-widget li{clear:both; margin-bottom:20px; padding:0}
#footersidebar .ts-recent-post-widget li:last-child{ margin-bottom:0px;}
#footersidebar .ts-recent-post-widget li img{margin:0 15px 0 0; float:left;}
#footersidebar .ts-recent-post-widget li p{ margin-bottom:5px;}
#footersidebar .ts-recent-post-widget li .smalldate{font-size:11px; display:block; font-style:italic; overflow:hidden; padding:0 0 0 0}

#footersidebar .testimonials li{ margin-bottom:20px;}
#footersidebar .testimonials p{ margin-bottom:10px;}


/*** COPYRIGHT ***/
#outercopyright{padding:45px 0 20px;}
#copyright {
	margin-top: 50px;
}

#outercopyright, #footersection p {
	color: #FFF;
}

#toTop {
    background: url("../images/top.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    font-size: 12px;
    height: 13px;
    position: absolute;
    right: 10px;
    top: 5px;
    width: 9px;
}

/*** Custome overrides ***/
.content h2 {
	margin-bottom: 10px;
	display: block;
}

/* Shipping page */

.shipping h2 {
	margin-bottom: 10px;
}

.guidelines {
	border: 1px solid #CCC;
	float: left;
	margin: 0 20px 0 0;
	min-height: 278px;
	padding: 10px;
	width: 45%;
}

.guidelines table {
	width: 100%;
}

.guidelines th {
	background: #000;
	border: 1px solid #000;
}

.guidelines th h4 {
	color: #FFF;
	margin: 0;
	padding: 5px 0;
}

.guidelines ul {
	margin: 10px 0 0 30px;
}

.guidelines td h4 {
	margin: 0;
	padding: 0;
	text-align: center;
	text-decoration: underline;
}

.stocklists {
	margin-bottom: 20px;
}

.stocklists h4 {
	font-size: 20px !important;
}

.stocklists li {
	font-size: 17px !important;
}

/*** Product sell page ***/
.single-add {
	display: table;
	width: 100%;
}

.single-add li {
	display: table-cell;
	padding: 10px 0 !important;
}

.single-add .price {
	float: left;
	line-height: 25px;
	margin: 0 !important;
}

.single-add .submit {
	float: right;
}

.single-add .maple-syrup-jugs-add, .single-add .bbq-sauce-add, .single-add .buffalo-sauce-add, .single-add .bourbon-vinegar-add {
	margin: 0 !important;
}

.listborder .certs {
	padding-top: 10px;
}

.certs {
	border-bottom: 0 !important;
}

.certs > ul {
	list-style-type: none;
}

.certs > ul > li {
	border-bottom: 0 !important;
	border-top: 0 !important;
	float: left;
	margin: 0 15px 10px 0;
	padding: 0 !important;
	text-align: center;
}

.certs .wedding-favors {
	margin-left: 20px;
}

.certs .wedding-favors li {
	float: none;
}

.certs-header {
	width: 100%;
	text-align: center;
}

.kosher-symbol, .new-products {
	margin-left: 10px;
}

.social {
		list-style-type: none;
		margin: 10px 0 0 0;
		padding: 0;
}

.social li {
	display: inline-block;
	margin: 0 30px 0 0;
	padding: 0;
}

.facebook {
	width: 15px;
}

.instagram {
	width: 32px;
}

#footersection .certs {
	margin-top: 15px;
}

#footersection .certs > ul {
	margin: 0;
}
.order-quantity {
	margin: 10px 0 5px 0 !important;
}
/** NEWS ***/
.news-article-container {
	max-width: 280px;
	padding: 10px;
	text-align: left;
}
.news-article {
	text-align: center;
}
.news-article ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.news-article ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: top;
}
.news-article .frame {
	width: 280px;
}
.news-article-container p {
	margin: 0;
	padding: 0;
}
.news-article-container .smalldate,
.news-article-container .article-title {
	padding: 10px;
}
.news-article-container .article-title,
.news-article-container .article-publisher {
	margin: 0;
	padding: 0 0 0 10px;
}
.news-article-container .article-synopsis {
	padding: 10px 0 0 10px;
}
.news-article-container .article-read {
	padding: 10px;
}
/*** HELPERS ***/
.textcenter {
	text-align: center;
}

.inline {
	display: inline;
}

.maple-syrup-jugs-add, .bbq-sauce-add, .buffalo-sauce-add, .bourbon-vinegar-add {
	cursor: pointer;
}


/* 2018 giveaway styles **/
.giveaway {
	padding: 0 20px !important;
}

.giveaway-rules h1 {
	text-align: center;
}

.giveaway-rules .intro {
	font-size: 16px;
	margin-top: 16px;
	line-height: 22px;
}

.giveaway-rules .rules {
	margin-top: 300px;
	font-size: 10px;
	line-height: 10px;
	color: #CCC;
}

/* New Items */
.new-item-container {
	position: relative;
}
.new-items {
	background-color: red;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	padding: 20px 10px;
	position: absolute;
	text-align: center;
	width: 100px;
	z-index: 98;
}
.new-items a:link, .new-items a:visited,  .new-items a:focus {
	color: #FFF !important;
	border-bottom: 1px solid #FFF;
	cursor: pointer;
}
.new-items a:hover {
	color: #FFF;
}

/*Superbowl special */
.specials {
	background-color: #FFF;
	color: #000;
}

.specials a:link, .specials a:visited,  .specials a:focus {
	color: #000 !important;
	border-bottom: 1px solid #FFF;
	cursor: pointer;
}
.specials a:hover {
	color: #000;
}

.football {
	margin: 0 auto;
	width: 55px;
}

.superbowl-special {
	display: table;
}

.superbowl-offer, .superbowl-football {
	display: table-cell;
	vertical-align: top;
}

.superbowl-offer {
	font-weight: 600;
	padding-left: 10px;
}

.superbowl-offer p {
	margin-bottom: 30px;
}

.superbowl-football {
	width: 55px;
}

.recipe-title {
	font-size: 20px;
}

/* Reviews page */
ul.reviews {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.reviews li {
	display: inline-block;
	margin: 10px;
	padding: 0;
	vertical-align: top;
}

.leave-review {
	display: block;
	font-size: 15px;
	margin: 0 0 20px 0;
}

@media only screen and (max-width: 968px) {
	.mtg-content {
		position: relative;
		top: -240px;
	}
}

.mtg-content p {
	color: #404040;
}

.maple-to-go {
	position: relative;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/content/product/maple-to-go/hero-group.jpg");

  /* Set a specific height */
  height: 448px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-product {
	position: absolute;
	top: 90px;
	right: 60px;
}

@media only screen and (max-width: 968px) {
	.hero-product {
		position: relative;
		top: -280px;
		right: 0;
	}
}

.hero-product-inner {
	text-align: center;
}

.hero-product-inner .buy-now {
	position: relative;
	top: 15px;
	z-index: 999;
}

.hero-product-inner .button {
	margin: 0 auto;
	width: 20%;
}

@media only screen and (max-width: 968px) {
	.hero-product-inner .button {
		margin: 0 auto;
		width: 35%;
	}
}
.mtg .headline h1 {
	font-size: 62px;
	line-height: 55px;
	width: 80%;
}

@media only screen and (max-width: 1350px) {
	.mtg .headline h1 {
		font-size: 48px;
		line-height: 47px;
		width: 50%;
	}
}

@media only screen and (max-width: 1105px) {
	.mtg .headline h1 {
		font-size: 48px;
		line-height: 47px;
		width: 46%;
	}
}

@media only screen and (max-width: 968px) {
	.mtg .headline h1 {
		width: 100%;
	}
}

.mtg .subheadline {
	font-size: 22px;
	color: #404040;
	line-height: 30px;
	margin: 50px 0 0 0;
	width: 700px;
}

@media only screen and (max-width: 968px) {
	.mtg .subheadline {
		margin: 20px 0 0 0;
	}
}

.mtg-grid {
	margin: 80px 0 0 0 !important;
}

.mtg-grid .photo1 img,
.mtg-grid .photo2 img {
	border: 30px solid #242424;
	width: 250px;
}
.mtg-grid .photo1,
.mtg-grid .photo2 {
	text-align: center;
}

.mtg-grid .photo1 img {
	transform: rotate(-15deg);
}
.mtg-grid .photo2 img {
	transform: rotate(12deg);
}

.mtg-grid .photo2 {
	position: absolute;
	top: -250px;
	left: 45px;
}

@media only screen and (max-width: 968px) {
	.mtg-grid .photo2 {
		position: relative;
		top: 0;
		left: 0;
	}
}

@media only screen and (max-width: 968px) {
	.mtg-grid {
		margin-top: 30px !important;
	}
}

.mtg-grid .copy1 p,
.mtg-grid .copy2 p {
	font-size: 16px;
	line-height: 24px;
}

@media only screen and (max-width: 968px) {
	.copy1 {
		margin-top: 20px !important;
	}
	.copy2 {
		margin-top: 30px !important;
	}
	.mtg-first {
		margin-top: 30px !important;
	}
	.mtg-second {
		margin-top: 0 !important;
	}
}

@media only screen and (max-width: 768px) {
	.copy2 {
		margin-top: 0 !important;
	}
}

.mtg-sell {
	margin: 100px 0 0 0;
}

.mtg-sell h2 {
	font-size: 24px;
}

.mtg-sell p {
	font-size: 14px;
}

.mtg-qty {
	display: grid;
	grid-template-columns: min-content min-content;
}

.mtg-qty .order-quantity {
	padding: 0 5px 0 0;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	z-index: 9999;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 16px;
  background-color: #00a950;
  color: white;
}

.modal-header h2 {
	font-size: 37px;
	color: #FFF;
	margin: 0;
	padding: 0;
}

.modal-body {
	padding: 30px;
}

.modal-body h4 {
	font-size: 24px;
}

.modal-body li {
	font-size: 18px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #00a950;
  color: white;
}

.visit-locations {
	margin-top:50px;
	position: relative;
	font-size: 16px;
	z-index: 998;
}

.mtg-home h1 {
	font-size: 25px !important;
}
.mtg-home h2 {
	font-size: 64px !important;
}
p {
	color: #332530;
	font-size: 14px;
	line-height: 26px;
}
.mtg-home .button {
	font-size: 16px;
	font-weight: 600;
}
.mtg-home .ghost {
	padding: 12px 16px;
}

.mtg-photo {
	width: 25% !important;
}

.mtg-intro {
	width: 40% !important;
}

#outermain.mtg-home-main {
	padding: 0;
}

.mtg-home-container {
	position: relative;
	/*top: -90px;*/
}

.mtg-products h3 {
	text-align: left;
	font-size: 30px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
	.mtg-photo, .mtg-intro {
		width: 100% !important;
	}
	.mtg-product {
		display: none;
	}
	.mtg-home h2 {
		font-size: 30px !important;
	}
	#outermain.mtg-home-main {
		margin-top: 50px;
	}
	.mtg-home-container {
		position: relative;
		top: 10px;
	}
}

.banner-ad-sbs {
	background-color: #00a950;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	padding: 20px 0;
	text-transform: uppercase;
	text-align: center;
	color: #FFF;
}

.feature-container {
	display: flex;
	margin: 50px 0;
	max-height: 630px;
}

.spotlight-text {
	background: #FFF;
	color: #444;
	padding: 80px;
	text-align: center;
	width: 49%
}

.spotlight-text h3, .spotlight-text h4 {
	font-size: 2em;
}

.spotlight {
	color: #00a950;
	font-family: 'Fuggles', cursive;
	font-size: 3em;
}

.spotlight-photo {
	width: 49%;
}

.spotlight-photo img {
	height: 100%;
}

.home-h1 {
	text-align: center;
	margin: 20px 0;
}

@media only screen and (max-width: 768px) {
	.feature-container {
		display: block;
		margin: 10px;
		max-height: none;
	}
	.spotlight-photo, .spotlight-text {
		width: auto;
	}

	.spotlight-text {
		padding: 20px;
	}

	.spotlight-photo img {
		height: auto;
	}
}