/*
 * Devices
 * min 1200
 * min 1024
 * max 1024
 * max 768
 * max 640
 * max 480
 * max 320
 */
#responsive-utils .hide-element {
  display: none !important;
  visibility: hidden !important;
}
#responsive-utils .show-element {
  display: block !important;
  visibility: visible !important;
}
#responsive-utils .full-size {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#responsive-utils .half-size {
  width: 50% !important;
}
#responsive-utils .container-desktop {
  width: 940px !important;
}
#responsive-utils .container-phone {
  width: 100% !important;
}
#responsive-utils .container-phone2 {
  width: 100% !important;
}
#responsive-utils .container-phone3 {
  width: 100% !important;
}
#responsive-utils .container-phone4 {
  width: 100% !important;
}
#responsive-utils .container-tablet {
  width: 720px !important;
}
#responsive-utils .container-large {
  width: 1140px !important;
}
#responsive-utils .container-phone {
  padding: 0 10px;
}

.on-phone { display: none; visibility: hidden; }
/* Desktop */
@media screen and (min-width: 800px) {
  .no-desktop {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (min-width: 1024px) {
  .no-desktop {
    display: none !important;
    visibility: hidden !important;
  }
  .on-desktop {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 940px !important;
  }
  
}
/* Large desktop */
@media screen and (min-width: 1200px) {
  html {
    font-size: 100%; /*70%;*/
  }
  .no-large {
    display: none !important;
    visibility: hidden !important;
  }
  .on-large {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 1140px !important;
  }
  
  .metro .grid.maximize { width: 95%!important; }  
  .metro .grid.maximize [class*="span"]:not(:first-child) { margin-left: 1.45% !important; }
  .metro .grid.maximize .span1 { width: 7% !important; }
  .metro .grid.maximize .span2 { width: 15.45% !important; }
  .metro .grid.maximize .span3 { width: 23.9% !important; }
  .metro .grid.maximize .span4 { width: 32.35% !important; }
  .metro .grid.maximize .span5 { width: 40.82% !important; }
  .metro .grid.maximize .span6 { width: 49.27% !important; }
  .metro .grid.maximize .span7 { width: 57.7% !important; }
  .metro .grid.maximize .span8 { width: 66.2% !important; }
  .metro .grid.maximize .span9 { width: 74.65% !important; }
  .metro .grid.maximize .span10 { width: 83.1% !important; }
  .metro .grid.maximize .span11 { width: 91.55% !important; }
  .metro .grid.maximize .span12 { width: 100% !important;}  
  .metro .grid.maximize .offset1 { margin-left: 8.45% !important; }
  .metro .grid.maximize .offset2 { margin-left: 16.85% !important; }
  .metro .grid.maximize .offset3 { margin-left: 25.34% !important; }
  .metro .grid.maximize .offset4 { margin-left: 33.77% !important; }
  .metro .grid.maximize .offset5 { margin-left: 42.2% !important; }
  .metro .grid.maximize .offset6 { margin-left: 50.63% !important; }
  .metro .grid.maximize .offset7 { margin-left: 59.13% !important; }
  .metro .grid.maximize .offset8 { margin-left: 67.56% !important; }
  .metro .grid.maximize .offset9 { margin-left: 76% !important; }
  .metro .grid.maximize .offset10 { margin-left: 84.45% !important; }
  .metro .grid.maximize .offset11 { margin-left: 92.92% !important; }
}
@media screen and (min-width: 1024px) 
{
  
}
/* tablet landscape*/
@media only screen and (max-width: 1024px) {
  .no-tablet-landscape,
  .no-tablet {
    display: none !important;
    visibility: hidden !important;
  }
  .on-tablet {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 940px !important;
  }         
}
/* tablet portrait */
@media only screen and (max-width: 800px) 
{  
  html {
    font-size: 100%;/*60%;*/
  }
  .no-tablet-portrait,
  .no-tablet,
  .hide-on-800 {
    display: none !important;
    visibility: hidden !important;
  }
  .on-tablet-portrait,
  .on-tablet,
  .show-on-800 {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 720px !important;
  }
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*="span"] {
    width: 350px !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
  .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
    margin-left: 20px !important;
  }
  .grid:not(.fluid) > .row .span12,
  .grid:not(.fluid) > .row .span7,
  .grid:not(.fluid) > .row .span8,
  .grid:not(.fluid) > .row .span9,
  .grid:not(.fluid) > .row .span10,
  .grid:not(.fluid) > .row .span11 {
    /*width: 720px !important;*/
    width: 100% !important;
  }
  .grid:not(.fluid) > .row .span12:nth-child(even),
  .grid:not(.fluid) > .row .span7:nth-child(even),
  .grid:not(.fluid) > .row .span8:nth-child(even),
  .grid:not(.fluid) > .row .span9:nth-child(even),
  .grid:not(.fluid) > .row .span10:nth-child(even),
  .grid:not(.fluid) > .row .span11:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row [class*="span"] {
    width: 350px !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
  .grid:not(.fluid) > .row .row [class*="span"]:nth-child(even) {
    margin-left: 20px !important;
  }
  .grid:not(.fluid) > .row .row .span12,
  .grid:not(.fluid) > .row .row .span7,
  .grid:not(.fluid) > .row .row .span8,
  .grid:not(.fluid) > .row .row .span9,
  .grid:not(.fluid) > .row .row .span10,
  .grid:not(.fluid) > .row .row .span11 {
    width: 720px !important;
  }
  .grid:not(.fluid) > .row .row .span12:nth-child(even),
  .grid:not(.fluid) > .row .row .span7:nth-child(even),
  .grid:not(.fluid) > .row .row .span8:nth-child(even),
  .grid:not(.fluid) > .row .row .span9:nth-child(even),
  .grid:not(.fluid) > .row .row .span10:nth-child(even),
  .grid:not(.fluid) > .row .row .span11:nth-child(even) {
    margin-left: 0 !important;
  }
  .navigation-bar,
  .navbar {
    position: relative !important;
  }
  .navigation-bar .pull-menu,
  .navbar .pull-menu {
    display: block !important;
  }
  .navigation-bar .element,
  .navbar .element {
    float: none !important;
  }
  .navigation-bar .element-divider,
  .navbar .element-divider {
    display: none !important;
  }
  .navigation-bar .element-menu,
  .navbar .element-menu {
    position: relative;
    float: none;
    display: none;
    width: 100% !important;
    background-color: inherit;
    z-index: 1000;
  }
  .navigation-bar .element-menu li,
  .navbar .element-menu li {
    display: block !important;
    float: none !important;
    width: 100%;
  }
  .navigation-bar .element-menu li a,
  .navbar .element-menu li a {
    display: block !important;
    float: none !important;
    width: 100%;
  }
  .navigation-bar .element-menu li .dropdown-menu,
  .navbar .element-menu li .dropdown-menu {
    position: relative !important;
    left: 0;
  }
  .navigation-bar .element-menu .dropdown-toggle,
  .navbar .element-menu .dropdown-toggle {
    color: inherit;
    position: relative;
  }
  .navigation-bar .element-menu .dropdown-toggle:after,
  .navbar .element-menu .dropdown-toggle:after {
    position: absolute;
    left: 100% !important;
    margin-left: -15px;
  }
  
  .span5.phone-landscape,
  .phone-landscape 
  {
      width: 100% !important;
      display: block !important;
      visibility: visible !important;
  }
  /*.metro .padding20 { padding: 0 !important; margin: 15px !important; }*/
  
/*}
@media only screen and (max-width: 800px) {*/

  .navigation-bar .pull-menu,
  .navbar .pull-menu {
    display: block !important;
  } 
  .metro #logo { font-size: 215% !important;}
  .metro img#system-logo 
  {
      float: left;
      width: 50px !important;
      margin-right: 20px;
      margin-bottom: 10px;     
  }
  .metro h1#system-name 
  {
      text-align: left;
      font-size: 25pt; 
      /*margin-left: 55px;     */
  }
  #user-login { display: none!important; visibility: hidden !important; }
  #user-login-2 { display: inherit!important; visibility: visible!important; }
  /*.padding20 { padding: 0!important; margin: 20px !important; }*/
  
  .my-account-mobile { position: absolute; right: 11px; top: 15px; z-index: 999; background-image: url(/assets/images/burger.png); background-repeat: no-repeat; background-position: 50% 4px; }
  .my-account-mobile a { display: block !important;}
}
@media only screen and (max-width: 768px) 
{
  .hide-on-768 { display:none!important; visibility : hidden; }
  .show-on-768 { display: block !important; visibility: visible!important }
  
  .tab-control ul.tabs li a { width: auto !important; max-width: 100px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 2000px!important; overflow: hidden; text-overflow: ellipsis; }
  
}
/* Phones landscape*/
@media only screen and (max-width: 736px) 
{
  .master-body {
      margin: 10px !important;
  }  
  
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .span12 {
    width: 100% !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row .span12 {
    width: 100% !important;
  }
  
  .tab-control ul.tabs li a { width: auto !important; max-width: 120px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 200px!important; overflow: hidden; text-overflow: ellipsis; }
   
}
@media only screen and (max-width: 667px) 
{
  .master-body 
  {
      margin: 10px !important;
  }  
  #logo-secondary {
    display: block;
    position: relative;    
    margin-bottom: 20px;
  }  
  
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .span12 {
    width: 100% !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row .span12 {
    width: 100% !important;
  }
  
  .tab-control ul.tabs li a { width: auto !important; max-width: 100px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 200px!important; overflow: hidden; text-overflow: ellipsis; }
}
@media only screen and (max-width: 640px) {
  html {
    font-size: 100%; /*60%;*/
  }
  .no-phone-landscape,
  .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .on-phone {
    display: block !important;
    visibility: visible !important;
  }
  .container {
    width: 100% !important;
    padding: 0 10px;
  }
  .grid:not(.fluid) > .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .span12 {
    width: 100% !important;
  }
  .grid:not(.fluid) > .row .row {
    margin: 0;
  }
  .grid:not(.fluid) > .row .row > [class*="span"] {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
  }
  .grid:not(.fluid) > .row .row > [class*="span"]:nth-child(even) {
    margin-left: 0 !important;
  }
  .grid:not(.fluid) > .row .row .span12 {
    width: 100% !important;
  }
  
  .master-body 
  {
      margin: 5px !important;
  }  
  #logo-secondary 
  {
    background: transparent;
  }
}
/* iphone 5 landscape */
@media only screen and (max-width: 568px)
{
  .no-tablet-portrait 
  {
      display: block !important;
      visibility: visible !important;
  }
  .master-header .myaccount 
  {
      top: -3px !important;
  }
  .metro .padding20 {
    padding: 10px;
  }
  .metro #logo 
  {
      display: none!important; 
  }
  
  .tab-control ul.tabs li a { width: auto !important; max-width: 80px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 200px!important; overflow: hidden; text-overflow: ellipsis; }
}

/* iphone 6 plus portrait */
@media only screen and (max-width: 414px) 
{
  .tab-control ul.tabs li a { width: auto !important; max-width: 50px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 100px!important; overflow: hidden; text-overflow: ellipsis; }
  
  .hide-on-414 { display: none !important; }
  
  .metro .tab-control .frame { padding: 10px !important; }
  /*.metro .padding20 { padding: 0 !important; margin: 20px !important;}*/
  .show-on-414 { display:block !important; visibility: visible !important; }
}
@media only screen and (max-width: 360px) {
  html {
    font-size: 80%; /*40%;*/
  }   
  .no-phone-portrait,
  .no-phone,
  .hide-on-360 {
    display: none !important;
    visibility: hidden !important;
  }  
  .container {
    width: 100% !important;
  }
  .subheader {
    width: 80% !important;
    margin: auto !important;    
  }
  .metro h1#system-name 
  {
      font-size: 20pt !important;
      line-height: 15pt !important;
      margin-top: 10px !important;
      position: absolute;
      left: 50px !important;
      width: 60% !important;      
  }
}
@media only screen and (max-width: 320px) {
  html {
    font-size: 80%;
  }
  .no-phone-portrait,
  .no-phone,
  .hide-on-320 { display: none !important; visibility: hidden !important; }
  .container { width: 100% !important; }  
  .master-header .myaccount { top: 0px !important; }
  .tab-control ul.tabs li a { width: auto !important; max-width: 35px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 100px!important; overflow: hidden; text-overflow: ellipsis; }
  .metro img#system-logo { margin-top: 5px !important;}
  .master-body .tile-area h1#system-name { margin-top: 5px !important; margin-left: 10px !important; width: 80% !important; }  
}



/* came from old system */

@media (max-width: 979px) 
{
     #retail-login-2, 
     #floating-login-form  
     ,body .mind-map
     {
         display: none; 
     }
     
}
@media (min-width: 979px) 
{
    #retail-login-1, 
    #login-user-icon, 
    #login-user-header, 
    #form2-spacer, 
    #default-login-form  
    {
        display: none; 
    }
    
}
@media (min-height: 550px) 
{
  html {
      height: 100%;
  }
  body .mind-map {
      background-image: url(/assets/images/Mind-Map-1024x768.png);
      background-repeat: no-repeat;
      background-position: 50% 15%;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: -1;
  }
}
@media (max-height: 500px) 
{
    body .mind-map 
    {
        background-position: 50% 0;        
    }
}
@media (min-height: 700px) and (min-width: 1024px) 
{
    body .mind-map 
    {
        /*background-image: url(/assets/images/Mind-Map.png);*/
        background-position: 50% 50%;
    }    
}
@media (min-height: 850px) and (min-width: 1124px) 
{
    body .mind-map
    {
        /*background-image: url(/assets/images/Mind-Map-1124x768.png);*/
    }
}
@media (max-height: 600px) and (min-width: 980px) and (max-width: 1280px) 
{
    body .mind-map
    {
        /*background-image: url(/assets/images/Mind-Map-1024x600.png);*/
    }
}


/*iPad Mini*/
@media only screen and (max-device-width: 768px) and (orientation: portrait) 
{
    .metro #logo { font-size: 215% !important }   
    .master-body { margin-left: 20px !important; }
    .master-header .myaccount { right: -25px !important; }
        
    .metro .tile-area { width: 730px !important;}
    .metro .tile-area .tile-area-title { position: absolute !important; left: 0px !important; width: 680px !important;}
    .metro .tile-area .tile-group { width: 650px !important; margin-left: 35px; }
    
    .tile-group .tile h3 { line-height: 17pt!important; font-size: 14pt!important; margin: 0 !important; padding: 0!important; }
    .tile-group .tile.half .tile-status { display: none!important;}
    .tile-group .tile.six { width: 640px!important; }
    
    /*.tile-area { width: 730px!important; }
    .metro .tile-group:first-child { margin-left: 0!important; }
    .metro .tile h3 { line-height: 17pt !important; font-size: 14pt !important; }
    
    .hide-on-414 { display: none !important; visibility: hidden !important; }
    .show-on-414 { display: block !important; visibility: visible !important; } */
    
    
    .grid:not(.fluid) > .row .row [class*="span"] { width: 100% !important; }
    .grid:not(.fluid) > .row .row [class*="span"]:nth-child(even) { margin-left: 0!important; }
    
    .window .grid:not(.fluid) > .row > [class*="span"] { width: 43% !important; }
    .window .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {  width: 55% !important; margin-left: 0!important; }
    
    .window .content { max-height: 900px!important; max-width: 680px !important; overflow-y: auto; }
    
    /*.window .grid:not(.fluid) > .row > [class*="span"] { width: 48% !important; }    */
}
/* Samsung Galaxy Tab */
@media only screen and (max-device-width: 600px) and (orientation:portrait) 
{
    .master-body { margin-left: 5px !important; }
    .no-tablet-portrait { display: block!important; visibility: visible !important; }  
    
    .metro .tile-area #logo-secondary { width: 90% !important; margin-top: -35px !important; }    
    #logo-secondary h1 { font-size: 20pt!important; }    
    
    .metro .tile-area img#system-logo  { float: left; margin-top: -90px; margin-left: 5px; }
    .metro .tile-area .tile-area-title { position: absolute; top: -100px; }
    .metro .tile-area h1#system-name { margin-left: 80px; margin-top: 24px !important;}
    .metro .master-header #logo-secondary { padding: 19px 0 !important; }
    .metro .master-header img#system-logo { margin-left: 5px!important; margin-top: -4px !important; margin-right: 15px !important; }
    .metro .master-header h1#system-name { width: 90%!important; }
    
    .metro .tile-area { width: 580px!important; }
    .metro .tile-area .tile-group { width: 520px !important; margin-left: 40px !important; }
    
    .tile-group .tile-five,
    .tile-group .tile.six { width: 510px!important; }
    
    .hide-on-414 { display: none!important; visibility: hidden!important} 
    .show-on-414 { display: block!important; visibility: visible!important; }
}
@media only screen and (max-device-width: 570px) and (orientation: portrait) 
{
    
}
/* Phones portrait*/
@media only screen and (max-width: 480px)  and (orientation: portrait)  {
  html {
    font-size: 90%; /*45%;*/
  }
  .no-phone-portrait,
  .no-phone-landscape,
  .no-phone {
    display: none !important;
    visibility: hidden !important;
  }
  .no-tablet-portrait 
  {
    display: block !important;
    visibility: visible !important;
  }  
  .container {
    width: 100% !important;
  }
  .subheader {
    width: 80% !important;
    margin: auto !important;    
  }
  .master-header .myaccount 
  {
      top: 0px !important;
  }
  .metro #logo 
  {
      display: none!important; 
  }
  .metro img#system-logo { float: left; width: 50px !important; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; top: 0; }  
  .metro h1#system-name { font-size: 20pt !important; line-height: 20pt !important; margin-top: 10px !important; margin-left: 10px !important; }  
  .master-body .tile-area img#system-logo { margin-top: 0 !important; }
  .master-body .tile-area h1#system-name { margin-top: 0 !important; margin-left: 30px !important; }  
  
  .tab-control ul.tabs li a { width: auto !important; max-width: 60px !important; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis !important; }  
  .tab-control ul.tabs li.active a { width: auto!important; max-width: 150px!important; overflow: hidden; text-overflow: ellipsis; }
  
  .metro .window { width: 100% !important; top: 0 !important; height: 100% !important; min-width: 100% !important; border-color: #fff; overflow-x: hidden !important; overflow-y: auto!important; }
  .metro .window .caption .title { font-size: 20px !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 85%!important;}
  .window .content { height: auto!important; width: 100% !important; padding: 35px 10px 15px 10px!important; }
  .window .grid { width: 95% !important; height: 93% !important; }
  .window .input-control { width: 100% !important; }
  .window .row [class*="offset"] { margin-left: 0!important; }
  .window .row [class*="span"] { width: 94.5% !important; margin-left: 0 !important; }  
  .window .grid:not(.fluid) > .row > [class*="span"] { width: 100% !important; }
  .window .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {  width: 100% !important; margin-left: 0!important; }
  .metro .window .caption { background: #fff; border-color: #fff; }
}

/* iphone 6 plus */
/*@media only screen and (max-device-width: 414px) and (max-device-height: 736px) and (orientation:portrait) */
@media only screen and (max-device-width: 414px) and (orientation:portrait) 
{    
    .master-header .myaccount { right: 5px !important; top: 5px !important;}
    .master-header .dropdown-toggle { padding: 10px 5px 10px 0px !important;}
    .master-body { margin-left: 5px !important;}
    .metro .tile-area { display: block !important; width: 400px !important; padding-top: 80px;}
    /*.metro .tile-area .tile-group { width: 387px !important; margin-left: 15px !important;  }*/
    #logo-secondary { width: 85% !important; }
    
    .metro .tile-area #logo-secondary { display: block !important; position: absolute; margin-bottom: 0!important; margin-top: 0px !important; top: 10px !important; width: 85% !important;}
    .metro .tile-area #logo-secondary img#system-logo, .metro .tile-area img#system-logo { margin-top: 10px;}
    .metro .tile-area #logo-secondary h1#system-name { position: absolute !important; right: 0 !important; top: 0 !important; width: 295px !important; margin-left: 65px !important; margin-top: 10px !important;}           
    .metro .master-header #logo-secondary { padding: 0!important; top: 10px!important; }
    .metro .master-header img#system-logo { margin-right: 10px !important; margin-top: -10px !important; margin-bottom: 20px !important;}
    .metro .master-header h1#system-name { margin-left: 0px!important; margin-top: 0px !important; }
    
    .master-footer img { width: 25%;  }    
           
    .tile-group.two,
    .tile-group.double { width: 258px !important; }
    .tile-group.triple,
    .tile-group.four,    
    .tile-group.five,
    .tile-group.six,
    .tile-group.seven { width: 400px !important;}
    .tile-group-title { display: block !important; width: 100% !important; margin-right: 0 !important}
    
    .metro .tile-area .tile-group,
    .tile-group { width: 400px !important;/* padding-top: 0!important;*/ margin-left: 14px !important; }
    .tile-group .tile { margin: 0 9px 10px 0 !important; }
    .tile-group .tile.half .tile-status { display: none !important; }
    
    .metro .tile { float: left !important;}   
    .metro .tile.two,  
    .metro .tile.double { width: 250px !important; }    
    .metro .tile.triple,
    .metro .tile.quadro,
    .metro .tile.five { display: block !important; width: 379px !important;}   
    .metro .tile.six { display: block !important; width: 414px !important; height: auto !important; overflow: visible !important; }
    
    
    .metro .tile.six .padding5 { width: 94% !important; display: inline-table!important; margin: 10px !important; text-align: center; } 
    .metro .tile.six .padding5 p { text-align: center !important; }
    .metro .tile.six .padding5 p a { height: 80px; display: inline-block; padding-top: 10px; }
    
    .metro .tile .tile-content { overflow: visible!important;}
    .metro .tile .tile-content .padding10 { }
    
    .metro .tile h3 { margin-bottom: 5px !important; margin-top: -5px !important; font-size: 17px !important; line-height: 21px !important; }            
}
/* Samsung Galaxy Note */
@media only screen and (max-device-width: 400px) and (orientation: portrait) 
{
    .metro .tile-area .tile-group,
    .tile-group { width: 386px!important; margin-left: 7px!important;}   
}
/* Google Nexus 4 */ 
@media only screen and (max-device-width: 384px) and (orientation: portrait) 
{
    .metro .master-header img#system-logo {}
    .metro .master-header h1#system-name {width: 100%!important;}    
    
     .metro .tile-area { width: 380px !important; }
     .metro .tile-area .tile-group,
     .tile-group { width: 382px !important; margin-left: 0!important;}      
     .tile-group .tile { margin: 0 7px 6px 0 !important; }
     
     .metro .tile.half { width: 57px !important; height: 57px !important; }
     .metro .tile.double { width: 247px !important; }
     .metro .tile.triple,
     .metro .tile.quadro,
     .metro .tile.six { width: 374px !important; }
     .metro .tile.double-vertical { height: 246px !important; }
     
     
}
/* iphone 6 */
@media only screen and (max-device-width: 375px) and (orientation:portrait) 
{
    .tile-area #logo-secondary h1#system-name {width: 250px !important;}
    .metro .master-header h1#system-name { width: 325px!important; }
        
    .master-body {margin-left: 5px!important; }
    .metro .tile-area { width: 370px !important; }
    .metro .tile-area .tile-group,
    .tile-group { width: 325px !important; margin-left: 28px !important; }
    .tile-group.two { width: 325px!important; }
    .tile-group.three,
    .tile-group.triple,
    .tile-group.four,
    .tile-group.quadro,
    .tile-group.five,
    .tile-group.six { width: 318px!important; }
    
    .metro .tile.two,  
    .metro .tile.double { display: block !important; width: 250px !important;}   
    .metro .tile.triple,
    .metro .tile.quadro,
    .metro .tile.five,
    .metro .tile.six { display: block !important; width: 314px !important;}   
    .metro .tile.six { height: auto !important; overflow: visible !important; }
    .metro .tile.double-vertical { height: 246px !important; }
}
/* Google Nexus 5, Galaxy S6 */ 
@media only screen and (max-device-width: 360px) and (orientation:portrait) 
{
    .master-header .myaccount { top: 0px !important; }
    /*.tile-area h1#system-name { margin-left: 15px !important; width: 235px!important; top: 5px!important;}*/
    .metro .tile-area #logo-secondary { display: block !important; position: absolute; top: 10px !important; width: 82% !important;}
    .metro .tile-area #logo-secondary img#system-logo { margin-top: 0px !important; }
    .metro .tile-area #logo-secondary h1#system-name { position: absolute !important; left: 0px !important; top: 0px !important; width: 200px !important; }
    
    .metro .master-header #logo-secondary { top: -5px!important; }
    .metro .master-header h1#system-name { margin-top: 10px !important; width: 200px!important; margin-left: 15px!important; }
    .metro .master-header img#system-logo { margin-top: 0!important; margin-bottom: 15px!important;}
    
    .metro .tile-area { width: 355px !important;  }
    .metro .tile-area .tile-group,
    .tile-group { margin-left: 20px!important; }
    .metro .tile.double { width: 247px !important; }   
    .metro .tile.triple,
    .metro .tile.quadro,
    .metro .tile.six { width: 311px!important; } 
    
}
/* iphone 4 and 5 */
@media only screen and (max-device-width: 320px) and (orientation:portrait) 
{
    
    /*.metro .window { width: 100% !important; min-width: 90% !important; height: 100% !important; top: 0 !important; left: 0 !important; } */
    .master-header .myaccount { right: 0px !important; top: 0px !important;}  
    
    .metro .tile-area { width: 315px !important }
    .metro .tile-area .tile-group, 
    .tile-group { margin: 0px!important;}
    .metro .tile-group.two { width: 257px !important}
    .metro .tile-group.three,
    .metro .tile-group.four,
    .metro .tile-group.five,
    .metro .tile-group.six,
    .metro .tile-group.seven { width: 320px !important;}
    
    .metro .tile.two,
    .metro .tile.double { display: block !important; width:250px !important; }
    .metro .tile.quadro,
    .metro .tile.triple { display: block !important; width:310px !important; }
    .metro .tile.six { width: 100% !important; min-width: 310px !important; max-width: 300px !important; }
    
    
    .metro .tile.six .padding5 { padding: 0 !important; margin: 10px!important; }
    .metro .tile .tile-content { max-width: 310px; }
    .metro .tile .tile-content .padding10 { padding: 0 !important; margin: 10px !important;}
    
    .metro .tile-area #logo-secondary { display: block !important; position: absolute; top: 10px !important; width: 82% !important;}
    .metro .tile-area #logo-secondary img#system-logo { margin-top: 0px !important; }
    .metro .tile-area #logo-secondary h1#system-name { position: absolute !important; left: 0px !important; top: 0px !important; width: 200px !important; }
    
    .metro .master-header #logo-secondary { top: -5px!important; }
    .metro .master-header h1#system-name { margin-top: 10px !important; width: 200px!important; margin-left: 15px!important; }
    .metro .master-header img#system-logo { margin-top: 0!important; margin-bottom: 15px!important;}
}



/* iPhone 4 and iPhone 4S */
@media only screen and (max-device-width: 480px) and (orientation:landscape) 
{    
    /*.metro .tile-area #logo-secondary {}
    .metro .tile-area img#system-logo { margin-left: 10px; margin-top: 5px !important;}    
    .metro .tile-area h1#system-name, 
    .metro .tile-area #logo-secondary h1#system-name { margin-top: 5px !important; margin-left: 0px !important; width: 80% !important; max-width: 345px !important; font-size: 17pt !important; }*/
    
    .metro .tile-area #logo-secondary { display: block !important; visibility: visible!important; position: absolute; top: 0px !important; width: 580px !important; }
    .metro .tile-area h1#system-name {font-size: 17pt!important; margin-top: 15px!important; width: 60%!important;}
    .metro .tile-area img#system-logo { margin-left: 10px!important; margin-top: 12px!important; }
    
    .metro .master-header #logo-secondary { margin-bottom: 30px!important;}
    .metro .master-header h1#system-name { font-size: 17pt!important; margin-top: 20px!important; width: 90%!important;}
    .metro .master-header img#system-logo { margin-left: 5px!important; width: 55px!important; margin-top: 0px!important; margin-right: 15px!important; } 
    
    /*.metro .master-header {}
    .metro .master-header img#system-logo { margin-right: 15px!important;}
    .metro .master-header h1#system-name {font-size: 17pt!important; width: 410px!important;}*/
    
    .metro .tile-area { width: 460px!important; max-width: 460px !important; }
    .metro .tile-area .tile-group { width: 460px!important; max-width: 460px !important; margin-left: 12px !important; }
    .hide-on-414 { display: none !important; visibility: hidden !important; } 
    .show-on-414 { display: block !important; visibility: visible !important; }
}
@media only screen and (max-device-width: 568px) and (orientation:landscape) /* iphone 5 landscape */
{
    .master-header .myaccount { right: 0px !important; /*top: 10px !important;*/}
    
    .metro .tile-area h1#system-name { font-size: 20pt !important; left: 70px!important;  }
    
    .metro .master-header #logo-secondary {  margin-top: 0!important; margin-bottom: 40px !important; display: block!important;}
    .metro .master-header img#system-logo {float: left; margin-left: 5px !important; margin-top: -5px!important; margin-right: 25px!important; width: 55px!important; }
    .metro .master-header h1#system-name {font-size: 20pt!important; margin-top: 20px!important; }
    
    
    .metro .tile-area { width: 550px!important; max-width: 550px !important; padding-top: 100px !important;  }
    .metro .tile-area .tile-group { width: 520px!important; max-width: 550px !important; margin-left: 20px !important; }
    
    .master-body .tile-area img#system-logo,
    .metro .tile-area img#system-logo { margin-left: 10px; margin-top: 20px !important;}
    .metro .tile-area #logo-secondary { margin-top: 10px; }
    .master-body .tile-area h1#system-name,
    .metro .tile-area h1#system-name
     { margin-top: 5px !important; margin-left: 10px !important; width: 80% !important; max-width: 420px !important; }  
}

/* iPad mini */ 
@media only screen and (max-device-width: 1024px) and (orientation: landscape) 
{
    #logo { font-size: 30pt !important; }
}
@media only screen and (max-device-width: 736px) and (orientation:landscape) /* iphone 6 plus landscape */
{    
    .master-header #logo-secondary, 
    .metro .master-header #logo-secondary { display: block!important; visibility: visible!important;}
    .master-header .myaccount { /*right: -30px !important;*/ right: 0px!important; top: 3px !important;}
    .master-header .myaccount #current-user { margin-top: 0px !important; line-height: 35px !important;}
    .master-header .dropdown-toggle { padding: 10px 5px 10px 0px !important;  color: #000 !important;}
    .master-header .myaccount > [class*="icon"]  { color: Red!important; }
    
    .metro .master-header { padding: 0!important; margin: 10px 18px!important;}
    .metro .master-header #logo { /*font-size: 205% !important; margin: 0!important;*/ display: none!important; visibility: hidden!important; }
    .metro .master-header #logo img { width: 65px!important;}
    
    
    .master-body { display: block!important; margin: auto!important; }
    .metro .tile-area { width: 720px !important; padding-top: 90px !important;  }
    .metro .tile-area .tile-area-title { position: absolute !important; left: 0px!important; top: 10px!important; }
    .metro .tile-area .tile-group { width: 715px !important; margin-left: 5px; }
    
    .tile-group .tile h3 { line-height: 17pt !important; font-size: 14pt !important; margin: 0; padding: 0; }
    .tile-group .tile .name { display: none !important; }
    
    .metro .tile-area #logo-secondary { display: none !important; visibility: hidden!important; }
    .metro .tile-area img#system-logo { width: 55px !important; margin-top: 0 !important;}
    .metro .tile-area h1#system-name { position: absolute !important; left: 80px !important; top: 0px !important; }
    
    .metro .tile-group:first-child { margin-left: 5px!important; }
    .metro .tile-group.six { width: 715px !important; }
    .tile.six { width: 705px!important;}
    
    .metro .tile-area #logo { width: 93% !important; }
    .metro .tile-area #logo img { width: 65px !important; }
    
    
    .hide-on-414 { display: none !important; visibility: hidden!important; }
    .show-on-414 { display: block !important; visibility: visible!important; }
    
    .metro .window { width: 100% !important; top: 0 !important; height: 100% !important; min-width: 100% !important; border-color: #fff; overflow: auto!important; }
    .metro .window .caption { border-color: #fff; background-color: #fff; }
    .metro .window .caption .title { font-size: 20px;}
    .window .content { height: auto%!important; width: 95.5% !important; padding: 0!important; margin: 25px 15px 15px 15px!important; }
    .window .grid { width: 100% !important; height: 93% !important; }
    .window .input-control { width: 100% !important; }
    .window .row [class*="offset"] { margin-left: 0!important; }
    .window .row [class*="span"] { width: 100% !important; margin-left: 0 !important; }
    .window .grid:not(.fluid) > .row > [class*="span"] { width: 100% !important; }
    .window .grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {  width: 100% !important; margin-left: 0!important; }
    
}
@media only screen and (max-device-width: 667px) and (orientation:landscape) /* iphone 6 landscape */
{   
    .master-body { width: 95%!important; }
    .master-header .myaccount { right: 0px !important; /*top: 10px !important;*/}
    .metro .master-header img#system-logo { float: left; margin-left: 10px; }    
    .master-header #logo { font-size: 210% !important; }
    .tile-area #logo { width: 92% !important; font-size: 205% !important;  display: none!important; visibility: hidden!important;}
    .tile-area #logo img { width: 60px !important; }
    .metro .tile-area h1#system-name { width: 80% !important; }
    
    .metro .tile-area #logo-secondary { }

    .metro .tile-area { width: 640px!important; max-width: 640px !important; padding-top: 70px !important;  }
    .metro .tile-area .tile-group { width: 640px!important; max-width: 640px !important; }
}
@media only screen and (max-device-width: 640px) and (orientation:landscape) /* Google Nexus 4 */
{
    .metro .tile-area { width: 630px !important; }
    .no-tablet-portrait { display: block !important; visibility: visible !important; } 
    
    .metro .tile-area #logo-secondary { display: block !important; position: absolute; top: 10px !important; width: 580px !important; }
    .metro .tile-area h1#system-name {font-size: 22pt!important; margin-top: 10px!important;}
    .metro .tile-area img#system-logo { margin-left: 10px!important; }
    
    .metro .master-header #logo-secondary { margin-bottom: 30px!important; }
    .metro .master-header h1#system-name { font-size: 22pt!important; margin-top: 25px!important;}
    .metro .master-header img#system-logo { margin-left: 5px!important; width: 55px!important; margin-top: -10px!important; margin-right: 15px!important; }
    
    .tile-group { width: 625px !important; }
    
    .tile-group .tile h3 { line-height: 17pt !important; font-size: 14pt !important; }
    .tile-group .tile.half .name { display: none !important; }
    
    .hide-on-414 { display: none!important; visibility: hidden !important; }
    .show-on-414 { display: block !important; visibility: visible !important; }       
}
@media only screen and (max-device-width: 598px) and (orientation:landscape) 
{
    .metro .tile-area #logo-secondary { display: block !important; visibility: visible!important;  position: absolute; top: 0px !important; width: 580px !important; }
    .metro .tile-area h1#system-name {font-size: 17pt!important; margin-top: 15px!important; width: 80%!important;}
    .metro .tile-area img#system-logo { margin-left: 10px!important; margin-top: 5px !important; }
    
    .metro .master-header #logo-secondary { margin-bottom: 30px!important;}
    .metro .master-header h1#system-name { font-size: 17pt!important; margin-top: 20px!important; width: 90%!important;}
    .metro .master-header img#system-logo { margin-left: 5px!important; width: 55px!important; margin-top: -10px!important; margin-right: 15px!important; }
    
    .metro .tile-area {width: 580px !important;}
    .metro .tile-area .tile-group { width: 520px!important; margin-left: 35px!important; }
    .metro .tile { }
    .metro .tile.five,
    .metro .tile.six { width: 510px!important; }
}