.js-transitions-disabled *
    transition: none !important
    
.carousel
    position: relative
    height: 100%
    overflow: hidden
    perspective: 50vw
    perspective-origin: 50% 50%
    
.carousel__control
    position: absolute
    height: 160px
    width: 40px
    background: #fff
    right: 0
    top: 0
    bottom: 0
    margin: auto
    z-index: 1
    
    a
      position: relative
      display: block
      width: 100%
      padding-top: 75%
      box-sizing: border-box
      
      &:hover:before
        background-color: rgba(0, 0, 0,0.4)
        
      &.active:before
      &.active:hover:before
        background-color: rgba(0, 0, 0,0.6)
      
      &:first-child
        margin-top: 15px
      
      &:before
        position: absolute
        top: 50%
        left: 0
        right: 0
        margin: auto
        border-radius: 50%
        padding-top: 25%
        width: 25%
        background: rgba(0, 0, 0, 0.2)
        content: ''
        display: block
        margin-top: -12.5%
    
.carousel__stage
    position: absolute
    top: $page-margin-y
    bottom: $page-margin-y
    left: $page-margin-x
    right: $page-margin-x
    margin: auto
    transform-style: preserve-3d
    transform: translateZ($neg-half-height)
    
.spinner 
    position: absolute
    width: $width
    height: $height
    top: 0
    left: 0
    right: auto
    bottom: 0
    margin: auto
    transform-style: preserve-3d
    transition: transform $transition-dur
    backface-visibility: hidden
    transform-origin: 50% 50%
    transform: rotateX(0)
    
    .js-spin-fwd &
        transform: rotateX(-90deg)
        
    .js-spin-bwd &
        transform: rotateX(90deg)
        
.spinner--right 
    .js-spin-fwd &
        transform: rotateX(90deg)
        
    .js-spin-bwd &
        transform: rotateX(-90deg)
        
.spinner--right
    right: 0
    left: auto
        
.spinner__face
    display: none
    position: absolute
    width: 100%
    height: 100%
    overflow: hidden
        
    &.js-next
        display: block
        transform: rotateX(90deg) translateZ($half-height)
        
        .spinner--right &
            transform: rotateX(270deg) translateZ($half-height)
            
    .js-spin-bwd & 
      &.js-next
        transform: rotateX(-90deg) translateZ($half-height)
        
.js-spin-bwd
    .spinner--right
        .spinner__face.js-next
            transform: rotateX(-270deg) translateZ($half-height)
    
.js-active
    display: block
    transform: translateZ($half-height)

// -- Content

.content
    position: absolute
    width: 200%
    height: 100%
    left: 0
    
    .spinner--right &
        left: -100%
    
.content__left
.content__right
    position: absolute
    left: 0
    top: 0
    width: 50%
    height: 100%
    
.content__right
    right: 0
    left: auto
    
.content__left
    background-repeat: no-repeat
    background-size: cover
    
    &:after
        position: absolute
        display: block
        content: ""
        width: 100%
        height: 100%
        background-color: rgba(0, 0, 0, 0.1)
    
    h1
        position: absolute
        top: 50%
        margin-top: -3vw
        text-align: center
        font-family: oswald
        font-size: 5vw
        height: 10vw
        opacity: 1
        color: #fff
        width: 100%
        letter-spacing: 0.15em
        line-height: 0.6
        
    span
        font-size: 1vw
        font-weight: 300
        letter-spacing: 0.2em
        opacity: 0.9
        font-family: Merriweather
        
.content__right
    display: flex
    align-items: center
    justify-content: center

    .content__main
        position: absolute
        font-family: Merriweather, serif
        text-align: left
        color: #fff
        font-size: 1.3vw
        padding: 0 8vw
        line-height: 1.65
        font-weight: 300
        margin: 0
        opacity: 0.8
        
        p:last-child
          // font-style:italic
          text-transform: uppercase
          letter-spacing: 0.15em
          font-size: 0.85em
        
    .content__index
        font-size: 30vh
        position: absolute
        right: -1vh
        top: 35vh
        opacity: 0.04
        font-family: oswald
        color: #fff

[data-type="iceland"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/iceland.jpg')
        
        .spinner--right &
            background-image: none
            
[data-type="china"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/china.jpg')
        
        .spinner--right &
            background-image: none
            
[data-type="usa"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/usa.jpg')
        
        .spinner--right &
            background-image: none
            
[data-type="peru"]
    .content__left
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/peru.jpg')
        
        .spinner--right &
            background-image: none