/* WANE landing page styles.

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */

main {
    color: #535353;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

main img {
    height: auto;
    max-width: 100%;
}

section { width: 100%; }

div[id$="-content"] {
    margin: 0 auto;
    max-width: 62.625rem;
    /*1002*/
    width: 100%;
}

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

#hero,
#intro { padding: 0 4.5rem; }

/*hero*/

#hero {
    background: #ffa24f;
    color: #000;
    display: block;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

#hero-content { padding: 0; }

#hero .txt {
    padding: 5.875rem 3rem 4rem 0;
    width: 73.8522954092%;
    /*740px*/
}

#hero .txt p {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.625;
    padding-bottom: 1.25rem;
}

#hero .txt img {
    margin-bottom: 1.875rem;
    width: 25.0625rem;
}

#hero .img {
    padding: 5.875rem 0 5.25rem;
    width: 26.1477045908%;
    /*262px*/
}

#hero a.hero-btn {
    background: #dd1100;
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block line-height: 1;
    margin-right: 0.5rem;
    padding: 0.25rem 1rem 0.375rem;
    white-space: nowrap;
}

#hero a.hero-btn:hover {
    background: #fff;
    color: #f77700;
}

#hero a.find-out {
    display: block;
    font-size: 14px;
    color: #000;
    margin-top: 25px;
}

#hero a.find-out::after {
    content: "»";
    color: #dd1100;
    margin-left: 5px;
}

#hero a.find-out:hover,
#hero a.find-out:hover::after { color: #fff; }

/*intro*/

#intro { background: #fff; }

#intro-content { padding: 2.375rem 0 1.5rem; }

#intro p {
    font-size: 1.4375rem;
    font-weight: 300;
    line-height: 2.25rem;
}

#intro hr {
    border-top: 1px solid #ddd;
    margin: 40px 0 40px 0;
}

#intro #iconHeader {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1.4375rem;
    font-weight: 600;
    color: #f18114;
    text-align: center;
}

#intro #icons { margin-top: 30px; }

.used-on a {
    /*padding-left: 59px;*/
    min-height: 58px;
    position: relative;
    text-align: center;
}

.used-on i {
    background: url('/wolfram-alpha-notebook-edition/img/IntroButtons.png') no-repeat 0 0;
    background-size: 59px 252px;
    display: block;
    font-size: 0;
    height: 42px;
    left: 0;
    line-height: 0;
    overflow: hidden;
    width: 59px;
    margin: 0 auto;
}

.used-on a:nth-of-type(1) i { background-position: 0 0; }

.used-on a:nth-of-type(1):hover i { background-position: 0 -42px; }

.used-on a:nth-of-type(2) i { background-position: 0 -84px; }

.used-on a:nth-of-type(2):hover i { background-position: 0 -126px; }

.used-on a:nth-of-type(3) i { background-position: 0 -168px; }

.used-on a:nth-of-type(3):hover i { background-position: 0 -210px; }

.used-on a span:nth-of-type(1) {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #535353;
    display: block;
    padding: 0 0.5rem 0 0.5rem;
    margin-top: 1rem;
}

.used-on a:hover span:nth-of-type(1),
.used-on.full-system a:hover span:nth-of-type(1) { color: #dd1100; }

.used-on.full-system a span:nth-of-type(1) { margin-top: 0; }

.used-on a span:nth-of-type(2),
.used-on.full-system a span:nth-of-type(1) {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    color: #535353;
    display: block;
    padding: 0 0.5rem 0 0.5rem;
}

/* ==========================================================================
   features: shared
   ========================================================================== */

section.features {
    background: #333;
    padding: 0;
}

section.features>div {
    max-width: 100%;
    padding-top: 3.75rem;
    text-align: center;
}

.feature-container {
    display: flex;
    margin: 0 auto;
    max-width: 100%;
    width: 1019px;
}

section.features h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    padding: 0 0 2rem;
    text-align: center;
}

section.features h3 {
    color: #ffa24f;
    font-size: 0.875rem;
    font-weight: 600;
}

section.features p {
    color: #a6a6a6;
    font-size: 0.75rem;
}

section.features a {
    color: #fff;
    font-weight: 600;
}

section.features a:hover { color: #ffb472; }

section.features a.download-nb {
    background: url('/wolfram-alpha-notebook-edition/img/icon-download-notebook.png') no-repeat;
    background-size: 14px;
    line-height: 27px;
    padding-left: 20px;
}

.feature-col {
    width: 21.5897939156%;
    /*220px*/
}

.feature-col div img { margin-top: 0.75rem; }

.feature-col div img+h3 { padding-top: 0.5rem; }

.feature-left-col { order: 1; }

.feature-left-col div { text-align: right; }

.feature-right-col { order: 3; }

.feature-right-col div { text-align: left; }

.feature-main-img {
    order: 2;
    width: 56.8204121688%;
    /*579px*/
}

.feature-main-img .pointer {
    width: 7.42659758204%;
    /*43px*/
    z-index: 2;
}

.feature-main-img .pointer.left {
    left: 1.55440414508%;
    /*9px*/
}

.feature-main-img .pointer.right {
    right: 1.55440414508%;
    /*9px*/
}

/* caurousel for mobile*/

.feature-main-img .slides { display: none; }

/* ==========================================================================
   features: specific
   ========================================================================== */

/*intuitive - 531px*/

#intuitive-content { padding-top: 4rem; }

#free-form {
    top: 4.89642184557%;
    /*26px*/
}

#pointer-free-form {
    top: 5.83804143126%;
    /*31px*/
}

#suggested-steps {
    top: 9.41619585687%;
    /*50px*/
}

#pointer-suggested-steps {
    top: 10.3578154426%;
    /*55px*/
}

/*understand - 465px*/

#real-world-data {
    top: 5.59139784946%;
    /*26px*/
}

#pointer-real-world-data {
    top: 6.66666666667%;
    /*31px*/
}

#step-by-step {
    top: 55.0537634409%;
    /*256px*/
}

#pointer-step-by-step {
    top: 56.1290322581%;
    /*261px*/
}

#build-up-calc {
    top: 36.1290322581%;
    /*168px*/
}

#pointer-build-up-calc {
    top: 37.2043010753%;
    /*173px*/
}

#interactive-coursework {
    top: 67.7419354839%;
    /*315px*/
}

/*unified - 411px*/

#unified-content { padding-bottom: 3.75rem; }

#customize-docs {
    top: 6.08272506083%;
    /*25px*/
}

#pointer-customize-docs {
    top: 7.29927007299%;
    /*30px*/
}

#interactive-manips {
    top: 45.9854014599%;
    /*189px*/
}

#pointer-interactive-manips {
    top: 47.201946472%;
    /*194px*/
}

#all-in-one {
    top: 31.6301703163%;
    /*130px*/
}

#dynamic-slideshows {
    top: 62.0437956204%;
    /*255px*/
}

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

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

@media all and (max-width: 1200px) {
    /*features: main*/
    section.features { padding: 0 1rem; }
}

/* an exception (1080px)
   ========================================================================== */

@media all and (max-width: 1080px) {
    .feature-container { width: 890px; }
    .feature-col {
        width: 24.7191011236%;
        /*220px*/
    }
    .feature-main-img {
        width: 50.5617977528%;
        /*450px*/
        padding: 0 1.5rem;
    }
    .feature-main-img img,
    .feature-main-img video {
        max-width: 100%;
        height: auto;
    }
}

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

@media all and (max-width: 900px) {
    /*header:hero*/
    #hero { padding-right: 0; }
    #hero .txt p { font-size: 26px; }
    #hero .img {
        align-items: center;
        display: flex;
        padding-right: 25px;
    }
    #hero a.find-out { font-size: 13px; }
    /*features:main*/
    .feature-container {
        display: block;
        max-width: 100%;
    }
    .feature-main-img {
        padding: 0;
        width: 100%;
    }
    .feature-main-img video {
        max-width: 100%;
        height: auto;
    }
    .feature-col,
    .feature-main-img .pointer { display: none; }
    /*features: caurousel*/
    .feature-main-img .slides {
        display: block;
        position: relative;
        margin: 1.625rem auto 0;
    }
    .slides-inner {
        position: relative;
        height: 4.25rem;
    }
    .slide {
        width: 100%;
        display: none;
        position: absolute;
        right: -100%;
        left: auto;
        top: 0;
        margin: auto;
        height: 4.25rem;
    }
    .slide.show {
        right: 0;
        left: auto;
    }
    .slide.prev {
        right: 100%;
        left: auto;
        display: none;
    }
    .slide h3,
    .slide p,
    .slide.show h3,
    .slide.show p {
        width: 375px;
        max-width: 70%;
        margin: auto;
        padding: 0 4rem;
    }
    .slide.show h3 { font-size: 13px; }
    .slide.show p { font-size: 12px; }
    .slide img {
        /*bottom: 5.25rem;*/
        bottom: calc(5.875rem + 4px);
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        z-index: 2;
    }
    .slide img+img { z-index: 3; }
    .nav-links { display: none; }
    .nav-links.show { display: block; }
    .nav-links .slidenav {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: #999;
        margin: 1rem .25rem 0;
    }
    .nav-links .slidenav.show {
        background: #fff;
        display: inline-block !important;
    }
    .arrows {
        display: none;
        width: 375px;
        max-width: 70%;
        position: relative;
        margin: auto;
    }
    .arrows.show { display: block; }
    .arrows .prev,
    .arrows .next {
        position: absolute;
        bottom: 0.5rem;
        width: 2.5rem;
        height: 4.25rem;
        font-size: 3rem;
        cursor: pointer;
        color: #999;
    }
    .arrows .prev:hover,
    .arrows .next:hover,
    .arrows .prev:active,
    .arrows .next:active { color: #fff; }
    .arrows .prev { left: -0.75rem; }
    .arrows .next { right: -0.75rem; }
}

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

@media all and (max-width: 600px) {
    /*header*/
    #hero,
    #intro { padding: 0 1rem; }
    /*header:hero*/
    #hero .txt {
        padding: 30px 0 18px;
        width: 100%;
    }
    #hero .txt p { font-size: 24px; }
    #hero .txt img { margin-bottom: 8px; }
    #hero .img { display: none; }
    #hero .hero-links {
        display: flex;
        align-items: center;
    }
    #hero a.find-out {
        margin-top: 0;
        margin-left: 5px;
    }
    .used-on i {
        background-size: 48px 205.02px;
        width: 59px;
        height: 34.17px;
        position: absolute;
        top: 0;
    }
    .used-on a {
        padding-left: 50px;
        text-align: left;
    }
    .used-on a span:nth-of-type(1) { margin-top: 0; }
    .used-on a:nth-of-type(1):hover i { background-position: 0 -34.17px; }
    .used-on a:nth-of-type(2) i { background-position: 0 -68.34px; }
    .used-on a:nth-of-type(2):hover i { background-position: 0 -102.51px; }
    .used-on a:nth-of-type(3) i { background-position: 0 -136.68px; }
    .used-on a:nth-of-type(3):hover i { background-position: 0 -170.85px; }
    .used-on a:nth-of-type(3) { min-height: 38px; }
    /*intro*/
    #intro-content { padding: 23px 0 26px; }
    /*features: main*/
    section.features>div { padding-top: 35px !important; }
    #unified-content { padding-bottom: 35px; }
    /*features:carousel*/
    .feature-main-img .slides { margin: 1.5rem auto -1px; }
    .slide h3,
    .slide p,
    .slide.show h3,
    .slide.show p { padding: 0 3rem; }
}

/* an exception (480px)
   ========================================================================== */

@media all and (max-width: 480px) {
    /*features:carousel*/
    .slide h3,
    .slide p,
    .slide.show h3,
    .slide.show p,
    .arrows { max-width: 100%; }
    .slides-inner,
    .slide,
    .arrows .prev,
    .arrows .next { height: 5rem; }
    .slide img {
        /*bottom: 6rem;*/
        bottom: calc(6.625rem + 4px);
    }
}

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

@media all and (max-width: 320px) {
    /*features:carousel*/
    .slides-inner,
    .slide,
    .arrows .prev,
    .arrows .next { height: 5.5rem; }
    .slide img {
        /*bottom: 6.5rem;*/
        bottom: calc(7.125rem + 4px);
    }
}

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

@media print {}