a {
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
  text-decoration: none;
}
html {
  height: 100%;
  font-family: 'Raleway', Helvetica, Roboto, Arial, sans-serif;
  margin: 0px;
  padding: 0px;
}
body {
  position: relative;
  margin: 0;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}
#modal-1, .modal, .modal-body {
  position: relative;
  z-index: 30;
  width: 67%;
  color: #777777;
  visibility: hidden;
  margin-top: -555px;
}
.testing {
  color: #2b9bbd;
}
marquee {
  direction: left;
  height: auto;
  width: 100%;
/* 
direction         Указывает направление движения содержимого контейнера
...остальные задаются в самом тэге html 
behavior          Задает тип движения содержимого контейнера (alternate | scroll | slide)  
loop              Задает, сколько раз будет прокручиваться содержимое (дефолт -1 зациклить)
scrollamount      Скорость движения контента (по умолчанию 6px)
scrolldelay       Величина задержки в миллисекундах между движениями (по умолчанию 85)
truespeed         Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay. По умолчанию выключен.
bgcolor           Цвет фона
hspace            Горизонтальные поля вокруг контента (дефолт -1 )
vspace            Вертикальные поля вокруг содержимого (дефолт -1 )
*/
}
footer {
  position: absolute; /* fixed !important; */
  bottom: 0px !important;
  width: 100%;
  align-items : center;
  background-color: #6bd5f5;
  color: #1b3037;
  margin: 0px;
  padding: 13px;
}

    .changer {
      position: relative;
      z-index: 30;
      width: 245px;
      top: 20%;
      left: 10%;
      bottom: 10%;
      padding: 0px;
      color: #777777;
    }
    .changer .sub {
      font-weight: 300;
    }
    .changer h1 {
      font-size: 2.25em;
      font-weight: 800;
    }
    .changer .demos {
      line-height: 1;
    }
    .changer .demos a {
      color: #fff;
      display: block;
      margin: 15px 0;
      font-size: 0.75em;
      border: solid 1px;
      text-align: center;
      padding: 10px;
      font-weight: 800;
      border-radius: 12px;
    }
    .changer .demos	a[data-go="1"]{				color: #40bbb8; }
    .changer .demos	a[data-go="2"]{				color: #45aa63; }
    .changer .demos	a[data-go="3"]{				color: #bec05e; }	/* 98ADA4 */
    .changer .demos	a[data-go="4"]{				color: #c2735c; }
    .changer .demos	a:hover[data-go="1"]{ color: #1f6160; background-color: #9ffffd; border-color: #40bbb8;}
    .changer .demos	a:hover[data-go="2"]{ color: #225532; background-color: #a0ffbc; border-color: #45aa63;}
    .changer .demos	a:hover[data-go="3"]{ color: #696a35; background-color: #feffbe; border-color: #bec05e;}
    .changer .demos	a:hover[data-go="4"]{ color: #643d31; background-color: #ffcebf; border-color: #c2735c;}
@media (max-device-width: 762px) {
  .changer .demos	a[data-go="1"]{ color: #1f6160; background-color: #9ffffd; border-color: #40bbb8;}
  .changer .demos	a[data-go="2"]{ color: #225532; background-color: #a0ffbc; border-color: #45aa63;}
  .changer .demos	a[data-go="3"]{ color: #696a35; background-color: #feffbe; border-color: #bec05e;}
  .changer .demos	a[data-go="4"]{ color: #643d31; background-color: #ffcebf; border-color: #c2735c;}
}
    #container {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      overflow: hidden;
    }
    #container > div {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    [data-demo="1"] #container #f1 {
      left: 40%;
      right: auto;
      width: 100%;
      -webkit-animation: roll 60s linear infinite;
      -moz-animation: roll 60s linear infinite;
      animation: roll 60s linear infinite;
      -ms-animation: roll 60s linear infinite;
    }
    @-moz-keyframes roll {
      50% {
        -webkit-transform: translate(-40%, 0);
        -moz-transform: translate(-40%, 0);
        -ms-transform: translate(-40%, 0);
        -o-transform: translate(-40%, 0);
        transform: translate(-40%, 0);
      }
      100% {
        -webkit-transform: translate(0%, 0);
        -moz-transform: translate(0%, 0);
        -ms-transform: translate(0%, 0);
        -o-transform: translate(0%, 0);
        transform: translate(0%, 0);
      }
    }
    @-webkit-keyframes roll {
      50% {
        -webkit-transform: translate(-40%, 0);
        -moz-transform: translate(-40%, 0);
        -ms-transform: translate(-40%, 0);
        -o-transform: translate(-40%, 0);
        transform: translate(-40%, 0);
      }
      100% {
        -webkit-transform: translate(0%, 0);
        -moz-transform: translate(0%, 0);
        -ms-transform: translate(0%, 0);
        -o-transform: translate(0%, 0);
        transform: translate(0%, 0);
      }
    }
    @keyframes roll {
      50% {
        -webkit-transform: translate(-40%, 0);
        -moz-transform: translate(-40%, 0);
        -ms-transform: translate(-40%, 0);
        -o-transform: translate(-40%, 0);
        transform: translate(-40%, 0);
      }
      100% {
        -webkit-transform: translate(0%, 0);
        -moz-transform: translate(0%, 0);
        -ms-transform: translate(0%, 0);
        -o-transform: translate(0%, 0);
        transform: translate(0%, 0);
      }
    }
    [data-demo="2"] #container #f1 {
      -webkit-animation: zoomin 30s linear infinite;
      -moz-animation: zoomin 30s linear infinite;
      animation: zoomin 30s linear infinite;
      -ms-animation: zoomin 30s linear infinite;
    }
    @-moz-keyframes zoomin {
      50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
    }
    @-webkit-keyframes zoomin {
      50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
    }
    @keyframes zoomin {
      50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
    }
    [data-demo="2"] #container #f2 {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-animation: zoomout 30s linear infinite;
      -moz-animation: zoomout 30s linear infinite;
      animation: zoomout 30s linear infinite;
      -ms-animation: zoomout 30s linear infinite;
    }
    @-moz-keyframes zoomout {
      50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
    }
    @-webkit-keyframes zoomout {
      50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
    }
    @keyframes zoomout {
      50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
    }
    [data-demo="2"] #container #f3 {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-animation: zoomout 30s linear infinite;
      -moz-animation: zoomout 30s linear infinite;
      animation: zoomout 30s linear infinite;
      -ms-animation: zoomout 30s linear infinite;
    }
    [data-demo="3"] #container #f1 {
      -webkit-transform: translate(10%, 0%);
      -moz-transform: translate(10%, 0%);
      -ms-transform: translate(10%, 0%);
      -o-transform: translate(10%, 0%);
      transform: translate(10%, 0%);
      opacity: 0;
      -webkit-opacity: 0;
      -moz-opacity: 0;
      -webkit-animation: opa 40s linear infinite;
      -moz-animation: opa 40s linear infinite;
      animation: opa 40s linear infinite;
      -ms-animation: opa 40s linear infinite;
    }
    @-moz-keyframes opa {
      30% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      50% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
      }
      70% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      100% {
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -webkit-transform: translate(10%, 0%);
        -moz-transform: translate(10%, 0%);
        -ms-transform: translate(10%, 0%);
        -o-transform: translate(10%, 0%);
        transform: translate(10%, 0%);
      }
    }
    @-webkit-keyframes opa {
      30% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      50% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
      }
      70% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      100% {
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -webkit-transform: translate(10%, 0%);
        -moz-transform: translate(10%, 0%);
        -ms-transform: translate(10%, 0%);
        -o-transform: translate(10%, 0%);
        transform: translate(10%, 0%);
      }
    }
    @keyframes opa {
      30% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      50% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
      }
      70% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
      }
      100% {
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -webkit-transform: translate(10%, 0%);
        -moz-transform: translate(10%, 0%);
        -ms-transform: translate(10%, 0%);
        -o-transform: translate(10%, 0%);
        transform: translate(10%, 0%);
      }
    }