.in2missions-page .body {
    position:relative;
}
.in2missions-page .content-top {
    position:absolute;
    z-index:9;
    width: 100%;
}
#root .in2missions-page .body .content {
    max-width:calc((370px * 3) + (8px * 3))
}
.hero-image {
    position:relative;
    overflow:hidden;
    height:0;
    padding-bottom: 20%;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
    top:0px;
}
.hero-image img {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height:auto;
    width: 100%;
}
.mobile .hero-image img {
    height:100%;
    width:auto;
}
.hero-image::before {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:var( --c-dark-blue);
    opacity:.4;
    z-index:1;
}
.hero-image .title:not(.h1) {
    font-weight:bold;
    font-style:italic;
    font-size:5vw
}
.hero-image .title {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    width:calc(100% - var(--c-mobile-padding));
    text-align:center;
    color:var(--c-text-light-e);
    
}
.hero-image .caption {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,calc(-50% + 5vw));
    z-index:2;
    color:var(--c-text-light-e);
    
    font:var(--t-body-text);
    font-style:italic;
    text-align:center;
}
#root .caption-title-container {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    justify-content:center;
    padding-top:40px;
}
#root .caption-title-container .caption,
#root .caption-title-container .title{
    position:unset;
    transform:unset;
    margin-bottom:5vw;
}
#root .caption-title-container .caption {
   
}
.mobile .hero-image .caption {
     transform:translate(-50%,calc(-50% + 5vh));
}
.mobile .mission-page .hero-image .caption {
    top:32%;
} 
.in2missions-container {
    flex-wrap:wrap;
    justify-content:center;
}
.mission {
    max-width:370px;
    width:100%;
    background-color:var(--c-background-white-10);
    padding:10px;
    border-radius:var(--r-10);
    border:1px solid var(--c-background-white-30);
    color:var(--c-text-light-e);
    margin:4px;
}
.mission .mission-image {
    max-width:72px;
    width:100%;
}
.mission .mission-info {
    padding-left:10px;
    width:calc(80% - 72px);
    align-items:flex-start
}
.mission .mission-tag {
    font:var(--t-small-text-bold);
    align-items:center;
}
.mission .mission-tag .icon {
    width:20px;
    height:20px;
    position:relative;
     margin-right: 4px;
     background-color:var(--c-brand-color);
    border-radius:50%;
}
.mission .mission-tag .icon::before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    background-image:var(--c-global-icon-spritesheet);
    background-repeat:no-repeat;
    background-size: 400px auto;
    background-position: -350px -48px;
    filter:invert(1) brightness(4);
}
.mission .mission-title {
    font:var(--t-body-bold);
    margin:auto 0;
}
.mission .mission-link {
    justify-content:flex-start;
    align-items:center;
    padding:4px 10px;
    min-height:30px;
    background-color:var(--c-brand-color-20);
    border-radius:30px;;
    border:1px solid var(--c-accent-color);
    font:var(--t-small-text-bold);
    text-transform:uppercase;
    color:var(--c-accent-color)
}
/*.mission .mission-link::before {
    content:"";
    width:20px;
    height:20px;
    border-radius:50%;
     background-image:var(--c-global-icon-spritesheet);
    background-repeat:no-repeat;
    background-size:500px auto;
    background-position: -80px -8px;
    filter: hue-rotate(184deg) brightness(2.5);
    margin-right: 4px;
}*/
.desktop .terms-conditions-container {
    padding:40px;
}
 .terms-conditions-container {
     justify-content:center;
     border-radius:var(--r-10);
     background-color:var(--c-dark-blue);
     color:var(--c-text-light-e);
     margin:20px 0px;
 }
 .how-it-works.content-accordion .content-accordion-title {
    background-color:var(--c-background-white);
    color:var(--c-text-dark-blue);
}
 .how-it-works.content-accordion .content-accordion-icon::before {
   filter:unset;
}
.mobile .hero-image {
    padding-top: 37%;
}
.mobile .terms-conditions-container {
    margin:var(--c-mobile-padding);
    padding:40px 20px;
}
.mission-page .hero-image .caption {
    transform: translate(-50%, calc(-50% - 2vw));
}
.mission-page.about-us .caption {
    font-weight:bold;
}
.in2missions-text {
    font:var(--t-body-text);
    color:var(--c-text-light-e);
    margin:50px 0px;
}
.in2missions.cta-link {
    max-width:110px;
}
.in2missions.cta-link div {
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--c-accent-color);
    border-radius:var(--r-10);
    font:var(--t-small-text-bold);
    margin-bottom:30px;
    color:var(--c-text-light-e)
}
.mobile .in2missions-text {
    padding:var(--c-mobile-padding)
}
.mobile .in2missions.cta-link {
    margin:50px var(--c-mobile-padding);
}

.in2missions-menu {
    margin-bottom:10px;
    padding:0px 20px;
    justify-content:center;
}
.mobile .in2missions-menu {
    padding:0px var(--c-mobile-padding)
}
.in2missions-menu .in2missions-menu-item  {
    min-height:40px;
    font:var(--t-small-text-bold);
    color:var(--c-accent-color);
    align-items:center;
    justify-content:center;
    border:1px solid var(--c-accent-color);
    border-radius:var(--r-10);
    cursor:pointer;
}
.in2missions-menu .in2missions-menu-item .text  div {
    display:flex;
    flex-direction:row;
    align-items:center;
}
.in2missions-menu .in2missions-menu-item .text div::before {
    content:"";
    width:20px;
    height:20px;
    display:block;
    margin-right:8px;
    background-image:var(--c-global-icon-spritesheet);
    background-repeat:no-repeat;
    filter: hue-rotate(184deg) brightness(2.5);
}
.in2missions-menu .in2missions-menu-item:not(:last-child) {
    margin-right:8px;
}
.in2missions-menu .in2missions-menu-item > app-widget-host {
    padding:0px 10px;
}
.in2missions-menu .in2missions-menu-item.in2missions .text div::before {
    background-position: -275px -11px;
}
.in2missions-menu .in2missions-menu-item.in2missions-history .text div::before {
    background-position: -169px -43px;
}
#root .in2missions-container {
    display:none;
    color:var(--c-text-light)
}
#root:not(.show-in2mission-history) .in2missions-container.in2missions {
    display:flex;
}
#root.show-in2mission-history .in2missions-container.in2missions-history {
    display:flex;
}
#root:not(.show-in2mission-history) .in2missions-menu .in2missions-menu-item.in2missions {
    background-color:var(--c-accent-color);
    color:var(--c-text-light-e)
}
#root:not(.show-in2mission-history) .in2missions-menu .in2missions-menu-item.in2missions .text div::before {
    filter: invert(1) brightness(4);
}
#root.show-in2mission-history .in2missions-menu .in2missions-menu-item.in2missions-history {
    background-color:var(--c-accent-color);
    color:var(--c-text-light-e)
}
#root.show-in2mission-history .in2missions-menu .in2missions-menu-item.in2missions-history .text div::before {
    filter: invert(1) brightness(4);
}
.no-missions-text {
    margin-bottom:20px;
}