@media only screen and (orientation:landscape) {

    div#userview {
        padding-top: 2vh;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    div#videoside {
        width: 100vw !important;
        height: 100vh !important;
        display: none;
    }

    div#controlside {
        width: 100vw !important;
    }

    div#controlheader {
        min-height: 10.0vh;
        max-height: 10.0vh;
    }

    div#tabcontrol {
        padding-top: 1.3vh;
    }

    div#hamburgermenu {
        width: 3.7vw;
        margin-right: 2.0vw;
        padding-top: 1vh;
    }

    .hamburgerlink {
        margin-top: 0;
    }

        .hamburgerlink > div {
            width: 3.7vw;
            height: 1.2vh;
            margin-bottom: 0.9vh;
        }

    .tab {
        height: 6.9vh;
        width: 22vw;
    }

    .menu {
        width: 45vw;
        margin-left: -40vw;
    }

    div#speechicon {
        margin-top: 1.2vh;
        margin-left: 5vw;
    }

        div#speechicon a span {
            font-size: 1.4em;
        }

    div#volumebar {
        margin-top: 2.5vh;
        margin-left: 0.2vh;
    }

    .volume {
        width: 2px;
        margin-left: 1px;
        background: #FFF;
        float: left;
        border-radius: 3px;
    }

    #v1 {
        height: 6vh;
    }

    #v2 {
        height: 5.4vh;
        margin-top: 0.3vh;
    }

    #v3 {
        height: 4.8vh;
        margin-top: 0.6vh;
    }

    #v4 {
        height: 4.2vh;
        margin-top: 0.9vh;
    }

    #v5 {
        height: 3.6vh;
        margin-top: 1.2vh;
    }

    .conversation-body {
        min-height: 80vh;
        max-height: 80vh;
    }

    #interact-search-text {
        display: none;
    }

    #top-options {
        display:none;
    }

    #toggleImg {
        display: none;
    }

    #loading-mask > div, #loadingoverlay > div {
        top: 40%;
        left: 45%;
        transform: translate(-40%,-45%);
    }

    div#videocontainer {
        float: left;
        height: 100vh;
    }

    div#feedback {
        display: none;
    }


    #introOptionsButton {
        display: none;
    }

    .categorywelltitle {
        font-size: 0.8em;
        padding-top: 1.1vh;
        height: 6.5vh;
        padding-left: 3vw;
    }

    .categorywelltitlebox {
        font-size: 0.7em;
    }

    .categorywelllinks {
        padding: 3vh 3vw 1vh 3vw;
    }

    .statementlink {
        margin-bottom: 2vh;
        font-size: 0.9em;
    }

    div#interact-statements {
        width: 95vw !important;
        margin-left: 1vw;
        height: 75vh;
        margin-bottom: 5vh !important;
    }

    .micoff, .micon {
        font-size: 1.4em;
    }

    .menu-style {
        line-height: 1.1em;
        padding: 1vh 2vw 1vh 2vw;
    }

    ul.menu-style li > span {
        font-size: 0.8em;
        color: #2d61b5;
        vertical-align: middle;
    }

    ul.menu-style li > a {
        vertical-align: middle;
        font-size: 0.7em;
    }

    div#videocontainer {
        width: 100vw;
    }

    div#videoposter {
        text-align: center;
    }

        div#videoposter img {
            width: auto;
            height: 100%;
        }

    .bubbles {
        font-size: 0.88em;
        height: 4vh;
        right: 0.5vw;
        line-height: 4vh;
        top: 1.2vh;
        width: 3vw;
    }

    .substitutionleft {
        width: 40vw;
        margin-top: 8px;
    }

    div.fancy-select div.trigger {
        width: 40vw;
    }

    div.fancy-select ul.options {
        width: 40vw;
    }

    .avatar-mini {
        width: 5vw;
    }

    div#history-title {
        font-size: 1em;
    }

    .historybtn {
        width: 5vw;
        height: 6vh;
    }

    .history-table-header-turn {
        font-size: 0.8em;
    }
    
    div#introTop {
        height:6.5%;
    }

    div#introWrapper {
        width:100%;
        height:92.5%;
    }

    /* Scoring */ 
    .topMainHeader {
        height:12vh!important;
    }

    img#pageTitleImage {
        height:12vh!important;
    }

    .scoringprimaryviewcls {
        width: 97vw!important;
        height:60vh!important;
    }

    #btnScoringPrev, #btnScoringNext {
        width:20vw!important;
        height:9vh!important;
    }

    .topMainHeaderText {
        font-size:0.9em!important;
        padding-top:0.6vh!important;
        height:7vh!important;
        width:inherit!important;
    }

    .itemHeaderContainer {
        height:5.5vh!important;
    }

     .scorecontentdiv {
        height:53vh!important;
    }

}


@media only screen and (orientation:portrait) {
    
    div#userview {
        padding-top:1vh;
        padding-left:0;
        padding-right:0;
        padding-bottom:0;
    }

    div#videoside
    {
        display:none;
        width:100vw!important;
    }

    div#controlside
    {
        width:100vw!important;
    }
   
     div#controlheader
    {
        min-height:6.0vh;
        max-height:6.0vh;
    }

   
    .menu {
        width: 82vw;
        margin-left: -76vw;
    }

    .menu-style
    {
        line-height:1.7em;
    }

    ul.menu-style li>span
    {
        font-size:1.5em;
        color:#2d61b5;  
        vertical-align:middle; 
    }

    ul.menu-style li>a
    {
        vertical-align:middle; 
        font-size:0.9em;
    }

    .tab {
        height: 4.6vh;
        width: 17vw;
        padding-top: 0.6vh;
        margin-right:1vw;
    }

    div#tabcontrol {
        padding-top: 1.4vh;
        padding-left:0.8vw;
    }

    #interact-search-text 
    {
        width: 94.5vw;
        margin-right: 1.2vw;
    }

    #top-options {
        display:none;
    }

    #top-slowconn {
        display:none;
    }


    #toggleImg {
        display: none;
    }

    div#hamburgermenu {
        width: 6.8vw;
        margin-right: 5.0vw;
        padding-top: 1.5vh;
    }
    
    .hamburgerlink {
        margin-top:0;
    }

    .hamburgerlink>div {
        width: 6.8vw;
        height: 0.7vh;
    }

    div#speechicon
    {
        padding-top:0.1vh;
    }

    .micoff,.micon {
        font-size:2em;
    }

    #microphoneMuteText {
        font-size:1.2em;
    }

    .icotext {
        display:none;
    }

    .micspinneroverlay {
        left: 8vw;
    }


    #microphone-mute {
        margin-right:2vw;
    }

    div#speechicon {
        margin-top: 1.3vh;
        width: 15vw;
    }

     div#volumebar {
        margin-top: 1.5vh;
        margin-left: 0.2vh;
    }

    .volume {
        width: 2px;
        margin-left: 1px;
        background: #FFF;
        float: left;
        border-radius: 3px;
    }

    video#helpagent
    {
        width:67px;
        height:67px;
        bottom:0.75vh;
    }

    div#feedback-content.video16
    {
        height:65vh;
    }

    .categorywelltitle
    {
        padding-top:1.1vh;
        height:4vh;
        padding-left:3vw;
    }

    .categorywelltitlebox {
        font-size:0.7em;
        margin-right:1vw;
        float:left;
    }

    .categorywelltitletext {
        font-size:0.9em;
    }

    .categorywelllinks
    {
        padding:3vh 3vw 1vh 3vw;
    }

    .statementlink
    {
        margin-bottom:2vh;
        font-size:0.9em;
    }

    div#interact-statements
    {
        width:95vw !important;
        height:77.5vh !important;
        margin-left:1vw;
        margin-bottom:5vh !important;
    }

    div#feedback-content.video4
    {
        height:45vh;
    }

    div#feedback-content.video16
    {
        height:53vh;
    }

    .feedback-text-cls p
    {
        font-size:0.9em;
    }

    div#videocontainer {
        width:100vw;
        background-color:gray;
    }

    div#videoposter
    {
        text-align:center;
    }

    div#videoposter img {
        width:100%;
        height:auto;
    }

    .bubbles {
        font-size: 0.88em;
        height: 2.2vh;
        right: 0.5vw;
        line-height:2.2vh;
        top: 1.2vh;
        width: 4vw;
    }

    .substitutionleft {
        width: 40vw;
    }

    div.fancy-select div.trigger {
        width:40vw;
    }

    div.fancy-select ul.options {
        width:40vw;
    }

    .avatar-mini {
        width:8vw;
    }

    div#history-title {
        font-size:1em;
    }

    .historybtn {
        width:9vw;
        height:4vh;
    }

    .history-table-header-turn {
        font-size:0.8em;
    }

    div#introTop {
        height:4.5%;
    }

    div#introWrapper {
        width:100%;
        height:94.5%;
    }

    /* Scoring */ 
    .topMainHeader {
        height:10vh!important;
    }

    img#pageTitleImage {
        height:10vh!important;
    }

    .scoringprimaryviewcls {
        width: 97vw!important;
        height:71vh!important;
    }

    #btnScoringPrev, #btnScoringNext {
        width:25vw!important;
        height:3.5vh!important;
    }

    .topMainHeaderText {
        font-size:1em!important;
        padding-top:1vh!important;
        width:inherit!important;
    }

    .scorecontentdiv {
        height:66vh!important;
    }

}

body, div#controlside, div#videoside, div#userview {
    background-color:#FFF;
}

div#alert {
    width:50vw;
    height:30vh;
}

div#interact-statements {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

.scrollwindow {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

div#feedback-content
{
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

#history-table-wrapper {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

div#interact-categories
{
    display:none !important;
}

div#timerrow
{
   font-size:0.8em;
}

div#modalbody
{
    padding:0vh 3vw 0vh 3vw;
}

div#modalbuttonwell
{
    padding:2vh 3vw 2vh 3vw;
}

.modallink {
    font-size:1em;
}

div#modalx
{
    font-size:1em;
}

div#modaltitle
{   
    font-size:1em;
}

div#feedback-content p {
    font-size:0.9em;
}

.feedback-avatar {
    width:20%;
}
.feedback-quote {
    width:80%;
    margin-left:8%;
}
.feedbackrow {
    margin-right:5%;
}

.history-text {
    display:none;
}


div#introWrapper {
  	overflow: scroll!important;
}

div#introWrapperFull {
  	overflow: scroll!important;
}

/* Scoring */
.scoringTopButton {
    display:none!important;
}

#leftMenu {
    display:none!important;
}

.qaFeedbackBox {
    width:90%!important;
}

.regularButtonWell {
    width:98vw!important;
    margin-left:0vw!important;
    border-left:0vw!important;
}

.qaFeedbackBoxText
{
    width:62%;
    margin-left:3%;
}

.checklistColumn
{
    width:94%!important;
    float:none!important;
}

.itemTitle, .itemScore {
    font-size:0.9em!important;
}

.totalScore, .scoreValue {
    font-size:1.3em!important;
}

div#scoringahamburger {
    display:block!important;
}

div#timerrow
{
    font-family:Helvetica, sans-serif;
}

.helpagent {
    font-family:Helvetica, sans-serif;
}

.feedback-text-cls {
    font-family:Helvetica, sans-serif;
}

.problemtext {
    font-family:Helvetica, sans-serif;
}

#notesfieldset legend,#mofieldset legend {
    font-family:Helvetica, sans-serif;
}

div#modalbody p
{
    font-family:Helvetica, sans-serif;
}

div#videotext {
    font-family:Helvetica, sans-serif;
}

.statementlink
{
    font-family:Helvetica, sans-serif;
}

.saveloadrow td {
    font-family:Helvetica, sans-serif;
}

.trackerrow td {
    font-family:Helvetica, sans-serif;
}

.substitutionleft {
    font-family:Helvetica, sans-serif;
}

.checkright
{
    font-family:Helvetica, sans-serif;
}

.selectleft 
{
    font-family:Helvetica, sans-serif;
}

.menu a:link, .menu a:visited, .menu a:active
{
     font-family:Helvetica, sans-serif;
}

ul.menu-style li > button {
    font-size:0.9em;
}

.vid-container {
    width:86vw!important;
}

.vid-container video {
    width:86vw!important;
    height:30vh!important;
}