*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, html{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* --- generales --- */
.contergeneral{
  width: 90%;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.contergeneral100{
  width: 100%;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.conter90{
  width: 90%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.conter90left{
  width: 90%;
  display: block;
  float: left;
}
.conter90right{
  width: 90%;
  display: block;
  float: right;
}
.conter95{
  width: 95%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.conter95left{
  width: 95%;
  display: block;
  float: left;
}
.conter99left{
  width: 99%;
  display: block;
  float: left;
}
.conter95right{
  width: 95%;
  display: block;
  float: right;
}
.conter95righta{
  width: 95%;
  display: block;
  float: right;
}
.conter{
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.opacity0{
  opacity: 0;
}
.textcenter{
  text-align: center !important;
}
.textright{
  text-align: right !important;
}
.textleft{
  text-align: left !important;
}
.imgfull{
  width: 100%;
}
.img90{
  width: 90%;
  margin: 0 auto;
  display: block;
}
.img80{
  width: 80%;
  margin: 0 auto;
  display: block;
}
.img60{
  width: 60%;
  margin: 0 auto;
  display: block;
}
.img50{
  width: 50%;
  margin: 0 auto;
  display: block;
}
.img80left{
  width: 80%;
  display: block;
}
.imglogros{
  width: 85%;
  float: right;
  padding-left: 10px;
}

.conter30{
  display: block;
  width: 30%;
  float: left;
  position: relative;
}
.conter35{
  display: block;
  width: 35%;
  float: left;
  position: relative;
}
.conter33{
  display: block;
  width: 33.33%;
  float: left;
  position: relative;
}
.conter22{
  display: block;
  width: 22.3%;
  float: left;
  position: relative;
}
.conter50{
  display: block;
  width: 50%;
  float: left;
  position: relative;
}
.conter55{
  display: block;
  width: 55%;
  float: left;
  position: relative;
}
.conter50center{
  display: block;
  width: 50%;
  margin: 0 auto;
  position: relative;
}
.conter60center{
  display: block;
  width: 60%;
  margin: 0 auto;
  position: relative;
}
.conter65center{
  display: block;
  width: 65%;
  margin: 0 auto;
  position: relative;
}
.conter65{
  display: block;
  width: 65%;
  float: left;
  position: relative;
}
.conter60{
  display: block;
  width: 60%;
  float: left;
  position: relative;
}

.conter40{
  display: block;
  width: 40%;
  float: left;
  position: relative;
}
.conter45{
  display: block;
  width: 45%;
  float: left;
}
.conter70{
  display: block;
  width: 70%;
  float: left;
}
.conter75{
  display: block;
  width: 75%;
  float: left;
}
.conter70center{
  display: block;
  width: 70%;
  margin: 0 auto;
}
.conter80{
  display: block;
  width: 80%;
  float: left;
}
.conter80center{
  display: block;
  width: 80%;
  margin: 0 auto;
}

.conter20{
  display: block;
  width: 20%;
  float: left;
}
.conter21{
  display: block;
  width: 21%;
  float: left;
}
.conter10{
  display: block;
  width: 10%;
  float: left;
}
.conter10a{
  display: block;
  width: 10%;
  float: left;
}
.conter12{
  display: block;
  width: 12.5%;
  float: left;
}
.conter5{
  display: block;
  width: 5%;
  float: left;
}
.conter5a{
  display: block;
  width: 5%;
  float: left;
}
.conter14{
  display: block;
  width: 14.2%;
  float: left;
}
.conter15{
  display: block;
  width: 15%;
  float: left;
}
.conter85{
  display: block;
  width: 85%;
  float: left;
}
.conter25{
  display: block;
  width: 25%;
  float: left;
}
.conter24{
  display: block;
  width: 24%;
  float: left;
}

.conterflex{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: center;
  align-items: center;
}
.conterflex2{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: center;
  align-items: center;
}
.conterflex3{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: end;
  align-items: end;
}
.padtop50px{
  padding-top: 50px;
}
.padtop100px{
  padding-top: 100px;
}
.padbop50px{
  padding-bottom: 50px;
}
.pad50px{
  padding: 50px 0px;
}
.padtop30px{
  padding-top: 30px;
}
.padtop20px{
  padding-top: 20px;
}
.padtop25px{
  padding-top: 25px;
}
.padtop15px{
  padding-top: 15px;
}
.padleft20px{
	padding-left: 20px;
}
.padtop10px{
  padding-top: 10px;
}
.padbot20px{
  padding-bottom: 20px;
}
.mar50px{
  margin: 50px 0px;
}
.martop50px{
  margin-top: 50px;
}
.pad20px{
  padding: 20px 0px;
}
.pad20pxa{
  padding: 20px;
}
.pad5px{
  padding: 5px 0px;
}
.pad5pix{
  padding: 5px;
}
.pad10px{
  padding: 10px 0px;
}
.pad30px{
  padding: 30px 0px;
}
.martop20px{
  margin-top: 20px;
}
.multy{
  mix-blend-mode: multiply !important;
}
p{
	margin: 0;
	padding: 0;
}
.textupper{
  text-transform: uppercase;
}

/* generales vesta */
.titulo1{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	font-size: 45px;
	line-height: 58px;
	text-transform: uppercase;
}
.titulo1bold{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 700;
	font-size: 53px;
	line-height: 55px;
	text-transform: uppercase;
}
.titulo3bold{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 30px;
}
.titulo4bold{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}
.titulo5bold{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
}
.titulotabla{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
}
.contador{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 28px;
}
.contador2{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
}
.logopag{
	width: 90%;
	max-width: 100px;
	display: block;
	float: right;
}
.texto{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	font-size: 13px;
	line-height: 15px;
	color: #4d4d4d;
}
sup, sub{
  font-size: 9px !important;
}
.nota{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 15px;
  color: #4d4d4d;
}
.nombre{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 18px;
	color: #4d4d4d;
}
.bold{
	font-weight: 700 !important;
}

.azul{
	color: #000078 !important;
}
.azul2{
	color: #3442f7 !important;
}
.blanco{
  color: #ffffff !important;
}
.gris{
	color: #4d4d4d !important;
}
.backazul2{
  background-color: #3442f7;
}
.conterbord{
	border-top: 1px solid #3442f7;
	border-left: 1px solid #3442f7;
	border-right: 1px solid #3442f7;
}
.conterbordgen{
  border: 1px solid #3442f7;
}
.borderrightazul{
  border-right: 1px solid #3442f7;
}
.padlineaazul{
  padding: 20px;
}
.padlineaazu{
	padding: 0px 20px;
}
img{
	display: block !important;
}
.margin{
  margin: 0 auto;
}















/* -- menu -- */
.myButton {
  background-color: #3441f7;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 17px;
  padding: 8px 19px;
  text-decoration: none;
}
.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.menu-btn{
	-webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input {
  display: none;
}
label {
  display: block;
  cursor: pointer;
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 70px;
  max-height: 70px;
  background-color: #000078;
  z-index: 10;
}
label {
  left: 0;
}
path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

circle {
  fill: #fff3;
  opacity: 0;
}

label:hover circle {
  opacity: 1;
}

.cross input:checked+svg .line--1,
  .cross input:checked+svg .line--3 {
    --length: 22.627416998;
  }

.cross input:checked+svg .line--2 {
    --length: 0;
  }

.back input:checked+svg .line--1,
  .back input:checked+svg .line--3 {
    --length: 8.602325267;
  }
.line--1,
  .line--3 {
    --total-length: 111.22813415527344;
    --offset: -50.22813415527344;
  }

.line--2 {
    --total-length: 99;
  }

input:checked+svg path {
      transform: translateX(30px);
    }

input:checked+svg .line--1,
    input:checked+svg .line--3 {
      --offset: -16.9705627485;
    }

input:checked+svg .line--2 {
      --offset: -80;
    }
.contermenu{
	width: 50%;
	display: flex;
	float: left;
	height: auto;
	min-height: 100vh;
	position: fixed;
	background-color: rgba(255, 255, 255, 1);
	padding: 50px;
	align-items: center;
	align-content: center;
	left: -100%;
	transition: left .5s ease;
	
}
.logomenu{
	width: 90%;
	max-width: 250px;
	float: left;
	display: block;
}

.menuactive {
  left: 0; /* Cuando la casilla está marcada, cambia left a 0% */
  box-shadow: 9px 0px 13px -11px rgba(0,0,0,0.75);
-webkit-box-shadow: 9px 0px 13px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 0px 13px -11px rgba(0,0,0,0.75);
}

.idioma{
  width: 40px;
  height: 40px;
  display: grid;
  position: fixed;
  left: 0px;
  top: 80px;
  background-color: #000078;
  align-content: center;
  align-items: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  z-index: 10;
}
a{
  text-decoration: none;
}






ul.menu{
	padding-left: 0px;
}
ul.menu > li {
  list-style: none;
  color: #000078;
  padding: 5px;
  transition: all .5s;
}
ul.menu > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
  font-family: 'IBM Plex Sans', sans-serif;	
  font-weight: 300;
  font-size: 20px;
  line-height:20px;
  text-transform: uppercase;
  transition: all .5s;
  text-decoration: none;
}
ul.menu > li > a:hover {
	color: #3442f7;
	text-decoration: underline;
	text-underline-offset: 4px;
  	text-decoration-thickness: 2px !important;
}
.activea{
  color: #3442f7 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
    text-decoration-thickness: 2px !important;
}
.vertical {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  float: right;
}















body{
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- carta del directo --- */

.carta1{
	width: 100%;
	display: block;
	overflow: hidden;
	padding-top: 100px;
  
}

/* --- somos vesta --- */

.somos1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.somos2{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
  position: relative;
}
.conterintersomos11{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
}
.conterintersomos{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
}
.contertitumeis{
  width: 80px;
  display: grid;
  padding: 10px;
  background-color: #3442f7;
  height: auto;
  min-height:200px;
}
.contertitumeistext{
  width: calc(100% - 80px);
  display: flex;
  padding: 20px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  height: auto;
  min-height: 140px;
  align-content: center;
  align-items: center;
}
.iconviss{
  width:20px;
  display: block;
  float: left;
}
.conterflexmiss {
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: end;
  align-items: end;
}

.textomiss{
  font-family: 'IBM Plex Sans', sans-serif; 
  font-weight: 500;
  font-size: 18px;
  color: #ffffff;
}
.textoresul{
  font-family: 'IBM Plex Sans', sans-serif; 
  font-weight: 700;
  font-size: 19px;
  color: #ffffff;
}
.somos3{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
  position: relative;
}
.borderright{
  border-right: 1px solid #ffffff;
}
.contersepara{
  width: 90%;
  display: block;
  margin: 0px auto 20px auto;
  border-top: 1px solid #fff;
}
.contersepara2{
  width: 90%;
  display: block;
  margin: 0px auto 20px auto;
  border-top: 1px solid #fff;
}


/* --- estrategia --- */

.estra1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.conterniv3{
  width: 155px;
  display: grid;
  padding: 15px 10px;
  background-color: #3442f7;
  height: auto;
  float: left;
}
.conterniv3text{
  width: calc(100% - 155px);
  height: auto;
  float: left;
  overflow: hidden;
}
.conterniv3estartegia{
  display: block;
  padding: 10px;
  border: 1px solid #3442f7;
  overflow: hidden;
}
.textdesde{
  width: 100px;
  display: block;
  float: left;
  overflow: hidden;
  padding-right: 15px;
}
.textdesdeinfo{
  width: calc(100% - 100px);
  display: block;
  float: left;
  overflow: hidden;
}
hr.hrazul{
  width: 100%;
  display: block;
  border-top: 1px solid #3442f7;
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 0px;
  margin: 15px 0px;
}
hr.hrazul2{
  width: 95%;
  display: block;
  border-top: 1px solid #3442f7;
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 0px;
  margin: 15px auto;
}
hr.hrazul3{
  width: 65%;
  display: block;
  border-top: 1px solid #3442f7;
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 0px;
  float: left;
}
.imgestrategia{
  width: 470px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
hr.hrblanco{
  width: 100%;
  display: block;
  border-top: 2px solid #ffffff;
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 0px;
  margin: 15px 0px;
}
/* --- potencial --- */

.potencial1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.imgpotencial{
  width: 100%;
  display: block;
  position: absolute;
  z-index: a;
  bottom: 0;
  left: 0;
}
.minheight600{
  height: auto;
  min-height: 600px;
}

.conterfit{
  width: fit-content;
  display: block;
  overflow: hidden;
  margin: 0 auto;
}
.conterresul1{
  width: fit-content;
  display: block;
  padding: 0px 10px;
  overflow: hidden;
  float: left;
}
.conterfitflex{
  width:fit-content;
  display: flex;
  align-items: center ;
  align-content: center;
}

/* --- gobernanza --- */

.gobernanza1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.conterintergob1{
  width: 100%;
  position: relative;
  padding: 20px;
}
.padespecialgober{
  padding-top: 50px;
}
.img1gober{
  width: 90%;
  max-width: 450px;
  float: left;
}
.gobernanza2{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
  position: relative;
}
.contergober2{
  width: 100%;
  position: relative;
}
.iconmatriz{
  width: 30px;
  display: block;
  float: left;
}
.conteranio{
  width: 90px;
  display: block;
  float: left;
  padding: 10px;
  border: 1px solid #fff;
  overflow: hidden;
}
.anio2022{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 28px;
}
.conteraniotext{
  width: calc(100% - 90px);
  float: left;
  display: block;
  padding-left: 15px;
}
.flechabajo{
  width: 90%;
  max-width: 40px;
  display: block;
  margin: 0 auto;
}

.conternotagobe{
  width: 100%;
  display: block;
  float: left;
  padding-top: 85%;
}
.contermatriz{
  width: 100%;
  display: block;
  float: left;
  background-image: url("../img/21.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center
}
.contergobernew{
  width: 100%;
  display: block;
  float: left;
  background-image: url("../img/17.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 50px;
}




/* --- colaboracion --- */

.colaboracion1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.imgmujer{
  width: 90%;
  max-width: 240px;
  display: block;
  float: right;
}
.colaboracion2{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
  position: relative;
}

.contercompro1{
  width: 40%;
  display: block;
  position: relative;
  
  padding: 20px;
}
.fechacompro1{
  width: 100%;
  max-width: 30px;
}
.contercompro2{
  width: 34%;
  display: block;
  position: relative;
  float: right;
  padding: 20px;
}
.contertitocolabora{
  width: fit-content;
  float: left;
  display: block;
  padding-right: 30px;
}
.imgods8{
  width: 60px;
  display: block;
  float: left;
}





/* --- compromiso --- */
.conternotacompornew{
  width: 100%;
  display: block;
  float: left;
  padding-top: 63%;
}
.contercompronew{
  width: 100%;
  display: block;
  float: left;
  background-image: url("../img/30.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 50px;
}
.contercomproambinew{
  width: 100%;
  display: block;
  float: left;
  background-image: url("../img/33.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 50px;
}
.conterconsumonew{
  width: 100%;
  display: block;
  float: left;
  background-image: url("../img/36.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 50px;
}
.odscomprosoci{
  height: 60px;
  width: auto;
  display: block;
  position: absolute;
  top: 3px;
  right: 0;
}
.compromiso1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
}

.contercompromiso{
  width: 100%;
  display: block;
  position: relative;
  padding-top: 50px;
  padding: 20px;
}

.ods7{
  width: auto;
  height: 60px;
  display: block;
  float: left;
}

.flechacompro{
  width: 20px;
  display: block;
  margin: 0 auto;
  padding-top: 13px;
}
.flechacompro2{
  width: 20px;
  display: block;
  margin: 0 auto;
}

.contercomprosec{
  width: calc(100% - 20px);
  display: block;
  margin: 20px 20px 20px 0px;
  padding: 10px;
  border: 1px solid #000078;
  height: auto;
}
.textomisscompro {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #ffffff;
  line-height: 21px;
  min-height: 110px;
}
.flechabajo{
  width: 30px;
  display: block;
  float: left;
}
.contadorcompro{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
}
.contadorcomprobold{
  font-weight: 700;
}

.compromiso2{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
}

.contercompromiso2{
  width: 100%;
  display: block;
  position: relative;
  padding: 0px 20px;
}


.contericonconsumos{
  width: 25px;
  display: block;
  float: left;
}
.contericonconsumostext{
  width: calc(100% - 25px); 
  display: block;
  float: left;
  padding-left: 15px;
}
hr.hrblancocompr{
  width: calc(100% - 45px);
  display: inline-grid;
  border-top: 2px solid #ffffff;
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 0px;
  margin: 10px 0px 10px 35px;
}
.padtop180{
  padding-top: 180px;
}


/* --- compromiso --- */

.adhesiones1{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}
.conteradhe{
  width: 85%;
  display: block;
  float: right;
  border-top: 1px solid #3442f7;
  border-right: 1px solid #3442f7;
  border-bottom: 1px solid #3442f7;
  padding: 50px 50px 50px 0px;
}
.img46{
  width: 50px;
  display: block;
  float: left;
}
.titulo1boldadhe{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 60px;
  text-transform: uppercase;
}
.floaleft{
  float: left;
}
.conterespead{
  height: 580px;
}
.minheight175{
  height: auto;
  min-height: 175px;
}
.conterseparazul{
  width: 90%;
  display: block;
  margin: 0px auto 20px auto;
  border-top: 1px solid #2c4295;
}
.conterseparazul2{
  width: 90%;
  display: block;
  margin: 0px auto 20px auto;
  border-top: 1px solid #2c4295;
}
.borderrightazul3{
  border-right: 1px solid #2c4295;
}



/* -- index -- */
.home1{
  width: 100%;
  display: block;
  overflow: hidden;
}
.textomiss22{
  font-family: 'IBM Plex Sans', sans-serif; 
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #ffffff;
}




















/* --- animaciones --- */



.ani1animated{
  animation: fadeIn;
  animation-delay: 3s;
}
.ani2{
  stroke: #ffffff;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 4315;
  fill: none;
  stroke-dashoffset: -4315;
}
.ani2animate{
  animation: lineaanimate 3s forwards;
  animation-delay: .3s;
}
.ani3animated{
  animation: fadeIn;
  animation-delay: 3.8s;
}
.ani4animated{
  animation: fadeIn;
  animation-delay: 3.5s;
}

.ani5animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani6animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani7animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani8animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani9animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani10animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani11animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani12animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani13animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani14animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani15animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani16animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani17animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani18animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani19animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani20animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani21animate{
  animation: fadeInRight;
  animation-delay: .9s;
}
.ani22animate{
  animation: fadeInUp;
  animation-delay: 1.2s;
}
.ani23animate{
  animation: fadeInUp;
  animation-delay: 1.5s;
}

.ani24animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani25animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani26animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani27animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani28animate{
  animation: fadeInUp;
  animation-delay: .9s;
}

.ani29animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani30animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani31animate{
  animation: fadeInRight;
  animation-delay: .6s;
}
.ani32animate{
  animation: fadeInRight;
  animation-delay: .9s;
}
.ani33animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani34animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani35animate{
  animation: fadeInUp;
  animation-delay: .6s;
}
.ani36animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani37animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani38animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani39animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani40animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani41animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani42animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani43animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani44animate{
  animation: fadeIn;
  animation-delay: .9s;
}

.ani45animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani46animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani47animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani48animate{
  animation: fadeIn;
  animation-delay: 1.2s;
}
.ani49animate{
  animation: fadeIn;
  animation-delay: 1.5s;
}
.ani50animate{
  animation: fadeIn;
  animation-delay: 1.8s;
}
.ani51animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani52animate{
  animation: fadeIn;
  animation-delay: .6s;
}












@keyframes lineaanimate {
  to {
    stroke-dashoffset: 0;
  }
}