/* Bio Science
   developer:   rmiske, yhechler
   requires:    /common/framework/css/framework.fr.css
   ========================================================================== */
/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    /*greys*/
    --grey-22: #222222;
    --grey-4b: #4b4b4b;
    --grey-db: #dbdbdb;
    /*etc*/
    --main-red: #dd1100;
    --main-orange: #ff7700;
    --new-orange: #eb5f03;
    --secondary-color: #5bb2a6;
    /*measurements*/
    --wrapper-h-pad: 2rem;
    --mobile-img-pad-bot: 40px;
}
.align-items-c, .heirs-align-items-c>* {
    align-items: center !important;
}
/*section*/
section, main header {
    padding: 0 var(--wrapper-h-pad);
    width: 100%;
}
div[id$="-content"] {
    border-top: 2px solid #ccc;
    margin: 2.5rem auto 0;
    max-width: 69.125rem;
    padding: 2.5rem 0 0 0;
    width: 100%;
}
#work-with-content {
    border-top: none;
}
#intro-content, #from-messy-data-content {
    border-top: none;
    margin: 0 auto;
    padding: 3.5rem 0 0 0;
}
#from-messy-data-content {
    padding: 1.5rem 0 0 0;
}
#tell-us-form-content {
    border-top: none;
    margin: 0 auto 0 auto;
}
#thank-you-content {
    border-top: none;
    margin: 0 auto;
    max-width: 69.125rem;
    padding-bottom: 3.125rem;
    padding-top: 0;
    width: 100%;
}
/*grids*/
.feature-grid {
    align-items: start;
    border-top: 1px solid #ddd;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 27.4375rem;
    justify-items: center;
}
.feature-grid:first-child {
    border-top: none;
    padding-top: 0;
}
.feature-grid.img-on-left {
    grid-template-columns: 27.4375rem 1fr;
}
.feature-grid .feature-right {
    margin: 2.5rem 0;
    text-align: center;
}
.feature-grid.img-on-left .feature-left {
    order: 2;
}
.feature-grid.img-on-left .feature-right {
    order: 1;
}
.feature-grid.img-stroke img, .feature-grid.img-stroke video {
    border: 2px solid var(--grey-db);
}
.feature-grid.img-gradient img, .feature-grid.img-gradient video {
    background: linear-gradient(0deg, #ebebeb 0%, #fbfbfb 100%);
    margin: 0.625rem;
}
/*text*/
main h1 {
    color: #fff;
    font-size: 3.625rem;
    letter-spacing: -0.06rem;
}
main h2, #work-with-wolfram h2 {
    color: var(--new-orange);
    font-size: 2.25rem;
    padding-bottom: 1.5rem;
}
main h2 .subtitle {
    color: #404040;
    display: block;
    font-size: 1.875rem;
    padding-top: 0.25rem;
}
main h3 {
    color: var(--grey-22);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    padding-bottom: 0.5rem;
}
main h4 {
    color: #FF8B00;
    padding-bottom: 0.3rem;
}
main p {
    font-size: 1.25rem;
    padding-bottom: 2rem;
}
main div[id$="-content"] .feature-grid p {
    font-size: 1rem;
    padding-bottom: 1rem;
}
main div[id$="-content"] p:last-child, .feature-grid li:last-child {
    padding-bottom: 0;
}
main li {
    line-height: 1.2;
    padding-bottom: 0.625rem;
}
main li a {
    color: var(--new-orange);
}
main li a:hover {
    color: #e64100;
}
main {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
main img, main video {
    max-width: 100%;
}
/*restore bullets*/
main ul.with-bullets li {
    display: list-item;
    list-style: disc;
    margin-left: 1.5rem;
    padding-bottom: 1rem;
}
/*links*/
.chevron-before.rotate-90-cw {
    padding-left: 1.65rem;
}
.chevron-before.rotate-90-cw::before {
    bottom: 0;
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 300;
    left: 0;
    line-height: 0.5rem;
    position: absolute;
    top: 0;
    transform: rotate(90deg);
}
video, #overlay-image {
    height: auto;
    width: 100%;
}
.video-wrapper {
    height: auto;
    overflow: hidden;
    position: relative;
}
.video-wrapper.one, .video-wrapper.one img {
    max-width: 300px;
}
.video-wrapper.two,
.video-wrapper.four,
.video-wrapper.two img .video-wrapper.four img {
    max-width: 375px;
}
.video-wrapper.three,
.video-wrapper.three img {
    max-width: 439px;
}
.video-wrapper.three video {
    padding-bottom: 2rem;
}
.overlay-image {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease;
    visibility: hidden;
    width: 100%;
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-gap: 20px;
    max-width: 100%;
}
#get-started-content>p:nth-of-type(1) {
    padding-bottom: 1rem;
}
#get-started-content>p:nth-of-type(2) {
    padding-top: .625rem;
    padding-bottom: 3rem;
}
#get-started-content .feature-grid {
    align-items: center;
    padding-bottom: 2.5rem;
    padding-top: 3rem !important;
}
#get-started-content .feature-grid .feature-right {
    margin-bottom: 0rem;
    text-align: center;
}
#get-started .card-list a:hover, 
.feature-grid.img-on-left a img:hover, 
div#powered-by-wolfram-content a img:hover {
    box-shadow: 0 0 5px 2px rgb(122 184 255 / 50%);
}
#get-started .card-list {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    justify-items: center;
    padding-bottom: 3rem;
    position: relative;
}
#get-started .card-list img::before {
    background: var(--secondary-color);
    color: #fff;
    display: block;
    font-size: .8rem;
    font-weight: 600;
    left: 0px;
    padding: 4px 15px;
    position: absolute;
    top: 0px;
    z-index: 1;
}
#get-started .card-list a {
    background: #fff;
    box-shadow: 0 0 5px 0 rgb(100, 100, 100, .3);
    color: var(--secondary-color);
    cursor: pointer;
    display: grid;
    font-size: 1.125rem;
    font-weight: 600;
    max-width: 300px;
    min-height: 250px;
    position: relative;
    transition: 0.3s;
    width: 100%;
}
#powered-by-wolfram .image-grid {
    grid-template-columns: repeat(3, 1fr);
}
video#video-3 {
    padding-bottom: 0px;
}
#built-in-computation-content .featuregrid {
    padding-bottom: 0px;
}
/* ==========================================================================
   hero
   ========================================================================== */
#hero {
    background: #74af48;
    padding: 0;
}
#hero img {
    height: 360px;
}
#hero-content {
    align-items: center;
    border: none;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
    height: 360px;
    margin-top: 0;
    padding: 0 var(--wrapper-h-pad);
}
#hero h1 {
    padding-bottom: 0.75rem;
}
#hero h1 span {
    color: #ffd458;
    display: block;
    font-weight: 300;
    font-size: 2.6rem;
}
#hero h1 span.biosciences {
    color: #fff;
    font-size: 3.7rem;
    font-weight: 600;
    line-height: 1em;
}
#hero h1 span.bio {
    color: #ffd183;
}
/*buttons*/
#hero .button_box {
    display: grid;
    margin: 1rem 0;
}
#hero .button_box .button {
    background: #74af48;
    border-radius: 4px;
    border: solid 1px #fff;
    font-size: 1rem;
    padding: 8px 2px;
    text-align: center;
}
#hero .button_box .button:hover {
    background: #fff;
    color: #74ad4a;
}
#hero .button_box span {
    color: #fff;
}
#hero .button_box span a {
    color: #ffd458;
}
#hero .button_box span a:hover {
    color: #ff995e;
}
#hero .button_box {
    align-items: center;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 3fr;
    list-style: none;
    max-width: 500px;
    padding: 0;
}
#hero .button_box div {
    padding-left: 20px;
    position: relative;
}
/* Adding the vertical bar before the third column (div) */
#hero .button_box div::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
}
.button_box {
    display: inline-block;
    margin: 1rem 0;
}
.buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}
.button {
    background: var(--new-orange);
    border-radius: 0.25rem;
    border: 1px solid var(--new-orange);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0.625rem 0.75rem;
    position: relative;
}
.button:hover {
    background: #e64100;
    border: 1px solid #e64100;
}
/* ==========================================================================
   OTHER SECTIONS
   ========================================================================== */
/*intro*/
#intro-content {
    border-top: none;
    padding-bottom: 0.5rem;
}
main #intro-content p {
    font-size: 1.375rem;
    line-height: 1.6;
    padding-bottom: 0.5rem;
}
#core-technology {
    grid-row: 1;
    grid-column: 2;
    transform: translate(0px, 204px);
}
#full-project-development {
    transform: translate(0px, 232px);
}
#programming-support {
    transform: translate(0px, 282px);
}
#education-training {
    grid-row: 1;
    transform: translate(0px, 232px);
}
.featured::before {
    background: var(--secondary-color);
    color: #fff;
    content: "FEATURED";
    display: block;
    font-size: .8rem;
    font-weight: 600;
    left: 0px;
    padding: 4px 15px;
    position: absolute;
    top: 0px;
    z-index: 1;
}
/*i'm a bioscientist/magnific*/
.video-exception li {
    margin-left: 35px;
}
.video-exception a.magnific {
    align-items: center;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 30px 1fr;
    margin-left: -35px;
    max-width: 450px;
}
.video-exception a.magnific:hover img {
    box-shadow: 0 0 3px 2px rgb(255 122 122 / 50%);
    border-radius: 15px;
}
.video-exception .img { font-size: 0; }
.video-exception .txt {}
.mfp-iframe-scaler .mfp-title {
    position: absolute;
    bottom: -1.5rem;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    color: #ddd;
}
.mfp-iframe-scaler .mfp-title a {
    color: #fff;
    font-weight: bold;
}
.mfp-iframe-scaler .mfp-title a:hover {
    color: #ddd;
}
.mfp-content button.mfp-close { right: -12px; top: -12px !important; }



/* ==========================================================================
   CONTACT US
   ========================================================================== */
#tell-us-form, #thank-you {
    background-color: #047abf;
    color: #fff;
}
#tell-us-form h2 {
    color: #fff;
    font-size: 1.75rem;
    padding-bottom: 1rem;
}
div#tell-us-form-content h2:nth-of-type(2) {
    font-size: 1.3rem;
}
#tell-us-form .grid.cols-1.width-full {
    padding: 1rem 0 0.5rem 0;
}
#tell-us-form #_form-gui ._main-grid> :nth-child(2n+1) {
    padding-right: 0.5rem;
}
#tell-us-form #_form-gui ._main-grid>*:nth-child(even) {
    padding-left: 0.6rem;
}
#tell-us-form #_form-gui ._main-grid>*, #tell-us-form #_form-gui ._radio-grid>* {
    padding-bottom: 0.5rem;
}
#tell-us-form .grid.cols-2.heirs-width-1-2:first-child {
    margin-right: 0.5rem;
}
#tell-us-form a {
    color: #fff !important;
    font-weight: 600;
}
#tell-us-form .display-f {
    display: flex;
}
#tell-us-form a:hover {
    color: #1F2127 !important;
}
#tell-us-form input[type='email'], #tell-us-form input[type='text'], #tell-us-form textarea {
    color: #656565;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.25;
}
#tell-us-form #_form-gui label {
    color: #fff;
}
#tell-us-form #_form-gui #submit {
    background: var(--new-orange);
    border: none;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    padding: .7rem 1.7rem;
}
#tell-us-form #_form-gui #submit:hover, #tell-us-form #_form-gui #submit:focus {
    background: #e64100;
    color: #fff;
}
#tell-us-form .error-msg {
    background: url('../img/form-error.png') no-repeat center left;
    background-size: 14px 14px;
    color: #fff;
    font-weight: 300;
}
.tell-us {
    color: #ffffff;
    font-size: 1.13rem;
    margin: 0.5rem 0 0 0;
    padding-bottom: 0.5rem;
}
#thank-you {
    display: none;
}
#thank-you h2 {
    color: #fff;
    font-weight: 400;
    font-size: 1.875rem;
}
#processing-error {
    display: none;
}
/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 3rem;
        /*45px*/
    }
    #hero .button_box {
        grid-gap: 12px;
    }
    #hero .button_box .button {
        font-size: 0.92rem;
    }
    #hero .button_box div {
        padding-left: 12px;
    }
    #get-started .card-list {
        grid-template-columns: repeat(3, minmax(223px, 1fr));
        grid-gap: 30px;
        justify-items: center;
    }
}
@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 3.2rem;
        /*~45px*/
    }
    div[id$="-content"] {
        padding-bottom: 0;
        padding-top: 2rem;
    }
    main h1 {
        font-size: 56px;
        padding-bottom: 0;
    }
    .button_box {
        border-right: none;
        display: block;
        max-width: 34.375rem;
    }
    /*hero*/
    #hero {
        background: #74af48;
    }
    #hero img {
        height: auto;
        margin: 0 auto;
        max-width: 500px;
        width: 100%;
    }
    #hero-content {
        height: auto;
        padding: 34px 0 0;
    }
    #hero-content {
        grid-gap: 40px;
        grid-template-columns: 1fr;
        height: auto;
        margin-top: 0;
        padding: 1rem 1rem 0 1rem;
    }
    #hero .button_box {
        margin: 1rem auto 0rem auto;
    }
    #hero h1 {
        margin-top: 2.5rem;
        text-align: center;
    }
    /*other sections*/
    #intro-content {
        padding-bottom: 0.1rem;
    }
    .develop-grid {
        grid-gap: 0;
    }
    .develop-grid.two-col, .develop-grid.three-col {
        grid-template-columns: 1fr;
    }
    .develop-grid .feature-grid {
        border-top: 1px solid #ccc;
        padding-top: 3.125rem;
    }
    .develop-grid.two-col .feature-grid:first-child {
        border-top: none;
        padding-top: 0;
    }
    .develop-grid .feature-grid img {
        padding-bottom: 0;
        position: initial;
    }
    .develop-grid .feature-left {
        order: 1;
    }
    .develop-grid .feature-right {
        height: auto !important;
        order: 2;
    }
    .feature-grid.img-on-left img {
        margin-bottom: 0 !important;
    }
    #built-in-computation .video-wrapper {
        margin-top: 0px !important;
    }
    #get-started-content .feature-grid {
        padding-bottom: 1.5rem !important;
        padding-top: 3rem !important;
    }
    .feature-grid.img-on-left .feature-left {
        margin-top: 0;
    }
    .feature.develop-grid.two-col .feature-grid:nth-of-type(2) img {
        padding-bottom: 0;
    }
    #get-started .card-list {
        grid-template-columns: repeat(2, minmax(227px, 1fr));
        grid-gap: 40px 20px;
        justify-items: start;
    }
    #powered-by-wolfram .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-grid {
        grid-gap: 0;
        grid-template-columns: 1fr !important;
        margin-top: 1.5rem;
        padding-bottom: 0rem;
        padding-top: 2.125rem;
    }
    .feature-grid.img-on-left {
        justify-items: left;
    }
    .feature-grid img, .feature-grid video {
        margin: 1rem 0;
    }
    .feature-grid.img-on-left img {
        margin-bottom: 0;
    }
    .feature-grid.img-on-left .feature-right {
        order: unset;
        display: none;
    }
}
@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 20px;
        /*line up with global menu*/
    }
    #hero .button_box {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: auto auto 1fr;
        list-style: none;
        max-width: 500px;
        padding: 0;
    }
    #hero .button_box div::before {
        display: none;
    }
    #hero .button_box div {
        padding-left: 0;
    }
    #hero .button_box a.button {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        margin: 0 1.5rem 1.5rem 0;
        max-width: 140px;
        padding: 8px 12px;
    }
    #hero .button_box a.button span {
        max-width: 100%;
    }
    div[id$="-content"] {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        max-width: 480px;
    }
    #hero-content {
        padding: 1rem 1rem 0 1rem;
    }
    main h1 {
        font-size: 36px;
        line-height: 1;
    }
    .feature-grid {
        margin-top: 0;
        padding-top: 2.125rem;
    }
    div[id$="-content"].feature-grid p {
        font-size: 17px;
    }
    img#overlay-image-2, video#video-2 {
        margin-bottom: 2.5rem;
    }
    .feature-grid.img-on-left .feature-left {
        margin-top: 0;
        margin-bottom: 3rem;
    }
    .button_box {
        max-width: 41rem;
    }
    .buttons {
        gap: .2rem 1rem;
    }
    .button {
        border-radius: 0.3rem;
        font-size: 0.95rem;
        margin: 0 7px 7px 0;
        padding: 0.625rem 0.75rem;
    }
    .chevron-before.rotate-90-cw::before {
        display: none;
    }
    /*hero*/
    /*other sections*/
    #intro-content {
        padding-top: 2rem;
    }
    .video-wrapper, .video-wrapper.four img, .video-wrapper.one img, .video-wrapper.two img, .video-wrapper.three img {
        max-width: 100%;
    }
    /*contact us*/
    #tell-us-form-content {
        max-width: none;
    }
    #tell-us-form ._main-grid>*, #tell-us-form ._radio-grid>* {
        padding-top: .6rem;
    }
    input::placeholder, textarea::placeholder {
        font-size: 0.875rem;
    }
    #get-started .card-list {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
        grid-gap: 40px;
        justify-items: left;
    }
    #powered-by-wolfram .image-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .feature-grid.img-on-left img,
    section#powered-by-wolfram {
        margin-bottom: 3rem;
    }
    #core-technology,
    #education-training,
    #programming-support,
    #full-project-development {
        grid-row: unset;
        grid-column: unset;
        transform: unset;
    }
    #core-technology,
    #education-training {
        grid-row: unset;
        grid-column: unset;
    }
}
@media (max-width: 320px) {
    #hero .button_box {
        max-width: 250px;
    }
    #hero h1 span {
        font-size: 2.0rem;
    }
    #hero h1 span.biosciences {
        font-size: 3.0rem;
    }
}
@media print {}