@charset "UTF-8";

html, body {
  margin: 0;
  padding: 0;
}

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 30px;
}

/*
  ---
  name: Heading
  category:
    - mod/heading
    - base
  tag:
    - latest
    - base
  ---

  Heading styles.

  * Base Heading style.
  * Use `h` tag.

  ```jade
  h1 Heading
  ```
  */

.section h1 {
  font-family: 'Raleway', sans-serif;
  margin: 15px 0;
}

.carousel-wrapper {
  padding-top: 66.94%;
  position: relative;
  overflow: hidden;
}

.carousel-wrapper h1 {
  font-family: 'Raleway', sans-serif;
}

.carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.carousel-inner.animate-prev{
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  transition-duration: .4s;
}

.carousel-inner.animate-next{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition-duration: .4s;
}

.carousel-item img {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.carousel-item.carousel-item--current{
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.carousel-item.carousel-item--prev{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.carousel-item.carousel-item--next{
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

/*
---
name: Pager
category:
  - mod/pager
  - base
tag:
  - latest
  - base
---

Pager styles.

* Base Pager style.
* Use `pager-item` class.

```jade
.pager-inner
  li.pager-item
    .pager-indicator.is-active
  li.pager-item
    .pager-indicator
  li.pager-item
    .pager-indicator
```
*/

.carousel-pager {
  width: 192px;
  height: 15px;
  margin: 15px auto;
  overflow: hidden;
  z-index: 1;
}

.pager-wrapper {
  width: 100%;
  position: relative;
  z-index: 1;
}

.pager-inner {
  margin: 0 auto;
  padding: 0;
  font-size: 0;
  text-align: center;
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.pager-item {
  width: 12px;
  height: 15px;
  position: relative;
  display: inline-block;
  margin: 0 10px;
  transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease;

}

.pager-item .pager-indicator {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background-color: #dedede;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
  font-size: 0px;
  text-indent: -999px
}

.pager-item .pager-indicator::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #65baf9;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: -webkit-transform 0s linear;
  transition: transform 0s linear;
  transition: transform 0s linear, -webkit-transform 0s linear;
}

.pager-item .pager-indicator.is-active{}

.pager-item .pager-indicator.is-active::after{
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: -webkit-transform .3s linear .05s;
  transition: transform .3s linear .05s;
  transition: transform .3s linear .05s, -webkit-transform .3s linear .05s;
}

.pager-item .pager-indicator.is-small{
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.pager-item .pager-indicator.is-small--last{
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}