@charset "utf-8";



@media screen and (min-width: 400px) {
	#mapAddr {
		font-size: 1.1em;
	}	
}


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

	img.right {
		float: right;
		display: inline;
		margin: 0 0 1em 2em;
		width:  40%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	img.left {
		float: left;
		display: inline;
		margin: 0 2em 1em 0;
		width:  40%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	.right {
		float: right;
		clear: none;
	}
	
	.left {
		float: left;
		clear: none;
	}
	
	#surgery img {
		 margin-top:0;
	}

}


@media screen and (min-width: 600px) {  
	
	.quote {
		padding-top: 0;
      padding-bottom: 0;
   }
	
   .quote p {
      font-size: 1em;
      line-height: 2.5em;
      margin-bottom: 0;
   }
	
	#services.container {
     padding: 1em 0 1em 1em;
   }
	
}


@media screen and (max-width: 600px) {  
	#aligned, #aside, #message {
		width: 96%;
	}
	
	input[type="text"] {
		width: 100%;
	}
}

@media screen and (max-width: 699px) {
	.flex-container-center {
		text-align: center;
		padding: 0 !important;
	}
}


@media screen and (min-width: 700px) {

	h1.title {
		font-size: 2.5em;
	}
	
	
	#results {
		margin-bottom: 50px;
	}
	
	.image-right {	
     border: 1px solid #555;
     float: right;
     margin: 12px 24px 12px 12px;
     max-width: 300px;
     min-width: 100px;
     width: 25%;
	}

	#content img {
		margin: 10px 15px;
		display: inline-block;
		width: auto;
		min-width: auto;
	}
	
	#content .flexImg img {
		margin: 0;	
	}
	
	.promo {
    padding: 40px 0 20px;
}
	
	#services .flex3 {
		padding-bottom: 20px;
	}
	
	.percent90 {
       width: 90%;
   }
	
	#services #results img {
		margin: 12px 12px 8px 40px;
	}
	
	
	#painImg {
      margin-right: -10px !important; 
		max-width: 250px;
		margin-top: -50px !important;
	}
	
	#surgeryImg {
		margin: 0 40px 0 0 !important;
	}
	
	#laserImg {
		margin: 0px 40px 8px 0 !important; ;  
		max-width: 250px;
		margin-bottom: 2em;
	}
	
	#dentistryImg {
		margin: -15px 12px 8px 40px !important; ; 
		max-width: 250px; 
	}
	
	#diagImg {
		margin-right: -10px !important; ; 
	}
	
	#behaviorImg {
		margin: 0px 40px 8px 0 !important; ; 
		max-width: 200px;
	}
	
	#nutritionImg {
		max-width: 600px; 
		margin: 2em auto !important;
		display: block !important; 
		width: 400px; 
	}
	
	#fleaImg {
		margin-top: 25px !important;
		max-width: 600px;
	}

	
	#referralContent img {
		max-width: 64px;
	}
	
	
   #tour #gallery {
      margin-left: auto; 
      margin-right: auto;
      min-width: 550px;
		max-width: 550px;
      margin-bottom: 2em;
   }
	
	
.clearfix:after {
  content: ".";
  visibility:hidden;
  display: block;
  height:0;
  clear: both;
}

	
	
	/*  ----------- RESOURCE LINKS PAGE   ----------------------  */
	
	
	#resourceLinks .flex-container {
     margin: 1em auto 2em;
	  width: 1440px;
   }
	
	  .flexlink-img {
       flex: 1 1 20%;
       margin-right: 2%;
		 text-align: left;
		  margin-bottom: 0;
     }

     .flexlink-text {
       flex: 1 1 60%;
       margin-right: 5%;
     }

     .flexlink-text h2 {
       margin-top: 0;
		 font-size: 1.6em; 
		 text-align: left;
     }


      .flexlink-text p {
		  font-size: 1em;
        line-height: 1.6em;
        margin-bottom: 1.5em;
      }
			


	

	
	
/*  ------------- SIDEBAR & MAIN CONTENT SECTIONS ------------------------------  */
	
	#main-content {
		order: 2;
		-webkit-order: 2;
		-ms-flex-order: 2;  
		margin-right:1em;
	}


	
/*  ----------- FLEX  ------------------------------------------  */

    	.flex-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
		margin: 0 auto;
		 max-width: 1440px;
    }
	
	.flex-container-center {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
		margin: 0 auto;
		 max-width: 1440px;
    }
	
	.nowrap {
		-webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
	}

    .flex2 {
        -webkit-flex: 1 1 calc(50% - 1em);
            -ms-flex: 1 1 calc(50% - 1em);
                flex: 1 1 calc(50% - 1em);
        margin-bottom: 1em;
    }
	
	#tour .flex2 {
        -webkit-flex: 1 1 calc(49% - 1em) !important;
            -ms-flex: 1 1 calc(49% - 1em) !important;
                flex: 1 1 calc(49% - 1em) !important;
        margin-bottom: 1em;
    }
	
	
	.flex3 {
        -webkit-flex: 0 0 calc(33% - 1em);
            -ms-flex: 0 0 calc(33% - 1em);
                flex: 0 0 calc(33% - 1em);
    }
	
	
   #staff-content .flex-container { padding-top: 15px; flex-wrap: nowrap; }

   #staff-content .flexImg { flex: 1 1 40%; -webkit-flex: 1 1 40%; -ms-flex: 1 1 40%; margin-bottom: 1em; margin-right: 2em; }
	
	#staff-content .flexImg img { width: 100% !important; max-width: 250px; }

   #staff-content .flex { flex:  1 1 55%; padding-right: 20px; }

   #staff-content .flex p {   font-size: 1.2em;   line-height: 1.5em; }


	
	.list2 {
		-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
		
	}
	
	.listbox {
		padding-top:1em;
	}
	

  .logo-img {
    flex: 0 1 calc(20% - .5em);
    text-align: center;
  }
	
   .logo-img img {
      max-width: 100%;
   }
	
	#sub-footer {
		padding-left: 15px;
	}
	
	#sub-footer h3 {
		font-size: 1.5em;
		margin-bottom: 1em;
	}
	
	#sub-footer h3.last {
     margin-top: 0;
   }
	
	#sub-footer p, #sub-footer table {
		font-size: 1.1em;
	}
	
	#sub-footer p {
		margin-bottom: 1.5em;
	}
		
}


@media screen and (min-width: 560px) and (max-width: 1099px) {
	#tour #gallery {
		width: 550px;
		max-width: 550px;
		min-width: 550px;
		margin-left: auto;
		margin-right: auto;
	}	
	
}

@media screen and (min-width: 700px) and (max-width: 1450px) {
	
	#about .flex2 img {
		margin-right: 0;
	}
	
	
	#about .flex-container {
		padding-left: 1em;
		padding-right: 1em;
	}
	
	#aboutIntro {
		margin-right: 1em;
	}
	
	#about .flex-container img {
		margin-left: 0 !important;
	}
	
	#outer-box h4 {
      max-width: 100%;
   }
	
}

@media screen and (min-width: 808px) and (max-width: 959px) {
	#pain p.overflowVisible, #dentistry p {
		margin-bottom: 5em !important;
	}
}


@media screen and (min-width: 960px) {   
	
		
   header {
	   display: flex;
	   display: -webkit-flex;
	   display: ms-flexbox;
	   flex-wrap:nowrap;
	    -webkit-flex-wrap: nowrap; 
	    -ms-flex-wrap: nowrap;
	   justify-content:  space-between;          /*    flex-start, center, space-between, space-around, flex-end    */
		 -webkit-justify-content: space-between;
		 -ms-flex-pack: justify;                  /*    start, end, center, justify  */

	   align-items: stretch;                  /*    stretch, flex-start, flex-end, center, baseline    */
		-webkit-align-items: stretch;
		-ms-flex-align: stretch;
	   
	   position: fixed;
		top:0;
		z-index: 999;
    }
	
	   
	#hdr-left {
		flex: 0 1 calc(50% - 1em);
		-webkit-flex: 0 1 calc(50% - 1em);
		text-align: left;
		margin-right: 1em;
		margin-top: .5em;
	}
	
	#hdr-left img {
		max-width: 100%;
	}

	#hdr-center {
		flex: 1 1 34%;
		margin-top: .75em;
	}

	#hdr-right {
		flex: 1 1 25%;
	}
  
	#hdr-left {
	   flex: 1 1 34%;
	    -webkit-flex: 0 1 calc(33% - 1em);
        -ms-flex: 0 1 calc(33% - 1em);
	   min-width: 250px;  /*  Actual width of logo */
   }
	

	#content {
		margin-top: 100px;
	}
	
	
	.flex-container.narrow {
		align-items: center;
	}
	
   .logos {
      max-width: 1440px; 
      padding-top: 0;
      padding-bottom: 1em;
   }
	
	nav {
	 float:right; 
   }
	
	.quote p {
      font-size: 1.5em;
	}
	
	
	#sub-footer {
      padding-bottom: 1em;
		padding-left: 2em;
	}
	
	#about .intro {
			font-size: 1.3em;
		}
	
	 #results h2 {
         font-size: 2em;
      }

    #results p {
         font-size: 1.3em;
		 	line-height: 1.4em;
      }
	
	   #staff-content .flexImg { 
			flex: 1 1 20%; 
			-webkit-flex: 1 1 20%; 
			-ms-flex: 1 1 20%; 
			margin-bottom: 1em; 
			margin-right: 2em; 
		}
    
}


@media screen and (min-width: 1024px) {  
	
	#content {
		margin-top: 120px;
	}
	
	.container {
		padding: 2em;
	}
	
	.wide {
		width: 100%;
	}
	
	.narrow {
		width: 1440px;
	}
	
	h1.title {
		font-size: 3em;
	}
	
	#services #page-title.container.clear {
     padding-top: 2em;
   }
	
	#services.container {
      padding: 1em;
   }
	
	#services {
	width: 95%;
	/* background-color: #ebebeb;  */
	margin-bottom: 2em;
	padding-bottom: 2.75em;
	padding-top: 0;
}
	
		
	#services .flex3 {
		padding-bottom: 40px;
	}
	
	#services .flex4 {
      margin-bottom: 1.5em;
		flex: 0 0 calc(25% - 1em);
   }

   #services .default_button.xlarge {
	 font-size: 19px;
     height: 85px;
	  letter-spacing: 1px;
   }
	
   #servicesHome {
      padding-top: 3em;
   }

   #servicesHome .flex4 {
      margin-bottom: 1.5em;
      flex: 0 0 calc(25% - 1em);
   }

   #servicesHome .default_button.xlarge {
       font-size: 18px;
       height: auto;
       letter-spacing: 1px;
   }

   }


@media screen and (min-width: 1100px) {
	
		#tour .flex2 {
        -webkit-flex: 0 1 calc(49% - 1em) !important;
            -ms-flex: 0 1 calc(49% - 1em) !important;
                flex: 0 1 calc(49% - 1em) !important;
        margin-bottom: 1em;
    }
	
	#tour #gallery {
		width: 550px;
		max-width: auto;
		margin-left: auto;
		margin-right: auto;
	}
	
}
	

@media screen and (min-width: 1200px) {
      #results h2 {
         font-size: 2.5em;
      }

      #results p {
         font-size: 1.5em;
      }
	
	.contactform {
      padding: 2em 1em;
      max-width: 650px;
      margin: 0 2em 3em 0;
      float: left;
   }
	
	.patientform {
      padding: 3em 2em 3em 4em;
      max-width: 80%;
      margin: 0 auto 3em;
   }

	
   #mapContact {
      float: right;
      clear: none;
      max-width: 400px;
   }
	
	#mapAddr {
     margin-top: 3em;
     float: left;
     clear: none;
     max-width: 425px;
	}
	
}


@media screen and (min-width: 1240px) {  
	.hero {
		margin-top: 120px;
	}	
	
	#content {
		width: 100%; 
	}
	
	h1.title {
      font-size: 3em;
   }

      .intro, .large {
      font-size:1.3em;
   }
	
	
	.map {
       margin: 1em 0em 2em 0;
       width: auto;
       float: right;
       clear: none;
       max-width: 40%;
       text-align: center;
  }

}

@media screen and (min-width: 1440px) {  
	
	#staff-content .flex-container, #staff-content .flex-container.bgGray {
		padding: 15px;
	}
	
	#staff-content .flexImg {
    margin-bottom: 0;
	}
	
	  #staff-content .flexImg { flex: 0 0 20%; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; margin-bottom: 0; margin-right: 2em; }
	
	#staff-content .flex { padding-top: 30px; }
	
	#services .flex-container {
      padding-left: 0;
   }
	
   .default_button.xlarge {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
      font-size: 20px !important;
   }
	
}

@media screen and (min-width: 1450px) {  
	
	#staff-content .flex-container, #staff-content .flex-container.bgGray {
		padding: 0;
	}
}


@media screen and (min-width: 960px) and (max-width: 1500px) {  	

   nav {
       margin-right: 55px; 
      }
}

@media screen and (min-width: 1500px) {
	.referral-container {
		max-width: 1440px;
	}
	
	#staff-content {
		margin-left: 0;
		margin-right: 0;
	}
	
}