<commit_before>@require 'config'

#headerGfw
  height 0

.home-slider-container
  height 230px

.home-nav
  transform translate(-50%, 0)
  position absolute
  z-index 5000
  bottom 50px
  left 50%
  & a
    text-decoration none
  & h2
    padding 10px 20px 10px 50px
    text-transform uppercase
    border-radius 50px
    background white
    font-weight 300
    margin 0
  & .gfw-btn
    margin-left 10px
    line-height 40px
    font-weight 500
    height 38px

.home-slider
  position relative
  padding 0
  margin 0
  top 0
  & .inner
    margin 0 auto
    height 100%
    width 100%
  & .attribution-link
    display none
  & aside
    background rgba(255, 255, 255, 0.75)
    padding 15px 50px 15px 15px
    position absolute
    display block
    width 100%
    bottom 0
    left 0
    & h2, h3
      text-transform uppercase
      margin 0
    & h2
      display inline-block
      font-weight 400
      line-height 35px
      font-size 35px
    & h3
      font-weight 300
      line-height 15px
      font-size 15px
  & .slide-link
    text-transform uppercase
    text-decoration none
    background $darkGray
    display inline-block
    position absolute
    font-size 30px
    color white
    height 100%
    width 44px
    right 0
    top 0
    &:hover
      background $gfwBlue
    & .mobile-show
      transform translate(-50%, -50%)
      position absolute
      left 50%
      top 50%
  & .slide
    background-position center
    background-size cover
    height 230px
    width 100%
    & > a
      color inherit
      outline none
    &.slide1
      background-image url('images/slide-gfwwater.png')
    &.slide2
      background-image url('images/slide-philadelphia-skyline.jpg')
    &.slide3
      background-image url('images/slide-spring.jpg')
    &.slide4
      background-image url('images/aqueduct-water-risk.png')
  & .slick-dots
    position absolute
    list-style none
    right 20px
    padding 0
    margin 0
    top 20px
    & li
      display inline-block
      padding 5px 10px
      &.slick-active button
        transform scale(2)
        opacity 1
    & button
      transition all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95)
      box-shadow 0px 1px 2px rgba(0,0,0,0.25)
      text-indent -10000px
      border-radius 50%
      background white
      cursor pointer
      outline none
      border none
      opacity 0.8
      height 8px
      width 8px
      padding 0
      &:hover
        transform scale(2)
        opacity 1

.gfw-water-logo
  background url('images/GFW_Water_logo.png') no-repeat center
  background-size 90px
  position absolute
  height 90px
  width 90px
  z-index 5
  left 20px
  top 0
  &:after
    background url('images/beta.png')
    position absolute
    display block
    bottom -5px
    height 18px
    width 30px
    right -5px
    content ''

@media (min-width: 1400px)
  .home-slider .inner
    max-width 1200px
    width 75%

@media (min-width: 850px)
  #headerGfw
    height 34px
  .home-slider
    & .attribution-link
      background rgba(200, 200, 200, 0.9)
      position absolute
      padding 5px 10px
      font-size 12px
      display block
      bottom 0
      left 0
    & .slide
      height 620px
    & .slick-dots
      bottom 20px
      top auto
    & .inner
      max-width 1024px
      width 95%
    & aside
      transform translate(0, -50%)
      background none
      bottom auto
      width auto
      padding 0
      top 50%
      & h2
        background rgba(255, 255, 255, 0.75)
        padding 10px 5px 6px
        line-height 61px
        font-size 61px
      & h3
        background rgba(255, 255, 255, 0.75)
        padding 10px 5px 5px
        line-height 31px
        font-size 31px
    & .slide-link
      position relative
      padding 8px 30px
      font-size 17px
      height auto
      width auto
      right auto
      top auto
  .home-slider-container
    min-height 620px<commit_msg>Updating main.styl css<commit_after>@require 'config'
@require 'topNavigation.styl'
@require 'footerShare.styl'

#headerGfw
  height 0

.home-slider-container
  height 230px

.home-nav
  transform translate(-50%, 0)
  position absolute
  z-index 5000
  bottom 50px
  left 50%
  & a
    text-decoration none
  & h2
    padding 10px 20px 10px 50px
    text-transform uppercase
    border-radius 50px
    background white
    font-weight 300
    margin 0
  & .gfw-btn
    margin-left 10px
    line-height 40px
    font-weight 500
    height 38px

.home-slider
  position relative
  padding 0
  margin 0
  top 0
  & .inner
    margin 0 auto
    height 100%
    width 100%
  & .attribution-link
    display none
  & aside
    background rgba(255, 255, 255, 0.75)
    padding 15px 50px 15px 15px
    position absolute
    display block
    width 100%
    bottom 0
    left 0
    & h2, h3
      text-transform uppercase
      margin 0
    & h2
      display inline-block
      font-weight 400
      line-height 35px
      font-size 35px
    & h3
      font-weight 300
      line-height 15px
      font-size 15px
  & .slide-link
    text-transform uppercase
    text-decoration none
    background $darkGray
    display inline-block
    position absolute
    font-size 30px
    color white
    height 100%
    width 44px
    right 0
    top 0
    &:hover
      background $gfwBlue
    & .mobile-show
      transform translate(-50%, -50%)
      position absolute
      left 50%
      top 50%
  & .slide
    background-position center
    background-size cover
    height 230px
    width 100%
    & > a
      color inherit
      outline none
    &.slide1
      background-image url('images/slide-gfwwater.png')
    &.slide2
      opacity 0
      background-image url('images/slide-philadelphia-skyline.jpg')
    &.slide3
      opacity 0
      background-image url('images/slide-spring.jpg')
    &.slide4
      opacity 0
      background-image url('images/aqueduct-water-risk.png')
  & .slick-dots
    position absolute
    list-style none
    right 20px
    padding 0
    margin 0
    top 20px
    & li
      display inline-block
      padding 5px 10px
      &.slick-active button
        transform scale(2)
        opacity 1
    & button
      transition all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95)
      box-shadow 0px 1px 2px rgba(0,0,0,0.25)
      text-indent -10000px
      border-radius 50%
      background white
      cursor pointer
      outline none
      border none
      opacity 0.8
      height 8px
      width 8px
      padding 0
      &:hover
        transform scale(2)
        opacity 1

.gfw-water-logo
  background url('images/GFW_Water_logo.png') no-repeat center
  background-size 90px
  position absolute
  height 90px
  width 90px
  z-index 5
  left 20px
  top 0
  &:after
    background url('images/beta.png')
    position absolute
    display block
    bottom -5px
    height 18px
    width 30px
    right -5px
    content ''

@media (min-width: 1400px)
  .home-slider .inner
    max-width 1200px
    width 75%

@media (min-width: 850px)
  #headerGfw
    height 34px
  .home-slider
    & .attribution-link
      background rgba(200, 200, 200, 0.9)
      position absolute
      padding 5px 10px
      font-size 12px
      display block
      bottom 0
      left 0
    & .slide
      height 620px
    & .slick-dots
      bottom 20px
      top auto
    & .inner
      max-width 1024px
      width 95%
    & aside
      transform translate(0, -50%)
      background none
      bottom auto
      width auto
      padding 0
      top 50%
      & h2
        background rgba(255, 255, 255, 0.75)
        padding 10px 5px 6px
        line-height 61px
        font-size 61px
      & h3
        background rgba(255, 255, 255, 0.75)
        padding 10px 5px 5px
        line-height 31px
        font-size 31px
    & .slide-link
      position relative
      padding 8px 30px
      font-size 17px
      height auto
      width auto
      right auto
      top auto
  .home-slider-container
    min-height 620px

// Page main Content
.home-section
  width 1024px
  margin auto
  .home-section-block
    min-height 130px
    justify-content center
    display flex
    flex-direction column
  img
    width 100%
    height auto
    max-width 450px
    margin auto

.home-section-block
  width 50%
  padding 0 1em .5em

.home-section-block__title
  font-weight normal
  margin .5em 0

.home-section-block__content
  margin .5em 0 .25em 0

// Bottom slider
.bottom-slider
  width 1024px
  margin auto
  .block-text
    min-height 300px
    background-color #239AD0
    color #fff

.bottom-slider
  position relative
  .block-image
    background-repeat no-repeat
    background-size cover
  .bottom-slide1
    .block-image
      background-image url('images/footer-utilities.jpg')
  .bottom-slide2
    position absolute
    top 0
    .block-image
      background-image url('images/footer-financing-development.jpg')
  .bottom-slide3
    position absolute
    top 0
    .block-image
      background-image url('images/footer-research-civil-society.jpg')

.bottom-slider__block
  width 100%
  .block-text
    display flex
    flex-direction column
    justify-content center
    h3
      margin .4em 0
      font-weight 500
    h4
    p
      margin 0
    h4
      font-weight normal
  .block-image
    display none

.switch-button
  background-image url('images/person-head.svg')
  background-color #E9E8E4
  background-position bottom
  background-repeat no-repeat
  cursor pointer
  width 80px
  height 80px
  display flex
  margin auto
  border-radius 40px
  border 5px solid #fff
  &.switch-slide1
    background-color #476685

.switch-button__label
  font-size .6em
  text-transform uppercase
  padding 0 .5em

.bottom-slider-container
  width 1024px
  margin auto
  height 6em
  .slide-switch__block
    flex 1
    text-align center
    position: relative;
    top: -40px;


// Media query
@media (min-width: 1400px)
  .home-section
  .bottom-slider
    max-width 1200px
    width 75%

@media (max-width: 1024px)
 .home-section
 .bottom-slider
 .bottom-slider-container
    width 100%

@media (min-width: 851px)
  .customize-analysis-block
    min-height 300px
    background-image url('images/gfw-water-custom-insight.jpg')
    background-color #DFD9D1
    background-size: contain;
    background-repeat: no-repeat;
  .home-section
    .block-text
      padding-right 5em
      padding-left 5em
  .bottom-slider__block
    .block-text
      padding-right 3em
      padding-left 3em
    .block-image
      display flex

@media (max-width: 850px)
  .home-section
    flex-direction column
  .home-section-block
    width 100%
  .customize-analysis-block
    .block-text
      //background-image url('images/gfw-water-custom-insight.jpg')
      //background-repeat: no-repeat;
      //background-size: contain;
      background-color #DFD9D1
    .block-image
      display none

  .bottom-slider__block
    .block-text
      padding-bottom 2em

{'fraction_non_alphanumeric': 0.07299539170506912, 'fraction_numerical': 0.06377880184331797, 'mean_word_length': 1.9966859983429992, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1410223', 'n_tokens_mistral': 4063, 'n_tokens_neox': 3445, 'n_words': 1010}