/* =========== ALL MOBILE LESS THAN 768px ============ */
@media only screen and (max-width: 768px) {
	div#logo {
		float: left;
		width: 250px;
		height: 23px;
		padding-top: 0;
		text-align: center;
		border-top: none;
		background-image: url('../img/logo_treasure_data_mobile-full.png');
		background-position: 0 0;
	}
	div#topbar {
		padding-top: 15px;
		padding-right: 12px;
		padding-bottom: 15px;
		padding-left: 12px;
		width: auto;
	}
	ul#menunav {
	}
	div#unav ul#menunav li i.fa-chevron-right { 
		float: right;
		width: 20px;
		height: 20px;
		cursor: pointer;
		display: inline-block; 
		color: #fff;
		padding: 17px 20px 0 20px; 
		margin: 0;
		line-height: 24px;
		font-size: 18px;
	}
	ul#menunav a {
		display: block;
		font-weight: 700;
		font-size: 16px;
		letter-spacing: 1.4px;
		padding: 17px 10px 10px 10px; 
		margin: 0 10px 0 10px; 
		border-bottom: none;
	}
	div#supernav {
		display: none;
		position: absolute;
	}
	ul#menunav li {
		display: block;
		font-size: 14px;
		padding: 0;
	}
	ul#menunav a#navcontact {
		border-left: 0;
		padding: 20px 10px 5px 10px; 
		margin: 0 10px 0 10px;
	}
	div#navindicator {
		float: right;
		display: inline;
	}
	div.statement {
		display: none;
	}
	div.backto i.fa {
		float: none;
	}
	ul#menunav li div.menu a {
		padding-left: 17px;
	}
	ul#menunav li div.menu a, 
	ul#menunav li div.menu a:link, 
	ul#menunav li div.menu a:visited {
		padding-top: 11px;
		padding-bottom: 12px;
	}
	ul#menunav a:hover, 
	ul#menunav a.unavon, 
	ul#menunav a#navcontact:hover, 
	a#blog, a#japanese, a#login, a#tryit {
		border: 0;
	}
	ul#tools {
		display: none;
		border: none;
	}
	ul#menunav li.unavtools {
		display: block;
	}
	div#lnav, div#lnavbg {
		display: none;
	}
	div#tnavheader {
		display: block;
	}
	div#tnav a {
		line-height: 2.5em;
		display: block;
		padding-left: 15px;
		padding-right: 35px;
	}
	body#home #banner {
		padding: 0;
	}
	body#home div#primarybannermargins {
		padding: 20px;
	}
div#blackbarhome {
	padding: 25px 0 0px 10px;
}
div.blackfirst, div.blacksecond, div.blackthird {
	margin: 0 auto;
	float: none;
}
	/*
	body#home .button-red {
		margin-bottom: 30px; */
	div#bannercontainer div.button-red {
		margin: 0 0 30px 0;
	}
	body#home h1 {
		font-size: 24px;
		margin-bottom: 15px;
	}
	body#home h2 {
		font-size: 18px;
		padding-bottom: 30px;
		padding-top: 0px;
	}
	body#home.jp h2 {
		font-size: 17px;
	}
	/* fingertip banner */
	div#fingertipmargins {
		background-color: #fff;
		height: 495px;
		padding-top: 25px;
		padding-left: 25px;
		padding-right: 25px;
	}
	/* oops
	div#fingertipbanner {
		background-color: #fff;
		width: auto;
		padding: 25px 25px 0 25px;
		height: 500px;
	}
	*/
	div#fingertipbanner p {
		font-size: 16px;
		padding-top: 0px;
		padding-bottom: 5px;
	}
	div#fingertipbanner ul li {
		font-size: 15px;
	}
	body#home h1.red {
		font-size: 22px;
		padding-bottom: 5px;
	}
	body#home h2.black {
		font-size: 16px;
		width: auto;
		padding-bottom: 30px;
	}
	div#homecontent {
		padding-top: 30px;
	}
	div#columnleftwrapper, div#columncenterwrapper, div#columnrightwrapper {
		border: 0;
		margin: 15px;
		padding: 0;
		width: 100%;
		float: none;
		border-bottom: 1px white solid;
	}
	body#home div.grayarea {
		padding-bottom: 0;
	}
	div#footer {
		padding-left: 15px;
	}
	div#social {
		clear: both;
		float: none;
		text-align: center;
		margin: 15px 0 0 0;
	}
	div#bannerinternal h2 {
		padding: 17px;
	}
	div#rightcol {
		float: none;
		margin: 0 15px;
		width: auto;
	}
	div#columnleftwrapperinternal,
	div#columncenterwrapperinternal,
	div#columnrightwrapperinternal {
		float: none;
		width: 100%;
		border-left: 0;
		border-right: 0;
		margin: 0 auto;
		padding: 15px;
	}
	div#columnleftwrapperinternal,
	div#columncenterwrapperinternal {
		border-bottom: 1px white solid;
	}

	/* do something about the next and previous buttons */
	#previous-slide {
		left: -35px;
	}
	#next-slide {
		left: 1030px;
	}


	/* --- reset these widths for individual screen sizes below --- */
	div#unav {
		text-align: left;
		padding-bottom: 20px;
		padding-top: 10px;
		width: auto;
	}
	div.backto {
		cursor: pointer;
		/*
		width: 465px;
		*/
		padding: 12px 0 14px 15px;
		display: block;
		text-transform: uppercase;
		background-color: #313131;
		color: #fff;
		margin-bottom: 15px;
	}
	div#main {
		margin: 0;
		width: auto;
		/* 
		width: 480px;
		*/
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
		overflow: hidden;
	}
	div.menu div.lnav {
		width: 100%;
		/* 
		width: 480px;
		*/
	}
	ul#menunav li div.menu {
		display: block;
		width: 100%;
		/* 
		width: 480px;
		*/
		height: auto;
		padding-top: 0px;
		padding-left: 0px;
		position: absolute;
		visibility: visible;
		/*
		left: 480px;
		*/
		top: 0;
		z-index: 100;
		background-color: #f6f7f9;
		border-bottom: 2px #313131 solid;
		opacity: 1;
		filter: alpha(opacity=1);
		padding-bottom: 20px;
	}
	div#tnav {
		margin: 0;
		/*
		width: 415px;
		*/
		width: auto;
		text-align: left;
		background-color: #f6f7f9;
		min-height: 50px;
		padding-bottom: 25px;
		left: 10px; /* move over to make up for left padding */
		position: absolute;
		display: none;
		-webkit-box-shadow: 0px 12px 12px 0px rgba(1, 1, 1, 0.3);
		-moz-box-shadow:    0px 10px 12px 0px rgba(1, 1, 1, 0.3);
		box-shadow:         0px 12px 12px 0px rgba(1, 1, 1, 0.3);
	}
	div#internalcontent,
	div#internalcontentwide {
		float: none;
		margin-left: 15px;
		margin-right: 15px;
		width: auto;
	}
	h1 {
		font-weight: 700;
	}
	div#internalcontent h3,
	div#internalcontent h3 a,
	td, p, li {
		line-height: 1.5em;
	}
	div#internalcontent h1,
	div#bannerinternal h2 {
		font-size: 20px;
		line-height: 1.25em;
	}
	div#internal {
		padding-top: 30px;
	}
	div#bannerinternal {
		height: auto;
		padding-bottom: 10px;
	}
	div#internalcontent div.accordionpanel h4:first-child {
		font-size: 15px;
	}
}
/* ========== TABLET ========== */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	div#main,
	div#unav,
	div.menu div.lnav,
	ul#menunav li div.menu {
		/*
		width: 768px;
		*/
	}
	ul#menunav li div.menu {
		/*
		width: 768px;
		*/
	}
	div.backto {
		/*
		width: 753px;
		*/
	}
	div#tnav {
		/*
		width: 683px;
		*/
	}
/*
	div#message { 
		background-image: url('../img/td_tech_mobile.png');
		width: auto;
		height: 154px;
		background-repeat: no-repeat;
		background-position: center 0px;
	}
*/
	body#home h2 {
		font-size: 22px;
		padding-bottom: 40px;
	}
	/* fingertip banner */
	body#home h1.red {
		font-size: 36px;
		padding-bottom: 15px;
	}
	body#home h2.black {
		color: #000;
		font-size: 20px;
		width: auto;
	}
	div#fingertipmargins {
		opacity: 0.8;
		filter: alpha(opacity=80);
		background-color: #fff;
	}
	div#homecontent ul {
		margin: 0 auto;
	}
	div#homecontent ul li { /* the logos */
		display: inline-block;
		padding: 30px;
	}
	div#homecontent ul li img {
		margin: 0 auto;
	}
	div#column1, div#column2, div#column3 {
		float: left;
		border-left: 0;
		border-right: 0;
		margin: 20px 15px;
		padding: 0;
	}
	div#column1 {
		width: 135px;
	}
	div#column2, div#column3 {
		width: 190px;
	}
	div#column2 {
		height: 12em;
		border-right: 1px #454d50 solid;
		border-left: 1px #454d50 solid;
		padding-left: 20px;
	}
}
/* ========== PHONE ============ */
@media only screen and (max-width: 480px) {
/* landscape or portrait ensures no laptops/desktops
@media only screen and (orientation: portrait, orientation: landscape) { 
@media only handheld { 
*/
	div#message { 
		background-image: none;
		display: none;
	}
	div#column1, div#column2, div#column3 {
		float: none;
		border-left: 0;
		border-right: 0;
		margin: 20px 15px;
		padding: 0;
		width: auto;
		border-bottom: 1px solid #454d50;
	}
	div#main {
		/* 
		width: 480px;
		*/
	}
	div.menu div.lnav {
		/* 
		width: 480px;
		*/
	}
	ul#menunav li div.menu {
		/* 
		width: 480px;
		left: 480px;
		*/
	}
	/*
	ul#tools li a, a#blog, a#japanese, a#login, a#tryit {
		display: block;
		border: none;
		padding: 10px 10px 5px 10px; 
		margin: 0 10px 0 10px;
	}
	*/
	p#privacy-top {
		display: none;
	}
	p#privacy-bottom {
		display: block;
	}
	div#homecontent ul { /* the logos */
		margin: 0 auto;
	}
	div#homecontent ul li { /* the logos */
		display: inline-block;
		padding: 30px;
	}

	div#slide6-left,
	div#slide6-right {
		float: none;
		width: 100%;
	}
	div#slide6-right {
		padding-top: 40px;
	}
	div#producttourcontainer h1,
	div#producttourcontainer h2 {
		font-size: 20px;
	}
	div#producttourcontainer h3 {
		padding-top: 15px;
		font-size: 14px;
	}
	div.slidecontainer {
		margin: 0 auto;
		width: 90%;
	}
	li#slide6 div.slidecontainer {
		width: 90%;
	}
	li#slide1 {
		background-image: url('../img/td_tour_1_mobile.png');
	}
	li#slide1.japanesetour {
		background-image: url('../img/td_tour_1_jp_mobile.png');
	}
	li#slide2 {
		background-image: url('../img/td_tour_2_mobile.png');
	}
	li#slide3 {
		background-image: url('../img/td_tour_3_mobile.png');
	}
	li#slide4 {
		background-image: url('../img/td_tour_4_mobile.png');
	}
	li#slide5 {
		background-image: url('../img/td_tour_5_mobile.png');
	}
	li#slide6 {
		background-image: url('../img/td_tour_6_mobile.png');
	}
	li#slide6 p {
		padding-bottom: 30px;
	}
	div#slide6-left,
	div#slide6-right {
		width: 100%;
	}
	li#slide1, li#slide2, li#slide3, li#slide4, li#slide5, li#slide6 {
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		padding: 315px 15px 15px 15px;
		height: auto;
	}

}


