*{margin: 0;padding: 0;box-sizing: border-box;font-family: sans-serif;}
:root{
	--azul: #2071b2;
}
.ban_ner_conten{
	position: relative;
	width: 100%;
	height: calc(100vh - 70px);
	background-color: var(--azul);
}
.ban_ner_conten::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
}
.my_slider .my_slider_inter{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 100px;
	margin: auto;
	padding: 0 100px;
	flex-wrap: wrap;
}
.parte_derecha{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 500px;
}

.img_carrus, .logo_compaly img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.my_slider{
	height:100%;
	display: none;
	overflow: hidden;
}
.anterior, .derecha{
	position: absolute;
	transform: translate(0. -50%);
	font-size: 3rem;
	font-family: monospace;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
	transition: .3s;
	user-select: none;
	left: 10px;
	padding: 15px;
	z-index: 4;
	&:hover{
		/*--- color hover de flechas derecha - izquierda */
		color:#2071b2;
	}
}

.derecha{top: 45%;}
.anterior{top: 55%}
.botsbox{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 20px;
	z-index: 2;
}
.dot{
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid#fff;
	border-radius: 50%;
	margin: 0 10px;
	cursor: pointer;
	transition: .3s;
}
.active, .dot:hover{
	border:#2071b2 ;
	background-color: #2071b2;
}
.fa_de{
	-webkit-animation-name: fa_de;
	-webkit-animation-duration:1.5s;
	animation: Fade 1.5s;
}
.content_log{
	width: 100%;
	z-index: 3;
	max-width: 500px;
}
.logo_compaly{
	width: 210px;
	height: 210px;
	z-index: 3;
	margin: auto;
}


/*---- Texto de banner ----*/
.txt-BANER{
	color: #fff;
	letter-spacing: 2px;
	line-height: 30px;
	z-index: 3;
	margin: auto;
}
.efecto_uno{
	animation: post 2s;
	-webkit-animation: post 2s;
	transition: animation 2s ease-in-out;
}
.txt-BANER h1{
	font-size: 3rem;
	font-weight: 700;
	line-height: 40px;
}
.txt-BANER p{
	font-size: 1rem;
	line-height: 20px;
	text-align: justify;
	margin: 40px 0;
	width: 100%;
}


@-webkit-keyframes fa_de{
	from{opacity: 0.5}
	to{opacity: 1}
}
@keyframes post{
	from{opacity: 0.5}
	to{opacity: 1}
}
/*---- presentacion dos ----*/
.fa_de_dos:after{
	content: "";
	position: absolute;
	height: 100%;
	width: 200%;
	top: 0;
	left: -200px;
	z-index: 2;
	background-color: var(--azul);
	border-radius: 40% 60% 100% 0% / 0% 100% 0% 100%;
	-webkit-border-radius: 40% 60% 100% 0% / 0% 100% 0% 100%;
	-moz-border-radius: 40% 60% 100% 0% / 0% 100% 0% 100%;
	animation:fade_dos 2s;
	opacity: 0;
}
@keyframes fade_dos{
	0%{opacity: 1}
	100%{transform: translateX(100%);}
}
.efecto_dos{
	animation: efecto_dos 2s;
}
@keyframes efecto_dos{
	from{transform: translateX(-100%);}
	to{transform: translateX(0);}
}
.efecto_dos_dos{
	animation: efecto_dos_dos 2.3s;
}
@keyframes efecto_dos_dos{
	from{transform: translateX(-100%);}
	to{transform: translateX(0);}
}
/*---- presentacion tres ----*/
.fa_de_tres{
	animation: fa_de_tres 1.5s;
}
@keyframes fa_de_tres{
	from{opacity: 0}
	to{opacity: 1}
}
.efecto_tres{
	animation: efecto_tres 2s;
}
@keyframes efecto_tres{
	0%{opacity: 0}
	100%{opacity: 1}
}
.my_slider .botones-carrus .btn_don{
	animation:btn_don 1.5s;
	background-color: #00ad98;
	color: #fff;
	border: 2px solid transparent;
	&:hover{
		background-color: transparent;
		color: #fff;
		border: 2px solid #fff;
	}
}

@keyframes btn_don{
	from{transform: translateX(-40%);}
	to{transform: translateX(0);}
}

/*---- presentacion cuatro ----*/
.efecto_cuatro h1{
	animation: efecto_cuatroh1 1s;
}
@keyframes efecto_cuatroh1{
	from{transform: translateY(-40%);}
	to{transform: translateY(0);}
}
.efecto_cuatro p{
	animation: efecto_cuatrop .3s;
}
@keyframes efecto_cuatrop{
	0%{transform: scale(1.1);}
	50%{transform: scale(1.3);}
	100%{transform: scale(1.0);}
}
.efecto_cuatro_cuatro{
	animation: efecto_cuatro_cuatro 1s;
}
@keyframes efecto_cuatro_cuatro{
	from{transform: translateY(60%);}
	to{transform: translateY(0);}
}
/*---- presentacion cinco ----*/
.efecto_cinco{
	animation: efecto_cinco 1s;
}
@keyframes efecto_cinco{
	from{transform: translateY(-100%);}
	to{transform: translateY(0);}
}
.efecto_cinco_cinco{
	animation: efecto_cinco_cinco 1s;
}
@keyframes efecto_cinco_cinco{
	from{transform: translateY(1000%);}
	to{transform: translateY(0);}
}
/*---- presentacion seis ----*/
.ban_ner_conten .fa_de_seis::after{
	content: "";
	position: absolute;
	height: 100%;
	width: 200%;
	top: 0;
	background-color: var(--azul);
	right: -200px;
	z-index: 2;
	border-radius: 0% 35% 35% 0% / 100% 100% 100% 100%;
	-webkit-border-radius: 0% 35% 35% 0% / 100% 100% 100% 100%;
	-moz-border-radius: 0% 35% 35% 0% / 100% 100% 100% 100%;
	animation: fa_de_seis 2s;
	opacity: 0;
}
@keyframes fa_de_seis{
	from{opacity: 1}
	to{transform: translateX(-100%);}
}
.efecto_seis{
	animation: efecto_seis 2s;
}
@keyframes efecto_seis{
	from{transform: translateX(100%);}
	to{transform: translateX(0);}
}
.efecto_seis_seis{
	animation: efecto_seis_seis 2.5s;
}
@keyframes efecto_seis_seis{
	from{transform: translateX(100%);}
	to{transform: translateX(0);}
}
/*---- presentacion siete ----*/
.my_slider .efecto_siete h1{
	animation: efecto_sieteh1 1s;
}
@keyframes efecto_sieteh1{
	0%{transform: scale(0.7);}
	50%{transform: scale(1.2);}
	100%{transform: scale(1.0);}
}
.my_slider .efecto_siete p{
	animation: efecto_sietep 2.5s;
}
@keyframes efecto_sietep{
	0%{transform: scale(0.7);}
	50%{transform: scale(1.2);}
	100%{transform: scale(1.0);}
}
.efecto_siete_siete{
	animation: efecto_siete_siete 3s;
}
@keyframes efecto_siete_siete{
	0%{transform: scale(0.7);}
	50%{transform: scale(1.2);}
	100%{transform: scale(1.0);}
}
/*----------------------------*/

@-webkit-keyframes post{
	from{top: 45%; opacity:0.6}
	to{top:40%;opacity: 1}	
}
@keyframes post{
	from{top: 45%;opacity: 0.6}
	to{top:40%;opacity: 1}
	
}
.my_slider .botones-carrus{
	z-index: 3;
}
.my_slider .botones-carrus a, .my_slider .botones-carrus button{
	font-size: 1.5rem;
	margin-right: 50px;
	text-decoration: none;
	padding: 10px 30px;
	transition: .4s ease;
	letter-spacing: 2px;
	font-weight: 700;
	cursor: pointer;
}
.my_slider .botones-carrus .contacto{
	border:2px solid transparent;
	background-color: #2071b2;
	color: #fff;
	animation: contacto 2s forwards;
	&:hover{
		color: #fff;
		background-color: transparent;
		border:2px solid #fff;
	}
}
@keyframes contacto{
	from{transform: translateX(20px);opacity: 0}
	to{transform: translateX(-20px);opacity: 1}
}
.img_carrus{
	transform: scale(1.5, 1.5);
	-webkit-animation: zoom 40s alternate infinite;
	animation: zoom 40s alternate infinite;
}
@-webkit-keyframes zoom{
	from{transform:scale(1.1);}
	to{transform: scale(1.5, 1.5);}
}
@keyframes zoom{
	from{transform:scale(1.1);}
	to{transform: scale(1.5, 1.5);}
}