/* Open materials landing page styles.

   developer:   marionm
   requires:    /common/framework/css/framework.ko.css
   ========================================================================== */

/* ==========================================================================
   page setup & utility styles
   ========================================================================== */

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

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

#header {
    background: #613289;
    font-weight: 300;
    padding: 4.375rem 2rem;
}

#header div {
    margin: 0 auto;
    max-width: 760px;
    text-align: center;
}

#header h1 {
    color: #fff;
    font-size: 3.1875rem;
    line-height: 1.3;
}

#header h2 {
    color: #caa0ff;
    font-size: 2.3375rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

#header p {
    color: #fff;
    font-size: 1.35rem;
}

/* ==========================================================================
   shared section styles
   ========================================================================== */

main section > div {
    margin: 0 auto;
    max-width: 900px;
}

main section a p {
    color: #535353;
    font-size: .95rem;
    line-height: 1.6;
}

.margin-b-2-5 {
    margin-bottom: 2.5rem;
}

.section {
    border-bottom: 1px solid #ddd;
    padding: 3.125rem 2rem 2.75rem;
}

.section h1 {margin-bottom: 1.45rem;}

.section h1, 
#github h1 {
    color: #535353;
    font-size: 1.9125rem;
    font-weight: 300;    
    text-align: center;    
}

.section .grid > div {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.section .grid > div:nth-child(odd) {
    padding-right: 4rem; 
}

.section .grid > div:nth-child(even) {
    padding-left: 4rem; 
}

.section a { display: block; }

.section a img {
    float: left;
    margin-right: 1rem;
}

.section a h2 {
    color: #dd1100;
    font-size: 1.125rem;
}

.section a:hover h2 { color: #f57300; }

.grid-mb-2-5 .grid:not(:last-child) {
    margin-bottom: 0.25rem;  
}

.light-gray-7d {
    color: #7d7d7d;
}

.line-height-1-1-23 { line-height: 1.43rem !important;}
.margin-b-1-4-5 { margin-bottom: 1.80rem !important;}
.margin-b-1-3-4 { margin-bottom: 1.75rem !important; }

/* ==========================================================================
   top section
   ========================================================================== */

#top {
    border-bottom: 1px solid #ddd;
    padding: 3.75rem 2rem 2.75rem;
}

#top a {
    display: block;
    text-align: center;
}

#top a img { margin-bottom: 1rem; }

#top a h2 {
    color: #dd1100;
    font-size: 1.13rem;
    line-height: 1.9rem;
}

#top a:hover h2 {
    color: #f57300;
}


/* ==========================================================================
   products section
   ========================================================================== */

#products {
    border-bottom: 1px solid #ddd;
    padding: 2.75rem 2rem 2.5rem;
}

#products .grid > div { padding: 1rem 1.5rem; }

#products a {
    display: block;
    text-align: center;
}

#products a img { margin-bottom: 1rem; }

#products a h2 {
    color: #dd1100;
    font-size: 1.3rem;
}

#products a:hover h2 { color: #f57300; }


/* ==========================================================================
   github section
   ========================================================================== */

#github {
    border-bottom: 1px solid #ddd;
    padding: 3.125rem 2rem 1.75rem;
}

#github .grid > div { padding: 1rem 1.5rem; }
#github #github-items .grid > div { margin-bottom: .75rem; }

#github a {
    display: block;
    text-align: center;
}

#github a img { margin-bottom: 1rem; }


#github a h2 {
    color: #dd1100;
    font-size: 1.3rem;
}

#github a:hover h2 { color: #f57300; }


#github #github-items {
    border-top: 1px solid #ddd;
    border-bottom: 0;
    margin-top: 1.375rem;
} 

#github #github-items a {text-align: left}


/* ==========================================================================
   education section
   ========================================================================== */

#education { padding-bottom: 3.5rem; }

#education .wolfram-u p { margin-left: 2.125rem; }
#education h1 {margin-bottom:1.1rem;}

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

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

@media all and (max-width: 1200px) {}

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

@media all and (max-width: 900px) {
    #header h1 { font-size: 2.925rem; }
    #header h2 { font-size: 2.025rem; }
    #header p { font-size: 1.25rem; }

    .section .grid > div:nth-child(odd) { padding-right: 2rem; }
    .section .grid > div:nth-child(even) { padding-left: 2rem; }

    .grid-mb-2-5 .grid:not(:last-child) { margin-bottom: 1.5rem;  }
}

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

@media all and (max-width: 600px) {
    #header h1 { font-size: 2.475rem; }
    #header h2 { font-size: 1.575rem; }
    #header p { font-size: 1rem; }

    .section .grid > div:nth-child(odd) { padding-right: 0; }
    .section .grid > div:nth-child(even) { padding-left: 0; }

    .grid-mb-2-5 .grid:not(:last-child) { margin-bottom: 0;  }

    #top { padding: 2.125rem 2rem; }
    #top a img { margin-bottom: 0.375rem; }

    #free-access.section a img,
    #community.section a img {
        height: auto;
        width: 60px;
    }

    #education.section .wolfram-u img {
        display: block;
        float: none;
        height: auto;
        margin: 0 auto .75rem;
        width: 250px;
    }
    #education .wolfram-u p { margin-left: 5rem; }
}

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

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

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

@media print {}