/*  HERO  */
.hero {
    /* background: url(/assets/hero/services-mobile.jpg), var(--green); */
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100svh;
    margin: 0 0 50px 0;
}

#saint-augustine {
    background: url(/assets/getInspired/get-inspired-images/St\ Augustine/6.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#dotties{
    background: url(/assets/getInspired/get-inspired-images/Dotties/2.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#bulleit {
    background: url(/assets/getInspired/get-inspired-images/Bulleit/6.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#kirk-and-sweeney {
    background: url(/assets/getInspired/get-inspired-images/Kirk%20&%20Sweeney/1.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
}

#hk-young {
    background: url(/assets/getInspired/get-inspired-images/HK%20Young/5.jpg?1), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#le-mone {
    background:url(/assets/getInspired/get-inspired-images/Le%20Mone/4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}    

#losophe {
    background: url(/assets/getInspired/get-inspired-images/Losophe/6.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#brightland {
    background: url(/assets/getInspired/get-inspired-images/Brightland/4.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#john-chester{
    background: url(/assets/getInspired/get-inspired-images/John%20Chester/6.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#patatus {
    background: url(/assets/getInspired/get-inspired-images/Patatus/5.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#sandkeghs {
    background: url(/assets/getInspired/get-inspired-images/SandKeghs/5.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#redemption{
    background: url(/assets/getInspired/get-inspired-images/Redemption/3.jpg), var(--green);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*  HERO END  */

/*  CONTENT  */
.orange {
color: var(--orange) !important;
padding: 30px 0 25px 0;
}
.midGrey {
color: var(--midGrey);
}
.midGrey {
color: var(--darkGrey);
}
.title {
display: inline-block;
color: var(--darkBlue);
font-size: 7em;
font-weight: 500;
padding: 25px 0;
}
.content {
display: flex;
flex-direction: column;
}
.content .contentTitle {
padding: 15px;
}
.content .contentTitle span.active {
color: var(--darkBlue);
}
.content .contentTitle span {
font-size: var(--fs-overview);
padding: 10px 0;
display: block;
color: var(--midGrey);
text-transform: uppercase;
}
.content .contentBody {
padding: 0 15px
}
.content .contentBody p {
font-size: var(--fs-body);
line-height: var(--lh-body);
padding: 0 0 25px 0;
}
.content .contentBody strong {
color: var(--orange);
}
.content .contentBody img.wideImage {
width: 100%;
padding: 25px 0;
}
.tableofcontents {
display: none;
}
/*  CONTENT END  */

/*IMAGE POSITION*/
.top{
    object-position: top;
}
.bottom{
    object-position: bottom;
}
.right{
    object-position: right;
}
.left{
    object-position: left;
}
/* IMAGE POSITION END*/

/*   GRID   */
.grid {
display: flex;
flex-wrap: wrap;
padding: 50px 0 0;
}
.grid .landscape {
display: flex;
width: 100vw;
}
.grid .portrait {
display: flex;
width: 50%;
}
.grid .landscape img, .grid .portrait img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
/*   GRID END   */


/*    LARGE SCREEN    */
@media only screen and (min-width: 1024px) 
{
/*  COMMON  */
/*  COMMON END  */

/*  HERO  */
/* .hero { */
    /* background: url(/assets/hero/services-desktop.jpg), var(--green); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */

/* } */
/*  HERO END  */

/*  CONTENT  */
.content {
    flex-direction: row;
}
.contentTitle {
    width: 30%;
    padding: 0 0 0 25px !important;
}
.contentBody {
    width: 70%;
}
.content .contentBody p {
    width: 85%;
}
.title {
    font-size: 1.8em;
}
.tableofcontents {
    position: sticky;
    top: 0;
}
/*  CONTENT END  */

/*   GRID   */
.grid {
    display: flex;
    flex-wrap: wrap;
}
.grid .block {
    width: 33%;
    overflow: hidden;
}
.grid .block a img {
    transition: all 1s;
    transform: scale(1.0);
}
.grid .block a:hover img {
    transform: scale(1.2);
}
.grid .block span {
    font-size: 3em;
    z-index: 10;
}

.grid .landscape {
    display: flex;
    width: 100vw;
    height: 100vh;
    }
.grid .portrait {
    display: flex;
    width: 50%;
    height: 100vh;
    }
/*   GRID END   */


}