/* Styles for education summit overview page

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

/* ==========================================================================
   Main
   ========================================================================== */
.intro {
    margin: 0 0 1.25rem 0;
}
section .inner h2 {
    margin: 2.5rem 0 0 0;
}

.blurbs {
    margin: 3.125rem 0 1.875rem;
}
.blurbs p {
    width: 63%;
    display: inline-block;
    vertical-align: top;
    margin: -5px 0 1.25rem 1.875rem;
}
.video a {
    display: inline-block;
    margin: 1.25rem 24px 1.25rem 0;
}
.video a:nth-child(3) {
    margin: 0;
}
.blurbs img, .video img {
    border: 1px solid #ddd;
}
/* ==========================================================================
   Sliders (images and quotes)
   ========================================================================== */
.slider {
    position: relative;
    display: inline-block;
    height: 10.0625rem;
}
.slider-inner {
    margin: 0;
    padding: 0;
}
.slider ul {
    list-style: none;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
}
.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;
}
#quotes {
    background: #33aadd;
    color: #fff;
    text-align: right;
}
#quotes p {
    font-size: 1.3125rem;
    text-align: left;
    font-weight: 300;
}
#quotes p.person {
    font-size: 1rem;
    display: inline-block;
    text-align: left;
    padding: 0;
}
/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    .blurbs p {
        width: 100%;
        margin: 1.25rem 0 2.5rem;
        display: block;
    }
}