/*  ---------------------------------------------------

	Your Family Doctors Theme Stylesheet 
	Created by @lukeoly January 2014
	
	--------------------------------------------------- */
	

/* Tricks */
.mask 				      { font: 0pt/0 a !important; color: transparent !important; text-shadow:none !important; } /*hides text better than text-indent */
.add-bottom 		    { padding-bottom: 10px; }
.add-heaps-bottom 	{ padding-bottom: 20px; }
.no-top             { margin-top: 0; padding-top: 0; }
.no-bottom 			    { margin-bottom: 0; padding-bottom: 0; }
.center 			      { display: block; width: auto; margin-left: auto; margin-right: auto; }
.full-width 		    { width: 100%; }
.highlight 			    { display: inline-block; background: red; color: #fff; }
					
#report-abuse 		  { display: none; }

/* Buttons  */
.button.info        { background-color: #50B1B4; }
.button.secondary   { background-color: #999; }
.right-arrow.button { padding-right: 3.5625rem; position: relative; }
.right-arrow.button:before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
    border-width: 0.475rem;
    margin-top: -0.25rem;
    right: 1.406rem; 
    border-style: solid;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}

.right-arrow.secondary:before { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #333; }


/* Site wide styles */
hr { border-color: rgb(251,171,24); border-style: dotted; border-width: 3px 0 0; }
hr.small { border-color: #999; border-width: 2px 0 0; }

/* Table styling */
table                             { background-color: transparent; border-color: rgb(251,171,24); border-style: dotted; border-width: 3px 0 0; }
table thead                       { background-color: transparent; }
table thead tr th                 { padding: 20px 10px; }
table tbody td                    { padding: 15px 10px; border-color: #999; border-style: dotted; border-width: 0 0 2px; }
table tbody tr:first-child td     { border-width: 2px 0 2px; }
table tr:nth-of-type(even)        { background-color: transparent; } /* Remove alternate row background colour */
table thead th:not(:first-child),
table tbody td:not(:first-child)  { text-align: center; }

/* Header */
header { padding-top: 15px; padding-bottom: 20px; }
/* nav */
nav.desktop 	               { padding-top: 50px; text-align: right; }
nav.desktop ul	             { float: right; }
nav.desktop li 	             { float: left; display: inline; }
nav.desktop a 	             { padding: 0 13px; border-right: 1px solid #444; color: #444; font-size: 1em; }
nav.desktop a:hover,
nav.desktop a.active 		     { color: rgb(251,171,24); }
nav.desktop li:last-child a  { padding-right: 0; border-right: 0; }

nav.desktop .header-address  { color: #888; font-size: 1rem; vertical-align: middle; display: inline-block; padding-right: 15px; }

nav.desktop a.facebook     { 
  width: 25px; height: 25px; display: inline-block; margin-top: 5px; vertical-align: top; 
  background: url(/img/icon-facebook.svg) center center no-repeat; background-size: 100%; border-width: 0;
}


/* Top-bar */
nav.tab-bar { margin-bottom: 15px; }

/* Slider */
.orbit-container  { height: 420px; overflow: hidden; }
.slider 		      { overflow: hidden; background: #ccc url(/img/loading.gif) center center no-repeat; }

/* Content Area */
h2.title { color: #888; line-height: 1; margin-bottom: 0; font-size: 3em; }

/* Footer */
footer        { position: relative; z-index: 51; padding: 10px 0; margin-top: 30px; background-color: #007FA5; }
footer:after  { 
  width: 0; 
  height: 0; 
  position: absolute; 
  left: 50%; 
  bottom: 100%; 
  margin-left: -425px; 
  border: solid transparent; 
  content: " "; 
  border-width: 15px; 
  border-color: rgba(0, 127, 165, 0); 
  border-bottom-color: #007FA5; 
}

footer p { color: #fff; }
footer small { font-size: 80%; }


/* Contact lightbox */
#map        { width: 100%!important; height: 300px!important; margin: 15px 0 30px; background-color: #F0EDE5; border: 1px solid #bbb; color: #222; }
#map img, /* Fix to stop Foundation altering Google Maps elements */
#map object, 
#map embed  { max-width: none; }

#contact b  { color: #50B1B4; }

#contact table.webform { border: none; }


/* Page Specific Styling */
/* Page - Home */
.welcome-banner {
	height: 60px; margin-top: -35px; margin-bottom: 40px; position: relative; z-index: 20;
	background-image: url(/img/home-welcome-banner-bg.svg); background-position: 50% 0; background-repeat: no-repeat;
	background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; }

.welcome-banner h3 { color: #FFFFFF; font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; font-size: 1.8rem; font-weight: 300; margin-bottom: 0; padding: 12px 0; text-align: center; }

.feature-box p { font-weight: 400; }

#home .panel.callout    { padding: 1.25rem 2rem; border:none; background: #50B1B4; }
#home .panel.callout h4,
#home .panel.callout ul,
#home .panel.callout p   { color: #fff; }

/* Page - Meet our team */
/* Magellan Styling */
.fixed.enabled        { background: transparent; overflow-y: scroll; max-height: 100%; }
.fixed.enabled .inner { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 40px; padding-left: 25px; max-width: 62.5em; }
.fixed.enabled dd     { float: none; display: block; }

#our-team .panel h4   { color: #50B1B4; }




/* Page - Services */
#services .services-grid { 
  display: flex; 
  flex-wrap: wrap;
  list-style: none;
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

#services .services-grid .panel { 
  border: none; 
  background-color: transparent;
  padding-top: 40px; 
  padding-bottom: 40px; 
  margin-bottom: 0; 
  text-align: center;
}

#services .services-grid > div { 
  flex: 1;  
  min-width: calc(100% - 20px);
  margin: 10px;
}

@media (min-width: 576px) { 
  #services .services-grid > div { 
    min-width: calc(25% - 20px); 
  }
}

@media (min-width: 768px) { 
  #services .services-grid > div { 
    min-width: calc(50% - 20px);
  }
}

@media (min-width: 992px) { 
  #services .services-grid > div { 
    min-width: calc(33% - 20px); 
  }
}




#services .services-grid .panel h5  { color: #fff; padding: 5px 0; line-height: 1.3; }

#services .services-grid .travel-clinic        { background-color: #A9C739; }
#services .services-grid .womens-health        { background-color: #FB9318; }
#services .services-grid .child-health         { background-color: #007FA5; }
#services .services-grid .after-hours          { background-color: #959595; }
#services .services-grid .mens-health          { background-color: #50B1B4; }
#services .services-grid .pregnancy	           { background-color: #E96886; }
#services .services-grid .care-plans           { background-color: #F6BD1D; }
#services .services-grid .checks	             { background-color: #7D6D53; }
#services .services-grid .work-cover           { background-color: #5F6886; }
#services .services-grid .pathology            { background-color: #9d2066; }
#services .services-grid .dietitian            { background-color: #658999; }
#services .services-grid .online-appointments  { background-color: #51578e; }

#services .services-grid .panel img         { display: block; margin: 0 auto; width: 60px; }
#services .services-grid .panel .read-more  {
	font-weight: 500; font-size: 12px; text-transform: lowercase; letter-spacing: 2px;
	color: #fff; border: 1px dotted #fff;
	padding: 5px 10px; margin: 0;
	display: inline-block; outline: none; }
	
#services .services-details h3 { text-transform: uppercase; font-size: 1.8em; }

#services dd          { display: block; float: none; }
#services dd a        { color: #007FA5; font-size: 1.1em; font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; line-height: 1.5em; margin-bottom: 0.5rem; }
#services dd.active a { color: #fff; }

#services .callout.panel h5,
#services .callout.panel p  {color: #fff; }




/* Media Specific Styles */
/* Small screens  */
@media only screen { /* Define mobile styles */ 

} 
 
@media only screen and (max-width: 40em) { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
	footer { margin-top: 0; }
	footer p { text-align: center; }
	
	.welcome-banner { height: auto; margin-top: 20px; background-image: none; background-color: #FBAB18; }
	#home .panel.callout { padding: 1.25rem 2rem 1.25rem 2rem; border:none; background-image: none; }
	
	.orbit-container { height: auto; overflow: hidden; }

}  

/* // Medium screens  */
/* min-width 641px, medium screens */ 
@media only screen and (min-width: 40.063em) { 
	header .logo { text-align: center; }
  footer p { text-align: center; }


} 

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
	nav.desktop 	    { padding-top: 20px; text-align: center; }
	nav.desktop ul	  { float: none; display: inline-block;  }
	
	.orbit-container  { height: auto; overflow: hidden; }
  
  footer p { text-align: center; }
} 

/* // Large screens  */
@media only screen and (min-width: 64.063em) { /* min-width 1025px, large screens */

}  

@media only screen and (min-width: 64.063em) and (max-width: 87em) { /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */ 

} 

/* // XLarge screens  */
@media only screen and (min-width: 85.963em) { /* min-width 1441px, xlarge screens */ 

} 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

} 

/* // XXLarge screens  */
@media only screen and (min-width: 120.063em) { /* min-width 1921px, xlarge screens */

}