.changerwrapper {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 0px;
}
.changer {
  background-color: #fff;
  float: right;
  padding: 0;
  height: auto;
  margin-top: -100px;
  -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
}
.changer  button{
  width: 50px;
  height: 50px;
  border: none;
  box-shadow: none;
  margin-left: 90px;
  background-color: #4fc0e8;
  -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
}
.changer  button:hover img{
 -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
         transform: rotate(360deg);
      -webkit-transition: transform 2s ease;
         -moz-transition: transform 2s ease;
           -o-transition: transform 2s ease;
              transition: transform 2s ease;
}
.changerin {
width: 90px;
  -webkit-transition: transform 5s ease;
     -moz-transition: transform 5s ease;
       -o-transition: transform 5s ease;
          transition: transform 5s ease;
}
@media (min-width: 600px) {
.changerin2 {
margin-left: 0;
  -webkit-transition: transform 5s ease;
     -moz-transition: transform 5s ease;
       -o-transition: transform 5s ease;
          transition: transform 5s ease;
}
.changerin2.changerin3 {
margin-left: -90px;
  -webkit-transition: transform 5s ease;
     -moz-transition: transform 5s ease;
       -o-transition: transform 5s ease;
          transition: transform 5s ease;
}
}
@media (max-width: 599px) {
.changerin2 {
margin-left: -90px;
  -webkit-transition: transform 5s ease;
     -moz-transition: transform 5s ease;
       -o-transition: transform 5s ease;
          transition: transform 5s ease;
}
.changerin2.changerin3 {
margin-left: 0;
  -webkit-transition: transform 5s ease;
     -moz-transition: transform 5s ease;
       -o-transition: transform 5s ease;
          transition: transform 5s ease;
}
}

a.colors {
  display: inline-block;
  cursor:pointer;
  float: right;
  height:30px;
  width:30px;
  margin: 0 10px 10px 0;
  border-radius: 4px;
}
a.colors:hover {
 -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
         transform: rotate(180deg);
}
a.color1 {
  background: #4cd9b6;
  background: -webkit-linear-gradient(#4cd9b6, #35ba99);
  background: -o-linear-gradient(#4cd9b6, #35ba99);
  background: -moz-linear-gradient(#4cd9b6, #35ba99);
  background: linear-gradient(#4cd9b6, #35ba99);
}
a.color2 {
  background: #4fc0e8; 
  background: -webkit-linear-gradient(#4fc0e8, #5d9cec);
  background: -o-linear-gradient(#4fc0e8, #5d9cec);
  background: -moz-linear-gradient(#4fc0e8, #5d9cec);
  background: linear-gradient(#4fc0e8, #5d9cec);
}
a.color3 {
  background: #fb6e52;
  background: -webkit-linear-gradient(#fb6e52, #e9573e);
  background: -o-linear-gradient(#fb6e52, #e9573e);
  background: -moz-linear-gradient(#fb6e52, #e9573e);
  background: linear-gradient(#fb6e52, #e9573e);
}
a.color4 {
  background: #ac92ed;
  background: -webkit-linear-gradient(#ac92ed, #9176d6);
  background: -o-linear-gradient(#ac92ed, #9176d6);
  background: -moz-linear-gradient(#ac92ed, #9176d6);
  background: linear-gradient(#ac92ed, #9176d6);
}
a.color5 {
  background: #f9d682;
  background: -webkit-linear-gradient(#f9d682, #eac365);
  background: -o-linear-gradient(#f9d682, #eac365);
  background: -moz-linear-gradient(#f9d682, #eac365);
  background: linear-gradient(#f9d682, #eac365);
}
a.color6 {
  background: #4fc0e8;
  background: -webkit-linear-gradient(#4fc0e8, #48cfae);
  background: -o-linear-gradient(#4fc0e8, #48cfae);
  background: -moz-linear-gradient(#4fc0e8, #48cfae);
  background: linear-gradient(#4fc0e8, #48cfae);
}