a:hover {
          cursor: pointer;
        }
        body,
        html {
          height: 100%;
          font-family: 'Raleway', Helvetica, Roboto, Arial, sans-serif;
        }

@media screen and (max-width: 360px){
  body,html {

            right: 1px;
        }

}

@media screen and (max-width: 320px){
    body, html {
        right: -4px;
         height: 101%;
    }
}
        .changer {
          position: absolute;
          z-index: 30;
          width: 230px;
          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: 1.1875em;
        }
        .changer .demos a[data-go="1"] {
          color: #40BBB8;
        }
        .changer .demos a[data-go="2"] {
          color: #B24600;
        }
        .changer .demos a[data-go="3"] {
          color: #98ADA4;
        }
        #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;
          }
        }