/*Animations for the illustations*/
.eye, .pupil {
  transform-origin: 0% 5%;
  animation: blink 6s infinite;
  animation-timing-function: ease-in-out; }

@keyframes blink {
  from {
    transform: scaleY(1); }
  4% {
    transform: scaleY(0); }
  8%,100% {
    transform: scaleY(1); } }
.sun-glow {
  transform-origin: 30.75% 30.75%;
  animation: sunglow 4s infinite; }

@keyframes sunglow {
  0% {
    opacity: 0;
    transform: scale(0.2); }
  25% {
    opacity: .7;
    transform: scale(1); }
  50% {
    opacity: 0;
    transform: scale(1); }
  100% {
    opacity: .7;
    transform: scale(0.2); } }
.sun-rays {
  transform-origin: 26.56% 34.33%;
  animation: sunRays 18s infinite linear; }

@keyframes sunRays {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.cloud-front {
  animation: cloudFront 4s infinite;
  animation-timing-function: ease-in-out; }

@keyframes cloudFront {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(20px); }
  100% {
    transform: translateX(0px); } }
.cloud-back {
  animation: cloudBack 4s infinite;
  animation-timing-function: ease-in-out;
  aimation-delay: 2s; }

@keyframes cloudBack {
  0% {
    transform: translateX(-20px); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-20px); } }
.lightning {
  animation: lightning 3s infinite;
  animation-timing-function: ease-in-out; }

@keyframes lightning {
  0% {
    transform: translateY(-10px); }
  50% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-10px); } }
.droplets {
  animation: droplets 3s infinite;
  animation-timing-function: ease-in-out; }

@keyframes droplets {
  0% {
    transform: translateY(-50px); }
  100% {
    transform: translateY(0px); } }
html, body {
  width: 100%;
  height: 100%; }

body {
  background: #F8F9FA;
  font-family: 'Roboto';
  font-weight: 500;
  color: #ffffff;
  font-size: 16px; }

h1 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px; }

h2 {
  font-size: 16px;
  margin-bottom: 24px; }

h3 {
  font-weight: 400; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px; }

.powered {
  display: flex;
  align-items: center;
  height: 32px;
  width: 33.33%;
  justify-content: flex-end;
  text-align:right
}
  .powered p {
    color: black;
    font-size: 9px;
    opacity: .3; }
  .powered img {
    height: 100%;
    width: auto; }

/*Landing Page*/
.error {
  display: block;
  background: #FFB6C5;
  width: 100%;
  position: fixed;
  bottom: -200px;
  color: white;
  text-align: center;
  padding: 16px 0; }

.slideup {
  bottom: 0px !important;
  transition: all .5s; }

input[type=text] {
  background: transparent;
  border-bottom: 1px dashed black;
  border-top: none;
  border-left: none;
  border-right: none;
  color: black;
  font-size: 20px;
  outline: none;
  width: 80px;
  margin-right: 8px; }

::placeholder {
  color: black;
  opacity: .3;
  /* Firefox */ }

.grid {
  display: grid !important; }

.header-wordmark {
  text-decoration: none;
  color: black;
  font-family: 'Roboto Slab', serif; }

#logo-icon {
  margin-bottom: 32px; }

.landing {
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: -32px; }
  .landing span {
    /*background:rgba(200,198,60,.4);*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px; }

.enter-button {
  background: white;
  cursor: pointer;
  width: 200px;
  height: 32px;
  font-size: 16px;
  border-radius: 16px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .6s;
  border-radius: 19px;
  margin-top: 32px; }

.enter-button:hover {
  box-shadow: 0 10px 8px 0 rgba(47, 71, 189, 0.3);
  transition: all .3s; }

.enter-button:active {
  box-shadow: 0 7px 12px 0 rgba(47, 71, 189, 0.1); }

/* Results Page*/
.results {
  display: none;
  /*display:grid;*/
  padding: 0px 32px 32px 32px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'card card' 'five-day conditions';
  grid-column-gap: 32px; }

.card-wrap {
  display: grid;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2e46f7+0,b9efff+100 */
  background: #2e46f7;
  /* Old browsers */
  background: -moz-linear-gradient(top, #2e46f7 0%, #b9efff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #2e46f7 0%, #b9efff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #2e46f7 0%, #b9efff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e46f7', endColorstr='#b9efff',GradientType=0 );
  /* IE6-9 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 'current current current current' 'stage stage stage stage' 'hourly hourly hourly hourly';
  grid-column-gap: 16px;
  grid-area: card;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 24px 0 rgba(84, 180, 238, 0.7);
  margin-bottom: 32px; }

.current {
  grid-area: current; }

.search-wrap {
  width: 33.33%; }

.search {
  display: flex;
  background: white;
  cursor: pointer;
  height: 32px;
  grid-area: search;
  width: 32px;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  justify-self: right;
  opacity: .2;
  transition: all .6s; }

.search-wrap:hover > .search {
  opacity: 1;
  transition: all .3s;
  box-shadow: 0 10px 8px 0 rgba(47, 71, 189, 0.3); }

.current-time {
  opacity: .5;
  margin-bottom: 8px; }

.current-temp {
  font-size: 72px; }

.center-stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
  margin-top: -64px; }

.current-weather {
  font-weight: 400; }

.current-illustration {
  display: flex;
  width: 200px;
  height: 180px;
  justify-self: center;
  align-items: center;
  justify-content: center; }
  .current-illustration img {
    width: 100%; }

.hourly {
  /*background:orange;*/
  display: flex;
  grid-area: hourly;
  overflow: scroll;
  margin-bottom: 0px; }

.hourly_cell {
  background: transparent;
  display: flex;
  flex-direction: column;
  margin-right: 16px;
  align-items: center;
  min-width: 65px; }

.hourly_cell_time {
  margin-bottom: 8px; }

.hourly_cell_image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  margin-bottom: 8px; }
  .hourly_cell_image img {
    width: 100%; }

.conditions, .five-day {
  border-radius: 5px;
  padding: 16px 0px 0px 0px; }

.today {
  background: white;
  color: #000000;
  grid-area: today; }

.today-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px; }

.today_cell {
  /*background:yellow;*/ }

.today_cell_image {
  height: 40px;
  width: 40px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .today_cell_image img {
    width: 100%; }

.today_cell_title {
  font-weight: 400;
  opacity: .5;
  margin-bottom: 8px; }

.conditions h3, .five-day h3 {
  color: rgba(0, 0, 0, 0.3); }
.conditions h2, .five-day h2 {
  font-family: 'Roboto Slab', serif; }

.five-day {
  color: #000000;
  grid-area: five-day; }

.five-day-wrap {
  max-height: 120px;
  display: flex; }

.five-day_cell {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 65px;
  margin-right: 16px; }
  .five-day_cell h3, .five-day_cell .five-day_cell_image {
    margin-bottom: 16px; }

.five-day_cell_image {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .five-day_cell_image img {
    width: 100%; }

.conditions {
  color: black;
  width: 100%;
  gird-area: conditions; }

.conditions-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px; }

.conditions-cell {
  display: flex;
  flex-direction: row; }
  .conditions-cell h3 {
    width: 74px; }

@media only screen and (max-width: 728px) {
  header {
    padding: 16px; }

  .results {
    grid-template-columns: 1fr;
    grid-template-areas: 'card' 'five-day' 'conditions';
    padding: 16px; }
    .results h2 {
      margin-bottom: 24px; }

  .center-stage {
    margin-top: 0px; }

  .five-day_cell h3 {
    margin-bottom: 0px; }

  .five-day_cell_image {
    margin-bottom: 0px; }

  .card-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'current current' 'stage stage' 'hourly hourly';
    padding: 16px 0px; }

  .five-day {
    margin-bottom: 32px; }

  .five-day-wrap {
    flex-direction: column;
    max-height: 100%; }

  .five-day_cell {
    width: 100%;
    flex-direction: row;
    justify-content: space-between; }

  .current {
    padding-left: 16px; }

  .search {
    margin-right: 16px; } }
/*This will be used in the case study*/
object {
  display: block; }

.illustration-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #f2f2f3;
  width: 100%;
  height: 10000px; }

/*# sourceMappingURL=style.css.map */