/*
Hompage Specific Styling.	
*/
/*
Global Variables

@import this file at the top of each page
template file to make variables available.
*/
/*
Mixins

Add mixins to any css page using @include

e.g.
.element{
	@include transition( background .2s ease-out )
}
*/
section.banner {
  margin-bottom: 30px;
}
@media screen and (max-width: 800px) {
  section.banner {
    margin-bottom: 0px;
    overflow: hidden;
  }
}
section.banner .block-inner {
  position: relative;
  z-index: 99;
  padding-bottom: 100px;
  padding-top: 30px;
}
@media screen and (max-width: 800px) {
  section.banner .block-inner {
    padding-bottom: 15px;
  }
}
section.banner .banner-text {
  width: 50%;
  max-width: 540px;
  font-size: 22px;
}
@media screen and (max-width: 1500px) {
  section.banner .banner-text {
    max-width: 430px;
    font-size: 18px;
  }
}
@media screen and (max-width: 1400px) {
  section.banner .banner-text {
    max-width: 400px;
  }
}
@media screen and (max-width: 800px) {
  section.banner .banner-text {
    width: 500px;
    width: 100%;
  }
}
section.banner .banner-text .primary-heading {
  max-width: 400px;
  font-size: 56px;
}
@media screen and (max-width: 1400px) {
  section.banner .banner-text .primary-heading {
    font-size: 44px;
  }
}
@media screen and (max-width: 800px) {
  section.banner .banner-text .primary-heading {
    font-size: 34px;
  }
}

.city {
  position: absolute;
  right: 0px;
  width: 900px;
  height: 330px;
  bottom: 0px;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 1780px) {
  .city {
    overflow-x: hidden;
  }
}
@media screen and (max-width: 1250px) {
  .city {
    width: 700px;
    height: 257px;
  }
}
@media screen and (max-width: 800px) {
  .city {
    position: relative;
    right: 0;
    overflow: visible;
  }
}
@media screen and (max-width: 600px) {
  .city {
    height: 190px;
  }
}
.city #city {
  position: absolute;
  right: -30px;
  top: 0px;
  z-index: 3;
  width: 900px;
  height: 330px;
}
@media screen and (max-width: 1350px) {
  .city #city {
    right: -110px;
  }
}
@media screen and (max-width: 1250px) {
  .city #city {
    width: 700px;
    height: 257px;
    right: -70px;
  }
}
@media screen and (max-width: 1080px) {
  .city #city {
    right: -200px;
  }
}
@media screen and (max-width: 800px) {
  .city #city {
    right: -70px;
  }
}
@media screen and (max-width: 600px) {
  .city #city {
    width: 500px;
    height: auto;
    right: auto;
  }
}
.city .background {
  position: absolute;
  right: -10px;
  top: 52px;
  opacity: 0;
  width: 900px;
  height: 330px;
}
.city .outline path {
  stroke: none;
  fill: #236092;
}
.city #cabin, .city #skyscraper, .city #townhouse, .city #school, .city #shop, .city #cloud, .city #background, .city #background_1_ {
  opacity: 0;
}

.line-wrap {
  position: absolute;
  right: 865px;
  bottom: 0px;
  opacity: 0;
}
@media screen and (max-width: 1350px) {
  .line-wrap {
    right: 785px;
  }
}
@media screen and (max-width: 1250px) {
  .line-wrap {
    right: 627px;
    bottom: -1px;
  }
}
@media screen and (max-width: 1080px) {
  .line-wrap {
    right: 427px;
  }
}
@media screen and (max-width: 800px) {
  .line-wrap {
    right: 660px;
    bottom: 13px;
  }
}
@media screen and (max-width: 600px) {
  .line-wrap {
    right: 400px;
    bottom: 18px;
  }
}
@media screen and (max-width: 500px) {
  .line-wrap {
    right: 300px;
  }
}
.line-wrap svg {
  position: absolute;
  bottom: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  right: 0px;
}

.why-graphic svg {
  width: 170px;
  height: 150px;
}
.why-graphic svg#drop {
  animation: 0.5s linear 1s infinite drop;
}
.why-graphic svg#drop.visible {
  animation: 0.5s linear 1s forwards drop;
}
.why-graphic svg#drop.hover {
  animation: 0.5s linear 1s forwards drop;
}

@keyframes dash {
  0% {
    stroke-dasharray: 300;
  }
  25% {
    opacity: 1;
  }
  100% {
    stroke-dasharray: 0;
  }
}
@keyframes dashalt {
  0% {
    opacity: 0;
    fill: rgba(35, 96, 146, 0);
    stroke-dashoffset: 700;
  }
  40% {
    fill: rgba(35, 96, 146, 0);
    opacity: 1;
  }
  80% {
    fill: #236092;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #236092;
    stroke: rgba(35, 96, 146, 0);
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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