@charset "utf-8";

@media only screen and (max-width: 800px) {
	#mainBanner{
		width: 790px;
		height:526px;
		background: transparent url('../images/mainBanner-medium.jpg') no-repeat center;
	}	
	
	#iDBanner{
		width:847px;
		height:367px;
		background: transparent url('../images/main_idBanner-medium.jpg') no-repeat padding-box;
		background-postion: right center;
	}	
	
	#accBanner{
		width:847px;
		height:367px;
		background: transparent url('../images/accessories_banner-medium.jpg') no-repeat padding-box;
		background-postion: right center;
	}	
	
	.topBtn{
		font-size: 1.0rem;	
	}
	
	#bannerText{
		top: 150px !important;
		font-size: 0.8rem !important;
	}
	
	#innerBannerText{
		font-size: 0.9rem !important;
		left:0;
		top:107px;
		opacity:0.8;		
		filter: alpha(opacity=80);
    	zoom: 1;  /* Fix for IE7 */		
	}
	
	.navbar-toggler{
		position: absolute;
		top: 20px;
		right: 0;
	}
		
	header .sign-in-up{
		 margin-bottom: 3%;
		 margin-left:2%; 
		 margin-top:2%;
	}
		
	.navbar-nav > li, .navbar-nav > li:first-of-type {
		margin-left: 12px;
	}

	.navbar-nav > li > a{
	 font-size: 0.8rem !important;	
	}
	
	.navbar-nav > li:last-of-type {
		margin-right:0;
	}		

	.medicalBanner{
		width: 280px;
		height:186px;
		background: transparent url('../images/medical-record-small.jpeg') no-repeat center;
	}	

	.more, more:hover {
		width: 60% !important;
	}

	 .more-m, more-m:hover{width:60% !important}		
	
	.darkBtn, a.darkBtn:hover {
    	font-size: 1.0rem;
	}
	
	.w{
		width:75% !important;	
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

@media only screen and (max-width: 500px) {

	.wi, wg{
		width:94% !important;
	}
	
	
	#collapsibleNavbar {
		position: absolute;
		right: 22px;
		top: 42px;
		background: #F4F4F4;
		height:auto;
		overflow-y:scroll;
		z-index:55;
		padding-bottom:1.2rem;
		padding-right:0.8rem;
	}	
	
	#collapsibleNavbar {
		width: 70%;
	}
	
	/*.sign-in-up{margin-left:0 !important;}	*/
	
	#mainBanner{
		width:400px;
		height:266px;
		background: transparent url('../images/mainBanner-small.jpg') no-repeat padding-box;
	}
	
	#iDBanner{
		width:400px;
		height:266px;
		background: transparent url('../images/main_idBanner-small.jpg') no-repeat padding-box;
		background-postion: right center;
	}
	
	#accBanner{
		width:400px;
		height:266px;
		background: transparent url('../images/accessories_banner-small.jpg') no-repeat padding-box;
		background-postion: right center;
	}			
	
	#bannerText{
		top: 150px !important;
		font-size: 0.8rem !important;
	}	
	
	#innerBannerText{left:0; opacity:0.8; top: 10px;}
	
	
	#innerBannerText{
		font-size: 0.8rem !important;
	}
	
	.navbar-nav > li:first-of-type {
		margin-left:0;
	}	
	.navbar-nav > li{
		margin-left:0 !important;
	}
	

	.more, more:hover {
		width: 64% !important;
	}
	
	.more-m, .more-m:hover {
		width: 78% !important;
	}
	
	.darkBtn, a.darkBtn:hover{font-size:1.0rem;}
	
	h1{
		font-size: 2.0rem;
	}
	
	a.smBtn,a.smBtn:hover {width:90%}
	
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 401px) and (max-width: 600px) {
	header .sign-in-up{
		margin-top:17% !important;
	}	
}
@media only screen and (max-width: 399px) {
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (max-device-height:1024px)
{

}
@media only screen 
  
  and (max-device-width: 1024px) 
  and (max-device-height:768px)
{
 .w{width:75%}
}
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-height: 1280px) 
{

}
@media only screen 
  and (min-device-width: 1280px) 
  and (max-device-height: 800px) 
{

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)  and (min-device-height: 1281px) {

}