/* Global site styles.

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

/* ==========================================================================
   Framework overwrite
   ========================================================================== */

.mini-m>* {
    vertical-align: top;
}
.mini-m {
    max-width: 90%;
}

/* ==========================================================================
   site setup
   ========================================================================== */

html {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

body {
    color: #535353;
    position: relative;
}

/* ==========================================================================
       sections
   ========================================================================== */

section {
    padding: 3.5rem 2rem 3.55rem;
    width: 100%;
}

section .mini-m>*:first-child {
    min-width: 7.0875rem;
    padding-right: .9rem;
}

section .mini-m img {
    height: auto;
    margin-top: 0;
    max-width: 100%;
    padding-top: 0;
}

div[id$="-content"] {
    font-size: 1.0rem;
    font-weight: 400;
    margin: 0 auto;
    max-width: 62.625rem;
    width: 100%;
}

h2 {
    color: #15a4ab;
    font-size: 2.5rem;
    font-weight: 300;
    margin: 0;
}

h3 {
    font-size: 1.1235rem;
}

h3,
p a {
    color: #f57300;
}

#stem p {
    color: #535353;
    display: inline-block;
    line-height: 1.5rem;
}

p.desc,
p.info {
    line-height: 1.8rem;
    max-width: unset;
}
p.desc{
    padding-top: 0.3125rem;
}
main a:hover,
main h3:hover {
    color: #d35000;
}

main h3 {
    margin-top: -0.2rem;
    padding-bottom: 0.3125rem;
}

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

#wolfram-in-stem-header {
    background: url(https://www.wolfram.com/education/stem/img/header-image.png) no-repeat center;
    background-color: #15a4ab;
    background-size: 1999px 547px;
    height: 31.25rem;
}

#wolfram-in-stem-header-content {
    color: #fff;
    padding: 2rem;
    text-align: center;
}

#wolfram-in-stem-header-content>div {
    margin: 10% auto;
}

#wolfram-in-stem-header h1 {
    color: #fff;
    font-size: 4.625rem;
    font-weight: 600;
    margin: 8rem 0 0.3rem 0;
    text-align: center;
}

#wolfram-in-stem-header p {
    color: #fff;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 85%;
}

/* ==========================================================================
      Button
   ========================================================================== */

.button a {
    background: #f57300;
    border-radius: .25rem;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: .71rem 1.5625rem;
}

.button a:hover {
    background: #d35000;
    color: #fff;
}

/* ==========================================================================
       Highlight
   ========================================================================== */

#wolfram-in-stem-highlight-content p {
    color: #353535;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.875rem;
    margin-top: -0.5rem;
}
#wolfram-in-stem-highlight-content p.desc {  
    color: #f57300;  
    margin-top:auto;
}

#wolfram-in-stem-highlight-content p.intro {
    color: #f57300;
    font-size: 1.875rem;
    line-height: 2.875rem;
    margin-bottom: 0.625rem;
}

#wolfram-in-stem-highlight-content .mini-m>*:first-child {
    min-width: 4.715rem;
}

/* ==========================================================================
       Image Stripe
   ========================================================================== */

#image-stripe {
    align-items: center;
    background: url(https://www.wolfram.com/education/stem/img/image-stripe.png) no-repeat center;
    background-color: #15a4ab;
    background-size: 1704px 160px;
    border: none;
    color: #fff;
    display: flex;
    height: 10rem;
    position: relative;
    text-align: center;
}

/* ==========================================================================
       Remote learning
   ========================================================================== */

#remote-learning {
    padding: 2.5rem 2rem 2rem;
}

.special-situations h2 {
    text-transform: initial;
    color: #f57300;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}

.special-situations .inner {
    padding-bottom: 10px;
}

.special-situations .inner a {
    color: #008ebd;
}

.special-situations .inner a:hover {
    color: #016f93;
}

.special-situations .inner .half {
    display: inline-block;
    vertical-align: top;
}

.special-situations .inner .half:last-child {
    padding: 0 0 40px 0;
}

.special-situations  .outer {
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: .9375rem;
    color: #636363;
    line-height: 1.625rem;
}

.special-situations h2 {
    margin-bottom: 22px;
}

#stem .special-situations p.intro {
    font-size: 1.5rem;
    line-height: 2.375rem;
    font-weight: 300;
    color: #535353;
    margin: 0 0 20px 0;
    padding: 0;
}
.special-situations img {
    width: 100%;
    max-width: 462px;
    float: right;
    margin: 0;
}
.special-situations .half {
    width: 49%;
    margin: 0%;
}
.special-situations .half:first-of-type {
    margin: 0 1% 30px 0;
}
.special-situations li {
    display: block;
    margin-bottom: 6px;
    line-height: 1.75rem;
}

.special-situations li:before,
.special-situations li ~ li:before {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    position: relative;
    background: none;
    border: solid #016f93;
    border-width: 0 2px 2px 0;
    top: -2px;
    left: -26px;
    padding: 3px;
    vertical-align: middle;
    margin: 0 -14px 0 6px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.special-situations .square-list ul {
    margin-left: 0;
}
.special-situations .square-list li:before,
.special-situations .square-list li ~ li:before {
    border: none;
    width: 4px;
    height: 4px;
    background: #0093c4;
    transform: none;
    -webkit-transform: none;
    
}
.special-situations ul {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 15px;
    
}


/* ==========================================================================
       special-offer
   ========================================================================== */

#special-offer {
    background-color: #f57300;
    padding: 2.1rem 2rem 2.4rem;
}

#special-offer:hover {
    background-color: #f88d1c;
}

#special-offer-content a,
#special-offer-content p {
    color: #fff;
    font-weight: 400;
}

#special-offer-content p.info {
    color: #ffecdc;
    font-size: 1.125rem;
    line-height: 1.625rem;
    margin-top: 0.125rem;
}

/* ==========================================================================
      fields-and-subjects
   ========================================================================== */

#fields-and-subjects,
#remote-learning {
    border-top: 1px solid #ddd;
}

#fields-and-subjects-content h3 {
    color: #15a4ab;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.8;
    padding-bottom: 0;
}

#fields-and-subjects-content h3:first-child {
    padding-top: 1.375rem;
}

#fields-and-subjects-content div > div:first-child{
    padding-right: 5%;
}
/* ==========================================================================
      products-for-teaching-and-learning
   ========================================================================== */

#products-for-teaching-and-learning-content {
    margin-bottom: 1rem;
}
#products-for-teaching-and-learning-content h3 {
    color: #15a4ab;
}

#products-for-teaching-and-learning-content p.desc {
    color: #535353;
    font-size: 1.25rem;
    font-weight: 300;
}

#products-for-teaching-and-learning-content .mini-m>*:first-child {
    min-width: 5.5rem;
    padding-right: 0;
}

.table {
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
    max-width: 28rem;
}

.cell {
    display: table-cell;
    vertical-align: top;
    
}

.cell:first-child {
    max-width: 4.0625rem;
    min-width: 4.0625rem;
}

.rowspan {
    border: 0;
}

.rowspan>div {
    height: 1px;
}

.rowspan>div>div {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
      teaching-computational-thinking
   ========================================================================== */

#teaching-computational-thinking-content h2 {
    margin-bottom: 2rem;
}

#teaching-computational-thinking-content img {
    border: 1px solid #b1b1b1;
}

/* ==========================================================================
      classroom-resources
   ========================================================================== */

#classroom-resources {
    border-top: 1px solid #ddd;
}

#classroom-resources-content {
    margin-bottom: 2.6875rem;
}

#classroom-resources-content img {
    border: 1px solid #b1b1b1;
}

#classroom-resources-content p.desc {
    font-size: 1.25rem;
    font-weight: 300;
}

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

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

@media all and (max-width: 1200px) {
    #wolfram-in-stem-header p {
        font-size: 1.75rem;        
        max-width: 70%;
    }
    #wolfram-in-stem-header h1 {
        font-size: 3.8rem;
        margin: auto;
    }
    #wolfram-in-stem-header {
        background-size: cover;
        height: 100%;
        width: auto;
    }
    #wolfram-in-stem-header-content {
        padding: 5% 0;
    }
}

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

@media all and (max-width: 900px) {
    #wolfram-in-stem-header h1 {
        font-size: 2.9rem;
    }
    #wolfram-in-stem-header p {
        font-size: 1.5rem;
    }
    #wolfram-in-stem-header p.desc {
        line-height: 1.5;
    }

    #products-for-teaching-and-learning-content .mini-m img{
        max-width: 80%;
    }

    .special-situations ul {
        margin-left: 20px;
    }

    .special-situations img  {
        top: 0;
        width: 100%;
    }
}

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

@media all and (max-width: 600px) {
    ._header-absolute{
        border-top: none!important;
    }
    section {
        padding-top: 2.875rem;
    }
    main h3 {
        margin-top: 0;
    }
    main h2 {
        font-size: 2.1rem;
    }
    #wolfram-in-stem-header h1 {
        font-size: 1.6rem;
    }
    #wolfram-in-stem-header p {
        font-size: 1.0rem;
        max-width: 25rem;
    }
    #wolfram-in-stem-highlight-content p.intro {
        font-size: 1.575rem;
        line-height: 2.4rem;
    }
    section .mini-m>*:first-child {     
        max-width: 5.6625rem;
        min-width: 5.6625rem;
        padding-right: 0.9rem;
    }
    #wolfram-in-stem-highlight-content .mini-m>*:first-child {
        min-width: 4.5rem;
        padding-right: 0;
    }    
    #wolfram-in-stem-highlight-content .mini-m img {
        max-width: 85%;
    } 
    .cell:first-child,
    #products-for-teaching-and-learning-content .mini-m>*:first-child {
        max-width: 4.0625rem;
        min-width: 4.0625rem;
        padding-right: 0rem;
    }
    .mini-m {
        max-width: none;
    }
    #fields-and-subjects-content div > div:first-child {
        padding-right:unset;
    }

    .special-situations img {
        margin-top: 20px;
    }
    .special-situations .half:first-of-type {
        margin-bottom: 0;
    }

}