﻿/* Specific style pertaining to this block only, to be used whenever your block is displayed both front-end and back-end */

.custom-media-and-text.blue-light-blue {
	background-color: var(--global--color-primary-extra-light-background);
}
.custom-media-and-text.blue-light-gray {
	background-color: #f6f6f6;
}
.custom-media-and-text-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	--padding-vertical: var(--global--spacing-vertical, 2rem);
	padding-top: var(--padding-vertical);
	padding-bottom: var(--padding-vertical);
}
.custom-media-and-text-content.media-layout-left {
	flex-direction: row;
}
.custom-media-and-text-content.media-layout-right {
	flex-direction: row-reverse;
}
.custom-media-and-text-container {
	flex-basis: 50%;
}
.custom-media-and-text-container.single-container {
	flex-basis: 100%;
}
.is-vertically-aligned-center .custom-media-and-text-container {
	align-self: center;
}
.is-vertically-aligned-top .custom-media-and-text-container {
	align-self: flex-start;
}
.is-vertically-aligned-bottom .custom-media-and-text-container {
	align-self: flex-end;
}

.custom-media-and-text-container.copy-container {
	display: flex;
  flex-direction: column;
}
.custom-media-and-text-container.copy-container:not(.single-container ) {
	padding: var(--padding);
}
.custom-media-and-text-container.copy-container a {
	display: inline-block;
	width: fit-content;
}
.custom-media-and-text-container.copy-container.has-text-align-center a {
	margin-left: auto;
	margin-right: auto;
}
.custom-media-and-text-container.copy-container.has-text-align-right a {
	margin-left: auto;
}
.custom-media-and-text-container.copy-container.has-text-align-left a {
	margin-right: auto;
}
.custom-media-and-text-container.copy-container > * + * {
	margin-top: calc(var(--padding)* 0.5);
}

.custom-media-and-text-container.copy-container .larger p {
	font-size: 1.375rem;
}

.blue-light-blue .custom-media-and-text-container.copy-container.single-container {
	padding: var(--padding);
}

.custom-media-and-text-container.copy-container.copy-watermark {
	min-height: 400px;
/* 	background-repeat: no-repeat;
	background-position: 350px;
	background-size: 220px;
	background-image: url(/wp-content/themes/pso/assets/images/BackgroundWatermark.png); */
	/* justify-content: center;*/
	background-image: url(https://pso2021dev.wpengine.com/wp-content/uploads/2022/02/bgicon_house.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}

.breadcrumbs-block + .custom-media-and-text {
	padding-bottom: 2rem;
}
/* .media-container:not(.single-container) {
	max-width: 600px;
} */
.media-container > * {
	/* TODO: ...hmmmm, is this a good idea? ~620px on full size screens. */
	min-width: 100%;
	/* min-width: 600px; */
}

.media-container:not(.single-container) img {
	max-width: 100%;
    min-width: auto;
}

.media-container-video {
	position: relative;
	--color: var(--global--color-accent, #f1f1f1);
	color: var(--color);
}

.media-container-video video {
	display: block;
	min-width: 100%;
	object-fit: fill;
	height: auto;
}

.media-container-video-overlay {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.media-container-video-overlay
.media-container-video-overlay:focus-within {
	outline: var(--button--border-width) solid var(--color);
}

/* Multi background color css*/

.custom-media-and-text.accent-green .p{
   border-left:2px solid var(--green); 
}

.custom-media-and-text.accent-green:not(.icon) img{
   border-bottom: 10px solid var(--green); 
}

.custom-media-and-text.accent-green a.solid{
    background-color: var(--green);
    color:var(--green);
    border:2px solid var(--green);
}

.custom-media-and-text.accent-green a.solid:hover{
    border:2px solid var(--green);
    color:var(--green);
    background-color:transparent
}
.custom-media-and-text.accent-green a.outline{
     border:2px solid var(--green);
    color:var(--gray);
}

.custom-media-and-text.accent-green a.outline:hover{
     background-color: var(--green);
     color:var(--white);
}


.custom-media-and-text.accent-red:not(.icon) img{
   border-bottom: 10px solid var(--red); 
}


.custom-media-and-text.accent-red .p{
   border-left:2px solid var(--red); 
}

.custom-media-and-text.accent-red a.solid{
    background-color: var(--red);
    border:2px solid var(--red);
}

.custom-media-and-text.accent-red a.solid:hover{
    border:2px solid var(--red);
    color:var(--red);
    background-color:transparent;   
}


.custom-media-and-text.accent-red a.outline{
    border:2px solid var(--red);
    color:var(--gray);
}

.custom-media-and-text.accent-red a.outline:hover{
     background-color: var(--red);
     color:var(--white);
}



.custom-media-and-text.accent-blue:not(.icon) img{
   border-bottom: 10px solid var(--blue); 
}



.custom-media-and-text.accent-blue .p{
   border-left:2px solid var(--blue); 
}

.custom-media-and-text.accent-blue a.solid{
    background-color: var(--blue);
    border:2px solid var(--blue);
}

.custom-media-and-text.accent-blue a.solid{
    background-color: var(--blue);
    color:var(--blue);
    border:2px solid var(--blue);
}


section.custom-media-and-text.accent-blue.background-white.alignfull {
    background-color: #fafafa;
    margin: 0;
    padding: 20px 0px;
}

figure.wp-block-table table td {
	border: none;
}

.custom-media-and-text.accent-blue a.outline{
/*     border:1px solid var(--blue);
    color:var(--blue); */
	border: 2px solid var(--blue);
    color:var(--gray);
    background: transparent;
   
}

.custom-media-and-text.accent-blue a.outline:hover{
     background-color: var(--blue);
     color:var(--white);
}


.custom-media-and-text.accent-purple:not(.icon) img{
   border-bottom: 10px solid var(--purple); 
}

.custom-media-and-text.accent-purple .p{
   border-left: 2px solid var(--purple); 
}

.custom-media-and-text.accent-purple a.solid{
    background-color: var(--purple);
    border:2px solid var(--purple);
}

.custom-media-and-text.accent-purple a.solid:hover{
   background: transparent;
    color:var(--purple);
    border:2px solid var(--purple);
}


.custom-media-and-text.accent-purple a.outline{
    
	
	border: 2px solid var(--bgpurple);
	background:transparent;
    color:var(--gray);
}

.custom-media-and-text.accent-purple a.outline:hover{
     background-color: var(--bgpurple);
     color:var(--white);
}


.custom-media-and-text.accent-yellow .p{
   border-left:2px solid var(--yellow); 
}

.custom-media-and-text.accent-yellow:not(.icon) img{
   border-bottom: 10px solid var(--yellow); 
}


.custom-media-and-text.accent-yellow a.solid{
    background-color: var(--bgyellow);
    border:2px solid var(--yellow);
}

.custom-media-and-text.accent-yellow a.outline{
    border:2px solid var(--bgyellow);
    color:var(--gray);
}

.custom-media-and-text.accent-yellow a.solid:hover{
   background: transparent;
    color:var(--bgyellow);
    border:2px solid var(--bgyellow);
}

.custom-media-and-text.accent-yellow a.outline:hover{
    background-color: var(--bgyellow);
    color:var(--white);
}

.custom-media-and-text .ctas {
    display: flex;
    gap: 0.938rem;
}

.custom-media-and-text .ctas .cta > a {
    text-align: center;
}

.custom-media-and-text a.button:hover, .custom-media-and-text a.button:focus{
  opacity:1;
    
}

.page-id-210 .custom-media-and-text img{
    border-bottom: 0;
}

.custom-media-and-text.accent-red a.solid,
.custom-media-and-text.accent-blue a.solid,
.custom-media-and-text.accent-yellow a.solid,
.custom-media-and-text.accent-green a.solid,
.custom-media-and-text.accent-purple a.solid
{
    color:var(--white);
}

.custom-media-and-text.background-gray{
background: var(--gray-shade1);
}

.custom-media-and-text.background-white{
background:#fff;
}

/* Multi background color css*/


/* image & text css*/
.custom-media-and-text-content.media-layout-left .media-container{
    margin-right:3rem;
     text-align: center;
}

.custom-media-and-text-content.media-layout-right .media-container{
    margin-left:3rem; 
    text-align: center;
}


.button{
    padding: 15px 30px;
    border-radius: 4px;
    font-family: "din-2014", sans-serif;
    text-decoration: none;
    font-size: 24px;
}
.custom-media-and-text ul{
    margin-top: 10px;
}
.custom-media-and-text ul li{
    margin-bottom: 10px;
    list-style: disc;
    margin-left: 20px;
}


.custom-media-and-text p{
    padding-left: 10px;
     line-height: 24px;
    margin-bottom: 15px;
    font-size: 20px;
    
}

.custom-media-and-text:not(.icon) img{
    
    border-radius:0px 0px 10px 10px;
}

.custom-media-and-text .p{
    padding-left: 10px;
    border-left:2px solid var(--bggreen);
    line-height: 24px;
    
}


/* image & text css*/

/* if only text css*/
.custom-media-and-text .single-container{
        align-items: center;
    
}
.custom-media-and-text .single-container .p{
    padding: 0;
    border: 0;
}

.custom-media-and-text .single-container p{
    margin-bottom: 1rem;
    text-align: center;
}

.program-home {
	background: #fafafa!important;
    max-width: unset!important;
    margin: 0!important;
    padding: 25px 0px 20px 0px!important;
}


h3#h-programs-for-your-home {
	font-size: 3rem;
   max-width: var(--responsive--alignwide-width);
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #ececec;
    padding-bottom: var(--global--spacing-vertical, 2rem);
}

.program-top-buisness {
	max-width: unset!important;
}

h3#h-programs-for-your-business {
	font-size: 3rem;
   max-width: var(--responsive--alignwide-width);
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #ececec;
    padding-bottom: var(--global--spacing-vertical, 2rem);
}


.program-community {
	background-color: #fafafa!important;
    margin: 0px!important;
    padding: 25px 0px 20px 0px!important;
    text-align: center!important;
    max-width: unset!important;
}

h3#h-programs-for-our-community {
	font-size: 3rem;
/*     max-width: initial;
    background-color: #fafafa;
    margin: 0px auto;
    padding: 25px 0px 20px 0px;
    text-align: center; */
	 max-width: var(--responsive--alignwide-width);
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #ececec;
    padding-bottom: var(--global--spacing-vertical, 2rem);
}

section.custom-media-and-text.background-white.alignfull:last-child{
	background-color: #fff;
    margin: 0;
    padding: 20px 0px;
	
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

section.custom-media-and-text.background-white.alignfull:last-child{
	background-color: #fff;
    margin: 0;
    padding: 20px 0px;
}
/* if only text css*/

.custom-media-and-text-content h3{
font-weight:bold;
}

@media only screen and (max-width: 30rem) { /* 1024px */
   
     .custom-media-and-text-container{
        background-image: none !important;
    }
    
    
    .custom-media-and-text-content.media-layout-right .media-container, .custom-media-and-text-content.media-layout-left .media-container{
        margin-left:var(--margin) 0;
       margin-right:var(--margin) 0;
    }
    
    .custom-media-and-text-content,
	.custom-media-and-text-content.media-layout-right,
	.custom-media-and-text-content.media-layout-left {
		flex-direction: column;
        padding-top: 0;
        max-width: 100%;
	}
	.custom-media-and-text-container {
		flex-basis: 100%;
		width: auto;
	}

	.custom-media-and-text-container.copy-container.has-text-align-right {
		text-align: left;
	}
	.custom-media-and-text-container.copy-container.has-text-align-right a {
		margin-left: unset;
		margin-right: auto;
	}
	.alignwide .custom-media-and-text-container.copy-container {
		margin: 2rem;
	}
	.is-vertically-aligned-top .custom-media-and-text-container {
		align-self: center;
	}
	.custom-media-and-text-container.copy-container.copy-watermark {
		background-image: none;
		min-height: auto;
        margin: 2rem;
       
	}
    
    .custom-media-and-text .p, .custom-media-and-text p{
        border-left: 0 !important;
        padding: 0;
        font-size: 18px;
        
    }
    

    .custom-media-and-text-container.copy-container.has-text-align-left a{
            margin-left: auto;
    }
    
    .media-container:not(.single-container) img {
    border-radius: 0;
    max-width: 70%;
}
    
    .custom-media-and-text-container.copy-container h2{
        text-align: center;
    }
    
    .button{
        font-size: 18px;
    }
   
}

@media only screen and (max-width: 64em) {
    .custom-media-and-text .ctas {
        flex-direction: column;
    }

    .custom-media-and-text .cta > a {
        text-align: center;
        min-width: 16.875rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .custom-media-and-text-container.copy-container.copy-watermark{
     min-height: 200px;
    }
}
