/* Title: Responsive Stylesheet */
/* Author: Erik Straight        */
/* Date: 7/18/16                */

@media (max-width: 900px) {
  body.forecast #week .dayDetails.revealed .timeline-container-scroll {
    overflow: scroll;
  }
}

@media (max-width: 800px) {
  body.forecast .day .tempRange {
    width: 60%;
  }
  body.forecast .day .name {
    margin-right: 20px;
  }
  body.forecast #header #searchForm {
    margin: 0 0 0 10px;
  }
  body.forecast #searchForm #savedLocations {
    margin:0 auto;
    left: 0;
    right:0;
    width: 95%;
    position: fixed;
    top: 90px;
  }
  .dayDetails .timeline-container-scroll .timeline_container .timeline {
    margin-left: 10px;
  }

  #currentDetailsWrapper .gradient-scroll {
    display: inline-block;
  }
}

@media (max-width: 700px) {
  body.forecast #timeline {
    margin-left: 10px;
  }
  body.forecast #currentDetailsWrapper {
    padding: 0;
    text-align: center;
    overflow: auto;
    /* height: 55px; */
  }
}

/* Mobile styles for nav */
@media (max-width: 815px) {
  nav {
    font-size: 15px;
  }
  nav a {
    padding: 1.2%;
  }
}

@media (max-width: 500px) {
  nav > .inner {
    width: auto;
  }
}

@media (max-width: 335px) {
  nav .inner a {
    padding: 1%;
  }
}

@media (max-width: 600px) {
  body.forecast #currentDetails {
    left: 0;
  }
  #searchForm > input {
    width: 65%;
  }
}

@media (max-width: 500px) {
  #app-page #quotes-section ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }
  #app-page #quotes-section ul li {
    padding: 5px 0;
  }
  body.forecast #header {
    height: auto;
    padding-bottom: 5px;
  }
  body.forecast #header #searchForm {
    width: auto;
    margin: 0;
    text-align: center;
  }
  .dark-sky-link {
    display: none;
  }
  body.forecast #nextHourClear {
    margin: 0 10px;
  }
  body.forecast .day .tempRange {
    width: 45%;
  }
  body.forecast .day .name {
    margin-right: 10px;
  }
  body.forecast #wobbleContainer {
    width: 63% !important;
    margin-bottom: 30px;
  }
  body.forecast #wobbleContainer #wobbleCanvas {
    width: 100% !important;
  }
  body.forecast #mapControls .tabs {
    flex-direction: column;
    width: 100%;
  }
  body.forecast #mapControls .tabs a {
    height: 42px;
    line-height: 42px;
    margin: 0;
    border-radius: 0;
    border-bottom: 0;
  }
  body.forecast #mapControls .tabs a:last-child {
    border-bottom: 1px solid #cecece;
  }
  body.forecast .mapControlsItem:last-child {
    display: flex;
    flex-direction: column;
  }
  body.forecast #mapControls .globe {
    margin-right: 15px;
    margin: 20px 0 20px 15px;
    font-size: 20px;
  }
  body.forecast #mapControls .globe img {
    width: 30px;
    height: 30px;
  }
  body.forecast #mapControls .time {
    margin-left: 25px;
  }
  body.forecast #mapControls .timeSelects {
    margin: 0 25px;
  }
  #footer-section-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #footer-section-container .footer-section.contribute p {
    justify-content: center;
    font-size: 46px;
  }
  #footer-section-container .footer-section h4 {
    font-size: 26px;
  }
  #footer-section-container .footer-section.contribute ul li a {
    color: #fff;
    font-size: 24px;
    text-decoration: underline;
  }
  #social-media-footer {
    position: initial;
    justify-content: center;
    margin-top: 25px;
  }
  #social-media-footer a:first-child {
    margin-left: 20px;
  }
  #social-media-footer img {
    opacity: .5;
  }
  #social-media-footer a {
    margin: 0 20px;
  }
  #footer-section-container {
    border-top: 0;
  }
  #footer-section-container .footer-section {
    border-right: 0;
    border-bottom: 1px solid #4a4a4a;
    width: 85%;
    padding: 15px 0;
    text-align: center;
    
  }
  #footer-section-container .footer-section ul li {
    margin-bottom: 8px;
  }
  
  #footer #footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #footer #footer-links li {
    margin: 15px 0;
  }

  /* Show/hide units depending on mobile */
  #header .options {
    display: none;
  }
  #footer #units-container {
    display: initial;
  }

  /* Responsive styles for day.ejs */
  #main #currentDetails {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  #main #currentDetails div.section {
    width: auto;
    padding: 5px 0;
  }
  body.day #header .backToForecast {
    position: static;
      text-align: center;
      margin: 20px 0;
      font-size: 20px;
  }
  body.day .title a {
    margin: 20px 0;
  }
  body.day .plot {
    left: -3px;
  }
  /* End day.ejs */
}
@media (max-width: 375px) {

  #header .options {
    position: static;
    text-align: center;
  }
}
/* Styles for iPhone 4 and 5 */
@media (max-width: 370px) {
  #footer #footer-links {
    margin: 0 20px;
  }
}

@media (max-width: 350px) {
  nav a.twitter {
    display: none;
  }

  nav .inner a {
    padding: .5%;
  }
}