/*------------------------------------------------------------------

[RESPONIVE CSS]

iPad:				1024px	(landscape)
iPad:				768px	(portrait)
Nexus 7: 			603px	(portrait); 533px (portrait Firefox)
Galaxy Table 10.1: 	1280px	(landscape)

-------------------------------------------------------------------*/

@media screen and (max-width: 1500px) {
	section#banner canvas{ position: relative; left: -200px }
}


@media screen and (max-width: 1280px) {
	section#banner canvas{ left: -300px }
}

/*--- narrower than desktop ---*/
@media screen and (max-width: 1199px) {
	section#banner img#banner-img{ left: -400px }
	section#banner canvas{ display: none }
	.col-2 article{ margin-right: 15px }
		.col-2 article p img { width: 100%; height: auto }
}

/*--- narrower than iPad landscape ---*/
@media screen and (max-width: 1023px) {
	main.home section article p{ font-size: 1.6em }
	header #orientation #site-tools a{ display: none }
	section#banner{ overflow: hidden }
	/* Welcome article */
	section#welcome article{ width: 55%; margin-right: 3% }
		section#welcome aside a{ width: 47%; max-width: 203px  }
		section#welcome aside{ width: 42%; padding-top: 50px }
		section#welcome aside a.first { margin-right: 15px }

	.col-2 article h2, article#faq-compiled h2.first, .col-2 article a#lnkFAQExpand{ float: none; display: block; margin: .5em 0 1em 0 }
	.col-2 article a#lnkFAQExpand{ margin: .5em 0 1em 0 }
	.col-2 article a#lnkFAQExpand{ display: inline-block }
	main.career article h2{ margin-bottom: 0 }		

	/* 404 error styles */
	section.error article{ margin: 5em 0 8em 0 }
		section.error article  img{ width: 30%; max-width: 200px; height: auto; margin-right: 5% }
			section.error article  p span{ font-size: 3em }
}

@media screen and (min-width: 768px) and (max-width: 1023px){
	section#banner li img{ height: auto; width: 120px }
	section#banner img#banner-img{ left: -600px }
	header #orientation nav a.long{ width: 25% }
	section#banner article div h2{ font-size: 3em }
	main.home section#banner-nav ul a{ width: 110px }
		section#banner-nav ul a img{ width: 100%; height: auto }
	.container { margin: 0 15px }
	main.inside #specialities nav div.listContainer1 ul.col { width: 31%; margin-right: 2% }
	main.inside #specialities nav.list a span img { width: 20px }
	main.inside #specialities nav.list a strong{ padding: 0 }
	main.inside #specialities nav.list ul li a.title img.sep{ display: none }

	section#ethics-areas article div{ min-height: 310px }

	.col-2 .nav-wrap { width: 35% }	
	.col-2 article { width: 60% }

	section#re-search input{ width: 70% }
}

/* iPad portrait and higher */
@media screen and (min-width: 768px){
	#speciality-grid-mob{ display: none }
	main.inside section#banner article .container div{ min-width: 300px; max-width: 390px }
	main.inside section#banner-nav .container ul ul li a{ width: 90%; margin: 0 5% }
}

/* narrower than ipad portrait */
@media screen and (max-width: 767px){
	div#wrapper{ overflow-x:hidden }
	header{ background: transparent }
	header #orientation{ background: #004165 }
	header #orientation { float: left; width: 100%; padding-bottom: 0 }
		header #orientation h1{ background: url(img/logo-mob.png) no-repeat 15px center; margin: 0; height: 53px; width: 195px }
	header #orientation #mob-tools { margin: 0; display: table; height: 53px; width: 100px; float: right }
		header #orientation #mob-tools a.mob-tools{ display: table-cell; vertical-align: middle; text-align: center; border-bottom: none; font-size: 1.75em }
		header #orientation #mob-tools a.mob-tools:before{ position: relative; top: 2px }
		header #orientation #mob-tools a.mob-tools.selected{ background: #34b6cd }
		header #orientation #mob-tools a#openSearch{ border-right: 1px solid #0d5f7f; border-left: 1px solid #0d5f7f } 
			header #orientation #mob-tools a.mob-tools span{ left: -9999px; position: absolute }
		header #orientation #site-tools{ padding: 20px 15px; margin: 0; position: relative; float: none; clear: both; background: #34b6cd; text-align: center; display: none }
		header #orientation #site-tools a#corp-search{ display: inline-block; float: none; margin-top: 1em; border-bottom: 1px solid #67c8da }
		header #site-tools .local-search, section#re-search .local-search, header #site-tools .mob input.search_submit{ right: 10px; left: auto }
			header #site-tools .mob{ padding: 0; width: 100%; background: #fff; border-radius: 3px; position: relative }
				header #site-tools .mob input{ padding: 10px 35px 10px 10px; margin:0; width: 85% }
				header #site-tools .mob br{ display: none }

	/* header styles */
	header #orientation nav{ display: none; margin-bottom: 0 }
		header #orientation nav a{ width: auto; display: block; border-radius: 0; display: block; height: auto; text-align: left; line-height: 45px; background: #34b6cd; 
		 border:none; border-bottom: 1px solid #2492ad; padding: 0 }
		header #orientation nav a br, section#banner article .container div h2 br{ display: none }
		header #orientation nav a:last-child{ border-bottom: none}
		header #orientation nav a.selected{ background: #2492ad }
		header #orientation nav a:before { content: ''; display: inline-block; width: 15px }
		header #orientation nav a:after { content: '\e80b'; font-family: 'fontello'; color: #fff; position: absolute; right: 20px; font-weight: normal; font-size: 1.2em }
		header #orientation nav a:first-child:after { content: '' }
		header #orientation nav a.long { padding: 0; width: auto }		
		header #orientation nav span{ display: none }

	/* banner styles */
	section#banner{ border-bottom: 0 }
	section#banner img#banner-img{ height: 190px; position: relative; left: -300px; width: auto }
	main.home section#banner article{ left: 0 }
	main.home section#banner article .container div { width: 94%; border-radius: 0; padding: 3% }
	main.home section#banner article .container p{ margin-top: .5em }
	main.home section#banner article .container a{ margin-top: 1em }

	main.home section#banner-nav { padding: 0; float: left; width: 100%; position: relative }
		main.home section#banner-nav .mob-nav.prev{ left: 0 }
		main.home section#banner-nav .mob-nav.next{ right: 0 }
		main.home section#banner-nav .mob-nav{ display: inline; position: absolute; color: #a04c9d; text-decoration: none; font-size: 3em; height: 30%; top: 35%; border-bottom: none }
			main.home section#banner-nav .mob-nav i:before{ margin: 0 }
		main.home section#banner-nav .container { width: 84%; margin: 0 7%; float: left; overflow: hidden }
		main.home section#banner article{ position: relative; top: 0 }
		main.home section#banner-nav ul{ margin: 15px 0; display: block; float: left; width: 8000px; position: relative }
			main.home section#banner-nav ul li{ display: block; margin: 0 7px; float: left }
				main.home section#banner-nav ul li a{ font-size: 1.2em; width: 100%; max-width: 150px }
				main.home section#banner-nav ul li a img{ width: 100%; height: auto }
				main.home section#banner-nav ul li a strong{ border-bottom-right-radius: 0; border-bottom-left-radius: 0 }

	/* welcome message */
	section#welcome article{ width: 100% }
		section#welcome aside{ width: 60%; margin: 35px 20%; padding-top: 0 }
			section#welcome aside a:first-child{ margin-right: 0 }
			section#welcome aside a:last-child{ float: right }
			section#welcome aside span{font-size: .95em} 

	section#banner-nav .container { padding: 0 }

	main.inside section#banner article{ top: auto; bottom: 0 }
		main.inside section#banner article .container div{ width: 100% !important; padding: 20px 15px; background: url('img/one-x-one-blue.png'); border-radius: 0 }
		main.ethics section#banner article .container div{ max-width: 100% }
		main.inside section#banner article .container div h2{ color: #fff; font-size: 2.4em }
		main.ethics section#banner article .container div h2{ font-size: 1.8em }

	/* Welcome artilce */
	section#welcome div{ padding: 25px 10px 0 10px; width: auto }
	section#welcome div.content{ padding: 0 }

	/* speciality grid */
	#specialities nav a object { width: 40px; height: 40px }

	main.home #specialities nav#speciality-grid-desk .row, main.home #specialities nav#speciality-grid-desk .col{ display: none }
		main.home #specialities nav#speciality-grid-desk .row:nth-child(2), main.home #specialities nav#speciality-grid-desk .row:nth-child(2) .middle{ display: block }
		main.home #specialities nav#speciality-grid-desk .middle{ width: 100% }
		main.home #specialities nav#speciality-grid-desk .middle a{ font-size: .85em }
			main.home #specialities nav#speciality-grid-desk .middle article{ margin: 35px 15px; float: left; width: auto }

	main.home #specialities nav{ padding: 0 }
		main.home #specialities nav a[class^="sp"] { width: 50% }
		main.home #specialities nav .col{ height: auto }

	main.inside{ margin-bottom: 0; }
	main.inside section#banner img#banner-img{ height: 240px; left: -600px }

	main.inside #specialities nav.thumbs-mob{ display: block; margin-bottom: 2em }
	main.inside #specialities nav.thumbs-desk{ display: none }

	main.inside #specialities nav { margin-top: 0 }
		main.inside #specialities nav.list div.listContainer1 ul.col { width: 100%; margin-right:0; clear: both }
		main.inside #specialities nav.list ul li:nth-child(2n){ margin-left: 0 }
		main.inside #specialities nav div.listContainer1 ul{ padding: 0 }

	/* inside specialities */	
	main.inside section.container, main.inside #specialities{ margin-left: 15px; margin-right: 15px; width: auto }
	main.inside #specialities div.thumbs-list p{ width: 100% }
	main.inside #specialities nav.list ul.col{ margin: 2em 0 0 0}
	main.inside #specialities nav.list a span img{ width: 25px; height: 25px }
	main.inside #specialities nav.thumbs > div{ margin-top: 2em }
	main.inside #specialities nav.thumbs ul.col{ margin: 0; float: left; width: 100% }

	/* expanded specialities thumbs */
	main.inside #specialities nav.thumbs-mob .og-details p span.link{ margin-top: 10px }
	main.inside #specialities nav.thumbs-mob .og-expander-inner{ padding: 0 0 30px 0 }
	main.inside #specialities nav.thumbs-mob .container .og-title .og-close{ margin-top: 5px }
	main.inside #specialities nav.thumbs .og-fullimg{ display: none }
	main.inside #specialities nav.thumbs .og-details-wrapper, main.inside #specialities nav.thumbs .og-title{ width: 90%; margin: 0 5%; float: none }
	main.inside #specialities nav.thumbs .og-expander-inner .container{ margin: 10px auto }
	main.inside #specialities nav.thumbs .container .og-title h3{ clear: none; margin: 0; font-size: 2em; line-height: 2.2em }
	main.inside #specialities nav .og-details p span{ display: block }
	/* expanded multiple specialities thumb */
	main.inside #specialities nav.thumbs .og-expander nav.og-nav ul li.selected-sub{ background: #fff }
	main.inside #specialities nav.thumbs .og-expander nav.og-nav ul li.selected-sub > a{ background: #f4f4f4 }
	main.inside #specialities nav.thumbs .og-expander{ top: 8px; margin-bottom: 2em }
	main.inside #specialities nav.thumbs .og-expander nav.og-nav{ border-right: none; width: 100%; min-height: 50px }
	main.inside #specialities nav.thumbs .subs #sp-desc{ display: none }
	main.inside #specialities nav.thumbs .subs .og-details{ float: none; width: 90%; border-top: 1px solid #d0d0d0 }

	main.inside #specialities nav ul li{ width:49%; margin: 0 0 2% 0 }
	main.inside #specialities nav ul li:nth-child(2n){ margin-left: 2% }
	main.inside #specialities nav ul li a.title{height: 120px }
		main.inside #specialities nav ul li a.title span{top: 15% }
		main.inside #specialities nav ul li a span.num{ top: 8px; font-size: 1em }
		main.inside #specialities nav ul li a.title strong{ font-size: 1.3em }

	.col-2 .nav-wrap{ width: 100%; float: none; margin-bottom: 0 }
	.col-2 .nav-wrap nav h3{ padding: 5px 15px }
	.col-2 .nav-wrap nav ul li{ padding: 15px }
		.col-2 .nav-wrap aside{ display: none }
	.col-2 article{ width: 100%; float: none }
	.col-2 article h2{ font-size: 2em; margin: 1em 0  }
	.col-2 article p img{ width: 100% }
	.col-2 article p, .col-2 article dl dt span, .col-2 article ul li span{ font-size: 1.4em }
	.col-2 article dl dt{ margin-top: 15px }
	.col-2 article dl dd div{ margin-left: 0 }

	article.important h2{ font-size: 2.2em }
	article.important h3{ font-size: 2.0em }
	article.important p{ font-size: 1.4em }
	main.inside .container article.important { margin: 2em 0; width: 100% }

	/* Career template */
	main.career section#banner-nav{ padding: 10px 0; margin: 0 15px; background: transparent }
		main.career section#banner-nav p{ font-size: 1.8em; margin: .3em 0 .7em 0 }
		main.career section#banner-nav ul{ margin: 0 1em 0 0 }
		main.career section#banner-nav ul a img{ display: none }
		main.career section#banner-nav ul li ul{ display: none }
		main.career section#banner-nav ul li.mob > a{ display: block }
		main.career section#banner-nav ul li.mob > a strong{ color: #5f5f5f; background: #f4f4f4; display: block; border: 1px solid #eaeaea; border-radius: 3px; line-height: 3.3em }
		main.career section#banner-nav ul li.mob > a strong:after{ content: '\e80d'; font-family: 'fontello'; color: #34b6cd; font-size: 2em; right: 25px; position: absolute }
		
		main.career section#banner-nav ul li{ width: 100%; display: block; text-align: left }
			main.career section#banner-nav ul li a{ width: 100%; border-bottom: none }
				main.career section#banner-nav ul li a strong{ text-align: left; padding: 0 15px }
				main.career section#banner-nav ul li.mob ul li.selected{ display: none }
				main.career section#banner-nav ul li.mob ul li a strong{ border-radius: 0; background: #34b6cd }

	/* Ethics template */
	section#ethics-areas article{ width: 100%; margin-bottom: 2em }
		section#ethics-areas article div{ min-height: 100px }
		section#ethics-areas article div p.link{ position: relative }
	section#ethics-areas article#personal{ margin: 0 0 2em 0 }

	/* search results styles */
	section#re-search label{ display: none }
	section#re-search input{ float: none; width: 85%; margin: 0 15px }
	section#re-search .local-search{ left: 88% }

	footer .container{ padding: 15px }
	footer .container div{ float: none }
}

@media screen and (max-width: 600px){
}

@media screen and (min-width: 600px){
	section#banner img#banner-img{ width: auto; position: relative }
}

/* small tablets and higher */
@media screen and (min-width: 533px) {
	footer nav, footer p{ height: 20px; position: absolute; top: 45%; margin: 0; padding: 0 }
	footer p{ right: 0; text-align: right; float: right } 
}

/* phone sizes */
@media screen and (max-width: 532px) {
	
	.col-2 article dt span, .col-2 article dd span{ padding: 15px }
	.col-2 article dl dt.selected span{ padding: 15px }

	/* table reflow */
	.col-2 article table td, .col-2 article table th { width: 100%; box-sizing: border-box; float: left; clear: left }	
	.col-2 article table thead th { display: none }
	.col-2 article table tbody{ border: 1px solid #e5e6e4 }
	.col-2 article table tbody tr:last-child td{ border-bottom: none }
		.col-2 article table tbody tr td { padding: 10px 15px }
			.col-2 article table tbody tr td span{ display: block; float: left }
			.col-2 article table tbody tr td span.title{ display: block; width: 30%; font-weight: bold; color: #34b6cd }
			.col-2 article table tbody tr td span.content{ width: 65%; padding-left: 5% }
	.col-2 article dt:before{ top: 10px }

	/* 404 error styles */
	section.error article  img{ width: 25%; height: auto; margin-right: 5% }
	section.error article  h2{ margin: 0 }
	section.error article  p{ float: left; width: 70% }
		section.error article  p span{ font-size: 2.2em }
		section.error article  p a.button{ padding: 10px 15px; white-space: nowrap; font-size: 1.1em }

	/* footer */
	footer nav{ margin-bottom: 20px }
	footer nav ul li:nth-child(2):after { content: '' }
	footer nav ul li:nth-child(3) { clear: both }
	footer p{ clear: both }
	
	.imgSpiders img{
		float: right;
	    margin-right: 0;
	    margin-top: 0;
	    width: 100px;
		}
}

/* phone sizes */
@media screen and (max-width: 480px) {
	section#banner img#banner-img{ height: 150px; left: -280px }
	main.inside section#banner img#banner-img{ left: -750px }
	section#welcome aside{ width: 100%; margin: 35px 0 }
	section#re-search input{ width: 75%; margin: 0 10px }
	section#re-search .local-search{ left: 80% }
}

@media screen and (max-width: 320px) {
	section#banner img#banner-img{ height: 120px; left: -200px }
	main.inside section#banner img#banner-img{ height: 190px; left: -600px }
}

@media screen and (min-width: 1200px) {
	main.home section#banner img, main.home section#banner img#banner-img{ position: absolute; left:-9999px }
	main.inside section#banner img#banner-img{ position: relative; left:-300px }
	main.inside section#banner-nav .container ul ul li a{ width: 180px }

	/* create hover statee box */
	main.home #specialities nav a:after{ 
		-webkit-transition: all 1s ease-in-out;
	    -moz-transition: all 1s ease-in-out;
	    -o-transition: all 1s ease-in-out;
	}

	main.home #specialities nav a:after{ content: ''; display: block; width: 95%; height: 110px; position: absolute; top: 0; left: 0 }
	main.home #specialities nav a:hover:after{ content: ''; display: block; width: 110%; height: 130px; position: absolute; top: -5%; left: -5%; z-index: 10 }
	main.home #specialities nav a img, #specialities nav a strong{ position: relative; z-index: 11 }
	#specialities nav a:hover img{ height: 55px }
	main.home #specialities nav a:hover strong{ font-size: 1.45em; padding: 0 }
	#specialities nav a img, main.home #specialities nav a:after{ 
		-webkit-transition: all  .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
	 }
}

@media screen and (min-width: 1600px) {
	main.inside section#banner img#banner-img{ left:0 }
}