@import url('https://fonts.googleapis.com/css?family=Roboto');


.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out;
}
.slide.current {
  opacity: 1;
  z-index: 8;
}
.slide .content {
  position: absolute;
  /* bottom: 70px;
  left: -600px; */
  opacity: 0;
  /* width: 600px; */
  /* background-color: rgba(255, 255, 255, 0.8); */
  /* transform: translateY(-50px); */
  color: #333;
  padding: 35px;
}
.slide.current .content{
  z-index: 9;
  text-align: center;
  /* margin:190px 380px; */
}
.content p{
  /* font-family: 'EB Garamond', serif; */
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  font-style: italic;
  color: rgb(201, 171, 129);

}
.content button a{
  text-decoration: none;
}
.view-more-btn{
  transition: color .2s ease-out;
}
.view-more-btn{
  /* width: 130px;
  height: 64px; */
  color: white;
  background: transparent;
  /* border: 2px solid rgb(201, 171, 129); */
  position: relative;
    display: block;
    /* vertical-align: middle; */
    width: 160px;
    margin: 0 auto;
    /* font-family: "Open Sans"; */
    font-size: 13px;
    line-height: 2em;
    font-weight: 600;
    letter-spacing: .07em;
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    -o-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    padding: 7px 20px 10px;
    cursor: pointer;
    text-decoration: none;
}
.view-more-btn svg{
  position: absolute;
    top: 0;
    left: 0;
}
.view-more-btn span{
  /* font-family: 'Open Sans', sans-serif; */
  font-family: 'Source Serif 4', serif;
  font-size: 13px;
  font-weight: 200;
  color: white;
  vertical-align: text-top;
}
.view-more-btn svg rect{
  fill: transparent;
  stroke: #c9ab81;
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  stroke-width: 2px;
  stroke-dashoffset: 240%;
  stroke-dasharray: 330% 25;
}
.view-more-btn:hover svg rect{
  stroke-dashoffset: -113%!important;
}
.content h1 {
  color: white;
  font-size: 70px;
  /* font-family: 'EB Garamond', serif; */
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  margin-bottom: 25px;
}

.slide.current .content {
  opacity: 1;
  /* transform: translateY(0px); */
  transition: all 0.7s ease-in-out 0.3s;
}

 .buttons button {
  /* border: 2px solid #fff; */
  border: none;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  /* padding: 13px 15px; */
  /* border-radius: 50%; */
  outline: none;
}
/*
.buttons button:hover {
  background-color: #fff;
  color: #333;
} */
.buttons button#next, .buttons button#prev {
  position: absolute;
  top: 48%;
  right: 15px;
  z-index: 9;
  fill: transparent;
  stroke: #fff;
  width: 16px;
  height: 34px;
}
.buttons button#prev {
  right: inherit;
  left: 15px;
}
.buttons button#next polyline:nth-child(1){
  stroke-dasharray: 40;
    stroke-dashoffset: 40;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: .4s cubic-bezier(.49,.48,1,1);
    -o-transition: .4s cubic-bezier(.49,.48,1,1);
    transition: .4s cubic-bezier(.49,.48,1,1);
}
.buttons button#next polyline:nth-child(2){
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
  -webkit-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  -o-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  transition: .4s .4s cubic-bezier(.49,.64,1,1);
}
.buttons button#next:hover polyline:nth-child(1){
  stroke-dashoffset: 0;
  -webkit-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  -o-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  transition: .4s .4s cubic-bezier(.49,.64,1,1);
}
.buttons button#next:hover polyline:nth-child(2){
  stroke-dashoffset: 40;
    -webkit-transition: .4s cubic-bezier(.49,.48,1,1);
    -o-transition: .4s cubic-bezier(.49,.48,1,1);
    transition: .4s cubic-bezier(.49,.48,1,1);
}



.buttons button#prev{
  transform: scaleY(-1) rotateZ(180deg);
}
.buttons button#prev svg polyline:nth-child(1){
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .4s cubic-bezier(.49,.48,1,1);
  -o-transition: .4s cubic-bezier(.49,.48,1,1);
  transition: .4s cubic-bezier(.49,.48,1,1);
}
.buttons button#prev svg polyline:nth-child(2){
  stroke-dasharray: 40;
    stroke-dashoffset: 0;
    -webkit-transition: .4s .4s cubic-bezier(.49,.64,1,1);
    -o-transition: .4s .4s cubic-bezier(.49,.64,1,1);
    transition: .4s .4s cubic-bezier(.49,.64,1,1);
}
.buttons button#prev:hover svg polyline:nth-child(1){
  stroke-dashoffset: 0;
  -webkit-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  -o-transition: .4s .4s cubic-bezier(.49,.64,1,1);
  transition: .4s .4s cubic-bezier(.49,.64,1,1);
}
.buttons button#prev:hover svg polyline:nth-child(2){
  stroke-dashoffset: 40;
    -webkit-transition: .4s cubic-bezier(.49,.48,1,1);
    -o-transition: .4s cubic-bezier(.49,.48,1,1);
    transition: .4s cubic-bezier(.49,.48,1,1);
}

/* @media (max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

  .slide.current .content {
    transform: translateY(-300px);
  }
} */



/* Backgorund Images */
 
.slide:first-child {
  /* background: url('https://source.unsplash.com/RyRpq9SUwAU/1600x900') no-repeat
    center top/cover; */
}
.slide:nth-child(2) {
  /* background: url('https://source.unsplash.com/BeOW_PJjA0w/1600x900') no-repeat
    center top/cover; */
}
.slide:nth-child(3) {
  /* background: url('https://source.unsplash.com/TMOeGZw9NY4/1600x900') no-repeat
    center top/cover; */
}
.slide:nth-child(4) {
  background: url('https://source.unsplash.com/yXpA_eCbtzI/1600x900') no-repeat
    center top/cover;
}
.slide:nth-child(5) {
  background: url('https://source.unsplash.com/ULmaQh9Gvbg/1600x900') no-repeat
    center top/cover;
} 
.slide:nth-child(6)  {
  background: url('https://source.unsplash.com/ggZuL3BTSJU/1600x900') no-repeat
    center center/cover;
}
.slide-img01, .slide-img02, .slide-img03{
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.slide.current .slide-img01{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  background: url('../images/home-slider/slider_1.jpg') no-repeat left top/cover;
  animation: zoom-in-zoom-out 10s ease ;
}
.slide.current .slide-img02{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  background: url('../images/home-slider/slider_2.jpg') no-repeat
  center top/cover;
  animation: zoom-in-zoom-out2 15s ease ;
}
.slide.current .slide-img03{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  background: url('../images/home-slider/slider_3.jpg') no-repeat
    center top/cover;
    animation: zoom-in-zoom-out 10s ease ;
}
/* .slide.current .slide-img02{
  animation: zoom-in-zoom-out 10s ease;
  transform: translate3d(-17.575px, -296.887px, 0px) scale(1.05, 1.05)
} */

.zoom-in-out-box {
  /* margin: 24px; */
  /* width: 50px;
  height: 50px; */
  /* background: #f50057; */
  /* animation: zoom-in-zoom-out 10s ease ; */
}

.zoom-in-out-box2 {
  /* animation: zoom-in-zoom-out2 15s ease ; */
}
/* infinite */

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) ;
    
  }
  50% {
    transform: scale(1.05, 1.05) translate(35px, -10px);
  }
  100% {
    transform: scale(1, 1);
  }
  
}

@keyframes zoom-in-zoom-out2 {
  0% {
    transform: scale(1.5, 1.5);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1.5, 1.5);
  }
  
}

.navigation-button {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 99;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.current,
.dot:hover {
  background-color: #717171;
}