/* In this file: 1) For title-heading; 2) For 'by me'; 3) For subtitle/statement underneath title, in header*/


/* =================================================================*/


/* 1) For 'HypPsychologist' title-heading*/

#title_container_index,
#title_container {
margin:0;
padding:0;
text-align: center;
/*margin-top:45px;*/
display:block;
position: relative;
/* MUST use 'top' ao margin-top.  Using margin-top stopped the index page from scrolling filly to the top, with the 'to top of page' scrolls. Creates a gap at the very top*/
top: 25px;
}

#title_container_index h1, #title_container h1  {
margin:0;
/*Margin left and right just so the title-heading never bangs against screen edges*/
margin-left:10px;
margin-right:10px;
line-height:1;
/*So text's background isn't full width*/
display: inline-block;
background-color: rgba(0, 0, 0, 0.53);
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
color: #ffefd5;
color:;
font-size: 40px;
font-family:'source_sans_proitalic';
 font-family: 'caviar_dreamsregular';
font-family:'Poiret One';
/*font-family: 'gothic_ultra_otregular';*/
line-height:1;
/*Higher padding-value for the bottom is to include the y and the g of 'hypnotherapy psychologist'*/
padding: 3px 3px 8px 3px;
}


/*MQ for 'HypPsychologist' title-heading */

/* pre-pre-tablet size, title-heading. Just to provide another stage of text-size reduction.*/
@media screen and (max-width: 900px){
#title_container_index h1, #title_container h1 {
font-size: 37px;
color:;
}
}

/*pre-tablet size*/
@media screen and (max-width: 779px){
#title_container_index h1, #title_container h1 {
font-size: 35px;
color:;
}
}

/*tablet size*/
@media screen and (max-width: 679px) {
#title_container_index h1, #title_container h1 {
font-size:30px;
color:;
}
}

/*pre-mobile*/
@media screen and (max-width: 500px)  {
/* Needed to raise title a bit (LATER: was used when title and 'by me' were a bit lower).  Else title and 'by me' look a bit too low down in small size, and subtitle barely clears man's hand.  'By me' is correspondingly raised by the same value. */
#title_container_index {
top: ;
}
/*To see when this MQ happens*/
#title_container_index h1 {
color:; 
}
}

/* Mobile. */
@media screen and (max-width: 425px)  {
#title_container_index h1, 
#title_container h1 {
font-size: 26px;
margin-left: 20px;
margin-right: 20px;
color:;
}
}

/*small mobile size. Occurs around when heading wraps. Effects seen on Apple, not on Samsung J6 - whose screen is 360px wide*/
@media screen and (max-width: 355px) {
#title_container h1,  #title_container_index h1{
color:;
/*Reduces the excess shaded padding, which is on the right and left when the heading wraps*/
margin-left: 60px;
margin-right: 60px;
}
}

/*END: MQ for 'HypPsychologist' title-heading */


/*END: 1) 'HypPsychologist' title-heading*/


/* =================================================================*/


/* 2) For 'by me' */

#byme_container_index, .byme_container_pages2-6 {
text-align: center;

/*Margin left and right just so the never bangs against screen edges. Could be possible once 'Hypnotherapy Psychologist' has wrapped, in small screen, thus making 'be me' the widest text.*/
margin-left: 10px;
margin-right: 10px;
background-color:;
display: block;
position: relative;
/*margin-top would probably work instead, but because margin-top on title_container_index caused a problem with scrolling fully to top, and for consistency, 'top' is here instead*/
top: 35px;
}

#byme_container_index h2, .byme_container_pages2-6 h2 {
margin:0;
/*So text's background isn't full width*/
display: inline-block;
background-color: rgba(0, 0, 0, 0.53);
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
font-family: 'source_sans_proitalic', 'pt_sansitalic', 'arial', sans-serif;
font-weight: normal;
font-size: 24px;
font-style: italic;
padding: 2px 2px 2px 2px;
color: #ffefd5;
line-height:1;
}


/*MQ for 'by me'*/


/* pre-pre-tablet size, title-heading. Just to provide another stage of text-size reduction.*/
@media screen and (max-width: 900px){
#byme_container_index h2, .byme_container_pages2-6 h2 {
font-size: 23px;
color:;
}
}

/*pre-tablet size*/
@media screen and (max-width: 779px) {
#byme_container_index h2, .byme_container_pages2-6 h2 {
font-size: 22px;
color:;
}
}

/*tablet size*/
@media screen and (max-width: 679px) {
#byme_container_index h2, .byme_container_pages2-6 h2 {
font-size:20px;
color:;
}
}

/*pre-mobile*/
@media screen and (max-width: 500px)  {
#byme_container_index {
/* Needed to raise 'by me' a bit (LATER: was used when title and 'by me' were a bit lower).  Else title and 'by me' look a bit too low down in small size, and subtitle barely clears man's hand.  The title is correspondingly raised by the same value. */
top: ;
}
}

/*END: MQ for 'by me'*/


/* END: 2) For 'by me' */


/* =================================================================*/


/* 3) Subtitle/value-proposition  */


/* 3A) Subtitles/value-proposition on header-image * /


/* 3AiFor subtitle (ON-TOP-OF header-image), index page, FS*/
#subtitle_container_index {
text-align: center;
position: absolute;
/* marg l & r were 30% each*/
margin-left: 30%;
margin-right: 30%;
bottom: 70px;
background-color: ;
}
#subtitle_container_index h2 {
margin: 0;
padding:0;
background-color: rgba(0, 0, 0, 0.53); 
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-weight: normal;
font-size: 21px;
font-style: italic;
padding: 3px 3px 3px 3px;
color: #ffefd5;
color:;
line-height: 1;
display: none;
}


/* 3Aii For subtitle/value-proposition (ON-TOP-OF header-image), non-index pages, FS*/

/*Subtitle, pages 2 to 6*/
.subtitle_container_pages2-6 {
text-align: center;
position:absolute;
/*Can have smaller margins on pages 2-6 than index page cos is no 'library man' to avoid covering up*/
margin-left: 20%;
margin-right: 20%;
bottom:10px;
}
.subtitle_container_pages2-6 h2 {
margin: 0;
padding:0;
background-color: rgba(0, 0, 0, 0.53);
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-weight: normal;
font-size: 21px;
font-style: italic;
padding: 3px 3px 3px 3px;
color: #ffefd5;
color:;
line-height: 1;
display: none;
}



/* 3B) Subtitles/value-proposition BELOW header * /

/* 3Bi) For subtitle/value-proposition below header, index page*/
.subtitle_container_index_belowheader {
/* If was 'inline block' instead here, and/or if this div isn't 'display: none' in MQ, then is a problem: margins top and bottom here inject a space even though the div is not displayed (as when width & height are too big for the div to be displated).*/
display: block;
text-align: center;
margin-left: 10%;
margin-right: 10%;
/*Controls space between bottom of header-image and the div below it - be this be the subtitle (if displayed) or the content_container, when the subtitle isn't displayed below the image)*/
margin-top: 0px;
/*Controls space between bottom of the displayed subtitle and the top of content_container_index*/
/*Match this value to that for padding-top on content_container_index, .content_container_about, .content_container_approach, .content_container_services, .content_container_faq, .content_container_contact. Doing this will ensure equal space above and below the lower subtitle (the one that's displayed below the header. (Space above the belowheader subtitles is sonctrolled by margin-bottom on on them, and by padding-top on the content-containers.)*/
margin-bottom: 20px;
}
.subtitle_container_index_belowheader h2 {
margin: 0;
padding:0;
/*pn.  So background isn't full width*/
display: inline-block;
background-color: rgba(0, 0, 0, 0.53);
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-weight: normal;
font-size: 19px;
font-style: italic;
padding: 6px 6px 6px 6px;
color: #ffefd5;
color:;
line-height: 1;
}

/* 3Bii) For subtitle/value-proposition below header, non-index pages*/
.subtitle_container_pages2-6_belowheader {
/* If was 'inline block' instead here, and/or if this div isn't 'display: none' in MQ, then is a problem: margins top and bottom here inject a space even though the div is not displayed (as when width & height are too big for the div to be displated).*/
display: block;
text-align: center;
margin-left: 10%;
margin-right: 10%;
/*Controls space between bottom of header-image and the div below it - be this be the subtitle (if displayed) or the content_container, when the subtitle isn't displayed below the image)*/
margin-top: 0px;
/*Controls space between bottom of the displayed subtitle and the top of content_container_index*/
/*Match this value to that for padding-top on content_container_index, .content_container_about, .content_container_approach, .content_container_services, .content_container_faq, .content_container_contact. Doing this will ensure equal space above and below the lower subtitle (the one that's displayed below the header. (Space above the belowheader subtitles is sonctrolled by margin-bottom on on them, and by padding-top on the content-containers.)*/
margin-bottom: 20px;
}
.subtitle_container_pages2-6_belowheader h2 {
margin: 0;
padding:0;
/*pn.  So background isn't full width*/
display: inline-block;
background-color: rgba(0, 0, 0, 0.53);
/*Darker background */
background-color: rgba(0, 0, 0, 0.63);
font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-weight: normal;
font-size: 19px;
font-style: italic;
padding: 6px 6px 6px 6px;
color: #ffefd5;
color:;
line-height: 1;
}


/* MQ GENERAL pre-pre-tablet size, For 3) Subtitle/Value-Proposition.  Just to provide another stage of text-size reduction.*/

@media screen and (max-width: 900px){
#subtitle_container_index h2{
font-size: 20px;
color: ;
}
}
@media screen and (max-width: 900px){
.subtitle_container_pages2-6 h2{
font-size: 20px;
color: ;
}
}


/* MQ GENERAL pre-tablet size, For 3) Subtitle/Value-Proposition.  Just to provide another stage of text-size reduction. */

@media screen and (max-width: 779px){
#subtitle_container_index h2{
margin-left: ;
margin-right: ;
font-size: 19px;
color: ;
}
}

@media screen and (max-width: 779px){
.subtitle_container_pages2-6 h2{
font-size: 19px;
color: ;
}
}
/* END: MQ GENERAL pre-tablet size, For 3) Subtitle/Value-Proposition*/






/* MQ for DISPLAY ON-OFF REGULATION, For 3) Subtitle/Value-Proposition*/

@media screen and (min-width: 725px) and (min-height: 430px) {

#subtitle_container_index h2 {
display: inline-block;
}
.subtitle_container_pages2-6 h2 {
display: inline-block;
}

/* It is important that this container, as well as the h2 within it, has display: none.  If it doesn't the top and bottom margins of the div will create a visible space, even though the below header subitle isn't displayed. */ 
.subtitle_container_index_belowheader {
display: none;
}
.subtitle_container_index_belowheader h2 {
display: none;
}

/* It is important that this container, as well as the h2 within it, has display: none.  If it doesn't the top and bottom margins of the div will create a visible space, even though the below header subitle isn't displayed. */ 
.subtitle_container_pages2-6_belowheader {
display: none;
}
.subtitle_container_pages2-6_belowheader h2 {
display: none;
}

}

/* END: MQ for DISPLAY ON-OFF REGULATION, For 3) Subtitle/Value-Proposition */


/* END: 3) Subtitle/value-proposition  */


/*       END FILE     */