/* WANE landing page styles.

   developer:   rmiske
   requires:    /common/framework/css/framework.fr.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*/
}



/* ==========================================================================
   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*/
}



/* ==========================================================================
   carousel
   ========================================================================== */
.cd-hero {
    margin: 1.625rem auto 0;
    max-width: 375px;
    position: relative; 
}
.cd-hero__slider { 
    height: calc(5.2rem + 2.5rem); 
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    width: 80%;
}
.cd-hero__slide {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    will-change: transform;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cd-hero__slide > * { font-size: 0.98rem !important; }
.cd-hero__slide.cd-hero__slide--selected {
    /* this is the visible slide */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.cd-hero__slide.cd-hero__slide--move-left {
    /* slide hidden on the left */
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.cd-hero__slide.cd-hero__slide--is-moving,
.cd-hero__slide.cd-hero__slide--selected {
    /* the cd-hero__slide--is-moving class is assigned to the slide which is moving outside the viewport */
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}
html:not(.js-enabled) .cd-hero__slide { display: none; }
html:not(.js-enabled) .cd-hero__slide.cd-hero__slide--selected { display: block; }


/* hero slider nav */
.cd-hero__nav { 
    background: transparent;
    bottom: 0;
    height: 1.125rem;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.cd-hero__nav nav,
.cd-hero__nav ul,
.cd-hero__nav li,
.cd-hero__nav a { height: 100%; }

.cd-hero__nav nav {
    display: block;
    margin: 0 auto;
    position: relative;
}
.cd-hero__nav ul.outer-ul {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.cd-hero__nav li { 
    line-height: 1.125rem; 
    padding-bottom: 0; 
}


/*dots*/
.cd-hero__nav ul.outer-ul li.scroll {
    overflow: hidden;
    width: 100%;
}
.cd-hero__nav ul.inner-ul {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
}
.cd-hero__nav ul.inner-ul > li { flex: 0 0 auto; }
.cd-hero__nav .dot {
    background: #a6a6a6;
    border-radius: 100%;
    cursor: pointer;
    display: inline-block;
    height: 6px;
    margin: 0 4px;
    width: 6px;
}
.cd-hero__nav li.cd-selected .dot { background: #fff; }
.cd-hero__nav .dot:hover { }
.cd-hero__nav li.cd-selected .dot:hover { background: #fff; }


/*arrows*/
.cd-hero__nav ul.outer-ul li:not(.scroll) {
}
.cd-hero__nav ul.outer-ul li.arrow {
    background: transparent;
    font-size: 3rem;
    line-height: 1;
    color: #777;
    min-height: 6.5rem;
    position: absolute;
    top: -2.5rem;
    transform: translate(0, -50%);
    vertical-align: middle;
    width: 32px;
    z-index: 999999;
}
.cd-hero__nav ul.outer-ul li.arrow:hover { color: #fff; }

.cd-hero__nav ul.outer-ul li.arrow-left {
    left: 0;
}
.cd-hero__nav ul.outer-ul li.arrow-right {
    right: 0;
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) {
    /*features: main*/
    section.features { padding: 0 1rem; }
}


@media (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;
    }
}


@media (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; }
}


@media (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; }
}


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