:root {
	--color-primario: #FF2D2E;
	--color-secundario: #424242;

	--color-primario-light: #FFE8E8;
	--color-secundario-light: #959595;

	--color-primario-light2: #FFC2C3;
	--color-secundario-light2: #DEDEDE;

	--color-primario-dark: #5C1212;
	--color-secundario-dark: #3C3C3C;

	--color-neutro: #333333;
	--color-neutro2: #C7C7C7;

	--color-aprobado: #40BA5B;
	--color-error: #FC0000;
	--color-aprobado-light: #E3FCE2;
	--color-error-light: #FFE0E0;

	--transition150: all 150ms;
	--transition300: all 300ms;
}


* {
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Barlow', sans-serif !important;	
	scroll-behavior: smooth;
}
img {
	width: 100%;
	display: block;
	margin: none;
	transition: var(--transition150);
}

body {
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.2;

}

body::-webkit-scrollbar {
  width: 15px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: var(--color-primario-dark); /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background: var(--color-primario); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
/*  border: 3px solid orange;  /* creates padding around scroll thumb */*/
}



h1 {
	margin: 0;
	font-size: 45px;
}
h2 {
	margin: 0;
}
h3 {
	font-size: 25px;
	color: var(--color-primario-light);
	margin: 0;
	width: 100%;
}
.color-pd {color: var(--color-neutro) !important;}
.color-p {color: white !important;}
.color-sd {color: var(--color-secundario-dark) !important;}

.ctro {text-align: center; width: 100%;}





#carrusel{
    width: 100%;
    margin: auto;
    text-align: center;
}
#carrusel .item{
    display: inline-block;
    vertical-align: middle;
}
#carrusel .item img{
    width: 200px;
    margin: auto;
    text-align: center;
} 

.owl-nav {
    display: none;
}






.cj1 {background: var(--color-neutro); width: 560px; margin: -40px auto 50px auto; padding: 25px 30px 37px 30px; border-radius: 0px 0px 20px 20px; color: white}
.subtitu1 {font-size: 20px;}
.subtitu2 {font-size: 36px; display: block; line-height: 1;}

.modalidad-subtitle {margin: 0px 0px 0px 0px; font-weight: 400; color: var(--color-primario); font-size: 20px;}
.conquista-logos {display: flex; align-items: center; flex-wrap: wrap; width: 100%; gap: 14px; justify-content: center; margin: 50px 0px 0px 0px;}
.wrap-new	{display: flex; flex-direction: column; align-items: center;}


.cl-normal {
	background-colors: #999;
	width: 1200px;
	margin: auto;
}


header {
	width: 1200px;
	margin: 30px auto 0px auto;
	background: var(--color-primario);
	border-radius: 100px;
	padding: 30px 45px;

	position: fixed;
	left: 0;
	right: 0;
	z-index: 4;

	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.fixed header {
	background: var(--color-neutro);
	position: fixed;
	margin: 15px auto 0px auto;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 0px 0px 0px 30px;
}
body.fixed .labala {
	width: 65px;
	display: block;
}
body.fixed .link-nav {
	color: white;
	font-size: 16px;
	margin: 0px 0px 0px 12px;
	padding: 0px;
	border-bottom: 1px solid var(--color-neutro);
	transition: var(--transition150);
}
body.fixed .link-nav:hover {
	border-bottom: 1px solid var(--color-primario-light);	
	color: var(--color-primario-light);
	padding: 0px;
	transform: scale(1.03);
}
body.fixed .bt-nav {
	background: white;
	color: var(--color-neutro);
	padding: 18px 20px;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 400;
	border: 1px solid var(--color-neutro);
	transition: var(--transition150);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.fixed .bt-nav:hover {
	transform: scale(1.02);
	box-shadow: 0px 12px 12px -4px rgba(0, 0, 0, .3);
	color: var(--color-secundario-dark);
	background: var(--color-secundario-light);
}



.labala {
	width: 130px;
	display: block;
}
.nav-header {
	display: flex;
	align-items: center;
}
.link-nav {
	color: white;
	font-size: 18px;
	margin: 0px 0px 0px 15px;
	padding: 4px 0px 4px 0px;
	border-bottom: 1px solid var(--color-primario);
	transition: var(--transition150);
}
.link-nav:hover {
	border-bottom: 1px solid var(--color-primario-light);	
	color: var(--color-primario-light);
	padding: 4px 0px 4px 0px;
	transform: scale(1.03);
}
.ico-nv {
	color: white;
	margin: 0px 0px 0px 15px;
}
.bt-nav {
	background: white;
	color: var(--color-primario);
	padding: 10px 20px;
	border-radius: 20px;
	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bt-nav:hover {
	transform: scale(1.04);
	box-shadow: 0px 15px 15px -4px rgba(0, 0, 0, .3);
	color: var(--color-secundario-dark);
	background: var(--color-secundario-light);
}
.ico-btnv {
	margin: 0px 0px 0px 20px;
}









.delay1 {
	animation: delay1 .5s forwards;
	animation-delay: 4s;
	opacity: 0;
}
@keyframes delay1 {
	0% {opacity: 0}
	100% {opacity: 1}
}

.intro {
	position: fixed;
	background: var(--color-primario);

	width: 100%;
	height: 100vh;
	z-index: 10;
	opacity: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	animation: intro 5s forwards;
	animation-delay: .5s;
}
@keyframes intro {
	0% { opacity:0 }
	10% { opacity:1 }
	90% { opacity:1 }
	99% { opacity: 0; z-index: 9;}
	100% { opacity: 0; z-index: -10000; }
}
.wrap-intro {
	width: 320px;
	color: white;
}
.txt-intro {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}
.posible{
	width: 100%;
	height: 140px;
	background: var(--color-primario);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	opacity: 0;
	transform: scale(1.0);
	padding-top: 70px;

	animation: posible 1s forwards;
	animation-delay: 2.3s;
}
@keyframes posible {
	0% {opacity: 0; padding-top: 70px; font-size: 12px}

	100% {opacity: 1; padding-top: 15px; font-size: 55px}
}

.logo-before {
	width: 100%;
	margin: 0px 0px 30px 0px;
	animation: logobef .5s forwards;
	opacity: 0;
	animation-delay: 1s;
}
.logo-before1 {
	width: 100%;
	margin: 0px 0px -100px 0px;
	animation: logobef .5s forwards;
	opacity: 0;
	animation-delay: 1s;
}
@keyframes logobef{
	0% {opacity: 0}
	100% {opacity: 1}
}
.cuadro1 {
	width: 320px;
	height: 25px;
	background: var(--color-primario);
	border-left: 0px solid white;

	position: absolute;
	transition: var(--transition150);

	animation: cuadro1 1.3s forwards;
	animation-delay: 1.5s;
}
@keyframes cuadro1{
	0% {margin: 0px 0px 0px 0px; border-left: 2px solid white;}

	85% {margin: 0px 0px 0px 320px; border-left: 2px solid white;}
	100% {margin: 0px 0px 0px 320px; border-left: 2px solid var(--color-primario);}
}








.wrap-bn {
	width: 100%;
	height: 90vh;
	min-height: 700px;
	background: rgba(255, 255, 255, .5);
	border-radius: 0px 0px 45px 45px;

	display: flex;
	align-items: center;
	justify-content: center;

	/*-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);*/
}


.wrap-home {
	width: 530px;
	text-align: center;
}
.programa {
	width: 100%;
	background: rgba(0, 0, 0, .4);
	padding: 20px;
	border-radius: 20px;
	margin: 30px 0px 0px 0px;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.ico-btpr {
	font-size: 32px;
}
.bt-programa {
	width: 48%;
	border-radius: 10px;
	border: 1px solid var(--color-secundario);
	text-align: left;
	color: var(--color-secundario);
	padding: 15px;
	font-size: 22px;
	background: var(--color-secundario-light2);
	margin: 20px 0px 0px 0px;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition150);
}
.bt-programa:hover {
	background: var(--color-secundario);
	color: var(--color-secundario-light2);
	transform: scale(1.03);
	box-shadow: 0px 15px 26px -10px rgba(0, 0, 0, .4);
}



.nosotros {
	width: 100%;
	background: var(--color-primario);
	text-align: center;
	padding: 40px 45px 160px 45px;
	border-radius: 45px;
	position: relative;
}
#nosotros {
	margin: -200px 0px 70px 0px;
	padding: 50px 0px 0px 0px;
	width: 100%;
	height: 0;
	
}
.txt-nosotros {
	font-size: 30px;
	color: white;
	margin: 20px 0px 50px 0px;
}
.steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: -130px 0px 0px 0px;
	height: 300px;
	position: relative;
}
.wrap-steps {
	width: 200px;
	text-align: center;
	border-radius: 30px;
	padding: 20px 20px;

	background: white;
	color: var(--color-neutro);
	border: 1px solid var(--color-neutro2);
}
.ico-stp {
	display: block;
	font-size: 70px;
	margin: 15px 0px;
}
.txt-steps {
	font-weight: 700;
	font-size: 28px;
}

.step1 {
	animation: step1 3s infinite;
	margin: -40px 20px 0px 20px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}
@keyframes step1{
	0% { margin: -40px 20px 0px 20px; box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);}
	50% { margin: 40px 20px 0px 20px; box-shadow: 0px 9px 30px -2px rgba(0, 0, 0, .3);}
	100% { margin: -40px 20px 0px 20px; box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);}
}

.step2 {
	animation: step2 3s infinite;
	margin: 40px 20px 0px 20px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}
@keyframes step2{
	0% { margin: 40px 20px 0px 20px; box-shadow: 0px 9px 30px -2px rgba(0, 0, 0, .3);}
	50% { margin: -40px 20px 0px 20px; box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);}
	100% { margin: 40px 20px 0px 20px; box-shadow: 0px 9px 30px -2px rgba(0, 0, 0, .3);}
}

.flecha {
	width: 30px;
	margin: -40px auto 0px auto;
	position: relative;
	z-index: -1;
}
.conquista {
	width: 620px;
	text-align: center;
	margin: 10px auto 40px auto;	
}

.modalidades {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.item-mod {
	width: 31%;
	padding: 25px;
	border-radius: 25px;
	border: 1px solid var(--color-secundario);
	box-shadow: 0px 20px 30px -9px rgba(0, 0, 0, .3);
	background: white;
	text-align: center;
}
.title-mod {
	font-weight: 500;
	font-size: 35px;
	color: var(--color-secundario);
}

.txt-mod {
	font-size: 22px;
	color: var(--color-primario-dark);
}
.comprometidos {
	background: var(--color-primario);
	text-align: center;
	color: white;
	font-size: 35px;
	padding: 220px 100px 60px 100px;
	border-radius: 40px;
	margin: -180px 0px 0px 0px;
}

.bt-home {
	position: sticky;
	top: 85%;

	width: 280px;
	background: var(--color-primario);
	color: white;
	border-radius: 40px;
	padding: 10px 20px 10px 23px;
	margin: -25px auto 0px auto;
	font-size: 20px;
	cursor: pointer;
	z-index: 1;

	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition150);
}
.bt-home:hover {
	background: black;
	color: var(--color-secundario-light);
	transform: scale(1.02);
}
.ico-bthm {
	font-size: 25px;
}
.wrap-envia {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px 0px 140px 0px;
}
.envia-left {
	width: 490px;
	color: var(--color-secundario-dark);
	font-weight: 700;
	overflow: hidden;
	position: sticky;
	top: 90px;
}
.envia-right {
	width: 660px;
}
.title-envia {
	color: var(--color-secundario-dark);
	font-size: 45px;
	font-weight: 700;
}
.item-envia {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 20px 0px 0px 0px;
}
.ico-nva {
	width: 115px;
	height: 115px;
	background: var(--color-secundario);
	color: var(--color-secundario-light2);

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 50px;
	border-radius: 22px;
}
.info-envia {
	width: 80%;
}
.title-info {
	font-size: 30px;
	margin: 30px 0px 10px 0px;
	display: block;
	color: var(--color-secundario);
}
.txt-info {
	color: var(--color-secundario-dark);
}
.txt-slider {
	font-size: 40px;
	display: block;
	margin: 9px 0px -16px 0px;
}



footer {
	background: var(--color-primario);
	padding: 80px 0px 40px 0px;
	border-radius: 40px 40px 0px 0px;
	text-align: center;
	margin: 150px 0px 0px 0px;
}
.wrap-footer {
	width: 500px;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.txt-footer {
	font-size: 25px;
	color: white;
	display: block;
	margin: 20px 0px;
}
.bt-footer {
	width: 48%;
	background: var(--color-secundario);
	border: 1px solid var(--color-secundario);
	color: white;
	border-radius: 40px;
	padding: 9px 20px 9px 23px;
	font-size: 20px;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition150);
}
.bt-footer:hover {
	background: var(--color-primario-light);
	border: 1px solid var(--color-secundario-dark);
	color: var(--color-secundario-dark);
}
.ico-ftt {
	margin: 0px 6px 0px 0px;
	font-size: 22px;
}

.form {
	width: 100%;
	margin: 30px 0px 0px 0px;
}
.campo1 {
	width: 100%;
	margin: 20px 0px 0px 0px;


	display: flex;
	align-items: flex-start;
}
.ico-fm {
	font-size: 20px;
	margin: 12px -40px 0px 20px;
	position: relative;
	color: var(--color-primario-dark);
}
.campo::placeholder {
	color: var(--color-primario-dark);
}
.campo {
	width: 100%;
	font-size: 18px;
	padding: 10px 10px 10px 42px;
	border-radius: 40px;
	border:  1px solid var(--color-primario);
	background: var(--color-primario-light);
	transition: var(--transition150);
}
.campo:focus {
	outline: 0;
	border:  1px solid var(--color-primario-light);
	box-shadow: 0px 10px 20px -8px rgba(0, 0, 0, .3);
	transform: scale(1.03);
	background: white;
	padding: 10px 10px 10px 20px;
}
.brdr {
	border-radius: 20px !important;
}
.bt-send {
	width: 100%;
	background: var(--color-neutro);
	color: white;
	border-radius: 40px;
	padding: 10px 20px 10px 23px;
	margin: 18px 0px 0px 0px;
	font-size: 18px;
	border: 1px solid white;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition150);
}
.bt-send:hover {
	background: var(--color-secundario-dark);
	transform: scale(1.03);
}
.ico-fgth {
	font-size: 22px;
}

.txt-end {
	display: block;
	color: white;
	font-weight: 500;
	margin: 50px 0px 0px 0px;
}
.politica {
	font-size: 12px;
	display: inline-block;
	color: white;
	font-weight: 500;
}
.politica:hover {
	color: black;
	text-decoration: underline;
}
.imgmod {
	width: 60%;
	margin: 20px auto;
}
.img-int {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: top;
}
.dash {
	width: 100%;
	height: 280px;
	overflow: hidden;
	border-radius: 20px;
}
.ico-tr {
	font-size: 40px;
	margin: 5px 10px 0px 0px;
	display: flex;
}
.wrap-envio {
	width: 210px;
	margin: 0px 0px 0px -240px;
	height: auto;

	overflow: hidden;
	display: flex;

	padding: 0px 0px 0px 0px;
	color: var(--color-primario);

	animation: wrenv 9s linear infinite;
}
@keyframes wrenv{
	0% { margin: 20px 0px 0px -220px; }
	100% { margin: 20px 0px 0px 500px; }
}

.txt-envios {
	font-size: 35px;
	width: 160px;
	overflow: hidden;
	display: flex;
}













/*SLIDER*/

.slider, 
.slider > div {
    /* Images default to Center Center. Maybe try 'center top'? */
    background-position: center center;
    display: block;
    width: 100%;
    height: 90vh;
    min-height: 700px;
    z-index: -1;
    /* height: 100vh; *//* If you want fullscreen */
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: ;
    overflow: hidden;
    -moz-transition: transform .4s;
    -o-transition: transform .4s;
    -webkit-transition: transform .4s;
    transition: transform .4s;

    border-radius: 0px 0px 45px 45px;
}

.slider > div {
    position: absolute;
}

.slider > i {
    color: #5bbd72;
    position: absolute;
    font-size: 60px;
    margin: 20px;
    top: 40%;
    text-shadow: 0 10px 2px #223422;
    transition: .3s;
    width: 30px;
    padding: 10px 13px;
    background: #fff;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    line-height: 0;
    box-sizing: content-box;
    border-radius: 3px;
    z-index: 4;
}

.slider > i svg {
    margin-top: 3px;
}

.slider > .left {
    left: -100px;
}
.slider > .right {
    right: -100px;
}
.slider:hover > .left {
    left: 0;
}
.slider:hover > .right {
    right: 0;
}

.slider > i:hover {
    background:#fff;
    background: rgba(255, 255, 255, .8);
    transform: translateX(-2px);
}

.slider > i.right:hover {
    transform: translateX(2px);
}

.slider > i.right:active,
.slider > i.left:active {
    transform: translateY(1px);
}

.slider:hover > div {
    transform: scale(1.01);
}

.hoverZoomOff:hover > div {
    transform: scale(1);
}

.slider > ul {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 4;
    padding: 0;
    margin: 0;
    transform: translateX(-50%);
}

.slider > ul > li {
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    list-style: none;
    float: left;
    margin: 10px 10px 0;
    cursor: pointer;
    border: 1px solid #fff;
    -moz-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}

.slider > ul > .showli {
    background-color: #7EC03D;
    -moz-animation: boing .5s forwards;
    -o-animation: boing .5s forwards;
    -webkit-animation: boing .5s forwards;
    animation: boing .5s forwards;
}

.slider > ul > li:hover {
    background-color: #7EC03D;
}

.slider > .show {
    z-index: 1;
}

.hideDots > ul {
    display: none;
}

.showArrows > .left {
    left: 0;
}

.showArrows > .right {
    right: 0;
}

.titleBar {
    z-index: 2;
    display: inline-block;
    background: rgba(0,0,0,.5);
    position: absolute;
    width: 100%;
    bottom: 0;
    transform: translateY(100%);
    padding: 20px 30px;
    transition: .3s;
    color: #fff;
}

.titleBar * {
    transform: translate(-20px, 30px);
    transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms;
    opacity: 0;
}

.titleBarTop .titleBar * {
    transform: translate(-20px, -30px);
}

.slider:hover .titleBar,
.slider:hover .titleBar * {
    transform: translate(0);
    opacity: 1;
}

.titleBarTop .titleBar {
    top: 0;
    bottom: initial;
    transform: translateY(-100%);
}

.slider > div span {
    display: block;
    background: rgba(0,0,0,.5);
    position: absolute;
    bottom: 0;
    color: #fff;
    text-align: center;
    padding: 0;
    width: 100%;
}


@keyframes boing {
    0% {
        transform: scale(1.2);
    }
    40% {
        transform: scale(.6);
    }
    60% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}

/*SLIDER*/



.btmenu {display: none !important;}







/* Awesome Modal CSS */
.awesome-modal {
  display: none;
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 999;

  justify-content: center;
  align-items: center;

  -webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);

	animation: bgpop .3s forwards;
}
.awesome-modal * {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@keyframes bgpop{
	0% {opacity: 0}
	100% {opacity: 1}
}

:target {
  display: flex;
}
:target ~ .awesome-overlay {
  display: flex;
}

.ico-crs {
	font-size: 30px;
	color: white;
	position: absolute;
	top: 30px;
	opacity: 0;

	animation: xpop .3s forwards;
	animation-delay: .6s;
}
.ico-crs2 {
	font-size: 30px;
	color: white;
	position: absolute;
	top: 30px;
	right: 30px;
	opacity: 0;

	animation: xpop .3s forwards;
	animation-delay: .6s;
}
@keyframes xpop {
	0% {opacity: 0}
	100% {opacity: 1}
}
.wrap-pop-int {
	background: white;
	width: 400px;
	height: auto;
	max-height: 500px;
	padding: 25px;
	border-radius: 30px;
	opacity: 0;
	
	overflow: auto;
	text-align: center;
	margin: 300px 0px 0px 0px;

	animation: wrpop .3s forwards;
	animation-delay: .3s;
}
@keyframes wrpop {
	0% { opacity:0; margin: 300px 0px 0px 0px;}
	100% { opacity:1; margin: 0px 0px 0px 0px;}
}
.modal-title {
	font-weight: 600;
	font-size: 20px;
	margin: 0px 0px 20px 0px;
	color: var(--color-primario);
}
.txt-pop {
	font-size: 15px;
	color: var(--color-primario-dark);
	text-align: justify;
	font-weight: 400;
}

.wrap-pop-int::-webkit-scrollbar {
  width: 15px; /* width of the entire scrollbar */
}

.wrap-pop-int::-webkit-scrollbar-track {
  background: var(--color-primario-dark); /* color of the tracking area */
  border-radius: 20px; /* roundness of the scroll thumb */
}

.wrap-pop-int::-webkit-scrollbar-thumb {
  background: var(--color-primario); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
/*  border: 3px solid orange;  /* creates padding around scroll thumb */*/
}


.wrap-nav-int {
	width: 300px;
	height: 100%;

	background: var(--color-primario);
	position: absolute;
	left: 0;
	border-radius: 0px 49px 49px 0px;
	padding: 40px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0px 0px 0px -50%;

	animation: nav2 .3s forwards;
	animation-delay: .2s;
}
@keyframes nav2{
	0% { margin: 0px 0px 0px -50%; }
	100% { margin: 0px 0px 0px 0px; }
}
.la-bala-logo-int {
	width: 70%;
	margin: 0px auto 70px auto;
}
.bt-link {
	color: white;
	display: flex;
	align-items: center;
	font-size: 20px;
	margin: 0px 0px 14px 0px;
}
.ico-ncvt {
	font-size: 15px;
}

.bt-comercio {
	background: var(--color-secundario);
	color: white;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	border-radius: 12px;

	margin: 15px 0px 0px 0px;
	transition: var(--transition150);
}
.bt-comercio:hover {
	background: var(--color-secundario-dark);
	transform: scale(1.03);
}
.ico-lvo {
	font-size: 25px;
}

.bt-driver {
	background: var(--color-primario-light);
	color: var(--color-primario-dark);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	border-radius: 9px;

	margin: 40px 0px 0px 0px;
	transition: var(--transition150);
}
/* Awesome Modal CSS */























@media screen and (max-width: 1400px) {
.cl-normal {
	background-colors: #999;
	width: 900px;
	margin: auto;
}

header {
	width: 900px;
	margin: 30px auto 0px auto;
	background: var(--color-primario);
	border-radius: 50px;
	padding: 25px 30px;

	position: fixed;
	left: 0;
	right: 0;
	z-index: 4;

	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}


.link-nav {display: none;}
.ico-nv {display: none;}

.btmenu {display: flex !important;}
.btcomercios {display: none !important;}



#carrusel .item img{
    width: 130px;
    margin: auto;
    text-align: center;
} 


.wrap-steps {
	width: 180px;
	text-align: center;
	border-radius: 30px;
	padding: 20px 20px;

	background: white;
	color: var(--color-neutro);
	border: 1px solid var(--color-neutro2);
}
.title-mod {
	font-weight: 500;
	font-size: 32px;
	color: var(--color-secundario);
}

.txt-mod {
	font-size: 20px;
	color: var(--color-primario-dark);
}

.txt-steps {
	font-weight: 700;
	font-size: 27px;
}
.envia-left {
	width: 420px;
	color: var(--color-secundario-dark);
	font-weight: 700;
	overflow: hidden;
	position: sticky;
	top: 90px;
}
.envia-right {
	width: 440px;
}
.info-envia {
	width: 100%;
}
.title-info {
	font-size: 30px;
	margin: 5px 0px 10px 0px;
	display: block;
	color: var(--color-secundario);
}

.item-envia {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 30px 0px 0px 0px;
}



}










































@media screen and (max-width: 960px) {
.cl-normal {
	background-colors: #999;
	width: 600px;
	margin: auto;
}



.cj1 {background: var(--color-neutro); width: 100%; margin: -40px auto 50px auto; padding: 25px 30px 37px 30px; border-radius: 0px 0px 20px 20px;}



header {
	width: 600px;
	margin: 30px auto 0px auto;
	background: var(--color-primario);
	border-radius: 50px;
	padding: 25px 30px;

	position: fixed;
	left: 0;
	right: 0;
	z-index: 4;

	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wrap-home {
	width: 600px;
	text-align: center;
}
.step1 {
	animation: inherit;
	margin: 40px 20px 0px 20px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}

.step2 {
	animation: inherit;
	margin: 40px 20px 0px 20px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}
.txt-nosotros {
	font-size: 22px;
	color: white;
	margin: 20px 0px 50px 0px;
}

.conquista {
	width: 100%;
	text-align: center;
	margin: 10px auto 0px auto;	
}


h1 {
	margin: 0;
	font-size: 37px;
}

.steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: -130px 0px 0px 0px;
	height: auto;
	position: relative;
}


.item-mod {
	width: 100%;
	padding: 25px;
	border-radius: 25px;
	border: 1px solid var(--color-secundario);
	box-shadow: 0px 20px 30px -9px rgba(0, 0, 0, .3);
	background: white;
	text-align: center;
	margin: 30px 0px;
}
.comprometidos {
	background: var(--color-primario);
	text-align: center;
	color: white;
	font-size: 27px;
	padding: 220px 90px 60px 90px;
	border-radius: 40px;
	margin: -200px 0px 0px 0px;
}


.envia-left {
	width: 100%;
	color: var(--color-secundario-dark);
	font-weight: 700;
	overflow: hidden;
	position: relative;
	top: inherit;
}
.envia-right {
	width: 100%;
	margin: 40px 0px 0px 0px;
}

.ico-nva {
	width: 95px;
	height: 95px;
	background: var(--color-secundario);
	color: var(--color-secundario-light2);

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 50px;
	border-radius: 22px;
}

.wrap-footer {
	width: 100%;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}



}








































@media screen and (max-width: 650px) {
.cl-normal {
	background-colors: #999;
	width: 90%;
	margin: auto;
}
.wrap-home {
	width: 90%;
	text-align: center;
}




.subtitu1 {font-size: 16px;}
.subtitu2 {font-size: 25px; display: block; line-height: 1;}
.cj1 {background: var(--color-neutro); width: 100%; margin: -30px auto 50px auto; padding: 25px 30px 37px 30px; border-radius: 0px 0px 20px 20px;}


header {
	width: 90%;
	margin: 30px auto 0px auto;
	background: var(--color-primario);
	border-radius: 50px;
	padding: 11px 12px 11px 24px;

	position: fixed;
	left: 0;
	right: 0;
	z-index: 4;

	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bt-nav {
	background: var(--color-secundario);
	color: white;
	padding: 7px 13px;
	border-radius: 20px;
	transition: var(--transition150);
	font-size: 16px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bt-nav:hover {
	transform: scale(1.04);
	box-shadow: 0px 15px 15px -4px rgba(0, 0, 0, .3);
	color: var(--color-secundario-dark);
	background: var(--color-secundario-light);
}
.ico-btnv {
	margin: 0px 0px 0px 8px;
}
.labala {
	width: 80px;
	display: block;
}

body.fixed .bt-nav {
	background: white;
	color: var(--color-neutro);
	padding: 11px 13px;
	border-radius: 30px;
	font-size: 15px;
	transition: var(--transition150);

	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.fixed .bt-nav:hover {
	transform: scale(1.02);
	box-shadow: 0px 12px 12px -4px rgba(0, 0, 0, .3);
	color: var(--color-secundario-dark);
	background: var(--color-secundario-light);
}
body.fixed header {
	background: var(--color-neutro);
	position: fixed;
	margin: 15px auto 0px auto;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 0px 0px 0px 18px;
}

.bt-programa {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--color-secundario);
	text-align: left;
	color: var(--color-secundario);
	padding: 12px;
	font-size: 17px;
	background: var(--color-secundario-light2);
	margin: 20px 0px 0px 0px;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition150);
}
.bt-programa:hover {
	background: var(--color-secundario);
	color: var(--color-secundario-light2);
	transform: scale(1.03);
	box-shadow: 0px 15px 26px -10px rgba(0, 0, 0, .4);
}

h3 {
	font-size: 20px;
	color: var(--color-primario-light);
	margin: 0;
	width: 100%;
}


.wrap-bn {
	width: 100%;
	height: 90vh;
	min-height: 640px;
	background: rgba(255, 232, 232, .6);
	border-radius: 0px 0px 45px 45px;

	display: flex;
	align-items: center;
	justify-content: center;

	/*-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);*/
}
.slider, 
.slider > div {
    /* Images default to Center Center. Maybe try 'center top'? */
    background-position: center center;
    display: block;
    width: 100%;
    height: 90vh;
    min-height: 640px;
    z-index: -1;
    /* height: 100vh; *//* If you want fullscreen */
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: ;
    overflow: hidden;
    -moz-transition: transform .4s;
    -o-transition: transform .4s;
    -webkit-transition: transform .4s;
    transition: transform .4s;

    border-radius: 0px 0px 45px 45px;
}


h1 {
	margin: 0;
	font-size: 29px;
}

.nosotros {
	width: 100%;
    background: var(--color-primario);
    text-align: center;
    padding: 30px 30px 120px 30px;
    border-radius: 30px;
    position: relative;
}


.txt-nosotros {
	font-size: 20px;
	color: white;
	margin: 20px 0px 50px 0px;
}
.step1 {
	animation: inherit;
	margin: 40px 0px 0px 0px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}

.step2 {
	animation: inherit;
	margin: 40px 0px 0px 0px;
	box-shadow: 0px -9px 30px -2px rgba(0, 0, 0, .3);
}
.wrap-steps {
	width: 100%;
	text-align: center;
	border-radius: 30px;
	padding: 20px 20px;

	background: white;
	color: var(--color-neutro);
	border: 1px solid var(--color-neutro2);
}
.txt-footer {
	font-size: 17px;
	color: white;
	display: block;
	margin: 20px 0px;
}

.bt-footer {
	width: 100%;
	margin: 20px 0px 0px 0px;
	background: var(--color-secundario);
	border: 1px solid var(--color-secundario);
	color: white;
	border-radius: 40px;
	padding: 9px 20px 9px 23px;
	font-size: 20px;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition150);
}
.bt-footer:hover {
	background: var(--color-primario-light);
	border: 1px solid var(--color-secundario-dark);
	color: var(--color-secundario-dark);
}



}










 






























@media screen and (max-width: 460px) {




}



















@media screen and (max-width: 340px) {


}