html, body { height: 100%; }

body {
	color: black;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background: url("img/ballons.jpg") left bottom repeat-x;
    background-size: cover;
 //   background-size: 2400px 1200px;
/* ----------------------------------------------------------------   */
	animation-name: body-anim;
	animation-duration: 200s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes body-anim {
    0%, 100% {background-position: center 0;}
//    15% {background-position: 15px center;}
    50% {background-position: 1220px;}
//    65% {background-position: 15px center;}
}
.center-al2 {
	width: 600px;
	height: 440px;
	position: relative;
	margin: 0 auto;
	botom: 0px;
	display: flex;
//			border: 3px solid magenta;   /*  border   */ 
	flex-direction: column;
}

.slider{
//  border: 1px red solid;  			 /*  border   */ 
	width: 650px; 
//  height: 0px;
	position: relative;

	padding-top: 280px; 
	margin: 60px auto 10px;
//	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 50%; top: 0;
  margin-left: -275px;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	margin: 0px 0 0 5px;
	border: 1px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
}
.slider label img{
	display: block;

}
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}

.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}




.elem-cont2 {
	width: 700px;
	height: auto;
	position: absolute;
//				border: 1px red solid;   			 /*  border   */ 
//	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ball {
	width: 182px;
	height: 270px;
	background: url('img/ballon2.png') left top no-repeat;
	position: absolute;
	left: -80px;
	transition: .8s;
//				border: 1px green dotted;   		/*  border   */ 
	animation: ball 3s infinite linear;
}
@keyframes ball {
	0%, 100% {background-position: center 0;}
    15% {background-position: center 15px;}
    50% {background-position: center 20px;}
    65% {background-position: center 5px;}
}
.ballns {
	width: 165px;
	height: 280px;
	background: url('img/ballons1.png') right bottom no-repeat;
	position: absolute;
	right: -30px;
	transition: .8s;
//				border: 1px green dotted;   		/*  border   */ 
	animation: ball 2s infinite linear;
}
.ballnss {
	width: 165px;
	height: 280px;
	background: url('img/ballons2.png') right bottom no-repeat;
	position: absolute;
	right: 0px;
	transition: .8s;
//				border: 1px green dotted;   		/*  border   */ 
	animation: ball 1s infinite linear;
}

.elem-fon-04 img {
	opacity: 0.8;
}