/* Home Version 2 */

:root {
    --service_logo_size: 130px;
    --heroblur: 6px;
}


body #hero {
    /* Prominent anchers in the hero, but no visual anchor cues */
    a.invisible_link {
        color: inherit !important;
        border-bottom: inherit !important;
    
            /* Remove the "external" icon */
            &::after {
                content: "";
                margin-left: initial !important;
                margin-right: initial !important;
            }
    }

    strong {
        color: var(--highlight_color_level8);
    }
}


#hero > section.et_pb_module > span.et_parallax_bg_wrap > span.et_parallax_bg, 
    #prehero > div.et_pb_module:first-child {
    animation: blur 5s linear 3s forwards;
}
/*
#prehero > div.et_pb_module:first-child {
    animation-delay: 1s;
}
*/
@media screen and (max-width: 980px) {
    :root {
        --heroblur: 3px;
    }
}
@keyframes blur {
    0% {
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
    }
    100% {
      -webkit-filter: blur(var(--heroblur));
      -moz-filter: blur(var(--heroblur));
      -o-filter: blur(var(--heroblur));
      -ms-filter: blur(var(--heroblur));
    }
}
  
/* Top Logo */
body.home #hero div.et_pb_fullwidth_header_container > div.header-content-container.center > div.header-content > img {	
	width:25vw;
	max-width: 280px; /*300px;*/
	min-width: 120px;
	height: auto !important;
	filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.7));
    margin-top: 20px; /*minimum space beyween the top menu and top of the logo */
}
body.home #hero div.et_pb_fullwidth_header_container > div.header-content-container.center span.et_pb_fullwidth_header_subhead {
    text-wrap: pretty;
}
p.preheading {
    padding-bottom:1em !important;
    font-weight: bold;
    color: var(--highlight_color);
}
p.preheading::before {
    content: "🏳️‍🌈 ";
}

.fp_services_accordion div.services_blurb {
    font-size:94%; 
    line-height:1.4em;
    margin-bottom:2em;
}

/* Can't do h2::before as this is managed by the accordion icons */
/* But... now that we're using TOC+'s "exclude" parameter, we have to also add a star to non spanned H2 titles. Do that via homepage functions.js */
.fp_services_accordion h2 span::before { 
    content: "⭐";
}
.fp_services_accordion .et_pb_toggle_close h2 span::before {
    filter: brightness(0.5)
}

.fp_services_accordion h2::after {
    content:"…";
}
.fp_services_accordion div.et_pb_toggle_open h2.et_pb_toggle_title {
    font-weight:500;
    margin-bottom:1em;
}

.fp_services_accordion table.fp_offerings_table {
	border:none;
}


.fp_services_accordion table.fp_offerings_table caption,
    .fp_services_accordion table.fp_offerings_table thead {
    display:none;
}



.fp_services_accordion table.fp_offerings_table td {
	border-top:none;
    vertical-align: top;
    padding-bottom: 1.4em;

}
.fp_services_accordion table.fp_offerings_table td h3 {
    margin-top:0.5ch !important;
    font-size:calc(var(--fs-h3) * 0.9);
}
/*
.fp_services_accordion table.fp_offerings_table td h3::before {
    content: "• ";
}
*/


/* Specialty / Divider section */

div.et_pb_section.section_has_divider {
    margin-block:0;
}

/* Accordion of Services*/
.fp_services_accordion .et_pb_toggle_title {
    padding-right:25px;
}
.fp_services_accordion .et_pb_toggle_close {
    padding: 10px 20px;
}

.fp_services_accordion .et_pb_toggle_content {
    padding-top:0;
}

.fp_services_accordion div.introduction {
    /*font-size: 90%; */
    line-height: 1.4em;
    margin-block: 1.5em;
}

/* Logo column */
.fp_services_accordion table.fp_offerings_table td:first-child {
    --image_padding: 10px;
    width: calc(var(--service_logo_size) + calc(var(--image_padding) * 2));
    padding-right: var(--image_padding);
    padding-left:0;
}
.fp_services_accordion table.fp_offerings_table td:first-child img {
    max-width: var(--service_logo_size);
    height:auto;
    filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
    box-shadow: 
    0 0 10px rgba(0,0,0,0.05),
    0 0 20px rgba(0,0,0,0.05),
    0 0 30px rgba(0,0,0,0.08),
    0 0 40px rgba(0,0,0,0.08);
    }

/* Padding around rounded images that don't have a transparent edge... */
.fp_services_accordion table.fp_offerings_table tr.forced_round_logos td:first-child img {
    padding: 4px; /*So the outer animation works*/
}

.fp_services_accordion table.fp_offerings_table td:nth-child(2) {
    text-wrap: pretty;
}






.fp_services_accordion table.fp_offerings_table td:first-child img,
    .fp_blurb .et_pb_main_blurb_image img,
    .fp_blurb > a > span > img, 
    img.forcehover {
    border-radius: 50% !important; 
    /*clip-path: circle(45% at 50% 50%); */
    background-position: -100% -100%,-100% -100%,-100% -100%,-100% -100%,-100% -100%,-100% -100%;
    background-size: 29% 50%, 44% 50%, 60% 50%, 29% 100%, 44% 100%, 60% 100% !important;
    background-repeat: no-repeat !important;
    transition: all 0.25s ease-in-out;
}

/* Rainbow background on hover */
.fp_services_accordion table.fp_offerings_table td:first-child img:hover,
    .fp_blurb .et_pb_main_blurb_image img:hover,
    .fp_blurb > a > span > img:hover, 
    img.forcehover {

    background-position: 0 0, 50% 0, 100% 0%, 0% 0%, 50% 0%, 100% 0% !important;

    background: linear-gradient(#E40303, #E40303), linear-gradient(#FF8C00, #FF8C00), linear-gradient(#FFED00, #FFED00), linear-gradient(#008026, #008026), linear-gradient(#24408E, #24408E), linear-gradient(#732982, #732982);
    /*linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); */
}

/*
.fp_services_accordion table.fp_offerings_table td:first-child a:has(img.forcehover) {
    display:block;
    background: linear-gradient(#E40303, #E40303), linear-gradient(#FF8C00, #FF8C00), linear-gradient(#FFED00, #FFED00), linear-gradient(#008026, #008026), linear-gradient(#24408E, #24408E), linear-gradient(#732982, #732982);
}
*/

.fp_blurb > a,
    .fp_blurb > a:hover {
    background-image: none !important;
}

.fp_blurb.emulated a {
    margin-top:0;
}

/*.fp_blog .et_pb_slide .et_pb_slide_content p.post-meta */

.fp_services_accordion table.fp_offerings_table td:nth-child(2),
    .fp_services_accordion div.introduction {
    padding-inline:0;
    font-size: 94%;
}
.fp_services_accordion table.fp_offerings_table td:nth-child(2) p {
    margin-bottom:0.5em;
    padding-bottom:0;
    line-height: 1.3em;
}

#rs_section a:not(.nopointer) {
    font-weight: bold;
    text-decoration:none !important;
    break-after: avoid;
}
#rs_section a:not(.nopointer)::after, a.witharrow::after {
    content: "\00a0↣";
    font-weight: bold;
    font-size: 126%;
    position: relative;
    text-decoration:none !important;
    display: inline-block;  /* needed to make text-decoration work */
    animation: arrowwaggle 3s linear infinite alternate;
    text-align: left !important;
    display:inline; /* keeps the arrow from breaking the line between it and the last word in the "a" element */
}
#rs_section a:not(.nopointer):hover::after, a.witharrow:hover::after {
    animation-play-state: paused;
}
@keyframes arrowwaggle {
    0%, 70% {
      transform: translateX(0); /* Works with display: inline-block */
      left: 0; /* works with display: inline */
    }
    100% {
        transform: translateX(6px);
        left: 6px;
    }
  }


a.withflagbullet::before {
    content: "🏳️‍🌈 ";
    font-size:1.5ch;
}
/*
span.lgbt_flag::before {
    animation: wave-animation 2s linear infinite alternate;
    transform-origin: 70% 70%;
}
*/
@keyframes wave-animation {
    0% {
    transform: rotate( 0.0deg)
    }
    10% {
    transform: rotate(14.0deg)
    }
    20% {
    transform: rotate(-8.0deg)
    }
    30% {
    transform: rotate(14.0deg)
    }
    40% {
    transform: rotate(-4.0deg)
    }
    50% {
    transform: rotate(10.0deg)
    }
    60% {
    transform: rotate( 0.0deg)
    }
    100% {
    transform: rotate( 0.0deg)
    }
}

.fp_blurb .et_pb_module_header {
    margin-top:0;
}
.fp_blurb a {
    margin-top:1em;
    display:inline-block
}

.fp_blurb .et_pb_main_blurb_image img {
    filter: drop-shadow(5px 9px 4px rgba(0,0,0,0.4))
}

#PromotedBlog > div.et_pb_slides > div.et_pb_slide div.et_pb_slide_content div:first-of-type {
    margin-top:1em;
}
#PromotedBlog > div.et_pb_slides > div.et_pb_slide div.et_pb_slide_content div:first-of-type p {
    font-size:110%;
}

span.lgbt_flag::before {
    content: "🏳️‍🌈";
}
h1 span.lgbt_flag {
    font-size:92%;
}
span.lgbt_flag.bullet {
    font-size:1.5ch;
}

/* Bug fix the post carousel */
div.et_pb_slider#PromotedBlog:hover .et-pb-arrow-next {
	right: 22px !important;
}
@media only screen and ( max-width: 768px ) {
    div.et_pb_slider#PromotedBlog:hover .et-pb-arrow-next {
        right: 0 !important;
    }
}

#PromotedBlog > div.et_pb_slides > div.et_pb_slide > div.et_pb_container > div > div.et_pb_slide_description > h3 {
    text-align:left !important;
}
#PromotedBlog /*> div.et_pb_slides*/ {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(221, 153, 51);
    border-image: initial;
    box-shadow: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06),inset 4px 0 0 var(--anchorline_standard) !important;
    border-left-width: 5px;
}

#PromotedBlog .et_pb_slide {
    background: none;
}
#PromotedBlog h3, #PromotedBlog .et_pb_slide_content{
    color:black !important;
    text-shadow: none;
    /*2px 2px 3px rgb(0 0 0 / 50%) !important;*/
}

#PromotedBlog > div.et-pb-controllers > a {
    background-color: black !important;
}

#PromotedBlog .et_pb_slide_overlay_container {
    backdrop-filter: unset !important;
    --bgcolorpc: 9%;
    --bgwhitepc: 30%;
    background: linear-gradient(to right bottom,rgb(255 174 58/45%) var(--bgcolorpc),rgba(255,255,255,.5) var(--bgwhitepc)),linear-gradient(to left top,rgb(255 174 58/85%) var(--bgcolorpc),rgba(255,255,255,1) var(--bgwhitepc)) !important;

}

/* Reinstate the saturation on the Services Accordion */
div.fp_services_accordion.et_had_animation {
    transition: filter 1s linear;
    filter: saturate(1);
}


@media only screen and ( max-width: 980px ) {

    /* Amend the order of modules in the Relationship Services section */
    /*
    #rs_section {
        display:flex;
        flex-direction:column;
    }
    #rs_section .et_pb_row :nth-child(1) { order: 1; }
    #rs_section :nth-child(2) { order: 3; }
    #rs_section :nth-child(3) { order: 2; }
    #rs_section :nth-child(4) { order: 4; }
    #rs_section :nth-child(5) { order: 5; }  
*/

    span.lgbt_flag.bullet {
        position: relative;
        top:-1px;
    }
    h1 span#counselling_relationships span {
        top: 4px;
    }
    h1 span.lgbt_flag {
        font-size: 80%;
    }

    #PromotedBlog > div.et-pb-controllers {
        bottom: 1em;
    }
    #PromotedBlog .et-pb-slider-arrows {
        display:none;
    }
    #PromotedBlog .et-pb-controllers {
        bottom:0;
    }
    #PromotedBlog > div.et_pb_slides > div.et_pb_slide > div.et_pb_container > div > div.et_pb_slide_description > h3 {
        text-align:inherit !important;
    }


    .rs_section a {
        text-align: left;
    }

    .fp_services_accordion div.introduction {
        margin-block: 0.5em 1.5em;
    }
    #rs_section .et_pb_row .et_pb_column:first-child {
        margin-bottom:0;
    }
    #stop_press_section, #stop_press_section > .et_pb_row {
        width:100%;
    }
    p.preheading {
        font-size:75%;
        text-align: left;
    }
    .fp_services_accordion table.fp_offerings_table td:first-child {
        --image_padding: 6px;
        padding-right: var(--image_padding);
        padding-left:0;

    }
    
    .fp_services_accordion > .et_pb_accordion_item > .et_pb_toggle_content > p > a,
    .fp_services_accordion > .et_pb_accordion_item > .et_pb_toggle_content > a {
        font-size:90%;
    }
    
    #stop_press_section img {
        width: 180px;
    }
    #Prices_Held_Button {
        top:-50px;
    }

    h1 {
        line-height: 0.9em !important;
    }
    h1 span.h1 {
        display:block;
        font-size:var(--fs-h3);
        margin-top: 0.3em;
        line-height:1.0em;
    }    
}

@media only screen and ( max-width: 767px ) {

    #PromotedBlog.et_pb_post_slider .et_pb_slide.et-pb-active-slide .et_pb_slide_description, #PromotedBlog .et_pb_post_slider .et_pb_slide.et-pb-active-slide .et_pb_slide_image {
        opacity:1;
    }
    #PromotedBlog .et_pb_slide_image, #PromotedBlog .et_pb_slide_video {
        display:block !important;
    }

    #PromotedBlog .et_pb_slide  {
        padding-top:1em;
    }
}

@media only screen and ( max-width: 480px ) {
    :root {
        --service_logo_size: 100px;
    }

    span.lgbt_flag.bullet {
        top:-2px;
        font-size: 1.2ch;
    }

    span#counselling_relationships span {
        top:4px;
    }

    .fp_services_accordion table.fp_offerings_table td {
        padding-top:0;
    }
    .fp_services_accordion table.fp_offerings_table td:nth-child(2) {
        font-size:80%;
    }
    .fp_services_accordion table.fp_offerings_table td:nth-child(2) h3 {
        margin-top:0 !important;
    }

    .fp_services_accordion table.fp_offerings_table td:nth-child(2) a {
        line-height: 1.3em;
        display: inline-block;
        padding-top: 0.25em;
    }
    
    #Prices_Held_Button {
        top:-50px;
    }
    #stop_press_section img {
        width: 156px;
    }

    div.fp_services_accordion div.et_pb_toggle_open {
        padding: 20px 15px;
    }

    #hero > section > div.et_pb_fullwidth_header_container > div.header-content-container > div {
        margin-top:0.4em !important;
    }
}

@media screen and ( max-height: 480px ) and (orientation: landscape) {
    /* Make sure a landscape smartphone has enough height in the hero */
    body.home #hero div.et_pb_fullwidth_header_container {
        min-height: 600px !important;

        & > div.header-image-container > div.header-image {
            padding-top:100px;
            width: 75%;
            margin-block: auto;
            display: inline-block;
        }
    }
}
    


.fade-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 3s ease;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#hero div.header-image-container.bottom {
    margin-bottom:0;
}

@media only screen and ( max-width:480px) {
    #hero div.header-image-container.bottom {
        margin-bottom:4em;
    }   
}