.custom-slider_01 { display: none; }

.slide01-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}
.prev01, .next01 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    background-color: rgba(0,0,0,0.2);
    transition: background-color 0.6s ease;
}
.prev01{ left: 15px; }
.next01 { right: 15px; }

.prev01:hover, .next01:hover {
    background-color: rgba(0,0,0,0.8);
}
@media (orientation:landscape) {
	.slide01-text {
		background-color:  rgba(0,0,0,0.5);
		font-family: "Roboto", serif;	
		border-bottom-left-radius: 10px 10px;
		border-bottom-right-radius: 10px 10px;    
		color: #ffffff;
		font-size:18px;
		bottom: 4%;
		padding: 15px;
		text-align: center;
	}
	.slide01-index {
		font-family: "Roboto", serif;	
		color: #ffffff;
		font-size:0.8em;
		padding: 15px;
		position: absolute;
   
	}
	.slide01-img{
		width: 100%;
		border-top-left-radius: 10px 10px;
		border-top-right-radius: 10px 10px;
		object-fit: cover;
		object-position: center;
	}
	.slide01-dot{ 
		text-align: center; 
	}

}

@media (orientation:portrait) {
	
	.slide01-text {
		background-color:  rgba(15,30,70,0.5);
		font-family: "Roboto", serif;	
		border-bottom-left-radius: 10px 10px;
		border-bottom-right-radius: 10px 10px;    
		color: #ffffff;
		font-size:16px;
		bottom: 4%;
		padding: 15px;
		text-align: center;
	}
	.slide01-index {
		font-family: "Roboto", serif;	
		color: #ffffff;
		font-size:12px;
		padding: 15px;
		position: absolute;
   
	}
	.slide01-img{
		width: 100%;
		border-top-left-radius: 10px 10px;
		border-top-right-radius: 10px 10px;
		object-fit: cover;
		object-position: center;
	}	
	
	.slide01-dot{ 
		display: none;
		text-align: center; 
	}

}
	



.dot_01 {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 20px;
    background-color: #999999;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dot_01:hover { background-color: #111111; }

.fade {
    animation-name: fade;
    animation-duration: 1s;
}
@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}


.rotate  {
	animation-name: rotate;
	animation-duration: 0.7s;
}

@keyframes rotate  {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.slide-right {
  animation: 2s slide-right 2s forwards;
    transform:translateX(-100%);
}

@keyframes slide-right {
  to {
    transform:translateX(0);
  }
}