/* This file contains base/default styles for the online checkout; it contains mostly utility classes. Styles for specific pages are usually put in checkout.css */

/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
a:hover{text-decoration: underline}
h1{font-size:2.2em}
h2{font-size:1.8em}
h3{font-size:1.4em}
h4{font-size:1.2em}
h5{font-size:1.1em}
h6{font-size:0.9em}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:.5em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1.1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:75%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:0}
dd{margin:0 0 0 1em}
menu,ol,ul{padding:0 0 0 1em}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

/* target / context = result */
body {
	margin:0;
	font-size:87.5%; /* 14px / 16px = 87.5% */
	line-height: 1.4;
	font-family: Arial, sans-serif;
	color: #333;
}

/** GRID **/
.container,
.fixed-container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.fixed-container .column,
.container .columns,
.fixed-container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; min-height:1px; }
/* min-height prevents collapsing empty div */
.row{ margin-bottom: 1em; }

/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px;  }
.container .one.medium.column,
.container .one.medium.columns { width: 60px;  }
.container .one.large.column,
.container .one.large.columns { width: 80px;  }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }

.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }

/* Offsets */
.container .offset-by-one { padding-left: 60px;  }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }

/*
A fixed container for views that we don't want to be responsive.
The .fixed-container class is not used in any media queries, so no resizing takes place.
*/
/* Base Grid */
.fixed-container .one.column,
.fixed-container .one.columns { width: 40px;  }
.container .one.medium.column,
.container .one.medium.columns { width: 60px;  }
.container .one.large.column,
.container .one.large.columns { width: 80px;  }
.fixed-container .two.columns { width: 100px; }
.fixed-container .three.columns { width: 160px; }
.fixed-container .four.columns { width: 220px; }
.fixed-container .five.columns { width: 280px; }
.fixed-container .six.columns { width: 340px; }
.fixed-container .seven.columns { width: 400px; }
.fixed-container .eight.columns { width: 460px; }
.fixed-container .nine.columns { width: 520px; }
.fixed-container .ten.columns { width: 580px; }
.fixed-container .eleven.columns { width: 640px; }
.fixed-container .twelve.columns { width: 700px; }
.fixed-container .thirteen.columns { width: 760px; }
.fixed-container .fourteen.columns { width: 820px; }
.fixed-container .fifteen.columns { width: 880px; }
.fixed-container .sixteen.columns { width: 940px; }

.fixed-container .one-third.column { width: 300px; }
.fixed-container .two-thirds.column { width: 620px; }

/* Offsets */
.fixed-container .offset-by-one { padding-left: 60px;  }
.fixed-container .offset-by-two { padding-left: 120px; }
.fixed-container .offset-by-three { padding-left: 180px; }
.fixed-container .offset-by-four { padding-left: 240px; }
.fixed-container .offset-by-five { padding-left: 300px; }
.fixed-container .offset-by-six { padding-left: 360px; }
.fixed-container .offset-by-seven { padding-left: 420px; }
.fixed-container .offset-by-eight { padding-left: 480px; }
.fixed-container .offset-by-nine { padding-left: 540px; }
.fixed-container .offset-by-ten { padding-left: 600px; }
.fixed-container .offset-by-eleven { padding-left: 660px; }
.fixed-container .offset-by-twelve { padding-left: 720px; }
.fixed-container .offset-by-thirteen { padding-left: 780px; }
.fixed-container .offset-by-fourteen { padding-left: 840px; }
.fixed-container .offset-by-fifteen { padding-left: 900px; }

/** LINKS **/
/*a { color:#00549f; outline:0; }
a:visited { color:#002c52; }
a:hover,
a:focus { color:#1888eb; }
a:focus { outline:1px solid #1888eb; }*/
a img { vertical-align:middle; }

/** CLEARFIXES **/
/* Self clearing */
.container:after,
.fixed-container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.ui-tabs-panel:before,
.ui-tabs-panel:after,
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.ui-tabs-panel:after,
.row:after,
.clearfix:after {
  clear: both;
}

.ui-tabs-panel,
.row,
.clearfix {
  zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

hr {
	margin:10px 0;
	clear:both;
	height: 1px;
	border:0;
	border-bottom: 1px solid #d0d0d0;
}

/* width should never be put on .callout; put it inside a grid container */
.callout,
.bordered {
	border:1px solid #d0d0d0;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

.callout {
	padding: 0.5em 1em;
	overflow: auto;
}
/* override the callout class style overflow=auto to oberflow=visible */
.time-remaining .callout {overflow: visible;}

.callout.info,
.callout.alert,
.callout.error {
	border:2px solid #333;
    color:#000;
}

/**
 * The callout background colors work with links in the messaging. They are WCAG compatible to ensure readability.
 */
.callout.info {
	border-color:#00549f;
	background-color:#f1f8ff;
}

.callout.alert {
	border-color:#ff6600;
	background-color:#fde9db;
}

.callout.error {
	border-color:#cd0a0a;
	background-color:#FFE8E8;
}

.callout.emphasize {
	font-size:1.3em;
	text-align:center;
	font-weight:bold;
	letter-spacing:0.1em;
}

.callout > p:first-child {
	margin-top:0;
}

.callout > p:last-child {
	margin-bottom:0;
}

label {
    cursor:pointer;
}

form .row .label {
	padding-top:5px;
}

form .row .label,
form .row label {
	font-weight:bold;
	text-align:right;
}

form .row label img,
form .row label select,
form .row label input,
form .row label textarea {
	font-weight:normal; /* when label wraps other form control, override previous style */
}

form .row select {
	margin-top:5px;
}

form .row .helper {
 	margin:5px 0 0;
	font-size:0.8em;
}

/*	multiple lines mess up the margin/padding for vertical alignment */
form .row .helper.multi-line,
form .row .label.multi-line {
	margin-top:0;
	padding-top:0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
	background-color:#fff;
	padding:5px;
	border:1px solid #777;
	width:80%;
}

select {
    border:1px solid #777;
}

form .row .checkbox,
form .row .radio {
	padding:10px 0;
}

form .row .actions {
	text-align:right;
}

form .row .required {
	color:#CD0A0A;
	padding:0 3px;
}

input[type="submit"],input[type="button"], button:not(.ignore-legacy-css),
input[type="submit"][disabled]:hover, button[disabled]:not(.ignore-legacy-css):hover,
a.button {
	font-family: "Helvetica Neue Bold", "Helvetica", sans-serif;
	font-weight:bold;
	font-size:1.2em;
	padding:0.5em 1.2em;
	line-height:1.2;
	color:#fff;
	border:1px solid #ff9d00;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 1px 1px #e0e0e0;
	box-shadow: 0px 0px 1px 1px #e0e0e0;
	background-color: #ff9d00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9d00), to(#ff6600));
	background-image: -webkit-linear-gradient(top, #ff9d00, #ff6600);
	background-image: -moz-linear-gradient(top, #ff9d00, #ff6600);
	background-image: -o-linear-gradient(top, #ff9d00, #ff6600);
	background-image: linear-gradient(to bottom, #ff9d00, #ff6600);
}

a.button {
    text-decoration:none;
    display:inline-block;
    margin-bottom:10px;
}

/* Tooltip icon that appears directly to the right of labels, instead of inputs */
label .fa.info {
	margin: 0 0 0 4px;
}

/* Tooltip styling (consistent with bootstrap) */
.tooltip {
	position: absolute;
	z-index: 1030;
	display: block;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
	visibility: visible;
}

.tooltip.in {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.tooltip.top {
	padding: 5px 0;
	margin-top: -3px;
}

.tooltip.right {
	padding: 0 5px;
	margin-left: 3px;
}

.tooltip.bottom {
	padding: 5px 0;
	margin-top: 3px;
}

.tooltip.left {
	padding: 0 5px;
	margin-left: -3px;
}

.tooltip-inner {
	max-width: 200px;
	padding: 3px 8px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: #000000;
	border-radius: 4px;
}

.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-top-color: #000000;
	border-width: 5px 5px 0;
}

.tooltip.top-left .tooltip-arrow {
	bottom: 0;
	left: 5px;
	border-top-color: #000000;
	border-width: 5px 5px 0;
}

.tooltip.top-right .tooltip-arrow {
	right: 5px;
	bottom: 0;
	border-top-color: #000000;
	border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: -5px;
	border-right-color: #000000;
	border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-left-color: #000000;
	border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px;
	border-bottom-color: #000000;
	border-width: 0 5px 5px;
}

.tooltip.bottom-left .tooltip-arrow {
	top: 0;
	left: 5px;
	border-bottom-color: #000000;
	border-width: 0 5px 5px;
}

.tooltip.bottom-right .tooltip-arrow {
	top: 0;
	right: 5px;
	border-bottom-color: #000000;
	border-width: 0 5px 5px;
}

.fade {
	opacity: 0;
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
}

.fade.in {
	opacity: 1;
}

/**
 * Firefox does not allow line-height on input fields:
 * http://www.cssnewbie.com/input-button-line-height-bug/
 */
@-moz-document url-prefix() {
    input[type="submit"], button, a.button.submit_btn_style,
    input[type="submit"][disabled]:hover, button[disabled]:hover {
        padding-top:0.2em;
        padding-bottom:0.2em;
    }
}

input[type="submit"]:hover, input[type="button"]:hover, button:not(.ignore-legacy-css):hover,
a.button:hover {
	cursor:pointer;
	background-color: #ff6600;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6600), to(#ff9d00));
	background-image: -webkit-linear-gradient(top, #ff6600, #ff9d00);
	background-image: -moz-linear-gradient(top, #ff6600, #ff9d00);
	background-image: -o-linear-gradient(top, #ff6600, #ff9d00);
	background-image: linear-gradient(to bottom, #ff6600, #ff9d00);
}

input[type="submit"][disabled], button[disabled] {
	cursor:default;
	opacity:0.7;
	filter: Alpha(Opacity=70);
}

input[type="submit"].secondary, input[type="button"].secondary, button.secondary,
a.button.secondary,
.ui-datepicker .ui-widget-content .ui-datepicker-current,
.ui-datepicker .ui-widget-content .ui-datepicker-close,
.ui-dialog .ui-dialog-titlebar-close {
	text-shadow: 0px 1px 0px #002c52;
	border-color:#1888eb;
	background-color:#1888eb;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1888eb), to(#00549f));
	background-image: -webkit-linear-gradient(top, #1888eb, #00549f);
	background-image: -moz-linear-gradient(top, #1888eb, #00549f);
	background-image: -o-linear-gradient(top, #1888eb, #00549f);
	background-image: linear-gradient(to bottom, #1888eb, #00549f);
	color:#fff;
}

input[type="submit"].secondary:hover, input[type="button"].secondary:hover, button.secondary:hover,
a.button.secondary:hover,
.ui-datepicker .ui-widget-content .ui-datepicker-current:hover,
.ui-datepicker .ui-widget-content .ui-datepicker-close:hover,
.ui-dialog .ui-dialog-titlebar-close:hover {
	text-shadow: 0px 1px 0px #002c52;
	border-color:#00549f;
	background-color:#00549f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00549f), to(#1888eb));
	background-image: -webkit-linear-gradient(top, #00549f, #1888eb);
	background-image: -moz-linear-gradient(top, #00549f, #1888eb);
	background-image: -o-linear-gradient(top, #00549f, #1888eb);
	background-image: linear-gradient(to bottom, #00549f, #1888eb);
}

input[type="submit"].generic, button.generic {
	text-shadow: 0px -1px 0px #fff;
	border-color:#cbcbcb;
	background-color:#ebebeb;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cbcbcb));
	background-image: -webkit-linear-gradient(top, #ebebeb, #cbcbcb);
	background-image: -moz-linear-gradient(top, #ebebeb, #cbcbcb);
	background-image: -o-linear-gradient(top, #ebebeb, #cbcbcb);
	background-image: linear-gradient(to bottom, #ebebeb, #cbcbcb);
	color:#000;
}

input[type="submit"].generic:hover, button.generic:hover {
	text-shadow: 0px 1px 0px #fff;
	background-color:#cbcbcb;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#ebebeb));
	background-image: -webkit-linear-gradient(top, #cbcbcb, #ebebeb);
	background-image: -moz-linear-gradient(top, #cbcbcb, #ebebeb);
	background-image: -o-linear-gradient(top, #cbcbcb, #ebebeb);
	background-image: linear-gradient(to bottom, #cbcbcb, #ebebeb);
	color:#000;
}

button img {
	vertical-align:middle;
}


/** FORM ERROR MESSAGING **/
form .error .message {
	margin-left:0;
	color:#CD0A0A;
	font-weight:bold;
}

form .error, .error {
	color:#FF0000;
	font-weight:bold;
	font-size: 13px;
}

.errorBox {
	background-color: #F2DEDE;
	border-color: #EBCCD1;
	color: #A94442;
	border-radius: 4px;
	padding: 15px;
}

.icon {
	display:inline-block;
	width:20px;
	height:20px;
	overflow:hidden;
}

.hidden {
	display:none;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.js .replace-with-js,
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Target classes that start with these names, because suffixes can be dynamically added for online shipping forms and additional payment cards for memberships */
#invoice input[id^='area-code'] {
	width: 40px;
}

#invoice input[id^='phone-number'] {
	width: 80px;
}
/*
	ADA seating form
	online/requestSpecialSeating.jsp
*/
@media screen and (min-width: 768px) {
	/* Widen fields and make them a uniform width */
	#request-special-seating .field input[type=text],
	#request-special-seating .field input[type=tel],
	#request-special-seating #comments,
	#request-special-seating #country {
		width: 300px;
	}

	/* Align submit button with fields */
	#request-special-seating #submitBtn {
		margin-left: 10px;
	}


	.include-companion-seats {
		margin-top: 4px;
		display: inline-block;
	}
}

/* Fix styles between these breakpoints that were thrown off in A/B reskin (overrides.less) */
@media screen and (min-width: 768px) and (max-width: 855px) {
	#request-special-seating .container .label.columns.columns {
		width: 172px;
	}
}

/*
	End ADA seating form≈
	online/requestSpecialSeating.jsp
*/

/* Tablet (Portrait) */
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container { width: 768px; }
	.container .column,
	.container .columns { margin-left: 10px; margin-right: 10px;  }
	.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
	.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
	.alpha.omega { margin-left: 0; margin-right: 0; }

	.container .one.column,
	.container .one.columns { width: 28px; }
	.container .one.medium.column,
	.container .one.medium.columns { width: 36px; }
	.container .one.large.column,
	.container .one.large.columns { width:56px; }
	.container .two.columns { width: 76px; }
	.container .three.columns { width: 124px; }
	.container .four.columns { width: 172px; }
	.container .five.columns { width: 220px; }
	.container .six.columns { width: 268px; }
	.container .seven.columns { width: 316px; }
	.container .eight.columns { width: 364px; }
	.container .nine.columns { width: 412px; }
	.container .ten.columns { width: 460px; }
	.container .eleven.columns { width: 508px; }
	.container .twelve.columns { width: 556px; }
	.container .thirteen.columns { width: 604px; }
	.container .fourteen.columns { width: 652px; }
	.container .fifteen.columns { width: 700px; }
	.container .sixteen.columns { width: 748px; }

	.container .one-third.column { width: 236px; }
	.container .two-thirds.column { width: 492px; }

	/* Offsets */
	.container .offset-by-one { padding-left: 48px; }
	.container .offset-by-two { padding-left: 96px; }
	.container .offset-by-three { padding-left: 144px; }
	.container .offset-by-four { padding-left: 192px; }
	.container .offset-by-five { padding-left: 240px; }
	.container .offset-by-six { padding-left: 288px; }
	.container .offset-by-seven { padding-left: 336px; }
	.container .offset-by-eight { padding-left: 384px; }
	.container .offset-by-nine { padding-left: 432px; }
	.container .offset-by-ten { padding-left: 480px; }
	.container .offset-by-eleven { padding-left: 528px; }
	.container .offset-by-twelve { padding-left: 576px; }
	.container .offset-by-thirteen { padding-left: 624px; }
	.container .offset-by-fourteen { padding-left: 672px; }
	.container .offset-by-fifteen { padding-left: 720px; }
}

/* Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	body { font-size:100%; }
	input[type="submit"], button {
		font-size:1.2em;
	}
	.container { width: 300px; }
	/*.container .columns,
	.container .column { margin: 0; }*/

	.container .one.column,
	.container .one.columns,
	.container .one.medium.column,
	.container .one.medium.columns,
	.container .one.large.column,
	.container .one.large.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column { width: 280px; }

	/* Offsets */
	.container .offset-by-one,
	.container .offset-by-two,
	.container .offset-by-three,
	.container .offset-by-four,
	.container .offset-by-five,
	.container .offset-by-six,
	.container .offset-by-seven,
	.container .offset-by-eight,
	.container .offset-by-nine,
	.container .offset-by-ten,
	.container .offset-by-eleven,
	.container .offset-by-twelve,
	.container .offset-by-thirteen,
	.container .offset-by-fourteen,
	.container .offset-by-fifteen { padding-left: 0; }

	form .row .label,
	form .row label {
		text-align:left;
	}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container { width: 420px; }
	/*.container .columns,
	.container .column { margin: 0; }*/

	.container .one.column,
	.container .one.columns,
	.container .one.medium.column,
	.container .one.medium.columns,
	.container .one.large.column,
	.container .one.large.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column { width: 400px; }
}