/* Styles for homepage

   developer:   suef
   requires:    /assets/css/global.css
   ========================================================================== */

/* ==========================================================================
   Main
   ========================================================================== */
#home .inner {
    margin: 0 auto;
    max-width: 1043px;
    padding: 4.0625rem 1.25rem;
}

/* ==========================================================================
   Heading
   ========================================================================== */
header {
    text-align: center;
    position: relative;
}
header h1 {
    font-family: 'Enriqueta', Arial, Helvetica, sans-serif;
    font-size: 4.375rem;
    color: #383838;
    margin: 3.125rem 0 0 0;
    font-weight: 600;
}
header h2 {
    font-size: 2.125rem;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-weight: 400;
    margin: 0 0 3.125rem;
}
.blue {
    color: #33aadd;
}
.red {
    color: #df5953;
}
.video-wrapper {
    overflow: hidden;
}
header video {
    position: relative;
    z-index: 10;
    max-width: 100%;
    object-fit: cover;
}
header .replay {
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/replay@2x.png') no-repeat;
    background-size: 1rem;
    color: #33aadd;
    border: 0;
    text-align: center;
    margin: 0 auto;
    padding: 0 0 0 1.25rem;
    line-height: 1rem;
    display: block;
    cursor: pointer;
    position: absolute;
    width: 4.375rem;
    left: 0;
    right: 0;
    margin: auto;
}


/* ==========================================================================
   Quotes and Why CBM
   ========================================================================== */
#slider {
    max-width: 62.6875rem;
    position: relative;
    margin: 0 0 1.25rem;
    height: 5.75rem;
}
#control {
    text-align: center;
    margin: 0 0 1.25rem;
    position: relative;
    z-index: 3;
}
#control span {
    background:#fff;
    width: .5625rem;
    height: .5625rem;
    display: inline-block;
    margin: 0 .3125rem;
    border-radius: .3125rem;
    border: 1px solid #1781a5;
    cursor: pointer;
}
#control span.active {
    background: #1781a5;
}
.slide {
    font-size: 1.125rem;
    color: #515151;
    background: #fff;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
}
.slide .heading {
    color: #1781a5;
    font-weight: 300;
    margin: -.375rem 0 0 0;
    display: block;
    font-size: 1.3125rem;
}
.slide.active {
    position: relative;
    opacity: 1;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 1;
}
.slide:hover .heading, .slide:hover p {
    color: #33aadd;
}
.slide p {
    margin: 0;
    line-height: 1.3;
}
.slide .icon-container {
    display: inline-block;
    vertical-align: top;
    width: 4.3125rem;
    color: #1781a5;
    font-weight: 600;
    border-right: 1px solid #1781a5;
    margin: 0 .9375rem 0 0;
}
.slide:hover .icon-container {
    color: #33aadd;
    border-right: 1px solid #33aadd;
}
.slide .icon {
    display: block;
}
.slide .blurb {
    max-width: 56.875rem;
    display: inline-block;
    vertical-align: top;
    width: 90%;
}
.slide.news .icon-container {
    padding: 0 0 0 .1875rem;
}
.slide.news .icon {
    margin: 0 0 0 -.1875rem;
}
.slide.community .icon-container {
    width: 6.6875rem;
}
.slide.community .blurb {
    max-width: 54.6875rem;
    width: 80%;
}
.slide.blog .icon-container {
    padding: 0 0 0 .3125rem;
}
.slide.blog .icon {
    margin: 0 0 0 -.3125rem;
}
.news .icon {
    height: 34px;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/news@2x.png') no-repeat;
    background-size: 49px 68px;
}
.media .icon {
    height: 44px;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/media@2x.png') no-repeat;
    background-size: 53px 88px;
}
.events .icon {
    height: 49px;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/events@2x.png') no-repeat 5px top;
    background-size: 45px 98px;
}
.community .icon {
    height: 42px;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/community@2x.png') no-repeat 12px top;
    background-size: 4.125rem 84px;
}
.blog .icon {
    height: 44px;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/blog@2x.png') no-repeat;
    background-size: 47px 88px;
}
.news:hover .icon {
    height: 34px;
    background-position: 0 -34px;
}
.media:hover .icon {
    height: 44px;
    background-position: 0 -44px;
}
.events:hover .icon {
    height: 49px;
    background-position: 5px -49px;
}
.community:hover .icon {
    height: 42px;
    background-position: 12px -42px;
}
.blog:hover .icon {
    height: 44px;
    background-position: 0 -44px;
}
blockquote {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #1781a5;
    font-weight: 300;
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/open-quote@2x.png') no-repeat;
    background-size: 2.375rem 2.1875rem;
    padding: 0 3.125rem;
    margin: 0;
    max-width: 60rem;
    position: relative;
}
blockquote:after {
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/close-quote@2x.png') no-repeat;
    background-size: 2.4375rem 2.1875rem;
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.875rem;
    position: absolute;
    top: 0;
    right: 0;
}
.speaker {
    font-size: .9375rem;
    text-align: center;
    margin: .625rem 0 0 0;
}
.quotes-why-cbm h2 {
    font-size: 1.3125rem;
    color: #1781a5;
    font-weight: 400;
    text-align: center;
}
.table {
    display: table;
    border-collapse: separate;
    border-spacing: 1.875rem;
    max-width: 1063px;
    margin: 0 0 -1.875rem -1.875rem;
}
.third {
    width: 19.625rem;
    background: #f8f8f8;
    color: #757575;
    border-top: .625rem solid #1781a5;
    padding: 1.125rem;
    display: table-cell;
}
.table .third h2 {
    display: block;
}

blockquote + .third {
    margin: 0;
}

/* ==========================================================================
   You get involved
   ========================================================================== */
.you-get-involved {
    background: #0d6684;
}
.you-get-involved .inner {
    padding: 2.25rem 1.25rem 1rem;
}
.you-get-involved h2 {
    font-size: 1.3125rem;
    color: #7eddff;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}
.you-get-involved a {
    color: #fff;
    font-size: 1.3125rem;
    display: inline-block;
    width: 48%;
    padding: 0 0 0 2.5rem;
    line-height: 33px;
    background-repeat: no-repeat;
    background-position: left center;
    margin: .9375rem 0 0 0;
}
.half {
    padding: 0 0 1.25rem 0;
    margin: 0;
}
.half.orange {
    border-right: 1px solid #fff;
}
.half.green {
    margin: 0 0 0 4.375rem;
}
a.policy-makers {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/policy-makers@2x.png');
    background-size: 1.625rem 1.875rem;
}
a.educators {
    padding: 0 0 0 3.125rem;
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/educators@2x.png');
    background-size: 1.9375rem 1.875rem;
}
a.students {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/students@2x.png');
    background-size: 1.75rem 1.5rem;
}
a.parents {
    padding: 0 0 0 3.125rem;
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/parents@2x.png');
    background-size: 2.625rem 1.375rem;
}
a.sponsor {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/sponsor@2x.png');
    background-size: 1.6875rem 1.9375rem;
}
a.join-community {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/join-community@2x.png');
    background-size: 32px 1.875rem;
}
a.expertise {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/expertise@2x.png');
    background-size: 1.625rem 2.125rem;
}
a.contact {
    background-image: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/contact@2x.png');
    background-size: 1.8125rem 1.375rem;
}
.orange a:hover {
    color: #f4b000;
}
.green a:hover {
    color: #7ecb00;
}

/* ==========================================================================
   Videos
   ========================================================================== */
.videos h2 {
    color: #1781a5;
    font-weight: 400;
    margin: -.4375rem 0 .3125rem 0;
}
.videos a:hover h2 {
    color: #33aadd;
}
.videos a {
    color: #757575;
    font-size: .875rem;
    display: block;
    margin: 0 0 6.25rem 0;
}
.videos a:last-child {
    margin: 0;
}
.videos .video {
    width: 19.625rem;
    height: 7.5rem;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #b7b7b7;
}
.videos .blurb {
    max-width: 39.6875rem;
    width: 60%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 3.125rem;
}
.conrad {
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/conrad-video@2x.png');
    background-size: 19.625rem 7.5rem;
}
.making-the-case {
    background: url('/National_Library/20160521004321oe_/http://www.computerbasedmath.org/assets/img/overview/making-the-case-video@2x.png');
    background-size: 19.625rem 7.5rem;
}
.videos p {
    margin: 0;
}
#home .footer .inner {
    padding: 0 1.25rem;
}

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

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    .videos .blurb {
        width: 50%;
    }
    .you-get-involved .half {
        border: 0;
        margin: 0 auto;
        width: 29rem;
        text-align: left;
        display: block;
    }
    .you-get-involved a {
        width: 13rem;
        margin: 0 2rem 0 0;
    }
    .you-get-involved a:nth-child(2n - 1) {
        margin: 0;
    }
    .you-get-involved .half.green {
        margin: .5rem auto 0 auto;
    }
    #slider {
        height: auto;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    .videos .blurb {
        width: 40%;
    }
    .slide .blurb {
        width: 75%;
    }
    .slide.community .blurb {
        width: 70%;
    }
    .table {
        display: block;
        margin: 0;
    }
    .table h2 {
        text-align: left;
    }
    .table .third {
        display: block;
        width: 100%;
        max-width: 60rem;
        margin: 0 0 2.5rem;
        padding: 1.125rem 0;
        background: transparent;
        border: 0;
    }
}
/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    header h1 {
        font-size: 3rem;
    }
    header h2 {
        font-size: 1.5rem;
    }
    .videos .blurb {
        width: 100%;
        margin: 1.875rem 0 0 0;
        display: block;
    }
    .you-get-involved .half {
        width: 10.625rem;
        margin: 0 auto;
    }
    .you-get-involved .half.green {
        margin: 1.25rem auto 0;
    }
    .you-get-involved h2 {
        font-size: 1.125rem;
    }
    .you-get-involved a {
        width: 100%;
        font-size: 1rem;
        line-height: 2.5rem;
        padding: 0 0 0 3.125rem;
        margin: 0;
    }
    .videos .video {
        width: 18.75rem;
    }
    .slide .blurb {
        width: 70%;
    }
    .slide.community .blurb {
        width: 63%;
    }
}