.transparent-slantl {
    overflow: clip;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    width: 300%;
    height: 100%;
    position: absolute;
    transform: translateX(-50%) skewX(0deg);
}
.transparent-slantr {
    overflow: clip;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    width: 300%;
    height: 100%;
    position: absolute;
    transform: translateX(-50%) skewX(0deg);
}
.aocta-section .container { padding: 60px 0px; }
.block-angled-overlay {
    background-size:cover;
    background-position: center 20%;
    position: relative;
}

.slideheight {
    height: 650px;
}

.aoleft, .aoright {
    position: relative;
}

.aoleft-content .container.right {
    align-items: flex-end;
    text-align: right;
}

.aoleft-content .container.right .p2 p {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.aoleft-content{
    z-index: 1;
}
.aoleft-content .ast-container {
    flex-direction:column;
    padding-left:80px;
}
.aoleft-content p {
    font-size: 1.313rem;
    color: var(--white);
    text-transform: none;
    font-weight: 300;
    margin-top: 20px;
    font-family: "Montserrat", sans-serif;
}
.aoleft-content h2 {
    color: var(--white);
    font-weight:normal;
    font-size:5rem;
    font-family: "Cicero", sans-serif;
	padding-bottom: 10px;
}
.aoleft-content .h2line2 {
    color: var(--white);
    font-size:4.25rem;
    font-weight:bold;
    line-height: .85;
    font-family: "Montserrat", sans-serif;
}

@media(max-width:1399.96px) {
    .aoleft-content .h2line2 {
        font-size:4rem!important;
    }
}
@media(max-width:1199.96px) {
    .aoleft-content .h2line2 {
        font-size:3.7rem!important;
    }
}
@media(max-width:991.96px) {
    .aoleft-content .h2line2 {
        font-size:2.72rem!important;
    }
}
@media(max-width:921.96px) {
    /* In flow (not absolute) so tall content can expand the section past its
       650px min-height instead of overflowing; align-self keeps it pinned to
       the bottom of the grid cell like the old absolute positioning did. */
    .aoleft-content {
        position: relative;
        z-index: 1;
        align-self: end;
        margin-bottom: 0;
    }
    /* On mobile the section grows with the (often tall) text, so the dark
       overlay covers the whole block instead of an angled band. */
    .transparent-slantl, .transparent-slantr {
        transform: none!important;
        width: 150%!important;
        height: 100%!important;
        margin-left: -20%!important;
        top: 0;
        left: 0;
    }
    .aoleft-content .container.right {
        align-items: flex-start;
        text-align: left;
    }

    .aoleft-content .container.right .p2 p {
        align-items: flex-start;
        text-align: left;
        margin-left: unset;
        font-size:1.125rem;
    }
    .notmob { display:none; }
    .container.half.right {
        margin-right: 0!important;
        margin-left: 0!important;
    }
    .block-angled-overlay { margin-bottom: -30px; }
}
@media(max-width:767.96px) {
    .aoleft-content .h2line2 {
        font-size:2.21rem!important;
    }
}
@media(max-width:575.96px) {
    .aoleft-content .h2line2 {
        font-size:1.86rem!important;
    }
}