/*
	Soma CSS Library
	
	First version: 1.0.0
	First release: 2019-03-10
	
	Last version: 1.0.0
	Last release: 2019-03-10

	Author: Shakiba Moshiri
*/
/*

*/
.soma {
  display: block;
  height: 100%;
  min-height: 300px;
  direction: ltr;
  overflow: hidden;
  position: relative; }
  .soma input[type="radio"],
  .soma input[type="checkbox"] {
    display: none; }

.content-z > * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.content-z.items-center > * {
  margin: auto; }

.full-height {
  height: 100%; }

.full-width {
  width: 100%; }

.carousel-x {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  position: relative; }
@keyframes toolTipUpDown {
  50% {
    top: -40px; } }
@keyframes arrowUpDown {
  50% {
    top: -14px; } }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-item {
    transform: translateX(-0%); }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-indicator label:nth-of-type(1) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-indicator label:nth-of-type(1) + label::before, .carousel-x input:nth-of-type(1):checked ~ .carousel-x-indicator label:nth-of-type(1) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-indicator label:nth-of-type(1) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-indicator label:nth-of-type(1) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(1) + label {
    display: block; }
  .carousel-x input:nth-of-type(1):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(1) {
    display: block; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-item {
    transform: translateX(-100%); }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-indicator label:nth-of-type(2) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-indicator label:nth-of-type(2) + label::before, .carousel-x input:nth-of-type(2):checked ~ .carousel-x-indicator label:nth-of-type(2) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-indicator label:nth-of-type(2) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-indicator label:nth-of-type(2) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(2) + label {
    display: block; }
  .carousel-x input:nth-of-type(2):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(2) {
    display: block; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-item {
    transform: translateX(-200%); }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-indicator label:nth-of-type(3) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-indicator label:nth-of-type(3) + label::before, .carousel-x input:nth-of-type(3):checked ~ .carousel-x-indicator label:nth-of-type(3) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-indicator label:nth-of-type(3) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-indicator label:nth-of-type(3) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(3) + label {
    display: block; }
  .carousel-x input:nth-of-type(3):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(3) {
    display: block; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-item {
    transform: translateX(-300%); }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-indicator label:nth-of-type(4) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-indicator label:nth-of-type(4) + label::before, .carousel-x input:nth-of-type(4):checked ~ .carousel-x-indicator label:nth-of-type(4) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-indicator label:nth-of-type(4) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-indicator label:nth-of-type(4) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(4) + label {
    display: block; }
  .carousel-x input:nth-of-type(4):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(4) {
    display: block; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-item {
    transform: translateX(-400%); }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-indicator label:nth-of-type(5) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-indicator label:nth-of-type(5) + label::before, .carousel-x input:nth-of-type(5):checked ~ .carousel-x-indicator label:nth-of-type(5) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-indicator label:nth-of-type(5) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-indicator label:nth-of-type(5) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(5) + label {
    display: block; }
  .carousel-x input:nth-of-type(5):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(5) {
    display: block; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-item {
    transform: translateX(-500%); }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-indicator label:nth-of-type(6) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-indicator label:nth-of-type(6) + label::before, .carousel-x input:nth-of-type(6):checked ~ .carousel-x-indicator label:nth-of-type(6) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-indicator label:nth-of-type(6) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-indicator label:nth-of-type(6) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(6) + label {
    display: block; }
  .carousel-x input:nth-of-type(6):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(6) {
    display: block; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-item {
    transform: translateX(-600%); }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-indicator label:nth-of-type(7) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-indicator label:nth-of-type(7) + label::before, .carousel-x input:nth-of-type(7):checked ~ .carousel-x-indicator label:nth-of-type(7) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-indicator label:nth-of-type(7) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-indicator label:nth-of-type(7) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(7) + label {
    display: block; }
  .carousel-x input:nth-of-type(7):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(7) {
    display: block; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-item {
    transform: translateX(-700%); }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-indicator label:nth-of-type(8) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-indicator label:nth-of-type(8) + label::before, .carousel-x input:nth-of-type(8):checked ~ .carousel-x-indicator label:nth-of-type(8) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-indicator label:nth-of-type(8) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-indicator label:nth-of-type(8) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(8) + label {
    display: block; }
  .carousel-x input:nth-of-type(8):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(8) {
    display: block; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-item {
    transform: translateX(-800%); }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-indicator label:nth-of-type(9) {
    background-color: #000;
    border: 2px #FFF solid;
    width: 17px;
    height: 17px;
    cursor: default; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-indicator label:nth-of-type(9) + label::before, .carousel-x input:nth-of-type(9):checked ~ .carousel-x-indicator label:nth-of-type(9) + label::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-indicator label:nth-of-type(9) + label::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-indicator label:nth-of-type(9) + label::after {
    animation-name: arrowUpDown; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-arrow .carousel-x-arrow-right label:nth-of-type(9) + label {
    display: block; }
  .carousel-x input:nth-of-type(9):checked ~ .carousel-x-arrow .carousel-x-arrow-left label:nth-of-type(9) {
    display: block; }
  .carousel-x input:last-of-type:checked ~ .carousel-x-indicator label:first-of-type::before, .carousel-x input:last-of-type:checked ~ .carousel-x-indicator label:first-of-type::after {
    opacity: 1;
    visibility: visible; }
  .carousel-x input:last-of-type:checked ~ .carousel-x-indicator label:first-of-type::before {
    animation-name: toolTipUpDown; }
  .carousel-x input:last-of-type:checked ~ .carousel-x-indicator label:first-of-type::after {
    animation-name: arrowUpDown; }
  .carousel-x input:last-of-type:checked ~ .carousel-x-arrow .carousel-x-arrow-left label:first-of-type {
    display: block; }
  .carousel-x input:last-of-type:checked ~ .carousel-x-arrow .carousel-x-arrow-right label:first-of-type {
    display: block; }

.carousel-x-item {
  flex: 1 1 auto;
  width: 100%;
  min-width: 100%;
  position: relative;
  left: 0;
  transition: transform 1000ms ease 50ms; }

.carousel-x-indicator {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  opacity: 1;
  z-index: 2; }
  .carousel-x-indicator label {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #FFF;
    transition: background-color 250ms ease 50ms;
    display: inline-block;
    cursor: pointer;
    margin: 0 10px;
    position: relative; }
  .carousel-x-indicator label.hover:hover {
    background-color: #CCC; }
  .carousel-x-indicator label::before,
  .carousel-x-indicator label::after {
    position: absolute; }
  .carousel-x-indicator label.switch-title.animation::before,
  .carousel-x-indicator label.switch-title.animation::after {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }
  .carousel-x-indicator label.switch-title::before {
    content: attr(data-switch-title);
    color: #000;
    opacity: 0;
    transition: opacity 300ms ease 50ms;
    background-color: #000;
    color: #FFF;
    padding: 5px 10px;
    top: -50px;
    left: -10px;
    visibility: hidden;
    white-space: nowrap; }
  .carousel-x-indicator label.switch-title::after {
    content: "";
    position: relative;
    top: -24px;
    left: -5px;
    border-width: 10px;
    border-style: solid;
    transition: opacity 300ms ease 50ms;
    border-color: #000 transparent transparent transparent;
    width: 0;
    height: 0;
    opacity: 0;
    display: block;
    visibility: hidden; }

.carousel-x-arrow {
  display: flex;
  flex-flow: row nowrap;
  position: absolute;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; }

.carousel-x-arrow.left {
  right: auto; }

.carousel-x-arrow.right {
  left: auto; }

.carousel-x-arrow.top {
  top: 0;
  bottom: auto; }

.carousel-x-arrow.bottom {
  top: auto;
  bottom: 0; }

.carousel-x-arrow.center {
  width: 150px;
  left: 0;
  right: 0; }

.carousel-x-arrow div label {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px #FFF solid;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 2;
  cursor: pointer; }

.carousel-x-arrow-left label::before,
.carousel-x-arrow-right label::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: relative;
  border-width: 16px;
  top: 8px;
  border-style: solid;
  opacity: 0.2;
  transition: opacity 200ms ease 50ms; }

.carousel-x-arrow div label:hover::after,
.carousel-x-arrow div label:hover::before {
  opacity: 1; }

.carousel-x-arrow-left label::before {
  border-color: transparent #FFF transparent transparent; }

.carousel-x-arrow-right label::after {
  left: 16px;
  border-color: transparent transparent transparent #FFF; }

.carousel-x-arrow-left,
.carousel-x-arrow-right {
  height: 50px;
  width: 50px;
  position: relative; }

.carousel-x-arrow-space {
  flex: 1 1 auto; }

.carousel-x.compact-arrow .carousel-x-arrow label {
  border: 0; }
.carousel-x.compact-arrow .carousel-x-arrow label::after,
.carousel-x.compact-arrow .carousel-x-arrow label::before {
  opacity: 0.5; }
.carousel-x.compact-arrow .carousel-x-arrow label:hover::after,
.carousel-x.compact-arrow .carousel-x-arrow label:hover::before {
  opacity: 1; }
.carousel-x.compact-arrow .carousel-x-arrow-space {
  flex: none;
  width: 50px;
  height: 50px; }

.carousel-y {
  height: 100%;
  display: flex;
  flex-flow: column nowrap; }
  .carousel-y input:nth-of-type(1):checked ~ .carousel-y-item {
    transform: translateY(-0%); }
  .carousel-y input:nth-of-type(1):checked ~ .carousel-y-indicator label:nth-of-type(1) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(1):checked ~ .carousel-y-indicator label:nth-of-type(1)::after {
      color: #000; }
  .carousel-y input:nth-of-type(1):checked ~ .carousel-y-indicator label:nth-of-type(1)::before, .carousel-y input:nth-of-type(1):checked ~ .carousel-y-indicator label:nth-of-type(1)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(1):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(1) + label {
    display: block; }
  .carousel-y input:nth-of-type(1):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(1) {
    display: block; }
  .carousel-y input:nth-of-type(2):checked ~ .carousel-y-item {
    transform: translateY(-100%); }
  .carousel-y input:nth-of-type(2):checked ~ .carousel-y-indicator label:nth-of-type(2) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(2):checked ~ .carousel-y-indicator label:nth-of-type(2)::after {
      color: #000; }
  .carousel-y input:nth-of-type(2):checked ~ .carousel-y-indicator label:nth-of-type(2)::before, .carousel-y input:nth-of-type(2):checked ~ .carousel-y-indicator label:nth-of-type(2)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(2):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(2) + label {
    display: block; }
  .carousel-y input:nth-of-type(2):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(2) {
    display: block; }
  .carousel-y input:nth-of-type(3):checked ~ .carousel-y-item {
    transform: translateY(-200%); }
  .carousel-y input:nth-of-type(3):checked ~ .carousel-y-indicator label:nth-of-type(3) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(3):checked ~ .carousel-y-indicator label:nth-of-type(3)::after {
      color: #000; }
  .carousel-y input:nth-of-type(3):checked ~ .carousel-y-indicator label:nth-of-type(3)::before, .carousel-y input:nth-of-type(3):checked ~ .carousel-y-indicator label:nth-of-type(3)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(3):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(3) + label {
    display: block; }
  .carousel-y input:nth-of-type(3):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(3) {
    display: block; }
  .carousel-y input:nth-of-type(4):checked ~ .carousel-y-item {
    transform: translateY(-300%); }
  .carousel-y input:nth-of-type(4):checked ~ .carousel-y-indicator label:nth-of-type(4) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(4):checked ~ .carousel-y-indicator label:nth-of-type(4)::after {
      color: #000; }
  .carousel-y input:nth-of-type(4):checked ~ .carousel-y-indicator label:nth-of-type(4)::before, .carousel-y input:nth-of-type(4):checked ~ .carousel-y-indicator label:nth-of-type(4)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(4):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(4) + label {
    display: block; }
  .carousel-y input:nth-of-type(4):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(4) {
    display: block; }
  .carousel-y input:nth-of-type(5):checked ~ .carousel-y-item {
    transform: translateY(-400%); }
  .carousel-y input:nth-of-type(5):checked ~ .carousel-y-indicator label:nth-of-type(5) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(5):checked ~ .carousel-y-indicator label:nth-of-type(5)::after {
      color: #000; }
  .carousel-y input:nth-of-type(5):checked ~ .carousel-y-indicator label:nth-of-type(5)::before, .carousel-y input:nth-of-type(5):checked ~ .carousel-y-indicator label:nth-of-type(5)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(5):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(5) + label {
    display: block; }
  .carousel-y input:nth-of-type(5):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(5) {
    display: block; }
  .carousel-y input:nth-of-type(6):checked ~ .carousel-y-item {
    transform: translateY(-500%); }
  .carousel-y input:nth-of-type(6):checked ~ .carousel-y-indicator label:nth-of-type(6) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(6):checked ~ .carousel-y-indicator label:nth-of-type(6)::after {
      color: #000; }
  .carousel-y input:nth-of-type(6):checked ~ .carousel-y-indicator label:nth-of-type(6)::before, .carousel-y input:nth-of-type(6):checked ~ .carousel-y-indicator label:nth-of-type(6)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(6):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(6) + label {
    display: block; }
  .carousel-y input:nth-of-type(6):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(6) {
    display: block; }
  .carousel-y input:nth-of-type(7):checked ~ .carousel-y-item {
    transform: translateY(-600%); }
  .carousel-y input:nth-of-type(7):checked ~ .carousel-y-indicator label:nth-of-type(7) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(7):checked ~ .carousel-y-indicator label:nth-of-type(7)::after {
      color: #000; }
  .carousel-y input:nth-of-type(7):checked ~ .carousel-y-indicator label:nth-of-type(7)::before, .carousel-y input:nth-of-type(7):checked ~ .carousel-y-indicator label:nth-of-type(7)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(7):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(7) + label {
    display: block; }
  .carousel-y input:nth-of-type(7):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(7) {
    display: block; }
  .carousel-y input:nth-of-type(8):checked ~ .carousel-y-item {
    transform: translateY(-700%); }
  .carousel-y input:nth-of-type(8):checked ~ .carousel-y-indicator label:nth-of-type(8) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(8):checked ~ .carousel-y-indicator label:nth-of-type(8)::after {
      color: #000; }
  .carousel-y input:nth-of-type(8):checked ~ .carousel-y-indicator label:nth-of-type(8)::before, .carousel-y input:nth-of-type(8):checked ~ .carousel-y-indicator label:nth-of-type(8)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(8):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(8) + label {
    display: block; }
  .carousel-y input:nth-of-type(8):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(8) {
    display: block; }
  .carousel-y input:nth-of-type(9):checked ~ .carousel-y-item {
    transform: translateY(-800%); }
  .carousel-y input:nth-of-type(9):checked ~ .carousel-y-indicator label:nth-of-type(9) {
    background-color: #000;
    border: 2px #FFF solid;
    cursor: default; }
    .carousel-y input:nth-of-type(9):checked ~ .carousel-y-indicator label:nth-of-type(9)::after {
      color: #000; }
  .carousel-y input:nth-of-type(9):checked ~ .carousel-y-indicator label:nth-of-type(9)::before, .carousel-y input:nth-of-type(9):checked ~ .carousel-y-indicator label:nth-of-type(9)::after {
    opacity: 1;
    visibility: visible; }
  .carousel-y input:nth-of-type(9):checked ~ .carousel-y-arrow .carousel-y-arrow-top label:nth-of-type(9) + label {
    display: block; }
  .carousel-y input:nth-of-type(9):checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:nth-of-type(9) {
    display: block; }
  .carousel-y input:last-of-type:checked ~ .carousel-y-arrow .carousel-y-arrow-top label:first-of-type {
    display: block; }
  .carousel-y input:last-of-type:checked ~ .carousel-y-arrow .carousel-y-arrow-bottom label:first-of-type {
    display: block; }

.carousel-y-item {
  height: 100%;
  min-height: 100%;
  display: block;
  position: relative;
  transition: transform 1000ms ease 50ms; }

.carousel-y-indicator {
  position: absolute;
  z-index: 3;
  margin: auto 0;
  left: 5%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; }
  .carousel-y-indicator label {
    background-color: #FFF;
    transition: background-color 200ms ease 50ms;
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin: 10px 0;
    box-sizing: border-box; }
  .carousel-y-indicator label.hover:hover {
    background-color: #CCC; }
  .carousel-y-indicator label.switch-title::after {
    content: attr(data-switch-title);
    height: 1em;
    position: absolute;
    left: 3ch;
    color: #FFF;
    white-space: nowrap; }
  .carousel-y-indicator label.switch-guide::before {
    content: attr(data-switch-guide);
    white-space: nowrap;
    position: absolute;
    color: #000;
    opacity: 1;
    visibility: visible;
    left: -50px; }
  .carousel-y-indicator label.switch-guide.switch-title::before {
    opacity: 0;
    visibility: hidden;
    transition: 500ms ease 50ms; }

/* arrows */
.carousel-y-arrow {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  width: 50px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; }

.carousel-y-arrow.right {
  left: auto;
  right: 0; }

.carousel-y-arrow.left {
  right: auto;
  left: 0; }

.carousel-y-arrow.top {
  top: 0;
  bottom: auto; }

.carousel-y-arrow.bottom {
  top: auto;
  bottom: 0; }

.carousel-y-arrow.center {
  height: 150px;
  top: 0;
  bottom: 0; }

.carousel-y-arrow div label {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px #FFF solid;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 2;
  cursor: pointer; }

.carousel-y-arrow .carousel-y-arrow-top label::before,
.carousel-y-arrow .carousel-y-arrow-bottom label::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: relative;
  border-width: 16px;
  left: 8px;
  border-style: solid;
  opacity: 0.2;
  transition: opacity 200ms ease 50ms; }

.carousel-y-arrow div label:hover::after,
.carousel-y-arrow div label:hover::before {
  opacity: 1; }

.carousel-y-arrow .carousel-y-arrow-top label::before {
  top: 0;
  border-color: transparent transparent #FFF transparent; }

.carousel-y-arrow .carousel-y-arrow-bottom label::after {
  top: 16px;
  border-color: #FFF transparent transparent transparent; }

.carousel-y-arrow-top,
.carousel-y-arrow-bottom {
  height: 50px;
  width: 50px;
  position: relative; }

.carousel-y-arrow-space {
  flex: 1 1 auto; }

.carousel-y.compact-arrow .carousel-y-arrow label {
  border: 0; }
.carousel-y.compact-arrow .carousel-y-arrow label::after,
.carousel-y.compact-arrow .carousel-y-arrow label::before {
  opacity: 0.5; }
.carousel-y.compact-arrow .carousel-y-arrow label:hover::after,
.carousel-y.compact-arrow .carousel-y-arrow label:hover::before {
  opacity: 1; }
.carousel-y.compact-arrow .carousel-y-arrow-space {
  flex: none;
  width: 50px;
  height: 50px; }

.carousel-z {
  display: block;
  position: relative;
  height: 100%; }
  .carousel-z input:nth-of-type(1):checked ~ section:nth-of-type(1) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(1):checked ~ .carousel-z-indicator label:nth-of-type(1) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(2):checked ~ section:nth-of-type(2) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(2):checked ~ .carousel-z-indicator label:nth-of-type(2) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(3):checked ~ section:nth-of-type(3) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(3):checked ~ .carousel-z-indicator label:nth-of-type(3) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(4):checked ~ section:nth-of-type(4) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(4):checked ~ .carousel-z-indicator label:nth-of-type(4) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(5):checked ~ section:nth-of-type(5) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(5):checked ~ .carousel-z-indicator label:nth-of-type(5) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(6):checked ~ section:nth-of-type(6) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(6):checked ~ .carousel-z-indicator label:nth-of-type(6) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(7):checked ~ section:nth-of-type(7) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(7):checked ~ .carousel-z-indicator label:nth-of-type(7) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(8):checked ~ section:nth-of-type(8) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(8):checked ~ .carousel-z-indicator label:nth-of-type(8) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:nth-of-type(9):checked ~ section:nth-of-type(9) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .carousel-z input:last-of-type:checked ~ .carousel-z-indicator label:first-of-type {
    z-index: 2;
    opacity: 1;
    visibility: visible; }

.carousel-z-indicator {
  display: block;
  position: absolute;
  width: 100px;
  height: 2em;
  top: 10px;
  right: 10px;
  text-align: center; }
  .carousel-z-indicator label {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease 50ms;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    cursor: pointer;
    padding: 5px 10px; }

.carousel-z-item {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: opacity 1000ms ease 50ms;
  transform-origin: center; }

.progress-x {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  position: relative;
  overflow: hidden; }
  .progress-x input {
    display: none; }
  .progress-x input:nth-of-type(1):checked ~ .progress-x-item {
    transform: translateX(-100%); }
  .progress-x input:nth-of-type(1):checked ~ .progress-x-indicator label:nth-of-type(1) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(1):checked ~ .progress-x-indicator label:nth-of-type(1)::before, .progress-x input:nth-of-type(1):checked ~ .progress-x-indicator label:nth-of-type(1)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(2):checked ~ .progress-x-item {
    transform: translateX(-200%); }
  .progress-x input:nth-of-type(2):checked ~ .progress-x-indicator label:nth-of-type(2) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(2):checked ~ .progress-x-indicator label:nth-of-type(2)::before, .progress-x input:nth-of-type(2):checked ~ .progress-x-indicator label:nth-of-type(2)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(3):checked ~ .progress-x-item {
    transform: translateX(-300%); }
  .progress-x input:nth-of-type(3):checked ~ .progress-x-indicator label:nth-of-type(3) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(3):checked ~ .progress-x-indicator label:nth-of-type(3)::before, .progress-x input:nth-of-type(3):checked ~ .progress-x-indicator label:nth-of-type(3)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(4):checked ~ .progress-x-item {
    transform: translateX(-400%); }
  .progress-x input:nth-of-type(4):checked ~ .progress-x-indicator label:nth-of-type(4) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(4):checked ~ .progress-x-indicator label:nth-of-type(4)::before, .progress-x input:nth-of-type(4):checked ~ .progress-x-indicator label:nth-of-type(4)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(5):checked ~ .progress-x-item {
    transform: translateX(-500%); }
  .progress-x input:nth-of-type(5):checked ~ .progress-x-indicator label:nth-of-type(5) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(5):checked ~ .progress-x-indicator label:nth-of-type(5)::before, .progress-x input:nth-of-type(5):checked ~ .progress-x-indicator label:nth-of-type(5)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(6):checked ~ .progress-x-item {
    transform: translateX(-600%); }
  .progress-x input:nth-of-type(6):checked ~ .progress-x-indicator label:nth-of-type(6) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(6):checked ~ .progress-x-indicator label:nth-of-type(6)::before, .progress-x input:nth-of-type(6):checked ~ .progress-x-indicator label:nth-of-type(6)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(7):checked ~ .progress-x-item {
    transform: translateX(-700%); }
  .progress-x input:nth-of-type(7):checked ~ .progress-x-indicator label:nth-of-type(7) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(7):checked ~ .progress-x-indicator label:nth-of-type(7)::before, .progress-x input:nth-of-type(7):checked ~ .progress-x-indicator label:nth-of-type(7)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(8):checked ~ .progress-x-item {
    transform: translateX(-800%); }
  .progress-x input:nth-of-type(8):checked ~ .progress-x-indicator label:nth-of-type(8) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(8):checked ~ .progress-x-indicator label:nth-of-type(8)::before, .progress-x input:nth-of-type(8):checked ~ .progress-x-indicator label:nth-of-type(8)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(9):checked ~ .progress-x-item {
    transform: translateX(-900%); }
  .progress-x input:nth-of-type(9):checked ~ .progress-x-indicator label:nth-of-type(9) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(9):checked ~ .progress-x-indicator label:nth-of-type(9)::before, .progress-x input:nth-of-type(9):checked ~ .progress-x-indicator label:nth-of-type(9)::after {
    opacity: 0;
    visibility: hidden; }
  .progress-x input:nth-of-type(10):checked ~ .progress-x-item {
    transform: translateX(-1000%); }
  .progress-x input:nth-of-type(10):checked ~ .progress-x-indicator label:nth-of-type(10) .progress-bar {
    width: 100%; }
  .progress-x input:nth-of-type(10):checked ~ .progress-x-indicator label:nth-of-type(10)::before, .progress-x input:nth-of-type(10):checked ~ .progress-x-indicator label:nth-of-type(10)::after {
    opacity: 0;
    visibility: hidden; }

.progress-x-item {
  flex: 1 1 auto;
  width: 100%;
  min-width: 100%;
  position: relative;
  left: 0;
  transition: transform 1000ms ease 50ms; }

.progress-x-indicator {
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 2; }
  .progress-x-indicator label {
    flex: 1 1 0;
    background-color: #FFF;
    transition: background-color 200ms ease 50ms;
    display: inline-block;
    cursor: pointer;
    position: relative; }
  .progress-x-indicator label.switch-title::before {
    content: attr(data-switch-title);
    position: absolute;
    transition: opacity 300ms ease 50ms;
    background-color: #000;
    color: #FFF;
    padding: 5px 10px;
    top: -50px;
    left: 0;
    right: 0;
    width: 50%;
    text-align: center;
    white-space: nowrap;
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis; }
  .progress-x-indicator label.switch-title::after {
    content: "";
    position: absolute;
    top: -21px;
    border-width: 10px;
    border-style: solid;
    transition: opacity 300ms ease 50ms;
    border-color: #000 transparent transparent transparent;
    width: 0;
    height: 0;
    display: block;
    left: 0;
    right: 0;
    margin: auto; }

div.progress-bar {
  background-color: #cc0;
  transition: 1000ms ease 50ms;
  width: 0;
  text-align: right;
  border-right: 1px #000 solid; }

.button-x {
  position: relative; }

.button-x.root {
  position: absolute; }

.button-x input {
  display: none; }

.button-x-indicator {
  position: relative;
  width: 12ch;
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  margin: 0 2px 0 0;
  background-color: #edc; }

.button-x-indicator::before {
  content: "";
  z-index: 1;
  position: absolute;
  border-style: solid;
  border-width: 1ch;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: none;
  left: calc(100% - 30px);
  border-color: transparent  #000 transparent transparent;
  transition: transform 200ms ease 50ms;
  transform-origin: 75% 50%; }

.button-x-item {
  position: absolute;
  display: none;
  margin: 0 2px 0 0; }

.button-x > input:checked ~ .button-x-item {
  position: relative;
  display: inline-block; }

.button-x > input:checked + label::before {
  transform: rotateZ(180deg);
  border-color: transparent  #fff transparent transparent; }

*[dir="rtl"] .button-x .button-x-indicator::before {
  left: 0; }

.button-y {
  position: relative;
  display: flex;
  flex-flow: column nowrap; }

.button-y.root {
  position: absolute; }

.button-y input {
  display: none; }

.button-y-indicator {
  position: relative;
  width: 12ch;
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #0cc; }

.button-y-indicator::before {
  position: absolute;
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  border-style: solid;
  border-width: 10px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: none;
  left: calc(100% - 30px);
  border-color: transparent transparent #000 transparent;
  transition: transform 200ms ease 50ms;
  transform-origin: 50% 75%; }

.button-y-item {
  position: absolute;
  display: none;
  margin: 2px 0 0 0; }

.button-y > input:checked ~ .button-y-item {
  position: relative;
  display: block; }

.button-y > input:checked + label::before {
  transform: rotateZ(180deg);
  border-color: transparent transparent #fff transparent; }

*[dir="rtl"] .button-y .button-y-indicator::before {
  left: 15px; }

.button-y .button-link,
.button-x .button-link {
  display: inline-block;
  width: 12ch;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 5px;
  text-align: center;
  text-decoration: none; }

.button-y .button-y .button-y-indicator {
  background-color: #fc0; }

.button-y .button-y .button-y .button-y-indicator {
  background-color: #fe0; }

.slick-x {
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  position: relative; }

.slick-x-item {
  flex: 1 1 0;
  position: relative; }

.slick-x-item {
  overflow: hidden; }
  .slick-x-item .carousel-z-indicator {
    right: 0;
    top: 20%;
    left: 0;
    bottom: auto;
    margin: auto; }
    .slick-x-item .carousel-z-indicator label {
      padding: 0; }

@media screen and (max-width: 768px) {
  .slick-x-item {
    flex: 1 1 calc(50% - 40px); } }
@media screen and (max-width: 432px) {
  .slick-x-item {
    flex: 1 1 100%; } }
.slick-z {
  display: block;
  position: relative;
  height: 100%; }
  .slick-z input:nth-of-type(1):checked ~ section:nth-of-type(1) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(1):checked ~ .slick-z-indicator label:nth-of-type(1) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(2):checked ~ section:nth-of-type(2) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(2):checked ~ .slick-z-indicator label:nth-of-type(2) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(3):checked ~ section:nth-of-type(3) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(3):checked ~ .slick-z-indicator label:nth-of-type(3) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(4):checked ~ section:nth-of-type(4) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(4):checked ~ .slick-z-indicator label:nth-of-type(4) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(5):checked ~ section:nth-of-type(5) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(5):checked ~ .slick-z-indicator label:nth-of-type(5) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(6):checked ~ section:nth-of-type(6) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(6):checked ~ .slick-z-indicator label:nth-of-type(6) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(7):checked ~ section:nth-of-type(7) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(7):checked ~ .slick-z-indicator label:nth-of-type(7) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(8):checked ~ section:nth-of-type(8) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(8):checked ~ .slick-z-indicator label:nth-of-type(8) + label {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
  .slick-z input:nth-of-type(9):checked ~ section:nth-of-type(9) {
    z-index: 1;
    opacity: 1;
    visibility: visible; }
  .slick-z input:last-of-type:checked ~ .slick-z-indicator label:first-of-type {
    z-index: 2;
    opacity: 1;
    visibility: visible; }

.slick-z-indicator {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0; }
  .slick-z-indicator label {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease 50ms;
    background: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer; }

.slick-z-item {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: opacity 1000ms ease 50ms;
  transform-origin: center; }

.switch-language {
  position: relative; }

*[lang] {
  position: relative; }

input[name="switch-language"] {
  display: none; }

label[name="switch-language"] {
  cursor: pointer; }

input[name="switch-language"]:checked ~ .multi-language *[lang] {
  display: none;
  position: absolute; }

input#switch-en:checked ~ .multi-language > * {
  direction: ltr; }

input#switch-fa:checked ~ .multi-language .switch-language > *,
input#switch-ku:checked ~ .multi-language .switch-language > * {
  direction: rtl; }

input#switch-en:checked ~ .multi-language *[lang="en"],
input#switch-fa:checked ~ .multi-language *[lang="fa"],
input#switch-ku:checked ~ .multi-language *[lang="ku"] {
  display: block;
  position: relative; }

input#switch-en:checked ~ * label[for="switch-en"],
input#switch-fa:checked ~ * label[for="switch-fa"],
input#switch-ku:checked ~ * label[for="switch-ku"] {
  background-color: #ddd; }

.toggle-switch {
  position: relative; }
  .toggle-switch > input {
    display: none; }

.toggle-switch-indicator {
  display: inline-block;
  height: 2em;
  width: 15ch;
  z-index: 2; }
  .toggle-switch-indicator .switch-on,
  .toggle-switch-indicator .switch-off {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease 50ms;
    cursor: pointer;
    background-color: #fafafa;
    margin: 0;
    box-shadow: 0 0 10px #ccc;
    padding: 2px 5px; }

.toggle-switch-indicator.right {
  right: 0; }

.toggle-switch-indicator.bottom {
  bottom: 1ch; }

input[name|="toggle-switch"]:not(:checked) ~ .toggle-switch-indicator .switch-on {
  opacity: 1;
  visibility: visible; }

input[name|="toggle-switch"]:checked ~ .toggle-switch-indicator .switch-off {
  opacity: 1;
  visibility: visible; }

/* user usage */
input[name|="toggle-switch-group"]:checked ~ [data-toggle-switch-target] {
  background-color: #fef; }

.step-switch {
  position: relative; }
  .step-switch > input {
    display: none; }

.step-switch-indicator {
  display: block;
  position: relative;
  height: 1em;
  margin: 15px 0; }
  .step-switch-indicator *[for|="step-switch"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease 50ms;
    background-color: #fafafa;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 10px #ccc;
    padding: 2px 5px; }

input[name|="step-switch-group"]:nth-of-type(1):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(1) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(2):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(2) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(3):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(3) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(4):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(4) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(5):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(5) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(6):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(6) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(7):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(7) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(8):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(8) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:nth-of-type(9):checked ~ .step-switch-indicator label[for|="step-switch"]:nth-of-type(9) + label {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

input[name|="step-switch-group"]:last-of-type:checked ~ .step-switch-indicator label[for|="step-switch"]:first-of-type {
  z-index: 2;
  opacity: 1;
  visibility: visible; }

*[data-step-switch-target] {
  transition: all 250ms 50ms; }

/* user usage */
input[name|="step-switch-group"]:nth-of-type(1):checked ~ *[data-step-switch-target] {
  width: 100%; }

input[name|="step-switch-group"]:nth-of-type(2):checked ~ *[data-step-switch-target] {
  width: 90%; }

input[name|="step-switch-group"]:nth-of-type(3):checked ~ *[data-step-switch-target] {
  width: 80%; }

input[name|="step-switch-group"]:nth-of-type(4):checked ~ *[data-step-switch-target] {
  width: 70%; }

input[name|="step-switch-group"]:nth-of-type(5):checked ~ *[data-step-switch-target] {
  width: 60%; }

pre.code-y {
  color: #000;
  background-color: #fafafa;
  border-left: 30px #0cc solid;
  overflow-x: visible;
  margin: 0; }
  pre.code-y ol {
    position: relative;
    left: 10px;
    padding: 0;
    margin: 0;
    border: 0; }
    pre.code-y ol li {
      line-height: 0;
      height: 0; }

.code-x {
  font-family: monospace;
  background-color: #eee;
  padding: 0 5px;
  border-left: 10px #0cc solid;
  margin: 0 5px; }

/*  slick-x override by users  */
.soma {
  height: 300px;
  background-color: #0CC;
  box-shadow: 5px 5px 18px 0px #CCC, -5px 5px 10px 0px #CCC; }

.slick-x-item {
  margin: 10px;
  background-color: #cc0; }

.slick-x-item .carousel-z section:nth-of-type(2) {
  background-color: #f80; }

.slick-x-item .carousel-z section:nth-of-type(3) {
  background-color: #f8f; }

.slick-x-item .carousel-z section:nth-of-type(4) {
  background-color: #fe0; }

.slick-x-item .carousel-z section:nth-of-type(5) {
  background-color: #ef8; }

.progress-x-item {
  padding: 150px 25px;
  box-sizing: border-box; }

.progress-x-item > div {
  background-color: #fafafa;
  padding: 10px;
  border-radius: 10px; }

.carousel-y-indicator label.switch-guide::before {
  background-color: #fe0;
  padding: 0 2px;
  border-radius: 3px; }

/*# sourceMappingURL=soma.css.map */