/* Responsive overrides for the legacy fixed-width (960px) layout. Loaded after style.css and grid.css. */

.mobile-only,
.nav-toggle,
.hero-break { display: none; }

@media screen and (max-width: 1000px) {
	html, body { height: auto; }
	body { min-width: 0; overflow-x: hidden; }

	img { max-width: 100%; }
	#content img { height: auto; }
	#content #tabs_content img { max-width: none; }

	/* Flags bar scrolls sideways instead of wrapping */
	.flag_content { height: auto; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
	.flag_content_txt { margin-bottom: 4px; }
	.flag_content img { max-width: none; }

	/* Grid */
	.container_12 { width: auto; max-width: 960px; padding: 0 15px; }
	.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4,
	.container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8,
	.container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
		float: none; display: block; width: auto; margin-left: 0; margin-right: 0;
	}
	#page1 .col-1, #page1 .col-2, #page2 .col-1, #page2 .col-2,
	#page3 .col-1, #page3 .col-2, #page3 .col-3,
	#page4 .col-1, #page4 .col-2, #page4 .col-3 {
		float: none; width: auto; margin-right: 0;
	}
	.border, .pic { width: 100%; }
	.padding-bottom, .padding-bottom1, .padding-bottom2 { padding-bottom: 30px; }

	/* Headings were Cufon canvases; native fonts are used on small screens */
	h2, .title, .title2, .title5, .data, .data1, .link5, .absolute, .absolute1, .absolute2, .absolute3 {
		font-family: Georgia, "Times New Roman", serif;
	}
	h2 { font-size: 22px; }
	.title { font-size: 28px; }

	/* Header */
	.bg1 { height: auto; padding-bottom: 30px; }
	.bg2 { height: auto; }
	.row1 { height: auto; }
	.pic { top: auto; display: none; }
	h1 { float: none; display: block; margin-top: 10px; }
	h1 a { width: 100%; max-width: 300px; height: 71px; background-size: contain; }
	.container_12 .grid_6 { padding: 0; }
	.img-list { padding: 0; float: none; margin: 0; position: absolute; top: 18px; right: 15px; }
	.img-list li { margin-left: 0; }
	.translate-wrapper #google_translate_element { position: static; padding: 6px 0; }
	.translate-wrapper { text-align: left; }

	/* Navigation */
	.nav-toggle {
		display: block; background: #303030; color: #fff; border: 0; border-radius: 3px;
		padding: 10px 14px; font-size: 15px; text-transform: uppercase; cursor: pointer; margin: 8px 0;
	}
	nav .sf-menu { display: none; float: none; margin: 0; padding: 0; background: #303030; border-radius: 3px; }
	nav.open .sf-menu { display: block; }
	nav .sf-menu li { float: none; display: block; padding: 0; font-size: 16px; line-height: 1.4; border-bottom: 1px solid #4a4a4a; }
	nav .sf-menu a { color: #fff; padding: 12px 15px; }
	nav .sf-menu a:hover, nav .sf-menu a.active { color: #7db1b7; }
	nav .sf-menu ul {
		position: static !important; display: block !important; visibility: visible !important;
		width: auto !important; top: auto !important; left: auto !important; padding: 0;
	}
	nav .sf-menu li li { width: auto; background: rgba(0, 0, 0, 0.25); font-size: 14px; line-height: 1.4; border-bottom: 1px solid #3a3a3a; }
	nav .sf-menu li li a { display: block; width: auto; padding: 10px 15px 10px 30px; color: #ddd; }
	nav .sf-menu li li li a { padding-left: 45px; }

	/* Home hero */
	.row2 { z-index: auto; }
	#page1 .col-1 { display: flex; flex-wrap: wrap; align-items: baseline; padding-top: 10px; }
	.absolute, .absolute1, .absolute2, .absolute3 { position: static; line-height: 1.15; margin-right: 10px; }
	.absolute { font-size: 7vw; }
	.absolute1 { font-size: 9vw; }
	.absolute2 { font-size: 7vw; }
	.absolute3 { font-size: 11vw; }
	.hero-break { display: block; flex-basis: 100%; height: 0; }
	.sub-title { padding: 20px 0 1rem; flex-basis: 100%; }
	.block { padding: 16px 0 0 0; flex-basis: 100%; }
	#page1 .col-2 { padding-top: 20px; }
	.home_phone { width: 260px; max-width: 100%; margin: 0 auto; }
	.home_phone img { max-width: none; }

	/* Home content columns */
	.mobile-only { display: block; }
	.desktop-titles { display: none; }
	#content .grid_4 { margin-bottom: 20px; }

	/* Tables (customers, about) stack */
	#content table, #content table tr, #content table td { display: block; width: 100% !important; }
	#content table td { padding: 5px 0; }

	/* Footer */
	footer { height: auto; padding-bottom: 20px; }
	.menu li { margin-right: 15px; margin-bottom: 6px; }

	/* Contact form */
	#contact-form input, #contact-form textarea { width: 100%; box-sizing: border-box; padding-right: 9px; }
	#contact-form .rowElem label { position: static; }

	/* Devices demo: tab buttons across the top, device mockups scaled to fit (zoom is set in the view) */
	#tabs_head, #tabs_content { float: none; }
	#tabs_head { width: 100%; margin: 10px 0; text-align: center; }
	#tabs_head a {
		display: inline-block; width: auto !important; height: auto; padding: 8px 10px; margin: 2px;
		font-size: 14px !important; border: 1px solid #000; border-radius: 5px;
	}
	#tabs_head a span { display: inline; font-size: 0.85em; }
	#tabs_content { width: 800px; max-width: none; }
	#tabs { overflow: hidden; }
}

@media screen and (max-width: 480px) {
	h1 a { max-width: 240px; height: 57px; }
	.title { font-size: 24px; }
	.sf-menu li { font-size: 15px; }
}
