/* Default blocks */
.animation-block-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: relative;
  padding: 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.animation-block-container b {
  width: 100%;
  display: block !important; }

.animation-block__inform {
  display: block;
  max-width: 900px;
  margin: 15px auto 50px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

@media (max-width: 900px) {
  .animation-block__inform {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; } }

.animation-block__title, .animation-block__text {
  /* header blocks (title + description)*/
  width: 100%;
  font-size: 16px;
  text-align: center; }

.animation-block__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 20px; }

.animation-block__text {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
  font-family: "Futura", sans-serif;
  font-weight: 400 !important; }

.animation-block-items-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline; }

.animation-block-items {
  /* all left side items */
  width: 50%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-right: 40px; }

.animation-block-item {
  /* one left side item (title + description) */
  cursor: pointer;
  max-height: 50px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  overflow: hidden; }

.activeText {
  /* active state for left sie item */
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  max-height: 300px;
  /* this line gives you ability to animate the popup text.
    if the text will be long - you can increase this value  */
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s; }

@media (min-width: 900px) {
  .animation-block-item__title:before {
    content: '+';
    margin-right: 8px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 25px;
    height: 25px;
    border: 1px solid black;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    font-weight: 300; }
  .activeText .animation-block-item__title:before {
    content: '-';
    margin-right: 8px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 25px;
    height: 25px;
    border: 1px solid black;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-align: end;
    -webkit-align-items: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    font-weight: 300;
    line-height: 30px; } }

.animation-block-item__title {
  /* title of item */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
  padding: 10px 0;
  font-weight: 500;
  font-family: "Futura", sans-serif; }

.animation-block-item__text {
  /* title of item */
  font-size: 16px;
  padding: 10px 0;
  font-weight: 400 !important;
  font-family: "Futura", sans-serif; }

.animation-block-image {
  /* images blocks with animations */
  position: relative;
  width: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 500px; }

.item:nth-child(1) {
  z-index: 1 !important; }

@media (max-width: 900px) {
  .animation-block-container {
    overflow: hidden;
    padding: 10px; }
  .animation-block-items-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    width: 100%; }
  .animation-block-items {
    width: 100%;
    padding-right: 0;
    padding-bottom: 10px; }
  .animation-block-item {
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content; }
  .animation-block-item:not(:last-child) {
    padding-right: 25px; }
  .animation-block-image {
    /* images blocks with animations */
    min-width: 290px;
    min-height: 280px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content; }
  .activeText {
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content; }
  /* custom scroll bar */
  .animation-block-items::-webkit-scrollbar {
    height: 4px;
    width: 0; }
  .animation-block-items::-webkit-scrollbar-track {
    background: #aaa; }
  .animation-block-items::-webkit-scrollbar-thumb {
    background: #555;
    -webkit-border-radius: 2px;
            border-radius: 2px; } }

/* Default blocks */
.animation-block-image .item {
  /* one block (button + image)  */
  position: absolute;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  top: -webkit-calc( var(--n) * 35px);
  top: calc( var(--n) * 35px);
  /* Dynamic moving blocks down according to images order */
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  /* For animation */ }

.animation-block-image .item img {
  width: 600px;
  /* Temporary, you can change it */
  min-height: 40px; }

@media (max-width: 900px) {
  .animation-block-image .item {
    /* one block (button + image)  */
    top: -webkit-calc( var(--n) * 30px);
    top: calc( var(--n) * 30px);
    /* Dynamic moving blocks down according to images order */ }
  .animation-block-image .item img {
    width: 330px;
    /* Temporary, you can change it */
    min-height: 33px; } }

/* animation for Items  */
.animation-block-image .item.active, .animation-block-image .item.activeWithoutFirst {
  top: -webkit-calc( var(--n) * 40px + 20px);
  top: calc( var(--n) * 40px + 20px);
  /* Move active block down*/ }

.animation-block-image .item.afterActive {
  top: -webkit-calc( var(--n) * 40px + 50px);
  top: calc( var(--n) * 40px + 50px);
  /* All blocks after active block should move down too */ }

@media (max-width: 900px) {
  .animation-block-image .item.active, .animation-block-image .item.activeWithoutFirst {
    top: -webkit-calc( var(--n) * 30px + 20px);
    top: calc( var(--n) * 30px + 20px);
    /* Move active block down*/ }
  .animation-block-image .item.afterActive {
    top: -webkit-calc( var(--n) * 30px + 40px);
    top: calc( var(--n) * 30px + 40px);
    /* All blocks after active block should move down too */ } }

/* animation for Items */
/* Buttons next to images */
.animation-block-image .item button {
  position: absolute;
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background: white;
  color: white;
  font-size: 1px;
  border: 1px solid black;
  height: 14px;
  width: 14px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s; }

.animation-block-image .item button {
  left: 0;
  top: 15px; }

.animation-block-image .item:not(:first-child).active button, .animation-block-image .item.colored button {
  border: 1px solid #78A300;
  height: 25px;
  width: 25px;
  font-size: 16px;
  color: black; }

/*# sourceMappingURL=maps/animation-slider.css.map */