/* Styles for the Data Science landing page.

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


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

/*section*/
section { padding: 0 2rem; width: 100%; }
div[id$="-content"] {
    margin: 0 auto;
    max-width: 62.625rem; /*1002*/
    padding: 3.375rem 0 3.75rem;
    width: 100%;
}
div[id$="-content"] h2 {
    color: #f57300;
    font-size: 2rem;
    padding-bottom: 1.8125rem;
    text-align: center;
}

/*shared*/
p.intro {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2.25rem;
}

.btn {
    background: #f57300; 
    border-radius: 0.25rem;
    color: #fff;
    line-height: 18px;
    margin: 1.875rem 0 0;
    padding: 10px .9rem;
    text-transform: uppercase;
}
.btn:hover { background: #dd1100; }

.show-more, .show-less { text-align: center; }
.show-more p, .show-less p { cursor: pointer; display: inline-block; }
.show-more a, .show-less a { color: #fff; }
.show-more img, .show-less img { margin: 0 10px 2px 0; vertical-align: middle; }
.show-less img { transform: rotate(180deg); }
.show-more p span, .show-less p span { font-weight: 300; }



/* ==========================================================================
   header
   ========================================================================== */
#hero-title-content { padding-bottom: 0; }
#hero-title h1 {
    color: #1b88c0;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    margin: 3.375rem 0 3.5rem 0;
    text-align: center;
}
#hero-title h1 span { color: #7c7c7c; font-size: 2.25rem; }

#hero-img { 
    font-size: 0;
}
#hero-img-content { 
    padding: 0; 
    max-width: 76.375rem;
}
#hero-img img { max-width: 100%; }

#hero-intro-content { padding: 2.875rem 0 3.5rem; }
#hero-intro p.intro { line-height: 1.5; }



/* ==========================================================================
   ticker
   ========================================================================== */
.quotes { background: #e3f4ff; }
.quotes > div[id$="-content"] { padding: 2.5rem 0; }
.quote-container { padding: 0 4.125rem; }
.ticker-item { display: none; }

.ticker-icon { font-size: 0; padding-right: 1.875rem; }
p.ticker-title { 
    color: #0079c1; 
    font-size: 1.25rem; 
    line-height: 1.75rem;
    margin: -0.375rem 0 0.75rem;
	max-width: 39.75rem;
}
p.ticker-subtitle { font-size: 0.9375rem; line-height: 1.25rem; }

/*nav*/
.ticker-nav { font-size: 0; padding-top: 1.875rem; text-align: center; }
.dot {
    border: 2px solid #bbb;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 11px;
    margin: 0 4px;
    /*opacity: 0.5;*/
    width: 11px;
}
.dot.active { background: #bbb; /*opacity: 1;*/ }
.dot:hover { background: #bbb; /*opacity: 0.7;*/ }

/*fading animation 
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}
*/



/* ==========================================================================
   data science areas
   ========================================================================== */
#data-science-areas { background: #0079c1; }
#data-science-areas h2 { color: #fff; padding-bottom: 1.5rem; }
#data-science-areas p.intro {
    color: #fff;
    margin-bottom: 0.625rem;
}
#data-science-areas h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2.25rem;
    margin: -4px 0 2px;
}
#data-science-areas table p {
    color: #b9eaf6;
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.375rem;
}
#data-science-areas table td {
    position: relative;
    vertical-align: top;
    width: 33%;
}
#data-science-areas .fold { display: none; }
#data-science-areas table .top {
    margin-top: 1.875rem;
    padding: .9rem;
    max-width: 322px;
}
#data-science-areas table .top.open { background: #074977; }
#data-science-areas table .top > i { 
    background-size: 60px 120px !important; 
    display: inline-block;
    height: 60px;
    width: 60px;
}
#data-science-areas table .top.open > i { background-position: 0 -60px !important; }

#data-science-areas table .top#machine-learning > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-machine-learning.png') no-repeat 0 0; }
#data-science-areas table .top#graph-network-analysis > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-graph-network-analysis.png') no-repeat 0 0; }
#data-science-areas table .top#time-series > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-time-series.png') no-repeat 0 0; }
#data-science-areas table .top#neural-networks > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-neural-networks.png') no-repeat 0 0; }
#data-science-areas table .top#cluster-analysis > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-cluster-analysis.png') no-repeat 0 0; }
#data-science-areas table .top#semantic-text-analysis > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-semantic-text-analysis.png') no-repeat 0 0; }
#data-science-areas table .top#dynamic-visualization > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-dynamic-visualization.png') no-repeat 0 0; }
#data-science-areas table .top#survival-analysis > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-survival-analysis.png') no-repeat 0 0; }
#data-science-areas table .top#report-generation > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-report-generation.png') no-repeat 0 0; }
#data-science-areas table .top#data-semantics > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-data-semantics.png') no-repeat 0 0; }
#data-science-areas table .top#queueing-theory > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-queueing-theory.png') no-repeat 0 0; }
#data-science-areas table .top#wavelets > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-wavelets.png') no-repeat 0 0; }
#data-science-areas table .top#systems-modeling > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-systems-modeling.png') no-repeat 0 0; }
#data-science-areas table .top#statistical-distributions > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-statistical-distributions.png') no-repeat 0 0; }
#data-science-areas table .top#random-processes > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-random-processes.png') no-repeat 0 0; }
#data-science-areas table .top#optimization > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-optimization.png') no-repeat 0 0; }
#data-science-areas table .top#morphological-analysis > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-morphological-analysis.png') no-repeat 0 0; }
#data-science-areas table .top#computer-vision > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-computer-vision.png') no-repeat 0 0; }
#data-science-areas table .top#signal-processing > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-signal-processing.png') no-repeat 0 0; }
#data-science-areas table .top#custom-interface-construction > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-custom-interface-construction.png') no-repeat 0 0; }
#data-science-areas table .top#parallel-computing > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-parallel-computing.png') no-repeat 0 0; }
#data-science-areas table .top#geocomputation > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-geocomputation.png') no-repeat 0 0; }
#data-science-areas table .top#mathematical-modeling > i { background: url('https://www.wolfram.com/featureset/data-science/img/know-your-mathematical-modeling.png') no-repeat 0 0; }

#data-science-areas table .top span { white-space: nowrap; }

#data-science-areas table .expand {
    background: url('https://www.wolfram.com/featureset/data-science/img/know-your-expand.png') no-repeat top left;
    display: inline-block;
    height: 12px;
    margin: 0 0 -2px 5px;
    width: 12px;
}

#data-science-areas table .expand:hover { opacity: .7; }

#data-science-areas table .top.open .expand { background-position: 0 -12px; }

#data-science-areas table .fold {
    background: #fff;
    box-shadow: 0 5px 10px rgba(7, 73, 119, .5);
    font-size: .9rem;
    line-height: 20px;
    max-width: 322px;
    padding: 10px .9rem;
    position: absolute;
    width: 100%;
    z-index: 999999999;
}

#data-science-areas table .fold p { margin: 5px 0; }

#data-science-areas table .fold a:before {
    color: #0079c1;
    content: '»';
    font-weight: 400;
    margin-right: 3px;
}

#data-science-areas table .fold a {
    color: #606060;
    display: inline-block;
    font-size: .9rem;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

#data-science-areas table .fold a:hover { color: #0079c1; }

#data-science-areas .show-more { padding-top: 0.875rem; }
#data-science-areas .show-more p, #data-science-areas .show-less p { background: #004975; color: #fff; }
#data-science-areas .show-more p:hover, #data-science-areas .show-less p:hover { background: #012d48; }
#data-science-areas .show-more p span, #data-science-areas .show-less p span { color: #7cb4d5; }



/* ==========================================================================
   how it works
   ========================================================================== */
#how-it-works-content { max-width: 76.375rem; }
#how-it-works h2 { padding-bottom: 1.75rem; }
#how-it-works .notebook { 
    display: inline-block;
    height: 50rem;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
#how-it-works .notebook.active { height: auto; overflow: visible; }
#how-it-works .notebook .overlay {
    background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
    bottom: 0;
    height: 5rem;
    position: absolute;
    width: 100%;
    z-index: 2;
}
#how-it-works .notebook.active .overlay { display: none; }
#how-it-works .show-more .btn { margin-top: 3.25rem; }

#toggler {
    z-index: 13;
    bottom: 5rem;
    position: fixed;
    width: 100%; 
}
#annotation-toggle {
    background-color: rgba(22,131,166,0.75);
    text-align: center;
    width: 100%;
    padding: 0rem 2rem;
    display: none !important;
}
#annotation-toggle > div { padding: 0.75rem 0; }
#annotation-toggle span { 
    color: white; 
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75rem;
    text-transform: uppercase;
}
#annotation-toggle span.btn {
    background: white; 
    border-radius: 4px;
    color: #1683a6; 
    cursor: pointer;
    display: none;
    margin: 0 0 0 0.625rem;
    padding: 0 1.125rem; 
}
#annotation-toggle span.btn.selected { display: inline-block; }

#how-it-works .notebook img { max-width: 100%; } 
#how-it-works .annotation { z-index: 2; position: absolute; max-width: 100%; }
#how-it-works .annotation.hidden { display: none !important; }
#how-it-works .module { z-index: 1; }
#how-it-works .module img { box-shadow: 0 0 12px 1px rgba(0,0,0,0.12); }



/* ==========================================================================
   examples
   ========================================================================== */
#examples { background: #ffdb5a; }
#examples h2 { color: #636363; }
#examples h2:nth-of-type(2) { padding-top: 1.875rem; }

.example-cards a {
    background-color: #0079c1;
    border: 1px solid #ddd;
    display: block;
    height: 14.5rem;
    margin: 0 auto 2rem;
    overflow: hidden;
    padding: 1.1875rem 0.5rem 0.5rem;
    position: relative;
    width: 11.5625rem;
}
.example-cards a:before {
    /*background-position: 50% 0;*/
    background-repeat: no-repeat;
    background-size: cover;
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.example-cards.quick div:nth-child(1) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-recognizing-handwritten-digits.png'); }
.example-cards.quick div:nth-child(2) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-visualize-celebrity-gossip.png'); }
.example-cards.quick div:nth-child(3) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-deploy-age-guessing-website.png'); }
.example-cards.quick div:nth-child(4) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-analyze-meteorite-landings.png'); }
.example-cards.quick div:nth-child(5) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-classify-images-as-day-or-night.png'); }
.example-cards.featured div:nth-child(1) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-runkeeper-statistics.png'); }
.example-cards.featured div:nth-child(2) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-global-ebola-outbreak.png'); }
.example-cards.featured div:nth-child(3) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-computational-lexicology.png'); }
.example-cards.featured div:nth-child(4) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-cleaning-structuring-large-datasets.png'); }
.example-cards.featured div:nth-child(5) a:before { background-image: url('https://www.wolfram.com/featureset/data-science/img/examples-safe-drinking-water.png'); }

.example-cards a * { visibility: hidden; }
.example-cards a:hover:before { opacity: 0.08; }
.example-cards a:hover * { color: #fff; visibility: visible; }

.example-cards h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4375rem;
}
.example-cards p {
    font-size: 0.8125rem;
    line-height: 1.1875rem;
    padding-top: 0.875rem;
}

#examples .show-more p { margin-top: 0.5rem; }
#examples .show-more p:hover { }



/* ==========================================================================
   edge
   ========================================================================== */
#edge { position: relative; overflow: hidden; }
#edge-content { padding-bottom: 5rem; }
#edge h3 {
    color: #0079c1;
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 0.0625rem;
}
#edge h4 {
    font-size: 1.25rem;
    line-height: 1.625rem;
}

#spikey-bg {
    position: absolute;
    top: -1rem;
    left: calc(50% - 6.375rem);
    width: 58.875rem;
    z-index: -1;
}

#edge .mini-t { padding-top: 2.375rem; }
#edge p.intro + .mini-t { padding-top: 3.125rem; }
#edge .mini-t .txt { padding-right: 3rem; width: 100%; }
#edge .mini-t .txt > * { max-width: 35.625rem; }
#edge .mini-t p { 
    font-size: 0.9375rem; 
    padding-top: 0.625rem; 
}
#edge .mini-t .show-more { color: #0079c1; cursor: pointer; }
#edge .mini-t .show-more:hover { color: #dd1100; }

/*flipcards*/
.flip-card-inner {
    height: 190px; /*tallest img*/
    text-align: center;
    perspective: 1000px;
    position: relative;
    width: 268px; /*widest img*/
}

.flip-card-inner div {
    -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    height: 100%;
    position: absolute;
    transition: all 0.5s ease-in;
    width: 100%;
}
.flip-card.active .flip-card-front { transform: rotateY(180deg); }
.flip-card.active .flip-card-back { transform: rotateY(0deg); }
.flip-card .flip-card-back { transform: rotateY(-180deg); }



/* ==========================================================================
   workflows
   ========================================================================== */
#workflows { }
#workflows-content { max-width: none; padding: 4.625rem 0 0; }
#workflows h2 { padding-bottom: 2.4325rem; }

/*tabs*/
#thumbs {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
#thumbs .thumb { 
    background: #8dbdde;
    color: #fff; 
    display: inline-block; 
    font-size: 0.875rem;
    line-height: 0.9375rem;
    margin: 0 0.5rem;
    max-width: 25%; 
    padding: 1rem 1.5rem 0.875rem;
    width: 13.75rem; /*220px*/
}
#thumbs .thumb:hover, #thumbs .thumb.selected-thumb { background: #0079c1; }
#thumbs .thumb .txt {
    padding-left: 0.625rem;
    text-align: left;
}
#thumbs .thumb img {
    height: 2.875rem; /*46px*/
    width: 3.25rem; /*52px*/
}
#slides {
    border: solid #0079c1;
    border-width: 8px 0;
    margin: 0 -2rem;
}
#slides .slide { 
    background-position: bottom center;
    background-repeat: no-repeat;
    display: none; 
    padding: 0 1rem;
    width: 100%;
}
#slides .selected-slide { display: inline-block; }

/*content*/
.slide#enterprise-forecasting { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-bg-enterprise-forecasting.png'); }
.slide#product-recommendation { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-bg-product-recommendation.png'); background-position: center; }
.slide#chatbot-training { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-bg-chatbot-training.png'); background-position: center; }
.slide#automated-product-sorting { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-bg-automated-product-sorting.jpg'); }

#workflows p.intro {
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.75rem;
    margin: 0 auto;
    max-width: 85%;
    padding-bottom: 2rem;
    text-align: center;
}
#workflows .data-sources {
    font-size: 0;
    margin: 0 auto 0.625rem;
    max-width: 36rem; /*34.25rem;*/
    text-align: center;
}
.data-sources .mini-m { 
    display: inline-block; 
    max-width: 85%;
}
.data-sources .txt {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 0.625rem;
    text-align: left;
}

#workflows .steps { 
    background: #fff;
    border: 2px solid; 
    border-radius: 0.25rem; 
    margin: 0 auto;
    max-width: 36rem; /*34.25rem;*/
}

#workflows .step-title { 
    color: #000; 
    font-weight: 600; 
    padding: 1rem 1.375rem;
}
#workflows .step-title .mini-m div {
    border-right: 1px solid #232323;
    font-size: 2.25rem; 
    line-height: 2.6875rem;
    padding-right: 0.75rem;
    text-align: right;
    vertical-align: middle;
    width: 2.5rem;
}
#workflows .step-one { border-color: #82b7db; }
#workflows .step-one .step-title { background: #82b7db; }
#workflows .step-two { border-color: #6baff2; }
#workflows .step-two .step-title { background: #6baff2; }
#workflows .step-three { border-color: #71d7ff; }
#workflows .step-three .step-title { background: #71d7ff; }
#workflows .step-four { border-color: #7ad3d1; }
#workflows .step-four .step-title { background: #7ad3d1; }

#workflows .steps h3 { font-size: 1.5rem; padding-left: 0.75rem; }
#workflows .steps h4 { font-weight: 600; }
#workflows .steps h4,
#workflows .steps p {
    font-size: 0.9375rem;
    line-height: 1.0625rem;
    padding-bottom: 0.25rem;
}

#workflows .step-content { padding: 1rem 1.5rem 0 1.75rem; }
.step-content > div { 
    background-position: 0 4px;
    background-repeat: no-repeat; 
    background-size: 35px; 
    padding: 0 0.5rem 0.75rem 45px; 
}
.step-content .algorithmbase { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-icon-algorithmbase.png'); }
.step-content .algorithmbase h4 { color: #e79e00; }

.step-content .knowledgebase { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-icon-knowledgebase.png'); }
.step-content .knowledgebase h4 { color: #ed6600; }

.step-content .language { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-icon-language.png'); }
.step-content .language h4 { color: #ed3917; }

.step-content .natural-lang { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-icon-natural-language.png'); }
.step-content .natural-lang h4 { color: #4daa4f; }

.step-content .notebooks { background-image: url('https://www.wolfram.com/featureset/data-science/img/workflows-icon-notebooks.png'); }
.step-content .notebooks h4 { color: #8ab52d; }

.step-content a { color: #535353; }
.step-content a:hover {  }

#workflows .step-sep {
    background: #09cfd8;
    height: 36px;
    margin: 0 auto;
    width: 7px;
}
#workflows .step-arrow { display: block; margin: 0 auto; }

#workflows .result {
    background: #ff7700;
    border-radius: 0.25rem;
    margin: 0.625rem auto 0;
    max-width: 26.125rem;
    padding: 1rem 2rem; 
}
#workflows .result h3 { 
    color: #fff;
    font-size: 1.4375rem;
    font-weight: 600;
    line-height: 1.75rem;
    padding-left: 0.75rem;
}



/* ==========================================================================
   resources
   ========================================================================== */
#resources-content { padding-bottom: 0.625rem; }
#resources .mini-t { padding: 0.125rem 2.5rem 2.75rem; }
#resources .mini-t .img { padding-top: 0.3125rem; width: 70px; }
#resources .mini-t h3 { font-size: 1.125rem; padding-bottom: 0.3125rem; }
#resources li { 
    font-size: 0.9375rem;
    line-height: 1.25rem;
    padding-bottom: 0.25rem; 
}
#resources .mini-t img { max-width: 100%; }
#resources .mini-t a { color: #1b88c0; }
#resources .mini-t a:hover { color: #d10; }

#resources #in-action .mini-t, #resources #community .mini-t { padding-left: 6.75rem; }
#resources #in-action .img, #resources #community .img { width: 79px; }



/* ==========================================================================
   tech services
   ========================================================================== */
#services-content { 
    border-top: 1px solid #ddd;
    padding-bottom: 4.125rem; 
}

/*cta links*/
#services p.text-align-c { text-transform: uppercase; }
#services p.text-align-c a { color: #f57300; }
#services p.text-align-c a:hover { color: #dd1100; }

/*images*/
#services .service-examples { 
    font-size: 0; 
    padding: 2.75rem 0 1.5rem; 
}
.service-examples a {
    border: 1px solid #d2d2d2;
    height: 12.5rem;
    margin-bottom: 2rem; 
    position: relative;
    width: 12.5rem;
}
.service-examples a img {
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}
.service-examples a p.text {
    background: rgba(51,51,51,0.8);
    bottom: 0;
    color: #fff;
    display: none;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.375;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    text-align: center;
    z-index: 2;
}
.service-examples a:hover p.text {
    cursor: pointer;
    display: block;
    width: 100%;
}
.service-examples p span {
    /*color: #969696;*/
    display: block;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.375;
}


/*magnific global overrides*/
.mfp-bg { background: #2d2e2f; opacity: 0.7; }
.mfp-content { max-width: 43.125rem; padding: 10px 0; }
button.mfp-close {
    line-height: 1.625rem;
    right: -0.75rem;
    top: -0.375rem !important;
}


/*lightbox styles*/
#popup-main {
    background: #fff;
    color: #787878;
    padding: 2.5rem 3.125rem;
    text-align: left;
}
#popup-main span.sub-title {
    color: #f65039;
    display: block;
    font-size: 1.125rem;
    line-height: 1.5;
}
#popup-main p { line-height: 1.5625; }
#popup-main div { margin: 1.5625rem 0 1.2rem 0; text-align: center; }
#popup-main img { height: auto; max-width: 100%; }
#popup-main footer a { color: #636363; font-size: 0.75rem; line-height: 1.25; }
#popup-main footer a:hover { color: #f65039; }



/* ==========================================================================
   get started
   ========================================================================== */
.grid.main-links,
div.secondary-links { 
    margin: 0 auto; 
    max-width: 53.75rem; 
}

#get-started .grid a h3 { color: #000; font-weight: 600; }
#get-started .grid a p { color: #535353; line-height: 1.5rem; }

#get-started .grid a:hover h3,
#get-started .grid a:hover p,
#get-started .grid a p:after { color: #f57300; }

.grid.main-links { padding-bottom: 2.25rem; }
.grid.main-links a > * { padding: 0 1rem; }
.grid.main-links h3 { font-size: 1.25rem; line-height: 1.75rem; }

div.secondary-links {
    border-top: 1px solid #bbb;
    font-size: 0;
    padding-top: 1.625rem;
}
.secondary-links > div { display: inline-block; }
.secondary-links .grid > div { padding: 0 2.8125rem; }
.secondary-links .grid > div:nth-child(2) { border: solid #bbb; border-width: 0 1px; }
.secondary-links .mini-m { text-align: left; width: 11.25rem; }
.secondary-links .grid > div:nth-child(2) .mini-m { width: auto; }
.secondary-links img { margin: 0 0.75rem 0 0; }
.secondary-links h3 { font-size: 1.125rem; line-height: 1.25rem; }



/* ==========================================================================
   footer
   ========================================================================== */
footer#cta {
    background: #064a75;
    bottom: 0;
    color: #fff;
    font-size: 1.25rem;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 10;
}
#cta-content { color: #fff; padding: 0; }
#cta-content > div { height: 5rem; }

#cta-content .btn { 
    background: #fff; 
    color: #064a75; 
    font-size: 1.125rem;
    margin-right: 1rem; 
    text-transform: none;
}
#cta-content .btn:hover { background: #ffc436; }



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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    /*resources*/
    #resources .mini-t { padding: 0.125rem 0 3.25rem; }

    /*tech services: magnific global overrides*/
    .mfp-content, #popup-main { max-width: 37rem; }
}


/* EXCEPTION (1023px)
   ========================================================================== */
@media all and (max-width: 1023px) {
    /*workflows*/
    #workflows-content { padding-left: 0.375rem; padding-right: 0.375rem; }
    #thumbs .thumb { 
        margin: 0 0.375rem;
        max-width: none;
        padding: 1rem 1rem 0.875rem;
        width: auto; 
    }
}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    /*header*/
    #section-header h1 { margin-top: 0.5rem; }

    /*ticker*/
    .quote-container { padding: 0; }

    /*how it works*/
    #how-it-works { padding: 0 calc(2rem - 12px); }
    #how-it-works .notebook { margin-top: -12px; }
    #how-it-works .annotation, #how-it-works .module { padding: 12px; }
    #annotation-toggle.show { display: block !important; }

    /*examples*/
    .example-cards div:nth-child(3n-2) a { margin-right: 0; }
    .example-cards div:nth-child(3n) a { margin-left: 0; }

    /*edge*/
    .flip-card img { height: auto; max-width: 80%; }

    /*workflows*/
    #workflows { padding: 0; }
    #workflows h2 { padding-left: 2rem; padding-right: 2rem; }
    #thumbs .mini-m img { height: auto; width: 39px; }
    #slides { margin: 0; }
    #slides .slide { background-size: 120%; }

    /*resources*/
    #resources-content { padding-left: 0; padding-right: 0; }
    #resources .mini-t .img { width: 53px; }
    #resources .mini-t img { width: 41px; }
    #resources #in-action .mini-t, #resources #community .mini-t { padding-left: 2rem; }
    #resources #in-action .img, #resources #community .img { width: 60px; }
    #resources #in-action .mini-t img, #resources #community .mini-t img { width: 48px; }
    
    /*tech services: images*/
    .service-examples a { height: 12rem; width: 12rem; }
    .service-examples a p.text { font-size: 0.9rem; line-height: 1.3; padding: 0.5rem; }

    /*get started*/
    .grid.main-links, div.secondary-links { max-width: none; }
    .secondary-links .grid > div { padding: 0 1.5rem; }
}


/* EXCEPTION styles for small screens between (661px) and (780px)
   ========================================================================== */
@media all and (min-width: 661px) and (max-width: 780px) {
    /*tech services: images*/
    .service-examples a { height: 10rem; width: 10rem; }
}


/* EXCEPTION styles for small screens between (601px) and (660px)
   ========================================================================== */
@media all and (min-width: 601px) and (max-width: 660px) {
    /*tech services: images*/
    .service-examples a { height: 9rem; width: 9rem; }
}


/*EXCEPTION (660px)
   ========================================================================== */
@media all and (max-width: 660px) {
    /*workflows*/
    #workflows h2 { padding-left: 15px; padding-right: 15px; }
    #thumbs .thumb { 
        margin: 0 5px; 
        padding: 8px; 
        width: calc(25% - 15px);
    }
    #thumbs .mini-m .txt { padding-left: 0; }
    #thumbs .mini-m .img { display: none; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    /*setup*/
    section { padding: 0 15px; }

    /*header*/
    #hero-title-content { padding-top: 6px; }
    #hero-title h1 { font-size: 3rem; margin-bottom: 2rem; }
    #hero-title h1 span { font-size: 2rem; }
    #hero-intro-content { padding-top: 2.25rem; }

    /*ticker/quotes*/
    .quote-container { padding: 0 10px; }
    .quote-container .mini-t > * { display: block; }
    .ticker-icon { padding: 0 0 20px; }

    /*data science areas*/
    #data-science-areas table .top,
    #data-science-areas table .fold { max-width: 100%; }

    #data-science-areas table .top > i,
    #data-science-areas table .top > h3 {
        display: table-cell;
        float: none;
        min-height: 60px;
        vertical-align: middle;
    }
    #data-science-areas table .top > h3 {
        font-size: 1.3rem;
        padding-left: 1.5rem;
    }
    #data-science-areas table .top > p {
        display: block;
        margin-top: .75rem;
    }

    /*how it works*/
    #how-it-works { padding: 0 8px; }

    /*examples*/
    .example-cards div:nth-child(3n-2) a { margin-right: auto; }
    .example-cards div:nth-child(3n) a { margin-left: auto; }
    .example-cards div:nth-child(odd) a { margin-right: 1rem; }
    .example-cards div:nth-child(even) a { margin-left: 1rem; }

    /*edge*/
    #edge .mini-t .txt > * { max-width: none; }
    .flip-card img, .flip-card-inner { height: auto; max-width: 90px; width: 90px; }
    .flip-card-back, .flip-card:hover .flip-card-back { transform: rotateY(0deg) !important; }
    .flip-card-front { transform: rotateY(180deg) !important; }

    /*resources*/
    #resources-content { padding-left: 1rem; padding-right: 1rem; }
    #resources .mini-t { padding-bottom: 2rem; padding-left: 6px; }
    #resources #in-action .mini-t, #resources #community .mini-t { padding-left: 0; }

    /*tech services: images*/
    _:-ms-lang(x), .service-examples { justify-content: space-around; } /*ie11/edge*/
    .service-examples a { height: 15.4rem; width: 15.4rem; }

    /*get started*/
    .grid.main-links a { padding-bottom: 1.5rem; }
    .grid.main-links a:last-child { padding-bottom: 0; }
    .grid.main-links img { height: auto; width: 75px; }
    .secondary-links > div { display: block; padding: 0 1rem; }
    .secondary-links .grid > div { padding: 0; }
    .secondary-links .mini-m { padding: 0 0 1rem; text-align: left; width: auto; }
    .secondary-links .mini-m .img { text-align: right; width: calc(75px + 1.5rem); }
    .secondary-links .mini-m .txt { padding-left: 0.5rem; }
    .secondary-links .grid > div:last-child .mini-m { padding-bottom: 0; }
    .secondary-links .grid > div:nth-child(2) { border: none; }

    /*footer*/
    footer#cta, #cta-content .btn { font-size: 1rem; }
}


/* EXCEPTION styles for small screens (470px)
   ========================================================================== */
@media all and (max-width: 470px) {
    /*workflows*/
    #workflows-content { padding-left: 5px; padding-right: 5px; }
    #thumbs .thumb { 
        margin: 0 3px;
        font-size: 9.5px;
        padding: 6px; 
        width: auto;
    }

    /*tech services: images*/
    .service-examples a { height: 11.5rem; width: 11.5rem; }
}


/* EXCEPTION styles for small screens between (321px) and (400px)
   ========================================================================== */
@media all and (min-width: 321px) and (max-width: 400px) {
    /*tech services: images*/
    .service-examples a { height: 10.5rem; width: 10.5rem; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    /*fw*/
    .cols-1__900 > *:nth-child(1n+2) { clear: both !important; }
    .heirs-width-full__320 > * { width: 100% !important; }
    .mini-t__320 > *, .heirs-mini-t__320 > * > * { vertical-align: top !important; }

    /*examples*/
    .example-cards div:nth-child(odd) a { margin-right: auto; }
    .example-cards div:nth-child(even) a { margin-left: auto; }

    /*edge*/
    .flip-card img, .flip-card-inner { max-width: 51px; width: 51px; }

    /*tech services: images*/
    .service-examples a { height: 9.5rem; width: 9.5rem; }

    /*get started*/
    .grid.main-links img { width: 50px; margin-top: 4px; }
    .grid.main-links a:nth-child(2) img { margin-top: -3px; }
}

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