/* Global CSS, Inner Clarity
--------------------------------------------- */
html {overflow-y: scroll; } /* Keeps page centred in all browsers regardless of content height. (Don't use this on other tags). */

html, body, div, span, h1, h2, h3, h4, p, b, u, i, dl, dt, dd, ol, ul, li, table, tr, td, th {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;  /* W3C recommends 100% here, then using ems for font sizes (100% = 1em = 16px)  */
	font-weight:normal;
	font-style:normal;
    font: inherit;
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust without disabling user zoom */
	-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    vertical-align: baseline;
    font-family: 'OpenSans', Helvetica, sans-serif; letter-spacing:0.01em; 
}

body {background-color:#fff;}

a:link, a:visited { color: #0033cc; text-decoration: none;}
a:hover, a:active { color: #af247c; text-decoration: underline; background:none;}

/* Special Nav links for use when link must be inactive i.e. when already on intended page. Use like this <a href="xxxxx.html" class="navx"> */
a.navx:link, a.navx:visited { color: #333; text-decoration: none;}
a.navx:hover, a.navx:active { color: #333; text-decoration: none; background:none;}

/* Removal of colour change on phone number in header copy while retaining phone functionality */
a.phone-text {color: #fff !important; text-decoration: none;}

/* Removal of underscore on phone number in side columns while retaining phone functionality */
a.mob { text-decoration: none;}

h1 { font-size: 1.2em; line-height: 1.3em; font-weight: 700; color: #c07f5f;}
h2 { font-size: 1em; line-height: 1.5em; font-weight: 700; color: #c07f5f;}
h3 { font-size: 0.9em; line-height: 1.2em; font-weight: 700; color: #c07f5f;}
p { font-weight:400; color: #464646; margin-bottom:1em;}

img { margin:0; border:0; width:100%; height: auto; display: block;}  /* needs display:block; to display properly in Firefox */ 

ol, ul, li { list-style: none;}

b { font-weight: 700;}
i { font-style: italic;}

table { border-collapse:collapse; border-spacing: 0; width:100%;}
td, th { text-align:left; padding:0;}

/* For placing type over topmost image - see http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image  */
#headerimage { position:relative;}
.topmostimage600 { width:100%; height:auto;}
.topmostimage770 { width:100%; height:auto;}
.topmostimage940 { width:100%; height:auto;}


/* Menu background panel and icons for small devices - for actual navigation menu, see navi-mobile.css  https://htmldog.com/techniques/showhide/ */
#mobile_nav {  /* menu background for small devices */
display: none; position: absolute; top: 0; right: 0; background: #fff; width: 75%; max-width: 340px; border-radius: 0 0 5px 5px; box-shadow: 0 0 18px 4px #b3b3b3; z-index:500;}
#mobile_nav:target { display: block;}
.access_aid {  /* menu icon position (top right) and structure for small devices */
display: block; position: absolute; top: 8px; right: 8px; width: 40px; height: 0; padding-top: 40px; overflow: hidden; border: 1px solid #b3b3b3; background: white 10px 10px / 20px 20px no-repeat; z-index:500; }
#access_nav { /* menu icon (3 bars) closed state */
background-image: -webkit-repeating-linear-gradient(#b3b3b3, #b3b3b3 3px, #fff 2px, #fff 7px);
background-image: repeating-linear-gradient(#b3b3b3, #b3b3b3 3px, #fff 2px, #fff 7px);}
#access_top { /* menu icon (X symbol) revealed state */
background-image: linear-gradient(45deg, transparent 12px, #b3b3b3 12px, #b3b3b3 15px, transparent 0), linear-gradient(-45deg, white 12px, #b3b3b3 12px, #b3b3b3 15px, white 0);}

/* Pop-up photo of angela on hover or tap */
.ap-photo-popup { width:100%; height:auto;}
a.ap-photo-popup { position: relative;}
a.ap-photo-popup span {display: none;}
a.ap-photo-popup:hover span {
  display: block;
  position: absolute; 
  padding: 0;  
  width: 100%;   /* overall width of containing box */
  height: auto; 
  width: 300px;
  top: -400px;   /* distance from item being hovered over */
  left: -420px;    /* distance from item being hovered over */
  background: #fff;  /* colour of box  */
  -moz-box-shadow: 6px 10px 10px #8c8c8c;
  -webkit-box-shadow: 6px 10px 10px #8c8c8c;  /* horiz=5 vert=4 blur=10 spread=- color=#8c8c8c (spread not specified here) */ 
  box-shadow: 6px 10px 10px #8c8c8c;
  z-index:1000;}





/* Activates a line break at Tel no. in subhead when width 610px or below */
@media screen and (min-width:610px) {.breakat610 { display:none; }}

/* Activates a line break between BACP & Imago logos when screen width is above 599px on My Practice page */
@media screen and (max-width:599px) {.linebreak { display:none; }}

/* Activates a line break in Copyright line when width 450px or below */
@media screen and (min-width:450px) {.breakat450 { display:none; }}

/* Activates a line break in 'Thank you for contacting me' line when width 390px or below */
@media screen and (min-width:390px) {.breakat390 { display:none; }}

/* Activates a line break in 'Inner Clarity Counselling' headline when width 365px or below */
@media screen and (min-width:365px) {.breakat365 { display:none; }}





/* Device-size-specific CSS
--------------------------------------------- */



/* margin for min gutter width */
@media screen and (min-width:771px) and (max-width:865px) {#main-content { margin-left:20px;}}

/* iPhone X screen width: 812 */

/* over 771px screen width */
@media screen and (min-width:771px) {
#container { max-width:940px; height:auto; padding:0; margin: 45px auto 0 auto;}
#header {width:100%; margin-bottom:3.5%; }
#sidebar-L { width: 16%; margin-left:7%; margin-right:3.5%; float: left; } 
#main-content { width: 45%; min-width:280px; max-width:430px; margin-right:3.5%; float: left; } 
#sidebar-R { width: 18%; float: left;} 
#footer { width:100%; height:15px; clear: both; vertical-align:top; background-color: #f6f6f6; color: #999; text-align: center; margin-top: 35px; padding: 12px 0 12px 0; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; margin-bottom: 5%;} 

#mobile_nav {display:none;}
#access_nav {display:none;}
.access_aid {display:none;}

/*  For placing type over header image  */
#headerimage { position:relative;}
.topmostimage600 { display:none;}
.topmostimage770 { display:none;}
.logo { position:absolute; top: 67%; left: 4.5%; width:45px; height: auto;}
#headline {color:#fff; font-size: 1.875em; font-weight:600; display:inline-block; position: absolute; top: 65%; left: 10.5%; }
#subhead { color:#fff; font-size: 1em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 80%; left: 10.5%; }

h1 { margin-top:-0.2em; margin-bottom: 3.6%;}
p { font-size: 0.85em; line-height: 1.45em; color: #464646;}
p.cop { font-size:0.75em; line-height:1.3em; text-align:center; }

a.ap-photo-popup:hover span { top: -300px; left: -400px;}
.angela-large { display:none; }

.quote-mark {width:72px; height:auto; display:inline-block; margin-bottom:0.9em;}
.quot-grey { font-size: 0.85em; line-height: 1.45em; font-style: italic; color: #999;}
.cap10 { font-size: 0.7em; line-height: 1.2em; font-style: italic; color: #464646; padding-bottom:12%;}

p.email {font-size: 0.85em; line-height: 1em;}
p.mobile {font-size: 0.8em; line-height: 1em; }
p.skype {font-size: 0.8em; line-height: 1.2em; }
p.zoom {font-size: 0.8em; line-height: 1.2em;}

.bacp-logo { width:153px; height:auto; display:inline-block; margin:20px 20px 30px 0;}
.imago-logo2 { width:63px; height:auto; display:inline-block; margin:20px 0 30px 0; }   /* For Home page only */
.imago-logo { width:63px; height:auto; display:inline-block;  margin-bottom:30px; }
.skype-logo { width:36px; height:auto; margin:18px 0 4px 0;}
.zoom-logo { width:36px; height:auto; margin:15px 0 4px 0;}

/* for Contact page, to push form into middle */
#content-wrapper {padding:0 0 40px 10%;} 
}



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


/* 601px to 770px screen width    (iPad = 768 x 1024)  */  
@media screen and (min-width:601px) and (max-width:770px) {
#container { width: 100%; height:auto; margin-top:38px;}
#header {width:95%; margin: 0 auto 4.5% auto; }
#sidebar-L { } 
#main-content { width: 45%; min-width:280px; max-width:430px; margin: 0 4% 2.7% 16%; float: left; } 
#sidebar-R { width: 20%; float: left; } 
#footer { width:100%; height:15px; clear: both; vertical-align:top; background-color: #f6f6f6; color: #999; text-align: center; margin-top: 8%; padding: 12px 0 12px 0; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; margin-bottom: 5%;} 
#footer-links { display:none; }

#navi {display:none;}
#mobile_nav { padding-left: 5%; max-width:340px;}

/*  For placing type over header image  */   
#headerimage { position:relative;}
.topmostimage600 { display:none;}
.topmostimage940 { display:none;}

/* iPhone 6 Plus/7 Plus =  414 x 736 */
.logo { position:absolute; top: 65%; left: 6%; width:42px; height: auto;}
#headline {color:#fff; font-size: 1.8em; font-weight:600; display:inline-block; position: absolute; top: 63%; left: 13%; }
#subhead { color:#fff; font-size: 0.95em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 78%; left: 13%; }

h1 { margin-top:-0.2em; margin-bottom:3.6%;}
p { font-size: 0.85em; line-height: 1.45em; color: #464646;}
p.cop { font-size:0.75em; line-height:1.3em; text-align:center;}

a.ap-photo-popup:hover span { top: -320px; left: -320px;}
.angela-large { display:none; }

.quote-mark {width:72px; height:auto; display:inline-block; margin-bottom:0.9em;}
.quot-grey { font-size: 0.85em; line-height: 1.45em; font-style: italic; color: #999;}
.cap10 { font-size: 0.75em; line-height: 1.3em; font-style: italic; color: #464646; padding-bottom:12%; }

p.email {font-size: 0.8em; line-height: 1em;}
p.mobile {font-size: 0.8em; line-height: 1em; }
p.skype {font-size: 0.8em; line-height: 1.2em; }
p.zoom {font-size: 0.8em; line-height: 1.2em;}

.bacp-logo { width:153px; height:auto; display:inline-block; margin:20px 20px 20px 0;}
.imago-logo2 { width:63px; height:auto; display:inline-block; margin:20px 0 20px 0; }   /* For Home page only */
.imago-logo { width:63px; height:auto; display:inline-block;  margin-bottom:20px; }
.skype-logo { width:36px; height:auto; margin:18px 0 4px 0;}
.zoom-logo { width:36px; height:auto; margin:18px 0 4px 0;}

/* For Contact page form */
#content-wrapper {padding:0 0 40px 8%;}
}

/* iPhone 6/7/8 landscape = 667 x 375 */
@media screen and (max-width:670px) {
.logo { position:absolute; top: 64%; left: 6%; width:42px; height: auto;}
#headline {color:#fff; font-size: 1.8em; font-weight:600; display:inline-block; position: absolute; top: 62%; left: 14%; }
#subhead { color:#fff; font-size: 0.95em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 78%; left: 14%; }
}



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



/* 481px to 600px screen width */
@media screen and (min-width:481px) and (max-width:600px) {
#container { width: 100%; height:auto; margin-top: 20px;}
#header {width:93%; margin: 0 auto 6% auto; }
#sidebar-L {}
#main-content {width:70%; margin: 0 auto; }
#sidebar-R { width:70%; margin: 0 auto; }
#footer { width:100%; height:15px; clear: both; vertical-align:top; background-color: #f6f6f6; color: #999; text-align: center; margin-top: 8%; padding: 12px 0 12px 0; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; margin-bottom: 5%;} 
#footer-links { display:none; }

#navi {display: none;}
#mobile_nav { padding-left: 7%; max-width:320px;}

/*  For placing type over header image */
#headerimage { position:relative;}
.topmostimage770 { display:none;}
.topmostimage940 { display:none;}

/* This works fine for iPhone 5/SE 320 x 568  */
.logo {position:absolute; top: 64%; left: 7%; width:37px; height: auto;}
#headline {color:#fff; font-size: 1.6em; font-weight:600; display:inline-block; position: absolute; top: 62%; left: 17%; }
#subhead { color:#fff; font-size: 0.95em; font-weight:400; letter-spacing: 0.03em; display:inline-block; position: absolute; top: 76%; left: 17%; }

h1 { margin:4% 0 3.6% 0;}
p { font-size: 0.9em; line-height: 1.45em; color: #464646; }
p.cop { font-size:0.75em; line-height:1.3em; text-align:center;}

.angela-large {width:100%; max-width:300px; height:auto; margin:20px auto 20px auto;}
.ap-photo-popup {display:none;}

.mugshotalign {width:auto; max-width:300px; margin:0 auto;}

.quote-mark {width:72px; height:auto; display:inline-block; margin-bottom:0.9em;}
.quot-grey { font-size: 0.85em; line-height: 1.45em; font-style: italic; color: #999;}
.cap10 { font-size: 0.75em; line-height: 1.25em; font-style: italic; color: #464646; padding-bottom:12%;}

p.email {font-size: 1em; line-height: 1.4em;}
p.mobile {font-size: 1em; line-height: 1.4em; }
p.skype {font-size: 0.9em; line-height: 1.3em; }
p.zoom {font-size: 0.9em; line-height: 1.3em; }

.bacp-logo { width:153px; height:auto; display:inline-block; margin:20px 20px 20px 0;}
.imago-logo2 { width:63px; height:auto; display:inline-block; margin:20px 0 20px 0; }  /* For Home page only */
.imago-logo { width:63px; height:auto; display:inline-block;  margin:20px 0; }
.skype-logo { width:36px; height:auto; margin:18px 0 4px 0;}
.zoom-logo { width:36px; height:auto; margin:18px 0 4px 0;}

#content-wrapper {padding:0 0 40px 10%;} /* For Contact page form */
}


/* ---------------------------------------- */  /* iPhone 5/SE = 320 x 568 */   /* iPhone XR = 414 x 896 */ 




/* 480px screen width (or less) */
@media screen and (max-width:480px) {
#container { width:100%; height:auto; margin-top: 20px;}
#header {width:92%; margin: 0 auto 6% auto;}
#sidebar-L {}
#main-content {width:85%; margin: 0 auto;}
#sidebar-R { width:85%; margin: 0 auto; }
#footer { width:100%; height:30px; clear: both; vertical-align:top; background-color: #f6f6f6; color: #999; text-align: center; margin-top: 8%; padding: 12px 0 12px 0; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; margin-bottom: 20%;} 
#footer-links { display:none; }

#navi {display: none;}
#mobile_nav { padding-left: 9%; max-width:300px;}

/*  For placing type over header image */
#headerimage { position:relative;}
.topmostimage770 { display:none;}
.topmostimage940 { display:none;}

/* iPhone 4 landscape = 480 x 320 */        
.logo {position:absolute; top: 61%; left: 7%; width:30px; height: auto;} 
#headline {color:#fff; font-size: 1.4em; font-weight:600; display:inline-block; position: absolute; top: 59%; left: 16%; }
#subhead { color:#fff; font-size: 0.9em; letter-spacing: 0.03em; font-weight:400; display:inline-block; position: absolute; top: 73%; left: 16%; }

h1 { margin:4% 0 3.6% 0;}
p { font-size: 1em; line-height: 1.36em; color: #464646;}
p.cop { font-size:0.8em; line-height:1.3em; text-align:center;}

.angela-large {width:100%; max-width:300px; height:auto; margin: 20px auto 20px auto;}
.ap-photo-popup {display:none;}

.mugshotalign {width:auto; max-width:300px; margin:0 auto;}

.quote-mark {width:72px; height:auto; display:inline-block; margin-bottom:0.9em;}
.quot-grey { font-size: 1em; line-height: 1.38em; font-style: italic; color: #999;}
.cap10 { font-size: 0.85em; line-height: 1.3em; font-style: italic; color: #464646;  padding-bottom:12%;}

p.email {font-size: 1em; line-height: 1.4em;}
p.mobile {font-size: 1em; line-height: 1.4em; }
p.skype {font-size: 0.9em; line-height: 1.3em; }
p.zoom {font-size: 0.9em; line-height: 1.3em; }

.bacp-logo { width:153px; height:auto; display:inline-block; margin:20px 20px 20px 0;}
.imago-logo2 { width:63px; height:auto; display:inline-block; margin:20px 0 20px 0; }  /* For Home page only */
.imago-logo { width:63px; height:auto; display:inline-block; margin:20px 0; }
.skype-logo { width:36px; height:auto; margin:18px 0 4px 0;}
.zoom-logo { width:36px; height:auto; margin:18px 0 4px 0;}

/* For Contact page form */
#content-wrapper {padding:0 0 40px 12%;}
}

/* iPhone 6 Plus/7 Plus/8 plus - portrait format =  414 x 736 */
@media screen and (max-width:472px) {
.logo {position:absolute; top: 60%; left: 7%; width:30px; height: auto;} 
#headline {color:#fff; font-size: 1.4em; font-weight:600; display:inline-block; position: absolute; top: 58%; left: 17%; }
#subhead { color:#fff; font-size: 0.9em; letter-spacing: 0.03em; font-weight:400; display:inline-block; position: absolute; top: 74%; left: 17%; }
}

/* iPhone 6/7/8 and iPhone X - portrait format = 375 px wide */
@media screen and (max-width:375px) { 
.logo {position:absolute; top: 57%; left: 6%; width:30px; height: auto;}
#headline {color:#fff; font-size: 1.4em; font-weight:600; display:inline-block; position: absolute; top: 55%; left: 17%; }
#subhead { color:#fff; font-size: 0.8em; letter-spacing: 0.03em; font-weight:400; display:inline-block; position: absolute; top: 73%; left: 17%; }
}

/* Many Samsung, LG, HTC phones = 360 wide (portrait). */
/* iPhone 4 portrait = 320 x 480 is covered by this 360 width limit */
@media screen and (max-width:360px) { 
/*  De-activates <br> at Tel no. in subhead  */
.breakat600 { display: none; }
.logo {position:absolute; top: 32%; left: 12%; width:25px; height: auto;}
#headline {color:#fff; font-size: 1.4em; line-height: 1.1em; font-weight:600; position: absolute; top: 30%; left: 22%; }
#subhead { color:#fff; font-size: 0.8em; line-height: 1.2em; letter-spacing: 0.03em; font-weight:400; position: absolute; top: 70%; left: 22%; }
}

/*  Subhead removed at widths below 290px, but must redesign site if device width below 200 px */
@media screen and (max-width:290px) { 
.logo {position:absolute; top: 35%; left: 10%; width:20px; height: auto;}
#headline {color:#fff; font-size: 1.4em; line-height: 1.1em; font-weight:600; position: absolute; top: 32%; left: 22%; }
#subhead { display: none; }
}