@font-face {
    font-family: 'WireRegular';
    src: url('wire.eot');
    src: url('wire.eot') format('embedded-opentype'),
         url('wire.woff') format('woff'),
         url('wire.ttf') format('truetype'),
         url('wire.svg#WireRegular') format('svg');
}
/*  "Roboto",  */
* { margin:0; padding:0; font-family:  "Roboto",  "Trebuchet MS", Helvetica, sans-serif; font-size:1em; 
              line-height:1.3em; color:#00005F;  box-sizing:border-box;}

/* initialise */
header {display:-webkit-flex; display:-ms-flex; display:flex; justify-content: space-between; background-image: url("images/p205.jpg");} 
header {height: 80px;} 
footer {height: 120px;}
footer {display:-webkit-flex; display:-ms-flex; display:flex; justify-content: center; align-items:center;
              background: lightsteelblue; border-top: crimson solid 1px} 

header, footer > div {
display:-webkit-flex;
display:-ms-flex;
display:flex;
}
.funders-container {display:-webkit-flex; display:-ms-flex; display:flex; justify-content: space-around; flex-direction: row; flex-wrap: wrap; 
                            border-top:1px solid #00005F; width:62%}
.funders-container > div {
display:-webkit-flex;
display:-ms-flex;
display:flex;
margin: 20px;
}
.funders-navigate {width:62%; float:right;
}    
.clinic-container {display:-webkit-flex; display:-ms-flex; display:flex; justify-content: center; flex-direction: column; 
                flex-wrap: wrap; width:420px; padding: 0 1em; margin: 0 auto;
}
.contact-container {
width:600px;      /*  width of contact page column  */
}
a img {  
border: none;  
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin:auto;
}
img#ear {
min-width:450px;
height:292px;
} 
img#logo-gold-left, img#logo-gold-right {
  width:36%;
  height:auto;
  margin: 2px auto auto auto;
}
img#logo-gold-left {float:left;} 
img#logo-gold-right {float:right;}
img#logo {
  width:80px;
  height:auto;
  margin: 0 auto auto auto;
  }
ul.main-nav li.icon {
display: none;
}
.dropdown {
position:absolute;
width: 12em;
background: rgba(255, 255, 255, 1) !important;
margin: 0.5em 0 0 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index:1;
display:none;
}
nav {
width:100%;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index:1;
}
/* Add some top padding to the page content to prevent sudden quick movement 
(as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 40px;  
}       
article {display:-webkit-flex; display:-ms-flex; display:flex; flex-direction: row; flex-wrap: wrap-reverse; justify-content: space-around;
}
.brands {
float: right;
padding: 5px 15px 10px 50px;
}
#givelive {width:135px; height:auto;
}
#everyclick {width:97px; height:auto; margin: 0 0 0 30px;
}
.clinic-address { 
font-family:"Trebuchet MS",sans-serif;
font-size:1em;      
margin: 1em 0 1em 2em;
}
.clinic-address-brown { 
font-family:"Trebuchet MS",sans-serif;
font-size:0.925em;
color: brown;    
margin: 1em 0 1em 0em;
}

a.map {float:left;
} 
.costs-text {
width:80%;
font-family:"Trebuchet MS",sans-serif;
font-size:1em;
margin: 0 auto;
}
.charges {
float:right;
}    
 /* responsive */ 
@media only screen and (max-width: 700px) {     
  #logo-area-left, #logo-area-right {display:none;}
  #givelive {width:115px; height:auto;}
  #everyclick {width:85px; height:auto;}          
}
@media only screen and (max-width: 880px) {
  /* Header title display  */
  header {height: 90px;}
  #banner {font-size: 2.5em; margin:0.35em auto 0 auto;}
  /* reduce logo */ 
  img#logo-gold-left, img#logo-gold-right {width:48%;}
  /* allow only About to be displayed on top menu */
  ul.main-nav li:not(:first-child) {display: none;}
  /* hide first child to retain menu bar */
  ul.main-nav li:first-child {visibility:hidden;}
  /* but prevent first sub menus of About on top menu */
  ul.main-nav li:first-child ul li:first-child {display:none;} 
  /* but enable full sub menus on responsive drop downs */
  ul.main-nav.responsive li:first-child ul li:first-child {display:block;}
  /* reveal first child on drop down menus */
  ul.main-nav.responsive li:first-child {visibility:visible;}    
  ul.main-nav li.icon {
    visibility:visible;
    float: left;
    display: inline-block
  }  
  ul.main-nav.responsive {position: relative;}
  ul.main-nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;      
  }
  ul.main-nav.responsive li {
    float: none;
    display: block;
    text-align: left;
  } 
  .dropdown {
  margin: -1.5em 0 0 0;
  left: 8em;
  }
  .text-article, .statement, .clinic-address {
   font-size:0.95em; 
  }
}
@media only screen and (min-width: 881px) {
  header {height: 120px;}
  #banner {font-size:3em; margin: 0.45em 0 0 0;}     
  img#logo-gold-left, img#logo-gold-right {width:66%;}      
  img#index {display:visible;} 
}
@media only screen and (max-width: 640px) { 

}
@media only screen and (max-width: 420px) {
    .text-article .statement .clinic-address {font-size:0.85em;}
      
    #banner {font-size: 2em; margin:0.45em auto 0 auto; line-height:1.1em;}
    .brands {clear:both; width:100%;padding:0; margin: 0.5em auto 1em auto;}
     
    #everyclick{margin:0 auto;}
    /* clinic page */
    .clinic-container { width:100%;}
    #clinic-mind-logo {display:none;}
    #clinic-pav-logo  {display:none;}
    #clinic-sd-logo  {display:none;}
    #clinic-oasis-logo  {display:none;}
    #clinic-transsober-logo  {display:none;} 
    #clinic-adder1-logo  {display:none;}
    #clinic-adder2-logo  {display:none;}
    #clinic-cascade-logo  {display:none;}
    #clinic-cornerstone-logo  {display:none;}
    a.map {float:right;}
    /* prevent wrap */ 
    .costs-text {width:100%;}  
}

/*------------------------footer--------------------*/
#footer-address { 
font-size:0.75em;
text-align: center;
letter-spacing:0.015em;
padding: 0.5em 0 0.5em 0.5em;
border-top: solid 1px #00005F;
}
#logo-area { 
text-align: center;
padding: 0 0 0.5em 0.5em;
border-top: solid 1px #00005F;
}
#banner {
font-family:WireRegular,"Monotype Corsiva","Script MJ Bold",script;
font-weight:bold;
letter-spacing:0.0125em;
text-align:center;
color:gold;
text-shadow: 2px 2px 2px black;
animation-name: intro;
animation-duration: 0s;           /* keyframe color transition */
}
@keyframes intro {
  from {color: white;}
  to {color: gold;}
}
img#bullet3 {
width:3%;
height:3%;
margin:auto;
}
/* menu style */
ul.main-nav {
width:100%;
position:relative;
background: whitesmoke;
font-weight:normal;
text-align:left;
border-top: solid red 1px;
border-bottom: solid red 1px;
color:#00005F;
z-index:1;
}                       
ul.main-nav li {
list-style:none;
padding: 0.5em 0 0.5em 1.25em;
}
li.donation {
float: right;
}
/* separators only for main menu container */
ul.main-nav > li {
display:inline-block;
}
ul.main-nav li a:link, ul.main-nav li a:visited, ul.main-nav li a:focus {
text-decoration:none;
}
ul.main-nav li a:hover {
text-decoration:none;
}
ul.main-nav li a:active {
text-decoration:none;
}
ul.main-nav li:hover .dropdown {
display:block;
}
.dropdown li {
font-size:0.9em;
font-weight:normal; 
}
.dropdown > li {
display:block;
border-top:0.4em;
border-style: dotted;
border-color: lightslategrey;
border-width:1px 0 0 0;
}
.dropdown li a:link {
text-decoration:none;               
}
.dropdown li a:hover {
text-decoration:none;
color:indianred;
} 
/* menu items */
.bullet {
font-size:0.9em;
font-weight:bold ;
color:indianred;
padding:0;
margin:0;
}
.bullet-list {
font-size:1.1em;
font-weight:bold ;
color:indianred;
margin: 0 0 0 -1.5em;
}
ul.self-care {
width:90%;
margin:0.75em auto;
}
ul.self-care li {
list-style-type: none;
margin: 0.25em 0 ;
}
.ampersand {
font-size: 0.7em;
}
.ingredients {
font-family:"Trebuchet MS";
font-size:1em;
font-weight:bold;
}
/* title layout ------------------*/
#banner-brown { 
font-family:WireRegular,"Monotype Corsiva","Script MJ Bold",script;
font-weight:bold;
font-size:1.9em;
text-align:center;
padding:0 0 0.5em 0;
color:brown;
}
.title-brown { 
font-family:WireRegular,"Monotype Corsiva","Script MJ Bold",script;
width:100%;
font-weight:bold;
font-size:1.4em;
text-align:center;
margin:1em 0 0.5em 0;
color:brown;
}
.title-article {
font-family:WireRegular,"Monotype Corsiva","Script MJ Bold",script;
width:100%;
font-weight:bold;
font-size:1.4em;
text-align:center;
margin:1em 0 0.5em 0;
}
/* text layout ------------------*/
#statement-area {
width:70%;
margin: 1em auto;
max-width: 30em;
}
.statement {
font-style:normal;
font-weight:normal;
text-align:center;
padding: 1em auto;
margin: 0 0 1.25em 0;
}
.text-article {
display:inline-block;
position:relative;
border-top:1px solid #00005F;
max-width:640px;   /* -------- modify article width 640 --------- */
padding:1em;
margin:1em;
}
#vizB {
height:16em;overflow:auto;
}
/* picture layout ------------------*/
.article-pic {
display: inline-block;
max-width: 640px;      /* -------- modify picture width 640 --------- */
padding:1em;
margin:1em;
text-align: center;
}
/* internal page navigation ------------------*/
.go-to-top {
float: right;
margin: 0 auto -2.5em auto;
}
.go-to-top a:link {
text-decoration: none;
}
.go-to-top a i:hover {
color: indianred;
}
.link-cursor {
font-weight:bold;
font-size: 0.9em;
}
#previous-left {
float:left;
}   
#next-right {
float:right;
}
.link-cursor a:hover {
color: indianred;
cursor: pointer; 
}
/* clinic pages */
.clinic-day-line { 
width:100%;
border-style:solid none none none;
border-width:1px;
border-color: #8594A3 white #8594A3 white;
background-color: white;  
}
.clinic-line { 
width:100%;
border-style:dashed none none none;
border-width:1px;
border-color: #0 white #0 white;
background-color: white;  
}
.clinic-text {  
font-family:Tahoma,sans-serif;
font-size:0.9em;             
font-weight:bold;
text-align:left;
margin: 1em 0 0 0;
}
.clinic-note {
font-family:"Trebuchet MS",sans-serif;
font-size:0.85em;
font-weight:normal;
line-height:1em;
}
a.map, a.contact-map {
font-family:"Trebuchet MS",sans-serif;
font-size:0.85em;
font-style:normal;
font-weight:bold;
text-align:center;
color:brown;
text-decoration: none;
}
a.map {
margin: 0 0 1em 2.3em;
}
#clinic-mind-logo {
position: absolute;
width:5em;
height:auto;
margin: 0.4em 19.75em;
}
#clinic-sd-logo {
position:absolute;
width:6.5em;
height:auto;
margin: 1em 19em;
}
#clinic-cascade-logo {
position:absolute;
width:7em;
height:auto;
margin: 1em 1em 0 18.5em;
}
#clinic-oasis-logo {
position:absolute;
width:4.5em;
height:auto;
margin: 1em 0.6em 0 20em;
}
#clinic-transsober-logo {
position:absolute;
width:4.5em;
height:auto;
margin: 1em 0.6em 0 20em;
}
#clinic-adder1-logo {
position:absolute;
width:7em;
height:auto;
margin: 0.6em 0.6em 0 18.5em;
}
#clinic-adder2-logo {
position:absolute;
width:7em;
height:auto;
margin: 0.6em 0.6em 0 18.5em;
}
#clinic-pav-logo {                         
position: absolute;
width:5.75em;
height:auto; 
margin: 1em 19.5em;
}
#clinic-cornerstone-logo {
position: absolute;
width:4.75em;                       
height:auto;
margin: 1em 0.6em 0 20.25em;
}
.clinic-special-times {
font-family:"Arial",sans-serif;
font-size:0.75em;
font-weight:bold;
color:darkgreen;
margin:0.8em 0;
}
.clinic-special {
color: red;
}
.linksd {
font-family:"Trebuchet MS",sans-serif;
color:brown;
text-align:center;
text-decoration: none;
} 
.h3-banner {
width:30px;
height:auto;
margin:0 auto 1em auto;
}
/*--- page title ---*/
h1 {
font-family:WireRegular,"Monotype Corsiva","Script MJ Bold",script;
font-weight:bold;
font-size:2em;
letter-spacing:0.025em;
text-align:center;
margin:-10px 0 -20px 0;
padding:0 0 0 0;
color:#00005F;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
}
h3 {
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
margin:-5px 0 -5px 0;
text-align:center;
color:#00005F;
}
h2 {
font-family:Verdana,Arial,sans-serif;
font-weight:normal;
margin:-5px 0 -5px 0;
text-align:center;
}
.download {
font-family:"Trebuchet MS",sans-serif;
font-size:0.9em;
font-style:normal;
font-weight:bold;
letter-spacing:0.025em;
text-align:center;
position:relative;
width:12em;
margin: 0 auto;
border:0.4em;
border-style: dotted;
border-color: indianred;
border-width:1px;
border-radius: 5px;
padding: 2px 2px 2px 6px;
color:#00005F;
background-color: lavender; /*lightsteelblue; azure; */
}
.download a:link, .download a:visited {
color:#00005F;
text-decoration: none;
}
.download a:hover, .download a:active {
color:indianred;
text-decoration: none;
}
.acknowledgement {
font-family:Arial,sans-serif;
font-size:0.8em;
font-style:normal;
font-weight:normal;
text-align:center;
color:#00005F;
padding:0 0 3em 0;
}
#email {
position:relative;
text-align:center;
}
.bank-detail {
font-family: "Trebuchet MS",sans-serif;
font-size:1.05em;
font-style:normal;
font-weight:bold;
text-align: center;
margin: 0.5em 0;
}
/* ---------------------- how it works ---------------------- */
#ear-acupuncture-points {
position:relative;
}
.image-wrapper {
display: flex; display:-webkit-flex; display:-ms-flex; justify-content: space-around;
min-width:210px;  
}
#ear-acupuncture-points-title {
position:absolute;
top:-1.5em;
left:-2.5em;
width:23.5em;
font-family:"Arial", sans-serif;
font-size:0.9em;
text-align:right;
line-height:90%;
}
#eap{
position: absolute;
top: 22em;
left:13.5em;
font-size:0.9em;
color:white; 
}
#forebrain {
position:absolute;
top:190px; 
left:144px;
}
#sympathetic {
position:absolute;
top:92px;
left:188px;
}
#shenmen {
position:absolute;
top:108px; 
left:240px; 
}
#kidney {
position:absolute;
top:118px; 
left:226px;
}
#liver {
position:absolute;
top:138px;
left:238px;
}
#stomach {
position:absolute;
top:172px;
left:230px;
}
#upperlung {
position:absolute;
top:159px;
left:210px;
}
#lowerlung {
position:absolute;
top:186px;     /* -158 */
left:202px;     /* 85 */
}
.practioners-volunteers-title {
float:right;
padding: 0.5em 0 0 0;
width:100%;
font-family:"Arial", sans-serif;
font-size:0.8em;
text-align:center;
}
.global-alert {
  font-family:"Arial", sans-serif;
  font-size:0.8em;
  color: red;
  font-weight: bold;
  } 
.global-alert-blue {
   color: #00005F;
   font-weight: normal;
}
.global-alert-note {
   font-family:"Arial", sans-serif;
   font-size:0.8em;
   color:#00005F;
   font-weight: bold;
}
.global-alert-green {
   font-family:"Arial", sans-serif;
   font-size:0.8em;
   color:darkgreen;
   font-weight: bold;
}
.global-alert-brown {
   font-family:"Arial", sans-serif;
   font-size:0.8em;
   color:brown;
   font-weight: bold;
}
.sublist {
    margin:0.25em 0 0.35em 1.8em;
}

/* --- logos --- */
#oasis {
margin: 0 3em 0 3em;
}