/* Desktops and laptops ----------- */

@media only screen and (min-width: 2560px) {
  /* .videoStationCloseBtn.w3-display-topright {
    top: 8%;
    font-size: 2.5em;
    right: -3.5%;
  } */

  .stationWrapper {
    padding-top: 55px;
  }

  .vote {
    margin-top: 55px;
  }

  .no-answer {
    margin-top: calc(55px + 3.71vw);
  }

  .indicationDiv,
  .indicationDivSelected {
    font-size: 16px;
  }

  .indicationDivText {
    font-size: 14px;
  }

  #stationTwoWrapper.w3-modal-content video {
    padding-top: 21px;
  }

  .stationWrapper.w3-modal-content video {
    padding-top: 21px;
  }
}

@media screen and (min-width: 2560px) and (max-height: 1440px) {
}

@media screen and (min-width: 1920px) and (max-height: 1440px) {
}

@media only screen and (max-width: 1800px) {
}

@media only screen and (max-width: 1700px) {
  .w3-modal-content video.notSavedRight {
    margin-top: 73px;
  }

  .w3-modal-content video {
    padding-top: 73px;
  }

  /* .videoStationCloseBtn.w3-display-topright {
    top: 12%;
  } */

  .referencesLink {
    top: 18%;
  }

  .stationWrapper {
    padding-top: 90px;
  }

  .x-large {
    width: 85% !important;
    padding-top: 3%;
  }

  .vote {
    margin-top: 90px;
  }

  .no-answer {
    margin-top: calc(90px + 3.71vw);
  }
}

@media only screen and (max-width: 1600px) {
  .referencesLink {
    height: 12%;
    top: 19%;
  }

  /* .videoStationCloseBtn.w3-display-topright {
    top: 12%;
    right: -0.5%;
    font-size: 2em;
  }

  .videoCloseBtn.w3-display-topright {
    top: 11%;
  } */

  .w3-modal-content video {
    padding-top: 69px;
  }

  .w3-modal-content video.notSavedRight {
    margin-top: 79px;
  }
}

@media screen and (min-width: 1536px) and (max-height: 722px) {
  .caseStudies {
    top: 67%;
  }

  .healthStation {
    top: 67%;
  }
}

@media screen and (min-width: 1455px) and (max-height: 766px) {
  /* .w3-display-topright {
    position: absolute;
    color: #333333;
    right: 5%;
    top: 7.5%;
    font-size: 22px;
  } */

  .healthStation {
    height: 228px;
    width: 136px;
    bottom: 16%;
    left: 57%;
  }

  .hearOurStoryLink {
    bottom: 9%;
    width: 100%;
    left: 0;
  }
}

@media only screen and (max-width: 1440px) {
  .referencesLink {
    height: 12%;
    top: 24%;
  }

  /* .videoStationCloseBtn.w3-display-topright {
    top: 15%;
    right: -0.5%;
    font-size: 2em;
  } */

  .w3-modal-content video {
    padding-top: 70px;
  }
}

@media screen and (max-height: 768px) {
}

@media only screen and (max-width: 1366px) and (max-height: 768px) {
  .stationWrapper {
    padding-top: 75px;
  }
  /* .videoStationCloseBtn.w3-display-topright {
    top: 12%;
    right: -0.5%;
  } */
  .referencesLink {
    height: 13%;
    top: 19%;
  }

  .indicationDivTabLinkSelected {
    font-size: 10px;
  }
  .indicationDivTabLink {
    font-size: 10px;
  }
}

@media only screen and (max-width: 1300px) {
  .leaflet {
    height: 116px;
    width: 116px;
    top: 63%;
    left: 14%;
  }

  .hsvideo {
    height: 117px;
    width: 117px;
    top: 63%;
    left: 44%;
  }

  .goOnline {
    height: 117px;
    width: 118px;
    top: 63%;
    left: 74%;
  }
}

@media only screen and (max-width: 1200px) {
  .franVideo {
    height: 5%;
  }

  .sofiaVideo {
    height: 5%;
  }

  .annaVideo {
    height: 5%;
  }

  .adamVideo {
    height: 5%;
  }

  .ishanVideo {
    height: 5%;
  }

  .slideIndicator {
    bottom: 23px;
  }

  .indicationDivText {
    width: 35%;
  }

  .indicationDivSelected {
    right: 35% !important;
  }
}

@media only screen and (max-width: 1200px) {
  .indicationDivText {
    width: 38%;
  }

  .indicationDivSelected {
    right: 38% !important;
  }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .navLinks img {
    height: 18px;
  }
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .indicationDiv,
  .indicationDivSelected {
    top: 16%;
    font-size: 12px;
  }

  .caseStudies,
  .healthStation {
    top: 76%;
  }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .videoShows {
    min-height: auto;
    top: 2.5%;
  }
}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .navLinks img {
    height: 19px;
  }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .caseStudies,
  .healthStation {
    top: 77%;
  }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .videoShows {
    min-height: auto;
    top: 2.5%;
  }
}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 28%;
  }
  .indicationDivText {
    width: 53%;
  }

  .indicationDivSelected {
    right: 53% !important;
  }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 46%;
  }

  .indicationDivText {
    width: 41%;
  }

  .leaflet {
    height: 92px;
    width: 91px;
    top: 63%;
    left: 14%;
  }

  .hsvideo {
    height: 90px;
    width: 88px;
    top: 63%;
    left: 44%;
  }

  .goOnline {
    height: 93px;
    width: 93px;
    top: 63%;
    left: 74%;
  }

  .franVideo {
    top: 76%;
  }

  .sofiaVideo {
    top: 76%;
  }

  .annaVideo {
    top: 76%;
  }

  .adamVideo {
    top: 76%;
  }

  .ishanVideo {
    top: 76%;
  }

  .slideIndicator {
    bottom: 20px;
  }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
  .videoShows {
    min-height: auto;
  }
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 28%;
  }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 46%;
  }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .videoShows {
    min-height: auto;
  }
  .referencesLink {
    height: 15%;
  }
  /* .videoStationCloseBtn.w3-display-topright {
    top: 21%;
    right: -0.5%;
    font-size: 2em;
  } */
}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 28%;
  }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .caseStudies,
  .healthStation {
    top: 46%;
  }

  /* .videoStationCloseBtn.w3-display-topright {
    top: 21%;
    right: -0.5%;
    font-size: 2em;
  } */
}

@media only screen and (max-width: 760px) {
  .welcome-screen__top-container,
  .welcome-screen__bottom-container {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;
  }
  .welcome-screen__top-container {
    padding-top: 5vmin;
  }
}

@media only screen and (max-width: 600px) {
  #boxesWrap img {
    margin: 20px auto !important;
  }

  .welcome-screen__buttons {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 90%;
  }

  .welcome-screen__explore-button {
    margin: 3vmin 0 0;
  }
}