button{
	border:0;
}

.pub-content{
	width: 100%;
	height: 100%;
	background-color: black;
	position: relative;
	box-shadow: 5px 5px 10px black;
	
	/*border-top: 1px solid black;*/
}

.pub-body{
	
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.pub-bb{
	width: 100%;
	height: 10px;
	position: absolute;
	top: calc(100% - 10px);
	left: 0px;
	background:linear-gradient(180deg,rgba(192,169,3,0),#C0A903  99.99%,#C0A903 );
}

.pub{
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 1s; 
	display: inline-block;
	vertical-align: top;
	white-space: nowrap; 


}
.pub-actidve{
	visibility: visible;
	opacity: 1.0;
}

.pub-active .pub-texte-content{
	position: absolute;
	top: 100px;	
	left: 50px; 

}

.pub-texte-content{
	position: absolute;
	-webkit-transition:left .1s 1s;
	-moz-transition:all .1s 1s;
	-o-transition: all .1s 1s;
	transition: all .1s 1s;
}
.pub-texte-content:hover{
	left: 100px;
	background-color: grey;

}

.pub-title{
	font-size: 3em;
	margin-bottom: 0px;
}
.pub-texte{
	line-height: 0px;
	font-size: 1.2em;
}
.pub img{
	width: 100%;
	height: 450px;
}
.pub-active img{
	opacity: 1.0;
}
.pub-btn{
	text-align: center;
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%; 
	top: 45%;
	font-size: 3.0em;
	background:transparent;
	color: grey;
	display: none;
}
.pub-btn:hover{
	background-color: black;
	color: white;
	
}
.pub-content:hover .pub-btn{
	display: inline-block;
}
.pub-btn-left{
	left: 10px;

}
.pub-btn-right{
	right: 10px;
}
.pub-nav{
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding-bottom: 5px;
	background-color: rgba(244,244,244,0.0); 
	text-align: center;
	z-index: 999999;
}
.pub-nav-element{
	width:0.5em; 
	height:0.5em;
	padding: 0;
	border-radius: 50%;
	margin: 3px 2px;
}
.pub-nav-play{
	font-size: .6em;
	color: white;
	width:0.5em; 
	height:0.5em;
	padding: 0;
	margin: 3px 2px;
	margin-top: 5px;
	margin-bottom: 0px;
}
.pub-nav-play:hover{
	color: red;
}
.pub-nav-element:hover{
	background-color: red;
}
.pub-nav-element-active{
	background-color: yellow;
}

/*transition avec visibilty*/
.ts-lr{
	-webkit-transition:left 2s;
	-moz-transition:all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.ts-lr{
	top: 100px;	
	left: 101%; 
}
.pub-active .ts-lr{
		top: 100px;	
		left: 100px; 
}

@media screen and (max-width: 1200px){
	.pub-content{
			height: 350px;			
	}
}
@media screen and (max-width: 768px){
		body{
			background-color: #db2e2b;			
		}
		.pub-content{
			width: 100%;
			height: 300px;
			background-color: black;
			position: relative;
			margin:  auto;
			overflow: visible;
			box-shadow: none;
		}
		.pub-body{


		}
		.pub img{
			width: 100%;
			height: 300px;
		}

		.pub{
			visibility: hidden;
			opacity: 0.0;
			transition: visibility 2s,opacity 2s;

		}
		.pub-active{
			visibility: visible;
			opacity: 1.0;
		}

		.pub-active .pub-texte-content{
			position: static;

		}

		.pub-texte-content{
			margin: 5px auto;

			color:black;
			text-align: center;
			position: static;
			-webkit-transition:left .1s 1s;
			-moz-transition:all .1s 1s;
			-o-transition: all .1s 1s;
			transition: all .1s 1s;
		}

		.tx1-sm-black{
			color: black;
		}
	
}

@media screen and (max-width:450px){
	.pub-content{
			width: 100%;
			height: 188px;
			background-color: black;
			position: relative;
			margin:  auto;
			overflow: visible;
	}
	.pub img{
			width: 100%;
			height: 188px;
		}
}