/*Paul McCafferty Genealogy - Stylesheet*/


:root {
    --green: #87BD25;
    --white: #ffffff;
    --blue: #164687;
    --grey:#f5f5f5;
    --lightbeige:#F5EEE6;
    --darkbeige: #d8c7bd;
}

@font-face { font-family: OpenSansRegular; src: url(/library/fonts/OpenSans/Regular.otf); format("opentype"); }
@font-face { font-family: GillSansRegular; src: url(/library/fonts/GillSans/Regular.otf); format("opentype"); }
* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box;  }
body {margin: 0px;padding: 0px;width: 100%;height: auto;background-color: #ffffff;color: #000000;font-family: OpenSansRegular, Arial;font-size: 80%; text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
a {color: #000000;text-decoration: none;font-weight: normal; font-family: OpenSansRegular, Arial;}
ul, ol { padding: 0px; margin: 0px; font-family: OpenSansRegular, Arial;}
li { list-style-type: none; vertical-align: top; font-family: OpenSansRegular, Arial; font-size: 150%;}
h1, h2, h3, h4, h5, h6 {padding: 0px 10px 10px 0px;margin: 0px;font-size: 250%;font-weight: normal;color: #000000;font-family: OpenSansRegular, Arial;}
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select {font-size: 150%;background: transparent;border: solid #000000 1px;padding: 5px;color: #000000;box-sizing: border-box;font-family: OpenSansRegular, Arial;/*font-family: 'Font Awesome 5 Free';*/}
input[type=text], input[type=password]  {height: 30px;}
input[type=button], input[type=submit] { cursor: pointer; background-color: #000000; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
p {padding: 0px 0px 20px 0px;margin: 0px;font-size: 150%;font-family: OpenSansRegular, Arial;line-height: 1.5}
strong { font-weight: normal; font-family: OpenSansRegular, Arial;}
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; }

/************************************************* general styles ******************************************************/
.layout_standard {max-width: 2000px;margin: 0px auto 0px auto;}
.layoutheader {max-width: 2000px; margin: 0; padding: 0;}
.layoutmiddle {max-width: 2000px; margin: 0;min-height: 100vh}
.layoutfooter { max-width: 2000px;}


/************************************************* menu - header ******************************************************/
/*menu header*/
.layoutheader .toggle {display: none;}
.layoutheader_inner {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    padding: 1vh;
    padding-bottom: 0;
    justify-content: space-between;
}
/*phone number*/
.layoutheader_inner .util_textbox p {text-align: right;padding: 0;font-size: 120%;font-weight: bold;}
.layoutheader_inner .util_textbox p > a {font-weight: bold;}
.layoutheader_inner .util_textbox {padding: 1vw;}
/*menu header*/
.layoutheader .nav_simple {flex: 1;height: 100%;}
.layoutheader .nav_simple > ul {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.layoutheader .nav_simple li {padding: 0 1vw;font-size: 120%; border-bottom: 4px solid var(--white); }
.layoutheader  li > a {font-weight: bold;  }
.layoutheader .nav_simple li:hover {border-bottom: 4px solid var(--blue);}

/*logo styles*/
.layoutheader_inner .nav_linklist .links li {height: auto;box-sizing: border-box;}
.layoutheader_inner .nav_linklist li  a > img {width: 250px;height: auto;box-sizing: border-box;}

@media (max-width: 630px) {
    .layoutheader_inner {align-items: flex-end;padding: 2% 6%;}
    .layoutheader .items { display: flex; flex-direction: column;align-items: center;}
    .layoutheader_inner .util_textbox {display: none;}
    .layoutheader  .toggle {
        display: block;
        text-align: center;
        margin: 0;
        width: 30px;
        height: 50px;
    }
    .layoutheader  .toggle > svg path {fill: var(--blue);}
    .layoutheader .nav_simple.toggleon > ul {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: auto;
        background-color: var(--blue);
        opacity: 0.9;
        z-index: 50;
        text-align: center;
    }
    .layoutheader .nav_simple.toggleon li {padding: 20px;}
    .layoutheader .nav_simple.toggleon li > a {color: #FFFFFF;}
    .layoutheader .toggleoff ul {display: none;}
    .layoutheader_inner .nav_linklist li > a > img {width: 150px; height: auto;}
}

/******************************************************** footer menu* ***************************************************************/
.layoutfooter {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: var(--grey);
    height: fit-content
}
.layoutfooter .layoutfooter_inner {padding: 30px 20px;}
.layoutfooter .nav_simple > ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.layoutfooter .nav_simple > ul > li {font-size: 100%;padding: 0 20px 0 0;}
.layoutcredits > .layoutcredits_inner {
    /* background-color: var(--grey); */
    /* padding: 5px 20px 5px 10px; */
    /* display: flex; */
    /* flex-direction: column; */
    /*align-items: center;*/
}
.layoutcredits { display: none; }
/*.layoutcredits .layoutcredits_inner > div {padding: 0 0 0 20px;font-size: 60%; display: none;}*/
/*.layoutcredits > .layoutcredits_inner  > div > a {color: var(--blue); font-weight: bold;}*/

@media (max-width: 850px) {
    .layoutfooter > .layoutfooter_inner { padding: 70px 20px 5px 20px; }
    .layoutfooter .nav_simple ul li {font-size: 90%; padding: 0}
    .layoutfooter .nav_simple  ul {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: center;
    }
    .layoutcredits .layoutcredits_inner {align-items: flex-end;display: flex; padding-top: 0;}
    .layoutcredits .layoutcredits_inner > div {font-size:90%;}
}

/************************************************** Footer links ******************************************/
.privacy-page > div > .pagecontent_inner, .terms-conditions-page > div > .pagecontent_inner {padding: 5vh 20vw 20vh 20vw;}
.privacy-page  div.pagecontent.content > div > ul > li {
    list-style: disc;
    margin: 0;
    line-height: 2;
    text-align: left;
}

@media (max-width: 999px){
    .privacy-page  div.pagecontent.content > div, .terms-conditions-page  div.pagecontent.content > div {padding: 5vh 10vw; margin: 5vw; }
}


/*/************************************************* banner section ***********************************************/

.pageheader {
   height: 50vh;
   width: 100%;
   padding: 0;
   margin: 0;
}
.pageheader_inner {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center; /* Horizontally center items */
    background-color: #FFFFFF;
    padding: 0;
}
.pageheader_inner .pagebanner {
    background-size: cover;
    background-position: top;
    width: 50%;
    height:100%;
}

.pageheader_inner .pagetitle {
    width: 58%;
    background-color: var(--green);
    height: 100%;
    position: relative;
    color: var(--white);
    overflow-wrap: break-word
}

.pageheader .pagetitle_inner {
    position: absolute;
    bottom: 50%;
    transform: translate(0, 50%);
    padding-left: 50px;
    font-size: 120%;
    overflow-wrap: break-word;
    font-weight: bold;
}

@media (max-width:650px) {
    .pageheader .pagetitle_inner {
        padding-left: 10px;
        left: 0;
        font-size: 100%;
    }
}



/************************************************ components sections ************************************************************************/
/************************************************ testimonial - component  ************************************************************************/
.testimonial {
    padding: 0 20vw 5vh 20vw;
    background-color: var(--lightbeige);
    line-height: 2;
    font-style: italic;
    font-size: 120%;
}
.testimonial  div  h2 {
    color: var(--darkbeige);
    font-weight: 700;
    font-size: 600%;
    text-align: left;
    height: 60px;
    width: 100px;
    margin-bottom: 40px;
    font-family: "Gill Sans", sans-serif;
}
.testimonial div.util_textbox_inner div > p {  font-size: 100%;}
.testimonial  div.util_textbox_inner blockquote {margin: 0;}
.testimonial div.util_textbox_inner blockquote > p {font-size: 120%;}

/************************************************ contact form - component  ************************************************************************/
.pagecomponents_inner .surv_standard .intro {
    text-align: left;
    padding: 0px;
    line-height: 1.5;
    margin: 5px 0 70px 0;
}
.pagecomponents_inner .surv_standard .intro > P {padding-bottom: 5px; margin: 0;}
.pagecomponents_inner div.intro > p:nth-child(5),
.pagecomponents_inner div.intro > p:nth-child(5) > a {font-weight: 700; color: var(--green); }
.pagecomponents_inner .surv_standard { background-color: var(--grey);margin: 10vh 20vw;padding: 5vh 5vw;}
.pagecomponents_inner .form {display: flex;flex-direction: column;}
.pagecomponents_inner .form {background-color: var(--grey)}
.pagecomponents_inner div.titletxt {font-size: 200%;text-align: left;margin: 4vh auto 1vh auto;font-weight: bold;}

/* labels and inputs to display side-by-side */
.pagecomponents_inner .formbuilder .field {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px; /* Add space between each field *!*/
    height: 100%;
    gap: 5px;
}

.pagecomponents_inner .formbuilder .label { flex: 0 0 80px; /* Set a fixed width for the label */ font-size: 150%;}
.pagecomponents_inner .formbuilder .input {flex: 1;display: flex;}
.pagecomponents_inner .formbuilder .input > textarea,
.pagecomponents_inner .formbuilder .input > input {
    background-color: white;
    border: white;
    width: 90%;
    height: 100%;
    box-sizing: border-box;
}
#fb-4-div > div.input > textarea {height: 100px!important;background-color: #FFFFFF; }

/*button */
.pagecomponents_inner .form >  .buttons { width: fit-content; margin: 0px auto; }
.pagecomponents_inner .form >  .buttons > .submit {
    background-color: var(--green);
    border: none;
    color: white;
    padding: 5px 20px;
    text-align: center;
    transition: all .3s ease-in-out;
}
.pagecomponents_inner  .buttons > .submit:hover { background-color: var(--blue);}

/* Center-align the form when the confirm message is displayed */
.pagecomponents_inner .surv_standard .confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    background-color: var(--grey);
    padding: 20px;
    margin: 4% auto;
}

.pagecomponents_inner .form > div.message {
    text-align: center;
    padding: 20px;
    margin: 0 auto 20px auto;
    border: solid 4px red;
}

@media (max-width: 999px) {
    .pagecomponents_inner .testimonial { padding: 5vh 10vw; width: 100%;}
    .pagecomponents_inner .surv_standard {padding: 5vh 10vw;margin: 5vw;}
}

@media (max-width:599px) {
    .pagecomponents .surv_standard { margin: 0;}
    .pagecomponents_inner.input  textarea,
    .pagecomponents_inner.input  input {width: 100%; }
    .pagecomponents_inner .label,
    .pagecomponents_inner .buttons {display: flex;flex-direction: column;}
}

/*/************************************************* prices and services specific styles *************************************************/

.pagecontent > div.pagecontent_inner {
    padding: 5vh 20vw;
    /* max-width: 1240px; */
    /* margin: 0 auto; */
    /* padding: 60px 0; */
}

.pagecontent  .pagecontent_inner h2 {width: 100%;padding-bottom: 0;font-weight: bold;}
.prices-page  div.pagecontent.content > div > p:nth-child(1),
.services-page  .pagecontent.content > div > p:nth-child(1) {width: fit-content;float: right;}
.prices-page  .pagecontent.content > div > p:nth-child(1) > img,
.services-page  .pagecontent.content > div > p:nth-child(1) > img {border-radius: 50%;margin: 10px;}
.prices-page  div.pagecontent_inner > p,
.services-page .pagecontent_inner > p {padding-bottom: 20px;margin: 0;}
.prices-page .pagecontent_inner > p:nth-child(2),
.services-page  .pagecontent_inner > p:nth-child(2) {font-weight: bold;font-size: 250%;}


@media (max-width: 999px) {
    .pagecontent div.pagecontent_inner { padding: 5vh 10vw;}
    .pagecontent.content div.pagecontent_inner > h2 {font-size: 200%;padding-bottom: 0;}
}

@media (max-width: 699px) {
    .services-page .pagecontent_inner, .prices-page .pagecontent_inner {display: flex;flex-direction: column;}
    .services-page .pagecontent_inner > p:nth-child(1),
    .prices-page .pagecontent_inner > p:nth-child(1) {order: 2;}
    .services-page .pagecontent_inner > p:nth-child(2),
    .prices-page .pagecontent_inner > p:nth-child(2) {font-size: 200%}
    .services-page .pagecontent_inner > p,
    .prices-page .pagecontent_inner > p {order: 1;}

    /*circular images in content pages */
    .prices-page div.pagecontent_inner > p,
    .services-page  div.pagecontent_inner > p {
        box-sizing: border-box;
        width: 100%;
        flex-grow: 1;
        align-self: center;
        margin: auto;
    }
    /*circular image in text */
    .prices-page .pagecontent_inner > p:nth-child(1) > img,
    .services-page .pagecontent_inner > p:nth-child(1) > img  {
        width: 40vw;
        height: auto;
        border-radius: 50%;
        margin: auto;
    }
}

/************************************************** home page - specific styles **************************************/
.home-page .pageheader {
    background-size: cover;
    background-position: left top;
    height: auto;
}
.home-page .pageheader_inner {position: relative;}
.home-page .pagebanner {
    width:100%;
    height: 600px;
    background-size: cover;
    background-position: top;
}
.home-page .pagetitle_inner {position: relative; bottom: 0; transform: none;}
.home-page .pagetitle {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    width: auto;
    background-color: var(--green);
    padding: 20px 50px 20px 50px;
}

.home-page .pagetitle_inner {
    color: #fff;
    font-weight: bold;
    width: 100%;
    display: block;
}


/*content page*/
.wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 2%;
}
.text {align-self: flex-start;width: 100%;flex-grow: 2;}
.wrapper > p:nth-child(2) {box-sizing: border-box;margin: 0;width: 40%;flex-grow: 1;}
.wrapper p:nth-child(2) > img {
    height: auto;
    width: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    margin: 10px;
}

@media (max-width: 999px) {
    .home-page .pagebanner {width: 100%;height: 400px; position: relative}
    .layoutcontent > div > .std_contentpage .pageheader .pageheader_inner { width: 100%;position: relative;}
    .home-page .pagetitle {font-size: 200%;width: 100%;padding-left: 63px;}
    .home-page .pagetitle .pagetitle_inner {width: 100%; padding: 0;}
    .pagecontent  .pagecontent_inner .wrapper {flex-direction: column;align-items: center;}
    .wrapper > p:nth-child(2) {width: 100%; }
    .wrapper  p:nth-child(2) > img {width: 40vw;margin: auto;}

}

@media (max-width: 650px) {
    .layoutmiddle > div.layoutcontent > div > div.std_contentpage > div.pageheader {/* height: 30vh; */}
    .pageheader { height: 30vh;}
    .home-page .pageheader { height: auto}
    .home-page .pagetitle {font-size: 200%;width: 100%;padding: 20px;white-space: normal;overflow-wrap: break-word;}
    .pagecontent.content .pagecontent_inner div.wrapper {display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
    /*circular image*/
    .pagecontent .wrapper > p:nth-child(2) {
        box-sizing: border-box;
        width: 100%;
        flex-grow: 1;
        align-self: center;
        margin: auto;
    }
    /*circular image in text */
    .pagecontent .wrapper > p:nth-child(2) > img {
        width: 40vw;
        height: auto;
        border-radius: 50%;
        margin: auto;
    }
}

/*/************************************************* blog list page styles  *************************************************/

.blog-page .pagecomponents_inner {max-width:  1240px;min-height: 1200px;margin: 0 auto;padding: 5vh 0;}
.blog-page .list {display: flex;flex-direction: row;justify-content: center;gap: 10px;flex-wrap: wrap;}
.blog-page .article {display: flex;flex-direction: column;gap: 10px;align-items: flex-start;justify-content: center;max-width: 330px;padding: 20px;/* margin: 20px auto; */background-color: var(--lightbeige);}
.blog-page .list_article .article:hover {background-color: var(--darkbeige);}
.blog-page .list_article .article .headline {padding-top: 10px;font-weight: bold;}
.blog-page .list_article .article .headline a {font-weight: bold;}
.blog-page .list_article .article .image {align-self: center;/* width: 350px; */height: auto;}
.blog-page .list_article .article img {width: 100%;height: auto;margin: 0 auto;}
.blog-page .list .article h4, .article h3, .created{font-size: 150%;}

@media(max-width: 1370px) {
    .blog-page .pagecomponents_inner {/* padding: 5vh 10vw; */}
    .blog-page .list {flex-wrap: wrap;}
    .blog-page .article {max-width: 350px;margin: 10px;}
    .blog-page .article .image img {width: 100%;}
}
@media (max-width: 370px) {
    .blog-page .article {max-width: 98%; margin: 0 auto; padding: 10px;}
    .blog-page .article .image img {width: 100%;}

}
/************************************************** blog article page - specific styles **************************************/
.std_newsarticlea .pagebanner {max-width:100%;height: 500px;background-size: cover;background-position: top;}
.std_newsarticlea .pagebanner img {max-width:100%;height: 500px; margin: 0 auto}
.std_newsarticlea {
    margin: 0 auto;
    align-items: center;
    line-height: 1.7;
    min-height: 2000px;
}

.std_newsarticlea > .headline {
    float: left;
    left: 0;
    height: auto;
    background-color: var(--green);
    padding: 10px 50px 10px 150px;
    color: var(--white);
    font-weight: bold;
    width: 100%;
    display: block;
    font-size: 300%;
}

.std_newsarticlea > .created {
    font-weight: bold;
    padding: 5vh 20vw 20px 20vw;
    margin: 80px 0  0 0;
}

.std_newsarticlea > .caption {
    font-size: 150%;
    font-weight: bold;
    padding: 0 20vw 40px 20vw;
}

.std_newsarticlea > .abstract {font-size: 150%;padding: 0 20vw 20px 20vw;}
.std_newsarticlea .article {background-color: white;line-height: 1.7;padding: 0 20vw 0 20vw;}
.std_newsarticlea .image {display: none;}
.std_newsarticlea .article li {list-style: disc; padding: 0 20px;}
.std_newsarticlea .article h2, .std_newsarticlea .article h3, .std_newsarticlea .article h4  {font-size: 150%;font-weight: bold;}
.std_newsarticlea .article strong {font-weight: 900;}


@media (max-width: 999px) {
    .std_newsarticlea .pagebanner {height: 350px;}
    .std_newsarticlea > .headline {padding: 0 10vw;}
    .std_newsarticlea > .created {padding: 5vh 10vw 0 10vw; margin-top: 50px; font-size: 200%;}
    .std_newsarticlea > .caption {padding: 0 10vw; font-size:200%; }
    .std_newsarticlea > .abstract {padding: 0 10vw;}
    .std_newsarticlea .article {padding: 0 10vw;}
}