/* CSS Document */

.diaporama{width: 100%; height: 100%; min-height: 550px; position: relative;}
.diaporama::after{content: ""; height: 100%; width: 100%; background: #000000; opacity: 0.4; z-index: 2; top: 0px; left: 0px; position: absolute;}
.elementor-editor-active .diaporama{ min-height: 600px;}
.diaporama .diapo{float:left; width:100%; height:100%; overflow:hidden;z-index:1; position:absolute; top:0px; left:0px; display: none;}
.diaporama div:nth-child(2){display: block !important;}

.diaporama .text_accroche{ position: absolute; top: 50%; left: 50%; z-index: 99; width: calc(100% - 160px); max-width: 900px; transform: translateX(50%) translateY(50%); -webkit-transform: translateX(-50%) translateY(-50%); text-align: center;}
.diaporama .text_accroche h1{ font: 60px/70px 'Lora', cursive; color:#FFFFFF; padding: 0px; margin: 0px;text-shadow: 2px 2px 4px #000000; }
.diaporama .text_accroche h2{ font: 16px/24px 'Mulish', sans-serif; font-weight: 300;  color:#FFFFFF;text-shadow: 2px 2px 4px #000000;  padding: 0px; margin: 20px 0px 20px 0px;}

/*
.diaporama .diapo .bloc_txt{ top: 50%; left: 150px; width: calc(50% - 150px);  transform:translateY(-50%); -webkit-transform:translateY(-50%); position: absolute; z-index: 1; color:#FFFFFF;text-shadow: 2px 2px 4px #000000;}
.diaporama .diapo .bloc_txt h2.titre{ color:#FFFFFF; text-transform: uppercase; font:40px/50px 'Roboto', sans-serif; font-weight:700; margin: 0px;}
.diaporama .diapo .bloc_txt .categorie{position: absolute; top: 0px; left: -155px; z-index: 1; width: 150px; color:#FFFFFF; text-transform: uppercase; font:14px/40px 'Roboto', sans-serif; font-weight:700; text-align: center; z-index: 10;}
.diaporama .diapo .bloc_txt .categorie::before{ width: 100%; height: 40px; background:#0b0c12;transform: skewX(-7deg); position: absolute; top: 0px; left: 0px; z-index: -1; content: "";}
.diaporama .diapo .bloc_txt .description{ color:#FFFFFF;}*/

.diaporama a.droite{ z-index: 100; opacity: 1; position: absolute; display: block; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);  right: 0px;  width: 80px; height: 80px; background-color: rgba(255,255,255,0.64); text-align: center; line-height: 80px; font-size: 20px; color:#FFFFFF;}
.diaporama a.gauche{ z-index: 100; opacity: 1; position: absolute; display: block; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);  left: 0px; width: 80px; height: 80px; background-color: rgba(255,255,255,0.64); text-align: center; line-height: 80px; font-size: 20px; color:#FFFFFF;}
.diaporama a.droite:hover, .diaporama a.gauche:hover{background-color: rgba(255,255,255,1);text-align: center; line-height: 80px; font-size: 20px; color:#53585a;}
/*
.diaporama .navigation{ position: absolute; z-index: 4; width: auto;width: auto; text-align: center;bottom: 18px; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);  }
.diaporama .navigation a{margin: 5px 5px 5px 5px; border: 2px solid #FFFFFF; position: relative; display:inline-block; width: 14px; height: 14px;font: 16px/30px 'Oswald', sans-serif;transition : all 0.2s linear; border-radius: 7px;}
.diaporama .navigation a.on{background: #3aaa35; }*/

.diaporama a.btn1{ color:#FFFFFF; text-transform: uppercase; font:16px/30px 'Mulish', sans-serif; font-weight:700; padding: 10px !important; position: relative; background: #dcc397; border: 0px; }
.diaporama a.btn1:hover{color:#cbb27c; background: #FFFFFF;}

@media screen and (max-width: 767px) 
{
	.diaporama .text_accroche h1{ font: 30px/35px 'Lora', cursive; color:#FFFFFF; padding: 0px; margin: 0px;text-shadow: 2px 2px 4px #000000; }
	.diaporama .text_accroche h2{ font: 14px/20px 'Mulish', sans-serif; font-weight: 300;  color:#FFFFFF;text-shadow: 2px 2px 4px #000000;  padding: 0px; margin: 20px 0px 20px 0px;}
	.diaporama a.droite, .diaporama a.gauche, .diaporama a.droite img, .diaporama a.gauche img{ width: 50px; height: 50px;}
	.diaporama .text_accroche{width: calc(100% - 100px);}
}