@font-face {
  font-family: 'Montserrat-Alt';
  src: url(MontserratAlternates-Bold.otf);
}
/*  General Styles  */
* {
  box-sizing: border-box;
}
body {
  height: 100%;
  color: #86c232;
  background-color: transparent;
}

html {
  background: url(images/stone-stack.jpeg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

.title > img {
  max-height: 80px;
  display: inline-block;
  margin-left: 2%;
  -webkit-filter: drop-shadow(3px 3px 4px #000000);
  filter: drop-shadow(3px 3px 4px #000000);
}
h1 {
  font-family: Montserrat-Alt;
}

h2 {
  font-family: Montserrat-Alt;
  display: inline-block;
  font-size: 5vmin;
  vertical-align: bottom;
  text-shadow: 3px 2px 7px #000000;
}
/* Main Content */
.inputBox {
  height: 8vh;
}
#submit_button {
  height: 5vh;
  background-color: #ff7342;
  border: none;
  transition: 0.2s;
  font-weight: bold;
  box-shadow: 1px 2px 10px #000000;
  margin-left: 5px;
}
#submit_button:hover {
  background-color: #dd651d;
}
.title-search-container {
  position: relative;
}

.searchContainer {
  margin: 2vh auto 2vh auto;
  padding: 0;
  /*line-height: 10vh;*/
}

/* ****** START GOOGLE MAP ***** */
.map_div {
  height: 35vh;
  /*margin-bottom: 2vh;*/
  position: relative;
}

#map_display {
  width: 99.7%;
  height: 100%;
  border: 5px #619830b0 ridge;
  box-shadow: 0px 0px 13px 0px #000000;
  /* border-radius: 5px; */
}

.map_div {
  padding-left: 0;
  padding-right: 0;
}
.displayMapError {
  font-size: 3rem;
  color: white;
  background-color: #619830b5;
  /*text-align: center;*/
  vertical-align: middle;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
}
/* ****** END GOOGLE MAP ***** */

/* ****** START CAROUSEL AND NEWS CSS ***** */
.carouselContainer {
  height: 50vh;
  background-color: #619830b5;
  /* border-radius: 1%; */
  /* text-align: center; */
  color: #000;
  box-shadow: 0px 0px 13px 0px #000000;
}
.news {
  height: 50vh;
  background-color: #619830b5;
  /* border-radius: 1%; */
  box-shadow: 0px 0px 13px 0px #000000;
}
.news h1 {
  font-size: 3vmin;
  font-weight: 400;
  color: #fff;
  margin-left: 3%;
}
.newsTitle {
  margin: 0 auto;
}
.newsAuthor {
  color: #e4e4e4;
}
.newsLink {
  font-size: 1.2em;
  color: #9d9d9d;
  font-weight: 500;
}
.newsLink:hover,
.fullArticle a:hover {
  cursor: pointer;
  text-decoration: none;
  color: #ff652f;
}
.newsModalImage {
  width: 100%;
  margin-bottom: 2%;
}

.newsListDisplay {
  background-color: #272727;
  width: 95%;
  height: 40vh;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  overflow-y: auto;
}
.modal-title,
.modal-body p,
.fullArticle {
  color: #272727;
}
.modal-title {
  font-family: Montserrat-Alt;
}
.fullArticle a {
  color: #9d9d9d;
}
.close:hover {
  color: #ff652f;
}
.news,
.carouselContainer {
  margin-bottom: 2vh;
}
.modal-content {
  top: 50vh;
  transform: translateY(-50%);
  border: 3px solid #86c232;
}
@media (min-width: 1180px) {
  .carouselContainer {
    width: 57%;
    position: relative;
    left: 1%;
  }
}

.carousel-control.left,
.carousel-control.right {
  background: none !important;
  filter: none !important;
  outline: 0;
}

.carousel-control {
  opacity: 0.1;
  width: 5%;
}
.carousel-control:hover {
  visibility: visible;
}

/*
div.item {
    margin: 20px;
}
*/

.air-pollution {
  margin: 17px;
}
/* ****** END CAROUSEL AND NEWS CSS ***** */

/* ****** START OF PIE CHART SLIDE ****** */
rect {
  fill: none;
}
svg:not(:root) {
  margin: 20px;
}

#piechart {
  padding-bottom: 3%;
}
/* ****** END OF PIE CHART SLIDE ****** */

/* ****** START OF WEATHER SLIDE ****** */
.displayTempError {
    font-size: 3rem;
    color: white;
    background-color: none;
    text-align: center;
    vertical-align: middle;
    padding-top: 10vh;
    display: flex;
    justify-content: center;
}

#weatherDisplay {
  font-size: 3vmin;
  color: white;
  line-height: initial;
  text-align: left;
  margin-top: 15%;
  /*text-align: center;*/
}
#weatherList {
  list-style: none;
}
#weatherList li {
  line-height: 5vh;
}

@media (min-width: 1180px) {
  #weatherIcon {
    height: 20%;
    width: 15%;
    float: right;
    margin-right: 10%;
  }

  #weatherList {
    display: inline-block;
    padding-left: 12%;
    text-align: left;
  }
}

@media (min-width: 767px) and (max-width: 1179px) {
  #weatherDisplay {
    font-size: 3vmin;
  }

  #weatherIcon {
    width: 15%;
    height: 20%;
    text-align: center;
    float: right;
    padding-right: 5%;
  }

  #weatherList {
    display: inline-block;
    /*padding-left: 0;*/
    /*text-align: center;*/
  }
}

@media (max-width: 767px) {
  #weatherDisplay {
    font-size: 5vmin;
  }

  #weatherIcon {
    width: 15%;
    height: 20%;
    margin-right: 5%;
    text-align: center;
    float: right;
  }

  #weatherList {
    display: block;
    padding-left: 0;
    /*text-align: center;*/
  }
}

/* ****** END OF WEATHER SLIDE ****** */

/* ****** START AIR QUALITY INDEX SLIDE ***** */
#aqi-table {
  margin: 0 auto;
  margin-top: 2%;
  font-size: 2vmin;
}

#info-icon {
    height: 22px;
    float: right;
    margin-right: 5px;
    padding: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.4;
    cursor: pointer;
}
#info-icon:hover {
    opacity: 1;
}

.popUp {
    display: none;
}

.popUpText {
    position: absolute;
    background-color: #efefef;
    padding: 5px;
    border-radius: 5px;
    border: 2px ridge #007305;
    transform: translateX(-50%);
    left: 50%;
    font-size: 2vmin;
    margin-top: 2%;
    animation: fadeIn 0.5s linear;
    width: 80%;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/* ****** END AIR QUALITY INDEX SLIDE ***** */

/* ******START OF CITY AIR POLLUTION SLIDE****** */
.good {
  background-color: #009966;
}

.moderate {
  background-color: #ffde33;
}

.sensitive {
  background-color: #ff9933;
}

.unhealthy {
  background-color: #cc0033;
}

.very-unhealthy {
  background-color: #660099;
}

.hazard {
  background-color: #7e0023;
}
.airContainer {
  height: 50vmin;
  width: 80%;
  border: 2px solid black;
  padding: 2%;
}

#aqi-number-container {
    border: 2px solid black;
    border-radius: 6px;
    text-align: center;
    width: 45%;
    margin: 0px auto;
    margin-bottom: 2%;
    position: relative;
}

#aqiNum {
  font-size: 6vmin;
}

table,
td,
th {
  border: 1px solid black;
  padding: 6px;
  text-align: left;
}
th,
.neutral {
  background-color: #dfdfdf;
  text-align: center;
  font-size: 2vmin;
}
/* ******END OF CITY AIR POLLUTION SLIDE****** */

/* ***** Bootstrap Overrides****** */
#location-input {
  width: 100%;
}
.row {
  margin: auto;
}
.inputDiv {
  padding: 0;
}
.submitButtonDiv {
  padding-left: 5px;
}
/* ******END OF CITY AIR POLLUTION SLIDE****** */

.landscapeCheck {
visibility: hidden;
}

@media (min-width: 1180px) {
  .carouselContainer {
    width: 57%;
    position: relative;
    left: 1%;
  }
}

@media (max-width: 767px) {
  .aqi-container > img {
    margin-top: 20%;
  }
  #weatherDisplay {
    margin-top: 10%;
  }
}

@media (max-width: 375px) {
  #aqi-table,
  .neutral {
    font-size: 3.5vmin;
  }
  #aqi-number-container {
    width: 65%;
  }
  #aqiNum {
    font-size: 8vmin;
  }
  #weatherDisplay {
    margin-top: 25%;
  }
  .air-pollution {
    margin: 10px;
  }
  th,
  .neutral {
    font-size: 3vmin;
  }
  .popUpText {
    font-size: 3vmin;
  }
}

@media screen and (max-width: 991px) and (orientation:landscape) {
    body>.container{
        visibility: hidden;
    }
    
    .landscapeCheck{
        visibility: visible;
        width:100%;
        height:100%;
        position: absolute;
        top: 25%;
        left: 25%;
    }
    
    .landscapeCheck>h2{
        color: red;
    }
}