@font-face {
  font-family: "AkzBold";
  src: url("../../font/AkzidenzGroteskPro-Bold.woff2") format("woff2"), url("../../font/AkzidenzGroteskPro-Bold.woff") format("woff"), url("../../font/AkzidenzGroteskPro-Bold.eot") format("eot"), url("../../font/AkzidenzGroteskPro-Bold.ttf") format("ttf");
}
@font-face {
  font-family: "AkzSuper";
  src: url("../../font/AkzidenzGroteskPro-Super.woff2") format("woff2"), url("../../font/AkzidenzGroteskPro-Super.woff") format("woff"), url("../../font/AkzidenzGroteskPro-Super.eot") format("eot"), url("../../font/AkzidenzGroteskPro-Super.ttf") format("ttf");
}
@font-face {
  font-family: "AkzRegular";
  src: url("../../font/AkzidenzGroteskPro-Regular.woff2") format("woff2"), url("../../font/AkzidenzGroteskPro-Regular.woff") format("woff"), url("../../font/AkzidenzGroteskPro-Regular.eot") format("eot"), url("../../font/AkzidenzGroteskPro-Regular.ttf") format("ttf");
}
.container {
  font-family: "AkzBold";
  margin-top: 20px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container .grid__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 262px 21px 195px 21px 195px 21px 195px 21px 262px;
  grid-template-columns: 262px 195px 195px 195px 262px;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-gap: 21px;
      grid-template-areas: "logo header header header header" "signal plot1 plot1 plot2 plot2" "src__settings plot3 plot3 plot4 plot4" "src__settings filters filters filters filters" "src__settings achiev achiev filter__manual filter__manual" "footer1 footer2 footer2 footer3 footer3";
}
.container .grid__container .logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: logo;
  margin-right: -22px;
  padding-right: 1px;
}
.container .grid__container .logo img {
  width: 80px;
  padding-left: 15px;
  padding-top: 45px;
}
.container .grid__container .header {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 7;
  grid-area: header;
  color: #fff;
}
.container .grid__container .header h1 {
  font-size: 108px;
  margin-top: 7px;
  font-family: "AkzSuper";
}
.container .grid__container .header p {
  font-size: 24px;
  padding-bottom: 15px;
  margin-top: -15px;
  font-family: "AkzRegular";
  width: 330px;
  line-height: 129%;
}
.container .grid__container * {
  line-height: 129%;
}
.container .grid__container input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container .grid__container .signal {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: signal;
}
.container .grid__container .signal .signal__container {
  margin: 15px;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container .grid__container .signal .signal__container .tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "AkzSuper";
  font-size: 24px;
  width: 100%;
  cursor: pointer;
  margin-top: 70px;
}
.container .grid__container .signal .signal__container .tabs .equalizer__tab {
  width: 100%;
  background-color: #fff;
  text-align: center;
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container .grid__container .signal .signal__container .tabs .equalizer__tab:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.container .grid__container .signal .signal__container .tabs .equalizer__tab.active {
  background-color: #E0E0E0;
  font-size: 28px;
}
.container .grid__container .signal .signal__container .tabs .oscil__tab {
  width: 100%;
  background-color: #fff;
  text-align: center;
  height: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container .grid__container .signal .signal__container .tabs .oscil__tab:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.container .grid__container .signal .signal__container .tabs .oscil__tab.active {
  background-color: #E0E0E0;
  font-size: 28px;
}
.container .grid__container .signal .signal__container .play__button {
  width: 100%;
  height: 58px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.container .grid__container .signal .signal__container .play__button .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 24px;
  font-family: "AkzSuper";
}
.container .grid__container .signal .signal__container .play__button .button img {
  margin-right: 10px;
  width: 20px;
}
.container .grid__container .signal .signal__container .play__button:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.container .grid__container .src__settings {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 1;
  grid-area: src__settings;
  margin-top: -22px;
  padding-top: 22px;
  padding-left: 15px;
  padding-right: 15px;
  color: #fff;
}
.container .grid__container .src__settings h2 {
  font-family: "AkzSuper";
  font-size: 28px;
  margin-bottom: 15px;
  line-height: 129%;
}
.container .grid__container .src__settings input {
  display: block;
  width: 100%;
  margin-top: 13px;
  margin-bottom: 13px;
  margin-left: 0;
  margin-right: 0;
}
.container .grid__container .src__settings select {
  width: 100%;
  margin-top: 10px;
  font-family: "AkzRegular";
  font-size: 18px;
  padding: 7px 15px;
  outline: none;
  cursor: pointer;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container .grid__container .src__settings label {
  font-size: 20px;
  font-family: "AkzBold";
}
.container .grid__container .src__settings p {
  font-family: "AkzRegular";
  font-size: 18px;
}
.container .grid__container .src__settings .settings__item {
  margin-bottom: 20px;
}
.container .grid__container .src__settings .settings__item .value {
  margin-top: 10px;
}
.container .grid__container .src__settings .settings__item .range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container .grid__container .src__settings .settings__item:last-of-type {
  margin-bottom: 0;
}
.container .grid__container .src__settings .signal__settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container .grid__container .src__settings .fourier__settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container .grid__container .src__settings .fourier__settings h2 {
  margin-top: 30px;
}
.container .grid__container .src__settings .fourier__settings input[type=text] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 7px 15px;
  font-family: "AkzRegular";
  font-size: 18px;
  border: none;
  outline: none;
  display: block;
}
.container .grid__container .src__settings #custom__settings {
  display: none;
  margin-bottom: 30px;
}
.container .grid__container .src__settings #main__settings {
  display: none;
}
.container .grid__container .src__settings .music__settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container .grid__container .src__settings .music__settings h2 {
  line-height: 129%;
}
.container .grid__container .src__settings .music__settings h3 {
  font-family: "AkzBold";
  font-size: 20px;
}
.container .grid__container .src__settings .music__settings .upload__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.container .grid__container .src__settings .music__settings .upload__button img {
  width: 38px;
  cursor: pointer;
  padding: 10px 97px;
  background-color: #fff;
}
.container .grid__container .src__settings .music__settings .upload__button:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.container .grid__container .src__settings .music__settings input[type=file] {
  display: none;
}
.container .grid__container .src__settings .music__settings audio {
  display: none;
}
.container .grid__container .src__settings .music__settings span {
  font-family: "AkzRegular";
  font-size: 18px;
}
.container .grid__container .src__settings .music__settings .settings__item p {
  font-family: "AkzRegular";
  font-size: 18px;
}
.container .grid__container .plot1 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: plot1;
}
.container .grid__container .plot2 {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
  -ms-grid-column-span: 3;
  grid-area: plot2;
}
.container .grid__container .plot3 {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: plot3;
}
.container .grid__container .plot4 {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
  -ms-grid-column-span: 3;
  grid-area: plot4;
}
.container .grid__container .filters {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
  -ms-grid-column-span: 7;
  grid-area: filters;
}
.container .grid__container .filters .filter__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 15px;
}
.container .grid__container .filters .filter__buttons .add__filter {
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #fff;
  font-family: "AkzSuper";
  font-size: 24px;
  cursor: pointer;
}
.container .grid__container .filters .filter__buttons #addFilter {
  margin-right: 21px;
  width: 395px;
}
.container .grid__container .filters .filter__buttons #deleteFilter {
  width: 463px;
}
.container .grid__container .filters .filter__buttons .add__filter:hover {
  -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03);
}
.container .grid__container .filters .filter__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container .grid__container .filters .filter__items .filter__settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 15px;
  margin-bottom: 15px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 195px;
  margin-right: 21px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item select {
  font-family: "AkzRegular";
  font-size: 18px;
  padding: 7px 15px;
  outline: none;
  cursor: pointer;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 32px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item label {
  color: #fff;
  font-family: "AkzBold";
  font-size: 20px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item .range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item p {
  font-family: "AkzRegular";
  font-size: 18px;
  color: #fff;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item input[type=range] {
  margin-top: 14px;
  margin-bottom: 14px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item .value {
  margin-top: 11px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item:last-of-type {
  margin-right: 15px;
  width: 247px;
}
.container .grid__container .filters .filter__items .filter__settings .filter__settings__item:first-of-type {
  margin-left: 15px;
  width: 179px;
}
.container .grid__container .achiev {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: achiev;
}
.container .grid__container .achiev .achiev__container {
  margin: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container .grid__container .achiev .achiev__container .achiev__header {
  font-family: "AkzSuper";
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
}
.container .grid__container .achiev .achiev__container .achiev__element {
  background-color: #fff;
  padding: 7px 15px;
  margin-bottom: 10px;
}
.container .grid__container .achiev .achiev__container .achiev__element h3 {
  font-family: "AkzBold";
  font-size: 20px;
  margin-bottom: 5px;
}
.container .grid__container .achiev .achiev__container .achiev__element p {
  font-family: "AkzRegular";
  font-size: 18px;
}
.container .grid__container .achiev .achiev__container .achiev__element .color__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.container .grid__container .achiev .achiev__container .achiev__element .color__flex img {
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: none;
}
.container .grid__container .achiev .achiev__container .achiev__element .color__flex img:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
.container .grid__container .filter__manual {
  -ms-grid-row: 9;
  -ms-grid-column: 7;
  -ms-grid-column-span: 3;
  grid-area: filter__manual;
}
.container .grid__container .filter__manual .manual__container {
  margin: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.container .grid__container .filter__manual .manual__container .manual__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.container .grid__container .filter__manual .manual__container .manual__header label {
  color: #fff;
  font-family: "AkzSuper";
  font-size: 28px;
}
.container .grid__container .filter__manual .manual__container .manual__header select {
  width: 179px;
  margin-top: 10px;
  font-family: "AkzRegular";
  font-size: 18px;
  padding: 7px 15px;
  outline: none;
  cursor: pointer;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container .grid__container .filter__manual .manual__container .descr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.container .grid__container .filter__manual .manual__container .descr .descr__column {
  width: 45%;
  margin-bottom: 30px;
}
.container .grid__container .filter__manual .manual__container .descr .descr__column h3 {
  font-family: "AkzBold";
  font-size: 20px;
  color: #fff;
  margin-bottom: 12px;
  margin-top: 25px;
}
.container .grid__container .filter__manual .manual__container .descr .descr__column p {
  font-family: "AkzRegular";
  font-size: 18px;
  color: #fff;
}
.container .grid__container .footer1 {
  -ms-grid-row: 11;
  -ms-grid-column: 1;
  grid-area: footer1;
}
.container .grid__container .footer2 {
  -ms-grid-row: 11;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: footer2;
  font-family: "AkzRegular";
  font-size: 18px;
  color: #fff;
  margin-left: -22px;
  padding-left: 22px;
  padding-top: 33px;
  padding-bottom: 33px;
}
.container .grid__container .footer3 {
  -ms-grid-row: 11;
  -ms-grid-column: 7;
  -ms-grid-column-span: 3;
  grid-area: footer3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -22px;
  padding-left: 22px;
}
.container .grid__container .footer3 a {
  margin-right: 10px;
}

.plot__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 15px 5px;
  font-size: 36px;
  color: #fff;
}
.plot__container h3 {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0.5;
  font-family: "AkzSuper";
}
.plot__container .plot {
  position: relative;
}
.plot__container .plot img {
  width: 260px;
  z-index: 1;
}
.plot__container .plot canvas {
  position: absolute;
  top: calc(50% - 82px);
  left: calc(50% - 89px);
  width: 180px;
  height: 140px;
  z-index: 2;
}

input[type=range] {
  -webkit-appearance: none;
  background-color: rgba(111, 111, 111, 0);
}

input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  -webkit-appearance: none;
  background-color: #fff;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  width: 23px;
  -webkit-appearance: none;
  height: 23px;
  border-radius: 15px;
  cursor: pointer;
  background: #E0E0E0;
  margin-top: -8px;
  outline: none;
}

input[type=range]:disabled::-webkit-slider-thumb {
  background: #DE976F;
}

input[type=range]:disabled::-webkit-slider-runnable-track {
  background-color: #F2A274;
}

input[type=range]::-moz-range-progress {
  background-color: #fff;
}

input[type=range]::-moz-range-track {
  background-color: #fff;
}

input[type=range]::-ms-fill-lower {
  background-color: #fff;
}

input[type=range]::-ms-fill-upper {
  background-color: #fff;
}

input[type=range].blueInput:disabled::-webkit-slider-thumb {
  background: #7464D3;
}

input[type=range].blueInput:disabled::-webkit-slider-runnable-track {
  background-color: #8876F3;
}

.message {
  position: fixed;
  bottom: 0;
  right: -500px;
  padding: 15px;
  color: #fff;
  width: 400px;
  z-index: 3;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.message h3 {
  font-family: "AkzBold";
  font-size: 20px;
}
.message p {
  font-family: "AkzRegular";
  font-size: 18px;
}
.message .message__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.message .message__title img {
  background-color: #fff;
  width: 18px;
  height: 18px;
  padding: 4px;
  cursor: pointer;
}
.message .message__title img:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
.message .message__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 10px;
}
.message .message__body img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 20px;
}

.achiev__popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-size: 200px;
  font-family: "AkzSuper";
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 4;
  color: #fff;
}
.achiev__popup p {
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

.blue {
  background-color: #3516F0;
}

.orange {
  background-color: #EF6213;
}

#changeColor {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#changeColor.rotate {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}