/* Full-width input fields */
/* Style the navigation menu */

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}
select, input[type=text], input[type=password] {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
table, html, body, division{
    max-width: 100vw;
    
}
#pass {
    width: 100%;
}
#pass input[type=text], #pass input[type=password]{
    width: 100%;
}
#passmess {
    font-size: 18px;
    color: #001a00;
    width: auto;
}
h2{ font-size:20px; font-variant:normal; font-family:Verdana, Geneva, sans-serif;
font-weight:bold; font-style:normal; text-decoration:blink; text-transform:uppercase; color:  #800040;
	
	}
/* Set a style for all buttons */
button, #comm, span a, #commenter, .stripeOdd a, .stripeEven a {
    background-color: #6E7BF4;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
}
#commenter{
    font-size: 10px;
}
button:hover, #commenter:hover, #comm:hover, span a:hover, .stripeOdd a:hover, .stripeEven a:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
.cancelbtn2 {
    padding: 14px 20px;
    background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
#id02 label, .cancelbtn2,.signupbtn {float:left;width:50%}

/* Add padding to container elements */
.container {
    padding: 2px;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 2px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 1px;
}

/* Modal Content/Box */
.modal-content2 {
    background-color: #fefefe;
    opacity: 0.8;
    margin: 2% auto 3% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 50vw; /* Could be more or less, depending on screen size */
}
/* error span*/
.error {color: #FF0000;}
/* error span*/
#success {color: #008040;}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 5px;
    top: 0;
    color: #000;
    font-size: 5px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn2, .cancelbtn,.signupbtn {
       width: 100%;
    }
}
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: #6E7BF4;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    width: auto;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 5px;
}

.topright:hover {color: red;}
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
      div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
       div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {
      div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
       div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
     div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
    div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
     div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
    div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
     div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
     div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
     div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {
     div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {
    div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {
     div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {
     div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
      div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
       div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}


/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 
      div, table {
         min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
        body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}



/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 
 div, table {
          min-width: 10vw;
          min-height: 10vh;
          overflow: auto;
          clear: both;
      }
      body{
          max-width: 100vw;
          height: 100vh;
          overflow: auto;
          clear: both;
      }
}