@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
  margin: 0;
  padding: 0;
}
.back {border:1px solid #f00000;
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 100;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-decoration: none;
  transition: color .3s;
}
.back:hover {
  color: #aaa;
}

.slider-wrap {
position:relative;
  max-width: 950px;
width:100%;
  margin: 40px auto;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-arrow {
position: absolute;
width:4%;
height:atuo;
  top:30%;
  z-index: 100;
  padding: 4px 8px;
/*  background: #000;
  border: none;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
  font-size: 50px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;*/
  cursor: pointer;
}

.slick-arrow:hover {
  color: #fff;
  opacity: .6;
}
.slick-prev {
  left: 18%;
}
.slick-next {
  right:18%;
}
.slick-dots {
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  font-size: 0;
  text-align: center;
  list-style: none;
}
.slick-dots li {
  display: inline-block;
  margin: 0 8px;
}
.slick-dots li button {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 12px;
  height: 12px;
  background: #aaa;
  border: 0;
  border-radius: 50%;
  color: transparent;
  cursor: pointer;
}
.slick-dots .slick-active button,.slick-dots li button:hover {
  background: #222;
}

#slick {position:relative;max-width:950px;width:100%;height:auto;margin:0 auto;}
#slick img{width:100%;height:auto;}

#slick .slick-arrow,{
  top: 243px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#slick .slick-dots {
position: static;
width:100%
margin-top: 0px;
text-align:left;
padding-left:0.4%;
}

#slick .slick-dots li {
  width: 5.5%;
  margin: 0 0.75% 0 0;
}
#slick .slick-dots li:first-child {
  margin-left: 0;
}
#slick .slick-dots li img {
  width: 105%;
  cursor: pointer;
  transition: .2s ease-in-out;
padding:5px 0 0 0;
}
#slick .slick-dots .slick-active img,
#slick .slick-dots li:hover img {
  opacity: .5;
}
/*====================================*/
@media only screen and ( max-width:834px) {
.slick-prev {
  left:11%;
}
.slick-next {
  right:11%;
}
.slick-arrow {
  position: absolute;
width:5%;
height:atuo;
  top: 33.1%;
  z-index: 200;
  padding: 4px 8px;
}
}

/*====================================*/
@media only screen and ( max-width: 768px) {
#slick {max-width:750px;width:100%;height:auto;margin:0 auto;}
#slick img{width:100%;height:auto;}
.slick-prev {
  left:11%;
}
.slick-next {
  right:11%;
}
.slick-arrow {
  position: absolute;
width:5%;
height:atuo;
  top: 32.5%;
  z-index: 200;
  padding: 4px 8px;
}
}
/*====================================*/
@media only screen and ( max-width: 736px) {
.slick-prev {
  left:13%;
}
.slick-next {
  right:13%;
}
.slick-arrow {
  position: absolute;
width:5%;
height:atuo;
  top: 32.8%;
  z-index: 200;
  padding: 4px 8px;
}
}
/*====================================*/
@media screen and ( max-width:640px) {
.slick-prev {
  left:15%;
}
.slick-next {
  right:15%;
}
.slick-arrow {
position: absolute;
width:5%;
height:atuo;
  top:30%;
  z-index: 200;
  padding: 4px 8px;
}
}
/*====================================*/
@media screen and ( max-width:600px) {
.slick-prev {
  left:15%;
}
.slick-next {
  right:15%;
}
.slick-arrow {
position: absolute;
width:5%;
height:atuo;
  top: 30%;
  z-index: 200;
  padding: 4px 8px;
}
}
/*====================================*/
@media only screen and ( max-width: 481px) {
.slick-prev {
  left:1%;
}
.slick-next {
  right:1%;
}
.slick-arrow {
  position: absolute;
width:6%;
height:atuo;
  top: 41.18%;
  z-index: 200;
  padding: 4px 8px;
}
}

/*====================================*/
@media only screen and ( max-width: 414px) {
.slick-prev {
  left:1%;
}
.slick-next {
  right:1%;
}
.slick-arrow {
  position: absolute;
width:6%;
height:atuo;
  top: 37%;
  z-index: 200;
  padding: 4px 8px;
}
}

/*====================================*/
@media only screen and ( max-width:384px) {
.slick-prev {
  left:1%;
}
.slick-next {
  right:1%;
}
.slick-arrow {
  position: absolute;
width:6%;
height:atuo;
  top:34.2%;
  z-index: 200;
  padding: 4px 8px;
}
}

/*====================================*/
@media only screen and ( max-width:375px) {
.slick-prev {
  left:1%;
}
.slick-next {
  right:1%;
}
.slick-arrow {
  position: absolute;
width:6%;
height:atuo;
  top: 36%;
  z-index: 200;
  padding: 4px 8px;
}
}

/*====================================*/
@media only screen and ( max-width:320px) {
.slick-arrow{
  position: absolute;
width:6%;
height:atuo;
  top: 36%;
  z-index:200;
  padding: 4px 8px;
}
}
/*====================================*/