.sl-slider-wrapper {
   width: 100%;
   height: 500px;
   overflow: hidden;
   position: relative;
 }

 .sl-slider h2,
 .sl-slider blockquote {
   padding: 50px 650px 10px 0;
   width: 100%;
   max-width: 1140px;
   color: #fff;
   margin: 0 auto;
   position: relative;
   z-index: 100;
   border: none;
 }

 .sl-slider h2 {
   font-size: 40px;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 }

 .sl-slider h2 a {
   color: #fff;
 }

 .sl-slider h2 a:hover {
   color: #72b70f;
   text-decoration: none;
 }

 .sl-slider blockquote {
   padding-top: 10px;
   font-weight: 300;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 }

 .sl-slider blockquote p {
   font-size: 18px;
 }

 .sl-slider blockquote p.location {
   font-size: 24px;
   color: #fff;
 }

 .sl-slider blockquote cite {
   font-size: 20px;
   font-weight: 700;
   font-style: normal;
   text-transform: uppercase;
   padding: 15px;
   display: inline-block;
   background-color: #72b70f;
   border-radius: 5px;
 }

 .bg-img {
   padding: 200px;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   position: absolute;
   top: -200px;
   left: -200px;
   width: 100%;
   height: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   background-position: center center;
   background-color: #000;
   opacity: 1;
   /*cange opacity for slider*/
 }

 /* Custom navigation arrows */
 .nav-arrows span {
   position: absolute;
   z-index: 2000;
   top: 50%;
   width: 40px;
   height: 40px;
   border: 8px solid #ddd;
   border: 8px solid rgba(150, 150, 150, 0.4);
   text-indent: -90000px;
   margin-top: -40px;
   cursor: pointer;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .nav-arrows span:hover {
   border-color: rgba(150, 150, 150, 0.9);
 }

 .nav-arrows span.nav-arrow-prev {
   left: 5%;
   border-right: none;
   border-top: none;
 }

 .nav-arrows span.nav-arrow-next {
   right: 5%;
   border-left: none;
   border-bottom: none;
 }

 /* Custom navigation dots */
 .nav-dots {
   text-align: center;
   position: absolute;
   bottom: 2%;
   height: 30px;
   width: 100%;
   left: 0;
   z-index: 1000;
 }

 .nav-dots span {
   display: inline-block;
   position: relative;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   margin: 3px;
   background: #ddd;
   background: rgba(150, 150, 150, 0.4);
   cursor: pointer;
   box-shadow:
     0 1px 1px rgba(255, 255, 255, 0.4),
     inset 0 1px 1px rgba(0, 0, 0, 0.1);
 }

 .nav-dots span {
   background: rgba(150, 150, 150, 0.1);
   margin: 6px;
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
   box-shadow:
     0 1px 1px rgba(255, 255, 255, 0.4),
     inset 0 1px 1px rgba(0, 0, 0, 0.1),
     0 0 0 2px rgba(255, 255, 255, 0.5);
 }

 .nav-dots span.nav-dot-current,
 .nav-dots span:hover {
   box-shadow:
     0 1px 1px rgba(255, 255, 255, 0.4),
     inset 0 1px 1px rgba(0, 0, 0, 0.1),
     0 0 0 5px rgba(255, 255, 255, 0.5);
 }

 .nav-dots span.nav-dot-current:after {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   top: 3px;
   left: 3px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.8);
 }

 /* Content elements */
 .bg-img-1 {
   background-image: url(../../../images/slider/1.jpg);
 }

 .bg-img-2 {
   background-image: url(../../../images/slider/2.jpg);
 }

 .bg-img-3 {
   background-image: url(../../../images/slider/3.jpg);
 }

 .bg-img-4 {
   background-image: url(../../../images/slider/4.jpg);
 }

 .bg-img-5 {
   background-image: url(../../../images/slider/5.jpg);
 }

 /* Animations for content elements */
 .sl-trans-elems .deco {
   -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
   -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
   -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
   -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
   animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 }

 .sl-trans-elems h2 {
   -webkit-animation: moveUp 1s ease-in-out both;
   -moz-animation: moveUp 1s ease-in-out both;
   -o-animation: moveUp 1s ease-in-out both;
   -ms-animation: moveUp 1s ease-in-out both;
   animation: moveUp 1s ease-in-out both;
 }

 .sl-trans-elems blockquote {
   -webkit-animation: fadeIn 0.5s linear 0.5s both;
   -moz-animation: fadeIn 0.5s linear 0.5s both;
   -o-animation: fadeIn 0.5s linear 0.5s both;
   -ms-animation: fadeIn 0.5s linear 0.5s both;
   animation: fadeIn 0.5s linear 0.5s both;
 }

 .sl-trans-back-elems .deco {
   -webkit-animation: scaleDown 1s ease-in-out both;
   -moz-animation: scaleDown 1s ease-in-out both;
   -o-animation: scaleDown 1s ease-in-out both;
   -ms-animation: scaleDown 1s ease-in-out both;
   animation: scaleDown 1s ease-in-out both;
 }

 .sl-trans-back-elems h2 {
   -webkit-animation: fadeOut 1s ease-in-out both;
   -moz-animation: fadeOut 1s ease-in-out both;
   -o-animation: fadeOut 1s ease-in-out both;
   -ms-animation: fadeOut 1s ease-in-out both;
   animation: fadeOut 1s ease-in-out both;
 }

 .sl-trans-back-elems blockquote {
   -webkit-animation: fadeOut 1s linear both;
   -moz-animation: fadeOut 1s linear both;
   -o-animation: fadeOut 1s linear both;
   -ms-animation: fadeOut 1s linear both;
   animation: fadeOut 1s linear both;
 }

 @-webkit-keyframes roll {
   0% {
     -webkit-transform: translateX(500px) rotate(360deg);
   }

   100% {
     -webkit-transform: translateX(0px) rotate(0deg);
   }
 }

 @-moz-keyframes roll {
   0% {
     -moz-transform: translateX(500px) rotate(360deg);
     opacity: 0;
   }

   100% {
     -moz-transform: translateX(0px) rotate(0deg);
     opacity: 1;
   }
 }

 @-o-keyframes roll {
   0% {
     -o-transform: translateX(500px) rotate(360deg);
     opacity: 0;
   }

   100% {
     -o-transform: translateX(0px) rotate(0deg);
     opacity: 1;
   }
 }

 @-ms-keyframes roll {
   0% {
     -ms-transform: translateX(500px) rotate(360deg);
     opacity: 0;
   }

   100% {
     -ms-transform: translateX(0px) rotate(0deg);
     opacity: 1;
   }
 }

 @keyframes roll {
   0% {
     transform: translateX(500px) rotate(360deg);
     opacity: 0;
   }

   100% {
     transform: translateX(0px) rotate(0deg);
     opacity: 1;
   }
 }

 @-webkit-keyframes moveUp {
   0% {
     -webkit-transform: translateY(40px);
   }

   100% {
     -webkit-transform: translateY(0px);
   }
 }

 @-moz-keyframes moveUp {
   0% {
     -moz-transform: translateY(40px);
   }

   100% {
     -moz-transform: translateY(0px);
   }
 }

 @-o-keyframes moveUp {
   0% {
     -o-transform: translateY(40px);
   }

   100% {
     -o-transform: translateY(0px);
   }
 }

 @-ms-keyframes moveUp {
   0% {
     -ms-transform: translateY(40px);
   }

   100% {
     -ms-transform: translateY(0px);
   }
 }

 @keyframes moveUp {
   0% {
     transform: translateY(40px);
   }

   100% {
     transform: translateY(0px);
   }
 }

 @-webkit-keyframes fadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @-moz-keyframes fadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @-o-keyframes fadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @-ms-keyframes fadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes fadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @-webkit-keyframes scaleDown {
   0% {
     -webkit-transform: scale(1);
   }

   100% {
     -webkit-transform: scale(0.5);
   }
 }

 @-moz-keyframes scaleDown {
   0% {
     -moz-transform: scale(1);
   }

   100% {
     -moz-transform: scale(0.5);
   }
 }

 @-o-keyframes scaleDown {
   0% {
     -o-transform: scale(1);
   }

   100% {
     -o-transform: scale(0.5);
   }
 }

 @-ms-keyframes scaleDown {
   0% {
     -ms-transform: scale(1);
   }

   100% {
     -ms-transform: scale(0.5);
   }
 }

 @keyframes scaleDown {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(0.5);
   }
 }

 @-webkit-keyframes fadeOut {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @-moz-keyframes fadeOut {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @-o-keyframes fadeOut {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @-ms-keyframes fadeOut {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 @keyframes fadeOut {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 /* Media Queries for custom slider */
 @media screen and (max-width: 1100px) {
   .sl-slider-wrapper {
     height: 400px;
   }

   .sl-slider h2 {
     font-size: 36px;
     padding: 20px;
   }

   .sl-slider blockquote {
     font-size: 16px;
     padding: 20px;
   }
 }

 @media screen and (max-width: 700px) {
   .sl-slider-wrapper {
     height: 300px;
     text-align: center;
   }

   .sl-slider blockquote p {
     display: none;
   }
 }