/* Styles for the Presentation Tools landing page.

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



/* ==========================================================================
   setup the environment
   ========================================================================== */
html {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
body {
    position: relative;
    color: #535353;
}



/* ==========================================================================
   sections
   ========================================================================== */
section  {
    padding: 2rem 0;
    width: 100%;
}
div[id$="-content"] {
    font-weight: 400;
    margin: 0 auto;
    max-width: 54rem;
    width: 100%;
}
div[id$="-content"] h2 {
    color: #1cb2cd;
    font-size: 2.1875rem;
    font-weight: 400;
    margin: 0 0 2rem;
    text-align: center;
}
div[id$="-content"] h2 span {
    font-weight: 300;
}
div[id$="-content"] img,
div[id$="-content"] iframe {
    max-width: 100%;
}



/* ==========================================================================
   header
   ========================================================================== */
#section-header { 
    background: url('https://www.wolfram.com/presenter-tools/img/header-bg.jpg') no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
#section-header,
#section-header #podium {
    height: 400px; 
}
#section-header #podium {
    background: #1cb2cd;
    padding: 0 1.25rem;
    position: absolute;
    right: -1.25rem;
    top: 0;
    width: 23.14814814814815%;
}
#podium img {
    bottom: 0;
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
    width: 80%;
}
#section-header-content {
    position: relative;
}
#section-header #badge {
    background: #1cb2cd;
    color: #fff;
    font-size: 1.5rem;
    left: 0;
    line-height: 1;
    padding: 0.5rem 2.5rem;
    position: absolute;
    top: 0;
}
#section-header h1 {
    color: #fef37e;
    font-size: 2.75rem;
    font-weight: 300;
    padding-top: 7.125rem;
    width: 75%;
}
a.playbutton {
    background: #fff;
    border-radius: 2rem;
    color: #494949;
    display: inline-block;
    font-size: 1.4375rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 3rem;
    padding: 1.125rem 1.375rem;
}
a.playbutton:hover,
a.playbutton:active {
    opacity: 0.7;
}
a.playbutton span {
    border-color: transparent transparent transparent #494949;
    border-style: solid;
    border-width: .5rem 0 .5rem .866666666666666rem;
    display: inline-block;
    height: 0;
    margin-right: 0.375rem;
    transform:rotate(360deg);
    width: 0;
}



/* ==========================================================================
   intro
   ========================================================================== */
#intro {
    position: relative;
    z-index: 0;
}
#intro-content {
    font-size: 1.4375rem;
    font-weight: 300;
    line-height: 2.25rem;
}
#intro-content strong {
    font-weight: 400;
}



/* ==========================================================================
   explore scenarios
   ========================================================================== */
#scenarios { 
    background: #1cb2cd; 
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
#scenarios-content {
    color: #fff;
    font-size: 1.3125rem;
    line-height: 1.7;
    max-width: none;
    text-align: center;
}
#scenarios h2 {
    color: #fff;
}
#slideThumbs {
    width: 54.75rem;
    margin: 0 auto;
}
#slideThumbs .thumb {
    margin: 0 0.68493150684932%; /*6px;*/ 
    width: 15.29680365296804%; /*134px;*/
}
#slideThumbs .thumb .label {
    font-size: 0.875rem;
    line-height: 1.2;
    margin-bottom: 0.875rem;
    text-align: center;
    text-transform: uppercase;
}
#slideThumbs .thumb .tab-icon {
    background: rgba(51,51,51,0.2);
    cursor: pointer;
    height: 70px;
    vertical-align: middle;
    width: 15.29680365296804%; /*134px;*/
}
#slideThumbs .thumb .tab-icon:hover {
    background: rgba(51,51,51,0.5);
}
#slideThumbs .thumb .tab-icon img {
    vertical-align: middle;
}
#slideThumbs .thumb.selected-thumb .tab-icon, #slideImages {
    background: #333;
}
#slideImages { 
    background-image: url('https://www.wolfram.com/presenter-tools/img/scenario-bg.gif');
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 4.5rem;
}
#slideImages .slide {
    display: none;
}
#slideImages .selected-img {
    display: inline-block;
    width: 100%;
}
#slideImages .slide img {
    background: url('https://www.wolfram.com/presenter-tools/img/scenario-reflection.png') left bottom repeat-x;
    padding-bottom: 40px;
}
.quote {
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 4.25rem auto 3.5rem;
    max-width: 54rem;
    min-height: 4.5rem;
    padding: 0 4.6875rem;
    position: relative;
    text-align: left;
}
.quote:before {
    background: url('https://www.wolfram.com/presenter-tools/img/quote1.png') left top no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 4.5rem;
    left: 0;
    position: absolute;
    top: 0.25rem;
    width: calc(6.71296296296296%);
}
.quote:after {
    background: url('https://www.wolfram.com/presenter-tools/img/quote2.png') right top no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 4.5rem;
    position: absolute;
    right: 0;
    top: 0.25rem;
    width: calc(6.71296296296296%);
}



/* ==========================================================================
   key features: shared
   ========================================================================== */
#key-preparation-content,
#key-presentation-content {
    max-width: 100%;
    text-align: center;
}
.feature-container {
    display: flex; 
    margin: 0 auto;
    max-width: 100%;
    width: 1019px; 
}
.feature-left-col {
    order: 1; 
    width: 21.5897939156%; /*220px*/
}
.feature-left-col div {
    text-align: right;
}
.feature-main-img {
    order: 2; 
    width: 56.8204121688%; /*579px*/
}
.feature-right-col {
    order: 3; 
    width: 21.5897939156%; /*220px*/
}
.feature-right-col div {
    text-align: left;
}
.feature-left-col div img,
.feature-right-col div img {
    margin-top: 0.75rem;
}
.feature-left-col div img + h3,
.feature-right-col div img + h3 {
    margin-top: 0.5rem;
}
#key-preparation-content h3,
#key-presentation-content h3 {
    font-size: 0.875rem;
    font-weight: 600;
}
#key-preparation-content p,
#key-presentation-content p {
    font-size: 0.75rem;
}
.feature-main-img .pointer {
    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;
}



/* ==========================================================================
   key features: presentation
   ========================================================================== */
#key-presentation {
    background: #333;
    padding: 3.375rem 0;
}
#key-presentation-content h2,
#key-presentation-content h3 {
    color: #fef37e;
}
#key-presentation-content p {
    color: #a6a6a6
}
#presentation-main2-container {
    margin: 4.125rem auto;
}
#presentation-main2 {
    margin-left: 17px;
}

#interactive { top: 20.6790123457%; /*67px*/ }
#pointer-interactive { top: 22.2222222222%; /*72px*/ width: 10.0172711572%; }
#real-time { top: 56.7901234568%; /*184px*/ }
#pointer-real-time { top: 58.3333333333%; /*189px*/ width: 10.0172711572%; }
#notes-nav { top: 0; }

#live-coding { top: 20.3703703704%; /*66px*/ }
#pointer-live-coding { top: 21.6049382716%; /*70px*/ width: 10.0172711572%; }
#rotatable-graphics { top: 39.8148148148%; /*129px*/ }

#auto-resizing { top: 0; }
#in-slide-scrolling { top: 151px; /*151px*/ }



/* ==========================================================================
   key features: preparation
   ========================================================================== */
#key-preparation {
    background: #f9f9f9;
    padding: 3.375rem 0;
}
#key-preparation-content h2 {
    color: #1cb2cd;
}
#key-preparation-content h3 {
    color: #1cb2cd;
}
#key-preparation-content p {
    color: #898989
}
#key-preparation-content div.pod {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px 10px;
}
#key-preparation-content div.pod.left { 
    width: 195px; 
    right: 0;
}
#key-preparation-content div.pod.right {
    width: 200px;
}
#key-preparation-content div.pod h3 {
    font-size: 0.75rem;
    color: #646464;
}
#key-features-preparation-main { 
    box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.2);
    margin-top: 9px; 
}
.key-features-preparation-main-split {
    box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.2);
    display: none;
    margin: 0 auto;
}

#quick-edit { top: 2.93809024134%; /*28px*/ }
#pointer-quick-edit { top: 2.20356768101%; /*21px*/ width: 5.18134715026%; }
#slide-theme { top: 13.4312696747%; /*128px*/ }
#typesetting { top: 56.4533053515%; /*538px*/ }
#pointer-typesetting { top: 56.9779643232%; /*543px*/ width: 13.9896373057%; }
#theme-edit { top: 68.2056663169%; /*650px*/ }
#plot-styles { top: 91.6054564533%; /*873px*/ }
#pointer-plot-styles { top: 92.130115425%; /*878px*/ width: 13.9896373057%; }

#one-click { top: 2.83315844701%; /*27px*/ }
#pointer-one-click { top: 3.25288562434%; /*31px*/ width: 4.83592400691%; }
#adjustment { top: 9.0241343127%; /*86px*/ }
#pointer-adjustment { top: 5.14165792235%; /*49px*/ width: 35.9240069085%; }
#scrolling { top: 15.2151101784%; /*145px*/ }
#pointer-scrolling { top: 15.6348373557%; /*149px*/ width: 4.14507772021%; }
#hierarchical { top: 25.1836306401%; /*240px*/ }
#pointer-hierarchical { top: 25.0786988458%; /*239px*/ width: 6.56303972366%; }
#config-control { top: 40.9233997901%; /*390px*/ }
#slide-break { top: 75.1311647429%; /*716px*/ }
#pointer-slide-break { top: 75.5508919203%; /*720px*/ width: 8.80829015544%; }



/* ==========================================================================
   footer/cta
   ========================================================================== */
#footer {
    background-color: #1cb2cd;
    color: #fff;
    padding: 2.25rem 0;
}
#footer-content {
    margin: 0 auto;
    max-width: 56rem;
    width: 100%;
}
#footer h2, #footer h3, #footer p {
    color: #fff;
    font-weight: 300;
}
#footer h2 {
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}
#footer h3, #footer p {
    padding: 0 .875rem;
}
#footer h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}
#footer p {
    font-size: 0.875rem;
    line-height: 1.5625rem;
}
#footer-content .grid > div {
    margin: 1.5rem 0 0;
}
#footer-content .button {
    background: #f5ef85;
    border-radius: .2rem;
    color: #1cb2cd;
    display: inline-block;
    padding: 0.125rem 1rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    font-weight: 600;
}
#footer-content .button:focus,
#footer-content .button:hover {
    background: #fff200;
    color: #1cb2cd;
}
#footer-content a { color: #fef37e; }
#footer-content a:focus,
#footer-content a:hover { color: #fff200; }



/* ==========================================================================
   animation
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animate {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    opacity: 0;
}
.fadeIn {
    animation-name: fadeIn;
}
.fadeUp {
    animation-name: fadeInUp;
}
.fadeInDown {
    animation-name: fadeInDown;
}
.fadeInRight {
    animation-name: fadeInRight;
}
.fadeInLeft {
    animation-name: fadeInLeft;
}

#section-header { 
    animation-delay: 1s;
}
#section-header #podium,
#section-header #badge,
#section-header .message {
    animation-delay: 2s;
}
.main-reveal,
#intro {
    animation-delay: 3s;
}
#scenarios, #key-presentation { 
    animation-delay: 4s;
}



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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    #section-header,
    #section-header #podium {
        height: 320px; /*388*/
    }
    #key-preparation-content,
    #key-presentation-content {
        padding: 0 1.5rem;
    }
}



/* another exception (1080px)
   ========================================================================== */
@media all and (max-width: 1080px) {
    .feature-container { width: 890px; }
    .feature-left-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; }
    .feature-right-col { width: 24.7191011236%; /*220px*/ }
    #key-preparation-content div.pod {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        width: auto !important; 
    }
    #key-preparation-content div.pod.left { 
        text-align: right !important;
    }
    #key-preparation-content div.pod.right {
        text-align: left !important;
    }
    /*#key-preparation-content div.pod { padding: 8px 5px; }
    .feature-left-col img,
    .feature-left-col div img,
    .feature-right-col img,
    .feature-right-col div img { max-width: 67%; }*/

}




/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    div[id$="-content"] {
        padding: 0 1.5rem;
    }
    #section-header,
    #section-header #podium {
        height: 280px; 
    }
    #section-header #podium {
        right: 1.875rem;
        width: 20%;
    }
    #section-header #badge {
        font-size: 1rem;
        left: 20px;
        padding: 0.5rem 1rem;
    }
    #section-header h1 {
        font-size: 2.142857142857143rem;
        padding-top: 6rem;
    }
    a.playbutton {
        margin-top: 2rem;
        font-size: 1.125rem;
        padding: .875rem 1.125rem;
    }
    a.playbutton span {
        border-width: .35rem 0 .35rem .606rem;
        margin-right: 0.25rem;
    }
    #scenarios-content { 
        padding: 0;
    }
    #slideThumbs {
        width: 100%;
    }
    #slideImages { 
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #slideImages h3 {
        font-size: 1.428571rem;
        margin-top: 2rem;
    }
    #slideImages .slide:first-child h3 { 
        margin-top: -1rem; 
    }
    p.quote {
        margin-top: 2rem;
        padding: 0 10%;
    }
    /****************************************/
    .feature-container {
        display: block;
        max-width: 100%; 
    }
    .feature-main-img { 
        padding: 0;
        width: 100%;
    }
    .feature-main-img video { 
        max-width: 100%;
        height: auto;
    }
    .feature-left-col, 
    .feature-right-col,
    .feature-main-img .pointer,
    #key-features-preparation-main { 
        display: none;
    }
    .key-features-preparation-main-split { 
        display: block;
    }
    #presentation-main2-container {
        margin: 2rem 0;
    }
    .prep2,
    .prep3,
    .prep4 {
        margin-top: 2rem;
    }
    /* caurousel */
    .feature-main-img .slides {
        display: block;
        position: relative;
        margin: 1rem auto 0;
    }
    .slides-inner {
        position: relative; 
        height: 3rem; 
    }
    .slide {
        width: 100%;
        display: none;
        position: absolute;
        right: -100%;
        left: auto;
        top: 0;
        margin: auto;
        height: 3rem; 
    }
    .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.prev h3, .slide.prev p {
    }
    .slide img {
        bottom: 4rem;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        z-index: 2;
    }
    #key-presentation .slide img {
        bottom: calc(4rem + 4px);
    }
    .slide img + img {
        z-index: 3;
    }
    .nav-links {
        display: none;
    }
    .nav-links.show {
        display: block;
    }
    .nav {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: #999;
        margin: 1rem .25rem 0;
    }
    .nav.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: 1rem;
        height: 3rem;
        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;
    }
    .arrows .next {
        right: 0;
    }

    #key-preparation .nav { 
        background: #8dd8e6; 
    }
    #key-preparation .nav.show { 
        background: #1cb2cd; 
    }
    #key-preparation .arrows .prev, 
    #key-preparation .arrows .next { 
        color: #1cb2cd; 
    }
    #key-preparation .arrows .prev:hover, #key-preparation .arrows .next:hover,
    #key-preparation .arrows .prev:active, #key-preparation .arrows .next:active {
        color: #8dd8e6; 
    }
    /****************************************/
}



/* an exception (601-767px)
   ========================================================================== */
@media all and (max-width: 767px) {
    #footer-content { 
        padding: 0 3rem;
    }
    #footer-content .grid > div {
        width: 100% !important;
        border-top: 1px solid #fff;
        padding-top: 1.125rem;
        text-align: center;
    }
    #footer-content .grid > div:first-child {
        border: none;
        padding-top: 0;
    }
}



/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    #section-header,
    #section-header #podium {
        height: 220px;
    }
    #section-header h1 {
        font-size: 1.75rem;
        padding-top: 3.5rem;
    }
    a.playbutton {
        margin-top: 1.25rem;
        font-size: 1rem;
        padding: .625rem .875rem;
    }
    a.playbutton span {
        border-width: .35rem 0 .35rem .606rem;
        margin-right: 0.25rem;
    }
    #intro-content {
        font-size: 1rem;
        line-height: 2rem;
    }
    #slideThumbs .thumb {
        margin: 0 6px;
        width: 8rem;
    }
    #slideThumbs .thumb .label {
        margin-bottom: 0;
    }
    #slideThumbs .thumb .tab-icon {
        height: 60px;
        width: 8rem;
    }
    /*carousel*/
    .slides-inner, .slide {
        height: 4rem; 
    }
    .slide img {
        bottom: 5rem;
    }
    #key-presentation .slide img {
        bottom: calc(5rem + 4px);
    }
    .slide h3, .slide p,
    .slide.show h3, .slide.show p {
        padding: 0 3rem;
    }
    .arrows .prev, .arrows .next {
        bottom: 1.25rem;
    }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    #section-header h1 {
        width: 100%;
    }
    /*carousel*/
    .slides-inner, .slide {
        height: 3rem; 
    }
    .slide img {
        bottom: 4rem;
    }
    #key-presentation .slide img {
        bottom: calc(4rem + 4px);
    }
    .slide h3, .slide p, 
    .slide.show h3, .slide.show p, 
    .arrows {
        max-width: 100%;
    }
    .arrows .prev, .arrows .next {
        bottom: 0.5rem;
    }
}


/* printer styles
   ========================================================================== */
@media print {}