react-gosuslugi/storybook-static/styles.css.map

react-gosuslugi collection of common React UI components

{"version":3,"file":"styles.css","sources":["webpack:///./src/components/BannerLogo/BannerLogo.sass","webpack:///./BannerLogo.sass","webpack:///./src/sass/_mixin.sass","webpack:///./src/components/Button/button.sass","webpack:///./button.sass","webpack:///./src/sass/_media.scss","webpack:///./src/sass/_fonts.sass","webpack:///./Caption.sass","webpack:///./src/components/Caption/Caption.sass","webpack:///./card-caption.sass","webpack:///./src/components/CardCaption/card-caption.sass","webpack:///./src/sass/grid/mixins/_media.sass","webpack:///./src/components/Grid/Col/Col.sass","webpack:///./src/sass/grid/mixins/_col.sass","webpack:///./Col.sass","webpack:///./src/components/Grid/Container/Container.sass","webpack:///./src/sass/grid/mixins/_grid.sass","webpack:///./Container.sass","webpack:///./src/components/UslugaCard/usluga-card.sass","webpack:///./usluga-card.sass","webpack:///./src/components/PopularServices/popular-services.sass","webpack:///./popular-services.sass","webpack:///./src/components/Dashboards/DashboardExecutor/DashboardExecutor.sass","webpack:///./DashboardExecutor.sass","webpack:///./src/sass/_background.sass","webpack:///./_background.sass","webpack:///./src/components/Arrow/Arrow.sass","webpack:///./Arrow.sass","webpack:///./src/components/DownloadFiles/DownloadFiles.sass","webpack:///./DownloadFiles.sass","webpack:///./src/components/Footer/Footer.sass","webpack:///./Footer.sass","webpack:///./src/components/InfoBanner/InfoBanner.sass","webpack:///./InfoBanner.sass","webpack:///./src/components/Loader/Loader.sass","webpack:///./Loader.sass","webpack:///./src/components/NewYearBanner/NewYearBanner.sass","webpack:///./NewYearBanner.sass","webpack:///./src/components/News/Article/article.sass","webpack:///./article.sass","webpack:///./src/components/News/Block/NewsBlock.sass","webpack:///./NewsBlock.sass","webpack:///./src/components/News/News.sass","webpack:///./News.sass","webpack:///./src/components/Search/search.sass","webpack:///./search.sass","webpack:///./src/components/Service/LastStep/LastStep.sass","webpack:///./LastStep.sass","webpack:///./src/components/Service/Steps/Info/Markdown/article.sass","webpack:///./src/components/Service/Steps/Steps.sass","webpack:///./Steps.sass","webpack:///./src/components/Service/TitleStep/TitleStep.sass","webpack:///./TitleStep.sass","webpack:///./src/components/Service/Complaint/Complaint.sass","webpack:///./Complaint.sass","webpack:///./src/sass/_inputs.sass","webpack:///./FirstStep.sass","webpack:///./src/components/Service/FirstStep/FirstStep.sass","webpack:///./src/components/Service/Service.sass","webpack:///./Service.sass","webpack:///./src/components/Thanks/Thanks.sass","webpack:///./Thanks.sass","webpack:///./src/components/Hamburger/Hamburger.scss","webpack:///./Hamburger.scss","webpack:///./src/components/TopMenu/TopMenu.sass","webpack:///./Dropdown.sass","webpack:///./src/components/TopMenu/components/Dropdown.sass","webpack:///./UserRole.sass","webpack:///./src/components/TopMenu/components/DropdownUser/UserRole.sass","webpack:///./TopMenu.sass"],"sourcesContent":["@import \"../../sass/mixin\";\n@import \"../../sass/vars\";\n@import \"../../sass/media\";\n\n.banner-logo {\n  display: block;\n  margin: 0!important;\n  text-decoration: none!important;\n  & .banner-logo__prefix {\n    $banner-logo__prefix_ff: $general-ff-ekibastuz;\n    $banner-logo__prefix_weight: $general-font-weight-bold;\n    $banner-logo__prefix_size: $general-font-size-normal;\n    $banner-logo__prefix_color: color('primary');\n\n    display: flex;\n    margin: 0;\n    @include font($banner-logo__prefix_ff, $banner-logo__prefix_weight, $banner-logo__prefix_size, $banner-logo__prefix_color);\n    text-transform: uppercase;\n\n    & .banner-logo__suffix {\n      $banner-logo__suffix_color: color('accent');\n\n      margin-left: 5px;\n      text-transform: uppercase;\n      color: $banner-logo__suffix_color; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/BannerLogo/BannerLogo.sass",".banner-logo {\n  display: block;\n  margin: 0 !important;\n  text-decoration: none !important;\n}\n\n.banner-logo .banner-logo__prefix {\n  display: flex;\n  margin: 0;\n  font-family: \"Ekibastuz\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: bold;\n  font-size: 1.25rem;\n  color: #0063b0;\n  line-height: 1.25rem;\n  font-style: normal;\n  text-transform: uppercase;\n}\n\n.banner-logo .banner-logo__prefix .banner-logo__suffix {\n  margin-left: 5px;\n  text-transform: uppercase;\n  color: #e90e3f;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./BannerLogo.sass","@import 'vars';\n\n@function color( $name: 'primary', $variant: $general-color-key, $opacity: 1 ) {\n  $color: null;\n\n  // Get the color spectrum\n  $color-spectrum: map-get($general-pallet, $name);\n\n  // Get the color variant\n  @if $color-spectrum {\n    $color: map-get($color-spectrum, $variant); }\n\n  // Get the alpha setting\n  $alpha: if(type-of($opacity) == 'number', $opacity, map-get($general-opacity, $opacity));\n\n  // Set the alpha of the color\n  @if $alpha {\n    $color: rgba($color, $alpha); }\n\n  @return $color; }\n\n@function rem-calcF($size) {\n  $remSize: ($size / $general-font-size) * 1rem;\n  @return $remSize; }\n\n@mixin rem-calc($size) {\n  font-size: rem-calcF($size); }\n\n@mixin font($font-family: $general-ff-helvetica, $font-weight: $general-font-weight, $font-size: $general-font-size, $font-color: $general-font-color, $font-line-height: $general-font-line-height, $font-style: normal) {\n  font-family: $font-family;\n  font-weight: $font-weight;\n  font-size: rem-calcF($font-size);\n  color: $font-color;\n  line-height: $font-line-height;\n  font-style: $font-style; }\n\n@mixin img($img-display: block, $img-width: 100%, $img-height: auto) {\n  display: $img-display;\n  width: $img-width;\n  height: $img-height; }\n\n@mixin inline-block($inline-block-vertical-align: top) {\n  vertical-align: $inline-block-vertical-align;\n  display: inline-block; }\n\n@mixin border($border-position, $border-color: color('text'), $border-radius: 0, $border-width: 1px, $border-style: solid) {\n  @if $border-position == border {\n    border: $border-width $border-style $border-color;\n    border-radius: $border-radius; }\n  @if $border-position == border-top {\n    border-top: $border-width $border-style $border-color; }\n  @if $border-position == border-right {\n    border-right: $border-width $border-style $border-color; }\n  @if $border-position == border-bottom {\n    border-bottom: $border-width $border-style $border-color; }\n  @if $border-position == border-left {\n    border-left: $border-width $border-style $border-color; } }\n\n@mixin pseudo($pseudo-width: 0, $pseudo-height: 0, $pseudo-top: auto, $pseudo-right: auto, $pseudo-bottom: auto, $pseudo-left: auto, $pseudo-content: '', $pseudo-position: absolute) {\n  content: $pseudo-content;\n  position: $pseudo-position;\n  top: $pseudo-top;\n  right: $pseudo-right;\n  bottom: $pseudo-bottom;\n  left: $pseudo-left;\n  width: $pseudo-width;\n  height: $pseudo-height; }\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/sass/_mixin.sass","@import \"../../sass/mixin\";\n@import \"../../sass/vars\";\n@import \"../../sass/media\";\n\n.button-wrapper {\n  display: block;\n  &__left {\n    text-align: left; }\n  &__center {\n    text-align: center; }\n  &__right {\n    text-align: right; } }\n\n$btn-ff: $general-ff-helvetica;\n$btn-font-weight: $general-font-weight;\n\n$btn-font-size-lg: 18px;\n$btn-font-size: $general-font-size;\n$btn-font-size-sm: 15px;\n$btn-font-size-xs: $general-font-size-small;\n\n$btn-padding-horizontal: 15px;\n$btn-padding-vertical: 6px;\n$btn-padding-horizontal-lg: 30px;\n$btn-padding-vertical-lg: 12px;\n$btn-padding-horizontal-sm: 10px;\n$btn-padding-vertical-sm: 5px;\n$btn-padding-horizontal-xs: 6px;\n$btn-padding-vertical-xs: 3px;\n\n$btn-margin: 5px 0;\n$btn-border: 1px solid transparent;\n$btn-border-radius: $general-border-radius;\n$btn-blackout: 10%;\n$btn-mix-black: color('black');\n\n.button {\n  position: relative;\n  @include inline-block();\n  border: $btn-border;\n  border-radius: $btn-border-radius;\n  padding: $btn-padding-vertical $btn-padding-horizontal;\n  margin: $btn-margin;\n  @include font($btn-ff, $btn-font-weight, $btn-font-size);\n  transition: $general-transition;\n  cursor: pointer;\n  white-space: nowrap;\n  touch-action: manipulation;\n  &:focus {\n    outline: none; }\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: .65;\n    filter: alpha(opacity=65);\n    box-shadow: none; }\n\n  &.button-block {\n    display: block;\n    width: 100%; }\n\n  &.button-default {\n    $btn-default_color: color('text', 'dark');\n    $btn-default_bg-color: color('white');\n    $btn-default_border-color: color('text','light', 'light');\n\n    color: $btn-default_color;\n    background-color: $btn-default_bg-color;\n    border-color: $btn-default_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-default_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-default_bg-color, $btn-blackout); } }\n\n  &.button-primary {\n    $btn-primary_color: color('white');\n    $btn-primary_bg-color: color('primary');\n    $btn-primary_border-color: color('primary','dark', 'dark');\n\n    color: $btn-primary_color;\n    background-color: $btn-primary_bg-color;\n    border-color: $btn-primary_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-primary_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-primary_bg-color, $btn-blackout); } }\n\n  &.button-info {\n    $btn-info_color: color('white');\n    $btn-info_bg-color: color('info');\n    $btn-info_border-color: color('info','dark', 'dark');\n\n    color: $btn-info_color;\n    background-color: $btn-info_bg-color;\n    border-color: $btn-info_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-info_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-info_bg-color, $btn-blackout); } }\n\n  &.button-success {\n    $btn-success_color: color('white');\n    $btn-success_bg-color: color('success');\n    $btn-success_border-color: color('success', 'dark', 'dark');\n\n    color: $btn-success_color;\n    background-color: $btn-success_bg-color;\n    border-color: $btn-success_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-success_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-success_bg-color, $btn-blackout); } }\n\n  &.button-warning {\n    $btn-warning_color: color('white');\n    $btn-warning_bg-color: color('warning');\n    $btn-warning_border-color: color('warning','dark', 'dark');\n\n    color: $btn-warning_color;\n    background-color: $btn-warning_bg-color;\n    border-color: $btn-warning_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-warning_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-warning_bg-color, $btn-blackout); } }\n\n  &.button-danger {\n    $btn-danger_color: color('white');\n    $btn-danger_bg-color: color('danger');\n    $btn-danger_border-color: color('danger', 'dark', 'dark');\n\n    color: $btn-danger_color;\n    background-color: $btn-danger_bg-color;\n    border-color: $btn-danger_border-color;\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-danger_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-danger_bg-color, $btn-blackout); } }\n\n  &.button-link {\n    $btn-default_color: color('primary');\n    $btn-default_bg-color: transparent;\n    $btn-default_border-color: transparent;\n\n    color: $btn-default_color;\n    background-color: $btn-default_bg-color;\n    border-color: $btn-default_border-color;\n    border-radius: 0;\n    box-shadow: none;\n    &:hover {\n      background-color: $btn-default_bg-color;\n      color: mix($btn-mix-black, $btn-default_color, $btn-blackout);\n      text-decoration: underline; }\n    &.active {\n      background-color: $btn-default_bg-color;\n      color: mix($btn-mix-black, $btn-default_color, $btn-blackout);\n      text-decoration: underline; } }\n\n  &.button-lg {\n    font-size: rem-calcF($btn-font-size-lg);\n    padding: $btn-padding-vertical-lg $btn-padding-horizontal-lg; }\n  &.button-sm {\n    font-size: rem-calcF($btn-font-size-sm);\n    padding: $btn-padding-vertical-sm $btn-padding-horizontal-sm; }\n  &.button-xs {\n    font-size: rem-calcF($btn-font-size-xs);\n    padding: $btn-padding-vertical-xs $btn-padding-horizontal-xs; }\n\n  &.button-arrow-right {\n    $btn-arrow-right-padding: 25px;\n    $btn-arrow-left-padding: 15px;\n    $btn-arrow-vertical-padding: 8px;\n    $btn-arrow-margin-top: -5px;\n    $btn-arrow-color: color('white');\n    $btn-arrow-bg-color: color('primary');\n    $btn-arrow-before-border-width: 2px;\n    $btn-arrow-before-border-radius: 2px;\n    $btn-arrow-before-right: 10px;\n    $btn-arrow-before-width: 10px;\n    $btn-arrow-before-height: $btn-arrow-before-width;\n\n    padding: $btn-arrow-vertical-padding $btn-arrow-right-padding $btn-arrow-vertical-padding $btn-arrow-left-padding;\n\n    color: $btn-arrow-color;\n    background-color: $btn-arrow-bg-color;\n    &:before {\n      @include pseudo($btn-arrow-before-width, $btn-arrow-before-height, 50%, $btn-arrow-before-right, auto, auto);\n      margin-top: $btn-arrow-margin-top;\n      border-bottom: $btn-arrow-before-border-width solid $btn-arrow-color;\n      border-right: $btn-arrow-before-border-width solid $btn-arrow-color;\n      border-radius: $btn-arrow-before-border-radius;\n      transform: rotate(-45deg); }\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-arrow-bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-arrow-bg-color, $btn-blackout); }\n    &.button-lg {\n      $btn-arrow-right-padding-lg: 44px;\n      $btn-arrow-before-margin-top-lg: -6px;\n      $btn-arrow-before-width-lg: 12px;\n      $btn-arrow-before-right-lg: 18px;\n      $btn-arrow-before-height-lg: $btn-arrow-before-width-lg;\n\n      padding: $btn-padding-vertical-lg $btn-arrow-right-padding-lg $btn-padding-vertical-lg $btn-padding-horizontal-lg;\n      &:before {\n        right: $btn-arrow-before-right-lg;\n        margin-top: $btn-arrow-before-margin-top-lg;\n        width: $btn-arrow-before-width-lg;\n        height: $btn-arrow-before-height-lg; } }\n\n    &.button-sm {\n      $btn-arrow-right-padding-sm: 20px;\n      $btn-arrow-before-margin-top-sm: -4px;\n      $btn-arrow-before-right-sm: 10px;\n      $btn-arrow-before-width-sm: 8px;\n      $btn-arrow-before-height-sm: $btn-arrow-before-width-sm;\n\n      padding: $btn-padding-vertical-sm $btn-arrow-right-padding-sm $btn-padding-vertical-sm $btn-padding-horizontal-sm;\n      &:before {\n        right: $btn-arrow-before-right-sm;\n        margin-top: $btn-arrow-before-margin-top-sm;\n        width: $btn-arrow-before-width-sm;\n        height: $btn-arrow-before-height-sm; } }\n\n    &.button-xs {\n      $btn-arrow-right-padding-xs: 16px;\n      $btn-arrow-before-margin-top-xs: -4px;\n      $btn-arrow-before-right-xs: 6px;\n      $btn-arrow-before-width-xs: 8px;\n      $btn-arrow-before-height-xs: $btn-arrow-before-width-xs;\n\n      padding: $btn-padding-vertical-xs $btn-arrow-right-padding-xs $btn-padding-vertical-xs $btn-padding-horizontal-xs;\n      &:before {\n        right: $btn-arrow-before-right-xs;\n        margin-top: $btn-arrow-before-margin-top-xs;\n        width: $btn-arrow-before-width-xs;\n        height: $btn-arrow-before-height-xs; } } }\n\n  &.button-arrow-left {\n    $btn-arrow-left_right-padding: 15px;\n    $btn-arrow-left_left-padding: 25px;\n    $btn-arrow-left_vertical-padding: 8px;\n    $btn-arrow-left_margin-top: -5px;\n    $btn-arrow-left_color: color('text');\n    $btn-arrow-left_bg-color: color('white');\n    $btn-arrow-left_border-color: color('text', 'light', 'dark');\n    $btn-arrow-left_before-border-width: 2px;\n    $btn-arrow-left_before-border-radius: 2px;\n    $btn-arrow-left_before-right: 10px;\n    $btn-arrow-left_before-width: 10px;\n    $btn-arrow-left_before-height: $btn-arrow-left_before-width;\n\n    padding: $btn-arrow-left_vertical-padding $btn-arrow-left_right-padding $btn-arrow-left_vertical-padding $btn-arrow-left_left-padding;\n    border-color: $btn-arrow-left_border-color;\n    color: $btn-arrow-left_color;\n    background-color: $btn-arrow-left_bg-color;\n    &:before {\n      @include pseudo($btn-arrow-left_before-width, $btn-arrow-left_before-height, 50%, auto, auto, $btn-arrow-left_before-right);\n      margin-top: $btn-arrow-left_margin-top;\n      border-bottom: $btn-arrow-left_before-border-width solid $btn-arrow-left_color;\n      border-right: $btn-arrow-left_before-border-width solid $btn-arrow-left_color;\n      border-radius: $btn-arrow-left_before-border-radius;\n      transform: rotate(135deg); }\n    &:hover {\n      background-color: mix($btn-mix-black, $btn-arrow-left_bg-color, $btn-blackout); }\n    &.active {\n      background-color: mix($btn-mix-black, $btn-arrow-left_bg-color, $btn-blackout); }\n    &.button-lg {\n      $btn-arrow-left_left-padding-lg: 44px;\n      $btn-arrow-left_before-margin-top-lg: -6px;\n      $btn-arrow-left_before-width-lg: 12px;\n      $btn-arrow-left_before-right-lg: 18px;\n      $btn-arrow-left_before-height-lg: $btn-arrow-left_before-width-lg;\n\n      padding: $btn-padding-vertical-lg $btn-padding-horizontal-lg $btn-padding-vertical-lg $btn-arrow-left_left-padding-lg;\n      &:before {\n        left: $btn-arrow-left_before-right-lg;\n        margin-top: $btn-arrow-left_before-margin-top-lg;\n        width: $btn-arrow-left_before-width-lg;\n        height: $btn-arrow-left_before-height-lg; } }\n\n    &.button-sm {\n      $btn-arrow-left_left-padding-sm: 20px;\n      $btn-arrow-left_before-margin-top-sm: -4px;\n      $btn-arrow-left_before-right-sm: 10px;\n      $btn-arrow-left_before-width-sm: 8px;\n      $btn-arrow-left_before-height-sm: $btn-arrow-left_before-width-sm;\n\n      padding: $btn-padding-vertical-sm $btn-padding-horizontal-sm $btn-padding-vertical-sm $btn-arrow-left_left-padding-sm;\n      &:before {\n        left: $btn-arrow-left_before-right-sm;\n        margin-top: $btn-arrow-left_before-margin-top-sm;\n        width: $btn-arrow-left_before-width-sm;\n        height: $btn-arrow-left_before-height-sm; } }\n\n    &.button-xs {\n      $btn-arrow-left_left-padding-xs: 16px;\n      $btn-arrow-left_before-margin-top-xs: -4px;\n      $btn-arrow-left_before-right-xs: 6px;\n      $btn-arrow-left_before-width-xs: 8px;\n      $btn-arrow-left_before-height-xs: $btn-arrow-left_before-width-xs;\n\n      padding: $btn-padding-vertical-xs $btn-padding-horizontal-xs $btn-padding-vertical-xs $btn-arrow-left_left-padding-xs;\n      &:before {\n        left: $btn-arrow-left_before-right-xs;\n        margin-top: $btn-arrow-left_before-margin-top-xs;\n        width: $btn-arrow-left_before-width-xs;\n        height: $btn-arrow-left_before-height-xs; } } } }\n\n$addButton-width: 26px;\n$addButton-height: $addButton-width;\n$addButton-border-width: 2px;\n$addButton-margin-right: 10px;\n$addButton-color: color('success');\n$addButton-pseudo-width: 14px;\n$addButton-pseudo-height: 2px;\n$addButton-pseudo-top: 50%;\n$addButton-pseudo-left: $addButton-pseudo-top;\n.addButton {\n  position: relative;\n  @include inline-block(bottom);\n  min-width: $addButton-width;\n  width: $addButton-width;\n  height: $addButton-height;\n  margin-right: $addButton-margin-right;\n  border-radius: 50%;\n  border: $addButton-border-width solid $addButton-color;\n  text-align: center;\n  &:after, &:before {\n    @include pseudo($addButton-pseudo-width, $addButton-pseudo-height, $addButton-pseudo-top, auto, auto, $addButton-pseudo-left);\n    display: block;\n    background: $addButton-color;\n    margin-left: -$addButton-pseudo-width/2;\n    margin-top: -$addButton-pseudo-height/2; }\n  &:before {\n    transform: rotate(90deg); } }\n\n$controlBtn-margin-top: 15px;\n$controlBtn-margin-right: 10px;\n$controlBtn-width: 30px;\n$controlBtn-height: $controlBtn-width;\n.deleteButton, .dwButton, .upButton {\n  position: relative;\n  min-width: $controlBtn-width;\n  width: $controlBtn-width;\n  height: $controlBtn-height;\n  @include inline-block(bottom);\n  padding: 0;\n  margin: $controlBtn-margin-top $controlBtn-margin-right 0 0;\n  text-align: center;\n  background-size: cover;\n  cursor: pointer;\n  transition: $general-transition;\n  @include small {\n    margin: 0 10px 20px 0; }\n  &:hover {\n    opacity: 0.5; } }\n\n.deleteButton {\n  background-image: url(\"./icon/btn_cancel.svg\"); }\n\n.dwButton {\n  background-image: url(\"./icon/btn_dw.svg\"); }\n\n.upButton {\n  background-image: url(\"./icon/btn_up.svg\"); }\n\n.btn-wrapper {\n  display: flex;\n  align-items: center; }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/Button/button.sass",".button-wrapper {\n  display: block;\n}\n\n.button-wrapper__left {\n  text-align: left;\n}\n\n.button-wrapper__center {\n  text-align: center;\n}\n\n.button-wrapper__right {\n  text-align: right;\n}\n\n.button {\n  position: relative;\n  vertical-align: top;\n  display: inline-block;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 6px 15px;\n  margin: 5px 0;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: normal;\n  font-size: 1rem;\n  color: #333;\n  line-height: 1.25rem;\n  font-style: normal;\n  transition: all 0.4s ease;\n  cursor: pointer;\n  white-space: nowrap;\n  touch-action: manipulation;\n}\n\n.button:focus {\n  outline: none;\n}\n\n.button[disabled] {\n  cursor: not-allowed;\n  opacity: .65;\n  filter: alpha(opacity=65);\n  box-shadow: none;\n}\n\n.button.button-block {\n  display: block;\n  width: 100%;\n}\n\n.button.button-default {\n  color: #333333;\n  background-color: white;\n  border-color: rgba(119, 119, 119, 0.4);\n}\n\n.button.button-default:hover {\n  background-color: #e6e6e6;\n}\n\n.button.button-default.active {\n  background-color: #e6e6e6;\n}\n\n.button.button-primary {\n  color: white;\n  background-color: #0063b0;\n  border-color: rgba(0, 69, 123, 0.6);\n}\n\n.button.button-primary:hover {\n  background-color: #00599e;\n}\n\n.button.button-primary.active {\n  background-color: #00599e;\n}\n\n.button.button-info {\n  color: white;\n  background-color: #9dd6fd;\n  border-color: rgba(110, 150, 177, 0.6);\n}\n\n.button.button-info:hover {\n  background-color: #8dc1e4;\n}\n\n.button.button-info.active {\n  background-color: #8dc1e4;\n}\n\n.button.button-success {\n  color: white;\n  background-color: #5cb85c;\n  border-color: rgba(64, 129, 64, 0.6);\n}\n\n.button.button-success:hover {\n  background-color: #53a653;\n}\n\n.button.button-success.active {\n  background-color: #53a653;\n}\n\n.button.button-warning {\n  color: white;\n  background-color: #f0ad4e;\n  border-color: rgba(168, 121, 55, 0.6);\n}\n\n.button.button-warning:hover {\n  background-color: #d89c46;\n}\n\n.button.button-warning.active {\n  background-color: #d89c46;\n}\n\n.button.button-danger {\n  color: white;\n  background-color: #e90e3f;\n  border-color: rgba(163, 10, 44, 0.6);\n}\n\n.button.button-danger:hover {\n  background-color: #d20d39;\n}\n\n.button.button-danger.active {\n  background-color: #d20d39;\n}\n\n.button.button-link {\n  color: #0063b0;\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.button.button-link:hover {\n  background-color: transparent;\n  color: #00599e;\n  text-decoration: underline;\n}\n\n.button.button-link.active {\n  background-color: transparent;\n  color: #00599e;\n  text-decoration: underline;\n}\n\n.button.button-lg {\n  font-size: 1.125rem;\n  padding: 12px 30px;\n}\n\n.button.button-sm {\n  font-size: 0.9375rem;\n  padding: 5px 10px;\n}\n\n.button.button-xs {\n  font-size: 0.875rem;\n  padding: 3px 6px;\n}\n\n.button.button-arrow-right {\n  padding: 8px 25px 8px 15px;\n  color: white;\n  background-color: #0063b0;\n}\n\n.button.button-arrow-right:before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  bottom: auto;\n  left: auto;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  border-bottom: 2px solid white;\n  border-right: 2px solid white;\n  border-radius: 2px;\n  transform: rotate(-45deg);\n}\n\n.button.button-arrow-right:hover {\n  background-color: #00599e;\n}\n\n.button.button-arrow-right.active {\n  background-color: #00599e;\n}\n\n.button.button-arrow-right.button-lg {\n  padding: 12px 44px 12px 30px;\n}\n\n.button.button-arrow-right.button-lg:before {\n  right: 18px;\n  margin-top: -6px;\n  width: 12px;\n  height: 12px;\n}\n\n.button.button-arrow-right.button-sm {\n  padding: 5px 20px 5px 10px;\n}\n\n.button.button-arrow-right.button-sm:before {\n  right: 10px;\n  margin-top: -4px;\n  width: 8px;\n  height: 8px;\n}\n\n.button.button-arrow-right.button-xs {\n  padding: 3px 16px 3px 6px;\n}\n\n.button.button-arrow-right.button-xs:before {\n  right: 6px;\n  margin-top: -4px;\n  width: 8px;\n  height: 8px;\n}\n\n.button.button-arrow-left {\n  padding: 8px 15px 8px 25px;\n  border-color: rgba(119, 119, 119, 0.6);\n  color: #555555;\n  background-color: white;\n}\n\n.button.button-arrow-left:before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: auto;\n  bottom: auto;\n  left: 10px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  border-bottom: 2px solid #555555;\n  border-right: 2px solid #555555;\n  border-radius: 2px;\n  transform: rotate(135deg);\n}\n\n.button.button-arrow-left:hover {\n  background-color: #e6e6e6;\n}\n\n.button.button-arrow-left.active {\n  background-color: #e6e6e6;\n}\n\n.button.button-arrow-left.button-lg {\n  padding: 12px 30px 12px 44px;\n}\n\n.button.button-arrow-left.button-lg:before {\n  left: 18px;\n  margin-top: -6px;\n  width: 12px;\n  height: 12px;\n}\n\n.button.button-arrow-left.button-sm {\n  padding: 5px 10px 5px 20px;\n}\n\n.button.button-arrow-left.button-sm:before {\n  left: 10px;\n  margin-top: -4px;\n  width: 8px;\n  height: 8px;\n}\n\n.button.button-arrow-left.button-xs {\n  padding: 3px 6px 3px 16px;\n}\n\n.button.button-arrow-left.button-xs:before {\n  left: 6px;\n  margin-top: -4px;\n  width: 8px;\n  height: 8px;\n}\n\n.addButton {\n  position: relative;\n  vertical-align: bottom;\n  display: inline-block;\n  min-width: 26px;\n  width: 26px;\n  height: 26px;\n  margin-right: 10px;\n  border-radius: 50%;\n  border: 2px solid #5cb85c;\n  text-align: center;\n}\n\n.addButton:after,\n.addButton:before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: auto;\n  bottom: auto;\n  left: 50%;\n  width: 14px;\n  height: 2px;\n  display: block;\n  background: #5cb85c;\n  margin-left: -7px;\n  margin-top: -1px;\n}\n\n.addButton:before {\n  transform: rotate(90deg);\n}\n\n.deleteButton,\n.dwButton,\n.upButton {\n  position: relative;\n  min-width: 30px;\n  width: 30px;\n  height: 30px;\n  vertical-align: bottom;\n  display: inline-block;\n  padding: 0;\n  margin: 15px 10px 0 0;\n  text-align: center;\n  background-size: cover;\n  cursor: pointer;\n  transition: all 0.4s ease;\n}\n\n@media (min-width: 0) and (max-width: 767px) {\n  .deleteButton,\n  .dwButton,\n  .upButton {\n    margin: 0 10px 20px 0;\n  }\n}\n\n.deleteButton:hover,\n.dwButton:hover,\n.upButton:hover {\n  opacity: 0.5;\n}\n\n.deleteButton {\n  background-image: url(\"./icon/btn_cancel.svg\");\n}\n\n.dwButton {\n  background-image: url(\"./icon/btn_dw.svg\");\n}\n\n.upButton {\n  background-image: url(\"./icon/btn_up.svg\");\n}\n\n.btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./button.sass","$small: 0;\n$xsmall: 500px;\n$medium: 768px;\n$large: 992px;\n$xlarge: 1200px;\n$xxlarge: 1440px;\n\n@mixin small {\n  @media (min-width: #{$small}) and (max-width: #{$medium - 1px}) {\n    @content;\n  }\n}\n@mixin xsmall {\n  @media (min-width: #{$small}) and (max-width: #{$xsmall - 1px}) {\n    @content;\n  }\n}\n\n@mixin medium {\n  @media (max-width: #{$medium}) {\n    @content;\n  }\n}\n\n@mixin medium-min {\n  @media (min-width: #{$medium}) {\n    @content;\n  }\n}\n\n@mixin large-min {\n  @media (min-width: #{$large}) {\n    @content;\n  }\n}\n\n@mixin large {\n  @media (max-width: #{$large}) {\n    @content;\n  }\n}\n\n@mixin xlarge {\n  @media (max-width: #{$xlarge}) {\n    @content;\n  }\n}\n\n@mixin xxlarge {\n  @media (max-width: #{$xxlarge}) {\n    @content;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/sass/_media.scss","@font-face {\n font-family: \"Helvetica Neue\";\n src: url('../fonts/HelveticaNeue.ttf')  format('truetype');\n font-weight: normal;\n font-style: normal; }\n\n@font-face {\n font-family: \"Helvetica Neue\";\n src: url('../fonts/HelveticaNeueBold.ttf')  format('truetype');\n font-weight: bold;\n font-style: normal; }\n\n@font-face {\n font-family: \"Ekibastuz\";\n src: url('../fonts/Ekibastuz-Regular.otf');\n font-weight: normal;\n font-style: normal; }\n\n@font-face {\n font-family: \"Ekibastuz\";\n src: url('../fonts/Ekibastuz-Bold.otf');\n font-weight: bold;\n font-style: normal; }\n\n@font-face {\n font-family: \"Ekibastuz\";\n src: url('../fonts/Ekibastuz-Light.otf');\n font-weight: 300;\n font-style: normal; }\n\n\n\n// WEBPACK FOOTER //\n// ./src/sass/_fonts.sass","@font-face {\n  font-family: \"Helvetica Neue\";\n  src: url(\"../../fonts/HelveticaNeue.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Helvetica Neue\";\n  src: url(\"../../fonts/HelveticaNeueBold.ttf\") format(\"truetype\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Regular.otf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Bold.otf\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Light.otf\");\n  font-weight: 300;\n  font-style: normal;\n}\n\n.base-caption {\n  margin-bottom: 40px;\n  font-family: \"Ekibastuz\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: 300;\n  font-size: 2.5rem;\n  color: #333;\n  line-height: 2.5rem;\n  font-style: normal;\n}\n\n@media (min-width: 0) and (max-width: 767px) {\n  .base-caption {\n    font-size: 1.8rem;\n  }\n}\n\n.base-caption.base-caption--center {\n  text-align: center;\n}\n\n.base-caption.base-caption--left {\n  text-align: left;\n}\n\n.base-caption.base-caption--right {\n  text-align: right;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./Caption.sass","@import \"../../sass/mixin\";\n@import \"../../sass/vars\";\n@import \"../../sass/media\";\n@import \"../../sass/fonts\";\n\n$base-caption-vertical-step: 40px;\n$base-caption-ff: $general-ff-ekibastuz;\n$base-caption-font-weight: $general-font-weight-light;\n$base-caption-font-size: $general-font-size-largeXX;\n$base-caption-font-line-height: $general-font-line-height-large;\n.base-caption {\n  margin-bottom: $base-caption-vertical-step;\n  @include font($base-caption-ff, $general-font-weight-light, $base-caption-font-size, $general-font-color, $base-caption-font-line-height);\n  @include small {\n    font-size: 1.8rem; }\n\n  &.base-caption--center {\n    text-align: center; }\n  &.base-caption--left {\n    text-align: left; }\n  &.base-caption--right {\n    text-align: right; } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/Caption/Caption.sass","@font-face {\n  font-family: \"Helvetica Neue\";\n  src: url(\"../../fonts/HelveticaNeue.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Helvetica Neue\";\n  src: url(\"../../fonts/HelveticaNeueBold.ttf\") format(\"truetype\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Regular.otf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Bold.otf\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Ekibastuz\";\n  src: url(\"../../fonts/Ekibastuz-Light.otf\");\n  font-weight: 300;\n  font-style: normal;\n}\n\n.base-caption {\n  margin-bottom: 40px;\n  font-family: \"Ekibastuz\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: 300;\n  font-size: 2.5rem;\n  color: #333;\n  line-height: 2.5rem;\n  font-style: normal;\n}\n\n@media (min-width: 0) and (max-width: 767px) {\n  .base-caption {\n    font-size: 1.8rem;\n  }\n}\n\n.base-caption.base-caption--center {\n  text-align: center;\n}\n\n.base-caption.base-caption--left {\n  text-align: left;\n}\n\n.base-caption.base-caption--right {\n  text-align: right;\n}\n\n.card-caption {\n  display: flex;\n  align-items: center;\n}\n\n@media (min-width: 0) and (max-width: 767px) {\n  .card-caption {\n    flex-direction: column;\n    align-items: center;\n  }\n}\n\n.card-caption .card-caption__img-wrapper {\n  width: 72px;\n  min-width: 72px;\n  height: 80px;\n  margin: 0 20px 0 0;\n}\n\n@media (min-width: 0) and (max-width: 499px) {\n  .card-caption .card-caption__img-wrapper {\n    margin: 0 0 10px 0;\n  }\n}\n\n.card-caption .card-caption__img-wrapper img {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.card-caption .card-caption__name {\n  font-family: \"Ekibastuz\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: bold;\n  font-size: 1.25rem;\n  color: #333;\n  line-height: 1.25rem;\n  font-style: normal;\n  margin: 0;\n}\n\n@media (min-width: 0) and (max-width: 499px) {\n  .card-caption .card-caption__name {\n    text-align: center;\n  }\n}\n\n.card-caption.large {\n  margin-bottom: 20px;\n}\n\n.card-caption.large .card-caption__name {\n  font-family: \"Ekibastuz\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: 300;\n  font-size: 2.5rem;\n  color: #333;\n  line-height: 2.5rem;\n  font-style: normal;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./card-caption.sass","@import \"../../sass/mixin\";\n@import \"../../sass/vars\";\n@import \"../../sass/media\";\n@import \"../Caption/Caption\";\n\n.card-caption {\n  display: flex;\n  align-items: center;\n  @include small {\n    flex-direction: column;\n    align-items: center; }\n  & .card-caption__img-wrapper {\n    $card-caption-img-width: 72px;\n    $card-caption-img-height: 80px;\n    $card-caption-img-margin-right: 20px;\n    $card-caption-vertical-step-smallX: $general-vertical-step-smallX;\n\n    width: $card-caption-img-width;\n    min-width: $card-caption-img-width;\n    height: $card-caption-img-height;\n    margin: 0 $card-caption-img-margin-right 0 0;\n    @include xsmall {\n      margin: 0 0 $card-caption-vertical-step-smallX 0; }\n    & img {\n      @include img(); } }\n  & .card-caption__name {\n    $card-caption__name_font-size: $general-font-size-normal;\n    $card-caption__name_line-height: $general-font-line-height;\n    $card-caption__name_ff: $general-ff-ekibastuz;\n    $card-caption__name_font-weight: $general-font-weight-bold;\n    $card-caption__name_font-color: $general-font-color;\n\n    @include font($card-caption__name_ff, $card-caption__name_font-weight, $card-caption__name_font-size, $card-caption__name_font-color, $card-caption__name_line-height);\n    margin: 0;\n    @include xsmall {\n      text-align: center; } }\n  &.large {\n    margin-bottom: 20px;\n    & .card-caption__name {\n      @include font($base-caption-ff, $general-font-weight-light, $base-caption-font-size, $general-font-color, $base-caption-font-line-height); } } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/CardCaption/card-caption.sass","@mixin media-lg() {\n  @media (min-width: $lg) {\n    @content; } }\n\n@mixin media-md() {\n  @media (min-width: $md) and (max-width: $lg) {\n    @content; } }\n\n@mixin media-sm() {\n  @media  (min-width: $sm) and (max-width: $md) {\n    @content; } }\n\n@mixin media-xs() {\n  @media  (max-width: $sm) {\n    @content; } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/sass/grid/mixins/_media.sass","@import \"../../../sass/grid/grid\";\n\n@for $i from 1 through 24 {\n  .col-lg-#{$i} {\n    @include media-lg() {\n      @include col-lg($i); } } }\n\n@for $i from 1 through 24 {\n  .col-md-#{$i} {\n    @include media-md() {\n      @include col-md($i); } } }\n\n@for $i from 1 through 12 {\n  .col-sm-#{$i} {\n    @include media-sm() {\n      @include col-sm($i); } } }\n\n@for $i from 1 through 6 {\n  .col-xs-#{$i} {\n    @include media-xs() {\n      @include col-xs($i); } } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/Grid/Col/Col.sass","@mixin col-lg($val: 0, $gutter: yes) {\n  @include media-lg() {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    @if $gutter == yes {\n      margin: {\n        left: $margin / 2;\n        right: $margin / 2; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{$columns} - #{$margin});\n        flex-basis: calc(100% / #{$columns} - #{$margin}); }\n      @else if $val {\n        max-width: calc(100% / #{$columns} * #{$val} - #{$margin});\n        flex-basis: calc(100% / #{$columns} * #{$val} - #{$margin}); } }\n    @else if $gutter == no {\n      margin: {\n        left: 0;\n        right: 0; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{$columns});\n        flex-basis: calc(100% / #{$columns}); }\n      @else if $val {\n        max-width: calc(100% / #{$columns} * #{$val});\n        flex-basis: calc(100% / #{$columns} * #{$val}); } } } }\n\n@mixin col-md($val: 0, $gutter: yes) {\n  @include media-md() {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    @if $gutter == yes {\n      margin: {\n        left: $margin / 2;\n        right: $margin / 2; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{$columns} - #{$margin});\n        flex-basis: calc(100% / #{$columns} - #{$margin}); }\n      @else if $val {\n        max-width: calc(100% / #{$columns} * #{$val} - #{$margin});\n        flex-basis: calc(100% / #{$columns} * #{$val} - #{$margin}); } }\n    @else if $gutter == no {\n      margin: {\n        left: 0;\n        right: 0; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{$columns});\n        flex-basis: calc(100% / #{$columns}); }\n      @else if $val {\n        max-width: calc(100% / #{$columns} * #{$val});\n        flex-basis: calc(100% / #{$columns} * #{$val}); } } } }\n\n@mixin col-sm($val: 0, $gutter: yes) {\n  @include media-sm() {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    @if $gutter == yes {\n      margin: {\n        left: ($margin - 5) / 2;\n        right: ($margin - 5) / 2; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{($columns / 2)} - #{($margin - 5)});\n        flex-basis: calc(100% / #{($columns / 2)} - #{($margin - 5)}); }\n      @else if $val {\n        max-width: calc(100% / #{($columns / 2)} * #{$val} - #{($margin - 5)});\n        flex-basis: calc(100% / #{($columns / 2)} * #{$val} - #{($margin - 5)}); } }\n    @else if $gutter == no {\n      margin: {\n        left: 0;\n        right: 0; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{($columns / 2)});\n        flex-basis: calc(100% / #{($columns / 2)}); }\n      @else if $val {\n        max-width: calc(100% / #{($columns / 2)} * #{$val});\n        flex-basis: calc(100% / #{($columns / 2)} * #{$val}); } } } }\n\n@mixin col-xs($val: 0, $gutter: yes) {\n  @include media-xs() {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    @if $gutter == yes {\n      margin: {\n        left: ($margin - 6) / 2;\n        right: ($margin - 6) / 2; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{($columns / 4)} - #{($margin - 6)});\n        flex-basis: calc(100% / #{($columns / 4)} - #{($margin - 6)}); }\n      @else if $val {\n        max-width: calc(100% / #{($columns / 4)} * #{$val} - #{($margin - 6)});\n        flex-basis: calc(100% / #{($columns / 4)} * #{$val} - #{($margin - 6)}); } }\n    @else if $gutter == no {\n      margin: {\n        left: 0;\n        right: 0; }\n\n      @if $val == 0 or $val == auto {\n        flex-basis: 0;\n        flex-grow: 1;\n        width: 100%; }\n      @else if $val > $columns {\n        max-width: calc(100% / #{($columns / 4)});\n        flex-basis: calc(100% / #{($columns / 4)}); }\n      @else if $val {\n        max-width: calc(100% / #{($columns / 4)} * #{$val});\n        flex-basis: calc(100% / #{($columns / 4)} * #{$val}); } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/sass/grid/mixins/_col.sass","@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-1 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 1 - 20px);\n    flex-basis: calc(100% / 24 * 1 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-2 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 2 - 20px);\n    flex-basis: calc(100% / 24 * 2 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-3 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 3 - 20px);\n    flex-basis: calc(100% / 24 * 3 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-4 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 4 - 20px);\n    flex-basis: calc(100% / 24 * 4 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-5 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 5 - 20px);\n    flex-basis: calc(100% / 24 * 5 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-6 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 6 - 20px);\n    flex-basis: calc(100% / 24 * 6 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-7 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 7 - 20px);\n    flex-basis: calc(100% / 24 * 7 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-8 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 8 - 20px);\n    flex-basis: calc(100% / 24 * 8 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-9 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 9 - 20px);\n    flex-basis: calc(100% / 24 * 9 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-10 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 10 - 20px);\n    flex-basis: calc(100% / 24 * 10 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-11 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 11 - 20px);\n    flex-basis: calc(100% / 24 * 11 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-12 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 12 - 20px);\n    flex-basis: calc(100% / 24 * 12 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-13 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 13 - 20px);\n    flex-basis: calc(100% / 24 * 13 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-14 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 14 - 20px);\n    flex-basis: calc(100% / 24 * 14 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-15 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 15 - 20px);\n    flex-basis: calc(100% / 24 * 15 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-16 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 16 - 20px);\n    flex-basis: calc(100% / 24 * 16 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-17 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 17 - 20px);\n    flex-basis: calc(100% / 24 * 17 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-18 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 18 - 20px);\n    flex-basis: calc(100% / 24 * 18 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-19 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 19 - 20px);\n    flex-basis: calc(100% / 24 * 19 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-20 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 20 - 20px);\n    flex-basis: calc(100% / 24 * 20 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-21 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 21 - 20px);\n    flex-basis: calc(100% / 24 * 21 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-22 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 22 - 20px);\n    flex-basis: calc(100% / 24 * 22 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-23 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 23 - 20px);\n    flex-basis: calc(100% / 24 * 23 - 20px);\n  }\n}\n\n@media (min-width: 1220.2px) and (min-width: 1220.2px) {\n  .col-lg-24 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 24 - 20px);\n    flex-basis: calc(100% / 24 * 24 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-1 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 1 - 20px);\n    flex-basis: calc(100% / 24 * 1 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-2 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 2 - 20px);\n    flex-basis: calc(100% / 24 * 2 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-3 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 3 - 20px);\n    flex-basis: calc(100% / 24 * 3 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-4 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 4 - 20px);\n    flex-basis: calc(100% / 24 * 4 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-5 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(100% / 24 * 5 - 20px);\n    flex-basis: calc(100% / 24 * 5 - 20px);\n  }\n}\n\n@media (min-width: 992px) and (max-width: 1220.2px) and (min-width: 992px) and (max-width: 1220.2px) {\n  .col-md-6 {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    margin-left: 10px;\n    margin-right: 10px;\n    max-width: calc(