﻿/* RESPONSIVE CSS ------------------------------ */
/* Large desktop ------------------------------- */
@media (max-width: 1085px)
{
    .navbar .nav.nav-pills
    {
        display: none;
    }

    .navbar .btn.btn-default
    {
        display: block;
    }
}

@media (max-width: 1024px)
{
    .modal.large
    {
        width: auto;
        margin: 0;
        top: 20px;
        right: 20px;
        left: 20px;
    }
}

/* Landscape tablet to desktop ----------------- */
@media (min-width: 979px)
{
    /*.socialnav {
        width: 100%;
    }

    .socialnav-fixed {
        position:static;
    }*/

    div.input-prepend input#subscribe
    {
        width: 75%;
    }
}

/* Portrait tablet to landscape and desktop ---- */
@media (min-width: 768px) and (max-width: 979px)
{
    .hidden-xs
    {
        display: none!important;
    }

    #toutCarousel a
    {
        width: 270px;
        margin: 12px auto;
        max-width: 100%;
    }

    .carousel-caption
    {
        top: 10%;
        right: 25%;
    }

        .carousel-caption h1
        {
            font-size: 30px;
            line-height: 1em;
        }

    .featurette
    {
        height: auto;
        padding: 0;
    }

    .featurette-image.pull-left, .featurette-image.pull-right
    {
        display: block;
        max-width: 40%;
        margin: 0 auto 20px;
    }

    .page-header h1
    {
        font-size: 28.5px;
    }

    h3
    {
        font-size: 1.85em;
    }

    .socialnav
    {
        width: 100%;
    }

    .socialnav-fixed
    {
        width: 100%;
    }

    div.input-prepend input#subscribe
    {
        width: 70%;
    }

    #logoCarousel
    {
        margin-bottom: 20px;
    }

    #twitter-widget-0
    {
        width: 100%!important;
        max-width: 100%!important;
    }

    .row .vertical-seperator > div
    {
        display: inline-block;
        width: 100%;
        background: none repeat scroll 0% 0% #EEE;
        height: 1px;
        min-height: 1px;
        margin: 25px 0 5px;
    }
}

/* Landscape phone to portrait tablet ---------- */
@media (max-width: 767px)
{
    body
    {
        padding-right: 0;
        padding-left: 0;
    }

    #toutCarousel a
    {
        width: 260px;
        margin: 12px auto;
    }

    #toutCarousel img
    {
        max-width: 100%;
        overflow: hidden;
    }


    .carousel-caption
    {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
    }

        .carousel-caption h1
        {
            font-size: 30px;
        }

        .carousel-caption .lead, .carousel-caption .btn
        {
            font-size: 18px;
        }

    .marketing .span3 + .span4
    {
        margin-top: 40px;
    }

    .featurette-heading
    {
        font-size: 30px;
    }

    .featurette .lead
    {
        font-size: 18px;
        line-height: 1.5;
    }

    .subnav, .subnav-fixed, .socialnav-fixed
    {
        width: auto;
        position: relative;
        top: 0;
    }

    footer #logoCarousel .carousel-inner
    {
        width: 170px;
        margin-bottom: 15px;
    }

    div.input-prepend input#subscribe
    {
        width: 80%;
    }


    .row .vertical-seperator > div
    {
        display: inline-block;
        width: 100%;
        background: none repeat scroll 0% 0% #EEE;
        height: 1px;
        min-height: 1px;
        margin: 25px 0 5px;
    }

    #twitter-widget-0
    {
        width: 100%!important;
        max-width: 100%!important;
    }

    .socialnav
    {
        width: 100%;
    }

    #logoCarousel
    {
        margin-bottom: 20px;
    }

    .page-header
    {
        margin-top: 10px;
    }

    .program-partners .partner-wrap
    {
        float: none;
        position: relative;
        width: 100%;
        height: 160px;
        padding: 20px;
        background: #F0F8FF;
        margin: 0 20px 20px 0;
        border: 2px solid rgb(221, 221, 221);
        border-radius: 20px 0 20px 0;
        overflow: hidden;
    }
}

/* Landscape phones and down ------------------- */

@media (max-width: 480px)
{
    .navbar-form.navbar-right.navbar-search {
  margin-top: 0 !important;
  max-width: 100% !important;
  width: 70% !important;
  height: 40px;
  float: left;
}

    .navbar .btn.btn-default {
        margin-top: 0!important;
    }

    #twitter-widget-0
    {
        width: 100%!important;
        max-width: 100%!important;
    }

    .socialnav
    {
        width: 100%;
    }

    #main
    {
        padding: 20px 20px 0 20px;
    }

    .container.marketing
    {
        margin-top: 94px;
    }

    .page-header h1
    {
        font-size: 28.5px;
    }

    .page-header .pull-right i
    {
        padding-left: 8px;
    }

    .lead
    {
        line-height: 27px;
        margin-bottom: 5px;
        font-size: 18px;
    }

    .imax .thumbnails
    {
        margin-top: 20px;
    }

    .thumbnail
    {
        margin: 0 0 20px 0;
    }

    .media:first-child
    {
        margin-top: 15px;
    }

    h1
    {
        font-size: 32px;
        margin-top: 0;
    }

    h1, h2, h3
    {
        line-height: 34px;
    }

    footer .container
    {
        width: 90%;
    }


    .pull-right
    {
        float: none;
    }

    #gallery-modal img
    {
        margin-left: 0;
    }

    .featurette-image.pull-right
    {
        margin-left: 0;
    }

    .featurette-divider
    {
        margin: 20px 0px;
    }

    .well
    {
        margin: 20px 0 10px 0;
    }

    div.headnav
    {
        float: none;
        position: absolute;
        top: 110px;
    }

    .headnav ul.inline a
    {
        color: rgb(66, 168, 198);
    }

        .headnav ul.inline a:active, .headnav ul.inline a:focus
        {
            color: rgb(66, 168, 198);
            text-decoration: underline;
        }

        .headnav ul.inline a:hover
        {
            color: rgb(2, 26, 64);
        }

    .subnav-fixed
    {
        position: relative;
        width: auto;
        top: 0;
    }

    footer #logoCarousel .carousel-inner
    {
        width: 170px;
        margin-bottom: 15px;
    }

    .page-header img.media-object
    {
        float: none;
        margin: 10px 0;
    }

    div.navbar-wrapper
    {
        position: relative;
    }

    #toutCarousel a
    {
        width: 260px;
        max-width: 100%;
        margin: 12px auto;
    }

    .event-layout .media img.alignleft
    {
        float: none;
        display: block;
        margin: 20px auto;
    }
}

@media (max-width: 320px) and (min-width: 200px)
{
    .navbar a.navbar-brand
    {
        margin: 25px 0px 3px 15px;
        max-width: 65%;
        background-size: contain;
    }
}
