/** Mobile Styles **/
@media screen and (max-width: 639px) {
    #content { min-width: 248px; min-height: 310px; }

    .nav_container { position: relative; z-index: 999; }
    .nav { position: absolute; z-index: 999; left: 0; top: 0; clear: both; width: 180px; }
    .nav .nav-title { padding: 1px 0 5px 7%; }
    .nav .nav-content { display: none; }
    .nav .nav-content h2 { margin-top: 15px; padding-bottom: 0px; }
    .nav .nav-content .row { padding: 15px 0 15px 2%; }
    .nav .nav-content .row h4 { width: 74px; margin-right: 10%; font-size: 13px;  }

    .nav.open { width: 85%; max-width: 400px; min-width: 170px; position: absolute; z-index: 999; }
    .nav.open .nav-title { border-bottom: 1px solid #d9e7ef; }
    .nav.open .onopen { display: block; position: relative; z-index: 999; }

    #container_360 { padding: 49px 0 0 0; width: 100%; }
    /*
    #container_360.correction .vebutton { width: 32%; margin-right: 2%; border: 2px solid #ccc; }
    #container_360.correction .vebutton#myopia_btn_3,
    #container_360.correction .vebutton#hyperopia_btn_3,
    #container_360.correction .vebutton#astigmatism_btn_3,
    #container_360.correction .vebutton#presbyopia_btn_3 { margin-right: 0; float: right; }
    #container_360.correction .vebutton.video_btn{ margin-top: 15px; clear: both; width: 100%; }
    */
    #container_360.correction .vebutton { width: 100%; padding: 8px 0; margin-top: 15px; border: 2px solid #ccc; }
    #container_360.correction .vebutton#myopia_btn_3,
    #container_360.correction .vebutton#hyperopia_btn_3,
    #container_360.correction .vebutton#astigmatism_btn_3,
    #container_360.correction .vebutton#presbyopia_btn_3 { margin-right: 0; float: right; }
    #container_360.correction .vebutton.video_btn{ margin-top: 15px; clear: both; width: 100%; }

    /*.video_container { height: 215px; }*/

    .hotspot_copy_container { width: 90%; margin: 15px auto 0; }
    .controls { width: 90%; }

    #container_360 .mark-info { font-size: 11px; width: 225px;  }
}