.anim-slide-this { z-index: 1; }
.anim-slider {
   background: #fff;
   font-family: 'Raleway';
}
.anim-slide h2{
   font-weight: bold!important;
   color:#666!important;
}
.anim-slide img#image-one {
   bottom: 0%;
   left: 20%;
}
.anim-slide h2#title-one {
   color: #a4a4a4;
   font-size: 40px;
   font-weight: 100;
   right: 2%;
   top: 14%;
}
.anim-slide p#text-one{
   color: #a4a4a4;
   font-size: 14px;
   line-height: 24px;
   max-width:30%;
   right: 2%;
   text-align: right;
   top: 37%;
}
.anim-slide a#btn-one{
   top: 68%;
   right: 2%;
   color: #fff;
   display: block;
   font-size: 16px;
   font-weight: 700;
   padding: 15px 0px;
   text-align: center;
   text-decoration: none;
   width:250px;
   -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
}
.anim-slide a#btn-one:hover{
   background: #000;
   color: #fff;
}

.anim-slide img#image-two{
   bottom: 0%;
   left: 20%;
}
.anim-slide h2#title-two{
   color: #a4a4a4;
   font-size: 40px;
   font-weight: 100;
   right: 2%;
   top: 14%;
}
.anim-slide p#text-two{
   top: 37%;
   right: 2%;
   color: #a4a4a4;
   font-size: 14px;
   line-height: 24px;
   max-width:30%;
   text-align: right;
}
.anim-slide a#btn-two{
   top: 68%;
   right: 2%;
   color: #fff;
   display: block;
   font-size: 16px;
   font-weight: 700;
   padding: 15px 0px;
   text-align: center;
   text-decoration: none;
   -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
   width:250px;
}
.anim-slide a#btn-two:hover{
   background: #000;
   color: #fff;
}
.anim-slide img#image-three{
   bottom: 0%;
   left: 20%;
}
.anim-slide h2#title-three{
   color: #a4a4a4;
   font-size: 40px;
   font-weight: 100;
   right: 2%;
   top: 14%;
}
.anim-slide p#text-three{
   top: 37%;
   right: 2%;
   color: #a4a4a4;
   font-size: 14px;
   line-height: 24px;
   max-width:30%;
   text-align: right;
}
.anim-slide a#btn-three{
   top: 68%;
   right: 2%;
   color: #fff;
   display: block;
   font-size: 16px;
   font-weight: 700;
   padding: 15px 0px;
   text-align: center;
   text-decoration: none;
   -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
   width:250px;
}
.anim-slide a#btn-three:hover{
   background: #000;
   color: #fff;
}
.anim-slide img#image-four{
   bottom: 0%;
   left: 20%;
}
.anim-slide h2#title-four{
   color: #a4a4a4;
   font-size: 40px;
   font-weight: 100;
   right: 2%;
   top: 14%;
}
.anim-slide p#text-four{
   top: 37%;
   right: 2%;
   color: #a4a4a4;
   font-size: 14px;
   line-height: 24px;
   max-width:30%;
   text-align: right;
}
.anim-slide a#btn-four{
   color: #fff;
   display: block;
   font-size: 16px;
   font-weight: 700;
   padding: 15px 0px;
   right: 2%;
   text-align: center;
   text-decoration: none;
   top: 68%;
   -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
   width: 250px;
}
.anim-slide a#btn-four:hover {
   background: #000;
   color: #fff;
}


.anim-slide img#image-five{
   bottom: 0%;
   left: 20%;
}
.anim-slide h2#title-five{
   color: #a4a4a4;
   font-size: 40px;
   font-weight: 100;
   right: 2%;
   top: 14%;
}
.anim-slide p#text-five{
   top: 37%;
   right: 2%;
   color: #a4a4a4;
   font-size: 14px;
   line-height: 24px;
   max-width:30%;
   text-align: right;
}
.anim-slide a#btn-five{
   color: #fff;
   display: block;
   font-size: 16px;
   font-weight: 700;
   padding: 15px 0px;
   right: 2%;
   text-align: center;
   text-decoration: none;
   top: 68%;
   -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
   width: 250px;
}
.anim-slide a#btn-five:hover {
   background: #000;
   color: #fff;
}
.anim-dots {
   height: 140%;
   left: -2px;
   padding-top: 35px;
   top: 35%;
   -webkit-transform: skewY(50deg);
       -ms-transform: skewY(50deg);
           transform: skewY(50deg);
   width: 40%;
   z-index: 500;
}
.anim-dots span {
   cursor: pointer;
   display: inline-block;
   height: 80px;
   margin: 5px;
   position: relative;
   -webkit-transform: skewX(-40deg);
       -ms-transform: skewX(-40deg);
           transform: skewX(-40deg);
   width: 60px;
}
.anim-dots span.anim-dots-this:after {
   background: rgb(255,255,255);
   content: '';
   height: 80px;
   left: 0;
   position: absolute;
   top: 0;
   width: 60px;
}
@media screen and (max-width: 1199px) {
   .anim-dots {
      height: 160%;
      left: -5%;
      padding-top: 35px;
      top: 35%;
      width: 60%;
   }
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 991px) {
   .anim-dots {
      background: none !important;
      height: 20%;
      left: 0%;
      padding-top: 35px;
      padding-top: 35px;
      top: 80%;
      -webkit-transform: skewY(0deg);
          -ms-transform: skewY(0deg);
              transform: skewY(0deg);
      width: 100%;
      z-index: 2;
   }
   .anim-dots span {
      background: #e9be4b !important;
      box-shadow: none;
      cursor: pointer;
      display: inline-block;
      height: 14px;
      margin: 5px;
      position: relative;
      -webkit-transform: skewY(0deg);
          -ms-transform: skewY(0deg);
              transform: skewY(0deg);
      width: 14px;
   }
   .anim-dots span.anim-dots-this:after {
      background: #f5f5f5;
      content: '';
      height: 14px;
      left: 0;
      position: absolute;
      top: 0;
      width: 14px;
   }

   .anim-slide img#image-one{left: -15%;}
   .anim-slide h2#title-one{font-size: 30px}
   .anim-slide p#text-one{ top: 30%;}
   .anim-slide img#image-two{left: -15%;}
   .anim-slide h2#title-two{font-size: 30px}
   .anim-slide p#text-two{ top: 30%;}
   .anim-slide img#image-three{left: -15%;}
   .anim-slide h2#title-three{font-size: 30px}
   .anim-slide p#text-three{ top: 30%;}
   .anim-slide img#image-four{left: -15%;}
   .anim-slide h2#title-four{font-size: 30px}
   .anim-slide p#text-four{ top: 30%;}
}

@media screen and (max-width: 480px) {
   .anim-slide img#image-one,
   .anim-slide img#image-two,
   .anim-slide img#image-three,
   .anim-slide img#image-four{
      left: -5000px;
   }
   .anim-slide h2#title-one,
   .anim-slide h2#title-two,
   .anim-slide h2#title-three,
   .anim-slide h2#title-four{
      left: 10%;
      width: 80%;
   }
   .anim-slide p#text-one,
   .anim-slide p#text-two,
   .anim-slide p#text-three,
   .anim-slide p#text-four{
      left: 10%;
      max-width: 80%;
      text-align: center;
      top: 30%;
   }
   .anim-slide a#btn-one,
   .anim-slide a#btn-two,
   .anim-slide a#btn-three,
   .anim-slide a#btn-four{
      left: 10%;
      text-align: center;
      top: 65%;
      width: 80%;
   }
}