/******************************************************/
/*************Component - Text and image***************/
/******************************************************/
/*Colors*/
html.day-mode .color-pure-white{
    background-color: var(--color-white);
}
html.night-mode .color-pure-white{
    background-color: var(--color-gray-dark);
}
html.day-mode .color-near-white{
    background-color: #FAFAFB;
}
html.night-mode .color-near-white{
    background-color: #002920;
}
html.day-mode .color-light-green-2{
    background-color: #D3F5E3;
}
html.night-mode .color-light-green-2{
    background-color: #015945;
}
html.day-mode .color-mute-green-3{
    background-color: #91B9AF;
}
html.night-mode .color-mute-green-3{
    background-color: #247360;
}
html.day-mode .color-dark-green-4{
    background-color: #BFC9C7;
}
html.night-mode .color-dark-green-4{
    background-color: #405F58;
}
html.day-mode .text-half strong,
html.day-mode .text-half h1,
html.day-mode .text-half h2,
html.day-mode .text-half h3,
html.day-mode .text-half h4,
html.day-mode .text-half p,
html.day-mode .text-half span,
html.day-mode .text-half li,
html.day-mode .text-half td,
html.day-mode .text-half th{
    color: var(--color-gray-black);
}
html.night-mode .text-half strong,
html.night-mode .text-half h1,
html.night-mode .text-half h2,
html.night-mode .text-half h3,
html.night-mode .text-half h4,
html.night-mode .text-half p,
html.night-mode .text-half span,
html.night-mode .text-half li,
html.night-mode .text-half td,
html.night-mode .text-half th{
    color: var(--color-gray-white);
}
/*All layouts*/
.text-and-image-component-half-section {
    width: 50%;
}
.text-and-image-component-image,
.text-and-image-component-image-text{
    clear: both;
}
.text-and-image-component-image{
    max-height: 300px;
}
.large-surface-width-restriction{
    position: relative;
    float: left;
    width: 100%;
}

/*Layout 1: Image on left - Text on right*/
.text-and-image-component-layout-1 .text-half {
    padding-left: var(--size-12);
}
.text-and-image-component-layout-1 .image-half {
    padding-right: var(--size-24);
}

/*Layout 2: Image on right - Text on left*/
.text-and-image-component-layout-2 .text-half {
    padding-right: var(--size-12);
}
.text-and-image-component-layout-2 .image-half {
    padding-left: var(--size-24);
}

.text-and-image-component .text-and-image-component-image {
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%
}
.text-and-image-component .text-and-image-component-layout-1 .text-and-image-component-image {
    left: 0;
}
.text-and-image-component .text-and-image-component-layout-2 .text-and-image-component-image {
    right: 0;
}
.text-and-image-component .text-half {
    z-index: 5;
    width: 65%;
    position: relative;
    float: left;
    box-sizing: border-box;
}
.text-and-image-component .image-half {
    width: 35%;
    position: relative;
    float: left;
    box-sizing: border-box
}
.text-half-background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 300px;
}

/*Responsive Design - Breakpoints*/
.image-half-mobile {
    display: none;
}
@media only screen and (max-width: 1679px){
    .text-and-image-component .text-half {
        z-index: 5;
        width: 55%;
    }
    .text-and-image-component .image-half {
        width: 45%;
    }
}
/*Smaller Viewport Content Variables (1080px - 1679px)*/
@media only screen and (max-width: 1200px){
    .text-and-image-component-half-section {
        display: block;
    }
    .image-half-mobile {
        display: block;
    }
    .image-half{
        display: none;
    }
    .image-half-mobile{
        padding-bottom: 20px;
    }
    .text-and-image-component-layout-1 .text-half {
        float: right;
        width: 100% !important;
        padding:  15px 0 0 0 !important;
    }
    .text-and-image-component-layout-2 .text-half {
        float: left;
        width: 100% !important;
        padding: 15px 0 0 0 !important;
    }
    .text-half-background {
        border-radius: 0 0 0 0 !important
    }
    .text-and-image-component {
        overflow: hidden;
    }
}