/* Mathematica overview page styles.

   @file        overview.css.en
   @author      marionm
   ========================================================================== */

/* ==========================================================================
   set variables
   ========================================================================== */

:root {
    --overview-black: #000;
    --overview-orange: #f77700;
    --overview-red: #dd1100;
    --overview-white: #fff;
}

/* ==========================================================================
   page styles
   ========================================================================== */

body { background: var(--overview-white); }

main {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
}

main a { color: var(--overview-red); }

main a:hover { color: var(--overview-orange); }

main hr {
    background: #dbdbdb;
    border: none;
    height: 1px;
    margin: 3rem 0;
}

main h2 {
    color: #222;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1rem;
}

main h2 + p {
    color: #404040;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

main h3 {
    color: #222;
    font-size: 1.13rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .4rem;
}

main h3 + p {
    color: #6d6d6d;
    font-size: .95rem;
    line-height: 1.3;
}

/* ==========================================================================
   wrappers
   ========================================================================== */

.page-width {
    margin: 3.125rem auto;
    max-width: 1200px;
    padding: 0 3.125rem;
    width: 100%;
}

/* ==========================================================================
   subheader
   ========================================================================== */

#subheader {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    padding: 4rem 3rem 3rem;
    text-align: center;
}

#subheader img { margin-bottom: .3rem; }

#subheader h1 {
    color: #3d3d3d;
    font-size: 3.4rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: uppercase;
}

#subheader h1 em,
#subheader h1 span { color: #d21c00; }

#subheader h1 a { color: #3d3d3d; }

#subheader p {
    color: #686868;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
    margin-top: .125rem;
}

/* hero
   ========================================================================== */

#hero {
    background: #4f4f4f;
    height: 261px;
    margin-top: 3.75rem;
    overflow: visible;
    padding: 0 3rem;
}

#hero .hero-inner {
    height: 261px;
    margin: 0 auto;
    max-width: 951px;
    position: relative;
}

#hero img {
    position: relative;
    top: -85px;
}

#hero .hero-text {
    font-size: .6875rem;
    font-style: italic;
    line-height: 1.4;
    position: absolute;
    right: 16px;
    top: -52px;
    z-index: 2;
}

#hero .hero-text a { color: #535353; }

#hero .hero-text a:hover { color: var(--overview-orange); }

/* ==========================================================================
   intro
   ========================================================================== */

#intro .left { padding-right: 3rem; }

#intro .left .p1 {
    color: #e06e04;
    font-size: 1.63rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 2rem;
}

#intro .left .p2 {
    color: #404040;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
}

#intro .right > div { max-width: 300px; }

#intro .right .image {
    background-color: #ebebeb;
    border-radius: 200px;
    display: inline-block;
    line-height: 0;
    padding: 1rem;
}

#intro .right .p1 {
    color: #e06e04;
    font-size: 1rem;
    font-style: italic;
    margin-bottom: .5rem;
}

#intro .right .p2 { margin-bottom: 1rem; }

#intro .right .p3 { margin-bottom: 1rem; }

#intro .right .p3 a {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #b8b8b8;
    color: var(--overview-red);
    font-size: .9rem;
    padding: .25rem .75rem;
}

#intro .right .p3 a:hover { color: var(--overview-orange); }

#intro .right .p4 {
    color: #636363;
    font-size: .8rem;
    font-style: italic;
    font-weight: 300;
}

#intro .right .p4 a { color: #636363; }

#intro .right .p4 a:after {
    color: var(--overview-red);
    font-style: normal;
}

#intro .right .p4 a:hover,
#intro .right .p4 a:hover:after { color: var(--overview-orange); }

/* ==========================================================================
   about
   ========================================================================== */

#about .cgrid {
    column-gap: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
}

#about .p1 { margin-bottom: 3rem; }

#about img {
    border: 1px solid #bdbdbd;
    box-sizing: content-box;
    display: block;
    height: auto;
    margin-bottom: .8rem;
    max-width: 100%;
}

/* ==========================================================================
   coverage
   ========================================================================== */

#coverage .p1 { margin-bottom: .5rem; }

#coverage .p2 {
    font-size: 13px;
    margin-bottom: 2rem;
}

#coverage .p2 a { color: #848484; }

#coverage .p2 a:after { color: var(--overview-red); }

#coverage .p2 a:hover,
#coverage .p2 a:hover:after { color: var(--overview-orange); }

#coverage .gray-box {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 2rem;
}

#coverage .cgrid1 {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 2rem;
    row-gap: 2rem;
}

#coverage .cgrid1 a {
    align-items: center;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    color: #222;
    display: flex;
    font-size: 1.13rem;
    line-height: 1.2;
}

#coverage .cgrid1 a:hover { border: 1px solid var(--overview-orange); }

#coverage .cgrid1 a > i {
    background: #f28c53;
    background: linear-gradient(to bottom, #f28c53 0%, #ec6600 100%);
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    display: block;
    height: 75px;
    width: 75px;
}

#coverage .cgrid1 i i {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 60px auto;
    display: block;
    height: 75px;
    opacity: .6;
    width: 75px;
}

#coverage .cgrid1 a:hover i i { opacity: 1; }

#coverage .cgrid1 .link1 i i { background-image: url('/mathematica/img/overview/coverage-large-1.png'); }
#coverage .cgrid1 .link2 i i { background-image: url('/mathematica/img/overview/coverage-large-2.png'); }
#coverage .cgrid1 .link3 i i { background-image: url('/mathematica/img/overview/coverage-large-3.png'); }
#coverage .cgrid1 .link4 i i { background-image: url('/mathematica/img/overview/coverage-large-4.png'); }
#coverage .cgrid1 .link5 i i { background-image: url('/mathematica/img/overview/coverage-large-5.png'); }
#coverage .cgrid1 .link6 i i { background-image: url('/mathematica/img/overview/coverage-large-6.png'); }

#coverage .cgrid1 span { padding: 0 .5rem; }

#coverage .cgrid2 {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1rem;
}

#coverage .cgrid2 a {
    align-items: center;
    color: #222;
    display: flex;
    font-size: 1.13rem;
    line-height: 1.2;
}

#coverage .cgrid2 a:hover { color: var(--overview-orange); }

#coverage .cgrid2 a > i {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: content-box;
    display: block;
    height: 32px;
    width: 40px;
}

#coverage .cgrid2 a:hover > i { border-color: var(--overview-orange); }

#coverage .cgrid2 i i {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 30px auto;
    display: block;
    height: 32px;
    width: 40px;
}

#coverage .cgrid2 .link1 i i { background-image: url('/mathematica/img/overview/coverage-small-1.png'); }
#coverage .cgrid2 .link2 i i { background-image: url('/mathematica/img/overview/coverage-small-2.png'); }
#coverage .cgrid2 .link3 i i { background-image: url('/mathematica/img/overview/coverage-small-3.png'); }
#coverage .cgrid2 .link4 i i { background-image: url('/mathematica/img/overview/coverage-small-4.png'); }
#coverage .cgrid2 .link5 i i { background-image: url('/mathematica/img/overview/coverage-small-5.png'); }
#coverage .cgrid2 .link6 i i { background-image: url('/mathematica/img/overview/coverage-small-6.png'); }
#coverage .cgrid2 .link7 i i { background-image: url('/mathematica/img/overview/coverage-small-7.png'); }
#coverage .cgrid2 .link8 i i { background-image: url('/mathematica/img/overview/coverage-small-8.png'); }
#coverage .cgrid2 .link9 i i { background-image: url('/mathematica/img/overview/coverage-small-9.png'); }
#coverage .cgrid2 .link10 i i { background-image: url('/mathematica/img/overview/coverage-small-10.png'); }
#coverage .cgrid2 .link11 i i { background-image: url('/mathematica/img/overview/coverage-small-11.png'); }
#coverage .cgrid2 .link12 i i { background-image: url('/mathematica/img/overview/coverage-small-12.png'); }
#coverage .cgrid2 .link13 i i { background-image: url('/mathematica/img/overview/coverage-small-13.png'); }
#coverage .cgrid2 .link14 i i { background-image: url('/mathematica/img/overview/coverage-small-14.png'); }
#coverage .cgrid2 .link15 i i { background-image: url('/mathematica/img/overview/coverage-small-15.png'); }
#coverage .cgrid2 .link16 i i { background-image: url('/mathematica/img/overview/coverage-small-16.png'); }
#coverage .cgrid2 .link17 i i { background-image: url('/mathematica/img/overview/coverage-small-17.png'); }
#coverage .cgrid2 .link18 i i { background-image: url('/mathematica/img/overview/coverage-small-18.png'); }
#coverage .cgrid2 .link19 i i { background-image: url('/mathematica/img/overview/coverage-small-19.png'); }

#coverage .cgrid2 span { padding: 0 1rem; }

/* ==========================================================================
   core technologies
   ========================================================================== */

#core h2 { margin-bottom: 3rem; }

#core .cgrid {
    column-gap: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
}

#core .cgrid a {
    align-items: flex-start;
    display: flex;
}

#core .cgrid h3 { color: var(--overview-red); }

#core .cgrid a:hover h3 { color: var(--overview-orange); }

#core .cgrid img {
    height: auto;
    margin-right: 1rem;
}

/* ==========================================================================
   the mathematica trajectory
   ========================================================================== */

#stats h2 span {
    color: #ff8932;
    font-size: 1.13rem;
    font-style: italic;
}

#stats .p1 { margin-bottom: 3rem; }

#stats .chart { margin-bottom: 1rem; }

#stats .cgrid {
    column-gap: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2rem;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    #subheader { padding: 3rem 2rem 4rem; }

    #hero { padding: 0 2rem; }

    #hero .hero-text {
        right: 6px;
        top: -58px;
    }

    #coverage .gray-box { padding: 1rem; }

    #coverage .cgrid1,
    #coverage .cgrid2 { column-gap: 1rem; }

    #coverage .cgrid1 a,
    #coverage .cgrid2 a {
        font-size: 1.07rem;
        line-height: 1.2;
    }

    #coverage .cgrid1 a > i,
    #coverage .cgrid1 i i {
        height: 55px;
        width: 55px;
    }

    #coverage .cgrid1 i i { background-size: 42px auto; }

    #coverage .cgrid2 span { padding: 0 .5rem; }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    main h3 {
        font-size: 1.22rem;
        line-height: 1.4;
    }

    main h3 + p {
        font-size: 1.03rem;
        line-height: 1.3;
    }

    .page-width {
        margin: 2rem auto;
        padding: 0 2rem;
    }

    #subheader { padding: 3rem 1rem 5rem; }

    #hero { padding: 0 1rem; }

    #intro .right {
        background: url('/mathematica/img/overview/intro-bg.png') no-repeat;
        background-size: cover;
        border-radius: 6px;
        border: 1px solid #ccc;
        margin-top: 2rem;
        max-width: 550px;
        padding: .8rem 1.5rem;
    }

    #intro .right > div { max-width: none; }

    #intro .right .p1 {
        font-size: 14px;
        margin-top: 1rem;
    }

    #intro .right .p3 { margin-bottom: 1rem; }

    #intro .right .p3 a { font-size: 14px; }

    #about .cgrid {
        column-gap: 2rem;
        row-gap: 2rem;
    }

    #about .p1 { margin-bottom: 2rem; }

    #coverage .cgrid1,
    #coverage .cgrid2 { grid-template-columns: 1fr 1fr; }

    #core .cgrid img {
        height: auto;
        width: 43px;
    }

    #stats .cgrid { grid-template-columns: 1fr 1fr; }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    main hr { margin: 3rem -1rem; }

    main h3 {
        font-size: 1.24rem;
        line-height: 1.2;
    }

    main h3 + p {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .page-width { padding: 0 1rem; }

    #subheader { padding: 2rem 1rem 5rem; }

    #subheader h1 { line-height: .95; }

    #subheader img { margin-bottom: 1rem; }

    #subheader p { margin-top: .6rem; }

    #intro .right {
        border-left: none;
        border-radius: 0;
        border-right: none;
        max-width: 100%;
    }

    #about .cgrid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }

    #about img { max-width: 80%; }

    #coverage .cgrid1,
    #coverage .cgrid2 { grid-template-columns: 1fr; }

    #coverage .cgrid1 a,
    #coverage .cgrid2 a { font-size: 1.3rem; }

    #coverage .cgrid1 > i {
        height: 50px;
        width: 50px;
    }

    #coverage .cgrid1 i i { background-size: 38px auto; }

    #coverage .cgrid2 span { padding: 0 .5rem; }

    #core .cgrid { grid-template-columns: 1fr; }

    #stats .cgrid { grid-template-columns: 1fr; }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
}

/* printer styles
   ========================================================================== */

@media print {
}