/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) */
@media only screen
and (min-width : 0px)
and (max-width : 1px)
/*and (min-width : 1024px)*/
/*and (max-width : 2047px)*/ {
  /* Styles */
   body {
      height: 768px;
      width: 1024px;
   }

   .casper-panel-header {
      border-bottom-width: 1px;
      font-size: 13px;
      height: 20px;
      line-height: 20px;
      margin-bottom: 5px;
   }

   .casper-panel-footer {
      border-bottom-width: 1px;
      height: 5px;
   }

   .fids-container:not(.no-margin):not(.no-margin-left) { margin-left: 10px; }
   .fids-container:not(.no-margin):not(.no-margin-top) { margin-top: 10px; }
   /* map */
   .fids-container[data-layout-container="map"] {
      height: 748px;
      width: 565px;
   }
   /* leaflet */
   .fids-container[data-layout-container="leaflet"] {
      height: 658px;
      width: 565px;
   }
   .fids-container[data-layout-container="leaflet"] .flight-panel {
      height: 100px;
      margin-top: -100px;
   }
   /* logo */
   .fids-container[data-layout-container="logo"] {
      height: 80px;
      width: 385px;
   }
   /* time */
   .fids-container[data-layout-container="time"] {
      height: 80px;
      width: 270px;
   }
   .time-panel {
      height: 25px;
      margin-top: 20px;
      width: 100px;
   }
   .time-panel > .time-current > span {
      font-size: 25px;
      line-height: 25px;
   }
   /* fids */
   .fids-container[data-layout-container="fids"] {
      height: 748px;
      width: 429px;
   }
   /* fids-list */
   .fids-container[data-layout-container="fids-list"] {
      height: 568px;
      width: 429px;
   }
   .flight-list-container {
      height: 540px;
   }
   .flight-list-rows {
      padding: 0px 5px;
   }
   .flight-list-rows .flight-list-row > div {
      font-size: 12px;
      line-height: 15px;
      padding-right: 8px;
   }
   .flight-list-rows .flight-list-row > .flr-tail { width: 40px; }
   .flight-list-rows .flight-list-row > .flr-time { width: 50px; }
   .flight-list-rows .flight-list-row > .flr-dep-name { width: 130px; }
   .flight-list-rows .flight-list-row > .flr-fltnr { width: 80px; }
   .flight-list-rows .flight-list-row > .flr-situation { width: 119px; }
   .flight-list-rows > .flight-list-row { 
      height: 20px;
      padding: 3px 0px;
   }
   /* routes */
   .fids-container[data-layout-container="routes"] {
      width: 159px;
      margin-top: 10px;
   }
   .fids-container[data-layout-container="routes"] > .flight-panel {
      height: 30px;
   }
   .fids-container[data-layout-container="routes"] > .route-panel {
      margin-top: 5px;
   }
   .route-map-container {
      padding: 1px;
   }
   .route-panel .route-map {
      height: 110px;
   }
   /* flight-info */
   .fids-container[data-layout-container="flight-info"] .aircraft-photo-container {
      height: 75px;
      margin-top: 5px;
   } 
   .fids-container[data-layout-container="flight-info"] .airline-logo-container {
      height: 30px;
      margin-top: 5px;
   }
   .fids-container[data-layout-container="flight-info"] .flight-details {
      height: 30px;
   }
   .flight-panel > .flight-details {
      font-size: 12px;
      line-height: 30px;
      padding: 0px 5px;
   }
   .flight-panel > .airline-logo-container  > img {
      height: 28px;
   }
   .flight-panel > .aircraft-photo-container > img {
      height: 73px;
   }
   .flight-panel > .aircraft-photo-container, .flight-panel > .airline-logo-container {
      border: 1px solid rgba(255,255,255,.15);
   }
   /* meteo */
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="flight-info"] {
      width: 125px; 
   }
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="routes"], .fids-container[data-layout-container="flight-info"] {
      height: 170px;
   }
   .meteo-panel > .meteo-weather {
      height: 75px;
      margin-top: 5px;
   }
   .meteo-weather > div { width: 105px; }
   .meteo-weather > div > div {
      height: 75px;
      line-height: 75px;
      width: 50px;
   }
   .meteo-weather > div > .symbol {
      font-size: 40px;
      margin-left: 5px;
   }
   .meteo-weather > div > .temperature { font-size: 30px; }
   .meteo-panel > .meteo-description { height: 30px; }
   .meteo-description > .location {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
   }
   .meteo-panel > .local-time {
      height: 30px;
      font-size: 18px;
      margin-top: 5px;
      line-height: 30px;
   }
   /* flight info */
   .flight-info-overlay {
      padding: 10px 15px;
   }
   .flight-info-overlay .flight-list-row {
      height: 30px;
      padding: 10px 0px;
   }
   .flight-info-overlay .flight-list-row > div {
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      padding-right: 8px;
   }
   .flight-info-overlay .flight-list-row > .flr-tail { width: 50px; }
   .flight-info-overlay .flight-list-row > .flr-sibt { width: 64px; }
   .flight-info-overlay .flight-list-row > .flr-dep-name { width: 120px; }
   .flight-info-overlay .flight-list-row > .flr-fltnr { width: 90px; }
   .flight-info-overlay .flight-list-row > .flr-airline { width: 150px; }
   .flight-info-situation {
      height: 40px;
      line-height: 40px;
      font-size: 30px;
   }
   /* casper logo */
   .casper-logo {
      height: 15px;
      right: 10px;
      top: 10px;
      width: 50px;
   }
}

/* iPads (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* iPads retina (landscape) */
@media only screen 
and (min-device-width : 1536px) 
and (max-device-width : 2048px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads retina (portrait) */
@media only screen 
and (min-device-width : 2048px) 
and (max-device-width : 1536px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops */
@media only screen 
and (min-width : 1024px)
and (max-width : 1279px) {
  /* Styles */
}

/* 720p */
@media only screen 
and (min-width : 1280px)
and (max-width : 1919px) {
  /* Styles */
}

/* 1080p (FULL HD) */
@media only screen 
and (min-width : 1920px)
and (max-width : 2047px) {
   /* Styles */
}

/* 2K */
@media only screen
and (min-width : 0px)
and (max-width : 1px)
/*and (min-width : 2048px)
and (max-width : 3839px)*/ {
  /* Styles */
   body {
      height: 1152px;
      width: 2048px;
   }

   .casper-panel-header {
      border-bottom-width: 2px;
      font-size: 25px;
      height: 35px;
      line-height: 35px;
      margin-bottom: 10px;
   }

   .casper-panel-footer {
      border-bottom-width: 2px;
      height: 10px;
   }

   .fids-container:not(.no-margin):not(.no-margin-left) { margin-left: 20px; }
   .fids-container:not(.no-margin):not(.no-margin-top) { margin-top: 20px; }
   /* map */
   .fids-container[data-layout-container="map"] {
      height: 942px;
      width: 1188px;
   }
   /* logo */
   .fids-container[data-layout-container="logo"] {
      height: 150px;
      width: 625px;
   }
   /* time */
   .fids-container[data-layout-container="time"] {
      height: 150px;
      width: 543px;
   }
   .time-panel {
      height: 50px;
      margin-top: 35px;
      width: 200px;
   }
   .time-panel > .time-current > span {
      font-size: 50px;
      line-height: 50px;
   }
   /* fids */
   .fids-container[data-layout-container="fids"] {
      height: 1112px;
      width: 800px;
   }
   /* fids-list */
   .fids-container[data-layout-container="fids-list"] {
      height: 802px;
      width: 800px;
   }
   .flight-list-container {
      height: 740px;
   }
   .flight-list-rows {
      padding: 0px 10px;
   }
   .flight-list-rows .flight-list-row > div {
      font-size: 23px;
      line-height: 30px;
      padding-right: 15px;
   }
   .flight-list-rows .flight-list-row > .flr-tail { width: 74px; }
   .flight-list-rows .flight-list-row > .flr-time { width: 84px; }
   .flight-list-rows .flight-list-row > .flr-dep-name { width: 254px; }
   .flight-list-rows .flight-list-row > .flr-fltnr { width: 154px; }
   .flight-list-rows .flight-list-row > .flr-situation { width: 194px; }
   .flight-list-rows > .flight-list-row { 
      height: 40px;
      padding: 5px 0px;
   }
   /* routes */
   .fids-container[data-layout-container="routes"] {
      width: 300px;
      margin-top: 10px;
   }
   .fids-container[data-layout-container="routes"] > .flight-panel {
      height: 50px;
   }
   .fids-container[data-layout-container="routes"] > .route-panel {
      margin-top: 10px;
   }
   .route-map-container {
      padding: 2px;
   }
   .route-panel .route-map {
      height: 181px;
   }
   /* flight-info */
   .fids-container[data-layout-container="flight-info"] .aircraft-photo-container {
      height: 125px;
      margin-top: 10px;
   } 
   .fids-container[data-layout-container="flight-info"] .airline-logo-container {
      height: 50px;
      margin-top: 10px;
   }
   .fids-container[data-layout-container="flight-info"] .flight-details {
      height: 50px;
   }
   .flight-panel > .flight-details {
      font-size: 23px;
      line-height: 50px;
      padding: 0px 10px;
   }
   .flight-panel > .airline-logo-container  > img {
      height: 46px;
   }
   .flight-panel > .aircraft-photo-container, .flight-panel > .airline-logo-container {
      border: 2px solid rgba(255,255,255,.15);
   }
   /* meteo */
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="flight-info"] {
      width: 230px; 
   }
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="routes"], .fids-container[data-layout-container="flight-info"] {
      height: 290px;
   }
   .meteo-panel > .meteo-weather {
      height: 125px;
      margin-top: 10px;
   }
   .meteo-weather > div { width: 158px; }
   .meteo-weather > div > div {
      height: 125px;
      line-height: 125px;
      width: 75px;
   }
   .meteo-weather > div > .symbol {
      font-size: 60px;
      margin-left: 8px;
   }
   .meteo-weather > div > .temperature { font-size: 50px; }
   .meteo-panel > .meteo-description { height: 50px; }
   .meteo-description > .location {
      font-size: 23px;
      height: 50px;
      line-height: 50px;
      margin-top: 10px;
   }
   .meteo-panel > .local-time {
      height: 50px;
      font-size: 37px;
      margin-top: 10px;
      line-height: 50px;
   }
   /* flight info */
   .flight-info-overlay {
      padding: 15px 30px;
   }
   .flight-info-overlay .flight-list-row {
      height: 50px;
      padding: 10px 0px;
   }
   .flight-info-overlay .flight-list-row > div {
      font-size: 30px;
      height: 40px;
      line-height: 40px;
      padding-right: 15px;
   }
   .flight-info-overlay .flight-list-row > .flr-tail { width: 100px; }
   .flight-info-overlay .flight-list-row > .flr-sibt { width: 125px; }
   .flight-info-overlay .flight-list-row > .flr-dep-name { width: 225px; }
   .flight-info-overlay .flight-list-row > .flr-fltnr { width: 175px; }
   .flight-info-overlay .flight-list-row > .flr-airline { width: 300px; }
   .flight-info-situation {
      height: 60px;
      line-height: 60px;
      font-size: 40px;
   }
   /* leaflet */
   .fids-container[data-layout-container="leaflet"] {
      height: 942px;
      width: 1188px;
   }
   .fids-container[data-layout-container="leaflet"] .flight-panel {
      height: 150px;
      margin-top: -150px;
   }
   /* casper logo */
   .casper-logo {
      height: 25px;
      right: 20px;
      top: 20px;
      width: 100px;
   }
}


/* 4K UHD */
@media only screen 
/*and (min-width : 3840px)*/
and (max-width : 7679px) {
   /* styles */
   body {
      height: 2160px;
      width: 3840px;
   }

   .casper-panel-header {
      border-bottom-width: 3px;
      font-size: 50px;
      height: 70px;
      line-height: 70px;
      margin-bottom: 20px;
   }

   .casper-panel-footer {
      border-bottom-width: 3px;
      height: 20px;
   }

   .fids-container:not(.no-margin):not(.no-margin-left) { margin-left: 40px; }
   .fids-container:not(.no-margin):not(.no-margin-top) { margin-top: 40px; }
   /* header */
   .fids-container[data-layout-container="header"] {
      height: 300px;
      width: 2120px;
   }
   /* logo */
   .fids-container[data-layout-container="logo"] {
      height: 300px;
      width: 1000px;
   }
   /* time */
   .fids-container[data-layout-container="time"] {
      height: 300px;
      margin-left: 1px;
      width: 1079px;
   }
   /* map */
   .fids-container[data-layout-container="map"] {
      //height: 1740px;
      width: 2120px;
   }
   .time-panel {
      height: 100px;
      margin-top: 70px;
      width: 400px;
   }
   .time-panel > .time-current > span {
      font-size: 100px;
      line-height: 100px;
   }
   /* fids */
   .fids-container[data-layout-container="fids"] {
      height: 2080px;
      margin-top: -300px;
      width: 1600px;
   }
   /* fids-list */
   .fids-container[data-layout-container="fids-list"] {
      height: 1460px;
      width: 1600px;
   }
   .flight-list-container {
      height: 1370px;
   }
   .flight-list-rows {
      padding: 0px 20px;
   }
   .flight-list-rows .flight-list-row > div {
      font-size: 45px;
      line-height: 60px;
      padding-right: 25px;
   }
   .flight-list-rows .flight-list-row > .flr-tail { width: 140px; }
   .flight-list-rows .flight-list-row > .flr-time { width: 160px; }
   .flight-list-rows .flight-list-row > .flr-dep-name { width: 500px; }
   .flight-list-rows .flight-list-row > .flr-fltnr { width: 300px; }
   .flight-list-rows .flight-list-row > .flr-situation { width: 450px; }
   .flight-list-rows > .flight-list-row { 
      height: 80px;
      padding: 10px 0px;
   }
   /* routes */
   .fids-container[data-layout-container="routes"] {
      width: 600px;
      margin-top: 20px;
   }
   .fids-container[data-layout-container="routes"] > .flight-panel {
      height: 100px;
   }
   .fids-container[data-layout-container="routes"] > .route-panel {
      margin-top: 20px;
   }
   .route-map-container {
      padding: 2px;
   }
   .route-panel .route-map {
      height: 365px;
   }
   /* flight-info */
   .fids-container[data-layout-container="flight-info"] .aircraft-photo-container {
      height: 250px;
      margin-top: 20px;
   }
   .fids-container[data-layout-container="flight-info"] .airline-logo-container {
      height: 100px;
      margin-top: 20px;
   }
   .fids-container[data-layout-container="flight-info"] .flight-details {
      height: 100px;
   }
   .flight-panel > .flight-details {
      font-size: 45px;
      line-height: 100px;
      padding: 0px 20px;
   }
   .flight-panel > .airline-logo-container  > img {
      height: 90px;
   }
   .flight-panel > .aircraft-photo-container, .flight-panel > .airline-logo-container {
      border: 5px solid rgba(255,255,255,.15);
   }
   /* meteo */
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="flight-info"] {
      width: 460px;
   }
   .fids-container[data-layout-container="meteo"], .fids-container[data-layout-container="routes"], .fids-container[data-layout-container="flight-info"] {
      height: 580px;
   }
   .meteo-panel > .meteo-weather {
      height: 250px;
      margin-top: 20px;
   }
   .meteo-weather > div { width: 315px; }
   .meteo-weather > div > div {
      height: 250px;
      line-height: 250px;
      width: 150px;
   }
   .meteo-weather > div > .symbol {
      font-size: 125px;
      margin-left: 15px;
   }
   .meteo-weather > div > .temperature { font-size: 100px; }
   .meteo-panel > .meteo-description { height: 100px; }
   .meteo-description > .location {
      font-size: 45px;
      height: 100px;
      line-height: 100px;
      //margin-top: 20px;
   }
   .meteo-panel > .local-time {
      height: 100px;
      font-size: 75px;
      margin-top: 20px;
      line-height: 100px;
   }
   /* flight info */
   .flight-info-overlay {
      padding: 30px 60px;
   }
   .flight-info-overlay .flight-list-row {
      height: 100px;
      padding: 20px 0px;
   }
   .flight-info-overlay .flight-list-row > div {
      font-size: 60px;
      height: 80px;
      line-height: 80px;
      padding-right: 25px;
   }
   .flight-info-overlay .flight-list-row > .flr-tail { width: 200px; }
   .flight-info-overlay .flight-list-row > .flr-sibt { width: 250px; }
   .flight-info-overlay .flight-list-row > .flr-dep-name { width: 450px; }
   .flight-info-overlay .flight-list-row > .flr-fltnr { width: 350px; }
   .flight-info-overlay .flight-list-row > .flr-airline { width: 700px; }
   .flight-info-situation {
      height: 120px;
      line-height: 120px;
      font-size: 80px;
   }
   /* leaflet */
   .fids-container[data-layout-container="leaflet"] {
      height: 1740px;
      width: 2120px;
   }
   .fids-container[data-layout-container="leaflet"] .flight-panel {
      height: 300px;
      margin-top: -300px;
   }
   /* casper logo */
   .casper-logo {
      height: 50px;
      right: 40px;
      top: 40px;
      width: 200px;
   }
}

/* 8K UHD */
@media only screen 
and (min-width : 7680px) {
  /* Styles */
}

/* iPhone 4 - 5s */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}