@import "normalize";
//@import "fonts";
@import "foundation/settings";
@import "foundation";
@import "foundation/functions";

$install-button-bg-color: #6fc13c;

.top-section {
  margin-top: 4rem;

  object  {
    height: 2.5rem;
  }
}

.section {
  @include panel($bg: rgba(255,255,255,0.9));
//  margin-top: 1rem;
//  background-color: $white;
}

@mixin background_url($url) {
  background: url($url) center top no-repeat white;
}

.background {
  @media only screen and (max-width : 768px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_768.jpg')
  }

  @media only screen and (min-width : 768px) and (max-width : 1024px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_1024.jpg')
  }

  @media only screen and (min-width : 1025px) and (max-width : 1280px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_1280.jpg')
  }

  @media only screen and (min-width : 1281px) and (max-width : 1360px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_1280.jpg')
  }

  @media only screen and (min-width : 1361px) and (max-width : 1440px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_1440.jpg')
  }

  @media only screen and (min-width : 1441px) and (max-width : 1680px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_1680.jpg')
  }

  @media only screen and (min-width : 1681px) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg.jpg')
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_ipad_1024.jpg')
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    @include background_url('https://polidea-build-artifacts.s3.amazonaws.com/release-resources/img/jenkins_bg_ipad_768.jpg')
  }
}

.installation-panel {
  @media #{$medium-up} {
    padding-right: 2.0rem;
  }
}

.app-icon {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.icon-margin {
  @media #{$small-up} {
    margin-bottom: 2rem;
  }
  @media #{$medium-up} {
    margin-bottom: 0rem;
  }
}

.no-resize {
  @media #{$small-up} {
    min-width: 3rem;
    min-height: 3rem;
  }
  @media #{$medium-up} {
    max-width: 5rem;
    max-height: 5rem;
  }
}

.app-icon-column {
  @include grid-column();
}

.install-button {
  @include button($bg: $install-button-bg-color, $full-width: true, $padding: rem-calc(8));

  font-size: rem-calc(20);
  margin-bottom: 0;
  @media #{$medium-up} {
    margin-top: 1rem;
  }
}

.center-wrapper {
  position: relative;
}

.whats-new {
  @include label($text-size: rem-calc(18));
  background-color: transparent;
  color: $black;
}

.whats-new-list-element {
  margin-left: 0.5rem;
}

.whats-new-list-label {
  @include label($text-size: rem-calc(18));
  background-color: transparent;
  color: $black;
}

.whats-new-section {
  padding-left: 1rem;
}

.inner-element {
  @media #{$medium-up} {
    height: 5rem;
  }
}

.app-name-wrapper {
  @media #{$medium-up} {
    margin-top: 1rem;
  }

  span {
    background-color: transparent;
    color: $black;
  }
}

.title {
  @include label($text-size: rem-calc(19));
}

.version {
  @include label($text-size: rem-calc(13));
}

.password-button {
  @include button($bg: $install-button-bg-color, $full-width: true, $padding: rem-calc(8));
  font-size: rem-calc(20);

  margin-bottom: 0.5rem;
}

.password-inner-element {
  @media #{$medium-up} {
    min-height: 5rem;
  }
}