@charset "UTF-8";
/*
	Приватный модуль для генерации брейкпоинтов.
*/
/*
	@module
		title: mixins *n
		type: scss *n
		caption:
			p{ Модуль добавляет в систему заранее подготовленные
			миксины, которые используются в коде. }p
			p{ Чтобы использовать миксины - вставвьте нужный миксин
			в код при помощи директивы bd{ @include my-mixin(mixin-values); }}p
		*n
*/
/*--------------------------------------------------------------------------
	Background and Border Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: background-clip() *n caption: *n arguments: $clip *n
		return: -webkit-, -moz-, -ms-, -o- *n */
/*@mixin
		name: background-origin() *n caption: *n arguments: $origin *n
		return: -webkit-, -moz-, -ms-, -o- *n */
/*@mixin
		name: background-size() *n caption: *n arguments: $size *n
		return: -webkit-, -moz-, -ms-, -o- *n */
/*@mixin
		name: border-bottom-left-radius() *n caption: *n arguments: $radius *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: border-bottom-right-radius() *n caption: *n arguments: $radius *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: border-top-right-radius() *n caption: *n arguments: $radius *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: border-top-left-radius() *n caption: *n arguments: $radius *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: border-radius() *n caption: *n arguments: $radius *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: box-shadow() *n caption: *n arguments: $shadow *n
		return: -webkit-, -moz- *n */
/*--------------------------------------------------------------------------
	Flexible Box Layout
--------------------------------------------------------------------------*/
/*@mixin
		name: align-content() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit- *n */
/*@mixin
		name: align-items() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit- *n */
/*@mixin
		name: align-self() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit- *n */
/*@mixin
		name: flex() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit-, -moz-, -ms- *n */
/*@mixin
		name: flex-basis() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: flex-direction() *n caption: bd{flexbox} *n arguments: $direction *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: flex-flow() *n caption: bd{flexbox} *n arguments: $flow *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: flex-grow() *n caption: bd{flexbox} *n arguments: $grow *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: flex-shirk() *n caption: bd{flexbox} *n arguments: $shirk *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: flex-wrap() *n caption: bd{flexbox} *n arguments: $wrap *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: justify-content() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: order() *n caption: bd{flexbox} *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*--------------------------------------------------------------------------
	Text Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: tab-size() *n caption: bd{flexbox} *n arguments: $type *n
		return: -o-, -moz- *n */
/*--------------------------------------------------------------------------
	Animation Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: keyframes() *n caption: animations *n arguments: $name *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-delay() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-direction() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-duration() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-fill-mode() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-iteration-count() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-timing-function() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: animation-play-state() *n caption: animations *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*--------------------------------------------------------------------------
	Transform Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: backface-visibility() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: perspective() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: perspective-origin() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: transform() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz-, -ms-, -o- *n */
/*@mixin
		name: transform-origin() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz-, -ms-, -o- *n */
/*@mixin
		name: transform-style() *n caption: transformations *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*--------------------------------------------------------------------------
	Transitions Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: transition() *n caption: transitions *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: transition-property() *n caption: transitions *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: transition-duration() *n caption: transitions *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: transition-timing-function() *n caption: transitions *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*@mixin
		name: transition-delay() *n caption: transitions *n arguments: $type *n
		return: -webkit-, -moz-, -o- *n */
/*--------------------------------------------------------------------------
	Basic User Interface Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: box-sizing() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: outline-offset() *n caption: UI *n arguments: $type *n
		return: -webkit- *n */
/*@mixin
		name: resize() *n caption: UI *n arguments: $type *n
		return: -moz- *n */
/*@mixin
		name: text-overflow() *n caption: UI *n arguments: $type *n
		return: -o- *n */
/*--------------------------------------------------------------------------
	Multi-column Layout Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: column-count() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-gap() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-rule() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-rule-color() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-rule-style() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-rule-width() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-rule-span() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: column-width() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*@mixin
		name: columns() *n caption: UI *n arguments: $type *n
		return: -webkit-, -moz- *n */
/*--------------------------------------------------------------------------
	Filter Effects Properties
--------------------------------------------------------------------------*/
/*@mixin
		name: filter() *n caption: UI *n arguments: $properties *n
		return: -webkit-, -moz-, -o- *n */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

@-webkit-keyframes anim {
  0% {
    line-height: 54px; }
  5% {
    line-height: 100px; }
  10% {
    line-height: 54px; }
  15% {
    line-height: 100px; }
  20% {
    line-height: 54px; }
  100% {
    line-height: 54px; } }

@-moz-keyframes anim {
  0% {
    line-height: 54px; }
  5% {
    line-height: 100px; }
  10% {
    line-height: 54px; }
  15% {
    line-height: 100px; }
  20% {
    line-height: 54px; }
  100% {
    line-height: 54px; } }

@-o-keyframes anim {
  0% {
    line-height: 54px; }
  5% {
    line-height: 100px; }
  10% {
    line-height: 54px; }
  15% {
    line-height: 100px; }
  20% {
    line-height: 54px; }
  100% {
    line-height: 54px; } }

@keyframes anim {
  0% {
    line-height: 54px; }
  5% {
    line-height: 100px; }
  10% {
    line-height: 54px; }
  15% {
    line-height: 100px; }
  20% {
    line-height: 54px; }
  100% {
    line-height: 54px; } }

h3 {
  color: #fff;
  font-size: 34px;
  margin: 0 0 10px; }

p {
  margin: 0;
  padding-top: 10px;
  color:#fff;
  font-weight: 300;
  font-size: 18px; }

.blanco p { color: white; }

plegal {
  margin: 0;
  padding-top: 10px;
  color:#333;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  }
-->
a {
  display: inline-block;
  text-decoration: none; }

@-webkit-keyframes anim2 {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes anim2 {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes anim2 {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes anim2 {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

body {
  background: #000;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: tahoma, sans-serif; }
  body .buttons-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-animation: anim2 1s forwards;
    -moz-animation: anim2 1s forwards;
    -o-animation: anim2 1s forwards;
    animation: anim2 1s forwards;
    /*buttons*/ }
    body .buttons-wrapper input {
      display: none;
      /* captions */
      /*buttons*/ }
      body .buttons-wrapper input:nth-child(1) {
        top: 10px;
        left: 100px; }
      body .buttons-wrapper input:nth-child(2) {
        top: 10px;
        left: 200px; }
      body .buttons-wrapper input:nth-child(3) {
        top: 10px;
        left: 300px; }
      body .buttons-wrapper input:nth-child(4) {
        top: 10px;
        left: 400px; }
      body:not(.gracias) .buttons-wrapper input:nth-child(1):checked ~ .slider > li:nth-child(1) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        z-index: 2; }
      body .buttons-wrapper input:nth-child(1):checked ~ .slider > li:nth-child(2) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg); }
      body .buttons-wrapper input:nth-child(1):checked ~ .slider > li:nth-child(3) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg); }
      body .buttons-wrapper input:nth-child(1):checked ~ .slider > li:nth-child(4) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-260deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-260deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-260deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-260deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-260deg); }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider > li:nth-child(1) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg); }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider > li:nth-child(2) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        z-index: 2; }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider > li:nth-child(3) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg); }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider > li:nth-child(4) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-180deg); }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider > li:nth-child(1) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg); }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider > li:nth-child(2) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg); }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider > li:nth-child(3) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        z-index: 2; }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider > li:nth-child(4) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(-90deg); }
      body .buttons-wrapper input:nth-child(4):checked ~ .slider > li:nth-child(1) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(260deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(260deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(260deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(260deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(260deg); }
      body .buttons-wrapper input:nth-child(4):checked ~ .slider > li:nth-child(2) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(180deg); }
      body .buttons-wrapper input:nth-child(4):checked ~ .slider > li:nth-child(3) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(90deg); }
      body .buttons-wrapper input:nth-child(4):checked ~ .slider > li:nth-child(4) {
        -webkit-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -moz-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -ms-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        -o-transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        transform: perspective(100em) translate3d(0, 0, -50vh) rotateX(0deg);
        z-index: 2; }
      body .buttons-wrapper input:nth-child(1):checked ~ .slider li:nth-child(2) .caption {
        -webkit-transform: rotate(1deg) rotateY(20deg) translate(0, 100%);
        -moz-transform: rotate(1deg) rotateY(20deg) translate(0, 100%);
        -ms-transform: rotate(1deg) rotateY(20deg) translate(0, 100%);
        -o-transform: rotate(1deg) rotateY(20deg) translate(0, 100%);
        transform: rotate(1deg) rotateY(20deg) translate(0, 100%); }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider li:nth-child(1) .caption {
        -webkit-transform: rotate(-7deg) translate(0, -100%);
        -moz-transform: rotate(-7deg) translate(0, -100%);
        -ms-transform: rotate(-7deg) translate(0, -100%);
        -o-transform: rotate(-7deg) translate(0, -100%);
        transform: rotate(-7deg) translate(0, -100%); }
      body .buttons-wrapper input:nth-child(2):checked ~ .slider li:nth-child(3) .caption {
        -webkit-transform: rotate(-1deg) rotateY(40deg) translate(0, 100%);
        -moz-transform: rotate(-1deg) rotateY(40deg) translate(0, 100%);
        -ms-transform: rotate(-1deg) rotateY(40deg) translate(0, 100%);
        -o-transform: rotate(-1deg) rotateY(40deg) translate(0, 100%);
        transform: rotate(-1deg) rotateY(40deg) translate(0, 100%); }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider li:nth-child(2) .caption {
        -webkit-transform: rotate(1deg) rotateY(20deg) translate(0, -100%);
        -moz-transform: rotate(1deg) rotateY(20deg) translate(0, -100%);
        -ms-transform: rotate(1deg) rotateY(20deg) translate(0, -100%);
        -o-transform: rotate(1deg) rotateY(20deg) translate(0, -100%);
        transform: rotate(1deg) rotateY(20deg) translate(0, -100%); }
      body .buttons-wrapper input:nth-child(3):checked ~ .slider li:nth-child(4) .caption {
        -webkit-transform: translate(0, 100%) rotateX(20deg);
        -moz-transform: translate(0, 100%) rotateX(20deg);
        -ms-transform: translate(0, 100%) rotateX(20deg);
        -o-transform: translate(0, 100%) rotateX(20deg);
        transform: translate(0, 100%) rotateX(20deg); }
      body .buttons-wrapper input:nth-child(4):checked ~ .slider li:nth-child(3) .caption {
        -webkit-transform: rotate(-1deg) rotateY(40deg) translate(0, -100%);
        -moz-transform: rotate(-1deg) rotateY(40deg) translate(0, -100%);
        -ms-transform: rotate(-1deg) rotateY(40deg) translate(0, -100%);
        -o-transform: rotate(-1deg) rotateY(40deg) translate(0, -100%);
        transform: rotate(-1deg) rotateY(40deg) translate(0, -100%); }
      body .buttons-wrapper input:nth-child(1):checked ~ label {
        display: none; }
        body .buttons-wrapper input:nth-child(1):checked ~ label:nth-of-type(2) {
            display: block;
	    z-index: 999;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #fff;
          background: transparent;
          border: 5px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          bottom: 30px;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: anim 3s infinite;
          -moz-animation: anim 3s infinite;
          -o-animation: anim 3s infinite;
          animation: anim 3s infinite; }
          body .buttons-wrapper input:nth-child(1):checked ~ label:nth-of-type(2):after {
            content: '↓'; }
          body .buttons-wrapper input:nth-child(1):checked ~ label:nth-of-type(2):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 100px;
            -webkit-animation: none;
            -moz-animation: none;
            -o-animation: none;
            animation: none; }
      body .buttons-wrapper input:nth-child(2):checked ~ label {
        display: none; }
        body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(3) {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #000;
          background: transparent;
          border: 5px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          bottom: 20%;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: anim 3s infinite;
          -moz-animation: anim 3s infinite;
          -o-animation: anim 3s infinite;
          animation: anim 3s infinite;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none; }
          body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(3):after {
            content: '↓'; }
          body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(3):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 100px;
            -webkit-animation: none;
            -moz-animation: none;
            -o-animation: none;
            animation: none; }
        body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(1) {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #fff;
          background: transparent;
          border: 5px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          top: 2%;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none; }
          body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(1):after {
            content: '↑'; }
          body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(1):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 1px; }
            body .buttons-wrapper input:nth-child(2):checked ~ label:nth-of-type(1):hover:after {
              display: block;
              margin-top: -10px; }
      body .buttons-wrapper input:nth-child(3):checked ~ label {
        display: none; }
        body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(4) {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #fff;
          background: transparent;
          border: 1px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          bottom: 15%;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: anim 3s infinite;
          -moz-animation: anim 3s infinite;
          -o-animation: anim 3s infinite;
          animation: anim 3s infinite;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none; }
          body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(4):after {
            content: '↓'; }
          body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(4):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 100px;
            -webkit-animation: none;
            -moz-animation: none;
            -o-animation: none;
            animation: none; }
        body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(2) {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #fff;
          background: transparent;
          border: 5px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          top: 2%;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none; }
          body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(2):after {
            content: '↑'; }
          body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(2):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 1px; }
            body .buttons-wrapper input:nth-child(3):checked ~ label:nth-of-type(2):hover:after {
              display: block;
              margin-top: -10px; }
      body .buttons-wrapper input:nth-child(4):checked ~ label {
        display: none; }
        body .buttons-wrapper input:nth-child(4):checked ~ label:nth-of-type(3) {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: #fff;
          background: transparent;
          border: 1px solid #fff;
          text-align: center;
          line-height: 54px;
          font-size: 24px;
          top: 2%;
          left: 50%;
          cursor: pointer;
          -webkit-transform-origin: center center;
          -moz-transform-origin: center center;
          -ms-transform-origin: center center;
          -o-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translate(-50%, 0) scale(0.8);
          -moz-transform: translate(-50%, 0) scale(0.8);
          -ms-transform: translate(-50%, 0) scale(0.8);
          -o-transform: translate(-50%, 0) scale(0.8);
          transform: translate(-50%, 0) scale(0.8);
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none;
          -webkit-animation: none;
          -moz-animation: none;
          -o-animation: none;
          animation: none; }
          body .buttons-wrapper input:nth-child(4):checked ~ label:nth-of-type(3):after {
            content: '↑'; }
          body .buttons-wrapper input:nth-child(4):checked ~ label:nth-of-type(3):hover {
            -webkit-transform: translate(-50%, 0) scale(1);
            -moz-transform: translate(-50%, 0) scale(1);
            -ms-transform: translate(-50%, 0) scale(1);
            -o-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
            font-size: 44px;
            line-height: 1px; }
            body .buttons-wrapper input:nth-child(4):checked ~ label:nth-of-type(3):hover:after {
              display: block;
              margin-top: -10px; }
          body .buttons-wrapper input:nth-child(4):checked ~ label:nth-of-type(3):hover {
            color: #2D3D59; }
    body .buttons-wrapper label {
      display: block;
      width: 40px;
      height: 40px;
      position: fixed;
      backface-visibility: hidden;
      z-index: 10;
      bottom: 100px;
      left: 100px;
      /*↑↓*/ }
    body .buttons-wrapper .slider {
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      z-index: 2;
      opacity: .99; }
      body .buttons-wrapper .slider > li {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: 3s cubic-bezier(0.5, 0, 0, 0.99);
        -moz-transition: 3s cubic-bezier(0.5, 0, 0, 0.99);
        -o-transition: 3s cubic-bezier(0.5, 0, 0, 0.99);
        transition: 3s cubic-bezier(0.5, 0, 0, 0.99);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        /* -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px; */
        /*opacity: .5;*/ }
        body .buttons-wrapper .slider > li:nth-child(1) {
          background: url(../img/slider/slide1.jpg) no-repeat center left;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -ms-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
          
            
        body .buttons-wrapper .slider > li:nth-child(2) {
          background: url(../img/slider/slide2.jpg) no-repeat center left;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -ms-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
           
        body .buttons-wrapper .slider > li:nth-child(3) {
          background: url(../img/slider/slide3.jpg) no-repeat bottom left;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -ms-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
           
        body .buttons-wrapper .slider > li:nth-child(4) {
          background: url(../img/slider/slide4.jpg) no-repeat bottom left;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -ms-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
          


@media (max-width: 768px) {
	body .buttons-wrapper {
    /*position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-animation: anim2 1s forwards;
    -moz-animation: anim2 1s forwards;
    -o-animation: anim2 1s forwards;
    animation: anim2 1s forwards;*/
    max-height: 60%;
	overflow-y: hidden;
}
  body .buttons-wrapper .slider > li {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px; }
  
  body .buttons-wrapper .slider > li:nth-child(2), body .buttons-wrapper .slider > li:nth-child(3) {
    background-position: 20% center; }
  body .buttons-wrapper .slider > li:nth-child(4) {
    background-position: center bottom; }
	
 body .buttons-wrapper .slider > li:nth-child(1) {
          background: url(../img/slider/slide1.jpg) no-repeat center left;
          -webkit-background-size: 100%;
          -moz-background-size: 100%;
          -ms-background-size: 100%;
          -o-background-size: 100%;
          background-size: 100%;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
          
            
        body .buttons-wrapper .slider > li:nth-child(2) {
          background: url(../img/slider/slide2.jpg) no-repeat center left;
          -webkit-background-size: 100%;
          -moz-background-size: 100%;
          -ms-background-size: 100%;
          -o-background-size: 100%;
          background-size: 100%;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
           
        body .buttons-wrapper .slider > li:nth-child(3) {
          background: url(../img/slider/slide3.jpg) no-repeat bottom left;
          -webkit-background-size: 100%;
          -moz-background-size: 100%;
          -ms-background-size: 100%;
          -o-background-size: 100%;
          background-size: 100%;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
           
        body .buttons-wrapper .slider > li:nth-child(4) {
          background: url(../img/slider/slide4.jpg) no-repeat bottom left;
          -webkit-background-size: 100%;
          -moz-background-size: 100%;
          -ms-background-size: 100%;
          -o-background-size: 100%;
          background-size: 100%;
          -webkit-transform-origin: center center -50vh;
          -moz-transform-origin: center center -50vh;
          -ms-transform-origin: center center -50vh;
          -o-transform-origin: center center -50vh;
          transform-origin: center center -50vh; }
          	
	
        }