/* set font size smaller on iPhone 6  only */    
@media only screen and (min-device-width: 319px)
  and (max-device-width: 413px)
  and (-webkit-min-device-pixel-ratio: 2)
{
	.small84 {
	font-size: .84rem;
	}
	
		h2 {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased; }
  
  		h3 {
  font-size: .8rem;
  -webkit-font-smoothing: antialiased; }
  
  

	
}    

.debug_border {
		border: solid 5px aqua;
	
}
div.menu {
/* 	    display: flex;   */            /* establish flex container */
/*
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    justify-content: center;
*/

}

	


ul.menu {
/*
	position:relative;
	flex-basis: 0;
	flex: 1 1 0;
	padding-bottom: .5em;

	flex: 1;
*/ /* without this microsoft edge doesn't display buttons right -- but what do I mess up by uncommenting this? */


    margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;

/*
margin: 0;
padding: 0;
width: 100%;
*/
}


.menu li {

	list-style-type: none; 
	float: left;

	
}

p.menu_centerme {
	
/*
	display: block;
	width: auto;
	margin: 1em;
	float: left;
*/
/* 	font-size: 72px; */
	
}

a.menu {
color: rgba(255,255,255,.7);
display: block;
	width:auto;
		margin: 0 1em 0 1em;
			float:left;

}

a.active_menu_item {
	color: white;
	font-weight: bold;
}

.orangelink a {
	
		    color: #ffef3c;
		    font-weight: bold;

}

.orangelink a:hover {
    text-decoration: underline
}

.text-shadow-fg li {
		text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);
}

.menu-text-shadow-fg li {
		text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.25);
}


.text-shadow-fg div {
		text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);
}



/* Firefox hack */
    @media screen and (-moz-images-in-menus:0) {
		.staff-list {
		/* 		border: 2px solid #000aff; */
		/* 		flex: 1 1 0 1; 	does nothing */
		
		/* min-width: 30.5%; */
		/*
		min-height: 130px;
		max-width: 200px;
		*/
		
/* 		min-height: 19rem; */ /* Firefox only - no idea why, but otherwise it all collapses */
		min-height: 39vh;
			
		}

    }
    

.staff-list-table {
	width: 100%;
}

.border-blue {
		border: 2px solid #000aff;
}

.border-red {
		border: 2px solid #FF0a00;
	
}

.section_buttons{
/*   margin-left:20px; */
/* height: 86px; */
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 

}

.section_buttons > div {
	
		position:relative;
	flex-basis: 0;
	flex: 1 1 0;
	padding-bottom: .5em;

	flex: 1; /* without this microsoft edge doesn't display buttons right -- but what do I mess up by uncommenting this? */


}

.location_hours{
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
}


.location_hours > div {
	
	position:relative;
	flex-basis: 0;
	flex: 1 1 0;
	flex: 1; /* without this microsoft edge doesn't display buttons right -- but what do I mess up by uncommenting this? */
	padding: .5em;

}

.location_hours_mobile {
	flex-wrap: wrap;
}

.location_hours_mobile > div {
	
    -ms-flex: 0 0 45%;		/* for old android versions */
	-webkit-flex: 0 0 45%; /* for old android versions */

	
	flex: 0 0 100%; 		/* for modern browsers */
	
/* 			flex: 0 0 45%;  */
}



.services {
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none; 	

    	/*     width: 80%; */
}

.services > li {
	flex: 0 0 25%;              /* don't grow, don't shrink, fixed width of 50% */
	text-align: left;
	padding: 1em;
}

.services_mobile > li {
	flex: 0 0 95%;              /* don't grow, don't shrink, fixed width of 50% */
	text-align: left;
	padding: .5em;
/* 	font-size: smaller; */

}

.services_mobile {
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none; 
}


.services_mobile_kitkat442 {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
	
	width: 45%;
    display: flex;              /* establish flex container */
    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none; 	
   	font-size: smaller;
 
}

.services_mobile_kitkat442 > li {
	flex: 0 0 45%;              /* don't grow, don't shrink, fixed width of 50% */
    -ms-flex: 0 0 45%;
    -webkit-flex: 0 0 45%;

	text-align: left;
	padding: .5em;
/* 	font-size: smaller; */

}


.staff {
/* 		border: solid 5px aqua; */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex;  /* NEW - Chrome */
    display: flex;              /* establish flex container */

    flex-wrap: wrap;            /* enable flex items to wrap */
    padding: 0;                 /* remove default padding */
    list-style-type: none; 	
/* height: 100%; */
/*     	    width: 80%; */
}

.staff > li {

	position:relative;
	flex-basis: 0;
	flex: 1 1 20%;
	margin: .5em;
	border-radius: 3px;
	

	
}


.staff-4up {
/* 		border: solid 5px aqua; */
    -webkit-flex-wrap: wrap; 	/* attempts to get this working in Android kitkat 4.4.2 browser */
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    min-height: 50vh;


    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 


    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    
    flex-wrap: wrap;            /* enable flex items to wrap */
    flex-direction: row;
    


    
    
    padding: 0;                 /* remove default padding */
    list-style-type: none; 	

    	/*     width: 80%; */
}

.staff-4up > li {
/* 	border: solid 5px aqua; */

	position:relative;
	flex-basis: 0;

		
	
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;         /* OLD - Firefox 19- */
/* 	width: 20%; */               /* For old syntax, otherwise collapses. */
	
    -ms-flex: 1 1 40%;
    -webkit-flex: 1 1 40%;

	
	flex: 1 1 40%;
	margin: .5em;
	border-radius: 3px;
	

}

.staff-4up-kitkat442-li {
/* 		border: solid 5px aqua; */
	
/* 	max-width: 50%; */
	
}


.staff-list-text {
/* 	border: solid 5px aqua; */
    position: absolute;
/*     -webkit-backface-visibility: hidden */
/*     height: 80%;  this made the text rise to the top of photos in Edge and Firefox */
/*     top: 26vh; */
top: auto;
    bottom: 0; 
    padding: 1em;
    text-align: left;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);

}

.staff-list-text-kitkat442 {
/* 	border: solid 5px aqua; */
/*     position: absolute; */
/*     -webkit-backface-visibility: hidden */
/*     height: 80%; */
    top: auto;
    bottom: 0; 
    padding: 1em;
    text-align: left;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);
	
}


.quality_dental_plan {
       display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 


   height: 100%;

   flex-direction: column;
      flex: 0 0 30%;
	  justify-content: center;

}

.qdp_logo_position {

/* float: left; */
/* margin-top: 40px;	 */
}


.quality-dental-plan-text {
	text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
   flex-wrap: wrap;

}

.quality-dental-plan-text p {
	margin-bottom: .5em;
}

.quality-dental-plan-text-mobile {
		text-align: left;
/*
		-webkit-columns: auto 2;
		-moz-columns: auto 2;
        columns: auto 2;
*/
		height: 100%;
}

.quality-dental-plan-text-mobile p {
	margin-bottom: .5em;
}

.quality-dental-plan-text-kitkat442 p {
	   	font-size: smaller;
}

.quality-dental-plan-text-columns {
		text-align: left;
		-webkit-columns: auto 2;
		-moz-columns: auto 2;
        columns: auto 2;
		height: 100%;
		text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);
}

	
.quality-dental-plan-text-columns p {
		margin-bottom: .5em;
}

.video-scale-hack video {
/* 	no longer needed, but easier to inactivate here than change old page logic. -zach 4/10/2020. */

/*		transform: scale(.75);  needed for Chrome and Safari only */
/*		-webkit-transform scale(.75);  Z why is this needed to make the video fit the window in Chrome? gotta investigate. Otherwise, video is zoomed 
*/
	  	}	


@media (orientation:landscape) {

	.staff-4up > li {
	
		position:relative;
		flex-basis: 0;
		flex: 1 1 20%;
		margin: .5em;
		border-radius: 3px;
		
	}

	.services_mobile > li {
		flex: 0 0 45%;              /* don't grow, don't shrink, fixed width of 50% */
		text-align: left;
		padding: .5em;
	}

	.location_hours_mobile > div {
		flex: 0 0 45%; 
	    -ms-flex: 0 0 45%;
		-webkit-flex: 0 0 45%;

	}
		
	.quality_dental_plan {
		position: absolute;
		top: 0;
    display: flex;              /* establish flex container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
		flex-wrap: wrap;
		height: 90%;
		width: 100%;
		
/* 		justify-content: center; */
	}

	.quality-dental-plan-text {
/* 		flex: 0 0 45%;               don't grow, don't shrink, fixed width of 50%  */
		flex 1 1 auto;
		text-align: left;
		flex-direction: column;
		flex-wrap: nowrap;        
		padding: 0;
		height: 100%;
		list-style-type: none;		
		text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.51);    
	}
	
	.quality-dental-plan-text-mobile {
		text-align: left;
		-webkit-columns: auto 2;
		-moz-columns: auto 2;
        columns: auto 2;
		height: 100%;
	}
	
	.quality-dental-plan-text-mobile p {
		margin-top: .5em;
	}
	
	.quality-dental-plan-text-mobile h3 {
		margin-top: 1em;
	}	
	
	h3  {
		
		  -webkit-column-span: all; 
          column-span: all;
	}
	
	img {
		
		  -webkit-column-span: all; 
          column-span: all;
	}
	
	.quality-dental-plan-text > li {
	flex: 1 1 40%;              /* don't grow, don't shrink, fixed width of 50% */
/* 	height: 50%; */
/*
	flex-wrap: wrap;
	flex-direction: row;
*/
		border: 2px solid #00ff00;

	text-align: left;
/* 	padding: .5em; */
	margin-top: .5em;

	}


	
} // end landscape mobile section


.vertical-middle {
	vertical-align: middle;
}

.box{
/*
	display: flex;
	display: -webkit-flex;
*/

/* 	flex: .3; */
	
/*   width:30%; */
/*   height:100%; */
  

/*     float:left; */
  
  
/*   background-color:white;  */
/*

  margin:25px 15px;
  border-radius:5px;
border: 2px solid #000aff;
  z-index:-10;
    zoom: 1;
    margin: 0;
    list-style: none
*/



}

.boxbuttons a {
	    color: #41270f

/* 	    color: #8acde3 */

}


.boxbuttons a:hover {
    text-decoration: underline
}

.front-address {
	    color: rgba(255, 255, 255, 0.5);
		text-shadow: 2px 2px 15px rgba(0, 0, 0, .25);


}

.box1{
        background-color: rgba(255, 150, 29, 0.65);
}
.box2{
        background-color: rgba(255, 204, 2, 0.65);
}
.box3{
	
/* width: 33%; */
/*
        background-image: url("../images/tooth_background_build.svg");
       -webkit-background-size: 100%;
        background-size: 100%;
*/
    background-color: rgba(255, 149, 28, 0.65);
/*
    background-position: left top;
    background-repeat: no-repeat;
*/
/*     color: #e14164 */
}
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    box-shadow:0px 0px 0px rgba(0, 0, 0, 0), 0 0 20px rgba(0, 0, 0, 0.4) inset;
/*         box-shadow:0px 0px 0px rgba(0, 0, 0, 0), 0 0 20px rgba(0, 0, 0, 0.1) inset; */

}


.titlebar {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  padding: 10px;
  line-height: 30px; }
  

.clear-right{

float: none;


}