.featured-image {
--featured-image-height-standard: 300px;
--featured-image-height-large: 500px;
--featured-image-height-small: 200px;
--featured-content-max-width: 500px;
--overlay-colour-start: rgba(13, 60, 99, 0.9);
--overlay-colour-end: rgba(13, 60, 99, 0);
}
.featured-image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.featured-image > div.wrap {
min-height: var(--featured-image-height-standard);
}
.featured-image.featured-image-size-large > div.wrap {
min-height: var(--featured-image-height-large);
}
.featured-image.featured-image-size-small > div.wrap {
min-height: var(--featured-image-height-small);
}
.featured-image > div.wrap {
display: flex;
align-items: center;
justify-content: center;
}
.feature-image-content {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--featured-content-max-width);
text-align: center;
}
.feature-image-content * {
color: var(--idc-colour-white);
}
.feature-image-content h1,
.feature-image-content h1 strong {
font-weight: var(--font-weight-bold);
}
.featured-image .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30%;
z-index: 0;
background: linear-gradient(var(--overlay-colour-start), var(--overlay-colour-end));
max-width: none;
}
@media screen and (max-width: 1000px) {
.featured-image {
--featured-image-height-standard: 300px;
--featured-image-height-large: 350px;
--featured-image-height-small: 150px;
--featured-content-max-width: 300px;
}
}
@media screen and (max-width: 781px) {
.featured-image .wp-block-buttons a.wp-element-button {
display: inline-block;
width: auto;
}
}.idc-icon-connected,
.idc-icon-connected h6 {
text-align: center;
color: var(--idc-colour-dark-blue);
position: relative;
}
.idc-icon-connected h6 {
margin: 0;
}
.idc-icon-connected .icon {
display: block;
margin: 0 auto 20px auto;
border: 2px solid var(--idc-colour-light-blue);
border-radius: 50%;
width: 150px;
height: 150px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.idc-icon-connected::before,
.idc-icon-connected::after {
content: "";
position: absolute;
width: calc(((100% - 150px) / 2) + (var(--container-gap) / 2));
height: 2px;
background: var(--idc-colour-light-blue);
top: 74px;
left: calc((var(--container-gap) / 2) * -1);
}
.idc-icon-connected::after {
left: auto;
right: calc((var(--container-gap) / 2) * -1);
}
.wp-block-column:first-child .idc-icon-connected::before {
display: none;
}
.wp-block-column:last-child .idc-icon-connected::after {
display: none;
} @media screen and (max-width: 1000px) {
.idc-icon-connected .icon {
width: 120px;
height: 120px;
}
.idc-icon-connected::before,
.idc-icon-connected::after {
width: calc(((100% - 120px) / 2) + (var(--container-gap) / 2));
top: 59px;
}
} @media screen and (max-width: 781px) {
.idc-icon-connected,
.idc-icon-connected h6 {
text-align: left;
}
.idc-icon-connected {
display: flex;
gap: var(--container-gap);
justify-content: flex-start;
align-items: center;
}
.idc-icon-connected .icon {
margin: 0;
width: 120px;
}
.idc-icon-connected .content {
width: calc(100% - 120px - var(--margin-p));
}
.idc-icon-connected::after {
display: none;
}
.idc-icon-connected::before {
height: calc(((100% - 120px) / 2) + var(--margin-p));
width: 2px;
top: calc(var(--margin-p) * -1);
left: 59px;
}
}.idc-icon {
text-align: center;
}
.idc-icon img {
margin-left: 0;
margin-right: 0;
width: auto;
height: 70px;
}
.idc-icon-title {
margin-top: 5px;
font-weight: var(--font-weight-medium);
}
@media screen and (max-width: 1200px) {
.idc-icon img {
height: 60px;
}
}
@media screen and (max-width: 800px) {
.idc-icon img {
height: 50px;
}
}.idc-content-image-columns-block {
--image-width: 40%;
margin: 0;
margin-top: var(--container-gap);
padding: 0;
position: relative;
}
.idc-content-image-columns-block:first-of-type {
margin-top: 0;
}
.idc-content-image-columns-block .idc-content-image-columns-image {
position: absolute;
top: 0;
left: 0;
width: var(--image-width);
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-top-left-radius: var(--box-border-radius);
border-bottom-left-radius: var(--box-border-radius);
}
.idc-content-image-columns-block .idc-content-image-columns-content {
text-align: left;
background: var(--idc-colour-white);
padding: var(--box-padding);
margin-left: var(--image-width);
border-top-right-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.idc-content-image-columns-block .idc-content-image-columns-content,
.idc-content-image-columns-block .idc-content-image-columns-content .wp-block-button.reverse a {
color: var(--idc-colour-text);
}
.idc-content-image-columns-block .idc-content-image-columns-content h4 {
color: var(--idc-colour-dark-blue);
}
.idc-content-image-columns-block.image-pos-right .idc-content-image-columns-image {
left: auto;
right: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.idc-content-image-columns-block.image-pos-right .idc-content-image-columns-content {
margin-left: 0;
margin-right: var(--image-width);
border-top-left-radius: var(--box-border-radius);
border-bottom-left-radius: var(--box-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media screen and (max-width: 1400px) {
.idc-content-image-columns-block,
.idc-content-image-columns-block.image-pos-right {
width: calc((100% - var(--container-gap)) / 2);
float: left;
}
.idc-content-image-columns-block.image-pos-right {
float: right;
}
.idc-content-image-columns-block .idc-content-image-columns-image,
.idc-content-image-columns-block.image-pos-right .idc-content-image-columns-image {
position: relative;
width: 100%;
height: auto;
padding: 20% 0;
border-radius: 0;
border-top-left-radius: var(--box-border-radius);
border-top-right-radius: var(--box-border-radius);
}
.idc-content-image-columns-block .idc-content-image-columns-content,
.idc-content-image-columns-block.image-pos-right .idc-content-image-columns-content {
margin: 0;
border-radius: 0;
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.wp-block-spacer.spacer-clear {
height: 0 !important;
}
}
@media screen and (max-width: 800px) {
.idc-content-image-columns-block,
.idc-content-image-columns-block.image-pos-right {
width: 100%;
float: none;
}
}.idc-carousel-container {
--arrow-size: 30px;
}
.idc-carousel-container .carousel-arrow {
display: block;
width: var(--arrow-size);
height: var(--arrow-size);
line-height: var(--arrow-size);
border-radius: calc(var(--arrow-size) / 2);
text-align: center;
background: url(//idcaus.com/wp-content/themes/idc-custom/assets/images/arrows/dark-blue-left.png) center center no-repeat var(--idc-colour-green);
background-size: 14px 14px;
color: var(--idc-colour-dark-blue);
text-decoration: none;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-h6);
position: absolute;
left: calc(var(--container-gap) * -1);
top: calc(50% - (var(--arrow-size) / 2));
}
.idc-carousel-container .carousel-arrow.next {
left: auto;
right: calc(var(--container-gap) * -1);
background-image: url(//idcaus.com/wp-content/themes/idc-custom/assets/images/arrows/dark-blue-right.png);
}
.background-green .idc-carousel-container .carousel-arrow {
background-color: var(--idc-colour-white);
}
.idc-carousel-container .carousel-arrow:hover {
background-color: var(--idc-colour-green-hover);
text-decoration: none;
}
.background-green .idc-carousel-container .carousel-arrow:hover {
background-color: var(--idc-colour-dark-blue);
background-image: url(//idcaus.com/wp-content/themes/idc-custom/assets/images/arrows/green-left.png);
color: var(--idc-colour-green);
}
.background-green .idc-carousel-container .carousel-arrow.next:hover {
background-image: url(//idcaus.com/wp-content/themes/idc-custom/assets/images/arrows/green-right.png);
}
.idc-carousel-container .slick-track {
display: flex;
align-items: center;
}
.idc-carousel-container figure.wp-block-image {
display: block;
padding: calc(grid-gap);
}
.idc-carousel-container figure.wp-block-image {
display: block;
width: 100%;
max-width: 150px;
height: auto;
margin: 0 auto;
}
@media screen and (max-width: 1000px) {
.idc-carousel-container .carousel-arrow {
left: calc(var(--container-gap) * -0.5);
}
.idc-carousel-container .carousel-arrow.next {
left: auto;
right: calc(var(--container-gap) * -0.5);
}
}
@media screen and (max-width: 600px) {
.idc-carousel-container .carousel-arrow {
left: calc(var(--arrow-size) * -0.5);
}
.idc-carousel-container .carousel-arrow.next {
left: auto;
right: calc(var(--arrow-size) * -0.5);
}
}