/* Mathematica Enterprise Edition styles.

   developer:   marionm
   requires:    framework
   ========================================================================== */

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

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

/* ==========================================================================
   shared
   ========================================================================== */

html {
    color: #333;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
    line-break: strict;
}

main section {
    border-bottom: 1px solid #ccc;
    padding-bottom: 3rem !important;
    padding-top: 3rem !important;
}

main a { color: #dd1600; }

main a:hover { color: #f57300; }

main h2 {
    color: #dd1100;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

main hr {
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
}

main .c2grid {
    column-gap: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
}

main .description {
    color: #7e7e7e;
    display: block;
    font-size: .875rem;
}

main .button {
    background: #dd1100;
    border-radius: 4px;
    border: 1px solid #dd1100;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    padding: .45rem 1rem .5rem;
    text-align: center;
}

main .button:hover {
    background: #fe0000;
    color: #fff;
}

main .button.white {
    background: #fff;
    color: #dd1100 !important;
}

main .button.white:hover {
    background: #fe0000;
    color: #fff !important;
}

/* ==========================================================================
   header
   ========================================================================== */

#header {
    border-bottom: 1px solid #ccc;
    padding: 3rem 0;
    text-align: center;
    text-transform: uppercase;
    font-family:'Source Sans Pro', Arial, sans-serif;
}

#header h1 {
    font-size: 3.4rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1;
}

#header h1 span { color: #dd1100; }

#header p {
    font-size: 2.25rem;
    font-weight: 300;
    letter-spacing: .015em;
    line-height: 1.2;
}

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

#intro .left p {
    color: #333;
    font-size: 1.125rem;
    line-height: 2;
}

#intro .right .image {
    background-color: #ebebeb;
    border-radius: 50%;
    height: 100px;
    margin-left: 4.5rem;
    padding: .5rem;
    width: 100px;
}

#intro .right .p1 {
    color: #e06e04;
    font-size: .81rem;
    line-height: 1;
}

#intro .right .p2 {
    color: #656565;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: .25rem;
}

#intro .right .p3 {
    color: #5d5c5c;
    font-size: .75rem;
    margin-bottom: .5rem;
}

#intro .right .info-wrapper { position: relative; }

#intro .right .info-box {
    background: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 1px .25rem rgb(0, 0, 0, .5);
    color: #5d5c5c;
    display: none;
    padding: 1rem;
    position: absolute;
    right: 0;
    width: 400px;
}

#intro .right .info-wrapper:hover .info-box { display: block; }

#intro .right .info-box p:first-child {
    color: #7a7a7a;
    font-size: .875rem;
    font-weight: 600;
}

#intro .right .info-box p:last-child { color: #5d5c5c; }

/* ==========================================================================
   key benefits
   ========================================================================== */

#key-benefits { color: #585858; }

#key-benefits .c2grid > div {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: 4.375rem 1fr;
}

#key-benefits .c2grid span {
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

#key-benefits .p1 { margin-top: 2rem; }

#key-benefits .p2 {
    color: #7e7e7e;
    font-size: .875rem;
}

/* ==========================================================================
   use cases
   ========================================================================== */

#use-cases h2 { margin-bottom: .25rem; }

#use-cases h2 + p {
    color: #7e7e7e;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

#use-cases h3 {
    color: #e60000;
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
}

#use-cases h3 + p {
    color: #7e7e7e;
    font-size: .875rem;
    margin-bottom: 1rem;
}

#use-cases ul { padding-left: 1rem; }

#use-cases ul li {
    color: #444;
    padding: .4rem 0;
    position: relative;
}

#use-cases ul li::before {
    color: #ff6a1c;
    content: '▪';
    display: block;
    margin-left: -1rem;
    position: absolute;
}

#use-cases .p1 { margin-top: 2rem; }

#use-cases .p2 {
    color: #7e7e7e;
    font-size: .875rem;
}

/* ==========================================================================
   mission
   ========================================================================== */

#mission {
    background: #f77700;
    color: #fff;
    font-weight: 600;
    padding: 2rem !important;
    text-align: center;
}

#mission h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-family:'Source Sans Pro', Arial, sans-serif;
}

#mission p { margin-bottom: 1.5rem; }

#mission p:last-child { margin-bottom: 0; }

#mission .button {
    background: #fff;
    border: 1px solid #fff;
    color: #e26d00;
    font-weight: 600;
}

#mission .button:hover {
    background: #d10;
    border: 1px solid #d10;
    color: #fff;
}

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

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

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

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

@media all and (max-width: 900px) {
    main .c2grid { grid-template-columns: 1fr; }

    #intro .right { justify-self: center; }

    #intro .right .info-box { width: 300px; }
}

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

@media all and (max-width: 600px) {
    #intro .right .info-box { width: 250px; }
}

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

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

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

@media print {
}