/*!
* Bootstrap Responsive v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/

.hidden {
    display: none;
    visibility: hidden;
}

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

.visible-desktop {
    display: inherit !important;
}

#lets-list .show-modal{
    display: none;
}

@media (min-width: 1200px) {
    #lets-list .show-modal{
        display: block;
        height: 1px;
        width: 1px;
    }

    #lets-list .collapsible{
        position: relative;
        border: 0;
        overflow: hidden;
    }

    #lets-list .collapsible.count-1{
        height: 177px;
    }

    #lets-list .collapsible.count-2{
        height: 203px;
    }

    #lets-list .collapsible.count-3{
        height: 371px;
    }

    #lets-list .collapsible.count-4,
    #lets-list .collapsible.count-5{
        height: 403px;
    }

    #lets-list .collapsible.count-6{
        height: 507px;
    }

    #lets-list .collapsible.count-8{
        margin-left: -89px;
    }

    #lets-list .collapsible.count-7,
    #lets-list .collapsible.count-8,
    #lets-list .collapsible.count-9,
    #lets-list .collapsible.count-10{
        height: 600px;
    }

    #lets-list .collapsible.count-11,
    #lets-list .collapsible.count-12{
        height: 732px;
    }

    #lets-list .collapsible h4{
        width: 199px;
        height: 177px;
        position: absolute;
        display: none;
        background-size: 100% auto;
        background-color: transparent;
        background-position: 0 0;
        color: white;
        text-transform: uppercase;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0 !important;
    }

    #lets-list .collapsible h4 span{
        display: none;
    }

    #lets-list .collapsible h4 .table-wrap,
    #lets-list .collapsible h4 .cell-wrap{
        display: table;
        width: 100%;
        height: 157px;
        vertical-align: middle;
    }

    #lets-list .collapsible h4 .cell-wrap{
        display: table-cell;
    }

    #lets-list .collapsible h4 .title{
        width: 78%;
        position: relative;
        margin: 0 auto;
        font-size: 17px;
        line-height: normal;
        text-align: center;
    }

    #lets-list .collapsible h4.header-1,
    #lets-list .collapsible h4.header-3,
    #lets-list .collapsible h4.header-6,
    #lets-list .collapsible h4.header-9,
    #lets-list .collapsible h4.header-10,
    #lets-list .collapsible h4.header-12 {
        background-image: url(../../images/bubble-left.png);
        display: block;
    }

    #lets-list .collapsible h4.header-1 {
        top: 0px;
        left: 220px;
        text-align: left;
    }

    #lets-list .collapsible h4.header-3 {
        top: 194px;
        left: 178px;
    }

    #lets-list .collapsible h4.header-6 {
        top: 393px;
        left: 202px;
    }

    #lets-list .collapsible h4.header-9{
        top: 80px;
        left: 0;
        text-align: left;
    }

    #lets-list .collapsible h4.header-10 {
        top: 320px;
        left: 0px;
    }

    #lets-list .collapsible h4.header-12 {
        top: 546px;
        left: 98px;
    }

    #lets-list .collapsible h4.header-2,
    #lets-list .collapsible h4.header-4,
    #lets-list .collapsible h4.header-5,
    #lets-list .collapsible h4.header-7,
    #lets-list .collapsible h4.header-8,
    #lets-list .collapsible h4.header-11 {
        background-image: url(../../images/bubble-right.png);
        display: block;
    }

    #lets-list .collapsible h4.header-2 {
        text-align: left;
        top: 26px;
        right: 192px;
    }

    #lets-list .collapsible h4.header-4 {
        top: 225px;
        right: 232px;
    }

    #lets-list .collapsible h4.header-5 {
        top: 156px;
        right: 16px;
    }

    #lets-list .collapsible h4.header-7 {
        top: 423px;
        right: 212px;
    }

    #lets-list .collapsible h4.header-8 {
        top: 355px;
        right: 0px;
    }

    #lets-list .collapsible h4.header-11 {
        top: 554px;
        right: 47px;
    }

    #lets-list .collapsible .list-item{
        display: none !important;
    }

    #bubbleModal.modal.fade.in{
        width: 100%;
        height: 100%;
        background: white;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 0;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #bubbleModal.modal.fade.in .modal-body{
        width: 1142px;
        margin: 20px auto;
        background: url(../../images/bubble-big.png) no-repeat 0 0 / 100% auto;
        height: 1063px;
        max-height: 1063px;
        overflow: hidden;
    }

    body.modal-open{
        overflow: hidden;
    }

    #bubbleModal.modal.fade.in .modal-body .inner{
        margin: 174px auto 296px auto;
        width: 790px;
        color: white;
        font-family: 'Open Sans', sans-serif;
        position: relative;
    }

    #bubbleModal.modal.fade.in .modal-body h2{
        font-size: 25px;
        margin: 0 0 15px;
        text-transform: uppercase;
        padding: 0;
        text-align: center;
    }

    #bubbleModal.modal.fade.in .modal-body button.close{
        font-weight: 900;
        font-family: 'Open Sans', sans-serif;
        font-size: 36px;
        outline: none !important;
        border: none !important;
        opacity: 1;
        text-shadow: none;
        box-shadow: none;
        color: white;
    }

    #bubbleModal.modal.fade.in .modal-body .content{
        height: 560px;
        overflow: auto;
    }

    #bubbleModal.modal.fade.in .modal-body .content,
    #bubbleModal.modal.fade.in .modal-body .content p,
    #bubbleModal.modal.fade.in .modal-body .content a,
    #bubbleModal.modal.fade.in .modal-body .content ul,
    #bubbleModal.modal.fade.in .modal-body .content ul li{
        font-size: 20px;
        color: white;
        line-height: 25px;
        text-align: center;
    }

    #bubbleModal.modal.fade.in .modal-body .content ul{
        list-style-type: disc;
        margin-left: 30px;
        text-align: left;
    }

    #bubbleModal.modal.fade.in .modal-body .content ol{
        margin-left: 30px;
        list-style-type: decimal;
        text-align: left;
    }
    
    #bubbleModal.modal.fade.in .modal-body .content ul li,
    #bubbleModal.modal.fade.in .modal-body .content ol li{
        margin-bottom: 5px;
        text-align: left;
    }

    #bubbleModal.modal.fade.in .modal-body .content p,
    #bubbleModal.modal.fade.in .modal-body .content ul{
        margin-bottom: 15px;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .hidden-desktop {
        display: inherit !important;
    }
    .visible-desktop {
        display: none !important ;
    }
    .visible-tablet {
        display: inherit !important;
    }
    .hidden-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-desktop {
        display: inherit !important;
    }
    .visible-desktop {
        display: none !important;
    }
    .visible-phone {
        display: inherit !important;
    }
    .hidden-phone {
        display: none !important;
    }

    .has-form .gform_wrapper .ginput_complex.ginput_container.has_first_name.has_middle_name.no_last_name span, 
    .has-form .gform_wrapper .ginput_complex.ginput_container.has_first_name.no_middle_name.has_last_name span, 
    .has-form .gform_wrapper .ginput_complex.ginput_container.no_first_name.has_middle_name.has_last_name span,
    .has-form .gform_wrapper .ginput_complex .ginput_left, 
    .has-form .gform_wrapper .ginput_complex .ginput_right{
        width: 100%;
        display: block;
        margin-left: 0;
    }

    .has-form .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium{
        width: 97.5%;
    }
}

@media (min-width: 1200px) {
    [class*="span"] {
        float: left;
        min-height: 1px;
        margin-left: 30px;
    }

    .nav-collapse.collapse{
        float: left;
    }

    .clearfix.large{
        display: block;
    }

    .clearfix.meddium{
        display: none;
        clear: none;
    }

    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 1200px;
    }

    .navbar-fixed-top .container .nav-wrap,
    .navbar-fixed-bottom .container .nav-wrap{
        width: 867px;
        margin: 0 auto;
        position: relative;
    } 


    input,
    textarea,
    .uneditable-input {
        margin-left: 0;
    }

    .page-content .videos-wrap .video-block.middle,
    .page-content .photos-wrap .photo-block.middle{
        margin: 0px 3.5%;
    }
}

@media (min-width: 730px){
    .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 729px) {
    body {
        padding-top: 0;
    }

    [class*="span"] {
        float: left;
        min-height: 1px;
        margin-left: 20px;
    }

    .clearfix.large{
        display: none;
        clear: none;
    }

    .clearfix.meddium{
        display: none;
        clear: none;
    }

    .navbar-fixed-top,
    .navbar-fixed-bottom {
        position: static;
    }

    .navbar .container {
        width: auto;
        padding: 0;
    }
    .navbar .brand {
        padding-right: 10px;
        padding-left: 10px;
        margin: 0;
    }

    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
    }

    .navbar .nav > li,
    .navbar .nav > li.menu-item-18,
    .navbar .nav > li.menu-item-18,
    .navbar .nav > li.menu-item-type-custom{
        background: none;
        padding-left: 0px;
    }

    .navbar .nav > li.menu-item-type-custom > a{
        background: none;
        color: #888888;
        padding: 9px 15px;
    }

    .navbar-fixed-top .container .nav-wrap,
    .navbar-fixed-bottom .container .nav-wrap{
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .page-content{
        width: 96%;
    }

    .navbar .brand{
        padding: 4px;
        height: 30px;
    }

    .navbar .nav > li > a{
        font-size: 12px;
    }

    .navbar-fixed-top .container .nav{
        padding: 32px 0px;
    }

    .nav-collapse {
        clear: both;
    }
    .nav-collapse .nav {
        float: none;
        margin: 0 0 10px;
    }
    .nav-collapse .nav > li {
        float: none;
    }
    .nav-collapse .nav > li > a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > .divider-vertical {
        display: none;
    }
    .nav-collapse .nav .nav-header {
        color: #777777;
        text-shadow: none;
    }
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        padding: 9px 15px;
        font-weight: bold;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    #menu-main-menu form{
        padding: 9px 15px;
    }
    .nav-collapse .btn {
        padding: 4px 10px 4px;
        font-weight: normal;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .nav-collapse .dropdown-menu li + li a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .dropdown-menu a:hover {
        background-color: #BFD72F;
    }

    .touchscreen .nav-collapse .nav > li > a:hover,
    .touchscreen .nav-collapse .dropdown-menu a:hover{
        background: none !important;
    }

    .nav-collapse.in .btn-group {
        padding: 0;
        margin-top: 5px;
    }
    .nav-collapse .dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        display: block;
        float: none;
        max-width: none;
        padding: 0;
        margin: 0 15px;
        background-color: transparent;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .nav-collapse .dropdown-menu:before,
    .nav-collapse .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .dropdown-menu .divider {
        display: none;
    }
    .nav-collapse .nav > li > .dropdown-menu:before,
    .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .navbar-form,
    .nav-collapse .navbar-search {
        float: none;
        padding: 10px 15px;
        margin: 10px 0;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-inverse .nav-collapse .navbar-form,
    .navbar-inverse .nav-collapse .navbar-search {
        border-top-color: #111111;
        border-bottom-color: #111111;
    }
    .navbar .nav-collapse .nav.pull-right {
        float: none;
        margin-left: 0;
    }
    .nav-collapse,
    .nav-collapse.collapse {
        height: 0;
        overflow: hidden;
        width: 100%;
        float: right;
        background: white;
    }

    .navbar-fixed-top .container{
        background: none;
    }

    .nav-wrap{
        background: url(../img/white.jpg) repeat-x 0 0;
    }

    .navbar .btn-navbar {
        display: block;
    }
    .navbar-static .navbar-inner {
        padding-right: 10px;
        padding-left: 10px;
    } 

    #home .blocks .block{
        width: 100% !important;
    }

    footer{
        width: 96%;
        margin-top: 10px;
    } 

    footer .middle{
        width: 90%;
    }

    footer .middle #join-mailing-list,
    footer .middle .social-wrap,
    footer .middle #searchform{
        width: 100%;
        margin-bottom: 3.5%;
    }

    .page-content .videos-wrap .video-block,
    .page-content .photos-wrap .photo-block{
        width: 100%;
    }

    .page-content .videos-wrap .video-block.even,
    .page-content .photos-wrap .photo-block.even,
    .page-content .videos-wrap .video-block.middle,
    .page-content .photos-wrap .photo-block.middle{
        margin: 0px;
    }

    .contact-section .contact-subsections .row-content,
    .contact-section .contact-subsections .subsection-text .inner-wrap{
        width: 100%;
    }

    .has-tags .tag-post-wrap .post-tags{
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }

    .has-tags .tag-post-wrap .post-tags h2{
        margin-bottom: 5px;
    }

    .has-tags .tag-post-wrap .post-tags h3{
        float: left;
        margin-right: 10px;
    }

    .has-tags .tag-post-wrap .tag-post-stories{
        float: none;
        width: 100%;
    }

    .has-tags .tag-post-wrap .tag-post h3{
        font-size: 20px;
        line-height: 30px;
    }

    #home .video-wrapper .caption{
        font-size: 12px;
        line-height: 30px;
    }

    #home h1{
        font-size: 16px;
        margin-top: 35px;
        line-height: 20px;
    }

    #home .page-content {
        font-size: 12px;
        line-height: 20px;
        width: 94%;
        margin: 10px auto 35px auto;
        padding: 0px;
    }

    .submenu{
        height: auto;
        padding: 10px 0;
    }

    .submenu .submenu-item{
        display: block;
        padding: 0;
    }

    .submenu .submenu-item a{
        line-height: 30px;
    }

    .submenu span{
        display: none;
    }

    .page-content h1{
        font-size: 30px;
        margin-bottom: 10px;
        line-height: 120%;
    }

    .important-note{
        font-size: 16px;
        margin-bottom: 20px;
    }

    .page-content .page-text{
        font-size: 16px;
        line-height: 20px;
    }

    .page-content{
        padding: 25px 0;
    }

    .page-content h2{
        font-size: 20px;
    }

    .page-content .caption{
        font-size: 14px;
        line-height: 18px;
    }

    .page-content h3{
        font-size: 18px;
        line-height: 25px;
    }

    .page-content .videos-wrap .video-block .title, 
    .page-content .photos-wrap .photo-block .title{
        font-size: 12px;
    }

    .page-content .videos-wrap .video-block img, 
    .page-content .photos-wrap .photo-block img{
        margin-bottom: 5px;
    }

    .collapsible h4{
        font-size: 14px;
        line-height: 21px;
        padding: 7px 6% 7px 3.6%;
    }

    .collapsible .list-item{
        font-size: 12px;
        line-height: 16px;
    }

    #choose-your-words ul li{
        list-style-type: none;
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    #choose-your-words ul li:before{
        content: ' \2022   ';
    }

    #choose-your-words ul li p{
        display: inline;
    }

    #choose-your-words .bottom-text{
        font-size: 14px;
        line-height: 18px;
        font-weight: 800;
    }

    #psa .child-page-text,
    #psa .info-wrap .info-block,
    #photos .slideshow-wrap .caption-wrap .photo-caption{
        font-size: 14px;
        line-height: 18px;
    }

    .member-section .member,
    .partners .patner{
        margin-bottom: 20px;
    }

    .member-section .member .image-wrap,
    .partners .patner .image-wrap{
        width: 21%;
    }

    .member-section .member .member-info,
    .partners .patner .partner-info{
        width: 70%;
        font-size: 14px;
        line-height: 18px;
    }

    .post-wrap .post{
        margin-bottom: 40px;
    }

    .post-wrap .post .image-wrap{
        width: 31%;
    }

    .post-wrap .post .post-info{
        width: 60%;
        font-size: 12px;
        line-height: 16px;
    }

    .page-content .post-wrap .post .post-info h2{
        margin-bottom: 10px;
    }


    #contact .contact-info p{
        margin-bottom: 20px;
    }

    .has-form .gform_wrapper span.gform_description, #take-the-pledge h2, #plan-en-event h2{
        font-size: 20px;
        line-height: 30px;
    }

    .has-form .gform_wrapper ul li.gfield.floater{
        width: 100%;
    }

    .has-form .gform_wrapper ul li.gfield.floater,
    .has-form .gform_wrapper ul li.gfield,
    .contact-section .contact-subsections .contact-subsection{
        margin: 0 0 10px 0;
    }

    #contact .contact-info,
    .contact-section .section-text,
    .contact-section .contact-subsections .row-header, 
    .contact-section .contact-subsections .row-content, 
    .contact-section .contact-subsections .row-header a,
    .contact-section .contact-subsections .subsection-text .inner-wrap{
        font-size: 12px;
        line-height: 16px;
    }

    .contact-section .section-text p{
        margin-bottom: 15px;
    }

    .contact-section .contact-subsections h3{
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 10px 0;
    }

    .has-form .gform_wrapper ul li.gfield.request-flag label,
    .has-form .gform_wrapper ul li.gfield.pae-note,
    .has-form .gform_wrapper li.gfield.take-the-pledge .gfield_checkbox label{
        line-height: 16px !important;
        font-size: 12px;
    }

    #take-the-pledge h2, #plan-en-event h2{
        font-size: 18px;
        line-height: 24px;
    }

    #take-the-pledge .gray-subsection h3{
        font-size: 14px;
        line-height: 18px;
    }

    #take-the-pledge .gray-subsection .principle,
    #plan-en-event .tips li p{
        font-size: 12px;
        line-height: 16px;
    }

    #spread-the-word .social-wrap{
        text-align: center;
    }

    #spread-the-word .social-wrap label{
        float: none;
        text-align: center;
        font-size: 14px;
        display: block;
    }

    #spread-the-word .social-wrap a{
        float: left;
        width: 16%;
        margin-left: 3%;
    }

    #spread-the-word .social-wrap a#facebook-btn{
        margin-left: 23%;
    }

    .stories .tag-post-wrap .post-tags h2{
        margin-bottom: 10px;
    }

    .has-tags .tag-post-wrap .tag-post .written-by,
    .has-tags .tag-post-wrap .tag-post-stories .tag-post-content .excerpt, 
    .has-tags .tag-post-wrap .tag-post-stories .tag-post-content .full-text{
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .has-tags .tag-post-wrap .tag-post{
        margin-bottom: 20px;
    }

    .has-tags .tag-post-wrap .tag-post-stories .show-hide-content{
        font-size: 12px;
        line-height: 16px;
    }

    #photos .slideshow-wrap .photo-wrap .arrow{
        width: 15%;
    }

}

@media (min-width: 980px) and (max-width: 1200px) {
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
    }

    .clearfix.large{
        display: block;
    }

    .clearfix.meddium{
        display: none;
        clear: none;
    }

    .nav-wrap{
        width: 867px;
        margin: 0 auto;
    }

    footer{
        width: 98%;
    } 

    footer .middle{
        width: 90%;
    }

    .page-content{
        width: 96%;
    }

    .page-content .videos-wrap .video-block.middle,
    .page-content .photos-wrap .photo-block.middle{
        margin: 0px 3.5%;
    } 
}

@media (min-width: 730px) and (max-width: 980px) {
    body{
        padding-top: 105px;
    }

    .clearfix.large{
        display: none;
        clear: none;
    }

    .clearfix.meddium{
        display: block;
    }

    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
    }

    .nav-wrap{
        width: 98%;
        margin: 0 auto;
    }

    .navbar .nav > li {
        float: left;
        padding-right: 8px;
        padding-left: 16px;
    }

    .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }

    .navbar-fixed-top .container .nav-wrap,
    .navbar-fixed-bottom .container .nav-wrap,
    .page-content{
        width: 694px;
        margin: 0 auto;
        position: relative;
    }

    .navbar .brand{
        height: 69px;
        padding: 15px 15px 15px 0px;
    }

    .navbar .nav > li > a{
        font-size: 12px;
    }

    .navbar-fixed-top .container .nav{
        padding: 32px 0px;
    }

    footer{
        width: 98%;
    } 

    footer .middle{
        width: 90%;
    }

    .page-content{
        width: 96%;
    }

    .page-content .videos-wrap .video-block.middle,
    .page-content .photos-wrap .photo-block.middle{
        margin: 0px;
    }

    .page-content .videos-wrap .video-block.even,
    .page-content .photos-wrap .photo-block.even,
    .page-content .videos-wrap .video-block.middle.even,
    .page-content .photos-wrap .photo-block.middle.even{
        margin: 0px 0px 0px 4%;
    }

    .page-content .videos-wrap .video-block,
    .page-content .photos-wrap .photo-block{
        width: 48%;
    }
}
