/*Editor Settings*/

#editor .wp-block-acf-sjm-three-section .acf-block-body{
	width: 100%;
}

#editor .wp-block-acf-sjm-three-section{
    max-width: 1600px;
}

/*Styling for three info area*/

.sjm-three-info{
    max-width: 2300px;
    padding: 100px 50px 100px 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #C26294;
}

.sjm-three-info.is-background{
    background-repeat: no-repeat;
    background-position: 120% 50%;
    background-size: 40%;

}

.sjm-three-info.is-background .inner-wrapper .heading{
    color: #000;
}

.sjm-three-info .inner-wrapper h4{
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
	margin-bottom: 10px;
    font-size: 24px;
	color: #000;
}

.sjm-three-info.is-background .inner-wrapper .heading strong{
    color: var(--purple);
}

.sjm-three-info.is-background .inner-wrapper .block-wrapper h3{
    color: #000;
    font-weight: 300;
}

.sjm-three-info.is-background .inner-wrapper .block-wrapper img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
	border: none;
}

.sjm-three-info .inner-wrapper{
    width: 1122px;
}

.sjm-three-info .inner-wrapper .heading{
    color: #ffffff;
    font-family: "Helvetica-Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: 65px;
    width: 65%;
    line-height: 1.1em;
    margin-top: 0;
}

.sjm-three-info .inner-wrapper .heading strong{
    font-family: helvetica;
    display: block;
}

.sjm-three-info .inner-wrapper .block-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 75px;
    text-align: center;
    color: #fff;
}

.sjm-three-info .inner-wrapper .block-wrapper h3{
    font-family: 'Helvetica';
    font-size: 26px;
    margin-bottom: 0px;
    padding: 0 25px;
}

.sjm-three-info .inner-wrapper .block-wrapper p{
    font-family: Helvetica, "Helvetica-Light", Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: 20px;
    padding: 0 25px;
}

.sjm-three-info .inner-wrapper .block-wrapper .image-wrapper i{
    font-size: 5rem;
    background: #87005B;
    border-radius: 50%;
    width: 145px;
    padding-top: 32px;
    height: 145px;
}

/*Theme Colour*/

/*!Purple*/
.theme-color-a3195c .sjm-three-info{
    background-color: #C26294;
}

/*!Dark Blue*/
.theme-color-21537e .sjm-three-info{
	background-color: var(--dark-blue);
}

/*!Midnight Blue*/
.theme-color-2b1863 .sjm-three-info{
	background-color: var(--midnight-blue);
}

/*!Dark Green*/
.theme-color-29623f .sjm-three-info{
	background-color: var(--dark-green);
}

/*Mobile View*/
@media(max-width: 767px){
    .sjm-three-info .inner-wrapper {
        width: 100%;
    }
    .sjm-three-info .inner-wrapper .block-wrapper {
        grid-template-columns: 1fr;
    }
    .sjm-three-info .inner-wrapper .heading {
        width: 100%;
    }
    .sjm-three-info{
        padding: 50px 20px;
    }

    .sjm-three-info .popup .col.right{
        padding: 0!important;
    }
    .sjm-three-info .popup .wrapper{
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

}

@media(max-width: 1208px){
    .sjm-three-info .inner-wrapper .block-wrapper img {
        object-fit: contain;
    }
    .sjm-three-info.is-background .inner-wrapper .block-wrapper h3 {
        margin-top: 0;
    }
}

.sjm-three-info .popup {
	background: rgba(100, 100, 100, 0.6);
	position: fixed;
	display: none;
	z-index: 9999;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.sjm-three-info .popup .wrapper{
    max-width: 1000px;
    width: 100%;
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: #FFFFFF;
    border-radius: 10px;
    color: #000;
    box-shadow: 2px 2px 10px 0px rgba(#000000, 0.4);
}

.sjm-three-info .popup .col.right{
    padding: 30px;
    width: 100%;
}

.sjm-three-info .popup #closePopup{
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
    font-size: 22px;
}

.sjm-three-info .popup p{
    font-family: Helvetica, "Helvetica-Light", Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: 17px;
    padding: 0px;
    text-align: left;
}

.sjm-three-info .inner-wrapper .popup img.popupImage{
    width: 100%;
    height: 50%;
}

.sjm-three-info .block.cpt{
    cursor: pointer;
}

.sjm-three-info .inner-wrapper .cpt.block-wrapper{
    grid-template-columns: repeat(auto-fill, minmax(269px, auto));
    grid-gap: 15px;
}

.sjm-three-info .inner-wrapper .cpt.block-wrapper h3{
    padding: 0;
    font-size: 20px;
    text-align: left;
    margin-top: 0;
}

.sjm-three-info.is-background .inner-wrapper .cpt.block-wrapper img{
    border-radius: 2px;
}