@import "https://fonts.googleapis.com/css?family=Open+Sans"
@import "https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300";
@import "https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700";

#marker, #marker2
	{display:none; position:absolute; width:20px; height:20px; border-top:1px solid red; border-left:1px solid red; z-index:1000;}
#marker2
	{border:3px solid yellow}
body
	{margin: 0; padding: 0; font-size:13px; font-family:'Open Sans', sans-serif; background:#efefef; color:#1B70B8}
.clearfix:after 
	{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#interactive
	{position:relative; width:100%; max-width:700px; height:500px; margin:0 auto; overflow:hidden; border:1px solid #1B70B8;
	 background:#fff url(bg.png) repeat-x bottom left;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.header
	{position:relative; display:block; width:100%; height:52px; font-size:23px; font-weight:700; padding-top:9px; text-align:center; letter-spacing:-0.005em; z-index:10;
	 border-bottom:2px solid #1B70B8; background:#ffffff; background:rgba(255,255,255,.85);}
.header p
	{display:block; width:95%; margin:0 auto; font-size:13px; font-weight:300;} 
.controls
	{position:absolute; right:1.7%; bottom:5px;}
.controls .btn, .btn-menu
	{display:block; float:left; width:28px; height:28px; cursor:pointer; margin-left:3px;}
.controls .btn-zoom-in
	{background:url(btn_zoom_in.png) no-repeat center center;}
.controls .btn-zoom-out
	{background:url(btn_zoom_out.png) no-repeat center center;}
.controls .btn-zoom-reset
	{background:url(btn_zoom_reset.png) no-repeat center center;}
.btn-menu, .btn-menu.hide
	{display:none; position:absolute; bottom:5px; left:1.7%; background:url(btn_menu.png) no-repeat center center;}
.main
	{position:relative; width:100%; margin:0; }
.footnote
	{position:absolute; top:-50px; width:90%; right:3%; padding:2% 3%; color:#333; text-transform:none; border:1px solid #f7941d; font:normal 13px 'Open Sans', sans-serif;
	 background:#fff; opacity:0; filter: alpha(opacity=0); transition:opacity 0.3s ease-in; -webkit-transition:opacity 0.3s ease-in; -moz-transition:opacity 0.3s ease-in;}
.footnote.on
	{opacity:1; filter: alpha(opacity=100);}
.levers
	{position:absolute; right:1.7%; bottom:160px; z-index:100; width:20.2%;  margin:0; padding-bottom:.8em; font-size:14px; color:#1B70B8; border:2px solid #1B70B8; background:#fff;
	 border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px}
.levers span
	{display:block; margin:8px 3% 0; font-size:14px; font-weight:700; line-height:1}
.levers h3
	{font-size:12px; margin:0 0 0 0.7em;}
.levers p
	{margin:0 0 0.5em 3%; font-size:12px; letter-spacing:-0.02em; line-height:1.3;}
.levers .question p
	{margin:1px 0 2px 0.5em;}
.levers .question input[type="radio"]
	{position:relative; top:3px; margin:0 0.3em 0 0.5em;}
.levers .question input[type="radio"].day
	{float:left; margin-bottom:1em;}
.tab
	{display:none}
.question
	{position:relative;}
.question label
	{cursor:pointer;}
	
.disclosure 	{position:absolute; top:100%; width:100%; height:100%; font-size:12px; background:#fff; z-index:100; overflow:auto; -webkit-overflow-scrolling: touch;
				font-family:Arial, sans-serif; -webkit-transition:top 0.3s 0s ease-in-out; transition:top 0.3s 0s ease-in-out;}
.disclosure.on 	{top:0}
.disclosure h3	{font-size:18px; margin-left:2.5%}
.disclosure p, .disclosure li	
				{margin:12px 15px 10px;}
.disclosure .inner
				{height: calc(100% + 1px);}
.disclosure .btn-close
				{display:none; position:absolute; top:10px; right:10px; background:#1b70b8; color:#fff; padding: 5px 10px; font-size:14px; cursor:pointer}
.disclosure.on .btn-close
				{display:block;}
.btn-additional	{position:absolute; right:12px; bottom:0; width:97px; padding:4px 6px 0; font-size:10px; text-decoration:none;
				 background:#fff; border:1px solid #1B70B8; cursor:pointer; text-align:center; z-index:10;
				 -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; 
				 -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px;border-top-right-radius:5px;
				 -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
				 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) }
.btn-min-max   	{display:none}
/* UI styles */
#map
	{width:75%; padding-top:49%}
#zoomWindow {
	position:absolute;  left:0px; top:0px; width:100%; z-index:2; overflow:hidden;
	-webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
	
 }
#bigmap	{
	position:absolute; width:100%; height:100%; left:0px; top:0px; overflow:visible;
	/*-webkit-transition: width 2s 0s ease-in-out, height 2s 0s ease-in-out, left 2s 0s ease-in-out, top 2s 0s ease-in-out;*/
}
#mapLeft, #mapRight	{position:absolute; left:0%;  -webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);}
#mapRight	{left:50%;}
.zoomBtn.reverse {
	opacity:0.5; filter: alpha(opacity=50);
}

.key
	{position:absolute; width:100%; bottom:49px; font-size:14px; font-weight:700; margin:-2px 0 0 0; background:#ffffff; background:rgba(255,255,255,.85); border-top: 2px solid #1B70B8; z-index:10;}
.key span
	{margin-left:1.5em; margin-right:.5em}
.key .key-lbl
	{display:block; float:left; height:2em; margin:.75em .5em 0 1.5em;}
.key p
	{display:inline-block; font-size:12px; margin:0.9em 3px 0 0;}
.key p span
	{display:block; float:left; width:1.25em; height:1.25em; margin:0 5px 0 0.3em; border:1px solid #1B70B8;}

.marker {
	position:absolute; z-index:2;width:16px; height:16px; text-align:center; vertical-align:middle; visibility:visible; cursor:pointer;
}
.marker img {
	border:none;
}

.hideBtn {
	position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:3; background:url(../images/spacer.gif) repeat; display:none;	cursor:move; background:opaque;
}



/* Country detail styles*/
@keyframes fade-in {
	0% {
    display: none;
    opacity: 0; filter: alpha(opacity=0);
  }
  1% {
    display: block;
    opacity: 0; filter: alpha(opacity=0);
  }	
  100% {
	  opacity:1; filter: alpha(opacity=100);
  }
}
@keyframes fade-out {
  0% {
    display:block;
    opacity: 1; filter: alpha(opacity=100);
  }
  99% {
    opacity: 0; filter: alpha(opacity=0);
  }	
  100% {
	opacity:0; filter: alpha(opacity=0);
    display: none;
  }
}

#compare
	{height:325px;}
.overlay
	{display:none; position: absolute; width: 74%; top: 70px; left: 0px; z-index: 20; margin: 1%; border: 2px solid #1b70b8; 
	 background:#ffffff; background: rgba(255,255,255,.85); 
	 opacity:0; filter: alpha(opacity=0);
	 border-radius: 10px; 
	 animation:fade-in 0.3s ease-in}
.overlay.on
	{display:block; opacity:1; filter: alpha(opacity=100);}
.overlay .btn-close, .levers .btn-close
	{display:block; float:right; width:25px; height:25px; margin:3% 3% 0 0; background:url(btn_close_more.png) no-repeat center center; cursor:pointer;}		
.levers .btn-close
	{display:none;}
.overlay h2, .overlay label
	{margin:3%}
.overlay .col
	{width:44%; margin-left:3%; float:left;}
.overlay .col-right
	{border-left:1px solid #1b70b8; margin:1em 0 0 0; padding-left:5%;}
.overlay .col-right p
	{margin-top:0;}	
.overlay table
	{width:94%; margin:0 3% 3%; border-collapse:collapse}
.page2 table
	{width:100%;}
#compare .col table
	{width:100%; margin:0;}
.overlay td
	{text-align:center; padding:2px 1% 3px; font-size:12px; border:1px solid #1b70b8; background:#F1F5FB}
#compare .col td
	{padding:0; text-align:left;border:none; background:none;}
.overlay td.left, .overlay th.left
	{text-align:left; padding:1px 1.5%}
#compare td.right
	{width:20%; text-align:right; padding:0 7.5% 0 0}
.overlay th
	{font-size:13px; padding-left:2%; text-align:left; border:1px solid #1b70b8; background:#D5DFE9;}
.overlay th.blank
	{border:none; background:none;}
.overlay th.top
	{color:#fff; text-align:center; padding:0; background:#1b70b8;}
.page2 th
	{padding:1% 0; font-size:15px;}
.page2 th.top
	{width:40%}
.page1
	{position:absolute; z-index:100; width:95%;}
#compare .page2, #compare .page1.hide
	{width:95%; opacity:0; filter: alpha(opacity=0); z-index:1;
	 transition:opacity 0.3s ease-in;}
#compare .page2.on
	{position:absolute; z-index:100;opacity:1; filter: alpha(opacity=100);}
#compare .state1 th, #compare .state1 td
	{background:#EFF4E7; vertical-align:middle; font-size:12px; }
#compare .state2 th, #compare .state2 td
	{background:#D5DFE9; vertical-align:middle; font-size:12px;}
#compare .diff th, #compare .diff td
	{background:#F1F0F8; vertical-align:middle; font-size:12px; font-weight:bold}
#compare .diff.neg th, #compare .diff td.neg	
	{color:#991b1e}
#compare .state1 td strong, #compare .state2 td strong, #compare .state1 th span, #compare .state2 th span, 
#compare .diff th, #compare .diff td strong
	{font-size:14px;}
#compare .state1 th span.long, #compare .state2 th span.long
	{font-size:12px;}
#compare .diff th
	{padding-left:19%}
#compare .state1 td, #compare .state2 td,  #compare .diff td 
	{text-align:right;}
#compare th span
	{display:block; float:left; padding-top:5%;}
.btn-do-comp
	{display:inline-block; color:#fff; text-align:center; padding:5px 20px; margin:0 0 2em 25%; font-size:16px; cursor:pointer;
	 background:#12436c url(bg_btn_more.png) repeat-x left top; background-size:auto 100%; 
	 border-radius:5px;}
.btn-do-comp.disabled
	{opacity:0.5; filter: alpha(opacity=50); cursor:default;}	
.rankings
	{height:12em; border:1px solid #1b70b8; margin:0 0 1em 0; overflow:auto;-webkit-overflow-scrolling: touch;}
.page2 h2
	{text-align:center; margin-top:0;}
.page2 select
	{font-size:11px; }
.page2 select.state-list
	{width:30%; font-size:12px}
.page2 h2 select
	{margin:0 5%;}
.tooltip
	{position:absolute; z-index:100; width:200px; margin:-44px 0 0 20px; padding:1%; font-size:12px; background:#fff;  opacity:0;  filter: alpha(opacity=0);
	 border-radius:8px; border:2px solid #1b70b8;
	 transition:opacity 0.3s 0.3s ease-in, margin 0.3s ease-in-out}
.z1 .tooltip
	{}
.z2 .tooltip
	{}
.z3 .tooltip
	{margin-left:40px;}
.tooltip.on
	{opacity:1; filter: alpha(opacity=100);}
.tooltip.flip
	{margin-left:-235px}
.z1 .tooltip.flip
	{margin-left:-245px}
.z2 .tooltip.flip
	{margin-left:-255px}
.z3 .tooltip.flip
	{margin-left:-275px}
.tooltip:before, .tooltip.flip:after
	{content:"."; position:absolute; top:30%; left:-19px; width:20px; font-size:29px; color:#fff; padding-left:4px; text-indent:-9999px;
	 background:url(bg_blue_arrow_left.png) no-repeat 3px 11px;}
.tooltip.flip:after
	{content:".";left:auto; right:-21px; 
	 background:url(bg_blue_arrow_right.png) no-repeat 3px 11px; }
.tooltip.flip:before
	{display:none}
.tooltip.low
	{margin-top:-35px;}
.z1 .tooltip.low
	{}
.z2 .tooltip.low
	{}
.z3 .tooltip.low
	{}
.tooltip.low:before, .tooltip.low:after
	{top:-6%;}
.tooltip.high
	{margin-top:-19%;}
.z1 .tooltip.high
	{margin-top:-13%;}
.z2 .tooltip.high
	{margin-top:-10%;}
.z3 .tooltip.high
	{margin-top:-7%;}
.tooltip.high:before, .tooltip.high:after
	{top:60%;}
.tooltip.high.left:before
	{top:30%;}
.tooltip.high.flip:after
	{top:45%;}
.tooltip .ttl
	{margin:0 3%; font-size:17px; font-weight:700;}
.tooltip .desc
	{margin:0 3%; font-weight:700;}
.tooltip table
	{width:94%; margin:0 auto; text-align:center; border-collapse:collapse;}
.tooltip td
	{font-weight:700;}
.tooltip th
	{font-weight:normal; border-bottom:1px solid #1B70B8;}
.tooltip .btn-close
	{display:block; float:right; width:17px; height:17px; margin:1% 3% 0 0; background:url(btn_close.png) no-repeat center center; cursor:pointer;}	
.tooltip .btn-more
	{display:block; float:right; width:50px; clear:both; color:#fff; text-align:center; margin:5px 3% 0 0; padding:0; cursor:pointer;
	 background:url(bg_btn_more.png) repeat-x left top; background-size:auto 100%; 
	 border-radius:5px;}	

.stateIcon
	{position:relative; width:70px; height:50px;float: left; margin:0 3% 0 0;overflow:hidden;}
.stateIcon svg
	{position:relative;}
.stateIcon.s0 svg
	{top:-315px; left:-506px; transform:scale(0.4,0.4);}
.stateIcon.s1 svg
	{top:-334px; left:-323px; transform:scale(0.3,0.3);}
.stateIcon.s2 svg
	{top:-294px; left:-337px; transform:scale(0.35,0.35);}
.stateIcon.s3 svg
	{top:-316px; left:-480px; transform:scale(0.6,0.6);}
.stateIcon.s4 svg
	{top:-264px; left:-358px; transform:scale(0.2,0.2);}
.stateIcon.s5 svg
	{top:-260px; left:-373px; transform:scale(0.4,0.4);}
.stateIcon.s6 svg
	{top:-95px; left:-1021px; transform:scale(1.5,1.5);}
.stateIcon.s7 svg
	{top:-187px; left:-980px; transform:scale(1.5,1.5);}
.stateIcon.s8 svg
	{top:-87px; left:-1789px; transform:scale(4,4);}
.stateIcon.s9 svg
	{top:-342px; left:-521px; transform:scale(0.35,0.35);}
.stateIcon.s10 svg
	{top:-312px; left:-531px; transform:scale(0.4,0.4);}
.stateIcon.s11 svg
	{top:-421px; left:-325px; transform:scale(0.6,0.6);}
.stateIcon.s12 svg
	{top:-215px; left:-351px; transform:scale(0.3,0.3);}
.stateIcon.s13 svg
	{top:-256px; left:-482px; transform:scale(0.4,0.4);}
.stateIcon.s14 svg
	{top:-250px; left:-521px; transform:scale(0.5,0.5);}
.stateIcon.s15 svg
	{top:-230px; left:-462px; transform:scale(0.5,0.5);}
.stateIcon.s16 svg
	{top:-270px; left:-420px; transform:scale(0.5,0.5);}
.stateIcon.s17 svg
	{top:-277px; left:-530px; transform:scale(0.5,0.5);}
.stateIcon.s18 svg
	{top:-349px; left:-484px; transform:scale(0.5,0.5);}
.stateIcon.s19 svg
	{top:-167px; left:-645px; transform:scale(0.5,0.5);}
.stateIcon.s20 svg
	{top:-241px; left:-682px;  transform:scale(0.75,0.75);}
.stateIcon.s21 svg
	{top:-123px; left:-878px; transform:scale(1.1,1.1);}
.stateIcon.s22 svg
	{top:-219px; left:-490px; transform:scale(0.35,0.35);}
.stateIcon.s23 svg
	{top:-200px; left:-450px; transform:scale(0.35,0.35);}
.stateIcon.s24 svg
	{top:-317px; left:-486px; transform:scale(0.4,0.4);}
.stateIcon.s25 svg
	{top:-269px; left:-466px; transform:scale(0.45,0.45);}
.stateIcon.s26 svg
	{top:-198px; left:-366px; transform:scale(0.35,0.35);}
.stateIcon.s27 svg
	{top:-244px; left:-411px; transform:scale(0.45,0.45);}
.stateIcon.s28 svg
	{top:-260px; left:-349px; transform:scale(0.25,0.25);}
.stateIcon.s29 svg
	{top:-131px; left:-751px; transform:scale(0.8,0.8);}
.stateIcon.s30 svg
	{top:-199px; left:-766px; transform:scale(0.9,0.9);}
.stateIcon.s31 svg
	{top:-300px; left:-365px; transform:scale(0.4,0.4);}
.stateIcon.s32 svg
	{top:-200px; left:-602px; transform:scale(0.5,0.5);}
.stateIcon.s33 svg
	{top:-290px; left:-557px; transform:scale(0.45,0.45);}
.stateIcon.s34 svg
	{top:-174px; left:-408px; transform:scale(0.5,0.5);}
.stateIcon.s35 svg
	{top:-234px; left:-573px; transform:scale(0.6,0.6);}
.stateIcon.s36 svg
	{top:-304px; left:-418px; transform:scale(0.45,0.45);}
.stateIcon.s37 svg
	{top:-200px; left:-285px; transform:scale(0.4,0.4);}
.stateIcon.s38 svg
	{top:-222px; left:-623px; transform:scale(0.6,0.6);}
.stateIcon.s39 svg
	{top:40px; left:-1463px; transform:scale(2.5,2.5);}
.stateIcon.s40 svg
	{top:-327px; left:-634px; transform:scale(0.7,0.7);}
.stateIcon.s41 svg
	{top:-206px; left:-406px; transform:scale(0.5,0.5);}
.stateIcon.s42 svg
	{top:-290px; left:-518px; transform:scale(0.45,0.45);}
.stateIcon.s43 svg
	{top:-300px; left:-422px; transform:scale(0.2,0.2);}
.stateIcon.s44 svg
	{top:-251px; left:-336px; transform:scale(0.4,0.4);}
.stateIcon.s45 svg
	{top:-119px; left:-776px; transform:scale(0.9,0.9);}
.stateIcon.s46 svg
	{top:-267px; left:-586px; transform:scale(0.5,0.5);}
.stateIcon.s47 svg
	{top:-149px; left:-260px; transform:scale(0.5,0.5);}
.stateIcon.s48 svg
	{top:-250px; left:-602px; transform:scale(0.6,0.6);}
.stateIcon.s49 svg
	{top:-199px; left:-490px; transform:scale(0.5,0.5);}
.stateIcon.s50 svg
	{top:-227px; left:-364px; transform:scale(0.4,0.4);}

.btn-compare
	{position:absolute; right:1.7%; bottom:110px; width:20.2%; color:#fff; text-align:center; padding:5px 0; font-size:16px; cursor:pointer; z-index:10;
	 background:#12436c url(bg_btn_more.png) repeat-x left top; background-size:auto 100%; 
	 border-radius:5px;}	
	
.footer
	{position:absolute; width:100%; height:50px; bottom:-1px; clear:both; margin:0; font-size:10px; line-height:1.3; background:#ffffff; background:rgba(255,255,255,.85); z-index:10;}
.footer p
	{margin:0; padding:0.5em 0 0 2em; width:79%}

@media screen and (min-width: 700px)  {
.btn-additional:hover
	{background:#1B70B8; color:#fff}
}

@media screen and (max-width: 700px)  {
body
	{font-size: 15px;}	
#interactive
	{position:fixed; top:0px; left:0px; right:1px; bottom:0; height:auto;}
#zoomWindow
	{overflow:visible;}
.main
	{height:92%;}
.header
	{font-size:24px;}
.header p
	{font-size:15px}
.key
	{font-size:14px;}
.key p
	{font-size:14px;}
.btn-compare
	{width:30%; right:10px;}
.levers
	{position:fixed; top:110px; bottom:auto; left:-310px; width:306px; 
	 -webkit-transition:left 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition:left 0.3s ease-in-out, width 0.3s ease-in-out; transition:left 0.3s ease-in-out, width 0.3s ease-in-out; }
.levers.show
	{left:10px;}
.levers p
	{font-size:14px;}
.levers h3 
	{font-size: 14px;}	
.levers span
	{font-size:16px;}
.levers .btn-close
	{display:block;}
.overlay
	{width:97%;}
.btn-menu
	{display:block;}
.key
	{bottom:89px;}
.btn-compare
	{bottom:170px;}
.footer
	{height:90px;}
.footer p
	{width:66%; padding-left:1em; font-size:12px}
.btn-additional
	{width:130px; font-size:12px;}
#compare
	{height:365px;}
.overlay td
	{font-size:15px;}		
.overlay td strong
	{display:block;}
.overlay tr.diff td strong
	{display:inline;}
.overlay th
	{font-size:15px;}	
select, .page2 select.state-list
	{font-size:14px;}
#compare .state1 td strong, #compare .state2 td strong, #compare .state1 th span, #compare .state2 th span,
#compare .diff th, #compare .diff td, #compare .diff th, #compare .diff td strong, .disclosure
	{font-size:15px;}	
		
.z1 .tooltip, .z2 .tooltip, .z3 .tooltip,
.z1 .tooltip.high, .z2 .tooltip.high, .z3 .tooltip, .z3 .tooltip.high
	{width:200px; margin:20px 0 0 -100px;}
.z1 .tooltip.flip, .z2 .tooltip.flip, .z3 .tooltip.flip
	{margin-left:-110px}
.z1 .tooltip:before, .z1 .tooltip.flip:after, .z2 .tooltip:before, .z2 .tooltip.flip:after, .z3 .tooltip:before, .z3 .tooltip.flip:after
	{content:"\0010"; position:absolute; top:-27px; left:90px;
	 background:url(bg_blue_arrow_top.png) no-repeat 3px 11px;}
.tooltip.high.left:before
	{left: -19px;}
.z1 .tooltip.left:before, .z1 .tooltip.flip.left:after, .z2 .tooltip.left:before, .z2 .tooltip.flip.left:after, 
.z3 .tooltip.left:before, .z3 .tooltip.flip.left:after, 
.z1 .tooltip.high.left:before, .z2 .tooltip.high.left:before, .z3 .tooltip.high.left:before
	{left:15px;}
.z1 .tooltip.right:before, .z1 .tooltip.flip.right:after, .z2 .tooltip.right:before, 
.z3 .tooltip.right:before
	{left:180px;}
.z1 .tooltip.high
	{margin-top:-22%;}
.z2 .tooltip.high
	{margin-top:-17%;}
.z3 .tooltip.high
	{margin-top:-12%;}
.z1 .tooltip.high:before, .z1 .tooltip.high.flip:after, .z2 .tooltip.high:before, .z2 .tooltip.high.flip:after, 
.z3 .tooltip.high:before
	{content:"\0010"; position:absolute; top:100%; left:90px; height:20px;
	 background:url(bg_blue_arrow_btm.png) no-repeat 3px 0;}
.z1 .tooltip.high.flip.right:after, .z2 .tooltip.high.flip.right:after, .z3 .tooltip.high.flip.right:after,
.z2 .tooltip.flip.right:after, .z3 .tooltip.flip.right:after
	{left:180px;}	 
.z1 .tooltip.left, .z2 .tooltip.left, .z3 .tooltip.left
	{margin-left:-30px;}
.z1 .tooltip.right, .z2 .tooltip.right, .z3 .tooltip.right
	{margin-left:-195px;}
}

@media screen and (max-width: 600px)  {
.header
	{height:80px; font-size:18px;}
.levers p
	{font-size:14px; line-height:1.7}
.levers h3 
	{font-size: 15px;}	
.levers span
	{font-size:15px;}
#map
	{width:96%; padding:60%}
.footer p
	{width:94%;}
.btn-do-comp
	{margin-left:7%;}	
.page1 select[name="list-careType"]
	{margin-left:2%;}
.page2 select[name="list-careType"]
	{display:none}
.overlay .col
	{width:39%}
.overlay .col-right
	{width:51%;}
#compare .state1 td strong, #compare .state2 td strong, #compare .state1 th span, #compare .state2 th span, #compare .diff th, #compare .diff td strong
	{font-size:14px;}
#compare .state1 th span, #compare .state2 th span
	{padding-left:2%; white-space:nowrap}
#compare .diff th
	{padding-left:7%; white-space:nowrap}
.key
	{font-size:12px; bottom:119px; padding-bottom:1px; -webkit-transition:bottom 0.3s ease-in-out; -moz-transition:bottom 0.3s ease-in-out; transition:bottom 0.3s ease-in-out;}
.key p
	{font-size:12px;}
.footer
	{height:120px; -webkit-transition:height 0.3s ease-in-out; -moz-transition:height 0.3s ease-in-out; transition:height 0.3s ease-in-out;}
.footer p
	{transition:opacity 0.2s 0.3s ease-out;}
.btn-compare
	{bottom:200px; -webkit-transition:bottom 0.3s ease-in-out; -moz-transition:bottom 0.3s ease-in-out; transition:bottom 0.3s ease-in-out;}
select, .page2 select.state-list
	{font-size:12px;}
.overlay th
	{font-size:13px;}
.overlay h2, .overlay label
	{font-size:20px;}
.footer.min
	{height:50px;}
.footer.min p
	{opacity:0; -webkit-transition:opacity 0.2s ease-out; -moz-transition:opacity 0.2s ease-out; transition:opacity 0.2s ease-out;}
.key.min
	{bottom:49px;}
.btn-compare.min
	{bottom:110px;}
.btn-min-max:before
	{content:'Show less';}
.btn-min-max
	{display:block; position:absolute; bottom:10px; left:3%; cursor:pointer; z-index:10;}
.btn-min-max:hover
	{text-decoration:underline;}
.min .btn-min-max:before
	{content:'Show more'}
}

@media screen and (max-width: 500px)  {	
.btn-compare
	{width:32%; font-size:12px;}
#compare
	{height:385px;}
#compare .state1 td strong, #compare .state2 td strong, #compare .state1 th span, #compare .state2 th span, #compare .diff th, #compare .diff td strong
	{font-size:14px;}
.tooltip
	{width:130px; font-size:10px;}
.tooltip .ttl
	{font-size:13px;}
.tooltip.flip
	{margin-left:-154px;}
.tooltip.low
	{margin-top:-13px;}
.z1 .tooltip.low, .z2 .tooltip.low, .z3 .tooltip.low
	{margin-top:20px;}
.tooltip.high
	{margin-top:-24%;}	
.tooltip.high.left
	{margin-top:-14%}
.tooltip.high.flip
 	{margin-top:-20%;}
.z2 .tooltip.high.flip
 	{margin-top:-17%;}
.z3 .tooltip.high.flip
 	{margin-top:2%;}

.z1 .tooltip.high.left, .z2 .tooltip.high.left, .z3 .tooltip.high.left
	{margin-top:-21%;}

.key
	{font-size:10px; bottom:139px;}
.footer
	{height:140px;}
.btn-compare
	{bottom:200px;}
.disclosure .btn-close
	{right:10%;}
}

@media screen and (max-width: 350px)  {
body 
	{font-size: 12px;}
.header
	{font-size:16px;}
.header p
	{font-size:12px;}
#compare .state1 td strong, #compare .state2 td strong, #compare .state1 th span, #compare .state2 th span, #compare .diff th, #compare .diff td, 
#compare .diff th, #compare .diff td strong, .disclosure
	{font-size:12px;}
#compare .state1 th span.long, #compare .state2 th span.long
	{font-size:11px;}
select, .page2 select.state-list
	{font-size:11px;}
.overlay
	{background:rgba(255,255,255,.93);}
.overlay td
	{font-size:11px;}		
.overlay th
	{font-size:11px;}
.overlay h2, .overlay label
	{font-size:12px;}
.page1
	{width:97%;}
.key
	{font-size:10px; bottom:139px;}
.key p
	{font-size:10px; letter-spacing: -0.02em;}
.footer
	{height:140px;}
.footer p
	{font-size:11px;opacity:1; }
.btn-compare
	{bottom:200px;}
#compare 
	{height: 355px;}	
}

@media screen and (max-width: 300px)  {
.key p 
	{font-size: 9px;}
.btn-compare
	{padding:0.5em 1em;}
}