
@media (max-width: 619px) {

    #mh17_wall_wrap {
        width:100%;
        overflow:hidden;
        margin: 0;
        padding: 10px 0 0 0;
        background-color:#000;
        text-align: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    #mh17_wall_wrap h1 {
        width:90%;
        margin: .5em auto;
        text-align: center;
    }

    #mh17_wall_wrap a:link,
    #mh17_wall_wrap a:visited,  
    #mh17_wall_wrap a:active {
        color: #fff;
        text-decoration: underline;
    }

    #mh17_wall_wrap a:hover {
        color: #ddd;
        text-decoration: none;
    }

    ul#mh17_thumbs {
        width: 100%;
        padding: 0 2px;
        display: inline-block;
        margin: 10px auto;
        text-align: center;
    }

    ul#mh17_thumbs li.mh17_thumb {
        list-style-type: none;
        display: inline-block !important;
        margin: 1px 0px !important;

        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */    

        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        filter: grayscale(1);

    }

    ul#mh17_thumbs li:hover {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }

    li.mh17_thumb img{
        width: 61px;
        height:61px; 
        border: none;
    }

    #mh17_intro {
        width:98%;
        background: #000 url(/interactive/2014/mh17/assets/mh17-indexbg.jpg) 50% 50% no-repeat;
        background-size: cover; 
        margin: 20px 0;
        padding:10px;
        text-align: center;
        vertical-align: top;
    }

    #mh17_intro div {
        width: 75%;
        padding: 20px;
        margin: auto;
        background: rgba(0, 0, 0, 0.85);
    }

    /*#mh17_intro div h1,
    #mh17_intro div h2,*/
    #mh17_intro div p {
        letter-spacing: 1px;
        line-height:20px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        margin: 18px 0;
    }

    #mh17_main {
        display: none;
        background-color: #000;
        margin: 20px 0;
        padding:10px;
        vertical-align: top;
    }

    p.cta {
        padding: 10px 0 0 0;
        border-top: 3px solid #232323;
    }

    .mh17_thumb img:hover {
        cursor: pointer;
        background-color: #ddd;
    }


    img#selected_person_img {
        width: 90%;
        /*min-height:480px;*/
        background-color: #232323;
        display: inline-block;
        vertical-align: top;
        margin: 0;
    }

    #selected_person_info {
        width: 90%;
        /*min-height:480px;*/
        background-color: #000;
        display: inline-block;
        vertical-align: top;
        padding: 5px 10px;
        text-align: left;
    }

    #selected_person_bio h3 {
        font-size: 24px;
        margin: auto;
    }



    #selected_person_dsq {
        width: 460px;
        height:570px;
        background-color: #1f1f1f;
        display: inline-block;
        margin: 10px 0 0 0;
        padding:10px;
    }

    #disqus_thread {
        width: 460px;
        max-height:300px;
    }

    #mh_social {
        display: none;
    }
}

@media (min-width: 620px) and (max-width: 939px) {

    #mh17_wall_wrap {
        width:100%;
        overflow:hidden;
        margin: 0;
        padding: 10px 0 0 0;
        background-color:#000;
        text-align: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    #mh17_wall_wrap h1 {
        width:90%;
        margin: .5em auto;
        text-align: center;
    }

    #mh17_wall_wrap a:link,
    #mh17_wall_wrap a:visited,  
    #mh17_wall_wrap a:active {
        color: #fff;
        text-decoration: underline;
    }

    #mh17_wall_wrap a:hover {
        color: #ddd;
        text-decoration: none;
    }

    ul#mh17_thumbs {
        width: 100%;
        padding: 0 2px;
        display: inline-block;
        margin: 10px auto;
        text-align: center;
    }

    ul#mh17_thumbs li.mh17_thumb {
        list-style-type: none;
        display: inline-block !important;
        margin: 1px 0px !important;

        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */    

        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        filter: grayscale(1);

    }

    ul#mh17_thumbs li:hover {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }

    li.mh17_thumb img{
        width: 61px;
        height:61px; 
        border: none;
    }

    #mh17_intro {
        width:98%;
        background: #000 url(/interactive/2014/mh17/assets/mh17-indexbg.jpg) 50% 50% no-repeat;
        background-size: cover; 
        margin: 20px 0;
        padding:10px;
        text-align: center;
        vertical-align: top;
    }

    #mh17_intro div {
        width: 75%;
        padding: 20px;
        margin: auto;
        background: rgba(0, 0, 0, 0.85);
    }

    /*#mh17_intro div h1,
    #mh17_intro div h2,*/
    #mh17_intro div p {
        letter-spacing: 1px;
        line-height:20px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        margin: 18px 0;
    }

    #mh17_main {
        display: none;
        /*width:920px;*/
        /*width: 100%;*/
        /*height:940px;*/
        background-color: #000;
        margin: 20px 0;
        padding:10px;
        vertical-align: top;
    }

    p.cta {
        padding: 10px 0 0 0;
        border-top: 3px solid #232323;
    }

    .mh17_thumb img:hover {
        cursor: pointer;
        background-color: #ddd;
    }


    img#selected_person_img {
        width: 45%;
        /*min-height:480px;*/
        background-color: #232323;
        display: inline-block;
        vertical-align: top;
        margin: 0;
    }

    #selected_person_info {
        width: 45%;
        /*min-height:480px;*/
        background-color: #000;
        display: inline-block;
        vertical-align: top;
        padding: 5px 10px;
        text-align: left;
    }

    #selected_person_bio h3 {
        font-size: 24px;
        margin: auto;
    }



    #selected_person_dsq {
        width: 460px;
        height:570px;
        background-color: #1f1f1f;
        display: inline-block;
        margin: 10px 0 0 0;
        padding:10px;
    }

    #disqus_thread {
        width: 460px;
        max-height:300px;
    }

    #mh_social {
        display: none;
    }
}


/**/
@media (min-width: 940px) {

    #mh17_wall_wrap {
        width:940px;
        min-height:750px;
        margin: 10px auto;
        padding: 10px 0 0 0;
        background-color:#000;
        text-align: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    #mh17_wall_wrap a:link,
    #mh17_wall_wrap a:visited,  
    #mh17_wall_wrap a:active {
        color: #fff;
        text-decoration: underline;
    }

    #mh17_wall_wrap a:hover {
        color: #ddd;
        text-decoration: none;
    }

    ul#mh17_thumbs {
        width: 920px;
        padding: 0 2px;
        display: inline-block;
        margin: 10px auto;
        text-align: center;
    }

    ul#mh17_thumbs li {
        list-style-type: none;
        display: inline-block;
        margin: 1px 0px !important;

        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
        filter: gray; 
        -webkit-filter: grayscale(100%); 
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        filter: grayscale(1);

    }

    ul#mh17_thumbs li:hover {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }

    li.mh17_thumb img{
        width: 61px;
        height:61px; 
        border: none;
    }

    #mh17_intro {
        width:920px;
        height:500px;
        background: #000 url(/interactive/2014/mh17/assets/mh17-indexbg.jpg) 50% 50% no-repeat;
        background-size: contain;
        margin: 20px 0;
        padding:10px;
        text-align: center;
        vertical-align: top;
    }

    #mh17_intro div {
        width: 400px;
        padding: 20px;
        margin: 130px auto 0;
        background: rgba(0, 0, 0, 0.85);
    }

    #mh17_intro div p {
        letter-spacing: 1px;
        line-height:26px;
        font-size: 18px;
        font-family: Arial, sans-serif;
        margin: 18px 0;
    }

    #mh17_main {
        display: none;
        width:920px;
        height:940px;
        height:500px; 
        background-color: #000;
        margin: 20px 0;
        padding:10px;
        vertical-align: top;
    }

    p.cta {
        background-color: #191919;
        padding: 10px;
        border: 3px solid #232323;
        border-radius: 6px;
    }

    .mh17_thumb img:hover {
        cursor: pointer;
        background-color: #ddd;
    }


    img#selected_person_img {
        width: 400px;
        min-height:480px;
        background-color: #232323;
        display: inline-block;
        vertical-align: top;
    }

    #selected_person_info {
        width: 470px;
        background-color: #000;
        display: inline-block;
        vertical-align: top;
        padding: 5px 10px;
        text-align: left;
    }

    #selected_person_bio {
        min-height: 240px;
        min-height: 396px;
    }

    #selected_person_bio h3 {
        font-size: 24px;
        margin: 0 0 auto 0;
    }



    #selected_person_dsq {
        width: 460px;
        height:570px;
        background-color: #1f1f1f;
        display: inline-block;
        margin: 10px 0 0 0;
        padding:10px;
    }

    #disqus_thread {
        width: 460px;
        max-height:300px;
    }
}

