@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-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; } }

/*controla los colores del texto de la portada*/
.caption p {
  margin: 0;
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 300;
  font-size: 18px; }

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: #181B27;
  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 5s forwards;
    -moz-animation: anim2 5s forwards;
    -o-animation: anim2 5s forwards;
    animation: anim2 3s 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 .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;
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          color: red;
          background: transparent;
          border: 1px solid red;
          text-align: center;
          line-height: 194px;
          font-size: 24px;
          bottom: 10%;
          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;
          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: 10%;
          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;
          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: 10%;
          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;
          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: 10%;
          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;
          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: 10%;
          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;
          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: 10%;
          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;
      background: #900;
      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/slide1.jpg) no-repeat center center;
          -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(1) .caption {
            position: absolute;
            width: 40%;
            text-align: right;
            border-right: 2px solid #EE250C;
            padding-right: 20px;
            right: 45%;
            top: 10%;
            text-shadow: 0 2px 10px black, 0 1px 1px rgba(0, 0, 0, 0.5);
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -ms-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
            transform: rotate(-7deg);
            -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); }
            body .buttons-wrapper .slider > li:nth-child(1) .caption h3, body .buttons-wrapper .slider > li:nth-child(1) .caption a {
              color: #EE250C; }
        body .buttons-wrapper .slider > li:nth-child(2) {
          background: url(../img/slide2.jpg) no-repeat center center;
          -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) .caption {
            position: absolute;
            width: 40%;
            text-align: right;
            border-right: 2px solid #EE250C;
            padding-right: 20px;
            right: 55%;
            bottom: 20%;
            text-shadow: 0 2px 10px black, 0 1px 1px rgba(0, 0, 0, 0.5);
            -webkit-transform: rotate(1deg) rotateY(20deg);
            -moz-transform: rotate(1deg) rotateY(20deg);
            -ms-transform: rotate(1deg) rotateY(20deg);
            -o-transform: rotate(1deg) rotateY(20deg);
            transform: rotate(1deg) rotateY(20deg);
            -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); }
            body .buttons-wrapper .slider > li:nth-child(2) .caption h3, body .buttons-wrapper .slider > li:nth-child(2) .caption a {
              color: #EE250C; }
        body .buttons-wrapper .slider > li:nth-child(3) {
          background: url(../img/slide3.jpg) no-repeat bottom center;
          -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) .caption {
            position: absolute;
            width: 35%;
            text-align: right;
            border-right: 2px solid #ddd;
            padding-right: 20px;
            right: 55%;
            bottom: 25%;
            text-shadow: 0 2px 10px black, 0 1px 1px rgba(0, 0, 0, 0.5);
            -webkit-transform: rotate(-1deg) rotateY(40deg);
            -moz-transform: rotate(-1deg) rotateY(40deg);
            -ms-transform: rotate(-1deg) rotateY(40deg);
            -o-transform: rotate(-1deg) rotateY(40deg);
            transform: rotate(-1deg) rotateY(40deg);
            -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); }
            body .buttons-wrapper .slider > li:nth-child(3) .caption h3, body .buttons-wrapper .slider > li:nth-child(3) .caption a {
              color: #fff; }
            body .buttons-wrapper .slider > li:nth-child(3) .caption h3 {
              font-size: 28px; }
            body .buttons-wrapper .slider > li:nth-child(3) .caption p {
              font-size: 16px; }
        body .buttons-wrapper .slider > li:nth-child(4) {
          background: url(../images/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; }
          body .buttons-wrapper .slider > li:nth-child(4) .caption {
            position: absolute;
            width: 40%;
            text-align: justify;
            /*border-top: 2px solid #ddd;*/
            /*padding-top: 20px;*/
            right: 30%;
            top: 32%;
            text-shadow: 0 2px 10px black, 0 1px 1px rgba(0, 0, 0, 0.5);
            -webkit-transform: rotateX(20deg);
            -moz-transform: rotateX(20deg);
            -ms-transform: rotateX(20deg);
            -o-transform: rotateX(20deg);
            transform: rotateX(20deg);
            -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); }
            body .buttons-wrapper .slider > li:nth-child(4) .caption h3, body .buttons-wrapper .slider > li:nth-child(4) .caption a {
              color: #fff; }
            body .buttons-wrapper .slider > li:nth-child(4) .caption h3 {
              font-size: 28px;
              text-align: center; }
            body .buttons-wrapper .slider > li:nth-child(4) .caption p {
              font-size: 16px;
              padding: 30px; }



@media (max-width: 768px) {
  body .buttons-wrapper .slider > li {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px; }
  body .buttons-wrapper .slider > li:nth-child(1) .caption {
    top: 5%;
    width: 80%;
    right: 10%; }
    body .buttons-wrapper .slider > li:nth-child(1) .caption h3 {
      font-size: 20px; }
    body .buttons-wrapper .slider > li:nth-child(1) .caption p {
      font-size: 12px;
      margin-top: 0;
      padding-top: 0; }
  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(2) .caption, body .buttons-wrapper .slider > li:nth-child(3) .caption {
      right: 15%;
      bottom: 25%;
      width: 80%; }
      body .buttons-wrapper .slider > li:nth-child(2) .caption h3, body .buttons-wrapper .slider > li:nth-child(3) .caption h3 {
        font-size: 20px; }
      body .buttons-wrapper .slider > li:nth-child(2) .caption p, body .buttons-wrapper .slider > li:nth-child(3) .caption p {
        font-size: 12px;
        margin-top: 0;
        padding-top: 0; }
  body .buttons-wrapper .slider > li:nth-child(3) .caption {
    width: 85%; }
  body .buttons-wrapper .slider > li:nth-child(4) {
    background-position: center bottom; }
    body .buttons-wrapper .slider > li:nth-child(4) .caption {
      width: 90%;
      right: 5%;
      top: 48%; }
      body .buttons-wrapper .slider > li:nth-child(4) .caption h3 {
        font-size: 20px; }
      body .buttons-wrapper .slider > li:nth-child(4) .caption p {
        font-size: 12px;
        margin-top: 0;
        padding-top: 0; } }