/* ------------------------------------------------- */
// Stylesheet for Image banner
/* ------------------------------------------------- */
$banner-bg-filter: url(~SYW_UIKIT_ASSETS/imgs/banners/banner-bg-filter.png);
$banner-bg-white-filter: url(~SYW_UIKIT_ASSETS/imgs/banners/banner-bg-white-filter.png);
$bg-cloud-desktop: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-desktop.svg);
$bg-cloud-tablet: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-tablet.svg);
$bg-cloud-mobile: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-mobile.svg);
$bg-cloud-grey-desktop: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-grey-desktop.svg);
$bg-cloud-grey-tablet: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-grey-tablet.svg);
$bg-cloud-grey-mobile: url(~SYW_UIKIT_ASSETS/imgs/img-cloud-grey-mobile.svg);
$bg-airplaneDotLine: url(~SYW_UIKIT_ASSETS/imgs/banners/bg-airplaneDotLine.svg);


//Banner height controller
.banner__wrapper {
  & {
    height: 620px;
    @include responsive-to('mobile') {
      height:100vh;
      min-height:100vh;
    }
  }
  .banner__content{
    padding-top: 160px;
    @include responsive-to('mobile') {
      padding-top: 100px;
    }
  }
  &--small {
    height: 310px;
    @include responsive-to('tablet') {
      height: 170px;
      min-height: 170px;
      overflow: hidden;
    }
    @include responsive-to('mobile') {
      height: 120px;
      min-height: 120px;
      overflow: hidden;
    }
  }
  &--medium {
    height: 480px;
    @include responsive-to('mobile') {
      height: 240px;
      min-height: 240px;
      overflow: hidden;
    }
  }
  &--large {
    height: 900px;
    @include responsive-to('tablet') {
      height: 880px;
    }
    @include responsive-to('mobile') {
      height:100vh;
      min-height:100vh;
    }
  }
}

//Feature banners container with world map
.feature-container {
  & {
    @extend .clearfix;
    background: no-repeat top center;
    background-size: 970px;

    @include responsive-to('tablet') {
      background-size: 100% auto;
    }
  }
  &__title {
    margin-top: 160px;
    margin-right: 30px;
    margin-left: 30px;
    @include responsive-to('tablet') {
      margin-top: 100px;
      margin-bottom: 60px;
    }
    @include responsive-to('mobile') {
      margin-top: 60px;
      margin-bottom: 40px;
    }
  }
  &__wrapper {
    @extend .clearfix;
    border-bottom: 6px solid $pink;
  }
}

.banner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;

  &__content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &__link {
    color: $white;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.bg-gradient-pink {
  background: #f74e6a; /* Old browsers */
  background: -moz-linear-gradient(top, #f74e6a 0%, #9e2035 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f74e6a 0%,#9e2035 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f74e6a 0%,#9e2035 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f74e6a', endColorstr='#9e2035',GradientType=0 ); /* IE6-9 */
}

.bg-gradient-blue {
  background: #30b7ef; /* Old browsers */
  background: -moz-linear-gradient(top, #30b7ef 1%, #20a1d8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #30b7ef 1%,#20a1d8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #30b7ef 1%,#20a1d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30b7ef', endColorstr='#20a1d8',GradientType=0 ); /* IE6-9 */
}


.gradient {
  & {
    background-size: cover;
    background-repeat: repeat-x;
    background-position: 0 0;
    position: absolute;
    width: 100%;
  }
  &--dark {
    background-image: $banner-bg-filter;
    height: 100%;
  }
  &--light {
    background-image: $banner-bg-white-filter;
    background-size: auto;
    height: 658px;
    @include responsive-to('mobile') {
      background-size: cover;
      height: 66%;
    }
  }
  &--airline {
    & {
      background-image: $bg-airplaneDotLine;
      background-position: bottom right;
      height: 100%;
    }
    @include responsive-to('tablet') {
      background-position: 50% 100%;
    }
    @include responsive-to('mobile') {
      background-position: 30% 100%;
    }
  }
}

.cloud {
  & {
    position: absolute;
    background-repeat: repeat-x;
    width: 100%;
    height: 100px;
    bottom: 0;
  }
  &--white {
    background-image: $bg-cloud-desktop;
    @include responsive-to('tablet') {
      background-image: $bg-cloud-tablet;
    }
    @include responsive-to('mobile') {
      height: 48px;
      background-image: $bg-cloud-mobile;
    }
  }
  &--grey {
    background-image: $bg-cloud-grey-desktop;
    @include responsive-to('tablet') {
      background-image: $bg-cloud-grey-tablet;
    }
    @include responsive-to('mobile') {
      height: 48px;
      background-image: $bg-cloud-grey-mobile;
    }
  }
}

.content__table {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;

  &-cell{
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    color: $white;
  }
}