/* DinLaw */
/* Responsive Style Sheet */


@media only screen and (max-width: 1680px )  {
	#banners { background-size:auto 100%; } 
	.hero, hero2{ background-size:auto 100%; } 
}


@media only screen and (max-width: 1230px )  {
	.naw-slider2{ display:none; }
}



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 996px) {

	.wrap { width: 768px;  }
	
	#col-left { width: 475px; }
	#col-right { width: 270px; }
	
	#header-wrap { height: 200px; }
	#header { width: 768px; height: 96px; }
	#header #logo {  padding: 5px 0 0 0; }
	#header #logo a {   }
	
	#hero-left { width:520px; } 
	.hero #slider { height:350px; }
	.hero #slider .foto, .hero .slide-bg { width:520px; }
	.hero .slide-bg {  background-size:520px auto !important; height:306px; } 
	
	.form-home { top: 203px; }
	
	#hero-right { width:270px; }
	#phone{ width:380px; padding: 40px 0; } 
	#phone .line2 strong{ font-size:50px; }
	
	.hero { height: 275px; }
	
	.home #hero-left{ margin-top: 270px; }
	.hero #headlines{ margin-left: 0px; width: 480px;}
	.hero #headlines h1 { font-size: 30px;line-height: 30px; width: 490px; background-size:100% auto; } 
	.hero #headlines h2 { display:inline; padding:0 10px; line-height:32px;}
	
	#nav{ margin-top:48px; }
	#nav ul li a {  font-size:17px;} 

	#content { padding: 30px 0 55px; } 
	#content h2{ font-size:22px; line-height:25px;}
		
	#form{  height: 380px;  min-height: 465px; padding:25px 25px 25px 25px; width: 220px;}
	#form input, #form textarea { width:200px; padding:12px 10px; margin:3px 0;}
	#form input.button{  width: 220px; }
	#form select {  width: 224px;  padding:5px 10px;} 
	#form h3{ font-size:25px; padding:7px 0; margin:0; }

	.main { width:490px; }
	.right-col { width:260px;}
	.right-col .coupon_sub img{ width:260px;}
	
	#banners h1{ text-align:center;}
	#banners a { width: 184px; margin: 3px; }
	#banners a p{ font-size:16px; }
	
	#banners2 a{ width: 242px; background-size:100% auto; text-align:center; height:171px;}
	#banners2 a.i2 { margin: 0 20px;}
	#banners2 a h3 { margin-top: 105px; }
	
	#blog h1 { text-align:center; font-size:35px;}
	#blog .item { width: 242px; height: 490px; }
	#blog .item-center {  margin: 0 20px; }
	
	.patients .txt { margin-left:0; width:608px;  }
	.naw-slider {  left: 40px; }
	#slideshow-prev { right: 40px; }
	#slideshow-next { right: 40px; }
	
	#sidebar-practice-areas { width: 270px; }
		
	#footer .col-logo{ width:180px; }
	#footer .col{ margin-left:30px; width:260px; }
	#footer .col h4{ font-size:28px;}
	
}



/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {font-size: 16px; line-height: 22px; }

	.wrap { width: 480px; }
	
	#col-left { width: 480px; }
	#col-right { width: 480px; margin-top: 0; }
	
	#header #logo{ margin-left: 0px; width:100%;  }
	#header #logo a{ width:100%;} 
	 
	#header-wrap { height: 275px; }
	#header { width: 480px; height: 96px; }
	
	#hero-left { display:none; }
	.hero #slider .foto .naw { top:108px; }
	#hero-left, .hero #slider .foto, #slider .slide-bg{ width:100%; height:290px;}
	
	.hero-wrap { height: 350px; }
	.hero { height: 350px; background-position: -600px center; }
	
	.hero #headlines{ display:none;}
	.home .hero-wrap { height: 425px; }
	
	.form-home{ top:277px; margin: 120px -10%; }
	
	#hero-right { width:242px; margin-right:0; } 
	#phone { width:100%; text-align:center; margin-top:140px;  }
	#phone .line1{ display:none; }
	#phone .line2 strong{ text-align:center; width:100%;  }
	
	#form { width:202px; background-position:right; min-height: 360px; padding: 20px 20px 5px 20px; }
	#form input, #form textarea, #form .button{ width: 180px; padding: 5px 10px; }
	#form input.button{ width:203px; font-size:13px; } 
    #form select { width: 203px; height: 34px; padding: 5px 10px; }
    #form textarea { height: 90px; }
	#form h3 { font-size: 24px; }
	
	#nav ul { display:none; }
	.select-nav{ display:block; }
	.select-nav select{ width:400px; margin-left:40px; margin-top:20px; padding:7px 10px; border:1px solid #CCC;}
	
	#content{ padding: 145px 0 50px 0; }
	.about-foto {   float: left;  text-align: center; width: 100%; margin-bottom:20px; }
	.about-txt { width:100%; } 
	
	#banners h1 { text-align:center; }
	#banners a {  width:228px;  }
	
	#banners2 a, #banners2 a.i2 { margin:10px 92px;}
	#banners2 a h3{ text-align:center; }
	
	#blog h1{ text-align:center; font-size:35px; }
	#blog .item { width:460px; margin: 15px 10px; height:auto; }
	#blog .item .more { position:relative; }
	
	.patients .foto { width:100%;}
	.patients .txt { width:438px; padding:30px 20px 30px 20px; margin-left:0; height: 240px;}
	.patients p, .patients h4 {  text-align:center; }
	#pager2  { width:100%;}
	.patients .naw-slider{ display:none; }
	
	#social .col{ display:none; }
	#social .col-last{ width:100%; display:block; }
	#social .col .soc { margin-right: 110px; }
	
	#sidebar-practice-areas { margin: 10px auto 20px auto; }
	
	#footer { width:100%; font-size: 14px; line-height: 20px; }
	#footer .fleft, #footer .fright{ width: 100%; text-align:center; }
	#footer .col-logo{ display:none;}
	#footer .col{ float:left; width:50%; margin:20px 0 30px 0;}
	#footer .col h4{ font-size:25px; background:none; padding:0; margin:0;}
	#footer .col p{ padding:3px 0; margin:0; }
	
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 479px) {
	
	body {font-size: 16px; line-height: 22px; }

	.wrap { width: 320px; }
	
	#col-left { width: 320px; padding-top: 120px; }
	#col-right { width: 320px; margin-top: 0; }
	
	#header #logo{ margin-left: 0px; width:100%;  }
	#header #logo a{ width:100%;} 
	 
	#header-wrap { height: 265px; }
	#header { width: 320px; height: 96px; }
	
	#hero-left { display:none; }
	.hero #slider .foto .naw { top:108px; }
	#hero-left, .hero #slider .foto, #slider .slide-bg{ width:100%; height:290px;}
	
	.hero{height:200px; }
	.hero #headlines{ display:none;}
	.home .hero-wrap { height: 630px; }
	
	.form-home{ top:277px; margin: 200px 10%; }
	
	#hero-right { width:300px; margin-right:10px; } 
	#phone { width:100%; text-align:center; margin-top:140px;  }
	#phone .line1{ display:none; }
	#phone .line2 strong{ text-align:center; width:100%;  }
	
	#form { width:202px; background-position:right; min-height: 360px; padding: 20px 20px 5px 20px; }
	#form input, #form textarea, #form .button{ width: 180px; padding: 5px 10px; }
	#form input.button{ width:203px; font-size:13px; } 
    #form select { width: 203px; height: 34px; padding: 5px 10px; }
    #form textarea { height: 90px; }
	#form h3 { font-size: 24px; }
	
	#nav ul { display:none; }
	.select-nav{ display:block; }
	.select-nav select{ width:318px; margin-left:0px; margin-top:20px; padding:7px 10px; border:1px solid #CCC;}

	.about-foto {   float: left;  text-align: center; width: 100%; margin-bottom:20px; }
	.about-txt { width:100%; } 
	
	#banners h1 { text-align:center; }
	#banners a {  width:148px; font-size:12px;  }
	#banners .prac-box {  width:148px; }
	
	#banners2 { padding: 20px 0 0 0; }
	#banners2 a, #banners2 a.i2 { margin:10px 12px;}
	#banners2 a h3{ text-align:center; }
	
	#blog h1{ text-align:center; font-size:27px; padding: 30px 0 0; }
	#blog .item { width:300px; margin: 15px 10px 0 10px; height:auto; }
	#blog .item .more { position:relative; }
	
	.patients {  padding: 40px 0; } 
	.patients .foto { width:100%;}
	.patients .txt { width:278px; padding:30px 20px 30px 20px; margin-left:0; height: auto;}
	.patients p, .patients h4 {  text-align:center; }
	#pager2  { width:100%;}
	.patients .naw-slider{ display:none; }
	
	#social .col{ display:none; }
	#social .col-last{ width:100%; display:block; }
	#social .col .soc { margin-right: 30px; }
	
	#sidebar-practice-areas { width: 320px; margin: 10px auto 20px auto; }
	
	#footer { width:100%; font-size: 14px; line-height: 20px; }
	#footer .fleft, #footer .fright{ width: 100%; text-align:center; }
	#footer .col-logo{ display:none;}
	#footer .col{ float:left; width:100%; margin:15px 0 0px 0; text-align:center; }
	#footer .col-last{ margin-bottom:25px; }
	#footer .col h4{ font-size:25px; background:none; padding:0; margin:0;}
	#footer .col p{ padding:3px 0; margin:0; }
	#footer .col h4, #footer .col h3, #footer .col p{ text-align:center; } 
	
}