

.slider {
  width: 70%;
  
  height: 700px;
  position: relative;
  overflow: hidden; /* <===  */
  border-radius: 15px;
  margin-left:15%;
}

.slide {
  width: 100%;
  max-width: 800px;
  height:auto;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 400px;
  height: 266px;
  
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #FC0;
  font-size: 18px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFF;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 38%;
  left: 2%;
}

.btn-next {
  top: 38%;
  right: 2%;
}


@media screen and (max-width:1180px){
	



.slider {
  width: 92%;
  
  height: 900px;
  position: relative;
  overflow: hidden; /* <===  */
  border-radius: 15px;
  margin-left:10%;
}

.slide {
  width: 100%;
  max-width: 800px;
  height:auto;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 330px;
  height: 220px;
  
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #FC0;
  font-size: 18px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFF;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 33%;
  left: 2%;
}

.btn-next {
  top: 33%;
  right: 22%;
}


	
}



@media screen and (max-width:1024px){
	



.slider {
  width: 70%;
  
  height: 900px;
  position: relative;
  overflow: hidden; /* <===  */
  border-radius: 15px;
  margin-left:15%;
  margin-bottom:180px;
}

.slide {
  width: 100%;
  max-width: 800px;
  height:auto;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 350px;
  height: px;
  
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #FC0;
  font-size: 18px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFF;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 20%;
  left: 0%;
}

.btn-next {
  top: 20%;
  right: 1%;
}


	
}




@media screen and (max-width:820px){
	



.slider {
  width: 92%;
  
  height: 600px;
  position: relative;
  overflow: hidden; /* <===  */
  border-radius: 15px;
  margin-left:10%;
  margin-bottom:100px;
}

.slide {
  width: 100%;
  max-width: 800px;
  height:auto;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 330px;
  height: 220px;
  
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #FC0;
  font-size: 18px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFF;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 30%;
  left: 2%;
}

.btn-next {
  top: 33%;
  right: 14%;
}


	
}



@media screen and (max-width:640px){
	



.slider {
  width: 88%;
  
  height: 1000px;
  position: relative;
  overflow-x: hidden; /* <===  */
  border-radius: 15px;
  margin-left:12%;
}

.slide {
  width: 100%;
  /*max-width: 800px;*/
  height:auto;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 300px;
  height: 200px;
  
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 1000000;
  cursor: pointer;
  background-color: #FC0;
  font-size: 18px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFF;
  
}
.btn:active {
  transform: scale(1.1);
  
}
.btn-prev {
  top: 35%;
  left: 0%;
  
}

.btn-next {
  top: 35%;
  right: 13%;
}


	
}