﻿.position-animations { width: 100%; }
.position-animations .container { width: 100%; max-width: 1280px; }
.position-animations .container.right { float: none; width: 0%; }
.position-animations ul.background-images li { float: left; max-width: 1400px; }
.position-animations { max-width: 1400px; overflow: hidden; position: relative; margin: 0 auto; }
.full-bleed .position-animations { max-width: none; width: 100%; }
.full-bleed .position-animations ul.background-images li { max-width: none; width: 100%; }
.full-bleed .position-animations ul.background-images li img,
.full-bleed .position-animations ul.positions li img { width: 100%; }
.position-animations ul.background-images { position: relative; }
.position-animations ul.positions { width: 100%; position: absolute; }
.position-animations ul.positions li { display: none; width: 100%; }
.position-animations ul.positions.right li span { position: absolute; color: White; bottom: 6%; left: 63%; z-index: 9; }
.position-animations ul.positions.right li { *position: relative; *top: -100%; *left: -1%; }
.position-animations ul.positions.bottom li span { position: absolute; color: White; bottom: 1.5%; left: 13%; }
.position-animations .block-plugins .stacked30 > div { margin-bottom: 20px; }
.position-animations .block-plugins .stacked20 > div { margin-bottom: 30px; }
.position-animations .block-plugins .stacked30 > a { margin-bottom: 20px; }
.position-animations .block-plugins .stacked20 > a { margin-bottom: 30px; }
.position-animations .nav-content { max-width: 1152px; margin: 0 auto; }
.position-animations .nav-arrows { width: 100%; /* margin-top: 30%;*/ position: absolute; z-index: 8; bottom: 5%; }
.position-animations .prev { float: left; cursor: pointer; height: 25px; width: 15px; background-image: url(/Surface/Assets/img/RTM/arrow_left.png); background-repeat: no-repeat; }
.position-animations .next { float: left; cursor: pointer; height: 25px; width: 15px; background-image: url(/Surface/Assets/img/RTM/arrow_right.png); background-repeat: no-repeat; }
.position-animations .nav-arrows .prev a { height: 25px; width: 15px; display: inline-block; }
.position-animations .nav-arrows .next a { height: 25px; width: 15px; display: inline-block; }
.position-animations .nav-arrows .pagination li a { height: 15px; width: 15px; display: inline-block; }
.position-animations .container .inner-content { position: absolute; min-width: 250px; z-index: 10; margin-top: 65px; margin-left: 5%; width: 27%; *top: -2%; }
#medium-content .container .inner-content { width: 35%; }
#large-content .container .inner-content { width: 44%; }
.position-animations .container.right .inner-content { padding-left: 9%; }
/*.position-animations .container .inner-content h1,.position-animations .inner-content h2,.position-animations .inner-content p{color:#fff;}*/
.position-animations .container .inner-content h1, .position-animations .container .inner-content h2.h1toh2 { margin-bottom: 5px; }
.position-animations .container .inner-content .subheading { margin-bottom: 15px; }
.position-animations ul.positions img { max-width: 100% !important; }
.position-animations ul.pagination li { width: 15px; height: 15px; margin-right: 14px; background-image: url(/Surface/Assets/img/RTM/pagination_blue_gray.png); float: left; cursor: pointer; background-repeat: no-repeat; }
.position-animations.voilet ul.pagination li { width: 15px; height: 15px; margin-right: 14px; background-image: url(/Surface/Assets/img/RTM/pagination_voilet_gray.png); float: left; cursor: pointer; background-repeat: no-repeat; }
.position-animations .pagination-holder { position: relative; top: -45px; z-index: 30; }
.position-animations ul.pagination { /*left: 50%;*/ margin: 5px 5px 0 20px; display: inline-block; float: left; }
.position-animations ul.pagination li.selected { background-position: -25px 0; }
.positions li span a:hover { color: #fff; }
.positions li span a { font-size: 1.125em; font-weight: normal; letter-spacing: -0.02em; display: inline-block; cursor: pointer; }
.ja-JP .positions li span a { font-family: "Meiryo UI", "Meiryo", Arial, sans-serif; }
.positions li span a.skyblue { color: #0078d7; }
/*.positions li span a.white{color:#fff;}*/
.positions li span a i { display: inline-block; vertical-align: middle; background-repeat: no-repeat; height: 33px; width: 33px; margin: -2px 7px 0 4px; background-position: 0 0; }

@media only screen and (min-width:641px) and (max-width:960px) {

    .position-animations .container .inner-content { width: 30%; min-width: 200px; margin-top: 17px; margin-left: 0px; }
    .position-animations ul.pagination { bottom: 12%; }
    .position-animations ul.positions li span { left: 64.4%; }
    .position-animations .container { width: 86%; margin: 0 auto; }
    .position-animations .container.right .inner-content { padding-left: 16%; }
}

@media only screen and (max-width:640px) {
    .position-animations .nav-arrows { width: 94%; padding: 0 3% 0 3%; margin-top: 61%; top: 8%; bottom: auto; }
    .position-animations .container .inner-content { width: 100%; position: static; clear: both; margin-top: 47px; left: 0px; margin-left: 0px; }
    .position-animations .container.right .inner-content { width: 100%; position: static; clear: both; margin-top: 17px; left: 0px; margin-left: 0px; padding-left: 0%; }
    /*.position-animations .container .inner-content h1,.position-animations .inner-content h2,.position-animations .inner-content p{color:#373936;}*/
    .position-animations .container .inner-content h1, .position-animations .container .inner-content h2.h1toh2 { /*color:#09aeef;*/ padding-top: 35px; }
    .position-animations ul.pagination { position: relative; top: 10%; }
    .position-animations .background-images li { margin-bottom: 15px; }
    .position-animations .inner-content { width: 80%; }
    .position-animations .nav-arrows .prev, .next { display: none; }
    .position-animations .positions li span { display: none; }
    .position-animations .container { width: 80%; clear: both; margin: 0 auto; }
    .position-animations .container.right { width: 90%; clear: both; margin: 0 auto; }
    .position-animations ul.positions img { max-width: 100% !important; }
}

@media screen and (min-width:1400px) {
    .position-animations ul.background-images li { min-width: 1400px; }
}
