@import "../../../assets/style/theme";
@import "../../../assets/style/all";

:host {
  display: block;

  & > div:not(.hero) {
    margin: 40px auto;
  }

}

.splash-container{
  background-color:#ffffff !important;
  width:100%;
  margin:0 !important;
  padding-top: 40px;
  padding-bottom: 40px;
}

.footer{
  margin-top: 0 !important;
}

.hero {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-image: url("/assets/img/splash/bricks.jpg");
  background-position: center center;
  background-size: cover;
}

hr {
  margin: 40px;
}

.heading, h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin: 50px 0 60px;
}

.fancy-list li {
  margin-bottom: 20px;
}

.find-your-city {
  text-align: center;

  md-input-container {
    display: block;
    max-width: 400px;
    margin: 50px auto;
  }

}

.set-it-up {
  margin-bottom: 50px;
}

.flags {
  align-self: center;
  border-radius: 2px;
  max-width: 900px;
  margin: auto;

  .flag {
    cursor: pointer;
    img {
      border: 1px solid mat-color($mat-grey, 700);
      width: 180px;
    }
  }

}

md-grid-tile a {
  margin: 10px;
}

a img, .thumbnail {
  width: 100%;
}

main {
  overflow-y: auto;
}

.lg {
  font-size: 24px;
}

.feature-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.feature {
  flex-direction: column;
  text-align: center;
  max-width: 28%;
  margin-bottom: 50px;

  @include mq-xs() {
    width: 90%;
    max-width: 90%;
    margin-bottom: 15px;
  }

  .feature-description{
    @include mq-xs() {
      display: none;
    }
  }


  md-icon {
    font-size: 2.5em;
    margin: 15px;
    color: mat-color($civ-primary);
    @include mq-xs() {
      font-size: 1em;
      margin: 0 0 5px;
    }
  }

  .title {
    min-height: 62px;
    margin: 15px 0 15px;

    @include mq-xs() {
      min-height: 10px;
    }

  }

}

.video-row{
  display: inline-flex;
  flex-direction:row;
  justify-content: space-around;
  flex:1 1 100%;
  width:100%;

  @include mq-sm-mx() {
      flex-direction:column;
    }


  .video, .video-text{
    flex-basis:48%;
    max-height: 340px;
  }

   .video{
    min-height: 315px;

    @include mq-sm-mx() {
      text-align:center;
      flex-basis:100%;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }

  .video-text{
    @include mq-sm-mx() {
      flex-basis:0%;
      display: none;
      text-align:center;
    }
  }

}

.news{
  display:flex;
  flex-direction: row;
  align-items:center;

  .news-link{
    flex-basis:18%;
    margin: 0 10px;
  }
}

.blog-section{
  display: inline-flex;
  flex-direction:row;

  @include mq-sm() {
    flex-direction: column;
  }
  @include mq-xs() {
    flex-direction: column;
  }
}

.blog-text, .blog-image {
  flex-basis: 48%;

  @include mq-sm(){
    flex: 1 1 100%;
  }
  @include mq-xs(){
    flex: 1 1 100%;
  }
}

.blog-image{
  max-width: 600px;
  margin: auto;
}

.blog-text {
  padding: 0 20px;

  h3 {
    text-align: left;
    margin: 0;
  }
}

.button-card{
  display: flex;
  flex: 1 1 33%;
  margin: auto;

  .mat-card{
    margin: auto;
  }
}

.title{
  font-weight: 200;
  font-size: 1.25em;
  margin: 0px auto 15px;
}

.button-card md-card{
  margin: auto;
}