.container {
    /* max-width: 1000px; */
    /* margin: 0 auto; */
}
.containerdoto {
    max-width: 500px; 
   /*margin: 0 auto;*/
}

.slider {
	position: relative;
	overflow: hidden;
	border: 3px solid #173647;
	
	width: 100%;
}

.slider img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.before {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 2;
	width: 50%;
	height: 100%;
}

.change {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 10;
	width: 3px;
	height: 100%;
	background-color: #173647 !important;
}

.change::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 100%;
	width: 50px;
	height: 50px;
	background-color: #173647 !important;
    background-image: url("/add_site/doto/mousedrag.png");
background-repeat: repeat;
background-position: center;
background-size:cover;
	transform: translate(-50%, -50%);
}